一种轻量的基于DOM的流程图渲染方法技术

本发明专利技术公开了一种轻量的基于DOM的流程图渲染方法，涉及数据处理技术领域。本发明专利技术提供一种流程图渲染方式，能够简单、轻量的渲染到浏览器中，帮助相关人员直观、高效的了解整个工作流，当然为了支撑业务的发展必须设计一种合理的数据结构，既能保证存储时相对结构化，又要兼顾前端的渲染。本发明专利技术基于Vue开发体系，采用DOM的方式，不依赖第三方插件，产出更加轻量、高效；支持自定义节点的样式，并且对外暴露交互事件，方便扩展；采用链式的存储结构，相对结构化，方便以后的业务发展。方便以后的业务发展。方便以后的业务发展。

【技术实现步骤摘要】
一种轻量的基于DOM的流程图渲染方法


[0001]本专利技术属于数据处理
，特别是涉及一种轻量的基于DOM的流程图渲染方法。

技术介绍

[0002]随着web前端领域的不断发展，尤其是Vue、React等业务框架的兴起，大大提高了前端程序员的工作效率，解放了生产力，让前端程序员可以由更多的精力关注于业务和用户体验，尤其是B端场景下，用户希望更加直观的呈现整个工作流程，以便及时做成调整和优化。
[0003]目前主流的解决方案是使用蚂蚁AntV系列的产品，如X6、g6等，但这些产品使用svg来渲染，设计上相对复杂，而且需要接受蚂蚁AntV系列的设计风格，不容易修改，扩展性相对不足，很多简单场景下，并不需要采用这套方案。

技术实现思路

[0004]本专利技术提供了一种轻量的基于DOM的流程图渲染方法，解决了以上问题。
[0005]为解决上述技术问题，本专利技术是通过以下技术方案实现的：
[0006]本专利技术的一种轻量的基于DOM的流程图渲染方法，基于唯一开始节点和唯一结束节点设定，每个子流程都最终会汇合至一个父流程的节点上，该节点称为汇合节点，并且后端存储的数据结构中第一个节点即为开始节点，所述渲染方法包括如下步骤：
[0007]S01、初始化最终的结果集graph为空，建立通过节点nodeId找到节点完整信息的映射表，并且确定汇合节点以及每个汇合节点的上级节点个数JoinNodes，从开始节点开始，执行下一步骤；
[0008]S02、将当前节点push到最终的结果graph，然后执行下一步骤；
[0009]S03、如果当前节点的nextNodeId只有一个，则通过映射表取下一个节点，继续执行S02步骤，否则执行下一步骤；
[0010]S04、如果当前节点的nextNodeId为空，则流程结束，否则执行S05步骤；
[0011]S05、初始化计数面板为空，遍历当前节点的nextNodeId，通过映射表找到每个节点的完整信息，然后对于每一个节点执行S06步骤；
[0012]S06、当前节点存在，则初始化子结果集subGraph为空，从当前节点的开始，执行S07步骤，否则执行S12步骤；
[0013]S07、将当前节点push到子结果集subGraph，然后执行下一步骤；
[0014]S08、如果当前节点的nextNodeId字符串化在汇合节点的集合中，则执行下一步骤，否则执行S10步骤；
[0015]S09、如果当前节点的nextNodeId字符串化之后在计数面板中，则计数+1，当前遍历结束，否则计数置为1，当前循环结束，继续执行S06步骤；
[0016]S10、如果当前节点的nextNodeId只有一个，则通过映射表取下一个节点，则继续
执行S07步骤，否则执行下一步骤；
[0017]S11、如果当前节点nextNodeId为空，则当前循环结束，继续执行S06步骤，否则递归执行S05步骤；
[0018]S12、将子结果集subGraph push到最终的结果graph中，然后遍历计数面板中的结果，对于每一个结果执行S13步骤；
[0019]S13、如果当前结果在汇合节点中的计数等于在计数面板中的计数，则将当前结果移出JoinNodes，然后执行下一步骤，否则执行S15步骤；
[0020]S14、取出当前结果转换成数组，即为汇合节点的nextNodeId，继续执行S10步骤
[0021]S15、将当前计数面板的结果传递到父级计数面板，当前递归结束，恢复为上一次nextNodeId的遍历。
[0022]进一步地，在整个渲染方法的过程中，通过判断数组的每一项是否存在nodeId，若存在，则认为这一项为流程节点，直接渲染一个流程节点，否则认为这一项为一个分支，即包含多个子流程，遍历这每一个子流程，递归执行渲染操作。
[0023]进一步地，所述渲染方法通过提供一种组件实现，所述组件所需具备的能力包括：通过传入一个图形的数据结构将整个流程图从开始节点到结束节点都绘制出来；支持动态添加和删除节点和分支流程；暴露一定的交互的事件，包括节点点击，节点删除，并且提供合适、合理的参数，辅助业务扩展；支持自定义节点的样式，并且提供节点数据辅助用户渲染。
[0024]进一步地，所述渲染方法通过提供一种数据结构实现，该数据结构存储采用链式的结构；每个节点的数据结构中，有一个nextNodeId属性，数组类型，存储紧跟这个节点之后的节点nodeId。
[0025]进一步地，所述数据结构包括流程节点的唯一标识nodeId、流程节点的名称nodeName、流程节点的类型nodeType、紧跟当前节点之后的节点nextNodeId。
[0026]本专利技术相对于现有技术包括有以下有益效果：
[0027]1、基于Vue开发体系，采用DOM的方式，不依赖第三方插件，产出更加轻量、高效。
[0028]2、支持自定义节点的样式，并且对外暴露交互事件，方便扩展。
[0029]3、采用链式的存储结构，相对结构化，方便以后的业务发展。
[0030]当然，实施本专利技术的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
[0031]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0032]图1为本专利技术一种轻量的基于DOM的流程图渲染方法的数据存储结构和渲染结构示意图；
[0033]图2为本专利技术一种轻量的基于DOM的流程图渲染方法的渲染逻辑图。
具体实施方式
[0034]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本专利技术保护的范围。
[0035]本专利技术要解决的技术问题是提供一种流程图渲染方式，能够简单、轻量的渲染到浏览器中，帮助相关人员直观、高效的了解整个工作流，当然为了支撑业务的发展必须设计一种合理的数据结构，既能保证存储时相对结构化，又要兼顾前端的渲染。
[0036]组件设计上，需要具备的能力有：通过传入一个图形的数据结构将整个流程图从开始节点到结束节点都绘制出来；支持动态添加和删除节点和分支流程；暴露一定的交互的事件，例如节点点击，节点删除等，并且提供合适、合理的参数，辅助业务扩展；支持自定义节点的样式，并且提供节点数据辅助用户渲染；数据结构设计上，存储采用链式的结构，每个节点的数据结构中，有一个nextNodeId属性，数组类型，存储紧跟这个节点之后的节点nodeId。但这样的结构前端不容易渲染，所以需要将这样的链式数据结构转换本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种轻量的基于DOM的流程图渲染方法，基于唯一开始节点和唯一结束节点设定，每个子流程都最终会汇合至一个父流程的节点上，该节点称为汇合节点，并且后端存储的数据结构中第一个节点即为开始节点，其特征在于，所述渲染方法包括如下步骤：S01、初始化最终的结果集graph为空，建立通过节点nodeId找到节点完整信息的映射表，并且确定汇合节点以及每个汇合节点的上级节点个数JoinNodes，从开始节点开始，执行下一步骤；S02、将当前节点push到最终的结果graph，然后执行下一步骤；S03、如果当前节点的nextNodeId只有一个，则通过映射表取下一个节点，继续执行S02步骤，否则执行下一步骤；S04、如果当前节点的nextNodeId为空，则流程结束，否则执行S05步骤；S05、初始化计数面板为空，遍历当前节点的nextNodeId，通过映射表找到每个节点的完整信息，然后对于每一个节点执行S06步骤；S06、当前节点存在，则初始化子结果集subGraph为空，从当前节点的开始，执行S07步骤，否则执行S12步骤；S07、将当前节点push到子结果集subGraph，然后执行下一步骤；S08、如果当前节点的nextNodeId字符串化在汇合节点的集合中，则执行下一步骤，否则执行S10步骤；S09、如果当前节点的nextNodeId字符串化之后在计数面板中，则计数+1，当前遍历结束，否则计数置为1，当前循环结束，继续执行S06步骤；S10、如果当前节点的nextNodeId只有一个，则通过映射表取下一个节点，则继续执行S07步骤，否则执行下一步骤；S11、如果当前节点nextNodeId为空，则当前循环结束，继续执行S06步骤，否则递归执行S05步骤；S12、将子结果集subGraph push到最终的结果gra...

【专利技术属性】
技术研发人员：张彤，贾顺昌，
申请(专利权)人：上海得帆信息技术有限公司，
类型：发明
国别省市：