- <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>