Newer
Older
KaiFengPC / src / views / preassess / calculate / operate.vue
@zhangdeliang zhangdeliang on 23 May 11 KB 初始化项目
  1. <template>
  2. <el-dialog
  3. class="dialog"
  4. v-model="visible"
  5. :title="`${opts.text}达标测算`"
  6. :close-on-click-modal="false"
  7. width="70%"
  8. :before-close="close"
  9. >
  10. <!-- 详情显示 -->
  11. <div class="details" v-if="opts.type === 'view' && componentName">
  12. <el-tabs :model-value="active" @tab-change="tabChange">
  13. <el-tab-pane label="目标调蓄量" :name="0">
  14. <project :data="form" :disabled="true" :opts="opts" :list="list" />
  15. <storageCapacity ref="storageCapacityRef" :id="id" :opts="opts" :project-info="form" :disabled="true" />
  16. </el-tab-pane>
  17. <el-tab-pane label="达标测算" :name="1" v-if="status * 1 >= 1">
  18. <project :data="form" :disabled="true" :opts="opts" :list="list" />
  19. <standardMeasurement ref="standardMeasurementRef" :id="id" :opts="opts" :project-info="form" :disabled="true" :status="status" />
  20. </el-tab-pane>
  21. <el-tab-pane label="达标总览" :name="2" v-if="status * 1 >= 1">
  22. <overview v-if="loadoverview" ref="overviewRef" :id="id" :overview-data="overviewData" :facilityStorageCapacity="facilityStorageCapacity" />
  23. </el-tab-pane>
  24. </el-tabs>
  25. </div>
  26. <!-- 新增修改显示 -->
  27. <div class="editOrAdd" v-else-if="opts.type !== 'view'">
  28. <div class="steps">
  29. <el-steps :active="active" finish-status="success" align-center>
  30. <el-step title="目标调蓄量" :class="{ pointer: isSubmit }" @click="view('storageCapacity')" />
  31. <el-step title="达标测算" :class="{ pointer: isSubmit }" @click="view('standardMeasurement')" />
  32. <el-step title="达标总览" :class="{ pointer: isSubmit }" @click="view('overview')" />
  33. <el-step title="提交" />
  34. </el-steps>
  35. </div>
  36. <project
  37. :data="form"
  38. v-show="['storageCapacity', 'standardMeasurement'].includes(componentName)"
  39. :disabled="selectDisabled"
  40. @select-change="selectChange"
  41. :opts="opts"
  42. :list="list"
  43. />
  44. <div class="stepMain" v-if="componentName">
  45. <div class="storageCapacityBox" v-show="componentName === 'storageCapacity'">
  46. <el-button v-if="opts.type === 'edit'" class="refresh" type="primary" size="small" @click="refreshClick">同步数据模版</el-button>
  47. <storageCapacity
  48. ref="storageCapacityRef"
  49. :key="form.projectNo"
  50. :id="id"
  51. :opts="opts"
  52. :project-info="form"
  53. :disabled="isSubmit"
  54. @success="onSuccess"
  55. @set-computed-disabled="onSetComputedDisabled"
  56. />
  57. </div>
  58. <div class="standardMeasurementBox" v-show="componentName === 'standardMeasurement'">
  59. <standardMeasurement
  60. ref="standardMeasurementRef"
  61. :id="id"
  62. :opts="opts"
  63. :project-info="form"
  64. :disabled="isSubmit"
  65. :status="status"
  66. @success="onSuccess"
  67. @set-computed-disabled="onSetComputedDisabled"
  68. />
  69. </div>
  70. <div class="overviewBox" v-if="componentName === 'overview'">
  71. <overview ref="overviewRef" :id="id" :overview-data="overviewData" :facilityStorageCapacity="facilityStorageCapacity" @success="onSuccess" />
  72. </div>
  73. </div>
  74. </div>
  75. <template #footer v-if="componentName && !isSubmit && opts.type !== 'view'">
  76. <div class="dialog-footer">
  77. <!-- <el-button type="primary">导入</el-button> -->
  78. <el-button type="primary" @click="computedHandle" :disabled="computedDisabled" v-show="active < 2">计算</el-button>
  79. <el-button type="primary" @click="previous" v-show="active > 0">上一步</el-button>
  80. <el-button type="primary" @click="next" v-show="schedule[active] === 'fulfilled'">下一步</el-button>
  81. <el-button type="primary" @click="submit" v-show="active > 1">提交</el-button>
  82. <el-button @click="close">取消</el-button>
  83. </div>
  84. </template>
  85. </el-dialog>
  86. </template>
  87.  
  88. <script setup>
  89. import { ref, reactive, onMounted, toRef, computed, nextTick } from 'vue';
  90. import project from './project.vue';
  91. import storageCapacity from './storageCapacity.vue';
  92. import standardMeasurement from './standardMeasurement.vue';
  93. import overview from './overview.vue';
  94. import { inheritAttr } from '@/utils/v3';
  95. import { getFacilitiesStandardCalcInfo, getProjectBuildTargetConfigList, facilitiesStandardCalcSubmit } from '@/api/preassess/calculate';
  96. const { proxy } = getCurrentInstance();
  97. const componentNameMap = new Map([
  98. [0, 'storageCapacity'],
  99. [1, 'standardMeasurement'],
  100. [2, 'overview'],
  101. ]);
  102. // 指定的动态组件
  103. let componentName = ref('');
  104. const emit = defineEmits(['update:modelValue', 'close']);
  105. const props = defineProps({
  106. id: {
  107. type: [String, Number],
  108. default: '',
  109. },
  110. status: {
  111. type: String,
  112. default: '',
  113. },
  114. opts: {
  115. type: Object,
  116. default: () => {},
  117. },
  118. modelValue: {
  119. type: Boolean,
  120. default: false,
  121. },
  122. });
  123. const { id, opts, status } = props;
  124. const isShowDialog = toRef(props, 'modelValue');
  125. const visible = computed({
  126. get() {
  127. return isShowDialog.value;
  128. },
  129. set(value) {
  130. emit('update:modelValue', value);
  131. },
  132. });
  133.  
  134. const form = reactive({
  135. projectNo: '',
  136. projectName: '',
  137. engineeringType: '',
  138. buildCategory: '',
  139. drainagePartition: '',
  140. area: '',
  141. annualRunoffTotalControlRate: '',
  142. annualRunoffPollutionControlRate: '',
  143. hardGroundRate: '',
  144. designRainfall: '',
  145. });
  146.  
  147. const active = ref(0);
  148.  
  149. const list = ref([]);
  150.  
  151. const isSubmit = ref(false);
  152. const schedule = reactive({
  153. 0: 'pending',
  154. 1: 'pending',
  155. 2: 'pending',
  156. });
  157. const overviewData = ref({});
  158. const facilityStorageCapacity = ref('')
  159. let submitData = {};
  160. const details = ref({});
  161. const computedDisabled = ref(false);
  162. const selectDisabled = computed(() => {
  163. return schedule[0] === 'fulfilled';
  164. });
  165. const loadoverview = ref(false);
  166.  
  167. const next = () => {
  168. if (active.value === 2) {
  169. active.value = 4;
  170. } else {
  171. active.value++;
  172. componentName.value = componentNameMap.get(active.value);
  173. }
  174. };
  175.  
  176. const previous = () => {
  177. if (active.value === 0) return;
  178. if (active.value === 4) {
  179. active.value = 1;
  180. } else {
  181. active.value--;
  182. }
  183. componentName.value = componentNameMap.get(active.value);
  184. };
  185.  
  186. const selectChange = item => {
  187. inheritAttr(item, form);
  188. componentName.value = componentNameMap.get(active.value);
  189. nextTick(() => {
  190. proxy.$refs.storageCapacityRef.getList();
  191. proxy.$refs.standardMeasurementRef.getList();
  192. });
  193. };
  194.  
  195. const computedHandle = () => {
  196. console.log('计算当前结果');
  197. switch (active.value) {
  198. case 0:
  199. proxy.$refs.storageCapacityRef.submit();
  200. break;
  201. case 1:
  202. proxy.$refs.standardMeasurementRef.submit();
  203. break;
  204. default:
  205. break;
  206. }
  207. };
  208.  
  209. const close = () => {
  210. visible.value = false;
  211. componentName.value = '';
  212. active.value = 0;
  213. emit('close', opts.type);
  214. };
  215.  
  216. const onSuccess = (result = {}) => {
  217. if (active.value === 0) {
  218. schedule[0] = 'fulfilled';
  219. schedule[1] = 'pending';
  220. schedule[2] = 'pending';
  221. const data = proxy.$refs.storageCapacityRef.form;
  222. proxy.$refs.standardMeasurementRef.setFormData(data);
  223. proxy.$refs.standardMeasurementRef.setTable();
  224. } else if (active.value === 1) {
  225. schedule[1] = 'fulfilled';
  226. schedule[2] = 'pending';
  227. submitData = result;
  228. overviewData.value = result?.reasonablenessOverview || {};
  229. facilityStorageCapacity.value = result?.facilityStorageCapacity
  230. }
  231. };
  232.  
  233. const onSetComputedDisabled = disabled => {
  234. computedDisabled.value = disabled;
  235. };
  236.  
  237. const getDetailInfo = async () => {
  238. const res = await getFacilitiesStandardCalcInfo(id);
  239. console.log(res);
  240. if (res?.code !== 200) return;
  241. if (res.data.status === '0') {
  242. res.data.standardCalcFacilitiesPolluteRemoveSaveRequestList = [];
  243. for (const key in res.data) {
  244. if (Object.hasOwnProperty.call(res.data, key)) {
  245. if (
  246. [
  247. 'facilityStorageCapacity',
  248. 'storageCapacityStandards',
  249. 'facilityStorageCapacityToAnnualRunoffTotalControlRate',
  250. 'pollutionRemovalRate',
  251. 'pollutionRemovalStandards',
  252. ].includes(key)
  253. ) {
  254. res.data[key] = '';
  255. }
  256. }
  257. }
  258. }
  259. details.value = res.data;
  260. const item = list.value.find(it => it.projectNo === res.data.projectNo);
  261. inheritAttr(item, form);
  262. componentName.value = componentNameMap.get(active.value);
  263. if (status === '0') {
  264. schedule[0] = 'fulfilled';
  265. } else if (status === '1') {
  266. schedule[0] = 'fulfilled';
  267. schedule[1] = 'fulfilled';
  268. } else if (status === '2') {
  269. schedule[0] = 'fulfilled';
  270. schedule[1] = 'fulfilled';
  271. schedule[2] = 'fulfilled';
  272. }
  273. submitData = res.data;
  274. overviewData.value = res.data?.reasonablenessOverview;
  275. facilityStorageCapacity.value = res.data?.facilityStorageCapacity;
  276. nextTick(() => {
  277. proxy.$refs.storageCapacityRef.getList(details.value);
  278. if (proxy.$refs.standardMeasurementRef) {
  279. proxy.$refs.standardMeasurementRef.getList(details.value);
  280. }
  281. });
  282. };
  283.  
  284. const getList = async () => {
  285. const res = await getProjectBuildTargetConfigList();
  286. console.log(res);
  287. if (res?.code !== 200) return;
  288. list.value = res.data;
  289. if (opts.type === 'add' && list.value.length) {
  290. selectChange(list.value[0]);
  291. }
  292. };
  293.  
  294. const view = name => {
  295. if (isSubmit.value) {
  296. componentName.value = name;
  297. }
  298. };
  299.  
  300. const submit = async () => {
  301. active.value += 2;
  302. schedule[2] = 'fulfilled';
  303. isSubmit.value = true;
  304. const res = await facilitiesStandardCalcSubmit(submitData);
  305. if (res?.code !== 200) return;
  306. setTimeout(() => {
  307. close();
  308. }, 500);
  309. };
  310.  
  311. const tabChange = tab => {
  312. active.value = tab;
  313. nextTick(() => {
  314. loadoverview.value = active.value === 2;
  315. });
  316. };
  317.  
  318. const refreshClick = () => {
  319. proxy.$modal
  320. .confirm('同步数据后需要重新计算,是否同步数据?')
  321. .then(() => {
  322. proxy.$refs.storageCapacityRef.heavyLoad()
  323. proxy.$refs.standardMeasurementRef.heavyLoad()
  324. active.value = 0
  325. schedule[0] = 'pending'
  326. schedule[1] = 'pending'
  327. schedule[2] = 'pending'
  328. })
  329. .catch((error) => {
  330. console.log(error)
  331. })
  332. }
  333.  
  334. onMounted(async () => {
  335. await getList();
  336. if (id) getDetailInfo();
  337. });
  338. </script>
  339.  
  340. <style lang="scss" scoped>
  341. .box-card {
  342. .card-header {
  343. font-weight: 700;
  344. font-size: 16px;
  345. }
  346.  
  347. :deep(.form) {
  348. .el-form-item {
  349. margin-bottom: 5px;
  350. }
  351. }
  352. }
  353. .steps {
  354. width: 70%;
  355. margin: 20px auto;
  356. :deep(.el-step) {
  357. position: relative;
  358. .el-step__head {
  359. .el-step__line {
  360. left: 88%;
  361. }
  362. }
  363. .el-step__main {
  364. position: absolute;
  365. left: calc(50% + 20px);
  366. top: 4px;
  367. line-height: 1;
  368. .el-step__title {
  369. font-size: 14px;
  370. line-height: 1;
  371. }
  372. }
  373.  
  374. &:nth-of-type(1) {
  375. .el-step__head {
  376. .el-step__line {
  377. left: 94%;
  378. }
  379. }
  380. }
  381. }
  382. }
  383. .pointer {
  384. cursor: pointer;
  385. }
  386. .details {
  387. margin-top: 20px;
  388. :deep(.el-tabs) {
  389. border-radius: 4px;
  390. box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  391. .el-tabs__header {
  392. font-size: 18px;
  393. .el-tabs__item {
  394. height: 48px !important;
  395. line-height: 48px !important;
  396. font-size: 16px;
  397. }
  398. }
  399. }
  400. }
  401. .storageCapacityBox {
  402. position: relative;
  403. .refresh {
  404. position: absolute;
  405. right: 10px;
  406. top: 10px;
  407. }
  408. }
  409. </style>