| src/views/layerManagement/components/rightEdit.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/layerManagement/index.vue | ●●●●● patch | view | raw | blame | history |
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(); 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) {
