[Wip 0000] 瓦斯核定页面开发

src/views/vent/gas/gasVerify/gasPumpSetting.api.ts

@@ -15,26 +15,26 @@ enum Api {
   updateGasPumpstation = '/ventanaly-jingtaifengliang/productionApprovalController/updateGasPumpstation',
 }
 
-export const addGasMainApproval = (data) => {
-  return defHttp.post({
-    url: Api.addGasMainApproval,
-    params: data,
-  });
-};
+// const addGasMainApproval = (data) => {
+//   return defHttp.post({
+//     url: Api.addGasMainApproval,
+//     params: data,
+//   });
+// };
 
-export const addGasMainpipesystem = (data) => {
-  return defHttp.post({
-    url: Api.addGasMainpipesystem,
-    params: data,
-  });
-};
+// const addGasMainpipesystem = (data) => {
+//   return defHttp.post({
+//     url: Api.addGasMainpipesystem,
+//     params: data,
+//   });
+// };
 
-export const addGasPumpstation = (data) => {
-  return defHttp.post({
-    url: Api.addGasPumpstation,
-    params: data,
-  });
-};
+// const addGasPumpstation = (data) => {
+//   return defHttp.post({
+//     url: Api.addGasPumpstation,
+//     params: data,
+//   });
+// };
 
 export const deleteGasMain = (data) => {
   return defHttp.post({
@@ -80,21 +80,21 @@ export const getGasPumpstationAllInfo = (data) => {
 
 export const updateGasMain = (data) => {
   return defHttp.post({
-    url: Api.updateGasMain,
+    url: data.id ? Api.updateGasMain : Api.addGasMainApproval,
     params: data,
   });
 };
 
 export const updateGasMainpipesystem = (data) => {
   return defHttp.post({
-    url: Api.updateGasMainpipesystem,
+    url: data.id ? Api.updateGasMainpipesystem : Api.addGasMainpipesystem,
     params: data,
   });
 };
 
 export const updateGasPumpstation = (data) => {
   return defHttp.post({
-    url: Api.updateGasPumpstation,
+    url: data.id ? Api.updateGasPumpstation : Api.addGasPumpstation,
     params: data,
   });
 };

src/views/vent/gas/gasVerify/gasPumpSetting.data.ts

@@ -133,6 +133,12 @@ export const checkFormSchema: FormSchema[] = [
 /** 管道系统能力核定表单 */
 export const pipeFormSchema: FormSchema[] = [
   {
+    label: '',
+    field: 'id',
+    show: false,
+    component: 'Input',
+  },
+  {
     label: '抽采泵站',
     field: 'extractionPumpStation',
     component: 'Input',
@@ -167,6 +173,12 @@ export const pipeFormSchema: FormSchema[] = [
 /** 装机能力核定表单 */
 export const pumpFormSchema: FormSchema[] = [
   {
+    label: '',
+    field: 'id',
+    show: false,
+    component: 'Input',
+  },
+  {
     label: '抽采泵站',
     field: 'pumpstation',
     component: 'Input',

src/views/vent/gas/gasVerify/index.vue

@@ -3,14 +3,14 @@
   <div class="gas-verify">
     <CustomHeader> 瓦斯抽采达标能力核定 </CustomHeader>
     <div class="flex mt-90px">
-      <div class="nav-l"> 瓦斯抽采达标生产能力： {{ data.dbscnl }} t/a </div>
+      <div class="nav-l"> 瓦斯抽采达标生产能力：{{ data.gasExtractionSystemCapacityResultLarge }} t/a </div>
       <div class="nav">
         <Tabs v-model:active-key="actived" :tabBarStyle="{ color: 'red' }">
           <TabPane key="product" tab="矿井瓦斯抽采达标生产能力核定" />
           <TabPane key="extract" tab="矿井瓦斯抽采能力核定" />
         </Tabs>
       </div>
-      <div class="nav-r"> 瓦斯抽采能力： {{ data.ccnl }} m<sup>3</sup>/min </div>
+      <div class="nav-r"> 瓦斯抽采能力：{{ data.gasExtractionSystemCapacityResultSmall }} m<sup>3</sup>/min </div>
     </div>
     <div class="flex">
       <div :style="{ flex: 1 }">
@@ -20,45 +20,45 @@
         <Bar :chart-data="extractChartData" x-axis-prop-type="x" series-prop-type="y" height="300px" />
       </div>
       <div class="gas-verify__content">
-        <template v-if="true">
+        <div v-show="true">
           <div class="flex flex-justify-between flex-items-center">
             <FormTitle class="flex-grow-1" icon="pump" title="矿井基本信息" />
             <Button class="mr-10px" @click="addPubFormSchema">添加回风井</Button>
             <Button class="mr-10px" @click="calculateBasicForm">计算</Button>
             <Button type="primary" @click="submitBasicForm">提交</Button>
           </div>
-          <BasicForm :model="basicFormModel" :schemas="pubFormSchema" @register="regBasicForm" />
-        </template>
-        <template v-if="actived === 'product'">
+          <BasicForm :schemas="publicFormSchema" @register="regBasicForm" />
+        </div>
+        <div v-show="actived === 'product'">
           <div class="flex flex-justify-between flex-items-center">
-            <FormTitle class="flex-grow-1" icon="pump" title="根据矿井实际抽采瓦斯量核定" />
+            <FormTitle class="flex-grow-1" icon="pump" :title="`根据矿井实际抽采瓦斯量核定：${data.gasExtractionVolumeVerificationTotal}`" />
             <Button type="primary" @click="submitGasvalForm">提交</Button>
           </div>
-          <BasicForm :model="basicFormModel" :schemas="valFormSchema" @register="regGasvalForm" />
-        </template>
-        <template v-if="actived === 'product'">
+          <BasicForm :schemas="valFormSchema" @register="regGasvalForm" />
+        </div>
+        <div v-show="actived === 'product'">
           <div class="flex flex-justify-between flex-items-center">
-            <FormTitle class="flex-grow-1" icon="pump" title="根据矿井瓦斯抽采率核定" />
+            <FormTitle class="flex-grow-1" icon="pump" :title="`根据矿井瓦斯抽采率核定：${data.gasExtractionRateVerificationTotal}`" />
             <Button class="mr-10px" @click="calculateGasrateForm">计算</Button>
             <Button type="primary" @click="submitGasrateForm">提交</Button>
           </div>
-          <BasicForm :model="basicFormModel" :schemas="rateFormSchema" @register="regGasrateForm" />
-        </template>
-        <template v-if="false">
+          <BasicForm :schemas="rateFormSchema" @register="regGasrateForm" />
+        </div>
+        <div v-show="false">
           <div class="flex flex-justify-between flex-items-center">
             <FormTitle class="flex-grow-1" icon="pump" title="核定区域信息" />
             <Button type="primary" @click="submitCheckForm">提交</Button>
           </div>
-          <BasicForm :model="basicFormModel" :schemas="checkFormSchema" @register="regCheckForm" />
-        </template>
+          <BasicForm :schemas="checkFormSchema" @register="regCheckForm" />
+        </div>
 
         <div class="flex flex-justify-between flex-items-center">
           <FormTitle
             class="flex-grow-1"
             :title="
               {
-                extract: `按瓦斯抽采泵站装机能力核定：test`,
-                product: `按矿井瓦斯抽采泵站装机能力核定：test`,
+                extract: `按瓦斯抽采泵站装机能力核定：${data.gasExtractionPumpStationCapacitySmall}`,
+                product: `按矿井瓦斯抽采泵站装机能力核定：${data.gasExtractionMainPipelineCapacityLarge}`,
               }[actived]
             "
           />
@@ -76,8 +76,8 @@
             class="flex-grow-1"
             :title="
               {
-                extract: `按矿井瓦斯主管道系统能力核定：test`,
-                product: `按矿井瓦斯抽采主管道系统能力核定：test`,
+                extract: `按矿井瓦斯主管道系统能力核定：${data.gasExtractionMainPipelineCapacitySmall}`,
+                product: `按矿井瓦斯抽采主管道系统能力核定：${data.gasExtractionMainPipelineCapacityLarge}`,
               }[actived]
             "
           />
@@ -97,10 +97,10 @@
         </BasicTable> -->
 
         <BasicModal @register="regPipeModal" title="能力核定表单" @ok="submitPipeForm">
-          <BasicForm @register="regPipeForm" />
+          <BasicForm :schemas="pipeFormSchema" @register="regPipeForm" />
         </BasicModal>
         <BasicModal @register="regPumpModal" title="能力核定表单" @ok="submitPumpForm">
-          <BasicForm @register="regPumpForm" />
+          <BasicForm :schemas="pumpFormSchema" @register="regPumpForm" />
         </BasicModal>
       </div>
     </div>
@@ -109,7 +109,7 @@
 
 <script lang="ts" setup>
   import CustomHeader from '/@/components/vent/customHeader.vue';
-  import { computed, ref } from 'vue';
+  import { computed, nextTick, ref } from 'vue';
   import { message, TabPane, Tabs, Button, Popconfirm } from 'ant-design-vue';
   import { onMounted } from 'vue';
   import FormTitle from '@/views/vent/gas/components/form/formTitle.vue';
@@ -119,8 +119,6 @@
     getGasMainAllInfo,
     getGasMainpipesystemAllInfo,
     getGasPumpstationAllInfo,
-    addGasMainpipesystem,
-    addGasPumpstation,
     deleteGasMainpipesystem,
     deleteGasPumpstation,
     updateGasMain,
@@ -140,12 +138,10 @@
   } from './gasPumpSetting.data';
   import { BasicTable, useTable } from '/@/components/Table';
   import { BasicModal, useModal } from '/@/components/Modal';
-  import { get, inRange } from 'lodash-es';
+  import { get, inRange, isNil, min } from 'lodash-es';
 
   const actived = ref<'extract' | 'product'>('product');
 
-  /** 矿井基本信息的表单数据 */
-  const basicFormModel = ref<any>({});
   /** 计算参数相关的表单通用配置 */
   const formProps = {
     showActionButtonGroup: false,
@@ -156,12 +152,18 @@
   };
 
   function submitHandler() {
-    const airVolumeStr = get(basicFormModel.value, 'returnAirVolume', []).join(',');
+    const data1 = ctxBasicForm.getFieldsValue();
+    const data2 = ctxGasvalForm.getFieldsValue();
+    const data3 = ctxGasrateForm.getFieldsValue();
+    const airVolumeStr = get(data1, 'returnAirVolume', []).join(',');
     updateGasMain({
-      ...basicFormModel.value,
+      ...data3,
+      ...data2,
+      ...data1,
       returnAirVolume: airVolumeStr,
     })
       .then(() => {
+        message.success('提交成功');
         refresh();
       })
       .catch(() => {
@@ -177,17 +179,17 @@
   }
   /** 计算部分可以自动计算的参数 */
   function calculateBasicForm() {
-    const field1 = data.value.returnAirVolume;
-    const field2 = data.value.mineGasExtractionRate;
-    if (field1 && Array.isArray(field1)) {
-      const airVolumeArr = field1.map((e) => parseFloat(e));
+    const { returnAirVolume } = data.value;
+    const { mineGasExtractionRate } = ctxBasicForm.getFieldsValue();
+    if (returnAirVolume && Array.isArray(returnAirVolume)) {
+      const airVolumeArr = returnAirVolume.map((e) => parseFloat(e));
       ctxBasicForm.setFieldsValue({
         mineMaxTotalReturnAirVolume: airVolumeArr.reduce((t, n) => t + n, 0),
       });
     }
     // 根据抽采率生成总回瓦斯浓度
-    if (field2) {
-      const n = parseInt(field2);
+    if (mineGasExtractionRate) {
+      const n = parseInt(mineGasExtractionRate);
       const config: [[number, number], number][] = [
         [[0, 35], 0.35],
         [[34.99, 40], 0.375],
@@ -208,7 +210,6 @@
   }
 
   /** 根据矿井实际抽采瓦斯量核定的表单数据 */
-  // const gasvalFormModel = ref<any>({});
   const [regGasvalForm, ctxGasvalForm] = useForm(formProps);
   function submitGasvalForm() {
     ctxGasvalForm.validate().then(() => {
@@ -217,7 +218,6 @@
   }
 
   /** 根据矿井瓦斯抽采率核定的表单数据 */
-  // const gasrateFormModel = ref<any>({});
   const [regGasrateForm, ctxGasrateForm] = useForm(formProps);
   function submitGasrateForm() {
     ctxGasrateForm.validate().then(() => {
@@ -226,11 +226,10 @@
   }
   /** 计算部分可以自动计算的参数 */
   function calculateGasrateForm() {
-    const field1 = data.value.mineGasExtractionRate;
-
+    const { mineGasExtractionRate } = ctxGasrateForm.getFieldsValue();
     // 根据抽采率生成最大绝对涌出量
-    if (field1) {
-      const n = parseInt(field1);
+    if (mineGasExtractionRate) {
+      const n = parseInt(mineGasExtractionRate);
       const config: [[number, number], number][] = [
         [[0, 35], 20],
         [[34.99, 40], 30],
@@ -242,7 +241,7 @@
       ];
       config.forEach((e) => {
         if (inRange(n, e[0][0], e[0][1])) {
-          ctxBasicForm.setFieldsValue({
+          ctxGasrateForm.setFieldsValue({
             maxAllowableAbsoluteGasEmission: e[1],
           });
         }
@@ -259,10 +258,8 @@
     });
   }
 
-  /** 矿井基本信息的表单配置，需要动态添加回风井 */
-  const pubFormSchema = ref<FormSchema[]>(publicFormSchema);
-  /** 根据表单数据设置矿井基本信息的表单配置 */
-  function initPubFormSchema() {
+  /** 矿井基本信息的表单配置，需要动态添加回风井。根据表单数据设置矿井基本信息的表单配置 */
+  function resetPublicFormSchema() {
     const airVolumeArr = data.value.returnAirVolume;
     const extra: FormSchema[] = airVolumeArr.map((num, inx) => {
       return {
@@ -273,20 +270,17 @@
         componentProps: {
           onChange: ({ target }) => {
             airVolumeArr[inx] = target.value;
-            ctxBasicForm.setFieldsValue({ total: airVolumeArr.reduce((t, n) => t + parseFloat(n), 0) });
           },
         },
       };
     });
-
-    // @ts-ignore-next-line
-    pubFormSchema.value = publicFormSchema.concat(...extra);
+    ctxBasicForm.resetSchema([...publicFormSchema, ...extra]);
   }
   /** 添加一项公用参数表单项 */
   function addPubFormSchema() {
     if (!data.value.returnAirVolume) return;
     data.value.returnAirVolume.push('0');
-    initPubFormSchema();
+    resetPublicFormSchema();
   }
 
   /** 生产能力核定/抽采能力核定的数据，也是组件的数据依赖其一 */
@@ -294,23 +288,20 @@
 
   /** 按矿井瓦斯抽采主管道系统能力核定的表格 */
   const pipeTableData = ref<any[]>([]);
-  const pipeFormModel = ref<any>({});
 
-  const [regPipeModal, { openModal: openPipeModal }] = useModal();
+  const [regPipeModal, ctxPipeModal] = useModal();
   const [regPipeTable] = useTable({
     pagination: false,
   });
   const [regPipeForm, ctxPipeForm] = useForm({
-    model: pipeFormModel,
-    schemas: pipeFormSchema,
     showActionButtonGroup: false,
     labelCol: { span: 10 },
   });
   function submitPipeForm() {
-    ctxPipeForm.validate().then(() => {
-      const req = pumpFormModel.value['id'] ? updateGasPumpstation : addGasPumpstation;
-      req(pumpFormModel.value)
+    ctxPipeForm.validate().then((data) => {
+      updateGasMainpipesystem(data)
         .then(() => {
+          ctxPipeModal.closeModal();
           refresh();
         })
         .catch(() => {
@@ -319,41 +310,41 @@
     });
   }
   function editPipeHandler(record?: Record<string, any>) {
-    if (record) {
-      ctxPipeForm.setFieldsValue(record);
-      pipeFormModel.value = record;
-      openPipeModal();
-    } else {
-      ctxPipeForm.resetFields();
-      pipeFormModel.value = {};
-      openPipeModal();
-    }
+    ctxPipeModal.openModal();
+    nextTick(() => {
+      if (record) {
+        ctxPipeForm.setFieldsValue(record);
+      } else {
+        ctxPipeForm.resetFields();
+      }
+    });
   }
   function deletePipeHandler({ id }) {
-    deleteGasPumpstation(id).catch(() => {
-      message.error('操作失败');
-    });
+    deleteGasMainpipesystem({ id })
+      .then(() => {
+        refresh();
+      })
+      .catch(() => {
+        message.error('操作失败');
+      });
   }
 
   /** 按矿井瓦斯抽采泵站装机能力核定的表格 */
   const pumpTableData = ref<any[]>([]);
-  const pumpFormModel = ref<any>({});
 
-  const [regPumpModal, { openModal: openPumpModal }] = useModal();
+  const [regPumpModal, ctxPumpModal] = useModal();
   const [regPumpTable] = useTable({
     pagination: false,
   });
   const [regPumpForm, ctxPumpForm] = useForm({
-    model: pumpFormModel,
-    schemas: pumpFormSchema,
     showActionButtonGroup: false,
     labelCol: { span: 10 },
   });
   function submitPumpForm() {
-    ctxPumpForm.validate().then(() => {
-      const req = pumpFormModel.value['id'] ? updateGasMainpipesystem : addGasMainpipesystem;
-      req(pumpFormModel.value)
+    ctxPumpForm.validate().then((data) => {
+      updateGasPumpstation(data)
         .then(() => {
+          ctxPumpModal.closeModal();
           refresh();
         })
         .catch(() => {
@@ -362,63 +353,87 @@
     });
   }
   function editPumpHandler(record?: Record<string, any>) {
-    if (record) {
-      ctxPumpForm.setFieldsValue(record);
-      pumpFormModel.value = record;
-      openPumpModal();
-    } else {
-      ctxPumpForm.resetFields();
-      pumpFormModel.value = {};
-      openPumpModal();
-    }
+    ctxPumpModal.openModal();
+    nextTick(() => {
+      if (record) {
+        ctxPumpForm.setFieldsValue(record);
+      } else {
+        ctxPumpForm.resetFields();
+      }
+    });
   }
   function deletePumpHandler({ id }) {
-    deleteGasMainpipesystem(id).catch(() => {
-      message.error('操作失败');
-    });
+    deleteGasPumpstation({ id })
+      .then(() => {
+        refresh();
+      })
+      .catch(() => {
+        message.error('操作失败');
+      });
   }
 
   function refresh() {
     Promise.all([getGasMainAllInfo({}), getGasMainpipesystemAllInfo({}), getGasPumpstationAllInfo({})]).then((res) => {
       const [r1, r2, r3] = res.map((e) => e.obj);
       r1[0].returnAirVolume = r1[0].returnAirVolume.split(',');
-      basicFormModel.value = r1[0];
+      ctxBasicForm.setFieldsValue(r1[0]);
+      ctxGasvalForm.setFieldsValue(r1[0]);
+      ctxGasrateForm.setFieldsValue(r1[0]);
       pipeTableData.value = r2;
       pumpTableData.value = r3;
       data.value = r1[0];
-      initPubFormSchema();
+      resetPublicFormSchema();
     });
   }
 
+  function getNum(data, path, defaultValue) {
+    const r = get(data, path);
+
+    return isNil(r) ? defaultValue : parseFloat(r);
+  }
+
+  /** 瓦斯抽采能力 */
+  const extractValue = computed(() => {
+    return min([getNum(data, 'gasExtractionMainPipelineCapacitySmall', 0), getNum(data, 'gasExtractionPumpStationCapacitySmall', 0)]);
+  });
+  /** 瓦斯抽采达标生产能力 */
+  const productValue = computed(() => {
+    return min([getNum(data, 'gasExtractionMainPipelineCapacitySmall', 0), getNum(data, 'gasExtractionPumpStationCapacitySmall', 0)]);
+  });
+
   const productChartData = computed(() => {
     return [
       {
         x: '抽采系统能力',
-        y: data.value.ccxtnl || 0,
+        y: data.value.gasExtractionSystemCapacityResultSmall || 0,
       },
       {
         x: '实际抽采量',
-        y: data.value.sjccl || 0,
+        y: data.value.gasExtractionVolumeVerificationTotal || 0,
       },
       {
         x: '瓦斯抽采率',
-        y: data.value.wsclv || 0,
-      },
-      {
-        x: '防突抽采',
-        y: data.value.ftcc || 0,
+        y: data.value.gasExtractionRateVerificationTotal || 0,
       },
+      // {
+      //   x: '防突抽采',
+      //   y: data.value.ftcc || 0,
+      // },
     ];
   });
   const extractChartData = computed(() => {
+    const keyMap = {
+      extract: ['gasExtractionPumpStationCapacitySmall', 'gasExtractionMainPipelineCapacitySmall'],
+      product: ['gasExtractionMainPipelineCapacityLarge', 'gasExtractionMainPipelineCapacityLarge'],
+    };
     return [
       {
         x: '瓦斯抽采泵装机能力',
-        y: data.value.wsccbzznl || 0,
+        y: get(data.value, keyMap[actived.value][0], 0),
       },
       {
         x: '瓦斯抽采主管道系统能力',
-        y: data.value.wscczgdxtnl || 0,
+        y: get(data.value, keyMap[actived.value][1], 0),
       },
     ];
   });