基于HTML5的网络拓扑图 - 定制状态面板

最新推荐文章于 2024-10-10 07:22:18 发布

formyth

最新推荐文章于 2024-10-10 07:22:18 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/formyth/article/details/42433751

版权

本文介绍了如何在电信网管系统的网络设备拓扑图中，使用Qunee 1.6 beta版本实现设备状态的实时显示，特别是双击设备节点后展示CPU柱状图和其他详细信息。通过自定义节点，结合UI组件如LabelUI、BarUI等，实现了柱状图与设备属性的绑定，并提供了交互功能，如双击切换详细信息的显示。此外，文章还提供了一个在线演示链接。

摘要由CSDN通过智能技术生成

电信网管系统中，设备状态信息的实时展示非常重要，通常会挂载一堆图标来展示状态或告警信息，图标的信息量有限，有时需要更详细的面板，甚至以图表的形式展现，本文将结合最近客户提到的需求，使用 Qunee1.6 beta版本，实现拓扑图中设备信息的实时显示。

Qunee 中ui 的定制非常灵活，每个图元节点都可以挂载多个 ui 控件，支持9X9=81种相对位置，单节点上能挂载多个 ui 元素，并进行排列和布局，另外每个 ui 元素可以绑定图元属性，属性变化，ui 元素会及时更新界面。

网络设备数据流信息展示

需求分析

网络设备拓扑图，默认设备为普通节点，双击时展开，显示CPU，内存，流量等信息，使用柱状图和不同颜色的文字来展示，再双击变回普通节点这里需要定制节点，普通模式下，节点包含图标和文字，展开模式下，节点主体变成一个圆角矩阵的面板，上面分布多个组件：图标，文字，柱状图等，其中柱状图可以参照之前监控图例子中的BarUI，其他都有现成的组件可用，面板使用内置的Shape图形，图标依旧使用ImageUI，文字使用 LabelUI，位置分布则借助position和 anchorPosition 属性进行设置