- <template>
- <div
- class="rationality"
- v-loading.fullscreen.lock="loading"
- element-loading-text="加载中..."
- element-loading-background="rgba(0, 0, 0, 0.6)"
- >
- <el-tabs :model-value="active" @tab-change="tabChange" class="outerTabs">
- <el-tab-pane label="项目合理性" :name="0">
- <project :data="form" :list="list" :step="1" :investigate-data="investigateData" />
- <analysis ref="analysisRef" />
- </el-tab-pane>
- <el-tab-pane label="合理性总览" :name="1">
- <overview v-if="loadOverview" :overview-data="overviewData" />
- </el-tab-pane>
- <el-tab-pane label="下垫面及设施详情" :name="2">
- <project :data="form" />
- <recognitionImage ref="recognitionImageRef" />
- </el-tab-pane>
- </el-tabs>
- </div>
- </template>
-
- <script setup>
- import { reactive, ref, onMounted, getCurrentInstance, shallowRef } from 'vue';
- import project from './project.vue';
- import analysis from './analysis.vue';
- import overview from './overview.vue';
- import recognitionImage from './recognitionImage.vue';
- import { intelligentApproveDetails } from '@/api/preassess/noopReview';
- import { getProjectBuildTargetConfigList } from '@/api/preassess/calculate';
- import { inheritAttr } from '@/utils/v3';
- const { proxy } = getCurrentInstance();
- const props = defineProps({
- id: {
- type: [Number, String],
- default: '',
- },
- });
- const { id } = props;
- const form = reactive({
- projectNo: '',
- projectNo: '',
- projectName: '',
- engineeringType: '',
- buildCategory: '',
- drainagePartition: '',
- area: '',
- annualRunoffTotalControlRate: '',
- annualRunoffPollutionControlRate: '',
- hardGroundRate: '',
- designRainfall: '',
- disposalOfGuestWater: '',
- spongeInvest: '',
- recommendedProductionRatio: '',
- });
- const active = ref(0);
- const overviewData = shallowRef({
- reachStandard: {
- targetyAxis: [],
- realityyAxis: [],
- resultyAxis: [],
- xaxis: [],
- },
- facilityStorageCapacityEcharts: [],
- facilityRatio: {
- targetyAxis: [],
- realityyAxis: [],
- resultyAxis: [],
- xaxis: [],
- },
- areaAnnualRunoffEcharts: [],
- costEstimateList: [],
- });
- const loadOverview = ref(false);
- let list = [];
- const componentNameMap = new Map([
- [0, 'recognitionImage'],
- [1, 'analysis'],
- [2, 'overview'],
- ]);
- const componentName = ref('');
- const investigateData = shallowRef({});
- const loading = ref(false);
- const tabChange = tab => {
- active.value = tab;
- nextTick(() => {
- loadOverview.value = active.value === 1;
- });
- };
-
- const getList = async () => {
- const res = await getProjectBuildTargetConfigList();
- console.log(res);
- if (res?.code !== 200) return;
- list = res.data;
- };
-
- const getDetailInfo = async () => {
- loading.value = true;
- await getList();
- const res = await intelligentApproveDetails(id);
- loading.value = false;
- if (res?.code !== 200) return;
- console.log(res.data);
- const projectInfo = list.find(item => item.projectNo === res.data.projectNo);
- inheritAttr(projectInfo, form);
- componentName.value = componentNameMap.get(active.value);
- overviewData.value = res.data.reasonablenessOverview;
- investigateData.value = res.data.examineMap;
- nextTick(() => {
- proxy.$refs.recognitionImageRef.getList(res.data);
- proxy.$refs.analysisRef.getDetails(res.data);
- });
- };
-
- onMounted(() => {
- if (id) getDetailInfo();
- });
- </script>
-
- <style lang="scss" scoped>
- .rationality {
- :deep(.formM5) {
- .el-form-item {
- margin-bottom: 5px;
- }
- }
-
- :deep(.formM0) {
- .el-form-item {
- margin-bottom: 0px;
- }
- }
- }
- </style>