智能设备箱联调完成

1 year ago · 891419172a
4 changed files with 126 additions and 63 deletions
--- 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;
  }

--- 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);
+  };
+}
--- 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 : ''
    }
  }
 }
--- 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)
    }
  },
 }