吉安感知网项目-前端
张含笑
2026-02-02 de83fbf18424be27a913cece1c3aadad5a4767aa
applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue
@@ -23,22 +23,26 @@
            </div>
            <div class="map-toolbar">
               <el-tooltip content="多边形" placement="left">
                  <button class="tool-btn" type="button" @click="handleDraw('polygon')">
                  <button class="tool-btn" :class="{ active: currentShapeType === 'polygon' }" type="button"
                     @click="handleDraw('polygon')">
                     <img class="tool-icon-image" :src="polygonIcon" alt="多边形" />
                  </button>
               </el-tooltip>
               <el-tooltip content="矩形" placement="left">
                  <button class="tool-btn" type="button" @click="handleDraw('rectangle')">
                  <button class="tool-btn" :class="{ active: currentShapeType === 'rectangle' }" type="button"
                     @click="handleDraw('rectangle')">
                     <img class="tool-icon-image" :src="rectIcon" alt="矩形" />
                  </button>
               </el-tooltip>
               <el-tooltip content="椭圆" placement="left">
                  <button class="tool-btn" type="button" @click="handleDraw('ellipse')">
                  <button class="tool-btn" :class="{ active: currentShapeType === 'ellipse' }" type="button"
                     @click="handleDraw('ellipse')">
                     <img class="tool-icon-image" :src="ellipseIcon" alt="椭圆" />
                  </button>
               </el-tooltip>
               <el-tooltip content="缓冲圆" placement="left">
                  <button class="tool-btn" type="button" @click="handleDraw('buffer')">
                  <button class="tool-btn" :class="{ active: currentShapeType === 'buffer' }" type="button"
                     @click="handleDraw('buffer')">
                     <img class="tool-icon-image" :src="bufferIcon" alt="缓冲圆" />
                  </button>
               </el-tooltip>
@@ -870,7 +874,8 @@
}
// 绘制完成回调
const drawFinished = async data => {
const drawFinished = async (data, options = {}) => {
   const shouldContinueDraw = options?.continueDraw || activeToolMode.value === 'draw'
   const positions = Array.isArray(data?.positions) ? data.positions : data
   if (!Array.isArray(positions) || positions.length < 3) {
      pointList = []
@@ -949,6 +954,12 @@
      shapeList.value.splice(targetIndex, 1, shapePayload)
   }
   renderShapeList()
   if (shouldContinueDraw && !readonly.value) {
      activeShapeId.value = null
      pointList = []
      clearActiveTool()
      startDraw(currentShapeType.value || 'polygon')
   }
}
function getDetectAreaTypeKey () {
@@ -1049,11 +1060,13 @@
   const positions = activeTool?.getPositions?.()
   if (Array.isArray(positions) && positions.length >= 3) {
      suppressTypePanelOnce.value = true
      drawFinished(positions)
      drawFinished(positions, { continueDraw: true })
      return
   }
   if (positions?.positions?.length >= 3) {
      suppressTypePanelOnce.value = true
      drawFinished(positions)
      drawFinished(positions, { continueDraw: true })
      return
   }
   clearActiveTool()
}
@@ -1123,15 +1136,17 @@
function handleClearShape () {
   if (readonly.value) return
   clearActiveTool()
   viewEntity && viewer?.entities?.remove(viewEntity)
   viewEntity = null
   pointList = []
   shapeList.value = []
   activeShapeId.value = null
   activeAreaType.value = ''
   hideTypePanel()
   clearShapeDisplay()
   clearActiveTool()
   if (viewer && currentShapeType.value) {
      startDraw(currentShapeType.value)
   }
}
function handleShapeEdit (row) {
@@ -1334,10 +1349,27 @@
   clearActiveTool()
   if (dialogMode.value === 'add') {
      mapRef.value?.zoomToAdminBoundary?.()
      // default no draw mode
      handleDraw('polygon')
   } else if (dialogMode.value === 'edit') {
      await loadDetail()
      viewPolygon()
      activeShapeId.value = null
      pointList = []
      const firstShape = shapeList.value[0]
      const initialType = firstShape?.drawType || 'polygon'
      currentShapeType.value = initialType
      if (initialType === 'buffer') {
         activeAreaType.value = bufferAreaTypeValue.split(',')
      } else if (firstShape?.areaType) {
         activeAreaType.value = firstShape.areaType
      } else {
         const defaultAreaType = getDetectAreaTypeKey()
         if (defaultAreaType) {
            activeAreaType.value = defaultAreaType
         }
      }
      clearActiveTool()
      startDraw(initialType)
   } else {
      await loadDetail()
      viewPolygon()
@@ -1426,44 +1458,31 @@
   right: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 10px 8px;
   background: rgba(19, 28, 36, 0.75);
   gap: 14px;
   padding: 32px 14px;
   background: rgba(26, 25, 25, 0.6);
   border-radius: 8px 8px 8px 8px;
   backdrop-filter: blur(4px);
   border-radius: 8px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.tool-btn {
   padding: 0;
   padding: 0 !important;
   width: 46px;
   height: 46px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 8px;
   color: #ffffff;
   font-size: 12px;
   line-height: 1;
   border: none !important;
   box-shadow: none;
   cursor: pointer;
   transition: all 0.2s ease;
   overflow: hidden;
   background: transparent !important;
   box-sizing: border-box;
}
.tool-btn:hover {
   border-color: rgba(255, 255, 255, 0.35);
   transform: translateY(-1px);
}
.tool-btn:active {
   transform: translateY(0);
}
.tool-btn.danger {
   border-color: rgba(255, 112, 112, 0.6);
   color: #ffb3b3;
.tool-btn.active {
   border: 2px solid #FFFFFF !important;
}
.tool-icon {
@@ -1471,8 +1490,8 @@
}
.tool-icon-image {
   width: 36px;
   height: 36px;
   width: 100%;
   height: 100%;
}
.tool-icon.polygon {