From 4cdef3c778e6f03a5e98a35b394e0d98c4465aea Mon Sep 17 00:00:00 2001 From: SunTao <328867980@qq.com> Date: Fri, 13 Dec 2024 10:47:12 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9websocket?= =?UTF-8?q?=E6=A0=B9=E6=8D=AEid=E5=8F=96=E6=B6=88=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E7=9B=91=E5=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/websocket.js | 20 +++- src/views/big-screen/index.vue | 103 +++++++++--------- .../components/inspection-follow.vue | 22 ++-- .../inspection-vehicles.vue | 9 +- 4 files changed, 88 insertions(+), 66 deletions(-) diff --git a/src/plugins/websocket.js b/src/plugins/websocket.js index 979676f..f3bd6d5 100644 --- a/src/plugins/websocket.js +++ b/src/plugins/websocket.js @@ -10,6 +10,7 @@ class WebSocketService { // this.maxReconnectAttempts = 2; this.reconnectInterval = 3000; this.eventListeners = {}; + this.listeners = {}; } connect(url) { @@ -62,9 +63,25 @@ class WebSocketService { } } - on(event, callback) { + on(event, callback,id) { this.eventListeners[event] = []; this.eventListeners[event].push(callback); + if (!this.listeners[event]) { + this.listeners[event] = {}; + } + this.listeners[event][id] = callback; + } + + removeEventListener(event, id) { + if (this.listeners[event] && this.listeners[event][id]) { + delete this.listeners[event][id]; + } + } + + closeMessageListener() { + if (this.ws) { + this.ws.onmessage = null; + } } emit(event, data) { @@ -76,6 +93,7 @@ class WebSocketService { close() { if (this.ws) { this.ws.close(); + this.ws = null; } } } diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index df9a579..32fbc2b 100644 --- a/src/views/big-screen/index.vue +++ b/src/views/big-screen/index.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-17 11:34:00 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-10 10:41:39 + * @LastEditTime: 2024-12-13 10:44:04 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -498,6 +498,7 @@ export default { carPointList: [], // 小车地图点位features数组 mapPointFeatures: [], + indexListenerId: Symbol("index-listener"), }; }, created() { @@ -507,7 +508,7 @@ export default { this.getRoadList(); this.getDieaseTypeList(); this.getMessageList(); - this.handleMessage(); + // this.handleMessage(); }, mounted() {}, methods: { @@ -1104,6 +1105,7 @@ export default { // 不接收小车位置消息 const data = { type: "carLocation", status: false }; this.$ws.send(data); + this.$ws.removeEventListener("message",this.indexListenerId); this.carPointList = []; this.mapPointFeatures = []; // 地图右上角多选按钮隐藏 @@ -1152,6 +1154,7 @@ export default { // 发送小车位置消息 const data = { type: "carLocation", status: true }; this.$ws.send(data); + this.$ws.on("message", this.handleMessage, this.indexListenerId); // 将地图层级初始化 this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); @@ -1206,6 +1209,7 @@ export default { // 发送小车位置消息 const data = { type: "carLocation", status: true }; this.$ws.send(data); + this.$ws.on("message", this.handleMessage, this.indexListenerId); // 地图右上角多选按钮隐藏 this.showIconList = false; // 图层恢复 @@ -1226,59 +1230,55 @@ export default { * @description: 处理websocket消息 * @return {*} */ - handleMessage() { - this.$ws.on("message", (itemMessage) => { - if (itemMessage.type === "carPosition") { - if (this.carPointList.includes(itemMessage.data.entityId)) { - // 获取当前位置和目标位置 - this.carMapPointSource.getFeatures().forEach((item) => { - if (item.get("data") === itemMessage.data.entityId) { - const currentLocation = item.getGeometry().getCoordinates(); - const targetLocation = itemMessage.data.location; - // 计算两点之间的差值 - const dx = - (targetLocation[0] * 1 - currentLocation[0] * 1) / 100; - const dy = - (targetLocation[1] * 1 - currentLocation[1] * 1) / 100; - // 设置计数器 - let count = 0; - // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成 - const timer = setInterval(() => { - count++; - if (count >= 100) { - clearInterval(timer); - return; - } + handleMessage(itemMessage) { + if (itemMessage.type === "carPosition") { + if (this.carPointList.includes(itemMessage.data.entityId)) { + // 获取当前位置和目标位置 + this.carMapPointSource.getFeatures().forEach((item) => { + if (item.get("data") === itemMessage.data.entityId) { + const currentLocation = item.getGeometry().getCoordinates(); + const targetLocation = itemMessage.data.location; + // 计算两点之间的差值 + const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100; + const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100; + // 设置计数器 + let count = 0; + // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成 + const timer = setInterval(() => { + count++; + if (count >= 100) { + clearInterval(timer); + return; + } - // 计算当前帧的位置 - const x = currentLocation[0] * 1 + dx * count; - const y = currentLocation[1] * 1 + dy * count; + // 计算当前帧的位置 + const x = currentLocation[0] * 1 + dx * count; + const y = currentLocation[1] * 1 + dy * count; - // 更新小车位置 - // const [features] = this.carMapPointSource.getFeatures(); - item.setGeometry(new Point([x, y])); - item.setStyle([ - new Style({ - image: new Icon({ - crossOrigin: "anonymous", - src: logo, - // 图标缩放比例 - scale: 0.5, - // 将角度转换为弧度,并除以180*π - rotation: - (itemMessage.data.direction - 90) * (Math.PI / 180), - }), + // 更新小车位置 + // const [features] = this.carMapPointSource.getFeatures(); + item.setGeometry(new Point([x, y])); + item.setStyle([ + new Style({ + image: new Icon({ + crossOrigin: "anonymous", + src: logo, + // 图标缩放比例 + scale: 0.5, + // 将角度转换为弧度,并除以180*π + rotation: + (itemMessage.data.direction - 90) * (Math.PI / 180), }), - ]); - }, 10); - } - }); - } else { - this.carPointList.push(itemMessage.data.entityId); - this.drawCarMapPoint(itemMessage.data); - } + }), + ]); + }, 10); + } + }); + } else { + this.carPointList.push(itemMessage.data.entityId); + this.drawCarMapPoint(itemMessage.data); } - }); + } }, /** @@ -1581,7 +1581,6 @@ export default { filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg) brightness(80%) saturate(550%); } - } } diff --git a/src/views/big-screen/overview-components/components/inspection-follow.vue b/src/views/big-screen/overview-components/components/inspection-follow.vue index efe6aae..e7768f1 100644 --- a/src/views/big-screen/overview-components/components/inspection-follow.vue +++ b/src/views/big-screen/overview-components/components/inspection-follow.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-11-15 13:14:03 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-10 13:22:17 + * @LastEditTime: 2024-12-13 10:10:41 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue * @Description: 总览大屏-巡检车辆-跟车弹窗 --> @@ -44,19 +44,21 @@ export default { mapPointFeatures: [], // 病害图层数据源 defectLayerSource: null, + listenerId: Symbol('inspection-follow-listener'), // 创建一个Symbol对象 }; }, created() { - this.handleMessage(); + this.$ws.on("message", this.handleMessage,this.listenerId) }, methods: { /** * @description: 处理websocket消息 * @return {*} */ - handleMessage() { - this.$ws.on("message", (itemMessage) => { - if (itemMessage.type === "carPosition") { + handleMessage(itemMessage) { + if ( + itemMessage.type === "carPosition" + ) { if (this.carPointList.includes(itemMessage.data.entityId)) { // 获取当前位置和目标位置 this.carMapPointSource.getFeatures().forEach((item) => { @@ -108,11 +110,13 @@ export default { this.$nextTick(() => { const map = this.$refs.carMap.instance.get("map"); map.getView().setCenter(itemMessage.data.location); - map.getView().setZoom(17) + map.getView().setZoom(17); }); } } - } else if (itemMessage.type === "defect") { + } else if ( + itemMessage.type === "defect" + ) { if (!this.defectLayerSource) { this.drawDefectMapPoint(itemMessage.data); } else { @@ -135,7 +139,6 @@ export default { this.defectLayerSource.addFeature(feature); } } - }); }, /** @@ -218,11 +221,12 @@ export default { }); }, }, - destroyed() { + beforeDestroy() { this.carPointList = []; this.mapPointFeatures = []; this.carMapPointSource = null; this.defectLayerSource = null; + this.$ws.removeEventListener("message",this.listenerId); }, }; diff --git a/src/views/big-screen/overview-components/inspection-vehicles.vue b/src/views/big-screen/overview-components/inspection-vehicles.vue index 41ed50b..9abf9e2 100644 --- a/src/views/big-screen/overview-components/inspection-vehicles.vue +++ b/src/views/big-screen/overview-components/inspection-vehicles.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-11-08 09:40:18 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-10 13:12:24 + * @LastEditTime: 2024-12-13 09:51:07 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue * @Description: 总览大屏-巡检车辆 --> @@ -271,14 +271,14 @@ export default { * @return {*} */ followCancel() { - this.followTitle = ""; - this.showCarVisible = false; - this.dialogItem = {}; // 停止接收病害信息 const carData = { type: "carLocation", status: false }; const defectData = { type: "defect", status: false }; this.$ws.send(carData); this.$ws.send(defectData); + this.followTitle = ""; + this.dialogItem = {}; + this.showCarVisible = false; }, /** @@ -297,6 +297,7 @@ export default { }, }, destroyed() { + this.dialogItem = {}; clearInterval(this.timer); }, };