一公司人员定位

src/views/map/index.vue

@@ -366,6 +366,7 @@ export default {
       ],
       myEntityCollection: {},
       poinEntity: {},
+      mqttPoint: {},
       gangkouActive: '',
       centerOptionsList: [
         { label: '秦皇岛西', AREA: '2' },
@@ -1333,7 +1334,7 @@ export default {
     },
 
     // 过滤经纬度为空
-    filterNull(arr) {
+    filterNull(arr = []) {
       return arr.filter(item => item.LONGITUDE && item.LATITUDE)
     },
 
@@ -1634,6 +1635,8 @@ export default {
         this.clearAllBottomOptionsItemsEntityCollection()
         this.dragAreaEntity(this.branchPoint)
         this.toCenter(this.parentCenter)
+        this.destroyConnection()
+        this.clearMqttPoint()
       } else if (!this.CORP_INFO_ID) {
         this.gangkouActive = ''
         this.area = ''
@@ -1677,8 +1680,8 @@ export default {
           this.carLocArr = []
         }
         if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
-          this.destroyConnection()
+          this.doUnSubscribe()
-          this.onePerLocArr = []
+          this.clearMqttPoint('1698584148364034050/UwbBQ/')
         }
         this.bottomOptionsList[pindex].list[index].check = false
         if (this.gangkouActive === '00004') {
@@ -1698,7 +1701,7 @@ export default {
         }
 
         if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
-          this.createConnection()
+          !this.connecting ? this.createConnection() : this.doSubscribe()
         } else {
           requestFN(
             pointUrl,
@@ -1943,14 +1946,13 @@ export default {
     // 创建连接
     createConnection() {
       try {
-        this.connecting = true
         const { protocol, host, port, endpoint, ...options } = this.connection
         const connectUrl = `${protocol}://${host}:${port}${endpoint}`
         this.client = mqtt.connect(connectUrl, options)
 
         if (this.client.on) {
           this.client.on('connect', () => {
-            this.connecting = false
+            this.connecting = true
             console.log('Connection succeeded!')
 
             this.doSubscribe()
@@ -1959,53 +1961,64 @@ export default {
           this.client.on('error', error => {
             console.log('Connection failed', error)
           })
-          this.client.on('message', (topic, message) => {
+          this.mqttMessage()
-            console.info(message)
-            // if(this.intOne === 0){
-            // this.receiveNews = this.receiveNews.concat(message)
-            // console.log(`Received message ${message} from topic ${topic}`)
-            const item = JSON.parse(message)
-            // 将地图上剩余的点与最新的定位人员点进行对比   更新地图上已存在的点    新增地图上之前没有的点
-            const index = this.onePerLocArr.findIndex(item1 => {
-              return item1.id.toString() === item.deviceCode.toString()
-            })
-            const x = item.properties[2].value
-            const y = item.properties[3].value
-            const pointColor = this.isPointxyWithinTheArea(this.pointBox, x, y)
-            if (index !== -1) {
-              this.onePerLocArr[index].x = x
-              this.onePerLocArr[index].y = y
-              this.onePerLocArr[index].icon_type = 'img4_0' + pointColor
-              ry_drag.getPosition(this.onePerLocArr[index])
-            } else {
-              // const id = '4_0_' +item.deviceCode
-              const perLoc = {
-                id: item.deviceCode,
-                // name: item.realName,
-                x: x,
-                y: y,
-                icon_type: 'img4_0' + pointColor,
-                // infoname: item.realName,
-                data_id: item.deviceCode,
-                point_type: '标记点peoplePositionOne'
-                // label: item.realName
-              }
-              this.onePerLocArr.push(perLoc)
-              ry_drag.addEntity(perLoc)
-            }
-            //   this.intOne++
-            // } else if(this.intOne < 5){
-            //   this.intOne++
-            // } else {
-            //   this.intOne = 0
-            // }
-          })
         }
       } catch (error) {
         this.connecting = false
         console.log('mqtt.connect error', error)
       }
     },
+    mqttMessage() {
+      this.client.on('message', (topic, message) => {
+        // console.info(message)
+        // if(this.intOne === 0){
+        // this.receiveNews = this.receiveNews.concat(message)
+        // console.log(`Received message ${message} from topic ${topic}`)
+        const item = JSON.parse(message)
+        // 将地图上剩余的点与最新的定位人员点进行对比   更新地图上已存在的点    新增地图上之前没有的点
+        const index = this.onePerLocArr.findIndex(item1 => {
+          return item1.id.toString() === item.deviceCode.toString()
+        })
+        const x = item.properties[2].value
+        const y = item.properties[3].value
+        const pointColor = this.isPointxyWithinTheArea(this.pointBox, x, y)
+        if (index !== -1) {
+          this.onePerLocArr[index].x = x
+          this.onePerLocArr[index].y = y
+          this.onePerLocArr[index].icon_type = 'img4_0' + pointColor
+          ry_drag.getPosition(this.onePerLocArr[index])
+        } else {
+          // const id = '4_0_' +item.deviceCode
+          const perLoc = {
+            id: item.deviceCode,
+            // name: item.realName,
+            x: x,
+            y: y,
+            icon_type: 'img4_0' + pointColor,
+            // infoname: item.realName,
+            data_id: item.deviceCode,
+            point_type: '标记点peoplePositionOne'
+            // label: item.realName
+          }
+          this.onePerLocArr.push(perLoc)
+          ry_drag.addEntity(perLoc)
+          this.mqttPoint[this.subscription.topic.substring(0, this.subscription.topic.lastIndexOf('+')) + item.deviceCode] = item.deviceCode
+        }
+        //   this.intOne++
+        // } else if(this.intOne < 5){
+        //   this.intOne++
+        // } else {
+        //   this.intOne = 0
+        // }
+      })
+    },
+    clearMqttPoint(prefix) {
+      for (const mqttPointKey in this.mqttPoint) {
+        const key = prefix ? prefix + this.mqttPoint[mqttPointKey] : mqttPointKey
+        viewer.entities.removeById(this.mqttPoint[key])
+        this.onePerLocArr = this.onePerLocArr.filter(item => item.data_id !== this.mqttPoint[key])
+      }
+    },
     // 订阅
     doSubscribe() {
       const { topic, qos } = this.subscription
@@ -2018,6 +2031,15 @@ export default {
         console.log('Subscribe to topics res', res)
       })
     },
+    // 取消订阅
+    doUnSubscribe() {
+      const { topic } = this.subscription
+      this.client.unsubscribe(topic, error => {
+        if (error) {
+          console.log('Subscribe to topics error', error)
+        }
+      })
+    },
 
     handleOnReConnect() {
       this.retryTimes += 1
@@ -2132,6 +2154,7 @@ export default {
               const index = ninePerLoc.findIndex(item1 => {
                 return item1.id.toString() === item.cardId.toString()
               })
+              this.isPointWithinTheArea(this.pointBox, )
               if (index !== -1) {
                 ninePerLoc[index].x = item.longitude
                 ninePerLoc[index].y = item.latitude