tj

src/components/Layouts/Map.vue

@@ -4,8 +4,15 @@
     import request from'@/utils/request'
     import mapUrl from '@/assets/images/layout_cont.png'
     import mixins  from '@/mixins/mqtt.js'
+    import {Uint8ArrayToString} from'@/utils'
     export default{
         mixins:[mixins],
+        data(){
+            return{
+                map:undefined,
+                layers:undefined
+            }
+        },
         created(){
             this.init()
         },
@@ -13,9 +20,9 @@
             init(){
                 this.$nextTick(()=>{
                     this.initMap()
-                    // this.initMqtt({
-                    //     mqttResponse:this.mqttResponse
-                    // })
+                    this.initMqtt({
+                        mqttResponse:this.mqttResponse
+                    })
                 })         
             },
             initMap(){
@@ -40,6 +47,17 @@
                 /**添加图层 */
                     L.imageOverlay(mapUrl, bounds).addTo(map);
                     map.setMaxBounds(bounds);
+                this.map=map
+                this.initLayers();
+            },
+            getLayers(callback){
+                request({
+                    url:'JobActivitys/vedit/list'
+                }).then((res)=>{
+                    callback(res.data)
+                })
+            },
+            initLayers(){
                 /**添加标记点 */
                 const docWidth = document.documentElement.clientWidth;
                 const markers=L.layerGroup()
@@ -49,7 +67,6 @@
                 let tip="盲板抽堵作业";
                 let iconSize = [27*docWidth/1920, 33*docWidth/1920];
                 function drawMark(option={tip,icon,options,coordinates}){
-                    console.log({option})
                     let myIcon = L.divIcon({
                         className: option.icon,
                         iconSize: iconSize,
@@ -60,7 +77,8 @@
                         console.log({ev,id})
                     })                    
                 }      
-                markers.addTo(map)
+                markers.addTo(this.map)
+                this.layers=markers
                 this.getLayers((res)=>{
                     if(res&&res.length>0){
                         for(let i=0;i<res.length;i++){
@@ -74,16 +92,15 @@
                     }
                 })
             },
-            getLayers(callback){
-                request({
-                    url:'JobActivitys/vedit/list'
-                }).then((res)=>{
-                    callback(res.data)
-                })
-            },
             mqttResponse(message){
-                console.log({message})
-            }
+                let data=message?Uint8ArrayToString(message):''
+                if(this.layers){
+                    this.layers.clearLayers()
+                }
+                this.initLayers()
+                console.log({message,data})
+            },
+            
         }
     }
 </script>

src/components/Layouts/index.vue

@@ -39,12 +39,12 @@ export default {
                 {color:'#F49062',name:"受限空间作业"},
                 {color:'#CC5120',name:"高处作业"},
                 {color:'#165DFF',name:"起重作业"},
-                {color:'#FADC19',name:"预热器清堵作业",number:"3"},
-                {color:'#9FDB1D',name:"篦冷机清大块作业",number:"5"},
+                {color:'#FADC19',name:"预热器清堵作业"},
+                {color:'#9FDB1D',name:"篦冷机清大块作业"},
                 {color:'#00B42A',name:"交叉作业"},
-                {color:'#14C9C9',name:"临时用电作业",number:"1"},
-                {color:'#3491FA',name:"动土作业",number:"1"},
-                {color:'#722ED1',name:"断路作业",number:"2"},
+                {color:'#14C9C9',name:"临时用电作业"},
+                {color:'#3491FA',name:"动土作业"},
+                {color:'#722ED1',name:"断路作业"},
                 {color:'#E744E7',name:"防护设备拆除"},
                 {color:'#F5319D',name:"高温及其他危险作业"},
                 {color:'#86909C',name:"盲板抽堵作业"}

src/config/index.js

@@ -1,7 +1,5 @@
 export default {
     dev:"http://192.168.3.5:8080",
     pro:"http://192.168.3.5:8080",
-    mqttUrl:"ws://192.168.3.5:8080/topic/alljobactivitys"
-    // mqttUrl:"ws://broker.emqx.io:8083/mqtt"
-    
+    mqttUrl:"ws://1.15.92.205:8083/mqtt" 
 }

src/main.js

@@ -1,8 +1,5 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
-import Dialog from '@/components/Dialog'
-console.log(Dialog)
 createApp(App)
-// .use(Dialog)
 .mount('#app')

src/mixins/mqtt.js

@@ -27,25 +27,35 @@ export default {
         const options = {
           clean: true,
           connectTimeout: 4000,
-          clientId: getToken()||1212,
+          clientId: new Date().getTime(),
           username: 'admin',
           password: 'houyaf1!'
         }   
-        console.log(config.mqttUrl, options)
         const client = mqtt.connect(config.mqttUrl, options)
         client.on('connect', function() {
           console.log('Connected')
-          client.subscribe('topic/alljobactivitys/#', function(err) {
+          client.subscribe('topic/alljobactivitys', function(err) {
+            console.log(err)
             if (!err) {
               client.publish('topic/1', 'Hello mqtt')
+            }else{
+              client.publish('topic/1', 'Hello mqtt err')
             }
           })
         })
-  
         client.on('message', function(topic, message) {
           console.log('message')
           if(params.mqttResponse)params.mqttResponse(message)
         })
+        client.on('reconnect', (error) => {
+          console.log('正在重连:', error)
+        })
+        client.on('error', (error) => {
+            console.log('连接失败:', error)
+        })     
+        client.on('offline', function () {
+          console.log('offline')
+        })   
         this.client = client
       }catch(err){
         throw err

src/utils/index.js

@@ -1,3 +1,11 @@
-export function getToken(){
-    return localStorage.getItem("token")
-}
+export function getToken() {
+    return localStorage.getItem('token');
+  }
+  export function Uint8ArrayToString(fileData){
+      var dataString = "";
+      for (var i = 0; i < fileData.length; i++) {
+        dataString += String.fromCharCode(fileData[i]);
+      }
+     
+      return dataString
+  }