可视化集成编排画布绘制方法、系统、终端设备及介质与流程

1.本技术涉及全域集成可视化编排技术领域，尤其涉及一种可视化集成编排画布绘制方法、系统、终端设备及介质。


背景技术：

2.在企业内部，通常会应用不同的系统进行日常管理。随着运用的系统越来越多，系统之间的数据流转难度将大大增加。为了避免数据孤岛、工作程序脱节等现象的出现，企业会应用全域集成系统，把其他业务系统进行串联，实现数据在各个系统中流转。为了直观、简便的实现对其他系统的串联，全域集成系统会提供各个常用系统的接口api，并把这些api以图形的形式，让用户通过可视化编辑界面，只需要进行简单的拖拉、选择操作和少量的文字操作，即可在画板上展现各个系统的数据流转，实现对各个系统的串联。即这些编辑界面多是通过自由拖动api图形，并在各个api图形之间用鼠标点选建立关系。然而，这类编排方式往往会存在以下缺点：
3.第一，用户从api面板中拖动出图形后，需要在画板中选择摆放位置，然后再拖出第二个图形进行排放，当画板上有两个以上的图形时，用户需要选择两个图形，进行拖动连线，如此重复操作，直到完成整个流程绘制完毕，耗费工作量较大、耗时较长。
4.第二，由于是任意两个图形之间连线，不同的图形又代表了不同的业务逻辑处理，故无法在编辑期间提前发现因连线引起的业务逻辑错误，这些错误将被带入运行期间，容易影响业务的正常运行。
5.第三，由于是任意两个图形之间连线，故在连线算法上需要边绘制边考虑如何避免连线之间的重叠以及连线与api图形重叠问题，这将大大增加开发人员的开发难度及后期维护的难度。


技术实现要素：

6.本技术的目的在于提供一种可视化集成编排画布绘制方法、系统、终端设备及介质，以解决现有的编排方法中存在的工作量大、耗时长、开发难度大且无法提前排查错误逻辑进而影响业务正常运行的问题。
7.为实现上述目的，本技术提供一种可视化集成编排画布绘制方法，包括：
8.配置需要绘制的节点、边线以及画布参数，生成配置信息；所述节点包括初始化节点、执行节点和终止节点；
9.根据绘制任务，按照配置信息进行绘制，计算边线寻路路径，生成绘制样式；
10.对所述绘制样式进行修正，生成绘制结果。
11.进一步地，所述配置需要绘制的节点，包括：
12.进行节点样式配置，包括设置节点绘制元素样式、节点鼠标事件、描点坐标以及节点元素更新规则；
13.所述节点绘制元素包括背景元素、前景元素、头像元素、标题元素以及删除提示元
素；所述背景元素包括鼠标进出动画及鼠标进出删除图标元素样式联动；
14.设置节点名称，在画布引擎中对节点名称和节点样式进行注册。
15.进一步地，配置需要绘制的所述边线，包括：
16.进行边线样式配置，包括设置边线绘制元素样式、边线鼠标事件及边线元素更新规则；所述边线绘制元素包括添加图示元素及鼠标经过边线元素样式联动；所述图示元素包括鼠标经过动画；
17.设置边线名称，在画布引擎中对边线名称和边线样式进行注册。
18.进一步地，配置所述画布参数，包括：
19.进行画布引擎配置，包括设置节点布局方式、边线布局方式和事件；
20.所述节点布局方式包括节点布局类型、节点水平间距以及节点垂直间距；
21.所述边线布局方式包括边线布局类型、弧度、弧度半径以及箭头方向；
22.所述事件包括滚动缩放事件和窗口事件；所述滚动缩放事件包括画布内容比例变化；所述窗口事件包括画布窗口大小变化；
23.将画布与父视图进行绑定。
24.进一步地，在所述生成配置信息之后，还包括：
25.确定绘制任务，包括确定节点数据和边线数据；所述节点数据包括节点名称和节点类型；所述边线数据包括边线类型和节点关系。
26.进一步地，所述按照配置信息进行绘制，包括：
27.读取节点数据和边线数据，分别构建节点模型和边线模型；
28.基于节点模型和边线模型，分别读取节点和边线的配置信息，绘制节点样式、边线样式；
29.基于边线样式，计算边线寻路路径，生成边线绘制样式；
30.根据绘制的节点样式和所述边线绘制样式生成节点边线模型；
31.循环执行读取节点数据和边线数据步骤。
32.进一步地，所述计算边线寻路路径，包括：
33.获取边线起点和边线终点；
34.获取边线起点到边线终点的连线坐标，根据连线坐标计算寻路路径面积；
35.从边线起点向下方边界寻找可用空间坐标，判断空间坐标是否处于寻路路径面积之内；
36.若否，则判断空间坐标是否处于下方边界以上；
37.若是，则完成路径空间坐标采集；
38.若否，则退出路径寻找。
39.进一步地，所述计算边线寻路路径，还包括：
40.若空间坐标处于寻路路径面积之内，则加入坐标缓存，并判断空间坐标是否处于向左或者向右寻找路径状态；
41.若是，则向左或者向右寻找可用空间，并在边线设置第一拐弯圆角；
42.若设置失败，则返回执行判断空间坐标是否处于寻路路径面积之内步骤。
43.进一步地，在所述在边线设置第一拐弯圆角之后，还包括：
44.若设置成功，则判断第一拐弯圆角半径是否超出路径面积范围；
45.若否，则判断第一拐弯圆角半径坐标与左边界或右边界的关系；
46.若是，则退出路径寻找。
47.进一步地，所述判断第一拐弯圆角半径坐标与左边界或右边界的关系，包括：
48.若第一拐弯圆角半径坐标不在左边界或右边界，则返回执行判断空间坐标是否处于寻路路径面积之内步骤；
49.若第一拐弯圆角半径坐标在左边界或右边界，则继续向下寻找可用空间，然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
50.进一步地，所述判断空间坐标是否处于向左或者向右寻找路径状态，还包括：
51.若否，则判断边线终点是否在边线起点的左边或者右边；
52.若否，则继续向下寻找可用空间，然后返回执行判断空间坐标是否处于寻路路径面积之内步骤；
53.若是，则为边线设置第二拐弯圆角。
54.进一步地，在所述为边线设置第二拐弯圆角之后，还包括：
55.若设置成功，则判断第二拐弯圆角半径坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一；
56.若是，则使得空间坐标垂直向下且向左，或者垂直向下且向右偏移第二拐弯圆角半径的距离；
57.若否，则继续向下寻找可用空间，然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
58.进一步地，在所述为边线设置第二拐弯圆角之后，还包括：
59.若设置失败，则判断空间坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一；
60.若是，则使得空间坐标垂直向下且向左，或者垂直向下且向右偏移第二拐弯圆角半径的距离；
61.若否，则继续向下寻找可用空间，然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
62.进一步地，在所述使得空间坐标垂直向下且向左，或者垂直向下且向右偏移第二拐弯圆角半径的距离之后，还包括：
63.继续向右或者向左寻找可用空间；
64.返回执行判断空间坐标是否处于寻路路径面积之内步骤。
65.进一步地，所述对所述绘制样式进行修正，生成绘制结果，包括：
66.根据边线关系对节点进行分层；
67.根据画布配置调整垂直节点之间的间距、每层节点之间的水平间距；
68.重新计算每层节点之间的连线坐标，根据画布大小和配置信息，对所有节点和边线整体修正。
69.进一步地，所述的可视化集成编排画布绘制方法，还包括根据绘制任务的数据变动，动态更新绘制结果，包括：
70.查找变动数据对应的节点和边线，确定采用添加策略、修改策略或者删除策略；
71.若采用修改策略，则对节点区域进行刷新；
72.若采用删除策略，则垂直删除节点，重新计算删除位置后所有节点及边线坐标，然后整体刷新；
73.若再用添加策略，则垂直添加节点，重新计算节点分层和新节点位置；
74.重新计算插入位置后所有节点及边线坐标，以及新节点与周围节点的边线坐标，然后整体刷新。
75.进一步地，在所述垂直添加节点之后，还包括：
76.水平添加节点，计算同层所有节点坐标以及同层节点与周围节点的边线坐标，然后整体刷新。
77.本技术还提供一种可视化集成编排画布绘制系统，包括：
78.配置单元，用于配置需要绘制的节点、边线以及画布参数，生成配置信息；所述节点包括初始化节点、执行节点和终止节点；
79.绘制单元，用于根据绘制任务，按照配置信息进行绘制，计算边线寻路路径，生成绘制样式；
80.修正单元，用于对所述绘制样式进行修正，生成绘制结果。
81.本技术还提供一种终端设备，包括：
82.一个或多个处理器；
83.存储器，与所述处理器耦接，用于存储一个或多个程序；
84.当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上任一项所述的可视化集成编排画布绘制方法。
85.本技术还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的可视化集成编排画布绘制方法。
86.相对于现有技术，本技术的有益效果在于：
87.1)用户拖动api图形进入画板后，画板根据已有的api图形自动布局计算新拖入的图形位置进行修正，避免手动拖动api图形，造成api图形间重叠；
88.2)自动连线根据修正后的api图形位置进行计算绘制，用户可无需进行手动连线操作，避免因用户手动连线造成的线条重叠，令线条能清晰表达api图形的关系；
89.3)由于api图形的布局及连接方式能够提前被预测，因此开发人员无需编写复杂的路径寻找算法，进行路径绘制，减轻开发人员工作量及后期维护成本；
90.4)用户编排的流程最终按垂直流程图的形式进行展示，提升展示效果，清晰呈现流程执行的上下文关系，及数据流转过程。
附图说明
91.为了更清楚地说明本技术的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
92.图1是本技术某一实施例提供的可视化集成编排画布绘制方法的流程示意图；
93.图2是本技术某一实施例提供的配置需要绘制的节点的流程示意图；
94.图3是本技术某一实施例提供的配置需要绘制的边线的流程示意图；
95.图4是本技术某一实施例提供的配置画布参数的流程示意图；
96.图5是本技术某一实施例提供的确定绘制任务的流程示意图；
97.图6是本技术某一实施例提供的画布引擎绘制节点和边线的流程示意图；
98.图7是本技术某一实施例提供的边线寻路路径算法的流程示意图；
99.图8是本技术某一实施例提供的对绘制样式进行修正的流程示意图；
100.图9是本技术某一实施例提供的画布引擎根据任务数据变动动态更新绘制结果的的流程示意图；
101.图10是本技术某一实施例提供的可视化集成编排画布绘制系统的结构示意图；
102.图11是本技术某一实施例提供的终端设备的结构示意图。
具体实施方式
103.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
104.应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。
105.应当理解，在本技术说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本技术。如在本技术说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
106.术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
107.术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
108.请参阅图1，本技术某一实施例提供一种可视化集成编排画布绘制方法。如图1所示，该可视化集成编排画布绘制方法包括步骤s10至步骤s30。各步骤具体如下：
109.s10、配置需要绘制的节点、边线以及画布参数，生成配置信息；所述节点包括初始化节点、执行节点和终止节点；
110.s20、根据绘制任务，按照配置信息进行绘制，计算边线寻路路径，生成绘制样式；
111.s30、对所述绘制样式进行修正，生成绘制结果。
112.本实施例中首先配置需要绘制的节点、边线以及画布参数，然后根据绘制任务结合配置信息在画布引擎上进行绘制。在绘制时用户拖动api图形进入画布引擎后，画布引擎会根据已有的api图形自动布局计算新拖入的图形位置进行修正，而对于api图形的连线问题，本实施例会提供一种边线寻路路径算法自动去计算边线的路径，无需用户手动连线导致线条重叠或者连线错误等问题。最后，对于绘制样式进行整体修正，以优化展示效果。
113.请参阅图2-4，图2提供了配置需要绘制的节点的流程示意图，图3提供了配置需要绘制的边线的流程示意图，图4提供了配置画布参数的流程示意图。其中，配置需要绘制的节点用于告知画布引擎绘制出什么样子的节点及节点的交互能力；配置需要绘制的边线用于告知画布引擎制出什么样子的边线及边线的交互能力；配置画布参数则用于描述画布引擎自身可进行的配置，以及引擎本身额展现能力和交互能力。具体地，上述配置包括以下内
容：
114.如图2所示，配置需要绘制的节点，包括：
115.进行节点样式配置，包括设置节点绘制元素样式、节点鼠标事件、描点坐标以及节点元素更新规则；
116.所述节点绘制元素包括背景元素、前景元素、头像元素、标题元素以及删除提示元素；所述背景元素包括鼠标进出动画及鼠标进出删除图标元素样式联动；
117.设置节点名称，在画布引擎中对节点名称和节点样式进行注册。
118.如图3所示，配置需要绘制的边线，包括：
119.进行边线样式配置，包括设置边线绘制元素样式、边线鼠标事件及边线元素更新规则；所述边线绘制元素包括添加图示元素及鼠标经过边线元素样式联动；所述图示元素包括鼠标经过动画；
120.设置边线名称，在画布引擎中对边线名称和边线样式进行注册。
121.如图4所示，配置所述画布参数，包括：
122.进行画布引擎配置，包括设置节点布局方式、边线布局方式和事件；
123.所述节点布局方式包括节点布局类型、节点水平间距以及节点垂直间距；
124.所述边线布局方式包括边线布局类型、弧度、弧度半径以及箭头方向；
125.所述事件包括滚动缩放事件和窗口事件；所述滚动缩放事件包括画布内容比例变化；所述窗口事件包括画布窗口大小变化；
126.将画布与父视图进行绑定。
127.请参阅图5，图5提供了确定绘制任务的流程示意图。该绘制任务具体用于描述一种数据结构，该数据结构用于记录每个节点的层次关系，而这些关系通过边线进行指向。如图5所示，在生成配置信息之后，需要确定绘制任务，然后告知画布引擎应该绘制何种节点以及节点之间应该如何连线。具体地，该绘制任务包括确定数据格式，即节点数据和边线数据；其中，所述节点数据包括节点名称和节点类型；所述边线数据包括边线类型和节点关系。在确定了绘制任务后，将任务发送至画布引擎，进而执行步骤s20。
128.请参阅图6，图6提供了画布引擎开始根据绘制任务和配置信息进行流程绘制的过程。在某一具体实施方式中，按照配置信息进行绘制，包括以下内容：
129.读取节点数据和边线数据，分别构建节点模型和边线模型；
130.基于节点模型和边线模型，分别读取节点和边线的配置信息，绘制节点样式、边线样式；
131.基于边线样式，计算边线寻路路径，生成边线绘制样式；
132.根据绘制的节点样式和所述边线绘制样式生成节点边线模型；
133.循环执行读取节点数据和边线数据步骤。
134.请参阅图7，图7提供了图6中计算边线寻路路径的算法的全部流程。如图7所示，作为一个示例性的实施方式，本实施例主要包括以下步骤：
135.获取边线起点和边线终点；
136.获取边线起点到边线终点的连线坐标，根据连线坐标计算寻路路径面积；
137.从边线起点向下方边界寻找可用空间坐标，判断空间坐标是否处于寻路路径面积之内；
138.若否，则判断空间坐标是否处于下方边界以上；
139.若是，则完成路径空间坐标采集；
140.若否，则退出路径寻找。
141.进一步地，所述计算边线寻路路径，还包括：
142.若空间坐标处于寻路路径面积之内，则加入坐标缓存，并判断空间坐标是否处于向左或者向右寻找路径状态；
143.若是，则向左或者向右寻找可用空间，并在边线设置第一拐弯圆角；
144.若设置失败，则返回执行判断空间坐标是否处于寻路路径面积之内步骤。
145.进一步地，在所述在边线设置第一拐弯圆角之后，还包括：
146.若设置成功，则判断第一拐弯圆角半径是否超出路径面积范围；
147.若否，则判断第一拐弯圆角半径坐标与左边界或右边界的关系；
148.若是，则退出路径寻找。
149.进一步地，所述判断第一拐弯圆角半径坐标与左边界或右边界的关系，包括：
150.若第一拐弯圆角半径坐标不在左边界或右边界，则返回执行判断空间坐标是否处于寻路路径面积之内步骤；
151.若第一拐弯圆角半径坐标在左边界或右边界，则继续向下寻找可用空间，然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
152.进一步地，所述判断空间坐标是否处于向左或者向右寻找路径状态，还包括：
153.若否，则判断边线终点是否在边线起点的左边或者右边；
154.若否，则继续向下寻找可用空间，然后返回执行判断空间坐标是否处于寻路路径面积之内步骤；
155.若是，则为边线设置第二拐弯圆角。
156.进一步地，在所述为边线设置第二拐弯圆角之后，还包括：
157.若设置成功，则判断第二拐弯圆角半径坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一；
158.若是，则使得空间坐标垂直向下且向左，或者垂直向下且向右偏移第二拐弯圆角半径的距离；
159.若否，则继续向下寻找可用空间，然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
160.进一步地，在所述为边线设置第二拐弯圆角之后，还包括：
161.若设置失败，则判断空间坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一；
162.若是，则使得空间坐标垂直向下且向左，或者垂直向下且向右偏移第二拐弯圆角半径的距离；
163.若否，则继续向下寻找可用空间，然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
164.进一步地，在所述使得空间坐标垂直向下且向左，或者垂直向下且向右偏移第二拐弯圆角半径的距离之后，还包括：
165.继续向右或者向左寻找可用空间；
166.返回执行判断空间坐标是否处于寻路路径面积之内步骤。
167.可以理解的是，经过上述实施例的绘制，已经生成了基本的绘制样式。上述实施例中，用户拖动api图形进入画布引擎后，画布引擎根据已有的api图形自动布局计算新拖入的图形位置进行计算，避免手动拖动api图形，造成api图形间重叠；通过自动连线的方式，对api图形位置进行计算绘制，无需进行手动连线操作，避免因用户手动连线造成的线条重叠，令线条能清晰表达api图形的关系。同时，由于api图形的布局及连接方式能够提前被预测，因此开发人员无需编写复杂的路径寻找算法，进行路径绘制，减轻开发人员工作量及后期维护成本。
168.为了对绘制结果进行优化，在某一具体实施例中通过执行步骤s30对所述绘制样式进行修正，生成绘制结果。具体地，修正过程如图8所示，共包括以下内容：
169.根据边线关系对节点进行分层；
170.根据画布配置调整垂直节点之间的间距、每层节点之间的水平间距；
171.重新计算每层节点之间的连线坐标，根据画布大小和配置信息，对所有节点和边线整体修正。
172.本实施例中，用户编排的流程最终按垂直流程图的形式进行展示，提升展示效果，清晰呈现流程执行的上下文关系及数据流转过程。
173.在实际应用中，考虑到绘制任务的数据可能会临时变动，为了应对这种情况在某一个优选的实施方式中，所述可视化集成编排画布绘制方法，还包括根据绘制任务的数据变动，动态更新绘制结果，如图9所示。具体地，包括以下内容：
174.查找变动数据对应的节点和边线，确定采用添加策略、修改策略或者删除策略；
175.若采用修改策略，则对节点区域进行刷新；
176.若采用删除策略，则垂直删除节点，重新计算删除位置后所有节点及边线坐标，然后整体刷新；
177.若再用添加策略，则垂直添加节点，重新计算节点分层和新节点位置；
178.重新计算插入位置后所有节点及边线坐标，以及新节点与周围节点的边线坐标，然后整体刷新。
179.进一步地，在所述垂直添加节点之后，还包括：
180.水平添加节点，计算同层所有节点坐标以及同层节点与周围节点的边线坐标，然后整体刷新。
181.可以理解，通过本实施例，对于动态任务数据变更也能够及时响应，从而快速的对绘制结果进行调整，具有使用灵活、适用范围广的优点。
182.请参阅图10，本技术某一实施例还提供一种可视化集成编排画布绘制系统，包括：
183.配置单元01，用于配置需要绘制的节点、边线以及画布参数，生成配置信息；所述节点包括初始化节点、执行节点和终止节点；
184.绘制单元02，用于根据绘制任务，按照配置信息进行绘制，计算边线寻路路径，生成绘制样式；
185.修正单元03，用于对所述绘制样式进行修正，生成绘制结果。
186.可以理解的是，本实施例提供的可视化集成编排画布绘制系统用于执行如上述任一项所述的可视化集成编排画布绘制方法，并实现与其相同的效果，在此不再进一步赘述。
187.请参阅图11，本技术某一实施例还提供一种终端设备，包括：
188.一个或多个处理器；
189.存储器，与所述处理器耦接，用于存储一个或多个程序；
190.当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的可视化集成编排画布绘制方法。
191.处理器用于控制该终端设备的整体操作，以完成上述的可视化集成编排画布绘制方法的全部或部分步骤。存储器用于存储各种类型的数据以支持在该终端设备的操作，这些数据例如可以包括用于在该终端设备上操作的任何应用程序或方法的指令，以及应用程序相关的数据。该存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(static random access memory，简称sram)，电可擦除可编程只读存储器(electrically erasable programmable read-only memory，简称eeprom)，可擦除可编程只读存储器(erasable programmable read-only memory，简称eprom)，可编程只读存储器(programmable read-only memory，简称prom)，只读存储器(read-only memory，简称rom)，磁存储器，快闪存储器，磁盘或光盘。
192.在一示例性实施例中，终端设备可以被一个或多个应用专用集成电路(application specific 1ntegrated circuit，简称as1c)、数字信号处理器(digital signal processor，简称dsp)、数字信号处理设备(digital signal processing device,简称dspd)、可编程逻辑器件(programmable logic device，简称pld)、现场可编程门阵列(field programmable gate array，简称fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行如上述任一项实施例所述的可视化集成编排画布绘制方法，并达到如上述方法一致的技术效果。
193.在另一示例性实施例中，还提供一种包括计算机程序的计算机可读存储介质，该计算机程序被处理器执行时实现如上述任一项实施例所述的可视化集成编排画布绘制方法的步骤。例如，该计算机可读存储介质可以为上述包括计算机程序的存储器，上述计算机程序可由终端设备的处理器执行以完成如上述任一项实施例所述的可视化集成编排画布绘制方法，并达到如上述方法一致的技术效果。
194.以上所述是本技术的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本技术的保护范围。