{subtemplate common/header}-->
<div class="bm cl" id="path">
    <div class="z"> <a title="" class="nvhm" href="./">iBos</a> <em></em>
    <a href="{$_G[PHP_SELF]}?mod={$mod}&do={$do}">{lang vehicle}</a> <em></em>
    <span>{lang vehicle_cost_statistics}</span>
    </div>
</div>
<!--container start-->
<div id="container" class="ct2_a wp cl">
	<!--{subtemplate office/vehicle_sidebar}-->
    <div class="mainer">
        <div class="mainer-title">{lang vehicle_cost_statistics}</div>
        <!--{subtemplate office/vehicle_cost_header}-->
        <div class="well well-mini mbw cl hideof">
            <ul class="condition-list">
                <li>
                    <div class="btn-group" data-toggle="buttons-radio" id="statisticstimebtns">
                        <button type="button" class="btn" data-time-type="currentmonth"><span>{lang vehicle_statistics_currentmonth}</span></button>
                        <button type="button" class="btn" data-time-type="lastmonth">{lang vehicle_statistics_lastmonth}</button>
                        <button type="button" class="btn" data-time-type="currentseason">{lang vehicle_statistics_currentseason}</button>
                        <button type="button" class="btn" data-time-type="halfayear">{lang vehicle_statistics_halfayear}</button>
                        <button type="button" class="btn" data-time-type="currentyear">{lang vehicle_statistics_currentyear}</button>
                    </div>
                </li>
                <li>
                    <div class="input-append input-prepend mg0">
                        <span class="add-on">{lang vehicle_time_from}</span><input type="text" class="w_60" name="" id="begintime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',onpicked:function(){ oVhlCostStatistics.fnSetStatistics();}}); this.blur();"/><button type="button" class="btn add-on" onclick="WdatePicker({el:'begintime',dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',onpicked:function(){ oVhlCostStatistics.fnSetStatistics();}});"><i class="i_g i-date"></i></button>
                    </div>
                </li>
                <li>
                    <div class="input-append input-prepend mg0">
                        <span class="add-on">{lang vehicle_time_to}</span><input type="text" class="w_60" name="" id="endtime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:'#F{document.getElementById(\'begintime\').value;}',onpicked:function(){ oVhlCostStatistics.fnSetStatistics(); }}); this.blur();"/><button type="button" class="btn add-on" onclick="WdatePicker({el:'endtime',dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:'#F{document.getElementById(\'begintime\').value;}',onpicked:function(){ oVhlCostStatistics.fnSetStatistics();}});"><i class="i_g i-date"></i></button>
                    </div>            
                </li>
            </ul>
        </div>
        <ul class="grid-list mbw cl">
			<li>
                <div class="xc3">&yen;<em id="costtotal">0</em>{lang vehicle_yen}</div>
                <div>{lang vehicle_run_cost_total}</div>
            </li>
        	<li>
                <div class="xc3">&yen;<em id="acquisitioncost">0</em>{lang vehicle_yen}</div>
                <div>{lang vehicle_run_acquisition_total}</div>        
            </li>
        	<li class="bw0_all">
                <div class="xc3" >&yen;<em id="everycost">0</em>{lang vehicle_yen}</div>
                <div>{lang vehicle_run_everyday_cost}</div>
            </li>
        </ul>
        <div class="chart-info mbw">
            <h2 class="sub-title">{lang vehicle_statistics_cost_contrast}</h2>
            <div id="cost_contrast" class="w_80" style="margin: 30px auto;"></div>
        </div>
        <div class="chart-info mbw">
            <h2 class="sub-title">{lang vehicle_statistics_time_cost}</h2>
            <div id="cost_work" class="w_80" style="height: 300px; margin: 30px auto"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="{$_G[setting][jspath]}flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}flot/excanvas.min.js"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}/iflot.js"></script>

<script type="text/javascript">
var oVhlCostStatistics = new Vehicle();
!function( self ){
	//TODO::统计图表用了比较多的$.map函数，影响内存使用，待改进
	
	var oVehicleList = {$vehiclelist},
		oMainTainList = {$maintainlist},
		oRunList = {$runlist},
		oRefuelList = {$refuellist},
		oBarMain = $('#cost_contrast'),
		oLineMain = $('#cost_work'),
		oBeginTimeInput = $('#begintime'),
		oEndTimeInput = $('#endtime'),
		nCostTotal = nAcquisitionCost = nEveryCost = 0;
	
	$(function() {
		//绑定时间按键对应的图表事件，并初始化图表
		$('#statisticstimebtns button').click(function() {
			fnQuickSetStatistics(self.fnGetEleData(this, 'timeType'));
		}).find(':eq(0)').click(); //初始化第一个按钮的图表
		
		//绑定点击切换宽版事件，改变图表长度
		$('#widthauto').click(function() {
			//预留一小段时间保证页面渲染完成后才重绘数据图表
			setTimeout(function() {
				fnSetStatistics();
			}, 200);
		});
	});
	
	function fnSetStatistics(nBeginTime, nEndTime) {
		//存在时间参数时改变时间控件上的时间等于时间参数
		if(nBeginTime && nEndTime) {
			oBeginTimeInput.val(self.fnFormatTimestamp(nBeginTime));
			oEndTimeInput.val(self.fnFormatTimestamp(nEndTime));
		//没传时间参数则直接使用时间控件上的时间
		} else {
			//重置按键样式
			$('#statisticstimebtns button.active').removeClass('active');
			nBeginTime = Date.parse(oBeginTimeInput.val());
			nEndTime = Date.parse(oEndTimeInput.val());
		}
		fnSetFlot(nBeginTime, nEndTime);
		//更改头部统计信息
		$('#costtotal').html(nCostTotal);
		$('#acquisitioncost').html(nAcquisitionCost);
		$('#everycost').html(nEveryCost);
	}
	
	/**
	 * 快速设置图表
	 */
	function fnQuickSetStatistics(sType) {
		var aTimeRange = self.fnGetTimeRange(sType);
		fnSetStatistics(aTimeRange[0], aTimeRange[1]);
	}
	
	/**
	 * 设置图表
	 */
	function fnSetFlot(nBeginTime, nEndTime) {
		oBarMain.iFlot( 'bar', {
			oData: fnFilterBar(nBeginTime, nEndTime),
			//'总计', '维护', '运行', '加油'
			aLabelData: [
				'{lang vehicle_statistics_label_total}',
				'{lang vehicle_statistics_label_maintain}',
				'{lang vehicle_statistics_label_run}',
				'{lang vehicle_statistics_label_refuel}'
			],
			bHorizontal: true,
			bAutoWeight: true,
			nTicks: 5
		});
		
		oLineMain.iFlot( 'line', {
			oData: fnFilterLine(nBeginTime, nEndTime),
			oXaxis: { sMode: 'time', aTickSize: [[parseInt(nEndTime - nBeginTime) / 86400000 / 4], 'day'] }
			
		});
	}
	
	/**
	 * 筛选车辆记录，作用于柱状图
	 * @param int nBeginTime
	 * @param int nEndTime
	 * @return object
	 */
	function fnFilterBar(nBeginTime, nEndTime) {
		var nBeginTimeStamp = nBeginTime / 1000,
			nEndTimeStamp = nEndTime / 1000,
			oData = {};
		nCostTotal = 0;
		nAcquisitionCost = 0;
		nEveryCost = 0;
		$.map(oVehicleList, function(vehicle) {
			oData[vehicle.num] = [];
			var nMainTainCostTotal = 0;
			$.map(oMainTainList, function(oMainTain) {
				if(oMainTain.vid == vehicle.vid && nBeginTimeStamp <= oMainTain.paytime && oMainTain.paytime <= nEndTimeStamp) {
					//记录统计信息
					nMainTainCostTotal += +oMainTain.costtotal;
				}
			});
			oData[vehicle.num][1] = nMainTainCostTotal;
			var nRunCostTotal = 0;
			$.map(oRunList, function(oRun) {
				if(oRun.vid == vehicle.vid && nBeginTimeStamp <= oRun.paytime && oRun.paytime <= nEndTimeStamp) {
					//记录统计信息
					nRunCostTotal += +oRun.costtotal;
				}
			});
			oData[vehicle.num][2] = nRunCostTotal;
			var nRefuelCostTotal = 0;
			$.map(oRefuelList, function(oRefuel) {
				if(oRefuel.vid == vehicle.vid && nBeginTimeStamp <= oRefuel.paytime && oRefuel.paytime <= nEndTimeStamp) {
					//记录统计信息
					nRefuelCostTotal += +oRefuel.costtotal;
				}
			});
			oData[vehicle.num][3] = nRefuelCostTotal;
			oData[vehicle.num][0] = nMainTainCostTotal + nRunCostTotal + nRefuelCostTotal;
			nCostTotal += oData[vehicle.num][0];
			nAcquisitionCost += (+nCostTotal) + (+vehicle.price);
		});
		nEveryCost = (Math.ceil((nEndTime - nBeginTime) / 86400000)) == 0 ? 0 : (nCostTotal / (Math.ceil((nEndTime - nBeginTime) / 86400000)))
					//结果保留两位小数（没有四舍五入，直接去除后面的数）
					.toString().replace(/^(\d+\.\d\d)\d+$/, '$1');
		return oData;
	}
	
	/**
	 * 筛选车辆记录，作用于折线图
	 * 
	 * @param int nBeginTime
	 * @param int nEndTime
	 * @return object
	 */
	function fnFilterLine(nBeginTime, nEndTime) {
		var nOneDay = 86400000;
		var oData = {};
		//多少刻度，由于时间-里程表的特殊，定义不同刻度数的时候，折线图展现出的反差较大，但数据是正确的
		//一般情况下在页面中不允许用户自定义刻度
		var nMaxTicks = 5;
		//取出范围
		var nTimeDifference = parseInt((nEndTime - nBeginTime) / nOneDay) + 1;
		//计算刻度
		var nTicks = (nTimeDifference > nMaxTicks) ? nMaxTicks : nTimeDifference;
		var nTicksSpaceDays = (nTimeDifference - (nTimeDifference % nTicks)) / nTicks + 1;
		var oBeginDate = new Date(nBeginTime);
		var nBeginDay = new Date(oBeginDate.getFullYear(), oBeginDate.getMonth(), oBeginDate.getDate()).getTime();
		
		$.map(oVehicleList, function(vehicle) {
			oData[vehicle.num] = [];
		});
		//遍历每个时间区域，计算里程
		var aTicksData = [];
		//先得到结束时间
		var nEndDay = nBeginDay + nTicks * nTicksSpaceDays * nOneDay;
		var nNowTicks = 0;
		//声明一个时间变量，初始化为开始时间，如果少于结束时间，则该变量加上一个刻度的时间区间
		for(var nNowDay = nBeginDay; nNowDay < nEndDay; nNowDay += nTicksSpaceDays * nOneDay) {
			var nNowBeginTime = nNowDay / 1000;
			var nNowEndTime = (nNowDay + nTicksSpaceDays * nOneDay) / 1000;
			var nCostTotal = 0;
			//遍历每个申请，属于哪个范围，并归类和排序
			$.map(oMainTainList, function(oMainTain) {
				//只使用车辆申请的结束时间作为范围判断
				if(nNowBeginTime <= oMainTain.paytime && oMainTain.paytime <= nNowEndTime) {
					nCostTotal = +oMainTain.costtotal;
					var oCurrentData = oData[ oVehicleList[ oMainTain.vid ].num ];
					nCostTotal += (oCurrentData[nNowTicks] && oCurrentData[nNowTicks][1]) || 0;
					oCurrentData[nNowTicks] = [nNowDay, nCostTotal];
				}
			});
			//遍历每个申请，属于哪个范围，并归类和排序
			$.map(oRunList, function(oRun) {
				//只使用车辆申请的结束时间作为范围判断
				if(nNowBeginTime <= oRun.paytime && oRun.paytime <= nNowEndTime) {
					nCostTotal = +oRun.costtotal;
					var oCurrentData = oData[ oVehicleList[ oRun.vid ].num ];
					nCostTotal += (oCurrentData[nNowTicks] && oCurrentData[nNowTicks][1]) || 0;
					oCurrentData[nNowTicks] = [nNowDay, nCostTotal];
				}
			});
			//遍历每个申请，属于哪个范围，并归类和排序
			$.map(oRefuelList, function(oRefuel) {
				//只使用车辆申请的结束时间作为范围判断
				if(nNowBeginTime <= oRefuel.paytime && oRefuel.paytime <= nNowEndTime) {
					nCostTotal = +oRefuel.costtotal;
					var oCurrentData = oData[ oVehicleList[ oRefuel.vid ].num ];
					nCostTotal += (oCurrentData[nNowTicks] && oCurrentData[nNowTicks][1]) || 0;
					oCurrentData[nNowTicks] = [nNowDay, nCostTotal];
				}
			});
			//每台车辆在某一个区间可能没有使用，也就没有数据了，这样会导致折线之间出现断开现象，所以要填补数据空缺
			$.map(oData, function(oSubData) {
				if(!oSubData[nNowTicks]) {
					//设置默认坐标为当前时间区间的Y坐标为0
					oSubData[nNowTicks] = [nNowDay, 0];
				}
			});
			nNowTicks++;
		}
		return oData;
	}
	self.fnSetStatistics = fnSetStatistics;
}(oVhlCostStatistics);
</script>
<!--container end-->
<!--{subtemplate common/footer}