Power centralized control system visual page building method and system based on dynamic configuration

Abstract

The invention provides an electric power centralized control system visual page building method and system based on dynamic configuration, business requirements are abstracted into a scene-screen-card three-layer structure, a scene is composed of a plurality of screens, the screens are dynamically assembled by reusable cards through front-end dragging layout, and according to the aspect ratio of a display device, the screens are arranged in the scene-screen-card three-layer structure. Realizing wide-screen multi-picture self-adaptive screen splitting through a wide-screen adaptation algorithm; a visual editing interface is provided, a user is allowed to modify a scene, a screen and a card, fine-grained permission control is carried out on the scene, a log, operation and an objectification function based on a role permission configuration file, and personalized page publishing of different post personnel is achieved. Compared with the prior art, the method has the advantages that page customization can be completed within a minute level without repackaging or deploying a program, the development and maintenance cost is remarkably reduced, and the man-machine interaction efficiency and the expansion capability of the electric power centralized control system are improved.

Description

Technical Field

[0001] This invention belongs to the field of visualization interface for power centralized control systems, and particularly relates to a method and system for building a visualization page for power centralized control systems based on dynamic configuration. Background Technology

[0002] Power centralized control systems use automation, information technology, and intelligent technologies to centrally monitor, manage, and dispatch power production, transmission, and distribution. These systems require a unified platform to achieve efficient, safe, and stable operation of the power system, reduce the cost of manual intervention, and improve response speed and management level.

[0003] However, the development of existing centralized control system IV zone (security zone) web pages mainly relies on customized function development. The web pages implemented by centralized control systems in different cities for the same business scenario are not the same. Different business roles (centralized control station manager, monitor, maintenance personnel, equipment specialists, etc.) also have different needs. Each business scenario requires the development of a separate system or page. This development model has high development costs, high maintenance complexity, and limited scalability. Summary of the Invention

[0004] Purpose of the invention: This invention provides a method and system for building a visual page for a power centralized control system based on dynamic configuration, aiming to solve the problems of high development costs, slow response to requirements, inefficient widescreen adaptation, limited access control, and difficulty in personalized configuration for multiple users caused by the high degree of customization of the web terminal of the IV zone of the traditional power centralized control system.

[0005] Technical solution: This invention provides a method for building a visual page for a power centralized control system based on dynamic configuration, including:

[0006] The business requirements of the power centralized control system are abstracted into a three-layer structure of scenarios, screens, and cards. A scenario consists of multiple screens, and a screen is dynamically spliced ​​together by multiple reusable cards through drag-and-drop layout.

[0007] Based on the aspect ratio of the display device, the number of screens to be displayed on the same screen and their priority order are dynamically calculated through a widescreen display device adaptation algorithm, so that the display device can adaptively split the screen for multiple screens.

[0008] The visual editing interface allows users to edit scene data, screen data, and card data, and store the edited scene data, screen data, and card data in the database according to the user role. When the user role logs in, the predefined or user-defined scene data, screen data, and card data are dynamically loaded to the display device.

[0009] Based on the permission configuration files corresponding to user roles, permissions for different user roles to access or operate scenarios, screens, cards, and functional modules are managed.

[0010] Furthermore, the drag-and-drop layout includes:

[0011] In screen editing mode, a grid-layout canvas is automatically added to the page. The grid properties of the canvas are dynamically generated by the screen configuration. Mouse response events are bound to the cards. By listening to the mouse dragging of the cards, the coordinates and size of the cards in the grid are updated in real time, and the layout information of the cards is stored in the database along with the screen data.

[0012] Furthermore, the widescreen display device adaptation algorithm includes:

[0013] Calculate the aspect ratio of the display device based on the set number of screen cut rows, the width and height of the display device; calculate the number of screens that can be displayed simultaneously based on the aspect ratio of the display device and the set single-screen aspect ratio.

[0014] If the number of screens in the current scene is less than the number of screens that can be displayed on the same screen, the number of screens that can be displayed on the same screen is equal to the number of screens in the current scene; if there is remaining space on the display device, it is evenly distributed to each screen to fill the display area; after defining the range of screens to be displayed in ascending order according to the priority field, the screens are displayed in ascending order according to the order field.

[0015] Furthermore, the editing of scene data, screen data, and card data and their storage in the database includes:

[0016] Users can enter the scene, screen, and card editing mode through the visual editing interface. They can create, modify, delete, and sort scenes, drag and drop screens to adjust card positions and sizes, add custom cards, and bind the edited scenes, screens, and cards to user roles, saving them to the database in JSON format.

[0017] Furthermore, the role-based access control includes: scene access control, log type access control, operation access control, and object-oriented function access control.

[0018] Scene access control generates user-accessible scenes by intersecting the list of allowed scenes associated with user roles with the system scene list, and supports default scene redirection;

[0019] Log type access control takes the intersection of system log types and user role configurations to restrict the scope of logs that users can see;

[0020] Operation permission control defines different user roles' permissions for query, modify, and delete operations in the scene, screen, card, and log modules.

[0021] Object-based access control uses a tooltip floating button group to control access permissions for different user roles to specific data objects.

[0022] This invention also provides a visualization page building system for a power centralized control system based on dynamic configuration, comprising:

[0023] The business abstraction module is used to abstract the business requirements of the power centralized control system into a three-layer structure of scenarios, screens, and cards. A scenario consists of multiple screens, and a screen is dynamically spliced ​​together by multiple reusable cards through drag-and-drop layout.

[0024] The device adaptation module is used to dynamically calculate the number of screens to be displayed on the same screen and their priority order based on the aspect ratio of the display device and the widescreen display device adaptation algorithm, so that the display device can adaptively split the screen for multiple screens.

[0025] The editing module allows users to edit scene data, screen data, and card data through a visual editing interface. It stores the edited scene data, screen data, and card data in the database according to the user role. When the user role logs in, it dynamically loads predefined or user-defined scene data, screen data, and card data to the display device.

[0026] The permission configuration module is used to manage the permissions of different user roles for accessing or operating scenarios, screens, cards, and functional modules based on the permission configuration files corresponding to user roles.

[0027] Furthermore, in the business abstraction module, the drag-and-drop layout includes:

[0028] In screen editing mode, a grid-layout canvas is automatically added to the page. The grid properties of the canvas are dynamically generated by the screen configuration. Mouse response events are bound to the cards. By listening to the mouse dragging of the cards, the coordinates and size of the cards in the grid are updated in real time, and the layout information of the cards is stored in the database along with the screen data.

[0029] Furthermore, in the device adaptation module, the widescreen display device adaptation algorithm includes:

[0030] Calculate the aspect ratio of the display device based on the set number of screen cut rows, the width and height of the display device; calculate the number of screens that can be displayed simultaneously based on the aspect ratio of the display device and the set single-screen aspect ratio.

[0031] If the number of screens in the current scene is less than the number of screens that can be displayed on the same screen, the number of screens that can be displayed on the same screen is equal to the number of screens in the current scene; if there is remaining space on the display device, it is evenly distributed to each screen to fill the display area; after defining the range of screens to be displayed in ascending order according to the priority field, the screens are displayed in ascending order according to the order field.

[0032] Furthermore, in the editing module, the editing scene data, screen data, and card data are stored in the database, including:

[0033] Users can enter the scene, screen, and card editing mode through the visual editing interface. They can create, modify, delete, and sort scenes, drag and drop screens to adjust card positions and sizes, add custom cards, and bind the edited scenes, screens, and cards to user roles, saving them to the database in JSON format.

[0034] Furthermore, in the permission configuration module, the role-based permission control includes: scene permission control, log type permission control, operation permission control, and object-oriented function permission control.

[0035] Scene access control generates user-accessible scenes by intersecting the list of allowed scenes associated with user roles with the system scene list, and supports default scene redirection;

[0036] Log type access control takes the intersection of system log types and user role configurations to restrict the scope of logs that users can see;

[0037] Operation permission control defines different user roles' permissions for query, modify, and delete operations in the scene, screen, card, and log modules.

[0038] Object-based access control uses a tooltip floating button group to control access permissions for different user roles to specific data objects.

[0039] Beneficial effects: Compared with existing technologies, the dynamic configuration-based visualization page publishing method and system for power centralized control systems provided by this invention can cover all professional fields of power equipment management. According to the job responsibilities and business needs of different roles, such as station managers, monitoring personnel, operation and maintenance personnel, dedicated equipment managers, and system managers, it can flexibly customize information aggregation desktops and workbenches that are closely related to them. Through personalized display of work interface themes, users can focus more on their own business and application scenarios, realize the classification browsing and differentiated processing of data information, thereby significantly improving work efficiency and interactive experience. Attached Figure Description

[0040] Figure 1This invention presents a conceptual logic diagram of a method for building a visual page for a power centralized control system based on dynamic configuration, including scenarios, screens, cards, and an application center.

[0041] Figure 2 This invention provides a method for building a visual page for a power centralized control system based on dynamic configuration, as well as a flowchart of the system's customized homepage publishing process.

[0042] Figure 3 This is a schematic diagram illustrating a method for building a visual page for a power centralized control system based on dynamic configuration, as well as the system's scene editing and new entry point creation.

[0043] Figure 4 This is a schematic diagram illustrating a method for building a visual page for a power centralized control system based on dynamic configuration, as well as the scene editing and page creation of the system, according to the present invention.

[0044] Figure 5 This is a schematic diagram illustrating the screen editing and page creation of a dynamic configuration-based power control system visualization page building method and system according to the present invention.

[0045] Figure 6 This is a schematic diagram illustrating a method for building a visual page for a power centralized control system based on dynamic configuration, as well as the editing and adding of entry pages for cards in the system, according to the present invention. Detailed Implementation

[0046] The present invention will be further illustrated below with reference to the accompanying drawings and specific embodiments. It should be understood that the following specific embodiments are for illustrative purposes only and are not intended to limit the scope of the invention. After reading the present invention, any modifications of the present invention in various equivalent forms by those skilled in the art will fall within the scope defined by the appended claims.

[0047] Example 1

[0048] Please see Figures 1 to 6 As shown, this invention provides a method for building a visualization page for a power centralized control system based on dynamic configuration, including:

[0049] The business requirements of the power centralized control system are abstracted into a three-layer structure, including scenarios, screens, and cards. A scenario consists of multiple screens, and a screen is dynamically spliced ​​together by multiple reusable cards through drag-and-drop layout.

[0050] Based on the aspect ratio of the display device, the number of screens to be displayed on the same screen and their priority order are dynamically calculated through a widescreen display device adaptation algorithm, so that the display device can adaptively split the screen for multiple screens.

[0051] The visual editing interface allows users to edit scene data, screen data, and card data, and store the edited scene data, screen data, and card data in the database according to the user role. When the user role logs in, the system dynamically loads predefined JSON files or user-defined scene data, screen data, and card data to the display device.

[0052] Based on the permission configuration files corresponding to user roles, permissions for different user roles to access or operate scenarios, screens, cards, and functional modules are managed.

[0053] The scenarios are modular subdivisions of user business needs, and different scenarios can be switched between each other; in this embodiment, the data structure design of the scenarios is as follows:

[0054]

[0055] The screens refer to different pages within the same business module. Screens within the same scenario can be switched between each other, while screens in different scenarios require switching scenarios before switching to the corresponding screen. In this embodiment, the screen data structure is designed as follows:

[0056]

[0057]

[0058] The card is the smallest unit that makes up a page, and it can be an externally predefined card, a built-in card, or a custom card defined in the application center; in this embodiment, the data structure of the card is designed as follows:

[0059]

[0060]

[0061] The drag-and-drop layout includes:

[0062] In screen editing mode, a grid-layout canvas is automatically added to the page. The grid properties of the canvas are dynamically generated by the screen configuration. Mouse events provided by jQuery's drag.js are bound to the cards. By listening for mouse dragging of cards, when moving or resizing cards, the card's coordinates are snapped to the nearest grid line based on the grid coordinates of the card when the mouseover event occurs. Clicking the save button and entering the name of the screen to be saved will persistently save the card layout information of the current screen along with the screen data in JSON format to the database.

[0063] The widescreen display device adaptation algorithm includes:

[0064] Calculate the aspect ratio of the display device based on the set number of screen cut lines, the width and height of the display device, using the following formula:

[0065] ratio=window.innerWidth / (window.innerHeight / row)

[0066] Here, window.innerWidth and window.innerHeight represent the width and height of the display device, respectively, and row represents the number of screen cut rows set, which defaults to 1;

[0067] Based on the aspect ratio of the display device and the set single-screen aspect ratio, the number of screens that can be displayed simultaneously is calculated using the following formula:

[0068] screens=Math.floor(ratio / sceneRatio)

[0069] Where sceneRatio is the aspect ratio of a single screen;

[0070] If the number of screens in the current scene is less than the number of screens that can be displayed on the same screen, the number of screens that can be displayed on the same screen is equal to the number of screens in the current scene; if there is remaining space on the display device, it is evenly distributed to each screen to fill the display area.

[0071] After the screen range to be displayed is defined in ascending order by the priority field, the screens are displayed sequentially in ascending order by the order field; the screen priority and display order can be set.

[0072] In this embodiment, window.innerWidth = 3440, window.innerHeight = 1440, row = 1, and the data structure of the scene to be displayed is as follows:

[0073]

[0074]

[0075] The calculated ratio is approximately 2.39. If sceneRatio = 1, then screens = 2, meaning a total of 2 screens are displayed, prioritizing page1 and page2. Since page1 has a smaller order, it appears first, followed by page2. If sceneRatio = 0.75, then screens = 3, meaning a total of 3 screens are displayed, showing page1, page2, and page3 in ascending order. If there is remaining space on the display device, the screen spacing or border width is dynamically adjusted to ensure there are no black borders or stretching distortion.

[0076] The edited scene data, screen data, and card data are stored in the database, including:

[0077] Users can enter the scene editing page by clicking the edit button on the scene card or the add scene button. The editing page allows users to add, delete, or modify the screens contained in the current scene. It supports selecting all preset screens and custom-added screens to form the current scene, supports screen sorting, and supports setting the main scene, i.e., entering the default scene. After setting, clicking save will persistently save the data.

[0078] Users click "Add Screen" to enter the screen editing page. The screen editing page uses a CSS grid layout, allowing modification of the number of rows and columns, and the grid spacing. Users can select cards from the application center to insert into the current screen, delete cards, drag and drop cards to reposition them, and resize them. After editing, users enter a screen name and click the "Save" button. The data is then persistently saved for future use in scene editing.

[0079] Currently, the cards come from three sources: built-in cards, external configuration cards (externalCard.json), and user-defined cards. Users click to add a custom card, fill in the card name and URL, and click the save button. The data is then persistently saved for use in scene editing.

[0080] The table structure in the database is as follows:

[0081] field name Data types illustrate ID Varchar(60) Keyword combination CONTENT TEXT Customized content

[0082] The ID data structure is: current username.first-level keyword.second-level keyword, reducing database join operations and improving query efficiency. If scene data is stored, the data structure is username.scene name; if screen data is stored, the data structure is username.scene name.screen name; if card data is stored, the data structure is username.card name. The CONTENT field is stored in JSON format, with scenes, screens, and cards stored according to their respective data structures.

[0083] The role-based access control system consists of four parts: scenario access control, log type access control, operation access control, and object-oriented function access control. Scenario access control includes the handling of default scenarios. The visual platform comes pre-loaded with multiple permission configuration files, which are read upon startup based on the current user's role. Adding new files is supported, and corresponding role configuration files are created accordingly.

[0084] Scene access control first intersects the default scene list with the role-configured scene list; the result is the set of scenes available to the current user. If a default scene is not within the intersection, it is not visible to the current user; in this case, a backup default scene specified in the configuration file takes its place. Furthermore, when user permissions are restricted, the screen switching logic for several scenes is redirected, allowing access only to permitted functional areas.

[0085] Log type permission control takes the intersection of all log types supported by the platform and the log types configured in the role. Types outside the intersection are not visible to users. Having viewing permission for a certain log type does not imply the right to add, delete, or modify logs of that type. These three types of permissions are still subject to operation permission control.

[0086] The access control system defines three types of permissions: query, modify (create), and delete. These permissions apply to the entire platform, including the aforementioned log type permissions. To modify user access permissions, simply edit the role's permission group.

[0087] Object-oriented function control defines the set of executable functions for a specific indicator ID as object-oriented functions, which are provided by a set of tooltip floating buttons. The intersection of the list of available object-oriented functions and the role configuration list is the set of buttons visible to the current user.

[0088] Other persistent storage features include screen font and default filter parameters. Users can drag a slider in the user information interface in the sidebar to adjust the font size in real time. The adjustment results are immediately written to the backend through the persistent interface without manual saving. The tabs at the bottom of the same interface are used to set default values ​​for commonly used filter conditions. After clicking to set, refreshing the page will take effect globally, also without manual saving.

[0089] A complete page publishing process includes the following steps, which are described below: Figures 3 to 6 Please explain:

[0090] Step 1: User through Figure 6 The card editing interface shown can be accessed by clicking the "Application Center" button on the left side of the page, which will bring up a drawer-style component displaying all predefined cards (including built-in cards and historical custom cards).

[0091] Step 2: To add a new business card, the user clicks the "New Card" button at the end of the application center, which will bring up the "Add Card" pop-up window. In the pop-up window, the user enters the business card's name, unique identifier (i.e., card ID, used for persistent data indexing), CSS class name, and the URL link for the card's deployment on the server. The user also specifies the card's display icon in the application center and on the screen using the icon selector. After clicking "OK," the card data is persistently saved to the database in JSON format and associated with the currently logged-in user.

[0092] Step 3: As Figure 5 As shown, after the user enters screen editing mode, a CSS Grid canvas is dynamically generated based on preset parameters. The user drags the required business cards from the application center to the specified grid position on the canvas, and adjusts the card size (width and height in grid units) in real time through mouse events. The coordinates and size data are captured simultaneously, and grid snapping alignment is performed. After the layout is completed, the user clicks the "Save" button in the upper right corner, which persistently saves the current screen's grid configuration and card layout information (including card ID, coordinates, and size) to the database in JSON format and associates it with the currently logged-in user.

[0093] Step 4: Repeat Step 3 to complete the configuration of all screens required for the business scenario. The grid parameters and card combinations for each screen can be defined independently to ensure the differentiated display needs of different business modules.

[0094] Step 5: As Figure 3 As shown, the initial page is blank. When the user clicks on the scene name area in the upper left corner, a scene list drawer pops up (initially empty). Clicking the "+" button at the bottom of the list navigates to... Figure 4 Scene editing page.

[0095] Step 6, in Figure 4 The interface displays thumbnails of all configured screens in the upper half. Users can drag and drop target screens into the screen slots below in the order of business logic (up to 4 screens at a time). After completing the screen combination, users can check the "Set as main scene" option to designate the current scene as the default display scene for this business requirement. After clicking "Save," the scene ID, screen ID list, and sorting information are persistently saved to the database in JSON format and associated with the currently logged-in user.

[0096] Step 7: When a user logs in again, the visual page building platform dynamically loads the associated scene, screen, and card data based on the current user role. It then uses a widescreen adaptation algorithm to achieve multi-screen adaptive split-screen rendering, ultimately completing the zero-code release of the personalized business page.

[0097] Example 2

[0098] Please see Figures 1 to 6 As shown in Embodiment 1, the present invention also provides a visualization page building system for a power centralized control system based on dynamic configuration, comprising:

[0099] The business abstraction module is used to abstract the business requirements of the power centralized control system into a three-layer structure, including scenarios, screens, and cards. A scenario consists of multiple screens, and a screen is dynamically spliced ​​together by multiple reusable cards through drag-and-drop layout.

[0100] The device adaptation module is used to dynamically calculate the number of screens to be displayed on the same screen and their priority order based on the aspect ratio of the display device and the widescreen display device adaptation algorithm, so that the display device can adaptively split the screen for multiple screens.

[0101] The editing module allows users to edit scene data, screen data, and card data through a visual editing interface. It stores the edited scene data, screen data, and card data in the database according to the user role. When the user role logs in, it dynamically loads predefined JSON files or user-defined scene data, screen data, and card data to the display device.

[0102] The permission configuration module is used to manage the permissions of different user roles for accessing or operating scenarios, screens, cards, and functional modules based on the permission configuration files corresponding to user roles.

[0103] In the business abstraction module, the scenario is a modular subdivision of user business requirements, and different scenarios can be switched between each other; in this embodiment, the data structure design of the scenario is as follows:

[0104]

[0105] The screens refer to different pages within the same business module. Screens within the same scenario can be switched between each other, while screens in different scenarios require switching scenarios before switching to the corresponding screen. In this embodiment, the screen data structure is designed as follows:

[0106]

[0107]

[0108] The card is the smallest unit that makes up a page, and it can be an externally predefined card, a built-in card, or a custom card defined in the application center; in this embodiment, the data structure of the card is designed as follows:

[0109]

[0110] The drag-and-drop layout includes:

[0111] In screen editing mode, a grid-layout canvas is automatically added to the page. The grid properties of the canvas are dynamically generated by the screen configuration. Mouse events provided by jQuery's drag.js are bound to the cards. By listening for mouse dragging of cards, when moving or resizing cards, the card's coordinates are snapped to the nearest grid line based on the grid coordinates of the card when the mouseover event occurs. Clicking the save button and entering the name of the screen to be saved will persistently save the card layout information of the current screen along with the screen data in JSON format to the database.

[0112] In the device adaptation module, the widescreen display device adaptation algorithm includes:

[0113] Calculate the aspect ratio of the display device based on the set number of screen cut lines, the width and height of the display device, using the following formula:

[0114] ratio=window.innerWidth / (window.innerHeight / row)

[0115] Here, window.innerWidth and window.innerHeight represent the width and height of the display device, respectively, and row represents the number of screen cut rows set, which defaults to 1;

[0116] Based on the aspect ratio of the display device and the set single-screen aspect ratio, the number of screens that can be displayed simultaneously is calculated using the following formula:

[0117] screens=Math.floor(ratio / sceneRatio)

[0118] Where sceneRatio is the aspect ratio of a single screen;

[0119] If the number of screens in the current scene is less than the number of screens that can be displayed on the same screen, the number of screens that can be displayed on the same screen is equal to the number of screens in the current scene; if there is remaining space on the display device, it is evenly distributed to each screen to fill the display area.

[0120] After the screen range to be displayed is defined in ascending order by the priority field, the screens are displayed sequentially in ascending order by the order field; the screen priority and display order can be set.

[0121] In this embodiment, window.innerWidth = 3440, window.innerHeight = 1440, row = 1, and the data structure of the scene to be displayed is as follows:

[0122]

[0123] The calculated ratio is approximately 2.39. If sceneRatio = 1, then screens = 2, meaning a total of 2 screens are displayed, prioritizing page1 and page2. Since page1 has a smaller order, it appears first, followed by page2. If sceneRatio = 0.75, then screens = 3, meaning a total of 3 screens are displayed, showing page1, page2, and page3 in ascending order. If there is remaining space on the display device, the screen spacing or border width is dynamically adjusted to ensure there are no black borders or stretching distortion.

[0124] In the editing module, the editing scene data, screen data, and card data are stored in the database, including:

[0125] Users can enter the scene editing page by clicking the edit button on the scene card or the add scene button. The editing page allows users to add, delete, or modify the screens contained in the current scene. It supports selecting all preset screens and custom-added screens to form the current scene, supports screen sorting, and supports setting the main scene, i.e., entering the default scene. After setting, clicking save will persistently save the data.

[0126] Users click "Add Screen" to enter the screen editing page. The screen editing page uses a CSS grid layout, allowing modification of the number of rows and columns, and the grid spacing. Users can select cards from the application center to insert into the current screen, delete cards, drag and drop cards to reposition them, and resize them. After editing, users enter a screen name and click the "Save" button. The data is then persistently saved for future use in scene editing.

[0127] Currently, the cards come from three sources: built-in cards, external configuration cards (externalCard.json), and user-defined cards. Users click to add a custom card, fill in the card name and URL, and click the save button. The data is then persistently saved for use in scene editing.

[0128] The table structure in the database is as follows:

[0129] field name Data types illustrate ID Varchar(60) Keyword combination CONTENT TEXT Customized content

[0130] The ID data structure is: current username.first-level keyword.second-level keyword, reducing database join operations and improving query efficiency. If scene data is stored, the data structure is username.scene name; if screen data is stored, the data structure is username.scene name.screen name; if card data is stored, the data structure is username.card name. The CONTENT field is stored in JSON format, with scenes, screens, and cards stored according to their respective data structures.

[0131] The permission configuration module comprises four parts: scene permission control, log type permission control, operation permission control, and object-oriented function permission control. Scene permission control includes the handling of default scenes. The visual building platform comes pre-loaded with multiple permission configuration files, which are read upon startup based on the current user's role. Adding new files and corresponding role configuration files is also supported.

[0132] Scene access control first intersects the default scene list with the role-configured scene list; the result is the set of scenes available to the current user. If a default scene is not within the intersection, it is not visible to the current user; in this case, a backup default scene specified in the configuration file takes its place. Furthermore, when user permissions are restricted, the screen switching logic for several scenes is redirected, allowing access only to permitted functional areas.

[0133] Log type permission control takes the intersection of all log types supported by the platform and the log types configured in the role. Types outside the intersection are not visible to users. Having viewing permission for a certain log type does not imply the right to add, delete, or modify logs of that type. These three types of permissions are still subject to operation permission control.

[0134] The access control system defines three types of permissions: query, modify (create), and delete. These permissions apply to the entire platform, including the aforementioned log type permissions. To modify user access permissions, simply edit the role's permission group.

[0135] Object-oriented function control defines the set of executable functions for a specific indicator ID as object-oriented functions, which are provided by a set of tooltip floating buttons. The intersection of the list of available object-oriented functions and the role configuration list is the set of buttons visible to the current user.

[0136] Other persistent storage features include screen font and default filter parameters. Users can drag a slider in the user information interface in the sidebar to adjust the font size in real time. The adjustment results are immediately written to the backend through the persistent interface without manual saving. The tabs at the bottom of the same interface are used to set default values ​​for commonly used filter conditions. After clicking to set, refreshing the page will take effect globally, also without manual saving.

[0137] A complete page publishing includes the following modules, which are described below. Figures 3 to 6 Please explain:

[0138] Initialization module, used by users to... Figure 6 The card editing interface shown can be accessed by clicking the "Application Center" button on the left side of the page, which will bring up a drawer-style component displaying all predefined cards (including built-in cards and historical custom cards).

[0139] To add a new business module, users can click the "Create Card" button at the end of the application center, which will bring up a "Create Card" pop-up window. In the pop-up window, users enter the business card's name, unique identifier (i.e., card ID, used for persistent data indexing), CSS class name, and the URL link for the card's deployment on the server. They can also specify the card's display icon in the application center and on the screen using the icon selector. After clicking "OK," the card data is persistently saved to the database in JSON format and associated with the currently logged-in user.

[0140] Screen editing modules, such as Figure 5 As shown, after the user enters screen editing mode, a CSSGrid canvas is dynamically generated based on preset parameters. The user drags the required business cards from the application center to the specified grid position on the canvas, and adjusts the card size (width and height in grid units) in real time through mouse events. The coordinates and size data are captured simultaneously, and grid snapping alignment is performed. After the layout is completed, the user clicks the "Save" button in the upper right corner, which persistently saves the current screen's grid configuration and card layout information (including card ID, coordinates, and size) to the database in JSON format and associates it with the currently logged-in user.

[0141] The repeat module is used to repeatedly execute step 3, sequentially completing all screen configurations required for the business scenario. The grid parameters and card combinations for each screen can be defined independently, ensuring differentiated display requirements for different business modules.

[0142] Jump modules, such as Figure 3 As shown, the initial page is blank. When the user clicks on the scene name area in the upper left corner, a scene list drawer pops up (initially empty). Clicking the "+" button at the bottom of the list navigates to... Figure 4 Scene editing page.

[0143] The scene editing module, in Figure 4The interface displays thumbnails of all configured screens in the upper half. Users can drag and drop target screens into the screen slots below in the order of business logic (up to 4 screens at a time). After completing the screen combination, users can check the "Set as main scene" option to designate the current scene as the default display scene for this business requirement. After clicking "Save," the scene ID, screen ID list, and sorting information are persistently saved to the database in JSON format and associated with the currently logged-in user.

[0144] The page publishing module allows the visual page building platform to dynamically load the associated scene, screen, and card data based on the current user's role when the user logs in again. It then uses a widescreen adaptation algorithm to achieve multi-screen adaptive split-screen rendering, ultimately completing the zero-code publishing of personalized business pages.

Claims

1. A method for building a visual page for a power centralized control system based on dynamic configuration, characterized in that, include: The business requirements of the power centralized control system are abstracted into a three-layer structure of scenarios, screens, and cards. A scenario consists of multiple screens, and a screen is dynamically spliced ​​together by multiple reusable cards through drag-and-drop layout. Based on the aspect ratio of the display device, the number of screens to be displayed on the same screen and their priority order are dynamically calculated through a widescreen display device adaptation algorithm, so that the display device can adaptively split the screen for multiple screens. The visual editing interface allows users to edit scene data, screen data, and card data, and store the edited scene data, screen data, and card data in the database according to the user role. When the user role logs in, the predefined or user-defined scene data, screen data, and card data are dynamically loaded to the display device. Based on the permission configuration files corresponding to user roles, permissions for different user roles to access or operate scenarios, screens, cards, and functional modules are managed.

2. The method for building a visual page for a power centralized control system based on dynamic configuration according to claim 1, characterized in that, The drag-and-drop layout includes: In screen editing mode, a grid-layout canvas is automatically added to the page. The grid properties of the canvas are dynamically generated by the screen configuration. Mouse response events are bound to the cards. By listening to the mouse dragging of the cards, the coordinates and size of the cards in the grid are updated in real time, and the layout information of the cards is stored in the database along with the screen data.

3. The method for building a visual page for a power centralized control system based on dynamic configuration according to claim 1, characterized in that, The widescreen display device adaptation algorithm includes: Calculate the aspect ratio of the display device based on the set number of screen cut rows, the width and height of the display device; calculate the number of screens that can be displayed simultaneously based on the aspect ratio of the display device and the set single-screen aspect ratio. If the number of screens in the current scene is less than the number of screens that can be displayed on the same screen, the number of screens that can be displayed on the same screen is equal to the number of screens in the current scene; if there is remaining space on the display device, it is evenly distributed to each screen to fill the display area; after defining the range of screens to be displayed in ascending order according to the priority field, the screens are displayed in ascending order according to the order field.

4. The method for building a visual page for a power centralized control system based on dynamic configuration according to claim 1, characterized in that, The edited scene data, screen data, and card data are stored in the database, including: Users can enter the scene, screen, and card editing mode through the visual editing interface. They can create, modify, delete, and sort scenes, drag and drop screens to adjust card positions and sizes, add custom cards, and bind the edited scenes, screens, and cards to user roles, saving them to the database in JSON format.

5. The method for building a visual page for a power centralized control system based on dynamic configuration according to claim 1, characterized in that, The role-based access control includes: scene access control, log type access control, operation access control, and object-oriented function access control. Scene access control generates user-accessible scenes by intersecting the list of allowed scenes associated with user roles with the system scene list, and supports default scene redirection; Log type access control takes the intersection of system log types and user role configurations to restrict the scope of logs that users can see; Operation permission control defines different user roles' permissions for query, modify, and delete operations in the scene, screen, card, and log modules. Object-based access control uses a tooltip floating button group to control access permissions for different user roles to specific data objects.

6. A visualization page building system for a power centralized control system based on dynamic configuration, characterized in that, include: The business abstraction module is used to abstract the business requirements of the power centralized control system into a three-layer structure of scenarios, screens, and cards. A scenario consists of multiple screens, and a screen is dynamically spliced ​​together by multiple reusable cards through drag-and-drop layout. The device adaptation module is used to dynamically calculate the number of screens to be displayed on the same screen and their priority order based on the aspect ratio of the display device and the widescreen display device adaptation algorithm, so that the display device can adaptively split the screen for multiple screens. The editing module allows users to edit scene data, screen data, and card data through a visual editing interface. It stores the edited scene data, screen data, and card data in the database according to the user role. When the user role logs in, it dynamically loads predefined or user-defined scene data, screen data, and card data to the display device. The permission configuration module is used to manage the permissions of different user roles for accessing or operating scenarios, screens, cards, and functional modules based on the permission configuration files corresponding to user roles.

7. The power centralized control system visualization page building system based on dynamic configuration according to claim 6, characterized in that, In the business abstraction module, the drag-and-drop layout includes: In screen editing mode, a grid-layout canvas is automatically added to the page. The grid properties of the canvas are dynamically generated by the screen configuration. Mouse response events are bound to the cards. By listening to the mouse dragging of the cards, the coordinates and size of the cards in the grid are updated in real time, and the layout information of the cards is stored in the database along with the screen data.

8. The power centralized control system visualization page building system based on dynamic configuration according to claim 6, characterized in that, In the device adaptation module, the widescreen display device adaptation algorithm includes: Calculate the aspect ratio of the display device based on the set number of screen cut rows, the width and height of the display device; calculate the number of screens that can be displayed simultaneously based on the aspect ratio of the display device and the set single-screen aspect ratio. If the number of screens in the current scene is less than the number of screens that can be displayed on the same screen, the number of screens that can be displayed on the same screen is equal to the number of screens in the current scene; if there is remaining space on the display device, it is evenly distributed to each screen to fill the display area; after defining the range of screens to be displayed in ascending order according to the priority field, the screens are displayed in ascending order according to the order field.

9. The power centralized control system visualization page building system based on dynamic configuration according to claim 6, characterized in that, In the editing module, the editing scene data, screen data, and card data are stored in the database, including: Users can enter the scene, screen, and card editing mode through the visual editing interface. They can create, modify, delete, and sort scenes, drag and drop screens to adjust card positions and sizes, add custom cards, and bind the edited scenes, screens, and cards to user roles, saving them to the database in JSON format.

10. The power centralized control system visualization page building system based on dynamic configuration according to claim 6, characterized in that, In the permission configuration module, the role-based permission control includes: scene permission control, log type permission control, operation permission control, and object-oriented function permission control. Scene access control generates user-accessible scenes by intersecting the list of allowed scenes associated with user roles with the system scene list, and supports default scene redirection; Log type access control takes the intersection of system log types and user role configurations to restrict the scope of logs that users can see; Operation permission control defines different user roles' permissions for query, modify, and delete operations in the scene, screen, card, and log modules. Object-based access control uses a tooltip floating button group to control access permissions for different user roles to specific data objects.

Images