feat drawArea

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

src/api/equipmentList/index.ts

@@ -2,6 +2,8 @@ import request from '@/utils/request';
 import type { EquipmentList, DeviceInfoForm } from '@/api/equipmentList/types';
 import { AxiosPromise } from 'axios';
 import { DemoVO, DemoForm, DemoQuery, DrawFrom } from '@/api/demo/demo/types';
+import { AlarmAreaData } from '@/api/equipmentList/types';
+
 /**
  * 新增设备
  * @param data 设备数据
@@ -78,12 +80,12 @@ export const updateDeviceInfo = (data: DeviceInfoForm) => {
 
 /**
  * todo绘制区域
- * @param data 绘制信息
- * /device/info/draw
+ * @param data 绘制信息数组
+ * /haikang/isup/device/motion-detection
  */
-export const drawInfo = (data: DrawFrom) => {
+export const drawInfo = (data: AlarmAreaData[]) => {
   return request({
-    url: '/device/info/draw',
+    url: '/haikang/isup/device/motion-detection',
     method: 'post',
     data: data
   });

src/api/equipmentList/types.ts

@@ -22,3 +22,23 @@ export interface DeviceInfoForm extends BaseEntity {
   /** 若依扩展参数 */
   params?: Record<string, Record<string, unknown>>;
 }
+
+export interface DeviceInfo {
+  id?: number;
+  code?: string;
+  name?: string;
+  monitoringArea?: string;
+  status?: number | string;
+  model?: string;
+  isDrawArea?: number | string;
+  [key: string]: any;
+}
+
+// 报警区域数据类型
+export interface AlarmAreaData {
+  deviceId: number;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}

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>