<!doctype html>
|
<html class="no-js">
|
<head>
|
<meta charset="utf-8">
|
<title>驻场统计</title>
|
[#include "/business/pages/include/static.html" /]
|
[#include "/component/DatePicker.html" /]
|
[#include "/component/newsel.html" /]
|
<script src="${common_static}/static/script/select/chosen.jquery.js"></script>
|
<script src="${common_static}/static/script/select/chosen.jquery.min.js"></script>
|
<link rel="stylesheet" type="text/css" href="${common_static}/static/script/select/chosen.css"/>
|
<script type="text/javascript" src="${common_static}/static/script/statis.js"></script>
|
</head>
|
<body>
|
<div class="event_fill sa_event_fill">
|
<table><tr><th width="85%">
|
<div class="fill_item">
|
<label>${Constants.CUSTOMER_CONSTANTS}名称：</label>
|
[@sel id="cusId" labelName="cusName" textField="id" valueField="name" source=cusList /]
|
</div>
|
|
|
<div class="fill_item">
|
<label>按天：</label>
|
<input type="radio" id="forDay" name="tp" class="tp" value="2" checked="checked"/>
|
</div>
|
|
|
<div class="fill_item">
|
<label>按月：</label>
|
<input type="radio" id="forDay" name="tp" class="tp" value="1" />
|
</div>
|
|
|
<div id="selectDay">
|
<div class="fill_item">
|
<label>开始时间：</label>
|
[@datepicker id="beginDay" value="${beginTime}" class="general" length=8 /]
|
</div>
|
<div class="fill_item">
|
<label>结束时间：</label>
|
[@datepicker id="endDay" class="general" length=8 value="${endTime}" /]
|
</div>
|
</div>
|
|
|
<div id="selectMonth" style="display:none;">
|
<div class="fill_item">
|
<label>开始月份：</label>
|
[@datepicker id="beginMonth" value="${beginMonth}" class="general" length=6 /]
|
</div>
|
<div class="fill_item">
|
<label>结束月份：</label>
|
[@datepicker id="endMonth" class="general" length=6 value="${endMonth}" /]
|
</div>
|
</div>
|
|
</th><td width="15%">
|
<a class="retrievebtn" href="javascript:window.location.reload(true);">重置</a><a class="retrievebtn focus" href="javascript:query();">查询</a>
|
</td></tr></table>
|
</div>
|
<div class="statnan clearfix">
|
|
<div class="statnan_left">
|
<div id="pieChart" style="width:98%;height:95%;"></div>
|
</div>
|
<div class="clearfix"></div>
|
<div class="statnan_right">
|
<div id="lineChart" style="width:98%;height:95%;"></div>
|
</div>
|
</div>
|
|
|
<script type="text/javascript">
|
initSplineStyle();
|
$("#cusId").chosen({
|
no_results_text: "没有找到结果！",//搜索无结果时显示的提示
|
search_contains:true, //关键字模糊搜索，设置为false，则只从开头开始匹配
|
allow_single_deselect:true, //是否允许取消选择
|
max_selected_options:1 //当select为多选时，最多选择个数
|
});
|
var beginTime;
|
var endTime;
|
var type;
|
$(function() {
|
query();
|
$(".tp").click(function() {
|
var typeValue = $(this).val();
|
if(typeValue==1) {
|
$("#selectMonth").show();
|
$("#selectDay").hide();
|
} else {
|
$("#selectDay").show();
|
$("#selectMonth").hide();
|
}
|
});
|
})
|
|
|
function query() {
|
var tp = $(":radio.tp:checked").val();
|
if(tp == 2) {
|
beginTime = $("#beginDay").val();
|
endTime = $("#endDay").val();
|
if(beginTime>endTime) {
|
popupTips("开始时间不能晚于结束时间");
|
return;
|
}
|
|
// if(getDays(beginTime,endTime)>30) {
|
// popupTips("时间间隔不能超过30天");
|
// return;
|
// }
|
type = 2;
|
} else {
|
beginTime = $("#beginMonth").val();
|
endTime = $("#endMonth").val();
|
if(beginTime>endTime) {
|
alert("开始时间不能晚于结束时间");
|
return;
|
}
|
// if(getMonth(beginTime,endTime)>24) {
|
// popupTips("时间间隔不能超过24个月");
|
// return;
|
// }
|
type = 1;
|
}
|
pieChart();
|
lineChart();
|
}
|
|
|
function showPie($dom,data,name) {
|
var charTitle = '${charTitle}'+'占比';
|
$dom.highcharts({
|
chart: {
|
type: 'pie'
|
},
|
colors:['#749f83','#bda29a','#61a0a8','#546570','#c23531','#d48265','#91c7ae','#749f83'],
|
title: {
|
text: charTitle
|
},
|
tooltip: {
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
},
|
plotOptions: {
|
pie: {
|
allowPointSelect: true,
|
cursor: 'pointer',
|
depth: 35,
|
dataLabels: {
|
enabled: true,
|
format: '{point.name}({point.y}):{point.percentage:.1f}%'
|
},
|
showInLegend: true,
|
size: 270
|
}
|
},
|
|
series: [{
|
type: 'pie',
|
name: '占比',
|
data: data
|
}]
|
});
|
}
|
|
|
function showLine(data) {
|
var charTitle = '${charTitle}'+'走势';
|
$('#lineChart').highcharts({
|
title: {
|
text: charTitle
|
},
|
xAxis: {
|
tickInterval:3,
|
categories: data.cate
|
},
|
plotOptions:{
|
spline:{
|
marker:{
|
enabled:true
|
}
|
}
|
},
|
tooltip: {
|
valueSuffix: '个'
|
},
|
|
series: data.data
|
});
|
}
|
|
|
function pieChart() {
|
var cusId = $.trim($("#cusId").val());
|
var queryType = '${queryType}';
|
|
$.post("${base}/business/pages/tj/localStatis/localTemplatePie.html",{"queryType":queryType,"cusId":cusId,"beginTime":beginTime,"endTime":endTime,"type":type},function(data,textStatus) {
|
showPie($('#pieChart'),data,'事件类型占比');
|
},"json")
|
}
|
|
function lineChart() {
|
var cusId = $.trim($("#cusId").val());
|
var queryType = '${queryType}';
|
|
$.post("${base}/business/pages/tj/localStatis/localTemplateLine.html",{"queryType":queryType,"cusId":cusId,"beginTime":beginTime,"endTime":endTime,"type":type},function(data,textStatus) {
|
showLine(data);
|
},"json")
|
}
|
</script>
|
|
</body>
|
</html>
|
