基于GOJS绘制流程图

基于GOJS封装的流程图设计（展示）工具类，主要分为两个工具类：

##流程图数据

{ "class": "go.GraphLinksModel",

  "modelData": {"position":"-5 -5"},

  "nodeDataArray": [

{"key":"", "text":"开始", "figure":"Circle", "fill":"#4fba4f", "stepType":, "loc":"90 110"},

{"key":"", "text":"结束", "figure":"Circle", "fill":"#CE0620", "stepType":, "loc":"770 110"},

{"key":"", "text":"填写请假信息 ",  "loc":"210 110", "remark":""},

{"key":"", "text":"部门经理审核 ",  "loc":"370 110", "remark":""},

{"key":"", "text":"人事审核  ",  "loc":"640 110", "remark":""},

{"key":"", "text":"副总经理审核  ",  "loc":"510 40", "remark":""},

{"key":"", "text":"总经理审核  ",  "loc":"500 180", "remark":""}

 ],

  "linkDataArray": [

{"from":"", "to":""},

{"from":"", "to":""},

{"from":"", "to":""},

{"from":"", "to":""},

{"from":"", "to":"", "key":"", "text":"小于5天 ", "remark":"", "condition":"Days<5"},

{"from":"", "to":""},

{"from":"", "to":"", "key":"", "text":"大于5天 ", "remark":"", "condition":"Days>5"},

{"from":"", "to":""}

 ]}

1.流程图设计 flow-desinger.js

 var areaFlow = document.getElementById('mySavedModel');

    var  myDesigner= new FlowDesigner('myFlowDesignerDiv');// 流程图设计器

    myDesigner.initToolbar('myPaletteDiv');// 初始化控件面板

    myDesigner.displayFlow(areaFlow.value);// 在设计面板中显示流程图

2.流程图展示 flow-display.js

  var areaFlow = document.getElementById('mySavedModel');

    var myDisplay = new FlowDisplay('myDisplayDiv');// 流程图显示器

    var flowPath = '3,4,6,5';// 3,4,6,5是步骤的id，最后一个步骤为"待处理"或"已完成"的步骤

    var isCompleted = false;// "待处理"或"已结束"

    myDisplay.loadFlow(areaFlow.value);// 显示流程图

    myDisplay.animateFlowPath(flowPath, isCompleted);// 动画显示流程路径

详细代码请参考目录下的html文件： /gojs1.6.10/site/samples/_demo.html

原文链接：https://gitee.com/markies/FlowDiagram