[发明专利]一种轻量的基于DOM的流程图渲染方法

说明书

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

技术领域

本发明属于数据处理技术领域，特别是涉及一种轻量的基于DOM的流程图渲染方法。

背景技术

随着web前端领域的不断发展，尤其是Vue、React等业务框架的兴起，大大提高了前端程序员的工作效率，解放了生产力，让前端程序员可以由更多的精力关注于业务和用户体验，尤其是B端场景下，用户希望更加直观的呈现整个工作流程，以便及时做成调整和优化。

目前主流的解决方案是使用蚂蚁AntV系列的产品，如X6、g6等，但这些产品使用svg来渲染，设计上相对复杂，而且需要接受蚂蚁AntV系列的设计风格，不容易修改，扩展性相对不足，很多简单场景下，并不需要采用这套方案。

发明内容

本发明提供了一种轻量的基于DOM的流程图渲染方法，解决了以上问题。

为解决上述技术问题，本发明是通过以下技术方案实现的：

本发明的一种轻量的基于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到最终的结果graph中，然后遍历计数面板中的结果，对于每一个结果执行S13步骤；

S13、如果当前结果在汇合节点中的计数等于在计数面板中的计数，则将当前结果移出JoinNodes，然后执行下一步骤，否则执行S15步骤；