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