Merge branch 'fix-cameraOption' into 'all'

Fix camera option

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

src/components/LiveVideo/LiveVideo.vue

@@ -4,9 +4,7 @@
 
     <div class="loadingError" v-if="isVideoLoadingFailed">视频加载失败</div>
 
-    <video v-loading="true" ref="videoRef" autoplay muted class="video-js video-content">
-      <source :src="props.url" />
-    </video>
+    <video v-loading="true" ref="videoRef" autoplay muted class="video-js video-content"></video>
   </div>
 </template>
 
@@ -65,7 +63,7 @@
     videoElement.removeEventListener('timeupdate', handleTimeUpdate);
     videoElement.addEventListener('timeupdate', handleTimeUpdate);
 
-    player.attachMediaElement(videoElement);
+    player.attachMediaElement(videoElement as HTMLVideoElement);
     player.load();
     player.on(mpegts.Events.MEDIA_INFO, () => {
       console.log('视频开始播放');

src/views/cameras/preview/components/CameraTree/CameraTreeOldVersion.vue

@@ -49,7 +49,7 @@
                 </el-icon>
                 <el-icon class="invalidCamera" v-if="isInvalid(data)"><WarningFilled /></el-icon>
               </span>
-              {{ node.label }}
+              {{ node.label }}{{ getCameraCode(data) }}
             </span>
           </template>
         </el-tree>
@@ -98,6 +98,12 @@
     }
   };
 
+  const getCameraCode = (data: any) => {
+    if (data.cameraId) {
+      return `[${data.code}]`;
+    }
+  };
+
   const isSelect = (data) =>
     data.nodeType === CameraTreeNodeType.camera && data.id === Number(cameraId.value);
 

src/views/datamanager/playback/Playback.vue

@@ -170,7 +170,7 @@
     background: #fff;
 
     .camera-tree {
-      width: 250px;
+      // width: 250px;
       flex-shrink: 0;
       border: 1px solid #f0f2f5;
       margin: 5px;

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

@@ -211,11 +211,19 @@
 
   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();
+    if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
+      //计算时刻帧进给的间隔
+      const minuteLen = Math.ceil(
+        (dateRange.value[1].valueOf() - dateRange.value[0].valueOf()) / (1000 * 60),
+      );
+      const durMinute = minuteLen > 10 ? 60 : 6;
+      //时刻帧递进
+      if (secondMargin.value !== undefined) {
+        const currentTime = Math.floor(playSeconds) + secondMargin.value;
+        if (currentTime > min && currentTime % durMinute === 0) {
+          min = currentTime;
+          nvrSliderRef.value.pushTime();
+        }
       }
     }
   };

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

@@ -18,6 +18,10 @@
 
   const emit = defineEmits(['updateNvr']);
 
+  const minLength = 800;
+  const sliderScale = ref(1);
+  const sliderLength = ref(800);
+
   // 定义长条的位置
   const sliderPosition = ref(0);
 
@@ -43,8 +47,8 @@
     sliderPosition.value =
       delta > props.startPosition
         ? props.startPosition
-        : delta < props.startPosition - durationMins.value
-        ? props.startPosition - durationMins.value
+        : delta < props.startPosition - sliderLength.value
+        ? props.startPosition - sliderLength.value
         : delta;
   };
 
@@ -102,18 +106,20 @@
   // 计算停驻时间
   const onTime = computed(() => {
     const res =
-      Number(props.startTime.valueOf()) + (props.startPosition - sliderPosition.value) * 1000 * 60;
+      Number(props.startTime.valueOf()) +
+      ((props.startPosition - sliderPosition.value) / sliderScale.value) * 1000 * 60;
     return new Date(res);
   });
 
   // 推动时间前进
   const pushTime = () => {
-    const delta = sliderPosition.value - 1;
+    const detaDistance = durationMins.value >= 10 ? 1 : 0.1;
+    const delta = sliderPosition.value - detaDistance * sliderScale.value;
     sliderPosition.value =
       delta > props.startPosition
         ? props.startPosition
-        : delta < props.startPosition - durationMins.value
-        ? props.startPosition - durationMins.value
+        : delta < props.startPosition - sliderLength.value
+        ? props.startPosition - sliderLength.value
         : delta;
   };
 
@@ -125,7 +131,13 @@
     const marginMins = startTime.getMinutes();
     const marginMinsRight = endTime.getMinutes();
     // 拉动条的长度设置为分钟数
-    container!.style.width = `${durationMins}px`;
+    if (durationMins >= minLength) {
+      container!.style.width = `${durationMins}px`;
+    } else {
+      container!.style.width = `${minLength}px`;
+      sliderScale.value = minLength / durationMins;
+      sliderLength.value = durationMins >= 800 ? durationMins : 800;
+    }
     // 计算持续小时数 向下取整
     const duration = Math.floor(durationMins / 60) + (marginMins > marginMinsRight ? 1 : 0);
     if (marginMins === 0) {
@@ -147,14 +159,14 @@
       // 刻度元素
       const mark = document.createElement('div');
       mark.className = 'time-slider-mark';
-      mark.style.left = `${i * 60 - marginMins}px`;
+      mark.style.left = `${(i * 60 - marginMins) * sliderScale.value}px`;
       container?.appendChild(mark);
 
       // 刻度文本
       const text = document.createElement('span');
       text.className = 'time-slider-text';
       text.textContent = `${(startHours + i) % 24}:00`;
-      text.style.left = `${i * 60 - marginMins - 12}px`;
+      text.style.left = `${(i * 60 - marginMins) * sliderScale.value - 12}px`;
       container?.appendChild(text);
     }
   };
@@ -185,7 +197,9 @@
       }
       const vPoint = document.createElement('div');
       vPoint.className = 'violations-point';
-      vPoint.style.left = `${(vTime.valueOf() - startTime.valueOf()) / (1000 * 60) - 5}px`;
+      vPoint.style.left = `${
+        ((vTime.valueOf() - startTime.valueOf()) / (1000 * 60)) * sliderScale.value - 5
+      }px`;
       vLine.appendChild(vPoint);
     });
   };

utils/devProxy/utils.ts

@@ -16,6 +16,7 @@ export const createProxyList = (devProxy: PROXY_TYPE) =>
     ['/push_stream_host_shangfeiyuan/', devProxy.push_stream_host_shangfeiyuan],
     ['/push_stream_host_beiyan/', devProxy.push_stream_host_beiyan],
     ['/push_stream_host_default/', devProxy.push_stream_host_default],
+    ['/push_stream_host_zjc/', devProxy.push_stream_host_default],
     // 这个要放在最后
     ['/push_stream_host/', devProxy.push_stream_host],
   ] as ProxyList;