feat:调整加载

张含笑

2026-01-27 dd57e0e9a989e7ee8b3e3473a7ee6a1dff06a4ae

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

@@ -1,78 +1,116 @@
<template>
   <el-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>防区名称: {{ formData.zoneName }}</div>
               <div>防区面积: {{ formatZoneArea(formData.zoneArea) }}</div>
               <el-table :data="sceneList" row-key="id">
                  <el-table-column prop="sceneName" label="场景名称" />
                  <el-table-column prop="sceneType" label="场景类型">
                     <template v-slot="{ row }">
                        {{ getDictLabel(row.sceneType, dictObj.sceneType) }}
                     </template>
                  </el-table-column>
               </el-table>
   <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">
            <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">
               <span>{{ titleEnum[dialogMode] }}</span>
				
               <el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon>
            </div>
            <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" label-width="100px">

            <div class="content" v-if="readonly">
               <div class="detail-title">防区详情</div>
               <el-row>
                  <el-col :span="24">
                     <el-form-item label="防区名称" prop="zoneName">
                        <el-input v-model="formData.zoneName" maxlength="50" placeholder="请输入" clearable />
                     </el-form-item>
                     <div class="label">防区名称</div>
                     <div class="val">{{ formData.zoneName }}</div>
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="防区面积" prop="zoneArea">{{ formatZoneArea(formData.zoneArea) }}</el-form-item>
                  </el-col>
                  <el-col :span="24">
                     <div>
                        <div>
                           关联场景
                           <el-input v-model="searchName" placeholder="请输入" clearable></el-input>
                        </div>
                        <el-form-item label="关联场景" prop="defenseSceneIds" label-width="0">
                           <el-table
                              ref="sceneTableRef"
                              :data="sceneList.filter(item => item.sceneName.includes(searchName))"
                              row-key="id"
                              @selection-change="handleSceneSelectionChange"
                           >
                              <el-table-column type="selection" width="55" :reserve-selection="true" />
                              <el-table-column prop="sceneName" label="场景名称" />
                              <el-table-column prop="sceneType" label="场景类型">
                                 <template v-slot="{ row }">
                                    {{ getDictLabel(row.sceneType, dictObj.sceneType) }}
                                 </template>
                              </el-table-column>
                           </el-table>
                        </el-form-item>
                     </div>
                     <div class="label">防区面积</div>
                     <div class="val">{{ formatZoneArea(formData.zoneArea) }}</div>
                  </el-col>
               </el-row>

               <div class="detail-title">关联场景</div>
               <div class="command-table-container">
                  <div class="command-table-content">
                     <el-table class="command-table" :data="sceneList" row-key="id">
                        <el-table-column prop="sceneName" label="场景名称" />
                        <el-table-column prop="sceneType" label="场景类型">
                           <template v-slot="{ row }">
                              {{ getDictLabel(row.sceneType, dictObj.CommandSceneType) }}
                           </template>
                        </el-table-column>
                     </el-table>
                  </div>
               </div>
            </div>

            <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly"
               label-width="96px">
               <el-form-item label="防区名称" prop="zoneName">
                  <el-input class="command-input" v-model="formData.zoneName" maxlength="50"
                     placeholder="请输入" clearable />
               </el-form-item>
               <el-form-item label="防区面积" prop="zoneArea">
                  <div class="val">{{ formatZoneArea(formData.zoneArea) }}</div>
               </el-form-item>

               <div class="search-table-container">
                  <div class="search-box">
                     <div class="label">
                        关联场景
                     </div>

                     <el-input class="command-input" v-model="searchName" placeholder="请输入"
                        clearable></el-input>
                  </div>

                  <el-form-item prop="defenseSceneIds" label-width="0">
                     <el-table class="command-table" ref="sceneTableRef"
                        :data="sceneList.filter(item => item.sceneName.includes(searchName))" row-key="id"
                        @selection-change="handleSceneSelectionChange">
                        <el-table-column type="selection" width="55" :reserve-selection="true" />
                        <el-table-column prop="sceneName" label="场景名称" />
                        <el-table-column prop="sceneType" label="场景类型">
                           <template v-slot="{ row }">
                              {{ getDictLabel(row.sceneType, dictObj.CommandSceneType) }}
                           </template>
                        </el-table-column>
                     </el-table>
                  </el-form-item>
               </div>
            </el-form>

            <div class="footer">
               <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>
               <el-button color="#284FE3" v-if="!readonly" type="primary" :loading="submitting"
                  :disabled="submitting" @click="handleSubmit">
                  确定
               </el-button>
            </div>
         </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>
      </template>
   </el-dialog>
</template>

<script setup>
import { Close } from '@element-plus/icons-vue'

import { computed, inject, nextTick, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fwDefenseZoneDetailApi, fwDefenseZoneSubmitApi } from './defenseZoneApi'
import { fwDefenseSceneListApi } from '@/views/areaManage/sceneConfig/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 { DrawPolygon } from '@/utils/cesium/DrawPolygon'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import * as turf from '@turf/turf'
import * as Cesium from 'cesium'
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'

// 初始化表单
const initForm = () => ({
@@ -95,23 +133,25 @@
const sceneList = ref([]) // 关联场景列表
const selectedSceneRows = ref([]) // 选中场景
const dictObj = inject('dictObj')
const mapRef = ref(null)
const route = useRoute()
let viewer
let drawPolygonExample
let pointList = []

const rules = {
   zoneName: fieldRules(true, 50),
   defenseSceneIds: fieldRules(true),
   defenseSceneIds: fieldRules(false),
   zoneArea: fieldRules(true),
}

// 关闭弹框
function handleCancel() {
function handleCancel () {
   visible.value = false
}

// 提交新增/编辑
async function handleSubmit() {
async function handleSubmit () {
   const isValid = await formRef.value?.validate().catch(() => false)
   if (!isValid) return
   if (!pointList.length) {
@@ -125,6 +165,11 @@
      const str = [...pointList, pointList[0]].map(item => `${item.longitude} ${item.latitude}`).join(',')
      formData.value.geom = `POLYGON((${str}))`
      await fwDefenseZoneSubmitApi(formData.value)
      saveOperationLog({
         requestUri: route.path,
         title: `${route.name || '防区管理'}-${dialogMode.value === 'add' ? '新增' : '编辑'}`,
         type: 1,
      })
      ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
      visible.value = false
      emit('success')
@@ -134,14 +179,14 @@
}

// 加载详情
async function loadDetail() {
async function loadDetail () {
   if (!formData.value.id) return
   const res = await fwDefenseZoneDetailApi({ id: formData.value.id })
   formData.value = res?.data?.data ?? initForm()
}

// 获取场景列表
async function getSceneList() {
async function getSceneList () {
   const res = await fwDefenseSceneListApi({ filterSelected: 1, zoneId: formData.value.id })
   sceneList.value = res?.data?.data ?? []
   if (readonly.value) {
@@ -151,19 +196,19 @@
}

// 获取场景ID列表
function getSceneIdList() {
function getSceneIdList () {
   if (!formData.value.defenseSceneIds) return []
   return formData.value.defenseSceneIds.split(',')
}

// 关联场景变更
function handleSceneSelectionChange(rows) {
function handleSceneSelectionChange (rows) {
   selectedSceneRows.value = rows
   formData.value.defenseSceneIds = rows.map(item => item.id).join(',')
}

// 同步关联场景
function syncSceneSelection() {
function syncSceneSelection () {
   if (!sceneTableRef.value) return
   sceneTableRef.value.clearSelection()
   const ids = getSceneIdList()
@@ -178,21 +223,16 @@
}

// 格式化防区面积
function formatZoneArea(value) {
function formatZoneArea (value) {
   if (value == null || value === '') return ''
   return `${value}k㎡`
}

// 初始化地图实例
function initMap() {
   const publicCesiumInstance = new PublicCesium({
      dom: 'mapContainer',
      flatMode: false,
      terrain: true,
      layerMode: 4,
      boundary: false,
   })
   viewer = publicCesiumInstance.getViewer()
function initMap () {
   if (viewer) return
   const map = mapRef.value?.getMap()
   viewer = map?.viewer || null
}

// 绘制完成回调
@@ -210,14 +250,14 @@
}

// 新增模式绘制
function addPolygon() {
function addPolygon () {
   drawPolygonExample = new DrawPolygon(viewer)
   drawPolygonExample.initHandler(viewer)
   drawPolygonExample.subscribe('getPolygonPositions', drawFinished)
}

// 编辑面
function editPolygon() {
function editPolygon () {
   if (!formData.value?.geom) return
   pointList = geomAnalysis(formData.value.geom)
   drawPolygonExample?.destroy()
@@ -229,10 +269,26 @@
      noClosedList.map(item => ({ lng: item.longitude, lat: item.latitude }))
   )
   drawPolygonExample.subscribe('getPolygonPositions', drawFinished)
   if (noClosedList.length) {
      const result = noClosedList.map(item => [item.longitude, item.latitude]).flat()
      const tempEntity = viewer.entities?.add({
         position: Cesium.Cartesian3.fromDegrees(result[0], result[1]),
         polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(result),
            clampToGround: true,
            width: 1,
            material: Cesium.Color.TRANSPARENT,
         },
      })
      if (tempEntity) {
         viewer.flyTo(tempEntity, { duration: 0 })
         viewer.entities.remove(tempEntity)
      }
   }
}

// 查看面
function viewPolygon() {
function viewPolygon () {
   if (!formData.value?.geom) return
   pointList = geomAnalysis(formData.value.geom)
   const result = pointList.map(item => [item.longitude, item.latitude]).flat()
@@ -246,11 +302,11 @@
         material: Cesium.Color.RED,
      },
   })
   viewer.flyTo(mian)
   viewer.flyTo(mian, { duration: 0 })
}

// 打开弹框
async function open({ mode, row } = {}) {
async function open ({ mode, row } = {}) {
   dialogMode.value = mode || 'add'
   formData.value = dialogMode.value === 'add' ? initForm() : row
   selectedSceneRows.value = []
@@ -277,18 +333,4 @@
})
</script>

<style scoped lang="scss">
.bodyBox {
   display: flex;
   height: 600px;
   .leftMap {
      width: 70%;
      height: 100%;
   }
   .rightInfo {
      width: 30%;
      height: 100%;
      overflow: auto;
   }
}
</style>
<style scoped lang="scss"></style>