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

12 months ago · fede4e9fb2
4 changed files with 97 additions and 79 deletions
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
+++ b/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 => {
-          this.handleDeviceImmediate(item, true);
-        });
+        await Promise.allSettled((this.tabContentData || []).map(item => 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);
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
+++ b/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]) {
-      if (lngLatMap[lngLatStr].length < 2) delete lngLatMap[lngLatStr];
+    const lngLatArr = 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);
      }
    }
  };
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
+++ b/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;
-    console.log(data, "xxxxx");
-    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 (!isDefault) {
+      marksAddInGraph(data);
+    }

    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();
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue
+++ b/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.addNode(node)
-      });
+      graph.addNodes(baseData.nodes);

      this.drawCongestionAreas(graph, 1404, 80);