<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备管理系统</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<style>
.move-bar div {cursor: n-resize;}
body{background: #f2f2f2}
#boxDiv{background: #ffffff}
#titleDiv{overflow: visible;}
</style>

<body class="layui-layout-body">
<div id="boxDiv" style="left:8px;right: 8px;bottom:8px;top:8px;position:absolute;">
	<div class="toolbar" id="titleDiv">
		<div style="display: inline-block;">


		<form class="layui-form">
    	<div class="layui-inline ">
			<span>类型搜索：</span>
			<div class="layui-input-inline">
				<select id="loggerType" class="layui-select " >
					<option value="">-请选择-</option>
					<option value="INFO">信息</option>
					<option value="ERROR">错误</option>
				</select>
			</div>
		</div>
        
		<div class="layui-inline">
			<span>时间搜索：</span>
			<!-- <i class="layui-icon layui-icon-date date-input-icon"></i> -->
            <input type="text" id="startTime" placeholder="请选择时间 " autocomplete="off" class="layui-input formWidth" />
        </div>
        <div class="layui-inline">
			<span>至&nbsp;&nbsp;&nbsp;</span>
			<!-- <i class="layui-icon layui-icon-date date-input-icon"></i> -->
            <input type="text" id="endTime" placeholder="请选择时间 " autocomplete="off" class="layui-input formWidth" />
        </div>
		</form>
		</div>
        <div class="layui-inline">
			<button class="layui-btn layui-btn-sm layui-btn-normal" data-type="search" id="search"><i class="layui-icon">&#xe615;</i>查询</button>
		</div>
    </div>
    
	<table id="demo" lay-filter="test"></table>	
	   
	<!-- 显示详细信息 -->
	<div id="showInformation" style="display:none;">
		<form id="zj" style="margin-left:20px;">
			<span style="width:99%;height:450px" id="information"></span>
		</form>
	</div>
</div>
</body>   
</html>

<script>
	var tHeight = $(".toolbar").height()+6;
    layui.use(['element','table','laydate','layer','form','tree'], function(){
		var element = layui.element,
	    table = layui.table,
	    laydate = layui.laydate,
	    layer = layui.layer,
	    form = layui.form,
	    tree = layui.tree;
	    
	    //表格加载
		table.render({
			elem: '#demo',
			height: 'full-'+58,
			url: '/findLogger', //数据接口
			title: '用户表',
			page: true ,//开启分页
			limit:20,
			limits:[20,30,50],
			//toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],	 
			id:'test', 
			cols: [
			 [ //表头
			   //{type: 'checkbox', fixed: 'left'},
			   {field: 'logType', title: '信息类型',width:100},
			   {field: 'information', title: '内容', event:'showInformation'},
			   {field: 'create_time', title: '错误时间',width:200} ,
			   {field: 'user_id', title: '用户Id', sort: false,width:100},
			   {field: 'ip', title: 'IP地址', sort: false,width:150} 
			 ]
			]
		});
						
		//监听单元格事件
		table.on('tool(test)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'showInformation'){
		    	$("#information").text(data.information);
		    	layer.open({
                    type:1,
                    title:"显示信息",
                    shade:0,
                    area: ['500px', '500px'],
                    offset:'auto',
                    content: $("#showInformation")
                });
		    }
		});
	
		//时间控件
		laydate.render({
	  		elem:'#startTime', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		laydate.render({
	  		elem:'#endTime', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		
		//查询
		$("#search").on('click',function(){
			var loggerType = $("#loggerType").val();
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			table.reload('test', {
            	method: 'get',
            	url:'/findLogger',
                where: {
                    'loggerType':loggerType,
                    'startTime':startTime,
                    'endTime':endTime
                },
                page: {
                    curr: 1
                }
            });
		})
		
		
		
    });
    
   
    </script>