<template>
|
<div class="rightContainer">
|
<div class="contenttitle">{{itSLandPlanning ? '文件' : '文件夹'}}信息</div>
|
<div class="centerBox">
|
<div class="itemRow">
|
<div class="label">{{itSLandPlanning ? '文件' : '文件夹'}}名称</div>
|
<div>
|
<el-input class="ztzf-layer-input inputName" v-model="formData.name" placeholder="请输入" />
|
</div>
|
</div>
|
<div class="itemRow" v-if="(layerParams.addAnEditingFolder === 1 && layerParams.fileType !==2) || (layerParams.addAnEditingFolder === 2 && layerParams.fileType !==2) && !itSLandPlanning">
|
<div class="label">关联算法</div>
|
<div>
|
<el-select
|
class="ztzf-layer-search filter-item"
|
|
@change="handleTypeChange"
|
v-model="formData.event_type"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option
|
v-for="item in types"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<el-select
|
v-model="formData.algorithm_name"
|
class="ztzf-layer-search"
|
placeholder="请选择"
|
clearable
|
:disabled="!formData.event_type"
|
>
|
<el-option
|
v-for="item in algorithms"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<div class="detailInfo" v-if="layerParams.editFolder">
|
<div class="infpItem" v-if="!itSLandPlanning">
|
<div class="itemData">
|
<div class="title">{{ layerParams.fileType === 1 ? '识别区' : '禁飞区' }}总数量</div>
|
|
<div class="num">
|
<span class="totalQuantity">{{ formData.total_count }}</span> 个
|
</div>
|
</div>
|
<div class="itemData">
|
<div class="title">{{ layerParams.fileType === 1 ? '识别区' : '禁飞区' }}总面积</div>
|
<div class="num">
|
<span class="areaStyle">{{ formData.total_area.toFixed(2) }}</span> m²
|
</div>
|
</div>
|
</div>
|
<div class="infpItem">
|
<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>
|
<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>
|
const emit = defineEmits(['refreshMethod','callParentMethod']);
|
import EventBus from '@/utils/eventBus';
|
import { ElMessage } from 'element-plus';
|
import dayjs from 'dayjs';
|
import { deleteFolderApi, deitFolderApi, addFolderApi } from '@/api/layer/index';
|
import { getTicketInfo } from '@/api/tickets/ticket';
|
import { computed } from 'vue';
|
const layerParams = inject('layerParams');
|
const types = ref([]); //工单类型
|
const allAlgorithms = ref([]);
|
const algorithms = ref([]);
|
const formData = ref({
|
category_id: '',
|
name: '',
|
event_type: '',
|
algorithm_name: '',
|
total_count: 0,
|
total_area: 0,
|
});
|
const detailData = ref(null);
|
detailData.value = layerParams.value.editFolderData;
|
const props = defineProps({
|
activeName: String,
|
});
|
const itSLandPlanning = computed(() => props.activeName === '国土空间规划')
|
const getTicketInfoData = async () => {
|
const response = await getTicketInfo();
|
const { dept_data, event_type, ai_type, info } = response.data.data;
|
allAlgorithms.value = info;
|
types.value = Object.entries(event_type).map(([key, value]) => ({
|
label: value,
|
value: key,
|
}));
|
};
|
const handleTypeChange = typeValue => {
|
formData.value.algorithm_name = '';
|
const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue);
|
if (!matchedCategory || !matchedCategory.algorithms || matchedCategory.algorithms.length === 0) {
|
// 无匹配的算法时清空
|
algorithms.value = [];
|
return;
|
}
|
algorithms.value = matchedCategory.algorithms.map(algo => ({
|
label: algo.dict_value,
|
value: algo.dict_key,
|
dict_key: algo.dict_key,
|
dict_value: algo.dict_value,
|
}));
|
};
|
const clearAllData = () => {
|
formData.value = {
|
category_id: '',
|
name: '',
|
event_type: '',
|
algorithm_name: '',
|
total_count: 0,
|
total_area: 0,
|
create_time: '',
|
create_name: '',
|
};
|
algorithms.value = [];
|
detailData.value = {};
|
layerParams.value.decideWhetherToAddOrEdit = 1;
|
layerParams.value.addFolder = false;
|
layerParams.value.editFolder = false;
|
layerParams.value.editDetailData = null;
|
layerParams.value.polygonPosition = null;
|
};
|
const cancelHandel = () => {
|
clearAllData();
|
emit('callParentMethod');
|
};
|
const submitHandle = () => {
|
if (!formData.value.name) {
|
ElMessage.error('请输入文件夹名称');
|
return;
|
}
|
if(!itSLandPlanning.value){
|
if (!formData.value.event_type && layerParams.value.fileType === 1) {
|
ElMessage.warning('请选择类型');
|
return;
|
}
|
if (!formData.value.algorithm_name && layerParams.value.fileType === 1) {
|
ElMessage.warning('请选择算法');
|
return;
|
}
|
}
|
const params = {
|
category_id: layerParams.value.fileType === 1 ? 1 : 2,
|
name: formData.value.name,
|
event_type: formData.value.event_type,
|
algorithm_name: formData.value.algorithm_name,
|
};
|
// 如果是编辑模式，才添加 id
|
if (layerParams.value.addAnEditingFolder === 2) {
|
params.id = detailData.value.id;
|
}
|
if (layerParams.value.addAnEditingFolder === 1) {
|
// 文件夹新增
|
addFolderApi(params).then(res => {
|
ElMessage.success('新增成功');
|
EventBus.emit('gettreeDataApi');
|
emit('refreshMethod');
|
clearAllData();
|
emit('callParentMethod');
|
});
|
} else {
|
//文件夹编辑
|
deitFolderApi(params).then(res => {
|
ElMessage.success('编辑成功');
|
EventBus.emit('gettreeDataApi');
|
clearAllData();
|
emit('callParentMethod');
|
});
|
}
|
};
|
onMounted(async () => {
|
await getTicketInfoData();
|
const addOrEditStatus = layerParams.value.addAnEditingFolder || 1;
|
// 判断是否有编辑数据，有则回显
|
if (detailData.value && addOrEditStatus === 2) {
|
const editData = detailData.value;
|
formData.value = {
|
...formData.value,
|
category_id: editData.category_id,
|
name: editData.name,
|
event_type: editData.event_type, // 回显“关联算法类型”值
|
algorithm_name: editData.algorithm_name, // 回显“算法”值
|
|
total_count: editData.total_count,
|
total_area: editData.total_area,
|
create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
|
create_name: editData.create_name,
|
};
|
if (formData.value.event_type) {
|
handleTypeChange(formData.value.event_type);
|
|
setTimeout(() => {
|
formData.value.algorithm_name = editData.algorithm_name;
|
}, 100);
|
}
|
}
|
});
|
</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;
|
}
|
}
|
.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;
|
}
|
.totalQuantity {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 20px;
|
}
|
.areaStyle {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 20px;
|
color: #FFFFFF;
|
|
}
|
}
|
.itemData {
|
width: 50%;
|
|
}
|
}
|
}
|
.btnGroups {
|
display: flex;
|
justify-content: center;
|
position: absolute;
|
bottom: 59px;
|
left: 0;
|
right: 0;
|
img {
|
width: 125px;
|
height: 39px;
|
cursor: pointer;
|
}
|
}
|
}
|
.filter-item {
|
margin-bottom: 12px;
|
}
|
</style>
|
