2018-07-13 19:36:37 +08:00
|
|
|
<%@ page contentType="text/html;charset=UTF-8"%>
|
|
|
|
|
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<title>数据概览</title>
|
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/global/plugins/highcharts/css/common.css">
|
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/global/plugins/highcharts/css/data_text.css">
|
2018-08-24 14:17:53 +08:00
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
2018-09-10 11:39:04 +08:00
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/paginate.css">
|
2018-08-24 14:17:53 +08:00
|
|
|
|
|
|
|
|
<script src="${pageContext.request.contextPath}/static/pages/scripts/dashboard.js"></script>
|
2018-07-13 19:36:37 +08:00
|
|
|
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
|
|
<script src="js/html5shiv.min.js"></script>
|
|
|
|
|
<script src="js/respond.min.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!--content开始-->
|
|
|
|
|
<div class="data_content">
|
|
|
|
|
<!--header开始-->
|
2018-08-01 12:59:29 +08:00
|
|
|
<!-- <div class="header-title">
|
2018-07-13 19:36:37 +08:00
|
|
|
<div class="title-left fl"></div>
|
2018-07-17 09:13:19 +08:00
|
|
|
<div class="title-center fl"><a href="javascript:window.location.reload()"><i class="fa fa-line-chart"></i> 网络流量分析</a></div>
|
2018-07-13 19:36:37 +08:00
|
|
|
<div class="title-right fr"></div>
|
2018-07-23 18:48:53 +08:00
|
|
|
</div> -->
|
2018-08-24 14:17:53 +08:00
|
|
|
<div class="header">
|
2018-08-01 12:59:29 +08:00
|
|
|
<div class="data_info">
|
2018-08-24 14:17:53 +08:00
|
|
|
<div class="info_1 fl_fc">
|
2018-08-01 12:59:29 +08:00
|
|
|
<div class="text_1">
|
2018-08-24 14:17:53 +08:00
|
|
|
<div class="fr_fc">
|
|
|
|
|
<div class="fl_fc">
|
2018-08-01 12:59:29 +08:00
|
|
|
<a href="#">
|
|
|
|
|
<span>
|
2018-08-24 14:17:53 +08:00
|
|
|
<p><i class="fa fa-ban"> </i> 阻断链接数</p>
|
|
|
|
|
<p class="numberRun">15802</p>
|
2018-08-01 12:59:29 +08:00
|
|
|
</span>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-08-24 14:17:53 +08:00
|
|
|
<div class="fr_fc">
|
|
|
|
|
<div class="fl_fc">
|
2018-08-01 12:59:29 +08:00
|
|
|
<a href="#">
|
|
|
|
|
<span>
|
2018-08-24 14:17:53 +08:00
|
|
|
<p><i class="fa fa-external-link"></i> 新建链接数</p>
|
|
|
|
|
<p class="numberRun1">15802</p>
|
2018-08-01 12:59:29 +08:00
|
|
|
</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-08-24 14:17:53 +08:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info_2 fl_fc">
|
|
|
|
|
<div class="text_2">
|
|
|
|
|
<div class="fr_fc">
|
2018-08-01 12:59:29 +08:00
|
|
|
<!-- <i class="fa fa-bar-chart"></i> -->
|
2018-08-24 14:17:53 +08:00
|
|
|
<div class="fl_fc">
|
2018-08-01 12:59:29 +08:00
|
|
|
<a href="#">
|
|
|
|
|
<span>
|
2018-08-24 14:17:53 +08:00
|
|
|
<p><i class="fa fa-trash"> </i> 丢弃链接数</p>
|
|
|
|
|
<p class="numberRun2">15802</p>
|
2018-08-01 12:59:29 +08:00
|
|
|
</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-08-24 14:17:53 +08:00
|
|
|
<div class="fr_fc">
|
|
|
|
|
<div class="fl_fc">
|
|
|
|
|
<a href="${ctx}/dashboard/ipActiveList">
|
|
|
|
|
<span>
|
|
|
|
|
<p><i class="fa fa-heartbeat"> </i> 活跃链接数</p>
|
|
|
|
|
<p class="numberRun3">15802</p>
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
2018-08-01 12:59:29 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-08-24 14:17:53 +08:00
|
|
|
<div class="fr_fc">
|
|
|
|
|
<div class="fl_fc">
|
2018-09-10 11:39:04 +08:00
|
|
|
<a href="${ctx}/dashboard/bandwidthList">
|
2018-08-24 14:17:53 +08:00
|
|
|
<span>
|
|
|
|
|
<p><i class="fa fa-cloud-download"></i> 网络带宽</p>
|
2018-09-10 11:39:04 +08:00
|
|
|
<p class="csNum">c2s <span class="c2sNum">83</span>% <i id="c2sColor" class="fa fa-arrow-up"></i> | s2c <span class="s2cNum">17</span>% <i id="s2cColor" class="fa fa-arrow-down"></i></p>
|
2018-08-24 14:17:53 +08:00
|
|
|
<p class="numberRun4">15802</p>
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
2018-08-01 12:59:29 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2018-08-24 14:17:53 +08:00
|
|
|
<%-- <div class="info_3 fl_fc">
|
2018-08-01 12:59:29 +08:00
|
|
|
<div class="text_3">
|
2018-08-24 14:17:53 +08:00
|
|
|
<div class="fr_fc">
|
|
|
|
|
<div class="fl_fc">
|
|
|
|
|
<a href="${ctx}/dashboard/ipActiveList">
|
|
|
|
|
<span>
|
|
|
|
|
<p>网络带宽</p>
|
|
|
|
|
<p class="numberRun5">15802</p>
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
2018-08-01 12:59:29 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-08-24 14:17:53 +08:00
|
|
|
</div> --%>
|
2018-08-01 12:59:29 +08:00
|
|
|
</div>
|
2018-08-24 14:17:53 +08:00
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
</div>
|
2018-07-13 19:36:37 +08:00
|
|
|
<!--header结束-->
|
2018-09-10 11:39:04 +08:00
|
|
|
<!-- 第一行 -->
|
2018-07-13 19:36:37 +08:00
|
|
|
<div class="data_main">
|
|
|
|
|
<div class="main_left fl">
|
|
|
|
|
<div class="left_1">
|
|
|
|
|
<div class="main_title">
|
2018-09-10 11:39:04 +08:00
|
|
|
<spring:message code="traffic_ipactive_chart"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
<!-- 活跃IP图 --> <div id="chart_main" style="width:100%;height:400px;"></div>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
<!-- 协议类型图 -->
|
2018-07-13 19:36:37 +08:00
|
|
|
<div class="main_center fl">
|
|
|
|
|
<div class="center_text">
|
|
|
|
|
<div class="main_title">
|
2018-09-10 11:39:04 +08:00
|
|
|
<spring:message code="traffic_protocol_chart"/> <a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-list-ul"></i></a>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 第2行 -->
|
|
|
|
|
<div class="data_main1">
|
|
|
|
|
<div class="main_left1 fl">
|
|
|
|
|
<div class="left_1">
|
|
|
|
|
<div class="main_title1">
|
|
|
|
|
<spring:message code="传输层协议"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 传输层协议图 --><!-- <div id="chart_transport" style="width:100%;height:400px;"></div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_center1 fl">
|
|
|
|
|
<div class="center_text1">
|
|
|
|
|
<div class="main_title1">
|
|
|
|
|
<spring:message code="traffic_app_chart"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="choice">
|
|
|
|
|
<label for="">类型：</label>
|
|
|
|
|
<select name="" id="">
|
|
|
|
|
<option value="">核心</option>
|
|
|
|
|
<option value="">其它</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<%-- <div class="main_right1 fr">
|
2018-07-13 19:36:37 +08:00
|
|
|
<div class="right_1">
|
2018-09-10 11:39:04 +08:00
|
|
|
<div class="main_title1">
|
2018-08-01 12:59:29 +08:00
|
|
|
<spring:message code="traffic_app_chart"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
|
|
|
|
<!-- <div class="choice">
|
|
|
|
|
<label for="">类型：</label>
|
|
|
|
|
<select name="" id="">
|
|
|
|
|
<option value="">核心</option>
|
|
|
|
|
<option value="">其它</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
|
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
</div> --%>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 第3行 -->
|
|
|
|
|
<%-- <div class="data_main2">
|
|
|
|
|
<!-- 中图 -->
|
|
|
|
|
<div class="main_center2 fl">
|
|
|
|
|
<div class="center_text2">
|
|
|
|
|
<div class="main_title2">
|
|
|
|
|
<spring:message code="业务分类"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="chart_main" style="width:100%;height:400px;"></div>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="main_right2 fr">
|
|
|
|
|
<div class="right_1">
|
|
|
|
|
<div class="main_title2">
|
|
|
|
|
<spring:message code="传输层协议"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
</div>
|
|
|
|
|
--%>
|
|
|
|
|
<!-- 第4行 -->
|
|
|
|
|
<div class="data_bottom">
|
|
|
|
|
<div class="bottom_1 fl">
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<spring:message code="traffic_ua_list"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><spring:message code="ranking"/></th>
|
|
|
|
|
<th>
|
|
|
|
|
<div class="choice">
|
|
|
|
|
<select name="uaSelect" id="uaSelect">
|
|
|
|
|
<option value="system"><spring:message code="os"/></option>
|
|
|
|
|
<option value="browser"><spring:message code="browser"/></option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<th><spring:message code="trend"/></th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="tbodyData1">
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>windows</td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-07-13 19:36:37 +08:00
|
|
|
<div class="bottom_center fl">
|
|
|
|
|
<div class="bottom_2 fl">
|
|
|
|
|
<div class="main_title">
|
2018-07-17 10:09:34 +08:00
|
|
|
<spring:message code="traffic_ua_chart"/>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="main_table">
|
2018-09-10 11:39:04 +08:00
|
|
|
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
<%-- <div class="bottom_3 fl">
|
2018-07-13 19:36:37 +08:00
|
|
|
<div class="main_title">
|
2018-09-10 11:39:04 +08:00
|
|
|
<spring:message code="traffic_website_list"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="main_table">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
2018-07-17 10:09:34 +08:00
|
|
|
<th><spring:message code="ranking"/></th>
|
|
|
|
|
<th><spring:message code="website"/></th>
|
|
|
|
|
<th><spring:message code="trend"/></th>
|
2018-07-13 19:36:37 +08:00
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="tbodyData2">
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
2018-09-10 11:39:04 +08:00
|
|
|
<td>baidu.com</td>
|
2018-07-13 19:36:37 +08:00
|
|
|
<td>0</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
--%>
|
|
|
|
|
<div class="bottom_3 fl">
|
|
|
|
|
<div class="center_text2">
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<spring:message code="业务分类"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 业务分类图 --><div id="chart_serviceType" style="width:100%;height:400px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<%-- <div class="bottom_4 fr">
|
2018-07-13 19:36:37 +08:00
|
|
|
<div class="main_title">
|
2018-07-17 10:09:34 +08:00
|
|
|
<spring:message code="traffic_website_type_chart"/>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="main_table">
|
|
|
|
|
<div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
--%>
|
2018-07-13 19:36:37 +08:00
|
|
|
</div>
|
2018-09-10 11:39:04 +08:00
|
|
|
<!-- 第5行 -->
|
|
|
|
|
<div class="data_bottom2">
|
|
|
|
|
<div class="bottom_12 fl">
|
|
|
|
|
<div class="main_title2">
|
|
|
|
|
<spring:message code="traffic_website_list"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table2">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><spring:message code="ranking"/></th>
|
|
|
|
|
<th><spring:message code="website"/></th>
|
|
|
|
|
<th><spring:message code="trend"/></th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="tbodyData2">
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>baidu.com</td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bottom_center2 fl">
|
|
|
|
|
<div class="bottom_22 fl">
|
|
|
|
|
<div class="main_title2">
|
|
|
|
|
<spring:message code="traffic_website_type_chart"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table2">
|
|
|
|
|
<!-- http网站分类图 --><div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<%-- <div class="bottom_32 fl">
|
|
|
|
|
<div class="center_text22">
|
|
|
|
|
<div class="main_title2">
|
|
|
|
|
<spring:message code="活跃端口图"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 活跃端口图 --><div id="chart_port" style="width:100%;height:400px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> --%>
|
|
|
|
|
|
|
|
|
|
<!-- 活跃端口图 -->
|
|
|
|
|
<div class="bottom_32 fl">
|
|
|
|
|
<div class="main_title2">
|
|
|
|
|
<spring:message code="活跃端口图"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table2">
|
|
|
|
|
<table id="contentTable">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><spring:message code="ranking"/></th>
|
|
|
|
|
<th><spring:message code="port"/></th>
|
|
|
|
|
<th><spring:message code="访问次数"/></th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="tbodyDataPort">
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
<td>1</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="demo1"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2018-07-13 19:36:37 +08:00
|
|
|
<!--content结束-->
|
|
|
|
|
<!-- 列表显示 -->
|
|
|
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
|
|
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/data.js"></script>
|
|
|
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/drilldown.js"></script>
|
2018-08-01 12:59:29 +08:00
|
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
2018-07-13 19:36:37 +08:00
|
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/echart.js"></script>
|
2018-09-10 11:39:04 +08:00
|
|
|
<script src="${pageContext.request.contextPath}/static/pages/scripts/paginate.js"></script>
|
2018-07-13 19:36:37 +08:00
|
|
|
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$(document).ready(function(){
|
2018-09-10 11:39:04 +08:00
|
|
|
$("#demo1").paginate({
|
|
|
|
|
count : 10, //页数
|
|
|
|
|
start : 1, //开始打开第几页
|
|
|
|
|
display : 3, //显示几个页数 : true,
|
|
|
|
|
border_color : '#3D3D3D',
|
|
|
|
|
text_color : '#757575',
|
|
|
|
|
background_color : '#303030',
|
|
|
|
|
border_hover_color : '#3D3D3D',
|
|
|
|
|
text_hover_color : '#fff',
|
|
|
|
|
background_hover_color : '#3D3D3D',
|
|
|
|
|
images : false,
|
|
|
|
|
mouse : 'press'
|
|
|
|
|
});
|
2018-08-24 14:17:53 +08:00
|
|
|
//动态显示数据
|
2018-09-10 11:39:04 +08:00
|
|
|
ajaxinfo();
|
|
|
|
|
setInterval(function(){
|
|
|
|
|
ajaxinfo();
|
|
|
|
|
},6000);
|
2018-07-13 19:36:37 +08:00
|
|
|
|
|
|
|
|
protocolList();//协议统计
|
|
|
|
|
ipActiveList();//活跃IP
|
|
|
|
|
appTypeList();//应用类型
|
|
|
|
|
systemList();//操作系统列表
|
|
|
|
|
websiteList();//http网站列表
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
uaSelectChange($('#uaSelect').val());
|
|
|
|
|
//当选择改变时触发
|
|
|
|
|
$('#uaSelect').change(function(){
|
|
|
|
|
uaSelectChange($('#uaSelect').val());
|
|
|
|
|
});
|
2018-07-17 09:13:19 +08:00
|
|
|
|
2018-08-24 14:17:53 +08:00
|
|
|
});
|
2018-09-10 11:39:04 +08:00
|
|
|
|
|
|
|
|
//获取数据info
|
|
|
|
|
function ajaxinfo(){
|
|
|
|
|
var c2s = $(".c2sNum").text().trim();
|
|
|
|
|
var s2c = $(".s2cNum").text().trim();
|
|
|
|
|
$.ajax({
|
|
|
|
|
url:'${ctx}/dashboard/traffic/info',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
dataType:'json',
|
|
|
|
|
async:true,
|
|
|
|
|
success:function (data){
|
|
|
|
|
dataScroll(".numberRun",data.rejectNum);
|
|
|
|
|
dataScroll(".numberRun1",data.newUniConn);
|
|
|
|
|
dataScroll(".numberRun2",data.liveConnNum);
|
|
|
|
|
dataScroll(".numberRun3",data.dropConnNum);
|
|
|
|
|
dataScroll(".numberRun4",data.bandwidth);
|
|
|
|
|
//计算带宽进出口流量百分比
|
|
|
|
|
$("#c2sColor").removeClass();
|
|
|
|
|
$("#s2cColor").removeClass();
|
|
|
|
|
if(data.c2sNum!=c2s){
|
|
|
|
|
$(".c2sNum").text(data.c2sNum);
|
|
|
|
|
$(".s2cNum").text(100-data.c2sNum);
|
|
|
|
|
if(data.c2sNum>c2s){
|
|
|
|
|
//c2s增长 fa fa-arrow-up
|
|
|
|
|
$("#c2sColor").addClass("fa fa-arrow-up");
|
|
|
|
|
$("#c2sColor").attr({style:"color:green"});
|
|
|
|
|
$("#s2cColor").addClass("fa fa-arrow-down");
|
|
|
|
|
$("#s2cColor").attr({style:"color:red"});
|
|
|
|
|
}
|
|
|
|
|
//c2s下降
|
|
|
|
|
if(data.c2sNum<c2s){
|
|
|
|
|
$("#c2sColor").addClass("fa fa-arrow-down");
|
|
|
|
|
$("#c2sColor").attr({style:"color:red"});
|
|
|
|
|
$("#s2cColor").addClass("fa fa-arrow-up");
|
|
|
|
|
$("#s2cColor").attr({style:"color:green"});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2018-08-24 14:17:53 +08:00
|
|
|
//动态显示数据
|
2018-09-10 11:39:04 +08:00
|
|
|
function dataScroll(index,nums){
|
|
|
|
|
var num=nums;
|
|
|
|
|
var numRun = $(index).numberAnimate({num:num, speed:3000, symbol:","});
|
|
|
|
|
// var nums = 1000;
|
|
|
|
|
// setInterval(function(){
|
|
|
|
|
// nums-= 1000;
|
2018-08-24 14:17:53 +08:00
|
|
|
numRun.resetData(nums);
|
2018-09-10 11:39:04 +08:00
|
|
|
// },2000);
|
2018-08-24 14:17:53 +08:00
|
|
|
|
|
|
|
|
}
|
2018-07-13 19:36:37 +08:00
|
|
|
|
|
|
|
|
//切换下拉列表-操作系统与浏览器
|
|
|
|
|
function uaSelectChange(ua){
|
|
|
|
|
if(ua=="system"){
|
|
|
|
|
systemList();
|
|
|
|
|
}
|
|
|
|
|
if(ua=="browser"){
|
|
|
|
|
browserList();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//协议类型统计
|
|
|
|
|
function protocolList(){
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/protocol',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
echart_1(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//活跃IP统计
|
|
|
|
|
function ipActiveList(){
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/ipActive',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
echart_main(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//app应用类型统计
|
|
|
|
|
function appTypeList(){
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/app',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
echart_3(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//获取终端用户-操作系统列表 左下
|
|
|
|
|
function systemList(){
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/osList',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
beforeSend: function () {
|
|
|
|
|
|
2018-07-17 10:09:34 +08:00
|
|
|
var msg = "Reloading...";
|
2018-07-13 19:36:37 +08:00
|
|
|
var trLen = $("#tbodyData1 tr").length;
|
|
|
|
|
if(trLen<=0) {
|
2018-07-17 10:09:34 +08:00
|
|
|
msg = "OnLoading...";
|
2018-07-13 19:36:37 +08:00
|
|
|
}else {
|
|
|
|
|
$("#tbodyData1").html("")
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var tr = "<tr class='frist rowData'>";
|
|
|
|
|
tr += "<td class='list_c1' colspan='3' align='center'>"+msg+"</td>";
|
|
|
|
|
|
|
|
|
|
$("#tbodyData1").prepend(tr);
|
|
|
|
|
},
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
$("#tbodyData1").html("");
|
|
|
|
|
rs.reverse();
|
|
|
|
|
var n=rs.length;
|
|
|
|
|
$(rs).each(function(i, itemObj) {
|
2018-08-01 12:59:29 +08:00
|
|
|
var tr = "<tr class='frist rowData' >";
|
2018-07-13 19:36:37 +08:00
|
|
|
tr += "<td class='list_c1'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+n+"</a></td>";
|
2018-07-23 18:48:53 +08:00
|
|
|
tr += "<td class='list_c2'><a href='javascript:;' data-toggle='tooltip' title='"+itemObj.osType+"' onclick='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</a></td>";
|
|
|
|
|
if(itemObj.preCount<itemObj.count){
|
|
|
|
|
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
|
|
|
|
}else if(itemObj.preCount>itemObj.count){
|
|
|
|
|
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
|
|
|
|
|
}else{
|
2018-08-01 12:59:29 +08:00
|
|
|
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"--"+"</a></td></tr>";
|
2018-07-23 18:48:53 +08:00
|
|
|
}
|
2018-07-13 19:36:37 +08:00
|
|
|
n=n-1;
|
|
|
|
|
$("#tbodyData1").prepend(tr);
|
|
|
|
|
})
|
|
|
|
|
//终端图-操作系统
|
|
|
|
|
echart_2(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 点击操作系统列表右侧显示 浏览器图
|
|
|
|
|
function osClick(osType){
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/browserChart',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
data:{"osType":osType},
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
echart_5(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
//点击浏览器列表右侧显示 操作系统图
|
|
|
|
|
function bsClick(bsType){
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/systemChart',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
data:{"bsType":bsType},
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
echart_2(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//获取终端用户-浏览器列表
|
|
|
|
|
function browserList() {
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/bsList',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
beforeSend: function () {
|
|
|
|
|
|
2018-07-17 10:09:34 +08:00
|
|
|
var msg = "Reloading...";
|
2018-07-13 19:36:37 +08:00
|
|
|
var trLen = $("#tbodyData1 tr").length;
|
|
|
|
|
if(trLen<=0) {
|
2018-07-17 10:09:34 +08:00
|
|
|
msg = "OnLoading...";
|
2018-07-13 19:36:37 +08:00
|
|
|
}else {
|
|
|
|
|
$("#tbodyData1").html("")
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var tr = "<tr class='frist rowData'>";
|
|
|
|
|
tr += "<td class='list_c1' colspan='3' align='center'>"+msg+"</td>";
|
|
|
|
|
|
|
|
|
|
$("#tbodyData1").prepend(tr);
|
|
|
|
|
},
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
$("#tbodyData1").html("");
|
|
|
|
|
rs.reverse();
|
|
|
|
|
var n=rs.length;
|
|
|
|
|
$(rs).each(function(i, itemObj) {
|
|
|
|
|
|
|
|
|
|
var tr = "<tr class='frist rowData'>";
|
|
|
|
|
tr += "<td class='list_c1'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+n+"</a></td>";
|
2018-07-17 09:13:19 +08:00
|
|
|
tr += "<td class='list_c2'><a data-toggle='tooltip' title='"+itemObj.bsType+"' href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+itemObj.bsType+"</a></td>";
|
2018-07-23 18:48:53 +08:00
|
|
|
if(itemObj.preCount<itemObj.count){
|
|
|
|
|
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
|
|
|
|
}else if(itemObj.preCount>itemObj.count){
|
|
|
|
|
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
|
|
|
|
|
}else{
|
|
|
|
|
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+""+"</a></td></tr>";
|
|
|
|
|
}
|
2018-07-13 19:36:37 +08:00
|
|
|
$("#tbodyData1").prepend(tr);
|
|
|
|
|
n=n-1;
|
|
|
|
|
})
|
|
|
|
|
//终端图-浏览器
|
|
|
|
|
echart_5(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//获取http网站
|
|
|
|
|
function websiteList() {
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/websiteList',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
beforeSend: function () {
|
|
|
|
|
|
2018-07-17 10:09:34 +08:00
|
|
|
var msg = "ReLoading...";
|
2018-07-13 19:36:37 +08:00
|
|
|
var trLen = $("#tbodyData2 tr").length;
|
|
|
|
|
if(trLen<=0) {
|
2018-07-17 10:09:34 +08:00
|
|
|
msg = "OnLoading...";
|
2018-07-13 19:36:37 +08:00
|
|
|
}else {
|
|
|
|
|
$("#tbodyData2").html("")
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var tr = "<tr class='frist rowData'>";
|
|
|
|
|
tr += "<td class='list_c1' colspan='3' align='center'>"+msg+"</td>";
|
|
|
|
|
|
|
|
|
|
$("#tbodyData2").prepend(tr);
|
|
|
|
|
},
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
$("#tbodyData2").html("");
|
|
|
|
|
rs.reverse();
|
|
|
|
|
var n=rs.length;
|
|
|
|
|
$(rs).each(function(i, itemObj) {
|
|
|
|
|
|
|
|
|
|
var tr = "<tr class='frist rowData'>";
|
|
|
|
|
tr += "<td class='list_c1'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+n+"</a></td>";
|
|
|
|
|
tr += "<td class='list_c2'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+itemObj.webId+"</a></td>";
|
2018-07-23 18:48:53 +08:00
|
|
|
if(itemObj.preCount<itemObj.count){
|
|
|
|
|
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
|
|
|
|
}else if(itemObj.preCount>itemObj.count){
|
|
|
|
|
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
|
|
|
|
|
}else{
|
|
|
|
|
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+""+"</a></td></tr>";
|
|
|
|
|
}
|
2018-07-13 19:36:37 +08:00
|
|
|
|
|
|
|
|
$("#tbodyData2").prepend(tr);
|
|
|
|
|
n=n-1;
|
|
|
|
|
})
|
|
|
|
|
//网站统计图
|
|
|
|
|
echart_4(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
//点击http网站列表-显示网站分类图
|
|
|
|
|
function webClick(webId){
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '${ctx}/dashboard/webTypeChart',
|
|
|
|
|
type : "get" ,
|
|
|
|
|
data:{"webId":webId},
|
|
|
|
|
dataType:"json",
|
|
|
|
|
async:true,
|
|
|
|
|
success:function (rs) {
|
|
|
|
|
echart_6(rs);
|
|
|
|
|
},
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
// warning_prompt("获取实时列表数据失败！",1500);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2018-08-01 12:59:29 +08:00
|
|
|
|
2018-07-13 19:36:37 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
