0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
XieYongHong 2023-07-13 13:42:08 +08:00
parent d99a07d1a4
commit 5a845a0e1a
4 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/media/Cascade/Channel/index.vue
View File

@ -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' }],
}"

2
src/views/media/Device/Playback/index.less
View File

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

2
src/views/media/Device/Playback/index.vue
View File

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

67
src/views/media/Device/Playback/timeLine.vue
View File

@ -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();