feat:区域绘制处理调整

shuishen

2026-01-29 98bef7b292914db7be5d6cc291599a3462c23eed

feat:区域绘制处理调整

 applications/drone-command/src/styles/common/cockpit.scss

@@ -582,6 +582,15 @@
    .el-input__wrapper {
        --el-input-text-color: #161B2C !important;
    }

    .el-select__selection.is-near {
        margin-left: 0;

        .el-tag {
            color: #ffffff;
            background: #161B2C;
        }
    }
}

.command-select-popper.el-select__popper {

 applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue

@@ -14,7 +14,8 @@
                    <div class="panel-body">
                        <span class="panel-label">区域类型</span>
                        <el-select class="command-select" popper-class="command-select-popper" v-model="activeAreaType"
                            placeholder="请选择" @change="handleAreaTypeChange">
                            placeholder="请选择" :disabled="currentShapeType === 'buffer'" collapse-tags :multiple="currentShapeType === 'buffer'"
                            @change="handleAreaTypeChange">
                            <el-option v-for="item in dictObj.areaType" :key="item.dictKey" :label="item.dictValue"
                                :value="item.dictKey" />
                        </el-select>
@@ -93,9 +94,9 @@
                    <div class="command-table-container">
                        <div class="command-table-content">
                            <el-table class="command-table" :data="shapeList" row-key="id">
                                <el-table-column prop="areaType" label="类型">
                                <el-table-column prop="areaType" label="区域类型">
                                    <template v-slot="{ row }">
                                        {{ getDictLabel(row.areaType, dictObj.areaType) }}
                                        {{ resolveShapeAreaTypeLabel(row) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="drawType" label="绘制类型">
@@ -164,9 +165,9 @@
                    <div class="shape-table-container">
                        <div class="shape-table-title">绘制区域列表</div>
                        <el-table class="command-table" :data="shapeList" row-key="id" height="auto">
                            <el-table-column prop="areaType" label="类型">
                            <el-table-column prop="areaType" label="区域类型">
                                <template v-slot="{ row }">
                                    {{ getDictLabel(row.areaType, dictObj.areaType) }}
                                    {{ resolveShapeAreaTypeLabel(row) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="drawType" label="绘制类型">
@@ -283,6 +284,7 @@
    ellipse: '椭圆',
    buffer: '缓冲圆',
}
const bufferAreaTypeValue = '1,2,3'
const showTypePanel = ref(false)
const suppressTypePanelOnce = ref(false)
const areaTypeStyleMap = {
@@ -767,6 +769,9 @@
            activeAreaType.value = detectAreaType
        }
    }
    if (currentShapeType.value === 'buffer') {
        activeAreaType.value = bufferAreaTypeValue.split(',')
    }
    if (!suppressTypePanelOnce.value) {
        showTypePanelAtCurrent()
    }
@@ -807,7 +812,7 @@
    }
    const shapePayload = {
        id: activeShapeId.value,
        areaType: activeAreaType.value,
        areaType: currentShapeType.value === 'buffer' ? bufferAreaTypeValue : activeAreaType.value,
        drawType: currentShapeType.value,
        points: ['ellipse', 'buffer'].includes(currentShapeType.value) && controlPoints.length
            ? controlPoints
@@ -834,6 +839,13 @@
    return Array.isArray(dictObj?.value?.areaType)
        ? dictObj.value.areaType
        : dictObj?.areaType
}

function resolveShapeAreaTypeLabel (shape) {
    if (shape?.drawType === 'buffer') {
        return '侦测区/报警区/重点管制区'
    }
    return getDictLabel(shape?.areaType, resolveAreaTypeOptions())
}

function parseGeomJson (geomJson) {
@@ -864,10 +876,13 @@
    shapeList.value = extList.map((item, index) => {
        const isShapePayload = item?.drawType || item?.points
        if (isShapePayload) {
            const areaType = item?.drawType === 'buffer'
                ? bufferAreaTypeValue
                : (item?.areaType ?? '')
            return {
                id: item?.id || `shape_${Date.now()}_${index}_${Math.random().toString(16).slice(2, 6)}`,
                extId: item?.extId ?? item?.id,
                areaType: item?.areaType ?? '',
                areaType,
                drawType: item?.drawType ?? 'polygon',
                points: Array.isArray(item?.points) ? item.points : [],
                displayPoints: Array.isArray(item?.displayPoints) ? item.displayPoints : null,
@@ -876,7 +891,9 @@
        }
        const parsed = parseGeomJson(item?.geomJson) || {}
        const drawType = parsed?.drawType || 'polygon'
        const areaType = item?.areaTypeKey ?? parsed?.areaType ?? ''
        const areaType = drawType === 'buffer'
            ? bufferAreaTypeValue
            : (item?.areaTypeKey ?? parsed?.areaType ?? '')
        const points = Array.isArray(parsed?.points) ? parsed.points : []
        const displayPoints = Array.isArray(parsed?.displayPoints) ? parsed.displayPoints : null
        const meta = parsed?.meta ?? null
@@ -890,7 +907,9 @@
            meta,
        }
    })
    activeAreaType.value = shapeList.value[0]?.areaType ?? ''
    activeAreaType.value = shapeList.value[0]?.drawType === 'buffer'
        ? bufferAreaTypeValue.split(',')
        : (shapeList.value[0]?.areaType ?? '')
    currentShapeType.value = shapeList.value[0]?.drawType ?? 'polygon'
}

@@ -924,9 +943,8 @@
}

function updateActiveShapeAreaType (value) {
    if (currentShapeType.value !== 'buffer') {
        activeTool?.setStyle?.(getAreaTypeStyle(value))
    }
    if (currentShapeType.value === 'buffer') return
    activeTool?.setStyle?.(getAreaTypeStyle(value))
    if (!activeShapeId.value) return
    const targetIndex = shapeList.value.findIndex(item => item.id === activeShapeId.value)
    if (targetIndex === -1) return
@@ -972,21 +990,11 @@
    viewEntity = null
    hideTypePanel()
    renderShapeList()
    if (dialogMode.value === 'edit' && pointList.length >= 3) {
        const editPoints = _.cloneDeep(pointList)
        if (editPoints.length > 1) {
            const first = editPoints[0]
            const last = editPoints[editPoints.length - 1]
            if (first.longitude === last.longitude && first.latitude === last.latitude) {
                editPoints.pop()
            }
        }
        activeShapeId.value = activeShapeId.value || (shapeList.value[0]?.id ?? null)
        startEdit(type, editPoints)
        return
    }
    pointList = []
    const defaultAreaType = getDetectAreaTypeKey()
    if (defaultAreaType) {
    if (type === 'buffer') {
        activeAreaType.value = bufferAreaTypeValue
    } else if (defaultAreaType) {
        activeAreaType.value = defaultAreaType
    }
    activeShapeId.value = null
@@ -1011,7 +1019,7 @@
    if (activeToolMode.value === 'edit' && activeShapeId.value === row.id) return
    activeShapeId.value = row.id
    currentShapeType.value = row.drawType
    activeAreaType.value = row.areaType
    activeAreaType.value = row.drawType === 'buffer' ? bufferAreaTypeValue.split(',') : row.areaType
    const displayPoints = getShapeDisplayPoints(row)
    pointList = _.cloneDeep(displayPoints)
    clearActiveTool()

 applications/drone-command/src/views/areaManage/partition/shapeTools/edit/EditPolygonTool.js

@@ -74,7 +74,7 @@
    }

    handleMouseMove(movement) {
        this.tooltip.show('拖动顶点编辑，右键删除', movement.endPosition)
        this.tooltip.show('拖动顶点编辑，右键删除点', movement.endPosition)
        if (!this.isDragging || this.draggedIndex < 0) return
        const position = this.getPositionFromScreen(movement.endPosition)
        if (!position) return