feat: 滑动条时间和下载时间排除不合理情况

.env.development

@@ -20,18 +20,7 @@ VITE_DROP_CONSOLE = true
 # VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68/skyeye-admin-api"],[],["/eye_api_bak","http://192.168.13.68/eye_api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"]]
 # 中建材 staff
 #VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68:70/skyeye-admin-api"],["/eye_api_bak","http://192.168.13.68:70/eye_api"],["/push_stream_host","http://192.168.13.68:70/push_stream_host"],["/skyeye-login","http://192.168.13.68:70/skyeye-login"],["/ws_api_bak","ws://192.168.13.68:70/ws_api_bak"]]
-
-
-
-
-# VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68/skyeye-admin-api"],[],["/eye_api_bak","http://192.168.13.68/eye_api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
-# VITE_PROXY=[["/skyeye-admin-api","http://192.168.23.182:8800/api"],[],["/eye_api_bak","http://192.168.23.182:8800"],["/push_stream_host","http://192.168.23.182/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.23.182/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
-VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.234:8243/api"],[],["/eye_api_bak","http://192.168.22.234:8243"],["/push_stream_host","http://192.168.22.234/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.22.234/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
-
-
-
-
-
+VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68/skyeye-admin-api"],[],["/eye_api_bak","http://192.168.13.68/eye_api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"],["/nvr_download","http://192.168.13.68/nvr_download"]]
 # VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.163:8800/api"],[],["/eye_api_bak","http://192.168.22.163:8800/api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"]]
 #VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.121:8800/api"],["/eye_api_bak","http://192.168.22.121:8800/api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
 # VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.163:8800/api"],[],["/eye_api_bak","http://192.168.22.163:8800/api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]

src/api/datamanagement/playback.ts

@@ -49,5 +49,6 @@ export const getNvrDownloadUrl = (data: GetReplayNvrBody) => {
     url: '/nvrOption/download',
     method: 'post',
     data,
+    timeout: 100000000000,
   });
 };

src/views/datamanager/playback/components/NvrCameraView.vue

@@ -2,7 +2,7 @@
   <div class="nvr-camera-view">
     <div class="nvr-tips">
       <el-icon size="18" color="#409eff" style="margin: 11px 8px 11px 16px"><InfoFilled /></el-icon>
-      可以回看和下载三个月内的视频回放数据；默认显示直播画面</div
+      默认播放当前实时视频画面，可选择具体日期和时间进行回看，最长支持90天内视频内容回看</div
     >
     <div class="nvr-date-picker">
       <el-date-picker
@@ -86,13 +86,20 @@
   const downloadUrl = ref();
 
   const judgeDate = (date: Date[]) => {
-    // 判断日期范围大于半小时小于三个月
     if (date && date.length === 2) {
       const startTime = new Date(date[0]);
       const endTime = new Date(date[1]);
       if ((endTime.getTime() - startTime.getTime()) / (1000 * 60) < 1) {
         ElMessage({
-          message: `选择回放时间范围不小于1分钟`,
+          message: `选择回放时间范围需大于1分钟`,
+          type: 'error',
+        });
+        dateRange.value = undefined;
+        return;
+      }
+      if (endTime > new Date()) {
+        ElMessage({
+          message: `结束时间不能在当前时间之后`,
           type: 'error',
         });
         dateRange.value = undefined;
@@ -116,7 +123,12 @@
     };
     confirmDate.value = true;
     if (nowTime) {
-      nvrParams.startTime = dayjs(nowTime).format('YYYY-MM-DD HH:mm:ss');
+      const nowTimeMin = new Date(nowTime.setSeconds(0));
+      if (nowTimeMin < dateRange.value[0]) {
+        nvrParams.startTime = dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
+      } else {
+        nvrParams.startTime = dayjs(nowTimeMin).format('YYYY-MM-DD HH:mm:ss');
+      }
     }
     getReplayNvr(nvrParams).then((res) => {
       nvrUrl.value = res.data;
@@ -143,30 +155,33 @@
     if (!confirmDate.value) {
       return;
     }
+    const nowTimeMin = new Date(nvrSliderRef.value.onTime.setSeconds(0));
     if (isStart) {
       const end = nvrTimeSelectRef.value.endTime;
-      if (end.length > 0 && new Date(end) <= new Date(nvrSliderRef.value.onTime)) {
+      if (end.length > 0 && new Date(end) <= nowTimeMin) {
         ElMessage({
           message: `结束时间不早于开始时间`,
           type: 'error',
         });
         return;
       }
-      nvrTimeSelectRef.value.startTime = dayjs(nvrSliderRef.value.onTime).format(
-        'YYYY-MM-DD HH:mm:ss',
-      );
+      nvrTimeSelectRef.value.startTime = dayjs(
+        nowTimeMin < dateRange.value[0] ? dateRange.value[0] : nowTimeMin,
+      ).format('YYYY-MM-DD HH:mm:ss');
     } else {
       const start = nvrTimeSelectRef.value.startTime;
-      if (start.length > 0 && new Date(start) >= new Date(nvrSliderRef.value.onTime)) {
+      if (start.length > 0 && new Date(start) >= nowTimeMin) {
         ElMessage({
           message: `开始时间不晚于结束时间`,
           type: 'error',
         });
         return;
       }
-      nvrTimeSelectRef.value.endTime = dayjs(nvrSliderRef.value.onTime).format(
-        'YYYY-MM-DD HH:mm:ss',
-      );
+      nvrTimeSelectRef.value.endTime = dayjs(
+        new Date(nowTimeMin.setMinutes(nowTimeMin.getMinutes() + 1)) > dateRange.value[1]
+          ? dateRange.value[1]
+          : nowTimeMin,
+      ).format('YYYY-MM-DD HH:mm:ss');
     }
   };
 

src/views/datamanager/playback/components/NvrSlider.vue

@@ -96,7 +96,7 @@
 
   // 时间条长度计算
   const durationMins = computed(() => {
-    return Math.floor((props.endTime.valueOf() - props.startTime.valueOf()) / (1000 * 60));
+    return Math.ceil((props.endTime.valueOf() - props.startTime.valueOf()) / (1000 * 60));
   });
 
   // 计算停驻时间
@@ -127,6 +127,20 @@
     container!.style.width = `${durationMins}px`;
     // 计算持续小时数 向下取整
     const duration = Math.floor(durationMins / 60);
+    if (marginMins === 0) {
+      // 添加第一个小时
+      const mark = document.createElement('div');
+      mark.className = 'time-slider-mark';
+      mark.style.left = `${marginMins}px`;
+      container?.appendChild(mark);
+
+      // 添加第一个小时文本
+      const text = document.createElement('span');
+      text.className = 'time-slider-text';
+      text.textContent = `${startHours % 24}:00`;
+      text.style.left = `${marginMins}px`;
+      container?.appendChild(text);
+    }
 
     for (let i = 1; i <= duration; i++) {
       // 刻度元素
@@ -139,7 +153,7 @@
       const text = document.createElement('span');
       text.className = 'time-slider-text';
       text.textContent = `${(startHours + i) % 24}:00`;
-      text.style.left = `${i * 60 - marginMins}px`;
+      text.style.left = `${i * 60 - marginMins - 12}px`;
       container?.appendChild(text);
     }
   };
@@ -224,13 +238,13 @@
   .time-slider-mark {
     position: absolute;
     width: 1px;
-    height: 15px;
-    background-color: #000;
+    height: 8px;
+    background-color: #979797;
   }
   .time-slider-text {
     position: absolute;
-    top: 15px;
-    color: #000;
+    top: 10px;
+    color: #333333;
   }
   .violations-line {
     overflow: hidden;