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

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();