1.nis配置文件增加图表查询服务接口2.增加统计图表展示及相关插件
This commit is contained in:
zhanghongqing
514
src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp
Normal file
514
src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp
Normal file
@@ -0,0 +1,514 @@
|
||||
<%@ 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">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<script src="js/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--content开始-->
|
||||
<div class="data_content">
|
||||
<!--header开始-->
|
||||
<div class="header-title">
|
||||
<div class="title-left fl"></div>
|
||||
<div class="title-center fl"><a href="javascript:window.location.reload()">网络流量分析</a></div>
|
||||
<div class="title-right fr"></div>
|
||||
</div>
|
||||
<!--header结束-->
|
||||
|
||||
<div class="data_main">
|
||||
<div class="main_left fl">
|
||||
<div class="left_1">
|
||||
<div class="main_title">
|
||||
<img src="img/title_1.png" alt="">
|
||||
协议类型统计
|
||||
</div>
|
||||
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中图 -->
|
||||
<div class="main_center fl">
|
||||
<div class="center_text">
|
||||
<div class="main_title">
|
||||
<img src="img/title_3.png" alt="">
|
||||
活跃IP统计图
|
||||
</div>
|
||||
<div id="chart_main" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_right fr">
|
||||
<div class="right_1">
|
||||
<div class="main_title">
|
||||
<img src="img/title_4.png" alt="">
|
||||
APP流量分析
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data_bottom">
|
||||
<div class="bottom_1 fl">
|
||||
<div class="main_title">
|
||||
<img src="img/title_6.png" alt="">
|
||||
终端用户TOP10
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>
|
||||
<div class="choice">
|
||||
<select name="uaSelect" id="uaSelect">
|
||||
<option value="system">系统</option>
|
||||
<option value="browser">浏览器</option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
<th>数量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData1">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>mac</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Linux</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>DOS</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>iOS</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_center fl">
|
||||
<div class="bottom_2 fl">
|
||||
<div class="main_title">
|
||||
<img src="img/title_6.png" alt="">
|
||||
终端用户图
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<div id="chart_2" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_3 fl">
|
||||
<div class="main_title">
|
||||
<img src="img/title_6.png" alt="">
|
||||
网站流量TOP10
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>网站名称</th>
|
||||
<th>数量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData2">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>百度</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>腾讯</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Google</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Yahoo</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>qq</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Googleusercontent</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Microsoftonline</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Pornhub</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Youtube</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Facebook</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_4 fr">
|
||||
<div class="main_title">
|
||||
<img src="img/title_5.png" alt="">
|
||||
网站流量分析
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--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>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/echart.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
protocolList();//协议统计
|
||||
ipActiveList();//活跃IP
|
||||
appTypeList();//应用类型
|
||||
systemList();//操作系统列表
|
||||
websiteList();//http网站列表
|
||||
|
||||
|
||||
uaSelectChange($('#uaSelect').val());
|
||||
//当选择改变时触发
|
||||
$('#uaSelect').change(function(){
|
||||
uaSelectChange($('#uaSelect').val());
|
||||
});
|
||||
})
|
||||
|
||||
//切换下拉列表-操作系统与浏览器
|
||||
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 () {
|
||||
|
||||
var msg = "重新加载数据，请稍候...";
|
||||
var trLen = $("#tbodyData1 tr").length;
|
||||
if(trLen<=0) {
|
||||
msg = "数据加载中，请稍候...";
|
||||
}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:osClick(\""+itemObj.osType+"\");'>"+n+"</a></td>";
|
||||
tr += "<td class='list_c2'><a data-toggle='tooltip' title='"+itemObj.osType+"' href='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</a></td>";
|
||||
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.count+"</a></td></tr>";
|
||||
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 () {
|
||||
|
||||
var msg = "重新加载数据，请稍候...";
|
||||
var trLen = $("#tbodyData1 tr").length;
|
||||
if(trLen<=0) {
|
||||
msg = "onLoading...";
|
||||
}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>";
|
||||
tr += "<td class='list_c2'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+itemObj.bsType+"</a></td>";
|
||||
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+itemObj.count+"</a></td></tr>";
|
||||
|
||||
$("#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 () {
|
||||
|
||||
var msg = "重新加载数据，请稍候...";
|
||||
var trLen = $("#tbodyData2 tr").length;
|
||||
if(trLen<=0) {
|
||||
msg = "数据加载中，请稍候...";
|
||||
}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>";
|
||||
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+itemObj.count+"</a></td></tr>";
|
||||
|
||||
$("#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) {
|
||||
console.log(rs)
|
||||
echart_6(rs);
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
// warning_prompt("获取实时列表数据失败！",1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user