This repository has been archived on 2025-09-14. You can view files and clone it, but cannot push or open issues or pull requests.
Files
k18-ntcs-web-ntc/src/main/webapp/WEB-INF/views/dashboard/newSubscriberIDList.jsp

699 lines
24 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ 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 id="errorTipDiv" style="display: none;padding-top: 3px;"><sys:message content="server_internal_error"/></div>
<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 &nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;<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();
$("#errorTipDiv").hide();
if(data!= null&&data.length<1){
$(".none-data").show();
$('.pageView').hide();
}else{
$('.none-data').hide();
$('.pageView').show();
}
},
error: function(data, textStatus, errorThrown){
$("#errorTipDiv").show();
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
if(status == 'timeout'){
$("#errorTipDiv").show();
}
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+='&nbsp;&nbsp;&nbsp;&nbsp;';
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'
}
},
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
}
},
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: 'yes',
buttons: { 'close': true },
loaded:function(h){
$(".jbox-content,top.document").css("overflow-y","hidden")
}
});
}
</script>