Newer
Older
Nanping_sponge_GCYPG / src / views / home / rationality / overview.vue
@liyingjing liyingjing on 25 Oct 2023 2 KB 工程预评估
  1. <template>
  2. <div class="overview" v-if="props.overviewData">
  3. <card class="card" header="达标情况" shadow="never">
  4. <standard_condition ref="standardConditionRef" :data="props.overviewData?.reachStandard" />
  5. </card>
  6. <card class="card" header="设施调蓄量" shadow="never">
  7. <facility_storage_capacity ref="facilityStorageCapacityRef" :data="props.overviewData?.facilityStorageCapacityEcharts" />
  8. </card>
  9. <card class="card" header="单项设施调蓄量占比" shadow="never">
  10. <facility_storage_capacity_p ref="facilityStorageCapacityPRef" :radius="['35%', '60%']" :data="props.overviewData?.facilityStorageCapacityEcharts" />
  11. </card>
  12. <card class="card" header="设施比例" shadow="never">
  13. <facility_ratio ref="facilityRatioRef" :data="props.overviewData?.facilityRatio" />
  14. </card>
  15. <card class="card" header="分区年径流总量控制率达标情况" shadow="never">
  16. <annual_runoff_condition ref="annualRunoffConditionRef" :data="props.overviewData?.areaAnnualRunoffEcharts" />
  17. </card>
  18. <card class="card" header="造价估算表" shadow="never">
  19. <template #header>
  20. <span>造价估算表</span>
  21. <popover width={ 240 }>
  22. <span style="font-weight: 700">说明</span>
  23. <br />
  24. <span>当项目年径流总量控制率不达标时,该模块不显示</span>
  25. </popover>
  26. </template>
  27. <cost_estimate ref="costEstimateRef" :data="props.overviewData?.costEstimateList"/>
  28. </card>
  29. </div>
  30. </template>
  31.  
  32. <script setup>
  33. import standard_condition from '../../preassess/components/standard_condition.vue'
  34. import facility_storage_capacity from '../../preassess/components/facility_storage_capacity.vue'
  35. import facility_storage_capacity_p from '../../preassess/components/facility_storage_capacity_p.vue'
  36. import facility_ratio from '../../preassess/components/facility_ratio.vue'
  37. import annual_runoff_condition from '../../preassess/components/annual_runoff_condition.vue'
  38. import cost_estimate from '../../preassess/components/cost_estimate.vue'
  39. import popover from '@/components/popover'
  40. const props = defineProps({
  41. id: {
  42. type: String,
  43. default: ''
  44. },
  45. overviewData: {
  46. type: Object,
  47. default: null
  48. }
  49. })
  50. console.log(props)
  51. </script>
  52.  
  53. <style lang="scss" scoped>
  54. .overview {
  55. display: grid;
  56. grid-template-columns: repeat(3, 1fr);
  57. grid-row-gap: 20px;
  58. grid-column-gap: 20px;
  59. ::v-deep(.card) {
  60. .el-card__header {
  61. .card-header {
  62. display: flex;
  63. align-items: center;
  64. .el-icon {
  65. &.icon {
  66. &.el-tooltip__trigger {
  67. margin-top: 0;
  68. }
  69. }
  70. }
  71. }
  72. }
  73. }
  74. }
  75. </style>