一种浏览器画布的可视化流程编排方法及系统与流程

本发明属于流程编排，具体涉及一种基于浏览器画布的可视化流程编排方法及系统。

背景技术：

1、现有可视化编排技术节点业务参数配置简单，各个节点之间的关联关系太灵活而不够固定，并且各个节点之间的排列顺序需要手动去调整。

2、而对于银行传统业务流程，通常是由多个业务单元组合而成，具备业务模式固定，业务参数配置复杂的特点。因此研发一套，节点固定，配置规范，响应高效的可视化流程编排系统是迫在眉睫的。

技术实现思路

1、本发明提供的一种基于浏览器画布的可视化流程编排方法及系统，通过对现有业务的归纳整合集成，采用拖、拉、拽的方式实现不同业务调用的顺序排列，形成一条新的业务流程图后，通过流程解析引擎解析流程进而实现相关流程，从而解决上述技术问题。

2、本发明解决上述技术问题的技术方案如下：

3、第一方面，本发明提供了一种基于浏览器画布的可视化流程编排方法，包括以下步骤：

4、s1：构建初始化流程画布，在流程画布中设置开始节点以及结束节点，并通过边来连接开始节点以及结束节点；

5、s2：响应用户拖拽节点进入画布，并根据节点类型标识生成不同类型的节点；

6、s3：根据新增节点方法，将新增节点与前置节点和后置节点连接，并根据节点位置算法调整新增节点位置；

7、s4：根据节点类型标识，对新增节点的节点业务参数进行编辑或赋值，并将画布中所有节点的业务参数信息以文件形式保存在服务器。

8、在一些实施例中，所述s1包括：

9、s11：通过position()方法设置开始节点以及结束节点的位置信息；

10、s12：通过addedge()方法设置边来连接开始节点以及结束节点；

11、s13：根据边的isinsert属性，来标识该边是否可以插入新增节点。

12、在一些实施例中，所述s2包括：

13、s21：拖拽节点进入画布，获取当前画布中所有节点和边的信息，根据新增节点的类型来标识新增节点可插入边；

14、s22：选择一条可插入边，将可插入边的键和值赋值到新增节点的基础信息之中；

15、s23：根据节点类型标识生成相应类型的节点。

16、在一些实施例中，所述s3中“根据新增节点方法，将新增节点与前置节点或后置节点连接”包括：

17、s31：根据新增节点的基础信息，获取该新增节点所对应的可插入边，并根据可插入边，获取新增节点的前置节点以及后置节点；

18、s32：获取前置节点以及后置节点的位置信息，并通过addedge()方法将新增节点与前置节点以及后置节点连接。

19、在一些实施例中，所述s4中的“根据节点类型标识，对新增节点的节点业务参数进行编辑或赋值”包括：

20、s41：双击新增节点，根据节点类型标识生成对应类型的业务弹窗；

21、s42：在业务弹窗中对新增节点的业务参数进行编辑或赋值。

22、在一些实施例中，所述s4完成后，还会进行以下步骤：

23、s5：对当前画布中各节点构成的业务流程的各业务之间的流转状态进行调试。

24、第二方面，本发明提供了一种基于浏览器画布的可视化编排流程系统，包括：

25、初始化模块，用于构建初始化流程画布，在流程画布中设置开始节点以及结束节点，并通过边来连接开始节点以及结束节点；

26、节点拖拽模块，用于响应用户拖拽节点进入画布，并根据节点类型标识生成不同类型的节点；

27、位置调整模块，用于根据新增节点方法，将新增节点与前置节点和后置节点连接，并根据节点位置算法调整新增节点位置；

28、参数编辑模块，用于根据节点类型标识，对新增节点的节点业务参数进行编辑或赋值，并将画布中所有节点的业务参数信息以文件形式保存在服务器。

29、在一些实施例中，所述初始化模块包括：

30、位置设置子模块，用于通过position()方法设置开始节点以及结束节点的位置信息；

31、节点连接子模块，用于通过addedge()方法设置边来连接开始节点以及结束节点；

32、节点插入子模块，用于根据边的isinsert属性，来标识该边是否可以插入新增节点。

33、在一些实施例中，所述节点拖拽模块包括：

34、可插入边标识子模块，用于拖拽节点进入画布，获取当前画布中所有节点和边的信息，根据新增节点的类型来标识新增节点可插入边；

35、可插入边赋值子模块，用于选择一条可插入边，将可插入边的键和值赋值到新增节点的基础信息之中；

36、节点生成子模块，用于根据节点类型标识生成相应类型的节点。

37、在一些实施例中，所述位置调整模块包括：

38、节点信息获取子模块，用于根据新增节点的基础信息，获取该新增节点所对应的可插入边，并根据可插入边，获取新增节点的前置节点以及后置节点；

39、节点连接子模块，用于获取前置节点以及后置节点的位置信息，并通过addedge()方法将新增节点与前置节点以及后置节点连接。

40、本申请的有益效果是：

41、本申请提供的一种基于浏览器画布的可视化流程编排方法及系统，具备以下有益效果：1、能够自由拖拽业务节点，并根据当前画布中的节点顺序创建流程图；2、能够通过双击节点，直接对节点参数进行编辑或赋值；3、能够动态计算设置前后相邻节点所属关系和位置信息的算法，以及父子节点的主从关系；4、具备调试功能，通过单步调试可实时展现调试响应结果, 通过挡板调试能够根据模拟响应结果展示调试结果；5、能够预览查看其他流程，并定位节点所属菜单。

技术特征：

1.一种基于浏览器画布的可视化流程编排方法，其特征在于，包括以下步骤：

2.根据权利要求1所述的一种基于浏览器画布的可视化流程编排方法，其特征在于，所述s1包括：

3.根据权利要求2所述的一种基于浏览器画布的可视化流程编排方法，其特征在于，所述s2包括：

4.根据权利要求3所述的一种基于浏览器画布的可视化流程编排方法，其特征在于，所述s3中“根据新增节点方法，将新增节点与前置节点和后置节点连接”包括：

5.根据权利要求4所述的一种基于浏览器画布的可视化流程编排方法，其特征在于，所述s4中的“根据节点类型标识，对新增节点的节点业务参数进行编辑或赋值”包括：

6.根据权利要求1-5中任一项所述的一种基于浏览器画布的可视化流程编排方法，其特征在于，所述s4完成后，还会进行以下步骤：

7.一种基于浏览器画布的可视化编排流程系统，其特征在于，包括：

8.根据权利要求7所述的一种基于浏览器画布的可视化编排流程系统，其特征在于，所述初始化模块包括：

9.根据权利要求8所述的一种基于浏览器画布的可视化编排流程系统，其特征在于，所述节点拖拽模块包括：

10.根据权利要求9所述的一种基于浏览器画布的可视化编排流程系统，其特征在于，所述位置调整模块包括：

技术总结
本发明提供了一种基于浏览器画布的可视化流程编排方法及系统，该方法包括以下步骤：构建初始化流程画布，在流程画布中设置开始节点以及结束节点，并通过边来连接开始节点以及结束节点；响应用户拖拽节点进入画布，并根据节点类型标识生成不同类型的节点；根据新增节点方法，将新增节点与前置节点和后置节点连接，并根据节点位置算法调整新增节点位置；根据节点类型标识，对新增节点的节点业务参数进行编辑或赋值，并将画布中所有节点的业务参数信息以文件形式保存在服务器。本发明通过对现有业务的归纳整合集成，采用拖、拉、拽的方式实现不同业务调用的顺序排列，形成一条新的业务流程图后，通过流程解析引擎解析流程进而实现相关流程。

技术研发人员：肖伟,李晓宾,罗小勇,赖朱国
受保护的技术使用者：北京领雁科技股份有限公司
技术研发日：
技术公布日：2024/3/4