Method and system for dynamically loading function pages based on configuration files

Abstract

The application discloses a method and system for dynamically loading function pages based on configuration files, and the method comprises the following steps: constructing an organization folder hierarchical structure according to a power plant organization tree structure; establishing configuration file information in the organization folder, wherein the configuration file information is related parameters of the organization, a type of process diagram to be displayed and process diagram information; combining the organization folder and the configuration file information into tree structure data, and providing a real-time data process diagram page in the form of an interface; displaying the tree structure on one side of the page, and displaying a process diagram of a corresponding type according to node configuration selected by a user on the other side of the page. The method realizes online monitoring and display of different types of real-time data of a power generation enterprise monitoring system.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of front-end display of computer application, and particularly relates to a method and system for dynamically loading a function page based on a configuration file. BACKGROUND

[0002] The production flowchart is a visual display technology of real-time data, which collects the running state data of various devices of a power plant and displays the data through graphics. In the production monitoring system of a power generation enterprise, a large number of production flowcharts are used to visualize the technology. Under this technical system, a plurality of manufacturers currently provide similar production flowchart display solutions, which commonly include graph4, pdi, svg, vue components and url display solutions.

[0003] Generally, the monitoring system of a power generation enterprise only supports one display mode, and the demand for integrating a plurality of display solutions cannot be met, and the flexible and variable display requirements cannot be responded in time. SUMMARY

[0004] The application aims to provide a method and system for dynamically loading a function page based on a configuration file, which realizes online monitoring and display of different types of real-time data in a power generation enterprise monitoring system.

[0005] To achieve the above-mentioned purpose, the application adopts the following technical solutions:

[0006] A method for dynamically loading a function page based on a configuration file, comprising:

[0007] Constructing an organization folder hierarchical structure according to a power plant organization structure tree structure;

[0008] Establishing configuration file information in the organization folder, wherein the configuration file information is related parameters of the organization, and a flowchart type and flowchart information to be displayed;

[0009] Combining the organization folder and the configuration file information into tree structure data, and providing a real-time data flowchart page in the form of an interface;

[0010] Displaying the tree structure on one side of the page, and displaying a flowchart of a type corresponding to node configuration on the other side of the page according to user selection of the node.

[0011] As a further improvement of the application, the combination of the organization folder and the configuration file information into tree structure data to provide a real-time data flowchart page in the form of an interface specifically comprises:

[0012] The backend program first reads and loads organization file tree information into memory, and then processes, filters and combines the information into a tree structure data;

[0013] Read the xml configuration file under each file, read the configuration file content, wherein node is the corresponding configuration node, value in node is the transmitted parameter, text is the node name displayed in the tree structure, type is the displayed production flow chart file type, and url is the resource information corresponding to the displayed flow chart;The xml information is parsed through the program code, and each information is mounted to the corresponding tree node data to combine into a json tree structure data, and an interface is provided for the front end real-time data flow chart page.

[0014] As a further improvement of the application, the page display tree structure specifically comprises:

[0015] The front end real-time data flow chart page obtains data based on the configured organization structure and the display information interface, and displays the data in a tree structure on one side of the page to facilitate users to select and view the corresponding organization real-time data flow chart.

[0016] As a further improvement of the application, the page display tree structure on one side of the page to facilitate users to select and view the corresponding organization real-time data flow chart also includes: a method of adding a globally unique identifier to the tree data and a method of adding a Path path attribute to the tree node, which is used for page jump positioning.

[0017] As a further improvement of the application, the node configuration corresponding type of flow chart displayed according to the user selection node comprises the following steps:

[0018] The node configuration corresponding type includes graph4, pd, svg, vue file and url link;

[0019] When the flow chart type is graph4, the front end program displays the url obtained by the back end parsing generated html;

[0020] When the flow chart type is pd, the front end program displays by loading Activex control;

[0021] When the flow chart type is svg, the front end program displays the svg content by loading img tag;

[0022] When the flow chart type is vue file, the front end program displays the vue file content by loading vue component component;

[0023] When the flow chart type is url link, the front end program displays the content of url by loading iframe component.

[0024] A system for dynamically loading a function page based on a configuration file, comprising:

[0025] a folder construction module, configured to construct an organization folder hierarchy according to a power plant organization tree structure;

[0026] a file information configuration module, configured to establish configuration file information in the organization folder, the configuration file information being organization-related parameters and process diagram types and process diagram information to be displayed;

[0027] a page providing module, configured to combine the organization folder and the configuration file information into tree structure data, and provide a real-time data process diagram page in the form of an interface;

[0028] a process diagram display module, configured to display the tree structure on one side of the page, and display a process diagram of a type corresponding to a node configuration on the other side of the page according to a user-selected node.

[0029] As a further improvement of the application, the page providing module is specifically configured to:

[0030] The backend program first reads and loads organization folder tree information into memory, and then processes, filters and combines the information into tree structure data;

[0031] The xml configuration file under each folder is read, and the configuration file content is read, wherein node is a corresponding configuration node, value in the node is a transmitted parameter, text is a node name displayed by the tree structure, type is a production process diagram file type displayed, and url is resource information corresponding to the displayed process diagram; the xml information is parsed through a program code, each piece of information is mounted to a corresponding tree node data, the information is combined into json tree structure data, and an interface is provided for a front-end real-time data process diagram page.

[0032] As a further improvement of the application, the process diagram display module is specifically configured to:

[0033] The node configuration corresponding type includes graph4, pd, svg, vue files and url links;

[0034] When the process diagram type is graph4, the front-end program displays the url by parsing the html generated by the backend;

[0035] When the process diagram type is pd, the front-end program displays by loading an Activex control;

[0036] When the process diagram type is svg, the front-end program displays the svg content by loading an img tag;

[0037] When the process diagram type is a vue file, the front-end program displays the vue file content by loading a component component of vue.

[0038] When the flowchart type is a url link, the front-end program displays the content of the url by loading an iframe component.

[0039] An electronic device comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor implements the steps of the method for dynamically loading a function page based on a configuration file when executing the computer program.

[0040] A computer-readable storage medium stores a computer program, and the computer program implements the steps of the method for dynamically loading a function page based on a configuration file when executed by a processor.

[0041] Compared with the prior art, the present application has at least the following beneficial technical effects:

[0042] The present application displays a tree structure on one side of a page, and displays a flowchart of a node configuration corresponding type on the other side of the page according to user selection of a node, so that when a page needs to load and display graph4, pdi, svg, vue components and a url, it is not necessary to develop corresponding loading and display components for different data types, but to use dynamic judgment and loading display based on the flowchart type, thereby improving user experience. The present application combines organization folder and configuration file information into tree structure data, provides real-time data flowchart pages in the form of an interface, realizes dynamic loading of different flowchart types by modifying configuration file information, and does not need to develop or modify codes by a developer to meet customer needs, so that user needs are quickly responded to, and development speed and efficiency are improved. BRIEF DESCRIPTION OF DRAWINGS

[0043] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiments or prior art description. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor.

[0044] Figure 1 is the overall flowchart of the present application;

[0045] Figure 2 is the file configuration diagram of the present application;

[0046] Figure 3 is the tree structure analysis code diagram of the present application;

[0047] Figure 4 is the system structure schematic diagram of the preferred embodiment of the present application based on configuration file dynamic loading function page.

[0048] Figure 5 The schematic diagram of the electronic device structure of the preferred embodiment of the present application. DETAILED DESCRIPTION

[0049] The present application will be described in detail below with reference to the accompanying drawings and embodiments. It should be noted that the embodiments in the present application and the features in the embodiments can be combined with each other without conflict.

[0050] The following detailed description is exemplary description and is intended to provide further detailed description of the present application. Unless otherwise specified, all technical terms used in the present application have the same meaning as understood by those skilled in the art. The terms used in the present application are only for describing specific implementation manners and are not intended to limit the exemplary embodiments according to the present application.

[0051] The present application provides a method for dynamically loading a functional page based on a configuration file, which realizes online monitoring and display of different types of real-time data by a power generation enterprise monitoring system, and the overall process is as shown in Figure 1 The method comprises the following steps:

[0052] Step 1: A folder hierarchical structure corresponding to an organization is established on a disk according to a power plant organization structure tree structure.

[0053] Step 2: An xml file is created under each folder named by an organization, and the content thereof is configuration information corresponding to an interface to be displayed, and the content structure is as shown in Figure 2

[0054] Step 3: The backend program first reads and loads the organization file tree information into the memory, and then processes and filters to combine a tree structure data, and then reads the xml configuration file under each file, reads the content thereof, wherein node is a corresponding configuration node, value in node is a transmitted parameter, text is a node name displayed by a tree structure, type is a displayed production flowchart file type, and url is resource information corresponding to a displayed flowchart. The xml information is parsed by a program code, each information thereof is mounted to a corresponding tree node data, combined into a json tree structure data, and an interface is provided for a front-end real-time data flowchart page.

[0055] Step 4: The front-end real-time data flowchart page acquires data through the organization structure based on configuration and display information interface provided by step 3, and the data is displayed in a tree structure on the left side of the page to facilitate a user to select and view corresponding organization real-time data flowchart, and the code for parsing and processing the json tree structure data in the front-end is as shown in Figure 3 ​As shown, wherein the method for adding a globally unique identifier (GUID, Globally Unique Identifier) to the tree data and the method for adding a Path path attribute to the tree node are used for page jump positioning.

[0056] Step 5: The right side of the front-end real-time data flow chart shows the flow chart configured by the user clicking the organizational structure node, and according to the type of the flow chart, the corresponding component is loaded to display the flow chart of the corresponding type.

[0057] Step 5 specifically includes the following steps:

[0058] Step S51: When the flow chart type is graph4, the front-end program displays the url obtained by parsing the generated html through the back-end.

[0059] Step S52: When the flow chart type is pdi, the front-end program displays by loading the Activex control.

[0060] Step S53: When the flow chart type is svg, the front-end program displays the svg content by loading the img tag.

[0061] Step S54: When the flow chart type is a vue file, the front-end program displays the vue file content by loading the component component of vue.

[0062] Step S55: When the flow chart type is a url link, the front-end program displays the content of the url by loading the iframe component.

[0063] As Figure 4 shown, the application also provides a system for dynamically loading a functional page based on a configuration file, comprising:

[0064] A folder construction module is configured to construct an organizational folder hierarchical structure according to a power plant organizational structure tree structure.

[0065] A file information configuration module is configured to establish configuration file information in the organizational folder, wherein the configuration file information is related parameters of the organization, as well as a flow chart type to be displayed and flow chart information.

[0066] A page providing module is configured to combine the organizational folder and the configuration file information into tree structure data, and provide a real-time data flow chart page in the form of an interface.

[0067] A flow chart display module is configured to display a tree structure on one side of the page, and display a flow chart of a corresponding type configured by a user selected node on the other side of the page.

[0068] The page providing module is specifically configured to:

[0069] The backend program first reads the organization file tree information into memory, and then processes and filters to combine into a tree structure data;

[0070] Read the xml configuration file under each file, read the configuration file content, wherein node is the corresponding configuration node, value in node is the transmitted parameter, text is the node name displayed in the tree structure, type is the displayed production flowchart file type, and url is the resource information corresponding to the displayed flowchart; the xml information is parsed through the program code, each information is mounted to the corresponding tree node data, combined into a json tree structure data, and an interface is provided for the real-time data flowchart page of the front end.

[0071] The flowchart display module is specifically used for:

[0072] The node configuration corresponding type includes graph4, pd, svg, vue file and url link;

[0073] When the flowchart type is graph4, the front-end program displays the url by taking the html generated by the back-end analysis;

[0074] When the flowchart type is pd, the front-end program displays by loading Activex control;

[0075] When the flowchart type is svg, the front-end program displays the svg content by loading an img tag;

[0076] When the flowchart type is a vue file, the front-end program displays the vue file content by loading a component component of vue;

[0077] When the flowchart type is a url link, the front-end program displays the content of the url by loading an iframe component.

[0078] As shown in Figure 5 The third object of the present application is to provide an electronic device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, the processor implementing the steps of the method for dynamically loading a function page based on a configuration file when executing the computer program.

[0079] The steps of the method for dynamically loading a function page based on a configuration file include:

[0080] According to the power plant organization structure tree structure, an organization folder hierarchy is constructed;

[0081] Establishing configuration file information in the organization folder, the configuration file information being organization related parameters and process diagram types and process diagram information to be displayed;

[0082] Combining the organization folder and the configuration file information into tree structure data, and providing real-time data process diagram pages in the form of interfaces;

[0083] Displaying the tree structure on one side of the page, and displaying the process diagram of the corresponding type configured by the node on the other side of the page according to user selection of the node.

[0084] A fourth object of the present application is to provide a computer readable storage medium storing a computer program, the computer program being executed by a processor to implement the steps of the method for dynamically loading a function page based on a configuration file.

[0085] The steps of the method for dynamically loading a function page based on a configuration file include:

[0086] Constructing an organization folder hierarchical structure according to a power plant organization folder tree structure;

[0087] Establishing configuration file information in the organization folder, the configuration file information being organization related parameters and process diagram types and process diagram information to be displayed;

[0088] Combining the organization folder and the configuration file information into tree structure data, and providing real-time data process diagram pages in the form of interfaces;

[0089] Displaying the tree structure on one side of the page, and displaying the process diagram of the corresponding type configured by the node on the other side of the page according to user selection of the node.

[0090] The method of the present application is described in detail below in combination with specific embodiments:

[0091] A root folder is newly created on a disk, and is named as a company name, then an xml configuration information file as shown in Figure 2 is newly created in the company folder, then a folder information named by each power plant is newly created, and then an xml configuration file information of each power plant is established in the folder of each power plant, a backend program reads the folder hierarchical structure and the file type xml configuration information, and transmits the same to a front end page module, the front end page module constructs a corresponding real-time data process diagram by code analysis of the data transmitted by the backend program. Figure 3

[0092] ​Those skilled in the art will appreciate that embodiments of the present application can be readily used as a method, a system or a computer program product. Accordingly, the present application can take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application can take the form of a computer program product on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROMs, optical storage devices, etc.) embodying computer readable program code.

[0093] The present application is described in reference to the flowchart illustrations and / or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general purpose computer, special purpose computer, embedded processor or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart illustrations and / or block diagrams block or blocks. Figure 1 one or more functions specified in the flowchart illustrations and / or block diagrams block or blocks. Figure 1 one or more functions specified in the flowchart illustrations and / or block diagrams block or blocks.

[0094] These computer program instructions can also be stored in a computer- readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instructions which implement the function specified in the flowchart illustrations and / or block diagrams block or blocks. Figure 1 one or more functions specified in the flowchart illustrations and / or block diagrams block or blocks. Figure 1 one or more functions specified in the flowchart illustrations and / or block diagrams block or blocks.

[0095] These computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart illustrations and / or block diagrams block or blocks. Figure 1 one or more functions specified in the flowchart illustrations and / or block diagrams block or blocks. Figure 1 one or more functions specified in the flowchart illustrations and / or block diagrams block or blocks.

[0096] In the embodiments of the present application, it should be understood that the disclosed devices, apparatuses and methods can be implemented in other ways. For example, the above-described device embodiments are merely schematic, for example, the division of the modules is merely a logical function division, and there can be another division manner in actual implementation; the modules illustrated as separate components can or can not be physically separate, and the components illustrated as modules can or can not be physical units, i.e., can be located in one place or distributed on a plurality of network units. In actual implementation, some or all of the modules can be selected according to the actual needs to implement the purposes of the embodiments of the method.

[0097] It is apparent for those skilled in the art that the present application is not limited to the details of the above-described exemplary embodiments, and the present application can be implemented in other concrete forms without departing from the spirit or essential characteristics of the present application.

[0098] Therefore, no matter from which point of view, the embodiments should be regarded as exemplary and non-limiting, and the scope of the present application is defined by the appended claims rather than the above description, and it is intended to include all changes falling within the meaning and scope of the equivalent elements of the claims. Any reference signs in the claims should not be regarded as limiting the claims to which they relate.

[0099] In addition, it is apparent that the word "comprising" does not exclude other units or steps, and the singular does not exclude the plural. The plurality of units or devices stated in the system claims can also be implemented by one unit or device through software or hardware. The second etc. words are used to indicate names and do not indicate any particular order.

[0100] Finally, it should be pointed out that the above embodiments are merely used to illustrate the technical solutions of the present application and are not limiting. Finally, it should be pointed out that the above embodiments are merely used to illustrate the technical solutions of the present application and are not limiting. Although the present application has been described in detail with reference to the above embodiments, it should be understood by those skilled in the art that the specific embodiments of the present application can be modified or replaced by equivalents without departing from the spirit and scope of the present application, and any modification or equivalent replacement without departing from the spirit and scope of the present application should be covered in the protection scope of the claims of the present application.

Claims

1. A method for dynamically loading function pages based on a configuration file, characterized in that, The method comprises the following steps: constructing an organization folder hierarchy according to a power plant organization tree structure; establishing configuration file information in the organization folder on the disk, the configuration file information being organization-related parameters and process diagram types and process diagram information to be displayed; combining the organization folder and the configuration file information into tree structure data to provide a real-time data process diagram page in the form of an interface; displaying the tree structure on one side of the page and displaying a process diagram of a type corresponding to a node configuration on the other side of the page according to a user selection of the node; the step of combining the organization folder and the configuration file information into tree structure data to provide a real-time data process diagram page in the form of an interface specifically comprises the following steps: a backend program first reads and loads organization file tree information into a memory, and then processes, filters and combines the information into tree structure data; reading xml configuration files under each file, reading configuration file contents, wherein node is a corresponding configuration node, value in the node is a parameter to be transmitted, text is a node name displayed by the tree structure, type is a production process diagram file type to be displayed, and url is resource information corresponding to the process diagram to be displayed; the program code parses the xml information, mounts each piece of information to corresponding tree node data, combines the information into json tree structure data, and provides a corresponding interface for a front-end real-time data process diagram page; the step of displaying a process diagram of a type corresponding to a node configuration according to a user selection of the node comprises the following steps: the type of the node configuration corresponding to the process diagram comprises graph4, pd, svg, vue files and url links; when the type of the process diagram is graph4, a front-end program displays the process diagram by taking url of html generated by backend analysis; when the type of the process diagram is pd, the front-end program displays the process diagram by loading an Activex control; when the type of the process diagram is svg, the front-end program displays the process diagram by loading an img tag; when the type of the process diagram is a vue file, the front-end program displays the process diagram by loading a component component of vue; when the type of the process diagram is a url link, the front-end program displays the process diagram by loading an iframe component.

2. The method for dynamically loading function pages based on configuration files according to claim 1, wherein, the step of displaying the tree structure on the page specifically comprises the following steps: the front-end real-time data process diagram page obtains data through an interface based on configured organization structure and display information, and displays the data in a tree structure on one side of the page to facilitate a user to select and view corresponding organization real-time data process diagrams.

3. The method for dynamically loading function pages based on configuration files according to claim 2, wherein, the step of displaying the tree structure on one side of the page to facilitate the user to select and view corresponding organization real-time data process diagrams further comprises a method of adding a globally unique identifier to tree data and a method of adding a Path path attribute to a tree node, which are used for page jump positioning.

4. A system for dynamically loading function pages based on a configuration file, the system comprising: a configuration file; a function page; and a function page loader for loading the function page based on the configuration file. The method comprises the following steps: a folder construction module is configured to construct an organization folder hierarchy according to a power plant organization tree structure; a file information configuration module is configured to establish configuration file information in the organization folder, the configuration file information being organization-related parameters and process diagram types and process diagram information to be displayed; The page providing module is configured to combine the organization folder and the configuration file information into tree structure data, and provide a real-time data flowchart page in the form of an interface. The flowchart display module is configured to display a tree structure on one side of the page, and display a flowchart of a type corresponding to a node configuration on the other side of the page according to a user-selected node. The page providing module is specifically configured to: The backend program first reads and loads organization folder tree information into memory, and then processes and filters the information into tree structure data. The xml configuration file under each file is read, and the configuration file content is read, wherein node is a corresponding configuration node, value in the node is a transmitted parameter, text is a node name displayed by the tree structure, type is a production flowchart file type displayed, and url is resource information corresponding to the displayed flowchart; the xml information is parsed by a program code, each piece of information is mounted to a corresponding tree node data, and the information is combined into json tree structure data, so as to provide a corresponding interface for a front-end real-time data flowchart page. The flowchart display module is specifically configured to: The node configuration corresponding type includes graph4, pd, svg, vue files and url links. When the flowchart type is graph4, the front-end program displays the url by using the html generated by the backend analysis; When the flowchart type is pd, the front-end program displays by loading an Activex control; When the flowchart type is svg, the front-end program displays by loading an img tag; When the flowchart type is a vue file, the front-end program displays by loading a component component of vue; When the flowchart type is a url link, the front-end program displays by loading an iframe component. 5.An electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the method for dynamically loading a function page based on a configuration file according to any one of claims 1-3 when executing the computer program. 6.A computer readable storage medium, storing a computer program, wherein the computer program implements the steps of the method for dynamically loading a function page based on a configuration file according to any one of claims 1-3 when executed by a processor.

Images