Page generation method and device and storage medium

Abstract

The invention provides a page generation method and device and a storage medium, relates to the technical field of data processing, and can solve the problem that the efficiency is relatively low when a large amount of data is subjected to visual large-screen unified presentation. The method comprises the steps of obtaining a page layout requirement, a component style requirement and a data source format requirement; determining a target page layout matched with the page layout demand from preset page layouts, determining a target component style matched with the component style demand from preset component styles, and determining a target data source format matched with the data source format demand from preset data source formats; and generating a target page based on the target page layout, the target component style and the target data source format. The embodiment of the invention is used in the process of generating the page of the visual large screen according to a large amount of data.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a page generation method, device and storage medium. Background Art

[0002] At present, the supervision of 5G private networks requires unified and centralized management of all network element devices involved. Therefore, how to quickly provide a customized data visualization monitoring screen to aggregate all monitoring data and present them in a unified manner is an urgent problem to be solved.

[0003] In the prior art, when presenting a large amount of data in a unified manner, a component-based design approach is used to disassemble the large screen into several movable modules, and then the components and coordinate positions are configured separately for each module. Specifically, each of the above components requires custom designs such as different types of visualization views, data sources, style parameters, etc. configured on the canvas. The configuration process of this method requires a certain technical threshold, and requires the operator to have a certain level of professionalism or programming ability. At the same time, each component needs to be configured one by one. The configuration steps are relatively cumbersome, resulting in low efficiency when presenting a large amount of data on a large screen in a unified manner. Summary of the invention

[0004] The present application provides a page generation method, device and storage medium, which can solve the problem of low efficiency when a large amount of data is uniformly presented on a large screen for visualization.

[0005] In order to achieve the above objectives, this application adopts the following technical solutions:

[0006] In a first aspect, the present application provides a page generation method, the method comprising: obtaining page layout requirements, component style requirements and data source format requirements, determining a target page layout that matches the above page layout requirements from a preset page layout, and determining a target component style that matches the above component style requirements from a preset component style, and determining a target data source format that matches the above data source format requirements from a preset data source format, and generating a target page based on the above target page layout, the above target component style and the above target data source format.

[0007] Based on the above technical solution, the page generation method provided in the embodiment of the present application can first obtain the page layout requirements, component style requirements and data source format requirements, and then determine the target page layout that matches the page layout requirements from the preset page layout, and determine the target component style that matches the component style requirements from the preset component style, and determine the target data source format that matches the data source format requirements from the preset data source format; finally, based on the determined target page layout, the target component style and the target data source format, generate the target page. Since the above preset page layout, preset component style and preset data source format are pre-set in the development stage, the user only needs to simply input his actual needs during the use stage to realize page configuration, thereby instantly generating the page required by the user, simplifying the steps of large-screen editing, and thus improving the efficiency of large-screen presentation.

[0008] In a first possible implementation manner of the first aspect, before obtaining the page layout requirements, component style requirements and data source format requirements, the method further includes: establishing a page basic framework; and setting the preset page layout, the preset component style and the preset data source format in the page basic framework.

[0009] In a second possible implementation of the first aspect, the target page is generated based on the target page layout, the target component style and the target data source format, including: rendering the page basic frame according to the target page layout to obtain the target page frame; rendering the target page frame according to the target component style and the target data source format to obtain the target page.

[0010] In a third possible implementation of the first aspect, the target component style includes a movable component and a fixed component. After the target page is generated based on the target page layout, the target component style and the target data source format, the method further includes: receiving a first input for the movable component in the target page; in response to the first input, adjusting the display position of the movable component in the target page; receiving a second input for the fixed component in the target page; and in response to the second input, switching the display content in the fixed component.

[0011] In a fourth possible implementation of the first aspect, the preset component style includes a title component style, and the target component style that matches the component style requirement is determined from the preset component style, including: when the component style requirement is a title component requirement, determining the text length of the title component requirement; and automatically adjusting the font size and character spacing of the text according to the text length and the size of the title component style to obtain the target component style.

[0012] In a second aspect, the present application provides a page generation device, which includes: an acquisition unit, a determination unit and a processing unit, wherein: the acquisition unit is used to acquire page layout requirements, component style requirements and data source format requirements; the determination unit is used to determine a target page layout that matches the page layout requirements from a preset page layout, and determine a target component style that matches the component style requirements from a preset component style, and determine a target data source format that matches the data source format requirements from a preset data source format; the processing unit is used to generate a target page based on the target page layout, the target component style and the target data source format obtained by the determination unit.

[0013] In a first possible implementation of the second aspect, the processing unit is further used to establish a basic page framework before the acquisition unit acquires page layout requirements, component style requirements, and data source format requirements; and to set the preset page layout, the preset component style, and the preset data source format in the basic page framework.

[0014] In a second possible implementation of the second aspect, the processing unit is specifically used to: render the page basic frame according to the target page layout to obtain the target page frame; render the target page frame according to the target component style and the target data source format to obtain the target page.

[0015] In a third possible implementation of the second aspect, the target component style includes a movable component and a fixed component, and the device further includes a receiving unit, wherein: the receiving unit is used to receive a first input for the movable component in the target page after the processing unit generates the target page based on the target page layout, the target component style and the target data source format; the processing unit is also used to adjust the display position of the movable component in the target page in response to the first input received by the receiving unit; the receiving unit is also used to receive a second input for the fixed component in the target page; the processing unit is also used to switch the display content in the fixed component in response to the second input received by the receiving unit.

[0016] In a fourth possible implementation of the second aspect, the preset component style includes a title component style; the determination unit is specifically used to: when the component style requirement is a title component requirement, determine the text length of the title component requirement; according to the text length and the size of the title component style, automatically adjust the font size and character spacing of the text to obtain the target component style.

[0017] In a third aspect, the present application provides a page generation device, comprising: a processor and a communication interface; the communication interface and the processor are coupled, and the processor is used to run a computer program or instruction to implement the page generation method described in the first aspect and any possible implementation method of the first aspect.

[0018] In a fourth aspect, the present application provides a computer-readable storage medium, in which instructions are stored. When the instructions are executed on a terminal, the terminal executes the page generation method described in the first aspect and any possible implementation of the first aspect.

[0019] In a fifth aspect, an embodiment of the present application provides a computer program product comprising instructions. When the computer program product runs on a page generation device, the page generation device executes the page generation method as described in the first aspect and any possible implementation of the first aspect.

[0020] In a sixth aspect, an embodiment of the present application provides a chip, the chip including a processor and a communication interface, the communication interface and the processor are coupled, and the processor is used to run a computer program or instructions to implement the page generation method described in the first aspect and any possible implementation method of the first aspect.

[0021] Specifically, the chip provided in the embodiment of the present application also includes a memory for storing computer programs or instructions. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 A system architecture diagram of a page generation method provided in an embodiment of the present application;

[0023] Figure 2 One of the method flow charts of a page generation method provided in an embodiment of the present application;

[0024] Figure 3 A schematic diagram of a page layout of a page generation method provided in an embodiment of the present application;

[0025] Figure 4 One of the component rendering flow charts of a page generation method provided in an embodiment of the present application;

[0026] Figure 5 A second component rendering flow chart of a page generation method provided in an embodiment of the present application;

[0027] Figure 6 A third component rendering flow chart of a page generation method provided in an embodiment of the present application;

[0028] Figure 7 A fourth component rendering flow chart of a page generation method provided in an embodiment of the present application;

[0029] Figure 8 A fifth component rendering flow chart of a page generation method provided in an embodiment of the present application;

[0030] Fig. 9 A sixth component rendering flow chart of a page generation method provided in an embodiment of the present application;

[0031] Fig.10 A seventh component rendering flow chart of a page generation method provided in an embodiment of the present application;

[0032] Fig.11 A second method flow chart of a page generation method provided in an embodiment of the present application;

[0033] Fig.12 A third method flow chart of a page generation method provided in an embodiment of the present application;

[0034] Fig.13 A fourth method flow chart of a page generation method provided in an embodiment of the present application;

[0035] Fig.14 One of the interface schematic diagrams used in a page generation method provided in an embodiment of the present application;

[0036] Fig.15 A second schematic diagram of an interface used in a page generation method provided in an embodiment of the present application;

[0037] Fig.16 A third schematic diagram of an interface used in a page generation method provided in an embodiment of the present application;

[0038] Fig.17 A fourth schematic diagram of an interface used in a page generation method provided in an embodiment of the present application;

[0039] Fig.18 A fifth method flow chart of a page generation method provided in an embodiment of the present application;

[0040] Fig.19 A page configuration flow chart of a page generation method provided in an embodiment of the present application;

[0041] Fig. 20 A page rendering flow chart of a page generation method provided in an embodiment of the present application;

[0042] Fig.21 One of the structural schematic diagrams of a page generating device provided in an embodiment of the present application;

[0043] Fig. 22A second structural diagram of a page generating device provided in an embodiment of the present application;

[0044] Fig.23 A schematic diagram of the structure of another page generating device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0045] The page generation method, device and storage medium provided in the embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0046] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0047] The terms "first" and "second" and the like in the specification and drawings of this application are used to distinguish different objects, or to distinguish different processing of the same object, rather than to describe a specific order of objects.

[0048] In addition, the terms "including" and "having" and any variations thereof mentioned in the description of the present application are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device comprising a series of steps or units is not limited to the listed steps or units, but may optionally include other steps or units that are not listed, or may optionally include other steps or units that are inherent to these processes, methods, products or devices.

[0049] It should be noted that, in the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a specific way.

[0050] In the description of the present application, unless otherwise specified, “plurality” means two or more.

[0051] In recent years, with the strong support of relevant policies, the fifth-generation mobile communication technology (5G) private network has continued to develop with the joint efforts of telecom operators, communication equipment manufacturers, vertical industry customers and industry chain partners.

[0052] 5G Private Network is a local area network that uses 5G technology to create a dedicated network with unified connectivity, optimized services, and secure communication within a specific area. Due to its strong privacy, high security, ultra-low latency, and independent controllability, 5G private networks are suitable for multiple industry scenarios such as transportation, industry, municipal administration, energy, and medical care, and have broad application potential.

[0053] However, the data monitored by 5G private networks covers the entire 5G private network. The client side needs to monitor terminals and IoT cards, the network side needs to monitor wireless networks, transmission networks, and core networks, and the service side needs to monitor slices and multi-access edge computing (MEC) to achieve end-to-end service perception functions on this basis. Such as business monitoring of private network traffic, latency, packet loss rate, and success rate. However, from the perspective of customer management, the supervision of 5G private networks requires unified and centralized management of all network element devices involved. Therefore, it is particularly important to aggregate all monitoring data and use a large monitoring screen for unified presentation to achieve global visualization, resources, alarms, and services at a glance.

[0054] At present, 5G private network customers may come from all walks of life. They have different focuses on the monitoring data of 5G private networks and generally have high requirements for data readability. Therefore, in order to help 5G private network customers improve their digital capabilities and effectively reduce operating costs, how to quickly provide a customized data visualization monitoring screen has become one of the most urgent needs.

[0055] In the prior art, the mainstream solution is to disassemble the large screen into several movable modules through a componentized design approach, and configure components and coordinate positions for each module separately. Among them, the components are customized by configuring different types of visualization views, data sources, style parameters, etc. on the canvas. Therefore, the presentation of a large visualization screen requires the steps of demand decomposition, component creation or reuse, component data source configuration, component style import, component layout and position arrangement, large screen effect preview, large screen release and review. Although the above solution can customize the personalized large screen when the program is running, saving the time cost of developers' customized development and service deployment, it still requires professionals to perform complex configuration work according to needs.

[0056] Specifically, the above solution still has the following four problems:

[0057] 1) The configuration process of the existing large-screen visualization requires a certain technical threshold. The operator needs to have certain professional qualities and even certain basic programming skills. Therefore, the configuration work is generally handed over to the large-screen service provider or trained customer administrators. Technically, it cannot be directly operated by the customer who makes the request, resulting in a long communication chain.

[0058] 2) The existing visualization large screen customization is not very agile and the configuration process requires a high time cost.

[0059] 3) The existing visualization screen has weak real-time adjustability. Since there are many configurable items on the screen, the content presented will change significantly when the screen is adjusted. It is necessary to go through the publishing and review process to confirm whether the content meets expectations. Therefore, it is impossible to achieve the effect of immediate effect.

[0060] 4) The existing large-scale visualization screens have too much freedom in data source configuration, making it difficult to ensure the stability and reliability of large-scale screen data acquisition.

[0061] In order to solve the problem of low efficiency in the prior art when visualizing a large amount of data in a unified large-screen presentation, the present application provides a page generation method, which can first obtain page layout requirements, component style requirements and data source format requirements, and then determine the target page layout that matches the page layout requirements from the preset page layout, and determine the target component style that matches the component style requirements from the preset component style, and determine the target data source format that matches the data source format requirements from the preset data source format; finally, based on the determined target page layout, the target component style and the target data source format, generate the target page. Since the above-mentioned preset page layout, preset component style and preset data source format are pre-set in the development stage, the user only needs to simply input his actual needs during the use stage to realize page configuration, thereby instantly generating the page required by the user, simplifying the steps of large-screen editing, and thus improving the efficiency of large-screen presentation.

[0062] like Figure 1 The system architecture of the page generation method provided in the embodiment of the present application is shown in FIG. 1 , which includes: a front-end framework module 101 , a tool library module 102 , a system preset module 103 and a user operation module 104 .

[0063] Wherein: the front-end framework module 101 can be a Model View View Model (MVVM) framework. The tool library module 102 can include: a user interface (UI) library (such as Element UI), a data visualization chart library (such as echarts), an image editor (such as vue-img-cutter) and a drag plug-in (such as vuedraggable); the system preset module 103 can include: a component library, a style library and a data source preset library, and the data source preset library can include: an application scenario library, a resource type library and an indicator library; the user operation module 104 has four functions: style selection, title modification, LOGO upload and module editing.

[0064] Exemplarily, the page layout requirements, component style requirements and data source format requirements can be obtained through the above-mentioned user operation module 104; then, the preset page layout in the system preset module 103 is decoupled through the front-end framework module 101 to determine the target page layout that matches the page layout requirements, and the preset component style in the system preset module 103 is decoupled to determine the target component style that matches the component style requirements, and the preset data source format in the system preset module 103 is decoupled to determine the target data source format that matches the data source format requirements; finally, through the tool library module 102, the target page is generated according to the target page layout, target component style and target data source format.

[0065] like Figure 2 FIG. 2 is a flowchart of a page generation method provided in an embodiment of the present application, and the method includes the following steps S201 to S203:

[0066] S201. Obtain page layout requirements, component style requirements, and data source format requirements.

[0067] In the embodiment of the present application, the above-mentioned page layout requirements include page theme style requirements, page title position requirements, page trademark (LOGO) position requirements and page component position requirements.

[0068] In the embodiment of the present application, the above-mentioned component style requirements include component type requirements and component size requirements.

[0069] In the embodiment of the present application, the above-mentioned data source format requirements include data timeliness requirements and data status requirements.

[0070] Exemplarily, the above data status requirements include dynamic data requirements and static data requirements.

[0071] For example, the user's page layout requirements can be input through the user's operation on the page editing panel for recognition by the electronic device.

[0072] S202: Determine a target page layout that matches the page layout requirement from the preset page layouts, determine a target component style that matches the component style requirement from the preset component styles, and determine a target data source format that matches the data source format requirement from the preset data source formats.

[0073] In an embodiment of the present application, the above-mentioned preset page layout includes a preset page theme style, a preset page title position, a preset page LOGO position and a preset page component position.

[0074] Exemplarily, the above-mentioned preset page theme style includes at least two styles (skinType).

[0075] It should be noted that one theme style corresponds to one background image, on which a top title area is reserved. Subsequent components need to apply different custom images and styles according to the bound theme style.

[0076] Exemplarily, the preset title position may be a reserved top title area on the background image.

[0077] Exemplarily, the preset page LOGO position may be on both sides of the preset title position.

[0078] Exemplarily, the above-mentioned preset page component positions include fixed component positions and movable component positions.

[0079] Exemplarily, the fixed component position may be in the middle area of ​​the page.

[0080] Exemplarily, the movable components may be located on both side areas of the page.

[0081] In the embodiment of the present application, the above-mentioned preset component style includes a preset component type and a preset component size.

[0082] Exemplarily, the above-mentioned preset component types can be classified according to the presentation mode, reusability and mobility of the components.

[0083] Exemplarily, the above-mentioned preset component types can be divided into line charts, bar charts, pie charts, custom charts, etc. according to the presentation method of the components.

[0084] Exemplarily, the above-mentioned preset component types can be divided into dedicated components and general components according to the reusability of the components.

[0085] For example, Figure 3 As shown, it is a schematic diagram of a page layout provided in an embodiment of the present application, the title container in the page is the above-mentioned page title position, the left LOGO and the right LOGO are the above-mentioned page LOGO positions, the left draggable area 1 and the right draggable area 2 are the above-mentioned movable component positions, and the above-mentioned fixed area 1 and the fixed area 2 are the above-mentioned fixed component positions.

[0086] In an embodiment of the present application, the above-mentioned preset data source format includes preset data timeliness and preset data status.

[0087] In an embodiment of the present application, the above-mentioned preset data source format may consist of a name, an access address, parameters, a resource type and an application scenario.

[0088] Exemplarily, the above resource types may include wireless, mobile edge computing (MEC), user plane function (UPF), SIM card, slice, dedicated line, enterprise intranet and transmission network.

[0089] Exemplarily, the above-mentioned preset data sources can be divided into fixed resource data, business data at a certain moment and business data for a certain period of time according to application scenarios.

[0090] It should be noted that the data return formats of the data sources in the above different application scenarios are the same.

[0091] Exemplarily, the data structure of the above preset data source is shown in Table 1 below. It should be noted that Table 1 only shows the data structure of some data sources. In practical applications, more data structures of data sources may be included, which will not be described in detail here.

[0092] Table 1

[0093] name type describe sysxIndicators Object Specific indicators └id Number Indicator ID └indName String Indicator name └indDesc String Indicator Description └params String Indicator parameters └indType String Resource type to which the indicator belongs └chartType Number Application scenarios of indicators └urlPath String Indicator interface url └indUnit String Indicator data unit

[0094] Exemplarily, the return data structure of the fixed resource data is shown in Table 2 below. It should be noted that Table 2 only shows the return data structure of part of the fixed resource data. In actual applications, more return data structures of fixed resource data may be included, which will not be described here.

[0095] Table 2

[0096] name type describe data Object The entire returned data object └title String Data Title └value Number Data Value

[0097] Exemplarily, the return data structure of the above-mentioned business data at a certain moment is shown in Table 3 below. It should be noted that Table 3 only shows the return data structure of part of the business data at a certain moment. In actual applications, more return data structures of business data at a certain moment may be included, which will not be repeated here.

[0098] Table 3

[0099] name type describe data Object The entire returned data object └title String Data Title └unit String Data Unit └value Number Data Value └time String Get time

[0100] Exemplarily, the return data structure of the above-mentioned service data of a certain period is shown in Table 4 below. It should be noted that Table 4 only shows the return data structure of part of the service data of a certain period. In actual application, more return data structures of service data of a certain period may be included, which will not be repeated here.

[0101] Table 4

[0102]

[0103]

[0104] For example, Figure 4 As shown, the target component style is a resource statistics component as an example. The component size of the resource statistics component can be 516 pixels (Pixel, px) * 246px, the applicable data is fixed resource data, and the applicable component is a movable component, which is used to monitor the number of resources of various resource types. The resource statistics component can first design the corresponding component style according to the overall style (such as using multiple customized circles to express the fixed number of a certain resource under style 1, filling the number in the middle of the circle, and adding text descriptions below the circle; using multiple customized boxes to express the fixed number of a certain resource under style 2, adding text descriptions above the box, and filling the number below); then configure the number and order of elements; then select dynamic data from the fixed number of resources in the above 8 types of resource types, or directly import static data through Excel tables. At the same time, the resource statistics component supports horizontal page turning and element clicking to display detailed list operations; the rendering process of the resource statistics component is: first render the basic framework, render the title, style-related styles and pictures according to the configuration information, and if static data is used, directly read the static data and render it. If dynamic data is used, it is necessary to assemble the request according to the configuration, obtain the dynamic data and then render it.

[0105] For example, Figure 5 As shown, take the performance indicator component as an example. The component size of the performance indicator component can be 516px*246px, the applicable data is the business data of a certain period, and the applicable component is a movable component, which is used to describe the fluctuation trend of various business data over time. The performance indicator component can first design the corresponding component style (such as line chart and bar chart) according to the overall style; then select dynamic data from the business data of a certain period in the above 8 types of resource types, or directly import static data through Excel tables. At the same time, the performance indicator component supports the operation of displaying the details box when the mouse is suspended, and refreshes the display content every 30 minutes; the rendering process of the performance indicator component is: first render the basic framework, render the title, style-related styles and pictures according to the configuration information, in addition, if static data is used, the static data is directly read and rendered, if dynamic data is used, it is necessary to obtain dynamic data according to the configuration assembly request, and finally render the bar chart or line chart according to the presentation type.

[0106] For example, Figure 6As shown, the target component style is the alarm and performance warning component as an example. The component size of the alarm and performance warning component can be 516px*246px, the applicable data is fixed resource data, and the applicable component is a movable component, which is used to monitor the real-time alarms and warnings of various resources. The alarm and performance warning component can first design the corresponding component style according to the overall style (such as style 1 is divided into an alarm page and a warning page, and scrolls to the visible window for display in turn. There are 3 customized graphics in the alarm page, which are filled with the number of wireless, MEC, and core network alarms respectively, and there are 3 customized graphics in the warning page, which are filled with the number of wireless, MEC, and core network warnings respectively; the component under style 2 is divided into two parts, the upper part is 3 alarm data, and the lower part is 3 warning data); then directly import static data through Excel tables. At the same time, the alarm and performance warning component supports horizontal page turning, clicking elements to display detailed lists, and refreshing the displayed content every 30 seconds; the rendering process of the alarm and performance warning component is: first render the basic framework, and then render the title, style-related styles and pictures according to the configuration information. In addition, if static data is used, the static data is directly read and rendered. If dynamic data is used, it is necessary to assemble the request according to the configuration and render after obtaining the dynamic data.

[0107] For example, Figure 7As shown, the target component style is taken as an example of a MEC resource usage component. The component size of the MEC resource usage component can be 516px*246px, the applicable data is fixed resource data, and the applicable component is a movable component, which is used to monitor the resource status of the core resource MEC physical and virtual layers. The MEC resource usage component can first design the corresponding component style according to the overall style (for example, the components under style 1 are divided into the MEC resource physical usage page and the MEC resource virtual usage page, and they are scrolled to the visible window for display in turn. The MEC resource physical usage page has 3 rows and 3 columns of 9 customized data, namely CPU utilization, memory utilization, system disk utilization, number of physical cores, total storage, total system disk, number of logical cores, memory used, and storage used. Each data is represented by a customized graph. The MEC resource virtual usage page has 3 rows and 3 columns of 9 customized data, namely VCPU allocation rate, memory allocation rate, storage allocation rate, total VCPU, total memory, total storage, VCPU used, memory used, and storage used. Each data is represented by a customized graph. The components under style 2 are similar to style 1, with only the customized graphics and styles different); then directly import static data through Excel tables. At the same time, the MEC resource usage component supports horizontal page turning operations and refreshes the displayed content every 30 minutes; the rendering process of the MEC resource usage component is: first render the basic framework, render the title, style-related styles and pictures according to the configuration information, and if static data is used, directly read the static data and render it. If dynamic data is used, it is necessary to assemble the request according to the configuration and render the dynamic data after obtaining it.

[0108] For example, Figure 8 As shown, the target component style is taken as the network resource usage component as an example. The component size of the network resource usage component can be 516px*246px, the applicable data is fixed resource data, and the applicable component is a movable component, which is used to monitor network usage. The network resource usage component can first design the corresponding component style according to the overall style (such as the component under style 1 is 3 customized data, namely UPF throughput utilization rate, 5G cell uplink wireless resource utilization rate (%), 5G cell downlink wireless resource utilization rate (%), each data is represented by a customized graph. The component under style 2 is similar to style 1, only the customized graphics and styles are different); then directly import static data through Excel tables. At the same time, the network resource usage component supports refreshing the display content every 30 minutes; the rendering process of the network resource usage component is: first render the basic framework, render the title, style-related styles and pictures according to the configuration information, in addition, if static data is used, the static data is directly read and rendered, if dynamic data is used, it is necessary to obtain dynamic data after the configuration assembly request.

[0109] For example, Fig. 9 As shown, the target component style is a carousel component as an example. The component size of the carousel component can be 787px*579px, the applicable data is any uploaded image, and the applicable component is a fixed component, which is used to present various images uploaded by users. The carousel component can be a picture carousel; at the same time, the carousel component supports uploading, deleting, dragging to change the order of pictures, configuring the carousel interval time, and horizontal clicking to turn pages, etc.; the rendering process of the carousel component is: first render the basic framework, render the style-related styles and pictures according to the configuration information, and finally initiate a request to obtain the carousel pictures and order, and render them.

[0110] For example, Fig.10 As shown, take the above target component style as a key indicator component as an example. The component size of the key indicator component can be 808px*317px, the applicable data is the business data at a certain moment, and the applicable component is a fixed component, which is used to display the indicator value that the user considers to be more critical. The key indicator component can first design the corresponding component style according to the overall style (such as the component under style 1 uses multiple customized bubbles to express the single number of business data at a certain moment, the upper part of the bubble is filled with amateur data, and text descriptions are added below. All bubbles are evenly distributed on an elliptical trajectory around the center and make clockwise circular motions. The component under style 2 uses multiple customized rings to express the single number of business data at a certain moment, the number is filled in the middle of the ring, and text descriptions are added above the ring, and the ring adds a rotation animation); then select dynamic data from the fixed number of resources in the above 8 resource types, or directly import static data through Excel tables. At the same time, the key indicator component supports clicking to pause rotation and refreshes the displayed content every 30 seconds; the rendering process of the key indicator component is: first render the basic framework, render the title, style-related styles and pictures according to the configuration information, and if static data is used, directly read the static data and render it. If dynamic data is used, it is necessary to assemble the request according to the configuration and render after obtaining the dynamic data.

[0111] Exemplarily, the configuration data of the above-mentioned preset components are shown in the following Table 5. It should be noted that only the configuration data of some components are shown in Table 5. In actual applications, the configuration data of more components may also be included, which will not be described in detail here.

[0112] Table 5

[0113] name type describe data Object The entire returned data object └id Number Module ID └userCategories String Module Title └userLogin String User Accounts └screenType Number Component type of module binding └sort Number Sorting └custom_json String Static data of components └indicatorsCustoms Array Associated data └└id Number Indicator association ID └└categoriesId Number Module ID └└indId Number Indicator ID └└sort Number Sorting └└graphType String Presentation forms, such as line charts and bar charts └└sysxIndicators Object Specific indicators └└└id Number Indicator ID └└└indName String Indicator name └└└indDesc String Indicator Description └└└params String Indicator parameters └└└indType String Resource type to which the indicator belongs └└└chartType Number Application scenarios of indicators └└└urlPath String Indicator interface url └└└indUnit String Indicator data unit

[0114] S203: Generate a target page based on the target page layout, target component style and target data source format.

[0115] In an embodiment of the present application, after obtaining the above-mentioned target page layout, target component style and target data source format, the above-mentioned target component style can be arranged according to the target page layout, and then the target page can be rendered according to the target data source format.

[0116] In the page generation method provided in the embodiment of the present application, the page layout requirements, component style requirements and data source format requirements can be obtained first, and then the target page layout that matches the page layout requirements is determined from the preset page layout, and the target component style that matches the component style requirements is determined from the preset component style, and the target data source format that matches the data source format requirements is determined from the preset data source format; finally, based on the determined target page layout, the target component style and the target data source format, the target page is generated. Since the above-mentioned preset page layout, preset component style and preset data source format are pre-set in the development stage, the user only needs to simply input his actual needs in the use stage to realize page configuration, thereby instantly generating the page required by the user, simplifying the steps of large-screen editing, and thus improving the efficiency of large-screen presentation.

[0117] Optionally, in the embodiments of the present application, Fig.11 As shown, before the above step S201, the page generation method provided in the embodiment of the present application may further include the following steps S201a and S201b:

[0118] S201a. Establish the basic framework of the page.

[0119] In an embodiment of the present application, the above-mentioned page basic framework can be a front-end framework based on the MVVM mode.

[0120] For example, developers can build a basic framework (MVVM framework) for the 5G private network monitoring data visualization screen during the page development stage and set the default configuration.

[0121] S201b. Set a preset page layout, a preset component style, and a preset data source format in the page basic framework.

[0122] In an embodiment of the present application, the above-mentioned preset page layout, preset component style and preset data source format can be embedded in the above-mentioned MVVM framework.

[0123] Exemplarily, the MVVM framework includes at least 2 theme styles, fixed title and LOGO positions, fixed left, center, and right module layouts, at least 7 component types, and component data sources classified by resources and formats.

[0124] It should be noted that for the specific description of the above-mentioned preset page layout, preset component style and preset data source format, please refer to the detailed description of the preset page layout, preset component style and preset data source format in the above-mentioned step S202. To avoid repetition, they will not be repeated here.

[0125] In this way, by embedding a variety of preset page layouts, preset component styles and preset data source formats into the page framework during the development phase, the steps for users to customize pages are simplified and the efficiency of page generation is improved.

[0126] Optionally, in the embodiment of the present application, in combination with the above step S201a, as Fig.12 As shown, the above step S203 may include the following steps S203a and S203b:

[0127] S203a, rendering the page basic frame according to the target page layout to obtain the target page frame.

[0128] In the embodiment of the present application, the target page frame may be a blank page.

[0129] Exemplarily, the blank page refers to a page that only has a page layout but no specific display content.

[0130] Exemplarily, the initial basic frame may be rendered according to the selected target page layout to obtain a preliminary blank page for the next step of content rendering.

[0131] S203b, rendering the target page frame according to the target component style and the target data source format to obtain the target page.

[0132] In an embodiment of the present application, after obtaining the above-mentioned blank page, the blank page can also be rendered according to the selected target component style and target data source format to generate a specific component corresponding to the data source.

[0133] In this way, by performing two rendering methods of first rendering the framework and then rendering the content, the sense of fragmentation in the page generation process is reduced, making the generation of the target page smoother.

[0134] Optionally, in the embodiment of the present application, the target component pattern includes a movable component and a fixed component. After the step S203, as shown in FIG. Fig.13 As shown, the page generation method provided in the embodiment of the present application may also include the following steps S204 to S207:

[0135] S204: Receive a first input for a movable component in a target page.

[0136] In an embodiment of the present application, the first input is used to trigger the electronic device to adjust the display position of the component.

[0137] In the embodiment of the present application, the above-mentioned first input can be a click input, a drag input, a long press input, etc., which can be set according to actual usage requirements and is not limited in the embodiment of the present application.

[0138] S205: In response to the first input, adjust the display position of the movable component in the target page.

[0139] In the embodiment of the present application, the above display position can be Figure 3 Any position in the left draggable area 1 and the right draggable area 2 in .

[0140] For example, in combination Figure 3 ,like Fig.14 As shown, the user can drag the draggable module container 1 (i.e., the above-mentioned movable component) in page 01 to the position of the draggable module container 2. At this time, as shown in FIG. Fig.15 As shown, the display positions of the draggable module container 1 and the draggable module container 2 in the page 01 can be exchanged.

[0141] S206: Receive a second input for a fixed component in the target page.

[0142] In the embodiment of the present application, the second input is used to trigger the electronic device to update the display content in the component.

[0143] In the embodiment of the present application, the above-mentioned second input can be a click input, a drag input, a long press input, etc., which can be set according to actual usage requirements and is not limited in the embodiment of the present application.

[0144] S207: In response to the second input, switch the display content in the fixed component.

[0145] In the embodiment of the present application, the above display content can be Figure 3 The display contents in fixed area 1 and fixed area 2 in the display.

[0146] For example, in combination Figure 3 ,like Fig.16 As shown, the user can click on the fixed area 1 (i.e. the fixed component) in page 02. Fig.17 As shown, the electronic device switches content 1 displayed in fixed area 1 in page 02 to content 2.

[0147] It should be noted that the above-mentioned content 2 is pre-bound in the fixed area 1 .

[0148] In this way, after the target page is generated, the user can also adjust the display content and display position of the components in the page through click input and drag input in the target page, thereby improving the flexibility of page display.

[0149] Optionally, in an embodiment of the present application, the above-mentioned preset component style includes a title component style, such as Fig.18 As shown, in the above step S202, "determining a target component style matching the component style requirement from the preset component styles" may include the following steps S202a and S202b:

[0150] S202a. When the component style requirement is a title component requirement, determine the text length of the title component requirement.

[0151] In the embodiment of the present application, the above text length can be obtained according to the number and size of the above text.

[0152] For example, taking the text as Chinese characters, the text length may be the font size of the Chinese characters and the spacing between adjacent Chinese characters.

[0153] S202b. Automatically adjust the font size and character spacing of the text according to the length of the text and the size of the title component style to obtain the target component style.

[0154] In the embodiment of the present application, the size of the above-mentioned title component style refers to the maximum text length that the title component style can accommodate.

[0155] For example, the size of the title component style is 480px long and 40px wide. If the font size (font-size) of the text is 20px and the letter spacing (letter-spacing) is 8px, then the ratio of the available width and height to the current width and height is calculated respectively. For example, the smaller ratio (0.5) is taken to determine the size of the final target component style (font-size: 20*0.5px; letter-spacing: 8*0.5px).

[0156] In addition, the size of the title component style may be related to the position of the LOGO component. For example, if the size of the title component style is (length 520px, width 40px), at this time, if there is a LOGO component on the left side of the title component and no LOGO component on the right side, the actual size of the title component style is (length 480px, width 40px).

[0157] In this way, based on the number of words and word spacing of the input title, and the size of the preset title component, the final realized component size is flexibly adjusted, further improving the flexibility of page display.

[0158] The following is an exemplary description of the page configuration process of the page generation method provided in the embodiment of the present application:

[0159] For example, Fig.19 As shown, the above page configuration process can be divided into four parts: style selection, layout adjustment, title modification and LOGO upload.

[0160] For example, the above style selection means that after the user enters the large screen editing page, the style of the large screen can be changed by switching the style, and the effect can be previewed in real time. After switching the style, the style of each component changes accordingly without reconfiguration. The style selection is achieved by changing the value of skinType at the bottom layer, and the background image and each component respond immediately and re-render.

[0161] Exemplarily, the above layout adjustment means that after the user enters the large-screen editing page, he can directly long press the draggable module to drag it, and it will take effect when he releases it. The dragging function is implemented through the underlying vuedraggable plug-in. In addition, after the user enters the large-screen editing page, he can also click to select the draggable module or fixed area to open the corresponding component editing page. Among them, the modules in the left and right areas can select one of the five components through the drop-down box; the middle area is a fixed component, including: "Key Indicators" component, "Resource Statistics" component and "Performance Indicators" component. The "Performance Indicators" can be filtered by resource type, and the bound data can be selected by checking the indicator list. You can also choose to present the "Performance Indicators" component as a bar chart or a line chart.

[0162] In addition, the "Carousel" component supports uploading, deleting, dragging and dropping to change the order of pictures, configuring the carousel interval, etc.

[0163] Exemplarily, the above-mentioned title modification means that after the user enters the large-screen editing page, he can modify the large-screen title text to change the large-screen title, and automatically change the font size according to the length of the text to adapt to the title area, and the effect can be previewed in real time.

[0164] Exemplarily, the above-mentioned LOGO upload means that after the user enters the large-screen editing page, he can upload, delete, and simply edit pictures as the LOGO components on the left and right sides of the title component, and the picture editing function is implemented by the underlying vue-img-cutter plug-in.

[0165] In this way, by implementing the operation logic such as style selection, layout adjustment, title modification, LOGO upload, etc. in the underlying plug-in during the development stage, users can complete the configuration through simple selection and dragging during the use stage, achieving the purpose of customer-oriented, lightweight configuration, instant preview, and immediate effectiveness.

[0166] For example, Fig. 20As shown, after completing the initial configuration of the above page, page rendering is still required. The page rendering process can be divided into style rendering, title rendering, module (ie, the above fixed component and the above movable component) rendering and LOGO rendering.

[0167] Exemplarily, the above-mentioned style rendering means that after entering the large-screen page, the style information can be obtained first, the style type can be determined, and then the corresponding background image can be rendered according to the style type.

[0168] Exemplarily, the above-mentioned title rendering means that after entering the large-screen page, the title information can be obtained first, and then combined with the above-mentioned determined style type, the corresponding title is rendered, and the title style is adjusted according to the algorithm (i.e., the description of the above steps S202a and S202b).

[0169] Exemplarily, the above-mentioned module rendering means that after entering the large-screen page, you can first obtain the module information, determine the container (i.e., component style) corresponding to each module information, and then combine the above-determined style type to render the corresponding module in each container according to the obtained module information.

[0170] Exemplarily, the above-mentioned LOGO rendering means that after entering the large-screen page, the LOGO information can be obtained first, the corresponding relationship between the LOGO and the above-mentioned container can be determined, and then the final LOGO can be rendered in combination with the above-mentioned determined style type.

[0171] In this way, after the initial configuration of the page is completed, the final large-screen page is rendered according to the specific style, title, LOGO, and component information, which improves the integrity and authenticity of the generated page and optimizes the page presentation effect.

[0172] The embodiment of the present application can divide the page generation device into functional modules or functional units according to the above method example. For example, each functional module or functional unit can be divided according to each function, or two or more functions can be integrated into one processing module. The above integrated module can be implemented in the form of hardware or in the form of software functional modules or functional units. Among them, the division of modules or units in the embodiment of the present application is schematic, which is only a logical function division. There may be other division methods in actual implementation.

[0173] like Fig.21 , which is a schematic diagram of the structure of a page generation device provided in an embodiment of the present application, the device includes: an acquisition unit 401, a determination unit 402 and a processing unit 403.

[0174] Among them, the above-mentioned acquisition unit 401 is used to obtain page layout requirements, component style requirements and data source format requirements; the above-mentioned determination unit 402 is used to determine the target page layout that matches the above-mentioned page layout requirements from the preset page layout, and determine the target component style that matches the above-mentioned component style requirements from the preset component style, and determine the target data source format that matches the above-mentioned data source format requirements from the preset data source format; the above-mentioned processing unit 403 is used to generate the target page based on the above-mentioned target page layout, the above-mentioned target component style and the above-mentioned target data source format obtained by the determination unit 402.

[0175] Optionally, in an embodiment of the present application, the processing unit 403 is also used to establish a basic framework for the page before the acquisition unit 401 acquires the page layout requirements, component style requirements and data source format requirements; and to set the preset page layout, the preset component style and the preset data source format in the basic framework for the page.

[0176] Optionally, in an embodiment of the present application, the processing unit 403 is specifically used to: render the page base frame according to the target page layout to obtain the target page frame; render the target page frame according to the target component style and the target data source format to obtain the target page.

[0177] Optionally, in an embodiment of the present application, the target component pattern includes a movable component and a fixed component, such as Fig. 22 As shown, the page generation device also includes a receiving unit 404, wherein: the receiving unit 404 is used to receive a first input for a movable component in the target page after the processing unit 403 generates the target page based on the target page layout, the target component style and the target data source format; the processing unit 403 is also used to adjust the display position of the movable component in the target page in response to the first input received by the receiving unit 404; the receiving unit 404 is also used to receive a second input for a fixed component in the target page; the processing unit 403 is also used to switch the display content in the fixed component in response to the second input received by the receiving unit 404.

[0178] Optionally, in an embodiment of the present application, the above-mentioned preset component style includes a title component style; the above-mentioned determination unit 402 is specifically used to: when the above-mentioned component style requirement is a title component requirement, determine the text length of the above-mentioned title component requirement; according to the text length and the size of the above-mentioned title component style, automatically adjust the font size and character spacing of the above-mentioned text to obtain the target component style.

[0179] In the page generation device provided in the embodiment of the present application, the page layout requirements, component style requirements and data source format requirements can be obtained first, and then the target page layout that matches the page layout requirements is determined from the preset page layout, and the target component style that matches the component style requirements is determined from the preset component style, and the target data source format that matches the data source format requirements is determined from the preset data source format; finally, based on the determined target page layout, the target component style and the target data source format, the target page is generated. Since the above-mentioned preset page layout, preset component style and preset data source format are pre-set in the development stage, the user only needs to simply input his actual needs in the use stage to realize page configuration, thereby instantly generating the page required by the user, simplifying the steps of large-screen editing, and thus improving the efficiency of large-screen presentation.

[0180] Fig.23 Another possible structural diagram of the page generation device involved in the above embodiment is shown. The page generation device includes: a processor 302 and a communication interface 303. The processor 302 is used to control and manage the actions of the page generation device, for example, to execute the steps performed by the above acquisition unit 401, determination unit 402, processing unit 403 and receiving unit 404, and / or to execute other processes of the technology described in this article. The communication interface 303 is used to support the communication between the page generation device and other network entities. The page generation device may also include a memory 301 and a bus 304, and the memory 301 is used to store program code and data of the page generation device.

[0181] Among them, the memory 301 can be a memory in a page generating device, etc. The memory can include a volatile memory, such as a random access memory; the memory can also include a non-volatile memory, such as a read-only memory, a flash memory, a hard disk or a solid-state drive; the memory can also include a combination of the above types of memory.

[0182] The processor 302 may be a processor that implements or executes various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of the present application. The processor may be a central processing unit, a general-purpose processor, a digital signal processor, an application-specific integrated circuit, a field programmable gate array, or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. The processor may be a processor that implements or executes various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of the present application. The processor may also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, and the like.

[0183] The bus 304 may be an Extended Industry Standard Architecture (EISA) bus, etc. The bus 304 may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Fig.23 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0184] Through the description of the above implementation methods, technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device and unit described above can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0185] An embodiment of the present application provides a computer program product including instructions. When the computer program product is run on a computer, the computer is enabled to execute the page generation method in the above method embodiment.

[0186] The embodiment of the present application also provides a computer-readable storage medium, in which instructions are stored. When the instructions are executed on a computer, the computer executes the page generation method in the method flow shown in the above method embodiment.

[0187] Among them, the computer readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer readable storage media (a non-exhaustive list) include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a register, a hard disk, an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above, or any other form of computer readable storage medium known in the art. An exemplary storage medium is coupled to a processor so that the processor can read information from the storage medium and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can be located in an application-specific integrated circuit (ASIC). In the embodiments of the present application, a computer-readable storage medium may be any tangible medium that contains or stores a program, which may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0188] An embodiment of the present invention provides a computer program product comprising instructions, which, when executed on a computer, causes the computer to execute the following Figures 2 to 20 The page generation method described in .

[0189] Since the page generation device, computer-readable storage medium, and computer program product in the embodiments of the present invention can be applied to the above method, the technical effects that can be obtained can also refer to the above method embodiments, and the embodiments of the present invention will not be repeated here.

[0190] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0191] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0192] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0193] The above are only specific implementations of the present application, but the protection scope of the present application is not limited thereto, and any changes or substitutions within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A page generation method, characterized in that: The method comprises: Obtain page layout requirements, component style requirements, and data source format requirements; Determine a target page layout that matches the page layout requirement from preset page layouts, determine a target component style that matches the component style requirement from preset component styles, and determine a target data source format that matches the data source format requirement from preset data source formats; A target page is generated based on the target page layout, the target component style and the target data source format.

2. The method according to claim 1, characterized in that Before obtaining the page layout requirements, component style requirements and data source format requirements, the method further includes: Establish the basic framework of the page; The preset page layout, the preset component style and the preset data source format are set in the page basic framework.

3. The method according to claim 2, characterized in that The generating a target page based on the target page layout, the target component style and the target data source format includes: According to the target page layout, the page basic frame is rendered to obtain the target page frame; The target page frame is rendered according to the target component style and the target data source format to obtain the target page.

4. The method according to claim 1 or 3, characterized in that: The target component style includes movable components and fixed components. After generating the target page based on the target page layout, the target component style and the target data source format, the method further includes: receiving a first input for the movable component in the target page; In response to the first input, adjusting a display position of the movable component in the target page; receiving a second input for the fixed component in the target page; In response to the second input, the display content in the fixed component is switched.

5. The method according to claim 1, characterized in that The preset component style includes a title component style, and determining a target component style matching the component style requirement from the preset component style includes: In the case where the component style requirement is a title component requirement, determining the text length of the title component requirement; According to the length of the text and the size of the title component style, the font size and character spacing of the text are automatically adjusted to obtain a target component style.

6. A page generation device, characterized in that: The device comprises: an acquisition unit, a determination unit and a processing unit, wherein: The acquisition unit is used to acquire page layout requirements, component style requirements and data source format requirements; The determining unit is used to determine a target page layout that matches the page layout requirement from a preset page layout, determine a target component style that matches the component style requirement from a preset component style, and determine a target data source format that matches the data source format requirement from a preset data source format; The processing unit is used to generate a target page based on the target page layout, the target component style and the target data source format obtained by the determining unit.

7. The device according to claim 6, characterized in that The processing unit is further used to establish a page basic framework before the acquisition unit acquires the page layout requirements, component style requirements and data source format requirements; The preset page layout, the preset component style and the preset data source format are set in the page basic framework.

8. The device according to claim 7, characterized in that The processing unit is specifically used for: According to the target page layout, the page basic frame is rendered to obtain the target page frame; The target page frame is rendered according to the target component style and the target data source format to obtain the target page.

9. The device according to claim 6 or 8, characterized in that The target component pattern includes a movable component and a fixed component, and the device also includes a receiving unit, wherein: The receiving unit is configured to receive a first input for the movable component in the target page after the processing unit generates the target page based on the target page layout, the target component style and the target data source format; The processing unit is further configured to adjust a display position of the movable component in the target page in response to the first input received by the receiving unit; The receiving unit is further configured to receive a second input for the fixed component in the target page; The processing unit is further configured to switch display content in the fixed component in response to the second input received by the receiving unit.

10. The device according to claim 6, characterized in that The preset component style includes a title component style; The determining unit is specifically configured to: In the case where the component style requirement is a title component requirement, determining the text length of the title component requirement; According to the length of the text and the size of the title component style, the font size and character spacing of the text are automatically adjusted to obtain a target component style.

11. A page generating device, characterized in that: include: A processor and a communication interface; the communication interface is coupled to the processor, and the processor is used to run a computer program or instruction to implement the page generation method as described in any one of claims 1-5.

12. A computer-readable storage medium, wherein instructions are stored in the computer-readable storage medium, characterized in that: When a computer executes the instruction, the computer executes the page generation method according to any one of claims 1 to 5.

Images