<!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" hidden="true" class="form-control required"-->
										<!--placeholder="昵称" name="field4">-->
									<!--</div> -->
									<!--<div class="col-xs-2">-->
									<!--<input type="text" hidden="true" class="form-control required"-->
										<!--placeholder="省份" name="field2">-->
									<!--</div>-->
									<!--<div class="col-xs-2">-->
									<!--<input type="text" hidden="true" 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-2">
									<input type="text" class="form-control required"
										placeholder="关键字" name="keyword">
									</div>
									<!--<div class="col-xs-2">-->
									<!--<input type="text" hidden="true" class="form-control required"-->
										<!--placeholder="关键字ID" name="keywordid">-->
									<!--</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-2">
											<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 style="word-wrap: break-word;">关键字ID</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" : "GET",
					"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" : "keyword"
				},
//					{
//					"mData" : "keywordid"
//				},
//					{
//					"mData" : "field2"
//				},{
//					"mData" : "field3"
//				},
					{
					"mData" : "ip"
				},{
					"mData" : "vt"
				}],
				"aoColumnDefs" : [ { // set default column settings
					'visible' : false,
					'targets' : [ 0 ]
				}, {
					"targets" : [ 6 ],
					"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(); 
			$("#search").click(function(){
				$("#example2").dataTable().fnClearTable();
			})
			
			$("#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); 
     		})
			$('.datepicker').datepicker({
				show : true,
				format : 'yyyy-mm-dd',
				autoclose : true,
				language : 'zh-CN',
				todayBtn : 'linked',
				clearBtn : 'linked'

			});
		});
	</script>

</body>
</html>
