- <template>
- <el-dialog
- class="dialog"
- v-model="visible"
- :title="`${opts.text}达标测算`"
- :close-on-click-modal="false"
- width="70%"
- :before-close="close"
- >
- <!-- 详情显示 -->
- <div class="details" v-if="opts.type === 'view' && componentName">
- <el-tabs :model-value="active" @tab-change="tabChange">
- <el-tab-pane label="目标调蓄量" :name="0">
- <project :data="form" :disabled="true" :opts="opts" :list="list" />
- <storageCapacity ref="storageCapacityRef" :id="id" :opts="opts" :project-info="form" :disabled="true" />
- </el-tab-pane>
- <el-tab-pane label="达标测算" :name="1" v-if="status * 1 >= 1">
- <project :data="form" :disabled="true" :opts="opts" :list="list" />
- <standardMeasurement ref="standardMeasurementRef" :id="id" :opts="opts" :project-info="form" :disabled="true" :status="status" />
- </el-tab-pane>
- <el-tab-pane label="达标总览" :name="2" v-if="status * 1 >= 1">
- <overview v-if="loadoverview" ref="overviewRef" :id="id" :overview-data="overviewData" :facilityStorageCapacity="facilityStorageCapacity" />
- </el-tab-pane>
- </el-tabs>
- </div>
- <!-- 新增修改显示 -->
- <div class="editOrAdd" v-else-if="opts.type !== 'view'">
- <div class="steps">
- <el-steps :active="active" finish-status="success" align-center>
- <el-step title="目标调蓄量" :class="{ pointer: isSubmit }" @click="view('storageCapacity')" />
- <el-step title="达标测算" :class="{ pointer: isSubmit }" @click="view('standardMeasurement')" />
- <el-step title="达标总览" :class="{ pointer: isSubmit }" @click="view('overview')" />
- <el-step title="提交" />
- </el-steps>
- </div>
- <project
- :data="form"
- v-show="['storageCapacity', 'standardMeasurement'].includes(componentName)"
- :disabled="selectDisabled"
- @select-change="selectChange"
- :opts="opts"
- :list="list"
- />
- <div class="stepMain" v-if="componentName">
- <div class="storageCapacityBox" v-show="componentName === 'storageCapacity'">
- <el-button v-if="opts.type === 'edit'" class="refresh" type="primary" size="small" @click="refreshClick">同步数据模版</el-button>
- <storageCapacity
- ref="storageCapacityRef"
- :key="form.projectNo"
- :id="id"
- :opts="opts"
- :project-info="form"
- :disabled="isSubmit"
- @success="onSuccess"
- @set-computed-disabled="onSetComputedDisabled"
- />
- </div>
- <div class="standardMeasurementBox" v-show="componentName === 'standardMeasurement'">
- <standardMeasurement
- ref="standardMeasurementRef"
- :id="id"
- :opts="opts"
- :project-info="form"
- :disabled="isSubmit"
- :status="status"
- @success="onSuccess"
- @set-computed-disabled="onSetComputedDisabled"
- />
- </div>
- <div class="overviewBox" v-if="componentName === 'overview'">
- <overview ref="overviewRef" :id="id" :overview-data="overviewData" :facilityStorageCapacity="facilityStorageCapacity" @success="onSuccess" />
- </div>
- </div>
- </div>
- <template #footer v-if="componentName && !isSubmit && opts.type !== 'view'">
- <div class="dialog-footer">
- <!-- <el-button type="primary">导入</el-button> -->
- <el-button type="primary" @click="computedHandle" :disabled="computedDisabled" v-show="active < 2">计算</el-button>
- <el-button type="primary" @click="previous" v-show="active > 0">上一步</el-button>
- <el-button type="primary" @click="next" v-show="schedule[active] === 'fulfilled'">下一步</el-button>
- <el-button type="primary" @click="submit" v-show="active > 1">提交</el-button>
- <el-button @click="close">取消</el-button>
- </div>
- </template>
- </el-dialog>
- </template>
-
- <script setup>
- import { ref, reactive, onMounted, toRef, computed, nextTick } from 'vue';
- import project from './project.vue';
- import storageCapacity from './storageCapacity.vue';
- import standardMeasurement from './standardMeasurement.vue';
- import overview from './overview.vue';
- import { inheritAttr } from '@/utils/v3';
- import { getFacilitiesStandardCalcInfo, getProjectBuildTargetConfigList, facilitiesStandardCalcSubmit } from '@/api/preassess/calculate';
- const { proxy } = getCurrentInstance();
- const componentNameMap = new Map([
- [0, 'storageCapacity'],
- [1, 'standardMeasurement'],
- [2, 'overview'],
- ]);
- // 指定的动态组件
- let componentName = ref('');
- const emit = defineEmits(['update:modelValue', 'close']);
- const props = defineProps({
- id: {
- type: [String, Number],
- default: '',
- },
- status: {
- type: String,
- default: '',
- },
- opts: {
- type: Object,
- default: () => {},
- },
- modelValue: {
- type: Boolean,
- default: false,
- },
- });
- const { id, opts, status } = props;
- const isShowDialog = toRef(props, 'modelValue');
- const visible = computed({
- get() {
- return isShowDialog.value;
- },
- set(value) {
- emit('update:modelValue', value);
- },
- });
-
- const form = reactive({
- projectNo: '',
- projectName: '',
- engineeringType: '',
- buildCategory: '',
- drainagePartition: '',
- area: '',
- annualRunoffTotalControlRate: '',
- annualRunoffPollutionControlRate: '',
- hardGroundRate: '',
- designRainfall: '',
- });
-
- const active = ref(0);
-
- const list = ref([]);
-
- const isSubmit = ref(false);
- const schedule = reactive({
- 0: 'pending',
- 1: 'pending',
- 2: 'pending',
- });
- const overviewData = ref({});
- const facilityStorageCapacity = ref('')
- let submitData = {};
- const details = ref({});
- const computedDisabled = ref(false);
- const selectDisabled = computed(() => {
- return schedule[0] === 'fulfilled';
- });
- const loadoverview = ref(false);
-
- const next = () => {
- if (active.value === 2) {
- active.value = 4;
- } else {
- active.value++;
- componentName.value = componentNameMap.get(active.value);
- }
- };
-
- const previous = () => {
- if (active.value === 0) return;
- if (active.value === 4) {
- active.value = 1;
- } else {
- active.value--;
- }
- componentName.value = componentNameMap.get(active.value);
- };
-
- const selectChange = item => {
- inheritAttr(item, form);
- componentName.value = componentNameMap.get(active.value);
- nextTick(() => {
- proxy.$refs.storageCapacityRef.getList();
- proxy.$refs.standardMeasurementRef.getList();
- });
- };
-
- const computedHandle = () => {
- console.log('计算当前结果');
- switch (active.value) {
- case 0:
- proxy.$refs.storageCapacityRef.submit();
- break;
- case 1:
- proxy.$refs.standardMeasurementRef.submit();
- break;
- default:
- break;
- }
- };
-
- const close = () => {
- visible.value = false;
- componentName.value = '';
- active.value = 0;
- emit('close', opts.type);
- };
-
- const onSuccess = (result = {}) => {
- if (active.value === 0) {
- schedule[0] = 'fulfilled';
- schedule[1] = 'pending';
- schedule[2] = 'pending';
- const data = proxy.$refs.storageCapacityRef.form;
- proxy.$refs.standardMeasurementRef.setFormData(data);
- proxy.$refs.standardMeasurementRef.setTable();
- } else if (active.value === 1) {
- schedule[1] = 'fulfilled';
- schedule[2] = 'pending';
- submitData = result;
- overviewData.value = result?.reasonablenessOverview || {};
- facilityStorageCapacity.value = result?.facilityStorageCapacity
- }
- };
-
- const onSetComputedDisabled = disabled => {
- computedDisabled.value = disabled;
- };
-
- const getDetailInfo = async () => {
- const res = await getFacilitiesStandardCalcInfo(id);
- console.log(res);
- if (res?.code !== 200) return;
- if (res.data.status === '0') {
- res.data.standardCalcFacilitiesPolluteRemoveSaveRequestList = [];
- for (const key in res.data) {
- if (Object.hasOwnProperty.call(res.data, key)) {
- if (
- [
- 'facilityStorageCapacity',
- 'storageCapacityStandards',
- 'facilityStorageCapacityToAnnualRunoffTotalControlRate',
- 'pollutionRemovalRate',
- 'pollutionRemovalStandards',
- ].includes(key)
- ) {
- res.data[key] = '';
- }
- }
- }
- }
- details.value = res.data;
- const item = list.value.find(it => it.projectNo === res.data.projectNo);
- inheritAttr(item, form);
- componentName.value = componentNameMap.get(active.value);
- if (status === '0') {
- schedule[0] = 'fulfilled';
- } else if (status === '1') {
- schedule[0] = 'fulfilled';
- schedule[1] = 'fulfilled';
- } else if (status === '2') {
- schedule[0] = 'fulfilled';
- schedule[1] = 'fulfilled';
- schedule[2] = 'fulfilled';
- }
- submitData = res.data;
- overviewData.value = res.data?.reasonablenessOverview;
- facilityStorageCapacity.value = res.data?.facilityStorageCapacity;
- nextTick(() => {
- proxy.$refs.storageCapacityRef.getList(details.value);
- if (proxy.$refs.standardMeasurementRef) {
- proxy.$refs.standardMeasurementRef.getList(details.value);
- }
- });
- };
-
- const getList = async () => {
- const res = await getProjectBuildTargetConfigList();
- console.log(res);
- if (res?.code !== 200) return;
- list.value = res.data;
- if (opts.type === 'add' && list.value.length) {
- selectChange(list.value[0]);
- }
- };
-
- const view = name => {
- if (isSubmit.value) {
- componentName.value = name;
- }
- };
-
- const submit = async () => {
- active.value += 2;
- schedule[2] = 'fulfilled';
- isSubmit.value = true;
- const res = await facilitiesStandardCalcSubmit(submitData);
- if (res?.code !== 200) return;
- setTimeout(() => {
- close();
- }, 500);
- };
-
- const tabChange = tab => {
- active.value = tab;
- nextTick(() => {
- loadoverview.value = active.value === 2;
- });
- };
-
- const refreshClick = () => {
- proxy.$modal
- .confirm('同步数据后需要重新计算,是否同步数据?')
- .then(() => {
- proxy.$refs.storageCapacityRef.heavyLoad()
- proxy.$refs.standardMeasurementRef.heavyLoad()
- active.value = 0
- schedule[0] = 'pending'
- schedule[1] = 'pending'
- schedule[2] = 'pending'
- })
- .catch((error) => {
- console.log(error)
- })
- }
-
- onMounted(async () => {
- await getList();
- if (id) getDetailInfo();
- });
- </script>
-
- <style lang="scss" scoped>
- .box-card {
- .card-header {
- font-weight: 700;
- font-size: 16px;
- }
-
- :deep(.form) {
- .el-form-item {
- margin-bottom: 5px;
- }
- }
- }
- .steps {
- width: 70%;
- margin: 20px auto;
- :deep(.el-step) {
- position: relative;
- .el-step__head {
- .el-step__line {
- left: 88%;
- }
- }
- .el-step__main {
- position: absolute;
- left: calc(50% + 20px);
- top: 4px;
- line-height: 1;
- .el-step__title {
- font-size: 14px;
- line-height: 1;
- }
- }
-
- &:nth-of-type(1) {
- .el-step__head {
- .el-step__line {
- left: 94%;
- }
- }
- }
- }
- }
- .pointer {
- cursor: pointer;
- }
- .details {
- margin-top: 20px;
- :deep(.el-tabs) {
- border-radius: 4px;
- box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
- .el-tabs__header {
- font-size: 18px;
- .el-tabs__item {
- height: 48px !important;
- line-height: 48px !important;
- font-size: 16px;
- }
- }
- }
- }
- .storageCapacityBox {
- position: relative;
- .refresh {
- position: absolute;
- right: 10px;
- top: 10px;
- }
- }
- </style>