潘钊 / bsth_control · Files

<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>
						<div style="display: inline-block; margin-left: 10px;">
							统计:
							<input type="radio" checked name="statistic" value="0"/> 按站点
							<input type="radio" name="statistic" value="1"/> 按车辆
						</div>
						<div style="display: inline-block; margin-left: 10px;" id="gsdmDiv">
							<span class="item-label" style="width: 80px;">公司: </span>
							<select class="form-control" name="company" id="gsdm" style="width: 180px;"></select>
						</div> 
						<div style="display: inline-block; margin-left: 10px;" id="fgsdmDiv">
							<span class="item-label" style="width: 80px;">分公司: </span>
							<select class="form-control" name="subCompany" id="fgsdm" style="width: 180px;"></select>
						</div>
						<div style="display: inline-block;margin-left: 10px;">
							<span class="item-label" style="width: 80px;">线路: </span>
							<select class="form-control station-change" name="line" id="line"  style="width: 180px;"></select>
						</div>
						<div style="display: inline-block;margin-left: 10px;">
							<span class="item-label" style="width: 80px;">时间: </span>
							<input class="form-control station-change" type="text" id="rqBegin" name="rqBegin" style="width: 180px;"/>&nbsp;至&nbsp;
							<input class="form-control station-change" type="text" id="rqEnd" name="rqEnd" style="width: 180px;"/>
						</div>
					</div>
					<br/>
					<div>
						<div class="group" style="display: inline-block;">
							<div style="display: inline-block;margin-left: 10px;">
								<span class="item-label" style="width: 80px;">上下行: </span>
								<select class="form-control station-change" name="direction" style="width: 180px;">
									<option value="0">上行</option>
									<option value="1">下行</option>
								</select>
							</div>
							<div style="display: inline-block;margin-left: 10px;">
								<span class="item-label" style="width: 80px;">站点: </span>
								<select class="form-control" id="stationCode" name="stationCode" style="width: 180px;"></select>
							</div>
						</div>
						<div class="group" style="display: none;">
							<div style="display: inline-block;margin-left: 10px;">
								<span class="item-label" style="width: 80px;">车辆: </span>
								<select class="form-control"  id="insideCode" style="width: 180px;"></select>
							</div>
						</div>
						<div class="form-group" style="display: inline-block;margin-left: 15px;">
							<input class="btn btn-default" type="button" id="query" value="查询"/>
							<input class="btn btn-default" type="button" id="export" value="导出"/>
						</div>
					</div>
				</form>
			</div>
			<div class="portlet-body">
				<div class="row">
					<div class="table-container" style="margin-top: 10px;overflow:auto;min-width: 906px;height: 100%">
						<table class="table table-bordered table-checkable" id="forms0">
							<thead>
								<tr>
									<td width="8%">序号</td>
									<td width="23%">线路</td>
									<td width="23%">上下行</td>
									<td width="23%">站点名称</td>
									<td width="23%">刷卡次数</td>
								</tr>
							</thead>
					        <tbody class="passenger_statistic_tbody">
					        	
					        </tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="portlet-body" style="display: none;">
				<div class="row">
					<div class="table-container" style="margin-top: 10px;overflow:auto;min-width: 906px;height: 100%">
						<table class="table table-bordered table-checkable" id="forms1">
							<thead>
							<tr>
								<td width="10%"></td>
								<td width="30%">线路</td>
								<td width="30%">车辆编码</td>
								<td width="30%">刷卡次数</td>
							</tr>
							</thead>
							<tbody class="passenger_statistic_tbody">

							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function(){
		$('input[name="statistic"]').on('change', function() {
			$('.group').css('display', 'none').eq($(this).val()).css('display', 'inline-block');
			$('.portlet-body').css('display', 'none').eq($(this).val()).css('display', '');
		})
		// 关闭左侧栏
		if (!$('body').hasClass('page-sidebar-closed'))
			$('.menu-toggler.sidebar-toggler').click();

		$("#rqBegin").datetimepicker({
			format : 'YYYYMMDDHH',
			locale : 'zh-cn'
		});
		
		$("#rqEnd").datetimepicker({
			format : 'YYYYMMDDHH',
			locale : 'zh-cn'
		});

		var dt = moment().format('YYYYMMDD');
		$('#rqBegin').val(dt + '00');
		$('#rqEnd').val(dt + '23');

		var obj = [];
		var xlList;
		$.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").css('display','none');
				}else if(obj.length ==1){
					 $("#gsdmDiv").css('display','none');
					if(obj[0].children.length == 1  || obj[0].children.length ==0)
						$('#fgsdmDiv').css('display','none');
				}
				$('#gsdm').html(options);
				
				updateCompany();
			});
		});

		$("#gsdm").on("change",updateCompany);
		function updateCompany(){
			var company = $('#gsdm').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>';
					}
				}
			}
			$('#fgsdm').html(options);
			initCl();
		}
		
		
		var tempData = {};
		$.get('/report/lineList',function(xlList){
			var data = [];
			$.get('/user/companyData', function(result){
				for(var i = 0; i < result.length; i++){
					var companyCode = result[i].companyCode;
					var children = result[i].children;
					for(var j = 0; j < children.length; j++){
						var code = children[j].code;
						for(var k=0;k < xlList.length;k++ ){
							if(xlList[k]["fgsbm"]==code && xlList[k]["gsbm"]==companyCode){
								data.push({id: xlList[k]["xlbm"], text: xlList[k]["xlname"]});
								tempData[xlList[k]["xlbm"]] = companyCode+":"+code;
							}
						}
					}
				}
				initPinYinSelect2('#line',data,'');
			});
		});
		
		$("#line").on("change", function(){
			if($("#line").val() == " "){
				$("#gsdm").attr("disabled", false);
				$("#fgsdm").attr("disabled", false);
			} else {
				var temp = (tempData[$("#line").val()] ? tempData[$("#line").val()] : " : ").split(":");
				$("#gsdm").val(temp[0]);
				updateCompany();
				$("#fgsdm").val(temp[1]);
				$("#gsdm").attr("disabled", true);
				$("#fgsdm").attr("disabled", true);
			}
		});
		
		 
		$("#query").on("click",function(){
			var param = $('.form-inline').serializeJSON();
			if (param.stationCode === '-1') {
				delete param.stationCode;
			}
			if (!param.line) {
				layer.msg("请选择线路");
			} else if (!param.rqBegin || !param.rqEnd){
				layer.msg("请选择起止时间");
			} else {
				$get('/api/passenger-statistic' + (param.statistic === '0' ? '/groupByStation' : '/groupByVehicle'), param, function(result){
					var html = template('passenger_statistic_template' + param.statistic,{list:result});
					$('#forms' + param.statistic + ' .passenger_statistic_tbody').html(html);
				});
			}
		});

		$("#line").on("change",initCl);
		function initCl(){
			$('#insideCode').select2({
				placeholder: '搜索车辆...',
				allowClear: true,
				ajax: {
					url: '/report/carListByHistory',
					dataType: 'json',
					delay: 150,
					data: function(params){
						return{nbbm: params.term,
	                	    gsbm:$('#gsdm').val(),
	                	    fgsbm:$('#fgsdm').val(),
	                	    xlbm:$('#line').val()};
					},
				    processResults: function (data) {
				      return {
				        results: data
				      };
				    },
					cache: true
				},
				templateResult: function(repo){
					if (repo.loading) return repo.text;
					var h = '<span>'+repo.text+'</span>';
					h += (repo.lineName?'&nbsp;<span class="select2-desc">'+repo.lineName+'</span>':'');
					return h;
				},
				escapeMarkup: function (markup) { return markup; },
				minimumInputLength: 1,
				templateSelection: function(repo){
					return repo.text;
				},
				language: {
			       noResults: function(){
			           return '<span style="color:red;font-size: 12px;">没有搜索到车辆！</span>';
			       },
			       inputTooShort : function(e) {
						return '<span style="color:gray;font-size: 12px;"><i class="fa fa-search"></i> 输入自编号搜索车辆</span>';
				   },
			       searching : function() {
						return '<span style="color:gray;font-size: 12px;"> 正在搜索车辆...</span>';
				   }
				}
			});
		};

		
		$(".station-change").on("change",initZd);
		$("#rqBegin,#rqEnd").on("blur",initZd);
		var status=false;
		
		function initZd(){
			var param = $('.form-inline').serializeJSON();
			if (!param.line || !param.direction || !param.rqBegin || !param.rqEnd) {
			} else {
				$.get('/api/lsstationroute/findByLineDirectionDate', param, function(result){
					var zdList=result.data;
					if(status){
						$("#stationCode").select2("destroy").html('');
					}
					var datas=[];
					datas.push({id:"-1",text:"请选择..."});
					for(var i=0;i<zdList.length;i++){
						datas.push({id: zdList[i]["stationCode"], text: zdList[i]["stationName"] + '(v' + zdList[i]['versions'] + ')'});
					}
					initPinYinSelect2('#stationCode',datas);
					status=true;
				})
			}
		}
		
		$("#export").on("click",function(){
			var param = $('.form-inline').serializeJSON();
			if (param.stationCode === '-1') {
				delete param.stationCode;
			}
			if (!param.line) {
				layer.msg("请选择线路");
			} else if (!param.rqBegin || !param.rqEnd){
				layer.msg("请选择起止时间");
			} else {
				$get('/api/passenger-statistic' + (param.statistic === '0' ? '/groupByStation/export' : '/groupByVehicle/export'), param, function(result){
					window.open('/downloadFile/download?fileName=' + param.rqBegin + '至' + param.rqEnd + '-刷卡客流统计(' + (param.statistic === '0' ? '站点' : '车辆') + ')');
				});
			}
		});
	});
	
</script>
<script type="text/html" id="passenger_statistic_template0">
	  {{each list as obj i}}
		<tr>
			<td>{{i+1}}</td>
			<td>{{obj.lineName}}</td>
			<td>
				{{if obj.direction==0}}
				上行
				{{else}}
				下行
				{{/if}}
			</td>
			<td>{{obj.stationName}}</td>
			<td>{{obj.number}}</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="5"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>
<script type="text/html" id="passenger_statistic_template1">
	{{each list as obj i}}
	<tr>
		<td>{{i+1}}</td>
		<td>{{obj.lineName}}</td>
		<td>{{obj.insideCode}}</td>
		<td>{{obj.number}}</td>
	</tr>
	{{/each}}
	{{if list.length == 0}}
	<tr>
		<td colspan="4"><h6 class="muted">没有找到相关数据</h6></td>
	</tr>
	{{/if}}
</script>