diff --git a/src/views/equipmentList/list.vue b/src/views/equipmentList/list.vue index 85e7651..84a0224 100644 --- a/src/views/equipmentList/list.vue +++ b/src/views/equipmentList/list.vue @@ -406,7 +406,7 @@ const handleSee = async (row?: any) => { monitorVideoUrl.value = videosStore.hisUrl || ''; if (!monitorVideoUrl.value) { - proxy?.$modal.msgWarning('该设备未登录或无法获取直播地址,已停止播放旧画面'); + //proxy?.$modal.msgWarning('该设备未登录或无法获取直播地址,已停止播放旧画面'); initVideoResizeObserver(); return; } @@ -414,6 +414,7 @@ const handleSee = async (row?: any) => { // 等待 DOM 更新后初始化 Hls await nextTick(); initHls(); + // 等待视频加载完成后初始化 ResizeObserver,以便能正确获取视频尺寸 initVideoResizeObserver(); // 如果有 drawArea,直接使用它显示矩形区域,不允许点击绘制 @@ -499,14 +500,14 @@ const displayDrawArea = (drawArea: any, video: HTMLVideoElement) => { console.log('[查看监控] 已加载已有报警区域', payload.value); }; - +// 在窗口调整大小时更新绘制区域位置和大小 const updateDrawAreaOnResize = () => { const drawArea = currentDrawArea.value; const video = monitorVideoRef.value; if (!drawArea || !video || video.videoWidth <= 0 || video.videoHeight <= 0) return; displayDrawArea(drawArea, video); }; - +// 初始化 ResizeObserver 监听视频元素尺寸变化,以便在窗口调整大小时更新绘制区域位置和大小 const initVideoResizeObserver = () => { if (!window.ResizeObserver || videoResizeObserver.value) return; const video = monitorVideoRef.value; @@ -516,7 +517,7 @@ const initVideoResizeObserver = () => { }); videoResizeObserver.value.observe(video); }; - +// 销毁 ResizeObserver const destroyVideoResizeObserver = () => { if (videoResizeObserver.value) { videoResizeObserver.value.disconnect();