<template> <el-card class="box-card" shadow="never"> <template #header> <div class="card-header"> <span>达标情况</span> </div> </template> <el-form class="formM5" ref="standForm" :model="form"> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="面积加和㎡:" prop="areaTotal"> <span>{{ form.areaTotal }}</span> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="硬质地面㎡:" prop="hardGroundRate"> <template #label> <span>硬质地面㎡</span> <popover :width="140"> <span style="font-weight: 700">说明</span> <br /> <span>硬质地面面积加和</span> </popover> <span>:</span> </template> <span>{{ form.hardGroundRate }}</span> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="硬质地面率是否达标:" prop="hardGroundStandards"> <template #label> <span>硬质地面率是否达标</span> <popover> <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-col :span="6"> <el-form-item label="硬质地面率评级:" prop="hardGroundGrade"> <template #label> <span>硬质地面率评级</span> <popover width={ 240 }> <span style="font-weight: 700">说明</span> <br /> <span>高于目标值,评【差】</span> <br /> <span>低于目标值5%以内,评【中】</span> <br /> <span>低于目标值10%以内,评【良】</span> <br /> <span>低于目标值10%以上,评【优】</span> <br /> <span>包含下限、不包含上限</span> </popover> <span>:</span> </template> <el-tag v-if="levelMap.get(form.hardGroundGrade)?.text" :type="levelMap.get(form.hardGroundGrade)?.type" >{{ levelMap.get(form.hardGroundGrade)?.text }}</el-tag> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="目标调蓄量m³:" prop="targetStorageCapacity"> <span>{{ form.targetStorageCapacity }}</span> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="设施调蓄量m³:" prop="facilityStorageCapacity"> <template #label> <span>设施调蓄量m³</span> <popover> <span style="font-weight: 700">说明</span> <br /> <span>渗透设施、生物滞留设施、传输与截污净化设施的设施面积*有效调蓄深度加和,再加存储设施的调蓄量之和</span> </popover> <span>:</span> </template> <span>{{ form.facilityStorageCapacity }}</span> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="调蓄容积是否达标:" prop="storageCapacityStandards"> <template #label> <span>调蓄容积是否达标</span> <popover> <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="6"> <el-form-item label="设施调蓄量对应年径流总量控制率%:" prop="facilityStorageCapacityToAnnualRunoffTotalControlRate"> <template #label> <span>设施调蓄量对应年径流总量控制率</span> <popover :width="300"> <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-row> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="年径流总量控制率评级:" prop="totalAnnualRunoffGrade"> <template #label> <span>年径流总量控制率评级</span> <popover :width="240"> <span style="font-weight: 700">说明</span> <br /> <span>低于目标值,评【差】</span> <br /> <span>高于目标值5%以内,评【中】</span> <br /> <span>高于目标值10%以内,评【良】</span> <br /> <span>高于目标值10%以上,评【优】</span> <br /> <span>包含下限、不包含上限</span> </popover> <span>:</span> </template> <el-tag v-if="levelMap.get(form.totalAnnualRunoffGrade)?.text" :type="levelMap.get(form.totalAnnualRunoffGrade)?.type" >{{ levelMap.get(form.totalAnnualRunoffGrade)?.text }}</el-tag> <span v-else>-</span> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="污染去除率%:" prop="pollutionRemovalRate"> <template #label> <span>污染去除率%</span> <popover :width="300"> <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-col :span="6"> <el-form-item label="污染去除率是否达标:" prop="pollutionRemovalStandards"> <template #label> <span>污染去除率是否达标</span> <popover> <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-col :span="6"> <el-form-item label="年径流污染控制率评级:" prop="pollutionRemovalGrade"> <template #label> <span>年径流污染控制率评级</span> <popover :width="240"> <span style="font-weight: 700">说明</span> <br /> <span>低于目标值,评【差】</span> <br /> <span>高于目标值5%以内,评【中】</span> <br /> <span>高于目标值10%以内,评【良】</span> <br /> <span>高于目标值10%以上,评【优】</span> <br /> <span>包含下限、不包含上限</span> </popover> <span>:</span> </template> <el-tag v-if="levelMap.get(form.pollutionRemovalGrade)?.text" :type="levelMap.get(form.pollutionRemovalGrade)?.type" >{{ levelMap.get(form.pollutionRemovalGrade)?.text }}</el-tag> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="处置客水评级:" prop="disposalOfGuestWaterGrade"> <template #label> <span>处置客水评级</span> <popover :width="300"> <span style="font-weight: 700">说明</span> <br /> <span>在达标测算目标调蓄量以上(包含),5%以内(不包含)评【中】</span> <br /> <span>在达标测算目标调蓄量*5%以上(包含),10%以内(不包含)评【良】</span> <br /> <span>在达标测算目标调蓄量*10%以上(包含)评【优】</span> <br /> <span>包含下限、不包含上限</span> </popover> <span>:</span> </template> <el-tag v-if="levelMap.get(form.disposalOfGuestWaterGrade)?.text" :type="levelMap.get(form.disposalOfGuestWaterGrade)?.type" >{{ levelMap.get(form.disposalOfGuestWaterGrade)?.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> <el-form class="formM0" ref="investForm" :model="form"> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="投产比/万元/m³:" prop="productionRatio"> <span>{{ form.productionRatio }}</span> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="投资合理性评级:" prop="investmentRationalityRate"> <template #label> <span>投资合理性评级</span> <popover :width="240"> <span style="font-weight: 700">说明</span> <br /> <span>推荐值上下2.5%以内,评【优】</span> <br /> <span>推荐值上下5%以内,评【良】</span> <br /> <span>推荐值上下10%以内,评【中】</span> <br /> <span>推荐值上下10%以上,评【差】</span> <br /> <span>包含下限、不包含上限</span> </popover> <span>:</span> </template> <el-tag v-if="levelMap.get(form.investmentRationalityRate)?.text" :type="levelMap.get(form.investmentRationalityRate)?.type" >{{ levelMap.get(form.investmentRationalityRate)?.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> <new-table :data="tableData" :columns="columns" :loading="loading" :max-height="300" /> </el-card> </template> <script setup lang="jsx"> import { ref, reactive } from 'vue' import popover from '@/components/popover' import { standardMap, standardTextMap, verticalRationalityMap, levelMap } from './map' import { inheritAttr, setEmpty } from '@/utils/v3' const form = reactive({ id: '', areaTotal: '', hardGroundRate: '', hardGroundGrade: '', hardGroundStandards: '', comprehensiveRunoffCoefficient: '', targetStorageCapacity: '', facilityStorageCapacity: '', storageCapacityStandards: '', facilityStorageCapacityToAnnualRunoffTotalControlRate: '', pollutionRemovalRate: '', pollutionRemovalGrade: '', pollutionRemovalStandards: '', disposalOfGuestWaterGrade: '', productionRatio: '', investmentRationalityRate: '', totalAnnualRunoffGrade: '' }) const columns = reactive([ { prop: 'areaName', label: '排水分区', align: 'center', fixed: 'left' }, { prop: 'subsidenceGreenRate', label: '下沉绿地率%', width: 120, align: 'center', headerRender: () => { return ( <Fragment> <span>下沉绿地率%</span> <popover width={ 240 }> <span style="font-weight: 700">说明</span> <br /> <span>下沉绿地+雨水花园占绿地面积</span> </popover> </Fragment> ) }, }, { prop: 'greenRoofRatio', label: '绿色屋顶率%', width: 120, align: 'center', headerRender: () => { return ( <Fragment> <span>绿色屋顶率%</span> <popover width={ 240 }> <span style="font-weight: 700">说明</span> <br /> <span>绿色屋顶占屋顶面积</span> </popover> </Fragment> ) }, }, { prop: 'permeablePavementRatio', label: '透水铺装率%', width: 120, align: 'center', headerRender: () => { return ( <Fragment> <span>透水铺装率%</span> <popover width={ 240 }> <span style="font-weight: 700">说明</span> <br /> <span>透水铺装占不透水路面面积</span> </popover> </Fragment> ) }, }, { prop: 'targetAnnualRunoffTotalControlRate', label: '目标年径流总量控制率%', width: 180, align: 'center' }, { prop: 'targetStorageCapacity', label: '目标调蓄量m³', width: 120, align: 'center' }, { prop: 'facilityStorageCapacity', label: '设施调蓄量m³', width: 120, align: 'center' }, { prop: 'facilityStorageCapacityToAnnualRunoffTotalControlRate', label: '年径流总量控制率%', width: 150, align: 'center' }, { prop: 'annualRunoffControlRate', label: '年径流控制率达标', width: 150, align: 'center', render: ({ row }) => { return ( standardTextMap.get(row.annualRunoffControlRate) ? <Fragment> <el-tag type={standardTextMap.get(row.annualRunoffControlRate).type} >{ standardTextMap.get(row.annualRunoffControlRate).text }</el-tag> </Fragment> : null ) } }, { prop: 'verticalRationality', label: '竖向合理性', width: 120, align: 'center', fixed: 'right', headerRender: () => { return ( <Fragment> <span>竖向合理性</span> <popover width={ 280 }> <span style="font-weight: 700">说明</span> <br /><br /> <span style="font-weight: 700">总体</span> <br /> <span>当存在竖向不合理的分区时,评【存在不合理】</span> <br /> <span>当分区竖向全部合理时,评【合理】</span> <br /><br /> <span style="font-weight: 700">分区</span> <br /> <span>地面高程高于设施底高程,评【合理】</span> <br /> <span>反之评【不合理】</span> </popover> </Fragment> ) }, render: ({ row }) => { return ( verticalRationalityMap.get(row.verticalRationality) ? <Fragment> <el-tag type={verticalRationalityMap.get(row.verticalRationality).type} >{ verticalRationalityMap.get(row.verticalRationality).text }</el-tag> </Fragment> : null ) } } ]) const tableData = ref([]) const loading = ref(false) const getDetails = (data) => { if(data) { inheritAttr(data, form) tableData.value = data.intelligentReasonableAnalyseList || [] } else { setEmpty(form) tableData.value = [] } } defineExpose({ getDetails }) </script> <style lang="scss" scoped> .box-card { margin-bottom: 10px; &:last-of-type { margin-bottom: 0; } .card-header { font-size: 16px; font-weight: 700; } } </style>