vue中使用gojs/jointjs

 

因为公司项目需求，要画出相关业务的流程图，以便客户了解自己身处何处

 

搜索框输入 “前端流程图插件”，查了很多资料，总结一下有以下几种

flow-chart

代码写法繁琐，不是json就可以解决，效果也比较丑,PASS

 

 darge-d3

github :https://github.com/dagrejs/dagre-d3

 

效果图

 

下载里面的demo,改一下json就可以了

 

// States

var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER",

"CANCELED", "ABOLISHED" , "DELETED","REFUNDING","REFUNDED"];

var map = ['新创建','已提交','已完成','提交失败',"交付中",

'已取消','废除','已删除','退款中',"已退款"]

// Automatically label each of the nodes

states.forEach(function(state,index) { g.setNode(state, { label: `${map[index]}(${state})`})});



// Set up the edges

g.setEdge("NEW", "FAILED", { label: "后台接口自动"});

g.setEdge("NEW", "SUBMITTED", { label: "后台接口自动" });

g.setEdge("NEW", "CANCELED", { label: "用户取消订单" });

g.setEdge("SUBMITTED","CANCELED", { label: "用户取消订单" });

g.setEdge("SUBMITTED", "ABOLISHED", { label: "用户超过48小时未支付，\n系统自动取消"});

g.setEdge("ABOLISHED","DELETED", { label: "已删除" });

g.setEdge("CANCELED", "DELETED", { label: "已删除"});

g.setEdge("FAILED", "SUBMITTED", { label: "后台接口自动" });



g.setEdge("SUBMITTED", "DELIVER", { label: "用户支付" });

g.setEdge("FINISHED", "REFUNDING", { label: "用户退款" });



g.setEdge("DELIVER", "FINISHED", { label: "交付完成" });

g.setEdge("REFUNDING", "REFUNDED", { label: "已退款" });

g.setEdge("REFUNDED", "DELETED", { label: "已删除" });

g.setEdge("DELIVER", "REFUNDING", { label: "用户退款" });

g.setEdge("FAILED", "CANCELED", { label: "用户取消订单" });

 

**不满意的地方**：画出来的图是垂直方向的，我要的是水平方向,PASS

 

gojs

github :https://github.com/NorthwoodsSoftware/GoJS

 

可以通过

npm install gojs -save

安装

 

效果图

看里面的demo我自己包装了一下

 

**不满意的地方**：

1. 免费版gojs是有水印的，百度搜索“gojs如何去水印”有一堆答案，我就不写了。

2. 因为要自己手动去掉水印，所以我只能手动下载go.js放在我自己的组件目录下，但是这个文件太大了，800+KB,

npm run dev 的时候停在这里停了好久。有时候还爆出“......maximun ....500KB”的错误，我也不知道是什么原因，不知道有什么方法，有的话麻烦通知我。

3. 代码写法有点太繁琐

 

这是我自己包装的代码地址：(https://github.com/LRY1994/vue-lib/tree/master/src/components/process-go)

 

 jointjs

github :(https://github.com/clientIO/joint)

效果图

 

可以通过``npm install jointjs -save``安装

 

参照了很多demo和文档，用的是矩形，但是可以设置圆角的度数变成椭圆形，其他形状我就无力了。

 

可以自定义矩形的样式和矩形框里面的文字样式

 

```javascript

//data.vue

 

这是我自己包装的代码地址：(https://github.com/LRY1994/vue-lib/tree/master/src/components/process-joint)

 

这个目前看来还算满意

 

jsplumb

这个看了官网，不太友好，而且下载只有一个js文件，没有demo代码，不知如何下手

 

参考资料：

[https://gojs.net/latest/samples/pageFlow.html](https://gojs.net/latest/samples/pageFlow.html)

[http://www.daviddurman.com/assets/autolayout.js](http://www.daviddurman.com/assets/autolayout.js)

[http://resources.jointjs.com/demos/layout](http://resources.jointjs.com/demos/layout)

---------------------------------------------更新 2018/8/30----------------------------------------------------------

经过一番实践，我觉得jointjs不好用了。

不满意点：

1. 不能相对容器自动布局，都用的是死的像素，分辨率低的屏幕，部分图有些就看不见

2. 不能滚动鼠标自己缩小放大

3. 比较丑，也可能是我不会配色

 

最终采用gojs,上面提到的问题解决方案是：把去掉水印的gojs放在自己的npm服务器上，这样就可以npm安装了！！！

实践过程中遇到个问题

像这样，用``v-if``反复切换，会报错``Cannot read property 'type' of undefined at Po (go.js?d976:1044)``

 

换成``v-show``就不会

但是这样的前提是show初始化是true.如果初始化为false,没有报错，但是图呈现不出来。

原因我猜测是：show初始化为false,组件高度为0，因为默认画布就是组件容器，所以画布高度变成0，图画不出。

 

最后想出个方法。``v-if``和``v-show``结合一起使用，加上``$once``方法，代码：

 

data(){

return{

show:false,

firstClick:false,

}

}

created(){

this.init();

this.$once('firstClick',()=>{

this.firstClick = true

})

},

methods:{

init(){...},

look(){//用v-if切换会报错，只有第一次点击查看用v-if,其他用v-show

this.$emit('firstClick');

this.show = true;

}

}

重新封装了一下gojs 地址：[https://github.com/LRY1994/vue-lib/blob/master/src/components/process-go/index.vue](https://github.com/LRY1994/vue-lib/blob/master/src/components/process-go/index.vue)

 

 

原文地址   ：https://lry1994.github.io/study/2018/8/procedure.html