[发明专利]一种可视化监控资源的前端实现方法

说明书

本发明公开一种可视化监控资源的前端实现方法，涉及可视化技术领域；利用vue‑cli脚手架搭建前端，并引入G6图可视化引擎针对业务通过自定义拓扑的节点和连线绘制业务的资源网络拓扑关系，针对资源网络拓扑关系，利用vuex状态管理存储状态量，包括场景id，节点id以及节点类型id，并根据状态量确定当前场景拓扑，依据当前场景拓扑展示前端页面；能够实现直观又灵活地展示资源信息和资源关系的前端。

技术领域

本发明公开一种实现方法，涉及可视化技术领域，具体地说是一种可视化监控资源的前端实现方法。

背景技术

Vue是一个构建数据驱动的web界面的渐进式框架，通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue采用自底向上增量开发的设计，关注视图层，并且Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发复杂单页应用。

G6是简单、易用、完备的图可视化引擎，在高定制能力的基础上，提供一系列设计优雅、便于使用的图可视化解决方案，可搭建图可视化、图分析、或图编辑器应用。

现有技术中资源信息和资源关系越来越复杂，而进行展示时网络关系混乱，节点分布不均匀不美观，节点和连线类型有限，不能自定义节点和连线来针对业务进行定制化展示，并且难以根据告警及时更新拓扑视图。

发明内容

本发明针对现有技术的问题，提供一种可视化监控资源的前端实现方法，能够实现直观又灵活地展示资源信息和资源关系的前端。

本发明提出的具体方案是：

一种可视化监控资源的前端实现方法：利用vue-cli脚手架搭建前端，并引入G6图可视化引擎针对业务通过自定义拓扑的节点和连线绘制业务的资源网络拓扑关系，

针对资源网络拓扑关系，利用vuex状态管理存储状态量，包括场景id，节点id以及节点类型id，并根据状态量确定当前场景拓扑，依据当前场景拓扑展示前端页面。

所述的一种可视化监控资源的前端实现方法中自定义拓扑的节点，拓扑的节点包含rect边框层、labeltext文本层、image图片层及alarmtext文本层，rect边框层用于显示节点的选中边框，labeltext文本层显示资源的ip，image图片层显示资源的icon，alarmtext文本层用来显示告警数量。

所述的一种可视化监控资源的前端实现方法中利用图片层显示资源的icon的颜色变化，展示告警级别，告警级别更新后根据告警级别更新icon地址并更新节点的信息。

所述的一种可视化监控资源的前端实现方法中使用websocket协议进行前后端告警通信，并在后端接收到告警时，根据节点id在拓扑的节点中找到相应节点并更新节点的信息。

所述的一种可视化监控资源的前端实现方法中判断状态量是场景id，则根据场景id取值判断页面拓扑是首页拓扑还是下钻后的页面拓扑，依据页面拓扑，根据节点id查询并展示相应节点。

所述的一种可视化监控资源的前端实现方法中查询节点，判断节点是否可以下钻，是则更新节点的状态量，根据需求请求下钻后的关系，更新页面视图。

一种资源可视化监控前端的实现装置，包括前端框架，前端图可视化引擎，

前端框架利用vue-cli脚手架搭建，并引入前端图可视化引擎G6针对业务通过自定义拓扑的节点和连线绘制业务的资源网络拓扑关系，

前端框架针对资源网络拓扑关系，利用vuex状态管理存储状态量，包括场景id，节点id以及节点类型id，并根据状态量确定当前场景拓扑，依据当前场景拓扑展示前端页面。