一种定制监控可视化方法及装置与流程

本发明涉及互联网监控，具体涉及一种定制监控可视化方法及装置。

背景技术：

1、云时代各大公司都纷纷将技术转向云架构，落地云原生技术，然而技术迁移通常是渐进式的，这样一来就会有一段时期，整个技术架构是新旧并存的，对于监控领域也是增加了复杂度。公司需要关注当前架构下的实时网络流量与服务器的cpu、内存的使用率等性能指标来调整优化架构升级的优先级，因此，就需要一个相对直观的可视化监控大屏来满足需求。

2、现有可视化技术表现形式主要为折线图、饼图、柱状图、图表，或者表现形式为树形结构、关系图。这些具备相对成熟的原子图表组件与配置化的图表，能够应对基本业务，但是应对可视化监控领域一些需要深度结合公司实际业务，页面布局定制化较高的需求场景就显得比较棘手，如公司内部需要根据云原生技术架构监控可视化展示各个环节的网络流量。因此，现有的可视化技术表现形式无法应对需要定制化的实际业务。

技术实现思路

1、有鉴于此，本发明的目的在于提供一种定制监控可视化方法及装置，以解决现有技术中的可视化技术表现形式无法应对需要定制化的实际业务的问题。

2、根据本发明实施例的第一方面，提供一种定制监控可视化方法，包括：

3、获取待生成可视化界面的定制图标信息和界面设计图；

4、根据所述定制图标信息，使用可缩放矢量图形技术绘制矢量图标；

5、对所述矢量图标的源码进行封装，生成所述矢量图标相对应的原子组件；

6、根据所述界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；

7、通过网络协议获取实时监控数据，并依次配置到所述原子组件，持续更新所述可视化界面。

8、优选的，所述对所述矢量图标的源码进行封装，包括：

9、基于vue框架提供的组件化与视图模型双向绑定的能力，对所述矢量图标的源码进行封装。

10、优选的，所述配置原子组件参数渲染出整体网络架构的可视化界面，包括：

11、根据所述原子组件的位置信息在可视化界面中生成原子组件；

12、根据原子组件的位置间隔及参数生成连接线和方向箭头；

13、根据预设动画效果及原子组件参数渲染相应的原子组件正常状态。

14、优选的，所述根据原子组件的位置间隔及参数生成连接线和方向箭头，包括：

15、根据原子组件的位置间隔分别计算连线和方向箭头的坐标，使用d3来动态绘制连线和方向箭头；

16、利用可缩放矢量图形的蒙版标签绘制模拟流量数据包，利用动画标签定义路径动画为所述连线和方向箭头，模拟实现数据流动效果。

17、优选的，在所述通过网络协议获取实时监控数据，并依次配置到所述原子组件之后，还包括：

18、对每个原子组件配置告警阈值；

19、对所述监控数据进行加工处理，计算出每个原子组件当前的数据状态，根据所述告警阈值和所述数据状态判断是否需要告警；

20、若是，则将相应原子组件切换为预设的告警主题效果。

21、根据本发明实施例的第二方面，提供一种定制监控可视化装置，包括：

22、定制信息获取模块，用于获取待生成可视化界面的定制图标信息和界面设计图；

23、图标绘制模块，用于根据所述定制图标信息，使用可缩放矢量图形技术绘制矢量图标；

24、组件生成模块，用于对所述矢量图标的源码进行封装，生成所述矢量图标相对应的原子组件；

25、界面渲染模块，用于根据所述界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；

26、数据导入模块，用于通过网络协议获取实时监控数据，并依次配置到所述原子组件，持续更新所述可视化界面。

27、本发明的实施例提供的技术方案可以包括以下有益效果：

28、可以理解的是，本发明提供的技术方案，能够获取待生成可视化界面的定制图标信息和界面设计图；根据定制图标信息，使用可缩放矢量图形技术绘制矢量图标；对矢量图标的源码进行封装，生成矢量图标相对应的原子组件；根据界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；通过网络协议获取实时监控数据，并依次配置到原子组件，持续更新可视化界面。本发明提供的技术方案采用svg图形作为底层技术，能够针对定制化的实际业务生成相应的，能够持续更新的可视化界面，用户体验度好，满意度高。

29、应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

技术特征：

1.一种定制监控可视化方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述对所述矢量图标的源码进行封装，包括：

3.根据权利要求1所述的方法，其特征在于，所述配置原子组件参数渲染出整体网络架构的可视化界面，包括：

4.根据权利要求3所述的方法，其特征在于，所述根据原子组件的位置间隔及参数生成连接线和方向箭头，包括：

5.根据权利要求3所述的方法，其特征在于，在所述通过网络协议获取实时监控数据，并依次配置到所述原子组件之后，还包括：

6.一种定制监控可视化装置，其特征在于，包括：

技术总结
本发明涉及互联网监控技术领域，具体涉及一种定制监控可视化方法及装置，该方法包括：获取待生成可视化界面的定制图标信息和界面设计图；根据定制图标信息，使用可缩放矢量图形技术绘制矢量图标；对矢量图标的源码进行封装，生成矢量图标相对应的原子组件；根据界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；通过网络协议获取实时监控数据，并依次配置到原子组件，持续更新可视化界面。本发明提供的技术方案采用SVG图形作为底层技术，能够针对定制化的实际业务生成相应的，能够持续更新的可视化界面，用户体验度好，满意度高。

技术研发人员：赵镇
受保护的技术使用者：上海中通吉网络技术有限公司
技术研发日：
技术公布日：2024/1/14