CN115827140B - 可视化大屏的生成方法、装置、设备及存储介质 - Google Patents
可视化大屏的生成方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN115827140B CN115827140B CN202211641857.2A CN202211641857A CN115827140B CN 115827140 B CN115827140 B CN 115827140B CN 202211641857 A CN202211641857 A CN 202211641857A CN 115827140 B CN115827140 B CN 115827140B
- Authority
- CN
- China
- Prior art keywords
- plug
- field
- target
- plugin
- registered
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 60
- 230000000007 visual effect Effects 0.000 title claims abstract description 39
- 230000006870 function Effects 0.000 claims description 25
- 238000012545 processing Methods 0.000 claims description 19
- 238000005457 optimization Methods 0.000 claims description 16
- 238000009877 rendering Methods 0.000 claims description 13
- 238000012856 packing Methods 0.000 claims description 8
- 238000004806 packaging method and process Methods 0.000 claims description 7
- 230000008859 change Effects 0.000 claims description 3
- 230000008569 process Effects 0.000 abstract description 2
- 238000004891 communication Methods 0.000 description 10
- 238000011161 development Methods 0.000 description 8
- 238000010586 diagram Methods 0.000 description 8
- 238000012986 modification Methods 0.000 description 7
- 230000004048 modification Effects 0.000 description 7
- 230000003993 interaction Effects 0.000 description 6
- 238000007726 management method Methods 0.000 description 6
- 238000004590 computer program Methods 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 2
- 230000001419 dependent effect Effects 0.000 description 2
- 238000004880 explosion Methods 0.000 description 2
- 230000008447 perception Effects 0.000 description 2
- 238000011160 research Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 230000008901 benefit Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Stored Programmes (AREA)
Abstract
本申请提供一种可视化大屏的生成方法、装置、设备及存储介质，涉及软件领域，该方法包括：获取目标插件的插件信息；目标插件为文件服务器中的插件；文件服务器包括多个插件；多个插件中的每个插件各自对应一种图表；插件信息用于指示插件的文件地址；基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表。该方法适用于可视化大屏的生成过程中，用于提高交付产品的灵活性。
Description
技术领域
本申请涉及软件领域，尤其涉及一种可视化大屏的生成方法、装置、设备及存储介质。
背景技术
随着云计算及大数据时代的到来，数据信息呈现出爆炸发展的态势，如何提取并展示海量数据中的有效信息已成为各行业的研究热点。其中，可视化是大数据生态链的最后一公里，也是用户最直接感知数据的环节，而可视化大屏作为最直观、最有效的信息传递方式，成为了一种主流的数据展示方式。
在可视化大屏产品中，图表是组成可视化大屏的基本单元。图表组件的数量以及灵活度会决定可视化大屏最终的呈现效果，所以图表组件经常会遇到定制化需求。
因此，如何灵活地满足各种定制化需求就成了亟需解决的问题。
发明内容
基于上述技术问题，本申请提供一种可视化大屏的生成方法、装置、设备及存储介质，可以通过将图表组件插件化来将可视化大屏中的主程序和图表可以完全解耦，提高了可视化大屏生成的灵活性。
第一方面，本申请提供一种可视化大屏的生成方法，该方法包括：获取目标插件的插件信息；目标插件为文件服务器中的插件；文件服务器包括多个插件；多个插件中的每个插件各自对应一种图表；插件信息用于指示插件的文件地址；基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表。
一种可能的实现方式中，获取目标插件的插件信息，包括：获取目标插件的唯一标识pluginCode；基于目标插件的唯一标识和预设的插件列表，确定目标插件的插件信息；插件列表用于指示pluginCode和插件信息的对应关系；插件信息包括插件主入口文件的加载地址path、插件容器名称containerName、导出的模块名称exposedModule、以及插件在代码中的组件名称ngModuleName。
一种可能的实现方式中，该方法应用于Angular架构中；基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表，包括：根据预设的load函数和目标插件的插件信息，加载目标插件的组件代码；利用Angular架构内置的动态组件渲染方法和目标插件的插件代码生成组件实例，渲染出目标插件对应的图表。
可选地，该方法应用于Angular架构中；在获取目标插件的插件信息之前，该方法还包括：安装custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack；在webpack的配置文件中导入ModuleFederationPlugin；设置output、optimization、plugins三种字段；其中，output字段包括publicPath字段和uniqueName字段；publicPath字段被配置为auto；uniqueName字段被配置为当前插件包的名称；当前插件包包括一个或多个待注册插件；optimization字段包括runtimeChunk字段；runtimeChunk字段被配置为false；plugins字段包括如下字段：name字段，name字段与uniqueName字段相同；library字段，library字段包括type字段和name字段，type字段被配置为var；filename字段，filename字段用于表示需要加载的入口文件的文件名；exposes字段，exposes字段用于表示导出的组件对象；shared字段，shared字段用于指示共享依赖包的配置对象。
可选地，在设置output、optimization、plugins三种字段之后，该方法还包括：获取待注册插件；在Angular架构的应用程序目录下增加获取到的待注册插件；在exposes字段中增加获取到的待注册插件的名称和路径；将待注册插件打包为预设格式的压缩包，得到插件包。
可选地，在将待注册插件打包为预设格式的压缩包，得到插件包之后，该方法还包括：获取插件包中的待注册插件的唯一标识和插件信息；插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containerName、导出的模块名称exposedModule、以及待注册插件在代码中的组件名称ngModuleName；建立待注册插件的唯一标识和插件信息之间的对应关系，以完成待注册插件的注册。
本申请实施例提供的可视化大屏的生成方法中，电子设备可以获取目标插件的插件信息，并基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表，插件的逻辑和样式都包含在单个组件中，开发方式更加灵活，目录管理更加清晰，主程序和图表库可以做到完全解耦，有效降低技术人员对产品的开发和维护成本，提高了产品交付的灵活性。
此外，本申中所有的图表库都可以写成插件包，并通过编译打包上传的方式进行更新，而不需要再对整个应用程序版本升级，从而减少了应用程序版本的迭代次数，可以有效提升产品的交付效率。
第二方面，本申请提供一种可视化大屏的生成装置，该装置包括用于之上第一方面所述的方法的各个单元。
第三方面，本申请提供一种计算机程序产品，当该计算程序产品在电子设备上运行时，使得电子设备执行上述第一方面所述相关方法的步骤，以实现上述第一方面所述的方法。
第四方面，本申请提供一种电子设备，该电子设备包括处理器和存储器；存储器中存储有处理器可执行的指令；处理器被配置为执行指令时，使得电子设备实现上述第一方面所述的方法。
第五方面，本申请提供一种可读存储介质，该可读存储介质包括：软件指令；当软件指令在电子设备中运行时，使得电子设备实现上述第一方面所述的方法。
上述第二方面至第五方面的有益效果可以参照第一方面所述，不再赘述。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的可视化大屏的生成系统的架构示意图；
图2为本申请实施例提供的电子设备的组成示意图
图3为本申实施例提供的可视化大屏的生成方法的流程示意图；
图4为本申请实施例提供的插件渲染流程示意图；
图5为本申请实施例提供的可视化大屏的生成装置的组成示意图。
具体实施方式
以下，术语“第一”、“第二”和“第三”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”或“第三”等的特征可以明示或者隐含地包括一个或者更多个该特征。
随着云计算及大数据时代的到来，数据信息呈现出爆炸发展的态势，如何提取并展示海量数据中的有效信息已成为各行业的研究热点。其中，可视化是大数据生态链的最后一公里，也是用户最直接感知数据的环节，而可视化大屏作为最直观、最有效的信息传递方式，成为了一种主流的数据展示方式。
在可视化大屏产品中，图表是组成可视化大屏的基本单元。图表组件的数量以及灵活度会决定可视化大屏最终的呈现效果，所以图表组件经常会遇到定制化需求。而传统的可视化大屏架构中主程序和图表库是耦合在一起的，图表组件的任何修改都必须联通主程序一起打包发布，每次发布又必须经过开发、测试、运维等多道程序，这会严重消耗构建资源以及影响产品的交付周期。
因此，如何灵活地满足各种定制化需求就成了亟需解决的问题。
基于此，本申请实施例提供一种可视化大屏的生成方法、装置、设备及存储介质，可以通过将图表组件插件化来将可视化大屏中的主程序和图表可以完全解耦，提高了可视化大屏生成的灵活性。
以下结合附图进行介绍。
图1为本申请实施例提供的可视化大屏的生成系统的架构示意图。如图1所示，该系统可以包括文件服务器100、主程序模块200、以及插件包模块300。文件服务器100、主程序模块200、以及插件包模块300之间可以通过有线网络或无线网络连接。
文件服务器100可以是计算机或服务器等具有计算功能的电子设备。其中，服务器可以是单独的一个服务器，或者，也可以是由多个服务器构成的服务器集群。部分实施方式中，服务器集群还可以是分布式集群。可选地，服务器还可以在云平台上实现，例如，云平台可以包括私有云、公有云、混合云、社区云(community cloud)、分布式云、跨云(inter-cloud)以及多云(multi-cloud)等，或者它们的任意组合。
文件服务器100用于存储在主程序模块200中注册过的插件。
主程序模块200对应的实体装置可以参照文件服务器100所述，不再赘述。
主程序模块200包括插件管理模块210和大屏编辑器220。
插件管理模块210包括如下功能：
1、插件上传：上传插件包以及插件信息的新增或更新。
2、插件列表：用于展示插件信息以及提供大屏编辑器220的插件列表数据。
3、插件新增：用于手动新增插件数据。
4、插件删除：用于删除插件信息。
5、插件修改：用于手动更新插件数据。
6、插件搜索：用于检索插件。
大屏编辑器220用于通过插件管理模块210展示的插件信息向文件服务器100调用目标插件。
管理模块210和大屏编辑器220的具体功能可以参照下述可视化大屏的生成方法中所述，此处不再赘述。
插件包模块300对应的实体装置也可以参照文件服务器100所述，不再赘述。
插件包模块300用于存储待注册插件。
需要说明的是，上述图1以文件服务器100、主程序模块200、以及插件包模块300为各自独立的装置为例示出，文件服务器100、主程序模块200、以及插件包模块300中的任意两者或三者也可以合设为一个装置，也即文件服务器100或对应的功能、主程序模块200或对应的功能、以及插件包模块300或对应的功能可以全部或部分集成在同一个装置上。本申实施例对此不作限制。
本申请实施例提供的可视化大屏的生成方法的执行主体可以是上述主程序模块200，如上所述，主程序模块200可以是计算机或者服务器等具有计算处理功能的电子设备。
可选地，本申请实施例提供的可视化大屏的生成方法的执行主体也可以是上述电子设备中的处理器；或者，上述电子设备中安装的提供可视化大屏的生成功能的应用程序(application，APP)；又或者，上述电子设备中用于执行可视化大屏的生成功能的功能模块等。本申请实施例对此不作限制。
为了描述简单，以下统一以电子设备为执行主体进行介绍。
图2为本申请实施例提供的电子设备的组成示意图。如图2所示，该电子设备可以包括：处理器10、存储器20、通信线路30、通信接口40以及输入输出接口50。
其中，处理器10、存储器20、通信接口40以及输入输出接口50之间可以通过通信线路30连接。
处理器10，用于执行存储器20中存储的指令，以实现本申请下述实施例提供的可视化大屏的生成方法。处理器10可以是中央处理器(central processing unit，CPU)、通用处理器网络处理器(network processor，NP)、数字信号处理器(digital signalprocessing，DSP)、微处理器、微控制器(micro control unit，MCU)/单片微型计算机(single chip microcomputer)/单片机、可编程逻辑器件(programmable logic device，PLD)或它们的任意组合。处理器10还可以是其它任意具有处理功能的装置，例如电路、器件或软件模块，本申请实施例对此不作限制。在一种示例中，处理器10可以包括一个或多个CPU，例如图2中的CPU0和CPU1。作为一种可选的实现方式，图像显示装置可以包括多个处理器，例如，除处理器10之外，还可以包括处理器60(图2中以虚线为例示出)。
存储器20，用于存储指令。例如，指令可以是计算机程序。可选地，存储器20可以是只读存储器(read-only memory，ROM)或可存储静态信息和/或指令的其他类型的静态存储设备，也可以是存取存储器(random access memory，RAM)或者可存储信息和/或指令的其他类型的动态存储设备，还可以是电可擦可编程只读存储器(electrically erasableprogrammable read-only memory，EEPROM)、CD-ROM或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备等，本申请实施例对此不作限制。
需要说明的是，存储器20可以独立于处理器10存在，也可以和处理器10集成在一起。存储器20可以位于电子设备内，也可以位于电子设备外，本申请实施例对此不作限制。
通信线路30，用于在电子设备所包括的各部件之间传送信息。
通信接口40，用于与其他设备或其它通信网络进行通信。该其它通信网络可以为以太网，无线接入网(radio access network，RAN)，无线局域网(wireless local areanetworks，WLAN)等。通信接口40可以是模块、电路、收发器或者任何能够实现通信的装置。
输入输出接口50，用于实现用户和电子设备之间的人机交互。例如实现用户和电子设备之间的动作交互、文字交互或者语音交互等。
示例性地，输入输出接口50可以是键盘、或者鼠标等。通过键盘、或者鼠标等可以实现用户和电子设备之间的动作交互或文字交互。
需要说明的是，图2中示出的结构并不构成对电子设备的限定，除图2所示的部件之外，电子设备可以包括比图示更多或更少的部件，或者某些部件的组合，或者不同的部件布置。
下面结合附图对本申请实施例提供的可视化的大屏的生成方法进行介绍。
图3为本申实施例提供的可视化大屏的生成方法的流程示意图。如图3所示，该方法包括S101至S102。
S101、电子设备获取目标插件的插件信息。
其中，目标插件为文件服务器中的插件。文件服务器可以包括多个插件。该多个插件中的每个插件各自对应一种图表。插件信息用于指示插件(在文件服务器中的)文件地址。
例如，如上所述，电子设备可以包括输入输出接口，该输入输出接口可以包括鼠标、或者键盘等，电子设备可以通过鼠标、或者键盘等接收用户选择表插件的指令，并基于该选择执行确定目标插件。
一种可能的实现方式中，上述S101可以具体包括：电子设备获取目标插件的唯一标识pluginCode；电子设备基于目标插件的唯一标识和预设的插件列表，确定目标插件的插件信息。
其中，插件列表用于指示pluginCode和插件信息的对应关系。插件信息包括插件主入口文件的加载地址path、插件容器名称containerName、导出的模块名称exposedModule、以及插件在代码中的组件名称ngModuleName。
例如，电子设备可以将目标插件的唯一标识作为索引，遍历插件列表中的第一标识和插件信息的对应关系，确定插件列表中，目标插件的唯一标识对应的插件信息作为目标插件的插件信息。
示例性地，插件列表可以如下述表1所示。
表1
如表1所示，该表包括插件的唯一标识项、插件的主入口问价内的加载地址项、插件容器名称项、导出的模块名称项、插件在代码中的组件名称项。其中，插件的唯一标识项包括标识1、标识2、以及标识3。插件主入口文件的加载地址项包括地址1、地址2、以及地址3。插件容器名称项包括容器1、容器2、以及容器3。导出的模块名称项包括模块1、模块2、以及模块3。插件在代码中的组件名称项包括组件1、组件2、以及组件3。标识1、地址1、容器1、模块1、以及组件1之间具有对应关系；标识2、地址2、容器2、模块2、以及组件2之间具有对应关系；标识3、地址3、容器3、模块3、以及组件3之间具有对应关系。
S102、电子设备基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表。
一种可能的实现方式中，本申请实施例提供的可视化大屏的生成方法可以应用于Angular架构中。在这种情况下，上述S102可以具体包括：电子设备根据预设的load函数和目标插件的插件信息，加载目标插件的组件代码；电子设备利用Angular构架内置的动态组件渲染方法和目标插件的插件代码生成组件实例，渲染出目标插件对应的图表。
其中，Angular架构中预设的load函数和动态组件渲染方法可以参照相关技术中所述，此处不再赘述。
示例性地，图4为本申请实施例提供的插件渲染流程示意图。如图4所示，电子设备可以利用预设的load函数，根据插件信息中的path、containerName、exposedModule、以及ngModuleName，加载到文件服务器中目标插件的组件代码文件，并返回一个Promise对象，然后创建动态组件，使用Angular架构中内置的动态组件渲染方法生成组件实例，渲染出目标插件对应的图表。
一些可能的实施例中，在上述S101之前，电子设备还可以配置并获取插件包。在这种情况下，在上述S101之前，该方法还可以包括以下步骤：
步骤1、电子设备安装custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack。
步骤2、电子设备在webpack的配置文件中导入ModuleFederationPlugin。
步骤3、电子设备设置output、optimization、plugins三种字段。
其中，output字段包括publicPath字段和uniqueName字段；publicPath字段被配置为auto；uniqueName字段被配置为当前插件包的名称；当前插件包包括一个或多个待注册插件；
optimization字段包括runtimeChunk字段；runtimeChunk字段被配置为false；
plugins字段包括如下字段：
1)name字段，name字段与uniqueName字段相同；
2)library字段，library字段包括type字段和name字段，type字段被配置为var；
3)filename字段，filename字段用于表示需要加载的入口文件的文件名；
4)exposes字段，exposes字段用于表示导出的组件对象；
5)shared字段，shared字段用于指示共享依赖包的配置对象。对于Angular项目，主要设置@angular/core、@angular/common，rxjs三个包即可，如果有其它公共的依赖模块，也可以在此字段定义。
可选地，在上述步骤3之后，电子设备还可以获取插件包，该方法还可以包括如下步骤：
步骤1、电子设备获取待注册插件。
例如，电子设备可以通过上述输入输出接口接收管理人员输入的待注册插件。
步骤2、电子设备在Angular架构的应用程序(app)目录下增加获取到的待注册插件。
其中，每一个待注册插件都是一个Angular组件，电子设备可以使用ng g c[name]指令快速创建一个组件，开发方式遵循Angular规范。
步骤3、电子设备在exposes字段中增加获取到的待注册插件的名称和路径。
步骤4、电子设备将待注册插件打包为预设格式的压缩包，得到插件包。
例如，预设格式可以是.rar格式、或者.zip格式等。本申请实施例对此不作限制。
可选地，在获取插件包之后，电子设备还可以对插件包中的待注册插件进行注册。在这种情况下，该方法还可以包括如下步骤：
步骤1、电子设备获取插件包中的待注册插件的唯一标识和插件信息。
其中，插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containerName、导出的模块名称exposedModule、以及待注册插件在代码中的组件名称ngModuleName。
步骤2、电子设备建立待注册插件的唯一标识和插件信息之间的对应关系，以完成待注册插件的注册。
可选地，在电子设备对插件包中的待注册插件进行注册之前，还可以对主程序模块进行配置，具体步骤包括：
步骤1、custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack。
步骤2、在webpack的配置文件中导入ModuleFederationPlugin。
步骤3、设置output、optimization、plugins三种字段。
其中，output字段包括publicPath字段和uniqueName字段；publicPath字段被配置为auto；uniqueName字段可以随意配置，例如可以配置为app。optimization字段包括runtimeChunk字段，runtimeChunk字段被配置为false。Plugins字段包括shared字段，shared字段中依赖包的版本设置必须与插件包相同。
应理解，传统的前端插件结构主要使用类似RequireJS的模块加载器，通过注册信息加载对应的JS模块，然后浏览器渲染出对应的插件。而本申请所提供的架构方案可以完全自由地使用Angular开发，并且没有框架限制，比原生JS相比，可以更方便第处理数据以及DOM变更。
本申请实施例提供的可视化大屏的生成方法中，电子设备可以获取目标插件的插件信息，并基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表，插件的逻辑和样式都包含在单个组件中，开发方式更加灵活，目录管理更加清晰，主程序和图表库可以做到完全解耦，有效降低技术人员对产品的开发和维护成本，提高了产品交付的灵活性。
此外，本申中所有的图表库都可以写成插件包，并通过编译打包上传的方式进行更新，而不需要再对整个应用程序版本升级，从而减少了应用程序版本的迭代次数，可以有效提升产品的交付效率。
上述主要从方法的角度对本申请实施例提供的方案进行了介绍。为了实现上述功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术目标应该很容易意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术目标可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
在示例性的实施例中，本申实施例还提供一种可视化大屏的生成装置，图5为本申请实施例提供的可视化大屏的生成装置的组成示意图。如图5所示，该装置包括获取单元501和处理单元502。
获取单元501，用于获取目标插件的插件信息；所述目标插件为文件服务器中的插件；所述文件服务器包括多个插件；所述多个插件中的每个插件各自对应一种图表；所述插件信息用于指示插件的文件地址。
处理单元502，用于基于所述目标插件的插件信息所指示的所述目标插件的文件地址，从所述文件服务器中调用所述目标插件以显示所述目标插件对应的图表。
一些可能的实施例中，获取单元501，具体用于获取目标插件的唯一标识pluginCode；基于目标插件的唯一标识和预设的插件列表，确定目标插件的插件信息；插件列表用于指示pluginCode和插件信息的对应关系；插件信息包括插件主入口文件的加载地址path、插件容器名称containerName、导出的模块名称exposedModule、以及插件在代码中的组件名称ngModuleName。
另一些可能的实施例中，处理单元502，具体用于根据预设的load函数和目标插件的插件信息，加载目标插件的组件代码；利用Angular架构内置的动态组件渲染方法和目标插件的插件代码生成组件实例，渲染出目标插件对应的图表。
又一些可能的实施例中，处理单元502，还用于在获取单元获取目标插件的插件信息之前，安装custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack；在webpack的配置文件中导入ModuleFederationPlugin；设置output、optimization、plugins三种字段；其中，output字段包括publicPath字段和uniqueName字段；publicPath字段被配置为auto；uniqueName字段被配置为当前插件包的名称；当前插件包包括一个或多个待注册插件；optimization字段包括runtimeChunk字段；runtimeChunk字段被配置为false；plugins字段包括如下字段：name字段，name字段与uniqueName字段相同；library字段，library字段包括type字段和name字段，type字段被配置为var；filename字段，filename字段用于表示需要加载的入口文件的文件名；exposes字段，exposes字段用于表示导出的组件对象；shared字段，shared字段用于指示共享依赖包的配置对象。
又一些可能的实施例中，处理单元502，还用于在设置output、optimization、plugins三种字段之后，获取待注册插件；在Angular架构的应用程序目录下增加获取到的待注册插件；在exposes字段中增加获取到的待注册插件的名称和路径；将待注册插件打包为预设格式的压缩包，得到插件包。
又一些可能的实施例中，处理单元502，还用于在将待注册插件打包为预设格式的压缩包，得到插件包之后，获取插件包中的待注册插件的唯一标识和插件信息；插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containerName、导出的模块名称exposedModule、以及待注册插件在代码中的组件名称ngModuleName；建立待注册插件的唯一标识和插件信息之间的对应关系，以完成待注册插件的注册。
需要说明的是，图5中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如，还可以将两个或两个以上的功能集成在一个处理单元中。本申请实施例对此不作限制。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。
在示例性的实施例中，本申请实施例还提供了一种可读存储介质，包括：执行指令，当其在电子设备上运行时，使得电子设备执行上述实施例提供的任意一种方法。
在示例性的实施例中，本申请实施例还提供了一种包含计算机执行指令的计算机程序产品，当其在电子设备上运行时，使得电子设备执行上述实施例提供的任意一种方法。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件程序实现时，可以全部或部分地以计算机程序产品的形式来实现。该计算机程序产品包括一个或多个计算机执行指令。在计算机上加载和执行计算机执行指令时，全部或部分地产生按照本申请实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机执行指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，计算机执行指令可以从一个网站站点、计算机、服务器或者数据中心通过有线(例如同轴电缆、光纤、数字用户线(digital subscriber line，DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可以用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质(例如，软盘、硬盘、磁带)，光介质(例如，DVD)、或者半导体介质(例如固态硬盘(solid state disk，SSD))等。
尽管在此结合各实施例对本申请进行了描述，然而，在实施所要求保护的本申请过程中，本领域技术人员通过查看附图、公开内容、以及所附权利要求书，可理解并实现公开实施例的其他变化。在权利要求中，“包括”(Comprising)一词不排除其他组成部分或步骤，“一”或“一个”不排除多个的情况。单个处理器或其他单元可以实现权利要求中列举的若干项功能。相互不同的从属权利要求中记载了某些措施，但这并不表示这些措施不能组合起来产生良好的效果。
尽管结合具体特征及其实施例对本申请进行了描述，显而易见的，在不脱离本申请的精神和范围的情况下，可对其进行各种修改和组合。相应地，本说明书和附图仅仅是所附权利要求所界定的本申请的示例性说明，且视为已覆盖本申请范围内的任意和所有修改、变化、组合或等同物。显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何在本申请揭露的技术范围内的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应该以权利要求的保护范围为准。
Claims (8)
1.一种可视化大屏的生成方法，其特征在于，所述方法包括：
获取目标插件的插件信息；所述目标插件为文件服务器中的插件；所述文件服务器包括多个插件；所述多个插件中的每个插件各自对应一种图表；所述插件信息用于指示插件的文件地址；
基于所述目标插件的插件信息所指示的所述目标插件的文件地址，从所述文件服务器中调用所述目标插件以显示所述目标插件对应的图表；
其中：所述方法应用于Angular架构中，一个插件为一个Angular组件，一个插件的逻辑和样式包含在单个Angular组件中；
其中，所述基于所述目标插件的插件信息所指示的所述目标插件的文件地址，从所述文件服务器中调用所述目标插件以显示所述目标插件对应的图表，包括：
根据预设的load函数和所述目标插件的插件信息，加载所述目标插件的插件代码；
利用所述Angular架构内置的动态组件渲染方法和所述目标插件的插件代码生成组件实例，渲染出所述目标插件对应的图表；
其中，所述获取目标插件的插件信息，包括：
获取目标插件的唯一标识pluginCode；
基于所述目标插件的唯一标识和预设的插件列表，确定所述目标插件的插件信息；所述插件列表用于指示所述pluginCode和插件信息的对应关系；所述插件信息包括插件主入口文件的加载地址path、插件容器名称containerName、导出的模块名称exposedModule、以及插件在代码中的组件名称ngModuleName。
2.根据权利要求1所述的方法，其特征在于，所述方法应用于Angular架构中；在获取所述目标插件的插件信息之前，所述方法还包括：
安装custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack；
在所述webpack的配置文件中导入ModuleFederationPlugin；
设置output、optimization、plugins三种字段；
其中，所述output字段包括publicPath字段和uniqueName字段；所述publicPath字段被配置为auto；所述uniqueName字段被配置为当前插件包的名称；所述当前插件包包括一个或多个待注册插件；
所述optimization字段包括runtimeChunk字段；所述runtimeChunk字段被配置为false；
所述plugins字段包括如下字段：
name字段，所述name字段与所述uniqueName字段相同；
library字段，所述library字段包括type字段和所述name字段，所述type字段被配置为var；
filename字段，所述filename字段用于表示需要加载的入口文件的文件名；
exposes字段，所述exposes字段用于表示导出的组件对象；
shared字段，所述shared字段用于指示共享依赖包的配置对象。
3.根据权利要求2所述的方法，其特征在于，在所述设置output、optimization、plugins三种字段之后，所述方法还包括：
获取待注册插件；
在所述Angular架构的应用程序目录下增加获取到的待注册插件；
在所述exposes字段中增加获取到的待注册插件的名称和路径；
将所述待注册插件打包为预设格式的压缩包，得到插件包。
4.根据权利要求3所述的方法，其特征在于，在所述将所述待注册插件打包为预设格式的压缩包，得到插件包之后，所述方法还包括：
获取所述插件包中的待注册插件的唯一标识和插件信息；所述插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containerName、导出的模块名称exposedModule、以及待注册插件在代码中的组件名称ngModuleName；
建立所述待注册插件的唯一标识和插件信息之间的对应关系，以完成所述待注册插件的注册。
5.一种可视化大屏的生成装置，其特征在于，所述装置包括：获取单元和处理单元；
所述获取单元，用于获取目标插件的插件信息；所述目标插件为文件服务器中的插件；所述文件服务器包括多个插件；所述多个插件中的每个插件各自对应一种图表；所述插件信息用于指示插件的文件地址；
所述获取单元，具体用于获取目标插件的唯一标识pluginCode；基于所述目标插件的唯一标识和预设的插件列表，确定所述目标插件的插件信息；所述插件列表用于指示所述pluginCode和插件信息的对应关系；所述插件信息包括插件主入口文件的加载地址path、插件容器名称containerName、导出的模块名称exposedModule、以及插件在代码中的组件名称ngModuleName；
所述处理单元，用于基于所述目标插件的插件信息所指示的所述目标插件的文件地址，从所述文件服务器中调用所述目标插件以显示所述目标插件对应的图表；
一个插件为一个Angular组件，一个插件的逻辑和样式包含在单个Angular组件中；所述处理单元，具体用于根据预设的load函数和所述目标插件的插件信息，加载所述目标插件的插件代码；利用Angular架构内置的动态组件渲染方法和所述目标插件的插件代码生成组件实例，渲染出所述目标插件对应的图表。
6.根据权利要求5所述的装置，其特征在于，
所述处理单元，还用于在所述获取单元获取所述目标插件的插件信息之前，安装custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack；在所述webpack的配置文件中导入ModuleFederationPlugin；设置output、optimization、plugins三种字段；其中，所述output字段包括publicPath字段和uniqueName字段；所述publicPath字段被配置为auto；所述uniqueName字段被配置为当前插件包的名称；所述当前插件包包括一个或多个待注册插件；所述optimization字段包括runtimeChunk字段；所述runtimeChunk字段被配置为false；所述plugins字段包括如下字段：name字段，所述name字段与所述uniqueName字段相同；library字段，所述library字段包括type字段和所述name字段，所述type字段被配置为var；filename字段，所述filename字段用于表示需要加载的入口文件的文件名；exposes字段，所述exposes字段用于表示导出的组件对象；shared字段，所述shared字段用于指示共享依赖包的配置对象；
和/或，
所述处理单元，还用于在所述设置output、optimization、plugins三种字段之后，获取待注册插件；在所述Angular架构的应用程序目录下增加获取到的待注册插件；在所述exposes字段中增加获取到的待注册插件的名称和路径；将所述待注册插件打包为预设格式的压缩包，得到插件包；
和/或，
所述处理单元，还用于在所述将所述待注册插件打包为预设格式的压缩包，得到插件包之后，获取所述插件包中的待注册插件的唯一标识和插件信息；所述插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containerName、导出的模块名称exposedModule、以及待注册插件在代码中的组件名称ngModuleName；建立所述待注册插件的唯一标识和插件信息之间的对应关系，以完成所述待注册插件的注册。
7.一种电子设备，其特征在于，所述电子设备包括：处理器和存储器；
所述处理器被配置为执行所述存储器存储的指令时，使得所述电子设备实现如权利要求1-4任一项所述的方法。
8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有软件指令；
当所述软件指令在电子设备中运行时，使得所述电子设备实现如权利要求1-4任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211641857.2A CN115827140B (zh) | 2022-12-20 | 2022-12-20 | 可视化大屏的生成方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211641857.2A CN115827140B (zh) | 2022-12-20 | 2022-12-20 | 可视化大屏的生成方法、装置、设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115827140A CN115827140A (zh) | 2023-03-21 |
| CN115827140B true CN115827140B (zh) | 2024-03-12 |
Family
ID=85517034
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211641857.2A Active CN115827140B (zh) | 2022-12-20 | 2022-12-20 | 可视化大屏的生成方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115827140B (zh) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107222542A (zh) * | 2017-06-08 | 2017-09-29 | 东华大学 | 一种云服务管理系统的构建方法 |
| CN109614158A (zh) * | 2017-09-30 | 2019-04-12 | 北京国双科技有限公司 | 一种插件的调用方法、系统、存储介质和处理器 |
| CN109656617A (zh) * | 2018-11-30 | 2019-04-19 | 武汉烽火信息集成技术有限公司 | 一种Web Service前端部署方法、存储介质、电子设备及系统 |
| CN110134457A (zh) * | 2019-04-17 | 2019-08-16 | 深圳壹账通智能科技有限公司 | 插件加载方法和装置 |
| CN112988862A (zh) * | 2021-02-09 | 2021-06-18 | 中国建设银行股份有限公司 | 一种可配置化的数据可视化方法和装置 |
| CN113867780A (zh) * | 2021-09-29 | 2021-12-31 | 京东方科技集团股份有限公司 | 一种业务集成方法、装置及存储介质 |
| CN115469937A (zh) * | 2022-09-09 | 2022-12-13 | 广州博冠信息科技有限公司 | 插件运行方法、装置、电子设备及存储介质 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8890890B2 (en) * | 2010-05-26 | 2014-11-18 | Microsoft Corp. | Pluggable web-based visualizations for applications |
| US11386114B2 (en) * | 2020-10-21 | 2022-07-12 | Adobe Inc. | Structure-based transformers with localization and encoding for chart question answering |
-
2022
- 2022-12-20 CN CN202211641857.2A patent/CN115827140B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107222542A (zh) * | 2017-06-08 | 2017-09-29 | 东华大学 | 一种云服务管理系统的构建方法 |
| CN109614158A (zh) * | 2017-09-30 | 2019-04-12 | 北京国双科技有限公司 | 一种插件的调用方法、系统、存储介质和处理器 |
| CN109656617A (zh) * | 2018-11-30 | 2019-04-19 | 武汉烽火信息集成技术有限公司 | 一种Web Service前端部署方法、存储介质、电子设备及系统 |
| CN110134457A (zh) * | 2019-04-17 | 2019-08-16 | 深圳壹账通智能科技有限公司 | 插件加载方法和装置 |
| CN112988862A (zh) * | 2021-02-09 | 2021-06-18 | 中国建设银行股份有限公司 | 一种可配置化的数据可视化方法和装置 |
| CN113867780A (zh) * | 2021-09-29 | 2021-12-31 | 京东方科技集团股份有限公司 | 一种业务集成方法、装置及存储介质 |
| CN115469937A (zh) * | 2022-09-09 | 2022-12-13 | 广州博冠信息科技有限公司 | 插件运行方法、装置、电子设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115827140A (zh) | 2023-03-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110019080B (zh) | 数据访问方法和装置 | |
| CN109542445A (zh) | 一种Android插件化开发的方法和装置 | |
| CN114942796B (zh) | 插件编译及调用方法、装置、设备及存储介质 | |
| CN106648755B (zh) | 一种在安卓art环境中动态加载dex的方法及装置 | |
| CN111324396A (zh) | 一种区块链智能合约执行方法、装置及设备 | |
| CN112769706B (zh) | 组件化路由方法及系统 | |
| CN112068850A (zh) | 服务产品实例的创建方法、装置及电子设备 | |
| CN112631649A (zh) | 智能合约管理方法、装置、终端设备及介质 | |
| CN109032693B (zh) | 一种加载展示信息方法、装置、电子设备及可读存储介质 | |
| CN110851211A (zh) | 用于显示应用信息的方法、装置、电子设备和介质 | |
| CN112346758B (zh) | 一种数字基建业务更新平台、更新方法及电子设备 | |
| KR20110130611A (ko) | 이기종 운영체제 계층 모듈에서 동작하는 웹기반어플리케이션의 연동이 가능한 모바일 단말기용 웹 플랫폼 유닛 | |
| CN115827140B (zh) | 可视化大屏的生成方法、装置、设备及存储介质 | |
| CN111488286A (zh) | 一种Android模块独立开发的方法及装置 | |
| CN110874365A (zh) | 一种信息查询方法及其相关设备 | |
| CN116069227A (zh) | 一种界面交互方法、装置、设备及存储介质 | |
| CN113726855B (zh) | 服务聚合方法、装置、电子设备以及计算机可读存储介质 | |
| CN115858007A (zh) | 扩展组件的加载方法和装置、存储介质及电子装置 | |
| CN115016862A (zh) | 基于Kubernetes集群的软件启动方法、装置、服务器及存储介质 | |
| CN113377415A (zh) | 应用发布方法及装置 | |
| CN112749189A (zh) | 数据查询方法及装置 | |
| CN113986207B (zh) | 一种软件架构生成、调用方法及装置 | |
| CN116578281B (zh) | 基于代码包的网页开发方法、系统、电子设备及存储介质 | |
| CN117555556A (zh) | 打包方法、装置、设备及存储介质 | |
| CN113391889A (zh) | 服务调用方法、装置、介质及电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |