Multi-source data large-screen interface generation method and large-screen visual configuration system

Abstract

The invention provides a multi-source data large-screen interface generation method and a large-screen visual configuration system, which allow a user to autonomously, flexibly and conveniently configure a large-screen interface and can quickly respond to demand changes. The method comprises the following steps: after a user selects a visual component from a component library through a visual operation interface, arranges the visual component and configures information of associated data, a data acquisition module establishes communication connection according to information of a data source associated with the visual component; the data acquisition module obtains target data from a data source, converts the data format of the target data into a standard format and processes the target data according to a data processing rule pre-configured by a user; the data source comprises a relational database, a non-relational database, an API (Application Program Interface) and message middleware; the data processing rule comprises screening, sorting and aggregation; and the rendering module renders the visual component according to the processed target data obtained in real time so as to generate a target interface to be displayed on a large screen.

Description

Technical Field

[0001] This application relates to the field of data processing technology, and in particular to a method for generating a large-screen interface for multi-source data and a large-screen visualization configuration system. Background Technology

[0002] In today's digital age, enterprise operations and decision-making increasingly rely on real-time monitoring and intuitive insights into massive amounts of multi-source data. Large-screen visualization technology, as an effective data presentation method, is widely used in command centers, data centers, and business monitoring platforms, aiming to transform complex data into easily understandable graphical information.

[0003] Current solutions for large-screen visualization typically rely on customized software development processes. Specifically, developers first need to write dedicated backend code to access data based on user-defined data sources (such as specific databases or application programming interfaces); then, based on user-provided interface design drafts or requirements specifications, they write the rendering and interaction code for the frontend pages; finally, they manually integrate and test the backend data interfaces with the frontend display components. This entire implementation process is highly dependent on professional coders. Users must communicate their ideas to developers frequently and meticulously, a process that is not only time-consuming and labor-intensive but also prone to discrepancies between the final result and the initial concept due to poor communication. Furthermore, when user requirements change, whether it's adjusting data dimensions or modifying the interface layout, the entire development-testing-deployment cycle must be restarted, resulting in low response efficiency.

[0004] Therefore, there is an urgent need for a solution that allows users to configure large-screen visual interfaces independently, flexibly, and conveniently, and can quickly respond to changes in needs. Summary of the Invention

[0005] This application provides a method for generating a large-screen interface for multi-source data and a large-screen visualization configuration system, which allows users to configure the large-screen visualization interface independently, flexibly, and conveniently, and can quickly respond to changes in requirements.

[0006] Firstly, a method for generating a large-screen interface from multi-source data is provided, applied to a large-screen visualization configuration system. The system includes a visualization configuration module, a data acquisition module, and a rendering module. The visualization configuration module is configured to provide a visual operation interface and a component library. The method includes: After the user selects a visualization component from the component library through the visual operation interface, arranges the visualization components, and configures the associated data information, the data acquisition module establishes a communication connection based on the data source information associated with the visualization component; the visualization components include: chart components, map components, text box components, and dashboard components; The data acquisition module obtains target data from data sources, converts the target data format into a standard format, and processes the target data according to user-configured data processing rules. Data sources include: relational databases, non-relational databases, API interfaces, and message brokers. Data processing rules include: filtering, sorting, and aggregation. The rendering module renders the visualization components based on the processed target data acquired in real time to generate the target interface to be displayed on the large screen.

[0007] In a feasible design, the data acquisition module also provides a configuration management interface, and before acquiring the target data from the data source, it includes: In response to the user's dynamic configuration operations on the data source information associated with the visualization component through the configuration management interface, the system performs corresponding processing based on the data source information dynamically configured by the user. Dynamic configuration operations include adding data sources, deleting data sources, or configuring data sources.

[0008] In a viable design, the visual components also include custom components, which are custom components created according to user needs and stored in a component library; The custom component is a topology component. The topology component adds animation effects to the lines in the relationship graph. The steps to create a custom component based on user needs include: Get the cursor image of the user input; Define custom edges by inheriting the base class of the edges from the component library; Add the cursor image as a graphic marker to the custom edge; The initial position of the cursor image is determined based on the starting coordinates of the custom edge; Define animation logic for the cursor image to drive it to move periodically along a path with a custom edge. The animation is a sequence of multiple consecutive frames generated based on the cursor image's pose changes. Each frame in the sequence is generated based on the attribute values ​​of the cursor image, including position and rotation angle. The animation logic includes setting an animation callback function, setting the animation to loop, and setting the animation duration. The animation callback function is used to calculate the attribute values ​​for each frame.

[0009] In a feasible design, the steps for generating each frame include: The position and rotation angle of the cursor image are determined by the animation callback function based on the path geometry information of the custom edge and the current animation progress. Construct a transformation matrix based on the position and rotation angle of the cursor image; The cursor image is transformed according to the transformation matrix to obtain the current frame.

[0010] In one feasible design, the data source is a message middleware, and the data acquisition module is configured to subscribe to the topic corresponding to the target data and register a sequential message listener. Retrieve target data from the data source, including: Retrieve messages sent by the message middleware and the sequence keys of each message; the sequence keys include business information; The sequential message listener processes messages sequentially according to their sequence keys to obtain the target data. The sequence key of the message is associated with the business logic, and messages with the same sequence key are located in the same queue partition of the message middleware.

[0011] In a feasible design, the method also includes: When message processing fails via the sequential message listener, an indication message is returned to the message middleware. This indication message triggers the message middleware to resend the failed message. The message middleware is configured as follows: After receiving the instruction information, determine the number of times the message will be resent; If the number of times a message is resent is less than a preset threshold, the message will be resent after a preset interval following the receipt of the instruction message. If the number of times a message is resent equals a preset threshold, the message is stored in a dead-letter queue. The dead-letter queue is used to store abnormal messages that cannot be consumed normally.

[0012] In a feasible design, the data acquisition module is configured with a minimum number of consumer threads, a maximum number of consumer threads, and / or a maximum concurrent consumer span.

[0013] In one feasible design, the visualization component is rendered based on the processed target data acquired in real time, including: Identify the device type and / or screen size of the terminal used by the user; Determine the rendering resolution of the target interface based on the identified device type and / or screen size; The visualization components are rendered based on the processed target data acquired in real time and the rendering resolution.

[0014] Secondly, a large-screen visual configuration system is provided, including: The visualization configuration module is configured to provide a visual operation interface and component library. The standard format visual operation interface allows users to select visualization components from the standard format component library, arrange the standard format visualization components, and configure related data information. The standard format visualization components include: chart components, map components, text box components, and dashboard components. The data acquisition module is configured to establish a communication connection based on the information of the data source associated with the visualization component that has been converted to a standard format, and then obtain the target data from the data source that has been converted to a standard format. The data sources that have been converted to a standard format include: relational databases, non-relational databases, API interfaces, and message brokers. The standard format visualization interface is also used by users to set data processing rules for the data associated with the standard format visualization component. The standard format data processing rules include filtering, sorting, and aggregation. The standard format data acquisition module includes a dynamic data processing submodule. The standard format dynamic data processing submodule is used to process the target data after converting the target data format to the standard format according to the standard format data processing rules. The rendering module is configured to render standard format visualization components based on real-time acquired and processed target data to generate the target interface to be displayed on the large screen.

[0015] This application embodiment provides an intuitive visual operation interface and component library through a visual configuration module, enabling users to independently select, arrange, and associate components with data through drag-and-drop and point-and-click, flexibly customizing the large-screen layout without coding. The data acquisition module dynamically establishes connections with multiple data sources and acquires target data based on configuration information, ensuring the flexibility and scalability of data access. Furthermore, after converting the target data to a standard format, it processes the target data according to user-pre-configured data processing rules such as filtering, sorting, and aggregation, extracting statistical features for subsequent display on the target interface. The rendering module instantly generates the final interface based on real-time data and component configuration, enabling the system to quickly respond to changes in user needs for interface layout and data display, thereby achieving the technical effect of allowing users to independently, flexibly, and conveniently configure the large-screen visual interface and quickly respond to changing needs. Attached Figure Description

[0016] To more clearly illustrate the technical solution of this application, the drawings used in the embodiments will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0017] Figure 1 This is a schematic flowchart illustrating a method for generating a large-screen interface from multi-source data, provided in an exemplary embodiment of this application. Figure 2 This is a schematic diagram of an exemplary large-screen visualization configuration system provided in an exemplary embodiment of this application. Detailed Implementation

[0018] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0019] To allow users to configure the large-screen visual interface independently, flexibly, and conveniently, such as Figure 1 As shown, this application provides a method for generating a large-screen interface based on multi-source data, applied to a large-screen visualization configuration system. The system includes a visualization configuration module, a data acquisition module, and a rendering module. The visualization configuration module is configured to provide a visual operation interface and a component library. The method includes: S110: After the user selects a visual component from the component library through the visual operation interface, arranges the visual component, and configures the associated data information, the data acquisition module establishes a communication connection based on the data source information associated with the visual component.

[0020] This component library offers various types of visualization components. Users can access the visualization configuration platform through a browser and design the large-screen interface after logging in with their account and password. The visualization components include: chart components (used to generate bar charts, line charts, etc. based on target data), map components (used to generate maps based on target data), text box components (used to generate text based on target data), and dashboard components (used to generate dashboards based on target data).

[0021] Arranging visual components involves dragging and dropping selected visual components to design their layout.

[0022] For example, the visualization configuration module is also configured to provide an attribute configuration interface for visualization components, allowing users to set parameters such as component style, configure associated data source information, set interactive behavior, and configure data processing rules, so as to achieve personalized customization of the large screen interface.

[0023] The associated data source information includes the data source address, authentication credentials (such as username and password, application programming interface key / token, etc.).

[0024] Data processing rules define the operational methods used when processing the target data associated with a visualization component. Specifically, these rules include, but are not limited to, data aggregation, filtering, and sorting operations. This allows users to easily configure detailed visualization components and meet personalized needs through simple clicks and selections, without writing any code.

[0025] For example, the visual configuration module provides users with a web-based visual configuration platform, which offers a visual user interface and component library. Users can access this visual configuration platform through a browser and design the large-screen interface after logging in with their account and password.

[0026] Furthermore, to improve configuration efficiency, the visual configuration platform also provides a variety of predefined layout templates. Users can select a suitable template as the initial layout based on the display requirements of the large screen, and then further select, arrange, and configure the visual components and data sources within the template through the visual operation interface.

[0027] For example, the visual operation interface includes a real-time preview area, which is used to display the target interface generated by the rendering module in real time, so that users can intuitively view the final presentation effect of the large screen during the configuration process.

[0028] S120, the data acquisition module obtains the target data from the data source, converts the target data format into a standard format, and processes the target data according to the user-preconfigured data processing rules.

[0029] The data sources include: relational databases (such as MySQL, Oracle, SQL Server), non-relational databases (such as ClickHouse), application programming interfaces (APIs), and message brokers (such as CTG-MQ, Kafka, and ElasticSearch).

[0030] Specifically, the data acquisition module employs a data source adaptation framework. This framework, through a pre-built protocol parser, connection manager, and data format converter, enables the access and unified processing of multi-source heterogeneous data. The protocol parser parses the communication protocols used by different data sources, the connection manager establishes and maintains communication connections with the data sources, and the data format converter transforms the data formats from various data sources into the standard format required by the system. In this way, the access logic of different types of data sources can be abstracted into standardized interfaces and adapter components, enabling unified access and data extraction from heterogeneous data sources such as relational databases, non-relational databases, message middleware, and application programming interfaces (APIs), thereby providing basic data support for subsequent data processing and visualization.

[0031] For example, after the data acquisition module obtains data from the data source, it performs the following preprocessing on the data: The data in the target data source is cleaned to remove parts with erroneous information, redundant information, or incomplete information, thereby improving data quality.

[0032] The cleaned data is then standardized to ensure that its format meets the system's parsing requirements.

[0033] The above examples can integrate scattered, heterogeneous data into high-quality data in a unified format, providing a reliable foundation for subsequent data analysis and visualization.

[0034] For example, the data acquisition module obtains the latest data from the data source in real time through a periodic polling or listening mechanism, achieving real-time data synchronization and dynamic updates, ensuring that the content displayed on the visualization interface always reflects the latest status. Through an incremental data loading strategy, only newly added or changed data items are processed, reducing system resource consumption and improving overall processing efficiency.

[0035] Based on the data source adaptation framework adopted by the data acquisition module, in order to enable users to quickly access and manage data sources through simple form filling or configuration file modification, a feasible design also provides a configuration management interface for the data acquisition module. Before obtaining target data from the data source, the data acquisition module also performs the following steps: In response to the user's dynamic configuration operations on the data source information associated with the visualization component through the configuration management interface, the system performs corresponding processing based on the data source information dynamically configured by the user. Dynamic configuration operations include adding data sources, deleting data sources, or configuring data sources.

[0036] For example, if a user adds a data source associated with a visualization component through the configuration management interface, the data acquisition module will call the connection manager to establish a connection with the newly added data source based on the data source information added by the user, identify and parse the communication protocol of the acquired data through the protocol parser, and call the data format converter to convert the raw data into the system standard format.

[0037] For example, if a user deletes a data source through the configuration management interface, the system will immediately terminate the connection with that data source and stop the data collection task.

[0038] For example, if a user modifies the URL information of the data source associated with a visualization component through the configuration management interface, the data acquisition module calls the connection manager to disconnect the original address and rebuild the communication link based on the new URL.

[0039] The above embodiments provide a configuration management interface to support users in dynamically configuring data sources, achieving graphical management and online hot-update capabilities for data source management. This design allows users to directly add, delete, or modify data source configuration information through a graphical interface, while the data acquisition module can respond instantly to these configuration changes and automatically adjust its data access logic. This enables seamless switching and updating of data sources while the system is continuously running, without requiring a system restart. This effectively solves the business interruption problem caused by the need for downtime for code modification or system restart due to data source changes in traditional solutions.

[0040] In one feasible design, the visual interface is also used by users to set data processing rules for the data associated with the visual components. The data acquisition module includes a dynamic data processing submodule, which processes the target data converted to a standard format according to the user's pre-configured data processing rules in the following way: The dynamic data processing submodule processes the target data obtained from the data source according to the data processing rules to obtain the processed target data.

[0041] For example, when a user sets up an aggregation operation on the target data associated with a visualization component, the dynamic data processing submodule merges multiple data points according to the user-defined logic or conditions to more clearly display the overall trend of the data. When a user sets up a filtering operation on the target data associated with a visualization component, the dynamic data processing submodule filters out data that meets the requirements based on user-defined conditions or criteria, thereby eliminating irrelevant or redundant information. When a user sets up a sorting operation on the target data associated with a visualization component, the dynamic data processing submodule arranges the data in the corresponding order according to the sorting criteria set by the user (such as numerical value, time sequence, etc.) to facilitate a more intuitive understanding and analysis of the data.

[0042] For example, when the target data in the data source changes, the dynamic data processing submodule reprocesses the latest target data obtained from the data source according to the data processing rules to obtain the latest target data. This triggers the rendering module to re-render the visualization components based on the latest target data to generate a new target interface. This mechanism ensures that the large screen content is always synchronized with the actual business data. Users do not need to manually refresh or reconfigure; the system can automatically complete data updates and interface redrawing to meet the timeliness and accuracy requirements of monitoring scenarios.

[0043] The above example demonstrates how data processing logic can be configured configurably by allowing users to directly configure data processing rules within a visual interface. The dynamic data processing submodule within the data acquisition module automatically executes these rules to process the raw data in real time. Compared to traditional large-screen design solutions that hard-code data processing logic, this solution empowers users to flexibly and accurately customize data views based on real-time business needs without requiring code modifications or system restarts. This significantly lowers the technical barrier and enhances the ease of large-screen configuration and the real-time nature of data display.

[0044] S130, the rendering module renders the visualization components based on the processed target data acquired in real time, in order to generate the target interface to be displayed on the large screen.

[0045] In large-screen visual configuration systems, draggable visual components are the core functionality for enabling rapid layout and configuration. However, the pre-built visual components in the component library may not fully meet users' personalized needs. Therefore, this application also provides a custom component module, which is configured to create custom components according to user requirements and store these custom components in the component library. This expands the component library to support more complex or specific visualization needs, improving the flexibility and scalability of large-screen visual configuration.

[0046] When users need to display a relationship topology diagram, but the pre-built edge components in the component library cannot meet the user's requirements for animation effects on the lines in the relationship topology diagram, a custom component called a topology component can be created. The topology component enables animation effects on the lines in the relationship diagram. This can be achieved by creating a custom component according to user needs in the following ways: Get the cursor image of the user input; Define custom edges by inheriting the base class of the edges from the component library; Add the cursor image as a graphic marker to the custom edge; The initial position of the cursor image is determined based on the starting coordinates of the custom edge; Define animation logic for the cursor image to drive it to move periodically along a path with a custom edge.

[0047] The animation is a sequence of multiple consecutive frames generated based on the pose changes of the cursor image. Each frame in the sequence is generated based on the attribute values ​​of the cursor image, including position and rotation angle. The animation logic is defined by setting an animation callback function, setting the animation to loop, and setting the duration of the animation. The animation callback function is used to calculate the attribute values ​​of each frame.

[0048] For example, the generation steps for each frame include: The position and rotation angle of the cursor image are determined by the animation callback function based on the path geometry information of the custom edge and the current animation progress. Construct a transformation matrix based on the position and rotation angle of the cursor image; The cursor image is transformed according to the transformation matrix to obtain the current frame.

[0049] For example, if the component library uses AntV's graph visualization engine (AntVG6), the process of creating a custom edge component with animation effects is as follows: Get the object of the edge graphic (i.e. the graphic for which the path needs to be drawn), for example, by defining it as follows: "constshape = group.get('children')[0]", which means getting the first child graphic object "shape" from the graphic group "group".

[0050] To obtain the starting coordinates of the edge graph path, for example, use the following method: "const startPoint = shape.getPoint(0)".

[0051] To obtain the cursor image input by the user, for example, use the following method: Add an image shape to the shape group using "group.addShape('image', {...})" to serve as the cursor for the edge shape; set the cursor image's properties, including position ("x" and "y"), width ("width"), height ("height"), and image resource ("img", i.e., the name of the cursor image input by the user); the initial position of the image is obtained using "startPoint.x-18" and "startPoint.y-10" to ensure that the cursor image is displayed near the starting point of the edge shape path.

[0052] Define animation logic for the cursor image. The animation logic includes: Define an animation for the cursor image, for example, using the "circle.animate" method, setting the animation to loop, and setting the animation duration to 10000 milliseconds (i.e. 10 seconds). Set the animation callback function, for example, "(ratio) =>{...}". The animation callback function is used to calculate the attribute value for each frame, where "ratio" is the current animation progress, ranging from 0 to 1.

[0053] The attribute values ​​for each frame are determined as follows: Calculate the current position of the cursor image on the path based on the current animation progress "ratio", for example, by using the following method: "const point = shape.getPoint(ratio)"; Based on the current animation progress "ratio" and the geometric information of the path, call the "getLabelPosition" function to calculate the tangent angle at the position of the cursor image, for example, by calculating it as follows: "const pos =getLabelPosition(shape, ratio)"; Construct the transformation matrix: Initialize an identity matrix, for example, "matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1]"; use the "transform" function to transform the identity matrix. The "transform" function includes a first translation ('["t", -point.x, -point.y]'), a rotation ('["r", pos.angle]'), and a second translation ('["t",point.x, point.y]'). These transformations ensure that the cursor image moves and rotates correctly along the path. The new position ('x' and 'y') and transformation matrix ('matrix') of the cursor image are returned by the animation callback function to update the position and rotation state of the cursor image, completing one frame of animation. This achieves the visual effect of the cursor image moving smoothly along the path and always facing the direction of travel.

[0054] When users need to display a relational topology diagram and the preset edge components cannot meet the requirements for connection animation, this embodiment achieves highly customized dynamic effects by obtaining a cursor image provided by the user, defining custom edges by inheriting the edge base class, adding the image as a graphic marker, and driving the animation based on path geometry information. Furthermore, the above example calculates the cursor image position and rotation angle frame by frame and constructs a transformation matrix based on these two pieces of information. This ensures that the cursor image, after pose transformation according to the transformation matrix, can smoothly move and rotate along the path, thereby expanding the expressiveness of the visualization components without modifying the core system and meeting users' personalized needs for complex topology animation effects.

[0055] When the data source is a message middleware, integration with the middleware is necessary. During integration, scenarios involving multiple nodes producing and consuming messages may arise, making ensuring message consumption in order a critical issue. Disruption of message order can lead to confusion in business logic. To address this, a feasible design involves configuring the data acquisition module to subscribe to the topic corresponding to the target data and register a sequential message listener, thereby retrieving the target data from the data source in the following way: Retrieve messages sent by the message middleware and the sequence keys of each message; the sequence keys include business information; The sequential message listener processes messages sequentially according to their sequence keys to obtain the target data. The sequence key of the message is associated with the business logic, and messages with the same sequence key are located in the same queue partition of the message middleware.

[0056] Taking the China Telecom Group Message Queue (CTG-MQ) as the data source as an example, the following describes the processing logic of the producer response (i.e., the client sending messages to the message middleware): (1) Create a message object: Create a message object, specifying the message's subject ('TopicTest'), tag ('TagA'), and message body (a byte array of "Hello CTG-MQ"); Set a sequence key for the message that includes business information, such as user identifiers and order identifiers, to ensure the message order.

[0057] (2) Send message: Use the 'send' method of the producer object 'producer' to send messages.

[0058] The sending result is stored in a 'SendResult' object, and the sending result is output using 'System.out.println(sendResult)' to check whether the message was sent successfully.

[0059] The following describes the processing logic of the data acquisition module as a consumer (i.e., a client that subscribes to messages from the message middleware): (1) Subscribe to topics: Subscribe to the topic 'TopicTest' using the 'subscribe' method of the consumer object 'consumer', and set the subscription filter to 'XX' to receive all messages under this topic.

[0060] (2) Register a message listener: Register a sequential message listener 'MessageListenerOrderly' to handle received messages; The message list 'List' is received via the 'onMessage' method. <mqresult>The message list represents a batch of received messages.

[0061] (3) Message processing: Use Java's parallel stream 'parallelStream()' to iterate through the message list and process each message 'mqMessage' as follows to obtain the business data for each message: Use 'log.info' to print the message identifier, which makes it easier to track the message processing status; Convert the byte array of the message body to a string, use the 'StrUtil.str' method and 'CharsetUtil.UTF_8' to specify the character encoding, and then retrieve the message content; Print the message content again using 'log.info' to complete message processing.

[0062] In a multi-node producer-consumer scenario where the data source is a message middleware, the above embodiment achieves the effect of processing messages in sequence by configuring the data acquisition module to subscribe to the target topic and registering a sequential message listener. Specifically, by utilizing a sequence key mechanism associated with business logic (that is, routing all messages with the same sequence key to the same queue partition of the message middleware), the sequential message listener ensures the serial consumption of messages within the partition, thereby avoiding business logic chaos caused by message out-of-order delivery and ensuring the correctness and reliability of the data processing process.

[0063] When the data acquisition module fails to process a message, a retry is required. However, if multiple retries still fail, the message may be lost. To address this issue, in one feasible design, the data acquisition module is also configured as follows: When message processing fails via the sequential message listener, an indication message is returned to the message middleware. This indication message triggers the message middleware to resend the failed message. The message middleware is configured as follows: After receiving the instruction information, determine the number of times the message will be resent; If the number of times a message is resent is less than a preset threshold, the message will be resent after a preset interval following the receipt of the instruction message. If the number of times a message is resent equals a preset threshold, the message is stored in a dead-letter queue. The dead-letter queue is used to store abnormal messages that cannot be consumed normally.

[0064] For example, when the data acquisition module processes messages in the sequential message listener, if consumption fails, it catches the exception, sets the index of the failed message, and returns a status flag indicating that a retry is required later. After the message middleware receives this status flag, it triggers the message middleware to re-deliver the message to the original queue or the retry queue, and after reaching the maximum number of retries, it transfers the message to the dead-letter queue.

[0065] In addition, if the producer fails to send a message or the message middleware fails to process it, the producer can also resend the message using the following retry strategy: Retransmitting messages based on the maximum number of retries configured by the producer helps improve the success rate of message delivery when network problems occur. Alternatively, if sending a message fails to the current broker of the message middleware, it can be sent to another broker. This ensures that the message can be successfully sent even if the current broker is temporarily unavailable, further enhancing the system's fault tolerance.

[0066] This embodiment ensures message reliability by configuring the data acquisition module to return specific indication information when consumption fails, and by cooperating with the retry mechanism of the message middleware. Specifically, by setting up an automatic retry mechanism in the message middleware to handle transient network failures, and by using a dead-letter queue to persistently store messages that ultimately cannot be consumed, message loss due to consumption failures is avoided while maintaining system throughput, thus ensuring the reliability of data processing.

[0067] In high-throughput scenarios, message middleware may experience performance bottlenecks, leading to increased consumption latency. To address this technical issue, a feasible design involves setting a minimum number of consumption threads, a maximum number of consumption threads, and / or a maximum concurrent consumption span for the data acquisition module.

[0068] Among them, the minimum number of consumer threads is the minimum number of threads used for concurrent message processing, the maximum number of consumer threads is the maximum number of threads used for concurrent message processing, and the maximum concurrent consumption span is used to limit the progress difference of message queues processed concurrently within the same consumer instance.

[0069] The number of consumption threads in the data acquisition module can be set as a parameter that is dynamically adjusted based on network conditions (it must meet the limitations of minimum number of consumption threads, maximum number of consumption threads, and / or maximum concurrent consumption span) to adapt to message processing needs under different load scenarios.

[0070] In the example above, the minimum number of threads (e.g., 20) ensures basic concurrency capabilities and avoids the overhead of frequently creating / destroying threads. The maximum number of threads (e.g., 50) serves as an elastic scaling limit to handle peak traffic surges. The concurrency span limit (e.g., 2000) ensures the processing efficiency of a single thread and prevents the long-tail effect from impacting overall throughput. Therefore, this example enables the data acquisition module, acting as a consumer, to process more message queue partitions or topics simultaneously when facing high-concurrency message streams, avoiding message backlog caused by insufficient single-thread processing speed.

[0071] For example, by deploying a message middleware cluster, multiple brokers can share the load to improve system throughput.

[0072] For example, when a performance bottleneck occurs in the message middleware, leading to increased message sending latency, the producer can be configured as follows to address this issue: Set a message sending timeout (e.g., 5000 milliseconds) to avoid prolonged blocking due to network fluctuations or excessive Broker load.

[0073] And / or, close channels with traffic below a set threshold to reduce connection overhead with the Broker and improve overall resource utilization.

[0074] In one feasible design, the rendering module renders the visualization component based on the processed target data acquired in real time: Identify the device type and / or screen size of the terminal used by the user; Determine the rendering resolution of the target interface based on the identified device type and / or screen size; The visualization components are rendered based on the target data and rendering resolution.

[0075] The above example adjusts the rendering resolution according to the device type and / or screen size of the terminal to adapt to the display capabilities of different terminals, which can ensure that the target interface has a consistent display effect on different devices (such as computers, tablets, etc.).

[0076] This application embodiment provides an intuitive visual operation interface and component library through a visual configuration module, enabling users to independently select, arrange, and associate components with data through drag-and-drop and point-and-click, flexibly customizing the large-screen layout without coding. The data acquisition module dynamically establishes connections with multiple data sources and acquires target data based on configuration information, ensuring the flexibility and scalability of data access. Furthermore, after converting the target data to a standard format, it processes the target data according to user-pre-configured data processing rules such as filtering, sorting, and aggregation, extracting statistical features for subsequent display on the target interface. The rendering module instantly generates the final interface based on real-time data and component configuration, enabling the system to quickly respond to changes in user needs for interface layout and data display, thereby achieving the technical effect of allowing users to independently, flexibly, and conveniently configure the large-screen visual interface and quickly respond to changing needs.

[0077] In practical applications, the large-screen visualization configuration system in this embodiment provides a unified presentation and configuration foundation for the cloud-network converged intelligent operation platform. Specifically, the visualization configuration module offers a rich component library and a user-friendly visualization interface, allowing users to freely select and arrange components while configuring associated data information. This supports centralized application presentation and meets the construction needs of professional panoramic workbench views. The data acquisition module accurately establishes communication connections based on the data source information set by the user in the visualization configuration module, efficiently acquiring target data from various data sources to achieve data access and integration, providing real-time and accurate data support for intelligent cloud-network operation. The rendering module renders the visualization components based on the target data acquired by the data acquisition module, generating the target interface to be displayed on the large screen, ensuring that the data is presented in an intuitive and clear form, facilitating comprehensive monitoring and management of cloud-network services. These modules work closely together to provide effective technical support for the cloud-network converged intelligent operation platform.

[0078] like Figure 2 As shown, this application provides a large-screen visual configuration system, including: The visualization configuration module is configured to provide a visual operation interface and a component library. The visual operation interface is used by users to select visualization components from the component library, arrange visualization components, and configure related data information. The visualization components include: chart components, map components, text box components, and dashboard components. The data acquisition module is configured to establish a communication connection based on the information of the data source associated with the visualization component, and then obtain the target data from the data source; the data source includes: relational databases, non-relational databases, API interfaces, and message brokers; The visual operation interface is also used by users to set data processing rules for the data associated with the visual components. The data processing rules include filtering, sorting, and aggregation. The data acquisition module includes a dynamic data processing sub-module, which is used to process the target data according to the data processing rules after converting the target data format to a standard format. The rendering module is configured to render the visualization components based on the processed target data acquired in real time, in order to generate the target interface to be displayed on the large screen.

[0079] In a feasible design, the data acquisition module also provides a configuration management interface, and the data acquisition module realizes dynamic configuration of the data source in the following way: In response to the user's dynamic configuration operations on the data source information associated with the visualization component through the configuration management interface, the system performs corresponding processing based on the data source information dynamically configured by the user. Dynamic configuration operations include adding data sources, deleting data sources, or configuring data sources.

[0080] In a viable design, the visual components also include custom components, which are custom components created according to user needs and stored in a component library; Custom components are topology components, which add animation effects to the lines in the relationship graph. The system also includes a custom component module, which allows users to create custom components according to their needs in the following ways: Get the cursor image of the user input; Define custom edges by inheriting the base class of the edges from the component library; Add the cursor image as a graphic marker to the custom edge; The initial position of the cursor image is determined based on the starting coordinates of the custom edge; Define animation logic for the cursor image to drive it to move periodically along a path with a custom edge. The animation is a sequence of multiple consecutive frames generated based on the cursor image's pose changes. Each frame in the sequence is generated based on the attribute values ​​of the cursor image, including position and rotation angle. The animation logic includes setting an animation callback function, setting the animation to loop, and setting the animation duration. The animation callback function is used to calculate the attribute values ​​for each frame.

[0081] In a feasible design, the custom component module generates each frame in the following way: The position and rotation angle of the cursor image are determined by the animation callback function based on the path geometry information of the custom edge and the current animation progress. Construct a transformation matrix based on the position and rotation angle of the cursor image; The cursor image is transformed according to the transformation matrix to obtain the current frame.

[0082] In one feasible design, the data source is a message middleware, and the data acquisition module is configured to subscribe to the topic corresponding to the target data and register a sequential message listener, thereby obtaining the target data from the data source in the following way: Retrieve messages sent by the message middleware and the sequence keys of each message; the sequence keys include business information; The sequential message listener processes messages sequentially according to their sequence keys to obtain the target data. The sequence key of the message is associated with the business logic, and messages with the same sequence key are located in the same queue partition of the message middleware.

[0083] In one feasible design, when message processing fails via the sequential message listener, the data acquisition module is also used to return an indication message to the message middleware. This indication message triggers the message middleware to resend the failed message. The message middleware is configured as follows: After receiving the instruction information, determine the number of times the message will be resent; If the number of times a message is resent is less than a preset threshold, the message will be resent after a preset interval following the receipt of the instruction message. If the number of times a message is resent equals a preset threshold, the message is stored in a dead-letter queue. The dead-letter queue is used to store abnormal messages that cannot be consumed normally.

[0084] In a feasible design, the data acquisition module is configured with a minimum number of consumer threads, a maximum number of consumer threads, and / or a maximum concurrent consumer span.

[0085] In a feasible design, the rendering module renders the visualization components based on the processed target data acquired in real time in the following way: The rendering module identifies the device type and / or screen size of the user's terminal. Based on the identified device type and / or screen size, the rendering module determines the rendering resolution of the target interface; The visualization components are rendered based on the processed target data acquired in real time and the rendering resolution.

[0086] Other implementation methods and effects described above can be found in the description of the multi-source data large screen interface generation method embodiment, and will not be repeated here.

[0087] The basic principles of this application have been described above with reference to specific embodiments. However, it should be noted that the advantages, benefits, and effects mentioned in this application are merely examples and not limitations, and should not be considered as essential features of each embodiment of this application. Furthermore, the specific details disclosed above are for illustrative and facilitative purposes only, and are not limitations. These details do not limit the application to the necessity of employing the aforementioned specific details for implementation.

[0088] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0089] The block diagrams of devices, apparatuses, devices, and systems involved in this application are merely illustrative examples and are not intended to require or imply that they must be connected, arranged, or configured in the manner shown in the block diagrams. As those skilled in the art will recognize, these devices, apparatuses, devices, and systems can be connected, arranged, and configured in any manner. Words such as "comprising," "including," "having," etc., are open-ended terms meaning "including but not limited to," and are used interchangeably with them. The terms "or" and "and" as used herein refer to the terms "and / or," and are used interchangeably with them unless the context clearly indicates otherwise. The term "such as" as used herein refers to the phrase "such as but not limited to," and is used interchangeably with it.

[0090] It should also be noted that in the apparatus, equipment, and methods of this application, the components or steps can be disassembled and / or recombined. These disassemblies and / or recombinations should be considered as equivalent solutions of this application.

[0091] The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use this application. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of this application. Therefore, this application is not intended to be limited to the aspects shown herein, but rather to be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0092] The above description has been given for purposes of illustration and description. Furthermore, this description is not intended to limit the embodiments of this application to the forms disclosed herein. Although numerous exemplary aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, alterations, additions, and sub-combinations thereof.< / mqresult>

Claims

1. A method for generating a large-screen interface based on multi-source data, characterized in that, An application is made in a large-screen visualization configuration system, the system including a visualization configuration module, a data acquisition module, and a rendering module, wherein the visualization configuration module is configured to provide a visualization operation interface and a component library, and the method includes: After the user selects a visualization component from the component library through the visualization operation interface, arranges the visualization component, and configures the associated data information, the data acquisition module establishes a communication connection based on the data source information associated with the visualization component; the visualization components include: chart components, map components, text box components, and dashboard components; The data acquisition module obtains target data from the data source, converts the target data format into a standard format, and processes the target data according to user-preconfigured data processing rules. The data source includes: relational databases, non-relational databases, API interfaces, and message middleware. The data processing rules include: filtering, sorting, and aggregation. The rendering module renders the visualization component based on the processed target data acquired in real time, in order to generate the target interface to be displayed on the large screen.

2. The method according to claim 1, characterized in that, The data acquisition module also provides a configuration management interface, and before acquiring the target data from the data source, it further includes: In response to the user's dynamic configuration operation on the information of the data source associated with the visualization component through the configuration management interface, the system performs corresponding processing based on the information of the data source after the user's dynamic configuration. The dynamic configuration operation includes adding a data source, deleting a data source, or configuring a data source.

3. The method according to claim 1 or 2, characterized in that, The visualization components also include custom components, which are custom components created according to user needs and stored in the component library; The custom component is a topology component, which adds animation effects to the lines in the relationship graph. The steps for creating a custom component according to user needs include: Get the cursor image of the user input; Define custom edges by inheriting the base class of the edges in the component library; Add the cursor image as a graphic marker to the custom edge; The initial position of the cursor image is determined based on the starting coordinates of the custom edge; Animation logic is defined for the cursor image to drive it to move periodically along the path of the custom edge. The animation is a frame sequence containing multiple consecutive frames generated based on the pose changes of the cursor image. Each frame of the frame sequence is generated based on the attribute values ​​of the cursor image, including position and rotation angle. The defined animation logic includes: setting an animation callback function, setting the animation to loop, and setting the duration of the animation. The animation callback function is used to calculate the attribute values ​​of each frame.

4. The method according to claim 3, characterized in that, The steps for generating each frame include: The position and rotation angle of the cursor image are determined by the animation callback function based on the path geometry information of the custom edge and the current animation progress. Construct a transformation matrix based on the position and rotation angle of the cursor image; The cursor image is transformed according to the transformation matrix to obtain the current frame.

5. The method according to claim 1 or 2, characterized in that, The data source is a message middleware, and the data acquisition module is configured to subscribe to the topic corresponding to the target data and register a sequential message listener. The step of obtaining the target data from the data source includes: Retrieve messages sent by the message middleware and the sequence keys of each message; the sequence keys include business information; The sequential message listener processes messages sequentially according to their sequence keys to obtain target data. The sequence key of the message is associated with the business logic, and messages with the same sequence key are located in the same queue partition of the message middleware.

6. The method according to claim 5, characterized in that, The method further includes: When message processing fails via the sequential message listener, an indication message is returned to the message middleware. This indication message triggers the message middleware to resend the failed message. The message middleware is configured as follows: After receiving the instruction information, determine the number of times the message will be resent; If the number of times a message is resent is less than a preset threshold, the message will be resent after a preset interval following the receipt of the instruction message. If the number of times a message is resent equals the preset threshold, the message is stored in a dead-letter queue, which is used to store abnormal messages that cannot be consumed normally.

7. The method according to claim 6, characterized in that, The data acquisition module is configured with a minimum number of consumer threads, a maximum number of consumer threads, and / or a maximum concurrent consumer span.

8. The method according to claim 1, characterized in that, The step of rendering the visualization component based on the processed target data acquired in real time includes: Identify the device type and / or screen size of the terminal used by the user; The rendering resolution of the target interface is determined based on the identified device type and / or screen size. The visualization component is rendered based on the processed target data acquired in real time and the rendering resolution.

9. A large-screen visual configuration system, characterized in that, include: The visualization configuration module is configured to provide a visualization operation interface and a component library. The visualization operation interface is used by users to select visualization components from the component library, arrange the visualization components, and configure related data information. The visualization components include: chart components, map components, text box components, and dashboard components; The data acquisition module is configured to establish a communication connection based on the information of the data source associated with the visualization component, and then acquire target data from the data source; the data source includes: relational database, non-relational database, API interface, and message middleware; The visual operation interface is also used by users to set data processing rules for the data associated with the visual component. The data processing rules include filtering, sorting, and aggregation. The data acquisition module includes a dynamic data processing submodule. The dynamic data processing submodule is used to process the target data according to the data processing rules after converting the target data format into a standard format. The rendering module is configured to render the visualization component based on the processed target data acquired in real time, so as to generate the target interface to be displayed on the large screen.

Images