zc

src/views/home.vue

@@ -20,6 +20,7 @@
   </div>
 </template>
 <script>
+  import mqtt from 'mqtt'
   import { login } from "@/api/login";
   import { loginYiLi,dashboardsResearchUsage } from "@/api/yiLi";
   import {
@@ -62,6 +63,9 @@
     },
     data () {
       return {
+        //预案MQTT
+        planOpic:'lab/risk/plan/change',
+        planClient:{},
         roomList:[],
         alarmType:false,
         alarmData:null,
@@ -75,9 +79,10 @@
 
     },
     mounted(){
-      // this.laboratoryBigViewSelectTriggerInfo();
+      this.offPlanMQTT('on');
+      this.laboratoryBigViewSelectTriggerInfo();
       //开启预案定时查询
-      // this.alarmTimerFunction();
+      this.alarmTimerFunction();
     },
     methods:{
       login() {
@@ -221,12 +226,57 @@
           self.laboratoryBigViewSelectTriggerInfo();
         }
       },
+      //预案-MQTT连接
+      offPlanMQTT(type){
+        let self = this;
+        if(self.planClient.unsubscribe){
+          self.planClient.unsubscribe(self.planOpic, error => {
+            if (error) {
+              // console.log('mqtt关闭连接错误:', error)
+            }
+          })
+          self.planClient.end();
+          this.$set(this,'planClient',{});
+        }
+        //判断传入参数如果存在 发起一次新的连接
+        if(type){
+          this.planMQTT();
+        }
+      },
+      //预案-MQTT订阅
+      planMQTT(){
+        let self = this;
+        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
+          username: localStorage.getItem('mqttUser'),
+          password:localStorage.getItem('mqttPassword')
+        });
+        this.planClient.on("connect", e =>{
+          this.planClient.subscribe(self.planOpic, (err) => {
+            if (!err) {
+              console.log("预案-订阅成功:" + self.planOpic);
+            }else{
+              // console.log("预案-连接错误:" + err);
+            }
+          });
+        });
+        this.planClient.on("message", (topic, message) => {
+          if (message){
+            console.log('MQTTmessage',message);
+            //获取预案数据
+            this.laboratoryBigViewSelectTriggerInfo();
+          }
+        });
+      },
     },
     beforeDestroy() {
       clearInterval(this.alarmTimer);
+      //清除MQTT
+      this.offPlanMQTT();
     },
     destroyed() {
       clearInterval(this.alarmTimer);
+      //清除MQTT
+      this.offPlanMQTT();
     }
   }
 </script>

src/views/login.vue

@@ -139,9 +139,6 @@
             localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironment))
           }
           this.$set(this, 'showPage', true)
-          this.laboratoryBigViewSelectTriggerInfo();
-          //开启预案定时查询
-          this.alarmTimerFunction();
         })
       },
       getCode() {