<template>
<el-card class="box-card" shadow="never">
<template #header>
<div class="card-header">
<span>达标情况</span>
</div>
</template>
<el-form class="form" ref="targetForm" :model="form">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="面积加和㎡:" prop="areaTotal">
<template #label>
<span>面积加和㎡</span>
<popover>
<span style="font-weight: 700">说明</span>
<br />
<span>不同类型下垫面面积加和</span>
</popover>
<span>:</span>
</template>
<span>{{ form.areaTotal }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="硬质地面率㎡:" prop="hardGroundAreaTotal">
<template #label>
<span>硬质地面㎡</span>
<popover>
<span style="font-weight: 700">说明</span>
<br />
<span>硬质地面面积加和</span>
</popover>
<span>:</span>
</template>
<span>{{ form.hardGroundAreaTotal }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="硬质地面率是否达标:" prop="hardGroundStandards">
<template #label>
<span>硬质地面率是否达标</span>
<popover :width="260">
<span style="font-weight: 700">说明</span>
<br />
<span>硬质地面占总面积的百分比，跟目标硬质地面对比，小于等于目标则达标</span>
</popover>
<span>:</span>
</template>
<el-tag v-if="standardMap.get(form.hardGroundStandards)?.text" :type="standardMap.get(form.hardGroundStandards)?.type">{{
standardMap.get(form.hardGroundStandards)?.text
}}</el-tag>
<span v-else></span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="综合径流系数:" prop="comprehensiveRunoffCoefficient">
<template #label>
<span>综合径流系数</span>
<popover :width="260">
<span style="font-weight: 700">说明</span>
<br />
<span>不同类型下垫面径流系数×不同类型下垫面面积/下垫面面积加和</span>
</popover>
<span>:</span>
</template>
<span>{{ form.comprehensiveRunoffCoefficient }}</span>
</el-form-item></el-col
>
<el-col :span="8">
<el-form-item label="目标调蓄量m³:" prop="targetStorageCapacity">
<template #label>
<span>目标调蓄量m³</span>
<popover :width="280">
<span style="font-weight: 700">说明</span>
<br />
<span>0.01*设计降雨量*面积加和*综合径流系数</span>
</popover>
<span>:</span>
</template>
<span>{{ form.targetStorageCapacity }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设施调蓄量m³:" prop="facilityStorageCapacity">
<template #label>
<span>设施调蓄量m³</span>
<popover :width="280">
<span style="font-weight: 700">说明</span>
<br />
<span>渗透设施、生物滞留设施、传输与截污净化设施的设施面积*有效调蓄深度加和，再加存储设施的调蓄量之和</span>
</popover>
<span>:</span>
</template>
<span>{{ form.facilityStorageCapacity }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="调蓄容积是否达标:" prop="storageCapacityStandards">
<template #label>
<span>调蓄容积是否达标</span>
<popover :width="280">
<span style="font-weight: 700">说明</span>
<br />
<span>跟目标年径流总量控制率对比，大于等于则达标，反之不达标</span>
</popover>
<span>:</span>
</template>
<el-tag
v-if="standardMap.get(form.storageCapacityStandards)?.text"
:type="standardMap.get(form.storageCapacityStandards)?.type"
>{{ standardMap.get(form.storageCapacityStandards)?.text }}</el-tag
>
<span v-else></span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设施调蓄量对应年径流总量控制率%:" prop="facilityStorageCapacityToAnnualRunoffTotalControlRate">
<template #label>
<span>设施调蓄量对应年径流总量控制率%</span>
<popover :width="280">
<span style="font-weight: 700">说明</span>
<br />
<span>设施调蓄量对应设计降雨=100*设施调蓄量/(面积加和*综合径流系数)</span>
<br /><br />
<span
>设施调蓄量对应年径流总量控制率：根据目标年径流总量控制率跟设计降雨关系曲线，由设施调蓄量对应设计降雨推算设施调蓄量对应年径流总量控制率</span
>
</popover>
<span>:</span>
</template>
<span class="ellipsis" :title="form.facilityStorageCapacityToAnnualRunoffTotalControlRate">{{
form.facilityStorageCapacityToAnnualRunoffTotalControlRate
}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="污染去除率:" prop="pollutionRemovalRate">
<template #label>
<span>污染去除率</span>
<popover :width="280">
<span style="font-weight: 700">说明</span>
<br />
<span>污染去除率=设施调蓄量对应年径流总量控制率*各类设施污染去除率*各类设施服务面积/服务面积加和</span>
</popover>
<span>:</span>
</template>
<span class="ellipsis" :title="form.facilityStorageCapacityToAnnualRunoffTotalControlRate">{{
form.pollutionRemovalRate
}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="污染去除率是否达标:" prop="pollutionRemovalStandards">
<template #label>
<span>污染去除率是否达标</span>
<popover :width="280">
<span style="font-weight: 700">说明</span>
<br />
<span>跟目标年径流污染控制率对比，大于等于则达标，反之不达标</span>
</popover>
<span>:</span>
</template>
<el-tag
v-if="standardMap.get(form.pollutionRemovalStandards)?.text"
:type="standardMap.get(form.pollutionRemovalStandards)?.type"
>{{ standardMap.get(form.pollutionRemovalStandards)?.text }}</el-tag
>
<span v-else></span> </el-form-item
></el-col>
</el-row>
</el-form>
</el-card>
<el-card class="box-card" shadow="never">
<template #header>
<div class="card-header">
<span>设施调蓄量计算参数</span>
</div>
</template>
<div class="tables">
<infiltration
class="list"
:list="obj.infiltrationTableList"
ref="infiltrationRef"
v-show="obj.infiltrationTableList.length"
:disabled="props.disabled"
/>
<retention
class="list"
:list="obj.retentionTableList"
ref="retentionRef"
v-show="obj.retentionTableList.length"
:disabled="props.disabled"
/>
<storage class="list" :list="obj.storageTableList" ref="storageRef" v-show="obj.storageTableList.length" :disabled="props.disabled" />
<decont class="list" :list="obj.decontTableList" ref="decontRef" v-show="obj.decontTableList.length" :disabled="props.disabled" />
</div>
</el-card>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getFacilitiesAdaptabilityConfigItemList } from '@/api/preassess/adaptationConfig';
import { getFacilitiesPolluteRemoveConfigItemList } from '@/api/preassess/removalRate';
import { facilitiesStandardCalcEdit } from '@/api/preassess/calculate';
import infiltration from './tables/infiltration.vue';
import retention from './tables/retention.vue';
import storage from './tables/storage.vue';
import decont from './tables/decont.vue';
import { standardMap } from './map';
import { inheritAttr } from '@/utils/v3';
import popover from '@/components/popover';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['success', 'set-computed-disabled']);
const props = defineProps({
id: {
type: [String, Number],
default: '',
},
opts: {
type: Object,
default: () => {},
},
projectInfo: {
type: Object,
default: () => {},
},
disabled: {
type: Boolean,
default: false,
},
status: {
type: String,
default: '',
},
});
const { id, opts, projectInfo, status } = props;
const form = reactive({
id: '',
areaTotal: '',
hardGroundAreaTotal: '',
hardGroundStandards: '',
comprehensiveRunoffCoefficient: '',
targetStorageCapacity: '',
facilityStorageCapacity: '',
storageCapacityStandards: '',
facilityStorageCapacityToAnnualRunoffTotalControlRate: '',
pollutionRemovalRate: '',
pollutionRemovalStandards: '',
});
const tableData = ref([]);
const obj = reactive({
infiltrationTableList: [],
retentionTableList: [],
storageTableList: [],
decontTableList: [],
});
const getTableList = async () => {
const res = await getFacilitiesPolluteRemoveConfigItemList({ status: '1' });
if (res?.code !== 200) return;
tableData.value = res.data;
emit('set-computed-disabled', !tableData.value.length);
const res1 = await getFacilitiesAdaptabilityConfigItemList({ status: '1' });
if (res1?.code !== 200) return;
const filterData = res1.data;
obj.infiltrationTableList = getChildrenTableList('osmosis', filterData);
obj.retentionTableList = getChildrenTableList('biological', filterData);
obj.storageTableList = getChildrenTableList('stockpile', filterData);
obj.decontTableList = getChildrenTableList('transmit', filterData);
};
const getChildrenTableList = (itemType, filterData) => {
const list = tableData.value.filter(it => it.itemType === itemType);
return list.filter(it => {
it.facilityArea = '';
it.effectiveStorageDepth = '';
it.facilityServiceArea = '';
it.pollutionRemovalRate = it.downValue;
const ele = filterData.find(val => val.itemType + val.itemName === it.itemType + it.itemName);
if (ele) {
const adaptabilityConfigJson = JSON.parse(ele.adaptabilityConfigJson);
const engineeringType = projectInfo.engineeringType;
const item = adaptabilityConfigJson.find(it => it.key === engineeringType);
return item.value !== 'unsuitable';
} else {
return true;
}
});
};
const getDetailInfo = data => {
inheritAttr(data, form);
tableData.value = data.standardCalcFacilitiesPolluteRemoveSaveRequestList;
if (tableData.value.length) {
obj.infiltrationTableList = tableData.value.filter(it => it.itemType === 'osmosis');
obj.retentionTableList = tableData.value.filter(it => it.itemType === 'biological');
obj.storageTableList = tableData.value.filter(it => it.itemType === 'stockpile');
obj.decontTableList = tableData.value.filter(it => it.itemType === 'transmit');
} else {
getTableList();
}
};
const getList = (data = {}) => {
if (tableData.value.length) return;
if (id) {
if (status === '0') {
inheritAttr(data, form);
getTableList();
} else {
getDetailInfo(data);
}
} else {
getTableList();
}
};
const submit = () => {
const validate1 = proxy.$refs.infiltrationRef.validate();
const validate2 = proxy.$refs.retentionRef.validate();
const validate3 = proxy.$refs.storageRef.validate();
const validate4 = proxy.$refs.decontRef.validate();
console.log(validate1, validate2, validate3, validate4);
Promise.all([validate1, validate2, validate3, validate4]).then(async () => {
const standardCalcFacilitiesPolluteRemoveSaveRequestList = [];
const list = [];
for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
const ele = obj[key];
list.push(ele);
const it = JSON.parse(JSON.stringify(ele));
for (const item of it) {
item.facilityArea = item.facilityArea || '0';
item.effectiveStorageDepth = item.effectiveStorageDepth || '0';
item.facilityServiceArea = item.facilityServiceArea || '0';
item.pollutionRemovalRate = item.pollutionRemovalRate || item.downValue;
standardCalcFacilitiesPolluteRemoveSaveRequestList.push(item);
}
}
}
const params = {
calculateType: 1,
projectNo: projectInfo.projectNo,
...form,
standardCalcFacilitiesPolluteRemoveSaveRequestList,
};
console.log(params);
const res = await facilitiesStandardCalcEdit(params);
if (res?.code !== 200) return;
proxy.$modal.msgSuccess('计算成功！');
inheritAttr(res.data, form);
for (const item of list) {
for (const it of item) {
it.facilityArea = it.facilityArea || '0';
it.effectiveStorageDepth = it.effectiveStorageDepth || '0';
it.facilityServiceArea = it.facilityServiceArea || '0';
it.pollutionRemovalRate = it.pollutionRemovalRate || it.downValue;
}
}
emit('success', res?.data || {});
});
};
const setFormData = data => {
inheritAttr(data, form);
};
const setTable = () => {
for (const item of tableData.value) {
item.facilityArea = '';
item.effectiveStorageDepth = '';
item.facilityServiceArea = '';
item.pollutionRemovalRate = item.downValue;
}
};
const heavyLoad = async () => {
const res = await getFacilitiesPolluteRemoveConfigItemList({ status: '1' })
if(res?.code !== 200) return
tableData.value = res.data
const res1 = await getFacilitiesAdaptabilityConfigItemList({ status: '1' })
if(res1?.code !== 200) return
const filterData = res1.data
const infiltrationTableList = getChildrenTableList('osmosis', filterData)
obj.infiltrationTableList = mergeData(infiltrationTableList, obj.infiltrationTableList)
const retentionTableList = getChildrenTableList('biological', filterData)
obj.retentionTableList = mergeData(retentionTableList, obj.retentionTableList)
const storageTableList = getChildrenTableList('stockpile', filterData)
obj.storageTableList = mergeData(storageTableList, obj.storageTableList)
const decontTableList = getChildrenTableList('transmit', filterData)
obj.decontTableList = mergeData(decontTableList, obj.decontTableList)
}
const mergeData = (list, oldList) => {
list.forEach((item) => {
const oldData = oldList.find(it => it.itemName === item.itemName)
if(oldData) {
item.facilityArea = oldData.facilityArea
item.effectiveStorageDepth = oldData.effectiveStorageDepth
item.facilityServiceArea = oldData.facilityServiceArea
item.pollutionRemovalRate = oldData.pollutionRemovalRate
}
})
return list
}
onMounted(() => {});
defineExpose({
getList,
submit,
setFormData,
setTable,
getDetailInfo,
heavyLoad
});
</script>
<style lang="scss" scoped>
.box-card {
margin-bottom: 10px;
.card-header {
font-weight: 700;
font-size: 16px;
}
:deep(.form) {
.el-form-item {
margin-bottom: 0;
}
}
}
.tables {
// max-height: 400px;
// overflow: auto;
// overflow-x: hidden;
// margin-right: -20px;
// padding-right: 20px;
> .list {
margin-bottom: 20px;
&:last-of-type {
margin-bottom: 0;
}
}
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
