-
Notifications
You must be signed in to change notification settings - Fork 1
/
index motai.html
357 lines (333 loc) · 10.8 KB
/
index motai.html
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>仿微信聊天</title>
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/bootstrap-table.min.css">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/responsive.css">
<script src = "js/jquery-3.1.0.min.js"></script>
<script src = "js/bootstrap.min.js"></script>
<script src = "js/bootstrap-table.min.js"></script>
<script src = "js/bootstrap-table-zh-CN.js"></script>
<script src = "js/highcharts.js"></script>
<script src = "js/jquery.highchartTable.js"></script>
<script type = "text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GS0gGAVjvLofVs576BaPEb5fFa8ch7U5"></script>
<script src="js/my_write.js"></script>
</head>
<body style = "overflow-x:hidden;">
<div id="header">
<nav class = "header_nav navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-4 com-lg-4 hd_left">
<p>伪基站追踪</p>
</div>
<div class="col-md-8 com-lg-8 hd_right">
<span id="header_add" class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
</nav>
</div>
<div id="plus_sign">
<div class="container">
<div class="row">
<div class="col-md-1 col-md-offset-11">
<div class="plus_sign_logoin">
<a href="#">登陆</a>
<a href="#">退出</a>
<a href="#">我的</a>
</div>
</div>
</div>
</div>
</div>
<div id="tab">
<div class="tab_box">
<div style="margin-top:70px;">
<div id="content" class="shebei_list">
<div class="container">
<div class="row">
<div class="list col-md-12 col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">伪基站设列表</h3>
</div>
<div id="toolbar">
<button id="btn1">扫描</button>
<button id="btn2">获取</button>
</div>
<div class="panel-body table-responsive">
<ul>
<li>
<table id="list_table">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="id">ID</th>
<th data-field="model_name">设备</th>
<th data-field="model_number">型号</th>
</tr>
</thead>
</table>
<a href="#" data-toggle="modal" data-target="#myModal">
<div class="row">
<div class="col-md-2 cont_left">
<img class="img-responsive" src="images/shebei.jpg" alt="">
</div>
<div class="col-md-10 cont_right">
<p>
序列号:XNBBGR07E0072802
</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style = "margin-top:50px;" id="modal_details">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="modal_content">
<div class="modal_list">
<ul>
<li>
<div class="row">
<div class="col-md-12">
<a href="#">
<span class="glyphicon glyphicon-zoom-in"></span> 扫描记录
</a>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-12">
<a href="#">
<span class="glyphicon glyphicon-map-marker"></span> 跟踪记录
</a>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-12">
<a href="#">
<span class="glyphicon glyphicon-trash"></span> 删除记录
</a>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-12">
<a href="#">
<span class="glyphicon glyphicon-off"></span> 关闭设备
</a>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-md-12">
<a href="#">
<span class="glyphicon glyphicon-send"></span> 进入频段扫描
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hide1 saomiao_chart" style="margin-top:70px;">
<div class="row">
<div class="col-md-12">
<div id="container" style="width: 100%;height: 300px;">
</div>
</div>
</div>
<script>
$('document').ready(function(){
var url = "json/bootstrap_table.json";
var heng = new Array();
var shu = new Array();
function getForm(){
$.getJSON(url,function(data){
var i,len=data.length;
for(i = 0;i < len;i++) {
heng.push(parseInt(data[i].charts_number));
shu.push(parseFloat(data[i].charts_power));
}
});
LoadGrid(heng, shu); //调用初始化
heng.splice(0,heng.length);
shu.splice(0,shu.length);
}
getForm()
window.setInterval(getForm,3000);
});
//自定义初始化函数接收动态数据
function LoadGrid(heng,shu) {
$('#container').highcharts({ //图表展示容器，与 div 的 id 保持一致
chart: {
type: 'column' //指定图表的类型，默认是折线图（line）
},
title: {
text: '伪基站动态更新图', //指定图表标题
style: {
color: "#7CB5EC"
},
},
xAxis: {
categories: heng, //指定x轴分组
title: {
text: '序号' //指定x轴标题
}
},
yAxis: {
title: {
text: 'dmb' //指定y轴的标题
}
},
series: [{ //指定数据列
name: '功率', //数据列名
data: shu //数据
}],
credits: {
enabled: false, //默认值，如果想去掉版权信息，设置为false即可
text: '北京小牛奔奔科技有限公司',
href: 'http://www.xiaoniuben.com',
position: {
align: 'right',
x: -50,
verticlAlign: 'bottom',
y: -30
}
}
});
}
</script>
<div class="col-md-12 col-lg-12 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">基站数量<i class="jz_number">22</i></h3><br>
<h4 class="panel-title text-center">设备位置：北京市北京市通州区科创十三街附近</h4>
</div>
<div class="panel-body">
<table id="jz_charts"
data-toggle="table"
data-url="json/bootstrap_table.json"
data-method="post"
data-query-params="queryParams"
data-toolbar="#toolbar"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-page-size="5"
>
<thead>
<tr>
<th data-field="charts_number">
序号
</th>
<th data-field="charts_route">信道</th>
<th data-field="charts_frequency">频率</th>
<th data-field="charts_power">功率</th>
<th data-field="charts_snr">snr</th>
<th data-field="charts_mcc">mcc</th>
<th data-field="charts_mnc">mnc</th>
<th data-field="charts_lac">lac</th>
<th data-field="charts_cellid">cellid</th>
<th data-field="charts_yunyingshang">运营商</th>
<th data-field="charts_operation">操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="hide1" style="margin-top:70px;">
<div class="row">
<div class="col-md-12">
<div style="width:100%;height:554px;overflow:hidden;" id="allmap"></div>
</div>
</div>
</div>
<div class="hide1" style="margin-top:70px;">
<div class="container">
<div class="row">
<div class="col-md-12">
我的我的我的我的我的
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<nav class = "navbar navbar_bottom navbar-default navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center tab_menu">
<a class="selected shebei" href="javascript:;">
<span class= "glyphicon glyphicon-book">
</span><br>设备
</a>
<a href="javascript:;" class="saomiao">
<span class= "glyphicon glyphicon-time">
</span><br>扫描
</a>
<a href="javascript:;">
<span class= "glyphicon glyphicon-screenshot"></span><br>跟踪
</a>
<a href="javascript:;">
<span class= "glyphicon glyphicon-user"></span><br>我的
</a>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
<script>
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
})
map.addControl(navigationControl);
</script>