(原创) 工作流程图的树形展示-使用qunee插件实现

实际工作中遇到一个问题，在html页面以树形节点的方式展示工作流程图。
echarts2的树形图可以实现，但是页面样式不够灵活。架构师从网上找来qunee插件，大致能满足客户要求。
qunee是"一套基于HTML5的网络图组件"，详情可以去官网http://qunee.com查看。

这里只介绍如何用qunee来实现树形图。

在qunee的demo里找到
Treelayouter Demo (http://demo.qunee.com/#TreeLayouter Demo)

和Work Flow Demo中的

development guide (http://demo.qunee.com/#Development Guide)
本例需要将两者的效果结合。

流程图结构如下(局部放大)：

流程图结构如下(完整)：

节点数据是json格式，举例如下：

var test = {
	"children": [{
		"children": [{
			"children": null,
			"codeDescription": "2级节点",
			"nodeLevel": 2,
			"nodeName": "test1_1",
			"nodeOrder": 0
		}],
		"codeDescription": "1级节点",
		"nodeLevel": 1,
		"nodeName": "test1",
		"nodeOrder": 0
	}],
	"codeDescription": "根节点",
	"nodeLevel": 0,
	"nodeName": "test0",
	"nodeOrder": 0
}

完整的html代码，每一部分都有较详细的注释。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Qunee Treelayout Demo 20160801 update</title>
<!--引入qunee插件的js文件-->
<script src="./qunee-min.js"></script>
<!--引入json数据 -->
<script src="./dataserver1.js"></script>


</head>
<body>
	<div id="root_box"
		style="width: 1000px; height: 600px; margin: auto; border: solid 1px #2898E0;"></div>

	<!-- <script type="text/javascript" src="work-process.js"></script> -->
	<script type="text/javascript">
		//指定一个div元素，初始化qunee画布
		var graph = new Q.Graph("root_box");
		//graph.originAtCenter为false时表示设置左上角为坐标原点
		graph.originAtCenter = false;
		
		//创建一个数组存放所有的子孙节点
		var allChildren = [];
		
		//用来记录最大层级
		var maxLevel = 1;
		
		//递归函数，将传入的数据创建成树形图的节点
		function loadDatas(json, parent, layoutType) {
			json.forEach(function(data) {
				//获取最深的层级
				if (data.nodeLevel > maxLevel) {
					maxLevel = data.nodeLevel;
				}
				
				var node = createNode(data.nodeName, parent, layoutType);
				allChildren.push(node);

				if (layoutType == Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL) {
					node.vGap = 20; //设置孩子布局的垂直间距,hGap为水平间距
				}
				
				//递归创建所有节点
				if (data.children) {
					loadDatas(data.children, node, Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL);
				}
			});
		}
		
		//传入根节点(根节点属性中包含了所有子孙节点),生成树形图
		function init(rootNode) {
			//建立一个数组用于存放主流程节点
			var nodeL1Arr = [];

			//在本demo中，rootNode根节点不展示，根节点下的第一级节点作为主流程节点
			if (rootNode.children) {
				rootNode.children.forEach(function(nodeL1) {
					var newNode = createStep(nodeL1.nodeName);
					nodeL1Arr.push(newNode);
					if (nodeL1.children) {
						loadDatas(nodeL1.children, newNode, Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL);
					}
				});
			} else {
				var newNode = createNode("没有流程信息");
			}
			//设置树形图布局
			setLayout(nodeL1Arr);
		}

		//创建单个流程节点
		function createNode(name, from, layoutType) {
			var node = graph.createText(name);
			node.setStyle(Q.Styles.LABEL_BORDER, 1);
			node.setStyle(Q.Styles.LABEL_BORDER_STYLE, "#1D4876");
			node.setStyle(Q.Styles.LABEL_FONT_SIZE, 16);
			node.setStyle(Q.Styles.LABEL_PADDING, 5);
			node.setStyle(Q.Styles.LABEL_SIZE, new Q.Size(70, 35));
			node.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "#FFF");
			//节点是否可见
			node.visible = true;
			//节点是否能用鼠标拖动,false为不能拖动
			node.movable = false
			node.layoutType = layoutType;
			
			if (from) {
				node.parent = from;
				node.host = from;
			}
			
			if (from instanceof Q.Node) {
				//创建连线
				var nodeEdge = graph.createEdge(from, node);
				if (from.layoutType == Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL) {
					nodeEdge.edgeType = Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;
				} else {
					nodeEdge.edgeType = Q.Consts.EDGE_TYPE_ORTHOGONAL;
				}
			}
			return node;
		}

		//创建主流程节点
		function createStep(label) {
			var node = graph.createText(label);
			node.setStyle(Q.Styles.LABEL_BORDER, 1);
			node.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "#FFF");
			node.setStyle(Q.Styles.LABEL_BORDER_STYLE, "#1D4876");
			node.setStyle(Q.Styles.LABEL_FONT_SIZE, 20);
			node.setStyle(Q.Styles.LABEL_SIZE, new Q.Size(120, 50));
			node.visible = true;
			//节点是否能用鼠标拖动,false为不能拖动
			node.movable = false
			node.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;
			//node.vGap = 30;//设置孩子布局的垂直间距,hGap为水平间距

			return node;
		}

		//创建连线
		function createEdge(from, to, lineWidth, dash) {
			var edge = graph.createEdge(from, to);
			edge.setStyle(Q.Styles.EDGE_WIDTH, lineWidth || 3);
			edge.setStyle(Q.Styles.EDGE_COLOR, "#1D4876");
			if (dash) {
				edge.setStyle(Q.Styles.EDGE_LINE_DASH, [ 10, 10 ]);
			}
			return edge;
		}

		//调整树状图各分支的位置，形成美观的对称结构
		function moveNodes() {
			var rightBound = 0; //节点右边界
			var rightX = 0 //用于记录最右侧节点的横坐标
			var rightElementName; //边界节点的名称
			var prevElement; //前一主流程
			var dx = 20 * maxLevel; //移动基数20乘以获取的最大层级
			graph.graphModel.forEachByTopoBreadthFirstSearch(function(element) {
				if (element instanceof Q.Node) {
					//每次移动，整个父子节点链的线条都会移动
					graph.moveElements([ element ], dx, 0);
					
					if (!element.parent) {
						//如果节点横坐标小于上一节点的右边界，则移动节点，避免重合
						if (element.x < rightBound) {
							graph.moveElements([ element ], rightBound - element.x, 0);
						}

						//如果主流程没有子流程，需要单独移动固定距离dx，否则连线会非常短
						if (prevElement && !prevElement.hasChildren()) {
							graph.moveElements([ element ], dx, 0);
						}
						prevElement = element;
					}

					if (element.x >= rightX) {
						//更新最右侧节点横坐标的值
						rightX = element.x;
						
						//rightX为最右侧节点的横坐标，加上该节点边框的宽度，得到最右侧边界的位置
						rightBound = rightX + graph.getUIBounds(element).width;
						
						//获取最右侧节点的名称，用于打印测试
						rightElementName = element.name;
					}
				}
			});
		}

		graph.visibleFilter = function(node) {
			return node.visible !== false;
		}

		var nodeClicked;
		// 设置点击事件
		graph.onclick = function(evt) {
			nodeClicked = evt.getData();

			if (!nodeClicked) {
				Q.forEach(allChildren, function(p) {
					p.visible = true;
					p.invalidateVisibility();
				})
				graph.invalidate();
				return;
			}

			//点击主流程节点，只显示子孙节点，隐藏其他节点
			/* if (!nodeClicked.parent && !nodeClicked.from) {
				Q.log(nodeClicked);
				Q.forEach(allChildren, function(p) {
					var visible = p.isDescendantOf(nodeClicked);
					p.visible = visible;
					p.invalidateVisibility();
				})
				graph.invalidate();
			} */
			
			//点击主流程节点，显示或隐藏其子孙节点
			if (!nodeClicked.parent && !nodeClicked.from&&nodeClicked.hasChildren()) {
				setAllChildren(nodeClicked);
				graph.invalidate();
			} 
		}
		
		//显示或隐藏子孙节点的函数
		function setAllChildren(parent){
			Q.forEach(parent.children, function(p) {
				p.visible = !p.visible;
				p.invalidateVisibility();
				if(p.hasChildren()){
					setAllChildren(p);
				}
			})
		}
		
		//设置树形图布局
		var layouter = new Q.TreeLayouter(graph);
		function setLayout(nodeL1Arr) {
			layouter.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL;
			//qunee新特性，节点连线能够等长排列
			layouter.parentChildrenDirection = Q.Consts.DIRECTION_BOTTOM_RIGHT;
			layouter.doLayout({
				callback : function() {
					//graph.moveToCenter(1);
					graph.zoomToOverview();
					moveNodes();
					if (nodeL1Arr.length > 0) {
						var index = 0
						nodeL1Arr.forEach(function(obj) {
							if (index > 0) {
								createEdge(nodeL1Arr[index - 1], obj);
							}
							index++;
						});
					}
				}
			});
		}
		init(test);
	</script>
</body>
</html>

附件有完整的代码和数据供测试用。

(原创) 工作流程图的树形展示-使用qunee插件实现

猜你喜欢