Visual dynamic configuration method, system, device and medium of configuration tool

Abstract

The present application provides a method, system, device and medium for visual dynamic configuration of a configuration tool, wherein a configuration editing module responds to a request for configuring a configuration tool to display a configuration drawing interface and a component library interface; the configuration editing module responds to a chart component being configured on the configuration drawing interface to determine the drawing layout and target chart component of the configuration tool; when the configuration editing module responds to events of configuring a data source and data editing, it determines a target data source, and data-binds the target data source with a target chart component, and saves the target chart component as a configuration drawing based on the drawing layout, and publishes the configuration drawing to a configuration operation module; when the configuration operation module receives the configuration drawing, it obtains a target data set from the target data source, and visually renders the chart component based on the configuration drawing and the target data set, so that different data can be configured for the chart component according to different requirements, thereby improving the configurability of chart data display.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, system, device and medium for visualizing dynamic configuration of a configuration tool. Background Art

[0002] With the development of mobile Internet, most power supply companies are using digital distribution master stations for intelligent configuration. However, in the existing technology, most of the interfaces in the current distribution master stations are directly customized according to the requirements of users or power supply companies. Once the generated interface is put into use, the user cannot change it at will, and thus it is impossible for users or power supply companies to dynamically configure the master station interface according to different needs. Summary of the invention

[0003] The main purpose of the embodiments of the present application is to propose a visual dynamic configuration method, system, device and medium for a configuration tool, which can dynamically configure visual data according to different needs by freely selecting components in the component library interface and dynamically binding components in the configuration drawing interface, and can provide real-time feedback on changes in power distribution data.

[0004] To achieve the above-mentioned purpose, a first aspect of an embodiment of the present application proposes a visual dynamic configuration method of a configuration tool, which is applied to a configuration interface dynamic configuration system of a power distribution master station, characterized in that the configuration tool dynamic configuration system includes a configuration editing module and a configuration running module, the configuration editing module is communicatively connected with the configuration running module, and the visual dynamic configuration method includes: The configuration editing module generates and displays a configuration drawing interface and a component library interface in response to a request from a dynamic configuration configuration tool, wherein the component library interface is configured with a plurality of chart components, the chart components are used to bind the target data set that the user wants to display, and the configuration drawing interface is used to configure the overall layout of the chart components; The configuration editing module determines the drawing layout of the configuration tool and the target chart component in the configuration drawing interface in response to the chart component being configured in the configuration drawing interface; The configuration editing module determines the target data source of the target chart component in response to the event of the target chart component triggering the configuration data source; The configuration editing module responds to the event of data editing triggered by the target chart component, performs data binding between the target data source and the target chart component, saves the data-bound target chart component as a configuration drawing based on the drawing layout, and publishes the configuration drawing to the configuration operation module; After receiving the configuration drawing, the configuration operation module obtains the target data set from the target data source according to the configuration drawing, and visually renders the chart component based on the configuration drawing and the target data set.

[0005] Further, in some embodiments, the configuration editing module determines the target data source of the target chart component in response to the event of the target chart component triggering the configuration data source, including: In response to an event that a target chart component configures a data source, a data source configuration interface is generated and displayed, wherein the data source configuration interface is configured with at least one data source to be bound and at least one editing component, wherein the editing components are associated one by one with the data sources to be bound, the editing components are used to edit the data sources to be bound, and the data source configuration interface is used to determine a data source to be bound as a target data source; In response to an event in which the target editing component triggers editing of the data source to be bound, a data source editing interface is generated and displayed, the data source to be bound associated with the target editing component is edited in the data source editing interface, and the data source to be bound associated with the target editing component is bound to the target chart component, so that the data source to be bound associated with the target editing component is determined as the target data source.

[0006] Further, in some embodiments, the configuration editing module performs data binding between the target data source and the target chart component in response to the event of triggering data editing by the target chart component, including: The configuration editing module generates and displays a component editing interface in response to an event of data editing triggered by a target chart component, and obtains a configuration data set of the configuration tool from a target data source; According to the type of the target chart component, obtain the target configuration structure of the target chart component from the target data source; In the component editing interface, data binding is performed between the target chart component and the configuration data set according to the target configuration structure.

[0007] Further, in some embodiments, the target configuration structure includes a first configuration structure and a second configuration structure, the first configuration structure is used to configure the visualization data of the target chart component, the second configuration structure is used to configure the visualization properties of the target chart component, the configuration data set includes multiple data set indexes and multiple property parameters, and according to the target configuration structure, the target chart component is data bound to the configuration data set, including: Selecting at least one target data set index from the plurality of data set indexes, and assembling all the target data set indexes into a first configuration structure of the target chart component; At least one target attribute parameter is selected from the plurality of attribute parameters, and all the target attribute parameters are assembled into a second configuration structure of the target chart component.

[0008] Further, in some embodiments, converting the data-bound target chart component into a configuration drawing based on the drawing layout includes: Encapsulate the data-bound target chart component into a target drawing node; wherein the target drawing node is equipped with a first attribute space and a second attribute space, the first attribute space is used to store the type corresponding to the target chart component, and the second attribute space is used to store the target configuration structure corresponding to the target chart component; Assemble the target drawing nodes into a rendering node tree according to the hierarchical relationship of the drawing layout; Through Canvas drawing technology, the rendering node tree is converted into a target drawing.

[0009] Further, in some embodiments, obtaining a target data set from a target data source according to the configuration drawing includes: Deconstruct the data of the target drawing node to obtain the target configuration structure stored in the second attribute space; Get the target dataset from the target data source according to the target dataset index in the target configuration structure.

[0010] Further, in some embodiments, the chart component can be dragged in both the configuration drawing interface and the component library interface, the boundary of the component library interface is connected to the configuration drawing interface, and before responding to the event that at least one chart component is configured in the configuration drawing interface, the visualization dynamic configuration method further includes: The configuration editing module responds to the chart component being dragged to the boundary of the component library interface in the component library interface, transparently transmits the component structure data of the chart component to the configuration drawing interface through the event bus, and cancels the selection of the chart component in the component library interface; In response to receiving the component structure data on the configuration drawing interface, the configuration editing module binds the chart component on the configuration drawing interface based on the component structure data, and configures the chart component to a preset fixed position on the configuration drawing interface in the form of dragging.

[0011] A second aspect of the embodiment of the present application provides a configuration interface dynamic configuration system, which is applied to a power distribution master station, including: Configuration editing module and configuration running module, the configuration editing module and the configuration running module communicate and connect: The configuration editing module is configured to generate and display a configuration drawing interface and a component library interface in response to a request from a dynamic configuration configuration tool. The component library interface is configured with a plurality of chart components. The chart components are used to bind a target data set that a user wants to display. The configuration drawing interface is used to configure the overall layout of the chart components. The configuration editing module is further configured to, in response to the chart component being configured in the configuration drawing interface, determine the drawing layout of the configuration tool and the target chart component in the configuration drawing interface; The configuration editing module is further configured to, in response to an event of the target chart component triggering configuration of a data source, determine a target data source of the configuration tool; The configuration editing module is further configured to, in response to an event of triggering data editing of the target chart component, perform data binding between the target data source and the target chart component, save the data-bound target chart component as a configuration drawing based on the drawing layout, and publish the configuration drawing to the configuration operation module; The configuration operation module is configured to, after receiving the configuration drawing, obtain the target data set from the target data source according to the configuration drawing, and visually render the chart component based on the configuration drawing and the target data set.

[0012] To achieve the above-mentioned purpose, the third aspect of the embodiments of the present application proposes an electronic device, the electronic device includes a memory and a processor, the memory stores a computer program, and when the processor executes the computer program, the visual dynamic configuration method of the above-mentioned first aspect embodiment is implemented.

[0013] To achieve the above-mentioned purpose, the fourth aspect of the embodiment of the present application proposes a storage medium, which is a computer-readable storage medium. The storage medium stores a computer program, and when the computer program is executed by the processor, the visual dynamic configuration method of the embodiment of the first aspect above is implemented.

[0014] The embodiments of the present application have the following beneficial effects: the present application generates and displays a configuration drawing interface and a component library interface in response to a request for a dynamic configuration configuration tool through a configuration editing module; the configuration editing module determines the drawing layout and target chart component of the configuration tool in the configuration drawing interface in response to the chart component being configured in the configuration drawing interface, wherein the component library interface is configured with a plurality of chart components, the chart component is used to bind the target data set that the user wants to display, and the configuration drawing interface is used to configure the overall layout of the chart component, thereby improving the selectivity of data display by freely selecting the chart component in the component library interface, and then when the configuration editing module triggers an event to configure the data source in response to the target chart component, the configuration is determined. The target data source of the tool; the configuration editing module responds to the event of the target chart component triggering data editing, binds the target data source to the target chart component, saves the data-bound target chart component as a configuration drawing based on the drawing layout, and publishes the configuration drawing to the configuration operation module, so that different data sources can be configured for the chart component according to different requirements in the configuration drawing interface, thereby improving the configurability of the chart data display, and when the configuration operation module receives the configuration drawing, it obtains the target data set from the target data source according to the configuration drawing, and visually renders the chart component based on the configuration drawing and the target data set, thereby being able to render each chart component asynchronously, thereby improving the smoothness of the visual interface rendering. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1is a flowchart of a visual dynamic configuration method of a configuration tool provided in some embodiments of the present application; Figure 2 is a schematic diagram of a visual dynamic configuration method of a configuration tool provided in some embodiments of the present application; Figure 3 It is a visual schematic diagram of a pie-shaped chart component provided by some embodiments of the present application; Figure 4 is a flow chart of determining a target data source of a configuration tool provided by some embodiments of the present application; Figure 5 is a schematic diagram of a data source configuration interface provided in some embodiments of the present application; Figure 6 is a schematic diagram of a data source editing interface provided in some embodiments of the present application; Figure 7 It is a flow chart of data binding a target data source with a target chart component provided by some embodiments of the present application; Figure 8 Some embodiments of the present application provide Figure 7 Flowchart of step S703; Fig. 9 It is a schematic diagram of the configuration of a common pie chart provided in some embodiments of the present application; Fig.10 is a flowchart of converting a target chart component into a configuration drawing provided by some embodiments of the present application; Fig.11 It is a flowchart of obtaining a target data set from a target data source according to a configuration drawing provided by some embodiments of the present application; Fig.12 It is a flow chart provided by some embodiments of the present application in response to an event that a chart component is configured on a configuration drawing interface; Fig.13 A schematic diagram of the structure of a configuration interface dynamic configuration system provided in some embodiments of the present application; Fig.14 It is a schematic diagram of the hardware structure of an electronic device provided in some embodiments of the present application. DETAILED DESCRIPTION

[0016] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0017] In the description of the present application, it should be understood that descriptions involving orientation, such as up, down, front, back, left, right, etc., indicating orientations or positional relationships, are based on the orientations or positional relationships shown in the accompanying drawings, and are only for the convenience of describing the present application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore should not be understood as a limitation on the present application.

[0018] It should also be noted that in the description of this application, "several" means more than one, "more" means more than two, "greater than", "less than", "exceed", etc. are understood to exclude the number itself, and "above", "below", "within", etc. are understood to include the number itself. If there is a description of "first" or "second", it is only used to distinguish the technical features, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features or implicitly indicating the order of the indicated technical features.

[0019] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0020] In the description of the present application, the description with reference to the terms "one embodiment", "some embodiments", "illustrative embodiments", "examples", "specific examples", or "some examples" means that the specific features, structures, materials, or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials, or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.

[0021] With the development of mobile Internet, most power supply companies are using digital distribution master stations for intelligent configuration. However, in the existing technology, most of the interfaces in the current distribution master stations are directly customized according to the requirements of users or power supply companies. Once the generated interface is put into use, users cannot change it at will, and users or power supply companies cannot dynamically configure distribution data according to different needs, and changes in distribution data cannot be fed back in real time.

[0022] Based on this, the embodiments of the present application provide a method, system, device and medium for visual dynamic configuration of a configuration tool. On the one hand, the configuration editing module generates and displays a configuration drawing interface and a component library interface in response to a request for dynamic configuration of the configuration tool; the configuration editing module determines the drawing layout and target chart component of the configuration tool in the configuration drawing interface in response to the chart component being configured in the configuration drawing interface, wherein the component library interface is configured with multiple chart components, and the chart component is used to bind the target data set that the user wants to display, and the configuration drawing interface is used to configure the overall layout of the chart component, thereby being able to freely select the chart component in the component library interface, thereby improving the optionality of data display, and then when the configuration editing module triggers the configuration in response to the target chart component The event of the data source determines the target data source of the configuration tool; the configuration editing module responds to the event of the target chart component triggering data editing, binds the target data source to the target chart component, and saves the data-bound target chart component as a configuration drawing based on the drawing layout, and publishes the configuration drawing to the configuration operation module, so that different data sources can be configured for the chart component according to different requirements in the configuration drawing interface, thereby improving the configurability of the chart data display, and when the configuration operation module receives the configuration drawing, it obtains the target data set from the target data source according to the configuration drawing, and visually renders the chart component based on the configuration drawing and the target data set, thereby being able to render each chart component asynchronously, thereby improving the smoothness of the rendering of the visual interface.

[0023] The embodiments of the present application provide a method, system, device and medium for visual dynamic configuration of a configuration tool, which are specifically described through the following embodiments.

[0024] In the first aspect, a visual dynamic configuration method of a configuration tool in an embodiment of the present application is first described.

[0025] Reference Figure 1 and Figure 2 As shown, Figure 1 is a flowchart of a visual dynamic configuration method of a configuration tool provided in some embodiments of the present application, Figure 2 It is a schematic diagram of a visual dynamic configuration method of a configuration tool provided in some embodiments of the present application. The visual dynamic configuration method may include but is not limited to steps S101 to S105.

[0026] Step S101: the configuration editing module generates and displays a configuration drawing interface and a component library interface in response to a request from a dynamic configuration tool.

[0027] Among them, the component library interface is configured with multiple chart components, the chart components are used to bind the target data set that the user wants to display, and the configuration drawing interface is used to configure the overall layout of the chart components.

[0028] In one possible implementation, the configuration editing module first receives a request from a user or a system's dynamic configuration tool, which may include key information such as the component type, component quantity, and configuration rules that the user needs to edit. The configuration editing module then initializes the editing environment based on the request, where this stage involves loading component data and defining component properties (such as name, size, color, function, etc.). After initialization, the configuration editing module will automatically generate a configuration drawing interface. At the same time, the configuration editing module will also configure a generated graphical representation interface (i.e., component library interface) to display the appearance and layout of the component in actual applications.

[0029] Step S102: In response to the chart component being configured on the configuration drawing interface, the configuration editing module determines the drawing layout of the configuration tool and the target chart component in the configuration drawing interface.

[0030] In a possible implementation, when at least one chart component is configured in the configuration drawing interface, the configuration editing module will first receive and process the request, and the configuration editing module will determine and initialize the basic properties of each chart component in the configuration drawing interface according to the type of each chart component selected by the user, and then when multiple chart components are added to the configuration drawing interface, the configuration editing module will determine the drawing layout of the configuration tool according to the responsive layout scheme or the custom layout scheme, and after the drawing layout is determined, the configuration editing module will determine the target chart component among the multiple chart components. Among them, the target chart component is the component that the user is currently editing or operating.

[0031] It should be noted that the process of determining the drawing layout may involve: 1. Aligning the components to ensure that the charts are neatly arranged and maintain a good visual presentation; 2. Reasonably setting the gaps between chart components to avoid overlapping or too dense charts; 3. For complex layouts, the module will divide the interface into multiple partitions according to the page size, and each partition is used to accommodate a specific type of chart component; 4. If the size of the configuration drawing interface changes, the module will responsively adjust the chart layout to adapt to the new window size.

[0032] It should also be noted that in the configuration drawing interface, the target chart component can be edited as follows: 1. Select a new data source in the target chart component; 2. Modify the visualization style (for example: change the color, font, background, label and other details), which is not specifically limited in this application; 3. Modify the interaction settings (for example: the interactive behavior triggered when clicking the chart, or the data linkage between the chart and other components).

[0033] Step S103: the configuration editing module determines the target data source of the target chart component in response to the event of the target chart component triggering the configuration of the data source.

[0034] Specifically, when the configuration editing module responds to the event of the target chart component triggering the configuration of the data source, this event is usually triggered by the user's operation in the interface, such as clicking on the target chart component, and then generating and displaying the data source configuration interface. The user can select the data source in the data source configuration interface. After the user selects the data source, the configuration editing module will determine the target data source selected by the user.

[0035] Step S104: In response to the event of data editing triggered by the target chart component, the configuration editing module data-binds the target data source with the target chart component, saves the data-bound target chart component as a configuration drawing based on the drawing layout, and publishes the configuration drawing to the configuration operation module.

[0036] Specifically, the configuration editing module is triggered in response to the event of the target chart component triggering data editing, the target data source is data-bound with the target chart component, and then the data-bound target chart component is saved as a configuration drawing based on the drawing layout, and the configuration drawing is published to the configuration operation module.

[0037] It should be noted that the process of data binding the target data source and the target chart component can include the following operations: 1. Mapping the fields in the data source with the properties of the chart component. For example, mapping the "Date" field in the data source to the X-axis of the line chart, and mapping the "Power Distribution" field to the Y-axis of the line chart; 2. Matching the data format in the data source (such as time, value, etc.) with the visualization requirements of the chart component; 3. After the binding is completed, the bound data can be immediately displayed in the chart component, allowing users to preview the chart effect in real time.

[0038] At the same time, when the target data source is real-time data or dynamically updated data, the configuration editing module can also set a data refresh mechanism to ensure that the chart component can continue to obtain the latest data from the data source. Users can configure the data refresh frequency in the configuration drawing interface to control the update rhythm of the chart component. At the same time, the configuration editing module will also ensure the synchronization of the data source and the chart component to avoid data delays or display errors.

[0039] Optionally, the configuration editing module can also support user-defined data sources. Users can create their own data sources through SQL queries, API configuration, etc. The module will add the custom data source to the data source list and perform subsequent verification and binding, thereby making the visualization data of the target chart component more flexible and able to adapt to the user's specific data display needs.

[0040] Step S105: After receiving the configuration drawing, the configuration running module obtains the target data set from the target data source according to the configuration drawing, and visually renders the chart component based on the configuration drawing and the target data set.

[0041] Specifically, the configuration running module receives the configuration drawings generated and saved by the configuration editing module, wherein the configuration drawings contain chart layout, component properties, data source binding information, etc. The configuration running module parses the configuration drawings, reads the drawing layout of the chart components, the specific configuration and style information of each component, and identifies the target data source to be rendered in the drawings. Then, the configuration running module obtains the corresponding target data set from the target data source according to the data source binding information in the drawings. Finally, the configuration running module performs visual rendering on each chart component on the configuration drawing through the drawing information of the configuration drawing and the obtained target data set. Figure 3 As shown, Figure 3 is a visualization diagram of a pie-shaped chart component provided by some embodiments of the present application, from Figure 3 It can be seen that the chart component is used to visualize the data of the total accident protection signal.

[0042] Among them, if the target data source is a real-time data source, the configuration operation module will establish a connection with the target data source to continuously obtain the latest data, and if the target data set is real-time data or regularly updated data, the configuration operation module will continuously detect the data source and dynamically update the data in the chart component. The configuration operation module will refresh the data at a preset time interval to ensure that the content displayed in the chart is always up to date.

[0043] At the same time, the configuration operation module can also optimize the rendering performance of large-scale data sets by loading data in batches, delaying rendering, virtualization technology, etc., to ensure the interface response speed when rendering multiple chart components.

[0044] Reference Figure 4 As shown, Figure 4 It is a flowchart of determining a target data source of a configuration tool provided by some embodiments of the present application. The method of determining the target data source of a configuration tool may include but is not limited to steps S401 to S402.

[0045] Step S401: In response to an event of configuring a data source triggered by a target chart component, a data source configuration interface is generated and displayed.

[0046] Among them, refer to Figure 5 As shown, Figure 5 It is a schematic diagram of a data source configuration interface provided in some embodiments of the present application. The data source configuration interface is configured with at least one data source to be bound and at least one editing component. The editing components are associated one-to-one with the data sources to be bound. The editing components are used to edit the data sources to be bound. The data source configuration interface is used to determine a data source to be bound as a target data source.

[0047] In one possible implementation, the configuration event of the target chart component is triggered, which may be due to the user clicking on the "target chart component" or the target chart component detecting an event automatically initiated when there is no bound data source. Then, the configuration editing module captures the event, reads the context information carried by the event, and then generates and displays the corresponding data source configuration interface.

[0048] Step S402: In response to an event of the target editing component triggering editing of the data source to be bound, a data source editing interface is generated and displayed, the data source to be bound associated with the target editing component is edited in the data source editing interface, and the data source to be bound associated with the target editing component is bound to the target chart component, so that the data source to be bound associated with the target editing component is determined as the target data source.

[0049] In one possible implementation, the configuration editing module generates and displays a data source editing interface in response to an event triggered by a target editing component to edit a data source to be bound, edits the data source to be bound associated with the target editing component in the data source editing interface, and binds the data source to be bound associated with the target editing component to a target chart component, so that the data source to be bound associated with the target editing component is determined as the target data source.

[0050] Among them, the editable databases in the data source editing interface include SQL Server, MySQL, DAMO database, etc.

[0051] In addition, the configuration editing module will dynamically load different configuration items according to the data source type selected by the user. Figure 6 As shown, Figure 6 It is a schematic diagram of a data source editing interface provided in some embodiments of the present application. The data source editing interface will generate corresponding configuration items, including database address, database type, driver class, user name, password, database name, etc.

[0052] Reference Figure 7 As shown, Figure 7 It is a flowchart of data binding a target data source with a target chart component provided by some embodiments of the present application. The method of data binding a target data source with a target chart component may also include but is not limited to steps S701 to S703.

[0053] Step S701: the configuration editing module generates and displays a component editing interface in response to an event of data editing triggered by a target chart component, and obtains a configuration data set of a configuration tool from a target data source.

[0054] In one possible implementation, the configuration editing module generates and displays a component editing interface in response to an event in which a target chart component triggers data editing, and obtains a configuration data set for the configuration tool from a target data source, wherein the configuration data set includes multiple data set indexes and multiple attribute parameters, for example: data set index-"power distribution index", data set index-"date index", data set index-"power supply index", data set index-"power supply efficiency index", attribute parameter-"chart color is red", attribute parameter-"chart color is blue", attribute parameter-"refresh frequency is 1 time / minute", attribute parameter-"refresh frequency is 10 times / minute", etc.

[0055] Step S702: According to the type of the target chart component, a target configuration structure of the target chart component is obtained from the target data source.

[0056] The target configuration structure includes a first configuration structure and a second configuration structure. The first configuration structure is used to configure the visualization data of the target chart component, and the second configuration structure is used to configure the visualization properties of the target chart component. In one possible implementation, when the type of the target chart component is a common line chart, a target configuration structure of the target chart component is obtained from a target data source according to the type of the target chart component, wherein a first configuration structure of the target configuration structure includes an X-axis data configuration structure and a Y-axis data configuration structure, and a second configuration structure of the target configuration structure includes a refresh frequency configuration structure and a chart color configuration structure.

[0057] Step S703: In the component editing interface, data binding is performed between the target chart component and the configuration data set according to the target configuration structure.

[0058] In one possible implementation, in the component editing interface, when the type of the target chart component is a normal line chart, the "date index" is assembled into the X-axis data configuration structure of the target chart component, the "date index" is assembled into the Y-axis data configuration structure of the target chart component, the "chart color is red" is assembled into the chart color configuration structure of the target chart component, and the "refresh frequency is 10 times / minute" is assembled into the refresh frequency configuration structure of the target chart component, thereby completing the data binding processing of the target chart component and the configuration data set.

[0059] Further, in some embodiments, referring to Figure 8 As shown, Figure 8 Some embodiments of the present application provide Figure 7 Flowchart of step S703, the visual dynamic configuration method may also include but is not limited to steps S801 to S802.

[0060] Step S801: selecting at least one target dataset index from a plurality of dataset indexes, and assembling all target dataset indexes into a first configuration structure of a target chart component.

[0061] In one possible implementation, refer to Fig. 9 As shown, Fig. 9 It is a configuration diagram of a common pie chart provided in some embodiments of the present application. When the type of the target chart component is a common pie chart, only one target data set index "power supply index" needs to be selected from multiple data set indexes, and the "power supply index" needs to be assembled into the first configuration structure of the target chart component.

[0062] In one possible implementation, when the type of the target chart component is a normal line chart, a target data set index "power distribution index" and a target data set index "date index" are selected from multiple data set indexes, and the "power distribution index" and the "date index" are assembled into the first configuration structure of the target chart component.

[0063] Step S802: selecting at least one target attribute parameter from a plurality of attribute parameters, and assembling all target attribute parameters into a second configuration structure of the target chart component.

[0064] In one possible implementation, when the type of the target chart component is a normal pie chart, the target attribute parameter "refresh frequency is 10 times / minute" and the target attribute parameter "instance name is AccessFrom" are selected from multiple attribute parameters, and the target attribute parameter "refresh frequency is 10 times / minute" and the target attribute parameter "instance name is AccessFrom" are assembled into the second configuration structure of the target chart component.

[0065] Reference Fig.10 As shown, Fig.10 It is a flowchart of converting a target chart component into a configuration drawing provided by some embodiments of the present application. The method of converting a target chart component into a configuration drawing may include but is not limited to steps S1001 to S1003.

[0066] Step S1001: encapsulate the data-bound target chart component into a target drawing node.

[0067] The target drawing node is equipped with a first attribute space type and a second attribute space databindproperty. The first attribute space type is used to store the type corresponding to the target chart component, and the second attribute space databindproperty is used to store the target configuration structure corresponding to the target chart component.

[0068] In one possible implementation, according to the requirements of the configuration drawing, the interface of the target drawing node is defined, and the interface should include the node rendering method, data update method, interaction event processing method, etc. Then, a chart node class is created to implement the methods defined in the interface, encapsulate the instance of the target chart component in the class and manage its life cycle (such as creation, update, destruction, etc.).

[0069] Step S1002: assembling the target drawing nodes into a rendering node tree according to the hierarchical relationship of the drawing layout.

[0070] In one possible implementation, a data structure of a node tree is designed, which is usually an array or a tree structure containing node objects. Then, a root node of a drawing is created, which is usually an empty container for containing all other nodes. Finally, according to the hierarchical relationship of the drawing layout, the encapsulated chart nodes are added as child nodes to the corresponding parent nodes.

[0071] Step S1003: Convert the rendering node tree into a target drawing using Canvas drawing technology.

[0072] In a possible implementation, a Canvas element is created, and then the rendering node tree is traversed, and then the shape and image of each target drawing node are drawn on the Canvas to obtain the target drawing.

[0073] Reference Fig.11 As shown, Fig.11 It is a flowchart of obtaining a target data set from a target data source according to a configuration drawing provided by some embodiments of the present application. The method for obtaining the target data set may include but is not limited to steps S1101 to S1102.

[0074] Step S1101: deconstruct the data of the target drawing node to obtain a target configuration structure stored in the second attribute space.

[0075] In a possible implementation, data is deconstructed on the target drawing node to obtain a target configuration structure stored in the second attribute space.

[0076] Step S1102: Acquire the target data set from the target data source according to the target data set index in the target configuration structure.

[0077] In a possible implementation, a corresponding target data set index is deconstructed from the target configuration structure, and the target data set is acquired from the target data source according to the target data set index.

[0078] Reference Fig.12 As shown, Fig.12It is a flowchart provided by some embodiments of the present application in response to an event in which a chart component is configured on a configuration drawing interface. The visualization dynamic configuration method may include but is not limited to steps S1201 to S802.

[0079] Step S1201: In response to the chart component being dragged to the boundary of the component library interface, the configuration editing module transmits the component structure data of the chart component to the configuration drawing interface through the event bus and cancels the selection of the chart component in the component library interface.

[0080] In one possible implementation, a user selects a chart component in a component library interface and starts to drag the chart component. The configuration editing module then detects the dragging operation and determines whether the chart component has been dragged to the boundary of the component library interface. Subsequently, once the configuration editing module detects that the chart component has been dragged to the boundary, a custom event is triggered. The custom event includes component structure data of the chart component. The event is sent to the configuration drawing interface via the event bus. The configuration drawing interface detects the event and receives the component structure data of the chart component. At the same time, the configuration editing module clears the selected state of the chart component in the component library interface.

[0081] Step S1202: In response to receiving component structure data on the configuration drawing interface, the configuration editing module binds the chart component on the configuration drawing interface based on the component structure data, and configures the chart component to a preset fixed position on the configuration drawing interface by dragging.

[0082] In one possible implementation, the configuration editing module responds to receiving component structure data in the configuration drawing interface, and instantiates and binds a new chart component in the configuration drawing interface based on the component structure data, wherein the instantiation process may include creating a DOM element of the component, initializing the state and properties of the component, and binding event listeners, etc. After the component is instantiated, the chart component is configured to a preset fixed position of the configuration drawing interface by dragging.

[0083] In a second aspect, the present application also provides a configuration interface dynamic configuration system, referring to Fig.13 , Fig.13 This is a schematic diagram of the structure of a configuration interface dynamic configuration system provided in some embodiments of the present application. The visual dynamic configuration system 1300 includes: Configuration editing module 1301 and configuration running module 1302, the configuration editing module 1301 and the configuration running module 1302 are connected in communication: The configuration editing module 1301 is configured to generate and display a configuration drawing interface and a component library interface in response to a request from a dynamic configuration configuration tool. The component library interface is configured with a plurality of chart components. The chart components are used to bind the target data set that the user wants to display. The configuration drawing interface is used to configure the overall layout of the chart components. The configuration editing module 1301 is further configured to, in response to the chart component being configured in the configuration drawing interface, determine the drawing layout of the configuration tool and the target chart component in the configuration drawing interface; The configuration editing module 1301 is further configured to determine the target data source of the configuration tool in response to the event of the target chart component triggering the configuration data source; The configuration editing module 1301 is further configured to, in response to an event of triggering data editing of the target chart component, perform data binding between the target data source and the target chart component, save the data-bound target chart component as a configuration drawing based on the drawing layout, and publish the configuration drawing to the configuration running module 1302; The configuration running module 1302 is configured to, after receiving the configuration drawing, obtain a target data set from a target data source according to the configuration drawing, and visually render a chart component based on the configuration drawing and the target data set.

[0084] The above-mentioned visualization dynamic configuration system 1300 and the above-mentioned visualization dynamic configuration method are based on the same inventive concept. The above-mentioned process describes the visualization dynamic configuration system 1300 of the embodiment of the present application. The configuration editing module responds to the request of the dynamic configuration configuration tool to generate and display the configuration drawing interface and the component library interface; the configuration editing module responds to the chart component being configured in the configuration drawing interface, and determines the drawing layout and target chart component of the configuration tool in the configuration drawing interface, wherein the component library interface is configured with multiple chart components, and the chart component is used to bind the target data set that the user wants to display, and the configuration drawing interface is used to configure the overall layout of the chart component, thereby being able to freely select the chart component in the component library interface, thereby improving the optionality of data display, and then when the configuration editing module responds The target chart component triggers an event of configuring the data source, and determines the target data source of the configuration tool; the configuration editing module responds to the event of the target chart component triggering data editing, binds the target data source to the target chart component, and saves the data-bound target chart component as a configuration drawing based on the drawing layout, and publishes the configuration drawing to the configuration operation module, so that different data sources can be configured for the chart component according to different requirements in the configuration drawing interface, thereby improving the configurability of the chart data display, and when the configuration operation module receives the configuration drawing, it obtains the target data set from the target data source according to the configuration drawing, and visually renders the chart component based on the configuration drawing and the target data set, so that each chart component can be rendered asynchronously, thereby improving the smoothness of the visual interface rendering.

[0085] The embodiment of the present application also provides an electronic device, the electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the above-mentioned visual dynamic configuration method when executing the computer program. The electronic device can be any smart terminal including a mobile phone, a tablet computer, a car computer, etc.

[0086] See also Fig.14 , Fig.14 : is a schematic diagram of the hardware structure of an electronic device provided in some embodiments of the present application, and the electronic device includes: The processor 1401 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the visual dynamic configuration method provided in the embodiment of the present application; The memory 1402 can be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 1402 can store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 1402, and the processor 1401 calls and executes the visual dynamic configuration method provided in the embodiment of this application; Input / output interface 1403, used to implement information input and output; The communication interface 1404 is used to realize the communication interaction between the device and other devices. The communication can be realized through a wired manner (such as USB, network cable, etc.) or a wireless manner (such as mobile network, WIFI, Bluetooth, etc.); A bus 1405 that transmits information between various components of the device (e.g., the processor 1401, the memory 1402, the input / output interface 1403, and the communication interface 1404); The processor 1401 , the memory 1402 , the input / output interface 1403 and the communication interface 1404 are connected to each other in communication within the device via a bus 1405 .

[0087] The embodiment of the present application also provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the visualization dynamic configuration method provided by the embodiment of the present application is implemented.

[0088] The memory, as a non-transient computer-readable storage medium, can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory may optionally include a memory remotely disposed relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0089] The embodiments described in the embodiments of the present application are intended to more clearly illustrate the technical solutions of the embodiments of the present application and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0090] Those skilled in the art will appreciate that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and may include more or fewer steps than shown in the figures, or a combination of certain steps, or different steps.

[0091] The device embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separated, that is, they may be located in one place or distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0092] Those skilled in the art will appreciate that all or some of the steps in the methods disclosed above, and the functional modules / units in the systems and devices may be implemented as software, firmware, hardware, or a suitable combination thereof.

[0093] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0094] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

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

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

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

[0098] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-accessible storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including multiple instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, referred to as ROM), random access memory (Random Access Memory, referred to as RAM), disk or optical disk and other media that can store programs.

[0099] The preferred embodiments of the present invention are described above with reference to the accompanying drawings, but the scope of the rights of the present invention is not limited thereto. Any modification, equivalent substitution and improvement made by a person skilled in the art without departing from the scope and essence of the present invention should be within the scope of the rights of the present invention.

Claims

1. A visual dynamic configuration method of a configuration tool, applied to a dynamic configuration system of a configuration interface of a power distribution master station, characterized in that: The configuration tool dynamic configuration system includes a configuration editing module and a configuration running module, the configuration editing module is communicatively connected with the configuration running module, and the visual dynamic configuration method includes: The configuration editing module generates and displays a configuration drawing interface and a component library interface in response to a request of the dynamic configuration configuration tool, wherein the component library interface is configured with a plurality of chart components, the chart components are used to bind the target data set that the user wants to display, and the configuration drawing interface is used to configure the overall layout of the chart components; The configuration editing module determines the drawing layout and target chart component of the configuration tool in the configuration drawing interface in response to the chart component being configured in the configuration drawing interface; The configuration editing module determines the target data source of the target chart component in response to the event of the target chart component triggering the configuration data source; The configuration editing module performs data binding between the target data source and the target chart component in response to an event that the target chart component triggers data editing, saves the data-bound target chart component as a configuration drawing based on the drawing layout, and publishes the configuration drawing to the configuration running module; After receiving the configuration drawing, the configuration running module obtains the target data set from the target data source according to the configuration drawing, and visually renders the chart component based on the configuration drawing and the target data set.

2. The visualization dynamic configuration method according to claim 1, characterized in that: The configuration editing module determines the target data source of the target chart component in response to the event of the target chart component triggering the configuration data source, including: In response to the target chart component triggering an event of configuring a data source, a data source configuration interface is generated and displayed, wherein the data source configuration interface is configured with at least one data source to be bound and at least one editing component, wherein the editing components are associated one by one with the data sources to be bound, the editing components are used to edit the data sources to be bound, and the data source configuration interface is used to determine one of the data sources to be bound as the target data source; In response to an event in which the target editing component triggers editing of the data source to be bound, a data source editing interface is generated and displayed, the data source to be bound associated with the target editing component is edited in the data source editing interface, and the data source to be bound associated with the target editing component is bound to the target chart component, so that the data source to be bound associated with the target editing component is determined as the target data source.

3. The visualization dynamic configuration method according to claim 1, characterized in that: The configuration editing module performs data binding between the target data source and the target chart component in response to an event that the target chart component triggers data editing, including: The configuration editing module generates and displays a component editing interface in response to an event that the target chart component triggers data editing, and obtains a configuration data set of the configuration tool from the target data source; According to the type of the target chart component, obtaining a target configuration structure of the target chart component from the target data source; In the component editing interface, data binding is performed between the target chart component and the configuration data set according to the target configuration structure.

4. The method for dynamic visualization configuration according to claim 3, characterized in that: The target configuration structure includes a first configuration structure and a second configuration structure, wherein the first configuration structure is used to configure the visualization data of the target chart component, and the second configuration structure is used to configure the visualization properties of the target chart component. The configuration data set includes a plurality of data set indexes and a plurality of property parameters. The target chart component is data-bound to the configuration data set according to the target configuration structure, including: Selecting at least one target data set index from the plurality of data set indexes, and assembling all the target data set indexes into the first configuration structure of the target chart component; At least one target attribute parameter is selected from the plurality of attribute parameters, and all the target attribute parameters are assembled into the second configuration structure of the target chart component.

5. The method for dynamic visualization configuration according to claim 4, characterized in that: The step of converting the data-bound target chart component into a configuration drawing based on the drawing layout includes: Encapsulating the target chart component after data binding into a target drawing node; wherein the target drawing node is equipped with a first attribute space and a second attribute space, the first attribute space is used to store the type corresponding to the target chart component, and the second attribute space is used to store the target configuration structure corresponding to the target chart component; Assembling the target drawing nodes into a rendering node tree according to the hierarchical relationship of the drawing layout; The rendering node tree is converted into the target drawing through Canvas drawing technology.

6. The method for dynamic visualization configuration according to claim 5, characterized in that: The acquiring the target data set from the target data source according to the configuration drawing includes: Deconstructing the target drawing node to obtain the target configuration structure stored in the second attribute space; The target data set is obtained from the target data source according to the target data set index in the target configuration structure.

7. The visualization dynamic configuration method according to claim 1, characterized in that: The chart component can be dragged on both the configuration drawing interface and the component library interface, the boundary of the component library interface is connected to the configuration drawing interface, and before the event that the chart component is configured on the configuration drawing interface is responded to, the visual dynamic configuration method further includes: In response to the chart component being dragged to the boundary of the component library interface in the component library interface, the configuration editing module transparently transmits the component structure data of the chart component to the configuration drawing interface through the event bus, and cancels the selection of the chart component in the component library interface; In response to receiving the component structure data on the configuration drawing interface, the configuration editing module binds the chart component on the configuration drawing interface based on the component structure data, and configures the chart component to a preset fixed position on the configuration drawing interface by dragging.

8. A configuration interface dynamic configuration system, applied to a power distribution master station, characterized in that: include: Configuration editing module and configuration running module, the configuration editing module is communicatively connected with the configuration running module: The configuration editing module is configured to generate and display a configuration drawing interface and a component library interface in response to a request from a dynamic configuration configuration tool, wherein the component library interface is configured with a plurality of chart components, the chart components are used to bind a target data set that a user wants to display, and the configuration drawing interface is used to configure the overall layout of the chart components; The configuration editing module is further configured to, in response to the chart component being configured in the configuration drawing interface, determine the drawing layout and the target chart component of the configuration tool in the configuration drawing interface; The configuration editing module is further configured to, in response to the event of the target chart component triggering the configuration data source, determine the target data source of the target chart component; The configuration editing module is further configured to, in response to an event of data editing being triggered by the target chart component, perform data binding between the target data source and the target chart component, save the data-bound target chart component as a configuration drawing based on the drawing layout, and publish the configuration drawing to the configuration running module; The configuration running module is configured to, after receiving the configuration drawing, obtain the target data set from the target data source according to the configuration drawing, and visually render the chart component based on the configuration drawing and the target data set.

9. An electronic device, characterized in that: The electronic device comprises a memory and a processor, the memory stores a computer program, and the processor implements the visualization dynamic configuration method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the visualization dynamic configuration method according to any one of claims 1 to 7 is implemented.

Images