fix:流程图改动（抽出组件）

src/views/wf/degraD3.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-drawer 
+  v-model="visible"
+  :title="workflowName" 
+  :size="600">
+    <svg id="mySvg" v-if="visible"></svg>
+  </el-drawer>
+</template>
+
+<script>
+import dagreD3 from "dagre-d3";
+import * as d3 from "d3";
+
+export default {
+  name: "index",
+  props: {
+    workflowName: {
+      type: String,
+      default: "",
+    },
+    workFlowId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() { 
+    return {
+      mySvgHeight: null,
+      visible:false,
+      isSaving: false,
+    };
+  },
+  mounted() {
+    // this.handleWatch();
+  },
+  methods: {
+    open(){
+      this.visible = true;
+      this.handleWatch();
+    },
+    handleWatch() {
+      let that = this;
+      that.limitedWatch = true;
+      that.$nextTick(() => {
+        var g = new dagreD3.graphlib.Graph().setGraph({
+          rankdir: "DL",
+          nodesep: 40,
+          edgesep: 25, //两条线之间的距离
+          ranksep: 20, //节点之间的距离
+          marginx: 80,
+          marginy: 10,
+        });
+        //获取state得到节点
+        that.$API.wf.workflow.states.req(that.workFlowId).then((response) => {
+          if (!response.err_msg) {
+            let nodes = response;
+            // 添加节点
+            nodes.forEach((item) => {
+              if(item.id&&item.name){
+                g.setNode(item.id, {
+                // 节点标签
+                label: item.name,
+                // 节点形状
+                shape: "rect",
+                toolText: item.name,
+                //节点样式
+                style: "fill:#fff;stroke:#000",
+                labelStyle: "fill:#000;",
+                rx: 5, //矩形节点圆角度
+                ry: 5,
+              });
+              }
+            });
+            //获取流转得到线  链接关系
+            that.$API.wf.workflow.transitions.req(that.workFlowId).then((res) => {
+                let transitionList = res;
+                transitionList.forEach((transition0) => {
+                  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_state,
+                      transition0.destination_state,
+                      {
+                        // 边标签
+                        label: transition0.name,
+                        // 边样式
+                        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);
+            });
+          }
+        });
+      });
+    },
+
+    closeMark() {
+      this.limitedWatch = false;
+    },
+    scaleUp() {
+      var svg = document.getElementById("mySvg");
+      svg.style.transform = "scale(0.5)";
+    }
+  },
+};
+</script>
+<style scoped>
+.treeMain {
+  height: 280px;
+  overflow: auto;
+  border: 1px solid #dcdfe6;
+  margin-bottom: 10px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  background-color: #fefefe;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+  background-color: #f5f5f5;
+}
+
+.svgMark {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.svgWrapper {
+  background: #fff;
+  width: 800px;
+  margin: 5vh auto;
+  height: 90vh;
+  text-align: center;
+  border-radius: 2px;
+  overflow-y: scroll;
+}
+
+.svgItem {
+  padding: 20px 40px 0;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+  font-size: 18px;
+  display: flex;
+  justify-content: space-between;
+}
+
+svg {
+  font-size: 14px;
+}
+
+.node rect {
+  stroke: #606266;
+  fill: #fff;
+}
+
+.edgePath path {
+  stroke: #606266;
+  fill: #333;
+  stroke-width: 1.5px;
+}
+
+g.conditions > rect {
+  fill: #00ffd0;
+  stroke: #000;
+}
+
+.el-icon-close {
+  cursor: pointer;
+}
+</style>
+

src/views/wf/workflow.vue

@@ -83,7 +83,7 @@
               link
               size="small"
               type="primary"
-              @click="handleWatch(scope)"
+              @click="handleWatch(scope.row)"
             >
               流程图
             </el-button>
@@ -106,23 +106,14 @@
       </scTable>
     </el-main>
   </el-container>
-  <div class="svgMark" v-if="limitedWatch" @click="closeMark">
+  <degraDialog
-    <div class="svgWrapper">
+    v-if="limitedWatch" 
-      <div class="svgItem">
+    ref="degraDialogs" 
-        工作流流程图<i
+    :workflowName="workflowName" 
-          class="el-dialog__close el-icon el-icon-close"
+    :workFlowId="workFlowId"
-          @click="closeMark"
+    @closeDialog="limitedWatch = false"
-        ></i>
+    >
-      </div>
+  </degraDialog>
-      <div style="width: 100%; margin: auto">
-        <svg
-          :height="mySvgHeight"
-          id="mySvg"
-          style="width: 100% !important"
-        ></svg>
-      </div>
-    </div>
-  </div>
   <el-dialog :title="titleMap[type]" v-model="limitedVisible">
     <el-form
       :model="addForm"
@@ -181,19 +172,21 @@
 </template>
 
 <script>
-import dagreD3 from "dagre-d3";
+import degraDialog from "./degraD3.vue";
-import * as d3 from "d3";
-
 export default {
   name: "index",
+  components: {
+    degraDialog
+  },
   data() {
     return {
+      workflowName:"",
+      workFlowId:'',
       apiObj: this.$API.wf.workflow.list,
       selection: [],
       checkList: [],
       choiceOption: [],
       query: {},
-      mySvgHeight: null,
       editId: null,
       isSaving: false,
       limitedVisible: false,
@@ -339,128 +332,23 @@ export default {
       }
     },
 
-    handleWatch(scope) {
+    handleWatch(row) {
       let that = this;
-      let workFlow = scope.row.id;
+      that.workFlowId = row.id;
+      that.workflowName = row.name;
       that.limitedWatch = true;
 			that.$nextTick(() => {
-        var g = new dagreD3.graphlib.Graph().setGraph({
+				that.$refs.degraDialogs.open();
-          rankdir: "DL",
-          nodesep: 80,
-          edgesep: 50, //两条线之间的距离
-          ranksep: 40, //节点之间的距离
-          marginx: 160,
-          marginy: 20,
-        });
-        //获取state得到节点
-        that.$API.wf.workflow.states.req(workFlow).then((response) => {
-          if (!response.err_msg) {
-            let nodes = response;
-            // 添加节点
-            nodes.forEach((item) => {
-              if(item.id&&item.name){
-                if(item.id===1548915292174946304){
-                  debugger;
-                }
-                g.setNode(item.id, {
-                // 节点标签
-                label: item.name,
-                // 节点形状
-                shape: "rect",
-                toolText: item.name,
-                //节点样式
-                style: "fill:#fff;stroke:#000",
-                labelStyle: "fill:#000;",
-                rx: 5, //矩形节点圆角度
-                ry: 5,
-              });
-              }
-            });
-            //获取流转得到线  链接关系
-            that.$API.wf.workflow.transitions.req(workFlow).then((res) => {
-              if (!res.err_msg) {
-                let transitionList = res;
-                transitionList.forEach((transition0) => {
-                  if (transition0.condition_expression.length > 0) {
-                    g.setNode(transition0.source_state_.id + 100000, {
-                      label: "条件表达式",
-                      style: "stroke: #000;fill: #afa",
-                      shape: "diamond",
-                    });
-                    g.setEdge(
-                      transition0.source_state_.id,
-                      transition0.source_state_.id + 100000,
-                      {
-                        // 边标签
-                        label: transition0.name,
-                        style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
-                      }
-                    );
-                    let condition_expression = transition0.condition_expression;
-                    condition_expression.forEach((condition_expression0) => {
-                      g.setEdge(
-                        transition0.source_state_.id + 100000,
-                        condition_expression0.target_state,
-                        {
-                          label: condition_expression0.label,
-                          style:
-                            "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
-                        }
-                      );
-                    });
-                  }else {
-                   
-                    g.setEdge(
-                      transition0.source_state_.id,
-                      transition0.destination_state_.id,
-                      {
-                        // 边标签
-                        label: transition0.name,
-                        // 边样式
-                        style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px", // 根据后台数据来改变连线的颜色
-                      }
-                    );
-                  }
-                });
-              //   let nodess = g._nodes;
-              //   let newObj = {};
-              //   for(let item in nodess){
-              //     if(nodess[item]===undefined){ 
-              //     }else{
-              //       newObj[item] = nodess[item];
-              //     }
-              //   }
-              //   debugger;
-              //   console.log(newObj)
-              // //   let list = Object.keys(nodess)
-              // //   .filter((key) => nodess[key] !== null && nodess[key] !== undefined)
-              // //   .reduce((acc, key) => ({ ...acc, [key]: nodess[key] }), {});
-              // //  debugger;
-              // //   console.log(list)
-              //   g._nodes = newObj;
-                console.log(g)
-                g.nodes().length - 1;
-                // 创建渲染器
-                let render = new dagreD3.render();
-                // 选择 svg 并添加一个g元素作为绘图容器.
-                let svg = d3.select("#mySvg");
-                let svgGroup = svg.append("g");
-                // 在绘图容器上运行渲染器生成流程图.
-                render(d3.select("svg g"), g);
-                that.mySvgHeight =
-                  document
-                    .getElementsByClassName("nodes")[0]
-                    .getBoundingClientRect().height + 50;
-              }
-            });
-          }
-        });
 			});
     },
 
     closeMark() {
       this.limitedWatch = false;
     },
+    scaleUp() {
+      var svg = document.getElementById("mySvg");
+      svg.style.transform = "scale(0.5)";
+    }
   },
 };
 </script>
@@ -487,44 +375,6 @@ export default {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
   background-color: #f5f5f5;
 }
-
-.svgMark {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  margin: 0;
-  z-index: 2000;
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.svgWrapper {
-  background: #fff;
-  width: 800px;
-  margin: 5vh auto;
-  height: 90vh;
-  text-align: center;
-  border-radius: 2px;
-  overflow-y: scroll;
-}
-
-.svgItem {
-  padding: 20px 40px 0;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
-    Microsoft YaHei, Arial, sans-serif;
-  font-size: 18px;
-  display: flex;
-  justify-content: space-between;
-}
-
-svg {
-  font-size: 14px;
-}
-
 .node rect {
   stroke: #606266;
   fill: #fff;