- <template>
- <div class="overview" v-if="props.overviewData">
- <card class="card" header="达标情况" shadow="never">
- <standard_condition ref="standardConditionRef" :data="props.overviewData?.reachStandard" />
- </card>
- <card class="card" header="设施调蓄量" shadow="never">
- <facility_storage_capacity ref="facilityStorageCapacityRef" :data="props.overviewData?.facilityStorageCapacityEcharts" />
- </card>
- <card class="card" header="单项设施调蓄量占比" shadow="never">
- <facility_storage_capacity_p ref="facilityStorageCapacityPRef" :radius="['35%', '60%']" :data="props.overviewData?.facilityStorageCapacityEcharts" />
- </card>
- <card class="card" header="设施比例" shadow="never">
- <facility_ratio ref="facilityRatioRef" :data="props.overviewData?.facilityRatio" />
- </card>
- <card class="card" header="分区年径流总量控制率达标情况" shadow="never">
- <annual_runoff_condition ref="annualRunoffConditionRef" :data="props.overviewData?.areaAnnualRunoffEcharts" />
- </card>
- <card class="card" header="造价估算表" shadow="never">
- <template #header>
- <span>造价估算表</span>
- <popover width={ 240 }>
- <span style="font-weight: 700">说明</span>
- <br />
- <span>当项目年径流总量控制率不达标时,该模块不显示</span>
- </popover>
- </template>
- <cost_estimate ref="costEstimateRef" :data="props.overviewData?.costEstimateList"/>
- </card>
- </div>
- </template>
-
- <script setup>
- import standard_condition from '../../preassess/components/standard_condition.vue'
- import facility_storage_capacity from '../../preassess/components/facility_storage_capacity.vue'
- import facility_storage_capacity_p from '../../preassess/components/facility_storage_capacity_p.vue'
- import facility_ratio from '../../preassess/components/facility_ratio.vue'
- import annual_runoff_condition from '../../preassess/components/annual_runoff_condition.vue'
- import cost_estimate from '../../preassess/components/cost_estimate.vue'
- import popover from '@/components/popover'
- const props = defineProps({
- id: {
- type: String,
- default: ''
- },
- overviewData: {
- type: Object,
- default: null
- }
- })
- console.log(props)
- </script>
-
- <style lang="scss" scoped>
- .overview {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-row-gap: 20px;
- grid-column-gap: 20px;
- ::v-deep(.card) {
- .el-card__header {
- .card-header {
- display: flex;
- align-items: center;
- .el-icon {
- &.icon {
- &.el-tooltip__trigger {
- margin-top: 0;
- }
- }
- }
- }
- }
- }
- }
- </style>