<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", -10);
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@include file="/WEB-INF/views/base.jsp"%>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>登录日志</title>

<link href="${cssPath }/bootstrap.min.css" rel="stylesheet">
<link href="${fontAwsPath }/css/font-awesome.css" rel="stylesheet">

<!-- Data Tables -->
<link href="${cssPath }/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="${cssPath }/plugins/dataTables/dataTables.responsive.css"
	rel="stylesheet">
<link
	href="${cssPath }/plugins/dataTables/dataTables.tableTools.min.css"
	rel="stylesheet">

 <link href="${cssPath }/plugins/iCheck/custom.css" rel="stylesheet">

    <link href="${cssPath }/plugins/chosen/chosen.css" rel="stylesheet">

    <link href="${cssPath }/plugins/colorpicker/bootstrap-colorpicker.min.css" rel="stylesheet">

    <link href="${cssPath }/plugins/cropper/cropper.min.css" rel="stylesheet">

    <link href="${cssPath }/plugins/switchery/switchery.css" rel="stylesheet">

    <link href="${cssPath }/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">

    <link href="${cssPath }/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">

    <link href="${cssPath }/plugins/datapicker/datepicker3.css" rel="stylesheet">

    <link href="${cssPath }/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="${cssPath }/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">

    <link href="${cssPath }/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">

    <link href="${cssPath }/plugins/clockpicker/clockpicker.css" rel="stylesheet">

    <link href="${cssPath }/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">

    <link href="${cssPath }/plugins/select2/select2.min.css" rel="stylesheet">

    <link href="${cssPath }/plugins/touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet">

    <link href="${cssPath }/animate.css" rel="stylesheet">
    <link href="${cssPath }/style.css" rel="stylesheet">

<style>
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td,
{
 	vertical-align: middle;
}
 .lognote{
 	width:600px;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;
 }
 .tip{width:400px;height:80px;display:none;background-color:#f6f7f7;color:#333333;
 line-height:18px;border:1px solid #e1e3e2;padding:5px;z-index:9999}  
</style>	
</head>
<body class="pace-done">
	<div id="tooltip" class="tip"></div>  
	<input type="hidden" id="basePath" value="<%=basePath%>">
	<div id="wrapper">

		<jsp:include page="../menu.jsp"></jsp:include>

		<div id="page-wrapper" class="gray-bg">
			<jsp:include page="../head.jsp"></jsp:include>
			<jsp:include page="../pageNav.jsp"></jsp:include>

			<input type="hidden" id="pageNo" name="pageNo" value="1">
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div class="ibox-content m-b-sm border-bottom">
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="control-label" for="search">用户名称</label>
									<input class="form-control" id="username" name="username" />
								</div>
							</div>
							
							<div class="col-sm-4">
								<div class="form-group">
									<label class="control-label" for="search">时间</label>
									<input id="createDate" class="form-control" type="text" name="daterange" value="" />
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="control-label" for="search">查询</label>
									<button onclick="query()"
										class="btn btn-w-m btn-success form-control">
										<i class="fa fa-search"></i>&nbsp;&nbsp;查询
									</button>
								</div>
							</div>
						</div>
					</div>	

					<div class="ibox float-e-margins">
						<div class="ibox-content" id="PartialMenuListPage">
							
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>	
	<script src="${jsPath }/jquery-1.9.1.min.js"></script>
	<script src="${jsPath }/bootstrap.min.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="${jsPath }/inspinia.js"></script>
    <script src="${jsPath }/plugins/pace/pace.min.js"></script>
    <script src="${jsPath }/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- Chosen -->
    <script src="${jsPath }/plugins/chosen/chosen.jquery.js"></script>

   <!-- JSKnob -->
   <script src="${jsPath }/plugins/jsKnob/jquery.knob.js"></script>

   <!-- Input Mask-->
    <script src="${jsPath }/plugins/jasny/jasny-bootstrap.min.js"></script>

   <!-- Data picker -->
   <script src="${jsPath }/plugins/datapicker/bootstrap-datepicker.js"></script>

   <!-- NouSlider -->
   <script src="${jsPath }/plugins/nouslider/jquery.nouislider.min.js"></script>

   <!-- Switchery -->
   <script src="${jsPath }/plugins/switchery/switchery.js"></script>

    <!-- IonRangeSlider -->
    <script src="${jsPath }/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>

    <!-- iCheck -->
    <script src="${jsPath }/plugins/iCheck/icheck.min.js"></script>

    <!-- MENU -->
    <script src="${jsPath }/plugins/metisMenu/jquery.metisMenu.js"></script>

    <!-- Color picker -->
    <script src="${jsPath }/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>

    <!-- Clock picker -->
    <script src="${jsPath }/plugins/clockpicker/clockpicker.js"></script>

    <!-- Image cropper -->
    <script src="${jsPath }/plugins/cropper/cropper.min.js"></script>

    <!-- Date range use moment.js same as full calendar plugin -->
    <script src="${jsPath }/plugins/fullcalendar/moment.min.js"></script>

    <!-- Date range picker -->
    <script src="${jsPath }/plugins/daterangepicker/daterangepicker.js"></script>

    <!-- Select2 -->
    <script src="${jsPath }/plugins/select2/select2.full.min.js"></script>

    <!-- TouchSpin -->
    <script src="${jsPath }/plugins/touchspin/jquery.bootstrap-touchspin.min.js"></script>
</body>
<script>
	$(function(){
		$("#createDate").daterangepicker();
		initData();
		
		//hover某处显示悬浮框  
	    $(".lognote").mouseover(function(e){  
	        //获取鼠标位置函数  
	        var mousePos = mousePosition(e);  
	        var  xOffset = 20;  
	        var  yOffset = 25;  
	        $("#tooltip").css("display","block").css("position","absolute").css("top",(mousePos.y - yOffset) + "px").css("left",(mousePos.x + xOffset) + "px");  
	        var html = $(this).html();
	      //  alert(html);
	        $("#tooltip").html(html);      
	     });  
	     
	     //鼠标离开表格隐藏悬浮框  
	     $(".lognote").mouseout(function(){  
	         $("#tooltip").css("display","none");  
	     }); 
	      
	})
	var basePath = "<%=basePath %>";
    function initData(){
		var username = $("#username").val();
		var pageNo = $("#pageNo").val();
		var origin = $("#origin").val();
		var date = $("#createDate").val();
		//第一次加载数据
		$.ajax({
			type : 'POST',
			async : false,
			url : basePath + 'log/loadUserLoginLog',
			data : {'pageNo' : pageNo, 'username':username, 'cd' : date},
			dataType : 'html',
			success : function(data){
				$("#PartialMenuListPage").html(data);
			}
		})
    }	
    
    function query(){
        $("#pageNo").val("1");
     	initData();
    }
    
    function mousePosition(ev){   
	    ev = ev || window.event;   
	    if(ev.pageX || ev.pageY){   
	        return {x:ev.pageX, y:ev.pageY};   
	    }   
	    return {   
	        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,   
	        y:ev.clientY + document.body.scrollTop - document.body.clientTop   
	    };   
	}  
</script>
</html>
