潘钊 / bsth_control · Files

<div class="page-head">
	<div class="page-title">
		<h1>超速异常</h1>
	</div>
</div>

<ul class="page-breadcrumb breadcrumb">
	<li><a href="/pages/home.html" data-pjax>主页</a> <i class="fa fa-circle"></i></li>
	<li><span class="active">异常查看</span> <i class="fa fa-circle"></i></li>
	<li><span class="active">超速异常</span></li>
</ul>

<div class="row">
	<div class="col-md-12">
		<!-- Begin: life time stats -->
		<div class="portlet light portlet-fit portlet-datatable bordered">
			<div class="portlet-title">
				<div class="caption">
					 <i class="fa fa-times-circle"></i> <span
						class="caption-subject font-dark sbold uppercase">超速异常数据表</span>
				</div>
				<div class="actions">
				</div>
			</div>
			<div class="portlet-body">
				<div class="table-container" style="margin-top: 10px">
					<table
						class="table table-striped table-bordered table-hover table-checkable"
						id="datatable_speeding">
						<thead>
							<tr role="row" class="heading">
								<th width="3%">#</th>
								<th width="4%">线路</th>
								<th width="6%">车辆自编号</th>
								<th width="6%">上下行</th>
								<th width="8%">超速位置</th>
								<th width="8%">开始时间</th>
								<th width="8%">结束时间</th>
								<th width="8%">持续时间</th>
								<!-- <th width="8%">查看轨迹</th> -->
								<th width="9%">操作</th>
							</tr>
							<tr role="row" class="filter">
								<td></td>
								<td>
										<select class="form-control" name="line" id="line" style="width: 100px;"></select>
								</td>
								<td>
										<select class="form-control" name="nbbm" id="nbbm" style="width: 100px;"></select>
								</td>
								<td>
									<select class="form-control form-filter " name="updown" style="width: 90px;">
                                         <option value="">请选择...</option>
                                         <option value="0">上行</option>
                                         <option value="1">下行</option>
                                         <option value="-1">无效</option>
                                     </select>
								</td> 
								<td>
								</td> 
								<td>  
									<input class="form-control" type="date" name="startDate" />
								</td>
								<td>
									<input class="form-control" type="date" name="endDate" />
								</td>
								<td>
									>=<input class="form-control" type="text" name="times" style="width:50px;display:inline!important"
									  onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();"/> 
								</td>
								<!-- <td>
								</td> -->
								<td>
									<button class="btn btn-sm green btn-outline filter-submit margin-bottom" >
                                                                <i class="fa fa-search"></i> 搜索</button>
                                                                
									<button class="btn btn-sm red btn-outline filter-cancel">
                                                            <i class="fa fa-times"></i> 重置</button>
								</td>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
					<div style="text-align: right;">
						<ul id="pagination" class="pagination"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script id="speeding_list_temp" type="text/html">
{{each list as obj i}}
<tr>
	<td style="vertical-align: middle;">
		{{(i+1)}}
	</td>
	<td>
		{{obj.lineName}}
	</td>
	<td>
		{{obj.vehicle}}
	</td>
	<td>
		{{if obj.upDown==0}}
			上行
		{{else if obj.upDown==1}}
			下行 
		{{else}}
			无效
		{{/if}}
	</td>	
	<td>
		{{obj.address}}
	</td>	
	<td>
		{{obj.timestampDate}}
	</td>
	<td>
		{{obj.endtimestampDate}}
	</td>
	<td>
		{{(obj.endtimestamp-obj.timestamp)/1000}}秒
	</td>
	<td>
		<a class="btn default blue-stripe btn-sm lookTrajectory" data-vehicle ="{{obj.vehicle}}"
			data-startdate="{{obj.timestampDate}}" data-enddate="{{obj.endtimestampDate}}"
			data-lon="{{obj.lon}}"  data-lat="{{obj.lat}}" data-endlon="{{obj.endlon}}"  
            data-endlat="{{obj.endlat}}" data-lineid="{{obj.lineId}}" data-updown="{{obj.upDown}}">
			轨迹回放										
		</a>
	</td>
</tr>
{{/each}}
{{if list.length == 0}}
<tr>
	<td colspan=8><h6 class="muted">没有找到相关数据</h6></td>
</tr>
{{/if}}
</script>

<script>
$(function(){
	if (!$('body').hasClass('page-sidebar-closed')) {$('.menu-toggler.sidebar-toggler').click();}
	var page = 0, initPagination;
	var icheckOptions = {
	    checkboxClass: 'icheckbox_flat-blue',
	    increaseArea: '20%'
	}
	
	var date = new Date();
	var week = date.getDay();//表明今天是周几。0-6表示周日到周六
	var dateTime = date.getTime();//当前时间的时间戳，单位秒。		
	
 	var endTime = dateTime-week*24*3600*1000;//上周末、格式为时间戳。
	var startTime = endTime-6*24*3600*1000;//上周一、格式为时间戳。
	var endDate = timeToData(endTime);
	var startDate = timeToData(startTime);
 	//表单默认选择上周一到上周日的超速信息。
 	$("input[name='endDate']")[0].value = endDate;
 	$("input[name='startDate']")[0].value = startDate;
 	var parameter = new Object();
 	parameter.endDate = $("input[name='endDate']")[0].value;
 	parameter.startDate = $("input[name='startDate']")[0].value;
 	jsDoQuery(parameter, true);
 	//搜索线路
	$.get('/basic/lineCode2Name',function(result){
		var data=[];
		data.push({id: " ", text: "全部线路"});
		for(var code in result){
			data.push({id: code, text: result[code]});
		}
		initPinYinSelect2('#line',data,'');
	});
	
	//时间戳转换为年月日
	function timeToData(time){
		var date = new Date(time);
		var year = date.getFullYear();
		var Month = date.getMonth()+1>10?date.getMonth()+1:"0"+(date.getMonth()+1); 
 		var Day = date.getDate()>9?date.getDate():"0"+date.getDate();
		return year+"-"+Month+"-"+Day;
	}
	
	//重置
	$('tr.filter .filter-cancel').on('click', function(){
		$('tr.filter input, select').val('').change();
		jsDoQuery(null, true);
	});
	
	//提交
	$('tr.filter .filter-submit').on('click', function(){
		var cells = $('tr.filter')[0].cells
			,params = {}
			,name;
		$.each(cells, function(i, cell){
			var items = $('input,select', cell);
			for(var j = 0, item; item = items[j++];){
				name = $(item).attr('name');
				if(name){
					params[name] = $(item).val();
				}
			}
		});
		page = 0;
		jsDoQuery(params, true);
	});
	
	/*
	* 获取数据 p: 要提交的参数， pagination: 是否重新分页
	*/
 	function jsDoQuery(p, pagination){
		var params = {};
		if(p)
			params = p;
		//更新时间排序
		params['order'] = 'lastLoginDate';
		params['page'] = page;
		var i = layer.load(2);
		$get('/nowspeeding/pagequery' ,params, function(data){
			var listResult = data.dataList;
			var index=0;
			(function(){
				var f = arguments.callee;
				if(index >= listResult.length){
					var bodyHtm = template('speeding_list_temp', {list:listResult});
					$('#datatable_speeding tbody').html(bodyHtm).find('.icheck').iCheck(icheckOptions).on('ifChanged', iCheckChange);
					if(pagination && data.dataList.length > 0){
						//重新分页
						initPagination = true;
						showPagination(data);
					}
					layer.close(i);
		  			$(".lookTrajectory").click(function(){
		  				var vehicle = $(this).data('vehicle');
		  				var startDate = $(this).data('startdate');
		  				var endDate = $(this).data('enddate');
		  				var lon = $(this).data('lon');
		  				var lat = $(this).data('lat');
		  				var endLon = $(this).data('endlon');
		  				var endLat = $(this).data('endlat');
		  				var lineid = $(this).data('lineid');
		  				var upDown = $(this).data('updown');
		  				var storage = window.localStorage;
		  				storage.setItem("zbhAndDate",vehicle+","+startDate+","+endDate+","+lon+","+lat+","+endLon+","+endLat+","+lineid+","+upDown);
		 				$.get('/pages/excep/speedingMap.html?',function (result) {
					    	layer.open({
								type: 1,
								title:'<i class="uk-icon-play-circle"></i>轨迹回放',
								shadeClose: true,
								shade: true,
								scrollbar: false,
								maxmin: false, //开启最大化最小化按钮
								area: ['100%', '100%'],
							    content:result,//内容
							});
					    });
					}) 
					return;
				}
				var result = listResult[index];
				new BMap.Geocoder().getLocation(new BMap.Point(result.lon,result.lat), function(rs){  //根据坐标点查询文字位置。
					var addComp = rs.addressComponents;
					result.address = addComp.district+addComp.street+addComp.streetNumber;
					f();
					index++;
				});
			})();
		});
	}
	
	function iCheckChange(){
		var tr = $(this).parents('tr');
		if(this.checked)
			tr.addClass('row-active');
		else
			tr.removeClass('row-active');
		
		if($('#datatable_resource input.icheck:checked').length == 1)
			$('#removeButton').removeAttr('disabled');
		else
			$('#removeButton').attr('disabled', 'disabled');
	}
	
	function showPagination(data){
		//分页
		$('#pagination').jqPaginator({
		    totalPages: data.totalPage,//总页数
		    visiblePages: 6,// 中间显示页数
		    currentPage: page + 1,
		    first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
            prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
            last: '<li class="last"><a href="javascript:void(0);">尾页<\/a><\/li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
		    onPageChange: function (num, type) {
		    	if(initPagination){
		    		initPagination = false;
		    		return;
		    	}	
		    	var cells = $('tr.filter')[0].cells
				,params = {}
				,name;
				$.each(cells, function(i, cell){
					var items = $('input,select', cell);
					for(var j = 0, item; item = items[j++];){
						name = $(item).attr('name');
						if(name){
							params[name] = $(item).val();
						}
					}
				});
				page = num - 1;
			   	jsDoQuery(params, false);
		    }
		});
	}
	
	//删除
	$('#removeButton').on('click', function(){
		if($(this).attr('disabled'))
			return;
		
		var id = $('#datatable_resource input.icheck:checked').data('id');
		
		removeConfirm('确定要删除选中的数据？', '/resource/' + id ,function(){
			$('tr.filter .filter-submit').click();
		});
	});

$("#line").on("change",initXl);
function initXl(){
$('#nbbm').select2({
    placeholder: '搜索车辆...',
    ajax: {
        url: '/report/carList',
        dataType: 'json',
        delay: 150,
        data: function (params) {
        	   return {nbbm: params.term,
           	    gsbm:"",
           	    fgsbm:"",
           	    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>';
        }
    }
});
}


//改变状态
function changeEnabled(id,enabled){
	$get('/user/changeEnabled',{id:id,enabled:enabled},function(result){
		jsDoQuery(null, true);
	})
}
});
</script>