<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
}
}
onMounted(() => {
})
defineExpose({
getList,
submit,
setFormData,
setTable,
getDetailInfo
})
</script>
<style lang="scss" scoped>
.box-card {
margin-bottom: 10px;
.card-header {
font-weight: 700;
font-size: 16px;
}
::v-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>
