A method, apparatus, and storage medium for configuring large-screen web pages
By enabling code-free configuration of global parameters, layouts, containers, and components through a large-screen configuration tool, the problem of complex and costly large-screen page configuration in existing technologies is solved, achieving flexible and rapid configuration and display.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-12-16
- Publication Date
- 2026-03-10
AI Technical Summary
In existing technologies, configuring large-screen pages requires technical personnel to write code, resulting in long development cycles, high costs, poor flexibility, and an inability to quickly respond to display needs.
Using a pre-set large-screen configuration tool, global parameters, layout, containers and components can be configured without code through configuration requests. The tool enables synchronous display and visual configuration of large-screen pages.
It reduces the cost of large-screen configuration, improves the flexibility and efficiency of configuration, enables no-code development, shortens the display cycle, and supports multi-language and multi-page configuration.
Smart Images

Figure CN114237598B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of visual configuration, in particular to a large-screen page configuration method and device, and a storage medium. BACKGROUND
[0002] In the prior art, a large screen is developed through html (HyperText Markup Language, HyperText Markup Language), js (JavaScript), and css (Cascading Style Sheets, Cascading Style Sheets) codes. A front-end framework such as React or Vue is used to realize the large-screen display function.
[0003] Therefore, each time a large-screen display is developed, a technical personnel needs to write codes to realize it, which is a complicated process with a long cycle and poor flexibility, and cannot meet the requirement of quickly displaying a large screen, and is inconvenient for practical application, and has high development and maintenance costs.
[0004] It can be seen that in the prior art, the cost of large-screen page configuration is high and the flexibility is poor. SUMMARY
[0005] The purpose of the embodiments of the present application is to provide a large-screen page configuration method and device, and a storage medium, to reduce the cost of large-screen configuration and improve the flexibility of large-screen configuration.
[0006] In a first aspect, the embodiments of the present application provide a large-screen page configuration method, including: configuring global parameters and default parameters of a large-screen page according to a first configuration request; the first configuration request includes global parameter information and default parameter information; configuring the layout and request of a target large-screen page according to a second configuration request; the second configuration request includes layout information and request information; the target large-screen page belongs to the large-screen page; configuring a container in the target large-screen page according to a third configuration request; the third configuration request includes container configuration information; configuring a component in the container according to a fourth configuration request; the fourth configuration request includes component configuration information; wherein the first configuration request, the second configuration request, the third configuration request and the fourth configuration request are all initiated through a preset large-screen configuration tool.
[0007] In the embodiments of the present application, compared with the prior art, a preset large screen configuration tool is configured, which is synchronized with the configuration of the large screen page and depends on various configuration information without depending on code. Based on the large screen configuration tool, flexible large screen configuration can be achieved, including the configuration of global parameters and default parameters of the large screen page, the configuration of the layout and request of the target large screen page, the configuration of the container of the target large screen page, and the configuration of the components in the container. In the whole process, no code needs to be written, and the configuration is completely realized by the configuration method based on the tool. Further, by the configuration method, the cost of large screen configuration can be reduced, and the flexibility of large screen configuration can be improved.
[0008] As a possible implementation manner, after the global parameters and the default parameters of the large screen page are configured according to the first configuration request, the configuration method further includes: displaying the large screen page after the global parameters and the default parameters are configured; after the layout and the request of the target large screen page are configured according to the second configuration request, the configuration method further includes: displaying the target large screen page after the layout and the request are configured; after the container in the target large screen page is configured according to the second configuration request, the configuration method further includes: displaying the target large screen page after the container is configured; and after the components in the container are configured according to the fourth configuration request, the configuration method further includes: displaying the target large screen page after the components are configured.
[0009] In the embodiments of the present application, after the corresponding configuration is performed based on each configuration request, the result after the configuration is displayed synchronously, realizing the visual large screen configuration.
[0010] As a possible implementation manner, after the large screen page after the global parameters and the default parameters are configured is displayed, the configuration method further includes: displaying the global parameter information and the default parameter information in the large screen configuration tool; after the target large screen page after the layout and the request are configured is displayed, the configuration method further includes: displaying the layout information and the request information in the large screen configuration tool; after the target large screen page after the container is configured is displayed, the configuration method further includes: displaying the container configuration information in the large screen configuration tool; and after the target large screen page after the components are configured is displayed, the configuration method further includes: displaying the component configuration information in the large screen configuration tool.
[0011] In the embodiments of the present application, in addition to the synchronous display of the large screen page after the configuration, the various configuration information can also be displayed synchronously in the large screen configuration tool, realizing the visual display of the large screen configuration information.
[0012] As a possible implementation manner, the configuration method further comprises: generating a configuration information file based on the global parameter and default parameter information, the layout information, the request information, the container configuration information and the component configuration information; and storing the configuration information file.
[0013] In the embodiments of the present application, the configuration information file is generated based on the configuration information, and the configuration information file is stored, so that the configuration information file can be applied subsequently to realize more convenient large-screen configuration.
[0014] As a possible implementation manner, the global parameter information comprises at least one of multiple information; the multiple information of the global parameter information comprises background information, page turning frame information, language information and resolution information; the default parameter information comprises at least one of multiple information; the multiple information of the default parameter information comprises text default information, icon default information, container default border background information and component default border background information.
[0015] In the embodiments of the present application, the global parameter information and the default parameter information can realize effective and flexible configuration of some basic information of the large screen.
[0016] As a possible implementation manner, the layout information comprises: overall layout, containers included in the overall layout and container layout; and the request information comprises: URL (Uniform Resource Locator, uniform resource locator) of data request, request period of data request and query parameter.
[0017] In the embodiments of the present application, the layout information can realize effective and flexible configuration of the layout of the target large-screen page, and the request information can realize effective and flexible configuration of the request of the target large-screen page.
[0018] As a possible implementation manner, the container configuration information comprises at least one of the following configuration information: change of the container, arrangement mode of the container, size of the container and shape of the container.
[0019] In the embodiments of the present application, the container configuration information can realize effective and flexible configuration of the container of the target large-screen page.
[0020] As a possible implementation manner, the component configuration information comprises at least one of the following configuration information: change of the component, display form of the component, data corresponding to the component, size of the component, color of the component and shape of the component.
[0021] In the embodiments of the present application, the component configuration information can realize effective and flexible configuration of the container component of the target large-screen page.
[0022] In a second aspect, an apparatus for configuring a large-screen page is provided, which comprises various functional modules for implementing the method for configuring a large-screen page according to any of the possible implementation manners of the first aspect.
[0023] In a third aspect, an electronic device is provided, which comprises a processor, and a memory and a display connected to the processor in communication; the memory stores instructions executable by the processor, and the instructions are executed by the processor to enable the processor to perform the method for configuring a large-screen page according to the first aspect and any of the possible implementation manners of the first aspect.
[0024] In a fourth aspect, a computer-readable storage medium is provided, which stores a computer program, and the computer program is run by a computer to perform the method for configuring a large-screen page according to the first aspect and any of the possible implementation manners of the first aspect. BRIEF DESCRIPTION OF DRAWINGS
[0025] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiments of the present application. It should be understood that the following drawings only show some of the embodiments of the present application, and therefore should not be regarded as a limitation on the scope, and for those skilled in the art, other related drawings can also be obtained without creative labor on the basis of these drawings.
[0026] Figure 1 The flowchart of the method for configuring a large-screen page provided by the embodiments of the present application;
[0027] Figure 2 The schematic diagram of the large-screen display page provided by the embodiments of the present application;
[0028] Figure 3 The structural schematic diagram of the apparatus for configuring a large-screen page provided by the embodiments of the present application;
[0029] Figure 4 The structural schematic diagram of the electronic device provided by the embodiments of the present application.
[0030] Icon: 300-apparatus for configuring a large-screen page; 310-first configuration module; 320-second configuration module; 330-third configuration module; 340-fourth configuration module; 400-electronic device; 410-processor; 420-memory; 430-display. DETAILED DESCRIPTION
[0031] The technical solutions of the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application.
[0032] The technical solution provided by the embodiments of the present application can be applied to various application scenarios requiring large screen configuration, for example, large screen configuration of a public security system, large screen configuration of a hospital, large screen configuration of a square, and the like. For another example, a web operating system requiring a visual large screen display interface.
[0033] Based on these application scenarios, the hardware running environment of the technical solution provided by the embodiments of the present application can be a configuration device of a large screen. In some embodiments, the configuration device is integrated with the large screen as one device, and the configuration of the large screen is implemented while the display of the configured large screen page is implemented. In other embodiments, the configuration device is independent of the large screen, and related configuration information is synchronized to the large screen, and the large screen implements corresponding configuration synchronization based on the configuration information.
[0034] Next, please refer to Figure 1 The flowchart of the large screen page configuration method provided by the embodiments of the present application, and the configuration method comprises the following steps.
[0035] Step 110: configuring global parameters and default parameters of a large screen page according to a first configuration request. The first configuration request comprises global parameter information and default parameter information.
[0036] Step 120: configuring a layout and a request of a target large screen page according to a second configuration request. The second configuration request comprises layout information and request information, and the target large screen page belongs to the large screen page.
[0037] Step 130: configuring a container in the target large screen page according to a third configuration request. The third configuration request comprises container configuration information.
[0038] Step 140: configuring a component in the container according to a fourth configuration request. The fourth configuration request comprises component configuration information.
[0039] The first configuration request, the second configuration request, the third configuration request, and the fourth configuration request are all initiated through a preset large screen configuration tool.
[0040] In the embodiments of the present application, compared with the prior art, the preset large screen configuration tool is synchronized with the configuration of the large screen page, and depends on various configuration information without relying on code. Based on the large screen configuration tool, flexible large screen configuration can be implemented, including configuration of global parameters and default parameters of a large screen page, configuration of a layout and a request of a target large screen page, configuration of a container of a target large screen page, and configuration of a component in a container. In the whole process, no code needs to be written, and the configuration is completely implemented through a configuration method based on a tool. Further, through the configuration method, the cost of large screen configuration can be reduced, and the flexibility of large screen configuration can be improved.
[0041] Next, the detailed implementation of the configuration method is introduced.
[0042] In steps 110-140, the corresponding configuration information is configured based on different configuration requests. Through the configuration of the configuration information, the configuration of most functions of the large screen can be basically realized.
[0043] The configuration requests corresponding to these configuration information are all initiated through a preset large screen configuration tool. In the embodiment of the present application, the large screen configuration tool corresponding to different configuration steps (configuration information) can be a configuration tool developed based on react. In addition, the large screen configuration tool corresponding to each configuration step can be the large screen configuration tool corresponding to the current configuration information.
[0044] And, as can be seen from the four configuration steps, there is a hierarchical relationship from simple to complex between these configuration information. Then, correspondingly, as an optional implementation, there is also a hierarchical relationship between the large screen configuration tools corresponding to each configuration request, for example: the first configuration request corresponds to a first-level configuration tool, the second configuration request, the third configuration request, and the fourth configuration request can be understood as configuration requests for a specified large screen page, and can correspond to a second-level configuration tool. Under the second-level configuration tool, based on the second configuration request, the third configuration request, and the fourth configuration request, there are different sub-configuration tools for implementing the configuration of different configuration information.
[0045] In addition, when configuring the large screen based on each configuration request, the configuration page can be divided into two areas, one area is used to display the configured large screen page, and the other area is used to display the large screen configuration tool.
[0046] As an example, please refer to Figure 2 , on the left side of Figure 2 , it is the area of the large screen page to be configured, and on the right side of Figure 2 , it is the area of the large screen configuration tool. The user can select or input the corresponding configuration information on the large screen configuration tool to initiate the configuration request. In different configuration steps, due to the difference of the configuration information, the preset large screen configuration tool is also different, for example: the configuration items, the configuration methods, etc. are all different, which can be preset combined with the actual application scenario.
[0047] Based on the above introduction of the configuration request and the configuration tool, in step 110, the first configuration request includes global parameter information and default parameter information. Through the global parameter information, the overall framework of the large screen page can be configured, and through the default parameter information, the default value of the basic parameters of the container and the component in the large screen page can be configured.
[0048] It is understood that the large screen page to be configured can include one or more. Each large screen page initially contains a largest container, which can nest one or more containers or components. The default parameters in step 110 can be understood as an initial configuration for all large screen pages, including containers and components. In the subsequent configuration process, the containers or components of each large screen page can be configured separately as needed.
[0049] Of course, the default parameters here can also be configuration parameters only for the initial large screen page (such as the first large screen page, or the large screen page currently being displayed). That is, initialization configuration can also be made for the initial large screen page, which is not limited in this embodiment.
[0050] As an optional implementation, the global parameter information includes, but is not limited to: background information, page-turning box information, language information, and resolution information.
[0051] The background information can include: background image, background color, background transparency, and background size. For background images, you can choose a local background image or upload an image to input the configuration information. For background color, background transparency, and background size, you can select specific information from the preset options to input the configuration information.
[0052] The page-turning frame information is configured when the number of pages on the large screen is greater than one. Specifically, basic information such as the shape, size, and color of the page-turning frame can be configured.
[0053] Language information may include Chinese, English, or other languages, for displaying text in different language versions.
[0054] Resolution information can be understood as the resolution of a large-screen page, including the configuration of the width and height in pixels. If not configured, the page will adapt to the browser's width and height.
[0055] In addition to the global parameter information mentioned above, the number of large screen pages can also be configured in the first configuration request global parameter information configuration. Through this configuration, the number of pages included in the large screen can be defined, and then, when configuring other information in each large screen in the future, the configuration information will be configured to the corresponding large screen page.
[0056] As an optional implementation, the default parameter information includes, but is not limited to: default text information, default icon information, default container border and background information, and default component border and background information.
[0057] The default text information may include the size, color, and font of the text displayed by default on the large screen page.
[0058] Icon default information may include the default icon size and color displayed on large-screen pages.
[0059] The default border and background information of the container can be understood as the default border and background information of the container created during the subsequent large screen configuration process.
[0060] The default border and background information of the component can be understood as the default border and background information of the component created during the subsequent large screen configuration process.
[0061] The information mentioned above can be specific values entered by the user, or specific information selected by the user from a set of preset values.
[0062] In this embodiment of the application, the global parameter information and default parameter information described above can be used to effectively and flexibly configure some basic information of the large screen.
[0063] In step 120, the layout and requests for the target large-screen page are configured. The target large-screen page can be a specific large-screen page among the multiple large-screen pages defined in step 110; that is, the target large-screen page belongs to the multiple large-screen pages defined in step 110. Specifically, the target page can be, for example, the currently displayed large-screen page; or, for example, a large-screen page with a specified page number. The page number can be one or more, and is not limited in this embodiment.
[0064] As an optional implementation, the layout information includes: the overall layout, the containers included in the overall layout, and the container layout; the request information includes: the URL of the data request, the request period of the data request, and the query parameters.
[0065] The overall layout and its constituent containers and container layouts can be defined as a tree-shaped structure diagram, whose structure corresponds to the nested layout of multiple containers on the current main page. That is, the configuration tool displays a tree structure containing nodes corresponding to each layout item. Users can input configuration information by interacting with these nodes, and then configure the page accordingly.
[0066] A container can be understood as a node that occupies a region on a large screen page. By default, there can be a container on a large screen page that fills the entire large screen page.
[0067] The various request information items are used to configure requests to the large-screen page. Request configuration can be achieved through the URL, data request cycle, and query parameters.
[0068] In this embodiment of the application, the layout information described above can be used to achieve effective and flexible configuration of the layout of the target large screen page, and the request information described above can be used to achieve effective and flexible configuration of the request of the target large screen page.
[0069] In practical applications, more layout and request information can be configured according to specific application scenarios, which are not limited here.
[0070] In step 130, the third configuration request includes container configuration information, which allows for further configuration of the container. It can be understood that the container layout on the large-screen page has already been configured in step 120; therefore, in step 130, further configuration of the container can be performed based on this container layout.
[0071] As an optional implementation, the container configuration information includes at least one of the following: container changes, container arrangement, container size, and container shape.
[0072] Specifically, these configuration information are reflected in: data configuration (getting data returned by a specified request or generating data yourself), margin configuration (outer margin and inner margin), border and background color configuration (border and background color support gradient colors), enabling carousel configuration, carousel time interval, data arrangement configuration, carousel request configuration (same as the request configuration of the large screen page), enabling rendering component configuration (after enabling, only rendering components can be nested inside, not containers), the arrangement of child containers or child rendering components (horizontal or vertical, based on flex layout), and adding and deleting containers inside containers.
[0073] The carousel configuration allows all child containers or child rendering components in the next level of that container to rotate within the current container when the carousel configuration is enabled.
[0074] Based on the data arrangement configuration, when the carousel configuration and the data arrangement configuration are enabled, the data of the current container is used to repeatedly display all the child containers or child rendering components of the current container in a loop, and the data of all the child containers or child rendering components in each loop is each element of the array.
[0075] Adding and deleting container configurations within a container involves nesting child containers within the current container. Child containers can be laid out proportionally or by pixels (when the child containers defined by the parent container are arranged horizontally, they will be arranged with a horizontal proportion or a fixed width in pixels; when the child containers defined by the parent container are arranged vertically, they will be arranged with a vertical proportion or a fixed height in pixels). Drag and drop functionality can also be enabled (in this case, it is an absolute layout, and the arrangement (horizontal or vertical) of the child containers defined by the parent container will have no effect on it).
[0076] If the large container is arranged vertically and the two child containers are both proportionate with dimensions of 1 and 2 respectively, then the height of the upper child container accounts for 1 / 3, the height of the lower child container accounts for 2 / 3, and so on. If the child containers are arranged horizontally and the dimensions of the internal child components are 1, 2, and 1 respectively, then the width of the left child container accounts for 1 / 3, the width of the middle child container accounts for 2 / 3, and the width of the right child container accounts for 1 / 3.
[0077] The drag-and-drop function allows containers to be dragged freely within their parent container area. It supports dragging the container by position, as well as by dragging the width and height (to modify the size). Containers can also be dragged into the large screen from a designated button outside the screen.
[0078] In this embodiment of the application, the container configuration information described above can be used to achieve effective and flexible configuration of the container of the target large screen page.
[0079] In practical applications, more container configuration information can be set according to specific application scenarios, which are not limited here.
[0080] After configuring the container in step 130, in step 140, the components in the container are configured based on the component configuration information.
[0081] As an optional implementation, the component configuration information includes at least one of the following: component changes, component display format, component corresponding data, component size, component color, and component shape.
[0082] Specifically, once the container enables a rendering component, it can support configuring multiple rendering components within the current container. These rendering components support text components, icon components, icons plus multiple sets of text components, image components, table components, scale chart components, chart components, and map components. Each component supports data configuration (retrieving data returned by a specified request or generating its own data), margin configuration (outer and inner margins), width and height, border and background color configuration (borders and background colors support gradient colors).
[0083] Data configuration includes data source configuration (from which request to obtain data), data transformation configuration (transforming or generating data through expressions), display condition configuration (returning whether to display the current container or rendering component through expressions), and the display of the actual data after transformation or no transformation, making it convenient for users to view; among them, data can be passed down to all child containers and child rendering components (if a child container or child rendering component does not have configured data, it inherits the data passed down from the upper layer).
[0084] In this embodiment of the application, the container components of the target large screen page can be configured effectively and flexibly through the above-mentioned component configuration information.
[0085] In practical applications, more component configuration information can be set according to specific application scenarios, which are not limited here.
[0086] In this embodiment of the application, in addition to displaying various configuration information through steps 110-140, the configuration results and configuration information can also be displayed synchronously.
[0087] As an optional implementation, after step 110, the configuration method further includes: displaying a large-screen page after configuring global parameters and default parameters. After step 120, the configuration method further includes: displaying a target large-screen page after configuring the layout and request. After step 130, the configuration method further includes: displaying a target large-screen page after configuring the container. After step 140, the configuration method further includes: displaying a target large-screen page after configuring the components.
[0088] In this implementation, after each configuration is executed, a page showing the completed configuration is displayed so that the user can view the configured page. The user can then use the configured page to proceed with the next configuration step or modify the current configuration.
[0089] In this embodiment of the application, after performing corresponding configurations based on each configuration request, the configuration results are displayed synchronously to achieve a visual large-screen configuration.
[0090] Furthermore, in addition to displaying the configured page, as an optional implementation, after displaying the large-screen page with configured global parameters and default parameters, the configuration method also includes: displaying global parameter information and default parameter information in the large-screen configuration tool; after displaying the target large-screen page with configured layout and request, the configuration method also includes: displaying layout information and request information in the large-screen configuration tool; after displaying the target large-screen page with configured container, the configuration method also includes: displaying container configuration information in the large-screen configuration tool; after displaying the target large-screen page with configured component, the configuration method also includes: displaying component configuration information in the large-screen configuration tool.
[0091] In this implementation, after each configuration is executed, the configuration tool displays the corresponding configuration information to achieve synchronous updates between the configuration tool and the configuration page.
[0092] In this embodiment of the application, in addition to synchronously displaying the configured large screen page, various configuration implementations can also be synchronously displayed in the large screen configuration tool to achieve a visual display of the large screen configuration information.
[0093] Specifically, the large screen configuration tool and the large screen display function are separate. The large screen configuration tool generates the current large screen configuration data and stores it in the React Redux store. Subsequent configuration modifications continuously update the current large screen configuration data in the Redux store. The large screen display interface uses `useSelector` to retrieve the current large screen configuration data from the store and displays the large screen. During this process, if the configuration of a large screen page, container, or rendering component in the store's large screen configuration is updated, a re-render will be triggered at the corresponding location in the large screen. This achieves synchronous updates between the large screen configuration tool and the large screen display interface, helping users of the large screen configuration to view the changes in the large screen in real time when the configuration changes.
[0094] Furthermore, after the configuration is completed in steps 110-140, the configuration information can be saved for subsequent applications. Therefore, as an optional implementation, the configuration method further includes: generating a configuration information file based on global parameter information, default parameter information, layout information, request information, container configuration information, and component configuration information; and storing the configuration information file.
[0095] In this implementation, a configuration information file is generated using various configuration details and then stored. The stored configuration information file can be used as a configuration scheme in the large-screen configuration and can be directly invoked. For example, in any product, the large-screen configuration tool can be directly invoked, and the configuration information can be run to display the large-screen page corresponding to the configuration information file.
[0096] In this embodiment of the application, a configuration information file is generated based on various configuration information and stored. The configuration information file can then be applied to achieve more convenient large-screen configuration.
[0097] As can be seen from the foregoing embodiments, the technical solution provided by this application can achieve large-screen display without writing any code, significantly shortening the large-screen display implementation cycle; it can achieve large-screen display for any needs, with flexible layout; and it can achieve unified management of large-screen functions of multiple products, making maintenance convenient.
[0098] Furthermore, it enables no-code development for creating large-screen pages; it allows for flexible layout of large screens through containers, separating containers from rendering components. The containers are responsible for layout and some display functions (borders, background colors, etc.), while the rendering components are responsible for rendering the specific content and data; it supports configuration of multiple large screens; large screen configurations support internationalization and multi-language differentiation; it achieves synchronized rendering of large screen configurations and large screen displays through the Redux store; and the large screen layout container supports drag-and-drop functionality (position movement and width / height adjustment).
[0099] Furthermore, by adopting the technical solution provided in the embodiments of this application, flexible configuration of large screens can be achieved, and the cost of large screen configuration can be reduced.
[0100] Based on the same inventive concept, please refer to Figure 3 This application embodiment also provides a configuration device 300 for a large screen page, including: a first configuration module 310, a second configuration module 320, a third configuration module 330 and a fourth configuration module 340.
[0101] The first configuration module 310 is used to: configure the global parameters and default parameters of the large-screen page according to a first configuration request; the first configuration request includes global parameter information and default parameter information. The second configuration module 320 is used to: configure the layout and request of the target large-screen page according to a second configuration request; the second configuration request includes layout information and request information; the target large-screen page belongs to the large-screen page. The third configuration module 330 is used to: configure the container in the target large-screen page according to a third configuration request; the third configuration request includes container configuration information. The fourth configuration module 340 is used to: configure the components in the container according to a fourth configuration request; the fourth configuration request includes component configuration information; wherein the first configuration request, the second configuration request, the third configuration request, and the fourth configuration request are all initiated through a preset large-screen configuration tool.
[0102] In this embodiment, the first configuration module 310 is further configured to: display the large screen page after configuring global parameters and default parameters; the second configuration module 320 is further configured to: display the target large screen page after configuring the layout and request; the third configuration module 330 is further configured to: display the target large screen page after configuring the container; and the fourth configuration module 340 is further configured to: display the target large screen page after configuring the component.
[0103] In this embodiment of the application, the first configuration module 310 is further configured to: display the global parameter information and the default parameter information in the large screen configuration tool; the second configuration module 320 is further configured to: display the layout information and request information in the large screen configuration tool; the third configuration module 330 is further configured to: display the container configuration information in the large screen configuration tool; and the fourth configuration module 340 is further configured to: display the component configuration information in the large screen configuration tool.
[0104] In this embodiment of the application, the configuration device 300 for the large screen page further includes: a processing module, used to generate a configuration information file based on the global parameter information, the default parameter information, the layout information, the request information, the container configuration information, and the component configuration information; and to store the configuration information file.
[0105] The configuration device 300 for the large screen page corresponds to the configuration method for the large screen page, and each functional module corresponds to each step of the configuration method. Therefore, the implementation methods of each functional module refer to the implementation methods of each step in the aforementioned embodiments, and will not be repeated here.
[0106] Based on the same inventive concept, please refer to Figure 4 This application provides an electronic device 400, which can serve as the hardware operating environment for the aforementioned large-screen page configuration method.
[0107] Electronic device 400 includes: processor 410, memory 420 and display 430.
[0108] The processor 410, memory 420 and display 430 can be housed within the device body. The device body can have different implementation methods in different application scenarios, such as different shapes, different sizes, different materials, etc., which are not limited in the embodiments of this application.
[0109] The processor 410, memory 420, and display 430 are electrically connected directly or indirectly to enable data transmission or interaction. For example, the electrical connection can be achieved through one or more communication buses or signal buses. The aforementioned large-screen page configuration method includes at least one software function module that can be stored in the memory 420 in the form of software or firmware, such as the software function module or computer program included in the large-screen page configuration device 300.
[0110] Processor 410 can be an integrated circuit chip with signal processing capabilities. Processor 410 can be a general-purpose processor, including a CPU (Central Processing Unit), NP (Network Processor), etc.; it can also be a digital signal processor, application-specific integrated circuit, off-the-shelf programmable gate array or other programmable logic device, discrete gate or transistor logic device, or discrete hardware component. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor can be a microprocessor or any conventional processor.
[0111] The memory 420 can store various software programs and modules, such as the program instructions / modules corresponding to the large-screen page configuration method and device provided in this application embodiment. The processor 410 executes various functional applications and data processing by running the software programs and modules stored in the memory 420, thereby implementing the method in this application embodiment.
[0112] In this embodiment, the memory 420 is also used to store configuration information files, etc.
[0113] The memory 420 may include, but is not limited to, RAM (Random Access Memory), ROM (Read Only Memory), PROM (Programmable Read-Only Memory), EPROM (Erasable Programmable Read-Only Memory), EEPROM (Electric Erasable Programmable Read-Only Memory), etc.
[0114] The monitor 430 can be used to display large-screen web pages, large-screen web page configuration tools, etc. It can also serve as a medium for human-computer interaction, for example, displaying various selectable commands (including page navigation information) on the monitor 430, allowing users to make selections and issue commands based on the displayed commands.
[0115] In some embodiments, the display 430 may be a touch display or a non-touch display, and no limitation is made herein.
[0116] In some embodiments, the electronic device 400 may further include an input / output module. An input / output module can be understood as a tool for users to perform human-computer interaction. Through the input / output module, users can operate the electronic device 400, such as issuing commands, uploading data, and downloading data.
[0117] In some embodiments, the input / output module may be a mouse, keyboard, etc., which are not limited here.
[0118] It should be noted that, Figure 4 The structure of the electronic device 400 shown does not constitute a limitation on the electronic device 400. The actual electronic device 400 may include more or fewer components than shown, or combine certain components, or have different component arrangements.
[0119] Furthermore, the technical effects of electronic device 400 can be referenced from the technical effects of the configuration method of the aforementioned large screen page, and will not be repeated here.
[0120] Based on the same inventive concept, this application also provides a computer-readable storage medium storing a computer program, which, when run by a computer, executes the large-screen page configuration method described in the foregoing embodiments.
[0121] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Additionally, the displayed or discussed mutual couplings, direct couplings, or communication connections may be through some communication interfaces; indirect couplings or communication connections between devices or units may be electrical, mechanical, or other forms.
[0122] Furthermore, the units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.
[0123] Furthermore, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.
[0124] In this document, relational terms such as first and second are used only to distinguish one entity or operation from another entity or operation, without necessarily requiring or implying any such actual relationship or order between these entities or operations.
[0125] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.
Claims
1. A method for configuring a large-screen page, characterized by, The method comprises the following steps: configuring global parameters and default parameters of a large-screen page according to a first configuration request; the first configuration request comprises global parameter information and default parameter information; the global parameter information comprises the number of large-screen pages; configuring the layout and request of a target large-screen page according to a second configuration request; the second configuration request comprises layout information and request information; the target large-screen page belongs to the large-screen page; the target large-screen page is a currently displayed large-screen page or a large-screen page with a specified page number, and the page number is one or more; configuring a container in the target large-screen page according to a third configuration request; the third configuration request comprises container configuration information; the container configuration information comprises an opening carousel configuration; when a specified container opens the carousel configuration, all child containers or child rendering components in the next layer of the container are cycled under the current container; configuring a component in the container according to a fourth configuration request; the fourth configuration request comprises component configuration information; wherein the first configuration request, the second configuration request, the third configuration request and the fourth configuration request are initiated through a preset large-screen configuration tool; the layout information comprises an overall layout; the overall layout comprises containers and container layouts; in the large-screen configuration tool, the containers and container layouts form a tree structure, which comprises nodes corresponding to each layout item, and the nodes are operated to input configuration information; when the target large-screen page is configured based on the first configuration request, the second configuration request, the third configuration request and the fourth configuration request, the configuration page is divided into two areas, one area is used to display the configured large-screen page, and the other area is used to display the large-screen configuration tool; The configuration method further comprises: displaying the large-screen page after configuring the global parameters and the default parameters; synchronously displaying the global parameter information and the default parameter information in the large-screen configuration tool; after configuring the layout and request of the target large-screen page according to the second configuration request, display the target large-screen page after configuring the layout and request, and synchronously display the layout information and the request information in the large-screen configuration tool; after configuring the container in the target large-screen page according to the third configuration request, display the target large-screen page after configuring the container, and synchronously display the container configuration information in the large-screen configuration tool; after configuring the component in the container according to the fourth configuration request, display the target large-screen page after configuring the component, and synchronously display the component configuration information in the large-screen configuration tool.
2. The configuration method of claim 1, wherein, The configuration method further comprises: generating a configuration information file based on the global parameter information, the default parameter information, the layout information, the request information, the container configuration information and the component configuration information; storing the configuration information file.
3. The configuration method of claim 1, wherein, The global parameter information comprises at least one of multiple information; the multiple information of the global parameter information comprises background information, page turning box information, language information and resolution information; The default parameter information includes at least one of multiple information; the multiple information of the default parameter information includes: text default information, icon default information, container default border background information, component default border background information.
4. The configuration method of claim 1, wherein, The request information includes: a URL of a data request, a request period of the data request, and a query parameter.
5. The configuration method of claim 1, wherein, The container configuration information includes at least one of the following configuration information: a change of the container, an arrangement mode of the container, a size of the container, and a shape of the container.
6. The configuration method of claim 1, wherein, The component configuration information includes at least one of the following configuration information: a change of the component, a display form of the component, corresponding data of the component, a size of the component, a color of the component, and a shape of the component.
7. An apparatus for configuring a large-screen page, characterized by comprising: Comprise: The first configuration module is configured to configure global parameters and default parameters of a large-screen page according to a first configuration request; The first configuration request includes global parameter information and default parameter information; The global parameter information includes: a number of large-screen pages; The second configuration module is configured to configure a layout and a request of a target large-screen page according to a second configuration request; the second configuration request includes layout information and request information; the target large-screen page belongs to the large-screen page; the target large-screen page is a currently displayed large-screen page or a large-screen page with a specified page number, and the page number is one or more; The third configuration module is configured to configure a container in the target large-screen page according to a third configuration request; the third configuration request includes container configuration information; the container configuration information includes: an opening of a carousel configuration; when a specified container opens the carousel configuration, all child containers or child rendering components of a next layer of the container are cycled under the current container; The fourth configuration module is configured to configure a component in the container according to a fourth configuration request; the fourth configuration request includes component configuration information; The first configuration request, the second configuration request, the third configuration request, and the fourth configuration request are all initiated through a preset large-screen configuration tool; The layout information includes: an overall layout; the overall layout includes containers and container layouts; in the large-screen configuration tool, the containers and the container layouts form a tree structure, the tree structure includes nodes corresponding to each layout item, and the nodes are operated to input configuration information; When the target large-screen page is configured based on the first configuration request, the second configuration request, the third configuration request, and the fourth configuration request, the configuration page is divided into two areas: one area is used to display a configured large-screen page, and the other area is used to display the large-screen configuration tool; The configuration device is also configured to display a large-screen page after global parameters and default parameters are configured; and synchronously display the global parameter information and the default parameter information in the large-screen configuration tool; After the layout and the request of the target large-screen page are configured according to the second configuration request, the target large-screen page after the layout and the request are configured is displayed, and the layout information and the request information are synchronously displayed in the large-screen configuration tool; After the container in the target large-screen page is configured according to the third configuration request, a target large-screen page after the container is configured is displayed, and the container configuration information is synchronously displayed in the large-screen configuration tool; After the component in the container is configured according to the fourth configuration request, a target large-screen page after the component is configured is displayed, and the component configuration information is synchronously displayed in the large-screen configuration tool.
8. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, and the computer program is run by a computer to execute the method for configuring a large-screen page according to any one of claims 1-6.
Citation Information
Patent Citations
Real-time updating data visualization large screen method and system based on modularization
CN111522565A