feat: 管控，类型用字典

罗广辉

2026-01-13 9612691947c7be66a5a02aa577f58a5df9604916

feat: 管控，类型用字典

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

@@ -12,10 +12,10 @@
                            <div>区域位置: {{ formatLocation(formData) }}</div>
                        </el-col>
                        <el-col :span="24">
                            <div>区域面积: {{ formData.areaSize }}</div>
                            <div>区域面积: {{ formData.areaSize }}㎡</div>
                        </el-col>
                        <el-col :span="24">
                            <div>区域类型: {{ getOptionLabel(formData.areaType, areaTypeOptions) }}</div>
                            <div>区域类型: {{ getDictLabel(formData.areaType, dictObj.areaType) }}</div>
                        </el-col>
                        <el-col :span="24">
                            <div>触发条件: {{ formData.triggerCondition }}</div>
@@ -24,7 +24,7 @@
                            <div>响应机制: {{ formData.responseMechanism }}</div>
                        </el-col>
                        <el-col :span="24">
                            <div>管控级别: {{ getOptionLabel(formData.controlLevel, controlLevelOptions) }}</div>
                            <div>管控级别: {{ getDictLabel(formData.controlLevel, dictObj.controlLevel) }}</div>
                        </el-col>
                        <el-col :span="24">
                            <div>关联派出所: {{ formData.policeStationName }}</div>
@@ -48,17 +48,17 @@
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="区域面积" prop="areaSize">
                                {{ formData.areaSize }}
                                {{ formData.areaSize }}㎡
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="区域类型" prop="areaType">
                                <el-select v-model="formData.areaType" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in areaTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        v-for="item in dictObj.areaType"
                                        :key="item.dictKey"
                                        :label="item.dictValue"
                                        :value="item.dictKey"
                                    />
                                </el-select>
                            </el-form-item>
@@ -77,10 +77,10 @@
                            <el-form-item label="管控级别" prop="controlLevel">
                                <el-select v-model="formData.controlLevel" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in controlLevelOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        v-for="item in dictObj.controlLevel"
                                        :key="item.dictKey"
                                        :label="item.dictValue"
                                        :value="item.dictKey"
                                    />
                                </el-select>
                            </el-form-item>
@@ -131,10 +131,10 @@
</template>

<script setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { fwAreaDivideDetailApi, fwAreaDivideSubmitApi, fwDevicePageApi, fwPoliceStationPageApi } from './partitionApi'
import { fieldRules } from '@ztzf/utils'
import { fieldRules, getDictLabel } from '@ztzf/utils'
import { PublicCesium } from '@/utils/cesium/publicCesium'
import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
@@ -156,16 +156,6 @@
    triggerCondition: '', // 触发条件
})

const areaTypeOptions = [
    { label: '报警区', value: '报警区' },
    { label: '重点管制区', value: '重点管制区' },
]
const controlLevelOptions = [
    { label: '日常', value: '日常' },
    { label: '重点', value: '重点' },
    { label: '严密', value: '严密' },
]

const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
@@ -178,6 +168,7 @@
const deviceIdList = ref([]) // 关联设备ID
const policeStationOptions = ref([]) // 关联派出所
const deviceOptions = ref([]) // 关联设备
const dictObj = inject('dictObj')
let viewer
let drawPolygonExample
let pointList = []
@@ -204,7 +195,7 @@
        formData.value.flyDateEnd = end || ''
        formData.value.deviceIds = deviceIdList.value.length ? deviceIdList.value.join(',') : ''
        let str = [...pointList, pointList[0]].map(item => `${item.longitude} ${item.latitude}`).join(',')
        formData.value.geom = `POLYGON((${str})) | 4326`
        formData.value.geom = `POLYGON((${str}))`
        await fwAreaDivideSubmitApi(formData.value)
        ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
        visible.value = false
@@ -226,19 +217,13 @@
// 格式化区域位置
function formatLocation(row) {
    if (row?.longitude == null || row?.latitude == null) return ''
    return `${row.longitude}, ${row.latitude}`
    return `${_.round(row.longitude,6)}, ${_.round(row.latitude,6)}`
}

// 格式化可飞行时间段
function formatFlyDate(row) {
    if (!row?.flyDateStart && !row?.flyDateEnd) return ''
    return `${row.flyDateStart || '-'} ~ ${row.flyDateEnd || '-'}`
}

// 获取选项文本
function getOptionLabel(value, options) {
    const match = options.find(item => item.value === value)
    return match?.label ?? value ?? ''
}

// 初始化地图实例
@@ -280,10 +265,10 @@
    if (!str) return []
    return str
        .replace('POLYGON((', '')
        .replace(')) | 4326', '')
        .replace('))', '')
        .split(',')
        .map(pair => {
            const [lat, lon] = pair.trim().split(' ').map(Number)
            const [lon, lat] = pair.trim().split(' ').map(Number)
            return [lon, lat]
        })
}

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

@@ -10,7 +10,12 @@
                <el-col :span="4">
                    <el-form-item label="区域类型" prop="areaType">
                        <el-select v-model="searchParams.areaType" placeholder="请选择" clearable @change="handleSearch">
                            <el-option v-for="item in areaTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                            <el-option
                                v-for="item in dictObj.areaType"
                                :key="item.dictKey"
                                :label="item.dictValue"
                                :value="item.dictKey"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
@@ -38,14 +43,14 @@
            <el-table-column prop="areaSize" label="区域面积" />
            <el-table-column prop="areaType" label="区域类型">
                <template v-slot="{ row }">
                    {{ getOptionLabel(row.areaType, areaTypeOptions) }}
                    {{ getDictLabel(row.areaType, dictObj.areaType) }}
                </template>
            </el-table-column>
            <el-table-column prop="triggerCondition" label="触发条件" />
            <el-table-column prop="responseMechanism" label="响应机制" />
            <el-table-column prop="controlLevel" label="管控级别">
                <template v-slot="{ row }">
                    {{ getOptionLabel(row.controlLevel, controlLevelOptions) }}
                    {{ getDictLabel(row.controlLevel, dictObj.controlLevel) }}
                </template>
            </el-table-column>
            <el-table-column prop="policeStationName" label="关联派出所" />
@@ -80,6 +85,8 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import { fwAreaDividePageApi, fwAreaDivideRemoveApi } from './partitionApi'
import FormDiaLog from './FormDiaLog.vue'
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { getDictLabel } from '@ztzf/utils'

const initSearchParams = () => ({
    areaName: '', // 区域名称
@@ -87,16 +94,6 @@
    current: 1, // 当前页
    size: 10, // 每页大小
})

const areaTypeOptions = [
    { label: '报警区', value: '报警区' },
    { label: '重点管制区', value: '重点管制区' },
]
const controlLevelOptions = [
    { label: '日常', value: '日常' },
    { label: '重点', value: '重点' },
    { label: '严密', value: '严密' },
]

const searchParams = ref(initSearchParams()) // 查询参数
const total = ref(0) // 总条数
@@ -158,9 +155,17 @@
    return `${row.flyDateStart || '-'} ~ ${row.flyDateEnd || '-'}`
}

function getOptionLabel(value, options) {
    const match = options.find(item => item.value === value)
    return match?.label ?? value ?? ''
const dictObj = ref({
    areaType: [], //区域类型
    controlLevel: [], //管控级别
})
provide('dictObj', dictObj)

// 获取字典
function getDictList() {
    getDictionaryByCode('areaType,controlLevel').then(res => {
        dictObj.value = res.data.data
    })
}

// 新增/编辑/查看 弹框
@@ -173,6 +178,7 @@

onMounted(() => {
    getList()
    getDictList()
})
</script>
<style scoped lang="scss"></style>