日志筛选工具（一）

最新推荐文章于 2024-05-11 06:39:44 发布

枫_笛

最新推荐文章于 2024-05-11 06:39:44 发布

阅读量1.1k

点赞数 1

分类专栏：咋哇技术

本文链接：https://blog.csdn.net/u012485012/article/details/64124859

版权

咋哇技术专栏收录该内容

28 篇文章 0 订阅

订阅专栏

最近需要使用对日志查询，查看各个job进度，弄了一个日志查看工具学习一下。
jsp

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>${rtl}</title>
        <link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/xqb/css/component.3.0.css"/>
        <script src="<%=request.getContextPath() %>/js/jquery.js"></script>
        <script src="<%=request.getContextPath() %>/xqb/js/jquery.kernel.3.1.js"></script>
        <script src="<%=request.getContextPath() %>/js/bootstrap.min.js"></script>

        <script type="text/javascript">

            var filter = "";
            var trace = true;
            $(function(){
                autoTrace();
                if("failed" == "${result}"){
                    var code = $("<code style='margin:0px !important; '>"
                            + ("${msg}" == "" ? "您已经打开了一个数据通道, 不能重复打开" : "${msg}") 
                            + "</code>").appendTo($("#dataArea"));
                    code.css({"left": "9.5px", "position":"absolute"});
                    $("#dataArea").append("<br/>");
                    return;
                }
                //刷新数据
                refreshData({
                    start : 0,
                    ip : "${ip}",
                    filter : filter,
                    instance : "${instance}",
                    channelId : "${channelId}"
                })
            })

            function refreshData(param){
                $.post("<%=request.getContextPath() %>/login/security/readLog", param, function(data){
                    if(data == "login"){
                        $("#dataArea").append("<code style='left:9.5px; position:absolute'>"
                                + "连接超时, 请重新打开通道" 
                                + "</code>");
                        $("#dataArea").append("<br/>");
                    }else{
                        data = eval("[" + data + "]")[0];
                        for(var i = 0; i < data.results.length; i++){
                            var code = $("<code>" + data.results[i] + "</code><br/>").appendTo($("#dataArea"));
                            if($("#dataArea").data("hasData") != true){
                                $("#dataArea").data("hasData", true);
                                code.css({"left": "9.5px", "position":"absolute"});
                            }
                            if(trace){
                                code[0].scrollIntoView();
                            }
                        }
                        param.start = data.index;
                        setTimeout(function(){
                            param.filter = filter;
                            refreshData(param);
                        }, data.results.length == 0 ? 2000 : 10);
                    }
                });
            }
            // 打开/关闭自动跟踪最新数据
            function autoTrace(){
                $(window).resize(function(){
                    $(".floatMenu").css("left", $("#logContainer").offset().left + $("#logContainer").outerWidth() + 10);
                }).trigger("resize");

                $("div.pre").height($(".list-group").height());

                $(".floatMenu .trace").click(function(){
                    if($(this).hasClass("off")){
                        $(this).removeClass("off");
                        $(this).html("关闭数据跟踪");
                        trace = true;
                    }else{
                        $(this).addClass("off");
                        trace = false;
                        $(this).html("开启数据跟踪");
                    }
                });

                $("a.filter").click(function(){
                    if($(this).hasClass("off")){
                        $(this).removeClass("off");
                        $(this).html("搜索关键信息");
                        $("input.filter").val("");
                        filter = "";
                        $(".pre").hide();
                    }else{
                        $(this).addClass("off");
                        $(this).html("清除过滤条件");
                        $(".pre").show();
                    }
                });

                $("a.clear").click(function(){
                    $("#dataArea").empty();
                });

                var setValue = -1;
                $("input.filter").keyup(function(){
                    if(-1 != setValue){
                        clearTimeout(setValue);
                    }
                    setValue = setTimeout(function(){
                        filter = $("input.filter").val();
                    },1000);
                })

            }
        </script>

        <style type="text/css">
            pre code {
                padding: 0;
                font-size: inherit;
                color: inherit;
                white-space: pre-wrap;
                background-color: transparent;
                border-radius: 0;
                font-family: 微软雅黑;
            }
            pre {
                display: block;
                padding: 9.5px;
                margin: 0 0 10px;
                font-size: 13px;
                line-height: 1.42857143;
                color: #333;
                word-break: break-all;
                word-wrap: break-word;
                background-color: #f5f5f5;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            .pre input{
                display: block;
                margin-left:3px;
                width: 120px;
                font-size: 13px;
                color: #333;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
        </style>
    </head>

    <body>

        <div id="header" style="width: 1100px; height: 62px; margin-left: -550px; left: 50%; margin-top:10px; margin-bottom:5px; position:relative;
            background:url('<%=request.getContextPath() %>/img/logo.png'); position: relative; background-repeat: no-repeat;">
            <span id="currentUser" style="position:absolute; cursor:pointer; right:30px; bottom: 1px; font-family: 微软雅黑 ; font-size: 14px; ">
            <%=(request.getSession().getAttribute("username") == null ? "" : request.getSession().getAttribute("username"))%>
            </span>
        </div>
        <div id="separator" style="width: 100%; height:2px; background-color: black;"></div>

        <div class="floatMenu" style="position: fixed; top: 300px; z-index:100;">
            <div class="list-group" style="float:left; width: 120px;"> 
                <a class="list-group-item trace" style="font-family: 微软雅黑; cursor: pointer;">关闭数据跟踪</a>
                <a class="list-group-item filter" style="font-family: 微软雅黑; cursor: pointer;">搜索关键信息</a>
                <a class="list-group-item clear" style="font-family: 微软雅黑; cursor: pointer;">清除历史结果</a>
            </div>
            <div class="pre" style="float: left; width: 100px; position: relative; height:200px; display: none;">
                <input class="filter" style="position: absolute;  top: 52px;"/>
            </div>
        </div>
        <div style="width: 1000px; height: auto; margin-left: -500px; margin-top:30px; left: 50%; position: relative; height: 0px;" id="logContainer">
            <pre id="dataArea" style="position: relative;">
            </pre>
        </div>

    </body>
</html>