提交：设备管理网关类型设备详情添加设备状态ws

2022-09-28 11:20:11 +08:00 · 2022-09-28 11:20:11 +08:00 · f6602d37cd
parent be686202e1
commit f6602d37cd
10 changed files with 359 additions and 85 deletions
--- a/src/components/EWebSocket/index.js
+++ b/src/components/EWebSocket/index.js
@ -0,0 +1,5 @@
+import EWebSocket　from './src/basic/index';
+
+export default {
+  EWebSocket
+}
--- a/src/components/EWebSocket/src/basic/index.js
+++ b/src/components/EWebSocket/src/basic/index.js
@ -0,0 +1,8 @@
+
+import EWebSocket from "./webSocket"
+
+EWebSocket.install = function install(Vue) {
+  Vue.component(EWebSocket.name, EWebSocket);
+};
+
+export default EWebSocket
--- a/src/components/EWebSocket/src/basic/webSocket.js
+++ b/src/components/EWebSocket/src/basic/webSocket.js
@ -0,0 +1,94 @@
+
+export default {
+  name: 'EWebSocket',
+  props: {
+    wsServiceUrl: {
+      type: String,
+      default: ''
+    },
+    closeSleepTime: {
+      type: Number,
+      default: 10000
+    }
+  },
+  data() {
+    return {
+      stompClient: null,
+      socket_flag: false,
+      timeout_flag: null
+    }
+  },
+  watch: {
+    wsServiceUrl() {
+      if (this.stompClient) {
+        this.closeSocket();
+      }
+      this.connection();
+    }
+  },
+  methods: {
+    /**
+     * 创建 ws 对象
+     * @returns
+     */
+    connection() {
+      if (this.stompClient) {
+        return;
+      }
+      if (!this.wsServiceUrl) {
+        return;
+      }
+      this.stompClient = new WebSocket(`${this.wsServiceUrl}`);
+      this.stompClient.onopen = this.socket_open;
+      this.stompClient.onmessage = this.socket_message;
+      this.stompClient.onclose = this.socket_close;
+    },
+    socket_open(evt) {
+      console.log("ws-open:", evt);
+      this.$emit('open', evt)
+    },
+    /**
+     * ws message
+     * @param {*} evt
+     */
+    socket_message(evt) {
+      console.log("wsljcg:=", evt);
+      const data = JSON.parse(evt.data);
+      this.$emit('message_http', evt);
+      this.$emit('message', data)
+    },
+    /**
+     *  ws close
+     * @param {*} e
+     */
+    socket_close(e) {
+      this.stompClient = null;
+      if (this.socket_flag) {
+        this.socket_flag = false;
+        let _this = this;
+        _this.timeout_flag = setTimeout(function () {
+          _this.socket_flag = true;
+          _this.connection();
+        }, Number(this.closeSleepTime));
+      }
+    },
+    /**
+     * ws 前端 销毁
+     */
+    closeSocket() {
+      if (this.stompClient) {
+        console.log('ws-close!!!')
+        this.stompClient.close();
+      }
+      this.socket_flag = false;
+      this.stompClient = null;
+      clearTimeout(this.timeout_flag);
+    },
+  },
+  render() {
+    return (<template></template>)
+  },
+  destroyed() {
+    this.closeSocket();
+  },
+}
--- a/src/components/EWebSocket/src/index
+++ b/src/components/EWebSocket/src/index
--- a/src/components/ParamWrap/deviceParam.vue
+++ b/src/components/ParamWrap/deviceParam.vue
@ -10,11 +10,22 @@
      <el-form-item
        v-for="doct in list"
        :key="doct.paramKey"
-        :label="doct.paramName +　':'"
+        :label="doct.paramName + ':'"
        :prop="doct.paramKey"
-        :rules="[{ required: false, message: doct.paramName + '不能为空', trigger: 'blur' }]"
+        :rules="[
+          {
+            required: false,
+            message: doct.paramName + '不能为空',
+            trigger: 'blur',
+          },
+        ]"
      >
-        <el-input :disabled="doct.canModify === false" v-model="doct.paramVal" size="mini" style="width: calc(100% - 85px); margin-right: 10px;"></el-input>
+        <el-input
+          :disabled="doct.canModify === false"
+          v-model="doct.paramVal"
+          size="mini"
+          style="width: calc(100% - 85px); margin-right: 10px"
+        ></el-input>
        <el-switch
          size="mini"
          v-model="doct.canModify"
@ -27,7 +38,6 @@
          class="switch-wrap"
        >
        </el-switch>
-
      </el-form-item>
    </el-form>
    <span v-show="list && list.length <= 0">暂无参数信息</span>
@ -41,34 +51,34 @@ export default {
  data() {
    return {
      list: [],
-      ruleForm: {}
+      ruleForm: {},
    };
  },
  methods: {
    getParams() {
-      this.list = []
-      const newArr = getTypeParam(this.typeKeys)
+      this.list = [];
+      const newArr = getTypeParam(this.typeKeys);
      if (newArr) {
-        newArr.forEach(v => {
-          this.list.push(Object.assign({}, v))
+        newArr.forEach((v) => {
+          this.list.push(Object.assign({}, v));
        });
      }
      this.$forceUpdate();
    },
    setList(data) {
-      this.list = data
+      this.list = data;
    },
    getResult() {
      return this.list;
-    }
+    },
  },
  watch: {
    typeKeys(val) {
      if (val) {
        this.getParams();
      }
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss">
@ -85,7 +95,6 @@ export default {
  .el-form-item {
    margin: 10px 0 !important;
  }
-}
  /* switch按钮样式 */
  .switch-wrap .el-switch__label {
    position: absolute;
@ -118,7 +127,7 @@ export default {
    width: 60px !important;
    margin: 0;
  }
-
+}
 .params-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
--- a/src/views/iot/project/profileV2/ESceneManage/ESceneTriggers/src/EConditionTemp.vue
+++ b/src/views/iot/project/profileV2/ESceneManage/ESceneTriggers/src/EConditionTemp.vue
@ -27,11 +27,11 @@ export default {
  watch: {
    sourceId() {
      if (this.sourceId !== null && this.sourceId !== undefined) {
-        this.getcomdlist(this.sourceId);
+        this.getProductCmdList(this.sourceId);
      } else {
        this.propertyList = [];
      };
-      this.conditionList = [];
+      // this.conditionList = [];
      this.$emit('change', []);
    }
  },
@ -41,13 +41,18 @@ export default {
    }
  },
  methods: {
+    uniqueFunc(arr, uniId) {
+      const res = new Map();
+      return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
+    },
    // 查询产品参数列表
-    getcomdlist(id) {
+    getProductCmdList(id) {
      this.propertyList = [];
      getDeviceFunList({
        deviceId: id
      }).then(res => {
-        this.propertyList = res.data;
+        this.propertyList = this.uniqueFunc([...res.data], 'funKey');
+        // this.propertyList= res.data;
      });
    },
    eventDel(data) {
--- a/src/views/iot/project/profileV2/ESceneManage/ESceneTriggers/src/index.js
+++ b/src/views/iot/project/profileV2/ESceneManage/ESceneTriggers/src/index.js
@ -33,7 +33,7 @@ export default {
  },
  mounted() {
    if (this.$refs.eCondition && this.dataItem.sceneTriggerDevices[0]['deviceId']) {
-      this.$refs.eCondition.getcomdlist(this.dataItem.sceneTriggerDevices[0]['deviceId']);
+      this.$refs.eCondition.getProductCmdList(this.dataItem.sceneTriggerDevices[0]['deviceId']);
    };
    this.isAntiShake = Number(this.dataItem.intervalVal) >= 1 ? true : false;
    this.exeStartTime = this.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}");
--- a/src/views/iot/project/profileV2/ESceneManage/ESceneTriggers/src/style.scss
+++ b/src/views/iot/project/profileV2/ESceneManage/ESceneTriggers/src/style.scss
@ -93,7 +93,7 @@ margin-left: 15px;
  display: block;
 }

-.e-scene-trigger-anti-switch.el-switch .el-switch__core,
+.e-scene-trigger .e-trigger-title .e-scene-trigger-anti-switch.el-switch .el-switch__core,
 .el-switch .el-switch__label {
   width: 100px !important;
   margin: 0;
--- a/src/views/profile/DeviceDetailsView/EWebSocket.vue
+++ b/src/views/profile/DeviceDetailsView/EWebSocket.vue
@ -0,0 +1,16 @@
+<script>
+  export default {
+    name: 'EDevicesStatusWS',
+    props: {
+      wsServiceUrl: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>
--- a/src/views/profile/DeviceDetailsView/deviceSelectNav.vue
+++ b/src/views/profile/DeviceDetailsView/deviceSelectNav.vue
@ -1,14 +1,30 @@
 <template>
  <div class="device-select-nav">
    <div class="layout-select-wrap" v-if="childDeviceList.length > 0">
-      <el-button plain size="mini" :disabled="tSelectLabelList.length <= 0" @click="handleChildStatus('true')">合闸</el-button>
-      <el-button plain size="mini" :disabled="tSelectLabelList.length <= 0" @click="handleChildStatus('false')">分闸</el-button>
-      <el-button plain size="mini" @click="handleAllStatus('true')" >一键合闸</el-button>
-      <el-button plain size="mini" @click="handleAllStatus('false')">一键分闸</el-button>
+      <el-button
+        plain
+        size="mini"
+        :disabled="tSelectLabelList.length <= 0"
+        @click="handleChildStatus('true')"
+        >合闸</el-button
+      >
+      <el-button
+        plain
+        size="mini"
+        :disabled="tSelectLabelList.length <= 0"
+        @click="handleChildStatus('false')"
+        >分闸</el-button
+      >
+      <el-button plain size="mini" @click="handleAllStatus('true')"
+        >一键合闸</el-button
+      >
+      <el-button plain size="mini" @click="handleAllStatus('false')"
+        >一键分闸</el-button
+      >
      <span class="title-span">已选择设备：</span>
      <span v-if="tSelectLabelList.length <= 0">当前未选择设备</span>
      <el-tag
-        style="margin: 5px 5px 5px 0px;"
+        style="margin: 5px 5px 5px 0px"
        v-for="(item, idx) in tSelectLabelList"
        :key="idx"
        closable
@ -16,7 +32,6 @@
      >
        {{ item }}
      </el-tag>
-
    </div>
    <div class="layout-select-wrap" v-else>
      <span class="title-span">当前没有可用于分闸合闸设备~</span>
@ -50,9 +65,7 @@
                style="color: black; font-size: 20px"
              ></i>
            </div> -->
-            <div
-              style="width: 60px; display: flex; justify-content: center"
-            >
+            <div style="width: 60px; display: flex; justify-content: center">
              <!-- <i
                :class="`iconfont ${statusFormat(deviceInfo.stype)}`"
                style="color: black; font-size: 20px"
@ -128,7 +141,15 @@
              padding-top: 5px;
            "
          >
-          <div @click="handleCheckbox(item)" :style="item.deviceId === checkobxDeviceId ? 'right: 159px;': ''" :class="tSelectList.indexOf(item.deviceId) >= 0 ? 'checkbox-i selected-c' : 'checkbox-i'">
+            <div
+              @click="handleCheckbox(item)"
+              :style="item.deviceId === checkobxDeviceId ? 'right: 159px;' : ''"
+              :class="
+                tSelectList.indexOf(item.deviceId) >= 0
+                  ? 'checkbox-i selected-c'
+                  : 'checkbox-i'
+              "
+            >
              <i
                v-show="tSelectList.indexOf(item.deviceId) >= 0"
                class="el-icon-check"
@ -220,17 +241,30 @@
        </div>
      </el-card>
    </div>
+    <e-web-socket
+      :wsServiceUrl="wsStatusService"
+      :closeSleepTime="10000"
+      @open="wsOpen($event)"
+      @message="wsMessage($event)"
+    ></e-web-socket>
  </div>
 </template>

 <script>
 import { listChildrenDevice, setSwitchControl } from "@/api/iot/device";
-import { iotWebSocketBaseUrl, devLiveWebSocketBaseUrl } from "@/config/env";
+import {
+  iotWebSocketBaseUrl,
+  devLiveWebSocketBaseUrl,
+  webSocketProjectGatewayUrl,
+} from "@/config/env";
 import SignalIntensity from "./signalIntensity";
+import EWebSocket from "@/components/EWebSocket/src/basic/index";
+import objectAssign from "object-assign";
 export default {
  name: "DeviceSelectNav",
  components: {
    SignalIntensity,
+    EWebSocket,
  },
  props: {
    deviceInfo: {
@ -256,8 +290,9 @@ export default {
      timingPingWs_flag: null,
      tSelectList: [],
      tSelectLabelList: [],
-      iotSignalType: []
-      // wsDeviceInfo: null?
+      iotSignalType: [],
+      // wsDeviceInfo: null?,
+      wsStatusService: "",
    };
  },
  created() {
@ -272,6 +307,7 @@ export default {
        this.timingPingWs(this.wsDeviceInfo);
        if (this.deviceInfo.deviceId !== this.wsDeviceInfo.deviceId) {
          for (let i = 0; i < this.childDeviceList.length; i++) {
+            childDeviceIds.push(this.childDeviceList[i]["deviceId"]);
            if (
              this.childDeviceList[i]["deviceId"] ===
              this.wsDeviceInfo["deviceId"]
@ -300,14 +336,44 @@ export default {
    },
  },
  methods: {
+    // 开启 设备状态ws
+    handleOpenDevStatusService(str) {
+      console.log("handleOpenDevStatusService", str);
+      this.wsStatusService = `${webSocketProjectGatewayUrl}/${this.getGuid()}/${
+        this.deviceInfo.deviceId
+      },${str}`;
+    },
+    wsMessage(e) {
+      console.log('ws-message--', e)
+      this.handleDeviceInfo(e);
+    },
+    // 处理 socket 数据返回 赋值问题
+    handleDeviceInfo(param) {
+      if (param.deviceId === this.deviceInfo.deviceId) {
+        this.deviceInfo = Object.assign(this.deviceInfo, param);
+      } else {
+        if (this.childDeviceList && this.childDeviceList.length > 0) {
+          this.childDeviceList = this.childDeviceList.map((v) => {
+            if (v["deviceId"] === param["deviceId"]) {
+              return Object.assign(v, param);
+            } else {
+              return v;
+            }
+          });
+        }
+      }
+    },
+    wsOpen(e) {
+      console.log("srrr---", e);
+    },
    handleAllStatus(type) {
      if (this.childDeviceList.length > 0) {
-        this.childDeviceList.forEach(v => {
+        this.childDeviceList.forEach((v) => {
          if (this.tSelectList.indexOf(v.deviceId) < 0) {
-            this.tSelectList.push(v.deviceId)
-            this.tSelectLabelList.push(v.deviceName)
+            this.tSelectList.push(v.deviceId);
+            this.tSelectLabelList.push(v.deviceName);
          }
-        })
+        });
        this.handleChildStatus(type);
      }
    },
@ -325,20 +391,20 @@ export default {
          data: {
            cmd: "set_switch",
            params: {
-              switch: 1
+              switch: 1,
            },
          },
-          deviceId: '',
+          deviceId: "",
          verifyKey: value,
        };

        switch (type) {
-          case 'true':
+          case "true":
            params.data.params.switch = 1;
            params.deviceId = this.tSelectList.toString();
            break;

-          case 'false':
+          case "false":
            params.data.params.switch = 0;
            params.deviceId = this.tSelectList.toString();
            break;
@ -347,30 +413,31 @@ export default {
        setSwitchControl(params).then((res) => {
          this.msgSuccess("修改成功");
        });
-
-
      });
    },
    selectDevClose(e) {
-      console.log(e)
+      console.log(e);
      this.tSelectList.splice(this.tSelectLabelList.indexOf(e), 1);
-      this.tSelectLabelList.splice(this.tSelectLabelList.indexOf(e), 1)
+      this.tSelectLabelList.splice(this.tSelectLabelList.indexOf(e), 1);
    },
    handleCheckbox(e) {
      if (this.tSelectList.indexOf(e.deviceId) >= 0) {
        // delete e
        this.tSelectList.splice(this.tSelectList.indexOf(e.deviceId), 1);
-        this.tSelectLabelList.splice(this.tSelectLabelList.indexOf(e.deviceName), 1)
+        this.tSelectLabelList.splice(
+          this.tSelectLabelList.indexOf(e.deviceName),
+          1
+        );
      } else {
-        this.tSelectLabelList.push(e.deviceName)
-        this.tSelectList.push(e.deviceId)
+        this.tSelectLabelList.push(e.deviceName);
+        this.tSelectList.push(e.deviceId);
      }
    },
    signalType(val) {
      if (val) {
        return "iconfont " + this.statusFormat(val);
      }
-      return "iconfont " + this.statusFormat('0');
+      return "iconfont " + this.statusFormat("0");
      // switch (val) {
      //   case "5G":
      //     return "iconfont " + this.statusFormat(val);
@ -531,9 +598,13 @@ export default {
      listChildrenDevice({
        parentId: this.deviceInfo.deviceId,
        pageNum: 1,
-        pageSize: 999999
+        pageSize: 999999,
      }).then((response) => {
        this.childDeviceList = response.rows;
+        var childDeviceIds = [...response.rows].map((v) => {
+          return v.deviceId;
+        });
+        this.handleOpenDevStatusService(childDeviceIds.toString());
      });
    },
  },
@ -611,6 +682,39 @@ export default {
        align-items: center;
        font-size: 16px;
        justify-content: space-between;
+
+        /* switch按钮样式 */
+        .switch-wrap .el-switch__label {
+          position: absolute;
+          display: none;
+          color: #fff !important;
+        }
+        /*打开时文字位置设置*/
+        .switch-wrap .el-switch__label--right {
+          z-index: 1;
+        }
+        /* 调整打开时文字的显示位子 */
+        .switch-wrap .el-switch__label--right span {
+          margin-left: 10px;
+        }
+        /*关闭时文字位置设置*/
+        .switch-wrap .el-switch__label--left {
+          z-index: 1;
+        }
+        /* 调整关闭时文字的显示位子 */
+        .switch-wrap .el-switch__label--left span {
+          margin-left: 20px;
+        }
+        /*显示文字*/
+        .switch-wrap .el-switch__label.is-active {
+          display: block;
+        }
+        /* 调整按钮的宽度 */
+        .switch-wrap.el-switch .el-switch__core,
+        .el-switch .el-switch__label {
+          width: 60px !important;
+          margin: 0;
+        }
      }
    }
  }
@ -668,6 +772,39 @@ export default {
        align-items: center;
        font-size: 16px;
        justify-content: space-between;
+
+        /* switch按钮样式 */
+        .switch-wrap .el-switch__label {
+          position: absolute;
+          display: none;
+          color: #fff !important;
+        }
+        /*打开时文字位置设置*/
+        .switch-wrap .el-switch__label--right {
+          z-index: 1;
+        }
+        /* 调整打开时文字的显示位子 */
+        .switch-wrap .el-switch__label--right span {
+          margin-left: 10px;
+        }
+        /*关闭时文字位置设置*/
+        .switch-wrap .el-switch__label--left {
+          z-index: 1;
+        }
+        /* 调整关闭时文字的显示位子 */
+        .switch-wrap .el-switch__label--left span {
+          margin-left: 20px;
+        }
+        /*显示文字*/
+        .switch-wrap .el-switch__label.is-active {
+          display: block;
+        }
+        /* 调整按钮的宽度 */
+        .switch-wrap.el-switch .el-switch__core,
+        .el-switch .el-switch__label {
+          width: 60px !important;
+          margin: 0;
+        }
      }
    }
  }