feat drawArea

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

src/views/equipmentList/list.vue

@@ -133,7 +133,7 @@
 
 <script setup name="Demo" lang="ts">
 import { addEquipment, getDevicetList, getDeviceInfo, delDevice, actDevice, updateDeviceInfo, drawInfo } from '@/api/equipmentList/index';
-import { EquipmentList, DeviceInfoForm } from '@/api/equipmentList/types';
+import { EquipmentList, DeviceInfoForm, AlarmAreaData } from '@/api/equipmentList/types';
 import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
 import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
 import { log } from 'node:console';
@@ -355,7 +355,8 @@ const displayToVideoPixel = (px: number, py: number, video: HTMLVideoElement): {
 
 /** 开始采集：视频上点击两个对角点 */
 const drawStart = ref(false);
-const payload = ref();
+
+const payload = ref<AlarmAreaData[]>([]);
 
 const drawImage = () => {
   resetMonitorDraw();
@@ -410,20 +411,24 @@ const onMonitorDrawClick = (e: MouseEvent) => {
   const point2RightPctOfWidth = ((VW - v2.vx) / VW) * 1000;
   const point2TopPctOfHeight = (v2.vy / VH) * 1000;
 
-  payload.value = {
+  // 添加新的报警区域到数组
+  const newArea: AlarmAreaData = {
+    deviceId: form.value.id,
     x1: Number(point1RightPctOfWidth.toFixed(4)),
     y1: Number(point1TopPctOfHeight.toFixed(4)),
     x2: Number(point2RightPctOfWidth.toFixed(4)),
     y2: Number(point2TopPctOfHeight.toFixed(4))
   };
-  console.log('[监控区域] 两点千分比坐标', payload.value);
+  payload.value.push(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;
 };
 
 const clearImage = () => {
-  payload.value = {};
-  console.log(payload.value);
+  payload.value = [];
+  console.log('[清空区域] 当前报警区域列表', payload.value);
   drawStart.value = false;
   seeSee.value = 0;
   // 清除绘制的矩形图案
@@ -432,6 +437,8 @@ const clearImage = () => {
 };
 
 const saveImage = async () => {
+  console.log('[保存区域] 准备保存的报警区域列表', payload.value);
+
   await drawInfo(payload.value);
   drawStart.value = false;
   seeSee.value = 0;
@@ -536,11 +543,12 @@ onMounted(() => {
   position: absolute;
   z-index: 4;
   pointer-events: none;
-  transform: translate(-50%, -100%);
-  margin-top: -6px;
-  color: #2563eb;
-  font-size: 14px;
-  font-weight: 600;
+  transform: translateX(-50%);
   white-space: nowrap;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(37, 99, 235, 0.85);
+  padding: 2px 6px;
+  border-radius: 2px;
 }
 </style>