流程概览

src/components/work-flow/workflows-view.vue

 <template>
-  <div class="workflows-view">
+  <div class="workflows-view" ref="flowContainer">
     <super-flow
       ref="superFlow"
       :node-list="nodeList"
@@ -35,11 +35,7 @@
             <p>节点插件：</p>
             <div class="plug-in-list">
               <span v-for="(plugin, index) in meta.plugins" :key="index">
-                {{
-                  ["-", "接口插件", "流程插件", "超时插件"][
-                    plugin.plugin_type || 0
-                  ]
-                }}
+                {{ getTypeText(plugin.plugin_type) }}
               </span>
             </div>
           </div>
@@ -67,7 +63,7 @@ export default {
   },
   data() {
     return {
-      origin: [0, 0],
+      origin: [],
       nodeList: [],
       linkList: [],
     };
@@ -113,8 +109,18 @@ export default {
           console.log(error);
         });
     },
+    setOrigin() {
+      this.$nextTick(() => {
+        this.origin = [this.$refs.flowContainer.clientWidth / 2, 0];
+        console.log(this.origin);
+      });
+    },
+    getTypeText(type) {
+      return ["-", "接口插件", "流程插件", "超时插件"][type || 0];
+    },
   },
   created() {
+    this.setOrigin();
     this.init();
   },
 };