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

src/components/EWebSocket/index.js

@@ -0,0 +1,5 @@
+import EWebSocket　from './src/basic/index';
+
+export default {
+  EWebSocket
+}

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

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

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 = []
+      this.list = [];
-      const newArr = getTypeParam(this.typeKeys)
+      const newArr = getTypeParam(this.typeKeys);
       if (newArr) {
-        newArr.forEach(v => {
+        newArr.forEach((v) => {
-          this.list.push(Object.assign({}, 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; /*高宽分别对应横竖滚动条的尺寸*/

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) {

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}");

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;

src/views/profile/DeviceDetailsView/EWebSocket.vue

@@ -0,0 +1,16 @@
+<script>
+  export default {
+    name: 'EDevicesStatusWS',
+    props: {
+      wsServiceUrl: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>

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
-      <el-button plain size="mini" :disabled="tSelectLabelList.length <= 0" @click="handleChildStatus('false')">分闸</el-button>
+        plain
-      <el-button plain size="mini" @click="handleAllStatus('true')" >一键合闸</el-button>
+        size="mini"
-      <el-button plain size="mini" @click="handleAllStatus('false')">一键分闸</el-button>
+        :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
+            <div style="width: 60px; display: flex; justify-content: center">
-              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: []
+      iotSignalType: [],
-      // wsDeviceInfo: null?
+      // 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.tSelectList.push(v.deviceId);
-            this.tSelectLabelList.push(v.deviceName)
+            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.tSelectLabelList.push(e.deviceName);
-        this.tSelectList.push(e.deviceId)
+        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;
+        }
       }
     }
   }