index.html
4.52 KB
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!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));
console.log("-----------------------------------");
console.log(data1);
console.log(data2);
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="";
$.ajax({
url:"/SunvoteEducation/api/v1/printmsg",
type:"post",
async:"true",
success:function(data){
var j=0;
console.log(data.data);
for(var js2 in data.data){
console.log(j);
var data1=[];
var data2=[];
var i=-1;
var speedNumN ;
var dwN ;
for(var js1 in data.data[js2]){
data1[i] = parseInt(js1);
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);
if(data1[i] > i){
i = data1[i];
speedNumN = speedNum;
dwN = dw;
}
}
_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>';
$(".container ul").html(_html);
console.log(data2);
if(data1.length==0){
}else{
category(j,data1,data2);
}
j++;
}
}
})
if(time == 1){
setTimeout("getData()",1000);
}
}
getData();
$(document).on("click","img",function(){
$(this).parent('.libox').eq(0).siblings('.tabBox').toggle();
})
var time = 0;
$("#start").click(function(){
time = 1;
setTimeout("getData()",1000);
})
$("#stop").click(function(){
time = 0 ;
})
</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>