Method and system for realizing man-machine web framework of power market supporting multiple themes

Abstract

The invention discloses an electric power market man-machine web framework implementation method and system supporting multiple themes, and relates to the technical field of electric power market man-machine interaction, and the method comprises the steps: designing page styles corresponding to different themes during switching of multiple themes; defining a theme information table for maintaining and displaying different theme information; and defining JSON format files of different themes for configuring and modifying visual graph attribute values. According to the method, through optimized information transmission, the readability of data is enhanced, a user can clearly identify key information, the operation efficiency is improved through dynamic switching and consistent design, the adaptation time of the user is shortened, the maintainability and adaptability of the system are enhanced, market changes can be quickly responded, and the user experience is improved. Multiple themes support a flexible visual analysis tool, a user is assisted to carry out efficient data processing and decision making, the user experience is optimized, and meanwhile practical value is provided for digital transformation of the electricity market.

Description

Technical Field

[0001] The present invention relates to the technical field of human-computer interaction in power market, and in particular to a method and system for realizing a human-computer web framework in power market supporting multiple themes. Background Art

[0002] With the continuous development of the power market, digitalization and intelligence have become important trends in the power industry. The application of human-machine interaction (HMI) technology in the power market has become more and more extensive. Traditional power market HMI systems are mostly designed with a single theme, which cannot meet the personalized needs and usage habits of different users. With the advancement of front-end development technology, especially the extensive application of HTML5, CSS3 and various front-end frameworks, the customizability and scalability of web pages have been greatly improved. Through multi-theme design, personalized customization and dynamic switching of HMI systems can be achieved, which has become a new trend in current technological development. This can not only improve user experience, but also enhance the flexibility and adaptability of the system.

[0003] Although the existing human-computer interaction system of the power market has achieved the customization of the interface to a certain extent, there are still many deficiencies in multi-theme design and dynamic switching. Many systems can only change the theme through static methods, that is, each time the theme is changed, it is necessary to redeploy or reload the page, and it is impossible to achieve real-time dynamic switching, which greatly reduces the user experience. The existing system usually does not have a unified theme information management mechanism and lacks the maintenance and display functions of the theme information table, which makes it impossible for users to conveniently view and select different themes, thereby limiting the usability and friendliness of the system. Most existing systems also have defects in the theme switching of visual graphics, and cannot effectively adjust the graphic attribute values ​​dynamically through JSON configuration files to achieve dynamic theme switching of visual graphics. Therefore, the existing technology cannot provide a flexible and efficient multi-theme switching mechanism, cannot meet the user's needs for diversified interface styles and high interactivity, and limits the functional expansion and user interface experience of the power market HMI system. A new solution is urgently needed to overcome these problems. Summary of the invention

[0004] In view of the above-mentioned problems, the present invention is proposed.

[0005] Therefore, the technical problem solved by the present invention is: the existing methods in the field of human-computer interaction technology in the power market have the problems that the theme switching cannot be carried out in real time and dynamically, there is a lack of a unified theme information management mechanism, and the visualization graphics cannot dynamically adjust the attribute values ​​through the JSON configuration file, as well as how to realize the dynamic switching of multiple themes and personalized customization of the human-computer interaction system.

[0006] To solve the above technical problems, the present invention provides the following technical solutions: a method for implementing a human-machine web framework for an electricity market that supports multiple themes, including designing page styles corresponding to different themes when switching between multiple themes; defining a theme information table for maintaining and displaying information of different themes; and defining JSON format files of different themes for configuring and modifying visual graphic attribute values.

[0007] As a preferred solution of the method for implementing the multi-theme human-machine web framework of the power market described in the present invention, the page style includes the upper and lower adaptation of the grid system principle, based on blocks, and presenting the effect in the form of cards, involving multi-theme adaptation of background color, font size and color, visual graphics and pictures, and the page style includes different theme styles of light blue, light green, and dark blue, and the visual graphics include line charts, bar charts, pie charts, and 3D maps.

[0008] As a preferred solution of the method for implementing the multi-theme human-machine web framework of the power market described in the present invention, the multi-theme implementation of the component elements of the page style also includes background color, font, border, button, and input box adopts the CSS preprocessing language, and dynamic switching of multiple themes is performed by defining dynamic variables and functions. The component library source includes custom components and open source component libraries, the class name of the style is named using class, and all colors related to the theme depend on CSS variables and functions.

[0009] As a preferred solution of the method for implementing the multi-theme power market human-machine web framework described in the present invention, the page style also includes designing pictures or icons with different theme styles, and dynamically loading different pictures or icons when the theme is switched. The pictures or icons are loaded and presented through the background or img tag.

[0010] As a preferred solution of the method for implementing the human-machine web framework of the power market supporting multiple themes described in the present invention, the defined theme information table includes a table for maintaining theme information and displaying it on the interface, and users view and select favorite themes for storage.

[0011] Design a theme selection page where users can preview images of different theme styles and dynamically switch themes according to their preferences. The selected results are saved in the user information table and the cache of the vue framework. If the user does not select a theme, a default theme is given.

[0012] As a preferred solution of the method for implementing the human-machine web framework of the power market supporting multiple themes described in the present invention, the defined theme information table also includes maintaining user information and binding user-selected theme information to dynamically switch themes for different users.

[0013] Use HTML5's data-* attributes and the theme name defined in the CSS preprocessing language to bind. When the user switches the theme, change the value of data-* so that the page dynamically loads the corresponding CSS attributes or images to switch the theme.

[0014] As a preferred solution of the method for implementing the human-machine web framework of the power market supporting multiple themes described in the present invention, the configuration and modification of the attribute values ​​of the visualization graphics include defining json format files of different themes, configuring and modifying the attribute values ​​of the visualization graphics colors, and dynamically switching the themes of the visualization graphics.

[0015] After the user's cached theme information is switched by using Vue's monitoring mechanism, the visualization graphics plug-in loads the corresponding theme json file, generates a new instance and redraws the visualization graphics.

[0016] Another object of the present invention is to provide a human-computer web framework implementation system for an electricity market that supports multiple themes. The system can be used to configure and modify visual graphic attribute values ​​by defining JSON format files of different themes, thereby solving the problems of insufficient flexibility and difficult maintenance in current human-computer interaction technology in the electricity market.

[0017] As a preferred solution of the human-machine web framework implementation system for the power market supporting multiple themes described in the present invention, it includes: a theme design module, a theme management module, and a visualization configuration module.

[0018] The theme design module is used to design page styles corresponding to different themes when switching between multiple themes; the theme management module is used to define a theme information table for maintaining and displaying various theme information; the visualization configuration module is used to define JSON format files for different themes for configuring and modifying visualization graphic attribute values.

[0019] A computer device comprises a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of a method for implementing a human-machine web framework of a power market supporting multiple topics.

[0020] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements the steps of a method for implementing a human-machine web framework for a power market supporting multiple topics.

[0021] Beneficial effects of the present invention: When the method for implementing the human-machine web framework for the power market supporting multiple themes provided by the present invention switches multiple themes, page styles corresponding to different themes are designed to provide a unified and flexible layout for different page elements, ensuring that each theme still maintains the beauty and consistency of the interface when switching, which not only makes the HMI system of the power market more friendly and flexible, but also effectively improves the efficiency of data visualization and user operation in complex business scenarios, thereby promoting users to make better decisions and analysis, and defines a theme information table for maintaining and displaying different theme information. By defining the theme information table, the system effectively integrates theme management and user experience, which not only improves flexibility It improves the user experience and ease of use, and also enhances the personalized experience of users. In complex application scenarios such as the power market, users can more efficiently select a suitable interface to achieve better usage effects and business needs. JSON format files of different themes are defined for configuring and modifying visualization graphic attribute values. It not only provides the ability to flexibly configure visualization components, but also enhances the immediacy and personalization of user experience, while improving the convenience of development and maintenance. The system can more effectively display and analyze data in complex business scenarios such as the power market, and assist users in making quick decisions and in-depth analysis. The present invention achieves better results in terms of user experience improvement, data visualization effect, and interface consistency. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0023] Figure 1 An overall flow chart of a method for implementing a human-machine web framework supporting multiple topics in a power market provided by the first embodiment of the present invention.

[0024] Figure 2 The third embodiment of the present invention provides an overall flow chart of a human-machine web framework implementation system for a power market supporting multiple topics. DETAILED DESCRIPTION

[0025] In order to make the above-mentioned purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the drawings of the specification. Obviously, the described embodiments are part of the embodiments of the present invention, but not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary persons in the art without creative work should fall within the scope of protection of the present invention.

[0026] Example 1, reference Figure 1 , which is an embodiment of the present invention, provides a method for implementing a human-machine web framework for a power market supporting multiple topics, including:

[0027] S1: When switching between multiple themes, design page styles corresponding to different themes.

[0028] Furthermore, the page style includes the top and bottom adaptation of the grid system principles, based on blocks, and presents the effect in the form of cards, involving multi-theme adaptation of background color, font size and color, visual graphics and pictures. The page style includes different theme styles such as light blue, light green, and dark blue, and the visual graphics include line charts, bar charts, pie charts, and 3D maps.

[0029] It should be noted that the page style also includes background color, font, border, button, input box component elements. The multi-theme implementation adopts CSS preprocessing language, and dynamic switching of multiple themes is performed by defining dynamic variables and functions. The component library sources include custom components and open source component libraries. The class name of the style is named using class, and all theme-related colors depend on CSS variables and functions.

[0030] It should also be noted that the page style also includes designing pictures or icons with different theme styles. Different pictures or icons are dynamically loaded when the theme is switched. The pictures or icons are loaded and presented through the background or img tags.

[0031] It should also be noted that by switching between multiple themes and designing different page styles, a high degree of personalization and customizability of the user interface is achieved, providing users with flexible selection space. Users can choose appropriate themes based on their personal aesthetics and usage scenarios (such as lighting conditions in the working environment). Personalized design not only enhances the user experience, but also effectively reduces the user's visual fatigue, allowing users to maintain good concentration and pleasure when using the system for a long time. By choosing light or dark themes, users can adapt according to situational needs, which improves the clarity of information communication. When displaying in a data set, appropriate themes can highlight important data points, allowing users to identify key information at a glance, thereby making decisions more quickly and accurately, and improving user participation and satisfaction.

[0032] S2: Define the subject information table to maintain and display different subject information.

[0033] Furthermore, the definition of the theme information table includes the maintenance of theme information and display on the interface, and the user views and selects the favorite theme for storage.

[0034] Design a theme selection page where users can preview images of different theme styles and dynamically switch themes according to their preferences. The selected results are saved in the user information table and the cache of the vue framework. If the user does not select a theme, a default theme is given.

[0035] It should be noted that defining the subject information table also includes maintaining user information and binding the subject information selected by the user to dynamically switch the subject of different users.

[0036] Use HTML5's data-* attributes and the theme name defined in the CSS preprocessing language to bind. When the user switches the theme, change the value of data-* so that the page dynamically loads the corresponding CSS attributes or images to switch the theme.

[0037] It should also be noted that by centrally storing theme data, the system is more efficient and consistent in handling theme switching. When users select or preview different themes, the system can immediately reflect changes in options and display the theme options available to users through a clear interface, further improving users' decision-making efficiency, laying the foundation for personalized services, and making users' experience more in line with their needs. By adopting HTML5's data-* attributes and CSS preprocessing language, the system can easily modify theme styles and implement dynamic loading to ensure a highly responsive interface, which not only optimizes the user experience, but also provides good support for developers' subsequent functional expansion and maintenance, thereby improving the sustainability and adaptability of the system.

[0038] S3: JSON format files that define different topics and are used to configure and modify visualization graph property values.

[0039] Furthermore, configuring and modifying the visual graphics attribute values ​​includes defining json format files of different themes, configuring and modifying the attribute values ​​of the visual graphics colors, and dynamically switching the themes of the visual graphics.

[0040] After the user's cached theme information is switched by using Vue's monitoring mechanism, the visualization graphics plug-in loads the corresponding theme json file, generates a new instance and redraws the visualization graphics.

[0041] It should be noted that by defining JSON format files of different themes, a highly flexible configuration of visual graphics properties is achieved. By using the JSON format, theme-related properties including color, font, and chart style can be adjusted without modifying the core code, thereby improving the maintainability and scalability of the system. When the user switches the theme, the corresponding theme JSON file is automatically loaded through the monitoring mechanism of the Vue framework, and the visual graphics are redrawn, ensuring the smoothness and consistency of the user experience. Real-time updates not only reduce the operational complexity caused by theme changes, but also provide developers with a convenient way to respond to changes in market demand. In the visualization of power market data, users can quickly obtain new graphic displays to ensure the accuracy and timeliness of information when making decisions, enhance the adaptability of visual graphics, better serve actual application needs, and promote the informatization process of the power market.

[0042] Example 2 is an embodiment of the present invention, which provides a method for implementing a human-machine web framework for a power market that supports multiple topics. In order to verify the beneficial effects of the present invention, scientific demonstration is carried out through economic benefit calculation and simulation experiments.

[0043] First, select the development environment and development tools, use vue-cli to create a vue project, create a scss folder in the src / assets file directory; create a theme.scss file in the scss folder, and define different theme variable names and functions for getting css properties in the file, create a common.scss file in the scss folder, and introduce the theme.scss file; the common.scss file defines the attribute values ​​of colors corresponding to different themes; create a components.scss file in the scss folder, and introduce the common.scss file to define the CSS properties of custom components (it can also be an open source component library), so that the color is bound to the attribute value defined in the common.scss file to achieve component theme switching. Introduce theme.scss and components.scss into the main.js of the vue framework, and use these variables as global variables; Introduce the common.scss file into the style tag of the .vue single page, and bind the color attribute defined in the style tag to the color attribute value corresponding to different themes defined in the common.scss file, which is used for the internal theme switching of the .vue single page; Create a viewTheme folder under the scss folder, and put in json files of different themes of the visual graphics plug-in, such as: blue.json, white.json, etc.; Create an image folder under the src / assets file directory to store pictures or icons corresponding to multiple themes; Create a user information table and a theme information table in the database, and maintain the corresponding data, and deploy and start the server service at the same time, to ensure that the client and the server communicate normally and can obtain the data in the corresponding user information table and theme information table; when the user switches the theme, change the value of data-* in the HTML tag to the theme name defined in the theme.scss file, so that the color attributes maintained in the page will dynamically load the value of the corresponding theme, thereby realizing dynamic real-time switching of multiple themes, without the need to introduce additional class files or refresh the page; at the same time, store the value of the corresponding theme in the vue cache, so as to facilitate the use of vue's monitoring mechanism to dynamically change the theme of other plug-ins or components; use vue's monitoring mechanism to monitor the theme value stored in the vue cache, and when the theme changes, the visual graphics plug-in loads the json file of the corresponding theme, creates a new instance and redraws the visual graphics, so as to realize the dynamic switching of the theme of the visual graphics plug-in. In summary, the present invention optimizes the user's visual experience, and at the same time has clear creativity and novelty in improving information processing efficiency, bringing improvements to the human-computer interaction system of the power market.

[0044] Example 3, reference Figure 2, which is an embodiment of the present invention, provides a human-machine web framework implementation system for a power market supporting multiple topics, including a topic design module, a topic management module, and a visualization configuration module.

[0045] The theme design module is used to design page styles corresponding to different themes when switching between multiple themes; the theme management module is used to define theme information tables for maintaining and displaying various theme information; the visualization configuration module is used to define JSON format files for different themes for configuring and modifying visualization graphic attribute values.

[0046] If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods of each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0047] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute instructions), or in conjunction with such instruction execution systems, devices or apparatuses. For the purposes of this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in conjunction with such instruction execution systems, devices or apparatuses.

[0048] More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or more wires (electronic device), a portable computer disk case (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be a paper or other suitable medium on which the program is printed, since the program may be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, deciphering, or processing in another suitable manner as necessary, and then stored in a computer memory.

[0049] It should be understood that the various parts of the present invention can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, multiple steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc. It should be noted that the above embodiments are only used to illustrate the technical solution of the present invention and are not limited. Although the present invention is described in detail with reference to the preferred embodiments, it should be understood by those skilled in the art that the technical solution of the present invention can be modified or replaced by equivalents without departing from the spirit and scope of the technical solution of the present invention, which should be included in the scope of the claims of the present invention.

[0050] It should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention rather than to limit it. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present invention, which should all be included in the scope of the claims of the present invention.

Claims

1. A method for implementing a human-machine web framework for a power market supporting multiple topics, characterized in that: include: When switching between multiple themes, design page styles corresponding to different themes; Define the subject information table to maintain and display different subject information; JSON format files that define different themes are used to configure and modify visualization graph property values.

2. The method for implementing a human-machine web framework for a power market supporting multiple topics as claimed in claim 1, characterized in that: The page style includes the upper and lower adaptation of the grid system principle, based on blocks, and presents the effect in the form of cards, involving multi-theme adaptation of background color, font size and color, visual graphics and pictures. The page style includes different theme styles of light blue, light green, and dark blue. The visual graphics include line charts, bar charts, pie charts, and 3D maps.

3. The method for implementing a human-machine web framework for a power market supporting multiple topics as claimed in claim 2 is characterized by: The page style also includes background color, font, border, button, input box component elements. The multi-theme implementation adopts CSS preprocessing language, and dynamic switching of multiple themes is performed by defining dynamic variables and functions. The component library sources include custom components and open source component libraries. The class name of the style is named using class, and all theme-related colors depend on CSS variables and functions.

4. The method for implementing a human-machine web framework for a power market supporting multiple topics as claimed in claim 3 is characterized by: The page style also includes designing pictures or icons of different theme styles, dynamically loading different pictures or icons when the theme is switched, and the pictures or icons are loaded and presented through the background or img tag.

5. The method for implementing a human-machine web framework for a power market supporting multiple topics as claimed in claim 4 is characterized by: The defined subject information table includes a table for maintaining subject information and displaying it on the interface, so that users can view and select their favorite subjects for storage; Design a theme selection page where users can preview images of different theme styles and dynamically switch themes according to their preferences. The selected results are saved in the user information table and the cache of the vue framework. If the user does not select a theme, a default theme is given.

6. The method for implementing a human-machine web framework for a power market supporting multiple topics as claimed in claim 5, characterized in that: The definition of the subject information table also includes maintaining user information and binding user selected subject information, and dynamically switching the subject of different users; Use HTML5's data-* attributes and the theme name defined in the CSS preprocessing language to bind. When the user switches the theme, change the value of data-* so that the page dynamically loads the corresponding CSS attributes or images to switch the theme.

7. The method for implementing a human-machine web framework for a power market supporting multiple topics as claimed in claim 6, characterized in that: The configuration and modification of the visual graphic attribute value includes defining json format files of different themes, configuring and modifying the attribute value of the visual graphic color, and dynamically switching the theme of the visual graphic; After the user's cached theme information is switched by using Vue's monitoring mechanism, the visualization graphics plug-in loads the corresponding theme json file, generates a new instance and redraws the visualization graphics.

8. A system using the method for implementing a human-machine web framework supporting multiple topics in a power market as claimed in any one of claims 1 to 7, characterized in that: Including theme design module, theme management module, and visual configuration module; The theme design module is used to design page styles corresponding to different themes when switching between multiple themes; The subject management module is used to define a subject information table for maintaining and displaying various subject information; The visualization configuration module is used to define JSON format files of different themes, which are used to configure and modify visualization graphic attribute values.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method for implementing a human-machine web framework for a power market supporting multiple topics according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for implementing a human-machine web framework for a power market supporting multiple topics according to any one of claims 1 to 7 are implemented.

Images