潘钊 / bsth_control · Files

<div class="page-head">
	<div class="page-title">
		<h1>安全驾驶查询</h1>
	</div>
</div>
<style>
	#imageModal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		justify-content: center;
		align-items: center;
	}

	#videoModal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		justify-content: center;
		align-items: center;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200px;
	}
</style>
<!--<script src="/assets/plugins/uk3.0/uikit.min.js"></script>
<script src="/assets/plugins/uk3.0/uikit-icons.min.js"></script>
<link rel="stylesheet" href="/assets/plugins/uk3.0/uikit.min.css"/>-->
<script src="/real_control_v2/mapmonitor/js/playback.js"></script>
<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">
		<div class="portlet light portlet-fit portlet-datatable bordered">
			<div class="portlet-title">
				<div class="caption">
					 <i class="fa fa-users font-dark"></i> <span
						class="caption-subject font-dark sbold uppercase">安全驾驶查询</span>
				</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_user">
						<thead>
							<tr role="row" class="heading">
								<th width="3%">#</th>
								<th width="15%">$$$$$${txt-3815}</th>
								<th width="15%">$$$$$${txt-2008}</th>
								<th width="15%">$$$$$${txt-3682}</th>
								<th width="15%">异常类型</th>
								<th width="15%">$$$$$${txt-4004}</th>
								<th width="15%">$$$$$${txt-3942}</th>
							</tr>
							<tr role="row" class="filter">
								<td></td>
								<td>
									<select name="line" class="form-control" style="width:100%" id="line">

									</select>
									 <!--<input type="text"  class="form-control form-filter input-sm" name="name_like">-->
								</td>
								<td>
									<input type="text" class="form-control form-filter input-sm" name="nbbm_like">
								</td>
								<td></td>
								<td></td>
								<td>
									<input class="form-control" type="text" id="date" style="width: 180px;"/>
								</td>
								<td>
									<button class="btn btn-sm green btn-outline filter-submit margin-bottom" ><i class="fa fa-search"></i> $$$$$${txt-4001}</button>
									<button class="btn btn-sm red btn-outline filter-cancel"><i class="fa fa-times"></i> $$$$$${txt-4000}</button>
								</td>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
					<div style="text-align: right;">
						<ul id="pagination" class="pagination"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="imageModal">
	<div class="container">
		<img id="img" style="width: 768px;height: 432px">
	</div>
</div>
<div id="videoModal">
	<div class="container">
		<video id="myVideo" width="768px" height="432px" controls>
			<source src="" type="video/mp4">
		</video>
	</div>
</div>

<script id="dsm_list_temp" type="text/html">
{{each list as obj i}}
<tr>
	<td style="vertical-align: middle;">
		{{++i}}
	</td>
	<td>
		{{obj.line}}
	</td>
	<td>
		{{obj.nbbm}}
	</td>
	<td>
		{{obj.safeid}}
	</td>
	<td>
		{{obj.shlx_name}}
	</td>
	<td>
		{{obj.Startime}}
	</td>
	<td>
		<a class="btn btn-sm blue btn-outline" onclick="javascript:showPhoto('{{obj.ImagePath}}')" data-pjax></i>$$$$$${txt-4096}</a>
		<a class="btn btn-sm blue btn-outline" onclick="javascript:showVideo('{{obj.VedioPath}}')" data-pjax></i>$$$$$${txt-4109}</a>
	</td>
</tr>
{{/each}}
{{if list.length == 0}}
<tr>
	<td colspan=8><h6 class="muted">没有找到相关数据</h6></td>
</tr>
{{/if}}
</script>
<script>
$(function(){
	var d = new Date();
	var year = d.getFullYear();
	var month = d.getMonth() + 1;
	var day = d.getDate();
	if(month < 10)
		month = "0" + month;
	if(day < 10)
		day = "0" + day;
	var dateTime = year + "-" + month + "-" + day;
	//日期插件
	$("#date").datetimepicker({
		format : 'YYYY-MM-DD',
		locale : 'zh-cn'
	});
	$("#date").val(dateTime);
	// 当弹出框背景或图片被点击时触发
	$('#imageModal, #img').click(function() {
		$('#imageModal').fadeOut(); // 隐藏弹出框
	});
	// 当弹出框背景被点击时触发
	$('#videoModal').click(function(e) {
		if (e.target.id.indexOf("myVideo") == -1) {
			$('#videoModal').fadeOut(); // 隐藏弹出框
			var video = $("#myVideo").get(0);
			video.pause();
		}
	});
	var page = 0, initPagination;
	var icheckOptions = {
	    checkboxClass: 'icheckbox_flat-blue',
	    increaseArea: '20%'
	};
	jsDoQuery(null,true);

	//重置
	$('tr.filter .filter-cancel').on('click', function(){
		$('tr.filter input, select').val('').change();
		jsDoQuery(null, true);
	});


	//提交
	$('tr.filter .filter-submit').on('click', function(){
		var params =getParams();
		jsDoQuery(params, true);
	});

	/*
        * 获取数据 p: 要提交的参数， pagination: 是否重新分页
        */
	function jsDoQuery(p, pagination){
		var params = {};
		if(p)
			params = p;
		params['page'] = page;
		var i = layer.load(2);
		$get('/dsm/findAll' ,params, function(data){
			var list = data.dataList;
			var bodyHtm = template('dsm_list_temp', {list: list});

			$('#datatable_user tbody').html(bodyHtm)
					.find('.icheck').iCheck(icheckOptions)
					.on('ifChanged', iCheckChange);
			if(pagination && list.length > 0){
				//重新分页
				initPagination = true;
				showPagination(data);
			}
			layer.close(i);

		});
	}


	function getParams() {
		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();
				}
			}
		});
		var date = $("#date").val();
		params['date'] = date;
		return params;
	}


	function iCheckChange() {
		var tr = $(this).parents('tr');
		if (this.checked)
			tr.addClass('row-active');
		else
			tr.removeClass('row-active');
	}

	//分页插件
	var page = 0, initPagination;
	function showPagination(data) {
		//分页
		$('#pagination').jqPaginator({
			totalPages: data.totalPages,
			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);">' + i18n('txt-4068') + '<\/a><\/li>',
			page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
			onPageChange: function (num, type) {
				if (initPagination) {
					initPagination = false;
					return;
				}

				var params = getParams();

				page = num - 1;
				jsDoQuery(params, true);
			}
		});

	}

	/*$.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;
				data.push({id: '', text: ''});
				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"]});
						}
					}
				}
			}
			initPinYinSelect2('#line',data,'');
		});
	});
});*/

	$.get('/report/lineList',function(xlList){
		var data = [];
		data.push({id: '', text: ''});
		for(var k=0;k < xlList.length;k++ ){
				data.push({id: xlList[k]["xlbm"], text: xlList[k]["xlname"]});
		}
		initPinYinSelect2('#line',data,'');
	});
});


function showPhoto(imageUrl) {
	// 当按钮被点击时触发
	$('#img').attr('src', imageUrl); // 设置弹出框中图片的路径
	$('#imageModal').fadeIn(); // 显示弹出框
};

function showVideo(videoUrl) {
	// 当按钮被点击时触发
	$('#myVideo').attr('src', videoUrl); // 设置弹出框中图片的路径
	$('#videoModal').fadeIn(); // 显示弹出框
	var video = $("#myVideo").get(0);
	video.play();
};
</script>