fix: 进度条时间更新修改&下载时间按钮加入气泡提示

src/components/LiveVideo/LiveVideo.vue

@@ -22,6 +22,7 @@
 
   const props = defineProps<{
     url: string;
+    secMargin?: number;
   }>();
 
   const emit = defineEmits(['timeUpdate']);
@@ -35,6 +36,17 @@
     return `正在尝试第${restartNum.value}次重连...`;
   });
 
+  let min = 0;
+  const handleTimeUpdate = (event) => {
+    if (props.secMargin !== undefined) {
+      const currentTime = Math.floor(event.target.currentTime) + props.secMargin;
+      if (currentTime > min && currentTime % 60 === 0) {
+        min = currentTime;
+        emit('timeUpdate');
+      }
+    }
+  };
+
   const initPlay = () => {
     const videoElement = document.getElementById('video') as HTMLMediaElement;
     player = mpegts.createPlayer(
@@ -49,22 +61,11 @@
       },
     );
 
-    let min = 0;
-    const handleTimeUpdate = (event) => {
-      const currentTime = Math.floor(event.target.currentTime);
-      if (currentTime > min && currentTime % 60 === 0) {
-        min = currentTime;
-        emit('timeUpdate');
-      }
-      // const currentMin = Math.floor(event.target.currentTime / 60);
-      // if (currentMin > min) {
-      //   min = currentMin;
-      //   emit('timeUpdate', currentMin);
-      // }
-      // console.log(event.target.currentTime);
-    };
-    videoElement.removeEventListener('timeupdate', handleTimeUpdate);
-    videoElement.addEventListener('timeupdate', handleTimeUpdate);
+    if (props.secMargin !== undefined) {
+      min = 0;
+      videoElement.removeEventListener('timeupdate', handleTimeUpdate);
+      videoElement.addEventListener('timeupdate', handleTimeUpdate);
+    }
 
     player.attachMediaElement(videoElement);
     player.load();

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

@@ -22,7 +22,12 @@
       >
     </div>
     <div style="width: 960px; height: 540px">
-      <LiveVideo v-if="videoUrl" :url="videoUrl" @time-update="handleTimeUpdate" />
+      <LiveVideo
+        v-if="videoUrl"
+        :url="videoUrl"
+        :sec-margin="secondMargin"
+        @time-update="handleTimeUpdate"
+      />
     </div>
     <div class="nvr-slider" v-if="confirmDate">
       <NvrSlider
@@ -109,6 +114,9 @@
       }
     }
   };
+
+  // 播放时间变化前秒数
+  const secondMargin = ref<number>();
   const handleNvrUrl = (nowTime?: Date | null) => {
     if (!dateRange.value) {
       return;
@@ -121,13 +129,16 @@
       startTime: dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss'),
       endTime: dayjs(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss'),
     };
+    secondMargin.value = dateRange.value[0].getSeconds();
     confirmDate.value = true;
     if (nowTime) {
       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');
+        // secondMargin.value = dateRange.value[0].getSeconds();
       } else {
         nvrParams.startTime = dayjs(nowTimeMin).format('YYYY-MM-DD HH:mm:ss');
+        secondMargin.value = nowTimeMin.getSeconds();
       }
     }
     getReplayNvr(nvrParams).then((res) => {

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

@@ -11,16 +11,23 @@
         开始时间：
         <el-input
           v-model="startTime"
-          style="width: 160px"
+          style="width: 160px; margin: 0 8px"
           disabled
           placeholder="拖动进度条选择时间"
         />
-        <img
-          @click="callSetTime(true)"
-          style="cursor: pointer"
-          src="@\assets\icons\icon-picker.png"
-          alt=""
-        />
+        <el-tooltip
+          class="picker-tooltip"
+          effect="dark"
+          content="请先拖动进度条，再点击按钮选择时间"
+          placement="top"
+        >
+          <img
+            @click="callSetTime(true)"
+            style="cursor: pointer"
+            src="@\assets\icons\icon-picker.png"
+            alt=""
+          />
+        </el-tooltip>
         <el-icon class="icon-refresh" :size="18">
           <Refresh @click="startTime = ''" />
         </el-icon>
@@ -29,16 +36,23 @@
         结束时间：
         <el-input
           v-model="endTime"
-          style="width: 160px"
+          style="width: 160px; margin: 0 8px"
           disabled
           placeholder="拖动进度条选择时间"
         />
-        <img
-          @click="callSetTime(false)"
-          style="cursor: pointer"
-          src="@\assets\icons\icon-picker.png"
-          alt=""
-        />
+        <el-tooltip
+          class="picker-tooltip"
+          effect="dark"
+          content="请先拖动进度条，再点击按钮选择时间"
+          placement="top"
+        >
+          <img
+            @click="callSetTime(false)"
+            style="cursor: pointer"
+            src="@\assets\icons\icon-picker.png"
+            alt=""
+          />
+        </el-tooltip>
         <el-icon class="icon-refresh" :size="18">
           <Refresh @click="endTime = ''" />
         </el-icon>
@@ -58,7 +72,7 @@
   import { ref } from 'vue';
   import { ElInput } from 'element-plus';
   import { Refresh } from '@element-plus/icons-vue';
-  import { ElIcon } from 'element-plus';
+  import { ElIcon, ElTooltip } from 'element-plus';
 
   const startTime = ref('');
   const endTime = ref('');
@@ -119,14 +133,20 @@
       padding: 12px 22px 0 22px;
       .time-picker {
         margin-bottom: 12px;
-        img {
-          display: inline;
-          margin-left: 20px;
+        display: flex;
+        align-items: center;
+        .picker-tooltip {
+          width: 110px;
+          margin-top: 10px;
+
+          img {
+            display: inline;
+            margin-left: 20px;
+          }
         }
         .icon-refresh {
           color: #1890ff;
-          top: 5px;
-          margin: 0 5px;
+          margin: 0 8px;
           cursor: pointer;
         }
       }