A method and device for visualizing large screens
By registering and dynamically loading product-side business components on the visualization dashboard server, the problems of uncontrollable component display and slow loading in existing technologies are solved, achieving efficient component loading and user-customizable configuration, thus improving the user experience.
Patent Information
- Application Number
- CN202210255719.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-03-15
- Publication Date
- 2026-02-06
- Estimated Expiration
- 2042-03-15
AI Technical Summary
Existing visualization dashboard services cannot control the content displayed by business components, cannot support user-defined configuration of component styles and data, and the loading process of business components is slow, resulting in a poor user experience.
By acquiring the business component code, resources, and configuration information of each product and service development, these components are registered as page elements of the visualization dashboard. The target components are then dynamically loaded by calling the API through these page elements, and users can customize the data source URL, refresh time, and display style.
It achieves complete isolation and decoupling of business components on the visualization dashboard server, improves component loading efficiency, supports hot updates of individual business components without restarting the product-side service, meets user customization needs, and improves user experience.
Smart Images

Figure CN114741128B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of visual large screens, and in particular to a visual large screen management method and device. BACKGROUND
[0002] A visual large screen is a technology for displaying complex and abstract data in the form of graphics, tables and other easy-to-understand forms.
[0003] A visual large screen displays data through charts. Due to different businesses of various products, some specific style charts are needed to meet business requirements. These specific style charts are referred to as business components. These business components are registered to a large screen service with the installation of various products and are unloaded from the large screen service with the uninstallation of various products.
[0004] At present, various products register their independently developed business components to their own services. Each product registers a uniform resource locator URL of a business component to a visual large screen service. The visual large screen service dynamically loads the business component by using an iframe introduction method through the URL registered by each product.
[0005] However, since the business component is loaded by using the iframe introduction method, the visual large screen service cannot control the display content of the business component, cannot support user-defined configuration of component styles and data, cannot reflect the high customization characteristics of the visual large screen, and the business component loading process is slow and the user experience is poor through the access to the business component URL. SUMMARY
[0006] The present application provides a visual large screen management method and device.
[0007] In a first aspect, the present application provides a visual large screen management method applied to a visual large screen server side, and the method comprises the following steps.
[0008] Obtaining business component codes developed by various product services and resources and configuration information required for displaying the business components;
[0009] Registering each business component as a page element of the visual large screen based on a business component registration request;
[0010] If a target business component display instruction triggered by a user is received, a page element calling interface is used to call and load the target business component.
[0011] Optionally, the resources include fonts, pictures, js plug-ins, covers and component JSON fields; and the configuration information includes a data source URL of the displayed data, a data refresh time of the displayed data and a business component display style.
[0012] The step of obtaining the business component code developed by each product service and resource information required for displaying the business component includes:
[0013] Receiving the business component registration request sent by each product service end, wherein one business component registration request includes the business component code and the font, picture, js plug-in, cover, component JSON field required for displaying the business component, the data source URL of the displayed data, the data refresh time of the displayed data, and the business component display style.
[0014] Optionally, based on each business component registration request, the step of registering each business component as a page element of the visual large screen respectively includes:
[0015] Obtaining the business component code and the resource and configuration information required for displaying the business component from the business component registration request;
[0016] Registering the business component code and the resource and configuration information required for displaying the business component as Web Components of the visual large screen.
[0017] Optionally, the step of loading the target business component by calling the page element calling interface includes:
[0018] The target business component is dynamically loaded into the visual large screen page by loading Custom Elements.
[0019] Optionally, the method further includes:
[0020] If the instruction of modifying the data source URL, data refresh time and business component display style of the target business component triggered by the user is received, then the data source URL, data refresh time and business component display style of the target business component are modified based on the instruction.
[0021] In a second aspect, the present application provides a visual large screen management device applied to a visual large screen server, the device includes:
[0022] An obtaining unit is configured to obtain the business component code developed by each product service and resource and configuration information required for displaying the business component;
[0023] A registration unit is configured to register each business component as a page element of the visual large screen based on each business component registration request.
[0024] A loading unit is configured to load the target business component by calling the page element calling interface if the target business component display instruction triggered by the user is received.
[0025] Optionally, the resources include: a font, an image, a js plug-in, a cover, a component JSON field; and the configuration information includes: a data source URL of the displayed data, a data refresh time of the displayed data, and a business component display style.
[0026] When the business component code developed for each product service and the resource information required for displaying the business component are acquired, the acquisition unit is specifically configured to:
[0027] The business component registration request sent by each product service end is received, wherein one business component registration request includes the business component code and the font, image, js plug-in, cover, component JSON field required for displaying the business component, the data source URL of the displayed data, the data refresh time of the displayed data, and the business component display style.
[0028] Optionally, based on the business component registration request, each business component is registered as a page element of the visual large screen, and the registration unit is specifically configured to:
[0029] The business component code and the resource and configuration information required for displaying the business component are acquired from the business component registration request.
[0030] The business component code and the resource and configuration information required for displaying the business component are registered as Web Components of the visual large screen.
[0031] Optionally, when the target business component is loaded by calling the page element calling interface, the loading unit is specifically configured to:
[0032] The target business component is dynamically loaded into the visual large screen page by loading Custom Elements.
[0033] Optionally, the apparatus further includes:
[0034] The modification unit modifies the data source URL, data refresh time, and business component display style of the target business component based on the instruction if the instruction to modify the data source URL, data refresh time, and business component display style of the target business component triggered by the user is received.
[0035] In a third aspect, an embodiment of the present application provides a visual large screen management apparatus, which includes:
[0036] A memory configured to store program instructions;
[0037] A processor configured to call the program instructions stored in the memory and perform the steps of the method according to the obtained program instructions.
[0038] In a fourth aspect, the embodiments of the present application further provide a computer readable storage medium, which stores computer executable instructions for causing a computer to perform the steps of the method of any one of the above first aspect.
[0039] In summary, the visual large screen management method provided by the embodiments of the present application acquires the business component codes developed by each product service and the resources and configuration information required for displaying the business components; based on the registration requests of each business component, each business component is registered as a page element of the visual large screen; if a target business component display instruction triggered by a user is received, the target business component is loaded by using a page element calling interface.
[0040] By using the visual large screen management method provided by the embodiments of the present application, the business component codes and related resources and configurations developed by each product side are stored from the product service side to the visual large screen service side. When a certain business component needs to be displayed, the visual large screen service side does not need to access the URL of the business component, but can directly call the business component from the local, which greatly reduces the network request time, improves the business component loading efficiency, ensures that the large screen code and the business component code are completely isolated and decoupled, the business component is independently maintained by each product team, and the hot update of a single business component can be realized without restarting the product side service. BRIEF DESCRIPTION OF DRAWINGS
[0041] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings needed to be used in the description of the embodiments of the present application or the prior art. Obviously, the drawings in the following description are only some embodiments described in the present application, and other drawings can also be obtained by those skilled in the art according to these drawings of the embodiments of the present application.
[0042] Figure 1 A detailed flowchart of a visual large screen management method provided by the embodiments of the present application;
[0043] Figure 2 A structural schematic diagram of a visual large screen management device provided by the embodiments of the present application;
[0044] Figure 3 A structural schematic diagram of another visual large screen management device provided by the embodiments of the present application. DETAILED DESCRIPTION
[0045] The terminology used in the description of the application herein is for the purpose of describing particular embodiments only and is not intended to be limiting thereof. As used in the description of the application and the appended claims, the singular forms "a", "an" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It also will be understood that the term "and / or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.
[0046] It is to be understood that, although the terms first, second, third, etc. can be used herein to describe various information, the information should not be limited to these terms. These terms are only used to distinguish one piece of information from another. For example, a first information can also be termed a second information, similarly, a second information can also be termed a first information without departing from the scope of the application. Depending on the context, the word "if' can be interpreted to mean "when" or "in response to determining".
[0047] For example, refer to Figure 1 As shown in the detailed flowchart of the visual large screen management method provided by the embodiments of the application, the method is applied to a visual large screen server, and the method comprises the following steps:
[0048] Step 100: Obtain the business component code developed by each product service and the resources and configuration information required for displaying the business component.
[0049] In the embodiments of the application, the resources required by a business component can include fonts, pictures, js plug-ins, covers, component JSON fields, etc., and the configuration information of a business component can include the data source URL of the displayed data, the data refresh time of the displayed data, and the business component display style, etc.
[0050] Therefore, when obtaining the business component code developed by each product service and the resources and configuration information required for displaying the business component, a preferred implementation manner is as follows:
[0051] Receive the business component registration request sent by each product service, wherein one business component registration request comprises the business component code and the fonts, pictures, js plug-ins, covers, component JSON fields required for displaying the business component, the data source URL of the displayed data, the data refresh time of the displayed data, and the business component display style.
[0052] In the embodiments of the application, each product end develops a business component using a development framework, and uses a packaging tool to package the developed business component into a resource package (such as a zip resource package), and registers the business component into the visual large screen service through a script (such as a py script).
[0053] That is, a set of business component development framework is provided for each product end, realizing local development, real-time debugging and other functions of each product end, improving the development efficiency of business components, and after each product end completes the development of the business component, the developed business component is compiled, and then the business component code and all resources (such as fonts, pictures, js plug-ins, covers, component JSON fields) used in the business component, configuration information and the like are packaged into a zip package according to a preset specification, and a business component registration request is sent to the visual large screen server, the business component registration request including the business component code and the resources required for displaying the business component.
[0054] Step 110: based on each business component registration request, each business component is registered as a page element of the visual large screen.
[0055] In the embodiment of the application, when each business component is registered as a page element of the visual large screen based on each business component registration request, a preferred implementation manner is:
[0056] The business component code and the resources required for displaying the business component are obtained from the business component registration request, and the business component code and the resources required for displaying the business component are registered as WebComponents of the visual large screen.
[0057] For example, after the visual large screen user interface obtains the business component information registered by each product end, it registers the business component as WebComponents, and displays the registered business component in the component bar of the visual large screen user interface for real-time loading by the user.
[0058] In actual application, the visual large screen server can store the business component code and the required resources and configuration information of the registered business component in different storage directories based on the category of the registered business component. Of course, the business component code and the required resources and configuration information of all registered business components can also be stored in the same storage directory.
[0059] Step 120: if a target business component display instruction triggered by a user is received, the target business component is loaded by calling a page element calling interface.
[0060] In the embodiment of the application, when the target business component is loaded by calling a page element calling interface, a preferred implementation manner is:
[0061] The target business component is dynamically loaded into the visual large screen page by loading Custom Elements.
[0062] In actual application, a user can select a target business component to be displayed from a component bar of a visual large screen user interface by dragging and dropping, the large screen dynamically loads the target business component to a page by encapsulating and loading Custom Elements, that is, by listening to resource and configuration information required for displaying the target business component transmitted by the visual large screen service, and running code of the target business component.
[0063] Further, the visual large screen management method can further include the following steps:
[0064] If an instruction of modifying the data source URL, the data refresh time and the business component display style of the target business component triggered by the user is received, the data source URL, the data refresh time and the business component display style of the target business component are modified based on the instruction.
[0065] For example, the user can configure current configuration information of any displayed business component through the visual large screen user interface, such as modifying the data source from data source 1 to data source 2, or modifying the display data refresh interval from T1 to T2, or modifying the display mode of the business component from mode 1 to mode 2.
[0066] In this way, the user's demand for highly customizing business components is met, and the workload of customizing the visual large screen is reduced. It is realized that each business component of the visual large screen can be controlled based on user customization.
[0067] For example, referring to Figure 2 As shown in the figure, a structure schematic diagram of a visual large screen management device provided by an embodiment of the present application is provided, the device is applied to a visual large screen server side, and the device includes:
[0068] The obtaining unit 20 is configured to obtain business component codes developed by each product service and resource and configuration information required for displaying the business components.
[0069] The registration unit 21 is configured to register each business component as a page element of the visual large screen based on a registration request of each business component.
[0070] The loading unit 22 is configured to call and load the target business component by using a page element calling interface if an instruction of displaying the target business component triggered by the user is received.
[0071] Optionally, the resource includes a font, a picture, a js plug-in, a cover and a component JSON field, and the configuration information includes a data source URL of displayed data, a data refresh time of the displayed data and a business component display style.
[0072] The acquisition unit 20 is specifically configured to acquire the business component code of each product service and resource information required for displaying the business component.
[0073] The acquisition unit 20 is specifically configured to acquire the business component code of each product service and resource information required for displaying the business component.
[0074] The registration unit 21 is specifically configured to register each business component as a page element of the visual large screen based on each business component registration request.
[0075] The registration unit 21 is specifically configured to register each business component as a page element of the visual large screen based on each business component registration request.
[0076] The registration unit 21 is specifically configured to register each business component as a page element of the visual large screen based on each business component registration request.
[0077] The loading unit 22 is specifically configured to load the target business component by calling a page element calling interface.
[0078] The loading unit 22 is specifically configured to load the target business component by calling a page element calling interface.
[0079] Optionally, the apparatus further includes:
[0080] The modification unit is configured to modify the data source URL, the data refresh time and the business component display style of the target business component based on the instruction if the instruction for modifying the data source URL, the data refresh time and the business component display style of the target business component triggered by the user is received.
[0081] The above units can be one or more integrated circuits configured to implement the above methods, for example, one or more Application Specific Integrated Circuits (ASICs), or one or more Digital Signal Processors (DSPs), or one or more Field Programmable Gate Arrays (FPGAs), etc. For example, when a certain unit above is implemented in the form of a processing element scheduling code, the processing element can be a general-purpose processor, such as a Central Processing Unit (CPU) or other processor that can invoke program code. For another example, the units can be integrated together to implement a system-on-a-chip (SOC).
[0082] Further, the visual large screen management device provided by the embodiment of the present application, from the hardware layer, the hardware architecture diagram of the visual large screen management device can be seen from Figure 3 As shown in the figure, the visual large screen management device can include a memory 30 and a processor 31,
[0083] The memory 30 is used to store program instructions; the processor 31 calls the program instructions stored in the memory 30, and executes the above method embodiments according to the obtained program instructions. The specific implementation and technical effects are similar, and will not be repeated here.
[0084] Optionally, the present application also provides a visual large screen management device, which includes at least one processing element (or chip) for executing the above method embodiments.
[0085] Optionally, the present application also provides a program product, for example, a computer readable storage medium, which stores computer executable instructions for causing the computer to execute the above method embodiments.
[0086] Here, the machine readable storage medium can be any electronic, magnetic, optical or other physical storage device, which can contain or store information, such as executable instructions, data, etc. For example, the machine readable storage medium can be RAM (Random Access Memory), volatile memory, non-volatile memory, flash memory, storage drive (such as hard drive), solid state disk, any type of storage disk (such as optical disk, dvd, etc.), or similar storage medium, or combination thereof.
[0087] The systems, apparatuses, modules, or units disclosed in the above embodiments can be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer, and the specific form of the computer can be a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.
[0088] For the sake of clarity, the above apparatuses are described with reference to functional units for describing various functions. Of course, the functions of the units can be implemented in one or more software and / or hardware.
[0089] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Moreover, the embodiments of the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer usable program code.
[0090] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, and the combination of flows and / or blocks in the flowcharts and / or block diagrams can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing apparatus to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing apparatus produce the functions specified in the flowcharts and / or block diagrams. Figure 1 The functions specified in a flow or multiple flows and / or blocks Figure 1 The functions specified in a flow or multiple flows and / or blocks
[0091] Moreover, these computer program instructions can also be stored in a computer readable memory capable of directing the computer or other programmable data processing apparatus to work in a specific manner, so that the instructions stored in the computer readable memory produce a product including instruction apparatus, which implements the functions specified in the flowcharts and / or block diagrams. Figure 1 The functions specified in a flow or multiple flows and / or blocks Figure 1 The functions specified in a flow or multiple flows and / or blocks
[0092] These computer program instructions can also be loaded into a computer or other programmable data processing devices, so that a series of operation steps are performed on the computer or other programmable data processing devices to generate computer-implemented processes, so that the instructions executed on the computer or other programmable data processing devices provide processes for implementing the functions specified in the flowchart Figure 1 one flow or a plurality of flows and / or the functions specified in the flowchart Figure 1 one flow or a plurality of flows and / or the functions specified in the flowchart
[0093] The above only describes the preferred embodiments of the present application and is not used to limit the present application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the scope of protection of the present application.
Claims
1. A visual large-screen management method, characterized in that, The method, applied to a visual large screen server, includes: Obtain business component registration requests sent by each product server. Each business component registration request includes complete business component code and resources and configuration information required to display the business component. The resources include: fonts, images, JS plugins, cover images, and component JSON fields. The configuration information includes: the data source URL of the displayed data, the data refresh time of the displayed data, and the display style of the business component. The code of each business component and the resources and configuration information required to display the business component are obtained from the business component registration request. The code of each business component and the resources and configuration information required to display the business component are registered as page elements of the visual dashboard of the Web Components specification for users to load and use in real time. Store the business component code and required resources and configuration information of the registered business components in the same storage directory; If a user-triggered instruction to display a target business component is received, the target business component is loaded by calling the page element API. If a user-triggered instruction to modify the configuration information of the target service component is received, the configuration information of the target service component is modified based on the instruction.
2. The method as described in claim 1, characterized in that, The steps for loading the target business component by calling the API through a page element include: The target business components are dynamically loaded onto the visualization dashboard page by loading Custom Elements.
3. The method as described in claim 1, characterized in that, If a user-triggered instruction to modify the configuration information of the target service component is received, the steps for modifying the configuration information of the target service component based on the instruction include: If a user-triggered instruction is received to modify the data source URL, data refresh time, and display style of the target business component, then the data source URL, data refresh time, and display style of the target business component are modified based on the instruction.
4. A visual large-screen management device, characterized in that, The device, used in a visual large screen server, includes: The acquisition unit is used to acquire business component registration requests sent by each product server. A business component registration request includes complete business component code and resources and configuration information required to display the business component. The resources include: fonts, images, JS plugins, cover images, and component JSON fields. The configuration information includes: the data source URL of the displayed data, the data refresh time of the displayed data, and the display style of the business component. The registration unit is used to obtain the code of each business component and the resources and configuration information required to display the business component from the business component registration request, and register the code of each business component and the resources and configuration information required to display the business component as page elements of the WebComponents specification visualization dashboard for users to load and use in real time; If the loading unit receives a user-triggered instruction to display the target business component, the loading unit is used to load the target business component by calling the page element calling interface; If the modification unit receives a user-triggered instruction to modify the configuration information of the target service component, the modification unit modifies the configuration information of the target service component based on the instruction.
5. The apparatus as described in claim 4, characterized in that, When the target business component is loaded using a page element call interface, the loading unit is specifically used for: The target business components are dynamically loaded onto the visualization dashboard page by loading Custom Elements.
6. The apparatus as claimed in claim 4, characterized in that, If a user-triggered instruction to modify the configuration information of the target service component is received, the modification unit modifies the configuration information of the target service component based on the instruction. Specifically, the modification unit is used for: If a user-triggered instruction is received to modify the data source URL, data refresh time, and display style of the target business component, the modification unit modifies the data source URL, data refresh time, and display style of the target business component based on the instruction.
Citation Information
Patent Citations
Web page resource packaging system, method and device
CN106202083A
Method for configuring chart in visualized large screen in modularized manner
CN110531976A
Method and device for multiplexing components among multiple applications
CN113760264A