| | |
| | | <template> |
| | | <div class="rightContainer"> |
| | | <div class="contenttitle">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}信息</div> |
| | | <div class="rightContainer" > |
| | | <div class="contenttitle">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}信息</div> |
| | | <div class="centerBox"> |
| | | <div class="itemRow"> |
| | | <div class="label">文件夹名称</div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="itemRow"> |
| | | <div class="label">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}名称</div> |
| | | <div class="label">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}名称</div> |
| | | <div> |
| | | <el-input |
| | | :disabled="isDisabled" |
| | | class="ztzf-input inputName" |
| | | class="ztzf-layer-input inputName" |
| | | v-model="formData.name" |
| | | placeholder="请输入" |
| | | /> |
| | |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | :disabled-date="disabledDate" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="itemRow"> |
| | | <div class="label">{{ layerParams.fenceType === 1 ? '围栏' : '禁飞区' }}备注</div> |
| | | <div class="label">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}备注</div> |
| | | <div> |
| | | <el-input |
| | | :disabled="isDisabled" |
| | |
| | | <div class="detailInfo"> |
| | | <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 1"> |
| | | <div class="itemData"> |
| | | <div class="title">围栏面积</div> |
| | | <div class="title">识别区面积</div> |
| | | <div class="num"> |
| | | <span class="areaStyle">{{ fenceArea }}</span> m² |
| | | </div> |
| | |
| | | <span |
| | | ><el-input |
| | | :disabled="isDisabled" |
| | | class="ztzf-input inputName" |
| | | class="ztzf-layer-input inputName" |
| | | v-model="formData.altitude" |
| | | placeholder="请输入" |
| | | /></span> |
| | |
| | | </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="" /> |
| | | <img v-if="!layerParams.editingIsProhibited && layerParams.fenceArea / 1000000 > 50" src="/src/assets/images/layerManagement/disabled.svg" alt="" /> |
| | | <img v-if="!layerParams.editingIsProhibited && layerParams.fenceArea / 1000000 < 50" src="/src/assets/images/layerManagement/savebtn.svg" alt="" @click="submitHandle" /> |
| | | <img v-if="layerParams.editingIsProhibited" src="/src/assets/images/layerManagement/closeBtn.svg" @click="cancelHandel" alt="" /> |
| | | <img v-else src="/src/assets/images/layerManagement/cancelbtn.svg" @click="cancelHandel" alt="" /> |
| | | |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import dayjs from 'dayjs'; |
| | | import { deitFenceApi, addFenceApi } from '@/api/layer/index'; |
| | | import EventBus from '@/utils/eventBus'; |
| | | const emit = defineEmits(['callParentMethod']); |
| | | const emit = defineEmits(['callParentMethod','update:loading']); |
| | | const layerParams = inject('layerParams'); |
| | | const options = ref([]); |
| | | const timeValue = ref(''); |
| | |
| | | control_start_time: '', |
| | | control_end_time: '', |
| | | geo_data: '', |
| | | altitude: '', |
| | | |
| | | }); |
| | | const loading = ref(false); |
| | | const detailData = ref(null); |
| | | const fenceArea = ref(0); |
| | | detailData.value = layerParams.value.editDetailData; |
| | |
| | | const isDisabled = computed(() => { |
| | | return layerParams.value.editingIsProhibited; |
| | | }); |
| | | |
| | | // 禁用当天之前的日期 |
| | | const disabledDate = time => { |
| | | return time.getTime() < Date.now() - 8.64e7 // 86400000 = 24 * 60 * 60 * 1000 |
| | | } |
| | | watch( |
| | | () => layerParams.value.fenceArea, |
| | | newArea => { |
| | | if (newArea !== undefined && newArea !== null) { |
| | | fenceArea.value = newArea; |
| | | formData.value.area = newArea; |
| | | if (newArea / 1000000 < 50) { |
| | | fenceArea.value = newArea; |
| | | formData.value.area = newArea; |
| | | } |
| | | } |
| | | }, |
| | | { immediate: true } |
| | |
| | | watch( |
| | | () => layerParams.value.editDetailData, |
| | | newVal => { |
| | | console.log('newVal', newVal); |
| | | |
| | | if (newVal && layerParams.value.editingIsProhibited) { |
| | | // 当editDetailData有值时,填充表单 |
| | | formData.value = { |
| | |
| | | layerParams.value.editingIsProhibited = false; |
| | | }; |
| | | const cancelHandel = () => { |
| | | loading.value = false |
| | | emit('update:loading', false); |
| | | clearAllData(); |
| | | emit('callParentMethod'); |
| | | EventBus.emit('gettreeDataApi'); |
| | | }; |
| | | const submitHandle = () => { |
| | | if(layerParams.value.crossSurface){ |
| | | return ElMessage.warning('测区不支持交叉面') |
| | | } |
| | | if (!formData.value.folder_id) { |
| | | ElMessage.error('请选择文件夹'); |
| | | return; |
| | |
| | | ElMessage.error('请绘制区域'); |
| | | return; |
| | | } |
| | | loading.value = true |
| | | emit('update:loading', true); |
| | | const params = { |
| | | folder_id: formData.value.folder_id, |
| | | name: formData.value.name, |
| | |
| | | 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'); |
| | | }); |
| | | addFenceApi(params) |
| | | .then(res => { |
| | | if(res.data.code ===0 ){ |
| | | ElMessage.success('新增成功'); |
| | | EventBus.emit('gettreeDataApi'); |
| | | loading.value = false; |
| | | emit('update:loading', false); |
| | | clearAllData(); |
| | | emit('callParentMethod'); |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | ElMessage.error('新增失败,请重试'); |
| | | }) |
| | | .finally(() => { |
| | | loading.value = false; |
| | | emit('update:loading', false); |
| | | }); |
| | | } else if (layerParams.value.decideWhetherToAddOrEdit === 2) { |
| | | //围栏编辑 |
| | | deitFenceApi(params).then(res => { |
| | | ElMessage.success('编辑成功'); |
| | | EventBus.emit('gettreeDataApi'); |
| | | |
| | | clearAllData(); |
| | | emit('callParentMethod'); |
| | | }); |
| | | } |
| | | deitFenceApi(params) |
| | | .then(res => { |
| | | if(res.data.code === 0){ |
| | | ElMessage.success('编辑成功'); |
| | | EventBus.emit('gettreeDataApi'); |
| | | clearAllData(); |
| | | emit('callParentMethod'); |
| | | loading.value = false; |
| | | emit('update:loading', false); |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | ElMessage.error('编辑失败,请重试'); |
| | | }) |
| | | .finally(() => { |
| | | loading.value = false; |
| | | emit('update:loading', false); |
| | | }); |
| | | } |
| | | }; |
| | | onMounted(() => { |
| | | // 获取判断状态(默认设为 1) |
| | |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | height: 95%; |
| | | height: calc(100% - 32px); |
| | | z-index: 99; |
| | | width: 324px; |
| | | |
| | | overflow: hidden; |
| | | background: rgba(0, 0, 0, 0.8); |
| | | background: rgba(0,0,0,0.51); |
| | | backdrop-filter: blur(4px); |
| | | border-radius: 8px 8px 8px 8px; |
| | | padding: 16px 12px; |
| | | |
| | | :deep(.el-select__wrapper.is-disabled .el-select__selected-item){ |
| | | color: rgba(255,255,255,0.37) !important; |
| | | } |
| | | :deep(.el-textarea__inner) { |
| | | background: transparent !important; |
| | | color: #ffffff !important; |
| | | color: #ffffff; |
| | | } |
| | | :deep(.el-textarea.is-disabled .el-textarea__inner){ |
| | | color: var(--el-disabled-text-color) !important; |
| | | |
| | | } |
| | | .contenttitle { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: bold; |
| | |
| | | height: 39px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | } |
| | | } |
| | | </style> |