Newer
Older
KaiFengPC / src / views / spongePerformance / ManagingPerformance / projectCompletionStatus / rationality / index.vue
@zhangdeliang zhangdeliang on 23 May 3 KB 初始化项目
  1. <template>
  2. <div
  3. class="rationality"
  4. v-loading.fullscreen.lock="loading"
  5. element-loading-text="加载中..."
  6. element-loading-background="rgba(0, 0, 0, 0.6)"
  7. >
  8. <el-tabs :model-value="active" @tab-change="tabChange" class="outerTabs">
  9. <el-tab-pane label="项目合理性" :name="0">
  10. <project :data="form" :list="list" :step="1" :investigate-data="investigateData" />
  11. <analysis ref="analysisRef" />
  12. </el-tab-pane>
  13. <el-tab-pane label="合理性总览" :name="1">
  14. <overview v-if="loadOverview" :overview-data="overviewData" />
  15. </el-tab-pane>
  16. <el-tab-pane label="下垫面及设施详情" :name="2">
  17. <project :data="form" />
  18. <recognitionImage ref="recognitionImageRef" />
  19. </el-tab-pane>
  20. </el-tabs>
  21. </div>
  22. </template>
  23.  
  24. <script setup>
  25. import { reactive, ref, onMounted, getCurrentInstance, shallowRef } from 'vue';
  26. import project from './project.vue';
  27. import analysis from './analysis.vue';
  28. import overview from './overview.vue';
  29. import recognitionImage from './recognitionImage.vue';
  30. import { intelligentApproveDetails } from '@/api/preassess/noopReview';
  31. import { getProjectBuildTargetConfigList } from '@/api/preassess/calculate';
  32. import { inheritAttr } from '@/utils/v3';
  33. const { proxy } = getCurrentInstance();
  34. const props = defineProps({
  35. id: {
  36. type: [Number, String],
  37. default: '',
  38. },
  39. });
  40. const { id } = props;
  41. const form = reactive({
  42. projectNo: '',
  43. projectNo: '',
  44. projectName: '',
  45. engineeringType: '',
  46. buildCategory: '',
  47. drainagePartition: '',
  48. area: '',
  49. annualRunoffTotalControlRate: '',
  50. annualRunoffPollutionControlRate: '',
  51. hardGroundRate: '',
  52. designRainfall: '',
  53. disposalOfGuestWater: '',
  54. spongeInvest: '',
  55. recommendedProductionRatio: '',
  56. });
  57. const active = ref(0);
  58. const overviewData = shallowRef({
  59. reachStandard: {
  60. targetyAxis: [],
  61. realityyAxis: [],
  62. resultyAxis: [],
  63. xaxis: [],
  64. },
  65. facilityStorageCapacityEcharts: [],
  66. facilityRatio: {
  67. targetyAxis: [],
  68. realityyAxis: [],
  69. resultyAxis: [],
  70. xaxis: [],
  71. },
  72. areaAnnualRunoffEcharts: [],
  73. costEstimateList: [],
  74. });
  75. const loadOverview = ref(false);
  76. let list = [];
  77. const componentNameMap = new Map([
  78. [0, 'recognitionImage'],
  79. [1, 'analysis'],
  80. [2, 'overview'],
  81. ]);
  82. const componentName = ref('');
  83. const investigateData = shallowRef({});
  84. const loading = ref(false);
  85. const tabChange = tab => {
  86. active.value = tab;
  87. nextTick(() => {
  88. loadOverview.value = active.value === 1;
  89. });
  90. };
  91.  
  92. const getList = async () => {
  93. const res = await getProjectBuildTargetConfigList();
  94. console.log(res);
  95. if (res?.code !== 200) return;
  96. list = res.data;
  97. };
  98.  
  99. const getDetailInfo = async () => {
  100. loading.value = true;
  101. await getList();
  102. const res = await intelligentApproveDetails(id);
  103. loading.value = false;
  104. if (res?.code !== 200) return;
  105. console.log(res.data);
  106. const projectInfo = list.find(item => item.projectNo === res.data.projectNo);
  107. inheritAttr(projectInfo, form);
  108. componentName.value = componentNameMap.get(active.value);
  109. overviewData.value = res.data.reasonablenessOverview;
  110. investigateData.value = res.data.examineMap;
  111. nextTick(() => {
  112. proxy.$refs.recognitionImageRef.getList(res.data);
  113. proxy.$refs.analysisRef.getDetails(res.data);
  114. });
  115. };
  116.  
  117. onMounted(() => {
  118. if (id) getDetailInfo();
  119. });
  120. </script>
  121.  
  122. <style lang="scss" scoped>
  123. .rationality {
  124. :deep(.formM5) {
  125. .el-form-item {
  126. margin-bottom: 5px;
  127. }
  128. }
  129.  
  130. :deep(.formM0) {
  131. .el-form-item {
  132. margin-bottom: 0px;
  133. }
  134. }
  135. }
  136. </style>