From 891419172a1d6e2480cf756056c2705d34753de1 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Wed, 31 Jan 2024 17:44:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E8=83=BD=E8=AE=BE=E5=A4=87=E7=AE=B1?=
 =?UTF-8?q?=E8=81=94=E8=B0=83=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dialog/index.vue               |   6 +-
 .../JiHeExpressway/components/Dialog/utils.js |  23 +++
 .../components/Dialogs/SmartDevice/index.vue  | 143 ++++++++++--------
 .../components/Switcher.vue                   |  17 ++-
 4 files changed, 126 insertions(+), 63 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
index f6d8e21f..64c6bda2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
@@ -30,7 +30,7 @@
 <script>
 import Teleport from '../Teleport.vue';
 import BackgroundClip from "@screen/components/Decorations/BackgroundClip.vue";
-import { moveable } from "./utils"
+import { moveable, stopPropagation } from "./utils"
 
 export default {
   components: {
@@ -63,6 +63,8 @@ export default {
 
           this.destroyMoveable = moveable(container, { target: container.querySelector(".dialog-title") });
 
+          stopPropagation(container.querySelector(".dialog-title").lastChild)
+
           this.$once("hook:beforeDestroy", () => this.destroyMoveable?.());
         })
       }
@@ -159,7 +161,7 @@ export default {
   }
 
   .dialog-content {
-    padding: 9px 21px 21px 21px;
+    padding: 9px 21px 27px 21px;
     max-height: 96vh;
   }
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js
index c5140130..f2ab44e6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js
@@ -41,3 +41,26 @@ export function moveable(container, { target } = {}) {
 
   return () => target.removeEventListener("pointerdown", down);
 }
+
+/**
+ *
+ * @param {HTMLElement} dom
+ */
+export function stopPropagation(dom) {
+
+  function stopCallback(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+
+  dom.addEventListener("pointermove", stopCallback);
+  dom.addEventListener("pointerdown", stopCallback);
+  dom.addEventListener("pointerup", stopCallback);
+
+  return () => {
+    dom.removeEventListener("pointermove", stopCallback);
+    dom.removeEventListener("pointerdown", stopCallback);
+    dom.removeEventListener("pointerup", stopCallback);
+  };
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
index 57623b5f..e2c968c9 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
@@ -3,18 +3,16 @@
     <Video class="video-stream" :pileNum="dialogData.stakeMark" />
 
     <div class="SmartDevice">
-      <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+      <ElTabs v-model="activeName" class="tabs">
         <ElTabPane label="详细设计" name="first">
           <Descriptions :list="list" :data="data" style="gap: 18px" />
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">
-          <Descriptions :list="devicesList" style="gap: 18px">
-            <template #content-electricity>
-              <span>1000mA</span>
-              <Switcher class="switcher" :activeOption="activeOption" />
-            </template>
-            <template #content-voltage>
-              <Switcher class="switcher" :activeOption="activeOption" />
+          <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 class="switcher" :activeOption="activeOption" :value="data.state"
+                @change="(value) => handleSwitcherChange(value, data)" />
             </template>
           </Descriptions>
         </ElTabPane>
@@ -37,6 +35,7 @@ import Switcher from '@screen/pages/service/PublishingChannelManagement/componen
 import { getRoadInfoByStakeMark, getOrganizationName, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 import { dialogDelayVisible } from "./../mixin"
 import request from "@/utils/request";
+import { Message } from 'element-ui';
 
 // 广播发布
 export default {
@@ -99,51 +98,16 @@ export default {
           text: "关"
         }
       },
-      devicesList: [
-        {
-          label: '支路1(220v)   电压',
-          key: "deviceName1",
-          text: "120v"
-        },
-        {
-          label: '电流',
-          key: "electricity",
-          text: "1000mA"
-        },
-        {
-          label: '支路2(220v)   电压',
-          key: "deviceName11",
-          text: "120v"
-        },
-        {
-          label: '电流',
-          key: "electricity",
-          text: "1000mA"
-        },
-        {
-          label: '支路3(220v)   电压',
-          key: "deviceName1",
-          text: "120v"
-        },
-        {
-          label: '电流',
-          key: "electricity",
-          text: "1000mA"
-        },
-        {
-          label: '电压',
-          key: "voltage",
-          text: "1000mA"
-        },
-      ]
+      devicesList: []
     }
   },
   async created() {
+    // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
+
     this.data = { ...this.dialogData, roadName: null }
 
     console.log("%c [ dialogData ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", this.dialogData);
 
-
     getProduct(this.dialogData.productId)
       .then(data => {
         this.dialogData.brand = data.brand;
@@ -157,26 +121,87 @@ export default {
     const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
 
     if (roadInfo) this.data.roadName = roadInfo.roadName;
+
+    // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc=
+    // 获取设备参数
+    request({
+      url: `/business/device/properties/latest/${this.dialogData.iotDeviceId}`,
+      method: "get",
+      params: {}
+    }).then(result => {
+      if (result.code != 200) return;
+      const [deviceInfo] = result.data;
+
+      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('_');
+          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`,
+        text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-',
+        gridColumn: 5
+      })
+      // this.data = result.rows;
+      // this.total = result.total;
+    }).finally(() => {
+      // closeLoading();
+    })
   },
   methods: {
-    handleClickTabs() { },
-    deviceFunEnable() {
+    handleSwitcherChange(value, data) {
+      data.state = value;
+
+      // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc=
       request({
         url: `/business/device/functions/${this.dialogData.iotDeviceId}/${102}`,
-        method: "get",
-        params: {
-          // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc=
-          deviceName: "",
+        method: "POST",
+        data: {
+          deviceName: data.key.match(/^[a-z]+_out|[0-9]+/g).join("_") + "_en",
           // 开关：1=打开，0=关闭
-          value: ""
+          value: value ? 1 : 0
         }
-      }).then(result => {
-        if (result.code != 200) return;
-        this.data = result.rows;
-        this.total = result.total;
-      }).finally(() => {
-        closeLoading();
       })
+        .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 : ''
     }
   }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/Switcher.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/Switcher.vue
index e8a16397..5af19bd6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/Switcher.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/Switcher.vue
@@ -20,8 +20,13 @@ export default {
     activeOption: {
       type: Object,
       default: () => null
-    }
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
   },
+  emit: ['change'],
   data() {
     return {
       active: true
@@ -45,9 +50,17 @@ export default {
       }
     }
   },
+  watch: {
+    value: {
+      handler(value) {
+        this.active = value;
+      },
+      immediate: true
+    }
+  },
   methods: {
     toggle() {
-      this.active = !this.active
+      this.$emit("change", this.active = !this.active)
     }
   },
 }