CN111596913A - 一种可视化组件框架编排方法及装置 - Google Patents

Abstract

本公开关于一种可视化组件架构编排方法、装置、电子设备以及存储介质，用以至少解决相关技术中提供的代码编排方式由于无法直观地了解整个组件框架的拓扑结构，导致不易进行问题定位，进而导致整个组件框架编排过程需要耗费大量的人力资源以及时间资源，效率极低的问题，方法包括：接收编排指令；响应于编排指令，创建编排画布，并确定与编排指令对应的组件在所述编排画布中的位置坐标；根据编排指令对应的组件以述组件的位置坐标，对编排画布的第一字段进行设置，得到所述第一字段的设置信息；接收用户输入的链接指令，并根据所述链接指令对所述编排画布的第二字段进行设置，得到所述第一字段的设置信息；按照所述第一字段以及所述第二字段的设置信息，对所述编排画布进行渲染，生成可视化组件编排架构。

Description

一种可视化组件框架编排方法及装置

技术领域

本公开涉及计算机技术领域，尤其涉及一种可视化组件框架编排方法、装置、电子设备以及存储介质。

背景技术

随着互联网信息技术的飞速发展，终端设备的日益普及，而越来越多针对终端设备的应用程序(Application，APP)被开发出来，极大地丰富了人们的生活，且逐渐成为人们工作和生活中不可或缺的一部分。

而相关技术中，为了实现应用开发、业务处理以及数据分析等功能，往往需要开发人员根据业务需要编写业务代码进而开发出对应的功能组件，再进一步通过编写代码，对开发出的功能组件进行编排，以编排得到符合业务需要的组件框架。

而整个组件编排过程由于完全依赖于开发人员编写的代码实现，因而只有在组件框架整体编排完成后，在实际运行测试中，才可以发现该组件框架所存在的编排不合理以及代码错误等问题。由于整个组件的框架结构是通过代码实现的，在这种情况下，无法直观地了解整个组件框架的拓扑结构，因而很难对错误代码进行定位，也很难查找出编排不合理的地方，因而此时要想对该组件框架进行修改，则需要开发人员耗费大量的时间和精力去排查定位问题，并重新编写代码进行组件编排。

由此可见，在相关技术中，通过编写代码实现组件框架编排的方式，由于完全依赖于开发人员编写的代码实现，因而对开发人员的业务水平要求较高，且人工编写极易出现代码编写错误、逻辑结构不合理的问题，而由于代码编排方式无法直观地了解整个组件框架的拓扑结构，导致不易进行问题定位，进而导致整个组件框架编排过程需要耗费大量的人力资源以及时间资源，效率极低。

发明内容

本公开提供一种可视化组件框架编排方法、装置、电子设备以及存储介质，以至少解决相关技术中提供的代码编排方式由于无法直观地了解整个组件框架的拓扑结构，导致不易进行问题定位，进而导致整个组件框架编排过程需要耗费大量的人力资源以及时间资源，效率极低的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种可视化组件框架编排方法，包括：

接收用户通过拖拽至少一个组件至编排区域而触发的编排指令；响应于所述编排指令，创建编排画布，并确定与所述编排指令对应的组件在所述编排画布中的位置坐标；根据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息；接收用户输入的链接指令，并根据所述链接指令对所述编排画布的第二字段进行设置，得到所述第二字段的设置信息；按照所述第一字段以及所述第二字段的设置信息，对所述编排画布进行渲染，生成可视化组件编排架构。

在一种实施方式中，接收用户通过拖拽至少一个组件至编排区域而触发的编排指令前，还包括：接收针对组件的注册指令；响应于所述注册指令，在编排系统中对所述组件进行注册，并将所述组件的描述文件保存在所述编排系统中；其中，所述描述文件中保存有所述组件的名称、插槽信息、配置参数以及运行方式。

在一种实施方式中，确定与所述编排指令对应的组件在所述编排画布中的位置坐标，具体包括：接收用户针对所述编排系统中组件的选择指令；针对所述选择指令对应的组件设置拖拽事件；监控所述拖拽事件在所述编排画布上的移动轨迹；根据所述移动轨迹确定所述编排指令对应的组件在所述编排画布中的位置坐标。

在一种实施方式中，所述编排画布的第一字段为节点字段；则根据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息，具体包括：针对所述编排指令对应的组件分配唯一标识；根据所述唯一标识以及所述组件的位置坐标，对所述编排画布的节点字段进行设置，得到所述第一字段的设置信息。

在一种实施方式中，接收用户输入的链接指令，具体包括：接收用户在所述编排画布上输入的链接指令；确定所述链接指令在所述编排画布对应的起点位置坐标以及终点位置坐标；根据所述起始位置坐标以及所述终点位置坐标，确定所述链接指令对应的组件。

在一种实施方式中，所述编排画布的第二字段为边字段；则根据所述链接指令对所述编排画布的第二字段进行设置，具体包括：获取所述链接指令对应的组件的插槽信息；根据所述链接指令对应的组件的插槽信息，对所述编排画布的边字段进行设置。

在一种实施方式中，还包括：接收用户在所述编排画布中输入的滑动指令；监控所述滑动指令在所述编排画布上的滑动轨迹；确定所述滑动轨迹在所述编排画布上所围成的区域；根据所述区域内包含的组件，对所述编排画布的分组字段进行设置。

根据本公开实施例的第二方面，提供了一种可视化组件架构编排装置，包括：

编排指令接收单元，被配置为执行接收用户通过拖拽至少一个组件至编排区域而触发的编排指令；

编排画布创建单元，被配置为执行响应于所述编排指令，创建编排画布，并确定与所述编排指令对应的组件在所述编排画布中的位置坐标；

第一字段设置单元，被配置为执行根据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息；

第二字段设置单元，被配置为执行接收用户输入的链接指令，并根据所述链接指令对所述编排画布的第二字段进行设置，得到所述第二字段的设置信息；

渲染单元，被配置为执行按照所述第一字段以及所述第二字段的设置信息，对所述编排画布进行渲染，生成可视化组件编排架构。

在一种实施方式中，还包括注册单元，具体被配置为执行：接收针对组件的注册指令；响应于所述注册指令，在编排系统中对所述组件进行注册，并将所述组件的描述文件保存在所述编排系统中；其中，所述描述文件中保存有所述组件的名称、插槽信息、配置参数以及运行方式。

在一种实施方式中，编排画布创建单元，具体被配置为执行：接收用户针对所述编排系统中组件的选择指令；针对所述选择指令对应的组件设置拖拽事件；监控所述拖拽事件在所述编排画布上的移动轨迹；根据所述移动轨迹确定所述编排指令对应的组件在所述编排画布中的位置坐标。

在一种实施方式中，所述编排画布的第一字段为节点字段；则第一字段设置单元，具体被配置为执行：针对所述编排指令对应的组件分配唯一标识；根据所述唯一标识以及所述组件的位置坐标，对所述编排画布的节点字段进行设置，得到所述第一字段的设置信息。

在一种实施方式中，第二字段设置单元，具体被配置为执行：接收用户在所述编排画布上输入的链接指令；确定所述链接指令在所述编排画布对应的起点位置坐标以及终点位置坐标；根据所述起始位置坐标以及所述终点位置坐标，确定所述链接指令对应的组件。

在一种实施方式中，所述编排画布的第二字段为边字段，则第二字段设置单元，具体被配置为执行：获取所述链接指令对应的组件的插槽信息；根据所述链接指令对应的组件的插槽信息，对所述编排画布的边字段进行设置。

在一种实施方式中，还包括分组字段设置单元，具体被配置为执行：接收用户在所述编排画布中输入的滑动指令；监控所述滑动指令在所述编排画布上的滑动轨迹；确定所述滑动轨迹在所述编排画布上所围成的区域；根据所述区域内包含的组件，对所述编排画布的分组字段进行设置。

根据本公开实施例的第三方面，提供一种可视化组件架构编排电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现上述第一方面中任一项可视化组件架构编排方法步骤。

根据本公开实施例的第四方面，提供一种存储介质，包括：当所述存储介质中的指令由可视化组件架构编排电子设备的处理器执行时，使得所述可视化组件架构编排电子设备能够执行上述第一方面中任一项可视化组件架构编排方法步骤。

根据本公开实施例的第五方面，提供一种计算机程序产品，包括：

当其在设备上运行时，使得项目打包设备执行：上述第一方面中任一项可视化组件架构编排方法步骤。

本公开的实施例提供的技术方案至少带来以下有益效果：

采用本公开实施例提供的可视化组件架构编排方法，用户可以直接通过拖拽的方式，在编排画布上实现组件框架的编排，当接收用户通过拖拽至少一个可视化组件至编排区域而触发的编排指令后，将创建编排画布，并确定与编排指令对应的可视化组件在所述编排画布中的位置坐标，进而根据编排指令对应的可视化组件以及可视化组件的位置坐标，对编排画布的第一字段进行设置，得到所述第一字段的设置信息，进而完成对编排画布中各节点位置的设置；后续当接收到用户输入的链接指令时，基于该链接指令对编排画布的第二字段进行设置，得到所述第二字段的设置信息，进而完成对编排画布中各节点之间连接方式的设置；最后根据第一字段以及第二字段的设置信息，对所述编排画布进行渲染，进而生成可视化的组件编排架构。用户编排的每个组件以及每个组件之间的连接关系都会实时展示在编排画布中，通过这种可视化的展示方式，用户可以直观地了解到整个组件框架的拓扑结构，进而很容易对组件框架中出现的问题进行定位，极大地提高了组件框架编排效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种可视化组件架构编排方法的流程图；

图2是根据一示例性实施例示出的一种可视化组件架构编排方法的流程图；

图3是根据一示例性实施例示出的一种可视化组件架构编排装置的框图；

图4是根据一示例性实施例示出的一种可视化组件架构编排电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

以下结合附图，详细说明本公开的实施例所提供的技术方案。

本公开的实施例提供了一种可视化组件架构编排方法，用以至少解决相关技术中提供的代码编排方式由于无法直观地了解整个组件框架的拓扑结构，导致不易进行问题定位，进而导致整个组件框架编排过程需要耗费大量的人力资源以及时间资源，效率极低的问题。

本公开的实施例提供的可视化组件架构编排方法的执行主体，可以但不限于为手机、平板电脑、个人电脑(Personal Computer，PC)、智能电视以及任何可以运行应用程序的终端设备中的至少一种。或者，该方法的执行主体也可以是安装在上述设备上的应用程序本身，比如，直播APP、短视频APP以及组件编排浏览器等。此外该方法的执行主体还可以是服务器，例如，直播APP的后台服务器、短视频APP的后台服务器以及组件编排浏览器的后台服务器，等等。

为便于描述，下文以该方法的执行主体为组件编排浏览器为例，对本公开的实施例所提供的可视化组件架构编排方法进行介绍。可以理解，该方法的执行主体为组件编排浏览器只是一种示例性的说明，并不应理解为对本公开实施例的限定。

图1是根据一示例性实施例示出的一种可视化组件架构编排方法的流程图，如图1所示，该可视化组件架构编排方法用于组件编排浏览器中，包括以下步骤：

在步骤S101中，接收用户通过拖拽至少一个组件至编排区域而触发的编排指令；

这里需要说明的是，在实际编排设计中，用户往往需要使用许多不同类型的组件，为了便于用户在编排设计时可以很方便地查看并选择自己需要使用的组件，在执行步骤S101之前，组件编排浏览器首先可以将用户需要使用的组件注册至对应的编排系统，并对已注册的组件进行展示，进而方便用户查看并选择需要使用的组件。

具体地，在本申请实施例中，可以采用下述方法进行组件注册：接收针对组件的注册指令；响应于所述注册指令，在编排系统中对所述组件进行注册，并将所述组件的描述文件保存在所述编排系统中。

在本申请实施例中，组件编排浏览器可以为用户提供组件管理窗口，进而用户可以通过该组件管理窗口进行组件的注册。需要说明的是，在进行组件注册时，除了需要输入组件的名称，组件编排浏览器还需要获取组件的基本信息，并基于用户输入的组件基本信息生成该组件的描述文件，并将该描述文件与该组件一并关联保存在编程系统中，在本申请实施例中，该描述文件中保存有该组件的名称、插槽信息、配置参数以及运行方式等信息。

在本申请实施例中，组件编排浏览器可以对组建的描述文件进行展示，以便用户根据组件的描述文件，选择合适的组件进行编排设计。

在一种实施方式中，组件编排浏览器可以在显示界面上为用户展示至少两个可操作区域，分别为已注册组件展示区域以及组件编排区域，在本申请实施例中，组件编排程序所展示的两个可操作区域由网络产品界面设计技术(Website User Interface，webUI)实现，具体展示界面如图2所示，图2中左侧为已注册组件展示区，其中展示有已在组件编程程序对应的编程系统中注册的组件，在已注册组件展示区中展示有已注册组件的名称、ID以及相关描述信息，以方便用户选择组件；图2中右侧为组件编排区域，该组件编排区域为利用可伸缩矢量图形(Scalable Vector Graphics，SVG)技术实现的图形编辑画布，进而用户可以在该编排区域进行组件编排，并利用图形画布的渲染，通过可视化的方式直观地展示出已编排的组件架构。

在通过上述步骤完成组件注册后，组件编排浏览器可以在图2的已注册组件展示区中展示组件，并在接收到用户针对已注册组件展示区组件的选择拖拽指令后，对用户的拖拽轨迹进行监测，当监测到用户的拖拽轨迹进入编排区域后，则触发编排指令。

在步骤S102中，响应于通过执行步骤S101获取到的编排指令，组件编排浏览器创建编排画布，并确定与该编排指令对应的组件在编排画布中的位置坐标；

具体地，在本申请实施例中，组件编排浏览器可以基于数据驱动文档(Data-Driven Documents，D3.js)编排区域生成编排画布。其中，D3.js是一个JavaScript库，利用现有的Web标准，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据通过图形图表的形式鲜活形象地展现出来。

这里需要说明的是，为了便于对用户拖拽至编排画布上节点的渲染，组件编排浏览器需要对用户拖拽至编排画布上的组件的位置坐标进行确定。具体地，在本申请实施例中，可以采用下述方案确定组件在编排画布中的位置：接收用户针对所述编排系统中组件的选择指令；针对所述选择指令对应的组件设置拖拽事件；监控所述拖拽事件在所述编排画布上的移动轨迹；根据所述移动轨迹确定所述编排指令对应的组件在所述编排画布中的位置坐标。

本申请实施例中，组件编排浏览器上预先设置有操作行为监听模块，通过该操作行为监听模块可以对用户针对可操作区域的操作行为进行监听。比如，当组件编排浏览器通过该监听模块监听到用户针对已注册组件展示区域中所展示的某个组件的选择指令(比如通过鼠标点击触发)后，监听模块会向浏览器发送提醒消息，则组件编程浏览器可以响应于该消息，针对用户选择的组件创建拖拽事件，并进一步通过该监听模块对该拖拽事件在编排画布上的移动轨迹进行监控，当监听模块监听到释放鼠标行为操作时，则可以确定该拖拽事件终止，并向组件编排浏览器上传释放鼠标操作对应的位置坐标，进而组件编排浏览器可以将释放鼠标操作对应的位置坐标确定为编排指令对应的组件在该编排画布中的位置坐标。

在步骤S103中，根据通过执行步骤S102确定的编排指令对应的组件以及该组件的位置坐标，对编排画布的第一字段进行设置，得到所述第一字段的设置信息；

在本申请实施例中，由于需要使用通过执行步骤S102创建的编排画布进行组件架构的编排，因而组件编排浏览器需要预先对编排画布的数据结构进行定义，以使得后续可以通过该预先定义好的数据结构，对组件的编排架构进行描述。

具体地，在本申请实施例中，可以按照如下方式对数据结构进行定义，主要分为以下五个部分：

第一部分，结构如下：

其中，Slot表示整个组件架构包含的插槽，id表示插槽在该编排画布对应的组件架构中的唯一标识，name表示该插槽的名称，type表示该插槽的类型。

第二部分，结构如下：

其中，Node：表示在整个组件架构中的一个节点，即对应于一个组件，id表示该组件在该编排画布中的唯一标识，name表示该组件的名称，“operatorId”表示该组件对应的算子代码的标识，“operatorVersion”表示该组件对应的算子代码的版本号，“inputSlots”表示该组件对应的输入插槽列表，“outputSlots”表示该组件对应的输出插槽列表，“x，y”则表示该组件在编程画布上的位置坐标。

第三部分，结构如下：

其中，Edge表示在整个组件架构中连接两个节点的边，标识了两个组件间的通信关系，id表示该条边的唯一标识，source表示该条边的起始位置，nodeId表示该条边起始位置对应的组件的ID，slotId表示该条边起始位置对应的插槽ID；target表示该条边的终止位置，nodeId表示该条边终止位置对应的组件的ID，slotId表示该条边终止位置对应的插槽ID。

第四部分，结构如下：

其中，Group表示在整个组件框架中组件的分组，name表示该分组的名称，nodeIds中记录有该分组中所包含所有组件的ID。

第五部分，结构如下：

其中，Graph表示当前编排画布，translate表示用户编排的组价拓扑图在整个编排画布中的位置。

在本申请实施例中，编排画布的第一字段对应于上述数据结构的第二部分表示节点的部分，即节点字段，则具体可以按照下述方式对编排画布的第一字段进行设置：针对所述编排指令对应的组件分配唯一标识；根据所述唯一标识以及所述组件的位置坐标，对所述编排画布的节点字段进行设置。

具体地，可以按照该组件的名称，对第二部分节点字段中“name”字段的参数进行设置；按照通过执行步骤S102确定的该组件在编排画布上的位置坐标，对第二部分节点字段中“x，y”字段进行设置；为该组件分配唯一标识，并根据该唯一标识，对第二部分节点字段中“id”字段的参数进行设置。

通过执行上述步骤S103，组件编排浏览器获取到了用户拖拽组件在编排画布上的坐标信息，则此时组件编排浏览器可以对给编排画布进行渲染，进而该组件可以以节点的形式，直观地显示在编排画布上。

在在步骤S104中，接收用户输入的链接指令，并根据所述链接指令对所述编排画布的第二字段进行设置，得到所述第二字段的设置信息；

在本申请实施例中，用户可以通过在组件编排浏览器的编排区域输入滑动操作的方式，来触发链接指令，组件编排浏览器通过预先设置的监听模块对用户滑动操作对应的滑动轨迹进行监听，以确定滑动轨迹的起始位置坐标以及终点位置坐标，进而根据起始位置坐标、终点位置坐标以及组件坐标，分别确定该滑动轨迹的起始点以及终点对应的组件，进而组件编排浏览器可以据此确定出该链接指令所对应的组件。

在一种实施方式中，具体可以按照下述方法确定链接指令对应的组件：接收用户在所述编排画布上输入的链接指令；确定所述链接指令在所述编排画布对应的起点位置坐标以及终点位置坐标；根据所述起始位置坐标以及所述终点位置坐标，确定所述链接指令对应的组件。

在本申请实施例中，编排画布的第二字段对应于上述数据结构的第三部分表示边的部分，即边字段，则具体可以按照下述方式对编排画布的第二字段进行设置：获取所述链接指令对应的组件的插槽信息；根据所述链接指令对应的组件的插槽信息，对所述编排画布的边字段进行设置。

具体地，组件编排浏览器可以根据链接指令在编排画布对应的起点位置坐标以及终点位置坐标，确定该链接指令对应的组件以及与该链接指令对应的插槽信息，进而根据与起点位置坐标对应的组件以及该组件的插槽信息，对第三部分中的“source”字段的参数进行设置；并根据与终点位置坐标对应的组件以及该组件的插槽信息，对第三部分中的“target”字段的参数进行设置。

这里还需要说明的是，用户除了可以通过在编排画布上输入滑动操作来触发链接指令，以对编排画布中各个组件进行编排链接外，还可以通过滑动操作的方式，对编程画布中的组件进行分组，具体地，在一种实施方式中，可以按照下述方式进行组件分组：接收用户在所述编排画布中输入的滑动指令；监控所述滑动指令在所述编排画布上的滑动轨迹；确定所述滑动轨迹在所述编排画布上所围成的区域；根据所述区域内包含的组件，对所述编排画布的分组字段进行设置。

则当组件编排浏览器监控用户在编排画布通过滑动轨迹围出一个区域后，可以确定该滑动轨迹所围区域内所包含的组件，进而根据该组件，对上述数据结构中的第四部分分组字段进行设置，具体地，组件编排浏览器可以为该分组分配一个唯一标识，并将该唯一标识设置为该分组的name字段，并根据该区域所围的组件的ID设置nodeIds字段。

在在步骤S105中，按照通过执行上述步骤S103～步骤S104确定的第一字段以及所述第二字段的设置信息，对编排画布进行渲染，生成可视化组件编排架构。

组件编排浏览器在获取到了用户拖拽组件在编排画布上的坐标信息以及各组件之间的连接关系后，可以对给编排画布进行渲染，进而可以将组件编排架构以节点和连接边的形式，直观地显示在编排画布上，进而用户可以直观地了解到整个组件框架的拓扑结构。

采用本公开实施例提供的可视化组件架构编排方法，用户可以直接通过拖拽的方式，在编排画布上实现组件框架的编排，当接收用户通过拖拽至少一个可视化组件至编排区域而触发的编排指令后，将创建编排画布，并确定与编排指令对应的可视化组件在所述编排画布中的位置坐标，进而根据编排指令对应的可视化组件以及可视化组件的位置坐标，对编排画布的第一字段进行设置，进而完成对编排画布中各节点位置的设置；后续当接收到用户输入的链接指令时，基于该链接指令对编排画布的第二字段进行设置，进而完成对编排画布中各节点之间连接方式的设置；最后根据第一字段以及第二字段的设置信息，对所述编排画布进行渲染，进而生成可视化的组件编排架构。用户编排的每个组件以及每个组件之间的连接关系都会实时展示在编排画布中，通过这种可视化的展示方式，用户可以直观地了解到整个组件框架的拓扑结构，进而很容易对组件框架中出现的问题进行定位，极大地提高了组件框架编排效率。

图3是根据一示例性实施例示出的一种可视化组件框架编排装置框图，用以至少解决相关技术中提供的代码编排方式由于无法直观地了解整个组件框架的拓扑结构，导致不易进行问题定位，进而导致整个组件框架编排过程需要耗费大量的人力资源以及时间资源，效率极低的问题。参照图3，该装置包括编排指令接收单元121，编排画布创建单元122、第一字段设置单元123、第二字段设置单元124以及渲染单元125。

其中，该编排指令接收单元121，被配置为执行接收用户通过拖拽至少一个组件至编排区域而触发的编排指令；

编排画布创建单元122，被配置为执行响应于所述编排指令，创建编排画布，并确定与所述编排指令对应的组件在所述编排画布中的位置坐标；

第一字段设置单元123，被配置为执行根据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息；

第二字段设置单元124，被配置为执行接收用户输入的链接指令，并根据所述链接指令对所述编排画布的第二字段进行设置，得到所述第二字段的设置信息；

渲染单元125，被配置为执行按照所述第一字段以及所述第二字段的设置信息，对所述编排画布进行渲染，生成可视化组件编排架构。

在一种实施例中，还包括注册单元，具体被配置为执行：接收针对组件的注册指令；响应于所述注册指令，在编排系统中对所述组件进行注册，并将所述组件的描述文件保存在所述编排系统中；其中，所述描述文件中保存有所述组件的名称、插槽信息、配置参数以及运行方式。

在一种实施例中，编排画布创建单元122，具体被配置为执行：接收用户针对所述编排系统中组件的选择指令；针对所述选择指令对应的组件设置拖拽事件；监控所述拖拽事件在所述编排画布上的移动轨迹；根据所述移动轨迹确定所述编排指令对应的组件在所述编排画布中的位置坐标。

在一种实施例中，所述编排画布的第一字段为节点字段；则第一字段设置单元123，具体被配置为执行：针对所述编排指令对应的组件分配唯一标识；根据所述唯一标识以及所述组件的位置坐标，对所述编排画布的节点字段进行设置。

在一种实施例中，第二字段设置单元124，具体被配置为执行：接收用户在所述编排画布上输入的链接指令；确定所述链接指令在所述编排画布对应的起点位置坐标以及终点位置坐标；根据所述起始位置坐标以及所述终点位置坐标，确定所述链接指令对应的组件。

在一种实施例中，所述编排画布的第二字段为边字段，则第二字段设置单元124，具体被配置为执行：获取所述链接指令对应的组件的插槽信息；根据所述链接指令对应的组件的插槽信息，对所述编排画布的边字段进行设置。

在一种实施方式中，还包括分组字段设置单元，具体被配置为执行：接收用户在所述编排画布中输入的滑动指令；监控所述滑动指令在所述编排画布上的滑动轨迹；确定所述滑动轨迹在所述编排画布上所围成的区域；根据所述区域内包含的组件，对所述编排画布的分组字段进行设置。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

采用本公开实施例提供的可视化组件架构编排装置，用户可以直接通过拖拽的方式，在编排画布上实现组件框架的编排，当接收用户通过拖拽至少一个可视化组件至编排区域而触发的编排指令后，将创建编排画布，并确定与编排指令对应的可视化组件在所述编排画布中的位置坐标，进而根据编排指令对应的可视化组件以及可视化组件的位置坐标，对编排画布的第一字段进行设置，得到所述第一字段的设置信息，进而完成对编排画布中各节点位置的设置；后续当接收到用户输入的链接指令时，基于该链接指令对编排画布的第二字段进行设置，得到所述第二字段的设置信息，进而完成对编排画布中各节点之间连接方式的设置；最后根据第一字段以及第二字段的设置信息，对所述编排画布进行渲染，进而生成可视化的组件编排架构。用户编排的每个组件以及每个组件之间的连接关系都会实时展示在编排画布中，通过这种可视化的展示方式，用户可以直观地了解到整个组件框架的拓扑结构，进而很容易对组件框架中出现的问题进行定位，极大地提高了组件框架编排效率。

图4是根据一示例性实施例示出的一种用于可视化组件架构编排电子设备400的结构示意图。请参考图4，在硬件层面，该可视化组件架构编排电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图4中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括内存和非易失性存储器，并向处理器提供指令和数据。

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成可视化组件架构编排装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

接收用户通过拖拽至少一个组件至编排区域而触发的编排指令；响应于所述编排指令，创建编排画布，并确定与所述编排指令对应的组件在所述编排画布中的位置坐标；根据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息；接收用户输入的链接指令，并根据所述链接指令对所述编排画布的第二字段进行设置，得到所述第二字段的设置信息；按照所述第一字段以及所述第二字段的设置信息，对所述编排画布进行渲染，生成可视化组件编排架构。

上述如本公开图4所示实施例揭示的可视化组件架构编排电子设备执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(CentralProcessing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific IntegratedCircuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

该电子设备还可执行图1的方法，并实现可视化组件架构编排装置在图1所示实施例中的功能，本公开实施例在此不再赘述。

当然，除了软件实现方式之外，本公开的电子设备并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器，上述指令可由电子设备400的处理器420执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种可视化组件架构编排方法，其特征在于，包括：

接收用户通过拖拽至少一个组件至编排区域而触发的编排指令；

响应于所述编排指令，创建编排画布，并确定与所述编排指令对应的组件在所述编排画布中的位置坐标；

根据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息；

接收用户输入的链接指令，并根据所述链接指令对所述编排画布的第二字段进行设置，得到所述第二字段的设置信息；

按照所述第一字段以及所述第二字段的设置信息，对所述编排画布进行渲染，生成可视化组件编排架构。

2.根据权利要求1所述的可视化组件架构编排方法，其特征在于，接收用户通过拖拽至少一个组件至编排区域而触发的编排指令前，还包括：

接收针对组件的注册指令；

响应于所述注册指令，在编排系统中对所述组件进行注册，并将所述组件的描述文件保存在所述编排系统中；

其中，所述描述文件中保存有所述组件的名称、插槽信息、配置参数以及运行方式。

3.根据权利要求2所述的可视化组件架构编排方法，其特征在于，确定与所述编排指令对应的组件在所述编排画布中的位置坐标，具体包括：

接收用户针对所述编排系统中组件的选择指令；

针对所述选择指令对应的组件设置拖拽事件；

监控所述拖拽事件在所述编排画布上的移动轨迹；

根据所述移动轨迹确定所述编排指令对应的组件在所述编排画布中的位置坐标。

4.根据权利要求1所述的可视化组件架构编排方法，其特征在于，所述编排画布的第一字段为节点字段；

则根据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息，具体包括：

针对所述编排指令对应的组件分配唯一标识；

根据所述唯一标识以及所述组件的位置坐标，对所述编排画布的节点字段进行设置，得到所述第一字段的设置信息。

5.根据权利要求1所述的可视化组件架构编排方法，其特征在于，接收用户输入的链接指令，具体包括：

接收用户在所述编排画布上输入的链接指令；

确定所述链接指令在所述编排画布对应的起点位置坐标以及终点位置坐标；

根据所述起始位置坐标以及所述终点位置坐标，确定所述链接指令对应的组件。

6.根据权利要求5所述的可视化组件架构编排方法，其特征在于，所述编排画布的第二字段为边字段；

则根据所述链接指令对所述编排画布的第二字段进行设置，具体包括：

获取所述链接指令对应的组件的插槽信息；

根据所述链接指令对应的组件的插槽信息，对所述编排画布的边字段进行设置。

7.根据权利要求1所述的可视化组件架构编排方法，其特征在于，还包括：

接收用户在所述编排画布中输入的滑动指令；

监控所述滑动指令在所述编排画布上的滑动轨迹；

确定所述滑动轨迹在所述编排画布上所围成的区域；

根据所述区域内包含的组件，对所述编排画布的分组字段进行设置。

8.一种可视化组件架构编排装置，其特征在于，包括：

编排指令接收单元，被配置为执行接收用户通过拖拽至少一个组件至编排区域而触发的编排指令；

编排画布创建单元，被配置为执行响应于所述编排指令，创建编排画布，并确定与所述编排指令对应的组件在所述编排画布中的位置坐标；

第一字段设置单元，被配置为执行根据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息；

第二字段设置单元，被配置为执行接收用户输入的链接指令，并根据所述链接指令对所述编排画布的第二字段进行设置，得到所述第二字段的设置信息；

渲染单元，被配置为执行按照所述第一字段以及所述第二字段的设置信息情况，对所述编排画布进行渲染，生成可视化组件编排架构。

9.一种可视化组件架构编排电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7中任一权项所述的可视化组件架构编排方法。

10.一种存储介质，当所述存储介质中的指令由可视化组件架构编排电子设备的处理器执行时，使得所述可视化组件架构编排电子设备能够执行如权利要求1至7中任一权项所述的可视化组件架构编排方法。

Images