feat 增加消息报警查看画面

src/layout/components/notice/index.vue

@@ -21,6 +21,19 @@
       <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>
+      <template #header>
+        <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
+          <span class="truncate">实时监控-北门出入门监控</span>
+        </div>
+      </template>
+      <div class="monitor-video-wrap">
+        <div class="monitor-video-stack">
+          <video ref="monitorVideoRef" class="monitor-video" controls preload="metadata" :src="monitorVideoUrl">您的浏览器不支持视频播放</video>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -131,6 +144,13 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+/* 全屏监控弹窗：占满视口、禁止外层滚动，视频在可视区内尽可能放大 */
+.monitor-video-stack {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .layout-navbars-breadcrumb-user-news {
   .head-box {
     display: flex;