From ca9a6616059d9bc43114fad87f605d6d08f9329c Mon Sep 17 00:00:00 2001 From: lau572 <1010031226@qq.com> Date: Thu, 28 Nov 2024 10:47:31 +0800 Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E9=80=9F=E7=BC=A9=E7=95=A5=E5=9B=BE?= =?UTF-8?q?=20=E5=88=86=E8=BE=A8=E7=8E=87=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/RoadAndEvents/utils/map.js | 20 +++++---- .../pages/Home/components/Thumbnail/data.js | 42 +++++++++---------- .../pages/Home/components/Thumbnail/index.vue | 41 +++++++++++------- 3 files changed, 59 insertions(+), 44 deletions(-) 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 c6ce67ff..f0b753e3 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 @@ -601,13 +601,19 @@ export function addInGraphHandle(data) { if (eventItem.id.match(eventRegex)) { let { stakeMark, lang, direction } = extData; stakeMark = upperFirst(stakeMark); //统一格式 大写K - const distance = - (Number( - stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "") - ) - - 54.394) * - window.canvasRatio + - window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺 + // const distance = + // (Number( + // stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "") + // ) - + // 54.394) * + // window.canvasRatio + + // window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺 + + let svgWidth = window.innerWidth - 10 + let roadRatio = svgWidth * 0.83736 / 154.585 + + const distance = svgWidth * 0.06989 + (Number(stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * roadRatio; //K54+394 开始到K208+979计算的比例尺 + const node = { shape: "custom-html", effect: ["data"] }; node.data = getDataConf(data, extData); const id = `${stakeMark}_${direction || ""}`; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/data.js index 8b16be22..d6ec2012 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/data.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/data.js @@ -2,14 +2,14 @@ export const actualLocationList = [ { code: "K54", name: "殷家林枢纽", - intervalDistance: 0.0, + intervalDistance: 0.06989, lng: 116.865231, lat: 36.57973, }, { code: "K59", name: "大学城收费站", - intervalDistance: 4.895, + intervalDistance: 0.09645, lng: 116.814343, lat: 36.581052, }, @@ -17,84 +17,84 @@ export const actualLocationList = [ code: "K72", name: "长清收费站", lng: 116.865231, - intervalDistance: 13.558, + intervalDistance: 0.16986, lat: 36.57973, }, { code: "K79", name: "长清服务区", - intervalDistance: 6.163, + intervalDistance: 0.20330, lng: 116.697041, lat: 36.428953, }, { code: "K83", name: "松林枢纽", - intervalDistance: 4.875, + intervalDistance: 0.22948, lng: 116.496503, lat: 36.292459, }, { code: "K86", name: "孝里收费站", - intervalDistance: 2.614, + intervalDistance: 0.24369, lng: 116.638217, lat: 36.38667, }, { code: "K99", name: "*平阴北收费站", - intervalDistance: 13.251, + intervalDistance: 0.31570, lng: 116.447305, lat: 36.32884, }, { code: "K105", name: "平阴收费站", - intervalDistance: 6.154, + intervalDistance: 0.34870, lng: 116.482042, lat: 36.276899, }, { code: "K114", name: "平阴停车区", - intervalDistance: 8.501, + intervalDistance: 0.39507, lng: 116.459654, lat: 36.204811, }, { code: "K117", name: "孔村枢纽", - intervalDistance: 3.473, + intervalDistance: 0.41359, lng: 116.454379, lat: 36.173621, }, { code: "K126", name: "平阴南收费站", - intervalDistance: 8.345, + intervalDistance: 0.45869, lng: 116.445836, lat: 36.100732, }, { code: "K139", name: "东平服务区", - intervalDistance: 13.594, + intervalDistance: 0.53240, lng: 116.417716, lat: 35.984511, }, { code: "K145", name: "东平收费站", - intervalDistance: 6.116, + intervalDistance: 0.56570, lng: 116.414862, lat: 35.930073, }, { code: "K155", name: "东平湖枢纽", - intervalDistance: 9.719, + intervalDistance: 0.61836, lng: 116.381047, lat: 35.844376, }, @@ -102,41 +102,41 @@ export const actualLocationList = [ code: "K159", name: "沙河停车区", lng: 116.366287, - intervalDistance: 3.504, + intervalDistance: 0.63728, lat: 35.823098, }, { code: "K173", name: "*梁山东收费站", - intervalDistance: 14.794, + intervalDistance: 0.71743, lng: 116.222211, lat: 35.684336, }, { code: "K179", name: "梁山收费站", - intervalDistance: 5.446, + intervalDistance: 0.74700, lng: 116.222163, lat: 35.684368, }, { code: "K186", name: "梁山服务区", - intervalDistance: 6.665, + intervalDistance: 0.78302, lng: 116.177576, lat: 35.638136, }, { code: "K190", name: "嘉祥西收费站", - intervalDistance: 4.434, + intervalDistance: 0.80721, lng: 116.142081, lat: 35.610556, }, { code: "K208", name: "王官屯枢纽", - intervalDistance: 18.484, + intervalDistance: 0.90725, lng: 116.073032, lat: 35.462815, }, @@ -148,7 +148,7 @@ export const canvasList = [ code: "K54+394", line: "G3京台高速", isFoot: true, - distance: 171, + distance: 0.08795, }, { name: "大学城收费站", code: "K59+289", distance: 50.563 }, { name: "长清收费站", code: "K72+847", distance: 140.05 }, 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 0a00787e..22bcca3a 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 @@ -136,7 +136,11 @@ export default { for (let n of nodes) { const aryId = n.id.split('_') - const distance = (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * window.canvasRatio + window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺 + + let svgWidth = window.innerWidth - 10 + let roadRatio = svgWidth * 0.83736 / 154.585 + // const distance = (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * window.canvasRatio + window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺 + const distance = svgWidth * 0.06989 + (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * roadRatio; //K54+394 开始到K208+979计算的比例尺 if (n.data.nowBg) { n.data.nowBg = this.getState(n.data.extNode) ? normalBg : faultBg; } @@ -385,10 +389,12 @@ export default { window.offsetRatio = 0.0755; // 收费站/服务区标签 - this.list.forEach(item => this.allInstance += item.distance); + // this.list.forEach(item => this.allInstance += item.distance); + let svgWidth = window.innerWidth - 50 for (let index in this.list) { const info = this.list[index]; - info.distance = actualLocationList[index].intervalDistance * ratio; + // info.distance = actualLocationList[index].intervalDistance * ratio; + info.distance = svgWidth * actualLocationList[index].intervalDistance; await this.drawTag(info, graph); } //文字覆盖问题修复 @@ -405,11 +411,12 @@ export default { graph.getCellById("K190+495_底部文字").translate(10, 0); }, - async drayLine(text, graph, isFoot = false) { - let x = this.translateX + 141; + async drayLine(info, graph, isFoot = false) { + let text = info.line + let x = info.distance + 10; - const ipxDiff = window.screen.width === 3840?135:0; - x = x+ipxDiff + // const ipxDiff = window.screen.width === 3840?135:0; + // x = x+ipxDiff if (isFoot) { graph.addNode({ ...rect, x: x, y: 30, height: 161 @@ -439,7 +446,7 @@ export default { } }, async drawTag(info, graph) { - this.translateX += info.distance; + this.translateX = info.distance; let type = "3"; if (info.name.indexOf("枢纽") !== -1) { type = "0"; @@ -449,14 +456,16 @@ export default { type = "1"; } if (type === "0") { - await this.drayLine(info.line, graph, info.isFoot); + await this.drayLine(info, graph, info.isFoot); if (info.name === "东平湖枢纽") { const r = -150; - const nodeLine = graph.addNode({ ...rect, shape: 'rect', x: 1205, y: 2, height: 85, zIndex: 1 }); + let ratio = window.innerWidth * 0.626 + const nodeLine = graph.addNode({ ...rect, shape: 'rect', x: ratio, y: 2, height: 85, zIndex: 1 }); nodeLine.rotate((r * Math.PI)); + let test = ratio + 50 graph.addNode({ - label: "S33济徐高速", x: 1275, y: 22, attrs: { + label: "S33济徐高速", x: test, y: 22, attrs: { label: { fontSize: 12, fill: "#37B5D4", @@ -470,17 +479,17 @@ export default { const imageNode = graph.addNode({ shape: 'image', imageUrl: require(`./images/${info.icon || `tag${type}`}.png`), x: this.translateX, y: this.translateY, width: 21, height: 117 }); - imageNode.translate(width * 0.07, 0); + // imageNode.translate(width * 0.07, 0); - const ipxDiff = window.screen.width === 3840?-10:0; + // const ipxDiff = window.screen.width === 3840?-10:0; for (var i = 0; i < info.name.length; i++) { // - const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX+ipxDiff, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } }); - imageLabelNode.translate(width * window.offsetRatio, 50 + y); + const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } }); + imageLabelNode.translate(10, 50 + y); } // 修改文字位置 const buttomLabelNode = graph.addNode({ label: info.code, x: this.translateX, y: 175, attrs: { text: { fill: "#ffffff", fontSize: 10.5 } }, id: info.code + "_底部文字" }); - buttomLabelNode.translate(width * window.offsetRatio, 0); + buttomLabelNode.translate(10, 0); }, loadImage(url) {