一种可交互流程图生成方法及装置

技术领域

本发明涉及软件开发技术领域，特别涉及一种可交互流程图生成方法及装置。

背景技术

随着Web开发及前端可视化领域的发展，简单地通过表格或纯文字列表形式在网页上展示数据暴露出较多的缺点；在功能方面，普通的数据展示方式不能准确的显示数据之间的联系及逻辑关系；在用户体验方面，数据展示方式过于单调，使用户观看网页时易产生视觉疲劳。而随着流程图应用于Web开发领域，这些问题都被一一解决。

Antv是一套可视化图表库，提供了对图进行绘制、布局、交互以及动画设置等的基础能力。Antv将交互任务分为了三个层次：“数据获取”、“信息加工”、“知识转换”，相较于其他可视化图表库或引擎(如Echarts),Antv更加注重图表的交互性。基于Antv可视化图表库中的G6，用户可以快速搭建自己的图展示和图交互应用，它以边和节点两个主要元素绘制流程图；但是在绘制过程中，会有单个节点的构成比较复杂、交互比较复杂的情况，这个时候如果使用Antv-G6提供的常规API和解决思路，将单个节点中的所有元素都用addShape方法去实现，将由于addShape方法一次只能绘制一个元素的局限性，出现不易扩展、代码结构杂乱且冗余、不易维护的问题。

发明内容

本发明实施例的目的是提供一种可交互流程图生成方法及装置，通过采用上层蒙层和下层DOM元素层的节点结构，解决了在使用Antv绘制具有复杂节点和交互的流程图时出现的不易扩展、代码结构杂乱、不易维护的缺点。

为解决上述技术问题，本发明实施例的第一方面提供了一种可交互流程图生成方法，下层DOM元素层可进行各种自定义显示模块的布局，流程图的节点包含：上层蒙层和下层DOM元素层，包括如下步骤：

获取流程图所需的节点和边数据，得到包含所述边数据的所述节点的下层DOM元素层；

基于addShape方法绘制所述下层DOM元素层，所述下层DOM元素层包含预设形状的若干个显示板块；

调整addShape参数，得到与所述若干个显示板块相对应的上层蒙层，并将其设置为透明；

接收用于控制所述若干个显示板块的节点操作指令，并控制所述上层蒙层执行相应交互操作。

进一步地，所述基于addShape方法得到与所述下层DOM元素层相对应的上层蒙层并将其设置为透明，包括：

调整addShape方法的第一参数设置，将所述上层蒙层设置为与所述显示板块相对应的预设形状的若干个蒙层单元；

调整addShape方法中的第二参数中attrs对象内的x、y属性设置，将所述若干个蒙层单元的位置设置为与所述若干个显示板块相对应；

调整addShape方法中的第二参数中attrs对象内的opacity属性设置，将所述若干个蒙层单元的属性设置为透明。

进一步地，所述获取流程图所需的节点和边数据，包括：

通过vue配置获取所述流程图所需的节点及边数据，并初始化流程图的基础配置，所述基础配置包括：渲染方式、是否可拖拽、节点大小。

进一步地，所述接收用于控制所述若干个显示板块的节点操作指令，包括：

设置graph.on('node:click')检测用户的点击节点操作；

依据target.get('name')方法的返回值来检测所述点击节点操作的点击对象；

通过getModel()方法获取所述点击对象对应的节点数据，调用相应的交互组件并将所述节点数据传入其中。

相应地，本发明实施例的第二方面提供了一种可交互流程图生成装置，其特征在于，流程图的节点包含：上层蒙层和下层DOM元素层，下层DOM元素层可进行各种自定义显示模块的布局，包括：

数据获取模块，其用于获取流程图所需的节点和边数据，得到包含所述边数据的所述节点的下层DOM元素层；

DOM生成模块，其用于基于addShape方法绘制所述下层DOM元素层，所述下层DOM元素层包含预设形状的若干个显示板块；

蒙层生成模块，其用于调整addShape参数，得到与所述若干个显示板块相对应的上层蒙层，并将其设置为透明；

交互控制模块，其用于接收用于控制所述若干个显示板块的节点操作指令，并控制所述上层蒙层执行相应交互操作。

进一步地，所述蒙层生成模块包括：

形状设置单元，其用于调整addShape方法的第一参数设置，将所述上层蒙层设置为与所述显示板块相对应的预设形状的若干个蒙层单元；

位置设置单元，其用于调整addShape方法中的第二参数中attrs对象内的x、y属性设置，将所述若干个蒙层单元的位置设置为与所述若干个显示板块相对应；

透明度设置单元，其用于调整addShape方法中的第三参数中attrs对象内的opacity属性设置，将所述若干个蒙层单元的属性设置为透明。

进一步地，所述数据获取模块通过vue配置获取所述流程图所需的节点及边数据，并初始化流程图的基础配置，所述基础配置包括：渲染方式、是否可拖拽、节点大小。

进一步地，所述交互控制模块包括：

操作检测单元，其用于设置graph.on('node:click')检测用户的点击节点操作；

对象检测单元，其用于依据target.get('name')方法的返回值来检测所述点击节点操作的点击对象；

交互控制单元，其用于通过getModel()方法获取所述点击对象对应的节点数据，调用相应的交互组件并将所述节点数据传入其中。

相应地，本发明实施例的第三方面提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述一个处理器执行，以使所述至少一个处理器执行如上述可交互流程图生成方法。

相应地，本发明实施例的第四方面提供了一种计算机可读存储介质，其上存储有计算机指令，该指令被处理器执行时实现上述可交互流程图生成方法。

本发明实施例的上述技术方案具有如下有益的技术效果：

通过采用上层蒙层和下层DOM元素层的节点结构，解决了在使用Antv绘制具有复杂节点和交互的流程图时出现的不易扩展、代码结构杂乱、不易维护的缺点。

附图说明

图1是本发明实施例提供的可交互流程图生成方法流程图；

图2是本发明实施例提供的节点上下层结构示意图；

图3是本发明实施例提供的可交互流程图生成方法逻辑图；

图4是本发明实施例提供的可交互流程图生成装置模块框图；

图5是本发明实施例提供的蒙层生成模块框图

图6是本发明实施例提供的交互控制模块框图。

附图标记：

1、数据获取模块，2、DOM生成模块，3、蒙层生成模块，31、形状设置单元，32、位置设置单元，33、透明度设置单元，4、交互控制模块，41、操作检测单元，42、对象检测单元，43、交互控制单元。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明了，下面结合具体实施方式并参照附图，对本发明进一步详细说明。应该理解，这些描述只是示例性的，而并非要限制本发明的范围。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本发明的概念。

流程图是指以特定的图形符号加上说明表示算法的图，但是在互联网领域的应用中，流程图也常被用于描述一个产品的生产流程、一个进程的执行细节、一个方法的实现过程等。流程图应用于前端可视化领域，可以清晰的描述一组数据之间的逻辑关系，让用户看到之后对数据之间的关系一目了然。

请参照图1、图2和图3，本发明实施例的第一方面提供了一种可交互流程图生成方法，流程图的节点包含：上层蒙层和下层DOM元素层，下层DOM元素层可进行各种自定义显示模块的布局，包括如下步骤：

步骤S100，获取流程图所需的节点和边数据，得到包含边数据的节点的下层DOM元素层。

节点数据和边数据是分开的，两个字段，边数据edges:[]；节点数据：nodes:[]。例：节点1连接节点2，节点2连接节点3，则1和2之间，2和3之间各有边连接。边数据描述的是节点的连接关系，如：节点1连接节点2，可用边数据[{source:‘1’,target:‘2’}]表示。

下层DOM元素层根据实际产品需求进行布局，由于渲染的是DOM元素(一个DOM元素中包含多个板块)，所以可以用html和css等相关技术对板块进行布局，这一层的主要的功能是进行节点布局、携带节点数据。

步骤S200，基于addShape方法绘制下层DOM元素层，下层DOM元素层包含预设形状的若干个显示板块。

其中，addShape方法是Antv提供的用于节点中图形绘制的API，它共含有两个参数：第一个参数，字符串类型，用于设置图形的类型，提供rect、circle、image、dom等内置类型可选；第二个参数，对象类型，用于设置图形属性，包括attrs、name、draggable等字段，其中，attrs中提供了x、y用于设置图形位置，opacity用于设置图形透明度，同时attrs也支持大多数css样式属性。

在一个具体实施例中，使用addShape方法绘制节点下层DOM元素层，将addShape的第一个参数设置成“dom”，然后根据实际开发需求对此DOM元素进行布局。例如，DOM元素中含有三个长方形板块，每个板块中都有相应文字描述。

步骤S300，调整addShape参数，得到与若干个显示板块相对应的上层蒙层，并将其设置为透明。

上层蒙层则根据Antv-G6提供的在画布上定位的参数，将下层的布局对应着进行覆盖。因为渲染DOM时对用户的操作只能使用一些原生方法，也就是会对交互造成影响，所以采用上层蒙层进行交互。此外，因为实际要展示给用户的是下层DOM元素，所以将上层蒙层设置为透明。

步骤S400，接收用于控制若干个显示板块的节点操作指令，并控制上层蒙层执行相应交互操作。

上述方案中，由于addShape方法使用一次只能绘制一个元素，然而将addShape方法的渲染模式设置为渲染成DOM元素的时候，虽然渲染的也只是一个元素，但是DOM元素可以使用Web开发的基础技术html和css对其进行自定义布局，基于这样的特点，可以将杂乱且冗余重复的调用addShape方法转换为网页布局方法。

具体的，步骤S300，基于addShape方法得到与下层DOM元素层相对应的上层蒙层并将其设置为透明，包括：

步骤S310，调整addShape方法的第一参数设置，将上层蒙层设置为与显示板块相对应的预设形状的若干个蒙层单元。

步骤S320，调整addShape方法中的第二参数中attrs对象内的x、y属性设置，将若干个蒙层单元的位置设置为与若干个显示板块相对应。

步骤S330，调整addShape方法中的第二参数中attrs对象内的opacity属性设置，将若干个蒙层单元的属性设置为透明。

在一个具体实例中，使用三个addShape方法，将其第一个参数都设置为“rect”(渲染为长方形)，每一个长方形都对应前述下层DOM元素层中的一个长方形的显示板块，通过addShape方法的第二个参数中attrs对象内的x、y属性来精确定位每个长方形的位置，以覆盖下层对应的长方形，再将和x、y同级的opacity属性设置为透明。

具体的，步骤S100中，获取流程图所需的节点和边数据，具体包括如下内容：

通过vue配置获取流程图所需的节点及边数据，并初始化流程图的基础配置，基础配置包括：渲染方式、是否可拖拽、节点大小。

本实施例在以下环境中去搭建运行，基于Vue3全家桶框架集成Antv，适用PC Web上展示；页面框架采用vue组件化的方式组成：整个页面由两个组件、若干文件组成，一个流程图容器组件，一个交互组件。流程图容器组件通过vue相关的配置从接口获取流程图所需的节点及边数据，初始化流程图的基础配置，包括渲染方式、是否可拖拽、节点大小等；

具体的，步骤S400，接收用于控制若干个显示板块的节点操作指令，包括：

步骤S410，设置graph.on('node:click')检测用户的点击节点操作。

其中，graph.on()是Antv提供的用于监听图形的交互事件的方法，它含有两个参数，第一个参数用于设置监听的目标及交互事件，graph.on('node:click')表示监听节点的点击事件；第二个参数则是回调函数，用于定义交互事件发生后做出的响应。

步骤S420，依据target.get('name')方法的返回值来检测点击节点操作的点击对象，以做出不同的页面响应。

其中，target.get('name')是Antv提供的用于获取交互目标的方法，每个交互目标都会有唯一的name,根据获取到的name来判断交互目标，本例中交互目标就是用户点击的不同节点。

步骤S430，通过getModel()方法获取点击对象对应的节点数据，调用相应的交互组件并将节点数据传入其中。

getModel()是Antv提供的用于获取目标元素数据的方法，一般使用item.getModel()的取值方式获取item中的数据，其中，item可以是边或节点，本例中item是用户点击的节点。此外，交互组件是响应节点操作后展示给用户的组件。

在上述方案中，下层DOM元素负责节点中各个板块的布局及展示，透明的上层蒙层的功能主要是监听和响应用户交互(点击、鼠标移入等)。从用户角度来看，其看到的是底层DOM元素，操作(点击、鼠标移入等)的也是底层DOM元素。然而，实际上用户操作的是透明上层蒙层。由于减少了addShape方法的重复使用，而且节点布局使用开发者熟悉的html和css技术，所以具有实现简单、易扩展、代码结构清晰以及易维护的优点。

相应地，请参照图4，本发明实施例的第二方面提供了一种可交互流程图生成装置，其特征在于，流程图的节点包含：上层蒙层和下层DOM元素层，下层DOM元素层可进行各种自定义显示模块的布局，包括：

数据获取模块1，其用于获取流程图所需的节点和边数据，得到包含边数据的节点的下层DOM元素层；

DOM生成模块2，其用于基于addShape方法绘制下层DOM元素层，下层DOM元素层包含预设形状的若干个显示板块；

蒙层生成模块3，其用于调整addShape参数，得到与若干个显示板块相对应的上层蒙层，并将其设置为透明；

交互控制模块4，其用于接收用于控制若干个显示板块的节点操作指令，并控制上层蒙层执行相应交互操作。

进一步地，请参照图5，蒙层生成模块3包括：

形状设置单元31，其用于调整addShape方法的第一参数设置，将上层蒙层设置为与显示板块相对应的预设形状的若干个蒙层单元；

位置设置单元32，其用于调整addShape方法中的第二参数中attrs对象内的x、y属性设置，将若干个蒙层单元的位置设置为与若干个显示板块相对应；

透明度设置单元33，其用于调整addShape方法中的第二参数中attrs对象内的opacity属性设置，将若干个蒙层单元的属性设置为透明。

进一步地，数据获取模块1通过vue配置获取流程图所需的节点及边数据，并初始化流程图的基础配置，基础配置包括：渲染方式、是否可拖拽、节点大小。

进一步地，请参照图6，交互控制模块4包括：

操作检测单元41，其用于设置graph.on('node:click')检测用户的点击节点操作；

对象检测单元42，其用于依据target.get('name')方法的返回值来检测点击节点操作的点击对象；

交互控制单元43，其用于通过getModel()方法获取点击对象对应的节点数据，调用相应的交互组件并将节点数据传入其中。

相应地，本发明实施例的第三方面提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述一个处理器执行，以使所述至少一个处理器执行如上述可交互流程图生成方法。

相应地，本发明实施例的第四方面提供了一种计算机可读存储介质，其上存储有计算机指令，该指令被处理器执行时实现上述可交互流程图生成方法。

本发明实施例旨在保护一种可交互流程图生成方法及装置，流程图的节点包含：上层蒙层和下层DOM元素层，下层DOM元素层可进行各种自定义显示模块的布局，其中方法包括：包括如下步骤：获取流程图所需的节点和边数据，得到包含边数据的节点的下层DOM元素层；基于addShape方法绘制下层DOM元素层，下层DOM元素层包含预设形状的若干个显示板块；调整addShape参数，得到与若干个显示板块相对应的上层蒙层，并将其设置为透明；接收用于控制若干个显示板块的节点操作指令，并控制上层蒙层执行相应交互操作。上述技术方案具备如下效果：

通过采用上层蒙层和下层DOM元素层的节点结构，解决了在使用Antv绘制具有复杂节点和交互的流程图时出现的不易扩展、代码结构杂乱、不易维护的缺点。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

最后应当说明的是：以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员应当理解：依然可以对本发明的具体实施方式进行修改或者等同替换，而未脱离本发明精神和范围的任何修改或者等同替换，其均应涵盖在本发明的权利要求保护范围之内。