<!DOCTYPE html>
<html>
<head>
<base href="#springUrl('/assets/adminlte/')" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>工作台</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet"
	href="plugins/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
	href="plugins/ionicons/css/ionicons.min.css">

<!-- DataTables -->
<link rel="stylesheet"
	href="plugins/datatables/dataTables.bootstrap.css">

<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet"
	href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet"
	href="plugins/daterangepicker/daterangepicker-bs3.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
	href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>
table.table-bordered th:last-child, table.table-bordered td:last-child {
	word-break: break-all
}
table th,td { 
	word-break: break-all;
}
</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">


	<div class="wrapper">
	<div id="treeSelect"></div>
		<div class="content-wrapper" style="margin-left: 0;">

			<section class="content-header">
				<h1>
					日志管理 <small>客户端访问日志信息</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="#springUrl('/page/user/showstatics')"><i
							class="fa fa-dashboard"></i>首页</a></li>
					<li><a class="active">日志管理</a></li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-xs-12">
						<div class="box"> 
							<div class="box-header">
							<form id="seachTableForm">  
<!-- 									<div class="col-xs-2">  -->
<!-- 										<div class="input-group date"> -->
<!-- 											<div class="input-group-addon"> -->
<!-- 												<i class="fa fa-calendar"></i> -->
<!-- 											</div> -->
<!-- 											<input type="text" class="form-control pull-right datepicker" -->
<!-- 												value="$!{sysLogListParam.brithdayStarttime}" -->
<!-- 												name="brithdayStarttime" placeholder="创建开始时间" -->
<!-- 												readonly="readonly"> -->
<!-- 										</div> -->
<!-- 									</div> -->
<!-- 									<div class="col-xs-2"> -->
<!-- 										<div class="input-group date"> -->
<!-- 											<div class="input-group-addon"> -->
<!-- 												<i class="fa fa-calendar"></i> -->
<!-- 											</div> -->
<!-- 											<input type="text" -->
<!-- 												class="form-control pull-right  datepicker" -->
<!-- 												value="$!{sysLogListParam.brithdayEndtime}" -->
<!-- 												name="brithdayEndtime" placeholder="创建结束时间" -->
<!-- 												readonly="readonly"> -->
<!-- 										</div> -->
<!-- 									</div> -->
									<div class="col-xs-2">
									<input type="text" class="form-control required"
										placeholder="openId" name="openid">
									</div> 
									<div class="col-xs-2">
									<input type="text" class="form-control required"
										placeholder="昵称" name="field4">
									</div> 
									<div class="col-xs-2">
									<input type="text" class="form-control required"
										placeholder="省份" name="field2">
									</div>
									<div class="col-xs-2">
									<input type="text" class="form-control required"
										placeholder="城市" name="field3">
									</div>
									<div class="col-xs-2">
									<input type="text" class="form-control required"
										placeholder="所属模块" name="module">
									</div>
									<div class="col-xs-2">
									<input type="text" class="form-control required"
										placeholder="页面名称" name="modulename">
									</div>
									<div class="col-xs-1">
										<button type="button" id="search" class="btn btn-primary">搜索</button>
									</div> 
									<div class="col-xs-1"> 
										<button type="button" id="export" class="btn btn-primary">导出</button>
									</div>  
									<!-- <div class="col-xs-1">
											<button type="button" onclick="clearLog()" class="btn btn-primary">清空</button>
									</div> -->
									</form>
							</div>
							
							<div class="box-body">


								<table id="example2" class="table table-bordered table-striped">
									<thead>
											<tr>
											<td hidden="true">id</td>
											<th style="width: 10%">openId</th>
											<th>昵称</th> 
											<th>所属模块</th>
											<th>访问页面</th>
											<th>省份</th>
											<th>城市</th>
											<th>访问IP</th>
											<th>访问时间</th>
										</tr>
									</thead>
									<tbody id="tablebody">
									</tbody>
								</table>
							</div>
							<!-- /.box-body -->
						</div>
						<!-- /.box -->
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</section>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->



		<!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
		<div class="control-sidebar-bg"></div>
	</div>
	<!-- ./wrapper -->
	<!-- END CONTAINER -->
	<!-- BEGIN FOOTER -->
	<!-- END FOOTER -->
	<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<!-- DataTables -->
	<script src="plugins/input-mask/jquery.inputmask.js"></script>
	<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
	<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
	<script src="plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="plugins/datatables/extensions/i18n/lanauage_ch.js"></script>
	<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
	<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
	<!-- SlimScroll -->
	<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<script src="plugins/jquery-validation/js/jquery.validate.min.js"></script>
	<!-- FastClick -->
	<script src="plugins/fastclick/fastclick.min.js"></script>
	<!-- AdminLTE App -->
	<script src="dist/js/app.min.js"></script>
	<!-- AdminLTE for demo purposes -->
	<script src="dist/js/demo.js"></script>
	<script src="plugins/bootbox/bootbox.min.js"></script>
	<script src="dist/js/app.min.js"></script>
	<script src="common/js/cfapp.js"></script>
	<script>
	 var selectedActivity="";
	 var recordingAllByPage="";
	 Cfapp.init();
		function formatDates(now) { 
			var now=new Date(parseInt(now))
			var year = now.getFullYear();
			var month = now.getMonth() + 1;
			var date = now.getDate();
			var hour = now.getHours();
			var minute = now.getMinutes();
			var second = now.getSeconds();
			return year + "-" + month + "-" + date + "   " + hour + ":"
					+ minute + ":" + second;
		}

		function seachTable() {
			var sSource = "#springUrl('/a/mobileviewlog/fetchData')";
			var aoData = {
				iDisplayStart : 0,
				iDisplayLength : 10
			};
			var retrieveData = function(sSource, aoData, fnCallback) {
				$("#seachTableForm input").each(function() {
					var params = {
						name : $(this).attr("name"),
						value : $(this).val()
					};
					aoData.push(params);
				})
				$.ajax({
					"type" : "POST",
					"url" : sSource,
					"dataType" : "json",
					"data" : aoData, //以json格式传递
					"success" : fnCallback
				});
			};
			$('#example2').DataTable({
				/* "lengthChange" : false, */
				"lengthChange" : false,
				"searching" : false,
				"ordering" : false,
				"bAutoWidth" : false,
				"bFiltered" : false,
				"bStateSave" : true, // save datatable state(pagination, sort, etc) in cookie.
				"bProcessing" : true,
				"bServerSide" : true,
				"sAjaxSource" : sSource,
				"fnServerData" : retrieveData,
				"pagingType" : "full_numbers",
				"aoColumns" : [ {
					"mData" : "id"
				}, {
					"mData" : "openid"
				}, {
					"mData" : "field4"
				}, {
					"mData" : "module"
				}, {
					"mData" : "modulename"
				},{ 
					"mData" : "field2"
				},{
					"mData" : "field3"
				},{
					"mData" : "ip"
				},{
					"mData" : "vt"
				}],
				"aoColumnDefs" : [ { // set default column settings
					'visible' : false,
					'targets' : [ 0 ]
				}, { 
					"targets" : [ 7 ],
					"mData" : "vt",
					"mRender" : function(a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
						console.log(c.vt); 
						return formatDates(c.vt, "yyyy-MM-dd HH:mm:ss")
					}
				}] 
			});
		}
		jQuery(document).ready(function() {
			seachTable(); 
			$("#export").click(function(){ 
   		     var url='/a/mobileviewlog/export?code='+new Date().getTime();
				var params;
				$("#seachTableForm input,.select2").each(function() {
					 if($(this).val()){
						 url=url+'&'+$(this).attr("name")+'='+$(this).val()
					 } 
				}); 
				url="#springUrl('"+url+"')";
			 window.open(url); 
		})
			$("#search").click(function(){
				$("#example2").dataTable().fnClearTable();
			})
			
			$('.datepicker').datepicker({
				show : true,
				format : 'yyyy-mm-dd',
				autoclose : true,
				language : 'zh-CN',
				todayBtn : 'linked',
				clearBtn : 'linked'

			});
		});
	</script>

</body>
</html>
