fix 修复地图单独点击时出现数据不一致问题 和 缩略图首次点击渲染不一致问题

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue

@@ -48,6 +48,8 @@ import PerceiveEvent from "./../Dialogs/PerceiveEvent/index.vue";
 import SmartDevice from "./../Dialogs/SmartDevice/index.vue";
 import Intermodulation from "./../Dialogs/Intermodulation/index.vue";
 import FatigueWakesUp from "./../Dialogs/FatigueWakesUp/index.vue";
+import { addInGraphHandle } from "./utils/map"
+import { lngLatMap } from "./utils/buttonEvent";
 
 export default {
   name: 'RoadAndEvents',
@@ -137,11 +139,15 @@ export default {
   },
   watch: {
     isGisCompleted: {
-      handler(bool) {
+      async handler(bool) {
         if (!bool) return;
-        this.tabContentData.forEach(item => {
+        await Promise.allSettled((this.tabContentData || []).map(item => this.handleDeviceImmediate(item, true)))
-          this.handleDeviceImmediate(item, true);
+        // for (let item of this.tabContentData || []) {
-        });
+        //   await this.handleDeviceImmediate(item, true);
+        // };
+        Object.keys(lngLatMap).forEach(key => {
+          addInGraphHandle(lngLatMap[key]);
+        })
       }
     }
   },
@@ -185,7 +191,7 @@ export default {
       this.active = item.title;
       this.tabContentData = item.children;
     },
-    handleDeviceImmediate(item, isDefault) {
+    async handleDeviceImmediate(item, isDefault) {
       const key = getHandleDeviceType(item) || `${this.active}/${item.title}`;
 
       const status = item.status;
@@ -196,7 +202,7 @@ export default {
 
       if (!eventMap[`${key}${status ? "_close" : ""}`]) return this.$emit("onClickItem", item);
 
-      eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item, this.filterData, isDefault);
+      await eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item, this.filterData, isDefault);
     },
     handleDevice: debounce(function (item) {
       this.handleDeviceImmediate(item);

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js

@@ -6,7 +6,7 @@ import {
 import { delay } from "@screen/utils/common";
 import { Message } from "element-ui";
 import { EventTopics } from "@screen/utils/enum.js";
-import { debounce } from "lodash";
+import { debounce, cloneDeep } from "lodash";
 import Vue from "vue";
 
 import { markerClusterIns, getContent } from "./map";
@@ -155,7 +155,7 @@ export const eventMap = {
       removeData
     );
     addDataPreHandle(removeData);
-    markerClusterIns.addData(removeData);
+    markerClusterIns.addData(removeData, isDefault);
 
     cacheRemoveFunc[`地图路测设备/${item.title}`] = () => {
       removeDataPreHandle(removeData);
@@ -208,7 +208,7 @@ export const eventMap = {
       )
     );
     addDataPreHandle(removeData);
-    markerClusterIns.addData(removeData);
+    markerClusterIns.addData(removeData, isDefault);
 
     cacheRemoveFunc[`地图事件专题/${item.title}`] = () => {
       removeDataPreHandle(removeData);
@@ -255,7 +255,7 @@ export const eventMap = {
       resolveDataOptions.call(this, item, options, "PerceiveEvent", isDefault)
     );
     addDataPreHandle(removeData);
-    markerClusterIns.addData(removeData);
+    markerClusterIns.addData(removeData, isDefault);
 
     loadingMessage?.close();
 
@@ -295,14 +295,18 @@ function addDataPreHandle(markers) {
 }
 
 function removeDataPreHandle(markers) {
+  // 完善校验逻辑 避免删除额外节点
   const cb = (lngLatStr, markerData) => {
-    if (lngLatMap[lngLatStr]) {
+    const lngLatArr = lngLatMap[lngLatStr];
-      if (lngLatMap[lngLatStr].length < 2) delete lngLatMap[lngLatStr];
+    if (lngLatArr) {
+      if (lngLatArr.length === 0) delete lngLatMap[lngLatStr];
+      else if (lngLatArr.length === 1 && lngLatArr[0] === markerData)
+        delete lngLatMap[lngLatStr];
       else {
-        const findIndex = lngLatMap[lngLatStr].findIndex(
+        const findIndex = lngLatArr.findIndex(
           (removeData) => removeData === markerData
         );
-        lngLatMap[lngLatStr].splice(findIndex, 1);
+        if (findIndex !== -1) lngLatArr.splice(findIndex, 1);
       }
     }
   };

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

@@ -43,68 +43,11 @@ export class MarkerCluster {
     return (this.map = Vue.prototype.mapIns);
   }
 
-  async addData(data) {
+  async addData(data, isDefault) {
     this.infoWindow?.close?.();
-    const graphInstance = window.graphInstance;
+    if (!isDefault) {
-    console.log(data, "xxxxx");
+      marksAddInGraph(data);
-    data?.forEach((markerData, index) => {
-      const lnglat = markerData.lnglat;
-      if (lnglat) {
-        const getLatAndLng = () => {
-          if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] };
-          else return lnglat;
-        };
-        const { lat, lng } = getLatAndLng();
-        const lngLatStr = `${lng}/${lat}`;
-        const data = lngLatMap[lngLatStr];
-        const nowBg = getState(data) ? normalBg : faultBg;
-        const extData = data[0].extData;
-        const { item: eventItem } = data[0].config;
-        if (eventItem.id.match("./事件专题")) {
-          let { stakeMark, lang } = extData;
-          const distance =
-            (Number(
-              stakeMark
-                .replace(/\.\d+/, "")
-                .replace("+", ".")
-                .replace(/[Kk]/, "")
-            ) -
-              54.394) *
-              window.canvasRatio +
-            window.canvasWidth * 0.0755; //K54+394 开始到K208+979计算的比例尺
-
-          const node = {};
-          if (data.length === 1) {
-            node.shape = "singleNode-html";
-            node.data = {
-              nowBg,
-              src: `${getIcon(data[0])}`,
-              extData,
-            };
-          } else {
-            node.shape = "multiNode-html";
-            node.data = {
-              nowBg,
-              // width: `${36 + `${data.length}`.length * 15}px`,
-              length: data.length,
-              extData,
-            };
     }
-          if (graphInstance.getCellById(stakeMark)) {
-            graphInstance.removeNode(stakeMark);
-          }
-          graphInstance.addNode({
-            x: distance,
-            y: 60,
-            width: 20,
-            height: 20,
-            ...node,
-            zIndex: 1,
-            id: stakeMark,
-          });
-        }
-      }
-    });
 
     if (!data) return;
     if (!Array.isArray(data)) data = [data];
@@ -124,7 +67,7 @@ export class MarkerCluster {
       "font-size:15px; background:#641f14; color:#a86358;",
       data
     );
-
+    console.log();
     this.markerCluster.addData(data);
     console.log(
       "%c [ this.markerCluster ]-234-「map.js」",
@@ -398,4 +341,71 @@ function getStateSingle({ config, extData }) {
     : extData.deviceState == 1;
 }
 
+export function marksAddInGraph(data) {
+  for (let markerData of data || []) {
+    const lnglat = markerData.lnglat;
+    if (lnglat) {
+      const getLatAndLng = () => {
+        if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] };
+        else return lnglat;
+      };
+      const { lat, lng } = getLatAndLng();
+      const lngLatStr = `${lng}/${lat}`;
+      const data = lngLatMap[lngLatStr];
+      addInGraphHandle(data);
+    }
+  }
+}
+
+export function addInGraphHandle(data) {
+  const graphInstance = window.graphInstance;
+  const nowBg = getState(data) ? normalBg : faultBg;
+  const extData = data[0].extData;
+  const { item: eventItem } = data[0].config;
+  if (eventItem.id.match("./事件专题")) {
+    let { stakeMark, lang } = extData;
+    const distance =
+      (Number(
+        stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")
+      ) -
+        54.394) *
+        window.canvasRatio +
+      window.canvasWidth * 0.0755; //K54+394 开始到K208+979计算的比例尺
+
+    const node = {};
+    if (data.length === 1) {
+      node.shape = "singleNode-html";
+      node.data = {
+        nowBg,
+        src: `${getIcon(data[0])}`,
+        extData,
+      };
+    } else {
+      node.shape = "multiNode-html";
+      node.data = {
+        nowBg,
+        // width: `${36 + `${data.length}`.length * 15}px`,
+        length: data.length,
+        extData,
+      };
+    }
+    const existNode = graphInstance.getCellById(stakeMark);
+    if (existNode) {
+      graphInstance.removeCell(existNode.id);
+    }
+    console.log(lang, "lang");
+    // setTimeout(() => {
+    graphInstance.addNode({
+      x: distance,
+      y: 60,
+      width: 20,
+      height: 20,
+      ...node,
+      zIndex: 1,
+      id: stakeMark,
+    });
+    // }, 0);
+  }
+}
+
 export const markerClusterIns = new MarkerCluster();

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue

@@ -241,9 +241,7 @@ export default {
         },
       })
       window.graphInstance = graph;
-      baseData.nodes.forEach(node => {
+      graph.addNodes(baseData.nodes);
-        graph.addNode(node)
-      });
 
       this.drawCongestionAreas(graph, 1404, 80);