吉安感知网项目-前端
blame | history | patch | commit | commitdiff | ignore whitespace
shuishen
2026-01-14 052d0e8bd9c1d8e0d243a166bedf761fc5a7a891 
 applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue


@@ -1,44 +1,72 @@


<template>


   <el-dialog v-model="visible" :title="titleEnum[dialogMode]" :close-on-click-modal="false" width="80%">


   <el-dialog class="ztzf-page-view-dialog" v-model="visible" :title="titleEnum[dialogMode]"


      :close-on-click-modal="false" width="80%">


      <div class="bodyBox">


         <div class="leftMap ztzf-cesium" id="mapContainer"></div>


         <div class="rightInfo">


            <div v-if="readonly">


            <div class="detail-container" v-if="readonly">


               <div class="detail-title">区域详情</div>


               <el-row>


                  <el-col :span="24">


                     <div>区域名称: {{ formData.areaName }}</div>


                     <div class="label">区域名称</div>


                     <div class="val">{{ formData.areaName }}</div>


                  </el-col>


                  <el-col :span="24">


                     <div>区域位置: {{ formatLocation(formData) }}</div>


                     <div class="label">区域位置</div>


                     <div class="val">{{ formatLocation(formData) }}</div>


                  </el-col>


                  <el-col :span="24">


                     <div>区域面积: {{ formData.areaSize || '-' }}k㎡</div>


                     <div class="label">区域面积</div>


                     <div class="val">{{ formData.areaSize || '-' }}k㎡</div>


                  </el-col>


                  <el-col :span="24">


                     <div>区域类型: {{ getDictLabel(formData.areaType, dictObj.areaType) }}</div>


                     <div class="label">区域类型</div>


                     <div class="val">{{ getDictLabel(formData.areaType, dictObj.areaType) }}</div>


                  </el-col>


                  <el-col :span="24">


                     <div>触发条件: {{ formData.triggerCondition }}</div>


                     <div class="label">触发条件</div>


                     <div class="val">{{ formData.triggerCondition }}</div>


                  </el-col>


                  <el-col :span="24">


                     <div>响应机制: {{ formData.responseMechanism }}</div>


                     <div class="label">响应机制</div>


                     <div class="val">{{ formData.responseMechanism }}</div>


                  </el-col>


                  <el-col :span="24">


                     <div>管控级别: {{ getDictLabel(formData.controlLevel, dictObj.controlLevel) }}</div>


                     <div class="label">管控级别</div>


                     <div class="val">{{ getDictLabel(formData.controlLevel, dictObj.controlLevel) }}</div>


                  </el-col>


                  <el-col :span="24">


                     <div>关联派出所: {{ formData.policeStationName }}</div>


                     <div class="label">关联派出所</div>


                     <div class="val">{{ formData.policeStationName }}</div>


                  </el-col>


                  <el-col :span="24">


                     <div>可飞行时间段: {{ formatFlyDate(formData) }}</div>


                     <div class="label">可飞行时间段</div>


                     <div class="val">{{ formatFlyDate(formData) }}</div>


                  </el-col>


               </el-row>




               <div class="detail-title">关联设备</div>


               <div class="ztzf-table-container">


                  <div class="ztzf-table-content">


                     <el-table class="ztzf-data-cockpit-table" ref="deviceTableRef" :data="deviceOptions"


                        row-key="id">


                        <el-table-column prop="deviceName" label="设备名称" />


                        <el-table-column prop="deviceType" label="类型">


                           <template v-slot="{ row }">


                              {{ getDictLabel(row.deviceType, dictObj.deviceType) }}


                           </template>


                        </el-table-column>


                     </el-table>


                  </div>


               </div>


            </div>


            <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" label-width="100px">


            <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly"


               label-width="100px">


               <el-row>


                  <el-col :span="24">


                     <el-form-item label="区域名称" prop="areaName">


                        <el-input v-model="formData.areaName" maxlength="50" placeholder="请输入" clearable />


                        <el-input class="ztzf-data-cockpit-search-input" v-model="formData.areaName"


                           maxlength="50" placeholder="请输入" clearable />


                     </el-form-item>


                  </el-col>


                  <el-col :span="24">


@@ -51,7 +79,8 @@


                  </el-col>


                  <el-col :span="24">


                     <el-form-item label="区域类型" prop="areaType">


                        <el-select v-model="formData.areaType" placeholder="请选择" clearable>


                        <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"


                           v-model="formData.areaType" placeholder="请选择" clearable>


                           <el-option


                              v-for="item in dictObj.areaType"


                              :key="item.dictKey"


@@ -63,17 +92,20 @@


                  </el-col>


                  <el-col :span="24">


                     <el-form-item label="响应机制" prop="responseMechanism">


                        <el-input v-model="formData.responseMechanism" maxlength="200" placeholder="请输入" clearable />


                        <el-input class="ztzf-data-cockpit-search-input" v-model="formData.responseMechanism"


                           maxlength="200" placeholder="请输入" clearable />


                     </el-form-item>


                  </el-col>


                  <el-col :span="24">


                     <el-form-item label="触发条件" prop="triggerCondition">


                        <el-input v-model="formData.triggerCondition" maxlength="200" placeholder="请输入" clearable />


                        <el-input class="ztzf-data-cockpit-search-input" v-model="formData.triggerCondition"


                           maxlength="200" placeholder="请输入" clearable />


                     </el-form-item>


                  </el-col>


                  <el-col :span="24">


                     <el-form-item label="管控级别" prop="controlLevel">


                        <el-select v-model="formData.controlLevel" placeholder="请选择" clearable>


                        <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"


                           v-model="formData.controlLevel" placeholder="请选择" clearable>


                           <el-option


                              v-for="item in dictObj.controlLevel"


                              :key="item.dictKey"


@@ -86,6 +118,8 @@


                  <el-col :span="24">


                     <el-form-item label="可飞行时段" prop="flyDateStart">


                        <el-date-picker


                           class="ztzf-data-cockpit-date-picker"


                           popper-class="ztzf-data-cockpit-date-picker-popper"


                           v-model="flyDateRange"


                           type="datetimerange"


                           range-separator="至"


@@ -98,7 +132,8 @@


                  </el-col>


                  <el-col :span="24">


                     <el-form-item label="关联派出所" prop="policeStationId">


                        <el-select v-model="formData.policeStationId" placeholder="请选择" clearable>


                        <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"


                           v-model="formData.policeStationId" placeholder="请选择" clearable>


                           <el-option


                              v-for="item in policeStationOptions"


                              :key="item.id"


@@ -109,25 +144,39 @@


                     </el-form-item>


                  </el-col>


                  <el-col :span="24">


                     <el-form-item label="关联设备" prop="deviceIds">


                        <el-table


                           ref="deviceTableRef"


                           :data="deviceOptions"


                           row-key="id"


                           @selection-change="handleDeviceSelectionChange"


                        >


                           <el-table-column type="selection" width="55" />


                           <el-table-column prop="deviceName" label="设备名称" />


                        </el-table>


                     </el-form-item>


                     <div>


                        <div>


                           关联设备


                           <el-input class="ztzf-data-cockpit-search-input" v-model="searchName" placeholder="请输入"


                              clearable></el-input>


                        </div>


                        <el-form-item prop="deviceIds" label-width="0">


                           <el-table


                              class="ztzf-data-cockpit-table"


                              ref="deviceTableRef"


                              :data="deviceOptions.filter(item => item.deviceName.includes(searchName))"


                              row-key="id"


                              @selection-change="handleDeviceSelectionChange"


                           >


                              <el-table-column type="selection" width="55" :reserve-selection="true" />


                              <el-table-column prop="deviceName" label="设备名称" />


                              <el-table-column prop="deviceType" label="类型">


                                 <template v-slot="{ row }">


                                    {{ getDictLabel(row.deviceType, dictObj.deviceType) }}


                                 </template>


                              </el-table-column>


                           </el-table>


                        </el-form-item>


                     </div>


                  </el-col>


               </el-row>


            </el-form>


         </div>


      </div>


      <template #footer>


         <el-button @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>


         <el-button v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting" @click="handleSubmit">


         <el-button color="#2B2B4C" @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>


         <el-button color="#284FE3" v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting"


            @click="handleSubmit">


            确定


         </el-button>


      </template>


@@ -138,7 +187,7 @@


import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'


import { ElMessage } from 'element-plus'


import { fwAreaDivideDetailApi, fwAreaDivideSubmitApi } from './partitionApi'


import { fieldRules, getDictLabel } from '@ztzf/utils'


import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils'


import { PublicCesium } from '@/utils/cesium/publicCesium'


import { DrawPolygon } from '@/utils/cesium/DrawPolygon'


import { cartesian3Convert } from '@/utils/cesium/mapUtil'


@@ -172,6 +221,7 @@


const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' })


const flyDateRange = ref([]) // 飞行时间


const deviceTableRef = ref(null)


const searchName = ref('')


const selectedDeviceRows = ref([])


const policeStationOptions = ref([]) // 关联派出所


const deviceOptions = ref([]) // 关联设备


@@ -277,30 +327,17 @@


   drawPolygonExample.subscribe('getPolygonPositions', drawFinished)


}




// 解析经纬度


function getLonLat(str) {


   if (!str) return []


   return str


      .replace('POLYGON((', '')


      .replace('))', '')


      .split(',')


      .map(pair => {


         const [lon, lat] = pair.trim().split(' ').map(Number)


         return [lon, lat]


      })


}




// 编辑面


function editPolygon() {


   if (!formData.value?.geom) return


   const grouped = getLonLat(formData.value.geom)


   grouped.pop()


   pointList = grouped.map(item => ({ longitude: item[0], latitude: item[1] }))


   pointList = geomAnalysis(formData.value.geom)


   drawPolygonExample?.destroy()


   drawPolygonExample = new DrawPolygon(viewer)


   let pointList1 = _.cloneDeep(pointList)


   pointList1.pop()


   drawPolygonExample.initPolygon(


      viewer,


      grouped.map(item => ({ lng: item[0], lat: item[1] }))


      pointList.map(item => ({ lng: item.longitude, lat: item.latitude }))


   )


   drawPolygonExample.subscribe('getPolygonPositions', drawFinished)


}


@@ -308,10 +345,8 @@


// 查看面


function viewPolygon() {


   if (!formData.value?.geom) return


   const grouped = getLonLat(formData.value.geom)


   grouped.pop()


   pointList = grouped.map(item => ({ longitude: item[0], latitude: item[1] }))


   const result = grouped.flat().flat()


   pointList = geomAnalysis(formData.value.geom)


   const result = pointList.map(item => [item.longitude, item.latitude]).flat()


   const mian = viewer.entities?.add({


      customType: 'control_group',


      position: Cesium.Cartesian3.fromDegrees(result[0], result[1]),


@@ -334,8 +369,11 @@


// 获取设备列表


async function getDeviceList() {


   if (deviceOptions.value.length) return


   const res = await fwDeviceListApi({ isAreaSelect: 1 })


   const res = await fwDeviceListApi({ isAreaSelect: 1, areaId: formData.value.id })


   deviceOptions.value = res?.data?.data ?? []


   if (dialogMode.value === 'view') {


      deviceOptions.value = deviceOptions.value.filter(item => formData.value.deviceIds.includes(item.id))


   }


}




// 关联设备变更


@@ -345,19 +383,14 @@


   formData.value.deviceIds = ids.join(',')


}




function getDeviceIdList() {


   if (!formData.value.deviceIds) return []


   return formData.value.deviceIds.split(',').filter(Boolean)


}




// 同步选择状态


function syncDeviceSelection() {


   if (!deviceTableRef.value) return


   deviceTableRef.value.clearSelection()


   console.log(getDeviceIdList())


   const ids = new Set(getDeviceIdList().map(String))


   const rows = []


   const arr = formData.value.deviceIds.split(',')


   deviceOptions.value.forEach(row => {


      if (ids.has(String(row.id))) {


      if (arr.includes(row.id)) {


         deviceTableRef.value.toggleRowSelection(row, true)


         rows.push(row)


      }


@@ -408,6 +441,12 @@


      width: 30%;


      height: 100%;


      overflow: auto;




      .ztzf-table-container,


      .ztzf-table-content {


         height: auto;


         flex: none;


      }


   }


}


</style>