feat 直播流点位

Co-authored-by: Copilot <copilot@github.com>

src/layout/components/notice/index.vue

@@ -15,14 +15,23 @@
           </div>
           <!-- 已读/未读 -->
           <!-- <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span> -->
-          <button v-if="!v.read" class="el-tag el-tag--danger el-tag--mini read" @click="handleView(v)">查看画面</button>
+          <button v-if="!v.read" class="el-tag el-tag--danger el-tag--mini read" @click="handleSee(v)">查看画面</button>
         </div>
       </template>
       <el-empty v-else :description="'消息为空'"></el-empty>
     </div>
     <!-- <div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div> -->
     <!-- 添加或修改测试单对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body fullscreen destroy-on-close>
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="500px"
+      class="monitor-dialog"
+      append-to-body
+      :before-close="handleMonitorDialogClose"
+      fullscreen
+      destroy-on-close
+    >
       <template #header>
         <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
           <span class="truncate">实时监控-北门出入门监控</span>
@@ -40,10 +49,17 @@
 <script setup lang="ts" name="layoutBreadcrumbUserNews">
 import { useNoticeStore } from '@/store/modules/notice';
 import { listNotice } from '@/api/system/notice';
+import { initHls, destroyHls } from '@/utils/video';
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+import { nextTick } from 'vue';
+import { useVideosStore } from '@/store/modules/video';
+const videosStore = useVideosStore();
+
 const noticeStore = useNoticeStore();
 const { readAll } = useNoticeStore();
+const monitorVideoRef = ref<HTMLVideoElement>();
 
 // 定义变量内容
 const state = reactive({
@@ -58,15 +74,24 @@ const dialog = reactive<DialogOption>({
 });
 
 //查看画面
-const handleView = (row: any) => {
+const handleSee = async (row: any) => {
   console.log('查看画面', row);
   // 在这里可以添加打开画面的逻辑
   if (!row || !row.videoUrl) {
     proxy?.$modal.msgError('视频地址不存在');
     return;
   }
-  monitorVideoUrl.value = row.videoUrl;
+  await videosStore.getVideos(row.id);
+  monitorVideoUrl.value = videosStore.hisUrl;
   dialog.visible = true;
+  await nextTick();
+  initHls(monitorVideoUrl, monitorVideoRef);
+};
+
+const handleMonitorDialogClose = (done: () => void) => {
+  // 卸载 Hls 与清理 video
+  destroyHls(monitorVideoRef);
+  done();
 };
 /**
  * 过滤消息（只保留最新的5条）