fix：修改websocket根据id取消事件监听

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;
     }
   }
 }

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,8 +1230,7 @@ export default {
      * @description: 处理websocket消息
      * @return {*}
      */
-    handleMessage() {
+    handleMessage(itemMessage) {
-      this.$ws.on("message", (itemMessage) => {
       if (itemMessage.type === "carPosition") {
         if (this.carPointList.includes(itemMessage.data.entityId)) {
           // 获取当前位置和目标位置
@@ -1236,10 +1239,8 @@ export default {
               const currentLocation = item.getGeometry().getCoordinates();
               const targetLocation = itemMessage.data.location;
               // 计算两点之间的差值
-                const dx =
+              const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
-                  (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
+              const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
-                const dy =
-                  (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
               // 设置计数器
               let count = 0;
               // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
@@ -1278,7 +1279,6 @@ export default {
           this.drawCarMapPoint(itemMessage.data);
         }
       }
-      });
     },
 
     /**
@@ -1581,7 +1581,6 @@ export default {
       filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
         brightness(80%) saturate(550%);
     }
-
   }
 }
 

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() {
+    handleMessage(itemMessage) {
-      this.$ws.on("message", (itemMessage) => {
+        if (
-        if (itemMessage.type === "carPosition") {
+          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);
   },
 };
 </script>

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);
   },
 };