From fede4e9fb2a53c980a8c334b5b5875adc20f4bb5 Mon Sep 17 00:00:00 2001 From: qingzhengli <1204552371@qq.com> Date: Fri, 1 Mar 2024 18:58:32 +0800 Subject: [PATCH] =?UTF-8?q?fix=20=20=E4=BF=AE=E5=A4=8D=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E5=8D=95=E7=8B=AC=E7=82=B9=E5=87=BB=E6=97=B6=E5=87=BA=E7=8E=B0?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=B8=8D=E4=B8=80=E8=87=B4=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20=E5=92=8C=20=E7=BC=A9=E7=95=A5=E5=9B=BE=E9=A6=96=E6=AC=A1?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=B8=B2=E6=9F=93=E4=B8=8D=E4=B8=80=E8=87=B4?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Home/components/RoadAndEvents/index.vue | 18 ++- .../RoadAndEvents/utils/buttonEvent.js | 20 +-- .../components/RoadAndEvents/utils/map.js | 134 ++++++++++-------- .../pages/Home/components/Thumbnail/index.vue | 4 +- 4 files changed, 97 insertions(+), 79 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue index 11c84fbf..ff30e909 100644 --- 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); diff --git 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 index 8ac6233d..723925f8 100644 --- 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); } } }; diff --git 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 index e61b2ce0..4feedb0e 100644 --- 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(); diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue index 30a726fc..ef1f2f34 100644 --- 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);