feat 绘制缩放偏移修复

Co-authored-by: Copilot <copilot@github.com>

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;
 };
 

src/views/fileList/list.vue

@@ -275,4 +275,7 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
 }
+.monitor-video {
+  height: 670px;
+}
 </style>