gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

流量统计调整图形位置，增加加载层遮罩，处理到G流量级别

Browse Source
This commit is contained in:
zhanghongqing
2018-10-30 15:30:02 +08:00
parent 5efc61733a
commit 4d88e64e1e
1 changed files with 101 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp
View File

@@ -175,11 +175,6 @@
</tr>
</thead>
<tbody id="tbodyDataPort">
<tr>
<td>80</td>
<td>16764</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
@@ -194,10 +189,12 @@
<div class="main_left1 fl">
<div class="left_1">
<div class="main_title1">
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
<spring:message code="topic"/>&nbsp;&nbsp;<%-- <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a> --%>
<a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!-- 网站主题分类图 --><div id="chart_topic" style="width:100%;height:400px;"></div>
</div>
</div>
@@ -217,11 +214,6 @@
</tr>
</thead>
<tbody id="tbodyData2">
<tr>
<td>1</td>
<td>baidu.com</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
@@ -237,32 +229,62 @@
</div>
</div>
</div>
</div>
<!-- 第三行-->
<div class="data_main1">
<div class="main_left1 fl">
<div class="left_1">
<div class="main_title1">
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
</div>
</div>
<div class="main_center1 fl">
<div class="bottom_web fl">
<div class="main_title_web">
<!-- 终端 -->BS &nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a>
</div>
<div class="main_table_web">
<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">
</tbody>
</table>
</div>
</div>
</div>
<div class="main_right1 fl">
<div class="bottom_web fl">
<%-- <div class="main_title_web">
<spring:message code="traffic_website_type_chart"/>
</div> --%>
<div class="main_table_web">
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
</div>
</div>
</div>
</div>
<!-- 第3行 -->
<%-- <div class="data_main2">
<!-- 中图 -->
<div class="main_center2 fl">
<div class="center_text2">
<div class="main_title2">
<spring:message code="业务分类"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
</div>
<div id="chart_main" style="width:100%;height:400px;"></div>
</div>
</div>
<div class="main_right2 fr">
<div class="right_1">
<div class="main_title2">
<spring:message code="传输层协议"/>&nbsp;&nbsp;<a href="#"><i class="fa fa-list-ul"></i></a>
</div>
<div id="chart_3" class="" style="width:100%;height: 400px;"></div>
</div>
</div>
</div>
--%>
<!-- 第4行 -->
<div class="data_bottom">
<%-- <div class="data_bottom">
<div class="bottom_1 fl">
<div class="main_title">
<!-- 终端 -->BS &nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
@@ -297,14 +319,14 @@
<div class="bottom_center fl">
<div class="bottom_2 fl">
<%-- <div class="main_title">
<div class="main_title">
<spring:message code="BS"/>
</div> --%>
</div>
<div class="main_table">
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
</div>
</div>
<%-- <div class="bottom_3 fl">
<div class="bottom_3 fl">
<div class="main_title">
<spring:message code="traffic_website_list"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
</div>
@@ -327,16 +349,16 @@
</table>
</div>
</div>
--%>
<div class="bottom_3 fr">
<div class="bottom_3 fl">
<div class="main_title">
<spring:message code="topic"/>&nbsp;&nbsp;<%-- <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a> --%>
<a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!-- 网站主题分类图 --><div id="chart_topic" style="width:100%;height:400px;"></div>
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
</div>
</div>
</div>
</div> --%>
</div>
@@ -435,6 +457,7 @@ function ajaxinfo(){
var bandwidth=data.bandwidth;
var bandwidthK=bandwidth/1024;
var bandwidthM=bandwidthK/1024;
var bandwidthG=bandwidthG/1024;
if(bandwidth==null||bandwidth==""){
bandwidth=0;
}
@@ -446,6 +469,10 @@ function ajaxinfo(){
bandwidth=bandwidthM;
$(".numberRun4-unit").text(" Mbps");
}
if(bandwidthG>10){
bandwidth=bandwidthG;
$(".numberRun4-unit").text(" Mbps");
}
dataScroll(".numberRun4",Math.floor(bandwidth));
//计算带宽进出口流量百分比
// $("#c2sColor").removeClass();
@@ -453,9 +480,11 @@ function ajaxinfo(){
var inoctetsNum=Math.floor(data.inoctetsNum);
var inoctetsNumK=inoctetsNum/1024;
var inoctetsNumM=inoctetsNumK/1024;
var inoctetsNumG=inoctetsNumM/1024;
var outoctetsNum=Math.floor(data.outoctetsNum);
var outoctetsNumK=outoctetsNum/1024;
var outoctetsNumM=outoctetsNumK/1024;
var outoctetsNumG=outoctetsNumM/1024;
var unit="bps";
if(inoctetsNumK>10){
inoctetsNum=inoctetsNumK;
@@ -467,6 +496,11 @@ function ajaxinfo(){
outoctetsNum=outoctetsNumM;
unit="Mbps";
};
if(inoctetsNumG>10){
inoctetsNum=inoctetsNumG;
outoctetsNum=outoctetsNumG;
unit="Mbps";
};
$(".c2sNum").text(Math.floor(inoctetsNum)+" "+unit);
$(".s2cNum").text(Math.floor(outoctetsNum)+" "+unit);
/* if(data.inoctetsNum!=c2s){
@@ -513,6 +547,7 @@ function uaSelectChange(){
//协议类型统计
function protocolList(){
loading();
$.ajax({
url: '${ctx}/dashboard/protocol',
type : "get" ,
@@ -524,6 +559,7 @@ function protocolList(){
return;
}else{
echart_1(rs);
closeTip();
}
},
});
@@ -531,7 +567,7 @@ function protocolList(){
}
//活跃IP统计
function ipActiveList(){
loading();
$.ajax({
url: '${ctx}/dashboard/ipActive',
type : "get" ,
@@ -543,6 +579,7 @@ function ipActiveList(){
return;
}else{
echart_main(rs);
closeTip();
}
},
});
@@ -550,7 +587,7 @@ function ipActiveList(){
}
//活跃端口统计
function portActiveList(){
loading();
$.ajax({
url: '${ctx}/dashboard/portActive',
type : "get" ,
@@ -606,7 +643,7 @@ function portActiveList(){
//app应用类型统计
function appTypeList(){
loading();
$.ajax({
url: '${ctx}/dashboard/app',
type : "get" ,
@@ -618,6 +655,7 @@ function appTypeList(){
return;
}else{
echart_3(rs);
closeTip();
}
},
});
@@ -625,7 +663,7 @@ function appTypeList(){
}
//获取终端用户-操作系统列表 左下
function systemList(){
loading();
$.ajax({
url: '${ctx}/dashboard/osList',
type : "get" ,
@@ -676,6 +714,7 @@ function systemList(){
}
//终端图-操作系统
echart_2(rs.reverse());
closeTip();
}
},
});
@@ -684,6 +723,7 @@ function systemList(){
function osClick(osType,obj){
//点击行变色
$("#tbodyData1 tr").removeClass("activeColor");
loading();
$(obj).addClass("activeColor");
$.ajax({
@@ -694,12 +734,14 @@ function osClick(osType,obj){
cache:false,async:true,
success:function (rs) {
echart_5(rs.reverse());
closeTip();
},
});
}
//点击浏览器列表右侧显示 操作系统图
function bsClick(bsType,obj){
$("#tbodyData1 tr").removeClass("activeColor");
loading();
$(obj).addClass("activeColor");
$.ajax({
url: '${ctx}/dashboard/systemChart',
@@ -709,6 +751,7 @@ function bsClick(bsType,obj){
cache:false,async:true,
success:function (rs) {
echart_2(rs.reverse());
closeTip();
},
});
}
@@ -716,7 +759,7 @@ function bsClick(bsType,obj){
//获取终端用户-浏览器列表
function browserList() {
loading();
$.ajax({
url: '${ctx}/dashboard/bsList',
type : "get" ,
@@ -767,6 +810,7 @@ function browserList() {
}
//终端图-浏览器
echart_5(rs.reverse());
closeTip();
}
},
});
@@ -774,7 +818,7 @@ function browserList() {
}
//获取http网站table列表
function websiteList() {
loading();
$.ajax({
url: '${ctx}/dashboard/websiteList',
type : "get" ,
@@ -822,6 +866,7 @@ function websiteList() {
}
//网站统计图
echart_4(rs.reverse());
closeTip();
}
},
});
@@ -830,6 +875,7 @@ function websiteList() {
function webClick(websiteServiceId,obj){
//点击行变色
$("#tbodyData2 tr").removeClass("activeColor");
loading();
$(obj).addClass("activeColor");
$.ajax({
@@ -840,11 +886,13 @@ function webClick(websiteServiceId,obj){
cache:false,async:true,
success:function (rs) {
echart_6(rs);
closeTip();
},
});
}
//网站主题
function topicAndDomainList(){
loading();
$.ajax({
url: '${ctx}/dashboard/topicAndDomainList',
type : "get" ,
@@ -853,6 +901,7 @@ function topicAndDomainList(){
success:function (rs) {
//主题域名流量统计图
echart_topic_domain(rs);
closeTip();
},
});
}