sqlOperateLogs.jsp 9.1 KB
<%--
  Created by IntelliJ IDEA.
  User: meiling.ge
  Date: 2017/8/15
  Time: 16:14
  To change this template use File | Settings | File Templates.
--%>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
    <link rel="stylesheet" href="<%=basePath %>js/select2/dist/css/select2.css"/>
    <script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>/js/bootstrap.min.js"></script>
    <script src="<%=basePath %>/js/unicorn.js"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/select2/dist/js/select2.full.js"></script>
    <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
    <script src="<%=basePath %>js/jquery.toaster.js"></script>
    <script src="<%=basePath %>js/laydate/laydate.js" charset="UTF-8" type="text/javascript"></script>
    <script>
        var contextPath = '<%=basePath %>';
    </script>
    <title>YOHO!运维</title>
</head>
<body>

<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
    <div id="breadcrumb">
        <a href="#" title="Go to Home" class="tip-bottom"><i
                class="icon-home"></i> Home</a> <a href="#" class="current">监控</a>
    </div>

    <div class="container-fluid">
        <div class="widget-box">
            <div class="widget-title">
                <h5>SQL操作日志</h5>
            </div>
            <div class="widget-content nopadding">
                <div class="widget-title" style="height: 53px;">
                    <div class="form-inline" role="form"
                         style=" margin-top: 12px;margin-left: 25px;float: left;">
                        <div class="input-group" style="float: left;margin-left: 20px">
                            <span class="input-group-addon">用户名:</span>
                            <select id="searchUserName" name = "searchUserName" class="form-control" placeholder="" style="width:200px;" >
                                <option value="" >  All</option>
                                <c:forEach items="${users}" var="u">
                                    <option value="${u.name}">${u.cname}</option>
                                </c:forEach>
                            </select>
                            <%--<input type="text" id="searchUserName" name="searchUserName" class="form-control" placeholder="" style="width:300px;"/>--%>
                        </div>
                        <div class="input-group" style="float: left;margin-left: 20px">
                            <span class="input-group-addon">开始日期:</span>
                            <input id="beginTime"type="text" class="form-control dateTimeInput"  style="width:130px;" />
                        </div>
                        <div class="input-group" style="float: left;margin-left: 20px">
                            <span class="input-group-addon">结束日期:</span>
                            <input id="endTime"type="text" class="form-control dateTimeInput" style="width:130px;" />
                        </div>
                        <button id="searchSqlLogsBtn" class="btn btn-primary" style="margin-left: 18px;" >搜索</button>

                    </div>

                </div>
            </div>
            <div id="sqlLogsTable">

            </div>
        </div>
    </div>
</div>



<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
    $("#li_monitor").addClass("active open");
    $("#li_sqlOpLogs").addClass("active");
</script>
<script type="text/javascript">
    lay('.dateTimeInput').each(function(){
        laydate.render({
            elem: this
            ,trigger: 'click'
        });
    });

    $("#searchUserName").select2({
    });
    $(function () {
        //加载表格
        $("#sqlLogsTable").table({
            columnAutoWidth: false,
            url: contextPath + "/sqlOperate/querySqlLogs",
            striped: true,
           title: "SQL操作日志表",
            pagination: true,
            pageSize: 10,
           /* queryParams:{
                "eventName":"测试一下而已"
            },*/
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            columns: [{
                title: "id",
                width: "30px",
                formatter:function(value,rowData,rowIndex){
                    return rowIndex + 1 ;
                }
            }, {
                title: "操作者",
                field: "userName",
                width: "50px"
            }, {
                title: "数据源",
                field: "datasource",
                width: "150px",
                formatter:function(value,rowData,rowIndex){
                    if(rowData.dbInfo != null && rowData.dbInfo != ""){
                        return rowData.dataSourceInfo + " / " +rowData.dbInfo;
                    }
                    return rowData.dataSourceInfo;

                }
            }, {
                title: "操作内容",
                field: "queryContent",
                width: "300px",
                align:"left"
            }, {
                title: "时间",
                field: "createTime",
                width: "80px",
                formatter:function (value,rowData,rowIndex) {
                    if(value !=null && value!=""){
                        return format(value);
                    }
                    return  value;


                }
            }]
        });

    });


    //点击搜索按钮
    $("#searchSqlLogsBtn").click(function () {
        var searchUserName = $("#searchUserName").val();
        var beginTime = $.trim($("#beginTime").val());
        var endTime = $.trim($("#endTime").val());
        $("#sqlLogsTable").table("load", {
            'userName': searchUserName,
            'beginTime':beginTime,
            'endTime':endTime
        });
    });

    //timeValue---时间戳
    function format(timeValue){
        var time = new Date(timeValue);
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
    }
    function add0(m){
        return m<10 ? '0'+m : m;
    }
</script>
</body>
</html>