[Feat 0000] 采育喷雾设备控制对接

src/views/vent/monitorManager/deviceMonitor/components/device/modal/atomizing.modal.vue

@@ -8,12 +8,19 @@
           :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
           :key="device.deviceID"
         >
-          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
+          <span class="" @click="selectDevice(device)">{{ device.strinstallpos }}</span>
         </div>
       </div>
       <div class="modal-right">
         <div class="base-info">
           <span class="base-title">设备基本情况</span>
+          <div v-if="activeDeviceType === 'atomizing_cy'" class="base-box justify-around" style="height: auto">
+            <a-button type="primary" @click="handleDeviceControl('AutoMode', 0)">切换至自动模式</a-button>
+            <a-button type="primary" @click="handleDeviceControl('Lockingmode', 1)">切换至闭锁模式</a-button>
+            <a-button type="primary" @click="handleDeviceControl('Manualmode', 2)">切换至手动模式</a-button>
+            <a-button type="primary" @click="handleDeviceControl('CtrlStart', -256)">喷雾开启</a-button>
+            <a-button type="primary" @click="handleDeviceControl('CtrlStop', 0)">喷雾关闭</a-button>
+          </div>
           <div class="base-box">
             <div class="base-item">
               <span class="title">设备编号：</span>
@@ -38,17 +45,26 @@
               <span class="title">工作模式：</span>
               <!-- <span class="value">{{ atomizingMonitor['workMode'] ? atomizingMonitor['workMode'] : '-' }}</span> -->
               <div class="flex">
-                <div class="pr-10px"
-                  ><span class="signal-round signal-round-gry" :class="{ 'signal-round-run': atomizingMonitor['workMode'] === '0000' }"></span
-                  ><span class="pl-10px">自动</span></div
+                <div class="pr-10px">
+                  <span
+                    class="signal-round signal-round-gry"
+                    :class="{ 'signal-round-run': atomizingMonitor[workModeConfig[0].prop] === workModeConfig[0].val }"
+                  ></span>
+                  <span class="pl-10px">自动</span></div
                 >
-                <div class="pr-10px"
-                  ><span class="signal-round signal-round-gry" :class="{ 'signal-round-run': atomizingMonitor['workMode'] === '0001' }"></span
-                  ><span class="pl-10px">闭锁</span></div
+                <div class="pr-10px">
+                  <span
+                    class="signal-round signal-round-gry"
+                    :class="{ 'signal-round-run': atomizingMonitor[workModeConfig[1].prop] === workModeConfig[1].val }"
+                  ></span>
+                  <span class="pl-10px">闭锁</span></div
                 >
-                <div class="pr-10px"
-                  ><span class="signal-round signal-round-gry" :class="{ 'signal-round-run': atomizingMonitor['workMode'] === '0002' }"></span
-                  ><span class="pl-10px">手动</span></div
+                <div class="pr-10px">
+                  <span
+                    class="signal-round signal-round-gry"
+                    :class="{ 'signal-round-run': atomizingMonitor[workModeConfig[2].prop] === workModeConfig[2].val }"
+                  ></span>
+                  <span class="pl-10px">手动</span></div
                 >
               </div>
             </div>
@@ -85,17 +101,26 @@
             <div class="base-item flex">
               <span class="title">喷雾状态：</span>
               <div class="flex">
-                <div class="pr-10px"
-                  ><span class="signal-round signal-round-gry" :class="{ 'signal-round-run': atomizingMonitor['waterStatus'] === 'FF00' }"></span
-                  ><span class="pl-10px">开启</span></div
+                <div class="pr-10px">
+                  <span
+                    class="signal-round signal-round-gry"
+                    :class="{ 'signal-round-run': atomizingMonitor[atomizeConfig[0].prop] === atomizeConfig[0].val }"
+                  ></span>
+                  <span class="pl-10px">开启</span></div
                 >
-                <div class="pr-10px"
-                  ><span class="signal-round signal-round-gry" :class="{ 'signal-round-run': atomizingMonitor['waterStatus'] === '0000' }"></span
-                  ><span class="pl-10px">关闭</span></div
+                <div class="pr-10px">
+                  <span
+                    class="signal-round signal-round-gry"
+                    :class="{ 'signal-round-run': atomizingMonitor[atomizeConfig[1].prop] === atomizeConfig[1].val }"
+                  ></span>
+                  <span class="pl-10px">关闭</span></div
                 >
-                <div class="pr-10px"
-                  ><span class="signal-round signal-round-gry" :class="{ 'signal-round-run': atomizingMonitor['waterStatus'] === '0001' }"></span
-                  ><span class="pl-10px">停止</span></div
+                <div class="pr-10px">
+                  <span
+                    class="signal-round signal-round-gry"
+                    :class="{ 'signal-round-run': atomizingMonitor[atomizeConfig[2].prop] === atomizeConfig[2].val }"
+                  ></span>
+                  <span class="pl-10px">停止</span></div
                 >
               </div>
             </div>
@@ -181,19 +206,23 @@
         </div>
       </div>
     </div>
+    <PasswordModal :modalIsShow="passwordShown" modalTitle="设备控制" @handle-ok="handlePasswordConfirm" @handle-cancel="passwordShown = false" />
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { defineComponent, ref, watch, shallowRef, computed } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
   import { SvgIcon } from '/@/components/Icon';
   import dayjs from 'dayjs';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { chartsColumnList } from '../device.data';
+  import { deviceControlApi } from '/@/api/vent';
+  import PasswordModal from '../../../../comment/components/PasswordModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   export default defineComponent({
-    components: { BasicModal, BarAndLine, SvgIcon },
+    components: { BasicModal, BarAndLine, SvgIcon, PasswordModal },
     props: {
       dataSource: { type: Array },
       activeID: { type: String },
@@ -203,6 +232,7 @@
       const modelRef = ref({});
       const loading = ref(true);
       const activeDeviceID = ref('');
+      const activeDeviceType = ref('');
       const deviceList = ref<any[]>([]);
       const posList = ref<any[]>([]);
       const atomizingMonitor = shallowRef({});
@@ -272,22 +302,23 @@
       }
 
       // 选择监测
-      function selectDevice(id) {
+      function selectDevice(record) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
+          activeDeviceID.value = record.deviceID;
+          activeDeviceType.value = record.deviceType;
           setModalProps({ loading: false, confirmLoading: false });
         }, 300);
       }
 
-      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID]) => {
         deviceList.value = newDataSource as any[];
         // if (newActiveID != oldActiveID) {
         //   activeDeviceID.value = newActiveID as string;
         // }
-        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID!;
         newDataSource?.forEach((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
             // activeDeviceID.value = item.deviceID;
@@ -300,10 +331,88 @@
             // if(list.length > 0) posList.value = list
             posList.value = item['history'];
             atomizingMonitor.value = item.readData;
+            activeDeviceType.value = item.deviceType;
           }
         });
       });
 
+      const { createMessage, createConfirm } = useMessage();
+      const passwordShown = ref(false);
+      const controlParams = {
+        deviceid: '',
+        devicetype: '',
+        paramcode: '',
+        password: '',
+        value: '',
+      };
+
+      function handleDeviceControl(code, val) {
+        controlParams.paramcode = code;
+        controlParams.value = val;
+        passwordShown.value = true;
+      }
+
+      function handlePasswordConfirm(val) {
+        if (!val) {
+          createMessage.warning('请输入密码！');
+          return;
+        }
+
+        controlParams.deviceid = activeDeviceID.value;
+        controlParams.devicetype = activeDeviceType.value;
+        controlParams.password = val;
+
+        createConfirm({
+          iconType: 'warning',
+          title: '控制',
+          content: '您确定要控制吗？',
+          onOk: () =>
+            deviceControlApi(controlParams)
+              .then((res) => {
+                if (res.success) {
+                  createMessage.success('指令下发成功');
+                } else {
+                  throw res;
+                }
+              })
+              .catch((err) => {
+                createMessage.error(err.message);
+              })
+              .finally(() => {
+                passwordShown.value = false;
+              }),
+        });
+      }
+
+      const workModeConfig = computed(() => {
+        if (activeDeviceType.value === 'atomizing_cy') {
+          return [
+            { prop: 'stateSpray', val: '0' },
+            { prop: 'stateSpray', val: '1' },
+            { prop: 'stateSpray', val: '2' },
+          ];
+        }
+        return [
+          { prop: 'workMode', val: '0000' },
+          { prop: 'workMode', val: '0001' },
+          { prop: 'workMode', val: '0002' },
+        ];
+      });
+      const atomizeConfig = computed(() => {
+        if (activeDeviceType.value === 'atomizing_cy') {
+          return [
+            { prop: 'deviceStatus', val: '1' },
+            { prop: 'deviceStatus', val: '0' },
+            { prop: 'deviceStatus', val: '2' },
+          ];
+        }
+        return [
+          { prop: 'waterStatus', val: 'FF00' },
+          { prop: 'waterStatus', val: '0000' },
+          { prop: 'waterStatus', val: '0001' },
+        ];
+      });
+
       return {
         register,
         model: modelRef,
@@ -313,11 +422,17 @@
         selectDevice,
         deviceList,
         activeDeviceID,
+        activeDeviceType,
         atomizingMonitor,
         echatsOption,
         posList,
         chartsColumns,
         columns,
+        passwordShown,
+        handleDeviceControl,
+        handlePasswordConfirm,
+        workModeConfig,
+        atomizeConfig,
       };
     },
   });