435 lines
13 KiB
Plaintext
435 lines
13 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8"%>
|
|
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
|
<div id="errorTipDiv" style="display: none;padding-top: 3px;"><sys:message content="server_internal_error"/></div>
|
|
<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
|
|
},
|
|
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: 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/>";
|
|
/* var a=JSON.parse($("#total").val())[0];
|
|
chart.tooltip.pointFormat =function(){
|
|
var b=this.y/a*100;
|
|
return "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>"+b.toFixed(2)+"%</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);
|
|
$("#errorTipDiv").hide();
|
|
closeTip();
|
|
},
|
|
error: function(data, textStatus, errorThrown){
|
|
$("#errorTipDiv").show();
|
|
closeTip();
|
|
},
|
|
complete:function(XMLHttpRequest,status){//超时设置
|
|
if(status == 'timeout'){
|
|
$("#errorTipDiv").show();
|
|
}
|
|
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> |