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

2024-12-13 10:47:12 +08:00
parent 0c8f9804d7
commit 4cdef3c778
4 changed files with 88 additions and 66 deletions
@@ -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%);
    }
-
  }
 }

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