[Feat 0000] 保德均压对接均压与低氧参数监测设置开发以及代码优化

src/views/vent/monitorManager/balancePressMonitor/balancePress.data.ts

@@ -183,3 +183,41 @@ export const settingParam3 = [
     unit: 'min',
   },
 ];
+export const settingParam4 = [
+  {
+    title: '一氧化碳浓度上限',
+    code: 'coMaxVal',
+    value: '',
+    unit: '%',
+  },
+  {
+    title: '甲烷浓度上限',
+    code: 'ch4MaxVal',
+    value: '',
+    unit: '%',
+  },
+  {
+    title: '氧气浓度下限',
+    code: 'o2MinVal',
+    value: '',
+    unit: '%',
+  },
+  {
+    title: '漏风量上限',
+    code: 'windLeakMax',
+    value: '',
+    unit: 'm³/min',
+  },
+  {
+    title: '漏风量下限',
+    code: 'windLeakMin',
+    value: '',
+    unit: 'm³/min',
+  },
+  {
+    title: '需风量',
+    code: 'windDemand',
+    value: '',
+    unit: 'm³/min',
+  },
+];

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHomeBD.vue

@@ -9,33 +9,34 @@
           <template #container>
             <div class="vent-flex-row-between auto-control mt-10px mb-10px">
               <div class="title">自动调节：</div>
-              <a-radio-group v-model:value="isAutoControl" name="radioGroup" @change="changeType(isAutoControl)">
+              <a-radio-group :value="avePressSetting.isAutoControl" name="radioGroup" @change="changeIsAutoControl">
                 <a-radio value="1">关闭</a-radio>
                 <a-radio value="2">开启</a-radio>
               </a-radio-group>
             </div>
             <div class="input-box">
-              <div class="divider-line">开始条件</div>
+              <!-- <div class="divider-line">开始条件</div>
               <div v-for="(item, index) in settingParam1" class="input-item" :key="index">
                 <div class="title">{{ item.title }}：</div>
                 <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
                 <div class="unit">{{ item.unit }}</div>
-              </div>
+              </div> -->
               <div class="divider-line">调节参数</div>
-              <div v-for="(item, index) in settingParam2" class="input-item" :key="index">
+              <div v-for="(item, index) in settingParam4" class="input-item" :key="index">
                 <div class="title">{{ item.title }}：</div>
-                <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
+                <a-input-number class="input-value" v-model:value="avePressSetting[item.code]" placeholder="" :disabled="settingFormDisabled" />
                 <div class="unit">{{ item.unit }}</div>
               </div>
-              <div class="divider-line">结束时间</div>
+              <!-- <div class="divider-line">结束时间</div>
               <div v-for="(item, index) in settingParam3" class="input-item" :key="index">
                 <div class="title">{{ item.title }}：</div>
                 <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
                 <div class="unit">{{ item.unit }}</div>
-              </div>
+              </div> -->
             </div>
-            <div class="btn-box" style="text-align: center">
-              <div class="btn btn1" @click="modalVisible = true">提交</div>
+            <div class="btn-box flex" style="text-align: center">
+              <div class="btn btn1 flex-1" @click="editSettingForm">{{ settingFormDisabled ? '编辑' : '取消' }}</div>
+              <div class="btn btn1 flex-1" @click="submitSettingForm">提交</div>
             </div>
           </template>
         </ventBox1>
@@ -48,13 +49,13 @@
           <template #container>
             <div class="vent-flex-row-between auto-control mt-10px mb-10px">
               <div class="title">自动调节：</div>
-              <a-radio-group :value="avePress.isAuto" name="radioGroup" @change="changeIsAuto">
+              <a-radio-group :value="avePressLinkage.isAuto" name="radioGroup" @change="changeIsAuto">
                 <a-radio :value="false">关闭</a-radio>
                 <a-radio :value="true">开启</a-radio>
               </a-radio-group>
             </div>
             <div class="btn-box" style="text-align: center">
-              <div class="btn btn1" @click="openModal">控制密码修改</div>
+              <div class="btn btn1" @click="() => openModal()">控制密码修改</div>
             </div>
           </template>
         </ventBox1>
@@ -70,24 +71,27 @@
         :visible="true"
       />
     </div>
-    <PasswordModal :modal-is-show="modalVisible" modal-title="提交" @handle-ok="handleControl" @handle-cancel="modalVisible = false" />
-    <UpdatePassword @register="updatePwdRegister" @submit="changePassword" />
+    <PasswordModal :modal-is-show="modalVisible" modal-title="提交" @handle-ok="handleResolve" />
+    <UpdatePassword @register="updatePwdRegister" @submit="handleChangePassword" />
   </a-spin>
 </template>
 <script setup lang="ts">
   import { ref, onMounted, onUnmounted, defineProps } from 'vue';
   import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
-  import { list, submitEdit, subList, updatePassword, validPassword } from '../balancePress.api';
+  import { list } from '../balancePress.api';
   import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
   import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
   import { useGlobSetting } from '/@/hooks/setting';
-  import { settingParam1, settingParam2, settingParam3 } from '../balancePress.data';
-  import { message } from 'ant-design-vue';
+  import { settingParam4 } from '../balancePress.data';
+  import { notification } from 'ant-design-vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import PasswordModal from '../../comment/components/PasswordModal.vue';
   import UpdatePassword from '../../comment/components/UpdatePassword.vue';
-  import { get } from 'lodash-es';
   import { useModal } from '/@/components/Modal';
+  import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
+  import { getToken } from '/@/utils/auth';
+  import { useUserStore } from '/@/store/modules/user';
+  import { usePressControl } from '../hooks/useControl';
   // import { Config } from '../../../deviceManager/configurationTable/types';
 
   const props = defineProps({
@@ -120,7 +124,6 @@
             timer = null;
           }
           await getMonitor();
-          loading.value = false;
         },
         flag ? 0 : 1000
       );
@@ -172,240 +175,96 @@
     return result;
   }
 
-  // const configs = ref<Config[]>([
-  //   {
-  //     deviceType: '',
-  //     moduleName: '局扇',
-  //     pageType: 'balancePressHome',
-  //     moduleData: {
-  //       header: {
-  //         show: false,
-  //         readFrom: '',
-  //         selector: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //         slot: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'image',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'row',
-  //         items: [
-  //           {
-  //             name: 'complex_list',
-  //             basis: '50%',
-  //           },
-  //           {
-  //             name: 'complex_list',
-  //             basis: '50%',
-  //           },
-  //         ],
-  //       },
-  //       complex_list: [
-  //         {
-  //           type: 'G',
-  //           readFrom: 'fanlocal_steml_zj',
-  //           mapFromData: false,
-  //           items: [
-  //             {
-  //               title: '主机',
-  //               contents: [
-  //                 {
-  //                   label: '运行状态',
-  //                   value: '${datalist[0].readData.Fan1StartStatus_str}',
-  //                   color: 'blue',
-  //                 },
-  //                 {
-  //                   label: '运行频率',
-  //                   value: '${datalist[0].readData.Fan1fHz}',
-  //                   color: 'blue',
-  //                 },
-  //                 {
-  //                   label: '输出电压',
-  //                   value: '${datalist[0].readData.Fan1fHz}',
-  //                   color: 'blue',
-  //                 },
-  //               ],
-  //             },
-  //           ],
-  //         },
-  //         {
-  //           type: 'G',
-  //           readFrom: 'fanlocal_steml_zj',
-  //           mapFromData: false,
-  //           items: [
-  //             {
-  //               title: '备机',
-  //               contents: [
-  //                 {
-  //                   label: '运行状态',
-  //                   value: '${datalist[0].readData.Fan2StartStatus_str}',
-  //                   color: 'blue',
-  //                 },
-  //                 {
-  //                   label: '运行频率',
-  //                   value: '${datalist[0].readData.Fan2fHz}',
-  //                   color: 'blue',
-  //                 },
-  //                 {
-  //                   label: '输出电压',
-  //                   value: '${datalist[0].readData.Fan2fHz}',
-  //                   color: 'blue',
-  //                 },
-  //               ],
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //       to: '',
-  //     },
-  //     showStyle: {
-  //       size: 'width:380px;height:200px;',
-  //       version: '原版',
-  //       position: 'top:150px;right:0;',
-  //     },
-  //   },
-  //   {
-  //     deviceType: '',
-  //     moduleName: '其他模块A',
-  //     pageType: 'balancePressHome',
-  //     moduleData: {
-  //       header: {
-  //         show: false,
-  //         readFrom: '',
-  //         selector: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //         slot: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'image',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'column',
-  //         items: [
-  //           {
-  //             name: 'list',
-  //             basis: '100%',
-  //           },
-  //         ],
-  //       },
-  //       list: [
-  //         {
-  //           type: 'K',
-  //           readFrom: 'windrect_ds_four.datalist[0]',
-  //           items: [
-  //             {
-  //               label: '网络状态',
-  //               value: '${readData.netStatus_str}',
-  //               color: 'blue',
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //       to: '',
-  //     },
-  //     showStyle: {
-  //       size: 'width:380px;height:230px;',
-  //       version: '原版',
-  //       position: 'top:360px;right:0;',
-  //     },
-  //   },
-  // ]);
+  const { avePressSetting, avePressLinkage, formData, getAvePress, changePassword, linkageControl, settingControl } = usePressControl();
+
+  const modalVisible = ref(false);
 
-  // const { configs, fetchConfigs } = useInitConfigs();
+  const { configs, fetchConfigs } = useInitConfigs();
 
-  const formData = ref({
-    isAuto: false,
-  });
-  // 默认初始是第一行
-  const isAutoControl = ref('1');
+  const [updatePwdRegister, { openModal, closeModal, setModalProps }] = useModal();
+
+  function handleChangePassword(values) {
+    setModalProps({ confirmLoading: true });
+    changePassword(values).finally(() => {
+      setModalProps({ confirmLoading: false });
+      closeModal();
+    });
+  }
 
   function changeIsAuto({ target }) {
     formData.value.isAuto = target.value;
     modalVisible.value = true;
-  }
-
-  const changeType = (isAutoControl) => {
-    isAutoControl;
-    //
-  };
-
-  const modalVisible = ref(false);
-
-  function handleControl(password) {
-    validPassword({
-      id: avePress.value.id,
-      password,
-    })
-      .then(() => {
-        return submitEdit({
-          id: avePress.value.id,
+    resolver = (password) => {
+      linkageControl(
+        { password },
+        {
           isAuto: formData.value.isAuto,
-        })
-          .then(() => {
-            message.success('操作成功');
-          })
-          .catch(() => {
-            message.error('操作失败');
-          });
-      })
-      .catch((e) => {
-        message.error(e);
-      })
-      .finally(() => {
+        }
+      ).finally(() => {
         modalVisible.value = false;
-        getAvePress();
       });
+    };
   }
-
-  const avePress = ref<any>({ isAuto: false });
-  function getAvePress() {
-    subList({
-      strType: 'sdg_fan_sys_gate',
-    }).then(({ records }) => {
-      avePress.value = get(records, '[0]');
-    });
+  function changeIsAutoControl({ target }) {
+    formData.value.isAutoControl = target.value;
+    modalVisible.value = true;
+    resolver = (password) => {
+      settingControl(
+        { password },
+        {
+          isAutoControl: formData.value.isAutoControl,
+        }
+      ).finally(() => {
+        modalVisible.value = false;
+      });
+    };
   }
 
-  const { configs, fetchConfigs } = useInitConfigs();
+  // function submitLinkageForm(password) {}
+  function submitSettingForm() {
+    modalVisible.value = true;
+    resolver = (password) => {
+      settingControl({ password }, avePressSetting.value).finally(() => {
+        modalVisible.value = false;
+      });
+    };
+  }
 
-  const [updatePwdRegister, { openModal, closeModal, setModalProps }] = useModal();
+  let resolver: any = null;
+  function handleResolve(password) {
+    if (resolver) resolver(password);
+    resolver = null;
+  }
 
-  function changePassword(values) {
-    setModalProps({ confirmLoading: true });
-    updatePassword({
-      id: avePress.value.id,
-      newPassword: values.password,
-      oldPassword: values.oldpassword,
-    })
-      .then(() => {
-        message.success('操作成功');
-      })
-      .catch((e) => {
-        message.error(e);
-      })
-      .finally(() => {
-        setModalProps({ confirmLoading: false });
-        closeModal();
-        getAvePress();
+  // 初始化 WebSocket
+  function initWebSocket() {
+    const token = getToken();
+    const userStore = useUserStore();
+    const glob = useGlobSetting();
+    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+    const url = `${glob.wsUrl?.replace('https://', 'wss://').replace('http://', 'ws://')}/websocket/${userStore.getUserInfo.id}?token=${token}`;
+    connectWebSocket(url);
+    onWebSocket((data: any) => {
+      console.error('NO ERROR HERE! ', data);
+      notification.open({
+        message: data.title,
+        description: JSON.parse(data.content).info,
+        placement: 'topRight',
       });
+    });
+  }
+
+  const settingFormDisabled = ref(true);
+  function editSettingForm() {
+    settingFormDisabled.value = !settingFormDisabled.value;
+    /**  如果取消了编辑模式，那么需要重置表单 */
+    if (settingFormDisabled.value) {
+      getAvePress();
+    }
   }
 
   onMounted(() => {
+    initWebSocket();
     // getMonitor()
     fetchConfigs('balancePressHome');
     getAvePress();

src/views/vent/monitorManager/balancePressMonitor/hooks/useControl.ts

@@ -0,0 +1,109 @@
+import { message } from 'ant-design-vue';
+import { get } from 'lodash-es';
+import { ref } from 'vue';
+import { submitEdit, subList, updatePassword, validPassword } from '../balancePress.api';
+
+export function usePressControl() {
+  /** 参数与设置、风机风门联动表单数据 */
+  const formData = ref({
+    /** 风机风门联动的自动调控 */
+    isAuto: false,
+    /** 参数与设置的自动调控 */
+    isAutoControl: false,
+  });
+  /** 参数与设置、风机风门联动的数据 */
+  const avePressLinkage = ref<any>({ isAuto: false });
+  const avePressSetting = ref<any>({ isAutoControl: false });
+
+  /** 获取 参数与设置、风机风门联动 的数据 */
+  function getAvePress() {
+    return Promise.all([
+      subList({
+        strType: 'sdg_fan_sys_gate',
+      }),
+      subList({
+        strType: 'sdg_gas_monitor',
+      }),
+    ]).then(([linkageData, settingData]) => {
+      avePressLinkage.value = get(linkageData, 'records.[0]', {});
+      avePressSetting.value = get(settingData, 'records.[0]', {});
+    });
+  }
+
+  function changePassword({ password, oldpassword }) {
+    return updatePassword({
+      id: avePressLinkage.value.id,
+      newPassword: password,
+      oldPassword: oldpassword,
+    })
+      .then(() => {
+        message.success('操作成功');
+      })
+      .catch((e) => {
+        message.error(e);
+      })
+      .finally(() => {
+        getAvePress();
+      });
+  }
+
+  function linkageControl({ password }, formData) {
+    return validPassword({
+      id: avePressLinkage.value.id,
+      password,
+    })
+      .then(() => {
+        return submitEdit({
+          id: avePressLinkage.value.id,
+          ...formData,
+        })
+          .then(() => {
+            message.success('操作成功');
+          })
+          .catch(() => {
+            message.error('操作失败');
+          });
+      })
+      .catch((e) => {
+        message.error(e);
+      })
+      .finally(() => {
+        getAvePress();
+      });
+  }
+
+  function settingControl({ password }, formData) {
+    return validPassword({
+      id: avePressSetting.value.id,
+      password,
+    })
+      .then(() => {
+        return submitEdit({
+          id: avePressSetting.value.id,
+          ...formData,
+        })
+          .then(() => {
+            message.success('操作成功');
+          })
+          .catch(() => {
+            message.error('操作失败');
+          });
+      })
+      .catch((e) => {
+        message.error(e);
+      })
+      .finally(() => {
+        getAvePress();
+      });
+  }
+
+  return {
+    settingControl,
+    linkageControl,
+    changePassword,
+    getAvePress,
+    avePressLinkage,
+    avePressSetting,
+    formData,
+  };
+}