From 8512e2daf738b69c263f78e32123a46598179786 Mon Sep 17 00:00:00 2001 From: lau572 <1010031226@qq.com> Date: Tue, 24 Dec 2024 10:17:37 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=BC=A9=E7=95=A5=E5=9B=BE?= =?UTF-8?q?=E5=9C=B0=E5=B8=82=E4=BA=A4=E7=95=8C=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Home/components/Thumbnail/data.js | 62 ++++++++++++------- .../pages/Home/components/Thumbnail/index.vue | 38 +++++++++++- 2 files changed, 77 insertions(+), 23 deletions(-) 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 ff79c474..a1c13703 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 @@ -158,60 +158,78 @@ export const actualLocationList = [ export const canvasList = [ { name: "殷家林枢纽", - code: "K54", + code: "K54\n+394", line: "G3京台高速", // isFoot: true, distance: 0.06989, }, - { name: "大学城收费站", code: "K59", distance: 50.563 }, - { name: "长清收费站", code: "K72", distance: 140.05 }, - { name: "长清服务区", code: "K79", distance: 63.66 }, + { name: "大学城收费站", code: "K59\n+289", distance: 50.563 }, + { name: "长清收费站", code: "K72\n+847", distance: 140.05 }, + { name: "长清服务区", code: "K79\n+010", distance: 63.66 }, { name: "松竹枢纽", - code: "K83", + code: "K83\n+885", line: "S0101济南绕城高速二环西环段", distance: 50.358, }, - { name: "孝里收费站", code: "K86", distance: 27 }, - { name: "平阴北收费站", code: "K99", distance: 136.88 }, - { name: "平阴收费站", code: "K105", distance: 63.57 }, - { name: "平阴停车区", code: "K114", distance: 87.815 }, + { name: "孝里收费站", code: "K86\n+499", distance: 27 }, + { name: "平阴北收费站", code: "K99\n+750", distance: 136.88 }, + { name: "平阴收费站", code: "K105\n+904", distance: 63.57 }, + { name: "平阴停车区", code: "K114\n+405", distance: 87.815 }, { name: "孔村枢纽", - code: "K117", + code: "K117\n+878", line: "G22青兰高速", distance: 35.876, }, - { name: "平阴南收费站", code: "K126", distance: 86.2 }, + { name: "平阴南收费站", code: "K126\n+223", distance: 86.2 }, { name: "魏雪枢纽", - code: "K133", + code: "K133\n+588", line: "泰东高速", distance: 35.876, }, - { name: "东平服务区", code: "K139", distance: 140.42 }, - { name: "东平收费站", code: "K145", distance: 63 }, + { name: "东平服务区", code: "K139\n+817", distance: 140.42 }, + { name: "东平收费站", code: "K145\n+933", distance: 63 }, { name: "东平湖枢纽", - code: "K155", + code: "K155\n+652", line: "S30董梁高速", distance: 70, }, - { name: "沙河停车区", code: "K159", distance: 70 }, - { name: "梁山东收费站", code: "K173", distance: 70 }, - { name: "梁山收费站", code: "K179", distance: 70 }, + { name: "沙河停车区", code: "K159\n+156", distance: 70 }, + { name: "梁山东收费站", code: "K173\n+950", distance: 70 }, + { name: "梁山收费站", code: "K179\n+396", distance: 70 }, { name: "信楼枢纽", - code: "K182", + code: "K182\n+987", line: "郓鄄高速", distance: 35.876, }, - { name: "梁山服务区", code: "K186", distance: 70 }, - { name: "嘉祥西收费站", code: "K190", distance: 70 }, + { name: "梁山服务区", code: "K186\n+061", distance: 70 }, + { name: "嘉祥西收费站", code: "K190\n+495", distance: 70 }, { name: "王官屯枢纽", - code: "K208", + code: "K208\n+979", line: "G1511日兰高速", distance: 120, }, ]; +export const boundaryLineList = [ + { + name: "济南 泰安", + code: "K132\n+469", + distance: 0.49282, + }, + { + name: "泰安 济宁", + code: "K160\n+708", + distance: 0.64576, + }, + { + name: "济宁 菏泽", + code: "K200\n+752", + distance: 0.86296, + }, + +]; 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 dd38de05..4c4e52a5 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 @@ -7,7 +7,7 @@ import { onceObserver } from "@screen/utils/resizeObserver"; import Vue from "vue"; import { Graph, Shape } from '@antv/x6' import { debounce } from "lodash"; -import { actualLocationList, canvasList } from "./data.js"; +import { actualLocationList, canvasList,boundaryLineList } from "./data.js"; const faultBg = require(`@screen/images/mapBg/fault.svg`); const normalBg = require(`@screen/images/mapBg/active.svg`); @@ -54,12 +54,25 @@ const rect = { } } } +const boundaryLineStyle = { + shape: "rect", + width: 0.1, + attrs: { + "body": { + stroke: "rgba(255,255,255,0.5)", + strokeWidth: 2, + strokeDasharray: '4, 7', + + } + } +} export default { name: "Thumbnail", data() { return { list: [], //计算真实距离与画布距离的比例 *节点真实距离作为canvasItem.distance的值 + boundaryLineList: [], //计算真实距离与画布距离的比例 *节点真实距离作为canvasItem.distance的值 translateX: 0, translateY: 50, allInstance: 0, @@ -168,6 +181,7 @@ export default { }, async mapInit() { this.list = _.cloneDeep(canvasList) + this.boundaryLineList = _.cloneDeep(boundaryLineList) this.translateX = 0; this.translateY = 40; this.allInstance = 0; @@ -397,6 +411,11 @@ export default { info.distance = svgWidth * actualLocationList[index].intervalDistance; await this.drawTag(info, graph); } + for (let index in this.boundaryLineList) { + const info = this.boundaryLineList[index]; + info.distance = svgWidth * info.distance; + await this.drawBoundaryLine(info, graph); + } //文字覆盖问题修复 graph.getCellById("K79+010_底部文字").translate(-10, 0) graph.getCellById("K83+885_底部文字").translate(-10, 0); @@ -410,6 +429,23 @@ export default { graph.getCellById("K155+652_底部文字").translate(-10, 0); graph.getCellById("K190+495_底部文字").translate(10, 0); + }, + async drawBoundaryLine(info, graph, isFoot = false) { + let text = info.name + let x = info.distance + 10; + graph.addNode({ ...boundaryLineStyle, x: x, y: 30, height: 135, zIndex: 1 }); + const textNode = { + label: text, + attrs: { + label: { + fontSize: 30, + fill: "rgba(255,255,255,0.5)", + fontWeight: 600 + } + } + } + graph.addNode({ ...textNode, x: x, y: 98 ,zIndex:1}) + }, async drayLine(info, graph, isFoot = false) { let text = info.line