Web page generation apparatus, method and system based on nested combination model

Abstract

The application discloses a Web page generation device, method and system based on a nested combination model, relates to the technical field of computer software engineering, and designs a configuration controller, an attribute editor and a component list, can select a scheme type, add a scheme, edit a scheme, delete a scheme, add a component, edit a component, delete a component, add an element, edit an element and delete an element in a configuration mode, designs a database, can combine data generated by the configuration controller, the attribute editor and the component list in an editing mode according to the structure of the nested combination model, obtains page layout data, designs a layout generator and a component loader, and can render a layout, a scheme, a component and an element according to the page layout data to generate a Web page, and the application can better generate a Web page and solve problems in the prior art.

Description

Technical Field

[0001] This application relates to the field of computer software engineering technology, and in particular to a web page generation apparatus, method and system based on a nested combination model. Background Technology

[0002] In the context of digital transformation, groups and enterprises across various industries have extensive needs and applications for configuring, modifying, adjusting, displaying, and analyzing production, operation, and management-related data. This data serves as a crucial channel and means for groups and enterprises to conduct business, coordinate resources, support decision-making, achieve goals, enhance value, and upgrade strategies. However, during the digital transformation process of these traditional manufacturing enterprises, the following problems commonly exist among different user roles in most business production systems, operation systems, and management systems when operating and using the systems:

[0003] (1) The system has many users, and different users want to display different types of data. In addition, the data to be displayed is from multiple heterogeneous sources, resulting in strong heterogeneity of the content elements displayed on the page.

[0004] (2) Different users have different habits and preferences, resulting in complex and varied requirements for page element display.

[0005] (3) The workload of configuring the page is large and complex, the construction and maintenance costs of the page are high and the adjustment cycle of requirements is long. Summary of the Invention

[0006] The purpose of this application is to provide a web page generation device, method, and system based on a nested combination model, which can better generate web pages and solve the problems of strong heterogeneity of page display content elements, complex and ever-changing page element display requirements, large and complex workload when configuring pages, high page construction and maintenance costs, and long requirement adjustment cycles.

[0007] To achieve the above objectives, this application provides the following solution:

[0008] In a first aspect, this application provides a web page generation apparatus based on a nested composition model, the web page generation apparatus based on the nested composition model comprising:

[0009] The configuration controller is used to switch between configuration mode and display mode, as well as select scheme type, add scheme, delete scheme and delete component in configuration mode; scheme types include default scheme and personal scheme, and personal scheme is a personalized scheme designed according to user needs;

[0010] The property editor is used to edit schemes, components, add elements, edit elements, and delete elements in configuration mode.

[0011] The component list is used to add components by dragging and dropping in configuration mode.

[0012] The database, connected to the configuration controller, property editor, and component list, receives the following data: first data generated by the configuration controller when selecting scheme types, adding schemes, deleting schemes, and deleting components in configuration mode; second data generated by the property editor when editing schemes, editing components, adding elements, editing elements, and deleting elements in configuration mode; and third data generated by the component list when adding components via drag-and-drop in configuration mode. The database then combines the first, second, and third data according to a nested combination model to obtain the page layout data. The nested combination model structure is as follows: a layout includes several schemes, a scheme includes several components, and a component includes several elements.

[0013] The layout generator connects to the database and is used to obtain page layout data in display mode, and render the scheme data in the page layout data to obtain the layout display page and the scheme display page; the scheme data is the data generated by adding, editing and deleting schemes.

[0014] A component library stores various components.

[0015] The component loader connects to the database and component library. It retrieves page layout data in presentation mode and calls components from the component library based on this data to render the component and element data within the layout, resulting in component and element display pages. These pages—layout display page, scheme display page, component display page, and element display page—component the web page. Component data consists of data generated from adding, editing, and deleting components; element data consists of data generated from adding, editing, and deleting elements.

[0016] Secondly, this application provides a web page generation method based on a nested composition model, the web page generation method based on the nested composition model includes:

[0017] Get page layout data;

[0018] Determine whether the page layout data includes the scheme data to obtain the first judgment result;

[0019] If the first judgment result is negative, a new solution is added to update the page layout data, and the process returns to the "Get Page Layout Data" step.

[0020] If the first judgment result is yes, then generate the layout display page and render the scheme data to obtain the scheme display page in the layout display page;

[0021] Determine whether the solution data includes component data to obtain a second determination result;

[0022] If the second judgment result is negative, a new component is added to update the page layout data, and the process returns to the "Get Page Layout Data" step.

[0023] If the second judgment result is yes, then the component data is rendered to obtain the component display page in the solution display page;

[0024] Determine whether the component data includes element data to obtain the third judgment result;

[0025] If the third judgment result is negative, add a new element to update the page layout data and return to the "Get Page Layout Data" step;

[0026] If the third judgment result is yes, then the element data is rendered to obtain the element display page in the component display page, thus completing the generation of the web page.

[0027] Thirdly, this application provides a Web page generation system based on a nested combination model, which includes an application layer, a service layer, and a data layer.

[0028] The application layer includes a data display module, which uses the aforementioned Web page generation device based on a nested combination model to generate Web pages for displaying the data to be displayed.

[0029] The service layer is used to send the data to be displayed provided by the data layer to the application layer;

[0030] The data layer comprises multiple databases that jointly store heterogeneous data from multiple sources. This heterogeneous data includes data from different sources, of different types, with different structures and formats. The data layer is used to select data to be displayed from this heterogeneous data based on user needs.

[0031] According to the specific embodiments provided in this application, the following technical effects are disclosed:

[0032] This application provides a web page generation device, method, and system based on a nested combination model. It includes a configuration controller, an attribute editor, and a component list, enabling users to select scheme types, add schemes, edit schemes, delete schemes, add components, edit components, delete components, add elements, edit elements, and delete elements in configuration mode. A database is designed to combine data generated by the configuration controller, attribute editor, and component list in editing mode according to the structure of the nested combination model to obtain page layout data. A layout generator and component loader are designed to render layouts, schemes, components, and elements based on the page layout data, generating a web page. This application allows users to select different schemes, components, and elements according to their needs and nest different schemes, components, and elements, so that a scheme includes multiple components, and a component includes multiple elements. This improves the generation of web pages and solves problems such as strong heterogeneity of page display content elements, complex and ever-changing page element display requirements, large and complex workload in page configuration, high page construction and maintenance costs, and long requirement adjustment cycles. Attached Figure Description

[0033] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0034] Figure 1 This is a schematic diagram of the nested combination model structure provided in Embodiment 1 of this application; wherein, Figure 1 (a) in the diagram is a nested structure diagram. Figure 1 (b) in the diagram is a schematic diagram of the combined structure. Figure 1 (c) in the diagram is a schematic diagram of a nested combination model.

[0035] Figure 2 This is a schematic diagram of the nested combination model structure and relationship class provided in Embodiment 1 of this application.

[0036] Figure 3 This is a schematic diagram of the working principle of the nested combination model data and functional components provided in Embodiment 1 of this application.

[0037] Figure 4 This is a flowchart illustrating the generation and use of a web page as provided in Embodiment 1 of this application.

[0038] Figure 5 Screenshot of an engineering application example provided in Embodiment 1 of this application.

[0039] Figure 6This is a schematic diagram of the main technical architecture of a Web page generation system based on a nested combination model, provided in Embodiment 3 of this application. Detailed Implementation

[0040] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0041] Example 1

[0042] This embodiment provides a web page generation device based on a nested composition model, the web page generation device based on the nested composition model includes:

[0043] The configuration controller is used to switch between configuration mode and display mode, as well as select scheme type, add scheme, delete scheme and delete component in configuration mode. Scheme types include default scheme and personal scheme. Personal scheme is a personalized scheme designed according to user needs.

[0044] The property editor is used to edit schemes, components, add elements, edit elements, and delete elements in configuration mode.

[0045] The component list is used to add components by dragging and dropping in configuration mode.

[0046] The database, connected to the configuration controller, property editor, and component list, receives the following data: first data generated by the configuration controller when selecting scheme types, adding schemes, deleting schemes, and deleting components in configuration mode; second data generated by the property editor when editing schemes, editing components, adding elements, editing elements, and deleting elements in configuration mode; and third data generated by the component list when adding components through drag-and-drop in configuration mode. The database then combines the first, second, and third data according to a nested combination model to obtain the page layout data. The nested combination model structure is as follows: a layout includes several schemes, a scheme includes several components, and a component includes several elements.

[0047] The layout generator connects to the database and is used to obtain page layout data in display mode. It then renders the scheme data in the page layout data to obtain the layout display page and the scheme display page. The scheme data is generated by adding, editing, and deleting schemes.

[0048] The component library stores different components.

[0049] The component loader, connected to the database and component library, is used to retrieve page layout data in presentation mode. Based on this data, it calls components from the library to render the component and element data within the layout data, resulting in component and element display pages. These pages—layout display, scheme display, component display, and element display—components a web page. Component data consists of data generated from adding, editing, and deleting components, while element data consists of data generated from adding, editing, and deleting elements.

[0050] To better understand the nested composition model in a web page generation device based on the nested composition model, please refer to [link to relevant documentation]. Figure 1 , Figure 1 This is a structural diagram of a nested composite model, such as... Figure 1 As shown in (a), this is a schematic diagram of a nesting structure (NS). Nesting is a structure formed by embedding one object into another, then embedding those two objects into a third object, and so on. Figure 1 As shown in (b), this is a schematic diagram of a Combination Structure (CS). Combination is a structure that combines several parts or individuals into a whole, such as... Figure 1 As shown in (c), this is a schematic diagram of Nested Combinatorial Models (NCM). Nested Combinatorial Models utilize nesting and combination to construct a hierarchical model, progressing from simple to complex and from partial to global. Specifically, in this embodiment, elements, components, schemes, and layouts belong to a nested structure; elements belong to components, components belong to schemes, and schemes belong to layouts. Multiple elements belonging to the same component, multiple components belonging to the same scheme, and multiple schemes belonging to the same layout constitute a combined structure.

[0051] To illustrate the nested composition model structure and relational class diagram of the web page generation device based on the nested composition model, please refer to... Figure 2 , Figure 2 The nested composite model structure and relational class diagram are modeled and implemented using the Unified Modeling Language (UML) and Object Oriented Programming (OOP).

[0052] This embodiment first defines the relevant components of the nested composite model structure, mainly including: the definition of the nested composite model structure, the definition of the program (P), the definition of the component (C), the definition of the element (E), and the attribute set A. set Definitions and method sets M set The definitions of attributes (A) and methods (M).

[0053] (1) Definition of nested combination model structure

[0054] The nested composition model consists of a series of nested triples, NCM: <P set <C set <E set >>>Composition, that is, the nested triple set NCM is composed of the scheme set P set The scheme P consists of a set of components C. set The component C is composed of a set of elements E. set Composition. Wherein, NCM = {ncm1, ncm2, ..., ncm} k ..., ncm n}, ncm k ∈NCM, representing a nested triple. <p k <c k <e k >>>,P set ={p1, p2, ..., p k , ..., p n}, p k ∈P set Let C represent a solution. set ={c1, c2, ..., c k c n}, c k ∈C set E represents a component. set ={e1, e2, ..., e k , ..., e n}, e k ∈E set Represents an element.

[0055] (2) Definition of the scheme

[0056] Scheme P consists of quadruplets <T,A set M set C set >Composition, where T is type, P T <defualt>< / defualt> As the default scheme, P T <personal>< / personal> For individual plans, Aset M is a set of attributes. set For a set of methods, C set A collection of components.

[0057] (3) Component definition

[0058] Component C consists of quadruples <T,A set M set E set >Composition, where T is type, C T <common>< / common> For ordinary components, C T <screen>< / screen> For large screen components, C T <process>< / process> For process components, A set M is a set of attributes. set E is a set of methods. set It is a set of elements.

[0059] (4) Definition of elements

[0060] Element E is composed of triples <T,A set M set >Composition, where T is type, E T <mp>< / mp> For the measurement point, E T <history>< / history> For historical values, E T <rtdb>< / rtdb> For real-time libraries, E T <spcds>< / spcds> For a specific data source, E T <pic>< / pic> For image, E T <file>< / file> For the file, E T <camera>< / camera> For cameras, E T <none>< / none> For none, A set M is a set of attributes. set It is a set of methods.

[0061] (5) Definition of attribute sets and definition of method sets

[0062] Solution P, component C, and element E each include a set of properties and methods, among which A set A is a set of attributes. set ={a1, a2, ..., a k , ..., a n}, a k ∈A set M represents an attribute. set M is a set of methods. set ={m1, m2, ..., m k , ..., m n}, m k ∈M set This represents a method.

[0063] (6) Attribute definition

[0064] Attribute A: PA<1，2，..，k，...，n> For scheme attributes, C A<1，2，...，k，...，n> For component properties, E A<1，2，...，k，...，n> Element attributes.

[0065] (7) Definition of the method

[0066] Method M: P M<1，2，...，k，...，n> For the solution method, C M<1，2，...，k，...，n> For component methods, E M<1，2，...，k，...，n> For element methods.

[0067] This embodiment further completes the modeling of the nested composite model structure related classes, mainly including: Layout class (M1), Common class (M2), Program class (M3), Component class (M4), and Element class (M5). The Common class (M2) is used to abstract the common attributes in the Program, Component and Element, that is, it is the parent class from which the common attributes are abstracted from the Program, Component and Element.

[0068] (1) Layout class (M1)

[0069] The Layout class (M1) includes, but is not limited to, properties such as programs for storing schemes, methods such as addProgramme for adding a scheme, updateProgramme for updating a scheme (i.e., editing a scheme), and deleteProgramme for deleting a scheme.

[0070] (2) Common parent class (M2)

[0071] The common parent class (M2) includes, but is not limited to, unique identifier id, factory area, name, style, background pattern, type, design width, design height, width, height, order, and whether it is active or not.

[0072] (3) Program class (M3)

[0073] The Programme class (M3) includes, but is not limited to, default program and personal program types, organization type, business type, coordinate x, coordinate y, number of horizontal screens (tableX), number of vertical screens (tableY), and components for storing components, as well as methods such as addComponent, updateComponent (i.e., edit component), and deleteComponent.

[0074] (4) Component class (M4)

[0075] The Component class (M4) includes, but is not limited to, ordinary components, large screen components, and process components. It has attributes such as encoding, scheme, address, parameters, x-coordinate, y-coordinate, and elements that store elements. It also has methods such as addElement, updateElement (i.e., edit element), and deleteElement.

[0076] (5) Element class (M5)

[0077] The Element class (M5) includes, but is not limited to, measurement points, historical values, real-time libraries, specific data sources, images, files, cameras, and types such as none, as well as attributes such as encoding, belonging component, parameters, processing parameters, x-coordinates, y-coordinates, method of obtaining values, measurement point ID, camera ID, and data type.

[0078] In this embodiment, the nested composite model structure includes: layout classes, scheme classes, component classes, and element classes. The layout class includes layout attributes and layout methods. Layout attributes include stored schemes, and layout methods include adding, editing, and deleting schemes. The scheme class includes scheme types, scheme attributes, and scheme methods. Scheme types include default schemes and personal schemes with different display formats. Scheme attributes include organization type, business type, x-coordinate, y-coordinate, number of horizontal screens, number of vertical screens, and stored components. Scheme methods include adding, editing, and deleting components. The component class includes component types, component attributes, and component methods. Component types include ordinary components, large-screen components, and process components with different display formats. Component attributes include code, scheme to which it belongs, address, parameters, x-coordinate, y-coordinate, and stored elements. Component methods include adding, editing, and deleting elements. The element class includes element types and element attributes. Element types include measurement points, historical values, real-time libraries, specific data sources, images, files, cameras, and none with different display formats. Element attributes include code, component to which it belongs, parameters, processing parameters, x-coordinate, y-coordinate, method of obtaining values, measurement point ID, camera ID, and data type.

[0079] Please see Figure 3This embodiment provides a nested composite model data and functional component working principle for a web page generation device based on a nested composite model. In order to generate, maintain and output basic data according to the defined NCM nested composite model (P1), and to render, display and use the output model JSON data (P2) as a web page, the following functional components are designed: NCM nested composite model (P1), model JSON data (P2), Configuring Controller (P3), LayoutBuilder (P4), PropertyEditor (P5), Component Loader (P6), Web layout page (P7), Program Remote Controller (P8), Component Library (P9), and Component List (P10).

[0080] The NCM nested composite model (P1) is the nested composite model structure defined above. It is mainly used to define the model-related structures and provide the foundation for generating model JSON data (P2), realizing the generation, maintenance, and output of basic data. Specifically, it combines the first data, the second data, and the third data according to the structure of the nested composite model to obtain the page layout data, which is the model JSON data (P2).

[0081] The model JSON data (P2) is mainly used to provide data support for the rendering, display and use of the Web layout page (P7).

[0082] The configuration controller (P3) is primarily responsible for adding new schemes, switching configuration or display modes, and switching between the default scheme and a personal scheme. Specifically, it provides initialization configuration functions for the page before operation and rendering through the `initConfig` method. These include buttons for opening the new scheme interface, toggling page configuration and display modes, opening and closing buttons for the component list interface, toggling between the default and personal schemes, and temporarily hiding and showing schemes. The default scheme can set general homepage or large-screen page scheme data and generate and render the page. Personal schemes can configure scheme data and generate and render display content pages according to the user's personalized needs. Simultaneously, personal schemes can generate a copy of the system's default scheme, significantly reducing configuration workload while meeting individual user needs. The configuration controller (P3) is presented as a toolbar in the view interface. It is displayed when the mouse hovers over a fixed area and hidden when the mouse leaves, providing good human-computer interaction without affecting the page display. Specifically, in configuration mode, each scheme within the layout has edit and delete buttons, and each component within the scheme has edit and delete buttons. At this time, users can select scheme types, add schemes, delete schemes, and delete components in configuration mode through human-computer interaction.

[0083] The layout generator (P4) is primarily responsible for acquiring page layout data, rendering the page layout and schemes based on the loaded scheme data, and generating layout and scheme display pages in the browser. Specifically, it parses the page layout data composed of a list of schemes, and then uses the Vue-based grid layout plugin vue-layout-grid, which features drag-and-drop page composition, dynamic adjustment of page structure and component size, and edge collision detection, to render the layout and scheme view interface in the corresponding area of ​​the page based on the page layout data. The scheme creation and configuration process is as follows: Schemes are added via the "Add Scheme" button in the page toolbar. A scheme is a relatively complete information display unit. Scheme information includes a list of scheme components used to store different information component units. The property editor (P5) is opened via the "Edit" button, allowing modification and configuration of scheme-related properties. Configuring the basic information properties of the scheme lays the foundation for adding and modifying the configuration of components within the scheme. The rendering of scheme elements is achieved through grid layout parameters combined with Web element size adaptation technology.

[0084] The Attribute Editor (P5) is primarily responsible for editing and modifying the attribute values ​​of schemes, components, and elements, as well as updating data. Specifically, it is responsible for dynamically modifying and updating the relevant attributes and rendering behavior parameters of schemes, components, and elements. By clicking the corresponding edit button on different view interfaces in configuration mode, the corresponding type of attribute editor view interface can be opened. The attribute editor view interface displays different edit attributes according to different types. In configuration mode, you can edit schemes, edit components, add elements, edit elements, and delete elements.

[0085] The component loader (P6) is primarily responsible for retrieving the component code from the component library (P9) based on the component code provided in the model's JSON data (P2), and then loading the component. Specifically, it handles the loading and rendering of components within the layout area. Dynamic loading and rendering of components are mainly achieved through...<component:is=”code”:component-params=”params”> This approach dynamically matches the component's code to the corresponding path in the project directory, passes in the appropriate component parameters (params), and then renders the component's view interface. Each component acts as a relatively independent unit for displaying functional data. Internally, it includes a list of component elements to store and display different information elements. Elements within the component acquire, render, and display multi-source heterogeneous data based on parameters such as the component's data type (data_type), value retrieval method (get_value_type), parameter (data_json), and processing parameter (handle_json). Component element rendering is achieved through a combination of component size parameters and Web element size adaptation technology.

[0086] The Web layout page (P7) is primarily responsible for rendering the model JSON data (P2) using the layout generator (P4) and component loader (P6). It then uses the attribute editor (P5) to modify and update the model JSON data (P2), thereby updating the content displayed on the Web layout page (P7). The Web layout page (P7) is composed of different scheme combinations, each containing nested components and elements. The hierarchical structure model data generated by the NCM-defined structure is rendered into the view interface through the layout generator (P4) and component loader (P6), simultaneously mapping and binding the model data to the view interface.

[0087] The solution remote controller (P8) first retrieves the solution list data (model JSON data (P2)) via HTTP, and then renders the solution p1, solution p2, ..., solution p nThe interface controls the solution selection via operation buttons. Operators click on a solution operation button, and through real-time WebSocket communication, the corresponding solution is matched, filtered, and displayed on the browser page. This is primarily designed for large-screen presentations. On the mobile device, different solution data is obtained, and a corresponding solution control button interface with cross-platform adaptability is rendered. The WebSocket bidirectional real-time data transmission protocol is used to achieve real-time and accurate remote switching of the required solution on the large-screen view interface.

[0088] The Component Library (P9) is primarily responsible for the unified storage and management of components, providing component model data for rendering component elements in the solution view interface. Specifically, the construction process of the Component Library (P9) is as follows: First, components are designed and developed based on business requirements. Then, the component registration method `componentRegister` registers key information such as the component's code and path in the project directory into the Component Library. This data will become crucial parameters for the subsequent component loader (P6) to match, load, and render components. The Component Library (P9) can be maintained, dynamically expanded, and removed from components according to actual usage needs and scenarios.

[0089] The component library includes, but is not limited to, general, large-screen, and process components. General components include, but are not limited to: measurement point card components, measurement point dashboard components, measurement point curve combination components, work order analysis components, title components, text description components, image import components, and anchor point link components. Large-screen components include, but are not limited to: plant layout map components, water quality and quantity display components, energy consumption display components, equipment status display components, and camera components. Process components include, but are not limited to: process route display components and process control components.

[0090] The component list (P10) is rendered using data provided by the component library (P9). By selecting a component from the component list (P10), you can drag and drop it onto a solution interface on the web layout page (P7) in the browser, completing the component addition operation for the corresponding solution on the page.

[0091] In this embodiment, adding a scheme, editing a scheme, and deleting a scheme all involve operating on the scheme's attributes; adding a component, editing a component, and deleting a component all involve operating on the component's attributes; and adding an element, editing an element, and deleting an element all involve operating on the element's attributes.

[0092] The configuration controller is also used to select the layout type, which includes large screen mode and homepage mode. In this case, the page layout data includes the layout type. In large screen mode, the web page can only display one solution, and the display format is full screen. The solution display is switched by clicking the left and right switch buttons. In homepage mode, the web page can display all solutions at the same time, and the display format is non-full screen. The solution display and browsing is completed by scrolling.

[0093] It should be noted that the homepage mode (corresponding to the homepage module) and the large screen mode (corresponding to the large screen module) have the following characteristics: The homepage module page has one or more schemes in the browser, which are arranged sequentially from top to bottom. The content of the schemes is displayed in a non-full-screen format, and users can browse the content of different schemes on the page by scrolling. The large screen module page displays only one scheme in the browser. The content of the scheme is displayed in full-screen format and does not provide scrolling. Users can switch between scheme pages by hovering the mouse over the scheme page to temporarily show it and removing the mouse to temporarily hide it. Users can also remotely control the large screen scheme page by clicking the scheme button on the mobile remote control page.

[0094] The Web page generation device based on the nested combination model in this embodiment further includes: a scheme remote controller, which is connected to a database to obtain scheme data from the page layout data and respond to the user's instruction to select a scheme based on the scheme data, and display the scheme selected by the user in large screen mode.

[0095] To understand the web page generation steps and usage flow of the web page generation device based on the nested composition model, please refer to [link / reference]. Figure 4 , Figure 4 This embodiment provides a flowchart of web page generation and usage using a web page generation device based on a nested composition model. The specific generation and usage steps are as follows:

[0096] S0: Start operation, specifically entering the Web page generation device based on the nested composition model. Before the first page generation, the required components are registered in the component library through the componentRegister method (S10) (S11).

[0097] S1: Initialize configuration. Open the page and set basic parameters such as unitId of the affiliated factory area, type of layout, programType of scheme, tableX (screen width), and tableY (screen height) by executing the initConfig method. When the large screen mode is selected for the layout type, the large screen width tableX and large screen height tableY are set accordingly.

[0098] S2: Retrieve page layout data. The page layout data is retrieved using the `getLayoutData` method. Note that there are two scenarios: one is executed under the parameters of the initialization configuration (S1), and the other is executed under the parameters after scheme configuration operations (including adding a scheme (S3.2), editing a scheme (S8), and deleting a scheme (S9)). The first scenario involves data retrieved directly without any scheme configuration operations by default, while the second scenario involves data retrieved after scheme configuration operations (adding, editing, or deleting). The main difference is that the number of schemes and the content data within each scheme in the page layout data change.

[0099] S3: Whether a solution exists is determined based on the query results of the obtained page layout data. If no solution configuration was performed initially, or if all configured solution data was deleted, there will be no solution data. If a solution has been configured or there is no solution data, adding a new solution will generate solution data.

[0100] S3.1: Layout rendering. Based on the condition judgment result obtained in step S3, if there is scheme data, the layout rendering method layoutRender is executed to render the layout content.

[0101] S3.2: Add a new plan. Based on the conditions obtained in step S3, determine the processing result. If there is no plan data, a new plan can be added using the addProgramme method. Then, proceed to step S2.

[0102] S4: Scheme rendering, the scheme rendering method programRender continues from step S3.1 to render the scheme content.

[0103] S5: Whether there is a component. Perform conditional judgment on whether there is component data in the solution data. If there is component data in the solution data or no component data, the addition of a component is performed after the operation is performed. If there is component data but the operation of deleting all components has been performed, or no component data has been performed and no addition of a component has been performed, then there is no component data.

[0104] S5.1: Component rendering. Based on the condition obtained in step S5, if there is component data, the component rendering method is executed to render the component content.

[0105] S5.2: Component list view interface. Based on the condition obtained in step S5, the processing result is judged. If there is no component data, the configuration controller is switched to configuration mode and the component list view interface ComponentList, which is rendered based on the data in the component library, is opened. The component list view interface ComponentList is rendered by obtaining the components registered in the component library (S11) (the component registration operation is completed by executing the component group registration method ComponentRegister(S10)).

[0106] S5.3: Add a new component. Drag and drop component data from the ComponentList view onto the solution view to trigger the addComponent method and complete the operation of adding a component to the solution.

[0107] S6: Whether there is an element, perform conditional judgment processing based on whether there is element data in the component data.

[0108] S6.1: Element rendering. Based on the condition obtained in step S6, if there is element data, the element rendering method elementRender is executed to render the element content, thereby completing the generation and rendering of the page.

[0109] S6.2: Add an element. Based on the conditions obtained in step S6, determine the processing result. If there is no element data, add an element. Open the attribute editor and execute the addElement method to add an element to complete the operation of adding an element to the component. Then execute step S2.

[0110] S7: Solution view interface. After step S6.1 is completed, the solution view interface can be obtained in the browser, thus completing the generation and rendering of the page.

[0111] S8: Editing the scheme involves performing operations such as adding a component (S5.3), editing a component (S5.4), and deleting a component (S5.5) to update the scheme using `addComponent`. Editing a component is done by adding an element (S6.2), editing an element (S6.3), and deleting an element (S6.4). Step S2 is then executed. The property editor allows for editing and modifying the properties of components and elements (using the methods `updateComponent` (S5.4)` and `updateElement` (S6.3)`) and deleting elements using `deleteElement` (S6.4). In configuration mode, the delete methods `deleteProgramme` (S9) and `deleteComponent` (S5.5) are used in the scheme view and component view to delete the scheme and component respectively, thus modifying the model data and achieving real-time synchronization between the model data and the view interface.

[0112] S9: Delete Program. The program data to be deleted from the page layout data is completed by executing the deleteProgram method. Then, step S2 is executed.

[0113] S12: Program Remote Control: The program remote control can execute the programSwitch method by clicking the button to select different programs. This method uses WebSocket data transmission technology to send the program ID data. After receiving the selected program ID data, the page layout data will use this program ID data for filtering and matching within the page layout data.

[0114] S13: Matching a Solution: Based on the solution ID obtained from remote control and the acquired page layout data, a filtering and matching process is performed to determine whether a solution is matched. After receiving the selected solution ID data, the page layout data is filtered and matched to determine whether a solution is matched. If a solution is matched, step S3.1 is executed to redraw and render the selected solution layout page, rendering the view interface of the selected solution in real time, thus realizing the function of remotely switching solutions. Otherwise, the operation ends (S14), and the page layout solution data and screen display remain unchanged.

[0115] To understand in more detail the engineering application effects of the web page generation device based on the nested composition model, please refer to [link / reference]. Figure 5 , Figure 5 This screenshot is an engineering application example of a web page generation device based on a nested combination model provided in this embodiment. It shows the rendering and display effects of some homepage and large screen pages in an embodiment system completed using this method. The lower left image is the rendering and display effect of the homepage page, the lower right image is the rendering and display effect of the large screen page, and the upper image is the editing page.

[0116] The purpose of this embodiment is to overcome the problems existing in the prior art and to provide a web page generation device based on a nested combination model, the beneficial effects of which are:

[0117] (1) By using the provided component library, layout generator, component loader, and property editor to configure the relevant properties, the page content of multi-source heterogeneous data elements (numerical, text, image, video, hyperlink, file, etc.) in the system can be flexibly and dynamically configured, generated and displayed, which reduces the cost of system construction and maintenance and shortens the response time for demand adjustment.

[0118] (2) By configuring the default and personal mode switching function provided by the controller, users can flexibly choose to create a new personal plan or generate a personal plan by the system default plan according to their actual needs. While meeting the flexible and ever-changing individual needs, users can also modify and adjust the personal plan data based on the system default plan to complete the generation and rendering of the display content page, thereby greatly reducing the configuration workload.

[0119] (3) By establishing different types of components in the component library, providing the organization type (organizational structure level) parameter when obtaining solution data, and using the provided solution remote control with a two-way real-time communication protocol to complete the real-time switching and display of different solution layout pages, the actual usage needs of different user roles and usage scenarios are better met.

[0120] Example 2

[0121] This embodiment provides a web page generation method based on a nested composition model, the method comprising:

[0122] S1: Get page layout data.

[0123] S2: Determine whether the page layout data includes the scheme data to obtain the first judgment result.

[0124] S3: If the first judgment result is negative, add a new solution to update the page layout data and return to the "Get Page Layout Data" step.

[0125] S4: If the first judgment result is yes, then generate the layout display page and render the scheme data to obtain the scheme display page in the layout display page.

[0126] S5: Determine whether the solution data includes component data to obtain the second judgment result.

[0127] S6: If the second judgment result is negative, add a new component to update the page layout data and return to the "Get Page Layout Data" step.

[0128] S7: If the second judgment result is yes, then render the component data to obtain the component display page in the solution display page.

[0129] S8: Determine whether the component data includes element data to obtain the third judgment result.

[0130] S9: If the third judgment result is negative, add a new element to update the page layout data and return to the "Get Page Layout Data" step.

[0131] S10: If the third judgment result is yes, then render the element data to obtain the element display page in the component display page, and complete the generation of the Web page.

[0132] Before obtaining the page layout data, the Web page generation method based on the nested combination model in this embodiment further includes: initialization configuration, specifically including: selecting the affiliated factory area of ​​the data to be displayed, selecting the layout type and selecting the scheme type; the affiliated factory area is used to provide the data to be displayed, and when rendering the element data, the rendered elements are used to display the data to be displayed; the layout type is used to generate the layout display page; the scheme type is used to generate the scheme data.

[0133] The Web page generation method based on the nested combination model in this embodiment further includes: editing a scheme, deleting a scheme, editing a component, deleting a component, editing an element, and / or deleting an element to update the page layout data and return to the step of "getting page layout data".

[0134] The Web page generation method based on the nested combination model in this embodiment further includes: obtaining the scheme data selected by the user; matching the scheme data selected by the user with the scheme data in the page layout data; if the matching is successful, rendering the scheme data selected by the user to complete the switching display of the scheme in the large screen mode.

[0135] Example 3

[0136] This embodiment provides a web page generation system based on a nested composite model, which includes an application layer, a service layer, and a data layer.

[0137] The application layer includes a data display module. The data display module uses the Web page generation device based on the nested combination model described in Embodiment 1 and the Web page generation method based on the nested combination model described in Embodiment 2 to generate a Web page for displaying the data to be displayed.

[0138] The service layer is used to send the data to be displayed provided by the data layer to the application layer.

[0139] The data layer comprises multiple databases that jointly store heterogeneous data from multiple sources. This heterogeneous data includes data from different sources, of different types, with different structures and formats. The data layer is used to select data to be displayed from this heterogeneous data based on user needs.

[0140] Please see Figure 6 This is a diagram of the main technical architecture of a web page generation system based on a nested combination model provided in this embodiment. The main technical architecture involved is divided into (a) application layer (A1), (b) service layer (B1) and (c) data layer (C1).

[0141] The application layer (A1) mainly includes a web page generation method based on a nested composite model (A1.1), and different business functions: Production System 1 (A1.2), Production System 2 (A1.3), Operation System 3 (A1.4), and Management System 4 (A1.5). Production System 1 (A1.2) includes, but is not limited to, homepage modules, large screen modules, process modules, equipment modules, and planning modules. Production System 2 (A1.3) includes, but is not limited to, homepage modules, large screen modules, alarm modules, inspection modules, and report modules. Operation System 3 (A1.4) includes, but is not limited to, homepage modules, large screen modules, statistics modules, decision-making modules, and scheduling modules. Management System 4 (A1.5) includes, but is not limited to, homepage modules, large screen modules, human resources modules, performance modules, and system modules.

[0142] The Web page generation method based on the nested combination model (A1.1) is mainly applied to functional modules with relevant needs and problems in production systems, operation systems and management systems, such as homepage modules and large screen modules. The homepage module corresponds to the homepage mode of Embodiment 1, and the large screen module corresponds to the large screen mode of Embodiment 1.

[0143] The functional modules of the application layer (A1) are mainly implemented using front-end application frameworks including but not limited to Vue (A1.6) and Nuxt (A1.7). The methods for generating web pages are mainly implemented using layout plugins including but not limited to Vue (A1.6) and vue-grid-layout (A1.8).

[0144] The service layer (B1) mainly consists of distributed microservices (B1.1) implementing different business functions based on Service Oriented Architecture (SOA), nginx (B1.2) with reverse proxy and load balancing capabilities, and a node (B1.3) cluster. Distributed microservices (B1.1) include, but are not limited to, basic services, data center services, measurement point services, equipment services, reporting services, inspection services, and alarm services.

[0145] The data layer (C1) primarily employs distributed storage technology, utilizing various database storage systems and services to store multi-source heterogeneous data generated from different production and management systems. Multi-source heterogeneous data (C1.4) refers to data from different sources, of different types (text, images, audio, video, etc.), with different structures (structured, unstructured, and semi-structured), and in different formats. The databases primarily used for storing this data and implementing related functions include, but are not limited to, relational database SQL Server (C1.1), industrial real-time / historical database (KingHistorian, KH) (C1.2), and distributed file storage MinIO (C1.3).

[0146] Among them, multi-source heterogeneous data (C1.4) includes, but is not limited to, real-time data, historical data, images, camera feeds, hyperlinks, and files.

[0147] In the technical solutions provided in this embodiment, it should be understood that the disclosed methods can be implemented using other technical means. For example, the technical implementation in the application layer (A1) is merely illustrative. For instance, the front-end application framework uses Nuxt (A1.7) based on Vue (A1.6), but in actual implementation, other technical implementation methods are possible. As another example, the layout plugin used for generating web pages is vue-grid-layout (A1.8), but in actual implementation, other layout plugins with equivalent functionality and performance can be used instead. The same applies to the service layer (B1) and data layer (C1).

[0148] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of the relevant data must comply with relevant regulations.

[0149] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0150] This document uses specific examples to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the methods and core ideas of this application. Furthermore, those skilled in the art will recognize that, based on the ideas of this application, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A web page generation device based on a nested composition model, characterized in that, The web page generation device based on the nested combination model includes: The configuration controller is used to switch between configuration mode and display mode, as well as select scheme type, add scheme, delete scheme and delete component in configuration mode; scheme types include default scheme and personal scheme, and personal scheme is a personalized scheme designed according to user needs; The property editor is used to edit schemes, components, add elements, edit elements, and delete elements in configuration mode. The component list is used to add components by dragging and dropping in configuration mode. The database, connected to the configuration controller, property editor, and component list, receives the following data: first data generated by the configuration controller when selecting scheme types, adding schemes, deleting schemes, and deleting components in configuration mode; second data generated by the property editor when editing schemes, editing components, adding elements, editing elements, and deleting elements in configuration mode; and third data generated by the component list when adding components via drag-and-drop in configuration mode. The database then combines the first, second, and third data according to a nested combination model to obtain the page layout data. The nested combination model structure is as follows: a layout includes several schemes, a scheme includes several components, and a component includes several elements. The layout generator connects to the database and is used to obtain page layout data in display mode, and render the scheme data in the page layout data to obtain the layout display page and the scheme display page; the scheme data is the data generated by adding, editing and deleting schemes. A component library stores various components. The component loader, connected to the database and component library, is used to retrieve page layout data in presentation mode and call components from the component library based on the page layout data to render the component and element data in the page layout data, resulting in the component display page and the element display page. The layout display page, scheme display page, component display page, and element display page together constitute a web page. Among them, the component data is the data generated by adding, editing, and deleting components; the element data is the data generated by adding, editing, and deleting elements. The structure of the nested composite model includes: layout class, scheme class, component class, and element class; Layout classes include layout properties and layout methods; layout properties include storage schemes; layout methods include adding schemes, editing schemes, and deleting schemes. The solution category includes solution type, solution attributes, and solution methods; solution types include default solutions and personal solutions with different display formats; solution attributes include organization type, business type, x-coordinate, y-coordinate, number of horizontal screens, number of vertical screens, and storage components; solution methods include adding components, editing components, and deleting components. Component classes include component types, component properties, and component methods; component types include ordinary components, large-screen components, and process components with different display formats; component properties include code, scheme, address, parameters, x-coordinate, y-coordinate, and storage element; component methods include adding elements, editing elements, and deleting elements. Element classes include element type and element attributes; element types include measurement points with different display formats, historical values, real-time libraries, specific data sources, images, files, cameras, and none; element attributes include encoding, component, parameters, processing parameters, x-coordinates, y-coordinates, method of obtaining values, measurement point ID, camera ID, and data type.

2. The Web page generation device based on a nested combination model according to claim 1, characterized in that, Adding a scheme, editing a scheme, and deleting a scheme all involve manipulating the scheme's attributes; adding a component, editing a component, and deleting a component all involve manipulating the component's attributes; adding an element, editing an element, and deleting an element all involve manipulating the element's attributes.

3. The Web page generation device based on a nested combination model according to claim 1, characterized in that, The configuration controller is also used to select the layout type, which includes large screen mode and homepage mode. In this case, the page layout data includes the layout type. In large screen mode, the web page can only display one solution, and the display format is full screen. The solution display can be switched by clicking the left and right switch buttons. In homepage mode, the web page can display all solutions at the same time, and the display format is non-full screen. The solution display and browsing can be completed by scrolling.

4. The Web page generation device based on a nested combination model according to claim 3, characterized in that, The web page generation device based on the nested combination model further includes: The solution remote control connects to the database to retrieve solution data from the page layout data and responds to user commands to select a solution based on the solution data, displaying the selected solution in large-screen mode.

5. A method for generating web pages based on a nested composition model, implemented by the web page generation apparatus based on a nested composition model as described in any one of claims 1-4, characterized in that, The web page generation method based on the nested combination model includes: Get page layout data; Determine whether the page layout data includes the scheme data to obtain the first judgment result; If the first judgment result is negative, a new solution is added to update the page layout data, and the process returns to the "Get Page Layout Data" step. If the first judgment result is yes, then generate the layout display page and render the scheme data to obtain the scheme display page in the layout display page; Determine whether the solution data includes component data to obtain a second determination result; If the second judgment result is negative, a new component is added to update the page layout data, and the process returns to the "Get Page Layout Data" step. If the second judgment result is yes, then the component data is rendered to obtain the component display page in the solution display page; Determine whether the component data includes element data to obtain the third judgment result; If the third judgment result is negative, add a new element to update the page layout data and return to the "Get Page Layout Data" step; If the third judgment result is yes, then the element data is rendered to obtain the element display page in the component display page, thus completing the generation of the web page.

6. The Web page generation method based on a nested combination model according to claim 5, characterized in that, Before acquiring page layout data, the Web page generation method based on the nested combination model further includes: initialization configuration, specifically including: selecting the affiliated factory area of ​​the data to be displayed, selecting the layout type, and selecting the scheme type; the affiliated factory area is used to provide the data to be displayed, and the rendered elements are used to display the data to be displayed when rendering the element data; the layout type is used to generate the layout display page; and the scheme type is used to generate scheme data.

7. The Web page generation method based on a nested composition model according to claim 5, characterized in that, The Web page generation method based on the nested combination model further includes: editing schemes, deleting schemes, editing components, deleting components, editing elements, and / or deleting elements to update the page layout data and return to the step of "getting page layout data".

8. The Web page generation method based on a nested composition model according to claim 5, characterized in that, The web page generation method based on the nested combination model also includes: Obtain the data of the plan selected by the user; Match the user's selected scheme data with the scheme data in the page layout data; If the match is successful, the data of the solution selected by the user will be rendered to complete the switching and display of the solution in the large screen mode.

9. A web page generation system based on a nested composition model, characterized in that, The web page generation system based on the nested combination model includes: an application layer, a service layer, and a data layer; The application layer includes a data display module, which uses the Web page generation device based on the nested combination model as described in any one of claims 1-4 and the Web page generation method based on the nested combination model as described in any one of claims 5-8 to generate a Web page for displaying the data to be displayed. The service layer is used to send the data to be displayed provided by the data layer to the application layer; The data layer comprises multiple databases that jointly store heterogeneous data from multiple sources. This heterogeneous data includes data from different sources, of different types, with different structures and formats. The data layer is used to select data to be displayed from this heterogeneous data based on user needs.

Images