CN111580817A - 一种可视化监控资源的前端实现方法 - Google Patents

Abstract

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

Description

一种可视化监控资源的前端实现方法

技术领域

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

背景技术

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，并根据状态量确定当前场景拓扑，依据当前场景拓扑展示前端页面。

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

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

一种计算机可读存储介质，所述存储介质上存储有计算机程序，当所述计算机程序被处理器执行时，实现如权利要求1至6任一项所述的一种可视化监控资源的前端实现方法。

本发明的有益之处是：

本发明提供一种可视化监控资源的前端实现方法，针对业务根据拓扑的节点的网络拓扑图，利用状态量判断场景拓扑，可根据场景拓扑，判断节点的下钻情况，并依据需要利用节点id查看节点的信息，同时还可进一步在节点中展示报警信息，并实时推送通知给后端，以便后端响应，并且兼具其他前端优点。

附图说明

图1是本发明方法流程示意图；

图2节点操作流程图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。

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

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

利用本发明方法使用vue-cli脚手架搭建前端项目，使用NPM引入G6以及其他相关包，可利用视口单位实现适配页面，仅使用vw作为css单位，可以解决用媒体查询带来的响应式断层问题和rem的脚本依赖问题，

G6图可视化引擎针对业务通过自定义拓扑的节点和连线绘制业务的资源网络拓扑关系，

根据业务需要基于G6库自定义拓扑的节点，节点包含四个图形shape：rect边框层、labeltext文本层、image图片层、alarmtext文本层。rect边框层用来显示节点的选中边框，labeltext文本层显示资源的ip，image图片层显示资源的icon，alarmtext文本层位于节点右上方用来显示告警数量，

而业务场景中两资源可通过多端口连接，因此在节点中间定义展示多条连线，首先遍历关系数组，统计节点间需要绘制的连线条数，如果是多条连线就将连线类型设置为自定义的多条连线类型，如果只有一条连线，可将连线设置为直线；

使用vuex状态管理模式集中式存储管理状态量，主要管理三个状态量：场景id，节点id和节点类型id，场景id用来管理拓扑节点下钻，场景id可有两个取值，当id＝1时，代表此时页面拓扑是首页拓扑，展示的是最上层的拓扑关系；当id＝2时，表示此时页面的拓扑关系是下钻后的关系，Vuex中存储的场景id默认是1，双击节点时场景id设置为-1，节点id和节点类型id可通过双击节点后启动，可利用iview的ui组件库展示资源列表的导航菜单。

在上述过程中，结合展示告警级别的业务需要，本发明可通过节点icon颜色来体现告警级别，告警级别信息更新后根据告警级别更新icon地址然后更新节点，根据此约定整理资源icon并命名，命名格式推荐用“资源名_告警级别”，并且前后端使用websocket协议进行告警信息通信，后端采集到告警后可以主动向后端推送信息，当接收到告警信息的推送时，根据节点id在拓扑节点中找到找到该节点并更新，其余资源信息前后端可通过ajax轮询获取的方式进行通信。

在上述过程中，本发明前端，利用vue框架和G6建立，可以自适应各个分辨率的屏幕，根据屏幕分辨率自动调节字体和布局大小，并可利用节点id查询内容返回匹配到的资源列表，还可附加鹰眼功能实现快速预览，辅助用户探索大规模图，

当然点击节点可展示该资源属性、关键性能指标等信息，点击连线展示关系的起始节点和终止节点的端口、ip、设备类型等信息，网络拓扑图的节点也可根据需求拖动，可参考图2。

同时本发明还提供一种可视化监控资源的前端实现装置，包括前端框架，前端图可视化引擎，

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

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

利用本发明装置前端框架使用vue-cli脚手架搭建前端项目，使用NPM引入前端图可视化引擎G6以及其他相关包，可利用视口单位实现适配页面，仅使用vw作为css单位，可以解决用媒体查询带来的响应式断层问题和rem的脚本依赖问题，

G6图可视化引擎针对业务通过自定义拓扑的节点和连线绘制业务的资源网络拓扑关系，

根据业务需要基于G6库自定义拓扑的节点，节点包含四个图形shape：rect边框层、labeltext文本层、image图片层、alarmtext文本层。rect边框层用来显示节点的选中边框，labeltext文本层显示资源的ip，image图片层显示资源的icon，alarmtext文本层位于节点右上方用来显示告警数量，

而业务场景中两资源可通过多端口连接，因此在节点中间定义展示多条连线，首先遍历关系数组，统计节点间需要绘制的连线条数，如果是多条连线就将连线类型设置为自定义的多条连线类型，如果只有一条连线，可将连线设置为直线；

使用vuex状态管理模式集中式存储管理状态量，主要管理三个状态量：场景id，节点id和节点类型id，场景id用来管理拓扑节点下钻，场景id可有两个取值，当id＝1时，代表此时页面拓扑是首页拓扑，展示的是最上层的拓扑关系；当id＝2时，表示此时页面的拓扑关系是下钻后的关系，Vuex中存储的场景id默认是1，可利用双击节点设置场景id为-1，节点id和节点类型id可通过双击节点后启动，可利用iview的ui组件库展示资源列表的导航菜单。

在上述过程中，前端框架结合展示告警级别的业务需要，可通过节点icon颜色来体现告警级别，告警级别信息更新后根据告警级别更新icon地址然后更新节点，根据此约定整理资源icon并命名，命名格式推荐用“资源名_告警级别”，并且前后端使用websocket协议进行告警信息通信，后端采集到告警后可以主动向后端推送信息，当接收到告警信息的推送时，根据节点id在拓扑节点中找到找到该节点并更新，其余资源信息前后端可通过ajax轮询获取的方式进行通信。

在上述过程中，本发明装置，利用前端框架和前端图可视化引擎G6建立，可以自适应各个分辨率的屏幕，根据屏幕分辨率自动调节字体和布局大小，并可利用节点id查询内容返回匹配到的资源列表，还可附加鹰眼功能实现快速预览，辅助用户探索大规模图，

当然点击节点可展示该资源属性、关键性能指标等信息，点击连线展示关系的起始节点和终止节点的端口、ip、设备类型等信息，网络拓扑图的节点也可根据需求拖动，操作过程可参考图2。

本发明还提供一种计算机可读存储介质，所述存储介质上存储有计算机程序，当所述计算机程序被处理器执行时，实现本发明一种可视化监控资源的前端实现方法执行时的命令和步骤。

以上所述实施例仅是为充分说明本发明而所举的较佳的实施例，本发明的保护范围不限于此。本技术领域的技术人员在本发明基础上所作的等同替代或变换，均在本发明的保护范围之内。本发明的保护范围以权利要求书为准。

Claims (10)

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

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

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

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

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

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

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

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

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

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

8.根据权利要求7所述的一种可视化监控资源的前端实现装置，其特征是前端图可视化引擎自定义拓扑的节点，拓扑的节点包含rect边框层、labeltext文本层、image图片层及alarmtext文本层，rect边框层用于显示节点的选中边框，labeltext文本层显示资源的ip，image图片层显示资源的icon，alarmtext文本层用来显示告警数量。

9.根据权利要求8所述的一种可视化监控资源的前端实现装置，其特征是利用图片层显示资源的icon的颜色变化，展示告警级别，告警级别更新后根据告警级别更新icon地址并更新节点的信息。

10.一种计算机可读存储介质，其特征是所述存储介质上存储有计算机程序，当所述计算机程序被处理器执行时，实现如权利要求1至6任一项所述的一种可视化监控资源的前端实现方法。

Images