From e17c0a2eceac008182504bdd40143658ab494c0b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 29 Oct 2025 16:52:01 +0800
Subject: [PATCH] feat:新增/编辑
---
src/views/layerManagement/components/rightEdit.vue | 105 +++++++++++++++++++++++++++++++---
src/views/layerManagement/components/utils.js | 5 +
src/views/layerManagement/components/leftList.vue | 6 +
src/views/layerManagement/index.vue | 12 +++
4 files changed, 115 insertions(+), 13 deletions(-)
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index 8fcdc34..0a884ca 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -56,7 +56,7 @@
<script setup>
import { treeDataApi } from '@/api/layer/index';
import { inject, onMounted } from 'vue';
-const emit = defineEmits(['update:coverData', 'update:deitData']);
+const emit = defineEmits(['update:coverData', 'update:deitData','newFencesMethods']);
const coverData = ref();
const layerParams = inject('layerParams');
const checkedKeys = ref([]); // 存储勾选的节点key
@@ -146,6 +146,7 @@
checkedNodes.value = [];
coverData.value = [];
layerParams.value.editNest = true;
+ layerParams.value.decideWhetherToAddOrEdit = 2
emit('update:deitData', node.data);
};
@@ -156,6 +157,9 @@
// 新增围栏
const addFence = () => {
layerParams.value.addNest = true;
+ layerParams.value.decideWhetherToAddOrEdit = 1
+ emit('newFencesMethods');
+
console.log('layerParams.value',layerParams.value);
};
diff --git a/src/views/layerManagement/components/rightEdit.vue b/src/views/layerManagement/components/rightEdit.vue
index d56e34c..d8ab6ae 100644
--- a/src/views/layerManagement/components/rightEdit.vue
+++ b/src/views/layerManagement/components/rightEdit.vue
@@ -18,13 +18,13 @@
<div class="itemRow">
<div class="label">围栏名称</div>
<div>
- <el-input class="ztzf-input inputName" v-model="detailData.name" placeholder="围栏名称" />
+ <el-input class="ztzf-input inputName" v-model="formData.name" placeholder="围栏名称" />
</div>
</div>
<div class="itemRow">
<div class="label">围栏备注</div>
<div>
- <el-input v-model="detailData.description" :rows="5" type="textarea" placeholder="请输入" />
+ <el-input v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
</div>
</div>
</div>
@@ -42,11 +42,11 @@
<div class="infpItem">
<div class="itemData">
<div class="title">创建时间</div>
- <div class="num"><span>{{detailData.create_time}}</span></div>
+ <div class="num"><span>{{formData?.create_time}}</span></div>
</div>
<div class="itemData">
<div class="title">创建人</div>
- <div class="num"><span>{{detailData.create_name}}</span></div>
+ <div class="num"><span>{{formData?.create_name}}</span></div>
</div>
</div>
</div>
@@ -61,6 +61,28 @@
import { deitFenceApi } from '@/api/layer/index';
const emit = defineEmits([ 'callParentMethod']);
const layerParams = inject('layerParams');
+const options = [
+ {
+ value: 'Option1',
+ label: '111',
+ },
+ {
+ value: 'Option2',
+ label: 'Option2',
+ },
+ {
+ value: 'Option3',
+ label: 'Option3',
+ },
+ {
+ value: 'Option4',
+ label: 'Option4',
+ },
+ {
+ value: 'Option5',
+ label: 'Option5',
+ },
+]
const formData = ref({
folder_id: '',
name: '',
@@ -73,15 +95,29 @@
geo_data: '',
});
const detailData = ref(null)
+const totalArea = ref(null)
+const totalCount = ref(null)
detailData.value = layerParams.value.editDetailData
-const totalArea = layerParams.value.total_area
-const totalCount = layerParams.value.total_count
-console.log('layerParams',detailData.value
-);
+ totalArea.value = layerParams.value.total_area
+ totalCount.value = layerParams.value.total_count
+console.log('2222222',layerParams.value.decideWhetherToAddOrEdit);
-const cancelHandel = () => {
+const clearAllData = () => {
+ detailData.value = {}
+ // 清空回显相关数据
+ detailData.value = {};
+ totalArea.value = null;
+ totalCount.value = null;
+ // 重置判断状态（可选，根据业务需求是否需要）
+ layerParams.value.decideWhetherToAddOrEdit = 1;
+ // 重置面板状态和缓存数据
layerParams.value.addNest = false;
layerParams.value.editNest = false;
+ layerParams.value.editDetailData = null;
+ layerParams.value.polygonPosition = null;
+};
+const cancelHandel = () => {
+ clearAllData()
emit('callParentMethod');
};
const submitHandle = () => {
@@ -99,10 +135,57 @@
console.log('保存',res);
})
- layerParams.value.addNest = false;
- layerParams.value.editNest = false;
+ clearAllData()
emit('callParentMethod');
};
+onMounted(() => {
+ // 先清空表单，避免残留旧数据
+ formData.value = {
+ folder_id: '',
+ name: '',
+ description: '',
+ is_enabled: false,
+ area: '',
+ altitude: '',
+ control_start_time: '',
+ control_end_time: '',
+ geo_data: '',
+ };
+
+ // 获取判断状态（默认设为 1，防止未定义时报错）
+ const addOrEditStatus = layerParams.value.decideWhetherToAddOrEdit || 1;
+
+ if (addOrEditStatus === 2) {
+ // 编辑状态：回显数据（从 layerParams.editDetailData 读取）
+ const editData = layerParams.value.editDetailData || {};
+ // 表单数据回显（将编辑数据赋值给 formData，与表单字段一一对应）
+ formData.value = {
+ folder_id: editData.folder_id || '', // 文件夹ID（需与下拉框 options 的 value 匹配）
+ name: editData.name || '', // 围栏名称
+ description: editData.description || '', // 围栏备注
+ is_enabled: editData.is_enabled || false, // 是否启用
+ area: editData.area || '', // 面积
+ altitude: editData.altitude || '', // 高度
+ control_start_time: editData.control_start_time || '', // 控制开始时间
+ control_end_time: editData.control_end_time || '', // 控制结束时间
+ geo_data: editData.geo_data || '', // 地理数据（编辑时回显原始坐标）
+ };
+ // 下拉框回显（若 editData 中有文件夹名称，需匹配 options 的 value）
+ // 假设 editData.folder_name 是文件夹名称，需找到对应的 value 赋值给 formData.area
+ const matchedFolder = options.find(item => item.label === (editData.folder_name || ''));
+ if (matchedFolder) {
+ formData.value.area = matchedFolder.value;
+ }
+
+ // 回显总数和总面积（编辑时可能需要展示）
+ totalArea.value = layerParams.value.total_area || 0;
+ totalCount.value = layerParams.value.total_count || 0;
+ } else {
+ // 新增状态：不回显数据，清空总数和总面积
+ totalArea.value = null;
+ totalCount.value = null;
+ }
+});
</script>
<style scoped lang="scss">
diff --git a/src/views/layerManagement/components/utils.js b/src/views/layerManagement/components/utils.js
index b343230..ede07e4 100644
--- a/src/views/layerManagement/components/utils.js
+++ b/src/views/layerManagement/components/utils.js
@@ -116,6 +116,8 @@
console.log('当前不允许绘制，whetherToDraw 为 false');
return;
}
+
+
this.drawingMode = true
this.curPolygon = new Cesium.PolygonHierarchy()
@@ -334,12 +336,15 @@
// 如果不是绘制模式
if (!this.drawingMode) {
if (!isPolygon) {
+
+
this.editingMode = false
this.editPolygonPointDataSource.entities.show = false
return
}
if (isPolygon) {
+
this.editingMode = true
this.editPolygonPointDataSource.entities.show = true
}
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index f288605..b7d6140 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -15,6 +15,7 @@
@update:coverData="handleCoverDataUpdate"
@update:deitData="handleEdit"
:activeName="activeName"
+ @newFencesMethods="newFencesMethods"
></leftList>
<rightEdit
v-if="layerParams.addNest || layerParams.editNest && activeType !== '2'"
@@ -63,6 +64,7 @@
total_count: 0,
total_area: 0,
polygonPosition:null,
+ decideWhetherToAddOrEdit:null,//新增or编辑围栏
});
provide('layerParams', layerParams);
const handleClick = tab => {
@@ -76,6 +78,7 @@
const selectDataList = ref([]);
// 编辑围栏区域
const handleEdit = val => {
+viewer.entities.removeAll();
layerParams.value.editDetailData = val;
drawPolygonExample.editThePatch(true);
const positions = parseGeoDataToPositions(val.geo_data, val.altitude);
@@ -84,6 +87,13 @@
drawPolygonExample.initPolygon(viewer, positions, true);
};
+// 新增开启绘制
+const newFencesMethods =()=>{
+viewer.entities.removeAll();
+drawPolygonExample.initHandler(viewer);
+ drawPolygonExample.drawTheArea(true)
+ drawPolygonExample.startDrawing();
+}
// 清除地图数据
const parentMethod = () => {
drawPolygonExample.delPolygon()
@@ -212,7 +222,7 @@
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
- // drawPolygonExample.initHandler(viewer);
+
};
// 编辑/绘制
--
Gitblit v1.9.3