Energy storage controller web low-code platform optimization method, system, device and medium
Patent Information
- Application Number
- CN202311219935.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2023-09-21
- Publication Date
- 2026-09-18
- Estimated Expiration
- 2043-09-21
AI Technical Summary
[0006]本发明的技术任务是提供一种储能控制器Web低代码平台优化方法、系统、设备及介质,来解决如何在储能设备达到一定量时,避免低代码平台出现初次页面加载时间过长及白屏现象,提高低代码平台的性能的问题
[0047] (I) This invention optimizes the performance of the existing low-code web platform for energy storage controllers, and solves the problems of long loading time when entering the initial page and lag when performing drag, delete, and edit operations in the existing technical solution. Based on the user experience of the low-code web platform for energy storage controllers, this invention designs a method to optimize the performance of the low-code web platform for energy storage controllers and improve the platform's execution efficiency.
Smart Images

Figure CN117349555B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the fields of energy IoT and computer software development technology, specifically to an optimization method, system, device, and medium for an energy storage controller Web low-code platform. Background Technology
[0002] In today's digital age, low-code platforms can help developers create more applications in less time, enabling businesses to reduce costs and increase efficiency. As a result, low-code development platforms are becoming increasingly popular, and many companies are launching various types of low-code products.
[0003] Energy storage controllers are used in a variety of scenarios, requiring diverse web platforms for displaying data. Therefore, the development of low-code platforms for energy storage controllers is essential. Currently, two popular low-code solutions exist. Low-code-oriented solutions, while offering similar functionality and low support costs, can support many users simultaneously and are easy to use, but lack flexibility. Therefore, low-code-oriented solutions cannot meet certain complex business needs of energy storage controller low-code platforms. On the other hand, solutions focused on specialized development have high support costs, weak usability, and support fewer users. Therefore, existing low-code solutions focused on specialized development, due to their highly targeted nature, also cannot meet the requirements. However, developing a new solution would require significant time and manpower, failing to satisfy the display needs of energy storage controllers.
[0004] A commonly used low-code solution is to use Vue as the main framework, the form-generator framework for form, button, and chart design, and the antv-x6 framework for device connectivity diagrams. The overall process involves the front-end creating a page or system through drag-and-drop functionality, sending it as JSON to the back-end for database storage, and providing preview and publishing capabilities. After successful publishing, users can access the generated page or system via a URL, as shown in the attached image. Figure 1 As shown, although it can meet the requirements of the energy storage controller, in actual use, due to the long amount of data it stores, when the number of devices reaches a certain level, the front-end loop traversal becomes more frequent. In addition, the use of nested object members in the front-end will significantly affect performance, which will cause some problems for users when using the low-code platform. For example, when initializing the page, the page loading time is too long and a white screen will appear. When using the low-code platform, drag-and-drop, deletion, and editing operations will be laggy, resulting in an extremely unfriendly user experience.
[0005] Therefore, how to avoid excessively long initial page loading time and blank screen phenomena on low-code platforms when energy storage devices reach a certain quantity, and how to improve the performance of low-code platforms, is a technical problem that urgently needs to be solved. Summary of the Invention
[0006] The technical objective of this invention is to provide a method, system, device, and medium for optimizing a low-code web platform for energy storage controllers. This aims to address the issue of avoiding excessively long initial page loading times and blank screens on the low-code platform when a certain number of energy storage devices are deployed, thereby improving the performance of the low-code platform.
[0007] The technical objective of this invention is achieved as follows: an optimization method for an energy storage controller on a low-code Web platform, the method being as follows:
[0008] By optimizing the front-end storage method to reduce network requests, page data loading speed can be improved.
[0009] Based on user habits, a suitable algorithm is selected for the energy storage controller through data search algorithms to optimize the execution efficiency of the low-code platform;
[0010] Using Web Workers enables browsers to process data using multiple threads, reducing the time spent processing data on low-code platforms.
[0011] As a preferred storage method, a combination of browser local caching and database storage is used, as follows:
[0012] The classification principle for data security requirements is based on the degree of user self-configuration. That is, the higher the degree of user self-configuration, the higher the security requirements. The stored content is classified accordingly.
[0013] The data is divided into two main categories: high-security-requirement data and low-security-requirement data, as detailed below:
[0014] For low-security data: This data is categorized by page and stored in arrays. For example, the layout and initialization data for page one is stored at index 0, the layout and initialization data for page two is stored at index 1, and so on, until the layout and initialization data for each page are stored in the corresponding array. Each page is assigned a page identifier (id). This page identifier is encrypted using AES symmetric encryption and used as the key to store the array in the browser's storage via the `localStorage.setItem()` method. When a page is initialized, the encrypted page identifier is used as a parameter to retrieve the initial page data via the `localStorage.getItem()` method.
[0015] For high-security data: Configuration data requiring high security is categorized by page and stored in an array. Each configuration data is assigned a parentId, which is used to associate the data with the page's initialization data. The array storing the data is then converted into JSON format using the JavaScript function JSON.stringify(). Finally, the JSON data is stored in the database via a network request.
[0016] More preferably, the page data loading process is as follows:
[0017] The browser retrieves initialization data for pages with low security requirements from its local cache using the page identifier ID, and retrieves configuration data with high security requirements from the database by making network requests.
[0018] Using the parentId of the obtained configuration data, a loop is performed on the obtained page initialization data that has been categorized by page to associate and assemble the page initialization data with the configuration data.
[0019] As a preferred choice, the data search algorithm selects the post-order traversal algorithm of the tree, as follows:
[0020] The initial data of the page is the initial layout of the page and the initial device label. The configuration data of the page is the display components of the charts and tables in the page layout, as well as the alarm data displayed in the display components, similar to the alarm data displayed in the charts. That is, there is a hierarchical relationship between the initial data of the page and the configuration data of the page. The initial data of the page contains the configuration data of the page.
[0021] The page's initialization data and configuration data are stored in object arrays respectively, and the data relationships are integrated through the parent and children fields. That is, the parent field means that there is a parent-level contained relationship, and the children field means that there is a child-level contained relationship, forming a tree-structured data.
[0022] Based on data from multiple usages, users are most likely to manipulate the stored configuration data, i.e., the terminal nodes of the tree. The initialization data of the already defined layout format, i.e., the root node and other parent nodes of the tree, are generally not easily modified. Therefore, when traversing the tree structure, the algorithm that traverses the terminal nodes first—the post-order traversal algorithm of the tree—is chosen. That is, during the tree traversal process, the child nodes are traversed first, and then the parent nodes are traversed. When the corresponding node is found, the traversal is immediately exited and the result is returned, thereby shortening the overall tree traversal time.
[0023] As a preferred option, the Web Worker implementation process is as follows:
[0024] In the main thread's code, the Worker() constructor is called to create a Worker object, i.e., `connstmyWorker = newWorker('worker.js')`. The worker() constructor generates and passes the URL of the script to be executed to the browser. The browser creates a new background thread, loads the script specified by the URL, and executes it in the thread. Then, it listens for the background thread's return processing operation or result by calling the Worker object's listener event `addEventListener`.
[0025] In a background child thread created by the main thread, messages from the main thread are listened for through the self.addEventListener event. The subtasks decomposed by the main thread are executed in the self.addEventListener event. After processing, the results are returned to the main thread through the self.postMessage() event. The main thread then processes the results returned by the background child thread.
[0026] A Web low-code platform optimization system for energy storage controllers, the system comprising:
[0027] The storage optimization module is used to optimize the front-end storage method by reducing network requests, thereby improving page data loading speed.
[0028] The search algorithm optimization module is used to select a suitable algorithm for the energy storage controller based on the user's usage habits and through data search algorithms, thereby optimizing the execution efficiency of the low-code platform.
[0029] The multi-threaded processing module is used to enable the browser to process data in multiple threads using Web Workers, reducing the data processing time on low-code platforms.
[0030] Preferably, the storage optimization module combines browser local caching and database storage, as follows:
[0031] The classification principle for data security requirements is based on the degree of user self-configuration. That is, the higher the degree of user self-configuration, the higher the security requirements. The stored content is classified accordingly.
[0032] The data is divided into two main categories: high-security-requirement data and low-security-requirement data, as detailed below:
[0033] For low-security data: This data is categorized by page and stored in arrays. For example, the layout and initialization data for page one is stored at index 0, the layout and initialization data for page two is stored at index 1, and so on, until the layout and initialization data for each page are stored in the corresponding array. Each page is assigned a page identifier (id). This page identifier is encrypted using AES symmetric encryption and used as the key to store the array in the browser's storage via the `localStorage.setItem()` method. When a page is initialized, the encrypted page identifier is used as a parameter to retrieve the initial page data via the `localStorage.getItem()` method.
[0034] For high-security data: Configuration data requiring high security is categorized by page and stored in an array. Each configuration data is assigned a parentId, which is used to associate the data with the page's initialization data. The array storing the data is then converted into JSON format using the JavaScript function JSON.stringify(). Finally, the JSON data is stored in the database via a network request.
[0035] More preferably, the search algorithm optimization module selects a post-order traversal algorithm for the tree, specifically as follows:
[0036] The initial data of the page is the initial layout of the page and the initial device label. The configuration data of the page is the display components of the charts and tables in the page layout, as well as the alarm data displayed in the display components, similar to the alarm data displayed in the charts. That is, there is a hierarchical relationship between the initial data of the page and the configuration data of the page. The initial data of the page contains the configuration data of the page.
[0037] The page's initialization data and configuration data are stored in object arrays respectively, and the data relationships are integrated through the parent and children fields. That is, the parent field means that there is a parent-level contained relationship, and the children field means that there is a child-level contained relationship, forming a tree-structured data.
[0038] Based on data from multiple uses, users are most likely to operate on the stored configuration data, i.e., the terminal nodes of the tree. The initialization data of the already defined layout format, i.e., the root node and other parent nodes of the tree, are generally not easily modified. Therefore, when traversing the tree structure, the algorithm that traverses the terminal nodes first is chosen—the post-order traversal algorithm of the tree. That is, during the traversal of the tree, the child nodes are traversed first, and then the parent nodes are traversed. When the corresponding node is found, the traversal is immediately exited and the result is returned, thereby shortening the overall tree traversal time.
[0039] The Web Worker implementation process in the multi-threaded processing module is as follows:
[0040] In the main thread's code, the Worker() constructor is called to create a Worker object, i.e., const myWorker = new Worker('worker.js'); the worker() constructor generates and passes the URL of the script to be executed to the browser, the browser creates a new background thread, loads the script specified by the URL, and executes it in the thread, and then listens for the background thread's return processing operation or result by calling the Worker object's addEventListener event listener.
[0041] In a background child thread created by the main thread, messages from the main thread are listened for through the self.addEventListener event. The subtasks decomposed by the main thread are executed in the self.addEventListener event. After processing, the results are returned to the main thread through the self.postMessage() event. The main thread then processes the results returned by the background child thread.
[0042] An electronic device includes: a memory and at least one processor;
[0043] The memory contains computer programs;
[0044] The at least one processor executes the computer program stored in the memory, causing the at least one processor to perform the energy storage controller Web low-code platform optimization method as described above.
[0045] A computer-readable storage medium storing a computer program that can be executed by a processor to implement the energy storage controller Web low-code platform optimization method as described above.
[0046] The energy storage controller Web low-code platform optimization method, system, device, and medium of the present invention have the following advantages:
[0047] (I) This invention optimizes the performance of the existing low-code web platform for energy storage controllers, and solves the problems of long loading time when entering the initial page and lag when performing drag, delete, and edit operations in the existing technical solution. Based on the user experience of the low-code web platform for energy storage controllers, this invention designs a method to optimize the performance of the low-code web platform for energy storage controllers and improve the platform's execution efficiency.
[0048] (ii) When the energy controller controls a large number of devices, the low-code platform of the present invention can improve the speed during the initial loading, reduce the number of times it will freeze, and avoid the page from staying on the loading page for too long.
[0049] (iii) When entering a low-code platform, if it is not the first time loading, the rendered data will be obtained partly from the browser and partly from the database, reducing the number of network requests and thus speeding up the page rendering speed.
[0050] (iv) When operating a low-code platform, the increase in data will not cause lag in drag-and-drop or deletion operations. During preview, the page rendering time can also be shortened, resulting in a better user experience.
[0051] (V) The Web low-code platform for energy storage controllers of the present invention is primarily an application platform in the energy field. It can meet the needs of users to create an energy storage controller management system through drag-and-drop without writing code. The resulting energy storage controller management system mainly displays and controls the data and operations of the energy controller and the energy storage devices it controls, including but not limited to the following functions:
[0052] (1) Intelligent monitoring: mainly through bar charts, line charts, tables, cards, equipment connection diagrams and other forms on the page to monitor energy equipment for energy storage, power generation, charging piles, load, power distribution, environment and alarms.
[0053] (2) Intelligent management: mainly through energy consumption graphs, line graphs, tables, cards, equipment connection diagrams and other forms on the page to manage energy equipment and report data;
[0054] (3) Intelligent operation: mainly the operation of the energy storage controller and its control equipment, including controlling the start-up and shutdown of the energy storage controller, setting the energy storage controller strategy, debugging the energy equipment, and setting the parameters of the energy storage controller;
[0055] (4) System Management: This mainly involves user permission management of the energy storage controller management system, including permissions for adding, deleting, modifying, and querying users;
[0056] (vi) This invention provides a method for optimizing the low-code web platform of energy storage controllers to improve the performance of the low-code platform. Because the majority of the workload of the adopted solution is completed on the front end, this invention mainly optimizes the front end in terms of storage method, search algorithm, thread processing, etc., to address the problems existing in the existing solution, and has the following advantages:
[0057] (1) Optimizing the storage method reduces network requests, thereby improving page loading speed;
[0058] (2) Based on user habits, the search traversal algorithm is to select the algorithm that is more suitable for the energy storage controller, thereby optimizing the execution efficiency of the low-code platform;
[0059] (3) Browsers process data in a single thread. Once the main thread performs a time-consuming operation, it will cause the browser to freeze and the user's clicks to be unresponsive. This invention uses Web Worker to enable the browser to process data in multiple threads, reducing the data processing time of low-code platforms. Attached Figure Description
[0060] The invention will be further described below with reference to the accompanying drawings.
[0061] Appendix Figure 1 This is a schematic diagram illustrating the implementation of low-code technology in the background art;
[0062] Appendix Figure 2 This is a schematic diagram illustrating the optimized storage method of the present invention;
[0063] Appendix Figure 3 A diagram illustrating the WebWorker implementation process. Detailed Implementation
[0064] The following detailed description of the energy storage controller Web low-code platform optimization method, system, device, and medium of the present invention is based on the accompanying drawings and specific embodiments.
[0065] Example 1:
[0066] This embodiment provides a method for optimizing a Web low-code platform for energy storage controllers, as detailed below:
[0067] S1. Improve page data loading speed by optimizing the front-end storage method to reduce network requests;
[0068] S2. Based on user habits, select a suitable algorithm for the energy storage controller through data search algorithm to optimize the execution efficiency of the low-code platform;
[0069] S3. Using Web Workers enables browsers to process data using multiple threads, reducing the data processing time on low-code platforms.
[0070] As attached Figure 2 As shown, in step S1 of this embodiment, the storage method combines browser local caching and database storage, as detailed below:
[0071] The classification principle for data security requirements is based on the degree of user self-configuration. That is, the higher the degree of user self-configuration, the higher the security requirements. The stored content is classified accordingly.
[0072] The data is divided into two main categories: high-security-requirement data and low-security-requirement data, as detailed below:
[0073] For low-security data: This data is categorized by page and stored in arrays. For example, the layout and initialization data for page one is stored at index 0, the layout and initialization data for page two is stored at index 1, and so on, until the layout and initialization data for each page are stored in the corresponding array. Each page is assigned a page identifier (id). This page identifier is encrypted using AES symmetric encryption and used as the key to store the array in the browser's storage via the `localStorage.setItem()` method. When a page is initialized, the encrypted page identifier is used as a parameter to retrieve the initial page data via the `localStorage.getItem()` method.
[0074] For high-security data: Configuration data requiring high security is categorized by page and stored in an array. Each configuration data is assigned a parentId, which is used to associate the data with the page's initialization data. The array storing the data is then converted into JSON format using the JavaScript function JSON.stringify(). Finally, the JSON data is stored in the database via a network request.
[0075] The page data loading process in step S1 of this embodiment is as follows:
[0076] S101. Obtain initialization data for pages with low security requirements from the browser's local cache using the page identifier ID, and obtain configuration data with high security requirements from the database by making a network request;
[0077] S102. Using the parentId of the obtained configuration data, perform a loop through the obtained page initialization data that has been categorized by page to associate and assemble the page initialization data with the configuration data.
[0078] In this embodiment, the data search algorithm in step S2 is a post-order traversal algorithm for the tree, as follows:
[0079] S201. The initialization data of the page is the initial layout of the page and the initial device label. The configuration data of the page is the display components of charts and tables in the page layout and the data displayed by the display components, similar to the alarm data displayed in the charts. That is, there is a hierarchical relationship between the initialization data of the page and the configuration data of the page. The initialization data of the page contains the configuration data of the page.
[0080] S202. Store the page's initialization data and configuration data into an object array respectively, and integrate the data's relationship through the parent and children fields. That is, the parent field means that there is a parent-level contained relationship, and the children field means that there is a child-level contained relationship, forming a tree-structured data.
[0081] S203. Based on data from multiple uses, users are most likely to operate on the stored configuration data, i.e., the terminal nodes of the tree. The initialization data of the already defined layout format, i.e., the root node and other parent nodes of the tree, are generally not easily modified. Therefore, when traversing the tree structure, the algorithm that traverses the terminal nodes first is selected—the post-order traversal algorithm of the tree. That is, during the traversal of the tree, the child nodes are traversed first, and then the parent nodes are traversed. When the corresponding node is found, the traversal is immediately exited and the result is returned, thereby shortening the overall tree traversal time.
[0082] In terms of browser thread handling, the Web Worker web API is invoked to enable multi-threaded processing in the browser. In this embodiment, Web Worker is a JavaScript API provided by the browser that allows scripts to run in a background thread without blocking the main thread, providing a simple method for running scripts in the background for web content. There are two types of Web Workers: Dedicated Worker and Shared Worker. A Dedicated Worker is a Worker bound to a single page and can only be used by scripts on that page. A Shared Worker, on the other hand, can be shared by multiple pages, allowing multiple pages to access the same background thread simultaneously. Based on the requirements of the energy storage controller's low-code web platform, and to facilitate page and data classification and management, ensuring each Worker object has a specific pointer, Dedicated Worker is used for thread handling. The general idea behind Web Worker processing is to create a child thread independent of the main thread in the browser, delegate some time-consuming synchronous operations from the main thread to the Worker for processing, and then return the processing result to the main thread via a message mechanism after the child thread has completed its processing. For example, a block of code that traverses a multi-level tree structure can be split into multiple parts, with child threads handling the calculation results, and then the results can be merged in the main thread.
[0083] As attached Figure 3 As shown, the Web Worker implementation process in step S3 of this embodiment is as follows:
[0084] S301. In the main thread's code, the Worker() constructor is called to create a Worker object, i.e., const myWorker = new Worker('worker.js'); the worker() constructor generates and passes the URL of the script to be executed to the browser. The browser creates a new background thread, loads the script specified by the URL, and executes it in the thread. Then, the browser listens for the background thread's return processing operation or result by calling the Worker object's listener event addExventListener.
[0085] S302. In a background child thread created by the main thread, listen for messages from the main thread through the self.addEventListener event, and execute the sub-tasks decomposed by the main thread in the self.addEventListener event. After processing, return the processing result to the main thread through the self.postMessage() event. The main thread then processes the result returned by the background child thread.
[0086] Example 2:
[0087] This embodiment provides an optimization system for a Web low-code platform for an energy storage controller, the system comprising:
[0088] The storage optimization module is used to optimize the front-end storage method by reducing network requests, thereby improving page data loading speed.
[0089] The search algorithm optimization module is used to select a suitable algorithm for the energy storage controller based on the user's usage habits and through data search algorithms, thereby optimizing the execution efficiency of the low-code platform.
[0090] The multi-threaded processing module is used to enable the browser to process data in multiple threads using Web Workers, reducing the data processing time on low-code platforms.
[0091] In this embodiment, the storage optimization module combines browser local caching and database storage, as detailed below:
[0092] The classification principle for data security requirements is based on the degree of user self-configuration. That is, the higher the degree of user self-configuration, the higher the security requirements. The stored content is classified accordingly.
[0093] The data is divided into two main categories: high-security-requirement data and low-security-requirement data, as detailed below:
[0094] For low-security data: This data is categorized by page and stored in arrays. For example, the layout and initialization data for page one is stored at index 0, the layout and initialization data for page two is stored at index 1, and so on, until the layout and initialization data for each page are stored in the corresponding array. Each page is assigned a page identifier (id). This page identifier is encrypted using AES symmetric encryption and used as the key to store the array in the browser's storage via the `localStorage.setItem()` method. When a page is initialized, the encrypted page identifier is used as a parameter to retrieve the initial page data via the `localStorage.getItem()` method.
[0095] For high-security data: Configuration data requiring high security is categorized by page and stored in an array. Each configuration data is assigned a parentId, which is used to associate the data with the page's initialization data. The array storing the data is then converted into JSON format using the JavaScript function JSON.stringify(). Finally, the JSON data is stored in the database via a network request.
[0096] The search algorithm optimization module in this embodiment selects the post-order traversal algorithm of the tree, as follows:
[0097] (1) The initial data of the page is the initial layout of the page and the initial device label. The configuration data of the page is the display components of the charts and tables in the page layout and the data displayed by the display components, similar to the alarm data displayed in the charts. That is, there is a hierarchical relationship between the initial data of the page and the configuration data of the page. The initial data of the page contains the configuration data of the page.
[0098] (2) Store the page's initialization data and configuration data into an object array respectively, and integrate the data's relationship through the parent and children fields. That is, the parent field means that there is a parent-level contained relationship, and the children field means that there is a child-level contained relationship, forming a tree-structured data.
[0099] (3) Based on the data from multiple uses, users are most likely to operate on the stored configuration data, i.e. the terminal nodes of the tree. The initialization data of the already defined layout format, i.e. the root nodes and other upper-level nodes of the tree, are generally not easily changed. Therefore, when traversing the tree structure, the algorithm that traverses the terminal nodes first is selected—the post-order traversal algorithm of the tree. That is, during the traversal of the tree, the child nodes are traversed first, and then the parent nodes are traversed. When the corresponding node is found, the traversal is immediately exited and the result is returned, thereby shortening the overall traversal time of the tree.
[0100] The Web Worker implementation process in the multi-threaded processing module of this embodiment is as follows:
[0101] (1) In the code of the main thread, the Worker() constructor is called to create a Worker object, that is, const myWorker = new Worker('worker.js'); the worker() constructor generates and passes the URL of the script to be executed to the browser. The browser creates a new background thread, loads the script specified by the URL, and executes it in the thread. Then, the listener event addEventListener of the Worker object is called to listen for the background thread to return the processing operation or result.
[0102] (2) In the background child thread created by the main thread, listen for messages from the main thread through the self.addEventListener event, and execute the sub-tasks decomposed by the main thread in the self.addEventListener event. After processing, return the processing result to the main thread through the self.postMessage() event. The main thread then processes the result returned by the background child thread.
[0103] Example 3:
[0104] This invention also provides an electronic device, including: a memory and a processor;
[0105] The memory stores the instructions executed by the computer.
[0106] The processor executes computer execution instructions stored in the memory, causing the processor to execute the energy storage controller Web low-code platform optimization method in any embodiment of the present invention.
[0107] The processor can be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), off-the-shelf programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor can be a microprocessor or any conventional processor.
[0108] Memory is used to store computer programs and / or modules. The processor implements various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory, and by accessing data stored in the memory. Memory can mainly include a program storage area and a data storage area. The program storage area can store the operating system, at least one application program required for a function, etc.; the data storage area can store data created based on the use of the terminal, etc. In addition, memory can also include high-speed random access memory, and can also include non-volatile memory, such as hard disks, RAM, plug-in hard disks, smart memory cards (SMC), secure digital cards (SD cards), flash memory cards, at least one disk storage device, flash memory devices, or other volatile solid-state storage devices.
[0109] Example 4:
[0110] This invention also provides a computer-readable storage medium storing a plurality of instructions, which are loaded by a processor to cause the processor to execute the energy storage controller Web low-code platform optimization method according to any embodiment of this invention. Specifically, a system or apparatus equipped with a storage medium may be provided, on which software program code implementing the functions of any of the above embodiments is stored, and the computer (or CPU or MPU) of the system or apparatus may read and execute the program code stored in the storage medium.
[0111] In this case, the program code read from the storage medium can itself implement the function of any of the above embodiments, and therefore the program code and the storage medium storing the program code constitute part of the present invention.
[0112] Storage media embodiments for providing program code include floppy disks, hard disks, magneto-optical disks, optical disks (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RYM, DVD-RW, DVD+RW), magnetic tapes, non-volatile memory cards, and ROMs. Alternatively, program code can be downloaded from a server computer via a communication network.
[0113] Furthermore, it should be clear that not only can the program code read by the computer be executed, but also the operating system or other components operating on the computer can be instructed based on the program code to perform some or all of the actual operations, thereby realizing the function of any of the embodiments described above.
[0114] Furthermore, it is understood that the program code read from the storage medium is written to the memory set in the expansion board inserted into the computer or to the memory set in the expansion unit connected to the computer. Then, based on the instructions of the program code, the CPU or other components installed on the expansion board or expansion unit execute some and all of the actual operations, thereby realizing the function of any of the embodiments described above.
[0115] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.
Claims
1. A method for optimizing a Web low-code platform for an energy storage controller, characterized in that, The method is as follows: By optimizing the front-end storage method to reduce network requests, page data loading speed can be improved. Based on user habits, a suitable algorithm is selected for the energy storage controller through data search algorithms to optimize the execution efficiency of the low-code platform; Using Web Workers enables browsers to process data using multiple threads, reducing the data processing time on low-code platforms. In terms of storage methods, a combination of browser local caching and database storage is used, as detailed below: The classification principle for data security requirements is based on the degree of user self-configuration. That is, the higher the degree of user self-configuration, the higher the security requirements. The stored content is classified accordingly. The data is divided into two main categories: high-security-requirement data and low-security-requirement data, as detailed below: For low-security data: This data is categorized by page and stored in arrays. For example, the layout and initialization data for page one is stored at index 0, the layout and initialization data for page two is stored at index 1, and so on, until the layout and initialization data for each page are stored in the corresponding array. Each page is assigned a page identifier (id). This page identifier is encrypted using AES symmetric encryption and used as the key to store the array in the browser's storage via the `localStorage.setItem()` method. When a page is initialized, the encrypted page identifier is used as a parameter to retrieve the initial page data via the `localStorage.getItem()` method. For high-security data: Configuration data requiring high security is categorized by page and stored in an array. Each configuration data is assigned a parentId, which is used to associate the data with the page's initialization data. The array storing the data is then converted into JSON format using the JavaScript function JSON.stringify(). Finally, the JSON data is stored in the database via a network request.
2. The energy storage controller Web low-code platform optimization method according to claim 1, characterized in that, The page data loading process is as follows: The browser retrieves initialization data for pages with low security requirements from its local cache using the page identifier ID, and retrieves configuration data with high security requirements from the database by making network requests. Using the parentId of the obtained configuration data, a loop is performed on the obtained page initialization data that has been categorized by page to associate and assemble the page initialization data with the configuration data.
3. The energy storage controller Web low-code platform optimization method according to claim 1, characterized in that, The data search algorithm selects the post-order traversal algorithm of the tree, as follows: The initial data of the page is the initial layout of the page and the initial device label. The configuration data of the page is the display components of the charts and tables in the page layout, as well as the alarm data displayed in the display components, similar to the alarm data displayed in the charts. That is, there is a hierarchical relationship between the initial data of the page and the configuration data of the page. The initial data of the page contains the configuration data of the page. The page's initialization data and configuration data are stored in an object array, and the data relationships are integrated through the parent and children fields. That is, the parent field means that there is a parent-level contained relationship, and the children field means that there is a child-level contained relationship, forming a tree-structured data. When traversing a tree structure, the algorithm that first traverses the terminal node is chosen—the post-order traversal algorithm of the tree. That is, during the traversal of the tree, the child nodes are traversed first, and then the parent nodes are traversed. When the corresponding node is found, the traversal is immediately exited and the result is returned, thereby shortening the overall tree traversal time.
4. The energy storage controller Web low-code platform optimization method according to claim 1, characterized in that, The WebWorker implementation process is as follows: In the main thread's code, the Worker() constructor is called to create a Worker object, i.e., const myWorker = newWorker('worker.js'); the worker() constructor generates and passes the URL of the script to be executed to the browser, the browser creates a new background thread, loads the script specified by the URL, and executes it in the thread, and then listens for the background thread's return processing operation or result by calling the Worker object's addEventListener event listener; In a background child thread created by the main thread, messages from the main thread are listened for through the self.addEventListener event. The subtasks decomposed by the main thread are executed in the self.addEventListener event. After processing, the results are returned to the main thread through the self.postMessage() event. The main thread then processes the results returned by the background child thread.
5. An optimization system for a Web low-code platform for an energy storage controller, characterized in that, The system includes: The storage optimization module is used to optimize the front-end storage method by reducing network requests, thereby improving page data loading speed. The search algorithm optimization module is used to select a suitable algorithm for the energy storage controller based on the user's usage habits and through data search algorithms, thereby optimizing the execution efficiency of the low-code platform. The multi-threaded processing module is used to enable the browser to process data in multiple threads using Web Workers, thereby reducing the data processing time on low-code platforms. The storage optimization module combines browser local caching and database storage, as detailed below: The classification principle for data security requirements is based on the degree of user self-configuration. That is, the higher the degree of user self-configuration, the higher the security requirements. The stored content is classified accordingly. The data is divided into two main categories: high-security-requirement data and low-security-requirement data, as detailed below: For low-security data: This data is categorized by page and stored in arrays. For example, the layout and initialization data for page one is stored at index 0, the layout and initialization data for page two is stored at index 1, and so on, until the layout and initialization data for each page are stored in the corresponding array. Each page is assigned a page identifier (id). This page identifier is encrypted using AES symmetric encryption and used as the key to store the array in the browser's storage via the `localStorage.setItem()` method. When a page is initialized, the encrypted page identifier is used as a parameter to retrieve the initial page data via the `localStorage.getItem()` method. For high-security data: Configuration data requiring high security is categorized by page and stored in an array. Each configuration data is assigned a parentId, which is used to associate the data with the page's initialization data. The array storing the data is then converted into JSON format using the JavaScript function JSON.stringify(). Finally, the JSON data is stored in the database via a network request.
6. The energy storage controller Web low-code platform optimization system according to claim 5, characterized in that, The search algorithm optimization module selects the post-order traversal algorithm for the tree, as follows: The initial data of the page is the initial layout of the page and the initial device label. The configuration data of the page is the display components of the charts and tables in the page layout, as well as the alarm data displayed in the display components, similar to the alarm data displayed in the charts. That is, there is a hierarchical relationship between the initial data of the page and the configuration data of the page. The initial data of the page contains the configuration data of the page. The page's initialization data and configuration data are stored in an object array, and the data relationships are integrated through the parent and children fields. That is, the parent field means that there is a parent-level contained relationship, and the children field means that there is a child-level contained relationship, forming a tree-structured data. When traversing a tree structure, the algorithm that first traverses the terminal node is chosen—the post-order traversal algorithm of the tree. That is, during the traversal of the tree, the child nodes are traversed first, and then the parent nodes are traversed. When the corresponding node is found, the traversal is immediately exited and the result is returned, thereby shortening the overall tree traversal time. The Web Worker implementation process in the multi-threaded processing module is as follows: In the main thread's code, the Worker() constructor is called to create a Worker object, i.e., const myWorker = newWorker('worker.js'); the worker() constructor generates and passes the URL of the script to be executed to the browser, the browser creates a new background thread, loads the script specified by the URL, and executes it in the thread, and then listens for the background thread's return processing operation or result by calling the Worker object's addEventListener event listener; In a background child thread created by the main thread, messages from the main thread are listened for through the self.addEventListener event. The subtasks decomposed by the main thread are executed in the self.addEventListener event. After processing, the results are returned to the main thread through the self.postMessage() event. The main thread then processes the results returned by the background child thread.
7. An electronic device, characterized in that, include: Memory and at least one processor; The memory contains computer programs; The at least one processor executes the computer program stored in the memory, causing the at least one processor to perform the energy storage controller Web low-code platform optimization method as described in any one of claims 1 to 4.
8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that can be executed by a processor to implement the energy storage controller Web low-code platform optimization method as described in any one of claims 1 to 4.
Citation Information
Patent Citations
Interface request processing method and device, computer equipment and storage medium
CN109842610A
Page rendering method based on low-code platform, electronic equipment and storage medium
CN116382684A