647 lines
23 KiB
Plaintext
647 lines
23 KiB
Plaintext
|
<%@ 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>
|