<template>
|
<div class="rightContainer">
|
<div class="contenttitle">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}信息</div>
|
<div class="centerBox">
|
<div class="itemRow">
|
<div class="label">文件夹名称</div>
|
<div>
|
<el-select
|
:disabled="isDisabled"
|
class="ztzf-layer-search"
|
clearable
|
v-model="formData.folder_id"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="itemRow">
|
<div class="label">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}名称</div>
|
<div>
|
<el-input
|
:disabled="isDisabled"
|
class="ztzf-layer-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
|
:disabled="isDisabled"
|
class="ztzf-layer-date-picker"
|
v-model="timeValue"
|
type="datetimerange"
|
format="YYYY-MM-DD HH:mm"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
/>
|
</div>
|
</div>
|
<div class="itemRow">
|
<div class="label">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}备注</div>
|
<div>
|
<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 && layerParams.fenceType === 1">
|
<div class="itemData">
|
<div class="title">识别区面积</div>
|
<div class="num">
|
<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" v-if="layerParams.editNest && layerParams.fenceType === 2">
|
<div class="title">禁飞区面积</div>
|
<div class="num">
|
<span class="areaStyle">{{ fenceArea }}</span> m²
|
</div>
|
</div>
|
<div class="itemData">
|
<div class="title">禁飞区高度</div>
|
<div class="num noFly">
|
<span
|
><el-input
|
:disabled="isDisabled"
|
class="ztzf-layer-input inputName"
|
v-model="formData.altitude"
|
placeholder="请输入"
|
/></span>
|
米
|
</div>
|
</div>
|
</div>
|
<div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 2">
|
<div class="itemData">
|
<div class="title">创建时间</div>
|
<div class="num">
|
<span>{{ formData?.create_time }}</span>
|
</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.editNest && layerParams.fenceType === 1">
|
<div class="itemData">
|
<div class="title">创建时间</div>
|
<div class="num">
|
<span>{{ formData?.create_time }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="btnGroups">
|
<img src="/src/assets/images/layerManagement/savebtn.svg" alt="" @click="submitHandle" />
|
<img src="/src/assets/images/layerManagement/cancelbtn.svg" @click="cancelHandel" alt="" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ElMessage } from 'element-plus';
|
import dayjs from 'dayjs';
|
import { deitFenceApi, addFenceApi } from '@/api/layer/index';
|
import EventBus from '@/utils/eventBus';
|
const emit = defineEmits(['callParentMethod']);
|
const layerParams = inject('layerParams');
|
const options = ref([]);
|
const timeValue = ref('');
|
options.value = layerParams.value.folderOption;
|
const formData = ref({
|
folder_id: '',
|
name: '',
|
description: '',
|
is_enabled: false,
|
area: '',
|
altitude: '',
|
control_start_time: '',
|
control_end_time: '',
|
geo_data: '',
|
|
});
|
const detailData = ref(null);
|
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 => {
|
if (newArea !== undefined && newArea !== null) {
|
fenceArea.value = newArea;
|
formData.value.area = newArea;
|
}
|
},
|
{ immediate: true }
|
);
|
// 监听editDetailData的变化
|
watch(
|
() => layerParams.value.editDetailData,
|
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,
|
newTimeArr => {
|
if (Array.isArray(newTimeArr) && newTimeArr.length === 2) {
|
const startTime = newTimeArr[0];
|
const endTime = newTimeArr[1];
|
formData.value.control_start_time = dayjs(startTime).format('YYYY-MM-DD HH:mm:ss');
|
formData.value.control_end_time = dayjs(endTime).format('YYYY-MM-DD HH:mm:ss');
|
} else {
|
formData.value.control_start_time = '';
|
formData.value.control_end_time = '';
|
}
|
},
|
{ immediate: true }
|
);
|
const clearAllData = () => {
|
detailData.value = {};
|
layerParams.value.decideWhetherToAddOrEdit = 1;
|
// 重置面板状态和缓存数据
|
layerParams.value.addNest = false;
|
layerParams.value.editNest = false;
|
layerParams.value.editDetailData = null;
|
layerParams.value.polygonPosition = null;
|
layerParams.value.editingIsProhibited = false;
|
};
|
const cancelHandel = () => {
|
clearAllData();
|
emit('callParentMethod');
|
EventBus.emit('gettreeDataApi');
|
};
|
const submitHandle = () => {
|
if (!formData.value.folder_id) {
|
ElMessage.error('请选择文件夹');
|
return;
|
}
|
if (!formData.value.name) {
|
ElMessage.error('请输入名称');
|
return;
|
}
|
if (!formData.value.altitude && layerParams.value.fenceType === 2) {
|
ElMessage.error('请输入高度');
|
return;
|
}
|
if (fenceArea.value === 0) {
|
ElMessage.error('请绘制区域');
|
return;
|
}
|
const params = {
|
folder_id: formData.value.folder_id,
|
name: formData.value.name,
|
description: formData.value.description,
|
is_enabled: true,
|
area: formData.value.area,
|
altitude: formData.value.altitude,
|
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;
|
}
|
if (layerParams.value.decideWhetherToAddOrEdit === 1) {
|
//围栏新增
|
addFenceApi(params).then(res => {
|
ElMessage.success('新增成功');
|
EventBus.emit('gettreeDataApi');
|
clearAllData();
|
emit('callParentMethod');
|
});
|
} else if (layerParams.value.decideWhetherToAddOrEdit === 2) {
|
//围栏编辑
|
deitFenceApi(params).then(res => {
|
ElMessage.success('编辑成功');
|
EventBus.emit('gettreeDataApi');
|
|
clearAllData();
|
emit('callParentMethod');
|
});
|
}
|
};
|
onMounted(() => {
|
// 获取判断状态（默认设为 1）
|
const addOrEditStatus = layerParams.value.decideWhetherToAddOrEdit || 1;
|
if (addOrEditStatus === 2) {
|
// 编辑状态：回显数据
|
const editData = layerParams.value.editDetailData || {};
|
formData.value = {
|
folder_id: editData.folder_id || '',
|
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 || '',
|
create_name: editData.create_name,
|
create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
|
};
|
if (editData.folder_id && options.value.length > 0) {
|
const matchedFolder = options.value.find(item => item.value === String(editData.folder_id));
|
if (matchedFolder) {
|
formData.value.folder_id = matchedFolder.value;
|
}
|
}
|
if (editData.control_start_time && editData.control_end_time) {
|
timeValue.value = [
|
dayjs(editData.control_start_time).toDate(),
|
dayjs(editData.control_end_time).toDate(),
|
];
|
}
|
fenceArea.value = editData.area || 0;
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.rightContainer {
|
position: absolute;
|
top: 0;
|
right: 0;
|
height: calc(100% - 32px);
|
z-index: 99;
|
width: 324px;
|
|
overflow: hidden;
|
background: rgba(0,0,0,0.51);
|
backdrop-filter: blur(4px);
|
border-radius: 8px 8px 8px 8px;
|
padding: 16px 12px;
|
|
:deep(.el-textarea__inner) {
|
background: transparent !important;
|
color: #ffffff !important;
|
}
|
.contenttitle {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 16px;
|
color: #ffffff;
|
margin-bottom: 20px;
|
}
|
.centerBox {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #ffffff;
|
.itemRow {
|
margin-bottom: 35px;
|
}
|
.label {
|
margin-bottom: 5px;
|
}
|
: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 {
|
.infpItem {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
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;
|
color: #ffffff;
|
}
|
}
|
.noFly {
|
display: flex;
|
align-items: center;
|
}
|
.itemData {
|
width: 50%;
|
}
|
}
|
}
|
.btnGroups {
|
display: flex;
|
justify-content: center;
|
position: absolute;
|
bottom: 29px;
|
left: 0;
|
right: 0;
|
img {
|
width: 125px;
|
height: 39px;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
