快捷導(dǎo)航

GOJS+VUE實現(xiàn)流程圖效果

更新時間：2018年12月01日 15:35:20 作者：cicistream

這篇文章主要為大家詳細介紹了GOJS+VUE實現(xiàn)流程圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言及展示

在項目中需要根據(jù)傳過來的數(shù)據(jù)畫出流程圖，采用了GOJS插件，功能很全面，可以根據(jù)自己的需要調(diào)整，不過建議簡單的流程圖還是自己手寫一個組件，更加便于維護和變換。有一點需要注意的是，GOJS是需要收費的，有水印，雖然可以手動去掉，但是公司用的話還是需要買。GOJS的官網(wǎng)上有關(guān)于在VUE中應(yīng)用GOJS的小例子：Minimal GoJS Sample in Vue.js。推薦看一下，可以解決大部分簡單需求，這個例子可以滿足你并行步驟數(shù)比較固定的二叉樹畫法的流程圖。

這是官網(wǎng)的例子，其中模塊，線，箭頭等畫布元素都可以交互。
由于我的并行步驟數(shù)不固定，于是在圖中加入了Group(組)。先展示一下成品：

其中批次中可以包含多個項目，表示并行的步驟。

具體實現(xiàn)

分為兩個文件：
diagram.vue && stepMap.vue
diagram.vue聲明組件，stepMap引用

diagram.vue

基本聲明：

<script>
 import go from 'gojs';
 let $ = go.GraphObject.make; // 后面很多用到該變量來初始化diagram
 export default{
  name: 'diagram',
  props: ['modelData'], // accept model data as a parameter
  data() {
   return {
   diagram: null,
   }; 
  }, // provide access to the GoJS Diagram

初始化diagram：

mounted: function() {
  let self = this;
  let myDiagram =
   $(go.Diagram, this.$el,
   {
    'initialContentAlignment': go.Spot.Center,
    'isEnabled': false, // 是否可拖拽，默認為是
    // 'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone,
    'allowLink': false, 
    'allowMove': false,
    'allowRelink': false, // 由于項目只想展示數(shù)據(jù)，我禁用了大部分圖像交互操作，具體可參看官網(wǎng)API
    'layout': $(go.TreeLayout, {angle: 0, arrangement: go.TreeLayout.ArrangementHorizontal}),  // angle可控制圖像展示方向
    'undoManager.isEnabled': true,
    // Model ChangedEvents get passed up to component users
    'ChangedSelection': function(e) {
     self.$emit('changed-selection', e); 
    },
   });
   
  myDiagram.nodeTemplate = // 節(jié)點的初始化設(shè)置
   $(go.Node, 'Auto',
   $(go.Shape, // 節(jié)點形狀設(shè)置
   {
    fill: 'white', strokeWidth: 1,
    portId: '', fromLinkable: true, toLinkable: true, cursor: 'pointer',
   },
    new go.Binding('fill', '', this.nodeColorConverter)), // nodeColorConverter是我自定義函數(shù)，根據(jù)節(jié)點狀態(tài)設(shè)置節(jié)點的背景顏色
   $(go.TextBlock, // 節(jié)點提示文字設(shè)置
    {margin: 16, editable: false},
    new go.Binding('text').makeTwoWay())
   );

  myDiagram.linkTemplate =
   $(go.Link,
   {relinkableFrom: true, relinkableTo: true},
   $(go.Shape, // 連線形狀設(shè)置
   {strokeWidth: 2},
   new go.Binding('stroke', '', this.linkColorConverter)), // 連線的顏色設(shè)置
   $(go.Shape, // arrowhead
   {toArrow: 'Triangle', stroke: null, scale: 1.5}, // 箭頭設(shè)置
   new go.Binding('fill', '', this.linkColorConverter))
   );
  
  myDiagram.groupTemplate = // 分組的初始化
   $(go.Group, 'Auto',
    { // define the group's internal layout
    layout: $(go.TreeLayout,
       {angle: 90, arrangement: go.TreeLayout.ArrangementVertical, isRealtime: false}),
    // the group begins unexpanded;
    // upon expansion, a Diagram Listener will generate contents for the group
    // when a group is expanded, if it contains no parts, generate a subGraph inside of it
    // subGraphExpandedChanged: function(group) {
    // if (group.memberParts.count === 0) {
    //  randomGroup(group.data.key);
    // }
    // },
    },
   $(go.Shape, 'Rectangle',
    {fill: null, stroke: 'gray', strokeWidth: 2}),
   $(go.Panel, 'Vertical',
    {defaultAlignment: go.Spot.Left, margin: 4},
    $(go.Panel, 'Horizontal',
    {defaultAlignment: go.Spot.Top},
    $('SubGraphExpanderButton', {alignment: go.Spot.Top, margin: 5}),
    // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
    $(go.TextBlock,
     {
     font: 'Bold 14px Sans-Serif',
     margin: 10,
     },
     new go.Binding('text', 'text'))
    ),
   // create a placeholder to represent the area where the contents of the group are
    $(go.Placeholder,
    {padding: new go.Margin(0, 10)}),
   ) // end Vertical Panel
   ); // end Group

   // generate the initial model
  this.diagram = myDiagram;
  this.updateModel(this.modelData);

更新圖中數(shù)據(jù)時需要的函數(shù)：

watch: {
  modelData: function(val) { 
   this.updateModel(val); 
  },
  },
  methods: {
  model: function() { 
   return this.diagram.model; 
  },
  updateModel: function(val) {
   // No GoJS transaction permitted when replacing Diagram.model.
   if (val instanceof go.Model) {
   this.diagram.model = val;
   } else {
   let m = new go.GraphLinksModel();
   if (val) {
    for (let p in val) {
    if (val[p]) {
     m[p] = val[p];
    }
    }
   }
   this.diagram.model = m;
   }
  },
  updateDiagramFromData: function() {
   this.diagram.startTransaction();
   // This is very general but very inefficient.
   // It would be better to modify the diagramData data by calling
   // Model.setDataProperty or Model.addNodeData, et al.
   this.diagram.updateAllRelationshipsFromData();
   this.diagram.updateAllTargetBindings();
   this.diagram.commitTransaction('updated');
  },
  },
 };
</script>

聲明后在stepMap調(diào)用，比較重要的是這兩個方法：

updateDiagramFromData: function() {
   this.$refs.diag.updateDiagramFromData(); // 數(shù)據(jù)變化時調(diào)用組件中的更新方法
  },
changedSelection: function(e) {
   let node = e.diagram.selection.first();
   if (node instanceof go.Node) {
   this.currentNode = node;
   this.currentNodeText = node.data.text;
   this.selectNode(node.data);
   } else {
   this.currentNode = null;
   this.currentNodeText = '';
   }
  },

最后，將需要展示的數(shù)據(jù)轉(zhuǎn)化為需要的格式就可以啦。

流程圖所需格式如下：

無分組：
 "nodeDataArray": [ 
{"key":1, "text":"Alpha", "color":"lightblue"},
{"key":2, "text":"Beta", "color":"orange"},
{"key":3, "text":"Gamma", "color":"lightgreen"},
{"key":4, "text":"Delta", "color":"pink"}
 ]
 "linkDataArray": [ 
{"from":1, "to":2},
{"from":1, "to":3},
{"from":3, "to":4}
 ]
有分組：
 var nodeDataArray = [
 { key: "Alpha" },
 { key: "Beta", group: "Omega" },
 { key: "Gamma", group: "Omega" },
 { key: "Omega", isGroup: true }, 
 { key: "Delta" }
 ];
 var linkDataArray = [
 { from: "Alpha", to: "Beta" }, 
 { from: "Beta", to: "Gamma" }, 
 { from: "Omega", to: "Delta" } 
 ];

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: