feat 直播后台中中断问题优化

src/views/WarningList/list.vue

@@ -53,7 +53,7 @@
         <el-table-column label="所属设备" align="center" prop="deviceName" min-width="120" show-overflow-tooltip />
         <el-table-column label="报警区域" align="center" prop="monitoringArea" min-width="120" show-overflow-tooltip />
         <!-- pay content  -->
-        <!-- <el-table-column label="报警图片" align="center" prop="alarmImage" min-width="120">
+        <el-table-column label="报警图片" align="center" prop="alarmImage" min-width="120">
           <template #default="scope">
             <el-image
               v-if="scope.row.alarmImage"
@@ -65,7 +65,7 @@
             />
             <span v-else>暂无图片</span>
           </template>
-        </el-table-column> -->
+        </el-table-column>
         <el-table-column label="处理状态" align="center" prop="status" width="100">
           <template #default="scope">
             <el-tag v-if="scope.row.status === 0" type="warning">未处理</el-tag>

src/views/equipmentList/list.vue

@@ -181,6 +181,7 @@ const dialog1 = reactive<DialogOption>({
 const monitorVideoUrl = ref('');
 const monitorVideoRef = ref<HTMLVideoElement>();
 let hlsInstance: Hls | null = null;
+let visibilityHandler: (() => void) | null = null;
 
 const initHls = () => {
   const url = monitorVideoUrl.value;
@@ -454,6 +455,18 @@ const handleSee = async (row?: any) => {
       console.error('[查看监控] 解析 drawArea 失败:', error);
     }
   }
+  // 后台运行的时候恢复播放
+  cleanupVisibilityChange();
+  const handleVisibilityChange = () => {
+    if (!document.hidden) {
+      const video = monitorVideoRef.value;
+      if (video && video.paused) {
+        video.play().catch((e) => console.warn('恢复播放失败:', e));
+      }
+    }
+  };
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+  visibilityHandler = handleVisibilityChange;
 };
 
 // 提取显示报警区域的逻辑为独立函数
@@ -530,6 +543,13 @@ const destroyVideoResizeObserver = () => {
     videoResizeObserver.value = null;
   }
 };
+// 清理 visibilitychange 事件监听
+const cleanupVisibilityChange = () => {
+  if (visibilityHandler) {
+    document.removeEventListener('visibilitychange', visibilityHandler);
+    visibilityHandler = null;
+  }
+};
 
 const handleMonitorDialogClose = (done: () => void) => {
   // 卸载 Hls 与清理 video
@@ -537,6 +557,7 @@ const handleMonitorDialogClose = (done: () => void) => {
   monitorVideoUrl.value = '';
   destroyVideoResizeObserver();
   resetMonitorDraw();
+  cleanupVisibilityChange();
   done();
   //刷新列表
   getList();