wuhb
/
oa


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
							<%@ page language="java" contentType="text/html;charset=GBK" pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>车辆图形报表</title>
<link href="/shares/js/yw/master1/liger/skins/ynet/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="/shares/css/yw/master1/reset.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/shares/datePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/shares/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/shares/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="/shares/highcharts/js/modules/exporting.js"></script>
<script type="text/javascript" src="/shares/highcharts/js/modules/data.js"></script>

<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
<!-- <script src="http://code.highcharts.com/highcharts.js"></script> -->


<link href="/shares/css/yw/master1/reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	overflow: hidden;
	background: #fff;
}
.default_search li{height:25px}
.default_search ul{display:inline;width:250px;float:left;}
.default_search li.text{float:left;width:151px;padding-top:5px;}
.default_search li.title{float:left;width:90px;padding-top:9px;text-align: right;padding-left: 5px; font-size: 13px;font-weight: normal;}
.search-button {padding-top:5px;float:left;}
.default_search li input[type='text']{width:100px;background:#fff; height:18px;border-style: inherit; line-height: 18px}
.default_search li select{height:20px;border-style: inherit; line-height: 21px; }
</style>
<script type="text/javascript">
	$(function (){
		createQuarterChartForOut();
    }); 


	function createQuarterChartForOut() {
		changeQuarterChart();
		var plate_number = new Array();
		var car_count = [];
		var car_date = [];
		var car_mileage = [];
		$.ajax({
			type : "POST",
			url : "carStatisticReportAction.do?task=getChartDataForOut",
			dataType : 'json',
			async : false,
			success : function(data) {
				if (data != null && data.length != 0) {
					for (var i = 0; i < data.length; i++) {
						
						plate_number[i] = new Array(data[i].plate_number);
						car_count[i] = data[i].car_count;
						car_date[i] = data[i].car_date==undefined?0:data[i].car_date;
						car_mileage[i] = data[i].car_mileage==undefined?0:data[i].car_mileage;
					}
				}
			}

		});
		
		$('#container').highcharts({
	        chart: {
	            type: 'column'
	        },
	        lang : {
				printChart : '打印图表',
				downloadJPEG : '下载JPEG图片',
				downloadPDF : '下载PDF文件',
				downloadPNG : '下载PNG图片',
				downloadSVG : '下载SVG矢量图'
			},
			credits : {
				enabled : false
			},
	        title: {
	            text: '出车详细报表',
	            style: {
					 fontSize: "28px"
		            }
	        },
	        xAxis: {
	            categories: plate_number
	        },
	        yAxis: {
	            min: 0,
	            title: {
	                text: '数值'
	            }
	        },
	        tooltip: {
	            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	                '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
	            footerFormat: '</table>',
	            shared: true,
	            useHTML: true
	        },
	        plotOptions: {
	            column: {
	                pointPadding: 0.2,
	                borderWidth: 0
	            }
	        },
	        series: [{
	            name: '出车次数',
	            data: car_count

	        }, {
	            name: '行驶里程',
	            data: car_mileage

	        }, {
	            name: '出车天数',
	            data: car_date

	        }]
	    });
		 

	}
	
	
	function createQuarterChartForCost() {
		var dictionary_name = [];
		var money = [];
		var contributions_date = $("#contributions_date").val();
		if("" == contributions_date){
			document.getElementById("msg").innerHTML="<font color='red'>&nbsp;请选择年份！</font>";
			return;
		}else{
			document.getElementById("msg").innerHTML="";
		}
		
		$.ajax({
			type : "POST",
			url : "carStatisticReportAction.do?task=getChartDataForCost&contributions_date="+contributions_date,
			dataType : 'json',
			async : false,
			success : function(data) {
				if (data != null && data.length != 0) {
					for (var i = 0; i < data.length; i++) {
						dictionary_name[i] = data[i].dictionary_name;
						money[i] = data[i].money;
					}
				}
			}

		});
		
		
		$('#container').highcharts({
	        chart: {
	            type: 'line'
	        },
	        lang : {
				printChart : '打印图表',
				downloadJPEG : '下载JPEG图片',
				downloadPDF : '下载PDF文件',
				downloadPNG : '下载PNG图片',
				downloadSVG : '下载SVG矢量图'
			},
			credits : {
				enabled : false
			},
	        title: {
	            text: contributions_date+'年度车辆费用统计',
	            style: {
					 fontSize: "28px"
		            }
	        },
	        xAxis: {
	            categories: dictionary_name
	        },
	        yAxis: {
	            title: {
	                text: '金额'
	            }
	        },
	        tooltip: {
	            enabled: false,
	            formatter: function() {
	                return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y;
	            }
	        },
	        plotOptions: {
	            line: {
	                dataLabels: {
	                    enabled: true
	                },
	                enableMouseTracking: false
	            }
	        },
	        series: [{
	            name: '金额',
	            data: money
	        }]
	    });

	}
	
	function changeQuarterChart(type){
		document.getElementById("container").innerHTML="";
		if(type == '0'){
			document.getElementById("year").style.display="";
			createQuarterChartForCost();
		}else{
			document.getElementById("year").style.display="none";
		}
		
	}
</script>
</head>
<body>
	<div class="s_title b10 f6">
		<img src="/shares/images/master1/fqlc.png" width="27" height="26" /> 报表分析
	</div>
	<div class="container-layout" style="margin-top: 50px;">
		<div class="lc_b_div">
			<div class="lc_btn">
				<a href="#" class="f8" onclick="createQuarterChartForOut();" title="出车详细报表"> 
				<img src="/shares/images/master1/lc_ico.png" width="19" height="21" />出车详细报表
				</a>
			</div>
			<div class="lc_btn">
				<a href="#" class="f8" onclick="changeQuarterChart('0');" title="年度车辆费用统计"> 
				<img src="/shares/images/master1/lc_ico.png" width="19" height="21" />年度车辆费用统计
				</a>
			</div>
		</div>
		<div id="year" class="default_search" style="margin: 0;display: none;">
			<ul class="list_search">
				<li class="title" style="width: 100px;font-family:'新宋体';font-size:9pt;">年度：</li>
				<li class="text" style="width: 135px;">
				<input type="text" class="Wdate" name="contributions_date" id="contributions_date" onclick="WdatePicker({dateFmt:'yyyy'})"
						value="${requestScope.currentYear }">
				</li>
			</ul>
			<div style="float: left;">
				<input type="button" class="l-button" value="生成报表" onclick="createQuarterChartForCost()" style="width: 80px;" />
			</div>
			<div id="msg" style="float: left;"></div>
		</div>
		<div id="container" style="min-width: 700px; height: 400px"></div>

		
	</div>
</body>
</html>