diff --git a/src/store/modules/video.ts b/src/store/modules/video.ts index a98bf3b..440669b 100644 --- a/src/store/modules/video.ts +++ b/src/store/modules/video.ts @@ -6,7 +6,7 @@ import Hls from 'hls.js'; export const useVideosStore = defineStore('videos', () => { // --- State (状态) --- // 相当于 Vuex 中的 state,用 ref 或 reactive 定义 - const hisUrl = ref(); + const hisUrl = ref(''); // --- Getters (计算属性) --- // 相当于 Vuex 中的 getters,直接用 computed 定义 @@ -14,12 +14,14 @@ export const useVideosStore = defineStore('videos', () => { // --- Actions (动作) --- // 相当于 Vuex 中的 actions/mutations,直接写同步或异步函数 async function getVideos(deviceId?: string | number) { + hisUrl.value = ''; try { const response = await listDemo(deviceId); console.log('获取视频:', response); - hisUrl.value = response.data; + hisUrl.value = response?.data || ''; } catch (error) { console.error('获取视频失败', error); + hisUrl.value = ''; } } diff --git a/src/views/equipmentList/list.vue b/src/views/equipmentList/list.vue index 553b2d7..85e7651 100644 --- a/src/views/equipmentList/list.vue +++ b/src/views/equipmentList/list.vue @@ -399,8 +399,18 @@ const handleSee = async (row?: any) => { Object.assign(form.value, res.data); dialog1.visible = true; dialog1.title = '修改设备'; + + destroyHls(); + monitorVideoUrl.value = ''; await videosStore.getVideos(row.id); - monitorVideoUrl.value = videosStore.hisUrl; + monitorVideoUrl.value = videosStore.hisUrl || ''; + + if (!monitorVideoUrl.value) { + proxy?.$modal.msgWarning('该设备未登录或无法获取直播地址,已停止播放旧画面'); + initVideoResizeObserver(); + return; + } + // 等待 DOM 更新后初始化 Hls await nextTick(); initHls(); @@ -517,6 +527,7 @@ const destroyVideoResizeObserver = () => { const handleMonitorDialogClose = (done: () => void) => { // 卸载 Hls 与清理 video destroyHls(); + monitorVideoUrl.value = ''; destroyVideoResizeObserver(); resetMonitorDraw(); done();