Merge branch 'wyf-nvr' into 'dev'

bug修改

See merge request skyeye/skyeye_frontend/skyeye-admin!82

src/components/LiveVideo/LiveVideo.vue

@@ -26,14 +26,15 @@
 
   const emit = defineEmits(['timeUpdate']);
 
-  // /live/video/aa.flv?starttime=202410101001}
-
   let player: mpegts.Player | null;
 
   const loadingText = computed(() => {
     if (restartNum.value === 0) return '视频加载中...';
     return `正在尝试第${restartNum.value}次重连...`;
   });
+  const handleTimeUpdate = (event) => {
+    emit('timeUpdate', event.target.currentTime);
+  };
 
   const initPlay = () => {
     const videoElement = document.getElementById('video') as HTMLMediaElement;
@@ -49,20 +50,6 @@
       },
     );
 
-    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);
 

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

@@ -109,6 +109,9 @@
       }
     }
   };
+
+  // 播放时间变化前秒数
+  const secondMargin = ref<number>();
   const handleNvrUrl = (nowTime?: Date | null) => {
     if (!dateRange.value) {
       return;
@@ -121,16 +124,20 @@
       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) => {
+      min = 0;
       nvrUrl.value = res.data;
     });
   };
@@ -192,8 +199,15 @@
     }
   };
 
-  const handleTimeUpdate = () => {
-    nvrSliderRef.value.pushTime();
+  let min = 0;
+  const handleTimeUpdate = (playSeconds: number) => {
+    if (secondMargin.value !== undefined) {
+      const currentTime = Math.floor(playSeconds) + secondMargin.value;
+      if (currentTime > min && currentTime % 60 === 0) {
+        min = currentTime;
+        nvrSliderRef.value.pushTime();
+      }
+    }
   };
 
   const handleDownloadNvr = () => {

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

@@ -57,12 +57,12 @@
   };
 
   onMounted(() => {
-    createTimeline(props.startTime, durationMins.value);
+    createTimeline(props.startTime, props.endTime, durationMins.value);
     createViolationsLine([], props.startTime, props.endTime);
     sliderPosition.value = props.startPosition;
 
     watch([() => props.startTime, () => props.endTime], () => {
-      createTimeline(props.startTime, durationMins.value);
+      createTimeline(props.startTime, props.endTime, durationMins.value);
       sliderPosition.value = props.startPosition;
     });
 
@@ -117,16 +117,17 @@
         : delta;
   };
 
-  const createTimeline = (startTime: Date, durationMins: number) => {
+  const createTimeline = (startTime: Date, endTime: Date, durationMins: number) => {
     const container = document.getElementById('timeline');
     container!.innerHTML = '';
 
     const startHours = startTime.getHours();
     const marginMins = startTime.getMinutes();
+    const marginMinsRight = endTime.getMinutes();
     // 拉动条的长度设置为分钟数
     container!.style.width = `${durationMins}px`;
     // 计算持续小时数 向下取整
-    const duration = Math.floor(durationMins / 60);
+    const duration = Math.floor(durationMins / 60) + (marginMins > marginMinsRight ? 1 : 0);
     if (marginMins === 0) {
       // 添加第一个小时
       const mark = document.createElement('div');

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;
         }
       }