From d854913b09807e4e53cd1ab43762356ab9b57f88 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Thu, 27 Mar 2025 16:04:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=B5=81=E7=A8=8B=E5=9B=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=8A=BD=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/template/degraD3.vue | 225 +++++++++++++++++----------------
 1 file changed, 119 insertions(+), 106 deletions(-)

diff --git a/src/views/template/degraD3.vue b/src/views/template/degraD3.vue
index 6a040c20..8c245af7 100644
--- a/src/views/template/degraD3.vue
+++ b/src/views/template/degraD3.vue
@@ -1,11 +1,7 @@
 <template>
-  <el-drawer 
-    v-model="visible"
-    :title="workflowName" 
-    :size="'90%'"
-  >
+  <div v-if="visible">
     <svg id="mySvg" v-if="visible"></svg>
-  </el-drawer>
+  </div>
 </template>
 
 <script>
@@ -15,50 +11,67 @@ import * as d3 from "d3";
 export default {
   name: "degraD3",
   props: {
-    code: {
-      type: String,
-      default: "",
+    nodes: {
+      type:Array,
+      default:()=>[]
     },
+    edges:{
+      type:Array,
+      default:()=>[]
+    },
+    rankdir:{
+      type: String,
+      default: "DL",
+    }
   },
   data() { 
     return {
-      mySvgHeight: null,
+      g:null,
       visible:false,
       isSaving: false,
-      params:{}
+      type:""
     };
   },
-  mounted() {
+  watch: {
+    nodes: {
+      handler(val) {
+        console.log(val);
+        this.updateGraph();
+      },
+      deep: true,
+    },
+    edges: {
+      handler(val) {
+        console.log(val);
+        this.updateGraph();
+      },
+      deep: true,
+    },
   },
+  mounted() {},
   methods: {
-    open(type=""){
+    open(){
       this.visible = true;
-      if(type=='batch'){
-        this.params.batch = this.code;
-      }else if(type=='routepack'){
-        this.params.routepack = this.code;
-      }
       this.handleWatch();
     },
     handleWatch() {
       let that = this;
-      that.limitedWatch = true;
       that.$nextTick(() => {
-        var g = new dagreD3.graphlib.Graph().setGraph({
-          rankdir: "LR",
-          nodesep: 40,
-          edgesep: 25, //两条线之间的距离
-          ranksep: 20, //节点之间的距离
-          marginx: 80,
-          marginy: 10,
-        });
-        //获取state得到节点
-        that.$API.wpm.batchlog.dag.req(that.params).then((res) => {
-          let nodes = res.nodes;
-            // 添加节点
-            nodes.forEach((item) => {
-              if(item.id&& item.label){
-                g.setNode(item.id, {
+        if(that.g!==null){
+          that.updataGraph();     
+        }else{
+          that.g = new dagreD3.graphlib.Graph().setGraph({
+            rankdir: that.rankdir,
+            nodesep: 40,
+            edgesep: 25, //两条线之间的距离
+            ranksep: 20, //节点之间的距离
+            marginx: 80,
+            marginy: 10,
+          });
+          // 添加节点
+          that.nodes.forEach((item) => {
+            if(item.id&& item.label){
+              that.g.setNode(item.id, {
                 // 节点标签
                 label: item.label,
                 // 节点形状
@@ -70,81 +83,81 @@ export default {
                 rx: 5, //矩形节点圆角度
                 ry: 5,
               });
-              }
-            });
-             //流转得到线  链接关系
-            let transitionList = res.edges;
-            transitionList.forEach((transition0) => {
-              g.setEdge(
-                  transition0.source,
-                  transition0.target,
-                  {
-                    // 边标签
-                    label: transition0.label,
-                    // 边样式
-                    style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px", // 根据后台数据来改变连线的颜色
-                  }
-                );
-              // let condition_expression = transition0.condition_expression;
-              // if (condition_expression.length > 0) {
-              //   let newNodeId = transition0.id
-              //   g.setNode(newNodeId, {
-              //     label: "条件流转",
-              //     style: "stroke: #000;fill: #afa",
-              //     shape: "diamond",
-              //   });
-              //   g.setEdge(
-              //     transition0.source_state,
-              //     newNodeId,
-              //     {
-              //       // 边标签
-              //       label: transition0.name,
-              //       style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
-              //     }
-              //   );
-              //   condition_expression.forEach((condition_expression0) => {
-              //     g.setEdge(
-              //       newNodeId,
-              //       condition_expression0.target_state,
-              //       {
-              //         label: condition_expression0.label,
-              //         style:
-              //           "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
-              //       }
-              //     );
-              //   });
-              // }else {
-              //   g.setEdge(
-              //     transition0.source,
-              //     transition0.target,
-              //     {
-              //       // 边标签
-              //       label: transition0.label,
-              //       // 边样式
-              //       style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px", // 根据后台数据来改变连线的颜色
-              //     }
-              //   );
-              // }
-            });
-            // g.nodes().length - 1;
-            // 创建渲染器
-            let render = new dagreD3.render();
-            // 选择 svg 并添加一个g元素作为绘图容器.
-            let svg = d3.select("#mySvg");
-            let inner = svg.append("g");
-            // 在绘图容器上运行渲染器生成流程图.
-            render(inner, g);
-            let mySvgHeight =document.getElementsByClassName("nodes")[0].getBoundingClientRect().height + 50;
-            let mySvgWdith =document.getElementsByClassName("output")[0].getBoundingClientRect().innerwidth ;
-            console.log('mySvgWdith',mySvgWdith);
-            document.getElementById('mySvg').setAttribute("height", mySvgHeight);
-            document.getElementById('mySvg').setAttribute("width", mySvgWdith);
+            }
+          });
+          //流转得到线  链接关系
+          that.edges.forEach((transition0) => {
+            that.g.setEdge(transition0.source,transition0.target,{
+                label: transition0.label,// 边标签
+                style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px", // 根据后台数据来改变连线的颜色
+              });
+          });
+          // 创建渲染器
+          let render = new dagreD3.render();
+          // 选择 svg 并添加一个g元素作为绘图容器.
+          let svg = d3.select("#mySvg");
+          let inner = svg.append("g");
+          that.inner = inner;
+          // 在绘图容器上运行渲染器生成流程图.
+          render(inner, that.g);
+          let mySvgHeight =document.getElementsByClassName("nodes")[0].getBoundingClientRect().height + 50;
+          let mySvgWdith =document.getElementsByClassName("output")[0].getBoundingClientRect().width+150 ;
+          document.getElementById('mySvg').setAttribute("height", mySvgHeight);
+          document.getElementById('mySvg').setAttribute("width", mySvgWdith);
+        }
+      })
+    },
+    updataGraph(){
+
+    },
+    // 假设你有一个方法来更新节点和边的数据
+    updateGraph() {
+      let that = this;
+      // 清空现有图形
+      that.g.nodes().forEach(function (v) {
+        that.g.removeNode(v);
+      });
+      that.g.edges().forEach(function (e) {
+        that.g.removeEdge(e);
+      });
+
+      // 重新添加节点
+      that.nodes.forEach((item) => {
+        if (item.id && item.label) {
+          that.g.setNode(item.id, {
+            label: item.label,
+            shape: item.shape,
+            toolText: item.label,
+            style: "fill:#fff;stroke:#000",
+            labelStyle: "fill:#000;",
+            rx: 5,
+            ry: 5,
+          });
+        }
+      });
+
+      // 重新添加边
+      that.edges.forEach((transition0) => {
+        that.g.setEdge(transition0.source, transition0.target, {
+          label: transition0.label,
+          style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
         });
       });
-    },
+      let render = new dagreD3.render();
+      // 渲染更新后的图形
+      render(that.inner, that.g);
+      // 获取新的 SVG 尺寸
+      let mySvgHeight = document.getElementsByClassName("nodes")[0]?.getBoundingClientRect().height + 50;
+      let mySvgWdith = document.getElementsByClassName("output")[0]?.getBoundingClientRect().width + 150;
 
-    closeMark() {
-      this.limitedWatch = false;
+      // 检查节点和边的容器是否存在
+      if (mySvgHeight && mySvgWdith) {
+        // 设置 SVG 尺寸
+        document.getElementById('mySvg').setAttribute("height", mySvgHeight);
+        document.getElementById('mySvg').setAttribute("width", mySvgWdith);
+      } else {
+        console.log("元素尚未加载，无法更新 SVG 尺寸");
+      }
     },
     scaleUp() {
       var svg = document.getElementById("mySvg");