指挥调度 处置预案完成

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)
       })

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";