From 5dc1eb8074f52b2fdc03216b62ae4e2d82acbe0f Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 03 Nov 2025 08:45:21 +0800
Subject: [PATCH] Merge branch 'refs/heads/feature/v7.0/7.0.4' into 图层管理
---
src/views/layerManagement/components/rightEdit.vue | 159 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 118 insertions(+), 41 deletions(-)
diff --git a/src/views/layerManagement/components/rightEdit.vue b/src/views/layerManagement/components/rightEdit.vue
index 85faa42..b6d48e4 100644
--- a/src/views/layerManagement/components/rightEdit.vue
+++ b/src/views/layerManagement/components/rightEdit.vue
@@ -6,8 +6,8 @@
<div class="label">文件夹名称</div>
<div>
<el-select
+ :disabled="isDisabled"
class="ztzf-layer-search"
- popper-class="ztzf-select-popper"
clearable
v-model="formData.folder_id"
placeholder="请选择"
@@ -24,15 +24,21 @@
<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>
+ <!-- popper-class="ztzf-layer-date-picker-popper " -->
<el-date-picker
- popper-class="ztzf-layer-date-picker-popper"
- class="ztzf-layer-date-picker layertimer"
+ :disabled="isDisabled"
+ class="ztzf-layer-date-picker"
v-model="timeValue"
type="datetimerange"
format="YYYY-MM-DD HH:mm"
@@ -45,39 +51,53 @@
<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>
<div class="detailInfo">
- <div class="infpItem" v-if="layerParams.editNest">
+ <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 1">
<div class="itemData">
<div class="title">围栏面积</div>
<div class="num">
- <span>{{ fenceArea }}</span> m²
+ <span class="areaStyle">{{ fenceArea }}</span> m²
+ </div>
+ </div>
+ <div class="itemData">
+ <div class="title">创建人</div>
+ <div class="num">
+ <span>{{ formData?.create_name }}</span>
</div>
</div>
</div>
<div class="infpItem" v-if="layerParams.fenceType === 2">
- <!-- <div class="itemData">
+ <div class="itemData" v-if="layerParams.editNest && layerParams.fenceType === 2">
<div class="title">禁飞区面积</div>
<div class="num">
- <span>{{ fenceArea }}</span> m²
+ <span class="areaStyle">{{ fenceArea }}</span> m²
</div>
- </div> -->
+ </div>
<div class="itemData">
<div class="title">禁飞区高度</div>
<div class="num noFly">
<span
><el-input
+ :disabled="isDisabled"
class="ztzf-input inputName"
v-model="formData.altitude"
- placeholder="请输入" /></span
- >米
+ placeholder="请输入"
+ /></span>
+ 米
</div>
</div>
</div>
- <div class="infpItem" v-if="layerParams.editNest">
+ <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 2">
<div class="itemData">
<div class="title">创建时间</div>
<div class="num">
@@ -88,6 +108,14 @@
<div class="title">创建人</div>
<div class="num">
<span>{{ formData?.create_name }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 1">
+ <div class="itemData">
+ <div class="title">创建时间</div>
+ <div class="num">
+ <span>{{ formData?.create_time }}</span>
</div>
</div>
</div>
@@ -125,6 +153,10 @@
const fenceArea = ref(0);
detailData.value = layerParams.value.editDetailData;
fenceArea.value = layerParams.value.fenceArea;
+const isDisabled = computed(() => {
+ return layerParams.value.editingIsProhibited;
+});
+
watch(
() => layerParams.value.fenceArea,
newArea => {
@@ -134,6 +166,48 @@
}
},
{ immediate: true }
+);
+// 监听editDetailData的变化
+watch(
+ () => layerParams.value.editDetailData,
+ newVal => {
+ console.log('newVal', newVal);
+
+ if (newVal && layerParams.value.editingIsProhibited) {
+ // 当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(),
+ ];
+ }
+ }
+ },
+ { immediate: true, deep: true }
);
watch(
() => timeValue.value,
@@ -158,6 +232,7 @@
layerParams.value.editNest = false;
layerParams.value.editDetailData = null;
layerParams.value.polygonPosition = null;
+ layerParams.value.editingIsProhibited = false;
};
const cancelHandel = () => {
clearAllData();
@@ -165,33 +240,20 @@
EventBus.emit('gettreeDataApi');
};
const submitHandle = () => {
-
if (!formData.value.folder_id) {
- ElMessage({
- message: '请选择文件夹',
- type: 'error',
- });
+ ElMessage.error('请选择文件夹');
return;
}
if (!formData.value.name) {
- ElMessage({
- message: '请输入名称',
- type: 'error',
- });
+ ElMessage.error('请输入名称');
return;
}
if (!formData.value.altitude && layerParams.value.fenceType === 2) {
- ElMessage({
- message: '请输入高度',
- type: 'error',
- });
+ ElMessage.error('请输入高度');
return;
}
- if (fenceArea.value === 0) {
- ElMessage({
- message: '请绘制区域',
- type: 'error',
- });
+ if (fenceArea.value === 0) {
+ ElMessage.error('请绘制区域');
return;
}
const params = {
@@ -201,10 +263,13 @@
is_enabled: true,
area: formData.value.area,
altitude: formData.value.altitude,
- geo_data: layerParams.value.polygonPosition,
+ geo_data: layerParams.value.polygonPosition
+ ? layerParams.value.polygonPosition
+ : formData.value.geo_data,
control_start_time: formData.value.control_start_time,
control_end_time: formData.value.control_end_time,
};
+
// 如果是编辑模式，才添加 id
if (layerParams.value.decideWhetherToAddOrEdit === 2) {
params.id = detailData.value.id;
@@ -212,19 +277,21 @@
if (layerParams.value.decideWhetherToAddOrEdit === 1) {
//围栏新增
addFenceApi(params).then(res => {
-
- ElMessage.success('新增成功');
+ ElMessage.success('新增成功');
+ EventBus.emit('gettreeDataApi');
+ clearAllData();
+ emit('callParentMethod');
});
} else if (layerParams.value.decideWhetherToAddOrEdit === 2) {
//围栏编辑
deitFenceApi(params).then(res => {
- ElMessage.success('编辑成功');
+ ElMessage.success('编辑成功');
+ EventBus.emit('gettreeDataApi');
+
+ clearAllData();
+ emit('callParentMethod');
});
}
-
- clearAllData();
- emit('callParentMethod');
- EventBus.emit('gettreeDataApi');
};
onMounted(() => {
// 获取判断状态（默认设为 1）
@@ -300,6 +367,10 @@
}
:deep(.el-date-editor.el-input__wrapper) {
width: auto !important;
+ background: transparent !important;
+ }
+ :deep(.el-range-editor.is-disabled input) {
+ background-color: transparent !important;
}
}
.detailInfo {
@@ -310,10 +381,16 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
- color: #ffffff;
+ color: #dfdfdf;
margin-bottom: 23px;
.num {
span {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: bold;
+ font-size: 14px;
+ color: #ffffff;
+ }
+ .areaStyle {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 20px;
@@ -333,7 +410,7 @@
display: flex;
justify-content: center;
position: absolute;
- bottom: 59px;
+ bottom: 29px;
left: 0;
right: 0;
img {
--
Gitblit v1.9.3