孙向锦 / SunvoteEducation

Blame view

WebRoot/afterService/speed/index.html 4.52 KB
Edit Raw Normal View History
37b828b6   孙向锦   速度监测 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
      <title>上传速度</title>
  
      <!-- Bootstrap -->
      <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  	<!--react-->
  	<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  	<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
  	<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
  
  	<!--ECharts-->
  	<script src="echarts.min.js"></script>
      <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
      <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
      <!--[if lt IE 9]>
        <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
  	<style>
  		li{list-style:none;padding:15px 0;border-bottom:1px solid #ccc;}
  		li .speed{float:right;}
  		li img{float:right;width:20px;margin-top: 5px;margin-left: 20px;}
  		.tabBox{border-top:1px dashed #ccc;margin-top:15px;display:none;}
  		.btn-group{padding:30px 0;border-bottom:2px solid #ccc;width:100%;}
      
  	</style>
    </head>
    <body>
  	<div class="container">
  		<div class="btn-group">
  			<button type="button" class="btn btn-primary" id="start">开启自动更新</button>
  			<button type="button" class="btn btn-success" id="stop">停止自动更新</button>
  		</div>
  		<ul>
  			<li>
  				<div class="libox">
  					<span>192.168.0.1</span>
  					<img src="down.png" />
  					<span class="speed">111kb/s</span>
  				</div>
  				<div class="tabBox">
  					<div id="main" style="width:1000px;height:400px;"></div>
  				</div>
  			</li>
  		</ul>
  	</div>
  	
  	
  	
  	
  	<script type="text/babel">
  	 
  	 
  	 function category(index,data1,data2){
  		var myChart = echarts.init(document.getElementById('main'+index));
6b3a5ad0   孙向锦   添加管理员界面 
62
63
64
 
  		console.log("-----------------------------------");
  		console.log(data1);
  		console.log(data2);
37b828b6   孙向锦   速度监测 
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
  		var option = {
  			xAxis: {
  				type: 'category',
  				data: data1
  			},
  			yAxis: {
  				type: 'value'
  			},
  			series: [{
  				data: data2,
  				type: 'line',
  				itemStyle : { normal: {label : {show: true}}}
  			}]
  		};
  	 myChart.setOption(option);
  	 }
  	function getData(){
  	var dw="byte/s";
  	var _html="";
6b3a5ad0   孙向锦   添加管理员界面 
84
37b828b6   孙向锦   速度监测 
85
86
87
88
89
 
  		$.ajax({
  			url:"/SunvoteEducation/api/v1/printmsg",
  			type:"post",
  			async:"true",
  			success:function(data){
6b3a5ad0   孙向锦   添加管理员界面 
90
91
 
  				
  				var j=0;
37b828b6   孙向锦   速度监测 
92
93
 
  				console.log(data.data);
  				for(var js2 in data.data){
6b3a5ad0   孙向锦   添加管理员界面 
94
37b828b6   孙向锦   速度监测 
95
96
97
 
  					console.log(j);
  					var data1=[];
  					var data2=[];
6b3a5ad0   孙向锦   添加管理员界面 
98
99
100
 
  					var i=-1;
  					var speedNumN ;
  					var dwN ;
37b828b6   孙向锦   速度监测 
101
 
  					for(var js1 in data.data[js2]){
6b3a5ad0   孙向锦   添加管理员界面 
102
 
  						data1[i] = parseInt(js1);
37b828b6   孙向锦   速度监测 
103
104
105
106
107
108
109
110
111
112
113
 
  						var speedNum=parseInt(data.data[js2][js1]);
  						data2[i]=speedNum.toFixed(2);
  						if(speedNum>1024){
  							dw="kb/s";
  							speedNum=parseInt(data.data[js2][js1])/1024;
  						}
  						if(speedNum>1024){
  							speedNum = speedNum/1024;
  							dw="Mb/s";
  						}
  						speedNum=speedNum.toFixed(2);
6b3a5ad0   孙向锦   添加管理员界面 
114
115
116
117
 
  						if(data1[i] > i){
  							i = data1[i];
  							speedNumN = speedNum;
  							dwN = dw;
37b828b6   孙向锦   速度监测 
118
 
  						}
37b828b6   孙向锦   速度监测 
119
 
  					}
6b3a5ad0   孙向锦   添加管理员界面 
120
121
 
  					
  					_html+='<li><div class="libox"><span>'+js2+'</span><img src="down.png" /><span class="speed">'+speedNumN+dwN+'</span></div><div class="tabBox"><div id="main'+j+'" style="width: 1000px;height:400px;margin:0 auto;"></div></div></li>';
37b828b6   孙向锦   速度监测 
122
123
124
125
126
127
128
 
  					$(".container ul").html(_html);	
  					console.log(data2);
  					if(data1.length==0){
  						
  					}else{
  						category(j,data1,data2);
  					}
6b3a5ad0   孙向锦   添加管理员界面 
129
130
 
  						
  					j++;
37b828b6   孙向锦   速度监测 
131
132
133
134
 
  				}	
  
  			}
  		})
6b3a5ad0   孙向锦   添加管理员界面 
135
136
137
 
  		if(time == 1){
  			setTimeout("getData()",1000);
  		}
37b828b6   孙向锦   速度监测 
138
139
140
141
142
 
  	}
  	getData();
  	$(document).on("click","img",function(){
  		$(this).parent('.libox').eq(0).siblings('.tabBox').toggle();
  	})
6b3a5ad0   孙向锦   添加管理员界面 
143
 
  	var time = 0;
37b828b6   孙向锦   速度监测 
144
 
  	$("#start").click(function(){
6b3a5ad0   孙向锦   添加管理员界面 
145
146
 
  		time = 1;
  		setTimeout("getData()",1000);
37b828b6   孙向锦   速度监测 
147
148
 
  	})
  	$("#stop").click(function(){
6b3a5ad0   孙向锦   添加管理员界面 
149
 
  		time = 0 ;
37b828b6   孙向锦   速度监测 
150
151
152
153
154
155
156
157
158
159
 
  	})
  	
  	</script>
  
      <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
      <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
      <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
      <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
  </html>