From dd57e0e9a989e7ee8b3e3473a7ee6a1dff06a4ae Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 27 Jan 2026 17:19:04 +0800
Subject: [PATCH] feat:调整加载
---
applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue | 220 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 131 insertions(+), 89 deletions(-)
diff --git a/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue b/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue
index ed069a0..6b799c1 100644
--- a/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue
+++ b/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>
--
Gitblit v1.9.3