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 3ad07135..8aeb6151 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 @@ -2,6 +2,7 @@ import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.j // import { Message } from "element-ui"; import Vue from "vue"; import { lngLatMap } from "./buttonEvent"; +import { upperFirst } from "lodash"; /** * @typedef {Object} Point * @property {number} weight - The weight of the item. @@ -252,26 +253,24 @@ export class MarkerCluster { const findIndex = this.data.findIndex( (removeData) => removeData === item ); - const { stakeMark } = item.extData; + let { stakeMark } = item.extData; + stakeMark = upperFirst(stakeMark); //统一格式 大写K const existNode = graphInstance.getCellById(stakeMark); const lnglat = item.lnglat; if (lnglat) { const { lat, lng } = getLatAndLng(lnglat); const lngLatStr = `${lng}/${lat}`; const lngLatArr = lngLatMap[lngLatStr]; //已是移除后的数据集 - console.log(lngLatArr, lngLatArr?.length, "length"); if (existNode) { - window.graphInstance.removeNode(existNode.id); if (lngLatArr) { - if (lngLatArr.length === 0) console.log(); - // window.graphInstance.removeNode(stakeMark); + if (lngLatArr.length === 0) + window.graphInstance.removeNode(existNode.id); else { - //移除并重新添加 - // window.graphInstance.removeNode(stakeMark); - console.log("重新ADD", lngLatArr); - // addInGraphHandle(lngLatArr); + //更新节点 + const updateNode = graphInstance.getCellById(stakeMark); + updateNode.updateData(getDataConf(lngLatArr, item.extData)); } - } //else window.graphInstance.removeNode(stakeMark); + } else window.graphInstance.removeNode(stakeMark); } } if (findIndex > -1) this.data.splice(findIndex, 1); @@ -373,11 +372,11 @@ export function marksAddInGraph(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; + stakeMark = upperFirst(stakeMark); //统一格式 大写K const distance = (Number( stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "") @@ -386,42 +385,50 @@ export function addInGraphHandle(data) { window.canvasRatio + window.canvasWidth * window.offsetRatio; //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 node = { shape: "custom-html", effect: ["data"] }; + node.data = getDataConf(data, extData); const existNode = graphInstance.getCellById(stakeMark); if (existNode) { - graphInstance.removeCell(existNode.id); + existNode.updateData(node.data); + } else { + // setTimeout(() => { + graphInstance.addNode({ + x: distance, + y: 60, + width: 20, + height: 20, + ...node, + zIndex: 1, + id: stakeMark, + }); + // }, 0); } console.log(lang, "lang"); - // setTimeout(() => { - graphInstance.addNode({ - x: distance, - y: 60, - width: 20, - height: 20, - ...node, - zIndex: 1, - id: stakeMark, - }); - // }, 0); } } +function getDataConf(data, extData) { + let dataConf; + const nowBg = getState(data) ? normalBg : faultBg; + if (data.length === 1) { + dataConf = { + shape: "singleNode-html", + nowBg, + src: `${getIcon(data[0])}`, + extData, + }; + } else { + dataConf = { + shape: "multiNode-html", + nowBg, + // width: `${36 + `${data.length}`.length * 15}px`, + length: data.length, + extData, + }; + } + return dataConf; +} + export function getLatAndLng(lnglat) { if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] }; else return lnglat; 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 7b4a4367..978a89a2 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 @@ -11,13 +11,13 @@ import { actualLocationList, canvasList } from "./data.js"; const mouseenterDebounceFunc = debounce(({ node }) => { - if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) { + if (["custom-html"].indexOf(node.shape) >= 0) { node.setZIndex(100); console.log(node); } }, 0); const mouseleaveDebounceFunc = debounce(({ node }) => { - if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) { + if (["custom-html"].indexOf(node.shape) >= 0) { node.setZIndex(1); } }, 0); @@ -25,7 +25,7 @@ const mouseleaveDebounceFunc = debounce(({ node }) => { const clickDebounceFunc = debounce(({ node }) => { const mapIns = Vue.prototype.mapIns; - if (["singleNode-html", "multiNode-html"].indexOf(node.shape) >= 0) { + if (["custom-html"].indexOf(node.shape) >= 0) { const extData = node.getData()?.extData; if (extData) { mapIns.setZoomAndCenter(18, [extData.longitude, extData.latitude]); @@ -188,16 +188,18 @@ export default { graph.on('node:click', clickDebounceFunc); Shape.HTML.register({ - shape: 'singleNode-html', + shape: 'custom-html', width: 160, height: 80, html(node) { const data = node.getData(); + const { shape, nowBg, src, length } = data; const { height, width } = node.prop().size; const div = document.createElement('div') - div.innerHTML = ` + if (shape === "singleNode-html") { + div.innerHTML = `
`; - return div - }, - }) - Shape.HTML.register({ - shape: 'multiNode-html', - width: 160, - height: 80, - html(node) { - const data = node.getData(); - const { height, width } = node.prop().size; - const div = document.createElement('div') - div.innerHTML = ` + } else if (shape === "multiNode-html") { + div.innerHTML = `
- ${data.length} + ${length}
`; + } return div }, }) + window.graphInstance = graph; graph.addNodes(baseData.nodes);