吉安感知网项目-前端
chenyao
2026-01-17 40c2702c3da24d9d9fda6bd63894c3206779f812
applications/drone-command/src/views/areaManage/sceneConfig/FormDiaLog.vue
@@ -1,8 +1,16 @@
<template>
   <el-dialog class="ztzf-page-map-view-dialog" v-model="visible" :show-close="false" :close-on-click-modal="false">
   <el-dialog class="command-page-map-view-dialog" v-model="visible" :show-close="false" :close-on-click-modal="false">
      <div class="dialog-container">
         <div class="left-container">
            <div class="leftMap ztzf-cesium" id="mapContainer"></div>
            <CommonCesiumMap
               ref="mapRef"
               class="leftMap command-cesium"
               :active="visible"
               :flat-mode="false"
               :terrain="true"
               :layer-mode="4"
               :boundary="false"
            />
         </div>
         <div class="right-container">
            <div class="header">
@@ -43,9 +51,9 @@
               </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="areaTableRef" :data="areaList" row-key="id">
               <div class="command-table-container">
                  <div class="command-table-content">
                     <el-table class="command-data-cockpit-table" ref="areaTableRef" :data="areaList" row-key="id">
                        <el-table-column prop="areaName" label="区域名称" />
                        <el-table-column prop="areaType" label="区域类型">
                           <template v-slot="{ row }">
@@ -60,29 +68,29 @@
            <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly"
               label-width="96px">
               <el-form-item label="场景名称" prop="sceneName">
                  <el-input class="ztzf-data-cockpit-search-input" v-model="formData.sceneName" maxlength="50"
                  <el-input class="command-data-cockpit-search-input" v-model="formData.sceneName" maxlength="50"
                     placeholder="请输入" clearable />
               </el-form-item>
               <el-form-item label="指挥点位置" prop="longitude">
                  <div class="val">{{ formatLocation(formData) }}</div>
               </el-form-item>
               <el-form-item label="场景类型" prop="sceneType">
                  <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
                  <el-select class="command-data-cockpit-select" popper-class="command-data-cockpit-select-popper"
                     v-model="formData.sceneType" placeholder="请选择" clearable>
                     <el-option v-for="item in dictObj.sceneType" :key="item.dictKey" :label="item.dictValue"
                        :value="item.dictKey" />
                  </el-select>
               </el-form-item>
               <el-form-item label="负责人" prop="defenseLeader">
                  <el-input class="ztzf-data-cockpit-search-input" v-model="formData.defenseLeader" maxlength="50"
                  <el-input class="command-data-cockpit-search-input" v-model="formData.defenseLeader" maxlength="50"
                     placeholder="请输入" clearable />
               </el-form-item>
               <el-form-item label="负责人电话" prop="leaderPhone">
                  <el-input class="ztzf-data-cockpit-search-input" v-model="formData.leaderPhone" maxlength="50"
                  <el-input class="command-data-cockpit-search-input" v-model="formData.leaderPhone" maxlength="50"
                     placeholder="请输入" clearable />
               </el-form-item>
               <el-form-item label="设备模式" prop="deviceMode">
                  <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
                  <el-select class="command-data-cockpit-select" popper-class="command-data-cockpit-select-popper"
                     v-model="formData.deviceMode" placeholder="请选择" clearable>
                     <el-option v-for="item in dictObj.deviceMode" :key="item.dictKey" :label="item.dictValue"
                        :value="item.dictKey" />
@@ -98,12 +106,12 @@
                        关联区域
                     </div>
                     <el-input class="ztzf-data-cockpit-search-input" v-model="searchName" placeholder="请输入"
                     <el-input class="command-data-cockpit-search-input" v-model="searchName" placeholder="请输入"
                        clearable></el-input>
                  </div>
                  <el-form-item prop="areaDivideIds" label-width="0">
                     <el-table class="ztzf-data-cockpit-table" ref="areaTableRef"
                     <el-table class="command-data-cockpit-table" ref="areaTableRef"
                        :data="areaList.filter(item => item.areaName.includes(searchName))" row-key="id"
                        @selection-change="handleAreaSelectionChange">
                        <el-table-column type="selection" width="55" :reserve-selection="true" />
@@ -135,7 +143,7 @@
import { ElMessage } from 'element-plus'
import { fwDefenseSceneDetailApi, fwDefenseSceneSubmitApi } from './sceneConfigApi'
import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils'
import { PublicCesium } from '@/utils/cesium/publicCesium'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
import * as Cesium from 'cesium'
import { fwAreaDivideListApi } from '../partition/partitionApi'
import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
@@ -166,8 +174,10 @@
const areaList = ref([]) // 关联区域列表
const selectedAreaRows = ref([]) //选中列表
const dictObj = inject('dictObj')
const mapRef = ref(null)
let viewer
let redPointEntity
let leftClickBound = false
const rules = {
   sceneName: fieldRules(true, 50),
@@ -285,19 +295,18 @@
let geometricSource
// 初始化地图实例
function initMap () {
   const publicCesiumInstance = new PublicCesium({
      dom: 'mapContainer',
      flatMode: false,
      terrain: true,
      layerMode: 4,
      boundary: false,
   })
   if (!readonly.value) {
      publicCesiumInstance.addLeftClickEvent(null, LeftClickEvent)
   if (viewer) return
   const map = mapRef.value?.getMap()
   if (!map?.viewer) return
   viewer = map.viewer
   if (!readonly.value && !leftClickBound) {
      map.publicCesium?.addLeftClickEvent?.(null, LeftClickEvent)
      leftClickBound = true
   }
   viewer = publicCesiumInstance.getViewer()
   geometricSource = new Cesium.CustomDataSource('geometricSource')
   viewer.dataSources.add(geometricSource)
   if (!geometricSource) {
      geometricSource = new Cesium.CustomDataSource('geometricSource')
      viewer.dataSources.add(geometricSource)
   }
}
function LeftClickEvent (click) {