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

最新推荐文章于 2024-04-12 14:13:44 发布
最新推荐文章于 2024-04-12 14:13:44 发布
阅读量1.6k 收藏 2
点赞数 1
文章标签： html UI JavaScript workflow 工作流 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigablecat/article/details/84811881
版权

        实际工作中遇到一个问题，在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>

 

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

bigablecat
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qunee-min.js
09-26
use qunee-min.js var graph = new Q.Graph('canvas'); var hello = graph.createNode("Hello");
如何绘制网页版拓扑图
热门推荐
hackstoic的博客
12-25 1万+
最近为了实现一个网页版的拓扑图, 采用了qunee.js这个js库. 觉得挺不错 . 记一下自己的使用心得.
html5新增graph,Qunee for HTML5
weixin_42511887的博客
06-07 399
轻松开发Qunee for HTML5使用JavaScript语言进行开发，引入qunee-min.js文件，编写简单的代码，就可以开发出来网络拓扑图Hello Qunee for HTML5var graph = new Q.Graph('canvas');var hello = graph.createNode("Hello", -100, -50);hello.image = Q.Graph...
vue 引入qunee_Vue页面中js引入的问题
weixin_39627697的博客
12-21 699
在项目中，我们需要引入qunee的编辑器graph.editor-master，在其中发现了一些引入js时需要注意的问题，在此书写，用来翻阅。下载graph.editor的官方Demogit：https://github.com/samsha/graph.editor.git怀着激动的心情，我打开了demo的index，看明白了相关代码，看了看相关的资源文件后，心想，得，往自己的项目中引吧。以下是...
Qunee 包 (vue js )
08-02
Qunee 包 (vue js )
使用qunee插件实现html工作流程图
08-03
比echarts2里的树形图形式更为灵活 qunee如果商用需要收费，本demo仅供个人开发和实践参考
vue+element工作流程图
05-12
仿钉钉工作流的流程图树，可无限添加审批人和条件，可根据条件自动计算进入那一条流程。vue+element纯前端代码手写，可以结合自定义表单组合任意工作流。
流程图_dagre-d3流程图_dagre-d3_DEMO_
10-03
dagre-d3流程图 demo简单的demo代码
工作流程-工作流程系统-工作流程系统源码-工作流程管理系统-基于Web的工作流程系统设计与实现-工作流程系统设计与实现-java
最新发布
04-16
工作流程-工作流程系统-工作流程系统源码-工作流程管理系统-工作流程管理系统java代码-工作流程系统设计与实现-基于springboot的工作流程系统-基于Web的工作流程系统设计与实现-工作流程网站-工作流程网站代码-工作...
qunee for html5 api,Qunee for HTML5
weixin_42333411的博客
06-29 442
轻松开发Qunee for HTML5使用JavaScript语言进行开发，引入qunee-min.js文件，编写简单的代码，就可以开发出来网络拓扑图Hello Qunee for HTML5var graph = new Q.Graph('canvas');var hello = graph.createNode("Hello", -100, -50);hello.image = Q.Graph...
Qunee for Html 兼容 Vue 版
07-23
Qunee 是基于使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易！（vue）
Qunee官方例子
05-26
Qunee官方案例，直接引用本地JS
Qunee for html5(demo)
02-26
web流程图 Qunee for html5
qunee网络拓扑图
11-28
qunee网络拓扑图，js+html
js和html5实现网络拓扑图
02-04
利用qunee实现js和html5完成网络拓扑图的自动排列展示
分享一套基于HTML5的网络拓扑图组件 Qunee下载
zzc0000的专栏
08-23 1242
一套基于HTML5的网络图组件 使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易   下载地址：http://im.gitom.com/qunee/demos 有什么问题可以与我联系 QQ：285264911   组件特点 ...
Qunee-H5-v2.6.04 demo及doc文档
03-27
Qunee for HTML5（以下简称Qunee）是一套基于HTML5技术的图形组件产品，使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易。
qunee官网demo代码文件大全
07-31
qunee官网demo，官网的代码全在里面，非常详尽，可以直接运行，代码可以直接复制使用
用html实现文字雨
liulang68的博客
04-12 817
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字雨</title> <style> html, body { height: 100%;
vue2项目,使用antv x6绘制树形流程图示例
11-03
Vue是一种流行的JavaScript框架，Vue 2是其第二个版本。AntV X6是一个基于Vue 2的图表绘制库，可以用于绘制各种类型的图表，包括树形流程图。 要在Vue 2项目中使用AntV X6绘制树形流程图，首先需要安装和引入AntV X6库。可以通过npm或yarn进行安装： npm install @antv/x6 或者 yarn add @antv/x6 然后，可以在Vue的组件中使用AntV X6。首先，引入`Graph`和`Node`组件： import { Graph, Node } from '@antv/x6-vue' 接下来，在Vue的模板中添加一个`Graph`组件，并设置一些必要的属性： ``` <template> <div> <Graph :initConfig="graphConfig"> <Node :shape="nodeShape" :x="nodeX" :y="nodeY" :width="nodeWidth" :height="nodeHeight" /> </Graph> </div> </template> <script> export default { data() { return { graphConfig: { width: 800, height: 600, gridSize: 10, background: { color: '#f8f8f8' }, scroller: { enabled: true, pannable: true } }, nodeShape: 'rect', nodeX: 100, nodeY: 100, nodeWidth: 80, nodeHeight: 40 } } } </script> ``` 在上面的代码中，创建了一个Graph组件和一个Node组件。Graph组件定义了整个绘图区域的配置，例如大小、网格和背景颜色等。Node组件定义了一个矩形节点的形状、位置和尺寸。 通过设置Node组件的属性，可以绘制更多的节点，并使用适当的形状、位置和尺寸。 以上是一个简单的示例，展示了如何在Vue 2项目中使用AntV X6绘制树形流程图。通过修改组件属性，可以创建更复杂的图表，并通过AntV X6的其他功能来增强图表的交互性和可视化效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值