实时报表-流量统计菜单下新增统计菜单，对多个业务内容进行统计及业务之间的切换，以图表和列表的方式展示
This commit is contained in:
shangguanyanfei
1028
src/main/webapp/WEB-INF/views/dashboard/commonNew.jsp
Normal file
1028
src/main/webapp/WEB-INF/views/dashboard/commonNew.jsp
Normal file
File diff suppressed because it is too large
Load Diff
389
src/main/webapp/WEB-INF/views/dashboard/configStatisticTrans.jsp
Normal file
389
src/main/webapp/WEB-INF/views/dashboard/configStatisticTrans.jsp
Normal file
@@ -0,0 +1,389 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
<spring:message code="config_statistics"></spring:message>
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body >
|
||||
|
||||
<div class="page-content">
|
||||
<div class="theme-panel hidden-xs hidden-sm">
|
||||
</div>
|
||||
<div class="row" >
|
||||
<form:form id="searchForm" action="${ctx}/dashboard/traffic/ajaxConfigStatistic" method="get" class="form-search">
|
||||
<input id="beginDate" type="hidden" value="${beginDate}"/>
|
||||
<input id="endDate" type="hidden" value="${endDate}"/>
|
||||
<input id="cfgId" type="hidden" value="${cfgId}"/>
|
||||
<input id="timeSize" type="hidden" value="${timeSize}"/>
|
||||
<input id="chartType_1" type="hidden" value="${chartType_1}"/>
|
||||
<input id="cfgDesc" type="hidden" value="${cfgDesc}"/>
|
||||
<input id="total" type="hidden"/>
|
||||
<div class="pull-left" style="padding-top: 6px;padding-left: 10px;">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<span class="selectpicker form-control" ><spring:message code="chart_type"/></span>
|
||||
</div>
|
||||
<select id="chartType" class="selectpicker select2 input-small">
|
||||
<option value ="line" selected><spring:message code="line_chart"/></option>
|
||||
<option value ="bar"><spring:message code="bar_chart"/></option>
|
||||
<option value ="pie"><spring:message code="pie_chart"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
</div>
|
||||
<div id="chart" style="width:95%;height:500px;"></div>
|
||||
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
//给图表类型下拉框设置默认值
|
||||
$("#chartType option[value='"+ $("#chartType_1").val()+"'] ").attr("selected",true);
|
||||
// $("#chartType").val($("#chartType_1").val());
|
||||
configTrans();
|
||||
$("#chartType").on("change",function(){
|
||||
configTrans();
|
||||
});
|
||||
|
||||
});
|
||||
//活跃IP一小时间隔五分钟统计
|
||||
function configTrans(){
|
||||
loading();
|
||||
var beginDate=$("#beginDate").val();
|
||||
var endDate=$("#endDate").val();
|
||||
var cfgId=$("#cfgId").val();
|
||||
var timeSize=$("#timeSize").val();
|
||||
var chartType = $("#chartType").val();
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/ajaxConfigStatistic',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"timeSize":timeSize,"cfgId":cfgId},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (rs) {
|
||||
$("#tbodyData").html("");
|
||||
var xData=new Array();
|
||||
var series=new Array();
|
||||
var total = 0;
|
||||
if(rs!=null&&rs.length>0){
|
||||
total=rs[0].sum;
|
||||
series.push({
|
||||
name: '<spring:message code="config_log_total"/>',
|
||||
data: rs[0].result,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
series.push({
|
||||
name: ' ',
|
||||
data: []
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showConfigTrans(chartType,xData,series);
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function showConfigTrans(chartType,xData,series){
|
||||
var nowDate=new Date();
|
||||
var cfgDesc=$("#cfgDesc").val();
|
||||
if(cfgDesc ==null || cfgDesc ==""){
|
||||
cfgDesc="";
|
||||
}else{
|
||||
cfgDesc="-"+cfgDesc;
|
||||
}
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="config_statistics"/>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: $("#cfgId").val()+cfgDesc
|
||||
},
|
||||
xAxis: {
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
},
|
||||
title: {
|
||||
text: 'time',
|
||||
align:'high',
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
radius: 2,
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 7,
|
||||
radiusPlus: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// pie
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
|
||||
series: series,
|
||||
}
|
||||
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'Configs';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
var div = document.createElement('div'), xlsxRows = [], xlsxColumns = [];
|
||||
var nowDate=new Date();
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total=[];
|
||||
var totalValue = JSON.parse($("#total").val());
|
||||
total.push(totalValue)
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
var title=[];
|
||||
rows.push(total)
|
||||
title.push('<spring:message code="config_statistics"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="config_statistics"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
/* xlsxRows = H.map(rows.slice(1), function(row) {
|
||||
return H.map(row, function(column) {
|
||||
return {
|
||||
type : typeof column === 'number' ? 'number' : 'string',
|
||||
value : column
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
var b = new Array();
|
||||
b.push({
|
||||
type : 'string',
|
||||
value : '<spring:message code="domain_name"></spring:message>'
|
||||
})
|
||||
b.push({
|
||||
type : "string",
|
||||
value : start + "--" + end
|
||||
})
|
||||
xlsxRows.unshift(b);
|
||||
|
||||
var a = new Array();
|
||||
a.push({
|
||||
type : 'string',
|
||||
value : '<spring:message code="total"></spring:message>'
|
||||
})
|
||||
var total = JSON.parse($("#total").val());
|
||||
a.push({
|
||||
type : "number",
|
||||
value : total
|
||||
})
|
||||
xlsxRows.push(a)
|
||||
zipcelx({
|
||||
filename : '<spring:message code="domain_name"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
sheet : {
|
||||
data : xlsxRows
|
||||
}
|
||||
}); */
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null&&i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='config_statistics'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='config_statistics'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
399
src/main/webapp/WEB-INF/views/dashboard/newActionList.jsp
Normal file
399
src/main/webapp/WEB-INF/views/dashboard/newActionList.jsp
Normal file
@@ -0,0 +1,399 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
<div id="chart" style="width:97%;height:550px;"></div>
|
||||
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var lineColors=['#a9d4cf','#eecf8d','#f1aa76','#88b876','#E2875C','#EDC86B','#DF8F7E','#F0AEC9','#59BACE','#8E97EE'];
|
||||
|
||||
|
||||
function searchList(){
|
||||
loading();
|
||||
var start=$("#beginDate").val();
|
||||
var end=$("#endDate").val();
|
||||
$("#beginDateh").val(start);
|
||||
$("#endDateh").val(end);
|
||||
if(start==''||end==''||end==null||start==null){
|
||||
window.location.reload();
|
||||
}else{
|
||||
var search_action="";
|
||||
if($("#dimension_select").val() =="block"){
|
||||
search_action="action_reject";
|
||||
}
|
||||
if($("#dimension_select").val() =="monitor"){
|
||||
search_action="action_monit";
|
||||
}
|
||||
actionTransAjax(search_action,start,end);
|
||||
}
|
||||
}
|
||||
// 局点信息
|
||||
function showActionTransChart(chartType,xData,series){
|
||||
var nowDate=new Date();
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="${searchAction}"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
colors:['#e5e3cd','#f1e5cd','#f3ebdf','#f3f7f1','#F6DDD0','#FAF0D5','#F1CFC7','#F8DCE8','#CEEBF1','#CED3F8'],
|
||||
xAxis: {
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
},
|
||||
title: {
|
||||
text: 'time',
|
||||
align:'high',
|
||||
},
|
||||
labels: {
|
||||
rotation: -45, //倾斜的角度
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
min:0
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
marker: {
|
||||
radius: 2,
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 7,
|
||||
radiusPlus: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// layout: 'vertical',
|
||||
// align: 'right',
|
||||
// verticalAlign: 'middle'
|
||||
// },
|
||||
// pie
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
series: series,
|
||||
}
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'Actions';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
// 动作一小时，间隔五分钟统计数据
|
||||
function actionTransAjax(searchAction,beginDate,endDate){
|
||||
var chartType = $("#chartType").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var entranceId=$("#area_select").val();
|
||||
loading();
|
||||
$.ajax({
|
||||
url: "${ctx}/dashboard/traffic/actionEntranceTransNew?searchAction="+searchAction+"&beginDate="+beginDate+"&endDate="+endDate+"&timeSize="+timeSize+"&entranceId="+entranceId,
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (rs) {
|
||||
var xData=new Array();
|
||||
var series=new Array();
|
||||
var total=[];
|
||||
if(rs!=null&&rs.length>0){
|
||||
$(rs).each(function(i, d) {
|
||||
total.push(
|
||||
d.sum
|
||||
)
|
||||
var entrance="";
|
||||
if(d!=null&&d.entranceId==1){
|
||||
entrance="Astana";
|
||||
}
|
||||
if(d!=null&&d.entranceId==2){
|
||||
entrance="Almaty";
|
||||
}
|
||||
if(d!=null&&d.entranceId==null){
|
||||
entrance="Astana+Almaty";
|
||||
}
|
||||
series.push({
|
||||
name: entrance,
|
||||
data: d.result,
|
||||
lineColor:lineColors[i],
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
})
|
||||
}else{
|
||||
series.push({
|
||||
name: " ",
|
||||
data: []
|
||||
});
|
||||
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showActionTransChart(chartType,xData,series);
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
(function(H) {
|
||||
var nowDate=new Date();
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var div = document.createElement('div'),
|
||||
xlsxRows = [],
|
||||
xlsxColumns = [];
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total = JSON.parse($("#total").val());
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
rows.push(total)
|
||||
var title=[];
|
||||
title.push('<spring:message code="${searchAction}"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="${searchAction}"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
|
||||
/* xlsxRows = H.map(rows.slice(1), function(row) {
|
||||
return H.map(row, function(column) {
|
||||
return {
|
||||
type: typeof column === 'number' ? 'number' : 'string',
|
||||
value: column
|
||||
};
|
||||
});
|
||||
});
|
||||
var a =new Array();
|
||||
a.push({
|
||||
type:'string',
|
||||
value:'<spring:message code="total"></spring:message>'
|
||||
})
|
||||
|
||||
if(xlsxRows!=null&&xlsxRows!=undefined&&xlsxRows.length>0){
|
||||
for(var j=0;j<xlsxRows[0].length-1;j++){
|
||||
a.push({
|
||||
type:'number',
|
||||
value:0
|
||||
})
|
||||
}
|
||||
for(var i=1;i<xlsxRows.length;i++){
|
||||
for(var j=1;j<xlsxRows[i].length;j++){
|
||||
a[j].value=a[j].value+xlsxRows[i][j].value;
|
||||
}
|
||||
}
|
||||
}
|
||||
xlsxRows.push(a)
|
||||
|
||||
var b =new Array();
|
||||
b.push({
|
||||
type:'string',
|
||||
value:'<spring:message code="${searchAction}"></spring:message>'
|
||||
})
|
||||
b.push({
|
||||
type:"string",
|
||||
value:start+'--'+end
|
||||
})
|
||||
xlsxRows.unshift(b)
|
||||
|
||||
|
||||
|
||||
zipcelx({
|
||||
filename: '<spring:message code="${searchAction}"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
sheet: {
|
||||
data: xlsxRows
|
||||
}
|
||||
}); */
|
||||
};
|
||||
}(Highcharts));
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var total = JSON.parse($("#total").val());
|
||||
var data=[];
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null){
|
||||
if(i>0){
|
||||
data.push({
|
||||
num1:d[0],
|
||||
num2:d[1],
|
||||
num3:d[2],
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='report_total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDateh").val();
|
||||
var end = $("#endDateh").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='${searchAction}'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2","num3"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='${searchAction}'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
function sum(arr) {
|
||||
return arr.reduce(function(prev, curr, idx, arr){
|
||||
return prev + curr;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,647 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
|
||||
<style>
|
||||
td:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.Wdate {
|
||||
width: 200px !important;
|
||||
}
|
||||
</style>
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="row">
|
||||
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
|
||||
</div>
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
|
||||
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
|
||||
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
||||
</ul>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default css-print" onClick="doPrint()"><i class="fa glyphicon glyphicon-print" style="top:3px;margin-right: 3px;"></i><spring:message code="print"/></button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="row">
|
||||
<table id="contentTable" class="table table-active table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tl"><spring:message code="trend"/></th>
|
||||
<th class="tl"><spring:message code="client_ip"/></th>
|
||||
<th class="tl"><spring:message code="link_num"/></th>
|
||||
<th class="tl"><spring:message code="packets"/></th>
|
||||
<th class="tl"><spring:message code="pps"/></th>
|
||||
<th class="tl"><spring:message code="GByte"/></th>
|
||||
<th class="tl lowercase"><spring:message code="bps"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableData"></tbody>
|
||||
</table>
|
||||
<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
|
||||
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${ctxStatic }/pages/scripts/jQuery.print.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function searchList(){
|
||||
loading();
|
||||
var start=$("#beginDate").val();
|
||||
var end=$("#endDate").val();
|
||||
$("#beginDateh").val(start);
|
||||
$("#endDateh").val(end);
|
||||
var entranceId = $("#area_select").val();
|
||||
if(entranceId == "astana"){
|
||||
entranceId="1";
|
||||
}else if(entranceId =="almaty"){
|
||||
entranceId="2";
|
||||
}else{
|
||||
entranceId="";
|
||||
}
|
||||
if(start==''||end==''||end==null||start==null){
|
||||
window.location.reload();
|
||||
}else{
|
||||
ajaxClientIPList(start,end,entranceId);
|
||||
}
|
||||
}
|
||||
function ajaxClientIPList(start,end,entranceId){
|
||||
var chartType = $("#chartType").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var dimension = $("#dimension_select").val();
|
||||
var operator = $("#operator_select").val();
|
||||
loading();
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/activeClientIPListNew',
|
||||
type: 'get',
|
||||
dataType: "json",
|
||||
data:{"beginDate":start,"endDate":end,"entranceId":entranceId,"operator":operator,"dimension":dimension,"timeSize":timeSize},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
traditional:true,
|
||||
success:function (data){
|
||||
if(data!=null&&data.length>0&&data[0].error!=null){
|
||||
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
|
||||
return;
|
||||
}
|
||||
fileData =data;
|
||||
getPageData(1,20);//初始化第一页的数据
|
||||
pageJuan(20);//初始化分页
|
||||
clientIPChart(data,chartType);// 初始化图
|
||||
closeTip();
|
||||
if(data!= null&&data.length<1){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
}
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
}
|
||||
//打印列表
|
||||
function doPrint() {
|
||||
getPageData(1,999999);// 设置打印条数
|
||||
//统计数据
|
||||
var tb=document.getElementById("contentTable");
|
||||
var rows=tb.rows;
|
||||
$("#contentTable tbody tr").removeClass("hidden");
|
||||
//为某一列或者 某一行 添加样式
|
||||
addPrintTableCss(rows.length-1,0,"contentTable","print-title");
|
||||
|
||||
var title='<h3 style="text-align: center;font-weight:bold;"><spring:message code="client_ip"/></h3>';
|
||||
title+='<div style="text-align:center;font-weight:bold;"><spring:message code="begin_date"/>:'+$("#beginDate").val();
|
||||
title+=' ';
|
||||
title+='<spring:message code="end_date"/>:'+$("#endDate").val()+'</div>';
|
||||
$('.tr-total').addClass("tc");
|
||||
$("#contentTable").print({
|
||||
globalStyles: true,
|
||||
iframe: true,
|
||||
append: null,
|
||||
prepend: title
|
||||
});
|
||||
$('.tr-total').addClass("hidden");
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
}
|
||||
// 导出列表
|
||||
$(".export-btn").click(function(){
|
||||
var nowDate=new Date();
|
||||
var dataType = $(this).attr("data-type");
|
||||
getPageData(1,999999);// 设置导出页条数
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var htmlTitle="";
|
||||
htmlTitle+="<tr class='tr-title'>";
|
||||
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='client_ip'/>"+"</th>";
|
||||
htmlTitle+= "<th class='tc' colspan='2'>"+start+"--"+ end +"</th>";
|
||||
htmlTitle+="</tr>"
|
||||
$("#contentTable thead").prepend(htmlTitle);
|
||||
if(dataType=="xlsx"){
|
||||
getTableContent("contentTable");
|
||||
}else{
|
||||
var te = $("#contentTable").tableExport({
|
||||
headings:true,
|
||||
footers:true,
|
||||
formats:[dataType],
|
||||
fileName:"<spring:message code='client_ip'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
bootstrap:false
|
||||
});
|
||||
$("#myexport").click();
|
||||
$("caption").remove();
|
||||
}
|
||||
$(".tr-title").remove();
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
});
|
||||
/**
|
||||
* 调用后台接口
|
||||
* @param Int id 表格id
|
||||
* @return Array
|
||||
*/
|
||||
function getTableContent(id){
|
||||
var mytable = document.getElementById(id);
|
||||
var nowDate=new Date();
|
||||
var data = [];
|
||||
for(var i=0,rows=mytable.rows.length; i<rows; i++){
|
||||
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
|
||||
if(!data[i]){
|
||||
data[i] = new Array();
|
||||
}
|
||||
data[i][j] = mytable.rows[i].cells[j].innerText;
|
||||
}
|
||||
}
|
||||
var title= data.shift();
|
||||
var heard= data.shift();
|
||||
var map ={};
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=data;
|
||||
map["titleCode"]="<spring:message code='client_ip'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
}
|
||||
/**
|
||||
* 获取本页数据
|
||||
* @param currentPage 当前页数 【初次查数据，默认第1页】
|
||||
*/
|
||||
var fileData;
|
||||
function getPageData(currentPage,pageNumber){
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
//计算每页数据起始和终止数据编号
|
||||
// var pageNumber = 10;
|
||||
var maxLength = currentPage * pageNumber - 1;
|
||||
var minLength = currentPage * pageNumber - pageNumber;
|
||||
var pageData = [];
|
||||
for (var i = minLength; i < fileData.length; i++) {
|
||||
if (maxLength < i) {
|
||||
break;
|
||||
} else {
|
||||
pageData.push(fileData[i]);
|
||||
}
|
||||
}
|
||||
htmlData(pageData);
|
||||
}else{
|
||||
//把空数据传到页面中去
|
||||
htmlData(fileData);
|
||||
}
|
||||
}
|
||||
// 处理接口数据
|
||||
function htmlData(fileDataS){
|
||||
|
||||
$("#tableData").html("");
|
||||
if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
|
||||
$.each(fileDataS,function (index,data){
|
||||
if(data!=null){
|
||||
var totalLink = data.totalLink;
|
||||
var totalPackets= data.totalPackets;
|
||||
var totalGByte= data.totalGByte;
|
||||
var html = "<tr>";
|
||||
html+= "<td class='tc'><a href='#' onclick='openClientIPTrend(\""+data.sIp+"\")'><i class='fa fa-line-chart'></i></a></td>";
|
||||
if(data.sIp == undefined || data.sIp == null){
|
||||
html+= "<td class='tc'></td>";
|
||||
}else{
|
||||
html+= "<td class='tc'>"+data.sIp+"</td>";
|
||||
}
|
||||
html+= "<td class='tc'>"+data.linkNum+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.packets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+data.pps+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.GByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.bps*100)/100+"</td>";
|
||||
html+="</tr>"
|
||||
if(index==fileDataS.length-1){
|
||||
html+="<tr class='tr-total hidden'>"
|
||||
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
|
||||
html+= "<td class='tc'>" +"--"+"</td>"
|
||||
html+= "<td class='tc'>"+totalLink+"</td>";
|
||||
// html+= "<td class='tc'>" +"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalPackets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalGByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+="</tr>"
|
||||
}
|
||||
}
|
||||
$("#tableData").append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页控件处理
|
||||
*/
|
||||
function pageJuan(showData) {
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
var totalData = fileData.length;
|
||||
// var showData = 10;
|
||||
if(showData > totalData){
|
||||
showData = totalData;
|
||||
}
|
||||
var current=1;
|
||||
$('.M-box').pagination({
|
||||
totalData: totalData,
|
||||
showData: showData,
|
||||
coping: true,
|
||||
callback: function (index) {
|
||||
//改变显示开始和结束数据编号
|
||||
getPageData(index.getCurrent(),showData);
|
||||
current=index.getCurrent();
|
||||
$(".pageCurrent").val(current);
|
||||
}
|
||||
});
|
||||
if(totalData<20){
|
||||
$(".pageCurrent").val(1);
|
||||
}
|
||||
$(".pageTotal").text(totalData);
|
||||
$(".pageNum").text(Math.ceil(totalData/20));
|
||||
}
|
||||
}
|
||||
// 统计图
|
||||
function clientIPChart(rs,chartType){
|
||||
var dismen=$("#dimension_select").val();
|
||||
//终端用户 分操作系统与浏览器
|
||||
var data=new Array();
|
||||
var nowDate=new Date();
|
||||
|
||||
var dataline=new Array();
|
||||
var dataline1=new Array();
|
||||
var dataline2=new Array();
|
||||
var total=[];
|
||||
var totals=0;
|
||||
//根据不同的统计维度 展示不同的数据源
|
||||
if(dismen =="bps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.sIp,
|
||||
y: parseFloat(d.GByte),
|
||||
});
|
||||
dataline.push(d.sIp);
|
||||
dataline1.push(parseFloat(d.GByte));
|
||||
totals+=parseFloat(d.GByte);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="pps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.sIp,
|
||||
y: parseFloat(d.packets),
|
||||
});
|
||||
dataline.push(d.sIp);
|
||||
dataline1.push(parseFloat(d.packets));
|
||||
totals+=parseFloat(d.packets)
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="link count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.sIp,
|
||||
y: parseFloat(d.linkNum),
|
||||
});
|
||||
dataline.push(d.sIp);
|
||||
dataline1.push(parseFloat(d.linkNum));
|
||||
totals+=parseFloat(d.linkNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
// 创建图例
|
||||
var chart = {
|
||||
chart: {
|
||||
plotBackgroundColor:null,
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'pie'
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
x:-25,
|
||||
}
|
||||
},
|
||||
exporting: {
|
||||
allowHTML:true,
|
||||
filename:"<spring:message code='client_ip'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: dismen
|
||||
},
|
||||
min:0
|
||||
},
|
||||
xAxis:{
|
||||
title: {
|
||||
text: 'app',
|
||||
align:'high',
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
// legend:{// 底部平鋪图例
|
||||
// width:1280,
|
||||
// x:40,
|
||||
// itemWidth:100,
|
||||
// itemDistance:2,
|
||||
// itemHoverStyle:{
|
||||
// color:'#61D2F7',
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
// layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
width:380,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
},
|
||||
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
colors:['#EBB093','#f1e5cd','#8F99EF','#DF917E','#CA8099','#8B84B2','#F0AFCA','#E19696','#F3DCA0','#8ED2DE'],
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
softConnector: true, // 是否使用曲线
|
||||
formatter: function () {
|
||||
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
|
||||
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(2)+' %' : null;
|
||||
},
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
},
|
||||
pie:{
|
||||
allowPointSelect: true,
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) {
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时，收回突出显示
|
||||
mouseOut: function() {
|
||||
this.slice();
|
||||
},
|
||||
// 默认是点击突出，这里屏蔽掉
|
||||
click: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
credits:{//是否有水印
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
//headerFormat: '{series.name}<br>',
|
||||
//pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
series: data
|
||||
}
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType !="pie"){
|
||||
var xdata={};
|
||||
xdata.categories=dataline;
|
||||
chart.xAxis=xdata;
|
||||
chart.series = dataline2;
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> "+dismen+": <b>{point.y}</b><br/>";
|
||||
}else{
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
pieSeries2.name = dismen;
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = data;
|
||||
pieSeries.push(pieSeries2);
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.headerFormat='Client IP<br/>',
|
||||
chart.tooltip.pointFormat = "{point.name}: <b>{point.percentage:.2f}%</b>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var nowDate=new Date();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var div = document.createElement('div'),
|
||||
xlsxRows = [],
|
||||
xlsxColumns = [];
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total = JSON.parse($("#total").val());
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
rows.push(total)
|
||||
var title=[];
|
||||
title.push('<spring:message code="client_ip"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="client_ip"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null){
|
||||
|
||||
if(i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='report_total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDateh").val();
|
||||
var end = $("#endDateh").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='client_ip'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2","num3"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='client_ip'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
|
||||
|
||||
//Client IP页面 列表点击事件
|
||||
function openClientIPTrend(sIp){
|
||||
var beginDate = $("#beginDate").val();
|
||||
var endDate = $("#endDate").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var dimension=$("#dimension_select").val();
|
||||
var operator = $("#operator_select").val();
|
||||
var area=$("#area_select").val();
|
||||
var url= "${ctx}/dashboard/traffic/clientIPTransList?beginDate="+beginDate+"&endDate="+endDate+"&timeSize="+timeSize+"&sIp="+sIp+"&operator="+operator+"&chartType="+chartType+"&area="+area+"&dimension="+dimension;
|
||||
openPicWindow(url);
|
||||
}
|
||||
//弹窗方法
|
||||
function openPicWindow(url){
|
||||
$.jBox("iframe:"+url, {
|
||||
title: "Active Client IP",
|
||||
top: '1%',
|
||||
draggable:false,
|
||||
width: $(document).width()*0.9,
|
||||
height:$(document).height()*0.8,
|
||||
showScrolling: false, /* 是否显示浏览的滚动条 */
|
||||
iframeScrolling: 'no',
|
||||
buttons: { 'close': true },
|
||||
loaded:function(h){
|
||||
$(".jbox-content,top.document").css("overflow-y","hidden")
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,366 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body >
|
||||
|
||||
<div class="page-content">
|
||||
<div class="theme-panel hidden-xs hidden-sm">
|
||||
</div>
|
||||
<div class="row" >
|
||||
<form:form id="searchForm" action="${ctx}/dashboard/traffic/" method="get" class="form-search">
|
||||
<input id="beginDate" type="hidden" value="${beginDate}"/>
|
||||
<input id="endDate" type="hidden" value="${endDate}"/>
|
||||
<input id="sIp" type="hidden" value="${sIp}"/>
|
||||
<input id="timeSize" type="hidden" value="${timeSize}"/>
|
||||
<input id="chartType_1" type="hidden" value="${chartType_1}"/>
|
||||
<input id="area" type="hidden" value="${area}"/>
|
||||
<input id="operator" type="hidden" value="${operator}"/>
|
||||
<input id="dimension" type="hidden" value="${dimension}"/>
|
||||
<input id="total" type="hidden"/>
|
||||
<div class="pull-left" style="padding-top: 6px;padding-left: 10px;">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<span class="selectpicker form-control" ><spring:message code="chart_type"/></span>
|
||||
</div>
|
||||
<select id="chartType" class="selectpicker select2 input-small">
|
||||
<option value ="line" selected><spring:message code="line_chart"/></option>
|
||||
<option value ="bar"><spring:message code="bar_chart"/></option>
|
||||
<option value ="pie"><spring:message code="pie_chart"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
</div>
|
||||
<div id="chart" style="width:95%;height:500px;"></div>
|
||||
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
//给图表类型下拉框设置默认值
|
||||
$("#chartType option[value='"+ $("#chartType_1").val()+"'] ").attr("selected",true);
|
||||
// $("#chartType").val($("#chartType_1").val());
|
||||
clientIPTrans();
|
||||
$("#chartType").on("change",function(){
|
||||
clientIPTrans();
|
||||
});
|
||||
|
||||
});
|
||||
//
|
||||
function clientIPTrans(){
|
||||
loading();
|
||||
var beginDate=$("#beginDate").val();
|
||||
var endDate=$("#endDate").val();
|
||||
var sIp=$("#sIp").val();
|
||||
var timeSize=$("#timeSize").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var area = $("#area").val();
|
||||
if(area =="astana"){
|
||||
area="1";
|
||||
}else if(area =="almaty"){
|
||||
area="2";
|
||||
}else{
|
||||
area="";
|
||||
}
|
||||
var dimension = $("#dimension").val();
|
||||
var operator = $("#operator").val();
|
||||
if(operator == "null" || operator == ""){
|
||||
operator = "";
|
||||
}
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/ajaxClientIPStatistic',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"timeSize":timeSize,"sIp":sIp,"operator":operator,"area":area,"dimension":dimension},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (rs) {
|
||||
$("#tbodyData").html("");
|
||||
var xData=new Array();
|
||||
var series=new Array();
|
||||
var total = 0;
|
||||
if(rs!=null&&rs.length>0){
|
||||
total=rs[0].sum;
|
||||
series.push({
|
||||
name: dimension,
|
||||
data: rs[0].result,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
series.push({
|
||||
name: ' ',
|
||||
data: []
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showClientIPTrans(chartType,xData,series);
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function showClientIPTrans(chartType,xData,series){
|
||||
var nowDate=new Date();
|
||||
var sIp= $("#sIp").val();
|
||||
if(sIp == undefined || sIp == null || sIp == "undefined"){
|
||||
sIp="";
|
||||
}
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="client_ip"/>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: sIp
|
||||
},
|
||||
xAxis: {
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
},
|
||||
title: {
|
||||
text: 'time',
|
||||
align:'high',
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
radius: 2,
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 7,
|
||||
radiusPlus: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// pie
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
|
||||
series: series,
|
||||
}
|
||||
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'Client IP';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
var div = document.createElement('div'), xlsxRows = [], xlsxColumns = [];
|
||||
var nowDate=new Date();
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total=[];
|
||||
var totalValue = JSON.parse($("#total").val());
|
||||
total.push(totalValue)
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
var title=[];
|
||||
rows.push(total)
|
||||
title.push('<spring:message code="client_ip"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="client_ip"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null&&i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='client_ip'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='client_ip'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,647 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
|
||||
<style>
|
||||
td:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.Wdate {
|
||||
width: 200px !important;
|
||||
}
|
||||
</style>
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="row">
|
||||
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
|
||||
</div>
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
|
||||
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
|
||||
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
||||
</ul>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default css-print" onClick="doPrint()"><i class="fa glyphicon glyphicon-print" style="top:3px;margin-right: 3px;"></i><spring:message code="print"/></button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="row">
|
||||
<table id="contentTable" class="table table-active table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tl"><spring:message code="trend"/></th>
|
||||
<th class="tl"><spring:message code="server_ip"/></th>
|
||||
<th class="tl"><spring:message code="link_num"/></th>
|
||||
<th class="tl"><spring:message code="packets"/></th>
|
||||
<th class="tl"><spring:message code="pps"/></th>
|
||||
<th class="tl"><spring:message code="GByte"/></th>
|
||||
<th class="tl lowercase"><spring:message code="bps"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableData"></tbody>
|
||||
</table>
|
||||
<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
|
||||
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${ctxStatic }/pages/scripts/jQuery.print.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function searchList(){
|
||||
loading();
|
||||
var start=$("#beginDate").val();
|
||||
var end=$("#endDate").val();
|
||||
$("#beginDateh").val(start);
|
||||
$("#endDateh").val(end);
|
||||
var entranceId = $("#area_select").val();
|
||||
if(entranceId == "astana"){
|
||||
entranceId="1";
|
||||
}else if(entranceId =="almaty"){
|
||||
entranceId="2";
|
||||
}else{
|
||||
entranceId="";
|
||||
}
|
||||
if(start==''||end==''||end==null||start==null){
|
||||
window.location.reload();
|
||||
}else{
|
||||
ajaxServerIPList(start,end,entranceId);
|
||||
}
|
||||
}
|
||||
function ajaxServerIPList(start,end,entranceId){
|
||||
var chartType = $("#chartType").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var dimension = $("#dimension_select").val();
|
||||
var operator = $("#operator_select").val();
|
||||
loading();
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/activeServerIPListNew',
|
||||
type: 'get',
|
||||
dataType: "json",
|
||||
data:{"beginDate":start,"endDate":end,"entranceId":entranceId,"operator":operator,"dimension":dimension,"timeSize":timeSize},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
traditional:true,
|
||||
success:function (data){
|
||||
if(data!=null&&data.length>0&&data[0].error!=null){
|
||||
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
|
||||
return;
|
||||
}
|
||||
fileData =data;
|
||||
getPageData(1,20);//初始化第一页的数据
|
||||
pageJuan(20);//初始化分页
|
||||
serverIPChart(data,chartType);// 初始化图
|
||||
closeTip();
|
||||
if(data!= null&&data.length<1){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
}
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
}
|
||||
//打印列表
|
||||
function doPrint() {
|
||||
getPageData(1,999999);// 设置打印条数
|
||||
//统计数据
|
||||
var tb=document.getElementById("contentTable");
|
||||
var rows=tb.rows;
|
||||
$("#contentTable tbody tr").removeClass("hidden");
|
||||
//为某一列或者 某一行 添加样式
|
||||
addPrintTableCss(rows.length-1,0,"contentTable","print-title");
|
||||
|
||||
var title='<h3 style="text-align: center;font-weight:bold;"><spring:message code="server_ip"/></h3>';
|
||||
title+='<div style="text-align:center;font-weight:bold;"><spring:message code="begin_date"/>:'+$("#beginDate").val();
|
||||
title+=' ';
|
||||
title+='<spring:message code="end_date"/>:'+$("#endDate").val()+'</div>';
|
||||
$('.tr-total').addClass("tc");
|
||||
$("#contentTable").print({
|
||||
globalStyles: true,
|
||||
iframe: true,
|
||||
append: null,
|
||||
prepend: title
|
||||
});
|
||||
$('.tr-total').addClass("hidden");
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
}
|
||||
// 导出列表
|
||||
$(".export-btn").click(function(){
|
||||
var nowDate=new Date();
|
||||
var dataType = $(this).attr("data-type");
|
||||
getPageData(1,999999);// 设置导出页条数
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var htmlTitle="";
|
||||
htmlTitle+="<tr class='tr-title'>";
|
||||
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='server_ip'/>"+"</th>";
|
||||
htmlTitle+= "<th class='tc' colspan='2'>"+start+"--"+ end +"</th>";
|
||||
htmlTitle+="</tr>"
|
||||
$("#contentTable thead").prepend(htmlTitle);
|
||||
if(dataType=="xlsx"){
|
||||
getTableContent("contentTable");
|
||||
}else{
|
||||
var te = $("#contentTable").tableExport({
|
||||
headings:true,
|
||||
footers:true,
|
||||
formats:[dataType],
|
||||
fileName:"<spring:message code='server_ip'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
bootstrap:false
|
||||
});
|
||||
$("#myexport").click();
|
||||
$("caption").remove();
|
||||
}
|
||||
$(".tr-title").remove();
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
});
|
||||
/**
|
||||
* 调用后台接口
|
||||
* @param Int id 表格id
|
||||
* @return Array
|
||||
*/
|
||||
function getTableContent(id){
|
||||
var mytable = document.getElementById(id);
|
||||
var nowDate=new Date();
|
||||
var data = [];
|
||||
for(var i=0,rows=mytable.rows.length; i<rows; i++){
|
||||
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
|
||||
if(!data[i]){
|
||||
data[i] = new Array();
|
||||
}
|
||||
data[i][j] = mytable.rows[i].cells[j].innerText;
|
||||
}
|
||||
}
|
||||
var title= data.shift();
|
||||
var heard= data.shift();
|
||||
var map ={};
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=data;
|
||||
map["titleCode"]="<spring:message code='server_ip'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
}
|
||||
/**
|
||||
* 获取本页数据
|
||||
* @param currentPage 当前页数 【初次查数据，默认第1页】
|
||||
*/
|
||||
var fileData;
|
||||
function getPageData(currentPage,pageNumber){
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
//计算每页数据起始和终止数据编号
|
||||
// var pageNumber = 10;
|
||||
var maxLength = currentPage * pageNumber - 1;
|
||||
var minLength = currentPage * pageNumber - pageNumber;
|
||||
var pageData = [];
|
||||
for (var i = minLength; i < fileData.length; i++) {
|
||||
if (maxLength < i) {
|
||||
break;
|
||||
} else {
|
||||
pageData.push(fileData[i]);
|
||||
}
|
||||
}
|
||||
htmlData(pageData);
|
||||
}else{
|
||||
//把空数据传到页面中去
|
||||
htmlData(fileData);
|
||||
}
|
||||
}
|
||||
// 处理接口数据
|
||||
function htmlData(fileDataS){
|
||||
|
||||
$("#tableData").html("");
|
||||
if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
|
||||
$.each(fileDataS,function (index,data){
|
||||
if(data!=null){
|
||||
var totalLink = data.totalLink;
|
||||
var totalPackets= data.totalPackets;
|
||||
var totalGByte= data.totalGByte;
|
||||
var html = "<tr>";
|
||||
html+= "<td class='tc'><a href='#' onclick='openServerIPTrend(\""+data.dIp+"\")'><i class='fa fa-line-chart'></i></a></td>";
|
||||
if(data.dIp == undefined || data.dIp == null){
|
||||
html+= "<td class='tc'></td>";
|
||||
}else{
|
||||
html+= "<td class='tc'>"+data.dIp+"</td>";
|
||||
}
|
||||
html+= "<td class='tc'>"+data.linkNum+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.packets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+data.pps+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.GByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.bps*100)/100+"</td>";
|
||||
html+="</tr>"
|
||||
if(index==fileDataS.length-1){
|
||||
html+="<tr class='tr-total hidden'>"
|
||||
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
|
||||
html+= "<td class='tc'>" +"--"+"</td>"
|
||||
html+= "<td class='tc'>"+totalLink+"</td>";
|
||||
// html+= "<td class='tc'>" +"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalPackets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalGByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+="</tr>"
|
||||
}
|
||||
}
|
||||
$("#tableData").append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页控件处理
|
||||
*/
|
||||
function pageJuan(showData) {
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
var totalData = fileData.length;
|
||||
// var showData = 10;
|
||||
if(showData > totalData){
|
||||
showData = totalData;
|
||||
}
|
||||
var current=1;
|
||||
$('.M-box').pagination({
|
||||
totalData: totalData,
|
||||
showData: showData,
|
||||
coping: true,
|
||||
callback: function (index) {
|
||||
//改变显示开始和结束数据编号
|
||||
getPageData(index.getCurrent(),showData);
|
||||
current=index.getCurrent();
|
||||
$(".pageCurrent").val(current);
|
||||
}
|
||||
});
|
||||
if(totalData<20){
|
||||
$(".pageCurrent").val(1);
|
||||
}
|
||||
$(".pageTotal").text(totalData);
|
||||
$(".pageNum").text(Math.ceil(totalData/20));
|
||||
}
|
||||
}
|
||||
// 统计图
|
||||
function serverIPChart(rs,chartType){
|
||||
var dismen=$("#dimension_select").val();
|
||||
//终端用户 分操作系统与浏览器
|
||||
var data=new Array();
|
||||
var nowDate=new Date();
|
||||
|
||||
var dataline=new Array();
|
||||
var dataline1=new Array();
|
||||
var dataline2=new Array();
|
||||
var total=[];
|
||||
var totals=0;
|
||||
//根据不同的统计维度 展示不同的数据源
|
||||
if(dismen =="bps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.dIp,
|
||||
y: parseFloat(d.GByte),
|
||||
});
|
||||
dataline.push(d.dIp);
|
||||
dataline1.push(parseFloat(d.GByte));
|
||||
totals+=parseFloat(d.GByte);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="pps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.dIp,
|
||||
y: parseFloat(d.packets),
|
||||
});
|
||||
dataline.push(d.dIp);
|
||||
dataline1.push(parseFloat(d.packets));
|
||||
totals+=parseFloat(d.packets)
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="link count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.dIp,
|
||||
y: parseFloat(d.linkNum),
|
||||
});
|
||||
dataline.push(d.dIp);
|
||||
dataline1.push(parseFloat(d.linkNum));
|
||||
totals+=parseFloat(d.linkNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
// 创建图例
|
||||
var chart = {
|
||||
chart: {
|
||||
plotBackgroundColor:null,
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'pie'
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
x:-25,
|
||||
}
|
||||
},
|
||||
exporting: {
|
||||
allowHTML:true,
|
||||
filename:"<spring:message code='server_ip'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: dismen
|
||||
},
|
||||
min:0
|
||||
},
|
||||
xAxis:{
|
||||
title: {
|
||||
text: 'app',
|
||||
align:'high',
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
// legend:{// 底部平鋪图例
|
||||
// width:1280,
|
||||
// x:40,
|
||||
// itemWidth:100,
|
||||
// itemDistance:2,
|
||||
// itemHoverStyle:{
|
||||
// color:'#61D2F7',
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
// layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
width:380,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
},
|
||||
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
colors:['#EBB093','#f1e5cd','#8F99EF','#DF917E','#CA8099','#8B84B2','#F0AFCA','#E19696','#F3DCA0','#8ED2DE'],
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
softConnector: true, // 是否使用曲线
|
||||
formatter: function () {
|
||||
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
|
||||
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(2)+' %' : null;
|
||||
},
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
},
|
||||
pie:{
|
||||
allowPointSelect: true,
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) {
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时，收回突出显示
|
||||
mouseOut: function() {
|
||||
this.slice();
|
||||
},
|
||||
// 默认是点击突出，这里屏蔽掉
|
||||
click: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
credits:{//是否有水印
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
//headerFormat: '{series.name}<br>',
|
||||
//pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
series: data
|
||||
}
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType !="pie"){
|
||||
var xdata={};
|
||||
xdata.categories=dataline;
|
||||
chart.xAxis=xdata;
|
||||
chart.series = dataline2;
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> "+dismen+": <b>{point.y}</b><br/>";
|
||||
}else{
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
pieSeries2.name = dismen;
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = data;
|
||||
pieSeries.push(pieSeries2);
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.headerFormat='Server IP<br/>',
|
||||
chart.tooltip.pointFormat = "{point.name}: <b>{point.percentage:.2f}%</b>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var nowDate=new Date();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var div = document.createElement('div'),
|
||||
xlsxRows = [],
|
||||
xlsxColumns = [];
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total = JSON.parse($("#total").val());
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
rows.push(total)
|
||||
var title=[];
|
||||
title.push('<spring:message code="server_ip"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="server_ip"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null){
|
||||
|
||||
if(i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='report_total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDateh").val();
|
||||
var end = $("#endDateh").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='server_ip'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2","num3"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='server_ip'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
|
||||
|
||||
//Server IP页面 列表点击事件
|
||||
function openServerIPTrend(dIp){
|
||||
var beginDate = $("#beginDate").val();
|
||||
var endDate = $("#endDate").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var dimension=$("#dimension_select").val();
|
||||
var operator = $("#operator_select").val();
|
||||
var area=$("#area_select").val();
|
||||
var url= "${ctx}/dashboard/traffic/serverIPTransList?beginDate="+beginDate+"&endDate="+endDate+"&timeSize="+timeSize+"&dIp="+dIp+"&operator="+operator+"&chartType="+chartType+"&area="+area+"&dimension="+dimension;
|
||||
openPicWindow(url);
|
||||
}
|
||||
//弹窗方法
|
||||
function openPicWindow(url){
|
||||
$.jBox("iframe:"+url, {
|
||||
title: "Active Server IP",
|
||||
top: '1%',
|
||||
draggable:false,
|
||||
width: $(document).width()*0.9,
|
||||
height:$(document).height()*0.8,
|
||||
showScrolling: false, /* 是否显示浏览的滚动条 */
|
||||
iframeScrolling: 'no',
|
||||
buttons: { 'close': true },
|
||||
loaded:function(h){
|
||||
$(".jbox-content,top.document").css("overflow-y","hidden")
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,366 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body >
|
||||
|
||||
<div class="page-content">
|
||||
<div class="theme-panel hidden-xs hidden-sm">
|
||||
</div>
|
||||
<div class="row" >
|
||||
<form:form id="searchForm" action="${ctx}/dashboard/traffic/" method="get" class="form-search">
|
||||
<input id="beginDate" type="hidden" value="${beginDate}"/>
|
||||
<input id="endDate" type="hidden" value="${endDate}"/>
|
||||
<input id="dIp" type="hidden" value="${dIp}"/>
|
||||
<input id="timeSize" type="hidden" value="${timeSize}"/>
|
||||
<input id="chartType_1" type="hidden" value="${chartType_1}"/>
|
||||
<input id="area" type="hidden" value="${area}"/>
|
||||
<input id="operator" type="hidden" value="${operator}"/>
|
||||
<input id="dimension" type="hidden" value="${dimension}"/>
|
||||
<input id="total" type="hidden"/>
|
||||
<div class="pull-left" style="padding-top: 6px;padding-left: 10px;">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<span class="selectpicker form-control" ><spring:message code="chart_type"/></span>
|
||||
</div>
|
||||
<select id="chartType" class="selectpicker select2 input-small">
|
||||
<option value ="line" selected><spring:message code="line_chart"/></option>
|
||||
<option value ="bar"><spring:message code="bar_chart"/></option>
|
||||
<option value ="pie"><spring:message code="pie_chart"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
</div>
|
||||
<div id="chart" style="width:95%;height:500px;"></div>
|
||||
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
//给图表类型下拉框设置默认值
|
||||
$("#chartType option[value='"+ $("#chartType_1").val()+"'] ").attr("selected",true);
|
||||
// $("#chartType").val($("#chartType_1").val());
|
||||
serverIPTrans();
|
||||
$("#chartType").on("change",function(){
|
||||
serverIPTrans();
|
||||
});
|
||||
|
||||
});
|
||||
//
|
||||
function serverIPTrans(){
|
||||
loading();
|
||||
var beginDate=$("#beginDate").val();
|
||||
var endDate=$("#endDate").val();
|
||||
var dIp=$("#dIp").val();
|
||||
var timeSize=$("#timeSize").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var area = $("#area").val();
|
||||
if(area =="astana"){
|
||||
area="1";
|
||||
}else if(area =="almaty"){
|
||||
area="2";
|
||||
}else{
|
||||
area="";
|
||||
}
|
||||
var dimension = $("#dimension").val();
|
||||
var operator = $("#operator").val();
|
||||
if(operator == "null" || operator == ""){
|
||||
operator = "";
|
||||
}
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/ajaxServerIPStatistic',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"timeSize":timeSize,"dIp":dIp,"area":area,"operator":operator,"dimension":dimension},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (rs) {
|
||||
$("#tbodyData").html("");
|
||||
var xData=new Array();
|
||||
var series=new Array();
|
||||
var total = 0;
|
||||
if(rs!=null&&rs.length>0){
|
||||
total=rs[0].sum;
|
||||
series.push({
|
||||
name: dimension,
|
||||
data: rs[0].result,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
series.push({
|
||||
name: ' ',
|
||||
data: []
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showServerIPTrans(chartType,xData,series);
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function showServerIPTrans(chartType,xData,series){
|
||||
var nowDate=new Date();
|
||||
var dIp= $("#dIp").val();
|
||||
if(dIp == undefined || dIp == null || dIp == "undefined"){
|
||||
dIp="";
|
||||
}
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="server_ip"/>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: dIp
|
||||
},
|
||||
xAxis: {
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
},
|
||||
title: {
|
||||
text: 'time',
|
||||
align:'high',
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
radius: 2,
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 7,
|
||||
radiusPlus: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// pie
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
|
||||
series: series,
|
||||
}
|
||||
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'Server IP';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
var div = document.createElement('div'), xlsxRows = [], xlsxColumns = [];
|
||||
var nowDate=new Date();
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total=[];
|
||||
var totalValue = JSON.parse($("#total").val());
|
||||
total.push(totalValue)
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
var title=[];
|
||||
rows.push(total)
|
||||
title.push('<spring:message code="server_ip"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="server_ip"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null&&i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='server_ip'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='server_ip'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
368
src/main/webapp/WEB-INF/views/dashboard/newAppTrans.jsp
Normal file
368
src/main/webapp/WEB-INF/views/dashboard/newAppTrans.jsp
Normal file
@@ -0,0 +1,368 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body >
|
||||
|
||||
<div class="page-content">
|
||||
<div class="theme-panel hidden-xs hidden-sm">
|
||||
</div>
|
||||
<div class="row" >
|
||||
<form:form id="searchForm" action="${ctx}/dashboard/traffic/" method="get" class="form-search">
|
||||
<input id="beginDate" type="hidden" value="${beginDate}"/>
|
||||
<input id="endDate" type="hidden" value="${endDate}"/>
|
||||
<input id="appId" type="hidden" value="${appId}"/>
|
||||
<input id="appType" type="hidden" value="${appType}"/>
|
||||
<input id="timeSize" type="hidden" value="${timeSize}"/>
|
||||
<input id="chartType_1" type="hidden" value="${chartType_1}"/>
|
||||
<input id="area" type="hidden" value="${area}"/>
|
||||
<input id="operator" type="hidden" value="${operator}"/>
|
||||
<input id="dimension" type="hidden" value="${dimension}"/>
|
||||
<input id="total" type="hidden"/>
|
||||
<div class="pull-left" style="padding-top: 6px;padding-left: 10px;">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<span class="selectpicker form-control" ><spring:message code="chart_type"/></span>
|
||||
</div>
|
||||
<select id="chartType" class="selectpicker select2 input-small">
|
||||
<option value ="line" selected><spring:message code="line_chart"/></option>
|
||||
<option value ="bar"><spring:message code="bar_chart"/></option>
|
||||
<option value ="pie"><spring:message code="pie_chart"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
</div>
|
||||
<div id="chart" style="width:95%;height:500px;"></div>
|
||||
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
//给图表类型下拉框设置默认值
|
||||
$("#chartType option[value='"+ $("#chartType_1").val()+"'] ").attr("selected",true);
|
||||
// $("#chartType").val($("#chartType_1").val());
|
||||
appTrans();
|
||||
$("#chartType").on("change",function(){
|
||||
appTrans();
|
||||
});
|
||||
|
||||
});
|
||||
//
|
||||
function appTrans(){
|
||||
loading();
|
||||
var beginDate=$("#beginDate").val();
|
||||
var endDate=$("#endDate").val();
|
||||
var appType=$("#appType").val();
|
||||
var appId=$("#appId").val();
|
||||
var timeSize=$("#timeSize").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var area = $("#area").val();
|
||||
if(area =="astana"){
|
||||
area="1";
|
||||
}else if(area =="almaty"){
|
||||
area="2";
|
||||
}else{
|
||||
area="";
|
||||
}
|
||||
var dimension = $("#dimension").val();
|
||||
var operator = $("#operator").val();
|
||||
if(operator == "null" || operator == ""){
|
||||
operator = "";
|
||||
}
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/ajaxAppStatistic',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"timeSize":timeSize,"appType":appType,"area":area,"operator":operator,"dimension":dimension,"appId":appId},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (rs) {
|
||||
$("#tbodyData").html("");
|
||||
var xData=new Array();
|
||||
var series=new Array();
|
||||
var total = 0;
|
||||
if(rs!=null&&rs.length>0){
|
||||
total=rs[0].sum;
|
||||
series.push({
|
||||
name: dimension,
|
||||
data: rs[0].result,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
series.push({
|
||||
name: ' ',
|
||||
data: []
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showAppTrans(chartType,xData,series);
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function showAppTrans(chartType,xData,series){
|
||||
var nowDate=new Date();
|
||||
var appName=$("#appType").val();
|
||||
if(appName == undefined || appName == null || appName == "undefined"){
|
||||
appName="";
|
||||
}
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="App"/>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: appName
|
||||
},
|
||||
xAxis: {
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
},
|
||||
title: {
|
||||
text: 'time',
|
||||
align:'high',
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
radius: 2,
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 7,
|
||||
radiusPlus: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// pie
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
|
||||
series: series,
|
||||
}
|
||||
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'Brands';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
var div = document.createElement('div'), xlsxRows = [], xlsxColumns = [];
|
||||
var nowDate=new Date();
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total=[];
|
||||
var totalValue = JSON.parse($("#total").val());
|
||||
total.push(totalValue)
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
var title=[];
|
||||
rows.push(total)
|
||||
title.push('<spring:message code="App"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="App"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null&&i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='App'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='App'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
703
src/main/webapp/WEB-INF/views/dashboard/newAppTypeList.jsp
Normal file
703
src/main/webapp/WEB-INF/views/dashboard/newAppTypeList.jsp
Normal file
@@ -0,0 +1,703 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
|
||||
<style>
|
||||
td:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.Wdate {
|
||||
width: 200px !important;
|
||||
}
|
||||
</style>
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="row">
|
||||
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
|
||||
</div>
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
|
||||
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
|
||||
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
||||
</ul>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default css-print" onClick="doPrint()"><i class="fa glyphicon glyphicon-print" style="top:3px;margin-right: 3px;"></i><spring:message code="print"/></button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="row">
|
||||
<table id="contentTable" class="table table-active table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tl"><spring:message code="trend"/></th>
|
||||
<th class="tl"><spring:message code="App"/></th>
|
||||
<th class="tl"><spring:message code="client_ip"/> <spring:message code="count"/></th>
|
||||
<th class="tl"><spring:message code="server_ip"/> <spring:message code="count"/></th>
|
||||
<th class="tl"><spring:message code="link_num"/></th>
|
||||
<th class="tl"><spring:message code="packets"/></th>
|
||||
<th class="tl"><spring:message code="pps"/></th>
|
||||
<th class="tl"><spring:message code="GByte"/></th>
|
||||
<th class="tl lowercase"><spring:message code="bps"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableData"></tbody>
|
||||
</table>
|
||||
<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
|
||||
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${ctxStatic }/pages/scripts/jQuery.print.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function searchList(){
|
||||
loading();
|
||||
var start=$("#beginDate").val();
|
||||
var end=$("#endDate").val();
|
||||
$("#beginDateh").val(start);
|
||||
$("#endDateh").val(end);
|
||||
var entranceId = $("#area_select").val();
|
||||
if(entranceId == "astana"){
|
||||
entranceId="1";
|
||||
}else if(entranceId =="almaty"){
|
||||
entranceId="2";
|
||||
}else{
|
||||
entranceId="";
|
||||
}
|
||||
if(start==''||end==''||end==null||start==null){
|
||||
window.location.reload();
|
||||
}else{
|
||||
ajaxAppList(start,end,entranceId);
|
||||
}
|
||||
}
|
||||
function ajaxAppList(start,end,entranceId){
|
||||
var appType=$("#detail_select_2").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var operator = $("#operator_select").val();
|
||||
loading();
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/appListNew',
|
||||
type: 'get',
|
||||
dataType: "json",
|
||||
data:{"beginDate":start,"endDate":end,"appType":appType,"operator":operator,"entranceId":entranceId,"timeSize":timeSize},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
traditional:true,
|
||||
success:function (data){
|
||||
if(data!=null&&data.length>0&&data[0].error!=null){
|
||||
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
|
||||
return;
|
||||
}
|
||||
fileData =data;
|
||||
getPageData(1,20);//初始化第一页的数据
|
||||
pageJuan(20);//初始化分页
|
||||
appTypeChart(data,chartType);// 初始化图
|
||||
closeTip();
|
||||
if(data!= null&&data.length<1){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
}
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
}
|
||||
//打印列表
|
||||
function doPrint() {
|
||||
getPageData(1,999999);// 设置打印条数
|
||||
//统计数据
|
||||
var tb=document.getElementById("contentTable");
|
||||
var rows=tb.rows;
|
||||
$("#contentTable tbody tr").removeClass("hidden");
|
||||
//为某一列或者 某一行 添加样式
|
||||
addPrintTableCss(rows.length-1,0,"contentTable","print-title");
|
||||
|
||||
var title='<h3 style="text-align: center;font-weight:bold;"><spring:message code="App"/></h3>';
|
||||
title+='<div style="text-align:center;font-weight:bold;"><spring:message code="begin_date"/>:'+$("#beginDate").val();
|
||||
title+=' ';
|
||||
title+='<spring:message code="end_date"/>:'+$("#endDate").val()+'</div>';
|
||||
$('.tr-total').addClass("tc");
|
||||
$("#contentTable").print({
|
||||
globalStyles: true,
|
||||
iframe: true,
|
||||
append: null,
|
||||
prepend: title
|
||||
});
|
||||
$('.tr-total').addClass("hidden");
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
}
|
||||
// 导出列表
|
||||
$(".export-btn").click(function(){
|
||||
var nowDate=new Date();
|
||||
var dataType = $(this).attr("data-type");
|
||||
getPageData(1,999999);// 设置导出页条数
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var htmlTitle="";
|
||||
htmlTitle+="<tr class='tr-title'>";
|
||||
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='App'/>"+"</th>";
|
||||
htmlTitle+= "<th class='tc' colspan='2'>"+start+"--"+ end +"</th>";
|
||||
htmlTitle+="</tr>"
|
||||
$("#contentTable thead").prepend(htmlTitle);
|
||||
if(dataType=="xlsx"){
|
||||
getTableContent("contentTable");
|
||||
}else{
|
||||
var te = $("#contentTable").tableExport({
|
||||
headings:true,
|
||||
footers:true,
|
||||
formats:[dataType],
|
||||
fileName:"<spring:message code='App'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
bootstrap:false
|
||||
});
|
||||
$("#myexport").click();
|
||||
$("caption").remove();
|
||||
}
|
||||
$(".tr-title").remove();
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
});
|
||||
/**
|
||||
* 调用后台接口
|
||||
* @param Int id 表格id
|
||||
* @return Array
|
||||
*/
|
||||
function getTableContent(id){
|
||||
var mytable = document.getElementById(id);
|
||||
var nowDate=new Date();
|
||||
var data = [];
|
||||
for(var i=0,rows=mytable.rows.length; i<rows; i++){
|
||||
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
|
||||
if(!data[i]){
|
||||
data[i] = new Array();
|
||||
}
|
||||
data[i][j] = mytable.rows[i].cells[j].innerText;
|
||||
}
|
||||
}
|
||||
var title= data.shift();
|
||||
var heard= data.shift();
|
||||
var map ={};
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=data;
|
||||
map["titleCode"]="<spring:message code='App'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
}
|
||||
/**
|
||||
* 获取本页数据
|
||||
* @param currentPage 当前页数 【初次查数据，默认第1页】
|
||||
*/
|
||||
var fileData;
|
||||
function getPageData(currentPage,pageNumber){
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
//计算每页数据起始和终止数据编号
|
||||
// var pageNumber = 10;
|
||||
var maxLength = currentPage * pageNumber - 1;
|
||||
var minLength = currentPage * pageNumber - pageNumber;
|
||||
var pageData = [];
|
||||
for (var i = minLength; i < fileData.length; i++) {
|
||||
if (maxLength < i) {
|
||||
break;
|
||||
} else {
|
||||
pageData.push(fileData[i]);
|
||||
}
|
||||
}
|
||||
htmlData(pageData);
|
||||
}else{
|
||||
//把空数据传到页面中去
|
||||
htmlData(fileData);
|
||||
}
|
||||
}
|
||||
// 处理接口数据
|
||||
function htmlData(fileDataS){
|
||||
|
||||
$("#tableData").html("");
|
||||
if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
|
||||
$.each(fileDataS,function (index,data){
|
||||
if(data!=null){
|
||||
var totalLink = data.totalLink;
|
||||
var totalPackets= data.totalPackets;
|
||||
var totalGByte= data.totalGByte;
|
||||
/* var linkper =0;
|
||||
var packper=0;
|
||||
var gbytper=0;
|
||||
if(totalLink!=null&&totalLink!=0 ){
|
||||
linkper=((data.linkNum/totalLink)*100).toFixed(2);
|
||||
}
|
||||
if(totalPackets!=null&&totalPackets!=0 ){
|
||||
packper=((data.packets/totalPackets)*100).toFixed(2);
|
||||
}
|
||||
if(totalGByte!=null&&totalGByte!=0 ){
|
||||
gbytper=((data.GByte/totalGByte)*100).toFixed(2);
|
||||
} */
|
||||
var html = "<tr>";
|
||||
html+= "<td class='tc'><a href='#' onclick='openAppTrend(\""+data.appId+"\",\""+data.appType+"\")'><i class='fa fa-line-chart'></i></a></td>";
|
||||
if(data.appType == undefined || data.appType == null){
|
||||
html+= "<td class='tc'></td>";
|
||||
}else{
|
||||
html+= "<td class='tc'>"+data.appType+"</td>";
|
||||
}
|
||||
html+= "<td class='tc'>"+data.sUnqNum+"</td>";
|
||||
html+= "<td class='tc'>"+data.dUnqNum+"</td>";
|
||||
html+= "<td class='tc'>"+data.linkNum+"</td>";
|
||||
// html+= "<td class='tc'>"+linkper+"%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.packets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+data.pps+"</td>";
|
||||
// html+= "<td class='tc'>"+packper+"%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.GByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.bps*100)/100+"</td>";
|
||||
// html+= "<td class='tc'>"+gbytper+"%"+"</td>";
|
||||
html+="</tr>"
|
||||
if(index==fileDataS.length-1){
|
||||
html+="<tr class='tr-total hidden'>"
|
||||
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
|
||||
html+= "<td class='tc'>" +"--"+"</td>"
|
||||
html+= "<td class='tc'>"+data.totalSUnq+"</td>";
|
||||
html+= "<td class='tc'>"+data.totalDUnq+"</td>";
|
||||
html+= "<td class='tc'>"+totalLink+"</td>";
|
||||
// html+= "<td class='tc'>" +"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalPackets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalGByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+="</tr>"
|
||||
}
|
||||
}
|
||||
$("#tableData").append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页控件处理
|
||||
*/
|
||||
function pageJuan(showData) {
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
var totalData = fileData.length;
|
||||
// var showData = 10;
|
||||
if(showData > totalData){
|
||||
showData = totalData;
|
||||
}
|
||||
var current=1;
|
||||
$('.M-box').pagination({
|
||||
totalData: totalData,
|
||||
showData: showData,
|
||||
coping: true,
|
||||
callback: function (index) {
|
||||
//改变显示开始和结束数据编号
|
||||
getPageData(index.getCurrent(),showData);
|
||||
current=index.getCurrent();
|
||||
$(".pageCurrent").val(current);
|
||||
}
|
||||
});
|
||||
if(totalData<20){
|
||||
$(".pageCurrent").val(1);
|
||||
}
|
||||
$(".pageTotal").text(totalData);
|
||||
$(".pageNum").text(Math.ceil(totalData/20));
|
||||
}
|
||||
}
|
||||
// 统计图
|
||||
function appTypeChart(rs,chartType){
|
||||
var dismen=$("#dimension_select").val();
|
||||
//终端用户 分操作系统与浏览器
|
||||
var data=new Array();
|
||||
var nowDate=new Date();
|
||||
/* $(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.appName,
|
||||
y: parseFloat(d.GByte),
|
||||
});
|
||||
}); */
|
||||
var dataline=new Array();
|
||||
var dataline1=new Array();
|
||||
var dataline2=new Array();
|
||||
var total=[];
|
||||
var totals=0;
|
||||
//根据不同的统计维度 展示不同的数据源
|
||||
if(dismen =="bps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.appType,
|
||||
y: parseFloat(d.GByte),
|
||||
});
|
||||
dataline.push(d.appType);
|
||||
dataline1.push(parseFloat(d.GByte));
|
||||
totals+=parseFloat(d.GByte);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="pps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.appType,
|
||||
y: parseFloat(d.packets),
|
||||
});
|
||||
dataline.push(d.appType);
|
||||
dataline1.push(parseFloat(d.packets));
|
||||
totals+=parseFloat(d.packets)
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="link count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.appType,
|
||||
y: parseFloat(d.linkNum),
|
||||
});
|
||||
dataline.push(d.appType);
|
||||
dataline1.push(parseFloat(d.linkNum));
|
||||
totals+=parseFloat(d.linkNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="uniq client ip count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.appType,
|
||||
y: parseFloat(d.sUnqNum),
|
||||
});
|
||||
dataline.push(d.appType);
|
||||
dataline1.push(parseFloat(d.sUnqNum));
|
||||
totals+=parseFloat(d.sUnqNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="uniq server ip count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.appType,
|
||||
y: parseFloat(d.dUnqNum),
|
||||
});
|
||||
dataline.push(d.appType);
|
||||
dataline1.push(parseFloat(d.dUnqNum));
|
||||
totals+=parseFloat(d.dUnqNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
// 创建图例
|
||||
var chart = {
|
||||
chart: {
|
||||
plotBackgroundColor:null,
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'pie'
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
x:-25,
|
||||
}
|
||||
},
|
||||
exporting: {
|
||||
allowHTML:true,
|
||||
filename:"<spring:message code='App'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: dismen
|
||||
},
|
||||
min:0
|
||||
},
|
||||
xAxis:{
|
||||
title: {
|
||||
text: 'app',
|
||||
align:'high',
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
// legend:{// 底部平鋪图例
|
||||
// width:1280,
|
||||
// x:40,
|
||||
// itemWidth:100,
|
||||
// itemDistance:2,
|
||||
// itemHoverStyle:{
|
||||
// color:'#61D2F7',
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
// layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
width:380,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
},
|
||||
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
colors:['#EBB093','#f1e5cd','#8F99EF','#DF917E','#CA8099','#8B84B2','#F0AFCA','#E19696','#F3DCA0','#8ED2DE'],
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
softConnector: true, // 是否使用曲线
|
||||
formatter: function () {
|
||||
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
|
||||
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(2)+' %' : null;
|
||||
},
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
},
|
||||
pie:{
|
||||
allowPointSelect: true,
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) {
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时，收回突出显示
|
||||
mouseOut: function() {
|
||||
this.slice();
|
||||
},
|
||||
// 默认是点击突出，这里屏蔽掉
|
||||
click: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
credits:{//是否有水印
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
//headerFormat: '{series.name}<br>',
|
||||
//pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
series: data
|
||||
}
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType !="pie"){
|
||||
var xdata={};
|
||||
xdata.categories=dataline;
|
||||
chart.xAxis=xdata;
|
||||
chart.series = dataline2;
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> "+dismen+": <b>{point.y}</b><br/>";
|
||||
}else{
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
pieSeries2.name = dismen;
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = data;
|
||||
pieSeries.push(pieSeries2);
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.headerFormat='APP<br/>',
|
||||
chart.tooltip.pointFormat = "{point.name}: <b>{point.percentage:.2f}%</b>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var nowDate=new Date();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var div = document.createElement('div'),
|
||||
xlsxRows = [],
|
||||
xlsxColumns = [];
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total = JSON.parse($("#total").val());
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
rows.push(total)
|
||||
var title=[];
|
||||
title.push('<spring:message code="App"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="App"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null){
|
||||
|
||||
if(i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='report_total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDateh").val();
|
||||
var end = $("#endDateh").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='App'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2","num3"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='App'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
|
||||
|
||||
//app页面 列表点击事件
|
||||
function openAppTrend(appId,appType){
|
||||
var beginDate = $("#beginDate").val();
|
||||
var endDate = $("#endDate").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var dimension=$("#dimension_select").val();
|
||||
var operator = $("#operator_select").val();
|
||||
var area=$("#area_select").val();
|
||||
var url= "${ctx}/dashboard/traffic/appTransList?beginDate="+beginDate+"&endDate="+endDate+"&timeSize="+timeSize+"&appType="+appType+"&appId="+appId+"&chartType="+chartType+"&area="+area+"&operator="+operator+"&dimension="+dimension;
|
||||
openPicWindow(url);
|
||||
}
|
||||
//弹窗方法
|
||||
function openPicWindow(url){
|
||||
$.jBox("iframe:"+url, {
|
||||
title: "APP",
|
||||
top: '1%',
|
||||
draggable:false,
|
||||
width: $(document).width()*0.9,
|
||||
height:$(document).height()*0.8,
|
||||
showScrolling: false, /* 是否显示浏览的滚动条 */
|
||||
iframeScrolling: 'no',
|
||||
buttons: { 'close': true },
|
||||
loaded:function(h){
|
||||
$(".jbox-content,top.document").css("overflow-y","hidden")
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
561
src/main/webapp/WEB-INF/views/dashboard/newBandWidthList.jsp
Normal file
561
src/main/webapp/WEB-INF/views/dashboard/newBandWidthList.jsp
Normal file
@@ -0,0 +1,561 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
<div class="row">
|
||||
<div id="chartDiv1" class="col-md-12">
|
||||
<div id="trend" style="height: 500px; position: relative;" >
|
||||
<div style="position: relative;">
|
||||
<div id="chart1" style="width:97%;height:500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="chartDiv2" class="col-md-12">
|
||||
<div id="trend" style="height: 500px; position: relative;" >
|
||||
<div style="position: relative;">
|
||||
<div id="chart2" style="width:97%;height:500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
|
||||
|
||||
function searchList(){
|
||||
// loading();
|
||||
top.$.jBox.tip("onloading",'loading',{opacity:0.5,persistent:true});
|
||||
|
||||
var start=$("#beginDate").val();
|
||||
var end=$("#endDate").val();
|
||||
$("#beginDateh").val(start);
|
||||
$("#endDateh").val(end);
|
||||
|
||||
if(start==''||end==''||end==null||start==null){
|
||||
window.location.reload();
|
||||
}else{
|
||||
var unitType="";
|
||||
if($("#dimension_select").val() =="Gbps"){
|
||||
unitType="1";
|
||||
}
|
||||
if($("#dimension_select").val() =="pps"){
|
||||
unitType="2";
|
||||
}
|
||||
changeBandwidth(unitType,start,end);
|
||||
}
|
||||
}
|
||||
/*
|
||||
* searchBuinessType 1（分钟） 2（小时） 3（天） 4（月） 5（年）
|
||||
* searchDirection 方向
|
||||
* searchQuotaType 1（bps） 2（pps） 3（linknum）
|
||||
*/
|
||||
// 根据单位切换数据
|
||||
function changeBandwidth(unitType,beginDate,endDate){
|
||||
var searchDirection = $("#detail_select").val();
|
||||
if(searchDirection =="Outbound"){
|
||||
searchDirection="0";
|
||||
}else if(searchDirection =="Inbound"){
|
||||
searchDirection="1";
|
||||
}else{
|
||||
searchDirection="";
|
||||
}
|
||||
var chartType = $("#chartType").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var operator=$("#operator_select").val();
|
||||
$.ajax({
|
||||
url:"${ctx}/dashboard/traffic/bandWidthTransThreeNew",
|
||||
type:"get",
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"searchQuotaType":unitType,"searchDirection":searchDirection,"timeSize":timeSize,"operator":operator},
|
||||
dataType:"json",
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (data){
|
||||
var xdata=null;
|
||||
var ipv4data=null;
|
||||
var ipv6data=null;
|
||||
var tcpdata=null;
|
||||
var udpdata=null;
|
||||
var ipv4data2=null;
|
||||
var ipv6data2=null;
|
||||
var tcpdata2=null;
|
||||
var udpdata2=null;
|
||||
var total=[];
|
||||
var total2=[];
|
||||
if(data!=null&&Object.keys(data).length>0){
|
||||
ipv4data=data.ipv4Type1.result;
|
||||
ipv6data=data.ipv6Type1.result;
|
||||
tcpdata=data.trans6Type1.result;
|
||||
udpdata=data.trans17Type1.result;
|
||||
total.push(data.ipv4Type1.sum,data.ipv6Type1.sum,data.trans6Type1.sum,data.trans17Type1.sum);
|
||||
}
|
||||
var series=new Array();
|
||||
series.push({
|
||||
// type:'area',
|
||||
name: "IPv4",
|
||||
data: ipv4data,
|
||||
lineColor:'#a9d4cf',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "IPv6",
|
||||
data: ipv6data,
|
||||
lineColor:'#eecf8d',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "TCP",
|
||||
data: tcpdata,
|
||||
lineColor:'#f1aa76',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "UDP",
|
||||
data: udpdata,
|
||||
lineColor:'#88b876',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
$("#total").val(JSON.stringify(total));
|
||||
|
||||
if(unitType == "1"){
|
||||
unitType = "Gbps"
|
||||
}else if(unitType == "2"){
|
||||
unitType = "pps"
|
||||
}else{
|
||||
unitType = "linkNumber"
|
||||
}
|
||||
showBandwidthChart("chart1",unitType,xdata,series,"Astana",chartType);
|
||||
|
||||
if(data!=null&&Object.keys(data).length>0){
|
||||
ipv4data2=data.ipv4Type2.result;
|
||||
ipv6data2=data.ipv6Type2.result;
|
||||
tcpdata2=data.trans6Type2.result;
|
||||
udpdata2=data.trans17Type2.result;
|
||||
total2.push(data.ipv4Type2.sum,data.ipv6Type2.sum,data.trans6Type2.sum,data.trans17Type2.sum);
|
||||
}
|
||||
|
||||
var series=new Array();
|
||||
series.push({
|
||||
// type:'area',
|
||||
name: "IPv4",
|
||||
data: ipv4data2,
|
||||
lineColor:'#a9d4cf',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "IPv6",
|
||||
data: ipv6data2,
|
||||
lineColor:'#eecf8d',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "TCP",
|
||||
data: tcpdata2,
|
||||
lineColor:'#f1aa76',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "UDP",
|
||||
data: udpdata2,
|
||||
lineColor:'#88b876',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
$("#total2").val(JSON.stringify(total2));
|
||||
showBandwidthChart("chart2",unitType,xdata,series,"Almaty",chartType);
|
||||
// closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
// closeTip();
|
||||
}
|
||||
|
||||
/* 网络带宽时间维度趋势图 */
|
||||
function showBandwidthChart(id,unitType,xdata,ydata,title,chartType){
|
||||
var nowDate=new Date();
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'line',
|
||||
zoomType: 'x'
|
||||
},
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
y: -15,
|
||||
x: 5
|
||||
}
|
||||
},
|
||||
//colors: ['#d6e6ff','#c2d9ff','#aecdff','#9ac0fe'],
|
||||
colors:['#e5e3cd','#f1e5cd','#f3ebdf','#f3f7f1'],
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="traffic"></spring:message>'+title+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 550,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: unitType
|
||||
},
|
||||
min:0
|
||||
},
|
||||
legend: {
|
||||
enabled:true
|
||||
},
|
||||
xAxis:{
|
||||
/* type:'datetime',
|
||||
|
||||
labels: {
|
||||
rotation: -45, //倾斜的角度
|
||||
}, */
|
||||
title: {
|
||||
text: 'time-'+title,
|
||||
align:'high',
|
||||
},
|
||||
type: 'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},plotOptions: {
|
||||
/* area: {
|
||||
/* marker: {
|
||||
radius: 2
|
||||
},
|
||||
lineWidth: 1,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
threshold: null
|
||||
lineColor:'#8216db'
|
||||
}, */
|
||||
series: {
|
||||
label: {
|
||||
style: {
|
||||
fontWeight: 'bold',
|
||||
color:'#012765'
|
||||
},
|
||||
boxesToAvoid: []
|
||||
},
|
||||
pointStart: 2010
|
||||
}
|
||||
},
|
||||
/* plotOptions: {
|
||||
area: {
|
||||
stacking: 'normal',
|
||||
lineColor: '#666666',
|
||||
lineWidth: 1,
|
||||
marker: {
|
||||
lineWidth: 1,
|
||||
lineColor: '#666666'
|
||||
}
|
||||
}
|
||||
}, */
|
||||
// pie
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
series:ydata
|
||||
};
|
||||
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'Brands';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$("#"+id).highcharts(chart);
|
||||
// top.$.jBox.closeTip();
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var nowDate=new Date();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var div = document.createElement('div'),
|
||||
xlsxRows = [],
|
||||
xlsxColumns = [];
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total = [];
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
if(d!=null){
|
||||
if(i==0){
|
||||
if(d[0].indexOf("Astana") != -1){
|
||||
total=JSON.parse($("#total").val());
|
||||
}
|
||||
if(d[0].indexOf("Almaty") != -1){
|
||||
total=JSON.parse($("#total2").val());
|
||||
}
|
||||
}
|
||||
}
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
rows.push(total)
|
||||
var title=[];
|
||||
title.push('<spring:message code="traffic"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="traffic"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
/* xlsxRows = H.map(rows.slice(1), function(row) {
|
||||
return H.map(row, function(column) {
|
||||
return {
|
||||
type: typeof column === 'number' ? 'number' : 'string',
|
||||
value: column
|
||||
};
|
||||
});
|
||||
});
|
||||
var a =new Array();
|
||||
a.push({
|
||||
type:'string',
|
||||
value:'<spring:message code="total"></spring:message>'
|
||||
})
|
||||
|
||||
if(xlsxRows!=null&&xlsxRows!=undefined&&xlsxRows.length>0){
|
||||
for(var j=0;j<xlsxRows[0].length-1;j++){
|
||||
a.push({
|
||||
type:'number',
|
||||
value:0
|
||||
})
|
||||
}
|
||||
for(var i=1;i<xlsxRows.length;i++){
|
||||
for(var j=1;j<xlsxRows[i].length;j++){
|
||||
a[j].value=a[j].value+xlsxRows[i][j].value;
|
||||
}
|
||||
}
|
||||
}
|
||||
xlsxRows.push(a)
|
||||
|
||||
var b =new Array();
|
||||
b.push({
|
||||
type:'string',
|
||||
value:'<spring:message code="traffic"></spring:message>'
|
||||
})
|
||||
b.push({
|
||||
type:"string",
|
||||
value:start+'--'+end
|
||||
}); */
|
||||
// xlsxRows.unshift(b)
|
||||
/* zipcelx({
|
||||
filename: '<spring:message code="traffic"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
sheet: {
|
||||
data: xlsxRows
|
||||
}
|
||||
}); */
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
/* function setTime(){
|
||||
var chooseDate=new Date($('#beginDate').val());
|
||||
chooseDate=chooseDate.setDate(chooseDate.getDate()+1);
|
||||
var modifyTime=new Date(chooseDate);
|
||||
$('#endDate').val(modifyTime.getFullYear()+"-"+((modifyTime.getMonth()+1)>=10?(modifyTime.getMonth()+1):"0"+(modifyTime.getMonth()+1))+"-"+(modifyTime.getDate()>=10?modifyTime.getDate():'0'+modifyTime.getDate())+' '+(modifyTime.getHours()>=10?modifyTime.getHours():'0'+modifyTime.getHours())+':'+(modifyTime.getMinutes()>=10?modifyTime.getMinutes():'0'+modifyTime.getMinutes())+':'+(modifyTime.getSeconds()>=10?modifyTime.getSeconds():'0'+modifyTime.getSeconds()));
|
||||
} */
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = [];
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null){
|
||||
if(i==0){
|
||||
if(d[0].indexOf("Astana") != -1){
|
||||
total=JSON.parse($("#total").val());
|
||||
}
|
||||
if(d[0].indexOf("Almaty") != -1){
|
||||
total=JSON.parse($("#total2").val());
|
||||
}
|
||||
}
|
||||
if(i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='report_total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDateh").val();
|
||||
var end = $("#endDateh").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='traffic'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2","num3"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='traffic'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
/* function sum(arr) {
|
||||
return arr.reduce(function(prev, curr, idx, arr){
|
||||
return prev + curr;
|
||||
});
|
||||
} */
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
|
||||
<div class="col-md-12">
|
||||
<sys:message content="${message}"/>
|
||||
<div style="height: 400px;padding-top: 6px;">
|
||||
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
|
||||
<thead>
|
||||
<tr>
|
||||
<th column="cfg_id"><spring:message code="cfg_id"/></th>
|
||||
<th column="config_describe"><spring:message code="config_describe"/></th>
|
||||
<th class="sort-column sum" column="config_log_total"><spring:message code="config_log_total"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<c:forEach var="log" items="${page.list }" varStatus="status">
|
||||
<tr>
|
||||
<td><a onclick="searchByConfig(${log.cfgId},${log.cfgDesc})" title="${log.cfgId}">${log.cfgId}</a></td>
|
||||
<td>${log.cfgDesc }</td>
|
||||
<td>${log.sum }</td>
|
||||
</tr>
|
||||
</c:forEach>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="page">${page}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
//配置统计页面 配置ID点击事件
|
||||
function searchByConfig(cfgId,cfgDesc){
|
||||
var beginDate = $("#beginDate").val();
|
||||
var endDate = $("#endDate").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var url= "${ctx}/dashboard/traffic/configTrans?beginDate="+beginDate+"&endDate="+endDate+"&timeSize="+timeSize+"&cfgId="+cfgId+"&chartType="+chartType+"&cfgDesc="+cfgDesc;
|
||||
openPicWindow(url);
|
||||
}
|
||||
//点击 配置Id的弹窗方法
|
||||
function openPicWindow(url){
|
||||
$.jBox("iframe:"+url, {
|
||||
title: "Config",
|
||||
top: '1%',
|
||||
draggable:false,
|
||||
width: $(document).width()*0.9,
|
||||
height:$(document).height()*0.8,
|
||||
showScrolling: false, /* 是否显示浏览的滚动条 */
|
||||
iframeScrolling: 'no',
|
||||
buttons: { 'close': true },
|
||||
loaded:function(h){
|
||||
$(".jbox-content,top.document").css("overflow-y","hidden")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
387
src/main/webapp/WEB-INF/views/dashboard/newDomainTrans.jsp
Normal file
387
src/main/webapp/WEB-INF/views/dashboard/newDomainTrans.jsp
Normal file
@@ -0,0 +1,387 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
<spring:message code="domain_name"></spring:message>
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body >
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row" >
|
||||
<form:form id="searchForm" action="${ctx}/dashboard/traffic/" method="get" class="form-search">
|
||||
<input id="beginDate" type="hidden" value="${beginDate}"/>
|
||||
<input id="endDate" type="hidden" value="${endDate}"/>
|
||||
<input id="domain" type="hidden" value="${domain}"/>
|
||||
<input id="domainName" type="hidden" value="${domainName}"/>
|
||||
<input id="timeSize" type="hidden" value="${timeSize}"/>
|
||||
<input id="chartType_1" type="hidden" value="${chartType_1}"/>
|
||||
<input id="area" type="hidden" value="${area}"/>
|
||||
<input id="operator" type="hidden" value="${operator}"/>
|
||||
<input id="dimension" type="hidden" value="${dimension}"/>
|
||||
<input id="total" type="hidden"/>
|
||||
<div class="pull-left" style="padding-top: 6px;padding-left: 10px;">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<span class="selectpicker form-control" ><spring:message code="chart_type"/></span>
|
||||
</div>
|
||||
<select id="chartType" class="selectpicker select2 input-small">
|
||||
<option value ="line" selected><spring:message code="line_chart"/></option>
|
||||
<option value ="bar"><spring:message code="bar_chart"/></option>
|
||||
<option value ="pie"><spring:message code="pie_chart"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
</div>
|
||||
<div id="chart" style="width:95%;height:500px;"></div>
|
||||
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
//给图表类型下拉框设置默认值
|
||||
$("#chartType option[value='"+ $("#chartType_1").val()+"'] ").attr("selected",true);
|
||||
domainTrans();
|
||||
$("#chartType").on("change",function(){
|
||||
domainTrans();
|
||||
});
|
||||
});
|
||||
//活跃IP一小时间隔五分钟统计
|
||||
function domainTrans(){
|
||||
loading();
|
||||
var beginDate=$("#beginDate").val();
|
||||
var endDate=$("#endDate").val();
|
||||
var domainName=$("#domainName").val();
|
||||
var domain=$("#domain").val();
|
||||
var timeSize=$("#timeSize").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var area = $("#area").val();
|
||||
if(area =="astana"){
|
||||
area="1";
|
||||
}else if(area =="almaty"){
|
||||
area="2";
|
||||
}else{
|
||||
area="";
|
||||
}
|
||||
var dimension = $("#dimension").val();
|
||||
var operator = $("#operator").val();
|
||||
if(operator == "null" || operator == ""){
|
||||
operator = "";
|
||||
}
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/ajaxDomainStatistic',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"area":area,"operator":operator,"domain":domain,"dimension":dimension,"timeSize":timeSize},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (rs) {
|
||||
$("#tbodyData").html("");
|
||||
var xData=new Array();
|
||||
var series=new Array();
|
||||
var total = 0;
|
||||
if(rs!=null&&rs.length>0){
|
||||
/* xData=rs[0].statTime;
|
||||
$(rs[0].count).each(function(i,d) {
|
||||
total+=d
|
||||
})*/
|
||||
total=rs[0].sum;
|
||||
series.push({
|
||||
name: dimension,
|
||||
data: rs[0].result,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
series.push({
|
||||
name: '',
|
||||
data: []
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showDomainTrans(xData,series,chartType);
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function showDomainTrans(xData,series,chartType){
|
||||
var nowDate=new Date();
|
||||
var domainName= $("#domainName").val();
|
||||
if(domainName == undefined || domainName == null || domainName == "undefined"){
|
||||
domainName="";
|
||||
}
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="domain_name"/>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: domainName
|
||||
},
|
||||
xAxis: {
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
},
|
||||
title: {
|
||||
text: 'time',
|
||||
align:'high',
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
radius: 2,
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 7,
|
||||
radiusPlus: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: series,
|
||||
}
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'Domain';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
var div = document.createElement('div'), xlsxRows = [], xlsxColumns = [];
|
||||
var nowDate=new Date();
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total=[];
|
||||
var totalValue = JSON.parse($("#total").val());
|
||||
total.push(totalValue)
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
var title=[];
|
||||
rows.push(total)
|
||||
title.push('<spring:message code="domain_name"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="domain_name"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
/* xlsxRows = H.map(rows.slice(1), function(row) {
|
||||
return H.map(row, function(column) {
|
||||
return {
|
||||
type : typeof column === 'number' ? 'number' : 'string',
|
||||
value : column
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
var b = new Array();
|
||||
b.push({
|
||||
type : 'string',
|
||||
value : '<spring:message code="domain_name"></spring:message>'
|
||||
})
|
||||
b.push({
|
||||
type : "string",
|
||||
value : start + "--" + end
|
||||
})
|
||||
xlsxRows.unshift(b);
|
||||
|
||||
var a = new Array();
|
||||
a.push({
|
||||
type : 'string',
|
||||
value : '<spring:message code="total"></spring:message>'
|
||||
})
|
||||
var total = JSON.parse($("#total").val());
|
||||
a.push({
|
||||
type : "number",
|
||||
value : total
|
||||
})
|
||||
xlsxRows.push(a)
|
||||
zipcelx({
|
||||
filename : '<spring:message code="domain_name"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
sheet : {
|
||||
data : xlsxRows
|
||||
}
|
||||
}); */
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null&&i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='domain_name'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='domain_name'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
665
src/main/webapp/WEB-INF/views/dashboard/newDomainsList.jsp
Normal file
665
src/main/webapp/WEB-INF/views/dashboard/newDomainsList.jsp
Normal file
@@ -0,0 +1,665 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
|
||||
|
||||
|
||||
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="row" >
|
||||
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<sys:message content="${message}" type="${messageType }" />
|
||||
<div class="row">
|
||||
<div class="pull-right">
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
|
||||
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
|
||||
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
||||
</ul>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default css-print" onClick="doPrint()"><i class="fa glyphicon glyphicon-print" style="top:3px;margin-right: 3px;"></i><spring:message code="print"/></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table id="contentTable" style="width: 100%;"
|
||||
class="table table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tl"><spring:message code="trend"/></th>
|
||||
<th class="tl"><spring:message code="domain_name"/></th>
|
||||
<th class="tl"><spring:message code="client_ip"/> <spring:message code="count"/></th>
|
||||
<th class="tl"><spring:message code="server_ip"/> <spring:message code="count"/></th>
|
||||
<th class="tl"><spring:message code="link_num"/></th>
|
||||
<th class="tl"><spring:message code="packets"/></th>
|
||||
<th class="tl"><spring:message code="pps"/></th>
|
||||
<th class="tl"><spring:message code="GByte"/></th>
|
||||
<th class="tl lowercase"><spring:message code="bps"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableData"></tbody>
|
||||
</table>
|
||||
|
||||
<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
|
||||
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${ctxStatic }/pages/scripts/jQuery.print.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function searchList() {
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
$("#beginDateh").val(start);
|
||||
$("#endDateh").val(end);
|
||||
if (start == '' || end == '' || end == null || start == null) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
ajaxDomainList(start, end);
|
||||
}
|
||||
}
|
||||
function ajaxDomainList(start, end) {
|
||||
loading();
|
||||
var domain = $("#detail_select_3").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var operator = $("#operator_select").val();
|
||||
var entranceId=$("#area_select").val();
|
||||
if(entranceId == "astana"){
|
||||
entranceId="1";
|
||||
}else if(entranceId =="almaty"){
|
||||
entranceId="2";
|
||||
}else{
|
||||
entranceId="";
|
||||
}
|
||||
$.ajax({
|
||||
url : '${ctx}/dashboard/traffic/domainListNew',
|
||||
type : 'get',
|
||||
dataType : "json",
|
||||
data : {
|
||||
"beginDate" : start,
|
||||
"endDate" : end,
|
||||
"domain" : domain,
|
||||
"operator":operator,
|
||||
"entranceId":entranceId,
|
||||
"timeSize":timeSize
|
||||
},
|
||||
async : true,
|
||||
timeout : 50000,
|
||||
traditional:true,
|
||||
success : function(data) {
|
||||
if (data != null && data.length > 0 && data[0].error != null) {
|
||||
top.$.jBox.tip(
|
||||
"<spring:message code='request_service_failed'/>",
|
||||
"<spring:message code='info'/>");
|
||||
return;
|
||||
}
|
||||
webTypeChart(data,chartType);
|
||||
fileData = data;
|
||||
getPageData(1, 20);//初始化第一页的数据
|
||||
pageJuan(20);//初始化分页
|
||||
closeTip();
|
||||
if (data != null && data.length < 1) {
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
} else {
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
}
|
||||
},
|
||||
error : function(data, textStatus, errorThrown) {
|
||||
closeTip();
|
||||
},
|
||||
complete : function(XMLHttpRequest, status) {//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
}
|
||||
//打印列表
|
||||
function doPrint() {
|
||||
getPageData(1,999999);// 设置打印条数
|
||||
//统计数据
|
||||
var tb=document.getElementById("contentTable");
|
||||
var rows=tb.rows;
|
||||
$("#contentTable tbody tr").removeClass("hidden");
|
||||
//为某一列或者 某一行 添加样式
|
||||
addPrintTableCss(rows.length-1,0,"contentTable","print-title");
|
||||
|
||||
var title='<h3 style="text-align: center;font-weight:bold;"><spring:message code="domain_name"/></h3>';
|
||||
title+='<div style="text-align:center;font-weight:bold;"><spring:message code="begin_date"/>:'+$("#beginDate").val();
|
||||
title+=' ';
|
||||
title+='<spring:message code="end_date"/>:'+$("#endDate").val()+'</div>';
|
||||
$('.tr-total').addClass("tc");
|
||||
$("#contentTable").print({
|
||||
globalStyles: true,
|
||||
iframe: true,
|
||||
append: null,
|
||||
prepend: title
|
||||
});
|
||||
$('.tr-total').addClass("hidden");
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
}
|
||||
// 导出列表
|
||||
$(".export-btn").click(function(){
|
||||
var nowDate=new Date();
|
||||
var dataType = $(this).attr("data-type");
|
||||
getPageData(1,999999);// 设置导出页条数
|
||||
var start=$("#beginDate").val();
|
||||
var end=$("#endDate").val();
|
||||
var htmlTitle="";
|
||||
htmlTitle+="<tr class='tr-title'>";
|
||||
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='domain_name'/>"+"</th>";
|
||||
htmlTitle+= "<th class='tc' colspan='2'>"+start+"--"+ end +"</th>";
|
||||
htmlTitle+="</tr>"
|
||||
$("#contentTable thead").prepend(htmlTitle);
|
||||
if(dataType=="xlsx"){
|
||||
getTableContent("contentTable");
|
||||
}else{
|
||||
var te = $("#contentTable").tableExport({
|
||||
headings:true,
|
||||
footers:true,
|
||||
formats:[dataType],
|
||||
fileName:"<spring:message code='domain_name'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
bootstrap:false
|
||||
});
|
||||
$("#myexport").click();
|
||||
$("caption").remove();
|
||||
}
|
||||
$(".tr-title").remove();
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
});
|
||||
/**
|
||||
* 调用后台接口
|
||||
* @param Int id 表格id
|
||||
* @return Array
|
||||
*/
|
||||
function getTableContent(id){
|
||||
var mytable = document.getElementById(id);
|
||||
var nowDate=new Date();
|
||||
var data = [];
|
||||
for(var i=0,rows=mytable.rows.length; i<rows; i++){
|
||||
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
|
||||
if(!data[i]){
|
||||
data[i] = new Array();
|
||||
}
|
||||
data[i][j] = mytable.rows[i].cells[j].innerHTML;
|
||||
}
|
||||
}
|
||||
var title= data.shift();
|
||||
var heard= data.shift();
|
||||
var map ={};
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=data;
|
||||
map["titleCode"]="<spring:message code='domain_name'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
}
|
||||
$("#print-btn").click(function() {
|
||||
window.print();
|
||||
});
|
||||
/**
|
||||
* 获取本页数据
|
||||
* @param currentPage 当前页数 【初次查数据，默认第1页】
|
||||
*/
|
||||
var fileData;
|
||||
function getPageData(currentPage, pageNumber) {
|
||||
if (typeof (fileData) != "undefined" && fileData != null ) {
|
||||
//计算每页数据起始和终止数据编号
|
||||
// var pageNumber = 10;
|
||||
var maxLength = currentPage * pageNumber - 1;
|
||||
var minLength = currentPage * pageNumber - pageNumber;
|
||||
var pageData = [];
|
||||
for (var i = minLength; i < fileData.length; i++) {
|
||||
if (maxLength < i) {
|
||||
break;
|
||||
} else {
|
||||
pageData.push(fileData[i]);
|
||||
}
|
||||
}
|
||||
htmlData(pageData);
|
||||
} else {
|
||||
//把空数据传到页面中去
|
||||
htmlData(fileData);
|
||||
}
|
||||
}
|
||||
// 处理接口数据
|
||||
function htmlData(fileDataS) {
|
||||
$("#tableData").html("");
|
||||
if (fileDataS == null || fileData == '') {
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
} else {
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var totalunique=0;
|
||||
var totalpkt=0;
|
||||
var totalGbyte=0;
|
||||
$.each(fileDataS, function(index, data) {
|
||||
if (data != null) {
|
||||
var totalLink = data.totalLink;
|
||||
var totalPackets= data.totalPackets;
|
||||
var totalGByte= data.totalGByte;
|
||||
|
||||
var html = '<tr>';
|
||||
html += '<td class="tc"><a onclick="searchByDomain(\''+data.domain+'\',\''+data.domainName+'\')"><i class="fa fa-line-chart"></i></a></td>';
|
||||
if(data.domainName == undefined || data.domainName == null){
|
||||
html+= "<td class='tc'></td>";
|
||||
}else{
|
||||
html+= "<td class='tc'>"+data.domainName+"</td>";
|
||||
}
|
||||
html += "<td class='tc'>" +data.sUnqNum+"</td>";
|
||||
html += "<td class='tc'>" +data.dUnqNum+"</td>";
|
||||
html += "<td class='tc'>" +data.linkNum+"</td>";
|
||||
html += "<td class='tc'>" + Math.round(data.packets*100)/100 + "</td>";
|
||||
html += "<td class='tc'>" + data.pps + "</td>";
|
||||
// html += "<td class='tc'>" + packper + " %</td>";
|
||||
html += "<td class='tc'>" + Math.round(data.GByte*100)/100 + "</td>";
|
||||
html += "<td class='tc'>" + Math.round(data.bps*100)/100 + "</td>";
|
||||
// html += "<td class='tc'>" + gbytper + " %</td>";
|
||||
html += "</tr>"
|
||||
if(index==fileDataS.length-1){
|
||||
html+="<tr class='tr-total hidden'>"
|
||||
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
|
||||
html+= "<td class='tc'>" +"--"+"</td>"
|
||||
html+= "<td class='tc'>"+data.totalSUnq+"</td>";
|
||||
html+= "<td class='tc'>"+data.totalDUnq+"</td>";
|
||||
html+= "<td class='tc'>"+totalLink+"</td>";
|
||||
// html+= "<td class='tc'>" +"--"+"</td>";
|
||||
html+= "<td class='tc'>"+parseInt(totalPackets).toFixed(2)+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+parseInt(totalGByte).toFixed(2)+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+="</tr>"
|
||||
}
|
||||
}
|
||||
$("#tableData").append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
//domain 列表点击事件
|
||||
function searchByDomain(domain,domainName){
|
||||
var area = $("#area_select").val();
|
||||
var beginDate = $("#beginDate").val();
|
||||
var endDate = $("#endDate").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var dimension=$("#dimension_select").val();
|
||||
var operator = $("#operator_select").val();
|
||||
var url= "${ctx}/dashboard/traffic/domainTransList?beginDate="+beginDate+"&endDate="+endDate+"&dimension="+dimension+
|
||||
"&domain="+domain+"&timeSize="+timeSize+"&domainName="+domainName+"&area="+area+"&chartType="+chartType+"&operator="+operator;
|
||||
openPicWindow(url);
|
||||
}
|
||||
function openPicWindow(url){
|
||||
$.jBox("iframe:"+url, {
|
||||
title: "Domain",
|
||||
top: '1%',
|
||||
draggable:false,
|
||||
width: $(document).width()*0.9,
|
||||
height:$(document).height()*0.8,
|
||||
showScrolling: false, /* 是否显示浏览的滚动条 */
|
||||
iframeScrolling: 'no',
|
||||
buttons: { 'close': true },
|
||||
loaded:function(h){
|
||||
$(".jbox-content,top.document").css("overflow-y","hidden")
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 分页控件处理
|
||||
*/
|
||||
function pageJuan(showData) {
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
var totalData = fileData.length;
|
||||
// var showData = 10;
|
||||
if (showData > totalData) {
|
||||
showData = totalData;
|
||||
}
|
||||
var current=1;
|
||||
$('.M-box').pagination({
|
||||
totalData : totalData,
|
||||
showData : showData,
|
||||
coping : true,
|
||||
callback : function(index) {
|
||||
//改变显示开始和结束数据编号
|
||||
getPageData(index.getCurrent(), showData);
|
||||
current=index.getCurrent();
|
||||
$(".pageCurrent").val(current);
|
||||
}
|
||||
});
|
||||
if(totalData<20){
|
||||
$(".pageCurrent").val(1);
|
||||
}
|
||||
$(".pageTotal").text(totalData);
|
||||
$(".pageNum").text(Math.ceil(totalData/20));
|
||||
}
|
||||
}
|
||||
// 比例域名统计图
|
||||
|
||||
function webTypeChart(rs,chartType){
|
||||
var dismen=$("#dimension_select").val();
|
||||
var nowDate=new Date();
|
||||
//终端用户 分操作系统与浏览器
|
||||
var data=new Array();
|
||||
/* $(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.website,
|
||||
y: parseFloat(d.Gbyte),
|
||||
});
|
||||
}); */
|
||||
var dataline=new Array();
|
||||
var dataline1=new Array();
|
||||
var dataline2=new Array();
|
||||
var total=[];
|
||||
var totals=0;
|
||||
if(dismen =="link count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.domainName,
|
||||
y: parseFloat(d.linkNum),
|
||||
});
|
||||
dataline.push(d.domainName);
|
||||
dataline1.push(parseFloat(d.linkNum));
|
||||
totals+=parseFloat(d.linkNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="uniq client ip count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.domainName,
|
||||
y: parseFloat(d.sUnqNum),
|
||||
});
|
||||
dataline.push(d.domainName);
|
||||
dataline1.push(parseFloat(d.sUnqNum));
|
||||
totals+=parseFloat(d.sUnqNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="uniq server ip count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.domainName,
|
||||
y: parseFloat(d.dUnqNum),
|
||||
});
|
||||
dataline.push(d.domainName);
|
||||
dataline1.push(parseFloat(d.dUnqNum));
|
||||
totals+=parseFloat(d.dUnqNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
// 创建图例
|
||||
var chart = {
|
||||
chart: {
|
||||
plotBackgroundColor:null,
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'pie'
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
x:-25,
|
||||
}
|
||||
},
|
||||
exporting: {
|
||||
allowHTML:true,
|
||||
filename:"<spring:message code='domain_name'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
colors:['#EBB093','#f1e5cd','#8F99EF','#DF917E','#CA8099','#8B84B2','#F0AFCA','#E19696','#F3DCA0','#8ED2DE'],
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
// legend:{// 底部平鋪图例
|
||||
// width:1280,
|
||||
// x:40,
|
||||
// itemWidth:100,
|
||||
// itemDistance:2,
|
||||
// itemHoverStyle:{
|
||||
// color:'#61D2F7',
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
// layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
width:380,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
},
|
||||
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
softConnector: true, // 是否使用曲线
|
||||
formatter: function () {
|
||||
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
|
||||
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(2)+' %' : null;
|
||||
},
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
},
|
||||
pie:{
|
||||
allowPointSelect: true,
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) {
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时，收回突出显示
|
||||
mouseOut: function() {
|
||||
this.slice();
|
||||
},
|
||||
// 默认是点击突出，这里屏蔽掉
|
||||
click: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
// headerFormat: '{series.name}<br>',
|
||||
// pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
series: data
|
||||
}
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType !="pie"){
|
||||
var xdata={};
|
||||
xdata.categories=dataline;
|
||||
chart.xAxis=xdata;
|
||||
chart.series = dataline2;
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> "+dismen+": <b>{point.y}</b><br/>";
|
||||
}else{
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
pieSeries2.name = dismen;
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = data;
|
||||
pieSeries.push(pieSeries2);
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.headerFormat='Domain<br/>',
|
||||
chart.tooltip.pointFormat = "{point.name}: <b>{point.percentage:.2f}%</b>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var nowDate=new Date();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var div = document.createElement('div'),
|
||||
xlsxRows = [],
|
||||
xlsxColumns = [];
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total = JSON.parse($("#total").val());
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
rows.push(total)
|
||||
var title=[];
|
||||
title.push('<spring:message code="domain_name"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="domain_name"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null){
|
||||
|
||||
if(i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='report_total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDateh").val();
|
||||
var end = $("#endDateh").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='domain_name'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2","num3"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='domain_name'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
</script>
|
||||
699
src/main/webapp/WEB-INF/views/dashboard/newProtocolTypeList.jsp
Normal file
699
src/main/webapp/WEB-INF/views/dashboard/newProtocolTypeList.jsp
Normal file
@@ -0,0 +1,699 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
|
||||
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
|
||||
</div>
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
|
||||
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
|
||||
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
||||
</ul>
|
||||
<%-- <div class="btn-group">
|
||||
<button type="button" class="btn btn-default css-print" onClick="doPrint()"><i class="fa glyphicon glyphicon-print" style="top:3px;margin-right: 3px;"></i><spring:message code="print"/></button>
|
||||
</div> --%>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="row" >
|
||||
<table id="contentTable" class="table table-active table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tl"><spring:message code="trend"/></th>
|
||||
<th class="tl"><spring:message code="protocol_name"/></th>
|
||||
<th class="tl"><spring:message code="client_ip"/> <spring:message code="count"/></th>
|
||||
<th class="tl"><spring:message code="server_ip"/> <spring:message code="count"/></th>
|
||||
<th class="tl"><spring:message code="link_num"/></th>
|
||||
<%-- <th class="tl"><spring:message code="percentage"/> (<spring:message code="link_num"/>)</th> --%>
|
||||
<th class="tl"><spring:message code="packets"/></th>
|
||||
<th class="tl"><spring:message code="pps"/></th>
|
||||
<%-- <th class="tl"><spring:message code="percentage"/> (<spring:message code="packets"/>)</th> --%>
|
||||
<th class="tl"><spring:message code="GByte"/></th>
|
||||
<th class="tl lowercase"><spring:message code="bps"/></th>
|
||||
<%-- <th class="tl"><spring:message code="percentage"/> (<spring:message code="GByte"/>)</th> --%>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableData"></tbody>
|
||||
</table>
|
||||
<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
|
||||
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${ctxStatic }/pages/scripts/jQuery.print.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function searchList(){
|
||||
loading();
|
||||
var start=$("#beginDate").val();
|
||||
var end=$("#endDate").val();
|
||||
var entranceId=$("#area_select").val();
|
||||
$("#beginDateh").val(start);
|
||||
$("#endDateh").val(end);
|
||||
if(entranceId == "astana"){
|
||||
entranceId="1";
|
||||
}else if(entranceId =="almaty"){
|
||||
entranceId="2";
|
||||
}else{
|
||||
entranceId="";
|
||||
}
|
||||
if(start==''||end==''||end==null||start==null){
|
||||
window.location.reload();
|
||||
}else{
|
||||
ajaxProtocolList(start,end,entranceId);
|
||||
}
|
||||
}
|
||||
function ajaxProtocolList(start,end,entranceId){
|
||||
var protoType=$("#detail_select_1").val();
|
||||
// var searchDirection=$("#searchDirection").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var operator=$("#operator_select").val();
|
||||
loading();
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/protocolListNew',
|
||||
type: 'get',
|
||||
dataType: "json",
|
||||
data:{"beginDate":start,"endDate":end,"protoType":protoType,"entranceId":entranceId,"timeSize":timeSize,"operator":operator},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
traditional:true,
|
||||
beforeSend:function(){
|
||||
loading();
|
||||
},
|
||||
success:function (data){
|
||||
if(data!=null&&data.length>0&&data[0].error!=null){
|
||||
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
|
||||
return;
|
||||
}
|
||||
fileData =data;
|
||||
getPageData(1,20);//初始化第一页的数据
|
||||
pageJuan(20);//初始化分页
|
||||
protocolTypeChart(data,chartType);// 初始化图
|
||||
closeTip();
|
||||
if(data!= null&&data.length<1){
|
||||
$(".none-data").show();
|
||||
$('.M-box').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.M-box').show();
|
||||
}
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
}
|
||||
//打印列表
|
||||
function doPrint() {
|
||||
getPageData(1,999999);// 设置打印条数
|
||||
//统计数据
|
||||
var tb=document.getElementById("contentTable");
|
||||
var rows=tb.rows;
|
||||
$("#contentTable tbody tr").removeClass("hidden");
|
||||
//为某一列或者 某一行 添加样式
|
||||
addPrintTableCss(rows.length-1,0,"contentTable","print-title");
|
||||
|
||||
var title='<h3 style="text-align: center;font-weight:bold;"><spring:message code="protocol_type"/></h3>';
|
||||
title+='<div style="text-align:center;font-weight:bold;"><spring:message code="begin_date"/>:'+$("#beginDate").val();
|
||||
title+=' ';
|
||||
title+='<spring:message code="end_date"/>:'+$("#endDate").val()+'</div>';
|
||||
$('.tr-total').addClass("tc");
|
||||
$("#contentTable").print({
|
||||
globalStyles: true,
|
||||
iframe: true,
|
||||
append: null,
|
||||
prepend: title
|
||||
});
|
||||
$('.tr-total').addClass("hidden");
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
}
|
||||
//导出列表
|
||||
$(".export-btn").click(function(){
|
||||
var dataType = $(this).attr("data-type");
|
||||
getPageData(1,999999);// 设置导出页条数
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var nowDate=new Date();
|
||||
var htmlTitle="";
|
||||
htmlTitle+="<tr class='tr-title'>";
|
||||
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='protocol_type'/>"+"</th>";
|
||||
htmlTitle+= "<th class='tc' colspan='2'>"+start+"--"+ end +"</th>";
|
||||
htmlTitle+="</tr>"
|
||||
$("#contentTable thead").prepend(htmlTitle);
|
||||
if(dataType=="xlsx"){
|
||||
getTableContent("contentTable");
|
||||
}else{
|
||||
var te = $("#contentTable").tableExport({
|
||||
headings:true,
|
||||
footers:true,
|
||||
formats:[dataType],
|
||||
fileName:"<spring:message code='protocol_type'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
bootstrap:false
|
||||
});
|
||||
$("#myexport").click();
|
||||
$("caption").remove();
|
||||
}
|
||||
$(".tr-title").remove();
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
});
|
||||
/**
|
||||
* 调用后台接口
|
||||
* @param Int id 表格id
|
||||
* @return Array
|
||||
*/
|
||||
function getTableContent(id){
|
||||
var mytable = document.getElementById(id);
|
||||
var nowDate=new Date();
|
||||
var data = [];
|
||||
for(var i=0,rows=mytable.rows.length; i<rows; i++){
|
||||
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
|
||||
if(!data[i]){
|
||||
data[i] = new Array();
|
||||
}
|
||||
data[i][j] = mytable.rows[i].cells[j].innerText;
|
||||
}
|
||||
}
|
||||
var title= data.shift();
|
||||
var heard= data.shift();
|
||||
var map ={};
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=data;
|
||||
map["titleCode"]="<spring:message code='protocol_type'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
}
|
||||
/**
|
||||
* 获取本页数据
|
||||
* @param currentPage 当前页数 【初次查数据，默认第1页】
|
||||
*/
|
||||
var fileData;
|
||||
function getPageData(currentPage,pageNumber){
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
//计算每页数据起始和终止数据编号
|
||||
// var pageNumber = 10;
|
||||
var maxLength = currentPage * pageNumber - 1;
|
||||
var minLength = currentPage * pageNumber - pageNumber;
|
||||
var pageData = [];
|
||||
for (var i = minLength; i < fileData.length; i++) {
|
||||
if (maxLength < i) {
|
||||
break;
|
||||
} else {
|
||||
pageData.push(fileData[i]);
|
||||
}
|
||||
}
|
||||
htmlData(pageData);
|
||||
}else{
|
||||
//把空数据传到页面中去
|
||||
htmlData(fileData);
|
||||
}
|
||||
}
|
||||
// 处理接口数据
|
||||
function htmlData(fileDataS){
|
||||
$("#tableData").html("");
|
||||
if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
$.each(fileDataS,function (index,data){
|
||||
if(data!=null){
|
||||
var totalLink = data.totalLink;
|
||||
var totalPackets= data.totalPackets;
|
||||
var totalGByte= data.totalGByte;
|
||||
/* var linkper =0;
|
||||
var packper=0;
|
||||
var gbytper=0;
|
||||
if(totalLink!=null&&totalLink!=0 ){
|
||||
linkper=((data.linkNum/totalLink)*100).toFixed(2);
|
||||
}
|
||||
if(totalPackets!=null&&totalPackets!=0 ){
|
||||
packper=((data.packets/totalPackets)*100).toFixed(2);
|
||||
}
|
||||
if(totalGByte!=null&&totalGByte!=0 ){
|
||||
gbytper=((data.GByte/totalGByte)*100).toFixed(2);
|
||||
} */
|
||||
var html = "<tr>";
|
||||
html+= "<td class='tc'><a href='#' onclick='openProtocolsTrend(\""+data.protocolId+"\",\""+data.protocolType+"\")'><i class='fa fa-line-chart'></i></a></td>";
|
||||
if(data.protocolType == undefined || data.protocolType == null){
|
||||
html+= "<td class='tc'></td>";
|
||||
}else{
|
||||
html+= "<td class='tc'>"+data.protocolType+"</td>";
|
||||
}
|
||||
html+= "<td class='tc'>"+data.sUnqNum+"</td>";
|
||||
html+= "<td class='tc'>"+data.dUnqNum+"</td>";
|
||||
html+= "<td class='tc'>"+data.linkNum+"</td>";
|
||||
// html+= "<td class='tc'>"+linkper+"%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.packets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+data.pps+"</td>";
|
||||
// html+= "<td class='tc'>"+packper+"%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.GByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.bps*100)/100+"</td>";
|
||||
// html+= "<td class='tc'>"+gbytper+"%"+"</td>";
|
||||
html+="</tr>"
|
||||
if(index==fileDataS.length-1){
|
||||
html+="<tr class='tr-total hidden'>"
|
||||
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
|
||||
html+= "<td class='tc'>"+"——"+"</td>";
|
||||
html+= "<td class='tc'>"+data.totalSUnq+"</td>";
|
||||
html+= "<td class='tc'>"+data.totalDUnq+"</td>";
|
||||
html+= "<td class='tc'>"+totalLink+"</td>";
|
||||
// html+= "<td class='tc'>" +"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalPackets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"——"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalGByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"——"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+="</tr>"
|
||||
}
|
||||
}
|
||||
$("#tableData").append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页控件处理
|
||||
*/
|
||||
function pageJuan(showData) {
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
var totalData = fileData.length;
|
||||
// var showData = 10;
|
||||
if(showData > totalData){
|
||||
showData = totalData;
|
||||
}
|
||||
var current=1;
|
||||
$('.M-box').pagination({
|
||||
totalData: totalData,
|
||||
showData: showData,
|
||||
coping: true,
|
||||
callback: function (index) {
|
||||
//改变显示开始和结束数据编号
|
||||
getPageData(index.getCurrent(),showData);
|
||||
current=index.getCurrent();
|
||||
$(".pageCurrent").val(current);
|
||||
}
|
||||
});
|
||||
if(totalData<20){
|
||||
$(".pageCurrent").val(1);
|
||||
}
|
||||
$(".pageTotal").text(totalData);
|
||||
$(".pageNum").text(Math.ceil(totalData/20));
|
||||
}
|
||||
}
|
||||
// 比例协议统计图
|
||||
function protocolTypeChart(rs,chartType){
|
||||
var dismen=$("#dimension_select").val();
|
||||
var nowDate=new Date();
|
||||
//终端用户 分操作系统与浏览器
|
||||
var data=new Array();
|
||||
var dataline=new Array();
|
||||
var dataline1=new Array();
|
||||
var dataline2=new Array();
|
||||
var total=[];
|
||||
var totals=0;
|
||||
//根据不同的统计维度 展示不同的数据源
|
||||
if(dismen =="bps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.protocolType,
|
||||
y: parseFloat(d.GByte),
|
||||
});
|
||||
dataline.push(d.protocolType);
|
||||
dataline1.push(parseFloat(d.GByte));
|
||||
totals+=parseFloat(d.GByte);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="pps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.protocolType,
|
||||
y: parseFloat(d.packets),
|
||||
});
|
||||
dataline.push(d.protocolType);
|
||||
dataline1.push(parseFloat(d.packets));
|
||||
totals+=parseFloat(d.packets)
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="link count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.protocolType,
|
||||
y: parseFloat(d.linkNum),
|
||||
});
|
||||
dataline.push(d.protocolType);
|
||||
dataline1.push(parseFloat(d.linkNum));
|
||||
totals+=parseFloat(d.linkNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="uniq client ip count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.protocolType,
|
||||
y: parseFloat(d.sUnqNum),
|
||||
});
|
||||
dataline.push(d.protocolType);
|
||||
dataline1.push(parseFloat(d.sUnqNum));
|
||||
totals+=parseFloat(d.sUnqNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="uniq server ip count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.protocolType,
|
||||
y: parseFloat(d.dUnqNum),
|
||||
});
|
||||
dataline.push(d.protocolType);
|
||||
dataline1.push(parseFloat(d.dUnqNum));
|
||||
totals+=parseFloat(d.dUnqNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
// 创建图例
|
||||
var chart = {
|
||||
|
||||
chart: {
|
||||
plotBackgroundColor:null,
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'pie'
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
x:-25,
|
||||
}
|
||||
},
|
||||
exporting: {
|
||||
allowHTML:true,
|
||||
filename:"<spring:message code='protocol_type'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: dismen
|
||||
},
|
||||
min:0
|
||||
},
|
||||
xAxis:{
|
||||
title: {
|
||||
text: '协议类型',
|
||||
align:'high',
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color:'#413333',
|
||||
fontWeight:"unset",
|
||||
fontFamily:'Microsoft YaHei',
|
||||
},
|
||||
},
|
||||
// legend:{// 底部平鋪图例
|
||||
// width:1280,
|
||||
// x:40,
|
||||
// itemWidth:100,
|
||||
// itemDistance:2,
|
||||
// itemHoverStyle:{
|
||||
// color:'#61D2F7',
|
||||
// },
|
||||
// },
|
||||
colors:['#EBB093','#f1e5cd','#8F99EF','#DF917E','#CA8099','#8B84B2','#F0AFCA','#E19696','#F3DCA0','#8ED2DE'],
|
||||
legend: {
|
||||
// layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
width:380,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
},
|
||||
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
softConnector: true, // 是否使用曲线
|
||||
formatter: function () {
|
||||
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
|
||||
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(2)+' %' : null;
|
||||
},
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
},
|
||||
pie:{
|
||||
allowPointSelect: true,
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) {
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时，收回突出显示
|
||||
mouseOut: function() {
|
||||
this.slice();
|
||||
},
|
||||
// 默认是点击突出，这里屏蔽掉
|
||||
click: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
credits:{//是否有水印
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
// headerFormat: '<br>',
|
||||
// pointFormat: '{point.percentage:.2f}%',
|
||||
// pointFormat: '{point.percentage:.2f}%',
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
series:data
|
||||
}
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType !="pie"){
|
||||
var xdata={};
|
||||
xdata.categories=dataline;
|
||||
chart.xAxis=xdata;
|
||||
chart.series = dataline2;
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> "+dismen+": <b>{point.y}</b><br/>";
|
||||
}else{
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
pieSeries2.name = 'Protocols';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = data;
|
||||
pieSeries.push(pieSeries2);
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.headerFormat='Protocols<br/>',
|
||||
chart.tooltip.pointFormat = "{point.name}: <b>{point.percentage:.2f}%</b>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var nowDate=new Date();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var div = document.createElement('div'),
|
||||
xlsxRows = [],
|
||||
xlsxColumns = [];
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total = JSON.parse($("#total").val());
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
rows.push(total)
|
||||
var title=[];
|
||||
title.push('<spring:message code="protocol_type"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="protocol_type"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null){
|
||||
|
||||
if(i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='report_total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDateh").val();
|
||||
var end = $("#endDateh").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='protocol_type'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2","num3"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='protocol_type'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
|
||||
|
||||
//protocols页面 列表点击事件
|
||||
function openProtocolsTrend(protocolId,protocolType){
|
||||
var beginDate = $("#beginDate").val();
|
||||
var endDate = $("#endDate").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var dimension=$("#dimension_select").val();
|
||||
var area=$("#area_select").val();
|
||||
var operator=$("#operator_select").val();
|
||||
var url= "${ctx}/dashboard/traffic/protocolsTrans?beginDate="+beginDate+"&endDate="+endDate+"&timeSize="+timeSize+"&protocolType="+protocolType+"&chartType="+chartType+"&area="+area+"&operator="+operator+"&dimension="+dimension+"&protocolId="+protocolId;
|
||||
openPicWindow(url);
|
||||
}
|
||||
//弹窗方法
|
||||
function openPicWindow(url){
|
||||
$.jBox("iframe:"+url, {
|
||||
title: "Protocols",
|
||||
top: '1%',
|
||||
draggable:false,
|
||||
width: $(document).width()*0.9,
|
||||
height:$(document).height()*0.8,
|
||||
showScrolling: false, /* 是否显示浏览的滚动条 */
|
||||
iframeScrolling: 'no',
|
||||
buttons: { 'close': true },
|
||||
loaded:function(h){
|
||||
$(".jbox-content,top.document").css("overflow-y","hidden")
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
368
src/main/webapp/WEB-INF/views/dashboard/newProtocolsTrans.jsp
Normal file
368
src/main/webapp/WEB-INF/views/dashboard/newProtocolsTrans.jsp
Normal file
@@ -0,0 +1,368 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body >
|
||||
|
||||
<div class="page-content">
|
||||
<div class="theme-panel hidden-xs hidden-sm">
|
||||
</div>
|
||||
<div class="row" >
|
||||
<form:form id="searchForm" action="${ctx}/dashboard/traffic/" method="get" class="form-search">
|
||||
<input id="beginDate" type="hidden" value="${beginDate}"/>
|
||||
<input id="endDate" type="hidden" value="${endDate}"/>
|
||||
<input id="protocolId" type="hidden" value="${protocolId}"/>
|
||||
<input id="protocolType" type="hidden" value="${protocolType}"/>
|
||||
<input id="timeSize" type="hidden" value="${timeSize}"/>
|
||||
<input id="chartType_1" type="hidden" value="${chartType_1}"/>
|
||||
<input id="area" type="hidden" value="${area}"/>
|
||||
<input id="operator" type="hidden" value="${operator}"/>
|
||||
<input id="dimension" type="hidden" value="${dimension}"/>
|
||||
<input id="total" type="hidden"/>
|
||||
<div class="pull-left" style="padding-top: 6px;padding-left: 10px;">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<span class="selectpicker form-control" ><spring:message code="chart_type"/></span>
|
||||
</div>
|
||||
<select id="chartType" class="selectpicker select2 input-small">
|
||||
<option value ="line" selected><spring:message code="line_chart"/></option>
|
||||
<option value ="bar"><spring:message code="bar_chart"/></option>
|
||||
<option value ="pie"><spring:message code="pie_chart"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
</div>
|
||||
<div id="chart" style="width:95%;height:500px;"></div>
|
||||
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
//给图表类型下拉框设置默认值
|
||||
$("#chartType option[value='"+ $("#chartType_1").val()+"'] ").attr("selected",true);
|
||||
// $("#chartType").val($("#chartType_1").val());
|
||||
protocolsTrans();
|
||||
$("#chartType").on("change",function(){
|
||||
protocolsTrans();
|
||||
});
|
||||
|
||||
});
|
||||
//
|
||||
function protocolsTrans(){
|
||||
loading();
|
||||
var beginDate=$("#beginDate").val();
|
||||
var endDate=$("#endDate").val();
|
||||
var protocolId=$("#protocolId").val();
|
||||
var protocolType=$("#protocolType").val();
|
||||
var timeSize=$("#timeSize").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var area = $("#area").val();
|
||||
if(area =="astana"){
|
||||
area="1";
|
||||
}else if(area =="almaty"){
|
||||
area="2";
|
||||
}else{
|
||||
area="";
|
||||
}
|
||||
var dimension = $("#dimension").val();
|
||||
var operator = $("#operator").val();
|
||||
if(operator == "null" || operator == ""){
|
||||
operator = "";
|
||||
}
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/ajaxProtocolsStatistic',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"operator":operator,"timeSize":timeSize,"protocolId":protocolId,"protocolType":protocolType,"area":area,"dimension":dimension},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (rs) {
|
||||
$("#tbodyData").html("");
|
||||
var xData=new Array();
|
||||
var series=new Array();
|
||||
var total = 0;
|
||||
if(rs!=null&&rs.length>0){
|
||||
total=rs[0].sum;
|
||||
series.push({
|
||||
name: dimension,
|
||||
data: rs[0].result,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
series.push({
|
||||
name: ' ',
|
||||
data: []
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showProtocolsTrans(chartType,xData,series);
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function showProtocolsTrans(chartType,xData,series){
|
||||
var nowDate=new Date();
|
||||
var protocols=$("#protocolType").val();
|
||||
if(protocols == undefined || protocols == null || protocols == "undefined"){
|
||||
protocols="";
|
||||
}
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="protocol_type"/>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: protocols
|
||||
},
|
||||
xAxis: {
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
},
|
||||
title: {
|
||||
text: 'time',
|
||||
align:'high',
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
radius: 2,
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 7,
|
||||
radiusPlus: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// pie
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
|
||||
series: series,
|
||||
}
|
||||
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'Brands';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
var div = document.createElement('div'), xlsxRows = [], xlsxColumns = [];
|
||||
var nowDate=new Date();
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total=[];
|
||||
var totalValue = JSON.parse($("#total").val());
|
||||
total.push(totalValue)
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
var title=[];
|
||||
rows.push(total)
|
||||
title.push('<spring:message code="protocol_type"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="protocol_type"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null&&i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='protocol_type'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='protocol_type'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
647
src/main/webapp/WEB-INF/views/dashboard/newSubscriberIDList.jsp
Normal file
647
src/main/webapp/WEB-INF/views/dashboard/newSubscriberIDList.jsp
Normal file
@@ -0,0 +1,647 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
|
||||
<style>
|
||||
td:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.Wdate {
|
||||
width: 200px !important;
|
||||
}
|
||||
</style>
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="row">
|
||||
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
|
||||
</div>
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
|
||||
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
|
||||
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
||||
</ul>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default css-print" onClick="doPrint()"><i class="fa glyphicon glyphicon-print" style="top:3px;margin-right: 3px;"></i><spring:message code="print"/></button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="row">
|
||||
<table id="contentTable" class="table table-active table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tl"><spring:message code="trend"/></th>
|
||||
<th class="tl"><spring:message code="subscriber_id"/></th>
|
||||
<th class="tl"><spring:message code="link_num"/></th>
|
||||
<th class="tl"><spring:message code="packets"/></th>
|
||||
<th class="tl"><spring:message code="pps"/></th>
|
||||
<th class="tl"><spring:message code="GByte"/></th>
|
||||
<th class="tl lowercase"><spring:message code="bps"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableData"></tbody>
|
||||
</table>
|
||||
<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
|
||||
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${ctxStatic }/pages/scripts/jQuery.print.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function searchList(){
|
||||
loading();
|
||||
var start=$("#beginDate").val();
|
||||
var end=$("#endDate").val();
|
||||
$("#beginDateh").val(start);
|
||||
$("#endDateh").val(end);
|
||||
var entranceId = $("#area_select").val();
|
||||
if(entranceId == "astana"){
|
||||
entranceId="1";
|
||||
}else if(entranceId =="almaty"){
|
||||
entranceId="2";
|
||||
}else{
|
||||
entranceId="";
|
||||
}
|
||||
if(start==''||end==''||end==null||start==null){
|
||||
window.location.reload();
|
||||
}else{
|
||||
ajaxSubscriberIDList(start,end,entranceId);
|
||||
}
|
||||
}
|
||||
function ajaxSubscriberIDList(start,end,entranceId){
|
||||
var chartType = $("#chartType").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var dimension = $("#dimension_select").val();
|
||||
var operator = $("#operator_select").val();
|
||||
loading();
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/subscriberIDListNew',
|
||||
type: 'get',
|
||||
dataType: "json",
|
||||
data:{"beginDate":start,"endDate":end,"entranceId":entranceId,"operator":operator,"dimension":dimension,"timeSize":timeSize},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
traditional:true,
|
||||
success:function (data){
|
||||
if(data!=null&&data.length>0&&data[0].error!=null){
|
||||
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
|
||||
return;
|
||||
}
|
||||
fileData =data;
|
||||
getPageData(1,20);//初始化第一页的数据
|
||||
pageJuan(20);//初始化分页
|
||||
subscriberIDChart(data,chartType);// 初始化图
|
||||
closeTip();
|
||||
if(data!= null&&data.length<1){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
}
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
}
|
||||
//打印列表
|
||||
function doPrint() {
|
||||
getPageData(1,999999);// 设置打印条数
|
||||
//统计数据
|
||||
var tb=document.getElementById("contentTable");
|
||||
var rows=tb.rows;
|
||||
$("#contentTable tbody tr").removeClass("hidden");
|
||||
//为某一列或者 某一行 添加样式
|
||||
addPrintTableCss(rows.length-1,0,"contentTable","print-title");
|
||||
|
||||
var title='<h3 style="text-align: center;font-weight:bold;"><spring:message code="subscriber_statistical"/></h3>';
|
||||
title+='<div style="text-align:center;font-weight:bold;"><spring:message code="begin_date"/>:'+$("#beginDate").val();
|
||||
title+=' ';
|
||||
title+='<spring:message code="end_date"/>:'+$("#endDate").val()+'</div>';
|
||||
$('.tr-total').addClass("tc");
|
||||
$("#contentTable").print({
|
||||
globalStyles: true,
|
||||
iframe: true,
|
||||
append: null,
|
||||
prepend: title
|
||||
});
|
||||
$('.tr-total').addClass("hidden");
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
}
|
||||
// 导出列表
|
||||
$(".export-btn").click(function(){
|
||||
var nowDate=new Date();
|
||||
var dataType = $(this).attr("data-type");
|
||||
getPageData(1,999999);// 设置导出页条数
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var htmlTitle="";
|
||||
htmlTitle+="<tr class='tr-title'>";
|
||||
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='subscriber_tatistical'/>"+"</th>";
|
||||
htmlTitle+= "<th class='tc' colspan='2'>"+start+"--"+ end +"</th>";
|
||||
htmlTitle+="</tr>"
|
||||
$("#contentTable thead").prepend(htmlTitle);
|
||||
if(dataType=="xlsx"){
|
||||
getTableContent("contentTable");
|
||||
}else{
|
||||
var te = $("#contentTable").tableExport({
|
||||
headings:true,
|
||||
footers:true,
|
||||
formats:[dataType],
|
||||
fileName:"<spring:message code='subscriber_statistical'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
bootstrap:false
|
||||
});
|
||||
$("#myexport").click();
|
||||
$("caption").remove();
|
||||
}
|
||||
$(".tr-title").remove();
|
||||
getPageData(1,20);
|
||||
pageJuan(20);//初始化分页
|
||||
});
|
||||
/**
|
||||
* 调用后台接口
|
||||
* @param Int id 表格id
|
||||
* @return Array
|
||||
*/
|
||||
function getTableContent(id){
|
||||
var mytable = document.getElementById(id);
|
||||
var nowDate=new Date();
|
||||
var data = [];
|
||||
for(var i=0,rows=mytable.rows.length; i<rows; i++){
|
||||
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
|
||||
if(!data[i]){
|
||||
data[i] = new Array();
|
||||
}
|
||||
data[i][j] = mytable.rows[i].cells[j].innerText;
|
||||
}
|
||||
}
|
||||
var title= data.shift();
|
||||
var heard= data.shift();
|
||||
var map ={};
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=data;
|
||||
map["titleCode"]="<spring:message code='subscriber_statistical'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
}
|
||||
/**
|
||||
* 获取本页数据
|
||||
* @param currentPage 当前页数 【初次查数据，默认第1页】
|
||||
*/
|
||||
var fileData;
|
||||
function getPageData(currentPage,pageNumber){
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
//计算每页数据起始和终止数据编号
|
||||
// var pageNumber = 10;
|
||||
var maxLength = currentPage * pageNumber - 1;
|
||||
var minLength = currentPage * pageNumber - pageNumber;
|
||||
var pageData = [];
|
||||
for (var i = minLength; i < fileData.length; i++) {
|
||||
if (maxLength < i) {
|
||||
break;
|
||||
} else {
|
||||
pageData.push(fileData[i]);
|
||||
}
|
||||
}
|
||||
htmlData(pageData);
|
||||
}else{
|
||||
//把空数据传到页面中去
|
||||
htmlData(fileData);
|
||||
}
|
||||
}
|
||||
// 处理接口数据
|
||||
function htmlData(fileDataS){
|
||||
|
||||
$("#tableData").html("");
|
||||
if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
|
||||
$(".none-data").show();
|
||||
$('.pageView').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.pageView').show();
|
||||
|
||||
$.each(fileDataS,function (index,data){
|
||||
if(data!=null){
|
||||
var totalLink = data.totalLink;
|
||||
var totalPackets= data.totalPackets;
|
||||
var totalGByte= data.totalGByte;
|
||||
var html = "<tr>";
|
||||
html+= "<td class='tc'><a href='#' onclick='openSubscriberIDTrend(\""+data.subscribeId+"\")'><i class='fa fa-line-chart'></i></a></td>";
|
||||
if(data.subscribeId == undefined || data.subscribeId == null){
|
||||
html+= "<td class='tc'></td>";
|
||||
}else{
|
||||
html+= "<td class='tc'>"+data.subscribeId+"</td>";
|
||||
}
|
||||
html+= "<td class='tc'>"+data.linkNum+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.packets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+data.pps+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.GByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(data.bps*100)/100+"</td>";
|
||||
html+="</tr>"
|
||||
if(index==fileDataS.length-1){
|
||||
html+="<tr class='tr-total hidden'>"
|
||||
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
|
||||
html+= "<td class='tc'>" +"--"+"</td>"
|
||||
html+= "<td class='tc'>"+totalLink+"</td>";
|
||||
// html+= "<td class='tc'>" +"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalPackets*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+= "<td class='tc'>"+Math.round(totalGByte*100)/100+"</td>";
|
||||
html+= "<td class='tc'>"+"--"+"</td>";
|
||||
// html+= "<td class='tc'>"+"100%"+"</td>";
|
||||
html+="</tr>"
|
||||
}
|
||||
}
|
||||
$("#tableData").append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页控件处理
|
||||
*/
|
||||
function pageJuan(showData) {
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
var totalData = fileData.length;
|
||||
// var showData = 10;
|
||||
if(showData > totalData){
|
||||
showData = totalData;
|
||||
}
|
||||
var current=1;
|
||||
$('.M-box').pagination({
|
||||
totalData: totalData,
|
||||
showData: showData,
|
||||
coping: true,
|
||||
callback: function (index) {
|
||||
//改变显示开始和结束数据编号
|
||||
getPageData(index.getCurrent(),showData);
|
||||
current=index.getCurrent();
|
||||
$(".pageCurrent").val(current);
|
||||
}
|
||||
});
|
||||
if(totalData<20){
|
||||
$(".pageCurrent").val(1);
|
||||
}
|
||||
$(".pageTotal").text(totalData);
|
||||
$(".pageNum").text(Math.ceil(totalData/20));
|
||||
}
|
||||
}
|
||||
// 统计图
|
||||
function subscriberIDChart(rs,chartType){
|
||||
var dismen=$("#dimension_select").val();
|
||||
//终端用户 分操作系统与浏览器
|
||||
var data=new Array();
|
||||
var nowDate=new Date();
|
||||
|
||||
var dataline=new Array();
|
||||
var dataline1=new Array();
|
||||
var dataline2=new Array();
|
||||
var total=[];
|
||||
var totals=0;
|
||||
//根据不同的统计维度 展示不同的数据源
|
||||
if(dismen =="bps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.subscribeId,
|
||||
y: parseFloat(d.GByte),
|
||||
});
|
||||
dataline.push(d.subscribeId);
|
||||
dataline1.push(parseFloat(d.GByte));
|
||||
totals+=parseFloat(d.GByte);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="pps"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.subscribeId,
|
||||
y: parseFloat(d.packets),
|
||||
});
|
||||
dataline.push(d.subscribeId);
|
||||
dataline1.push(parseFloat(d.packets));
|
||||
totals+=parseFloat(d.packets)
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}else if(dismen =="link count"){
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.subscribeID,
|
||||
y: parseFloat(d.linkNum),
|
||||
});
|
||||
dataline.push(d.subscribeID);
|
||||
dataline1.push(parseFloat(d.linkNum));
|
||||
totals+=parseFloat(d.linkNum);
|
||||
});
|
||||
total.push(totals);
|
||||
dataline2.push({
|
||||
name: dismen,
|
||||
data: dataline1,
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
// 创建图例
|
||||
var chart = {
|
||||
chart: {
|
||||
plotBackgroundColor:null,
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'pie'
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
x:-25,
|
||||
}
|
||||
},
|
||||
exporting: {
|
||||
allowHTML:true,
|
||||
filename:"<spring:message code='subscriber_statistical'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: dismen
|
||||
},
|
||||
min:0
|
||||
},
|
||||
xAxis:{
|
||||
title: {
|
||||
text: 'app',
|
||||
align:'high',
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
// legend:{// 底部平鋪图例
|
||||
// width:1280,
|
||||
// x:40,
|
||||
// itemWidth:100,
|
||||
// itemDistance:2,
|
||||
// itemHoverStyle:{
|
||||
// color:'#61D2F7',
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
// layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
width:380,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
},
|
||||
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
colors:['#EBB093','#f1e5cd','#8F99EF','#DF917E','#CA8099','#8B84B2','#F0AFCA','#E19696','#F3DCA0','#8ED2DE'],
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
softConnector: true, // 是否使用曲线
|
||||
formatter: function () {
|
||||
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
|
||||
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(2)+' %' : null;
|
||||
},
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
},
|
||||
pie:{
|
||||
allowPointSelect: true,
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) {
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时，收回突出显示
|
||||
mouseOut: function() {
|
||||
this.slice();
|
||||
},
|
||||
// 默认是点击突出，这里屏蔽掉
|
||||
click: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
credits:{//是否有水印
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
//headerFormat: '{series.name}<br>',
|
||||
//pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
series: data
|
||||
}
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType !="pie"){
|
||||
var xdata={};
|
||||
xdata.categories=dataline;
|
||||
chart.xAxis=xdata;
|
||||
chart.series = dataline2;
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> "+dismen+": <b>{point.y}</b><br/>";
|
||||
}else{
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
pieSeries2.name = dismen;
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = data;
|
||||
pieSeries.push(pieSeries2);
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.headerFormat='SubscriberID<br/>',
|
||||
chart.tooltip.pointFormat = "{point.name}: <b>{point.percentage:.2f}%</b>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var nowDate=new Date();
|
||||
var start=$("#beginDateh").val();
|
||||
var end=$("#endDateh").val();
|
||||
var div = document.createElement('div'),
|
||||
xlsxRows = [],
|
||||
xlsxColumns = [];
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total = JSON.parse($("#total").val());
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
rows.push(total)
|
||||
var title=[];
|
||||
title.push('<spring:message code="subscriber_statistical"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="subscriber_statistical"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null){
|
||||
|
||||
if(i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='report_total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDateh").val();
|
||||
var end = $("#endDateh").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='subscriber_statistical'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2","num3"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='subscriber_statistical'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
|
||||
|
||||
//subscriberID页面 列表点击事件
|
||||
function openSubscriberIDTrend(subscribeId){
|
||||
var beginDate = $("#beginDate").val();
|
||||
var endDate = $("#endDate").val();
|
||||
var timeSize = $(".timeSize:checked").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var dimension=$("#dimension_select").val();
|
||||
var operator = $("#operator_select").val();
|
||||
var area=$("#area_select").val();
|
||||
var url= "${ctx}/dashboard/traffic/subscriberIDTransList?beginDate="+beginDate+"&endDate="+endDate+"&timeSize="+timeSize+"&subscribeId="+subscribeId+"&operator="+operator+"&chartType="+chartType+"&area="+area+"&dimension="+dimension;
|
||||
openPicWindow(url);
|
||||
}
|
||||
//弹窗方法
|
||||
function openPicWindow(url){
|
||||
$.jBox("iframe:"+url, {
|
||||
title: "SubscriberID",
|
||||
top: '1%',
|
||||
draggable:false,
|
||||
width: $(document).width()*0.9,
|
||||
height:$(document).height()*0.8,
|
||||
showScrolling: false, /* 是否显示浏览的滚动条 */
|
||||
iframeScrolling: 'no',
|
||||
buttons: { 'close': true },
|
||||
loaded:function(h){
|
||||
$(".jbox-content,top.document").css("overflow-y","hidden")
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
366
src/main/webapp/WEB-INF/views/dashboard/newSubscriberIDTrans.jsp
Normal file
366
src/main/webapp/WEB-INF/views/dashboard/newSubscriberIDTrans.jsp
Normal file
@@ -0,0 +1,366 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body >
|
||||
|
||||
<div class="page-content">
|
||||
<div class="theme-panel hidden-xs hidden-sm">
|
||||
</div>
|
||||
<div class="row" >
|
||||
<form:form id="searchForm" action="${ctx}/dashboard/traffic/" method="get" class="form-search">
|
||||
<input id="beginDate" type="hidden" value="${beginDate}"/>
|
||||
<input id="endDate" type="hidden" value="${endDate}"/>
|
||||
<input id="subscribeId" type="hidden" value="${subscribeId}"/>
|
||||
<input id="timeSize" type="hidden" value="${timeSize}"/>
|
||||
<input id="chartType_1" type="hidden" value="${chartType_1}"/>
|
||||
<input id="area" type="hidden" value="${area}"/>
|
||||
<input id="operator" type="hidden" value="${operator}"/>
|
||||
<input id="dimension" type="hidden" value="${dimension}"/>
|
||||
<input id="total" type="hidden"/>
|
||||
<div class="pull-left" style="padding-top: 6px;padding-left: 10px;">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<span class="selectpicker form-control" ><spring:message code="chart_type"/></span>
|
||||
</div>
|
||||
<select id="chartType" class="selectpicker select2 input-small">
|
||||
<option value ="line" selected><spring:message code="line_chart"/></option>
|
||||
<option value ="bar"><spring:message code="bar_chart"/></option>
|
||||
<option value ="pie"><spring:message code="pie_chart"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
</div>
|
||||
<div id="chart" style="width:95%;height:500px;"></div>
|
||||
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
//给图表类型下拉框设置默认值
|
||||
$("#chartType option[value='"+ $("#chartType_1").val()+"'] ").attr("selected",true);
|
||||
// $("#chartType").val($("#chartType_1").val());
|
||||
subscriberIdTrans();
|
||||
$("#chartType").on("change",function(){
|
||||
subscriberIdTrans();
|
||||
});
|
||||
|
||||
});
|
||||
//
|
||||
function subscriberIdTrans(){
|
||||
loading();
|
||||
var beginDate=$("#beginDate").val();
|
||||
var endDate=$("#endDate").val();
|
||||
var subscribeId=$("#subscribeId").val();
|
||||
var timeSize=$("#timeSize").val();
|
||||
var chartType = $("#chartType").val();
|
||||
var area = $("#area").val();
|
||||
if(area =="astana"){
|
||||
area="1";
|
||||
}else if(area =="almaty"){
|
||||
area="2";
|
||||
}else{
|
||||
area="";
|
||||
}
|
||||
var dimension = $("#dimension").val();
|
||||
var operator = $("#operator").val();
|
||||
if(operator == "null" || operator == ""){
|
||||
operator = "";
|
||||
}
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/ajaxSubscriberIDStatistic',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"timeSize":timeSize,"subscribeId":subscribeId,"area":area,"operator":operator,"dimension":dimension},
|
||||
async:true,
|
||||
timeout:50000,
|
||||
success:function (rs) {
|
||||
$("#tbodyData").html("");
|
||||
var xData=new Array();
|
||||
var series=new Array();
|
||||
var total = 0;
|
||||
if(rs!=null&&rs.length>0){
|
||||
total=rs[0].sum;
|
||||
series.push({
|
||||
name: dimension,
|
||||
data: rs[0].result,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
series.push({
|
||||
name: ' ',
|
||||
data: []
|
||||
});
|
||||
}
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showSubscriberIDTrans(chartType,xData,series);
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function showSubscriberIDTrans(chartType,xData,series){
|
||||
var nowDate=new Date();
|
||||
var subscribeId= $("#subscribeId").val();
|
||||
if(subscribeId == undefined || subscribeId == null || subscribeId == "undefined"){
|
||||
subscribeId="";
|
||||
}
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var chart = {
|
||||
chart:{
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
exporting: {
|
||||
filename:'<spring:message code="subscriber_statistical"/>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
buttons: {
|
||||
contextButton: {
|
||||
menuItems: [
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||
'downloadPNG','downloadPDF',
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight:"unset",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: subscribeId
|
||||
},
|
||||
xAxis: {
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
second: '%H:%M:%S',
|
||||
minute: '%H:%M',
|
||||
hour: '%H:%M',
|
||||
day: '%m-%d',
|
||||
week: '%m-%d',
|
||||
month: '%Y-%m',
|
||||
year: '%Y'
|
||||
},
|
||||
title: {
|
||||
text: 'time',
|
||||
align:'high',
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
dateTimeLabelFormats: {
|
||||
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||
second: '%Y-%m-%d %H:%M:%S',
|
||||
minute: '%Y-%m-%d %H:%M:%S',
|
||||
hour: '%Y-%m-%d %H:%M:%S',
|
||||
day: '%Y-%m-%d %H:%M:%S',
|
||||
week: '%Y-%m-%d %H:%M:%S',
|
||||
month: '%Y-%m-%d %H:%M:%S',
|
||||
year: '%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
radius: 2,
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 7,
|
||||
radiusPlus: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// pie
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
|
||||
series: series,
|
||||
}
|
||||
|
||||
if(typeof chartType != "undefined"){
|
||||
chart.chart.type = chartType;
|
||||
if(chartType == "pie"){
|
||||
var oldSeries = chart.series;
|
||||
var pieSeries = [];
|
||||
var pieSeries2 = {};
|
||||
|
||||
var pieData = [];
|
||||
for(var ind in oldSeries){
|
||||
|
||||
var pieDataObj = {};
|
||||
var countY = 0;
|
||||
|
||||
var dataArray = oldSeries[ind].data;
|
||||
for(var index in dataArray){
|
||||
var num = dataArray[index][1];
|
||||
countY += num;
|
||||
}
|
||||
/* if(){ 数据列项为空处理
|
||||
|
||||
} */
|
||||
pieDataObj.name = oldSeries[ind].name;
|
||||
pieDataObj.y = countY;
|
||||
pieData.push(pieDataObj);
|
||||
}
|
||||
|
||||
pieSeries2.name = 'SubscriberID';
|
||||
pieSeries2.colorByPoint = true;
|
||||
pieSeries2.data = pieData;
|
||||
pieSeries.push(pieSeries2);
|
||||
|
||||
chart.series = pieSeries;
|
||||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||||
}else{
|
||||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||||
}
|
||||
}
|
||||
$("#chart").highcharts(chart);
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
var div = document.createElement('div'), xlsxRows = [], xlsxColumns = [];
|
||||
var nowDate=new Date();
|
||||
div.style.display = 'none';
|
||||
document.body.appendChild(div);
|
||||
rows = this.getDataRows(true);
|
||||
/* 调用后台接口导出 */
|
||||
var total=[];
|
||||
var totalValue = JSON.parse($("#total").val());
|
||||
total.push(totalValue)
|
||||
var map={};
|
||||
$(rows).each(function(i,d){
|
||||
// 去掉多余属性
|
||||
delete d.name;
|
||||
delete d.x;
|
||||
delete d.xValues;
|
||||
})
|
||||
rows.shift(); // 删除一个重复行
|
||||
var heard = rows.shift(); // 删除一个重复行
|
||||
total.unshift('<spring:message code="report_total"/>');
|
||||
var title=[];
|
||||
rows.push(total)
|
||||
title.push('<spring:message code="subscriber_statistical"></spring:message>',start+"--"+end);
|
||||
map["titleTime"]=title;
|
||||
map["heard"]=heard;
|
||||
map["book"]=rows;
|
||||
map["titleCode"]='<spring:message code="subscriber_statistical"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
||||
var exports = JSON.stringify(map);
|
||||
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
||||
|
||||
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadCSV = function() {
|
||||
var rows = this.getDataRows(true);
|
||||
var data=new Array();
|
||||
var total = total = JSON.parse($("#total").val());
|
||||
$(rows).each(function (i,d){
|
||||
if(d!=null&&i>0){
|
||||
data.push({
|
||||
num1:d,
|
||||
})
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
num1:"<spring:message code='total'/>",
|
||||
num2:total
|
||||
})
|
||||
var start = $("#beginDate").val();
|
||||
var end = $("#endDate").val();
|
||||
exportCsv({
|
||||
title:["<spring:message code='subscriber_statistical'/>",start+"--"+end],
|
||||
titleForKey:["num1","num2"],
|
||||
data:data
|
||||
});
|
||||
};
|
||||
}(Highcharts));
|
||||
|
||||
function exportCsv(obj){
|
||||
var nowDate=new Date();
|
||||
//title ["","",""]
|
||||
var title = obj.title;
|
||||
//titleForKey ["","",""]
|
||||
var titleForKey = obj.titleForKey;
|
||||
var data = obj.data;
|
||||
var str = [];
|
||||
str.push(obj.title.join(",")+"\n");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var temp = [];
|
||||
for(var j=0;j<titleForKey.length;j++){
|
||||
temp.push(data[i][titleForKey[j]]);
|
||||
}
|
||||
str.push(temp.join(",")+"\n");
|
||||
}
|
||||
str = "\uFEFF"+str.join(""); //
|
||||
var blob = new Blob([str], {type: 'text/plain'});
|
||||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(blob);
|
||||
downloadLink.download = "<spring:message code='subscriber_statistical'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||||
downloadLink.style.display = 'none';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user