linepassengerflow.html 6.18 KB
<style type="text/css">
	.table-bordered {
	  border: 1px solid; }
	  .table-bordered > thead > tr > th,
	  .table-bordered > thead > tr > td,
	  .table-bordered > tbody > tr > th,
	  .table-bordered > tbody > tr > td,
	  .table-bordered > tfoot > tr > th,
	  .table-bordered > tfoot > tr > td {
	    border: 1px solid; }
	  .table-bordered > thead > tr > th,
	  .table-bordered > thead > tr > td {
	    border-bottom-width: 2px; }
	 
	 .table > tbody + tbody {
	   border-top: 1px solid; }
</style>

<div class="page-head">
	<div class="page-title">
		<h1>线路客流量报表</h1>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="portlet light porttlet-fit bordered">
			<div class="portlet-title">
				<form class="form-inline" action="">
				<div style="display: inline-block; margin-left: 33px;" id="gsdmDiv_line">
						<span class="item-label" style="width: 80px;">公司: </span>
						<select class="form-control" name="company" id="gsdmLine" style="width: 140px;"></select>
					</div> 
					<div style="display: inline-block; margin-left: 24px;" id="fgsdmDiv_line">
						<span class="item-label" style="width: 80px;">分公司: </span>
						<select class="form-control" name="subCompany" id="fgsdmLine" style="width: 140px;"></select>
					</div> 
					<div style="display: inline-block;">
                        <span class="item-label" style="width: 80px;">线路: </span>
                        <select class="form-control" name="line" id="line" style="width: 180px;"></select>
                    </div>
                    <div style="display: inline-block;margin-left: 15px;">
                        <span class="item-label" style="width: 80px;">时间: </span>
                        <input class="form-control" type="text" id="date" style="width: 180px;"/>
                    </div>
                    <div class="form-group">
                        <input class="btn btn-default" type="button" id="query" value="筛选"/>
                        <input class="btn btn-default" type="button" id="export" value="导出"/>
                    </div>
				</form>
			</div>
			<div class="portlet-body">
				<div class="table-container" style="margin-top: 10px;overflow:auto;min-width: 906px">
					<table class="table table-bordered table-hover table-checkable" id="forms">
						<thead>
							<tr>
								<th>序号</th>
								<th>站点名称</th>
								<th>pos机刷卡金额</th>
								<th>投币金额</th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function(){
		 var reqCodeMap = {"0xA1": '请求恢复运营', "0xA2": '申请调档', "0xA3": '出场请求', "0xA5": '进场请求', "0xA7": '加油请求', "0x50": '车辆故障', "0x70": '路阻报告', "0x60": '事故报告', "0x11": '扣证纠纷', "0x12" : '报警'};
		// 关闭左侧栏
		if (!$('body').hasClass('page-sidebar-closed'))
			$('.menu-toggler.sidebar-toggler').click();
		
		$("#date").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn'
		});
		
		var fage=false;
		var xlList;
		var obj = [];
		
		$.get('/report/lineList',function(result){
			xlList=result;
			$.get('/user/companyData', function(result){
				obj = result;
				var options = '';
				for(var i = 0; i < obj.length; i++){
					options += '<option value="'+obj[i].companyCode+'">'+obj[i].companyName+'</option>';
				}
				
				if(obj.length ==0){
					 $("#gsdmDiv_line").css('display','none');
				}else if(obj.length ==1){
					 $("#gsdmDiv_line").css('display','none');
					if(obj[0].children.length == 1  || obj[0].children.length ==0)
						$('#fgsdmDiv_line').css('display','none');
				}
				$('#gsdmLine').html(options);
				updateCompany();
			});
		})
		$("#gsdmLine").on("change",updateCompany);
		function updateCompany(){
			var company = $('#gsdmLine').val();
			var options = '';
			for(var i = 0; i < obj.length; i++){
				if(obj[i].companyCode == company){
					var children = obj[i].children;
					for(var j = 0; j < children.length; j++){
						options += '<option value="'+children[j].code+'">'+children[j].name+'</option>';
					}
				}
			}
			$('#fgsdmLine').html(options);
			initXl();
		}
		
		$("#fgsdmLine").on("change",initXl);
		function initXl(){
			var data=[];
			if(fage){
				$("#line").select2("destroy").html('');
			}
			var fgs=$('#fgsdmLine').val();
			var gs=$('#gsdmLine').val();
			for(var i=0;i<xlList.length;i++){
				if(gs!=""){
					if(fgs!=""){
						if(xlList[i]["fgsbm"]==fgs && xlList[i]["gsbm"]==gs){
							data.push({id: xlList[i]["xlbm"], text: xlList[i]["xlname"]});
						}
					}else{
						if(xlList[i]["gsbm"]==gs){
							data.push({id: xlList[i]["xlbm"], text: xlList[i]["xlname"]});
						}
					}
				}
			}
			initPinYinSelect2('#line',data,'');
			fage=true;
		}
		
		var line;
		var date;
		var gsdmLine;
		var fgsdmLine;
		$("#query").on("click",function(){
			var line = $("#line").val();
			var date = $("#date").val();
			var gsdmLine = $("#gsdmLine").val();
			var fgsdmLine = $("#fgsdmLine").val();
		    $post('/mcy_forms/linepasswengerflow',{ gsdmLine:gsdmLine,fgsdmLine:fgsdmLine,line:line,date:date,type:'query'},function(result){
				$.each(result, function(i, obj) {
					obj.requestType = reqCodeMap[obj.requestType];
                }); 
				// 把数据填充到模版中
				var tbodyHtml = template('list_linepasswengerflow',{list:result});
				// 把渲染好的模版html文本追加到表格中
				$('#forms tbody').html(tbodyHtml);
			});	
		}); 
		
		$("#export").on("click",function(){
			var line = $("#line").val();
			var date = $("#date").val();
			var gsdmLine = $("#gsdmLine").val();
			var fgsdmLine = $("#fgsdmLine").val();
			$post('/mcy_export/linepasswengerflowExport',{gsdmLine:gsdmLine,fgsdmLine:fgsdmLine,line:line,date:date,type:'export'},function(result){
				window.open("/downloadFile/download?fileName=线路客流量报表"+moment(date).format("YYYYMMDD"));
			});
		});
	});
</script>
<script type="text/html" id="list_linepasswengerflow">
	{{each list as obj i}}
		<tr>	
			<td>{{i+1}}</td>
            <td>{{obj.stationName}}</td>
			<td>  </td>
			<td>  </td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="6"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>