学校设备管理socket对接

package.json

@@ -8,9 +8,10 @@
     "report": "vue-cli-service build --report"
   },
   "dependencies": {
-    "vue-simple-uploader": "^0.7.6",
+    "md5": "^2.3.0",
     "qrcode": "^1.5.1",
-    "qrcodejs2": "^0.0.2"
+    "qrcodejs2": "^0.0.2",
+    "vue-simple-uploader": "^0.7.6"
   },
   "devDependencies": {
     "@babel/core": "~7.12.16",

public/config.js

@@ -5,6 +5,7 @@ window._config = window.isTest
       baseUrl: "https://mcapitest.xhkjedu.com/",
       baseImageUrl: "https://mcapitest.xhkjedu.com/",
       showImageUrl: "https://mcapitest.xhkjedu.com/",
+      wsUrl: "wss://mcwstest.xhkjedu.com/ws",
       axiosApiTimeout: 60, // 接口超时时间 单位秒
       axiosFileTimeout: 120, // 上传文件超时时间 单位秒
       // 开发者
@@ -19,6 +20,7 @@ window._config = window.isTest
       baseUrl: "https://mcapi.xhkjedu.com/",
       baseImageUrl: "https://mcapi.xhkjedu.com/",
       showImageUrl: "https://mcapi.xhkjedu.com/",
+      wsUrl: "wss://mcws.xhkjedu.com/ws",
       axiosApiTimeout: 20, // 接口超时时间 单位秒
       axiosFileTimeout: 30, // 上传文件超时时间 单位秒
       // 开发者

src/utils/ControlWSMsg.js

@@ -0,0 +1,76 @@
+import md5 from "md5";
+class ControlWSMsg {
+  constructor(ws, fid, tids = []) {
+    // 消息ID
+    this.mid = URL.createObjectURL(new Blob()).substr(-36).replace(/-/g, "");
+    // 精确到秒
+    this.timeunix = Math.floor(Date.now() / 1000);
+    // 发送者ID
+    this.fid = String(fid);
+    // 接收收者数组 空数组则发送给其他所有人
+    this.tids = tids;
+    this.ws = ws;
+  }
+  // 连接后回发(确认)
+  afterConnection(body) {
+    this.code = 1001;
+    // {userid, username, schoolid, usertype(1管理员, 2学生)}
+    this.body = body;
+  }
+  // 获取在线用户列表
+  onlineUsers(body) {
+    this.code = 1002;
+    // {schoolid}
+    this.body = body;
+  }
+  // 发送消息
+  msgContent(body) {
+    this.code = 2001;
+    // {userid, username, msg}
+    this.body = body;
+  }
+  // 限制使用
+  limitedUse() {
+    this.code = 2002;
+  }
+  // 解除限制
+  removeLimit() {
+    this.code = 2003;
+  }
+  // 更新策略
+  updateStrategy() {
+    this.code = 2004;
+  }
+  // 重启设备
+  rebootDevice() {
+    this.code = 2005;
+  }
+  // 恢复出厂
+  restoreFactory() {
+    this.code = 2006;
+  }
+  toJSONString() {
+    let tempObj = {};
+    for (let key in this) {
+      if (key !== "ws") {
+        tempObj[key] = this[key];
+      }
+    }
+    return JSON.stringify(tempObj);
+  }
+  send(cb) {
+    // 计算方式(md5(md5(code_mid_timeunix)))
+    let code_mid_timeunix = `${this.code}_${this.mid}_${this.timeunix}`;
+    this.sign = md5(md5(code_mid_timeunix));
+    let ws = this.ws;
+    if (ws && ws.readyState === 1) {
+      let msg = this.toJSONString();
+      console.log("发送消息", msg);
+      ws.send(msg);
+      cb && cb(true);
+    } else {
+      cb && cb(false);
+    }
+  }
+}
+export default ControlWSMsg;

src/utils/ControlWs.js

@@ -0,0 +1,99 @@
+import Vue from "vue";
+class ControlWs {
+  constructor() {
+    this.wsUrl = window._config.wsUrl;
+    // 心跳计时器
+    this.timer = null;
+    // ws实例对象
+    this.ws = null;
+    // 避免ws重复连接
+    this.lockReconnect = false;
+    // 可以继续连接 false 不能再连接 true 可以请求连接
+    this.needreconnect = true;
+    this.myevent = new Vue();
+  }
+  setWs() {
+    if (this.wsUrl) {
+      this.needreconnect = true;
+      this.createWebSocket(); //连接ws
+    }
+  }
+  closeWs() {
+    if (this.ws) {
+      this.needreconnect = false;
+      this.ws.close();
+      this.myevent.$off("ws_error");
+      this.myevent.$off("ws_open");
+      this.myevent.$off("ws_getmsg");
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    }
+  }
+  createWebSocket() {
+    try {
+      if ("WebSocket" in window) {
+        this.ws = new WebSocket(this.wsUrl);
+      } else {
+        alert(
+          "您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器，请勿使用IE10以下浏览器，360浏览器请使用极速模式，不要使用兼容模式！"
+        );
+      }
+      this.initEventHandle();
+    } catch (e) {
+      this.reconnect();
+    }
+  }
+  initEventHandle() {
+    this.ws.onclose = () => {
+      console.log("ws连接关闭!");
+      if (this.needreconnect) {
+        this.reconnect();
+      }
+    };
+    this.ws.onerror = () => {
+      console.error("ws连接错误!");
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+      if (this.needreconnect === true) {
+        this.myevent.$emit("ws_error");
+        this.reconnect();
+      }
+    };
+    this.ws.onopen = () => {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+      this.timer = setInterval(() => {
+        let blob = new Blob(["ping"], { type: "text/plain" });
+        if (this.ws && this.ws.readyState === 1) {
+          this.ws.send(blob);
+        } else {
+          clearInterval(this.timer);
+        }
+      }, 1000 * 10);
+      console.log("ws连接成功!");
+      this.myevent.$emit("ws_open");
+    };
+    this.ws.onmessage = (event) => {
+      //如果获取到消息，心跳检测重置
+      if (event.data && JSON.parse(event.data)) {
+        console.info("接收到消息", event.data);
+        this.myevent.$emit("ws_getmsg", JSON.parse(event.data));
+      } else {
+        console.error(event.data);
+      }
+    };
+  }
+  reconnect() {
+    if (this.lockReconnect) return;
+    this.lockReconnect = true;
+    setTimeout(() => {
+      //没连接上会一直重连，设置延迟避免请求过多
+      this.createWebSocket();
+      this.lockReconnect = false;
+    }, 2000);
+  }
+}
+export default new ControlWs();

src/views/schoolSection/applicationStrategy/appStrategyTemplate.vue

@@ -60,7 +60,11 @@
       title="授权"
     >
       <div class="strategy_name">{{ empowerInfo.name }}</div>
-      <div class="school_name">{{ schoolInfo.schoolname }}</div>
+      <div class="school_name">
+        <Checkbox v-model="empowerInfo.school">{{
+          schoolInfo.schoolname
+        }}</Checkbox>
+      </div>
       <CheckboxGroup v-model="empowerInfo.classids">
         <Checkbox
           :label="classItem.id"
@@ -102,6 +106,7 @@ export default {
         show: false,
         name: "",
         stappid: null,
+        school: false,
         classids: []
       },
       schoolInfo: {
@@ -263,23 +268,28 @@ export default {
         show: true,
         name: row.name,
         stappid: row.stappid,
+        school: false,
         classids: []
       };
       this.getClassList();
     },
     // 保存授权
     saveEmpowerInfo() {
-      if (this.empowerInfo.classids.length === 0) {
+      if (this.empowerInfo.classids.length === 0 && !this.empowerInfo.school) {
         this.$Message.error("请选择班级");
         return;
       }
-      stApp_add_empower({
+      let form = {
         // rtype: this.powerParams.rtype,
         // objectid: this.powerParams.objectid,
         // schoolid: this.powerParams.objectid,
         stappid: this.empowerInfo.stappid,
         classids: this.empowerInfo.classids
-      }).then((data) => {
+      };
+      if (this.empowerInfo.school) {
+        form.schoolid = this.powerParams.objectid;
+      }
+      stApp_add_empower(form).then((data) => {
         if (data.code === 0) {
           this.empowerInfo.show = false;
           this.$Message.success(data.msg);

src/views/schoolSection/deviceManage/breakRuleDevice.vue

@@ -8,6 +8,7 @@
           placeholder="关注状态"
           @on-change="searchList()"
         >
+          <Option :value="-1">全部</Option>
           <Option :value="0">未处理</Option>
           <Option :value="1">已处理</Option>
         </Select>
@@ -25,13 +26,13 @@
             其他操作<Icon type="ios-arrow-down" class="arrow_down" />
           </div>
           <DropdownMenu slot="list">
-            <DropdownItem name="1">恢复出厂设置</DropdownItem>
+            <DropdownItem name="1">恢复出厂</DropdownItem>
             <DropdownItem name="2">发送消息</DropdownItem>
             <DropdownItem name="3">解除限制</DropdownItem>
             <DropdownItem name="4">限制使用</DropdownItem>
             <DropdownItem name="5">更新策略</DropdownItem>
             <DropdownItem name="6">重启设备</DropdownItem>
-            <DropdownItem name="7">合理处理</DropdownItem>
+            <DropdownItem name="7">合规处理</DropdownItem>
           </DropdownMenu>
         </Dropdown>
       </div>
@@ -75,7 +76,7 @@ export default {
       searchForm: {
         name: "",
         // 是否处理：0否 1是
-        handled: 0,
+        handled: -1,
         page: 1,
         size: 10,
         list: [],

src/views/schoolSection/deviceManage/deviceManage.vue

@@ -63,9 +63,11 @@
               其他操作<Icon type="ios-arrow-down" class="arrow_down" />
             </div>
             <DropdownMenu slot="list">
-              <DropdownItem name="1">恢复出厂设置</DropdownItem>
+              <DropdownItem name="1">恢复出厂</DropdownItem>
               <DropdownItem name="2">发送消息</DropdownItem>
-              <DropdownItem name="3">整班发送消息</DropdownItem>
+              <DropdownItem name="3" v-if="searchForm.classid"
+                >整班发送消息</DropdownItem
+              >
               <DropdownItem name="4">解除限制</DropdownItem>
               <DropdownItem name="5">限制使用</DropdownItem>
               <DropdownItem name="6">更新策略</DropdownItem>
@@ -112,6 +114,8 @@
 </template>
 
 <script>
+import controlWs from "@/utils/ControlWs";
+import ControlWSMsg from "@/utils/ControlWSMsg";
 import { exportToExcel } from "@/utils/exportToExcel";
 import { class_list } from "@/api/school";
 import {
@@ -122,6 +126,14 @@ import {
 export default {
   data() {
     return {
+      userInfo: {},
+      // ws连接后回发信息
+      wsEnterInfo: {
+        // 消息ID
+        mid: null,
+        // 是否进入
+        isEnter: false
+      },
       searchForm: {
         classid: null,
         atype: 0,
@@ -202,14 +214,62 @@ export default {
     };
   },
   created() {
+    this.userInfo = JSON.parse(
+      localStorage.getItem("xh_control_userInfo")
+    ).content;
     this.getClassList();
+    this.initMonitorWS();
   },
   computed: {
     powerParams() {
       return this.$store.getters.powerParams;
     }
   },
+  beforeDestroy() {
+    controlWs.myevent.$off("ws_error");
+    controlWs.myevent.$off("ws_open");
+    controlWs.myevent.$off("ws_getmsg");
+    controlWs.closeWs();
+  },
   methods: {
+    initMonitorWS() {
+      controlWs.setWs();
+      this.getWSEventInfo();
+    },
+    getWSEventInfo() {
+      controlWs.myevent.$on("ws_error", () => {
+        this.$Message.error("网络异常，请检查网络");
+      });
+      controlWs.myevent.$on("ws_open", () => {
+        this.sendAfterConnection();
+      });
+      controlWs.myevent.$on("ws_getmsg", (data) => {
+        if (data.code === 666) {
+          if (this.wsEnterInfo.mid === data.mid) {
+            this.wsEnterInfo.isEnter = true;
+          }
+        }
+        if (!this.wsEnterInfo.isEnter) {
+          return;
+        }
+      });
+    },
+    // 连接后回发(需确认)
+    sendAfterConnection() {
+      this.wsEnterInfo.isEnter = false;
+      let controlWSMsg = new ControlWSMsg(controlWs.ws, this.userInfo.adminid);
+      controlWSMsg.afterConnection({
+        userid: String(this.userInfo.adminid),
+        username: this.userInfo.aname,
+        schoolid: this.powerParams.objectid,
+        usertype: 1
+      });
+      controlWSMsg.send((isSend) => {
+        if (isSend) {
+          this.wsEnterInfo.mid = controlWSMsg.mid;
+        }
+      });
+    },
     classChange(classid) {
       this.searchForm.classid = classid;
       this.searchList();
@@ -356,12 +416,24 @@ export default {
     },
     // 其他操作
     dropdownSelected(name) {
+      if (!this.wsEnterInfo.isEnter) {
+        this.$Message.error("推送服务不可用");
+        return;
+      }
+      let snList = this.tableSelection.map((row) => row.sn).filter(Boolean);
       if (name === "1") {
         // 恢复出厂设置
         if (this.tableSelection.length === 0) {
           this.$Message.error("请选择列表");
           return;
         }
+        let controlWSMsg = new ControlWSMsg(
+          controlWs.ws,
+          this.userInfo.adminid,
+          snList
+        );
+        controlWSMsg.restoreFactory();
+        controlWSMsg.send();
       } else if (name === "2") {
         // 发送消息
         if (this.tableSelection.length === 0) {