基于Canvas的业务调用链视图生成展示方法及装置制造方法及图纸

本发明专利技术公开了一种基于Canvas的业务调用链视图生成展示方法及装置，包括如下步骤：S1：获取用于绘制业务链的流程数据信息，所述流程数据信息包括流程名称、流程说明和日志分组；S2：在具有Canvas元素的画布上绘制Canvas图形，根据流程数据信息创建流程节点，进行节点信息关联、节点图形渲染和节点配置；S3：创建流程节点关系，根据流程数据信息将各个业务节点连接起来，形成业务调用链视图；S4：通过Web界面展示业务调用链视图。本发明专利技术利用浏览器HTML5新特性Canvas和JavaScript来实现拓扑关系图展现，直接在前端浏览器进行绘制和渲染，操作便捷；采用拓扑组件结合获取的业务需求，用过手工拖拽方式实现业务调用链图的绘制，便于对业务关系进行清晰的展现。于对业务关系进行清晰的展现。于对业务关系进行清晰的展现。

【技术实现步骤摘要】
基于Canvas的业务调用链视图生成展示方法及装置


[0001]本专利技术涉及业务调用链图绘制领域，尤其涉及一种基于Canvas的业务调用链视图生成展示方法及装置。

技术介绍

[0002]目前对业务调用链的绘制方法，是由后端Java进行绘制图片，得到绘制后的图片。再将绘制后的图片传入前端，并在浏览器端进行图片的渲染和展示。但是不仅传输图片的传输过程比较慢，而且对图片进行渲染的过程也很慢。并且绘制的业务调用链视图仅仅展示业务关系，无法监控业务调用链的各个节点的状态。
[0003]Canvas：<canvas>是HTML5新增的，一个可以使用脚本在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。后来，有人通过Gecko内核的浏览器(尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。Mozilla程序从Gecko 1.8(Firefox 1.5)开始支持<canvas>,Internet Explorer从IE9开始<canvas>。Chrome和Opera 9+也支持<canvas>。
[0004]JavaScript：JavaScript(简称“JS”)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。
[0005]因此，有必要提供一种基于Canvas的业务调用链视图生成展示方法及装置，简单方便的进行节点渲染和配置。

技术实现思路

[0006]本专利技术要解决的技术问题是提供一种基于Canvas的业务调用链视图生成展示方法及装置，解决现有的业务调用链绘制方式操作繁琐的问题。
[0007]本专利技术为解决上述技术问题而采用的技术方案是提供一种基于Canvas的业务调用链视图生成展示方法，包括如下步骤：S1：获取用于绘制业务链的流程数据信息，所述流程数据信息包括流程名称、流程说明和日志分组；S2：在具有Canvas元素的画布上绘制Canvas图形，根据流程数据信息创建流程节点，进行节点信息关联、节点图形渲染和节点配置；S3：创建流程节点关系，根据流程数据信息将各个业务节点连接起来，形成业务调用链视图；S4：通过Web界面展示业务调用链视图。
[0008]进一步地，所述流程说明和日志分组包括流程中各个节点的名称以及各个节点对应的日志分组、节点类型、父节点名称、关联字段和搜索条件及关键信息；所述节点类型包
括开始节点、中间节点和结束节点。
[0009]进一步地，所述步骤S2包括如下步骤：S21：选择节点图形放置于画布，根据节点ID关联流程节点信息，包括节点名称、日志分组、节点类型、父节点名称、关联字段和搜索条件及关键信息。S22：根据节点对应的关联字段的指标信息配置该节点渲染的颜色标识，所述颜色标识描述该节点的状态；S23：给节点配置显示弹窗，所述显示弹窗显示对应节点的指标信息；S24：给显示弹窗配置搜索弹窗，通过所述搜索弹窗查看指标信息的趋势图。
[0010]进一步地，通过Web界面展示业务调用链视图时，当光标指向节点图形时，显示弹窗显示对应节点的指标信息；当点击显示弹窗时，通过搜索弹窗搜索节点所属的日志，查看指标信息的趋势图。
[0011]进一步地，所述步骤S22包括：获取节点图形在画布上的位置，在节点图形位置范围内设定渲染颜色标志，在指标信息值大于等于设定值时，将节点图形的边框渲染为红色，表示该节点出现异常；在指标信息值小于设定值时，将节点图形的边框渲染为蓝色，表示该节点正常。
[0012]进一步地，所述步骤S22还包括给节点配置告警弹窗，通过Web界面展示业务调用链视图时，如果某个节点出现异常，即该节点的指标信息值大于等于设定值，Web界面显示告警弹窗，发出告警提示，同时将告警对应的异常业务节点的边框渲染为红色。
[0013]进一步地，所述步骤S3包括如下步骤：S31：确认当前节点的节点类型；S32：若为开始节点则等待连接；S33：若为中间节点或者结束节点，则获取父节点名称，采用直线或者曲线将当前节点连接到其对应的父节点；S34：移动到下一节点，重复步骤S31
‑
S33完成所有节点的连接，形成业务调用链视图。
[0014]本专利技术为解决上述技术问题而采用的另一技术方案是提供一种基于Canvas的业务调用链视图生成展示装置，包括获取模块，用于获取绘制业务链的流程数据信息，其中，所述流程数据信息包括流程名称、流程说明和日志分组；所述获取模块定时更新获取的流程数据信息；绘制模块，用于在画布上绘制Canvas图形，得到对应绘制的业务调用链视图，所述画布为具有Canvas元素的画布；展示模块，用于在显示设备的显示屏幕通过Web界面展示所述绘制模块绘制的业务调用链视图。
[0015]本专利技术对比现有技术有如下的有益效果：本专利技术提供的基于Canvas的业务调用链视图生成展示方法及装置，利用浏览器HTML5新特性Canvas和JavaScript来实现拓扑关系图展现，直接在前端浏览器进行绘制和渲染，操作便捷；采用拓扑组件结合获取的业务需求，用过手工拖拽方式实现业务调用链图的绘制，而且能够即配置即所得；通过人性化的配置界面，进行节点配置，对于业务关系有比较清晰的展现，同时，对于发生异常的业务节点提供告警提醒，极大便利相关人员维护排查异常。
附图说明
[0016]图1为本专利技术实施例中基于Canvas的业务调用链视图生成展示方法流程图。
具体实施方式
[0017]下面结合附图和实施例对本专利技术作进一步的描述。
[0018]图1为本专利技术实施例中基于Canvas的业务调用链视图生成展示方法流程图。
[0019]请参见图1，本专利技术实施例的基于Canvas的业务调用链视图生成展示方法，包括如下步骤：
[0020]步骤S1：获取用于绘制业务链的流程数据信息，所述流程数据信息包括流程名称、流程说明和日志分组；流程说明和日志分组包括流程中各个节点的名称以及各个节点对应的日志分组、节点类型、父节点名称、关联字段和搜索条件及关键信息；所述节点类型包括开始节点、中间节点和结束节点。
[0021]步骤S2：在具有Canvas元素的画布上绘制Canvas图形，根据流程数据信息创建流程节点，进行节点信息关联、本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Canvas的业务调用链视图生成展示方法，其特征在于，包括如下步骤：S1：获取用于绘制业务链的流程数据信息，所述流程数据信息包括流程名称、流程说明和日志分组；S2：在具有Canvas元素的画布上绘制Canvas图形，根据流程数据信息创建流程节点，进行节点信息关联、节点图形渲染和节点配置；S3：创建流程节点关系，根据流程数据信息将各个业务节点连接起来，形成业务调用链视图；S4：通过Web界面展示业务调用链视图。2.如权利要求1所述的基于Canvas的业务调用链视图生成展示方法，其特征在于，所述流程说明和日志分组包括流程中各个节点的名称以及各个节点对应的日志分组、节点类型、父节点名称、关联字段和搜索条件及关键信息；所述节点类型包括开始节点、中间节点和结束节点。3.如权利要求2所述的基于Canvas的业务调用链视图生成展示方法，其特征在于，所述步骤S2包括如下步骤：S21：选择节点图形放置于画布，根据节点ID关联流程节点信息，包括节点名称、日志分组、节点类型、父节点名称、关联字段和搜索条件及关键信息。S22：根据节点对应的关联字段的指标信息配置该节点渲染的颜色标识，所述颜色标识描述该节点的状态；S23：给节点配置显示弹窗，所述显示弹窗显示对应节点的指标信息；S24：给显示弹窗配置搜索弹窗，通过所述搜索弹窗查看指标信息的趋势图。4.如权利要求3所述的基于Canvas的业务调用链视图生成展示方法，其特征在于，通过Web界面展示业务调用链视图时，当光标指向节点图形时，显示弹窗显示对应节点的指标信息；当点击显示弹窗时，通过搜索弹窗搜索节点所属的日志，查看指标信息的趋势图。5.如权利要求3所述的基于Canvas的...

【专利技术属性】
技术研发人员：程永新，宋辉，欧宇星，
申请(专利权)人：上海轻维软件有限公司，
类型：发明
国别省市：