From d4129d66b1d8aedc509cf048b38b64d508443b3e Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Thu, 14 May 2026 17:32:58 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E5=AE=9E=E6=97=B6=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E6=94=B6=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/demo/demo/types.ts       | 10 +++++++
 src/api/equipmentList/index.ts   | 17 ++++++++++--
 src/views/equipmentList/list.vue | 46 +++++++++++++++++++++++---------
 3 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/api/demo/demo/types.ts b/src/api/demo/demo/types.ts
index ea51d32..0a5258a 100644
--- a/src/api/demo/demo/types.ts
+++ b/src/api/demo/demo/types.ts
@@ -88,3 +88,13 @@ export interface DemoQuery extends PageQuery {
    */
   value?: string;
 }
+
+export interface DrawFrom {
+  x?: string | number;
+
+  y?: string | number;
+
+  w?: string | number;
+
+  h?: string | number;
+}
diff --git a/src/api/equipmentList/index.ts b/src/api/equipmentList/index.ts
index acaa234..9a68f06 100644
--- a/src/api/equipmentList/index.ts
+++ b/src/api/equipmentList/index.ts
@@ -1,7 +1,7 @@
 import request from '@/utils/request';
 import type { EquipmentList, DeviceInfoForm } from '@/api/equipmentList/types';
 import { AxiosPromise } from 'axios';
-import { DemoVO, DemoForm, DemoQuery } from '@/api/demo/demo/types';
+import { DemoVO, DemoForm, DemoQuery, DrawFrom } from '@/api/demo/demo/types';
 /**
  * 新增设备
  * @param data 设备数据
@@ -52,7 +52,7 @@ export const delDevice = (id: string | number | Array<string | number>) => {
   });
 };
 /**
- * 唤醒设备
+ * 激活设备
  * @param id 单个主键或主键数组（与删除相同：POST + Query，ids=1,2,3）
  */
 export const actDevice = (id: string | number | Array<string | number>) => {
@@ -75,3 +75,16 @@ export const updateDeviceInfo = (data: DeviceInfoForm) => {
     data
   });
 };
+
+/**
+ * todo绘制区域
+ * @param data 绘制信息
+ * /device/info/draw
+ */
+export const drawInfo = (data: DrawFrom) => {
+  return request({
+    url: '/device/info/draw',
+    method: 'post',
+    data: data
+  });
+};
diff --git a/src/views/equipmentList/list.vue b/src/views/equipmentList/list.vue
index 7499755..d9fa554 100644
--- a/src/views/equipmentList/list.vue
+++ b/src/views/equipmentList/list.vue
@@ -104,7 +104,11 @@
       <template #header>
         <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
           <span class="truncate">实时监控-北门出入门监控</span>
-          <el-button type="primary" class="shrink-0" @click="drawImage()">绘制区域</el-button>
+          <div>
+            <el-button v-if="!drawStart" type="primary" class="shrink-0" @click="drawImage()">绘制区域</el-button>
+            <el-button v-if="drawStart" type="primary" class="shrink-0" @click="clearImage()">清空区域</el-button>
+            <el-button v-if="drawStart" type="primary" class="shrink-0" @click="saveImage()">保存区域</el-button>
+          </div>
         </div>
       </template>
       <div class="monitor-video-wrap">
@@ -120,10 +124,11 @@
 </template>
 
 <script setup name="Demo" lang="ts">
-import { addEquipment, getDevicetList, getDeviceInfo, delDevice, actDevice, updateDeviceInfo } from '@/api/equipmentList/index';
+import { addEquipment, getDevicetList, getDeviceInfo, delDevice, actDevice, updateDeviceInfo, drawInfo } from '@/api/equipmentList/index';
 import { EquipmentList, DeviceInfoForm } 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';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -336,6 +341,9 @@ const displayToVideoPixel = (px: number, py: number, video: HTMLVideoElement): {
 };
 
 /** 开始采集：视频上点击两个对角点 */
+const drawStart = ref(false);
+const payload = ref();
+
 const drawImage = () => {
   resetMonitorDraw();
   monitorDrawCollecting.value = true;
@@ -395,17 +403,31 @@ const onMonitorDrawClick = (e: MouseEvent) => {
   const rectWidthPctOfWidth = (rw / VW) * 100;
   const rectHeightPctOfHeight = (rh / VH) * 100;
 
-  const payload = {
-    videoIntrinsicSize: { width: VW, height: VH },
-    firstPointTopOffset_pctOfVideoHeight: Number(firstTopPctOfHeight.toFixed(4)),
-    firstPointDistanceToRight_pctOfVideoWidth: Number(firstRightPctOfWidth.toFixed(4)),
-    rectWidth_pctOfVideoWidth: Number(rectWidthPctOfWidth.toFixed(4)),
-    rectHeight_pctOfVideoHeight: Number(rectHeightPctOfHeight.toFixed(4))
+  payload.value = {
+    // videoIntrinsicSize: { width: VW, height: VH },
+    // firstPointTopOffset_pctOfVideoHeight: Number(firstTopPctOfHeight.toFixed(4)),
+    // firstPointDistanceToRight_pctOfVideoWidth: Number(firstRightPctOfWidth.toFixed(4)),
+    // rectWidth_pctOfVideoWidth: Number(rectWidthPctOfWidth.toFixed(4)),
+    // rectHeight_pctOfVideoHeight: Number(rectHeightPctOfHeight.toFixed(4))
+    x: Number(firstRightPctOfWidth.toFixed(4)),
+    y: Number(firstTopPctOfHeight.toFixed(4)),
+    w: Number(rectWidthPctOfWidth.toFixed(4)),
+    h: Number(rectHeightPctOfHeight.toFixed(4))
   };
-  console.log('[监控区域] 四点百分比(相对视频原始宽高 videoWidth/videoHeight):', payload);
-  proxy?.$modal.msgSuccess(
-    `已采集(相对原视频)：顶距${payload.firstPointTopOffset_pctOfVideoHeight}% 右距${payload.firstPointDistanceToRight_pctOfVideoWidth}% 框宽${payload.rectWidth_pctOfVideoWidth}% 框高${payload.rectHeight_pctOfVideoHeight}%`
-  );
+  console.log('[监控区域] 四点百分比', payload.value);
+  //proxy?.$modal.msgSuccess(`已采集(相对原视频)：x右距${payload.value.x}% y顶距${payload.value.y}% w框宽${payload.value.w}% h框高${payload.value.h}%`);
+  drawStart.value = true;
+};
+
+const clearImage = () => {
+  payload.value = {};
+  console.log(payload.value);
+  drawStart.value = false;
+};
+
+const saveImage = async () => {
+  await drawInfo(payload.value);
+  drawStart.value = false;
 };
 
 /** 删除按钮操作 */