From 0cf454f07efdbc036bff273686521fe5d2c5e4ad Mon Sep 17 00:00:00 2001
From: qingzhengli <1204552371@qq.com>
Date: Tue, 16 Apr 2024 15:41:22 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=20=E6=9B=B4=E6=96=B0=20=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E6=8E=A7=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Broadcast/components/BroadcastParam.vue   |   7 +-
 .../components/DeviceParamsMulti.vue          | 201 ++++++++++++++++++
 .../components/HomeFrameControl/index.vue     | 102 +++++----
 3 files changed, 263 insertions(+), 47 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParamsMulti.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue
index e6b921b7..ef8e87a9 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="body">
-    <div class="left">
+    <div v-if="!isMultiControl" class="left">
       <div class="title">路测广播列表</div>
       <CheckboxGroup class="checkbox-group" gap="9px" :showIcon="true" v-model="checkList" :options="musicList"
         id="otherConfig" label="deviceName">
@@ -9,9 +9,9 @@
         </template>
       </CheckboxGroup>
     </div>
-    <div class="right">
+    <div class="right" :style="{ width: isMultiControl ? '100%' : undefined }">
       <div class="top-content">
-        <Video class="item-video" :pileNum="pileNum" />
+        <Video v-if="!isMultiControl" class="item-video" :pileNum="pileNum" />
 
         <label>发布内容: </label>
         <ElInput type="textarea" v-model="releaseMessage" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150"
@@ -58,6 +58,7 @@ export default {
     visible: Boolean,
     pileNum: String,
     otherConfig: String,
+    isMultiControl: Boolean
   },
   data() {
     return {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParamsMulti.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParamsMulti.vue
new file mode 100644
index 00000000..26bf1e93
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParamsMulti.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class='DeviceParams'>
+    <div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div>
+    <Descriptions :list="devicesList" style="gap: 18px;" column="5">
+      <template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }">
+        <span>{{ data.text }}</span>
+        <Switcher v-if="!disabled" class="switcher" :activeOption="activeOption" :value="data.state"
+          @change="(value) => handleSwitcherChange(value, data)" />
+        <ElTag style="margin-left: 20px;" v-else effect="dark" :type="data.state ? '' : 'info'">{{ data.state ? '开' :
+      '关' }}
+        </ElTag>
+      </template>
+    </Descriptions>
+  </div>
+</template>
+
+<script>
+import Descriptions from '@screen/components/Descriptions.vue';
+import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue';
+
+import request from "@/utils/request";
+import { Message } from 'element-ui';
+import { confirm } from "@screen/utils/common";
+
+export default {
+  name: 'DeviceParams',
+  components: {
+    Descriptions,
+    Switcher
+  },
+  props: {
+    dialogData: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: Boolean,
+    isMultiControl: Boolean
+  },
+  data() {
+    return {
+      secondLoading: true,
+      devicesList: [],
+      activeOption: {
+        active: {
+          text: "开"
+        },
+        unActive: {
+          text: "关"
+        }
+      }
+    }
+  },
+  created() {
+
+    Promise.all([this.getAc(), this.getDc()]).then(res => {
+      // if (result.code != 200) return;
+
+      let ac = res[0].data;
+      let dc = res[1].data;
+      let deviceInfo = _.merge({}, ac, dc);
+      console.log(deviceInfo, "deviceInfo11")
+      const typeMap = {
+        ac: '220v',
+        dc: '12v',
+      }
+      for (const key in deviceInfo.formatValue) {
+        // electricity 电流
+        // voltage 电压
+        if (key.includes('electricity')) {
+          const args = key.match(/[a-z]+|[0-9]+$/g);
+
+          const type = args[0], num = args.slice(-1)[0], prefix = args.slice(0, 2).join('_');
+          // console.log(type , num , prefix , "+++=========="); //dc 2 dc_out
+          this.devicesList.push(
+            {
+              label: `支路${num} （${typeMap[type]}）   电压`,
+              key: `${prefix}_voltage_${num}`,
+              text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
+              gridColumn: 3
+            },
+            {
+              label: '电流',
+              key: `${prefix}_electricity_${num}`,
+              text: deviceInfo.formatValue[key],
+              gridColumn: 2,
+              state: deviceInfo.value[key] > 0
+            }
+          );
+        }
+      }
+      this.devicesList.push(
+        {
+          label: '风扇',
+          key: `fan_status`,
+          // key: `aa_electricity_1`,
+          text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-',
+          gridColumn: 2,
+          state: (deviceInfo.formatValue['fan_status'] === '0')
+        },
+
+        {
+          label: '温度',
+          key: `temperature`,
+          text: deviceInfo.formatValue['temperature'] ? `${deviceInfo.formatValue['temperature']} °C` : '-',
+          gridColumn: 2
+        },
+        {
+          label: '箱门',
+          key: `door_status`,
+          text: { 0: '关闭', 1: '打开' }[deviceInfo.formatValue['door_status']] || '-',
+          gridColumn: 1
+        },
+        {
+          label: '湿度',
+          key: `humidity`,
+          text: deviceInfo.formatValue['humidity'] ? `${deviceInfo.formatValue['humidity']} %` : '-',
+          gridColumn: 2
+        },
+        {
+          label: '市电掉电',
+          key: `power_status`,
+          text: { 0: '正常', 1: '掉电' }[deviceInfo.formatValue['power_status']] || '-',
+          gridColumn: 2
+        },
+      )
+      // this.data = result.rows;
+      // this.total = result.total;
+    })
+      .finally(() => {
+        this.secondLoading = false
+      })
+  },
+  methods: {
+    getAc() {
+      return request({
+        url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}/1ac`,
+        method: "get",
+        params: {}
+      })
+    },
+    getDc() {
+      return request({
+        url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}/1dc`,
+        method: "get",
+        params: {}
+      })
+    },
+    async handleSwitcherChange(value, data) {
+      let str = data.state ? "关闭" : "开启";
+      let deviceName = "";
+      if (data.key.includes("fan")) {
+        str += "风扇?";
+        deviceName = "fan_out_en";
+      } else {
+        str += "该支路?"
+        deviceName = data.key.match(/^[a-z]+_out|[0-9]+/g).join("_") + "_en"; //dc_out_2_en    ac_out_2_en;
+      }
+      data.state = value;
+      const isContinue = await confirm({ message: `${str}` })
+        .catch(() => {
+          console.log(data.state, value, 333)
+          data.state = !value;
+        });
+
+      if (!isContinue) return;
+
+      // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc=
+      request({
+        url: `/business/device/functions/${this.dialogData.iotDeviceId}/${102}`,
+        method: "POST",
+        data: {
+          deviceName,
+          // 开关：1=打开，0=关闭
+          value: value ? 1 : 0
+        }
+      })
+        .then(result => {
+          if (result.code != 200) {
+            Message.error("操作失败");
+            data.state = !value;
+            return;
+          };
+          Message.success("操作成功");
+        })
+        .catch(() => {
+          data.state = !value;
+          Message.error("操作失败");
+        })
+    },
+    getSlotKey(key) {
+      return key.includes('electricity') || key.includes('fan') ? key : ''
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.DeviceParams {
+  height: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
index 78bf3965..18227f6a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
@@ -12,7 +12,9 @@
         <span class="close" @click="() => { this.activeIcon = null; }">
           <i class="el-icon-close" />
         </span>
-        <Form labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
+        <Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
+        <component :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true"></component>
+        <!-- -->
         <div class="footer">
           <Button @click.native="">
             确认
@@ -35,9 +37,15 @@ import { ChildTypes } from "@screen/utils/enum.js"
 import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
 import { delay } from "@screen/utils/common";
 import { initSearch } from "@screen/utils/enum/common.js"
+import DeviceParams from "@screen/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue";
+import BroadcastParam from "@screen/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue";
+
+import Vue from "vue";
 
 import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent"
-const controlMulti = ["情报板", "行车诱导", "疲劳唤醒", "合流区", "设备箱", "语音广播"];
+const componentMap = { "语音广播": "BroadcastParam" } //DeviceTopics[deviceType]
+//"情报板": undefined, "行车诱导": undefined, "疲劳唤醒": undefined, "合流区": undefined,"设备箱": "DeviceParams",
+const controlMulti = Object.keys(componentMap);//6种批量控制
 const DeviceTopics = {};//6种批量控制 事件专题 {key:label}
 
 Object.keys(DeviceForMap).forEach(DeviceLabel => {
@@ -49,7 +57,7 @@ async function setDeviceOptions(config, filterData, formList) {
     return data;
   });
   formList[4].options.options = data.map(item => {
-    return { label: `${item.deviceName}${item.stakeMark}`, value: JSON.stringify({ id: item.id, iotDeviceId: item.iotDeviceId }) }
+    return { label: `${item.deviceName}`, value: JSON.stringify({ id: item.id, iotDeviceId: item.iotDeviceId }), disabled: item.deviceState != 1 }
   })
 };
 function changeHandle(data, formList) {
@@ -58,16 +66,20 @@ function changeHandle(data, formList) {
   data.startStakeMark && (filterData.startStakeMark = data.startStakeMark);
   data.endStakeMark && (filterData.endStakeMark = data.endStakeMark);
   setDeviceOptions({ deviceType: data.deviceType }, filterData, formList);
+  data.childType = undefined;
 }
 export default {
   name: "HomeFrameControl",//设备控制
   components: {
     Button,
     Form,
+    DeviceParams,
+    BroadcastParam
   },
   data() {
     return {
       activeIcon: null,
+      data: {},
       formList: [
         {
           label: "设备类型:",
@@ -75,12 +87,14 @@ export default {
           type: "select",
           options: {
             clearable: true,
-            options: [],
+            options: Object.keys(DeviceTopics).map(key => { return { label: DeviceTopics[key], value: key } }),
           },
           ons: { //on监听 element事件
             change(value, ...args) {
               const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
-              data.deviceType && changeHandle(data, formList);
+              console.log(Vue, this)
+              if (data.deviceType) changeHandle(data, formList);
+              else data.childType = undefined;
             }
           },
         },
@@ -212,54 +226,54 @@ export default {
           options: {
             clearable: true,
             options: [],
+            multiple: true,
+            ["collapse-tags"]: true
           },
           visible: data => {
             return true;
           },
         },
-        {
-          label: "控制操作:",
-          key: "controlOp",
-          type: "select",
-          default: null,
-          options: {
-            clearable: true,
-            options: [{
-              label: "在线",
-              value: "1"
-            }, {
-              label: "离线",
-              value: "0"
-            }]
-          },
-          visible: data => {
-            // if (find(this.activeDeviceTypes, (type => type.match("路测设备_"))))
-            //   return true;
-          },
-        },
-      ]
+        // {
+        //   label: "控制操作:",
+        //   key: "controlOp",
+        //   type: "select",
+        //   default: null,
+        //   options: {
+        //     clearable: true,
+        //     options: [{
+        //       label: "在线",
+        //       value: "1"
+        //     }, {
+        //       label: "离线",
+        //       value: "0"
+        //     }]
+        //   },
+        // },
+      ],
+      DeviceTopics,
+      componentMap
     }
   },
-  inject: ["activeDeviceTypes"],
-  watch: {
-    activeDeviceTypes: {
-      handler(val) {
-        const activeTopicOptions = []
-        this.activeDeviceTypes.filter(activeDeviceType => {
-          const match = activeDeviceType.match(/路测设备_(\d+)/);
-          if (match) {
-            const deviceType = match[1];
-            DeviceTopics[deviceType] && activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });
+  // inject: ["activeDeviceTypes"],
+  // watch: {
+  //   activeDeviceTypes: {
+  //     handler(val) {
+  //       const activeTopicOptions = []
+  //       this.activeDeviceTypes.filter(activeDeviceType => {
+  //         const match = activeDeviceType.match(/路测设备_(\d+)/);
+  //         if (match) {
+  //           const deviceType = match[1];
+  //           DeviceTopics[deviceType] && activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });
 
-          }
-        });
-        this.formList[0].options.options = activeTopicOptions;
+  //         }
+  //       });
+  //       this.formList[0].options.options = activeTopicOptions;
 
-      },
-      immediate: true,
-      deep: true
-    }
-  },
+  //     },
+  //     immediate: true,
+  //     deep: true
+  //   }
+  // },
   methods: {
     cancelClick() {
       this.activeIcon = null;