Method for dynamically adjusting user interface elements and related device

Abstract

The invention discloses a method for dynamically adjusting user interface elements and a related device, and relates to the technical field of front-end display. Comprising the following steps: acquiring various energy business data; and for each type of energy business data, according to a preset target adjustment mode corresponding to the energy business data, adjusting a display state of an element corresponding to the energy business data in the current user interface to obtain an updated user interface. Therefore, the display state of the element corresponding to the energy business data is adjusted by using the target adjustment mode, namely, one of the user-defined instruction, the front-end component, the user-defined attribute or the condition rendering, so that the display state of the element corresponding to the energy business data is adjusted. The purpose of automatically adjusting the display state of the element corresponding to the energy business data in the user interface according to the change of the energy business data is achieved, and the user experience and the effectiveness of data display are improved.

Description

Technical Field

[0001] The present application relates to the field of front-end display technology, and in particular to a method and related device for dynamically adjusting user interface elements. Background Art

[0002] Energy Management System (EMS) is a comprehensive system that integrates multiple functions such as power monitoring, power quality monitoring and management, electrical safety warning, energy consumption analysis, lighting control, new energy use and equipment operation and maintenance; it uses automation, information technology and centralized management mode to dynamically monitor and digitize the use of energy and the operation of energy equipment.

[0003] At present, the elements on the user interface of the energy management system are usually static, that is, the icons, buttons and charts corresponding to each functional module in the user interface are relatively fixed, which makes it difficult to meet the user's demand for dynamic adjustment of elements in the user interface according to the changes in real-time business data. Therefore, how to build a dynamic and adaptive user interface has become one of the technical problems that need to be solved in the field of front-end display technology. Summary of the invention

[0004] Based on the above problems, the present application provides a method for dynamically adjusting user interface elements, which is used to dynamically adjust elements in the user interface of an energy management system according to changes in energy data, thereby improving user experience and the effectiveness of data display.

[0005] The embodiments of the present application disclose the following technical solutions:

[0006] The first aspect of the present application discloses a method for dynamically adjusting user interface elements, comprising:

[0007] Acquire multiple energy business data; the multiple energy business data include at least one of photovoltaic power generation power, charging percentage of energy storage system, virtual power plant equipment status data and photovoltaic power generation;

[0008] For each type of energy business data, the display status of the elements corresponding to the energy business data in the current user interface is adjusted according to a preset target adjustment method corresponding to the energy business data to obtain an updated user interface; the target adjustment method is a custom instruction, a front-end component, a custom attribute or a conditional rendering.

[0009] In an optional implementation, the energy business data is the photovoltaic power generation; the target adjustment method is a first target custom instruction; and the display state of an element corresponding to the energy business data in the current user interface is adjusted according to the preset target adjustment method corresponding to the energy business data, including:

[0010] By means of the first target custom instruction, determining whether the photovoltaic power generation power is greater than a preset first threshold;

[0011] If it is determined that the photovoltaic power generation power is greater than the first threshold, a first adjustment operation is performed on the display state of the element corresponding to the photovoltaic power generation power in the current user interface through the first target custom instruction; the first adjustment operation includes at least one of lighting up an icon or adding an animation prompt;

[0012] If it is determined that the photovoltaic power generation power is less than or equal to the first threshold, a second adjustment operation is performed on the display state of the element corresponding to the photovoltaic power generation power in the current user interface through the first target customized instruction; the second adjustment includes restoring the default state.

[0013] In an optional implementation, the energy business data is a charging percentage of the energy storage system; the target adjustment method is a second target custom instruction; and adjusting the display state of an element corresponding to the energy business data in the current user interface according to the preset target adjustment method corresponding to the energy business data includes:

[0014] Determining, by means of the second target custom instruction, whether the charging percentage is less than a preset second threshold;

[0015] If it is determined that the charging percentage is less than the second threshold, performing a third adjustment operation on the display state of the element corresponding to the charging percentage in the current user interface through the second target custom instruction; the third adjustment operation includes disabling an operation button;

[0016] If it is determined that the charging percentage is greater than or equal to the second threshold, a fourth adjustment operation is performed on the display status of the element corresponding to the charging percentage in the current user interface through the second target customized instruction; the fourth adjustment operation includes starting an operation button.

[0017] In an optional implementation, the energy business data is the virtual power plant equipment status data; the target adjustment method is a first target front-end component; and the display state of an element corresponding to the energy business data in the current user interface is adjusted according to a preset target adjustment method corresponding to the energy business data, including:

[0018] determining, by the first target front-end component, whether the virtual power plant device status data indicates that the virtual power plant device is in a fault state;

[0019] If it is determined that the virtual power plant device status data indicates that the virtual power plant device is in a fault state, a fifth adjustment operation is performed on the display state of the element corresponding to the virtual power plant device status data in the current user interface through the first target front-end component; the fifth adjustment operation includes a highlight button or a highlight icon;

[0020] If it is determined that the virtual power plant equipment status data indicates that the virtual power plant is in a normal state, the sixth adjustment operation is performed on the display status of the elements corresponding to the virtual power plant equipment status data in the current user interface through the first target front-end component; the sixth adjustment operation includes normally displaying buttons or icons.

[0021] In an optional implementation, the energy business data is the photovoltaic power generation; the target adjustment method is a second target front-end component; and the display state of an element corresponding to the energy business data in the current user interface is adjusted according to the preset target adjustment method corresponding to the energy business data, including:

[0022] By means of the second target front-end component, determining whether the time period in which the photovoltaic power generation is generated is within the peak power consumption time period;

[0023] If it is determined that the time period for generating the photovoltaic power generation is within the peak power consumption time period, the details of the trend graph constructed based on the photovoltaic power generation are magnified and displayed through the second target front-end component;

[0024] If it is determined that the time period for generating the photovoltaic power generation is outside the normal power consumption time period, the trend graph is displayed according to a default ratio through the second target front-end component.

[0025] In an optional implementation, after acquiring the multiple energy service data, the method further includes:

[0026] For each type of energy business data, analyzing the energy business data through machine learning or a rule engine to obtain an analysis result of the energy business data;

[0027] For each type of energy business data, according to a preset target adjustment method corresponding to the type of energy business data, the display state of the element corresponding to the type of energy business data in the current user interface is adjusted to obtain an updated user interface, including:

[0028] For each type of energy business data, according to the target adjustment method corresponding to the analysis result of the energy business data, the display status of the elements corresponding to the analysis result of the energy business data in the current user interface is adjusted to obtain an updated user interface.

[0029] In an optional implementation, the energy service data is obtained by:

[0030] The energy service data is acquired from an energy service module, or the energy service data is acquired based on a user operation on an element of an updated user interface.

[0031] A second aspect of the present application provides a device for dynamically adjusting user interface elements, including:

[0032] A data acquisition module, used to acquire a variety of energy business data; the various energy business data include at least one of photovoltaic power generation power, charging percentage of energy storage system, virtual power plant equipment status data and photovoltaic power generation;

[0033] A status update module is used to adjust the display status of the elements corresponding to each type of energy business data in the current user interface according to a preset target adjustment method corresponding to the energy business data, so as to obtain an updated user interface; the target adjustment method is a custom instruction, a front-end component, a custom attribute or a conditional rendering.

[0034] A third aspect of the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the method introduced in any implementation manner of the first aspect.

[0035] A fourth aspect of the present application provides an electronic device, including:

[0036] a memory having a computer program stored thereon;

[0037] A processor is used to execute the computer program in the memory to implement the steps of the method introduced in any implementation manner of the first aspect.

[0038] Compared with the prior art, this application has the following beneficial effects:

[0039] The present application discloses a method for dynamically adjusting a user interface, including: obtaining a plurality of energy business data; for each type of energy business data, adjusting the display state of the element corresponding to the energy business data in the current user interface according to a preset target adjustment method corresponding to the energy business data, and obtaining an updated user interface. In this way, by using a target adjustment method, that is, using a method of adjusting the display state of the element corresponding to the energy business data in a custom instruction, a front-end component, a custom attribute, or a conditional rendering, the goal of automatically adjusting the display state of the element corresponding to the energy business data in the user interface, such as an icon or a button, is achieved according to the change of the energy business data, and the goal of adaptively adjusting the display state of the element in the user interface is achieved, which improves the user experience and the effectiveness of data display. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0041] Figure 1 A flowchart of a method for dynamically adjusting user interface elements provided in an embodiment of the present application;

[0042] Figure 2 A schematic diagram of the display status of elements in a photovoltaic power generation adjustment user interface provided in an embodiment of the present application;

[0043] Figure 3 A schematic diagram of adjusting the display status of elements in a user interface based on the charging percentage of an energy storage system provided in an embodiment of the present application;

[0044] Figure 4 A schematic diagram of adjusting the display status of elements in a user interface based on virtual power plant equipment status data provided in an embodiment of the present application;

[0045] Figure 5 A schematic diagram of adjusting the display status of elements in a user interface based on photovoltaic power generation provided in an embodiment of the present application;

[0046] Figure 6 A schematic diagram of adjusting the display status of elements in a user interface based on multiple energy business data provided by an embodiment of the present application;

[0047] Figure 7 A schematic diagram of the structure of a device for dynamically adjusting user interface elements provided in an embodiment of the present application. DETAILED DESCRIPTION

[0048] As mentioned above, the energy management system is a comprehensive system that integrates multiple functions such as power monitoring, power quality monitoring and management, electrical safety warning, energy consumption analysis, lighting control, new energy use and equipment operation and maintenance; it uses automation, information technology and centralized management mode to implement dynamic monitoring and data management of energy usage and the safety of energy equipment.

[0049] In traditional solutions, the user interface in the energy management system is usually static, and the display methods of various functional modules and information are relatively fixed, lacking dynamic changes and interactivity, making it difficult to meet the user's needs to adjust the elements in the user interface according to changes in real-time business data. How to build a dynamic and adaptive user interface has become one of the technical problems that need to be solved in the field of computer technology.

[0050] Based on the above problems, the present application discloses a method for dynamically adjusting a user interface, including: obtaining a variety of energy business data; for each type of energy business data, adjusting the display state of the element corresponding to the energy business data in the current user interface according to a preset target adjustment method corresponding to the energy business data, to obtain an updated user interface. In this way, by using a target adjustment method, that is, using a method of adjusting the display state of the element corresponding to the energy business data using custom instructions, front-end components, custom attributes or conditional rendering, the goal of automatically adjusting the display state of the element corresponding to the energy business data in the user interface, such as an icon or button, is achieved according to changes in the energy business data, and the goal of adaptively adjusting the display state of the elements in the user interface is achieved, thereby improving the user experience and the effectiveness of data display.

[0051] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0052] Figure 1 A flowchart of a method for dynamically adjusting user interface elements provided in an embodiment of the present application. Figure 1 As shown, the method for dynamically adjusting user interface elements disclosed in this application includes:

[0053] S101, obtaining various energy business data.

[0054] The various energy business data in the present application include at least one of photovoltaic power generation power, charging percentage of the energy storage system, virtual power plant equipment status data and photovoltaic power generation.

[0055] Photovoltaic power generation refers to the electrical energy generated by photovoltaic cell modules per unit time, usually measured in watts or kilowatts, reflecting the maximum power that a photovoltaic system can output under certain conditions.

[0056] Photovoltaic power generation refers to the amount of electrical energy that a photovoltaic system can generate per unit time, usually measured in kilowatt-hours, reflecting the total amount of electrical energy actually generated by the photovoltaic system within a certain period of time.

[0057] The virtual power plant equipment status data is used to determine whether the virtual power plant is in normal operation, including but not limited to: battery health status, battery remaining status, real-time load demand, response time of load instructions, etc.

[0058] It should be emphasized that, in addition to at least one of the four types of energy business data mentioned above, the energy business data may also be energy consumption forecast data and wind power generation data, etc. The present application does not limit the types of energy business data; any type of energy business data is applicable to the method for dynamically adjusting user interface elements disclosed in the present application.

[0059] In an optional implementation method, energy business data can be obtained from the energy business module through the back end of the energy management system, and then the energy business data obtained by the back end of the energy management system can be transmitted to the front end of the energy management system through any one of API, WebSocket, Server-Sent Events (SSE), HTTP long polling and MQTT protocols.

[0060] S102, for each type of energy business data, according to a preset target adjustment method corresponding to the type of energy business data, adjusting the display state of the elements corresponding to the type of energy business data in the current user interface to obtain an updated user interface.

[0061] The user interface (UI) is a medium for interaction and information exchange between the system and the user. The user interface in this application specifically refers to the user interface in the energy management system. The current user interface in this application refers to the user interface at the current moment.

[0062] Elements on the user interface include, but are not limited to: graphics (icons, images and icons), text, keys and buttons, etc.; elements form the basis of the user interface, allowing users to easily interact with the energy management system.

[0063] The target adjustment method is custom instructions, front-end components, custom properties (CSS variables) or conditional rendering. It can also be dynamic style adjustment, media query or responsive design mode.

[0064] Among them, custom instructions are instructions formed based on Vue.js, which directly act on DOM (Document Object Model) elements and can dynamically adjust the display status of elements in the user interface.

[0065] Among them, the front-end component is an independent, reusable module formed based on the front-end framework. Common front-end frameworks include: Vue.js, React, Angular, and Svelte. For example, the front-end component can be a front-end component formed based on the combination function in Vue.js; it can also be a front-end component formed based on the "useEffect" and "useState" functions in React. The composition of the front-end component is not limited in this application.

[0066] It should be noted that the target adjustment method corresponding to each type of energy business data has been preset in the front end of the energy management system of this application. For the front end of the energy management system, after receiving each type of energy business data transmitted by the back end of the energy management system, it will directly determine the target adjustment method corresponding to the energy business data; then, through the target adjustment method, the display state of the element corresponding to the energy business data in the current user interface is adjusted to obtain an updated user interface.

[0067] In the subsequent embodiments of the present application, a specific implementation method for adjusting the display status of elements corresponding to energy business data according to target adjustment instructions will be described in detail.

[0068] It can be understood that in this application, the data changes in the energy management system are fed back to the user in real time through the updated user interface. The user can operate the elements in the updated user interface, and the back end of the energy management system will respond to the user's operation, form response data, and transmit the response data to the front end of the energy management system; the front end of the energy management system will automatically adjust the display status of the elements in the user interface based on the response data and the target adjustment method corresponding to the response data.

[0069] Figure 2 A schematic diagram of the display status of elements in a photovoltaic power generation adjustment user interface provided in an embodiment of the present application. Figure 2 As shown, the specific process is:

[0070] After receiving the photovoltaic power generation power, the front end of the energy management system determines the first target custom instruction corresponding to the photovoltaic power generation power, and judges whether the photovoltaic power generation power is greater than the preset first threshold value through the first target custom instruction. Among them, those skilled in the art can set the first threshold value according to actual needs, and the specific value of the first threshold value is not limited in this application.

[0071] If it is determined that the photovoltaic power generation power is greater than the first threshold, the first target customized instruction is used to perform a first adjustment operation on the display status of the element corresponding to the photovoltaic power generation power in the current user interface, that is, lighting up the icon corresponding to the photovoltaic power generation power in the current user interface and / or adding an animation prompt.

[0072] If it is determined that the photovoltaic power generation power is less than or equal to the preset first threshold, the second adjustment operation is performed on the element corresponding to the photovoltaic power generation power in the current user interface through the first target customized instruction, that is, the icon corresponding to the photovoltaic power generation power in the current user interface is restored to the default state.

[0073] It should be emphasized that Figure 2 In the embodiment, the first target custom instruction is used to realize the automatic adjustment of the display state of the element corresponding to the photovoltaic power generation in the user interface. The advantage of such operation is that it is simple and efficient. Those skilled in the art may also choose to realize the automatic adjustment of the display state of the element corresponding to the photovoltaic power generation in the user interface through the front-end component.

[0074] Figure 3 A schematic diagram of adjusting the display status of elements in a user interface based on the charging percentage of an energy storage system provided in an embodiment of the present application. Figure 3 As shown, the specific process is:

[0075] After receiving the charging percentage of the energy storage system, the front end of the energy management system determines the second target custom instruction corresponding to the charging percentage of the energy storage system; and through the second target custom instruction, determines whether the charging percentage is less than the preset second threshold. Among them, those skilled in the art can set the second threshold according to actual needs, and the specific value of the second threshold is not limited in this application.

[0076] If it is determined that the charging percentage of the energy storage system is less than the second threshold, a third adjustment operation is performed on the display status of the elements corresponding to the charging percentage in the current user interface through the second target custom instruction, that is, disabling the elements corresponding to the charging percentage in the current user interface, such as operation buttons; to prevent users from performing potentially risky operations when the battery is low on power.

[0077] If it is determined that the charging percentage of the energy storage system is greater than or equal to the second threshold, a fourth adjustment operation is performed on the display status of the element corresponding to the charging percentage in the current user interface through the second target customized instruction, that is, the element corresponding to the charging percentage in the current user interface, such as an operation button, is started.

[0078] In this way, through Figure 3 The method shown in , after receiving the charging percentage of the energy storage system, can automatically determine whether to enable or disable related elements, such as operation buttons, to ensure safe operation and avoid misoperation.

[0079] It is understandable that, referring to the same method as the method of adaptively adjusting the display state of the element corresponding to the charging percentage in the user interface, those skilled in the art may also adaptively adjust the display state of the element corresponding to the discharging percentage in the user interface.

[0080] It should be emphasized that Figure 3 In the example, the first target custom instruction is used to realize the automatic adjustment of the display state of the element corresponding to the charging percentage in the user interface. The advantage of this operation is that it is simple and efficient. Those skilled in the art may also choose to realize the automatic adjustment of the display state of the element corresponding to the charging percentage in the user interface through the front-end component.

[0081] Figure 4 A schematic diagram of adjusting the display status of elements in a user interface based on virtual power plant equipment status data provided by an embodiment of the present application. Figure 4 As shown, the specific process is:

[0082] After receiving the virtual power plant equipment status data, the front end of the energy management system determines the first target front end component corresponding to the virtual power plant equipment status data; and through the first target front end component, determines whether the virtual power plant equipment status data indicates that the virtual power plant equipment is in a fault state.

[0083] If it is determined that the virtual power plant equipment status data indicates that the virtual power plant equipment is in a fault state, the fifth adjustment operation is performed on the display status of the elements corresponding to the virtual power plant equipment status data in the current user interface through the first target front-end component, that is, the elements corresponding to the virtual power plant equipment status data in the current user interface (such as buttons or icons) are highlighted to remind the user of the problem equipment that needs attention.

[0084] If it is determined that the virtual power plant equipment status data indicates that the virtual power plant is in a normal state, the sixth adjustment operation is performed on the display status of the elements corresponding to the virtual power plant equipment status data in the current user interface through the first target front-end component, that is, the elements corresponding to the virtual power plant equipment status data in the current user interface (such as buttons or icons) are displayed normally.

[0085] pass Figure 4 The method shown in , after receiving the virtual power plant equipment status data, can display the faulty equipment with high brightness on the front-end user interface, so that users can quickly find abnormal situations.

[0086] It should be emphasized that Figure 4 In the embodiment, the first target front-end component is used to realize the automatic adjustment of the display state of the element corresponding to the virtual power plant equipment status data in the user interface, and the advantage of this is that the display effect is excellent. Those skilled in the art may also choose to realize the automatic adjustment of the state of the element corresponding to the virtual power plant equipment status data in the user interface through custom instructions.

[0087] Figure 5 A schematic diagram of adjusting the display status of elements in a user interface based on photovoltaic power generation provided in an embodiment of the present application. Figure 5 As shown, the specific process is:

[0088] After receiving the photovoltaic power generation, the front end of the energy management system determines the second target front end component corresponding to the photovoltaic power generation; and through the second target front end component, determines whether the time period in which the photovoltaic power generation is generated is a peak power consumption period.

[0089] If it is determined that the time period for generating photovoltaic power generation is within the peak power consumption period, the details of the trend graph constructed based on the photovoltaic power generation are magnified and displayed through the second target front-end component.

[0090] If it is determined that the time period for generating photovoltaic power generation is within the normal power consumption time period, a trend chart constructed based on photovoltaic power generation is displayed according to a default ratio through the second target front-end component.

[0091] In this way, through Figure 5 The method shown in , after obtaining the photovoltaic power generation, adaptively adjusts the proportion of the trend graph according to the generation time of the photovoltaic power generation, thereby improving the user's experience of observing and analyzing the data.

[0092] Understandably, Figure 5 The method shown in is also applicable to the dynamic display of schematic diagrams corresponding to various types of energy data.

[0093] It should be emphasized that Figure 5 In the embodiment, the second target front-end component is used to realize the automatic adjustment of the display state of the element corresponding to the photovoltaic power generation in the user interface. The advantage of this is that the display effect is excellent. Those skilled in the art may also choose to realize the automatic adjustment of the display state of the element corresponding to the photovoltaic power generation in the user interface through custom instructions.

[0094] It is understandable that for the various types of energy business data that can be obtained by the backend of the energy management system, after obtaining each type of energy business data, the display status of the elements corresponding to the energy business data in the user interface can be adaptively adjusted by referring to the contents of the aforementioned embodiments.

[0095] Figure 6 A schematic diagram of adjusting the display status of elements in a user interface based on multiple energy business data provided in an embodiment of the present application.

[0096] Combination Figure 6 As shown in the figure, the backend of the energy management system can simultaneously obtain four types of data: photovoltaic power generation, energy storage system charging percentage, virtual power plant equipment status data, and photovoltaic power generation. Then, the backend of the energy management system transmits the acquired data to the frontend of the energy management system through any of the following methods: API, WebSocket, Server-Sent Events (SSE), HTTP long polling, and MQTT protocol. After receiving the photovoltaic power generation, energy storage system charging percentage, virtual power plant equipment status data, and photovoltaic power generation data, the frontend of the energy management system Figure 2 , Figure 3 , Figure 4 and Figure 5 The method shown in , respectively adjusts the display status of corresponding elements in the front-end user interface of the energy management system to obtain an updated user interface.

[0097] Furthermore, after viewing the updated user interface, the user can operate the elements on the updated user interface, and the back end of the energy management system will respond according to the user operation and obtain response data; the back end of the energy management system will transmit the response data to the front end of the energy system, and the front end of the energy management system will adjust the state of the elements on the user interface corresponding to the response data according to the response data. In this way, the adaptive adjustment of the elements on the data-driven user interface is realized, which improves the user experience and usage feeling.

[0098] In an optional implementation method, after obtaining each type of energy business data, the energy business data can be analyzed through machine learning or a rule engine to obtain an analysis result of the energy business data; according to the target adjustment method corresponding to the analysis result of the energy business data, the display status of the elements corresponding to the analysis result of the energy business data in the current user interface is adjusted to obtain an updated user interface.

[0099] Exemplarily, after obtaining the photovoltaic power generation, the changing trend graph of the photovoltaic power generation can be predicted through machine learning; then, according to the target adjustment method corresponding to the photovoltaic power generation, such as the target custom instruction or the target front-end component, the display status of the elements corresponding to the predicted changing trend graph of the photovoltaic power generation in the current user interface, such as the display status of the icon, is updated and adjusted to obtain an updated user interface.

[0100] It is understandable that for photovoltaic power generation power, charging percentage of energy storage system, virtual power plant equipment status data and other energy business data besides photovoltaic power generation, the method in this application can also be referred to to adjust the elements in the user interface.

[0101] For example, the grid load data can be obtained through the back-end of the energy management system, and the obtained grid load data can be transmitted to the front-end of the energy management system. After receiving the grid load data, the front-end can determine the target adjustment method corresponding to the grid load data; then the grid load data is analyzed by determining the target adjustment method to determine the health status of the grid, and if it is determined that the health status of the grid is poor, a warning or notification message will pop up in the current user interface. That is, each type of energy service data can refer to the Figure 1 The method shown realizes adaptive adjustment of the display status of the elements corresponding to the energy business data in the user interface.

[0102] In addition to the adaptive adjustment of elements in the user interface through custom instructions and front-end components disclosed in the aforementioned embodiments, the same adaptive effect can also be achieved through CSS variables and dynamic style adjustment, conditional rendering, responsive design mode, and media query mechanisms; you can also use chart libraries such as D3.js or ECharts to adjust the display status of charts of energy business data in the user interface.

[0103] For example, after the back-end of the energy management system obtains the charging percentage of the energy storage system, conditional rendering can be used as a target adjustment method. Through conditional rendering, when the charging percentage is lower than a second threshold, the button corresponding to the charging percentage in the user interface is hidden or disabled to avoid user misoperation.

[0104] Based on the method for dynamically adjusting user interface elements disclosed in the aforementioned embodiment, the present application also discloses a device for dynamically adjusting user interface elements. Figure 7 A schematic diagram of a structure of a device for dynamically adjusting user interface elements provided in an embodiment of the present application. Figure 7 As shown, the device 700 for dynamically adjusting user interface elements disclosed in the present application includes:

[0105] The data acquisition module 701 is used to acquire various energy service data; the various energy service data include at least one of photovoltaic power generation, charging percentage of energy storage system, virtual power plant equipment status data and photovoltaic power generation;

[0106] The status update module 702 is used to adjust the display status of the elements corresponding to each type of energy business data in the current user interface according to a preset target adjustment method corresponding to the energy business data, so as to obtain an updated user interface; the target adjustment method is a custom instruction, a front-end component, a custom attribute or a conditional rendering.

[0107] In an optional implementation, the status update module 702 includes:

[0108] A first adjustment mode determination unit, configured to determine whether the photovoltaic power generation power is greater than a preset first threshold value through the first target custom instruction;

[0109] a first adjustment operation execution unit, configured to, if it is determined that the photovoltaic power generation power is greater than the first threshold value, perform a first adjustment operation on the display state of the element corresponding to the photovoltaic power generation power in the current user interface through the first target custom instruction; the first adjustment operation includes at least one of lighting up an icon or adding an animation prompt;

[0110] A second adjustment operation execution unit is used to perform a second adjustment operation on the display status of the element corresponding to the photovoltaic power generation power in the current user interface through the first target customized instruction if it is determined that the photovoltaic power generation power is less than or equal to the first threshold; the second adjustment includes restoring the default state.

[0111] In an optional implementation, the status update module 702 includes:

[0112] A second adjustment mode determination unit, configured to determine whether the charging percentage is less than a preset second threshold value through the second target custom instruction;

[0113] a third adjustment operation execution unit, configured to, if it is determined that the charging percentage is less than the second threshold, perform a third adjustment operation on the display state of the element corresponding to the charging percentage in the current user interface through the second target custom instruction; the third adjustment operation includes disabling an operation button;

[0114] A fourth adjustment operation execution unit is used to perform a fourth adjustment operation on the display status of the element corresponding to the charging percentage in the current user interface through the second target customized instruction if it is determined that the charging percentage is greater than or equal to the second threshold; the fourth adjustment operation includes a start operation button.

[0115] In an optional implementation, the status update module 702 includes:

[0116] a third adjustment mode determination unit, configured to determine, through the first target front-end component, whether the virtual power plant device state data indicates that the virtual power plant device is in a fault state;

[0117] a fifth adjustment operation execution unit, configured to, if it is determined that the virtual power plant device status data indicates that the virtual power plant device is in a fault state, perform a fifth adjustment operation on the display state of the element corresponding to the virtual power plant device status data in the current user interface through the first target front-end component; the fifth adjustment operation includes a highlight button or a highlight icon;

[0118] The sixth adjustment operation execution unit is used to perform the sixth adjustment operation on the display status of the element corresponding to the virtual power plant equipment status data in the current user interface through the first target front-end component if it is determined that the virtual power plant equipment status data indicates that the virtual power plant is in a normal state; the sixth adjustment operation includes a normal display button or icon.

[0119] In an optional implementation, the status update module 702 includes:

[0120] a fourth adjustment mode determination unit, configured to determine, through the second target front-end component, whether a time period for generating the photovoltaic power generation is within a peak power consumption time period;

[0121] a seventh adjustment operation execution unit, configured to, if it is determined that the time period for generating the photovoltaic power generation is within the peak power consumption time period, amplify and display details of the trend graph constructed based on the photovoltaic power generation through the second target front-end component;

[0122] The eighth adjustment operation execution unit is used to display the trend graph according to a default ratio through the second target front-end component if it is determined that the time period for generating the photovoltaic power generation is outside the normal power consumption time period.

[0123] In an optional implementation, the apparatus 700 for dynamically adjusting user interface elements further includes:

[0124] An analysis result acquisition unit, configured to analyze each type of energy business data through machine learning or a rule engine to obtain an analysis result of the energy business data;

[0125] The ninth adjustment operation execution unit is used to adjust the display status of the elements corresponding to the analysis results of each type of energy business data in the current user interface according to the target adjustment method corresponding to the analysis results of the energy business data, so as to obtain an updated user interface.

[0126] In an optional implementation, the data acquisition module 701 includes:

[0127] The data acquisition unit is used to acquire the energy service data from the energy service module, or acquire the energy service data based on the user's operation on the elements of the updated user interface.

[0128] Based on the method and device for dynamically adjusting user interface elements provided in the aforementioned embodiments, the present application also provides a computer-readable storage medium, on which a computer program is stored, which, when executed by a processor, implements some or all of the steps in the method for dynamically adjusting user interface elements mentioned above.

[0129] Based on the method and device for dynamically adjusting user interface elements provided in the above embodiments, the present application further provides an electronic device, including:

[0130] a memory having a computer program stored thereon;

[0131] The processor is used to execute the computer program in the memory to implement part or all of the steps in the method for dynamically adjusting user interface elements provided in the above embodiment.

[0132] It should be noted that each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described above is merely schematic, in which the unit described as a separate component may or may not be physically separated, and the component prompted as a unit may or may not be a physical unit, that is, it may be located in one place, or it may be distributed on multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative work.

[0133] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A method for dynamically adjusting user interface elements, characterized in that: The method comprises: Acquire multiple energy business data; the multiple energy business data include at least one of photovoltaic power generation power, charging percentage of energy storage system, virtual power plant equipment status data and photovoltaic power generation; For each type of energy business data, the display status of the elements corresponding to the energy business data in the current user interface is adjusted according to a preset target adjustment method corresponding to the energy business data to obtain an updated user interface; the target adjustment method is a custom instruction, a front-end component, a custom attribute or a conditional rendering.

2. The method according to claim 1, characterized in that The energy business data is the photovoltaic power generation power; the target adjustment method is a first target custom instruction; and the display state of the element corresponding to the energy business data in the current user interface is adjusted according to the preset target adjustment method corresponding to the energy business data, including: By means of the first target custom instruction, determining whether the photovoltaic power generation power is greater than a preset first threshold; If it is determined that the photovoltaic power generation power is greater than the first threshold, a first adjustment operation is performed on the display state of the element corresponding to the photovoltaic power generation power in the current user interface through the first target custom instruction; the first adjustment operation includes at least one of lighting up an icon or adding an animation prompt; If it is determined that the photovoltaic power generation power is less than or equal to the first threshold, a second adjustment operation is performed on the display state of the element corresponding to the photovoltaic power generation power in the current user interface through the first target customized instruction; the second adjustment includes restoring the default state.

3. The method according to claim 1, characterized in that The energy business data is the charging percentage of the energy storage system; the target adjustment method is a second target custom instruction; and the display state of the element corresponding to the energy business data in the current user interface is adjusted according to the preset target adjustment method corresponding to the energy business data, including: Determining, by means of the second target custom instruction, whether the charging percentage is less than a preset second threshold; If it is determined that the charging percentage is less than the second threshold, performing a third adjustment operation on the display state of the element corresponding to the charging percentage in the current user interface through the second target custom instruction; the third adjustment operation includes disabling an operation button; If it is determined that the charging percentage is greater than or equal to the second threshold, a fourth adjustment operation is performed on the display status of the element corresponding to the charging percentage in the current user interface through the second target customized instruction; the fourth adjustment operation includes starting an operation button.

4. The method according to claim 1, characterized in that: The energy business data is the virtual power plant equipment status data; the target adjustment method is a first target front-end component; and the display state of the element corresponding to the energy business data in the current user interface is adjusted according to the preset target adjustment method corresponding to the energy business data, including: determining, by the first target front-end component, whether the virtual power plant device status data indicates that the virtual power plant device is in a fault state; If it is determined that the virtual power plant device status data indicates that the virtual power plant device is in a fault state, a fifth adjustment operation is performed on the display state of the element corresponding to the virtual power plant device status data in the current user interface through the first target front-end component; the fifth adjustment operation includes a highlight button or a highlight icon; If it is determined that the virtual power plant equipment status data indicates that the virtual power plant is in a normal state, the sixth adjustment operation is performed on the display status of the elements corresponding to the virtual power plant equipment status data in the current user interface through the first target front-end component; the sixth adjustment operation includes normally displaying buttons or icons.

5. The method according to claim 1, characterized in that The energy business data is the photovoltaic power generation; the target adjustment method is a second target front-end component; and the display state of the element corresponding to the energy business data in the current user interface is adjusted according to the preset target adjustment method corresponding to the energy business data, including: By means of the second target front-end component, determining whether the time period in which the photovoltaic power generation is generated is within the peak power consumption time period; If it is determined that the time period for generating the photovoltaic power generation is within the peak power consumption time period, the details of the trend graph constructed based on the photovoltaic power generation are magnified and displayed through the second target front-end component; If it is determined that the time period for generating the photovoltaic power generation is outside the normal power consumption time period, the trend graph is displayed according to a default ratio through the second target front-end component.

6. The method according to claim 1, characterized in that After acquiring the multiple energy service data, the method further includes: For each type of energy business data, analyzing the energy business data through machine learning or a rule engine to obtain an analysis result of the energy business data; For each type of energy business data, according to a preset target adjustment method corresponding to the type of energy business data, the display state of the element corresponding to the type of energy business data in the current user interface is adjusted to obtain an updated user interface, including: For each type of energy business data, according to the target adjustment method corresponding to the analysis result of the energy business data, the display status of the elements corresponding to the analysis result of the energy business data in the current user interface is adjusted to obtain an updated user interface.

7. The method according to any one of claims 1 to 6, characterized in that The energy business data is obtained by: The energy service data is acquired from an energy service module, or the energy service data is acquired based on a user operation on an element of an updated user interface.

8. A device for dynamically adjusting user interface elements, characterized in that: The device comprises: A data acquisition module, used to acquire a variety of energy business data; the various energy business data include at least one of photovoltaic power generation power, charging percentage of energy storage system, virtual power plant equipment status data and photovoltaic power generation; A status update module is used to adjust the display status of the elements corresponding to each type of energy business data in the current user interface according to a preset target adjustment method corresponding to the energy business data, so as to obtain an updated user interface; the target adjustment method is a custom instruction, a front-end component, a custom attribute or a conditional rendering.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method described in any one of claims 1 to 7 are implemented.

10. An electronic device, characterized in that: include: a memory having a computer program stored thereon; A processor, configured to execute the computer program in the memory to implement the steps of the method according to any one of claims 1 to 7.

Images