feat: base 流程图边的处理

src/components/scDegra.vue

@@ -61,9 +61,15 @@ export default {
       });
 
       this.render = new dagreD3.render();
-      let svg = d3.select("#mySvg");
+      let svg = d3.select("#mySvg").attr("preserveAspectRatio", "xMidYMid meet");
       this.inner = svg.append("g");
 
+      // 缩放支持
+      let zoom = d3.zoom().on("zoom", (event) => {
+        this.inner.attr("transform", event.transform);
+      });
+      svg.call(zoom);
+
       this.renderGraph();
       this.bindNodeClick(svg);
     },
@@ -71,7 +77,7 @@ export default {
     /** 渲染节点和边 */
     renderGraph() {
       let that = this;
-
+      that.inner.selectAll("*").remove();  // 清空内部元素
       // 清空原有节点和边
       that.g.nodes().forEach((v) => that.g.removeNode(v));
       that.g.edges().forEach((e) => that.g.removeEdge(e));
@@ -91,41 +97,46 @@ export default {
         }
       });
 
-      // 添加边（带唯一 key 和颜色）
+      const edgeGroups = {};
-      that.edges.forEach((edge, index) => {
+      that.edges.forEach((edge) => {
-        let edgeColor = "green"; // 默认绿色
+        const key = `${edge.source}_${edge.target}`;
-        if (edge.label === "驳回") edgeColor = "red";
+        if (!edgeGroups[key]) edgeGroups[key] = [];
-        if (edge.label === "退回") edgeColor = "red";
+        edgeGroups[key].push(edge);
+      });
 
-        that.g.setEdge(
+      // 定义几种可选曲线
-          edge.source,
+      const curves = [d3.curveBasis, d3.curveCardinal, d3.curveBundle.beta(0.8)];
-          edge.target,
+
-          {
+      // 按分组循环，避免重叠
-            label: edge.label,
+      Object.values(edgeGroups).forEach((edges) => {
-            id: edge.id,
+        edges.forEach((edge, index) => {
-            style: `fill:#ffffff;stroke:${edgeColor};stroke-width:1.5px`,
+          let edgeColor = "green";
-            curve: d3.curveBasis,
+          if (edge.label === "驳回" || edge.label === "退回") edgeColor = "red";
-            minlen: 1 + index % 3,
+
-          },
+          that.g.setEdge(
-          `${edge.source}_${edge.target}_${edge.id}`
+            edge.source,
-        );
+            edge.target,
+            {
+              label: edge.label,
+              id: edge.id,
+              // ✅ 给每条边做区分
+              curve: curves[index % curves.length],
+              labeloffset: 16 + index * 10, // 标签错开
+              minlen: 2 + index,            // 强制 dagre 给一点空间
+              style: `fill:none;stroke:${edgeColor};stroke-width:1.5px`,
+            },
+            `${edge.source}_${edge.target}_${edge.id}`
+          );
+        });
       });
 
       // 渲染图
       this.render(this.inner, this.g);
 
-      // 设置 SVG 尺寸
+      // 自动计算 viewBox 尺寸
-      let mySvgHeight =
+      const { width, height } = this.g.graph();
-        document.getElementsByClassName("nodes")[0]?.getBoundingClientRect().height +
+      d3.select("#mySvg")
-        50;
+        .attr("viewBox", `0 0 ${width + 2} ${height + 2}`);
-      let mySvgWdith =
-        document.getElementsByClassName("output")[0]?.getBoundingClientRect().width +
-        150;
-
-      if (mySvgHeight && mySvgWdith) {
-        document.getElementById("mySvg").setAttribute("height", mySvgHeight);
-        document.getElementById("mySvg").setAttribute("width", mySvgWdith);
-      }
     },
 
     /** 更新图形 */