Web single-page multi-application display method and device and energy management system

Abstract

The invention provides a Web single-page multi-application display method and device and an energy management system. The method comprises the following steps: when a plurality of target applications are opened in an opened current webpage of a private server, obtaining a resource file of each target application; judging whether each target application is a local application or a third-party application; when the target application is a third-party application, rewriting a class selector name and an attribute selector name in a resource file of the target application, and displaying the corresponding target application based on the rewritten resource file; when the target application is the local application, displaying the corresponding target application according to the obtained resource file; wherein the prefixes of the class selector names and the attribute selector names of different target applications are different. According to the method, the complexity of style isolation processing is reduced, only the name of the class selector and the name of the attribute selector are modified, the source code of the existing sub-application does not need to be modified, the style rendering performance of a product is the same as that of the sub-application, and the stability of global style control is ensured.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method and device for displaying multiple applications on a single Web page, and an energy management system. Background Art

[0002] When browsing the same web page in multiple windows, style conflicts, such as inconsistent colors or shapes, often occur due to the same component naming. To solve this problem, the following solutions are used in the prior art: using shadow DOM technology to achieve style isolation, which prevents external style interference by encapsulating DOM trees and style sheets; using a unified namespace, combined with the BEM (block, element, modifier) ​​naming specification, to ensure that internal styles do not conflict with each other; adding an independent namespace as a unified parent class for each application class to narrow the style scope and reduce conflicts; for all Cascading Style Sheets (CSS) selectors and JS (JavaScript) class classes, style isolation is achieved by adding or replacing prefixes / suffixes. These methods can avoid style conflicts. In the process of implementing the embodiments of the present application, it was found that there are at least the following technical problems in the related technology:

[0003] The style isolation process is complex and the conflict handling capability needs to be improved. Summary of the invention

[0004] The embodiments of the present application provide a Web single-page multi-application display method, device and energy management system to solve the problem that the style isolation process is complex and the conflict handling capability needs to be improved.

[0005] In a first aspect, an embodiment of the present application provides a method for displaying multiple applications on a single Web page, including:

[0006] When multiple target applications are opened in the current web page opened by the private server, resource files of each target application are obtained;

[0007] Determine whether each target application is a local application or a third-party application;

[0008] When the target application is a third-party application, rewrite the class selector name and the attribute selector name in the resource file of the target application, and display the corresponding target application based on the rewritten resource file;

[0009] When the target application is a local application, the corresponding target application is displayed according to the acquired resource file;

[0010] The prefixes of the class selector names and attribute selector names of different target applications are different.

[0011] In a second aspect, an embodiment of the present application provides a Web single-page multi-application display device, including:

[0012] The acquisition module is used to acquire resource files of each target application when multiple target applications are opened in the current web page opened by the private server;

[0013] A determination module, used to determine whether each target application is a local application or a third-party application;

[0014] A rewriting module, when the target application is a third-party application, rewrites the class selector name and the attribute selector name in the resource file of the target application, and displays the corresponding target application based on the rewritten resource file;

[0015] A loading display module is used to display the corresponding target application based on the rewritten resource file when the target application is a third-party application, and to display the corresponding target application based on the acquired resource file when the target application is a local application; wherein the prefixes of the class selector names and attribute selector names of different target applications are different.

[0016] In a third aspect, an embodiment of the present application provides an energy management system, comprising a display, a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the steps of the method described in the first aspect or any possible implementation of the first aspect are implemented to display an energy management web page interface on the display.

[0017] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it implements the steps of the method described in the first aspect or any possible implementation method of the first aspect.

[0018] The embodiment of the present application provides a Web single-page multi-application display method, device and energy management system. When multiple target applications are opened in the current web page that has been opened on a private server, the resource files of each target application are obtained, and then the target applications are judged to be local applications or third-party applications. For third-party applications, we will modify the class selector name and attribute selector name in its resource file, and display the application based on these modified resource files. Before the application is deployed on the private server, a specific prefix needs to be added to the class selector name and attribute selector name in the resource files of different local applications contained therein. For local applications, the application is displayed directly according to the obtained resource file. The prefixes of the class selector name and attribute selector name of each target application are different, and the prefix uniqueness is maintained to prevent display conflicts. This solution has a certain reduction in the complexity of style isolation processing. Only the class selector name and attribute selector name are modified. There is no need to modify the existing sub-application source code. The style rendering performance of the product is the same as that of the sub-application, and the naming of the product does not change with the file content, which ensures the stability of global style control. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art 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 labor.

[0020] Figure 1 This is a flowchart of a method for displaying multiple applications on a single Web page provided by an embodiment of the present application;

[0021] Figure 2 is a flowchart of a method for displaying multiple applications on a single Web page provided by another embodiment of the present application;

[0022] Figure 3 This is a structural diagram of a Web single-page multi-application display device provided by an embodiment of the present application;

[0023] Figure 4 It is a schematic diagram of the structure of an energy management system provided in one embodiment of the present application. DETAILED DESCRIPTION

[0024] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0025] The terms "first", "second", etc. in the specification and claims of the embodiments of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the embodiments of the present application described here. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions.

[0026] Unless otherwise specified, the term "plurality" means two or more. The character " / " indicates that the objects before and after are in an "or" relationship. For example, A / B means: A or B. The term "and / or" is a description of the association relationship between objects, indicating that there can be three relationships. For example, A and / or B means: A or B, or, A and B.

[0027] The words used in this application are only used to describe the embodiments and are not used to limit the claims. As used in the description of the embodiments and claims, unless the context clearly indicates, the singular forms of "a", "an" and "the" are intended to include the plural forms as well. Similarly, the term "and / or" as used in this application refers to any and all possible combinations of one or more associated listings. In addition, when used in this application, the term "comprise" and its variants "comprises" and / or including (comprising) refer to the existence of stated features, wholes, steps, operations, elements, and / or components, but do not exclude the existence or addition of one or more other features, wholes, steps, operations, elements, components and / or these groups. In the absence of more restrictions, the elements defined by the statement "including one..." do not exclude the existence of other identical elements in the process, method or device including the elements.

[0028] In this application, each embodiment may focus on the differences from other embodiments, and the same or similar parts between the embodiments may refer to each other. For the methods, products, etc. disclosed in the embodiments, if they correspond to the method part disclosed in the embodiments, then the relevant parts may refer to the description of the method part.

[0029] There are several traditional single-page application style isolation solutions, each with its own advantages and disadvantages:

[0030] 1. Use shadow DOM to isolate styles:

[0031] The advantages include: minimal changes, most thorough isolation of styles, and no impact from external global styles.

[0032] Disadvantages include: unable to quickly modify styles, need to design a new system for global style modification; increased DOM leads to reduced performance

[0033] 2. Multiple applications develop unified namespaces, BEM (module, element, modifier) ​​class naming standards, and have internal standards to avoid style conflicts.

[0034] Advantages include: intuitive changes, excellent performance, and good team unity.

[0035] The disadvantages include: if existing projects are changed according to this scheme, the changes are too large, and there is no guarantee that all changes will be covered; the package size will increase to a certain extent; when the third-party component library does not provide the namespace function, it cannot be directly implemented; for global styles of the same type, the naming method needs to be changed, and regular types or multiple selectors need to be used for style naming.

[0036] 3. Add an independent namespace to each application class to unify the parent class and narrow the scope of the style.

[0037] Advantages include: less changes, and can be achieved by processing CSS through AST (abstract syntax tree) and then decompiling the code.

[0038] Disadvantages include: the performance of the page will decrease as the nesting level of CSS selection increases; the package size will increase to a certain extent; when the !important attribute is used, there is a certain possibility of style conflicts.

[0039] 4. Add / replace prefixes or suffixes to all CSS selectors and class editors in JS

[0040] Advantages include: complete style isolation, excellent performance, and no need to change the code of the original project.

[0041] The disadvantages include: the changes are complex and need to deal with a variety of edge cases; the package size will increase to a certain extent, affected by the prefix size, and there is basically no volume impact after using gzip compression.

[0042] This application aims to isolate styles and improve the efficiency of style isolation by adding prefixes to the classes of JS and CSS files in the sub-application packaging output.

[0043] In order to make the purpose, technical solutions and advantages of the present application clearer, specific embodiments will be described below in conjunction with the accompanying drawings.

[0044] Figure 1 is a flowchart of a method for displaying multiple applications on a single Web page provided by an embodiment of the present application. Figure 1 As shown, the method comprises the following steps:

[0045] S101, when opening multiple target applications in a current webpage opened by a private server, obtaining a resource file of each target application.

[0046] The execution subjects of each embodiment of the present application can be servers, processors, microprocessors and other devices with data processing functions. In the actual implementation process, the specific implementation method of the execution subject can be selected according to actual needs. This embodiment does not impose any special restrictions on this, as long as it is a device with data processing functions.

[0047] This application mainly solves the problem of class selector and attribute selector conflicts when a single page needs to access multiple HTML resources in a private server environment. In actual operation, the same page may need to open multiple pop-up windows or tables. If these elements differ in color, size, etc., it is very easy to cause conflicts, resulting in some pop-up windows not being able to open normally or display abnormally.

[0048] In the scenario where multiple target applications need to be opened, each target application needs to be analyzed so that the resource files (including CSS and JS files) they depend on can be accurately located and extracted. This process also requires in-depth analysis of the web page code to find the links and references related to each target application. By obtaining the CSS and JS files of each target application, it is ensured that when multiple target applications are opened, their respective styles and functional codes can be correctly loaded and applied, thereby ensuring the normal operation of the web page and the continuity when the user switches applications.

[0049] S102: Determine whether each target application is a local application or a third-party application.

[0050] Among them, the package name information of the application is used to distinguish between local applications and third-party applications. Local applications are usually pre-installed by the system, and the package name often carries a system-specific logo, while the package name of the third-party application is generally customized by the developer.

[0051] In the specific implementation process, in order to improve loading efficiency, before the development of the private server, prefixes are added to the class selector names and attribute selector names in the resource files of the local application. When loading third-party applications, prefixes are added to the class selector names and attribute selector names in the resource files of the third-party applications in real time.

[0052] S103, when the target application is a third-party application, rewrite the class selector name and the attribute selector name in the resource file of the target application, and display the corresponding target application based on the rewritten resource file.

[0053] In a specific embodiment, rewriting the class selector names and attribute selector names in the resource files of the target applications includes: rewriting the class selector names and attribute selector names in the CSS files of each target application, and rewriting the class selector names and attribute selector names in the JS files of each target application.

[0054] The style code is modified by rewriting the class selector name and the attribute selector name in the CSS file of each target application, and the script code is modified by rewriting the class selector name and the attribute selector name in the JS file of each target application.

[0055] S104, when the target application is a local application, displaying the corresponding target application according to the acquired resource file; wherein the prefixes of the class selector names and the attribute selector names of different target applications are different.

[0056] In the specific implementation process, local applications can directly obtain resource files and display them according to the system's resource loading mechanism. When starting a local application, it automatically searches for the corresponding layout, style and other resource files from the application's res directory according to established rules. Different local applications can be naturally distinguished because their class selectors and attribute selector prefixes are planned in the early stages of development, without the need for additional rewriting.

[0057] The class selector names and attribute selector names of different target applications have different prefixes, so that the styles can be isolated through name rewriting and difference, reducing the complexity of isolation processing without making any changes to the existing sub-application source code.

[0058] In this embodiment, when multiple target applications are opened in the current web page that has been opened on the private server, the resource files of each target application are obtained, and then it is determined whether these target applications are local applications or third-party applications. For third-party applications, we will modify the class selector name and attribute selector name in its resource file, and display the application based on these modified resource files. Before the application is deployed on the private server, a specific prefix needs to be added to the class selector name and attribute selector name in the resource files of different local applications contained therein. For local applications, the application is displayed directly based on the obtained resource file. The prefixes of the class selector name and attribute selector name of each target application are different, and the prefix uniqueness is maintained to prevent display conflicts. This solution has a certain reduction in the complexity of style isolation processing. Only the class selector name and attribute selector name are modified, and the existing sub-application source code does not need to be modified. The style rendering performance of the product is the same as that of the sub-application, and the naming of the product does not change with the file content, which ensures the stability of global style control and provides users with a more consistent and reliable browsing experience.

[0059] In the specific implementation process, when rewriting the class selector name and the attribute selector name, in order to improve the rewriting efficiency, the name rewriting method and the selector range that needs to rewrite the name are different.

[0060] In a possible implementation, rewriting the class selector name and the attribute selector name in the resource file of the target application in step S103 includes:

[0061] Determine whether the class selector name and attribute selector name match the regular matching rules;

[0062] When there is no match, add the prefix of the corresponding target application before the selector name;

[0063] When matching, after separating the content on the right side of the calss attribute, add the prefix of the corresponding target application before the content on the right side of the calss attribute.

[0064] Before changing the class selector name and the attribute selector name, it is determined whether the class selector name and the attribute selector name match the regular matching rule.

[0065] For class selector names and attribute selector names that are judged to match the regular matching rule, a prefix related to the corresponding target application is added to their names to distinguish the same name selectors in different applications, thereby avoiding style conflicts.

[0066] Different processing methods are used for class selector names and attribute selector names that are judged not to match the regular matching rules. First, the content on the right side of the class attribute is separated, and then a prefix related to the corresponding target application is added to the content on the right side of the class attribute to ensure that the same style rules can be correctly distinguished in different applications to avoid potential style conflicts.

[0067] In this embodiment, the method of adding prefixes to class selectors and attribute selectors is determined based on regular matching rules, which can effectively rewrite the resource files of each target application so that they can correctly apply their respective styles in different application environments, while avoiding style conflicts and improving the stability and independence of the application.

[0068] In a possible implementation, before rewriting the class selector name and the attribute selector name in the resource file of the target application in step S103, the following is further included:

[0069] Get a list of non-configurable selectors;

[0070] Filters non-prefixable selectors against a list of non-configurable selectors.

[0071] During the rewriting process, the non-configurable selector list contains selector names that cannot be prefixed. Due to the requirements of a specific framework or library, or because the selector has a specific meaning and purpose in the project, adding a prefix may cause style conflicts or functional failures, so filtering operations need to be performed based on this non-configurable selector list.

[0072] Optionally, iterate over all selector names in the resource file and check whether they appear in the list of non-configurable selectors; if a selector name appears in the list, mark it as a non-prefixable selector and keep its original name unchanged.

[0073] In this embodiment, by using a non-configurable selector list for filtering, it is ensured that during the rewriting process, these specific selectors remain intact and their original functions and style performance are not affected by adding prefixes, thereby maintaining the stability of the style and function of the web page.

[0074] Based on the above embodiment, in order to improve the efficiency of reopening the current target application, the resource files after rewriting the class selector names and attribute selector names of each target application are stored, thereby improving the user experience.

[0075] In a possible implementation, after rewriting the class selector name and the attribute selector name in the resource file of the target application in step S103, the method further includes:

[0076] Encrypt the resource files after rewriting the class selector name and attribute selector name;

[0077] Store the encrypted resource file in memory.

[0078] The resource files of local applications and third-party applications are encrypted in different ways to ensure that resource files from different sources can be properly protected. Optionally, the resource files of local applications and third-party applications are encrypted using an AES (Advanced Encryption Standard) symmetric encryption algorithm and an RSA asymmetric encryption algorithm, respectively.

[0079] In this embodiment, by storing the resource file after rewriting the class selector name and the attribute selector name into the memory, the server-side deployment file pre-converted locally can be used directly without the need to transmit characters for online parsing and conversion. The burden on the server due to real-time server-side conversion is reduced, thereby improving the efficiency of opening web pages and providing users with a smoother and more efficient browsing experience. In addition, different encryption methods are adapted to applications from different sources. While local applications use symmetric encryption to ensure efficient encryption and decryption, they use the system's internal security mechanism to protect the key. The asymmetric encryption of third-party applications solves the key distribution problem, preventing third parties from maliciously obtaining complete keys, and improving the overall protection level of resource files.

[0080] In a possible implementation, before rewriting the class selector name and the attribute selector name in the resource file of the target application in step S103, the method further includes:

[0081] Retrieve whether a resource file corresponding to the target application is stored;

[0082] When there is a target resource file corresponding to the target application, an operation of calling the resource file to display the corresponding target application is executed;

[0083] When there is no target resource file corresponding to the target application, rewriting the class selector name and the attribute selector name in the resource file of the target application and subsequent operations are performed.

[0084] In this embodiment, before rewriting the class selector name and attribute selector name in the resource file of the target application, it is first determined whether the resource file corresponding to the target application exists locally. If so, it is directly loaded without executing steps such as determining whether the class selector name and the attribute selector name match the regular matching rules and rewriting them, thereby improving the efficiency and accuracy of the entire process.

[0085] In a possible implementation, before rewriting the class selector name and the attribute selector name in the resource file of the target application in step S103, the method further includes:

[0086] Get the naming rules corresponding to the target application;

[0087] Determine the prefix corresponding to each target application according to the naming rules.

[0088] In this embodiment, a preset naming rule is used to add a specific prefix to each target application to improve the accuracy of prefix addition, thereby avoiding naming conflicts caused by prefixes generated by random numbers, and further preventing the web page from being unable to open normally.

[0089] In a possible implementation, before adding a prefix corresponding to the target application to the selector name, it also includes:

[0090] The prefix corresponding to each target application is encrypted to generate an encrypted short string.

[0091] In this embodiment, the prefix corresponding to each target application is encrypted to ensure the uniqueness and security of the selector name and prevent the prefix from being easily identified and used.

[0092] In a possible implementation, the prefix of the target application is encrypted based on the SHA-256 algorithm.

[0093] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0094] Figure 2 This is a flowchart of an implementation method of a single-page Web multi-application display method provided by another embodiment of the present application.

[0095] in, Figure 2 The following takes the selector name rewriting and resource file storage process of a resource file of a target application as an example for explanation.

[0096] Confirm the target application resource file entry; including obtaining resource files from third parties or resource files of local applications;

[0097] Compile the module and generate the module dependency and its abstract syntax tree content according to the parsing result of the resource file; the resource file includes CSS file and JS file; the rewriting order of CSS file and JS file is executed below;

[0098] The resource module matches the CSS file;

[0099] Filter out selectors that cannot be prefixed (custom non-configurable items, non-BFC classes);

[0100] Match the CSS selector selector according to the matching rules, whether it has a class attribute selector; if it has a class attribute selector, separate the content on the right side of the [class=? ] attribute and add the target application prefix to the content on the right side of the [class=? ] attribute; otherwise, directly add the target application prefix to the head selector selector;

[0101] Encrypt the CSS file after rewriting the class selector name and attribute selector name and store it in memory;

[0102] After the CSS file type is processed, the modification of the JS file type is started, and the resource type module matches the JS file type;

[0103] Filter out JS resources that do not need to match the supplementary prefix (custom configuration item);

[0104] Change the selector text of the prefix according to the matching rules and append the target application prefix;

[0105] After the JS file type is processed, the JS file with the class selector name and attribute selector name rewritten is encrypted and stored in the memory;

[0106] Package and store CSS files and JS files.

[0107] The following is an embodiment of the device of the present application. For details not described in detail, please refer to the corresponding method embodiment described above.

[0108] Figure 3 is a structural diagram of a Web single-page multi-application display device provided by an embodiment of the present application, such as Figure 3 For the sake of convenience, only the parts related to the embodiment of the present application are shown. Figure 3 As shown, the device comprises:

[0109] The acquisition module 301 is used to acquire resource files of each target application when multiple target applications are opened in the current webpage opened by the private server;

[0110] A determination module 302 is used to determine whether each target application is a local application or a third-party application;

[0111] A rewriting module 303, when the target application is a third-party application, rewrites the class selector name and the attribute selector name in the resource file of the target application, and displays the corresponding target application based on the rewritten resource file;

[0112] The loading display module 304 is used to display the corresponding target application based on the rewritten resource file when the target application is a third-party application, and to display the corresponding target application based on the acquired resource file when the target application is a local application; wherein the prefixes of the class selector names and attribute selector names of different target applications are different.

[0113] In a possible implementation, the rewriting module 303 is specifically configured to:

[0114] Determine whether the class selector name and attribute selector name match the regular matching rules;

[0115] When there is no match, add the prefix of the corresponding target application before the selector name;

[0116] When matching, after separating the content on the right side of the calss attribute, add the prefix of the corresponding target application to the content on the right side of the calss attribute.

[0117] In one possible implementation, the device also includes: a storage module, which is used to encrypt the resource file after rewriting the class selector name and attribute selector name in the resource file of the target application, and store the encrypted resource file in the memory for secondary call.

[0118] Among them, resource files of local applications and third-party applications use different encryption methods.

[0119] In a possible implementation, the loading display module 304 is further used for:

[0120] Retrieve whether a resource file corresponding to the target application is stored;

[0121] When there is a target resource file corresponding to the target application, an operation of calling the resource file to display the corresponding target application is executed;

[0122] When there is no target resource file corresponding to the target application, rewriting the class selector name and the attribute selector name in the resource file of the target application and subsequent operations are performed.

[0123] In a possible implementation, the rewriting module 303 is further configured to:

[0124] Get a list of non-configurable selectors;

[0125] Filters non-prefixable selectors against a list of non-configurable selectors.

[0126] In a possible implementation, the rewriting module 302 is further configured to:

[0127] Get the naming rules corresponding to the target application;

[0128] Determine the prefix corresponding to each target application according to the naming rules.

[0129] In a possible implementation, the rewriting module 302 is further configured to encrypt the prefix corresponding to each target application to generate an encrypted short character.

[0130] In a possible implementation, the prefix of the target application is encrypted based on the SHA-256 algorithm.

[0131] In this embodiment, when multiple target applications are opened in the current web page that has been opened on the private server, the resource files of each target application are obtained, and then it is determined whether these target applications are local applications or third-party applications. For third-party applications, we will modify the class selector name and attribute selector name in its resource file, and display the application based on these modified resource files. Before the application is deployed on the private server, a specific prefix needs to be added to the class selector name and attribute selector name in the resource files of different local applications contained therein. For local applications, the application is displayed directly based on the obtained resource file. The prefixes of the class selector name and attribute selector name of each target application are different, and the prefix uniqueness is maintained to prevent display conflicts. This solution has a certain reduction in the complexity of style isolation processing. Only the class selector name and attribute selector name are modified, and the existing sub-application source code does not need to be modified. The style rendering performance of the product is the same as that of the sub-application, and the naming of the product does not change with the file content, which ensures the stability of global style control and provides users with a more consistent and reliable browsing experience.

[0132] Figure 4 Schematic diagram of the structure of an energy management system provided by an embodiment of the present application. The energy management system 4 is used to manage the energy of infrastructure, such as Figure 4 As shown, it includes a display 40, a processor 41 and a memory 42, the memory is used to store a computer program 43, the processor 41 is used to call and run the computer program 43 stored in the memory 42, and execute the steps of the method described in the above embodiment to display the energy management web page interface on the display 40. The infrastructure refers to facilities such as shopping malls, airports, and stations that require energy management. Alternatively, when the processor 41 executes the computer program 43, the functions of each module / unit in the above-mentioned device embodiments are realized, such as Figure 3 The functions of each module are shown.

[0133] Exemplarily, the computer program 43 may be divided into one or more modules / units, which are stored in the memory 42 and executed by the processor 41 to complete the present application. The one or more modules / units may be a series of computer program instruction segments capable of completing specific functions, which are used to describe the execution process of the computer program 43 in the energy management system 4. For example, the computer program 43 may be divided into Figure 3 The modules shown.

[0134] The energy management system 4 may be a computing device such as a desktop computer, a notebook, a PDA, or a cloud server. The energy management system 4 may include, but is not limited to, a processor 41 and a memory 42. Those skilled in the art will appreciate that Figure 4It is only an example of the energy management system 4 and does not constitute a limitation of the energy management system 4. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, the energy management system may also include input and output devices, network access devices, buses, etc.

[0135] The processor 41 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0136] The memory 42 may be an internal storage unit of the energy management system 4, such as a hard disk or memory of the energy management system 4. The memory 42 may also be an external storage device of the energy management system 4, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the energy management system 4. Further, the memory 42 may also include both an internal storage unit and an external storage device of the energy management system 4. The memory 42 is used to store the computer program and other programs and data required by the energy management system. The memory 42 may also be used to temporarily store data that has been output or is to be output.

[0137] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0138] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0139] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in this application can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

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

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

[0142] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0143] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium. When the computer program is executed by the processor, the steps of the above-mentioned embodiments of the single-page multi-application display method can be implemented. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, U disk, mobile hard disk, disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc.

[0144] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A method for displaying multiple applications on a single Web page, characterized in that: include: When multiple target applications are opened in the current web page opened by the private server, resource files of each target application are obtained; Determine whether each target application is a local application or a third-party application; When the target application is a third-party application, rewrite the class selector name and the attribute selector name in the resource file of the target application, and display the corresponding target application based on the rewritten resource file; When the target application is a local application, the corresponding target application is displayed according to the acquired resource file; The prefixes of the class selector names and attribute selector names of different target applications are different.

2. The method for displaying multiple applications on a single Web page according to claim 1, characterized in that: The rewriting of the class selector name and the attribute selector name in the resource file of the target application includes: Determine whether the class selector name and attribute selector name match the regular matching rules; When there is no match, add the prefix of the corresponding target application before the selector name; When matching, after separating the content on the right side of the calss attribute, add the prefix of the corresponding target application before the content on the right side of the calss attribute.

3. The method for displaying multiple applications on a single Web page according to claim 1, characterized in that: After rewriting the class selector name and the attribute selector name in the resource file of the target application, it also includes: Encrypt the resource files after rewriting the class selector name and attribute selector name; Store the encrypted resource file in memory; Among them, resource files of local applications and third-party applications use different encryption methods.

4. The method for displaying multiple applications on a single Web page according to claim 3, characterized in that: Before rewriting the class selector name and the attribute selector name in the resource file of the target application, it also includes: Retrieve whether a resource file corresponding to the target application is stored; When there is a target resource file corresponding to the target application, executing an operation of calling the resource file to display the corresponding target application; When there is no target resource file corresponding to the target application, the class selector name and the attribute selector name in the resource file of the target application are rewritten and subsequent operations are performed.

5. The method for displaying multiple applications on a single Web page according to claim 1, characterized in that: Before rewriting the class selector name and the attribute selector name in the resource file of the target application, it also includes: Get a list of non-configurable selectors; Filters non-prefixable selectors according to the non-configurable selector list.

6. The method for displaying multiple applications on a single Web page according to claim 1, characterized in that: Before rewriting the class selector name and the attribute selector name in the resource file of the target application, it also includes: Get the naming rules corresponding to the target application; The prefix corresponding to each target application is determined according to the naming rule.

7. The method for displaying multiple applications on a single Web page according to claim 6, characterized in that: Also includes: The prefix corresponding to each target application is encrypted to generate an encrypted short string.

8. The method for displaying multiple applications on a single Web page according to claim 7, characterized in that: The prefix of the corresponding target application is encrypted based on the SHA-256 algorithm.

9. A Web single-page multi-application display device, characterized in that: include: The acquisition module is used to acquire resource files of each target application when multiple target applications are opened in the current web page opened by the private server; A determination module, used to determine whether each target application is a local application or a third-party application; A rewriting module, when the target application is a third-party application, rewrites the class selector name and the attribute selector name in the resource file of the target application, and displays the corresponding target application based on the rewritten resource file; A loading display module is used to display the corresponding target application based on the rewritten resource file when the target application is a third-party application, and to display the corresponding target application based on the acquired resource file when the target application is a local application; wherein the prefixes of the class selector names and attribute selector names of different target applications are different.

10. An energy management system for performing energy management on an infrastructure, comprising a display, a processor and a memory, wherein the memory is used to store a computer program, and the processor is used to call and run the computer program stored in the memory, and execute the steps of the method as claimed in any one of claims 1 to 8 to display an energy management web page interface on the display.

Images