From 2dae286fa96cc9bf6e074fac3b9de9bcea014e41 Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Wed, 27 May 2026 15:04:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E7=BB=98=E5=88=B6=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E5=81=8F=E7=A7=BB=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <copilot@github.com>
---
 src/layout/components/notice/index.vue |  3 +++
 src/views/equipmentList/list.vue       | 34 ++++++++++++++++++++++++--
 src/views/fileList/list.vue            |  3 +++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index 43d576a..c4767b9 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -188,6 +188,9 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
 }
+.monitor-video {
+  height: 679px;
+}
 
 .layout-navbars-breadcrumb-user-news {
   .head-box {
diff --git a/src/views/equipmentList/list.vue b/src/views/equipmentList/list.vue
index bdfc378..5d136f8 100644
--- a/src/views/equipmentList/list.vue
+++ b/src/views/equipmentList/list.vue
@@ -233,6 +233,8 @@ type MonitorPoint = { x: number; y: number };
 const monitorDrawCollecting = ref(false);
 const monitorDrawPoints = ref<MonitorPoint[]>([]);
 const monitorRectPx = ref<{ left: number; top: number; width: number; height: number } | null>(null);
+const currentDrawArea = ref<AlarmAreaData | null>(null);
+const videoResizeObserver = ref<ResizeObserver | null>(null);
 
 const drawRectStyle = computed<Record<string, string>>(() => {
   const r = monitorRectPx.value;
@@ -379,6 +381,7 @@ const resetMonitorDraw = () => {
   monitorDrawCollecting.value = false;
   monitorDrawPoints.value = [];
   monitorRectPx.value = null;
+  currentDrawArea.value = null;
 };
 const handleSee = async (row?: any) => {
   console.log('1111111111111111', row, row.drawArea);
@@ -396,6 +399,7 @@ const handleSee = async (row?: any) => {
   // 等待 DOM 更新后初始化 Hls
   await nextTick();
   initHls();
+  initVideoResizeObserver();
 
   // 如果有 drawArea，直接使用它显示矩形区域，不允许点击绘制
   if (row?.drawArea) {
@@ -405,6 +409,7 @@ const handleSee = async (row?: any) => {
       console.log('[查看监控] 解析后的 drawArea:', drawArea);
 
       if (drawArea && drawArea.x1 !== undefined && drawArea.y1 !== undefined && drawArea.x2 !== undefined && drawArea.y2 !== undefined) {
+        currentDrawArea.value = drawArea;
         // 等待视频加载完成
         await nextTick();
         const video = monitorVideoRef.value;
@@ -463,6 +468,7 @@ const displayDrawArea = (drawArea: any, video: HTMLVideoElement) => {
   const height = Math.max(Math.abs(y2Px - y1Px), 2);
 
   monitorRectPx.value = { left, top, width, height };
+  currentDrawArea.value = drawArea;
   monitorDrawCollecting.value = false; // 禁止点击绘制
 
   // 同时添加到 payload 用于保存
@@ -479,9 +485,34 @@ const displayDrawArea = (drawArea: any, video: HTMLVideoElement) => {
   console.log('[查看监控] 已加载已有报警区域', payload.value);
 };
 
+const updateDrawAreaOnResize = () => {
+  const drawArea = currentDrawArea.value;
+  const video = monitorVideoRef.value;
+  if (!drawArea || !video || video.videoWidth <= 0 || video.videoHeight <= 0) return;
+  displayDrawArea(drawArea, video);
+};
+
+const initVideoResizeObserver = () => {
+  if (!window.ResizeObserver || videoResizeObserver.value) return;
+  const video = monitorVideoRef.value;
+  if (!video) return;
+  videoResizeObserver.value = new ResizeObserver(() => {
+    updateDrawAreaOnResize();
+  });
+  videoResizeObserver.value.observe(video);
+};
+
+const destroyVideoResizeObserver = () => {
+  if (videoResizeObserver.value) {
+    videoResizeObserver.value.disconnect();
+    videoResizeObserver.value = null;
+  }
+};
+
 const handleMonitorDialogClose = (done: () => void) => {
   // 卸载 Hls 与清理 video
   destroyHls();
+  destroyVideoResizeObserver();
   resetMonitorDraw();
   done();
 };
@@ -565,7 +596,6 @@ const onMonitorDrawClick = (e: MouseEvent) => {
 
   const clamp = (value: number) => Math.max(0, Math.min(1000, Math.round(value)));
 
-  // 添加新的报警区域到数组
   const newArea: AlarmAreaData = {
     deviceId: form.value.id,
     x1: clamp(point1RightPctOfWidth),
@@ -574,9 +604,9 @@ const onMonitorDrawClick = (e: MouseEvent) => {
     y2: clamp(point2TopPctOfHeight)
   };
   payload.value.push(newArea);
+  currentDrawArea.value = newArea;
   console.log('[监控区域] 两点千分比坐标', newArea);
   console.log('[监控区域] 所有报警区域', payload.value);
-  //proxy?.$modal.msgSuccess(`已采集(相对原视频)：x右距${payload.value.x}% y顶距${payload.value.y}% w框宽${payload.value.w}% h框高${payload.value.h}%`);
   seeSee.value = 1;
 };
 
diff --git a/src/views/fileList/list.vue b/src/views/fileList/list.vue
index 06066a9..9b0b49f 100644
--- a/src/views/fileList/list.vue
+++ b/src/views/fileList/list.vue
@@ -275,4 +275,7 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
 }
+.monitor-video {
+  height: 670px;
+}
 </style>