diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 68da7ed2..642a0668 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/x6": "^2.18.1",
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@vue/composition-api": "^1.7.1",
@@ -152,4 +153,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}
\ No newline at end of file
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 84999dcd..92ae1831 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
@@ -3,99 +3,220 @@
 </template>
 
 <script>
-import { getScaleByActualData } from "./utils"
 import { onceObserver } from "@screen/utils/resizeObserver";
 import Vue from "vue";
+import { Graph } from '@antv/x6'
+
+import { actualLocationList, canvasList } from "./data.js";
 
 function setFont(size, bold = "normal", family = "微软雅黑") {
   return `${bold} ${size}px ${family}`;
 }
+let width, height;
+const actualDis = actualLocationList.reduce(
+  (count, item) => count + item.intervalDistance,
+  0
+);
+const rect = {
+  shape: "rect",
+  width: 0.1,
+  attrs: {
+    "body": {
+      stroke: "#37B5D4",
+      strokeWidth: 2,
+      strokeDasharray: '4, 7',
+
+    }
+  }
+}
 
 export default {
   name: "Thumbnail",
   data() {
     return {
-      list: getScaleByActualData(),
+      list: canvasList, //计算真实距离与画布距离的比例  *节点真实距离作为canvasItem.distance的值
+      translateX: 0,
+      translateY: 50,
+      allInstance: 0
     };
   },
 
   mounted() {
-    onceObserver.call(this, this.$refs.ThumbnailRef, () => {
-      this.$refs.ThumbnailRef.innerHTML = null;
-      this.mapInit();
-    })
+    this.mapInit();
+    // onceObserver.call(this, this.$refs.ThumbnailRef, () => {
+    //   this.$refs.ThumbnailRef.innerHTML = null;
+    //   this.translateX = 0,
+    //     this.translateY = 50,
+    //     this.allInstance = 0
+    //   this.mapInit();
+    // });
   },
   methods: {
     async mapInit() {
       const content = this.$refs.ThumbnailRef;
+      width = content.clientWidth;
+      height = content.clientHeight;
+      const baseData = {
+        nodes: [
+          {
+            type: "text",
+            label: "G2001济南绕城高速",
+            x: 66,
+            y: height / 2 - 21,
+            attrs: {
+              text: {
+                fontSize: 12,
+                fill: "#ffffff",
+              }
+            }
+          },
+          {
+            type: "text",
+            label: "G3021德上高速",
+            x: width - 50,
+            y: height / 2 - 21,
+            attrs: {
+              text: {
+                fontSize: 12,
+                fill: "#ffffff",
+              }
+            }
+          },
+          {
+            type: "text",
+            label: "项目起点",
+            x: 270,
+            y: height / 2 - 50,
+            attrs: {
+              text: {
+                fontSize: 12,
+                fontFamily: "Arial Black",
+                fontWeight: 900,
+                fontStyle: "italic",
+                fill: "#ddc85a",
+              }
+            }
+          },
+          {
+            type: "text",
+            label: "K55+378.7",
+            x: 270,
+            y: height / 2 - 33,
+            attrs: {
+              text: {
+                fontSize: 12,
+                fontFamily: "Arial Black",
+                fontWeight: 900,
+                fontStyle: "italic",
+                fill: "#ddc85a",
+              }
+            }
+          },
+          {
+            type: "text",
+            label: "项目终点",
+            x: width - 220,
+            y: height / 2 - 50,
+            attrs: {
+              text: {
+                fontSize: 12,
+                fontFamily: "Arial Black",
+                fontWeight: 900,
+                fontStyle: "italic",
+                fill: "#ddc85a",
+              }
+            }
+          },
+          {
+            type: "text",
+            label: "K208+153.4",
+            x: width - 220,
+            y: height / 2 - 33,
+            attrs: {
+              text: {
+                fontSize: 12,
+                fontFamily: "Arial Black",
+                fontWeight: 900,
+                fontStyle: "italic",
+                fill: "#ddc85a",
+              }
+            }
+          },
+        ],
+      };
+      const graph = new Graph({
+        container: content,
+        width,
+        height,
+        background: {
+          image: require("./images/bg.png"),
+          size: "100% 100%"
+        },
+        interacting: function (cellView) {
+          if (true) return { nodeMovable: false }
+          // return true;
+        },
+      });
+      Vue.prototype.graphInstance = graph;
+      baseData.nodes.forEach(node => {
+        graph.addNode(node)
+      });
 
-      const width = content.clientWidth;
-      const height = content.clientHeight;
-      const zoom = 3;
-      const canvas = document.createElement("canvas");
-      canvas.style.width = width + "px";
-      canvas.style.height = height + "px";
-      const w = width * zoom;
-      const h = height * zoom;
-      canvas.width = w;
-      canvas.height = h;
-      content.appendChild(canvas);
-
-      const ctx = canvas.getContext("2d");
-      Vue.prototype.canvasCtx = ctx;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      var imgbg = await this.loadImage(require("./images/bg.png"));
-      ctx.drawImage(imgbg, 0, 0, w, h);
-      ctx.font = setFont(12 * zoom);
-      ctx.fillStyle = "#ffffff";
-      ctx.fillText("G2001济南绕城高速", 66 * zoom, h / 2 - 21 * zoom);
-      ctx.fillText("G3021德上高速", w - 50 * zoom, h / 2 - 21 * zoom);
-
-      ctx.font = setFont(12 * zoom, "italic 900", "Arial Black");
-
-      ctx.fillStyle = "#ddc85a";
-      ctx.fillText("项目起点", 270 * zoom, h / 2 - 50 * zoom);
-      ctx.fillText("K55+378.7", 270 * zoom, h / 2 - 33 * zoom);
-      ctx.fillText("项目终点", w - 210 * zoom, h / 2 - 50 * zoom);
-      ctx.fillText("K208+153.4", w - 210 * zoom, h / 2 - 33 * zoom);
-
-      ctx.font = setFont(12 * zoom);
-
-      // 修改 位置
-      ctx.translate(-25 * zoom, 208 * zoom);
-
-      this.drawCongestionAreas(ctx, 1404, 80, zoom)
-      // this.drawCongestionAreas(ctx, 1365, 150, zoom)
-
-      for (let i of this.list) {
-        await this.drawTag(i, zoom, ctx);
+      this.drawCongestionAreas(graph, 1404, 80);
+
+      this.list.forEach(item => this.allInstance += item.distance);
+      for (let index in this.list) {
+        const info = this.list[index];
+        const ratio = ((width - width * 0.08 * 2) / actualDis); //减去俩侧空白区域 才是画布要计算的比例
+        info.distance = actualLocationList[index].intervalDistance * ratio;
+        await this.drawTag(info, graph);
       }
+      //文字覆盖问题修复
+      graph.getCellById("K79+010").translate(-10, 0)
+      graph.getCellById("K83+885").translate(-10, 0);
+      graph.getCellById("K86+499").translate(10, 0);
+
+      graph.getCellById("K114+405").translate(-10, 0);
+      graph.getCellById("K117+878").translate(10, 0);
+
+      graph.getCellById("K159+156").translate(8, 0);
+
+      graph.getCellById("K155+652").translate(-10, 0);
+      graph.getCellById("K190+495").translate(10, 0);
+
     },
-    async drayLine(zoom, text, ctx, isFoot = false) {
-      ctx.setLineDash([4 * zoom, 4 * zoom]);
-      ctx.strokeStyle = "#37B5D4";
-      ctx.lineWidth = 6;
+    async drayLine(text, graph, isFoot = false) {
+      const x = this.translateX + 141;
       if (isFoot) {
-        ctx.translate(0, 12 * zoom);
-        ctx.strokeRect(0, 0, 1, 161 * zoom);
-        ctx.translate(0, -12 * zoom);
+        graph.addNode({
+          ...rect, x: x, y: 30, height: 161
+        });
       } else {
-        ctx.strokeRect(0, 0, 1, 135 * zoom);
+        graph.addNode({ ...rect, x: x, y: 30, height: 135, zIndex: 1 });
       }
 
-      ctx.fillStyle = "#37B5D4";
-      ctx.translate(0, -16 * zoom);
+      const textNode = {
+        label: text,
+        attrs: {
+          label: {
+            fontSize: 12,
+            fill: "#37B5D4",
+            fontWeight: 600
+          }
+        }
+      }
 
       if (isFoot) {
-        ctx.fillText(text, 0, 54);
-        ctx.translate(0, 226 * zoom);
-        ctx.fillText(text, 0, -90);
+        graph.addNode({ ...textNode, x: x, y: 22 })
+        // graph.fillText(text, 0, 54);
+        // graph.translate(0, 226);
+        graph.addNode({ ...textNode, x: x, y: 195 });
       } else {
-        ctx.fillText(text, 0, 18);
+        graph.addNode({ ...textNode, x: x, y: 22 });
       }
     },
-    async drawTag(info, zoom, ctx) {
+    async drawTag(info, graph) {
+      this.translateX += info.distance;
       let type = "3";
       if (info.name.indexOf("枢纽") !== -1) {
         type = "0";
@@ -105,40 +226,38 @@ export default {
         type = "1";
       }
       if (type === "0") {
-        ctx.translate(info.distance * zoom, -188 * zoom);
-        ctx.font = setFont(12 * zoom, "600");
-        await this.drayLine(zoom, info.line, ctx, info.isFoot);
-        if (info.isFoot) {
-          ctx.translate(-10 * zoom, -180 * zoom);
-        } else {
-          ctx.translate(-10 * zoom, 35 * zoom);
-        }
+        await this.drayLine(info.line, graph, info.isFoot);
         if (info.name === "东平湖枢纽") {
-          const r = -110;
-          ctx.rotate((r * Math.PI) / 180);
-          ctx.strokeRect(-15 * zoom, 0, 1, 90 * zoom);
-          ctx.rotate((r * Math.PI) / -180);
-          ctx.fillText("S33济徐高速", 124 * zoom, -27 * zoom);
+          const r = -150;
+          const nodeLine = graph.addNode({ ...rect, shape: 'rect', x: 1205, y: 2, height: 85, zIndex: 1 });
+          nodeLine.rotate((r * Math.PI));
+
+          graph.addNode({
+            label: "S33济徐高速", x: 1275, y: 22, attrs: {
+              label: {
+                fontSize: 12,
+                fill: "#37B5D4",
+                fontWeight: 600
+              }
+            }
+          });
         }
-      } else {
-        ctx.translate(info.distance * zoom, -169 * zoom);
       }
       let y = 42 - (info.name.length - 5) * 10;
-      ctx.fillStyle = "#ffffff";
-      ctx.font = setFont(12 * zoom);
-      var img = await this.loadImage(require(`./images/${info.icon || `tag${type}`}.png`));
-      ctx.drawImage(img, 0, 0, 21 * zoom, 117 * zoom);
-      ctx.translate(11.1 * zoom, y * zoom);
+      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);
 
       for (var i = 0; i < info.name.length; i++) {
-        ctx.fillText(info.name[i], 0, i * 15 * zoom);
+        const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } });
+        imageLabelNode.translate(width * 0.0755, 50 + y);
       }
 
-      ctx.translate(0, (169 - y) * zoom);
-      ctx.font = setFont(10.5 * zoom);
-
       // 修改文字位置
-      ctx.fillText(info.code, 0, -132);
+      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 * 0.0755, 0);
+
     },
     loadImage(url) {
       return new Promise((resolve, reject) => {
@@ -154,24 +273,30 @@ export default {
         };
       });
     },
-    drawCongestionAreas(ctx, x, y, zoom) {
-      const { e: translateX, f: translateY } = ctx.getTransform();
-      x = translateX * -1 + x * zoom;
-      y = translateY * -1 + y * zoom;
-
-      const rectWidth = 180 * zoom;
-      const rectHeight = 8 * zoom;
-
-      const grad = ctx.createLinearGradient(x, 0, x + rectWidth, 0);
-      grad.addColorStop(0, 'rgba(217,50,8,0)');
-      grad.addColorStop(0.27, '#D73208');
-      grad.addColorStop(0.42, '#D93208');
-      grad.addColorStop(0.81, '#F5FF83');
-      grad.addColorStop(1, 'rgba(215,50,8,0)');
+    drawCongestionAreas(graph, x, y) {
+      // x = translateX * -1 + x;
+      // y = translateY * -1 + y;
 
-      ctx.fillStyle = grad;
+      const rectWidth = 160;
+      const rectHeight = 8;
 
-      ctx.fillRect(x, y, rectWidth, rectHeight);
+      graph.addNode({
+        ...rect, x: x - 50, y: y, width: rectWidth, height: rectHeight, attrs: {
+          body: {
+            fill: {
+              type: 'linearGradient',
+              stops: [
+                { offset: '0%', color: 'rgba(217,50,8,0)' },
+                { offset: '27%', color: '#D73208' },
+                { offset: '42%', color: '#D93208' },
+                { offset: '81%', color: '#F5FF83' },
+                { offset: '100%', color: 'rgba(215,50,8,0)' },
+              ],
+            },
+            strokeWidth: 0
+          }
+        }
+      });
     }
   },
 };
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index afc77df4..25f5969a 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -26,6 +26,7 @@ module.exports = {
   lintOnSave: process.env.NODE_ENV === "development",
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
+  transpileDependencies: ["ml-matrix"], //默认情况下为[] babel-loader 忽略其中的所有文件 node_modules
   // webpack-dev-server 相关配置
   devServer: {
     host: "0.0.0.0",
@@ -41,7 +42,7 @@ module.exports = {
         // target: `http://192.168.0.194:8080`,
         // target: `http://10.0.81.201:8080`,
         // target: `http://10.168.73.36:8080`, // 周乐
-        // target: `http://10.168.77.209:8080`, // 刘朋
+        // target: `http://10.168.77.209:8087`, // 刘朋
         // target: `http://10.168.66.196:8080`, //刘文阁
         // target: `http://10.168.56.206:8087`, //孟
         // target: `http://10.168.78.135:8087`, //孟
@@ -50,8 +51,8 @@ module.exports = {
         // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
         // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
         // target: `http://10.168.78.135:8087`,  //王钦
-        target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
-        // target: `http://10.168.68.42:8087`, //王思祥
+        // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
+        target: `http://10.168.68.42:8087`, //王思祥
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",