2019-05-30 11:06:16 +08:00
<%@ 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">
2019-06-13 18:41:26 +08:00
<div id="errorTipDiv" style="display: none;padding-top: 3px;"><sys:message content="server_internal_error"/></div>
2019-05-30 11:06:16 +08:00
<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();
2019-06-13 18:41:26 +08:00
$("#errorTipDiv").hide();
2019-05-30 11:06:16 +08:00
if(data!= null&&data.length<1){
$(".none-data").show();
$('.pageView').hide();
}else{
$('.none-data').hide();
$('.pageView').show();
}
},
error: function(data, textStatus, errorThrown){
2019-06-13 18:41:26 +08:00
$("#errorTipDiv").show();
2019-05-30 11:06:16 +08:00
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
2019-06-13 18:41:26 +08:00
if(status == 'timeout'){
$("#errorTipDiv").show();
}
2019-05-30 11:06:16 +08:00
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 当前页数 【初次查数据，
*/
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'
}
},
2019-06-12 19:33:59 +08:00
}/* ,
2019-05-30 11:06:16 +08:00
pie:{
allowPointSelect: true,
showInLegend: true,
point: {
events: {
mouseOver: function(e) {
this.slice();
},
// 鼠标移出时，收回突出显示
mouseOut: function() {
this.slice();
},
// 默认是点击突出，这里屏蔽掉
click: function() {
return false;
}
},
},
2019-06-12 19:33:59 +08:00
} */
2019-05-30 11:06:16 +08:00
},
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'
}
},
2019-06-12 19:33:59 +08:00
plotOptions: {
pie:{
allowPointSelect: true,
showInLegend: true,
point: {
events: {
mouseOver: function(e) {
this.slice();
},
// 鼠标移出时，收回突出显示
mouseOut: function() {
this.slice();
},
// 默认是点击突出，这里屏蔽掉
click: function() {
return false;
}
},
},
},
column: {
dataLabels:{
enabled:true,
color: '#5B5B5B',
formatter:function () {
var total=JSON.parse($("#total").val())[0];
a = this.y/total*100;
return a.toFixed(2) + "%"
}
}
// colorByPoint: true
},
line: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels:{
enabled:true,
color: '#5B5B5B',
formatter:function () {
var total=JSON.parse($("#total").val())[0];
a = this.y/total*100;
return a.toFixed(2) + "%"
}
}
// colorByPoint: true
}
},
2019-05-30 11:06:16 +08:00
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, /* 是否显示浏览的滚动条 */
2019-06-10 18:08:39 +08:00
iframeScrolling: 'yes',
2019-05-30 11:06:16 +08:00
buttons: { 'close': true },
loaded:function(h){
$(".jbox-content,top.document").css("overflow-y","hidden")
}
});
}
</script>
