<template>
|
<div class="rightContainer">
|
<div class="contenttitle">{{ itSLandPlanning ? '文件' : '文件夹' }}信息</div>
|
<div class="centerBox">
|
<div class="itemRow">
|
<div class="label">{{ itSLandPlanning ? '文件' : '文件夹' }}名称</div>
|
<div>
|
<el-input class="command-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="command-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="command-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">{{ dataUnitConversion(formData.total_area).val }}</span> {{
|
dataUnitConversion(formData.total_area).unit }}
|
</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>
|
import {dataUnitConversion} from '@ztzf/utils'
|
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>
|
