技术摘要：
本公开关于一种可视化组件架构编排方法、装置、电子设备以及存储介质，用以至少解决相关技术中提供的代码编排方式由于无法直观地了解整个组件框架的拓扑结构，导致不易进行问题定位，进而导致整个组件框架编排过程需要耗费大量的人力资源以及时间资源，效率极低的问题  全部
背景技术：
随着互联网信息技术的飞速发展，终端设备的日益普及，而越来越多针对终端设 备的应用程序(Application，APP)被开发出来，极大地丰富了人们的生活，且逐渐成为人们 工作和生活中不可或缺的一部分。 而相关技术中，为了实现应用开发、业务处理以及数据分析等功能，往往需要开发 人员根据业务需要编写业务代码进而开发出对应的功能组件，再进一步通过编写代码，对 开发出的功能组件进行编排，以编排得到符合业务需要的组件框架。 而整个组件编排过程由于完全依赖于开发人员编写的代码实现，因而只有在组件 框架整体编排完成后，在实际运行测试中，才可以发现该组件框架所存在的编排不合理以 及代码错误等问题。由于整个组件的框架结构是通过代码实现的，在这种情况下，无法直观 地了解整个组件框架的拓扑结构，因而很难对错误代码进行定位，也很难查找出编排不合 理的地方，因而此时要想对该组件框架进行修改，则需要开发人员耗费大量的时间和精力 去排查定位问题，并重新编写代码进行组件编排。 由此可见，在相关技术中，通过编写代码实现组件框架编排的方式，由于完全依赖 于开发人员编写的代码实现，因而对开发人员的业务水平要求较高，且人工编写极易出现 代码编写错误、逻辑结构不合理的问题，而由于代码编排方式无法直观地了解整个组件框 架的拓扑结构，导致不易进行问题定位，进而导致整个组件框架编排过程需要耗费大量的 人力资源以及时间资源，效率极低。
技术实现要素：
本公开提供一种可视化组件框架编排方法、装置、电子设备以及存储介质，以至少 解决相关技术中提供的代码编排方式由于无法直观地了解整个组件框架的拓扑结构，导致 不易进行问题定位，进而导致整个组件框架编排过程需要耗费大量的人力资源以及时间资 源，效率极低的问题。本公开的技术方案如下： 根据本公开实施例的第一方面，提供一种可视化组件框架编排方法，包括： 接收用户通过拖拽至少一个组件至编排区域而触发的编排指令；响应于所述编排 指令，创建编排画布，并确定与所述编排指令对应的组件在所述编排画布中的位置坐标；根 据所述编排指令对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设 置，得到所述第一字段的设置信息；接收用户输入的链接指令，并根据所述链接指令对所述 编排画布的第二字段进行设置，得到所述第二字段的设置信息；按照所述第一字段以及所 述第二字段的设置信息，对所述编排画布进行渲染，生成可视化组件编排架构。 在一种实施方式中，接收用户通过拖拽至少一个组件至编排区域而触发的编排指 4 CN 111596913 A 说　明　书 2/12 页 令前，还包括：接收针对组件的注册指令；响应于所述注册指令，在编排系统中对所述组件 进行注册，并将所述组件的描述文件保存在所述编排系统中；其中，所述描述文件中保存有 所述组件的名称、插槽信息、配置参数以及运行方式。 在一种实施方式中，确定与所述编排指令对应的组件在所述编排画布中的位置坐 标，具体包括：接收用户针对所述编排系统中组件的选择指令；针对所述选择指令对应的组 件设置拖拽事件；监控所述拖拽事件在所述编排画布上的移动轨迹；根据所述移动轨迹确 定所述编排指令对应的组件在所述编排画布中的位置坐标。 在一种实施方式中，所述编排画布的第一字段为节点字段；则根据所述编排指令 对应的组件以及所述组件的位置坐标，对所述编排画布的第一字段进行设置，得到所述第 一字段的设置信息，具体包括：针对所述编排指令对应的组件分配唯一标识；根据所述唯一 标识以及所述组件的位置坐标，对所述编排画布的节点字段进行设置，得到所述第一字段 的设置信息。 在一种实施方式中，接收用户输入的链接指令，具体包括：接收用户在所述编排画 布上输入的链接指令；确定所述链接指令在所述编排画布对应的起点位置坐标以及终点位 置坐标；根据所述起始位置坐标以及所述终点位置坐标，确定所述链接指令对应的组件。 在一种实施方式中，所述编排画布的第二字段为边字段；则根据所述链接指令对 所述编排画布的第二字段进行设置，具体包括：获取所述链接指令对应的组件的插槽信息； 根据所述链接指令对应的组件的插槽信息，对所述编排画布的边字段进行设置。 在一种实施方式中，还包括：接收用户在所述编排画布中输入的滑动指令；监控所 述滑动指令在所述编排画布上的滑动轨迹；确定所述滑动轨迹在所述编排画布上所围成的 区域；根据所述区域内包含的组件，对所述编排画布的分组字段进行设置。 根据本公开实施例的第二方面，提供了一种可视化组件架构编排装置，包括： 编排指令接收单元，被配置为执行接收用户通过拖拽至少一个组件至编排区域而 触发的编排指令； 编排画布创建单元，被配置为执行响应于所述编排指令，创建编排画布，并确定与 所述编排指令对应的组件在所述编排画布中的位置坐标； 第一字段设置单元，被配置为执行根据所述编排指令对应的组件以及所述组件的 位置坐标，对所述编排画布的第一字段进行设置，得到所述第一字段的设置信息； 第二字段设置单元，被配置为执行接收用户输入的链接指令，并根据所述链接指 令对所述编排画布的第二字段进行设置，得到所述第二字段的设置信息； 渲染单元，被配置为执行按照所述第一字段以及所述第二字段的设置信息，对所 述编排画布进行渲染，生成可视化组件编排架构。 在一种实施方式中，还包括注册单元，具体被配置为执行：接收针对组件的注册指 令；响应于所述注册指令，在编排系统中对所述组件进行注册，并将所述组件的描述文件保 存在所述编排系统中；其中，所述描述文件中保存有所述组件的名称、插槽信息、配置参数 以及运行方式。 在一种实施方式中，编排画布创建单元，具体被配置为执行：接收用户针对所述编 排系统中组件的选择指令；针对所述选择指令对应的组件设置拖拽事件；监控所述拖拽事 件在所述编排画布上的移动轨迹；根据所述移动轨迹确定所述编排指令对应的组件在所述 5 CN 111596913 A 说　明　书 3/12 页 编排画布中的位置坐标。 在一种实施方式中，所述编排画布的第一字段为节点字段；则第一字段设置单元， 具体被配置为执行：针对所述编排指令对应的组件分配唯一标识；根据所述唯一标识以及 所述组件的位置坐标，对所述编排画布的节点字段进行设置，得到所述第一字段的设置信 息。 在一种实施方式中，第二字段设置单元，具体被配置为执行：接收用户在所述编排 画布上输入的链接指令；确定所述链接指令在所述编排画布对应的起点位置坐标以及终点 位置坐标；根据所述起始位置坐标以及所述终点位置坐标，确定所述链接指令对应的组件。 在一种实施方式中，所述编排画布的第二字段为边字段，则第二字段设置单元，具 体被配置为执行：获取所述链接指令对应的组件的插槽信息；根据所述链接指令对应的组 件的插槽信息，对所述编排画布的边字段进行设置。 在一种实施方式中，还包括分组字段设置单元，具体被配置为执行：接收用户在所 述编排画布中输入的滑动指令；监控所述滑动指令在所述编排画布上的滑动轨迹；确定所 述滑动轨迹在所述编排画布上所围成的区域；根据所述区域内包含的组件，对所述编排画 布的分组字段进行设置。 根据本公开实施例的第三方面，提供一种可视化组件架构编排电子设备，包括： 处理器； 用于存储所述处理器可执行指令的存储器； 其中，所述处理器被配置为执行所述指令，以实现上述第一方面中任一项可视化 组件架构编排方法步骤。 根据本公开实施例的第四方面，提供一种存储介质，包括：当所述存储介质中的指 令由可视化组件架构编排电子设备的处理器执行时，使得所述可视化组件架构编排电子设 备能够执行上述第一方面中任一项可视化组件架构编排方法步骤。 根据本公开实施例的第五方面，提供一种计算机程序产品，包括： 当其在设备上运行时，使得项目打包设备执行：上述第一方面中任一项可视化组 件架构编排方法步骤。 本公开的实施例提供的技术方案至少带来以下有益效果： 采用本公开实施例提供的可视化组件架构编排方法，用户可以直接通过拖拽的方 式，在编排画布上实现组件框架的编排，当接收用户通过拖拽至少一个可视化组件至编排 区域而触发的编排指令后，将创建编排画布，并确定与编排指令对应的可视化组件在所述 编排画布中的位置坐标，进而根据编排指令对应的可视化组件以及可视化组件的位置坐 标，对编排画布的第一字段进行设置，得到所述第一字段的设置信息，进而完成对编排画布 中各节点位置的设置；后续当接收到用户输入的链接指令时，基于该链接指令对编排画布 的第二字段进行设置，得到所述第二字段的设置信息，进而完成对编排画布中各节点之间 连接方式的设置；最后根据第一字段以及第二字段的设置信息，对所述编排画布进行渲染， 进而生成可视化的组件编排架构。用户编排的每个组件以及每个组件之间的连接关系都会 实时展示在编排画布中，通过这种可视化的展示方式，用户可以直观地了解到整个组件框 架的拓扑结构，进而很容易对组件框架中出现的问题进行定位，极大地提高了组件框架编 排效率。 6 CN 111596913 A 说　明　书 4/12 页 应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不 能限制本公开。 附图说明 此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施 例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。 图1是根据一示例性实施例示出的一种可视化组件架构编排方法的流程图； 图2是根据一示例性实施例示出的一种可视化组件架构编排方法的流程图； 图3是根据一示例性实施例示出的一种可视化组件架构编排装置的框图； 图4是根据一示例性实施例示出的一种可视化组件架构编排电子设备的框图。