Selaa lähdekoodia

feat(设备区域配置): 为区块添加序号显示并优化配置项标签

- 在区块的拖拽手柄上显示序号以便区分
- 简化配置项标签文字,去除冗余的"子区域"前缀
- 调整拖拽手柄样式以容纳序号显示
liujia 2 kuukautta sitten
vanhempi
commit
5a591ec04c
1 muutettua tiedostoa jossa 17 lisäystä ja 10 poistoa
  1. 17 10
      src/views/device/detail/components/deviceAreaConfig/index.vue

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

@@ -200,7 +200,7 @@
 
           <!-- 已创建区块 -->
           <div
-            v-for="block in blocks"
+            v-for="(block, blockIndex) in blocks"
             :key="block.id"
             class="block-item"
             :style="{
@@ -215,14 +215,16 @@
             @mousedown="startDrag(block, $event)"
             @click="selectBlock(block)"
           >
-            <div class="resize-handle" @mousedown.stop="startResize(block, $event)"></div>
+            <div class="resize-handle" @mousedown.stop="startResize(block, $event)">
+              {{ blockIndex + 1 }}
+            </div>
           </div>
         </div>
 
         <div v-if="selectedBlock" class="mapConfig">
           <div class="mapConfig-header">子区域属性</div>
           <div class="mapConfig-item">
-            <div class="mapConfig-item-label">子区域X范围:</div>
+            <div class="mapConfig-item-label">X范围:</div>
             <div class="mapConfig-item-content">
               <a-space>
                 <a-input
@@ -245,7 +247,7 @@
           </div>
 
           <div class="mapConfig-item">
-            <div class="mapConfig-item-label">子区域Y范围:</div>
+            <div class="mapConfig-item-label">Y范围:</div>
             <div class="mapConfig-item-content">
               <a-space>
                 <a-input
@@ -268,7 +270,7 @@
           </div>
 
           <div class="mapConfig-item">
-            <div class="mapConfig-item-label">子区域Z范围:</div>
+            <div class="mapConfig-item-label">Z范围:</div>
             <div class="mapConfig-item-content">
               <a-space>
                 <a-input
@@ -287,21 +289,21 @@
           </div>
 
           <div class="mapConfig-item">
-            <div class="mapConfig-item-label">子区域区域跟踪:</div>
+            <div class="mapConfig-item-label">区域跟踪:</div>
             <div class="mapConfig-item-content">
               <a-switch v-model:checked="selectedBlock.isTracking" size="small" />
             </div>
           </div>
 
           <div class="mapConfig-item">
-            <div class="mapConfig-item-label">子区域区域跌倒:</div>
+            <div class="mapConfig-item-label">区域跌倒:</div>
             <div class="mapConfig-item-content">
               <a-switch v-model:checked="selectedBlock.isFalling" size="small" />
             </div>
           </div>
 
           <div class="mapConfig-item">
-            <div class="mapConfig-item-label">删除区域:</div>
+            <div class="mapConfig-item-label">删除区域:</div>
             <div class="mapConfig-item-content">
               <DeleteOutlined @click="deleteBlockArea(selectedBlock.id || '')" />
             </div>
@@ -1154,10 +1156,15 @@ const deleteBlockArea = (id: string) => {
     position: absolute;
     right: -4px;
     bottom: -4px;
-    width: 8px;
-    height: 8px;
+    width: 15px;
+    height: 15px;
     background: #1890ff;
     cursor: nwse-resize;
+    font-size: 12px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }