fix: 解决回放进度条宽度错误问题

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

@@ -20,10 +20,6 @@ const props = defineProps<Props>();
 
 // type 为local时有效，0：未下载； 1：下载中：2：已下载
 const status = ref(props.item?.isServer ? 2 : 0);
-// const status = computed({
-//     get: () => (props.item?.isServer ? 2 : 0),
-//     set: (val: number) => {},
-// });
 
 const getLocalIcon = (s: number) => {
     if (s === 0) {
@@ -75,5 +71,3 @@ const handleClick = () => {
     }
 };
 </script>
-
-<style lang="less" scoped></style>

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

@@ -2,12 +2,14 @@
 <template>
     <page-container>
         <div class="playback-warp">
+            <!-- 播放器/进度条 -->
             <div class="playback-left">
                 <LivePlayer
                     ref="player"
                     :src="url"
                     width="758px"
                     height="462px"
+                    type="mp4"
                 />
                 <TimeLine
                     ref="playTimeNode"
@@ -170,7 +172,6 @@ const historyList = ref<recordsItemType[]>([]);
 const time = ref<Dayjs | undefined>(undefined);
 const loading = ref(false);
 const cloudTime = ref<any>();
-// const location = ref();
 const player = ref<any>();
 const playStatus = ref(0); // 播放状态, 0 停止， 1 播放， 2 暂停, 3 播放完成
 const playTime = ref(0);
@@ -184,8 +185,6 @@ const channelId = computed(() => route.query.channelId as string);
 const deviceType = ref('');
 
 const queryLocalRecords = async (date: Dayjs) => {
-    console.log('date: ', date);
-
     playStatus.value = 0;
     url.value = '';
 
@@ -273,6 +272,10 @@ const cloudView = (startTime: number, endTime: number) => {
     queryServiceRecords(time.value!);
 };
 
+/**
+ * 下载到云端
+ * @param item 
+ */
 const downloadClick = async (item: recordsItemType) => {
     const downloadUrl = playBackApi.downLoadFile(item.id);
     const downNode = document.createElement('a');
@@ -302,6 +305,10 @@ onMounted(() => {
     }
 });
 
+/**
+ * 播放进度条点击
+ * @param times
+ */
 const handleTimeLineChange = (times: any) => {
     if (times) {
         playNowTime.value = Number(times.startTime.valueOf());
@@ -332,9 +339,11 @@ watch(
     },
 );
 
+/**
+ * 日历操作
+ * @param date 
+ */
 const handlePanelChange = (date: any) => {
-    console.log('type: ', typeof date);
-    console.log('date: ', date);
     time.value = date;
     if (type.value === 'cloud') {
         queryServiceRecords(date);
@@ -343,7 +352,10 @@ const handlePanelChange = (date: any) => {
     }
 };
 
-// 播放/暂停
+/**
+ * 播放/暂停
+ * @param _startTime 
+ */
 const handlePlay = (_startTime: any) => {
     if (playStatus.value === 0 || _startTime !== playNowTime.value) {
         if (playTimeNode.value) {

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

@@ -37,6 +37,7 @@ import { message } from 'ant-design-vue';
 import type { recordsItemType } from './typings';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import { useElementSize } from '@vueuse/core';
 
 export type TimeChangeType = {
     endTime: Dayjs;
@@ -77,18 +78,17 @@ const endT = ref<number>(
 const list = ref<any[]>([]);
 const playTime = ref<number>(0);
 const LineContent = ref<HTMLDivElement>();
-// const LineContentSize = LineContent.value;
-const LineContentSize = ref({ width: 100 });
+const LineContentSize = useElementSize(LineContent);
 
 const setTimeAndPosition = (ob: number) => {
     const oBtn = document.getElementById('btn');
     const oTime = document.getElementById('time');
 
-    if (oBtn && oTime && LineContentSize.value.width) {
+    if (oBtn && oTime && LineContentSize.width) {
         oBtn.style.visibility = 'visible';
-        oBtn.style.left = `${ob * LineContentSize.value.width}px`;
+        oBtn.style.left = `${ob * LineContentSize.width.value}px`;
         oTime.style.visibility = 'visible';
-        oTime.style.left = `${ob * LineContentSize.value.width - 15}px`;
+        oTime.style.left = `${ob * LineContentSize.width.value - 15}px`;
     }
 };
 
@@ -214,7 +214,7 @@ const getLineItemStyle = (
     endTime: number,
 ): { left: string; width: string } => {
     const start = startTime - startT.value > 0 ? startTime - startT.value : 0;
-    const _width = LineContentSize.value.width!;
+    const _width = LineContentSize.width.value!;
     const itemWidth = ((endTime - startTime) / (24 * 3600000)) * _width;
     return {
         left: `${(start / (24 * 3600000)) * _width}px`,