首页缩略图地市交界线

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,
+  },
+
+];

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