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

权利要求书

1.一种可视化监控资源的前端实现方法，其特征是利用vue-cli脚手架搭建前端，并引入G6图可视化引擎针对业务通过自定义拓扑的节点和连线绘制业务的资源网络拓扑关系，所述拓扑的节点包含rect边框层、labeltext文本层、image图片层及alarmtext文本层，rect边框层用于显示节点的选中边框，labeltext文本层显示资源的ip，image图片层显示资源的icon的颜色变化，展示告警级别，告警级别更新后根据告警级别更新icon地址并更新节点的信息，alarmtext文本层用来显示告警数量，

针对资源网络拓扑关系，利用vuex状态管理存储状态量，包括场景id，节点id以及节点类型id，并根据状态量确定当前场景拓扑，依据当前场景拓扑展示前端页面，其中状态量是场景id，则根据场景id取值判断页面拓扑是首页拓扑还是下钻后的页面拓扑，依据页面拓扑，根据节点id查询并展示相应节点，其中查询节点时，判断节点是否可以下钻，是则更新节点的状态量，根据需求请求下钻后的关系，更新页面视图，

使用websocket协议进行前后端告警通信，并在后端接收到告警时，根据节点id在拓扑的节点中找到相应节点并更新节点的信息。

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

前端框架利用vue-cli脚手架搭建，并引入前端图可视化引擎G6针对业务通过自定义拓扑的节点和连线绘制业务的资源网络拓扑关系，前端图可视化引擎自定义拓扑的节点，所述拓扑的节点包含rect边框层、labeltext文本层、image图片层及alarmtext文本层，rect边框层用于显示节点的选中边框，labeltext文本层显示资源的ip，image图片层显示资源的icon的颜色变化，展示告警级别，告警级别更新后根据告警级别更新icon地址并更新节点的信息，alarmtext文本层用来显示告警数量，

前端框架针对资源网络拓扑关系，利用vuex状态管理存储状态量，包括场景id，节点id以及节点类型id，并根据状态量确定当前场景拓扑，依据当前场景拓扑展示前端页面，其中状态量是场景id，则根据场景id取值判断页面拓扑是首页拓扑还是下钻后的页面拓扑，依据页面拓扑，根据节点id查询并展示相应节点，其中查询节点时，判断节点是否可以下钻，是则更新节点的状态量，根据需求请求下钻后的关系，更新页面视图，

使用websocket协议进行前后端告警通信，并在后端接收到告警时，根据节点id在拓扑的节点中找到相应节点并更新节点的信息。

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