From 5ca3e60ec337869778a6123c48e1a927f38fd20c Mon Sep 17 00:00:00 2001 From: zhangyue Date: Mon, 27 Nov 2023 18:02:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E5=85=AC=E5=8F=B8=E4=BA=BA=E5=91=98?= =?UTF-8?q?=E5=AE=9A=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/map/index.vue | 117 ++++++++++++++++++++++++---------------- 1 file changed, 70 insertions(+), 47 deletions(-) diff --git a/src/views/map/index.vue b/src/views/map/index.vue index 371d346..6093cf0 100644 --- a/src/views/map/index.vue +++ b/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.onePerLocArr = [] + this.doUnSubscribe() + 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) => { - 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 - // } - }) + this.mqttMessage() } } 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