图片

src/views/system/visualized/index.vue

@@ -252,7 +252,7 @@
               <div class="wdDataShow">
                 <div class="left">
                   <img
-                    src="../../../assets/images/bigScreen/tempImg.png"
+                    src="../../../assets/images/bigScreen/wendutj.png"
                     alt=""
                     style="width: 100%; height: 100%"
                   />
@@ -517,12 +517,14 @@
 <script>
 import vueSeamlessScroll from "vue-seamless-scroll";
 import * as echarts from "echarts";
+import mqtt from 'mqtt'
 export default {
   components: {
     vueSeamlessScroll,
   },
   data() {
     return {
+      client: {},
       //预警数据
       yjData: [
         {
@@ -602,6 +604,84 @@ export default {
     },
   },
   methods: {
+    connect() {
+      let options = {
+        username: "admin",
+        password: "public",
+        cleanSession : true,
+        keepAlive:60,
+        clientId: 'mqttjs_'+ Math.random().toString(16).substr(2, 8),
+        connectTimeout: 4000
+      }
+      this.client = mqtt.connect('ws://192.168.50.169:1883/mqtt',options);
+      this.client.on("connect", (e)=>{
+        console.log("成功连接服务器2222222:",e);
+        //订阅三个名叫'top/#', 'three/#'和'#'的主题
+        this.client.subscribe(['topic/X1XXXQ2206090069/DPUT/upload'], { qos: 1 }, (err)=> {
+          if (!err) {
+            console.log("订阅成功");
+            //向主题叫“pubtop”发布一则内容为'hello,this is a nice day!'的消息
+            this.publish("pubtop", 'hello,this is a nice day!')
+          } else {
+            console.log('消息订阅失败！')
+          }
+        });
+      });
+      //重新连接
+      this.reconnect()
+      //是否已经断开连接
+      this.mqttError()
+      //监听获取信息
+      this.getMessage()
+    },
+//发布消息@topic主题  @message发布内容
+    publish(topic,message) {
+      if (!this.client.connected) {
+        console.log('客户端未连接')
+        return
+      }
+      this.client.publish(topic,message,{qos: 1},(err) => {
+        if(!err) {
+          console.log('主题为'+topic+ "发布成功")
+        }
+      })
+    },
+//监听接收消息
+    getMessage() {
+      this.client.on("message", (topic, message) => {
+        if(message) {
+          console.log('收到来着',topic,'的信息',message.toString())
+          const res = JSON.parse(message.toString())
+          this.runData=res.data
+          console.log(res, 'res',this.runData,'runData')
+      
+        }
+      });
+    },
+//监听服务器是否连接失败
+    mqttError() {
+      this.client.on('error',(error) => {
+        console.log('连接失败：',error)
+        this.client.end()
+      })
+    },
+    unsubscribe() {
+      this.client.unsubscribe(this.mtopic, (error)=> {
+        console.log('主题为'+ this.mtopic+'取消订阅成功',error)
+      })
+    },
+//断开连接
+    unconnect() {
+      this.client.end()
+      this.client = null
+      console.log('服务器已断开连接！')
+    },
+//监听服务器重新连接
+    reconnect() {
+      this.client.on('reconnect', (error) => {
+          console.log('正在重连:', error)
+      });
+    },
     tableRowClassName({ row, rowIndex }) {
       if ((rowIndex + 1) % 2 === 0) {
         return "jsrow";
@@ -1225,7 +1305,7 @@ export default {
           },
           splitLine: {
             lineStyle: {
-              color: "#40524f",
+              color: "#011F13",
             },
           },
         },
@@ -1241,7 +1321,7 @@ export default {
           },
           splitLine: {
             lineStyle: {
-              color: "#40524f",
+              color: "#011F13",
             },
           },
         },
@@ -1356,6 +1436,7 @@ export default {
     },
   },
   created() {
+    this.connect()
     // let _this = this;
     // setInterval(function () {
     //   //用setInterval做动画感觉有问题
@@ -1369,6 +1450,9 @@ export default {
       // this.drawSdtj();
     });
   },
+  destroyed(){
+    this.unconnect()
+  },
   mounted() {
     // this.$nextTick(() => {
     //   this.drawWsdbh();
@@ -1592,9 +1676,11 @@ export default {
                 flex-direction: row;
                 flex: 1;
                 .normal {
+                  font-size:12px;
                   margin-right: 5px;
                   width: 100px;
                   height: 20px;
+                  line-height: 22px;
                   background: url("../../../assets/images/bigScreen/1.png")
                     no-repeat;
                   background-size: 100%;
@@ -1607,10 +1693,12 @@ export default {
                 justify-content: center;
 
                 .hitch {
+                  font-size:12px;
                   margin-right: 5px;
                   text-align: center;
                   width: 100px;
                   height: 20px;
+                  line-height:22px;
                   background: url("../../../assets/images/bigScreen/2.png")
                     no-repeat;
                   background-size: 100%;
@@ -1765,7 +1853,7 @@ export default {
   overflow: hidden;
 }
 #yjxxScroll {
-  height: 150px;
+  height: 140px;
   overflow: hidden;
 }
 </style>