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

Abstract

The invention 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. A scheme type, a newly-added scheme, an editing scheme, a deleting scheme, a newly-added component, an editing component, a deleting component, a newly-added element, an editing element and a deleting element can be selected in a configuration mode, and a database is designed; data generated by a configuration controller, an attribute editor and a component list in an editing mode can be combined according to the structure of a nested combination model to obtain page layout data, a layout generator and a component loader are designed, and layout, schemes, components and elements can be rendered according to the page layout data to generate a Web page, so that the Web page can be displayed in the editing mode. According to the method and the device, the Web page can be better generated, and the problems in the prior art are solved.

Description

Technical Field

[0001] The present application relates to the technical field of computer software engineering, and in particular to a device, method and system for generating a Web page based on a nested combination model. Background Art

[0002] In the era of digital transformation, groups and enterprises in different industries have extensive demands and applications for the configuration, modification, adjustment, display and analysis of production, operation and management related data. It is an important channel and means for groups and enterprises to carry out business, coordinate resources, assist in decision-making, achieve goals, enhance value and upgrade strategies. However, in the digital transformation process of these traditional manufacturing enterprises, most business production systems, operation systems and management systems have the following problems when different user roles operate and use the system:

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

[0004] (2) Different users have different habits and preferences, which makes the display requirements of page elements complex and changeable.

[0005] (3) The workload of configuring the page is large and complicated, the cost of page construction and maintenance is high, and the demand adjustment cycle 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 changeable page element display requirements, large and complex workload when configuring pages, high page construction and maintenance costs, and long demand adjustment cycle.

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

[0008] In a first aspect, the present application provides a web page generation device based on a nested combination model, the web page generation device based on a nested combination model comprising:

[0009] Configuration controller, used to switch between configuration mode and display mode, and select solution type, add new solution, delete solution and delete components in configuration mode; solution types include default solution and personal solution, and personal solution is a personalized solution designed according to user needs;

[0010] Property Editor, used to edit schemes, edit components, add elements, edit elements, and delete elements in configuration mode;

[0011] Component list, used to add components by dragging in configuration mode;

[0012] The database is connected to the configuration controller, the property editor and the component list respectively, and is used to receive the first data generated by the configuration controller selecting a scheme type, adding a scheme, deleting a scheme and deleting a component in the configuration mode, the second data generated by the property editor editing a scheme, editing a component, adding an element, editing an element and deleting an element in the configuration mode, and the third data generated by the component list adding a component by dragging in the configuration mode, and combine the first data, the second data and the third data according to the structure of the nested combination model to obtain page layout data; wherein the structure of the nested combination model is: the layout includes a number of schemes, the scheme includes a number of components, and the component includes a number of elements;

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

[0014] Component library, which stores different components;

[0015] The component loader is connected to the database and the component library, and is used to obtain the page layout data in the display mode, and call the components in the component library based on the page layout data to render the component data and element data in the page layout data to obtain the component display page and the element display page; the layout display page, the scheme display page, the component display page and the element display page constitute the Web page; among them, the component data is the data generated by adding a component, editing a component and deleting a component; the element data is the data generated by adding an element, editing an element and deleting an element.

[0016] In a second aspect, the present application provides a method for generating a web page based on a nested combination model, the method for generating a web page based on a nested combination model comprising:

[0017] Get page layout data;

[0018] Determine whether the page layout data includes solution data, and obtain a first determination result;

[0019] If the first judgment result is no, a new solution is added to update the page layout data, and the process returns to the step of "obtaining page layout data";

[0020] If the first judgment result is yes, a layout display page is generated, and the solution data is rendered to obtain a solution display page in the layout display page;

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

[0022] If the second judgment result is no, then a new component is added to update the page layout data, and the process returns to the step of "obtaining page layout data";

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

[0024] Determine whether the component data includes element data, and obtain a third determination result;

[0025] If the third judgment result is no, then a new element is added to update the page layout data, and the process returns to the step of "obtaining page layout data";

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

[0027] In a third aspect, the present application provides a web page generation system based on a nested combination model, the web page generation system based on a nested combination model comprising: an application layer, a service layer and a data layer;

[0028] The application layer includes a data display module, which uses the above-mentioned Web page generation device based on the nested combination model and the above-mentioned Web page generation method based on the nested combination model to generate a Web page to display 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 includes multiple databases, which jointly store multi-source heterogeneous data. The multi-source heterogeneous data includes data from different sources, different types, different structures and different formats; the data layer is used to select data to be displayed from the multi-source heterogeneous data according to user needs.

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

[0032] The present application provides a web page generation device, method and system based on a nested combination model, designs a configuration controller, a property editor and a component list, and is capable of selecting a scheme type, adding a new scheme, editing a scheme, deleting a scheme, adding a component, editing a component, deleting a component, adding an element, editing an element and deleting an element in a configuration mode; designs a database, and is capable of combining the data generated by the configuration controller, the property editor and the component list in the editing mode according to the structure of the nested combination model to obtain page layout data; designs a layout generator and a component loader, and is capable of rendering the layout, scheme, component and element according to the page layout data to generate a web page; the present application can select different schemes, components and elements according to user needs, and nest and combine different schemes, components and elements, so that the scheme includes multiple components and the component includes multiple elements, thereby better generating a web page, solving the problems of strong heterogeneity of page display content elements, complex and changeable page element display requirements, large and complex workload when configuring the page, high page construction and maintenance costs and long demand adjustment cycle. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0034] Figure 1 A schematic diagram of a nested combination model structure provided in Example 1 of the present application; wherein: Figure 1 (a) is a schematic diagram of the nested structure. Figure 1 (b) is a schematic diagram of the combined structure. Figure 1 (c) is a schematic diagram of the nested combination model.

[0035] Figure 2 A schematic diagram of the nested combination model structure and relationship class provided in Example 1 of the present application.

[0036] Figure 3 Schematic diagram of the working principle of the nested combination model data and functional components provided in Example 1 of the present application.

[0037] Figure 4 A flowchart of web page generation and use provided in Example 1 of the present application.

[0038] Figure 5 Screenshot of the engineering application case provided in Example 1 of this application.

[0039] Figure 6A schematic diagram of the main technical architecture of a web page generation system based on a nested combination model provided in Example 3 of the present application. DETAILED DESCRIPTION

[0040] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work 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 combination model, and the web page generation device based on a nested combination model includes:

[0043] The configuration controller is used to switch between configuration mode and display mode, and to select solution types, add new solutions, delete solutions, and delete components in configuration mode. Solution types include default solutions and personal solutions. Personal solutions are personalized solutions designed according to user needs.

[0044] Property Editor, used to edit schemes, edit components, add new elements, edit elements, and delete elements in configuration mode.

[0045] Component list, used to add new components by dragging in configuration mode.

[0046] The database is connected to the configuration controller, the property editor and the component list respectively, and is used to receive the first data generated by the configuration controller when selecting a scheme type, adding a new scheme, deleting a scheme and deleting a component in the configuration mode, the second data generated by the property editor when editing a scheme, editing a component, adding an element, editing an element and deleting an element in the configuration mode, and the third data generated by the component list when adding a new component by dragging in the configuration mode, and combine the first data, the second data and the third data according to the structure of the nested combination model to obtain page layout data, wherein the structure of the nested combination model is: the layout includes several schemes, the scheme includes several components, and the component includes several elements.

[0047] The layout generator is connected to the database and is used to obtain page layout data in display mode and render the solution data in the page layout data to obtain a layout display page and a solution display page, wherein the solution data is the data generated by adding a new solution, editing a solution and deleting a solution.

[0048] Component library, which stores different components.

[0049] The component loader is connected to the database and the component library, and is used to obtain the page layout data in the display mode, and call the components in the component library based on the page layout data to render the component data and element data in the page layout data, and obtain the component display page and the element display page. The layout display page, the scheme display page, the component display page and the element display page constitute the Web page. Among them, the component data is the data generated by adding a component, editing a component and deleting a component, and the element data is the data generated by adding an element, editing an element and deleting an element.

[0050] To better understand the nested combination model in the Web page generation device based on the nested combination model, please refer to Figure 1 , Figure 1 It is a schematic diagram of the structure of the nested combination model, such as Figure 1 As shown in (a), it is a schematic diagram of a nested structure (NestingStructure, NS). Nesting is to embed an object into another object, and then embed these two objects into a third object, and so on. Figure 1 As shown in (b), it is a schematic diagram of a combination structure (CS). A combination is a structure that combines several parts or individuals into a whole, such as Figure 1 As shown in (c), it is a schematic diagram of Nested Combinatorial Models (NCM). The Nested Combinatorial Model constructs a model with hierarchical structural characteristics from simple to complex and from local to overall by nesting and combining these two structures. Specifically in this embodiment, elements, components, schemes and layouts belong to nested structures, elements belong to components, components belong to schemes, schemes belong to layouts, and multiple elements belonging to the same component, multiple components belonging to the same scheme, and multiple schemes belonging to the same layout belong to combined structures.

[0051] To illustrate the nested combination model structure and relationship class diagram of the Web page generation device based on the nested combination model, please refer to Figure 2 , Figure 2 For the nested composite model structure and relationship class diagram, the nested composite model structure is 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 combination model structure, mainly including: the definition of the nested combination model structure, the definition of the program (P), the definition of the component (C), the definition of the element (E), the attribute set A set Definition and method set M set The definition of, the definition of attribute (Attribute, A) and the definition of method (Method, M).

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

[0054] The nested combination model consists of a series of nested triple sets NCM: <P set <C set <E set >>> is composed of the nested triple set NCM consisting of the solution set P set The solution P consists of a set of components C set The component C consists of the element set E set Where NCM={ncm1,ncm2,...,ncm k , ..., ncm n},ncm k ∈NCM, represents a nested triple <p k <c k <e k >>>, P set ={p1, p2, ..., p k , ..., p n}, p k ∈P set Represents a solution, C set ={c1, c2, ..., c k , ..., c n}, c k ∈C set Represents a component, E set ={e1, e2, ..., e k , ..., e n},e k ∈E set Represents an element.

[0055] (2) Definition of the plan

[0056] Scheme P consists of four elements <T,A set , M set , C set > structure, where T is the type, P T <defualt>< / defualt> is the default scheme, P T <personal>< / personal> For personal plan, Aset is the attribute set, M set is a method set, C set A collection of components.

[0057] (3) Component Definition

[0058] Component C consists of four elements <T,A set , M set , E set > structure, where T is the type, C T <common>< / common> For ordinary components, C T <screen>< / screen> For large screen components, C T <process>< / process> A is the process component. set is the attribute set, M set is the method set, E set A collection of elements.

[0059] (4) Definition of elements

[0060] The element E consists of a triple <T,A set , M set > structure, where T is the type, E T <mp>< / mp> is the measuring point, E T <history>< / history> is the historical value, E T <rtdb>< / rtdb> For real-time library, E T <spcds>< / spcds> For a specific data source, E T <pic>< / pic> For pictures, E T <file>< / file> For files, E T <camera>< / camera> For the camera, E T <none>< / none> A set is the attribute set, M set A collection of methods.

[0061] (5) Definition of attribute set and method set

[0062] Solution P, component C, and element E all include a set of properties and methods, where A set is the attribute set, A set ={a1, a2, ..., a k , ..., a n}, a k ∈A set Represents an attribute, M set is the method set, M set ={m1, m2, ..., m k , ..., m n},m k ∈M set Represents a method.

[0063] (6) Definition of attributes

[0064] Attribute A: PA<1，2，..，k，...，n> is the scheme attribute, C A<1，2，...，k，...，n> is the component property, E A<1，2，...，k，...，n> Is an element attribute.

[0065] (7) Definition of method

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

[0067] This embodiment further completes the modeling of classes related to the nested combination model structure, mainly including: layout class (M1), common parent class Common class (M2), program class (M3), component class (M4) and element class (M5). The common parent class Common class (M2) is used to abstract the common properties of programs, components and elements, that is, it is the parent class that abstracts common properties from programs, components and elements.

[0068] (1) Layout class (M1)

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

[0070] (2) Common class (M2)

[0071] The common parent class Common class (M2) includes but is not limited to the unique identification ID, factory area, name, style, background mode, type, design width, design height, width, height, order, activation or not and other attributes.

[0072] (3) Program class (M3)

[0073] The Programme class (M3) includes but is not limited to the default plan and personal plan types, organization type, business type, coordinate x, coordinate y, number of horizontal screens tableX, number of vertical screens tableY, and components that store 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 types such as common components, large-screen components and process components, properties such as encoding, scheme, address, parameters, coordinate x, coordinate y and elements of storage elements, methods such as adding elements addElement, updating elements (i.e. editing elements) updateElement and deleting elements deleteElement.

[0076] (5)Element class (M5)

[0077] The Element class (M5) includes but is not limited to measurement point, historical value, real-time library, specific data source, image, file, camera and none types, encoding, component, parameter, processing parameter, coordinate x, coordinate y, value acquisition method, measurement point id, camera id and data type and other attributes.

[0078] At this time, in this embodiment, the structure of the nested combination model includes: layout class, scheme class, component class and element class. The layout class includes layout attributes and layout methods. The layout attributes include storage schemes. The layout methods include adding schemes, editing schemes and deleting schemes. The scheme class includes scheme types, scheme attributes and scheme methods. The scheme types include default schemes and personal schemes with different display forms. The scheme attributes include organization type, business type, coordinate x, coordinate y, number of horizontal screens, number of vertical screens and storage components. The scheme methods include adding components, editing components and deleting components. The component class includes component types, component attributes and component methods. The component types include ordinary components, large screen components and process components with different display forms. The component attributes include coding, belonging schemes, addresses, parameters, coordinate x, coordinate y and storage elements. The component methods include adding elements, editing elements and deleting elements. The element class includes element types and element attributes. The element types include measurement points with different display forms, historical values, real-time libraries, specific data sources, pictures, files, cameras and none. The element attributes include coding, belonging components, parameters, processing parameters, coordinate x, coordinate y, the way to obtain values, measurement point id, camera id and data type.

[0079] See also Figure 3, which is a nested combination model data and functional component working principle of a Web page generation device based on a nested combination model provided in this embodiment. In order to realize the generation, maintenance and output of basic data according to the defined NCM nested combination model (P1), and to render, display and use the output model JSON data (P2) on the Web page, the following functional components are designed: NCM nested combination model (P1), model JSON data (P2), configuration controller (Configuring Controller) (P3), layout generator (LayoutBuilder) (P4), property editor (PropertyEditor) (P5), component loader (Component Loader) (P6), Web layout page (P7), program remote controller (Programme Remote Controller) (P8), component library (Component Library) (P9) and component list (P10).

[0080] The NCM nested combination model (P1) is the nested combination model structure that has been defined above, and is mainly used to complete the definition of the model-related structure, provide a basis for generating the model JSON data (P2), and realize 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 combination model to obtain 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 mainly responsible for adding new solutions, switching configuration mode or display mode, and switching the default solution or personal solution. Specifically, it provides the page with initial configuration functions before operation and rendering through the initConfig method, which mainly includes the operation button for opening the solution adding interface, the switch for page configuration and display mode, the open and close buttons of the component list interface, the switch for the default and personal solutions, and the temporary hiding and display switch of the solution. The default solution can set the solution data of the general homepage or large screen page, and generate and render the page. The personal solution can configure the solution data and generate and render the display content page according to the user's own personalized needs. At the same time, the personal solution can generate a solution copy through the system's default solution, which can meet the user's personalized needs while greatly reducing the configuration workload. The configuration controller (P3) is presented in the view interface as a tool operation bar, which can be displayed by moving the mouse into a fixed area and hidden when the mouse is moved out. It has a good human-computer interaction effect without affecting the page display effect. Specifically, in configuration mode, each scheme in the layout has edit and delete buttons, and each component in the scheme has edit and delete buttons. At this time, you can select the scheme type, add a new scheme, delete a scheme, and delete a component in configuration mode through human-computer interaction.

[0083] The layout generator (P4) is mainly responsible for obtaining page layout data, rendering page layout and scheme according to the loaded scheme data, generating layout display page and scheme display page in the browser, and specifically responsible for parsing the page layout data composed of the scheme list, and then using the grid layout plug-in vue-layout-grid based on Vue, which has the functions of dragging and dropping to form pages, dynamically adjusting page structure and component size, and edge collision monitoring, to render the layout and scheme view interface in the corresponding area of ​​the page based on the page layout data. The establishment and configuration process of the scheme is as follows: the scheme is added through the scheme add button on the page toolbar. As a relatively complete information display unit, the scheme information includes a scheme component list attribute used to store and display different information component units. The edit button opens the property editor (P5), and the scheme-related attributes can be modified and configured. Configuring the basic information attributes of the scheme itself will lay the foundation for adding and modifying the configuration of components in the scheme. The rendering of scheme elements is achieved through the grid layout parameters combined with the Web element size adaptation technology.

[0084] The Property Editor (P5) is mainly responsible for editing and modifying the property values ​​of schemes, components and elements and updating data. It is specifically responsible for dynamically modifying and configuring the relevant properties 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 property editor view interface is opened. The property editor view interface displays different editing properties 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 mainly responsible for loading components after matching and obtaining the component code provided in the model JSON data (P2) from the component library (P9). It is specifically responsible for loading and rendering components in the solution layout area. The dynamic loading and rendering of components is mainly done through<component:is=”code”:component-params=”params”> In this way, the component with the corresponding path in the project directory is obtained through dynamic matching through the component code, and the corresponding component parameter params is passed in, and then the component view interface is rendered. As a relatively independent functional data display unit, the component includes a component element list attribute for storing and displaying different information element units. The elements in the component acquire, render and display multi-source heterogeneous data according to the component data type data_type, value acquisition method get_value_type, parameter data_json and processing parameter handle_json. The rendering of component elements is achieved through the combination of component size parameters and Web element size adaptation and self-adaptation technology.

[0086] The Web layout page (P7) is mainly responsible for rendering the model JSON data (P2) through the above-mentioned layout generator (P4) and component loader (P6), and modifying and updating the model JSON data (P2) in combination with the property editor (P5), thereby updating the content displayed by the Web layout page (P7). The Web layout page (P7) is composed of a combination of different schemes, each of which has different components and elements nested in it. The hierarchical structure model data generated by the structure defined by NCM is rendered into a view interface through the layout generator (P4) and component loader (P6), and the model data is mapped and bound to the view interface.

[0087] The solution remote controller (P8) first obtains the solution list data (model JSON data (P2)) through HTTP, and renders solutions p1, p2, ..., p nSolution control page of operation button. The operator chooses to click the solution operation button, and the matching and screening of the corresponding solution in the page on the browser is realized and displayed through Websocket real-time communication. It is mainly aimed at the use scenario of large-screen demonstration. Through the different solution data obtained on the mobile phone, the corresponding solution control button interface with cross-platform adaptation characteristics is rendered. The Websocket two-way real-time data transmission protocol is adopted to realize real-time and accurate remote switching of the solution to be displayed on the large-screen view interface.

[0088] The component library (P9) is mainly responsible for unified storage and management of components, and provides component model data for the rendering of component elements in the solution view interface. Specifically, the construction process of the component library (P9) is as follows: first, complete the design and development of components according to business needs, and then register key information such as the component code and the path of the component in the project directory into the component library through the component registration method componentRegister. These data will become the key information parameters for the subsequent component loader (P6) to match, load and render components. The component library (P9) can maintain components, dynamically expand and delete components according to actual usage needs and scenarios.

[0089] The component types in the component library include but are not limited to ordinary, large screen and process. The ordinary types 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 introduction components, image import components, anchor link components, etc. The large screen types include but are not limited to: plant distribution map components, water quality and quantity display components, energy consumption display components, equipment status display components, camera components, etc. The process types include but are not limited to: process route display components, process control components, etc.

[0090] The component list (P10) is rendered using the data information provided by the component library (P9). You can select a component through the component list (P10) and drag it to a solution interface on the web layout page (P7) in the browser to complete the component adding operation for the corresponding solution on the page.

[0091] In this embodiment, adding a new plan, editing a plan and deleting a plan are all operations on plan properties, adding a new component, editing a component and deleting a component are all operations on component properties, and adding an element, editing an element and deleting an element are all operations on element properties.

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

[0093] It should be noted that the home page mode (corresponding to the home page module) and the large-screen mode (corresponding to the large-screen module) have the following characteristics respectively: the home page module page has one or more solutions in the browser, and the solutions are arranged in sequence from top to bottom. The display format of the solution content is non-full-screen, and users can browse the contents of different solutions in the page by scrolling; the large-screen module page displays only one solution in the browser, and the solution content is displayed in full-screen, without scrolling operations. The solution page can be switched by moving the mouse in for temporary display and removing the temporarily hidden left and right switch buttons with the mouse. The large-screen solution page can also be remotely switched by clicking the solution button on the mobile remote control page.

[0094] The web page generation device based on the nested combination model of this embodiment also includes: a solution remote control, which is connected to the database, used to obtain solution data in the page layout data, and respond to the instructions issued by the user to select a solution based on the solution data, and display the solution selected by the user in the large screen mode.

[0095] To understand the steps and usage flow of the web page generation device based on the nested combination model, please refer to Figure 4 , Figure 4 A flowchart of web page generation and use of a web page generation device based on a nested combination model provided in this embodiment, the specific steps of the generation and use process are as follows:

[0096] S0: Start the operation, specifically enter the Web page generation device based on the nested combination model. Before the first execution of page generation, the required components are registered through the componentRegister method (S10), and the developed component model description data is registered in the component library (S11).

[0097] S1: Initialize the configuration, open the page, and set the basic parameters such as the affiliated factory unitId, layout type type, program type programmeType, large screen width tableX, and large screen height tableY by executing the initConfig method. Among them, when the layout type type selects the large screen mode, the large screen width tableX and large screen height tableY are set accordingly.

[0098] S2: Get page layout data, query page layout data through the page layout data method getLayoutData. It should be noted that there are two situations here, one is executed under the parameter conditions of completing the initialization configuration (S1), and the other is executed under the parameter conditions after the configuration operation of the scheme (including adding a new scheme addProgramme (S3.2), editing a scheme updateProgramme (S8) and deleting a scheme deleteProgramme (S9)). The first is the data directly requested without the scheme configuration operation by default, and the second is the data requested after the scheme configuration operation (add, edit or delete). The main difference is that the number of schemes in the page layout data and the content data in the scheme have changed.

[0099] S3: Whether there is a solution, based on the query results of the obtained page layout data, conditional judgment is performed on whether there is solution data. If there is no solution configuration operation at the beginning or all the configured solution data are deleted, there is no solution data. If a solution is configured or there is no solution data, there is solution data after adding a new solution.

[0100] S3.1: Layout rendering, judging the processing result according to the conditions obtained in step S3, if there is solution data, executing the layout rendering method layoutRender to render the layout content.

[0101] S3.2: Add a new program. Determine the processing result according to the conditions obtained in step S3. If there is no program data, a new program can be added through the addProgramme method, and then execute step S2.

[0102] S4: Program rendering: continue to execute the program rendering method programmeRender from step S3.1 to render the program content.

[0103] S5: Whether there is a component. Conditional judgment is performed on whether there is component data in the solution data. If there is component data in the solution data, or if there is no component data and a new component operation is performed, then there is component data. If there is component data but an operation of deleting all components is performed, or if there is no component data and no new component operation is performed, then there is no component data.

[0104] S5.1: Component rendering, judging the processing result according to the condition obtained in step S5, if there is component data, executing the component rendering method componentRender to render the component content.

[0105] S5.2: Component list view interface. The processing result is judged according to the condition obtained in step S5. If there is no component data, the configuration controller is switched to configuration mode to open the component list view interface ComponentList rendered according to the data in the component library. 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 registration method ComponentRegister (S10)).

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

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

[0108] S6.1: Element rendering, judging the processing result according to the condition obtained in step S6, if there is element data, executing the element rendering method elementRender to render the element content, thereby completing the generation and rendering of the page.

[0109] S6.2: Add a new element. Determine the processing result according to the condition obtained in step S6. If there is no element data, add a new element. Open the property editor and execute the addElement method to add the element to the component. Then execute step S2.

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

[0111] S8: Edit the scheme, and complete the scheme editing and updating operation updateProgramme by executing the operations of adding a component addComponent (S5.3), editing a component updateComponent (S5.4), and deleting a component deleteComponent (S5.5). Editing a component is completed by executing the operations of adding an element (S6.2), editing an element (S6.3), and deleting an element (S6.4), and then executing step S2. The relevant properties of components and elements can be edited and modified through the property editor (editing component method updateComponent (S5.4), editing element method updateElement (S6.3)) and elements can be deleted through the deletion element method deleteElement (S6.4). In the configuration mode, the deletion scheme method deleteProgramme (S9) and the deletion component method deleteComponent (S5.5) are executed by operating the delete button of the scheme view interface and the component view interface to delete the scheme and delete the component respectively, thereby completing the modification of the model data, thereby realizing the synchronous real-time update of the model data and the view interface.

[0112] S9: Delete the program, by executing the delete program method deleteProgramme to complete the program data that needs to be deleted in the page layout data, and then execute step S2.

[0113] S12: Program remote control: The program remote control can execute the program remote control method programmeSwitch by clicking the button to select different programs, and use the Websocket data transmission technology to complete the sending of program id data. The operator executes the program remote control method programmeSwitch and uses the Websocket data transmission technology to complete the sending of program id data. After receiving the selected program id data, the page layout data will use this program id data to filter and match in the page layout data.

[0114] S13: Whether a solution is matched: According to the solution ID obtained in the solution remote control and the obtained page layout data, the screening and matching are completed to perform conditional judgment processing. After the page layout data receives the selected solution ID data, it will be screened and matched in the page layout data to determine whether the solution data is matched. If the solution data is matched, execute step S3.1 to complete the redrawing and rendering of the selected solution layout page, and render the view interface of the selected solution in real time to realize the function of remote control switching solution. Otherwise, the operation ends (S14), and the layout solution data and screen display of the page do not change.

[0115] To understand the engineering application effect of the web page generation device based on the nested combination model in more detail, please refer to Figure 5 , Figure 5 A screenshot of an engineering application case of a Web page generation device based on a nested combination model provided in this embodiment, which is a rendering and display effect of part of the home page and large-screen page in an embodiment system completed by applying this method. The left image of the lower layer is the rendering and display effect of the home page, the right image of the lower layer is the rendering and display effect of the large-screen page, and the image of the upper layer is the editing page.

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

[0117] (1) Through the provided component library, layout generator, component loader and configuration of relevant properties of the property editor, the page content of multi-source heterogeneous data elements (numerical values, texts, pictures, videos, hyperlinks, files, 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 time for demand adjustment and response.

[0118] (2) By configuring the switching function between the default and personal modes provided by the controller, users can flexibly choose to create a new personal plan or generate a personal plan through the system default plan according to actual needs. While meeting flexible and changeable individual needs, they 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) parameters when obtaining solution data, and providing a solution remote control that uses a two-way real-time communication protocol to complete the real-time switching display of remote control layout pages of different solutions, the actual usage needs of different user roles and usage scenarios are better met.

[0120] Example 2

[0121] This embodiment provides a method for generating a web page based on a nested combination model. The method for generating a web page based on a nested combination model includes:

[0122] S1: Get page layout data.

[0123] S2: Determine whether the page layout data includes solution data, and obtain a first determination result.

[0124] S3: If the first judgment result is no, a new solution is added to update the page layout data, and the process returns to the step of "obtaining page layout data".

[0125] S4: If the first judgment result is yes, a layout display page is generated, and the solution data is rendered to obtain a solution display page in the layout display page.

[0126] S5: Determine whether the solution data includes component data, and obtain a second determination result.

[0127] S6: If the second judgment result is no, then a new component is added to update the page layout data, and the process returns to the step of “obtaining page layout data”.

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

[0129] S8: Determine whether the component data includes element data, and obtain a third determination result.

[0130] S9: If the third judgment result is no, then a new element is added to update the page layout data, and the process returns to the step of “obtaining page layout data”.

[0131] S10: If the third judgment result is yes, the element data is rendered to obtain an element display page in the component display page, thereby completing the generation of the Web page.

[0132] Before obtaining the page layout data, the web page generation method based on the nested combination model of this embodiment also includes: initialization configuration, specifically including: selecting the affiliated plant area of ​​the data to be displayed, selecting the layout type and selecting the scheme type; the affiliated plant 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 a layout display page; the scheme type is used to generate scheme data.

[0133] The Web page generation method based on the nested combination model of this embodiment also includes: editing schemes, deleting schemes, editing components, deleting components, editing elements and / or deleting elements to update the page layout data, and returning to the step of "obtaining page layout data".

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

[0135] Example 3

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

[0137] The application layer includes a data display module, which uses the Web page generation device based on the nested combination model described in Example 1 and the Web page generation method based on the nested combination model described in Example 2 to generate a Web page to display 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 includes multiple databases, which jointly store multi-source heterogeneous data. The multi-source heterogeneous data includes data from different sources, different types, different structures and different formats; the data layer is used to select data to be displayed from the multi-source heterogeneous data according to user needs.

[0140] See also Figure 6 , which is a main technical architecture diagram 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 combination model (A1.1), production system 1 (A1.2), production system 2 (A1.3), operation system 3 (A1.4) and management system 4 (A1.5) with different business functions. Production system 1 (A1.2) includes but is not limited to home page module, large screen module, process module, equipment module, planning module, etc. Production system 2 (A1.3) includes but is not limited to home page module, large screen module, alarm module, inspection module, report module, etc. Operation system 3 (A1.4) includes but is not limited to home page module, large screen module, statistics module, decision module, scheduling module, etc. Management system 4 (A1.5) includes but is not limited to home page module, large screen module, personnel module, performance module, system module, etc.

[0142] The web page generation method (A1.1) based on the nested combination model is mainly used in functional modules with related requirements and problems in production systems, operation systems and management systems, such as home page modules and large screen modules. The home page module corresponds to the home page mode of Example 1, and the large screen module corresponds to the large screen mode of Example 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) including but not limited to nuxt (A1.7), and the related methods for generating web pages are mainly implemented using layout plug-ins including but not limited to vue (A1.6) including but not limited to vue-grid-layout (A1.8).

[0144] The service layer (B1) is mainly composed of distributed microservices (B1.1) of different business functions implemented by the service-oriented architecture (SOA), nginx (B1.2) with reverse proxy and load balancing capabilities, and node (B1.3) clusters. Distributed microservices (B1.1) include but are not limited to basic services, data center services, measurement point services, equipment services, report services, inspection services, alarm services, etc.

[0145] The data layer (C1) mainly uses distributed storage technology, and uses a variety of database storage systems and services to store multi-source heterogeneous data generated in different production and management systems. Multi-source heterogeneous data (C1.4) refers to data with different sources, different types (text, pictures, audio, video, etc.), different structures (structured, unstructured and semi-structured) and different formats. The main databases used for the storage and function implementation of related data 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, pictures, cameras, hyperlinks, files, etc.

[0147] In the technical solution provided in this embodiment, it should be understood that the disclosed method can be implemented by other technical means. For example, the technical implementation part in the application layer (A1) is only schematic. For example, the front-end application framework adopts nuxt (A1.7) based on vue (A1.6), and there may be other technical implementation methods in the actual implementation. For another example, the layout plug-in used in the related method of Web page generation is vue-grid-layout (A1.8), and other layout plug-ins with the same functions and usage effects can be used to replace it in the actual implementation. The same is true for the above-mentioned 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, stored data, displayed data, 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 relevant data must comply with relevant regulations.

[0149] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, 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 article uses specific examples to illustrate the principles and implementation methods of this application. The description of the above embodiments is only used to help understand the method and core ideas of this application. At the same time, for those skilled in the art, according to the ideas of this application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as limiting this application.

Claims

1. A web page generation device based on a nested combination model, characterized in that: The web page generation device based on the nested combination model includes: Configuration controller, used to switch between configuration mode and display mode, and select solution type, add new solution, delete solution and delete components in configuration mode; solution types include default solution and personal solution, and personal solution is a personalized solution designed according to user needs; Property Editor, used to edit schemes, edit components, add elements, edit elements, and delete elements in configuration mode; Component list, used to add components by dragging in configuration mode; The database is connected to the configuration controller, the property editor and the component list respectively, and is used to receive the first data generated by the configuration controller selecting a scheme type, adding a scheme, deleting a scheme and deleting a component in the configuration mode, the second data generated by the property editor editing a scheme, editing a component, adding an element, editing an element and deleting an element in the configuration mode, and the third data generated by the component list adding a component by dragging in the configuration mode, and combine the first data, the second data and the third data according to the structure of the nested combination model to obtain page layout data; wherein the structure of the nested combination model is: the layout includes a number of schemes, the scheme includes a number of components, and the component includes a number of elements; The layout generator is connected to the database and is used to obtain page layout data in the display mode, and render the scheme data in the page layout data to obtain the layout display page and the scheme display page; wherein the scheme data is the data generated by adding a scheme, editing a scheme, and deleting a scheme; Component library, which stores different components; The component loader is connected to the database and the component library, and is used to obtain the page layout data in the display mode, and call the components in the component library based on the page layout data to render the component data and element data in the page layout data to obtain the component display page and the element display page; the layout display page, the scheme display page, the component display page and the element display page constitute the Web page; among them, the component data is the data generated by adding a component, editing a component and deleting a component; the element data is the data generated by adding an element, editing an element and deleting an element.

2. The web page generation device based on the nested combination model according to claim 1, characterized in that: The structure of the nested combination model includes: layout class, scheme class, component class and element class; The layout class includes layout attributes and layout methods; layout attributes include storage schemes; layout methods include adding schemes, editing schemes, and deleting schemes; The solution category includes solution type, solution attribute and solution method; solution type includes default solution and personal solution with different display forms; solution attributes include organization type, business type, coordinate x, coordinate y, number of horizontal screens, number of vertical screens and storage components; solution methods include adding components, editing components and deleting components; The component class includes component type, component attributes and component methods; component types include common components, large-screen components and process components with different display forms; component attributes include code, scheme, address, parameter, coordinate x, coordinate y and storage element; component methods include adding elements, editing elements and deleting elements; The element class includes element type and element attributes; element types include measurement points with different display forms, historical values, real-time libraries, specific data sources, pictures, files, cameras and none; element attributes include encoding, component, parameters, processing parameters, coordinate x, coordinate y, method of obtaining values, measurement point id, camera id and data type.

3. The web page generation device based on the nested combination model according to claim 2, characterized in that: Adding a new plan, editing a plan, and deleting a plan are all operations on plan properties; adding a new component, editing a component, and deleting a component are all operations on component properties; adding a new element, editing an element, and deleting an element are all operations on element properties.

4. The web page generation device based on the 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. At this time, the page layout data includes the layout type. The Web page in large-screen mode can only display one solution in full-screen mode, and the solution display switching is completed by clicking the left and right switch buttons. The Web page in homepage mode can display all solutions at the same time in non-full-screen mode, and the solution display browsing is completed by scrolling.

5. The web page generation device based on the nested combination model according to claim 4, characterized in that: The web page generation device based on the nested combination model also includes: The solution remote controller is connected to the database, and is used to obtain the solution data in the page layout data, and respond to the instructions issued by the user to select a solution based on the solution data, and display the solution selected by the user in the large screen mode.

6. A method for generating a web page based on a nested combination model, 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 solution data, and obtain a first determination result; If the first judgment result is no, a new solution is added to update the page layout data, and the process returns to the step of "obtaining page layout data"; If the first judgment result is yes, a layout display page is generated, and the solution data is rendered to obtain a solution display page in the layout display page; Determine whether the solution data includes component data, and obtain a second determination result; If the second judgment result is no, then a new component is added to update the page layout data, and the process returns to the step of "obtaining page layout data"; If the second judgment result is yes, the component data is rendered to obtain a component display page in the solution display page; Determine whether the component data includes element data, and obtain a third determination result; If the third judgment result is no, then a new element is added to update the page layout data, and the process returns to the step of "obtaining page layout data"; If the third judgment result is yes, the element data is rendered to obtain the element display page in the component display page, thereby completing the generation of the Web page.

7. The method for generating a web page based on a nested combination model according to claim 6, characterized in that: Before obtaining the page layout data, the method for generating a Web page based on a nested combination model also includes: initializing the configuration, specifically including: selecting the affiliated plant area of ​​the data to be displayed, selecting the layout type and selecting the scheme type; the affiliated plant 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 a layout display page; and the scheme type is used to generate scheme data.

8. The method for generating a web page based on a nested combination model according to claim 6, characterized in that: The method for generating a Web page based on a nested combination model 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 returning to the step of "obtaining page layout data".

9. The method for generating a web page based on a nested combination model according to claim 6, characterized in that: The web page generation method based on the nested combination model also includes: Get the solution data selected by the user; Matching the scheme data selected by the user with the scheme data in the page layout data; If the match is successful, the solution data selected by the user is rendered to complete the switching display of the solution in the large-screen mode.

10. A web page generation system based on a nested combination 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 described in any one of claims 1 to 5 and the Web page generation method based on the nested combination model described in any one of claims 6 to 9 to generate a Web page to display 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 includes multiple databases, which jointly store multi-source heterogeneous data. The multi-source heterogeneous data includes data from different sources, different types, different structures and different formats; the data layer is used to select data to be displayed from the multi-source heterogeneous data according to user needs.

Images