基於GOJS繪制流程圖

基於GOJS封裝的流程圖設計（展示）工具類，主要分為兩個工具類：

工具庫依賴於go.js、jquery以及layer.js

• http://gojs.net/
• http://jquery.com/
• http://layer.layui.com/

在線demo  點擊這里

 

 

流程設計器操作指南:

1. 在任意位置雙擊設計器空白處：新建步驟；
2. 選中步驟，單擊右鍵：彈出右鍵菜單；
3. 鼠標滑過步驟，顯示連接點，拖動連接點即可創建新的連接線；
4. 鼠標滑過步驟：顯示tooltip。

 ##流程圖數據

{ "class": "go.GraphLinksModel",
  "modelData": {"position":"-5 -5"},
  "nodeDataArray": [
{"key":"1", "text":"開始", "figure":"Circle", "fill":"#4fba4f", "stepType":1, "loc":"90 110"},
{"key":"2", "text":"結束", "figure":"Circle", "fill":"#CE0620", "stepType":4, "loc":"770 110"},
{"key":"3", "text":"填寫請假信息 ",  "loc":"210 110", "remark":""},
{"key":"4", "text":"部門經理審核 ",  "loc":"370 110", "remark":""},
{"key":"5", "text":"人事審核  ",  "loc":"640 110", "remark":""},
{"key":"6", "text":"副總經理審核  ",  "loc":"510 40", "remark":""},
{"key":"7", "text":"總經理審核  ",  "loc":"500 180", "remark":""}
 ],
  "linkDataArray": [
{"from":"1", "to":"3"},
{"from":"3", "to":"4"},
{"from":"4", "to":"5"},
{"from":"5", "to":"2"},
{"from":"4", "to":"6", "key":"1001", "text":"小於5天 ", "remark":"", "condition":"Days<5"},
{"from":"6", "to":"5"},
{"from":"4", "to":"7", "key":"1002", "text":"大於5天 ", "remark":"", "condition":"Days>5"},
{"from":"7", "to":"5"}
 ]}

 

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