CN116301798A - 核心组件库的可视化开发方法、装置、设备及存储介质 - Google Patents

Abstract

本公开关于一种核心组件库的可视化开发方法、装置、设备及存储介质，涉及计算机技术领域。方法包括：对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件；将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件；响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的组件进行属性配置；响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。可以对各单位的核心业务逻辑起到了保密作用，有效节省开发时间，真正实现了各单位协作的目的，也提高煤炭行业各单位工作效率，对煤炭行业可视化展示的规范统一奠定了基础。

Description

核心组件库的可视化开发方法、装置、设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种核心组件库的可视化开发方法、装置、设备及存储介质。

背景技术

由于不同开发语言、不同厂家可视化工具的差异，导致同一核心业务逻辑、同一动态组件需要编写多份代码来实现可视化，在不同可视化系统上需要构建多次可视化页面，且需要部署多套可视化工具，非常浪费开发时间，且效率低下。

发明内容

本公开旨在至少在一定程度上解决相关技术中的技术问题之一。

本公开第一方面实施例提出了一种核心组件库的可视化开发方法，包括：

对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件；

将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件；

响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置；

响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。

本公开第二方面实施例提出了一种核心组件库的可视化开发装置，包括：

生成模块，用于对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件；

第一展示模块，用于将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件；

属性配置模块，用于响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置；

第二展示模块，用于响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。

本公开第三方面实施例提出了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现如第一方面实施例提出的核心组件库的可视化开发方法。

本公开第四方面实施例提出了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面实施例所述的方法。

本公开第五方面实施例提出了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现如第一方面所述方法的步骤。

本公开实施例中，该装置可以首先对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件，然后将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件，之后响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置，然后响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。由此，可以对各单位的核心业务逻辑起到了保密作用，有效节省开发时间，真正实现了各单位协作的目的，也提高煤炭行业各单位工作效率，对煤炭行业可视化展示的规范统一奠定了基础。

本公开附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本公开的实践了解到。

附图说明

图1是根据本公开第一实施例的核心组件库的可视化开发方法的流程示意图；

图2是根据本公开第二实施例的核心组件库的可视化开发方法的流程示意图；

图3是根据本公开实施例的核心组件库的可视化开发装置的结构示意图；

图4示出了适于用来实现本公开实施方式的示例性电子设备的框图。

具体实施方式

下面详细描述本公开的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本公开，而不能理解为对本公开的限制。

本公开实施例以该核心组件库的可视化开发方法被配置于核心组件库的可视化开发装置中来举例说明，该核心组件库的可视化开发装置可以应用于任一电子设备中，以使该设备可以执行核心组件库的可视化开发功能。以下以“核心组件库的可视化开发装置”作为本公开第一实施例和本公开第二实施例所提供的核心组件库的可视化开发方法的执行主体，来进行说明。

下面参考附图描述本公开实施例的核心组件库的可视化开发方法、装置、设备及存储介质。

图1为本公开一实施例提供的一种核心组件库的可视化开发方法的流程示意图。如图1所示，该核心组件库的可视化开发方法可以包括以下步骤：

步骤101，对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件。

其中，vue组件是由按照规范编写的vue代码组成的。不同的煤矿井下场景、煤矿井下设备，以及同一煤矿工作设备的不同工作系统，其对应的vue组件通常是不同的，因而包含的数据信息也不同。

其中，编写vue组件时可以制定实时数据、样式数据、接口数据获取规则，在此不做限定。

vue是用于构建于用户界面的渐进式框架，是一种渐进式的JavaScript框架，主要关注于视图层。渐进式框架可以实现视图层渲染、组件、路由、状态管理。

可选的，可以利用前端打包工具webpack对当前编写好的vue组件进行打包，从而生成js文件。

其中，预设的组件制定规范可以为预先确定的vue组件的编码规范，比如样式编写规范、接口编写规范，等等，在此不做限定。

步骤102，将所述js文件与js文件对应的图片信息上传至图元管理模块,以在图元管理模块中展示当前新增的组件。

可选的，该装置可以根据所述js文件所属的动态组件的特征信息，将所述js文件上传至图元管理模块中对应的组别中。

需要说明的是，针对js文件所属的动态组件可以有不同的分组，具体可以根据js文件对应的特征信息，将js文件上传到对应分组的系统中。

其中，特征信息可以用于表征当前煤矿作业应用的场景、煤矿工作设备的类型，控制模式或者工作面、通讯方式、连接状态等等特征。不同的特征信息可以对应有不同的分组。

举例来说，若当前组别有15个，并且分为3个大组A、B、C，每个大组中包含有5个小组a,b,c,d,e,若当前的动态组件对应的特征信息为Aa，则可以将该js文件上传至大组A中的小组a，由此可以使得开发更加的规范化，提高开发效率，在此不做限定。

其中，图元管理模块可以支持对所述组件中各图元的查看、编辑、管理和展示。需要说明的是，一个动态组件中可以包含多个图元，在将js文件上传到图元管理模块之后，还可以对每个图元进行命名，也即名称的编写，并选择对应的图片，来表征该图元。

图元管理模块中包含有功能框，可以用于筛选、新增或者上传数据。另外，还可以基于表格形式对图元进行展示，以对图元进行查看和管理。

需要说明的是，通过可视化页面导入对应的图片，js文件等，可以将相关js文件加载到对应的系统中，支持图元的查询、编辑等操作。

步骤103，响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置。

具体的，js组件属性有对应的组件属性列表，可以对其进行新增及修改。

其中，属性配置文件中包含有待配置的属性参数，用户可以通过修改和设置属性参数，对js文件对应的所述组件进行属性配置。具体的，可以首先搜索js文件，然后点击修改，之后按照需求修改js属性，之后对属性信息进行保存。

为了实现可视化界面中的数据和传入js文件，可通过js属性设置。自定义js属性，则在可视化界面展示编辑、选择等内容，可以依据具体需求设置相关待传入参数。

步骤104，响应于组件在可视化界面中被选中，展示与js文件对应的属性信息。

可选的，该装置可以响应于组件被移动至所述可视化界面中的画布区，基于表格形式对所述组件对应的属性信息进行展示。

需要说明的是，新增的组件在可视化工具左侧组件库中，作为一个组件使用，可以拖动到画布区，并对右侧属性进行编写及配置，在配置完成后就可以实现动态组件的相关功能。

本公开实施例中，该装置可以首先对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件，然后将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件，之后响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置，然后响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。由此，可以对各单位的核心业务逻辑起到了保密作用，有效节省开发时间，真正实现了各单位协作的目的，也提高煤炭行业各单位工作效率，对煤炭行业可视化展示的规范统一奠定了基础。

图2为本公开第二实施例提供的一种核心组件库的可视化开发方法的流程示意图。如图2所示，该核心组件库的可视化开发方法可以包括以下步骤：

步骤201，对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件。

步骤202，将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件。

步骤203，响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置。

需要说明的是，步骤201、202、203的具体实现方式可以参照上述实施例，在此不进行赘述。

步骤204，将组件保存在可视化工具中的组件库中，并在所述可视化界面中进行显示。

需要说明的是，可视化工具中的组件库可以包含有多种组件，可以在生成该组件之后，将其保存在可视化工具中的组件库中，并在可视化界面进行展示。

步骤205，响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。

需要说明的是，步骤205的具体实现方式可以参照上述实施例，在此不进行赘述。

本公开实施例中，该装置首先对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件吗，然后将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件，之后响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置，然后将组件保存在可视化工具中的组件库中，并在所述可视化界面中进行显示，最后响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。由此，可以在一个可视化工具上，实现不同子系统不同业务人员，快速开发多子系统专业核心组件，实现多人协作，提升开发效率等功能，解决了煤炭行业不同厂家、不同子系统业务无法在一个可视化工具开发实现的问题；解决了不熟悉核心业务逻辑无法实现业务开发、可视化开发的问题。

图3是根据本公开实施例的核心组件库的可视化开发装置的结构示意图。

如图3所示，该核心组件库的可视化开发装置300包括：生成模块310、第一展示模块320、属性配置模块330，第二展示模块340。

生成模块，用于对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件；

第一展示模块，用于将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件；

属性配置模块，用于响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置；

第二展示模块，用于响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。

可选的，所述第一展示模块，具体用于:

根据所述js文件所属的动态组件的特征信息，将所述js文件上传至图元管理模块中对应的组别中。

可选的，所述图元管理模块支持对所述组件中各图元的查看、编辑、管理和展示。

可选的，所述第一展示模块，还用于：将所述组件保存在可视化工具中的组件库中，并在所述可视化界面中进行显示。

可选的，所述第二展示模块，还用于：响应于所述组件被移动至所述可视化界面中的画布区，基于表格形式对所述组件对应的属性信息进行展示。

本公开实施例中，该装置可以首先对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件，然后将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件，之后响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置，然后响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。由此，可以对各单位的核心业务逻辑起到了保密作用，有效节省开发时间，真正实现了各单位协作的目的，也提高煤炭行业各单位工作效率，对煤炭行业可视化展示的规范统一奠定了基础。

为了实现上述实施例，本公开还提出一种电子设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时，实现如本公开前述实施例提出的核心组件库的可视化开发方法。

为了实现上述实施例，本公开还提出一种非临时性计算机可读存储介质，存储有计算机程序，计算机程序被处理器执行时实现如本公开前述实施例提出的核心组件库的可视化开发方法。

为了实现上述实施例，本公开还提出一种计算机程序产品，当计算机程序产品中的指令处理器执行时，执行如本公开前述实施例提出的核心组件库的可视化开发方法。

图4示出了适于用来实现本公开实施方式的示例性电子设备的框图。图4显示的电子设备12仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图4所示，电子设备12以通用计算设备的形式表现。电子设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry StandardArchitecture，ISA)总线，微通道体系结构(Micro Channel Architecture，MAC)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，VESA)局域总线以及外围组件互连(Peripheral Component Interconnection，PCI)总线。

电子设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(Random Access Memory，RAM)30和/或高速缓存存储器32。电子设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如：光盘只读存储器(Compact Disc Read Only Memory，CD-ROM)、数字多功能只读光盘(Digital Video Disc Read Only Memory，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本公开各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本公开所描述的实施例中的功能和/或方法。

电子设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该电子设备12交互的设备通信，和/或与使得该电子设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，电子设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(Local Area Network，LAN)，广域网(Wide AreaNetwork，WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与电子设备12的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现前述实施例中提及的方法。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本公开的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本公开的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现定制逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本公开的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本公开的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本公开的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。如，如果用硬件来实现和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本公开各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。尽管上面已经示出和描述了本公开的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本公开的限制，本领域的普通技术人员在本公开的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种核心组件库的可视化开发方法，其特征在于，包括：

对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件；

将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件；

响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置；

响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。

2.根据权利要求1所述的方法，其特征在于，所述将所述js文件与所述js文件对应的图片信息上传至图元管理模块，包括:

根据所述js文件所属的动态组件的特征信息，将所述js文件上传至图元管理模块中对应的组别中。

3.根据权利要求1所述的方法，其特征在于，所述图元管理模块支持对所述组件中各图元的查看、编辑、管理和展示。

4.根据权利要求1所述的方法，其特征在于，在所述展基于所述属性配置文件对所述js文件对应的组件进行属性配置之后，还包括：

将所述组件保存在可视化工具中的组件库中，并在所述可视化界面中进行显示。

5.根据权利要求1所述的方法，其特征在于，所述响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息，包括：

响应于所述组件被移动至所述可视化界面中的画布区，基于表格形式对所述组件对应的属性信息进行展示。

6.一种煤炭行业核心组件库的可视化开发装置，其特征在于，包括：

生成模块，用于对当前根据预设的组件制定规范编写的vue组件进行打包，以生成js文件；

第一展示模块，用于将所述js文件与所述js文件对应的图片信息上传至图元管理模块,以在所述图元管理模块中展示当前新增的组件；

属性配置模块，用于响应于接收到与所述js文件对应的属性配置文件，基于所述属性配置文件对所述js文件对应的所述组件进行属性配置；

第二展示模块，用于响应于所述组件在可视化界面中被选中，展示与所述js文件对应的属性信息。

7.根据权利要求6所述的装置，其特征在于，所述第一展示模块，具体用于:

根据所述js文件所属的动态组件的特征信息，将所述js文件上传至图元管理模块中对应的组别中。

8.根据权利要求6所述的装置，其特征在于，所述图元管理模块支持对所述组件中各图元的查看、编辑、管理和展示。

9.一种电子设备，其特征在于，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现如权利要求1-5中任一所述的核心组件库的可视化开发方法。

10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-5中任一所述的核心组件库的可视化开发方法。

Images