From 5a845a0e1a80c9ededd3c50c0be1a7eb9b207e3a Mon Sep 17 00:00:00 2001
From: XieYongHong <18010623010@163.com>
Date: Thu, 13 Jul 2023 13:42:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=9B=9E=E6=94=BE=E8=BF=9B=E5=BA=A6=E6=97=A0=E6=B3=95=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/media/Cascade/Channel/index.vue    |  2 +-
 src/views/media/Device/Playback/index.less   |  2 -
 src/views/media/Device/Playback/index.vue    |  2 +-
 src/views/media/Device/Playback/timeLine.vue | 67 +++++++++++---------
 4 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/views/media/Cascade/Channel/index.vue b/src/views/media/Cascade/Channel/index.vue
index 5008328e..ddef87d9 100644
--- a/src/views/media/Cascade/Channel/index.vue
+++ b/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' }],
                 }"
diff --git a/src/views/media/Device/Playback/index.less b/src/views/media/Device/Playback/index.less
index bbe961c2..486bbc8b 100644
--- a/src/views/media/Device/Playback/index.less
+++ b/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;
             }
         }
     }
diff --git a/src/views/media/Device/Playback/index.vue b/src/views/media/Device/Playback/index.vue
index b766567a..cf6d0953 100644
--- a/src/views/media/Device/Playback/index.vue
+++ b/src/views/media/Device/Playback/index.vue
@@ -37,7 +37,7 @@
                             }
                         "
                         :on-time-update="
-                            (e: any) => {
+                            (e) => {
                                 playTime = e;
                             }
                         "
diff --git a/src/views/media/Device/Playback/timeLine.vue b/src/views/media/Device/Playback/timeLine.vue
index 158ff045..51bcd277 100644
--- a/src/views/media/Device/Playback/timeLine.vue
+++ b/src/views/media/Device/Playback/timeLine.vue
@@ -24,8 +24,8 @@
                     "
                 ></div>
             </div>
-            <div id="btn" class="time-line-btn"></div>
-            <div id="time" class="time-line">
+            <div id="btn" v-show="timePosition" class="time-line-btn" :style="{left: timePosition + 'px' }"></div>
+            <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 = () => {
-    if (
-        props.playTime &&
-        props.playTime >= startT.value &&
-        props.playTime <= endT.value &&
-        props.data &&
-        props.data.length
-    ) {
-        setTimeAndPosition((props.playTime - startT.value) / 3600000 / 24);
-    }
-};
-watch(
-    () => props.playTime,
-    () => {
-        playTimeChange();
-    },
-);
-watch(
-    () => startT.value,
-    () => {
-        playTimeChange();
-    },
-);
+const timePosition = computed(() => {
+  console.log(props.playTime, startT.value, LineContentSize.width.value)
+  console.log(((props.playTime - startT.value) / 3600000 / 24) * LineContentSize.width.value)
+  return ((props.playTime - startT.value) / 3600000 / 24) * LineContentSize.width.value
+})
+
+// const playTimeChange = () => {
+//     if (
+//         props.playTime &&
+//         props.playTime >= startT.value &&
+//         props.playTime <= endT.value &&
+//         props.data &&
+//         props.data.length
+//     ) {
+//       console.log(props.playTime, props.playTime - startT.value)
+//         setTimeAndPosition((props.playTime - startT.value) / 3600000 / 24);
+//     }
+// };
+
+// watch(
+//     () => props.playTime,
+//     () => {
+//         playTimeChange();
+//     },
+// );
+// watch(
+//     () => startT.value,
+//     () => {
+//         playTimeChange();
+//     },
+// );
 
 const handleProgress = (event: any, item: any) => {
     const pos = LineContent.value?.getBoundingClientRect();