Pārlūkot izejas kodu

fix(设备详情): 修复检测区域显示和交互问题

调整检测区域的最小尺寸限制为0,修复默认区域初始化值
添加检测区域坐标显示,优化用户选择交互样式
liujia 1 mēnesi atpakaļ
vecāks
revīzija
09f1280

+ 10 - 10
src/views/device/detail/components/alarmPlanModal/index.vue

@@ -220,8 +220,9 @@
           v-if="[1, 2, 3, 9].includes(formState?.eventType as number)"
           label="检测区域"
           name="region"
+          style="user-select: none"
         >
-          框选区域 {{ formState.region }}
+          <span style="user-select: none">框选区域 {{ formState.region }}</span>
           <a-form-item-rest>
             <div class="viewer">
               <div class="viewer-content">
@@ -259,7 +260,6 @@
                       }"
                       @mousedown.stop="startResize(block, $event)"
                     >
-                      <!-- {{ blockIndex + 1 }} -->
                     </div>
                   </div>
                 </div>
@@ -434,8 +434,8 @@ const startResize = (block: BlockItem, e: MouseEvent) => {
     const deltaX = e.clientX - startX
     const deltaY = e.clientY - startY
     // 限制最小尺寸和容器边界
-    block.width = Math.max(50, Math.min(initialWidth + deltaX, rect.width - block.x))
-    block.height = Math.max(50, Math.min(initialHeight + deltaY, rect.height - block.y))
+    block.width = Math.max(0, Math.min(initialWidth + deltaX, rect.width - block.x))
+    block.height = Math.max(0, Math.min(initialHeight + deltaY, rect.height - block.y))
   }
 
   const upHandler = () => {
@@ -493,10 +493,10 @@ const initBlocks = () => {
     {
       x: 0,
       y: 0,
-      ox: formState.region[0],
-      oy: formState.region[1],
-      width: formState.region[2],
-      height: formState.region[3],
+      ox: formState.region[0] ?? 0,
+      oy: formState.region[1] ?? 0,
+      width: formState.region[2] ?? 50,
+      height: formState.region[3] ?? 50,
     },
   ]
 }
@@ -618,7 +618,7 @@ const echoFormState = (val: SourceData) => {
           endTime: item?.end_time ?? '',
         }))
       : [],
-    region: JSON.parse(val.region ?? '[]'),
+    region: JSON.parse(val.region ?? '[0, 0, 50, 50]'),
     enable: val?.enable === 1,
   }
 }
@@ -692,7 +692,7 @@ const cancel = () => {
   emit('update:open', false)
   // 重置表单
   formState.planName = ''
-  formState.region = []
+  formState.region = [0, 0, 50, 50]
   formState.eventType = null
   formState.thresholdTime = 300
   formState.mergeTime = 30

+ 1 - 0
src/views/device/detail/index.vue

@@ -211,6 +211,7 @@
           <info-item label="检测区域">
             <template v-if="detailState.length || detailState.width">
               {{ detailState.length || 0 }} x {{ detailState.width || 0 }} cm
+              {{ [detailState.xxStart, detailState.xxEnd, detailState.yyStart, detailState.yyEnd] }}
             </template>
           </info-item>
           <info-item label="安装位置">