换毫秒数为具体的时间格式为起始时间点，从而得到过去I小时的时间范围。同理得出今天、昨天、本周、上周、本月、上月的时间范围。。时间轴上连续时间块的范围选取功能，以不同颜色的刻度来表示相应时间范围内的网络性能参数意义，当单位时间刻度所表示的警报性能参数值等于O时，时间刻度显示为绿色，当单位时间刻度所表示的警报性能参数值大于O时，时间刻度显示为(红、橙、黄)中的一种颜色，每一种颜色可通过系统定义警报数值范围(如大于50小于100显示为红色)。时间轴上时间块的放大和缩小功能，鼠标放在选中的时间刻度上时，在刻度上会出现放大和缩小的图标(刻度为分钟时只显示放大的图标，刻度为小时时放大和缩小的图标同时出现，刻度为天时只显示缩小的图标)，点击缩小图标时，时间轴会以当前的时间轴的时间范围为单个时间刻度重新绘制时间轴，点击放大图标时，时间轴会以点击的图标所在刻度的时间范围为时间轴的时间范围重新绘制时间轴。时间轴自动刷新的功能，通过调用JavaScript自带的定时器功能(setlnterval)，来制作时间轴的定时刷新功能，当开启时间轴的自动刷新功能时，时间轴会立即刷新以系统的当前时间为时间轴的结束时间，以当前时间轴的时间刻度为准，计算出时间轴的时间范围，并每隔I分钟自动刷新。时间轴设置工作时间段的功能，定义工作时间段参数wo rkT i me，当wr ο kT i me为tr u e时，时间轴仅显示出系统定义好的工作时间刻度值(如时间轴包含一周，时间轴默认显示7个刻度，当系统定义了每周只有5个工作日时，并且workTime为true时，时间时间轴显示5个刻度)，正常/非正常时间块的前后自由跳转的功能，正常时间块的跳转会以当前刻度为准，上移或下移一个刻度为时间轴的选中刻度，非正常时间块的跳转会以当前刻度为准，上移或下移至相邻最近的一个有警报或事件的时间刻度为时间轴的选中刻度。
[0027]本发明中的时间轴基于有限状态机模型(有限个状态以及在这些状态之间的转移和动作等行为的数学模型)，使用JSX(网页中XML语法)为基本代码编写规范。定义了时间范围、自动刷新、工作时间段、时间刻度、选中时间、时间刻度放大的功能、时间刻度缩小的功能、时间刻度所表示的网络性能参数、时间区间选择、时间块跳转共10个基本组件。
[0028]其中，时间轴的时间范围有一种基本状态，始终显示时间轴的时间范围，当时间范围发生改变时(可自定义时间范围)，立即调用时间更新方法重新绘制时间轴。时间轴的自动刷新功能被定义成两种状态，即开或关，当组件状态为开时，会每隔一分钟调用时间轴更新方法，显示出系统最新时间的网络性能参数(警报或事件)，组件状态为关时，时间轴始终不刷新。时间轴的工作时间段也被定义成开和关两种状态，当组件状为开时，时间轴会立即更新，仅只显示系统定义好的工作时间段内的网络性能参数(警报或事件)，组件状态为关时，时间轴显示时间范围定义的所有时间刻度。时间刻度表示出时间轴的时间范围所包含的时间刻度数，如一小时包含60个分钟刻度、一天包含24个小时刻度、一个月包含30个天刻度，每一个时间刻度有五种(正常、警报高、警报中、警报低、警报事件)显示状态，用颜色块来表示出刻度所代表的时间范围内网络性能参数和意义，不同的颜色表示不同的意义(正常:绿色，警报高:红色，警报中:橙色，警报低:淡黄色，警报事件:红色横线)。
[0029]时间轴有且只会有一个选中时间刻度，选中的刻度用高亮背景颜色所标示，被选中的时间刻度所表示的时间范围会显示在选中时间组件中，时间轴有多少个时间刻度，选中时间就对应有多少个显示状态。被选中的时间刻度(天或小时)都有放大的功能，仅有一种显示状态，当时间刻度被放大时，时间轴会以当前时间刻度为整个时间轴的时间范围重新绘制时间轴，同时刻度递减(刻度天放大后变为小时)。被选中的时间刻度(分钟或小时)都有缩小的功能，仅有一种显示状态，当时间刻度被缩小时，时间轴会以当前时间刻度为新时间轴的选中时间重新绘制时间轴，同时刻度递增(刻度小时缩小后变为天)。当鼠标放在时间刻度上时，会弹出提框显示出该时间块所表示的网络性能参数的所示时间范围，时间轴有多少个时间刻度，提示框就对应有多少个显示状态。时间区间选择，可以在时间轴上作连续的时间区间选择，鼠标放在刻度上按住鼠标不动，拖动鼠标可在时间轴上做连续的时间区间选择，时间轴的选中时即显示出选中刻度所包含的时间范围。时间轴刻度的跳转功能。可以按顺序前后跳转至正常或有警报的时间刻度，当点击跳转到上一个刻度或下一个刻度时，时间轴选中的刻度会跳转到相邻的时间刻度，当点击跳转到上一个警报刻度或下一个警报刻度时，会先从相邻的时间刻度中寻找是否有警报刻度，如果有，则跳转到相应的时间刻度，如果没有，则调用时间轴更新方法，从系统中查询到最近的警报时间刻度显示出来，如最近都是正常的时间刻度，则提示无警报时间段。
[0030]当时间轴被应用于一个实例(D0M对象)时，会传递一个时间段和时间刻度到后端数据库做一次查询，得到在所查询时间范围内有多少个可显示刻度、每一个刻度有多少网络警报和事件、时间刻度值、被选中的时间刻度下标值，将获取到的这些数据传递给时间轴绘制方法Uimeline(Params))，时间轴中每一个组件会根据从后端数据库获取到的数据，计算出组件应该所处的状态，每一个组件所处的状态对应一种显示界面，从而在网页中(DOM对象)渲染出一个完整的时间轴。
[0031]时间轴的范围并不局限于某一分钟、某一分钟、亦或是一天，可以自定义时间轴显示的时间范围区间(如:过去一小时、今天、昨天、本周、上周、本月、上月)。
[0032]上述的实施例中所给出的系数和参数，是提供给本领域的技术人员来实现或使用发明的，发明并不限定仅取前述公开的数值，在不脱离发明的思想的情况下，本领域的技术人员可以对上述实施例作出种种修改或调整，因而发明的保护范围并不被上述实施例所限，而应该是符合权利要求书提到的创新性特征的最大范围。
【主权项】
1.一种实时网络性能数据的时间轴展示方法，其具体包括以下的步骤:步骤一、采集并存储网络性能数据的服务器记录每一个时间刻度内的网络性能数据，所述时间刻度包括每分钟、每小时和每天;步骤二、通过Web界面的对话框定义出需要查询的时间刻度，并将该时间刻度发送给服务器进行查询，服务器根据所查询的时间刻度计算出需要返回的时间段的数据，所述数据包括时间刻度，网络性能数据以及时间区间；步骤三、将服务器返回的时间刻度，网络性能数据以及时间区间以参数的形式传递给时间轴绘制函数;步骤四、根据服务器返回的时间刻度，时间轴绘制函数在Web界面中绘制出相应的时间刻度，根据服务器返回的网络性能数据，时间轴绘制函数用不同的色彩或者图案表示对应的时间刻度，根据服务器返回的时间刻度范围，时间轴绘制函数将时间范围标注为时间轴的时间范围显示在时间轴顶部。2.如权利要求1所述的实时网络性能数据的时间轴展示方法，其特征在于所述方法还包括定时刷新时间轴。3.如权利要求1所述的实时网络性能数据的时间轴展示方法，其特征在于所述方法还包括通过Web界面定义选中时间，时间轴有且只有一个选中时间刻度，选中的刻度用高亮背景颜色标示，被选中的时间刻度所表示的时间范围显示在选中时间组件中。4.如权利要求3所述的实时网络性能数据的时间轴展示方法，其特征在于所述方法还包括放大和缩小选中时间刻度，当时间刻度为小时时，放大时间刻度后刻度为分，缩小时间刻后刻度为天。5.如权利要求1所述的实时网络性能数据的时间轴展示方法，其特征在于所述方法还包括设置工作时间段参数，当工作时间段参数为真时，时间轴仅显示出系统定义好的工作时间的刻度值。6.如权利要求1所述的实时网络性能数据的时间轴展示方法，其特征在于所述方法还包括当时间范围发生改变时，立即重新绘制时间轴。7.如权利要求1所述的实时网络性能数据的时间轴展示方法，其特征在于所述方法还包括当鼠标放在时间刻度上时，会弹出提框显示出该时间块所表示的网络性能参数。8.如权利要求4所述的实时网络性能数据的时间轴展示方法，其特征在于所述方法还包括选中时间刻度的跳转。9.一种实时网络性能数据的时间轴展示装置，其特征在于具体包括服务器、Web人机交互单元和时间轴绘单元;所述服务器用于采集并存储每一个时间刻度内的网络性能数据，所述时间刻度包括每分钟、每小时和每天;所述Web人机交互单元用于通过Web界面的对话框定义出需要查询的时间刻度，并将该时间刻度发送给服务器进行查询，服务器根据所查询的时间刻度计算出需要返回的时间段的数据，所述数据包括时间刻度，网络性能数据以及时间区间；所述时间轴绘单元用于根据服务器返回的时间刻度，在Web界面中绘制出相应的时间刻度，根据服务器返回的网络性能数据，时间轴绘制函数用不同的色彩或者图案表示对应的时间刻度，根据服务器返回的时间刻度范围，时间轴绘制函数将时间范围标注为时间轴的时间范围显示在时间轴顶部。
【专利摘要】本发明涉及Web界面显示技术领域，尤其涉及一种实时网络性能数据的时间轴展示方法，其具体包括以下的步骤：步骤一、采集并存储网络性能数据的服务器记录每一个时间刻度内的网络性能数据；步骤二、通过Web界面的对话框定义出需要查询的时间刻度，并将该时间刻度发送给服务器进行查询，服务器根据所查询的时间刻度计算出需要返回的时间段的数据，所述数据包括时间刻度，网络性能数据以及时间区间；步骤三、将服务器返回的时间刻度，网络性能数据以及时间区间以参数的形式传递给时间轴绘制函数；步骤四、时间轴绘制函数在Web界面中绘制出相应的时间刻度，用不同的色彩或者图案表示对应的刻度，并将时间范围标注为时间轴的时间范围显示在时间轴顶部。
【IPC分类】H04L12/26
【公开号】CN105591838
【申请号】CN201510941908
【发明人】罗鹰, 孟海坤, 林康
【申请人】成都科来软件有限公司
【公开日】2016年5月18日
【申请日】2015年12月16日