Network topology visualization method and device, computer equipment and readable storage medium

Abstract

The invention discloses a network topology visualization method and apparatus, a computer device and a readable storage medium. The method comprises the steps of obtaining to-be-displayed data of a target Internet of Things device in a target Internet of Things network in real time; determining target display models corresponding to the target Internet of Things devices in a preset display model library based on the to-be-displayed data; and performing traversal rendering on the to-be-displayed data according to a preset layout algorithm and the respective target display models of the target Internet of Things devices to obtain a visual topological graph. Therefore, the to-be-displayed data of the target Internet of Things equipment is acquired in real time, and the connection attribute, the equipment state and the like are converted into the visual model through the display model, so that the real-time performance and the visual effect of the Internet of Things network topology visual display are effectively improved, and the accuracy of the network topology visual display is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of Internet of Things, and in particular to a network topology visualization method, device, computer equipment and readable storage medium. Background Art

[0002] With the rapid development of IoT technology, more and more IoT devices are being widely used in various network environments. The network topology diagram of IoT devices is mainly used to display the connection relationships and device status between devices, helping operation and maintenance personnel monitor and manage devices.

[0003] In related technologies, a corresponding topology map is generated based on the detected network topology structure, and information such as the connection method between devices is marked. The generated topology map is then visualized so that users can intuitively understand the connection relationship, data transmission path, etc. between IoT devices.

[0004] However, the network topology visualization methods in related technologies have problems such as low visualization effect and low reliability, and the accuracy of network topology visualization needs to be improved. Summary of the Invention

[0005] The present invention aims to at least partially address one of the technical problems in the related art. To this end, the present invention provides a network topology visualization method, apparatus, computer device, and readable storage medium to improve the real-time performance and visualization effect of IoT network topology visualization, thereby improving the accuracy of describing the status of IoT devices and the connection status between IoT devices in the IoT network, thereby improving the accuracy of network topology visualization.

[0006] To achieve the above-mentioned purpose, the first aspect of the present invention proposes a network topology visualization method, which includes: acquiring the data to be displayed of the target IoT devices in the target IoT network in real time; wherein, the data to be displayed includes the topological relationship between the target IoT devices and the device status of the target IoT devices; the topological relationship between the target IoT devices includes the connection properties between the target IoT devices; based on the data to be displayed, determining the target display models corresponding to each of the target IoT devices in a preset display model library; wherein, the preset display model library includes at least one of a connection display model corresponding to the device connection property and a status display model corresponding to the device status; traversing and rendering the data to be displayed according to a preset layout algorithm and the target display models of each of the target IoT devices to obtain a visualized topology diagram.

[0007] According to one embodiment of the present invention, the real-time acquisition of the to-be-displayed data of the target IoT device in the target IoT network includes: receiving the initial data of the target IoT device in real time; and performing data transformation on the initial data according to a preset data format to obtain the data to be displayed.

[0008] According to one embodiment of the present invention, the status display model includes at least one of an online status display model, an offline status display model, and a fault status display model; the connection display model includes at least one of a wireless connection display model, a wired connection display model, and a connection stability display model.

[0009] According to one embodiment of the present invention, the data to be displayed includes the group identifiers corresponding to each of the target IoT devices; the data to be displayed is traversed and rendered according to the preset layout algorithm and the target display models of each of the target IoT devices to obtain a visual topology diagram, including: grouping the target IoT devices according to the group identifiers corresponding to each of the target IoT devices to obtain grouped IoT devices; wherein, the grouped IoT devices correspond to a preset group layout algorithm; the preset layout algorithm includes the preset group layout algorithm; according to the preset group layout algorithm and the target display models of each of the grouped IoT devices, the data to be displayed of the grouped IoT devices are traversed and rendered to obtain a visual group topology diagram; wherein, the visual topology diagram includes the visual group topology diagram.

[0010] According to one embodiment of the present invention, the network topology visualization method further includes: in response to a layout interaction control event for the visual topology map, updating the visual topology map to obtain an updated visual topology map.

[0011] According to one embodiment of the present invention, the network topology visualization method also includes: in response to a first operation on a specified node in the visualization topology map, obtaining device detail data of a specified IoT device corresponding to the specified node, and visually displaying the device detail data; or, in response to a second operation on the specified node, obtaining child node data of the specified node, and visually displaying the child node data according to a preset display method.

[0012] According to one embodiment of the present invention, the device details data is visually displayed in the form of a device details list; if the device details list includes at least one type of monitoring data, after visually displaying the device details data, the network topology visualization method further includes: in response to a third operation on the specified type of monitoring data in the device details list, jumping to a data chart corresponding to the specified type of monitoring data of the specified IoT device.

[0013] To achieve the above-mentioned purpose, the second embodiment of the present invention proposes a network topology visualization device, which includes: a data acquisition module for display, which is used to acquire the data to be displayed of the target IoT device in the target IoT network in real time; wherein, the data to be displayed includes the topological relationship between the target IoT devices and the device status of the target IoT devices; the topological relationship between the target IoT devices includes the connection properties between the target IoT devices; a display model determination module, which is used to determine the target display model corresponding to each of the target IoT devices in a preset display model library based on the data to be displayed; wherein, the preset display model library includes at least one of a connection display model corresponding to the device connection property and a status display model corresponding to the device status; a visual topology map generation module, which is used to traverse and render the data to be displayed according to a preset layout algorithm and the target display model of each of the target IoT devices to obtain a visual topology map.

[0014] To achieve the above-mentioned purpose, the third aspect of the present invention proposes a computer device comprising a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, it implements the steps of the network topology visualization method described in any of the aforementioned embodiments.

[0015] To achieve the above objectives, the fourth aspect of the present invention proposes a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the network topology visualization method described in any of the aforementioned embodiments.

[0016] According to various embodiments provided by the present invention, the network topology is updated in real time by acquiring the data to be displayed from the target IoT device. Furthermore, the connection properties and device status are converted into an intuitive model through a display model. The display model changes as the status of the IoT device changes, allowing the visual topology diagram to instantly and intuitively reflect the status changes of IoT devices in the IoT network. This improves the real-time performance and visualization effect of the IoT device topology visualization, ensures the consistency between the visual topology diagram and the real-time network structure of the IoT network, and thus achieves the purpose of improving the accuracy of the IoT device network topology visualization.

[0017] Additional aspects and advantages of the present invention will be set forth in part in the description which follows and, in part, will be obvious from the description which follows, or may be learned through practice of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 The figure is a flow chart of a network topology visualization method according to one embodiment of the present invention.

[0019] Figure 2The figure is a schematic diagram of a process for obtaining data to be displayed according to one embodiment of the present invention.

[0020] Figure 3 A schematic diagram of a process for obtaining a visual topology map according to one embodiment of the present invention.

[0021] Figure 4 The figure is a schematic diagram of the implementation process of the network topology visualization method provided according to one embodiment of the present invention.

[0022] Figure 5 The figure is a structural block diagram of a network topology visualization device according to one embodiment of the present invention. DETAILED DESCRIPTION

[0023] The following describes embodiments of the present invention in detail, examples of which are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present invention, and are not to be construed as limiting the present invention.

[0024] With the rapid development of IoT technology, an increasing number of IoT devices are being widely used in various network environments, including wireless access points (APs), optical network units (ONUs), sensors, and other devices. While these IoT devices provide network connectivity, data transmission, and environmental monitoring, they also bring challenges in network topology management, device monitoring, and fault diagnosis.

[0025] At present, the network topology diagram of IoT devices is mainly used to display the connection relationship and device status between devices, etc., to help operation and maintenance personnel monitor and manage the equipment. In related technologies, static graphics or traditional graphical interfaces are usually used to visualize the network topology diagram. However, this method has some problems. For example, the status changes of IoT devices cannot be updated to the topology diagram in real time, and the changes in the connection relationship between IoT devices cannot be dynamically displayed. The user interaction operations are also relatively simple, and remote control and fault diagnosis are impossible. With the increase in the number of IoT devices and the complexity of the network structure, this type of network visualization topology diagram has gradually become inadequate and cannot meet the higher requirements in terms of real-time and interactivity.

[0026] Specifically, the methods for visualizing network topology maps of IoT terminal devices in related technologies have the following flaws: ① Most visualization topology maps only statically display IoT devices and the connection relationships between them, lacking dynamic synchronization with the actual network status. They are unable to reflect the online / offline status, fault information, and other operating parameters of IoT devices in real time, resulting in poor real-time performance. ② Visualization topology maps in related technologies are usually used for simple visual display, and users cannot interact through the graphical interface, such as clicking on device nodes to view detailed information, perform remote control, or troubleshoot, resulting in poor interactivity. ③ As the number of IoT devices in the IoT network increases, the topology map designs in related technologies are difficult to handle large-scale IoT devices and complex network structures. The efficiency of drawing and updating topology maps is low, the topology map display effect is poor, the nodes are crowded, and the content overlaps. This fails to provide intuitive and clear information about the connection status of IoT devices and the network topology, resulting in poor visualization.

[0027] Therefore, the network topology visualization and management methods in related technologies are difficult to ensure that the device nodes in the topology diagram are consistent with the real-time status of the actual IoT devices, and thus it is difficult to ensure the consistency between the topology diagram and the real-time network structure, resulting in low accuracy of the visualized topology diagram. In addition, the network topology visualization methods in related technologies cannot meet the rapidly developing network management needs of IoT devices, and a more flexible, real-time and intelligent visualization solution is needed.

[0028] In order to improve the real-time performance and visualization effect of the visualization display of the Internet of Things network topology, to improve the accuracy of the description of the status of the Internet of Things devices and the connection status between the Internet of Things devices in the Internet of Things network, and thus to improve the accuracy of the visualization display of the network topology, it is necessary to propose a network topology visualization method, device, computer equipment and readable storage medium. The network topology visualization method provided in this specification first obtains the target Internet of Things devices to be displayed in the target Internet of Things network in real time. These data include not only the real-time topological relationship between the target Internet of Things devices, but also the real-time status information of each target Internet of Things device. Secondly, based on the acquired data, the target display model corresponding to each target Internet of Things device is determined in the preset display model library. Then, using the preset layout algorithm, combined with the target display model of each target Internet of Things device, the data to be displayed is traversed and rendered, and finally a visual topology map is generated, which can intuitively display the topological relationship between the target Internet of Things devices and the real-time status of each target Internet of Things device.

[0029] Thus, the network topology can be updated in real time by acquiring the data to be displayed of the target IoT device in real time, and the abstract data (such as connection properties, device status, etc.) can be converted into an intuitive model through the display model. The display model changes with the status of the IoT device, so that the visual topology diagram can instantly and intuitively reflect the status changes of the IoT devices in the IoT network. In this way, the real-time and visualization effect of the IoT device topology visualization can be improved, and the consistency between the visual topology diagram and the real-time network structure of the IoT network can be ensured, thereby improving the accuracy of the description of the real-time status of the IoT device and the real-time connection relationship between the IoT devices, thereby achieving the purpose of improving the accuracy of the IoT device network topology visualization display. In addition, the preset display model library supports flexible expansion and can meet the needs of the diversity of IoT devices. The network topology visualization method provided in this specification can solve the problems of static display, manual update, information overload, etc. in traditional network topology visualization through real-time data driving, model mapping and intelligent layout, significantly improving the observability and management efficiency of the IoT network, and is particularly suitable for large-scale, dynamically changing IoT environments.

[0030] This specification provides a method for visualizing network topology. Figure 1 As shown, the network topology visualization method may include the following steps.

[0031] S110. Acquire data to be displayed of target IoT devices in a target IoT network in real time; wherein the data to be displayed includes a topological relationship between target IoT devices and a device status of the target IoT devices; the topological relationship between target IoT devices includes connection properties between the target IoT devices.

[0032] S120. Determine, based on the data to be displayed, target display models corresponding to the target IoT devices in a preset display model library; wherein the preset display model library includes at least one of a connection display model corresponding to a device connection attribute and a status display model corresponding to a device status.

[0033] S130: Traverse and render the data to be displayed according to a preset layout algorithm and the target display models of the target IoT devices to obtain a visual topology map.

[0034] Among them, the target Internet of Things network is a network composed of multiple interconnected Internet of Things devices with topology visualization requirements. The Internet of Things devices in the target Internet of Things network can communicate and exchange data through the Internet, thereby realizing functions such as information collection, transmission, processing and execution.

[0035] The target IoT device is the IoT device that the system is paying attention to and wants to visualize.

[0036] Connection attributes may include connection type, connection bandwidth, connection stability, etc.

[0037] The preset display model library is a collection of predefined templates or models for visual display.

[0038] The connection display model is a visual model used to display the connection properties between IoT devices. Different connection properties may correspond to different display styles. For example, lines of different colors, thicknesses, or line styles are used to represent different types of connections.

[0039] The status display model is a visual model used to display the status of IoT devices. Different device statuses may correspond to different display styles. For example, a green icon indicates the normal operation status of an IoT device, and a red icon indicates the faulty operation status of an IoT device.

[0040] The preset layout algorithm is used to determine the position and arrangement of each target IoT device and connection in the visualization graph.

[0041] Specifically, first, the data to be displayed is obtained in real time from the target IoT devices in the target IoT network. This data includes not only the topological relationships between the target IoT devices, but also the real-time status information of each target IoT device. The topological relationships include the connection properties between the target IoT devices, namely, the connection type and connection stability.

[0042] Next, based on the acquired data to be displayed, a corresponding target display model is determined for each target IoT device in a preset display model library. The preset display model library includes connection display models designed based on device connection properties and / or state display models designed based on device status. The target display model corresponding to each target IoT device includes a target connection display model representing its corresponding device connection properties and / or a target state display model representing its corresponding device status.

[0043] Then, the preset layout algorithm is used in combination with the target display model of each selected target IoT device, and the display data is traversed and rendered according to the topological relationship between the target IoT devices (including connection relationship, hierarchical relationship, etc.), and finally a visual topology map is generated to intuitively display the real-time status of the target IoT devices and the topological relationship between the target IoT devices.

[0044] For example, the connection properties between IoT devices may include connection type (for example, wired and wireless connections, or Ethernet and Bluetooth connections), connection stability (which may be measured by packet loss rate, reconnection frequency, etc.), connection bandwidth, protocol type, signal quality, etc. A corresponding connection display model is designed based on display requirements, and may include at least one of a connection type display model, a connection stability display model, a connection bandwidth display model, a protocol type display model, and a signal quality display model.

[0045] In the connection type display model, a solid line can be used to represent a wired connection, and a dotted line can be used to represent a wireless connection; a specific network port icon can be used to represent an Ethernet connection, and a Bluetooth logo icon can be used to represent a Bluetooth connection; a blue line can be used to represent an Ethernet connection, and a purple line can be used to represent a Bluetooth connection, and so on.

[0046] In the connection stability display model, a green line can be used to represent a stable connection with low packet loss and low reconnection frequency; a yellow line can be used to represent a connection with moderate packet loss and occasional reconnection; and a red line can be used to represent an unstable connection with high packet loss and frequent reconnection. Alternatively, a static line can be used to represent a stable connection, while a dynamically flickering or jittering line can represent an unstable connection. In some feasible implementations, corresponding display models can be designed based on packet loss rate, reconnection frequency, and other factors, which will not be discussed in detail here.

[0047] In the connection bandwidth display model, the thickness of the connection line can be used to represent the size of the connection bandwidth, or the number or speed of particles flowing in the line can be used to represent the size of the bandwidth, and so on.

[0048] In the protocol type display model, connection line labels can be used to indicate different protocol types, and so on.

[0049] In the signal quality display model, the halo effect of the connecting lines can be used to display the signal quality. For example, if the signal quality is good, the halo of the connecting line is bright and the range is large; if the signal quality is poor, the halo of the connecting line is dim and the range is small, and so on.

[0050] Device status can include online status, offline status, alarm status, fault status, maintenance status, etc. Design a corresponding status display model based on display requirements, which can include at least one of the following: online status display model, offline status display model, alarm status display model, fault status display model, maintenance status display model, etc.

[0051] Different colors can be used to design display models for different states. For example, the online state display model can use green graphics or icons, the offline state display model can use gray graphics or icons, the alarm state display model can use yellow graphics or icons, the fault state display model can use red graphics or icons, the maintenance state display model can use blue graphics or icons, and so on.

[0052] You can also design display models for different states based on shape and icon changes. For example, the online state display model can use a full, solid icon, the offline state display model can use a hollow or semi-transparent icon, the alarm state display model can use a static or flashing exclamation mark or other warning icon, the fault state display model can use a cross icon, the maintenance state display model can use a wrench or screwdriver icon, and so on.

[0053] You can also use different dynamic effects to design display models for different states. For example, the online state display model can use an icon with a slight flashing or faint halo effect, the offline state display model can use a static effect icon, the alarm state display model can use an icon with a rapid flashing or color-changing effect, the fault state display model can use an icon with a red flashing or shaking effect, and the maintenance state display model can use an icon with a rotating or gradient effect, and so on.

[0054] The specific design of the display model can be determined according to the actual application scenario or requirements, and is not specifically limited in this specification.

[0055] In some embodiments, the data to be displayed can be directly obtained from the target Internet of Things network and obtained after data processing.

[0056] In other embodiments, the server obtains relevant data from the target IoT network, processes the data to be displayed, and stores the data to be displayed. The data to be displayed may be obtained from the server.

[0057] Furthermore, the data to be displayed may also include device types, and the preset display model library may include at least one of a connection display model corresponding to device connection attributes, a status display model corresponding to device status, and a type display model corresponding to device types.

[0058] For example, device types may include network devices (e.g., AP devices, AC (Wireless Access Point Controller) devices, gateway devices, etc.), optical network unit devices, sensor devices, etc. A corresponding type display model is designed based on the display requirements, and may include at least one of a network device display model, an optical network unit device display model, and a sensor device display model. In some achievable embodiments, for example, corresponding display models may be designed for AP devices, AC devices, gateway devices, etc. in network devices, and for different types of sensors in sensor devices. The details are not repeated here.

[0059] In some cases, the network topology visualization method may also include the following steps: obtaining in real time the to-be-updated display data of the to-be-updated IoT devices in the target IoT network; determining the to-be-updated display models corresponding to each of the to-be-updated IoT devices in a preset display model library based on the to-be-updated display data; traversing and rendering the to-be-updated display data according to the to-be-updated display models of each of the to-be-updated IoT devices to obtain an updated visual topology map.

[0060] It can be understood that in this specification, the data to be displayed may include but not only include the topological relationship between the target IoT devices and the device status of the target IoT devices, and the preset display model library may include but not only include at least one of the connection display model corresponding to the device connection attributes and the status display model corresponding to the device status.

[0061] It should be noted that the target IoT device can be all IoT devices in the target IoT network, or it can be some devices in the target IoT network. For example, it can be IoT devices deployed on the same floor or the same branch in the target IoT network, or it can be a specified type of IoT device in the target IoT network, etc.

[0062] Any display model can be any one of the preset display pictures, two-dimensional graphics, three-dimensional models, symbols and icons, animated images, etc., and the preset layout algorithm can be any one of the hierarchical layout algorithm, force-directed layout algorithm, grid layout algorithm, etc. The display model and layout algorithm can be set according to the actual application scenario or requirements, etc., and are not specifically limited in this specification.

[0063] In the above-described embodiment, the network topology is updated in real time by acquiring the data to be displayed from the target IoT device in real time. Abstract data (such as connection attributes, device status, etc.) is converted into an intuitive model through a display model. The display model changes as the status of the IoT device changes, allowing the visual topology diagram to instantly and intuitively reflect the status changes of the IoT devices in the IoT network. This can improve the real-time performance and visualization effect of the IoT device topology visualization, ensure the consistency between the visual topology diagram and the real-time network structure of the IoT network, thereby improving the accuracy of the description of the real-time status of the IoT device and the real-time connection relationship between IoT devices, and achieve the purpose of improving the accuracy of the IoT device network topology visualization. At the same time, it helps users intuitively understand the real-time changes in the device status and network connection relationship in the target IoT network, thereby facilitating network planning, design, and management, as well as timely detecting anomalies and improving the reliability and stability of the IoT network. In addition, the preset display model library supports flexible expansion to meet the diverse needs of IoT devices. The network topology visualization method provided in this specification can solve the problems of static display, manual update, and information overload in traditional network topology visualization through real-time data-driven, model-based mapping, and intelligent layout. It can significantly improve the observability and management efficiency of the Internet of Things network, and is particularly suitable for large-scale, dynamically changing Internet of Things environments.

[0064] In some embodiments, reference Figure 2 As shown, real-time acquisition of the data to be displayed of the target IoT device in the target IoT network may include:

[0065] S210: Receive initial data of the target IoT device in real time.

[0066] S220: Perform data transformation on the initial data according to a preset data format to obtain data to be displayed.

[0067] The initial data is the raw data sent by the server without any modification. The initial data includes the topological relationship between the target IoT devices and the device status of the target IoT devices.

[0068] The preset data format is a predefined, unified data structure and specification that meets the requirements of network topology visualization.

[0069] Data transformation is used to define the data model and configuration items for the network topology diagram. This process organizes the format and content of the initial data into the uniform requirements of a pre-defined data format, allowing for correct identification and processing during subsequent visualization. Data transformation can include data extraction and conversion.

[0070] In some cases, different IoT devices and servers use different protocols, which in turn generate data in different formats. To facilitate unified and standardized visualization of the initial data from different sources, data transformation is required to convert the initial data into a unified format.

[0071] Specifically, the server receives initial data from target IoT devices in real time. The format of this initial data may meet the protocol requirements of the target IoT devices or the protocol requirements of the server. The initial data is transformed according to a preset data format to obtain the transformed data to be displayed for each target IoT device in a unified format and standard.

[0072] Among them, data transformation can also include adding corresponding style attributes to the node, such as background color, border width, shadow blur, shadow color, etc.

[0073] Exemplarily, an array list is received from the server, including the initial data of the target IoT device. By defining the main container component of the topology diagram, the recursive function createData is used to traverse each object item in the array (i.e., each target IoT device), organize the data format according to the attribute value of each object (such as device name devName, device type description devTypeDesc, etc.), and add style attributes to each object to perform data transformation. If an item object contains a children attribute (i.e., it contains child nodes) and the children array is not empty, the createData function is recursively called to process the children array of the object to ensure that all nested objects can be processed. Some code examples of the data transformation method are as follows:

[0074]

[0075]

[0076] W14, W15, W17, and W18 are pre-defined codes for different types of network devices. BandwidthDesc is the bandwidth description of the network device.

[0077] It should be noted that the preset data format can be set according to actual application scenarios or requirements, and is not specifically limited in this specification.

[0078] In some embodiments, the status display model includes at least one of an online status display model, an offline status display model, and a fault status display model; the connection display model includes at least one of a wireless connection display model, a wired connection display model, and a connection stability display model.

[0079] Among them, the online status display model is used to display the state of the IoT device operating normally and being able to communicate; the offline status display model is used to display the state of the IoT device being disconnected from the network and unable to communicate with the network or other devices; the fault status display model is used to display the state of the IoT device having an error or functional failure.

[0080] The wireless connection display model is used to display the connection established through wireless communication technology; the wired connection display model is used to display the connection established through wired communication technology (such as Ethernet, optical fiber, etc.); the connection stability display model is used to display the quality and stability of the connection, etc.

[0081] For example, if the preset display model library includes state display models, and the state display models include online state display models and offline state display models, then when determining the target display models corresponding to each target IoT device in the preset display model library based on the data to be displayed, the online state display model or offline state display model corresponding to each target IoT device can be determined. If a target IoT device is in a faulty state, this can be displayed using only a text description.

[0082] For example, if the preset display model library includes a connection display model, and the connection display model includes a wireless connection display model and a wired connection display model, then when determining the target display model corresponding to each target IoT device in the preset display model library based on the data to be displayed, the wireless connection display model or the wired connection display model corresponding to each target IoT device can be determined.

[0083] Exemplarily, if the preset display model library includes a status display model and a connection display model, the status display model includes an online status display model, an offline status display model, and a fault status display model, and the connection display model includes a wireless connection display model, a wired connection display model, and a connection stability display model, then when determining the target display models corresponding to the target IoT devices in the preset display model library based on the data to be displayed, if it is determined that a target IoT device corresponds to an online status display model or a fault status display model, the wireless connection display model or wired connection display model corresponding to the device can be determined, and the connection stability display model corresponding to the device can also be determined.

[0084] For the description of the specific style design of each display model in this embodiment, please refer to the relevant content description above, and the details will not be repeated here.

[0085] In some embodiments, the data to be displayed includes group identifiers corresponding to the target IoT devices. Figure 3 As shown, traversing and rendering the data to be displayed according to the preset layout algorithm and the target display models of the target IoT devices to obtain a visual topology diagram may include the following steps.

[0086] S310. Group the target IoT devices according to their corresponding grouping identifiers to obtain grouped IoT devices; wherein the grouped IoT devices correspond to a preset grouping layout algorithm; the preset layout algorithm includes a preset grouping layout algorithm.

[0087] S320: Traverse and render the to-be-displayed data of the grouped IoT devices according to a preset group layout algorithm and the target display models of the respective grouped IoT devices to obtain a visual group topology map; wherein the visual topology map includes a visual group topology map.

[0088] The group identifier is used to identify the group category to which the IoT device belongs.

[0089] The preset grouping layout algorithm is used to perform node layout according to pre-set grouping rules and grouping information of IoT devices.

[0090] Specifically, based on the group identifier corresponding to each target IoT device, the target IoT devices are grouped according to a preset grouping method to obtain grouped IoT devices. Each group of grouped IoT devices has its own preset group layout algorithm, which is used to determine the arrangement and display format of the devices within the group. For each group of grouped IoT devices, the corresponding preset group layout algorithm is used, combined with the target display model of each IoT device in the group, to traverse and render the data to be displayed for the group of IoT devices, resulting in a visual group topology.

[0091] For example, assuming that the preset grouping method is to group the target IoT devices according to device type, the group identifier is the device type in the data to be displayed.

[0092] Assuming that the preset grouping method is to group the target IoT devices by geographic location (e.g., floor or region), the group identifier is the floor information or region information in the data to be displayed. The preset grouping method can be determined based on actual application scenarios or needs, and is not specifically limited in this specification.

[0093] Assuming that the preset grouping method is to group the target IoT devices according to the device status, the group identifier is the device status in the data to be displayed, so that devices with abnormal status can be quickly screened and centrally displayed.

[0094] It should be noted that any IoT device can be assigned at least one group identifier. Different groups may use different preset group layout algorithms to suit different group characteristics and display requirements. For example, IoT devices of the network device type can be automatically arranged in a tree diagram, or all IoT devices deployed on the same floor can be automatically arranged in horizontal lines to ensure they are aligned.

[0095] After grouping the target IoT devices, the data to be displayed for the IoT devices in each group category can be visually rendered and displayed separately, or only the data to be displayed for the IoT devices in the specified group category can be visually rendered and displayed, thereby enabling the screening and filtering of devices according to different display requirements.

[0096] In some implementations, the network topology visualization method may further include: in response to a layout interaction control event for the visualized topology map, updating the visualized topology map to obtain an updated visualized topology map.

[0097] Among them, layout interaction control events refer to operation events performed by users on the visual topology map, which aim to dynamically adjust the presentation mode of the topology map.

[0098] Specifically, in response to a layout interaction control event for the visual topology map, the data to be updated generated by the layout interaction control event is obtained, and the layout parameters of the visual topology map are updated and rendered according to the data to be updated to update the visual topology map and obtain an updated visual topology map.

[0099] Exemplarily, layout interaction control events may include node dragging, layout switching, zooming and panning, screening and filtering, etc.

[0100] In some embodiments, the network topology visualization method may also include: in response to a first operation on a specified node in the visualization topology map, obtaining device detail data of a specified IoT device corresponding to the specified node, and visually displaying the device detail data; or, in response to a second operation on the specified node, obtaining child node data of the specified node, and visually displaying the child node data according to a preset display method.

[0101] The specified node can be any node in the visual topology graph.

[0102] The device detail data includes specific information of the IoT device corresponding to the specified node, such as at least one of the device name, device type, IP address, device status, installation area, monitoring data, version number, etc., which can be determined based on the actual application scenario or display requirements.

[0103] Child node data is information about the next-level node connected to the specified node.

[0104] Specifically, if the user performs a first operation on a specified node in the visual topology map, the specific information of the specified IoT device corresponding to the specified node can be obtained from the back end in response to the first operation, thereby obtaining the device detail data of the specified node and visually displaying the device detail data.

[0105] If the user performs a second operation on the specified node, then in response to the second operation, information about the child nodes connected to the specified node can be obtained from the backend, thereby obtaining the child node data of the specified node and visually displaying the child node data in a preset display method.

[0106] For example, the device detail data can be displayed visually by popping up a detail window and displaying the device detail data of the specified node in the form of a table, card, etc.; or the display content can be updated in a specific area of the page to display the device detail data of the specified node.

[0107] The sub-node data is visualized according to the preset display method. The sub-node data can be displayed in the form of a list pop-up window; or the specified node and its sub-node data can be magnified and displayed in the form of a tree structure.

[0108] In the case where a branch with a specified node as the root node in the current visual topology is collapsed and not displayed, the child node data is visually displayed according to a preset display method, and the child node data can also be displayed in an expanded manner. Furthermore, in the case where the child node data is expanded and displayed, in response to a fourth operation on the specified node, the child node data can be recovered by collapsing.

[0109] In some scenarios, the network topology visualization method may include: in response to a first operation on a specified node in a visual group topology map, obtaining device detail data of a specified IoT device corresponding to the specified node, and visually displaying the device detail data; or, in response to a second operation on a specified node in the visual group topology map, obtaining child node data of the specified node, and visually displaying the child node data according to a preset display method.

[0110] In some embodiments, the first operation may be a single-click operation, and the second operation may be a double-click operation; or, the first operation may be a double-click operation, and the second operation may be a single-click operation.

[0111] For example, a device node component can be defined. This component function transforms the original single-click expansion subnode function of the Echarts chart according to project requirements, transforming it into single-click expansion of device details and double-click expansion / collapse of subnodes. The key point to implement this function is to listen to the single-click (click) and double-click (dblclick) events of the Echarts chart, add the click type attribute click_type, and determine the logic of the single-click and double-click operations based on the Boolean value of the click_type attribute. The main implementation code example is as follows:

[0112]

[0113]

[0114] Among them, the this.$nextTick method is used to execute the delayed callback after the next DOM (Document Object Model) update cycle ends; the dblclick method is used to control the acquisition and display of child node data when a double-click event is detected for the Echarts chart (i.e., for the specified node); the handleClickNode method is used to control the expansion of the device details pop-up window when a single-click event is detected for the Echarts chart (i.e., for the specified node); the parameter params is the device information of the currently clicked specified node.

[0115] In other embodiments, the first operation may be a first shortcut key operation, and the second operation may be a second shortcut key operation.

[0116] In some other embodiments, the first operation may be a left-click operation of a mouse, and the second operation may be a right-click operation of a mouse.

[0117] It should be noted that the first operation and the second operation can be set according to actual application scenarios or requirements, and are not specifically limited in this specification.

[0118] In some embodiments, the device detail data is visualized in the form of a device detail list; if the device detail list includes at least one type of monitoring data, after visually displaying the device detail data, the network topology visualization method may further include: in response to a third operation on the specified type of monitoring data in the device detail list, jumping to a data chart corresponding to the specified type of monitoring data of the specified IoT device.

[0119] The monitoring data may include data monitored by a specified IoT device during operation, and may also include data obtained by monitoring the specified IoT device.

[0120] The specified type of monitoring data can be any type of monitoring data in the device details list.

[0121] Specifically, in response to a first operation on a specified node in the visual topology diagram, the device details data of the specified IoT device corresponding to the specified node is obtained and displayed in the form of a device details list, and the user can perform interactive operations on the device details list. If the user performs a third operation on a specified type of monitoring data in the device details list, in response to the third operation, the monitoring data of the specified type of the corresponding specified IoT device over a period of time can be obtained from the backend and plotted into a data chart as the data chart corresponding to the specified type of monitoring data of the specified IoT device, and then the user is redirected from the current page to the display page of the data chart.

[0122] In some embodiments, the third operation is a click operation, which can be a single-click operation or a double-click operation.

[0123] For example, a device details pop-up component can be defined, which is mainly used to display device details information in a list format. When there is monitoring data in the device details list, the user can click on the current row of the list to jump to view the corresponding data chart according to the device type. For example, if the device type of the IoT device is specified as a temperature and humidity sensor, the data it monitors includes temperature type data and humidity type data, and different types of data can be displayed in different rows of the corresponding device details list. Depending on the device type, the user can click on the row where the temperature type data is located or the row where the humidity type data is located in the list to jump to view the data chart corresponding to the corresponding temperature type data or the data chart corresponding to the humidity type data.

[0124] It should be noted that the third operation can also be a long press operation, a sliding operation, etc., and the data chart can be at least one of a curve chart, a line chart, a bar chart, a three-dimensional chart, a voiceprint chart, etc., which is not specifically limited in this manual.

[0125] In some cases, the network topology visualization method may further include: if the device type of the specified IoT device is a preset type, in response to a third operation on the specified type of monitoring data in the device details list, jumping to the data chart corresponding to the specified type of monitoring data of the specified IoT device. For example, the preset types may include temperature and humidity sensor types, pressure sensor types, partial discharge sensor types, etc. Thus, when the third operation event is monitored, the subsequent jump logic is only executed when the device type is the preset type, so as to meet diverse display needs and reduce the execution of unnecessary processing logic. The code example is as follows:

[0126]

[0127]

[0128] Among them, handleWrapClick is an event handling function used to handle specific click events; C01, C05, and C04 are custom codes for preset device types.

[0129] For example, the network topology visualization method provided in this specification can be based on the Vue.js framework to build a network topology diagram to achieve a visual display of IoT terminal devices (such as APs, ONUs, sensors, etc.) and their connection relationships. Figure 4 As shown in Figure 1, the implementation process of the network topology visualization method mainly includes defining device models, data processing, visual display of network topology diagrams, and data storage and persistence.

[0130] In the step of defining the device model, the data model and display model of IoT terminal devices (such as AP, ONU, sensors and other IoT devices) are mainly defined, and each device is assigned a unique identifier (ID), location, type, online status and other attributes. These attributes can be used as the source of detailed information of the nodes in the network topology diagram to ensure that the device status and topological relationship are fully displayed and updated.

[0131] During the data processing step, the backend service provides a standard RESTful API interface for data exchange between the frontend and backend, enabling the frontend to obtain device information, topology data, and more. The API response data is formatted in JSON, ensuring that the frontend can easily parse and dynamically update it. To achieve real-time updates of device online status and network connection relationships, the backend pushes device status changes to the frontend via WebSocket. Using Vue.js's responsive data binding, the frontend can refresh the nodes and connections in the topology map in real time, ensuring that users always see the latest network status. Thus, WebSocket technology enables real-time data exchange and transmission between the frontend and backend, ensuring instant updates of device status. WebSocket provides a persistent connection, allowing the server to proactively push updated data, avoiding the latency associated with traditional polling methods. This allows the frontend page to reflect device operating status, alarm information, and other information in real time, and automatically updates the topology map to display the latest device status, improving user experience and system responsiveness.

[0132] The visualization of the network topology diagram mainly includes the following steps:

[0133] (1) Installation and introduction

[0134] Build a Vue project and integrate the Echarts library.

[0135] ①Install Echarts via npm intsall echarts --save.

[0136] ②Introduce Echarts into the Vue component and register the Echarts component globally.Introduce the visualization tool through import * as echartsfrom'echarts'.

[0137] ③Use Echarts. In the component template, add a DOM element for rendering the chart. This step is to create a visual chart container: <div ref＝"echartsREF”key＝"echarts-two”class＝"echarts-two”>

[0138] (2) Create a Vue component and initialize the Echarts instance in it

[0139] ①The main container component of the topology diagram (topuData2)

[0140] This function is used to define the data model and configuration items for the network topology diagram, set the layout and style of the network topology diagram, and dynamically update icons based on user interaction. Device nodes can be grouped and laid out based on their device type. For example, all devices deployed on the same floor can be automatically arranged on the same horizontal line. Users can also manually adjust device positions for a clearer view of the network structure. Based on the acquired topology data and project requirements, the data structure is transformed to render the network topology diagram. Connections between devices are represented by lines, supporting different types of connections (such as wired and wireless). For example, APs and end devices can be connected wirelessly, while ONUs and switches can be connected wired. The style of the connection lines (such as dashed or solid) can be adjusted based on the stability or type of the connection. Data transformation is a key step, and subsequent feature development and implementation will rely on the transformed data from this step. The specific code example for the data transformation method is shown above.

[0141] After the data format is organized, you need to render the Echarts chart. This is achieved through the key method this.setOptions(). When calling this method, there is a key point. That is, before setting the data attributes, you need to traverse each node and set the image display model of each node such as online and offline status according to the information in the data to be displayed corresponding to each node. Otherwise, the node image will not be effective when rendering.

[0142] ②Device node component (topuData3)

[0143] Each device corresponds to a node in the topology map. The node's style (such as size, color, and shape) changes dynamically based on the device's type and status. For example, online devices appear green, faulty devices appear red, and sensor-type devices use a different icon style than network devices. When the device's status changes, the system can dynamically adjust the topology map's display through a data update mechanism. For example, if a device goes online from offline or a device fails, the system will instantly update the status display of the corresponding nodes and connections in the topology map.

[0144] In addition, this component transforms Echarts' original single-click function to expand subnodes based on project requirements, transforming it into a single-click function to expand device details, and a double-click function to expand / collapse subnodes. The key to implementing this function is to listen to Echarts' single-click (click) and double-click (dblclick) events, add the click_type attribute, and determine the logic of the single-click / double-click operation based on the Boolean value of the click_type attribute. The specific code example is shown above.

[0145] ③Device details pop-up component (rowDetails)

[0146] This component is mainly used to respond when the above-mentioned click event occurs, and display the corresponding device details in a list pop-up window, which can include relevant information such as device ledger, operation data, associated equipment and monitoring data.

[0147] Based on the device information obtained when the user clicks on a device, the backend service is requested to return relevant information associated with the device and display it on the page. When monitoring data is present in the displayed device details list, a click event on a row of monitoring data of a specific type in the list determines whether to jump to view a data chart of the corresponding type of data monitored by the current device, based on the device type corresponding to the current device details. The specific code example is shown above.

[0148] During the data storage and persistence step, the system can use a database (such as MySQL, MongoDB, etc.) to store basic device information, topology, device status, and other data. Data storage and real-time updates are separated to ensure real-time front-end display and persistent back-end data storage. For example, a device information table can be used to store basic device information, including device ID, type, location, status, etc.; a topology relationship table can be used to record the connection relationships between devices, supporting dynamic updates of the connection status between devices; a fault record table can be used to record device fault logs for subsequent analysis and fault tracing, and so on.

[0149] Therefore, on the one hand, a component-based design based on Vue is adopted, and the components can be flexibly expanded. Each functional module in the topology diagram (such as device nodes, connection lines, zoom control, etc.) is encapsulated as an independent component, making the topology diagram have good scalability and maintainability. On the other hand, it supports the analysis of historical data and real-time status of the equipment, and automatically predicts possible failure risks or performance bottlenecks. When the system detects an abnormal device status, the relevant device nodes in the topology diagram will be highlighted in an obvious way (such as flashing, icon color change, etc.) to achieve device status warning and visual feedback, and remind users in real time. On the third hand, it supports the division of devices into different types, and supports the use of layered and drill-down display methods to reduce the amount of information displayed in a single diagram, which can meet the new display requirements of large-scale device network topology, and supports dynamic scaling and panning. It can still maintain high rendering efficiency and good performance under high concurrency and large data volumes.

[0150] In summary, the network topology visualization method presented in this manual features efficient automated updating capabilities and is capable of meeting the management needs of large-scale devices. It can handle complex network environments and large numbers of devices, providing a comprehensive and accurate monitoring and management solution for IoT applications. By detecting device status changes in real time and automatically updating the topology map, the accuracy of the network topology information is ensured, enabling operations and maintenance personnel to quickly identify and respond to issues, troubleshoot, and repair them. This helps reduce decision-making errors and improves operation and maintenance efficiency.

[0151] This specification also provides a network topology visualization device. Figure 5 As shown, the network topology visualization device 500 may include: a to-be-displayed data acquisition module 510 , a display model determination module 520 , and a visualization topology map generation module 530 .

[0152] The module 510 for acquiring data to be displayed is used to acquire data to be displayed of target IoT devices in the target IoT network in real time; wherein the data to be displayed includes the topological relationship between the target IoT devices and the device status of the target IoT devices; the topological relationship between the target IoT devices includes the connection properties between the target IoT devices.

[0153] The display model determination module 520 is used to determine the target display model corresponding to each target IoT device in the preset display model library based on the data to be displayed; wherein the preset display model library includes at least one of a connection display model corresponding to the device connection attribute and a status display model corresponding to the device status.

[0154] The visualization topology map generation module 530 is used to traverse and render the data to be displayed according to a preset layout algorithm and the target display models of the target IoT devices to obtain a visualization topology map.

[0155] The specific definition of the network topology visualization device can be found in the definition of the network topology visualization method above and will not be repeated here. Each module in the above-mentioned network topology visualization device can be implemented in whole or in part through software, hardware, or a combination thereof. Each of the above-mentioned modules can be embedded in or independent of a processor in a computer device in hardware form, or can be stored in a memory in the computer device in software form, so that the processor can call and execute the corresponding operations of each of the above modules.

[0156] An embodiment of this specification also provides a computer device, which may include a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the network topology visualization method in any of the aforementioned embodiments are implemented.

[0157] The embodiments of this specification also provide a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the steps of the network topology visualization method in any of the aforementioned embodiments are implemented.

[0158] It should be noted that the logic and / or steps represented in the flowcharts or otherwise described herein, for example, can be considered as a sequenced list of executable instructions for implementing the logical functions, and can be embodied in any computer-readable medium for use by, or in conjunction with, an instruction execution system, apparatus, or device (e.g., a computer-based system, a system including a processor, or other system that can fetch and execute instructions from an instruction execution system, apparatus, or device). For purposes of this specification, a "computer-readable medium" can be any device that can contain, store, communicate, propagate, or transport a program for use by, or in conjunction with, an instruction execution system, apparatus, or device. More specific examples (non-exhaustive list) of computer-readable media include the following: an electrical connection with one or more wires (electronic device), a portable computer disk cartridge (magnetic device), random access memory (RAM), read-only memory (ROM), erasable and programmable read-only memory (EPROM or flash memory), fiber optic devices, and portable compact disc read-only memory (CDROM). Furthermore, the computer-readable medium may even be paper or other suitable medium on which the program is printed, since the program may be obtained electronically, for example, by optically scanning the paper or other medium and then editing, interpreting or processing it in another suitable manner if necessary, and then storing it in a computer memory.

[0159] It should be understood that various parts of the present invention can be implemented using hardware, software, firmware, or a combination thereof. In the above-described embodiments, multiple steps or methods can be implemented using software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented using hardware, as in another embodiment, any one of the following technologies known in the art or a combination thereof can be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application-specific integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0160] Throughout this specification, reference to terms such as "one embodiment," "some embodiments," "examples," "specific examples," or "some examples" means that a specific feature, structure, material, or characteristic described in conjunction with that embodiment or example is included in at least one embodiment or example of the present invention. In this specification, schematic representations of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.

[0161] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of the technical features being referred to. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In the description of the present invention, "plurality" means at least two, such as two, three, etc., unless otherwise specifically defined.

[0162] In the present invention, unless otherwise specified or limited, the terms "installed," "connected," "connect," "fixed," etc. should be understood in a broad sense. For example, they can refer to fixed connection, detachable connection, or integration; mechanical connection, electrical connection; direct connection, or indirect connection through an intermediate medium; internal communication between two components, or interaction between two components, unless otherwise specified. Those skilled in the art will understand the specific meanings of the above terms in the present invention based on specific circumstances.

[0163] Although the embodiments of the present invention have been shown and described above, it will be understood that the above embodiments are illustrative and are not to be construed as limitations on the present invention. A person skilled in the art may change, modify, replace and modify the above embodiments within the scope of the present invention.

Claims

1. A network topology visualization method, characterized in that: The method comprises: Acquire data to be displayed of target IoT devices in a target IoT network in real time; wherein the data to be displayed includes a topological relationship between the target IoT devices and a device status of the target IoT devices; the topological relationship between the target IoT devices includes connection properties between the target IoT devices; Determining, based on the data to be displayed, target display models corresponding to the target IoT devices in a preset display model library; wherein the preset display model library includes at least one of a connection display model corresponding to a device connection attribute and a state display model corresponding to a device state; The data to be displayed is traversed and rendered according to a preset layout algorithm and the target display models of the target IoT devices to obtain a visual topology map.

2. The method according to claim 1, characterized in that The real-time acquisition of the to-be-displayed data of the target IoT device in the target IoT network includes: Receiving initial data of the target IoT device in real time; The initial data is transformed according to a preset data format to obtain the data to be displayed.

3. The method according to claim 1, characterized in that The status display model includes at least one of an online status display model, an offline status display model, and a fault status display model; The connection display model includes at least one of a wireless connection display model, a wired connection display model, and a connection stability display model.

4. The method according to claim 1, wherein The data to be displayed includes group identifiers corresponding to the target IoT devices; and the data to be displayed is traversed and rendered according to a preset layout algorithm and target display models of the target IoT devices to obtain a visual topology diagram, including: The target IoT devices are grouped according to the grouping identifiers corresponding to the target IoT devices to obtain grouped IoT devices; wherein the grouped IoT devices correspond to a preset grouping layout algorithm; the preset layout algorithm includes the preset grouping layout algorithm; According to the preset group layout algorithm and the target display models of the grouped IoT devices, the data to be displayed of the grouped IoT devices are traversed and rendered to obtain a visual group topology map; wherein the visual topology map includes the visual group topology map.

5. The method according to claim 1, wherein The method further comprises: In response to a layout interaction control event for the visual topology map, the visual topology map is updated to obtain an updated visual topology map.

6. The method according to any one of claims 1 to 5, characterized in that The method further comprises: In response to a first operation on a specified node in the visual topology diagram, obtaining device detail data of a specified IoT device corresponding to the specified node, and visually displaying the device detail data; or In response to the second operation on the designated node, child node data of the designated node is obtained, and the child node data is visually displayed according to a preset display method.

7. The method according to claim 6, characterized in that The device detail data is visually displayed in the form of a device detail list; if the device detail list includes at least one type of monitoring data, after visually displaying the device detail data, the method further includes: In response to a third operation on the specified type of monitoring data in the device details list, jump to a data chart corresponding to the specified type of monitoring data of the specified IoT device.

8. A network topology visualization device, characterized in that: The device comprises: a module for acquiring data to be displayed, configured to acquire data to be displayed of target IoT devices in a target IoT network in real time; wherein the data to be displayed includes the topological relationship between the target IoT devices and the device status of the target IoT devices; the topological relationship between the target IoT devices includes the connection properties between the target IoT devices; a display model determination module, configured to determine, based on the data to be displayed, a target display model corresponding to each of the target IoT devices in a preset display model library; wherein the preset display model library includes at least one of a connection display model corresponding to a device connection attribute and a state display model corresponding to a device state; The visualization topology map generation module is used to traverse and render the data to be displayed according to a preset layout algorithm and the target display model of each target IoT device to obtain a visualization topology map.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

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

Images