From 457d0c3888544826578803a225c656542fa7c271 Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Fri, 12 Jun 2026 15:28:41 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=20=E7=9B=B4=E6=92=AD=E5=90=8E=E5=8F=B0?=
 =?UTF-8?q?=E4=B8=AD=E4=B8=AD=E6=96=AD=E9=97=AE=E9=A2=98=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/WarningList/list.vue   |  4 ++--
 src/views/equipmentList/list.vue | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/views/WarningList/list.vue b/src/views/WarningList/list.vue
index e023959..5815252 100644
--- a/src/views/WarningList/list.vue
+++ b/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>
diff --git a/src/views/equipmentList/list.vue b/src/views/equipmentList/list.vue
index 6da76c6..2070331 100644
--- a/src/views/equipmentList/list.vue
+++ b/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();