fix: 优化视频回放进度无法显示

src/views/media/Cascade/Channel/index.vue

@@ -7,7 +7,7 @@
                 ref="listRef"
                 model="table"
                 :columns="columns"
-                :request="(e:any) => CascadeApi.queryBindChannel(route?.query.id as string, e)"
+                :request="(e) => CascadeApi.queryBindChannel(route?.query.id, e)"
                 :defaultParams="{
                     sorts: [{ name: 'name', order: 'desc' }],
                 }"

src/views/media/Device/Playback/index.less

@@ -98,7 +98,6 @@
                 height: 19px;
                 background-color: @primary-color;
                 border-radius: 2px;
-                visibility: hidden;
             }
 
             .time-line {
@@ -112,7 +111,6 @@
                 background-color: #d9d9d9;
                 border-radius: 2px;
                 box-shadow: 0 0 12px rgba(#000, 0.15);
-                visibility: hidden;
             }
         }
     }

src/views/media/Device/Playback/index.vue

@@ -37,7 +37,7 @@
                             }
                         "
                         :on-time-update="
-                            (e: any) => {
+                            (e) => {
                                 playTime = e;
                             }
                         "

src/views/media/Device/Playback/timeLine.vue

@@ -24,8 +24,8 @@
                     "
                 ></div>
             </div>
-            <div id="btn" class="time-line-btn"></div>
+            <div id="btn" v-show="timePosition" class="time-line-btn" :style="{left: timePosition + 'px' }"></div>
-            <div id="time" class="time-line">
+            <div id="time" v-show="timePosition" class="time-line" :style="{left: (timePosition - 15) + 'px' }">
                 {{ dayjs(playTime || 0).format('HH:mm:ss') }}
             </div>
         </div>
@@ -76,7 +76,7 @@ const endT = ref<number>(
     ).getTime(),
 );
 const list = ref<any[]>([]);
-const playTime = ref<number>(0);
+const _playTime = ref<number>(0);
 const LineContent = ref<HTMLDivElement>();
 const LineContentSize = useElementSize(LineContent);
 
@@ -107,7 +107,7 @@ const onChange = (
     deviceId: string,
     channelId: string,
 ) => {
-    playTime.value = startTime;
+  _playTime.value = startTime;
     props.onChange({
         startTime: dayjs(startTime),
         endTime: dayjs(endTime),
@@ -132,11 +132,11 @@ const playByStartTime = (time: any) => {
 playByStartTime(0);
 
 const onNextPlay = () => {
-    if (playTime.value) {
+    if (_playTime.value) {
         // 查找下一个视频
         const nowIndex = props.data.findIndex((item) => {
             const startTime = item.startTime || item.mediaStartTime;
-            return startTime === playTime.value;
+            return startTime === _playTime.value;
         });
         // 是否为最后一个
         if (nowIndex !== props.data.length - 1) {
@@ -216,35 +216,44 @@ const getLineItemStyle = (
     const start = startTime - startT.value > 0 ? startTime - startT.value : 0;
     const _width = LineContentSize.width.value!;
     const itemWidth = ((endTime - startTime) / (24 * 3600000)) * _width;
+  console.log()
     return {
         left: `${(start / (24 * 3600000)) * _width}px`,
         width: `${itemWidth < 1 ? 1 : itemWidth}px`,
     };
 };
 
-const playTimeChange = () => {
+const timePosition = computed(() => {
-    if (
+  console.log(props.playTime, startT.value, LineContentSize.width.value)
-        props.playTime &&
+  console.log(((props.playTime - startT.value) / 3600000 / 24) * LineContentSize.width.value)
-        props.playTime >= startT.value &&
+  return ((props.playTime - startT.value) / 3600000 / 24) * LineContentSize.width.value
-        props.playTime <= endT.value &&
+})
-        props.data &&
+
-        props.data.length
+// const playTimeChange = () => {
-    ) {
+//     if (
-        setTimeAndPosition((props.playTime - startT.value) / 3600000 / 24);
+//         props.playTime &&
-    }
+//         props.playTime >= startT.value &&
-};
+//         props.playTime <= endT.value &&
-watch(
+//         props.data &&
-    () => props.playTime,
+//         props.data.length
-    () => {
+//     ) {
-        playTimeChange();
+//       console.log(props.playTime, props.playTime - startT.value)
-    },
+//         setTimeAndPosition((props.playTime - startT.value) / 3600000 / 24);
-);
+//     }
-watch(
+// };
-    () => startT.value,
+
-    () => {
+// watch(
-        playTimeChange();
+//     () => props.playTime,
-    },
+//     () => {
-);
+//         playTimeChange();
+//     },
+// );
+// watch(
+//     () => startT.value,
+//     () => {
+//         playTimeChange();
+//     },
+// );
 
 const handleProgress = (event: any, item: any) => {
     const pos = LineContent.value?.getBoundingClientRect();