From cd3fb811406a55b989bec795f6dcda8b4c5b7a55 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Fri, 12 Jan 2024 12:01:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=87=E6=8C=A5=E8=B0=83=E5=BA=A6=20?=
 =?UTF-8?q?=E5=A4=84=E7=BD=AE=E9=A2=84=E6=A1=88=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Cards/DisposalPlan/index.vue              | 66 +++++++++++++++++--
 .../Cards/DisposalPlan/utils.js               | 21 +++---
 2 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
index 877f2903..5f2703be 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
@@ -82,8 +82,8 @@ export default {
         this.canvasFlow.fillText(text, { ...textOptions, x: x + width + 3, y: y + height / 2, }, { height });
       }
     },
-    drawLine({ x, y, width, height, backgroundColor, linearGradient, }) {
-
+    drawLine({ x, y, vertices }) {
+      this.canvasFlow.drawLine({ x, y, color: '#154D6A', lineWidth: 6 }, vertices);
     },
     draw() {
       const { clientWidth } = this.$refs.FlowCanvasRef;
@@ -202,11 +202,67 @@ export default {
 
       const linePoints = [
         {
-          x: clientWidth / 7 - halfWidth,
-          y: 1
-        }
+          x: blockList[0].options.x + blockList[0].options.width / 2,
+          y: blockList[0].options.y + blockList[0].options.height,
+          vertices: [
+            {
+              x: blockList[0].options.x + blockList[0].options.width / 2,
+              y: blockList[2].options.y + blockList[2].options.height / 2
+            }
+          ]
+        },
+        {
+          x: blockList[2].options.x + blockList[2].options.width / 2,
+          y: blockList[2].options.y + blockList[2].options.height / 2,
+          vertices: [
+            {
+              x: blockList[3].options.x + blockList[3].options.width / 2,
+              y: blockList[2].options.y + blockList[2].options.height / 2,
+            }
+          ]
+        },
+        {
+          x: blockList[0].options.x + blockList[0].options.width / 2,
+          y: blockList[4].options.y,
+          vertices: [
+            {
+              x: blockList[0].options.x + blockList[0].options.width / 2,
+              y: blockList[5].options.y,
+            }
+          ]
+        },
+        {
+          x: blockList[2].options.x + blockList[2].options.width / 2,
+          y: blockList[2].options.y + blockList[2].options.height,
+          vertices: [
+            {
+              x: blockList[2].options.x + blockList[2].options.width / 2,
+              y: blockList[4].options.y + blockList[4].options.height / 2,
+            },
+            {
+              x: blockList[4].options.x,
+              y: blockList[4].options.y + blockList[4].options.height / 2,
+            }
+          ]
+        },
+        {
+          x: blockList[3].options.x + blockList[3].options.width / 2,
+          y: blockList[3].options.y + blockList[3].options.height,
+          vertices: [
+            {
+              x: blockList[3].options.x + blockList[3].options.width / 2,
+              y: blockList[4].options.y + blockList[4].options.height / 2,
+            },
+            {
+              x: blockList[4].options.x - blockList[3].options.width,
+              y: blockList[4].options.y + blockList[4].options.height / 2,
+            }
+          ]
+        },
       ];
 
+      linePoints.forEach(item => this.drawLine(item));
+
       [...blockList, ...legends].forEach(item => {
         this[item.type]?.(item.options)
       })
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/utils.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/utils.js
index e8904032..b97f50e7 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/utils.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/utils.js
@@ -80,6 +80,8 @@ export class CanvasFlow {
     backgroundColor,
     radius,
   }) {
+    this.context.beginPath();
+
     if (backgroundColor) this.context.fillStyle = backgroundColor;
 
     x *= this.zoom;
@@ -88,7 +90,6 @@ export class CanvasFlow {
     height *= this.zoom;
 
     if (radius) {
-      this.context.beginPath();
       this.context.roundRect(x, y, width, height, radius);
       this.context.fill();
     } else {
@@ -145,21 +146,23 @@ export class CanvasFlow {
     this.context.fillStyle = gradient;
   }
 
-  drawLine({ startX, endX, color }, vertices) {
-    startX *= this.zoom;
-    endX *= this.zoom;
+  drawLine({ x, y, color, lineWidth = 1 }, vertices) {
+    x *= this.zoom;
+    y *= this.zoom;
 
-    ctx.beginPath();
+    this.context.beginPath();
 
-    ctx.moveTo(startX, endX);
+    this.context.moveTo(x, y);
 
     vertices.forEach(({ x, y }) => {
-      ctx.lineTo(x * this.zoom, y * this.zoom);
+      this.context.lineTo(x * this.zoom, y * this.zoom);
     });
 
     this.context.strokeStyle = color;
 
-    ctx.stroke();
+    this.context.lineWidth = lineWidth;
+
+    this.context.stroke();
   }
 
   fillText(
@@ -175,6 +178,8 @@ export class CanvasFlow {
     } = {},
     { width: rectWidth = 0, height: rectHeight = 0 } = {}
   ) {
+    this.context.beginPath();
+
     this.context.font = `${fontWeight} ${fontSize * this.zoom}px ${fontFamily}`;
 
     this.context.textBaseline = "middle";