From 783aea42531badecda5f5f0f0ddb7cf05c1ed1df Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 31 Oct 2025 15:46:06 +0800
Subject: [PATCH] feat:点击区域显示信息
---
src/views/layerManagement/components/rightEdit.vue | 75 ++++++++++++++++++++++++
src/views/layerManagement/index.vue | 49 ++++++++++------
2 files changed, 104 insertions(+), 20 deletions(-)
diff --git a/src/views/layerManagement/components/rightEdit.vue b/src/views/layerManagement/components/rightEdit.vue
index 99a0c82..b1f21d9 100644
--- a/src/views/layerManagement/components/rightEdit.vue
+++ b/src/views/layerManagement/components/rightEdit.vue
@@ -6,6 +6,7 @@
<div class="label">文件夹名称</div>
<div>
<el-select
+ :disabled="isDisabled"
class="ztzf-layer-search"
popper-class="ztzf-select-popper"
clearable
@@ -24,13 +25,14 @@
<div class="itemRow">
<div class="label">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}名称</div>
<div>
- <el-input class="ztzf-input inputName" v-model="formData.name" placeholder="请输入" />
+ <el-input :disabled="isDisabled" class="ztzf-input inputName" v-model="formData.name" placeholder="请输入" />
</div>
</div>
<div class="itemRow" v-if="layerParams.fenceType === 2">
<div class="label">禁飞区管控时间</div>
<div>
<el-date-picker
+ :disabled="isDisabled"
popper-class="ztzf-layer-date-picker-popper"
class="ztzf-layer-date-picker layertimer"
v-model="timeValue"
@@ -45,7 +47,7 @@
<div class="itemRow">
<div class="label">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}备注</div>
<div>
- <el-input v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
+ <el-input :disabled="isDisabled" v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
</div>
</div>
</div>
@@ -76,6 +78,7 @@
<div class="num noFly">
<span
><el-input
+ :disabled="isDisabled"
class="ztzf-input inputName"
v-model="formData.altitude"
placeholder="请输入" /></span
@@ -140,6 +143,18 @@
const fenceArea = ref(0);
detailData.value = layerParams.value.editDetailData;
fenceArea.value = layerParams.value.fenceArea;
+const isDisabled = computed(() => {
+ return layerParams.value.editingIsProhibited;
+});
+
+watch(
+ () => layerParams.value.editingIsProhibited,
+ newVal => {
+ console.log('newVal',newVal);
+
+ },
+ { immediate: true }
+);
watch(
() => layerParams.value.fenceArea,
newArea => {
@@ -149,6 +164,61 @@
}
},
{ immediate: true }
+);
+// 监听editDetailData的变化
+watch(
+ () => layerParams.value.editDetailData,
+ (newVal) => {
+ if (newVal) {
+ // 当editDetailData有值时，填充表单
+ formData.value = {
+ ...formData.value,
+ folder_id: newVal.folder_id || '',
+ name: newVal.name || '',
+ description: newVal.description || '',
+ is_enabled: newVal.is_enabled || false,
+ area: newVal.area || '',
+ altitude: newVal.altitude || '',
+ control_start_time: newVal.control_start_time || '',
+ control_end_time: newVal.control_end_time || '',
+ geo_data: newVal.geo_data || '',
+ create_name: newVal.create_name || '',
+ create_time: newVal.create_time ? dayjs(newVal.create_time).format('YYYY年MM月DD日') : '',
+ };
+
+ // 处理文件夹选择
+ if (newVal.folder_id && options.value.length > 0) {
+ const matchedFolder = options.value.find(item => item.value === String(newVal.folder_id));
+ if (matchedFolder) {
+ formData.value.folder_id = matchedFolder.value;
+ }
+ }
+
+ // 处理时间选择
+ if (newVal.control_start_time && newVal.control_end_time) {
+ timeValue.value = [
+ dayjs(newVal.control_start_time).toDate(),
+ dayjs(newVal.control_end_time).toDate(),
+ ];
+ }
+ } else {
+ // 当editDetailData为null时，重置表单
+ formData.value = {
+ folder_id: '',
+ name: '',
+ description: '',
+ is_enabled: false,
+ area: '',
+ altitude: '',
+ control_start_time: '',
+ control_end_time: '',
+ geo_data: '',
+ altitude: '',
+ };
+ timeValue.value = '';
+ }
+ },
+ { immediate: true, deep: true }
);
watch(
() => timeValue.value,
@@ -173,6 +243,7 @@
layerParams.value.editNest = false;
layerParams.value.editDetailData = null;
layerParams.value.polygonPosition = null;
+ layerParams.value.editingIsProhibited = false;
};
const cancelHandel = () => {
clearAllData();
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index ff8692f..ebecbdd 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -96,6 +96,7 @@
fenceArea: 0, //围栏面积
fileType: 1, //文件夹类型
editFolderData: null,
+ editingIsProhibited:false,//禁止编辑
});
const handleClick = tab => {
@@ -126,6 +127,8 @@
};
// 编辑围栏区域
const handleEdit = val => {
+console.log('编辑数据',val);
+
viewer.entities.removeAll();
layerParams.value.editDetailData = val;
drawPolygonExample.editThePatch(true);
@@ -137,7 +140,6 @@
// 编辑文件夹
const handleFolder = val => {
layerParams.value.editFolderData = val;
- console.log('文件夹', layerParams.value.editFolderData);
};
// 新增开启绘制
const newFencesMethods = () => {
@@ -150,6 +152,7 @@
const parentMethod = () => {
drawPolygonExample.delPolygon();
drawPolygonExample.drawTheArea(false);
+ viewer.entities.removeAll();
};
// 点击显示区域
const handleCoverDataUpdate = data => {
@@ -159,6 +162,11 @@
} else {
viewer.entities.removeAll();
}
+};
+// 编辑围栏区域
+const previewInformation = val => {
+console.log('编辑数据',val);
+ layerParams.value.editDetailData = val;
};
const loadDataToMap = dataList => {
if (!viewer) return;
@@ -223,28 +231,33 @@
),
});
};
-// 围栏点击处理函数
+// 区域点击显示详细信息
const handleFenceClick = movement => {
if (!viewer) return;
+ layerParams.value.editDetailData = null;
const pickedObject = viewer.scene.pick(movement.position);
if (Cesium.defined(pickedObject) && pickedObject.id?.customType === 'fence_polygon') {
const selectedEntity = pickedObject.id;
- console.log('选中的围栏数据：', selectedEntity.customInfo);
+ const selectedData = selectedEntity.customInfo;
+ viewer.entities.values.forEach(entity => {
+ if (entity.customType === 'fence_polygon') {
+ entity.polygon.material = entity === selectedEntity
+ ? Cesium.Color.RED.withAlpha(0.5)
+ : Cesium.Color.YELLOW.withAlpha(0.5);
+ }
+ });
- // // 1. 高亮处理（清除其他实体高亮，仅高亮当前选中）
- // viewer.entities.values.forEach(entity => {
- // if (entity.customType === 'fence_polygon') {
- // // 恢复默认样式
- // entity.polygon.material =
- // entity === selectedEntity
- // ? selectedEntity.polygon.material.color.withAlpha(0.8) // 选中时加深透明度
- // : selectedEntity.polygon.material.color.withAlpha(0.5); // 未选中恢复默认
- // }
- // });
-
- // 2. 联动右侧编辑组件（假设 rightEdit 有接收数据的方法）
- // 例如：通过 ref 调用 rightEdit 的 setData 方法
- // rightEditRef.value?.setData(selectedEntity.customInfo);
+ layerParams.value.editNest = true; // 显示右侧编辑组件
+ layerParams.value.decideWhetherToAddOrEdit = 2; // 标记为编辑模式
+ // 根据围栏类型设置fenceType
+ if (activeName.value === '电子围栏') {
+ layerParams.value.fenceType = 1;
+ } else if (activeName.value === '自定义禁飞区') {
+ layerParams.value.fenceType = 2;
+ }
+ layerParams.value.editDetailData = selectedData;
+ layerParams.value.fenceArea = selectedData.area;
+ layerParams.value.editingIsProhibited = true
}
};
let publicCesiumInstance = null;
@@ -301,7 +314,7 @@
});
}
- let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
+ let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
let polygonString = JSON.stringify(polygon);
layerParams.value.polygonPosition = polygonString;
if (polygon.length >= 3) {
--
Gitblit v1.9.3