1131 lines
49 KiB
HTML
1131 lines
49 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>LogSearch-Web</title>
|
|||
|
|
<!-- 你引入的 layui.js 建议是通过官网首页下载的。当然也可以由 github 或 gitee clone -->
|
|||
|
|
<script src="./res/layui/layui.js"></script>
|
|||
|
|
<script src="./res/layui/treeTable.js"></script>
|
|||
|
|
<script src="./res/jquery-3.7.1.min.js"></script>
|
|||
|
|
<!-- 引入 layui.css -->
|
|||
|
|
<link rel="stylesheet" href="./res/layui/css/layui.css">
|
|||
|
|
<script src="./main.js"></script>
|
|||
|
|
<style>
|
|||
|
|
.layui-input {
|
|||
|
|
height:27px;
|
|||
|
|
max-height: 27px;
|
|||
|
|
line-height: 27px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.layui-input-inline {
|
|||
|
|
padding-top: 4px;
|
|||
|
|
}
|
|||
|
|
.layui-form-item {
|
|||
|
|
margin-bottom: 0px;
|
|||
|
|
}
|
|||
|
|
.custom-btn {
|
|||
|
|
height:27px;
|
|||
|
|
max-height: 27px;
|
|||
|
|
line-height: 27px;
|
|||
|
|
}
|
|||
|
|
.layui-table-cell {
|
|||
|
|
padding: 0 5px;
|
|||
|
|
}
|
|||
|
|
.layui-table-view .layui-table td {
|
|||
|
|
padding:0;
|
|||
|
|
}
|
|||
|
|
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
|||
|
|
border-color:#bbb1b1;
|
|||
|
|
}
|
|||
|
|
/* 设置选中行的背景颜色 */
|
|||
|
|
.layui-table-tr-selected {
|
|||
|
|
background-color: #a30b0b;
|
|||
|
|
}
|
|||
|
|
.layui-table-view .layui-table tr:hover {
|
|||
|
|
background-color: #53a4caed;
|
|||
|
|
color:black;
|
|||
|
|
}
|
|||
|
|
.layui-input{
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
.layui-btn{
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
.single-line {
|
|||
|
|
white-space: nowrap; /* 不换行 */
|
|||
|
|
overflow: hidden; /* 隐藏超出部分 */
|
|||
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|||
|
|
cursor: pointer;
|
|||
|
|
width:330px;
|
|||
|
|
}
|
|||
|
|
.single-line:hover {
|
|||
|
|
background-color: #C9C5C5;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body onload="init()" style="background-color: #fbfbfb;">
|
|||
|
|
<div class="layui-fluid" style="padding-top: 5px;">
|
|||
|
|
<div class="layui-panel" id="headContent" >
|
|||
|
|
<form class="layui-form " style="background-color: #ebebeb7a;" lay-size="sm" action="" lay-filter="search-form" id="search-form">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">ES数据源</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<select name="quiz" id="dataSourceSelect" required lay-verify="required" lay-filter="dataSourceSelect">
|
|||
|
|
<option value="">请选择数据源</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="width: 40px;">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">日期选择</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" name="date1" id="date1" required lay-verify="required" autocomplete="off" class="layui-input">
|
|||
|
|
<input type="hidden" id="startTime" />
|
|||
|
|
<input type="hidden" id="endTime" />
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="width: 120px;">
|
|||
|
|
<button class="layui-btn layui-btn-primary layui-btn-sm custom-btn" id="timeFastBtn">
|
|||
|
|
选择<i class="layui-icon layui-icon-down layui-font-12"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-inline"><label class="layui-form-label">程序</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" name="logger" id="logger" placeholder="请输入或点击选择" autocomplete="on" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="margin-left: -10px;width: 50px;">
|
|||
|
|
<button style="border-left-width: 0;" type="button" onclick="javascript:$('#logger').val('');" class="layui-btn layui-btn-primary layui-btn-sm custom-btn" >清除</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="width: 120px;">
|
|||
|
|
<button type="button" onclick="showTreeFix()" class="layui-btn layui-btn-primary layui-btn-sm custom-btn">选择</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">线程ID</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" name="thread" id="thread" placeholder="请输入线程号" autocomplete="on" class="layui-input">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="margin-left: -10px;width: 50px;">
|
|||
|
|
<button style="border-left-width: 0;" type="button" onclick="javascript:$('#thread').val('');" class="layui-btn layui-btn-primary layui-btn-sm custom-btn" >清除</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">消息类型</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="checkbox" name="error" title="错误" lay-skin="primary" checked>
|
|||
|
|
<input type="checkbox" name="info" title="信息" lay-skin="primary" checked>
|
|||
|
|
<input type="checkbox" name="time" title="耗时" lay-skin="primary">
|
|||
|
|
<input type="checkbox" name="debug" title="调试" lay-skin="primary">
|
|||
|
|
<input type="checkbox" name="trace" title="追踪" lay-skin="primary">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">检索内容</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" name="msg" id="msg"
|
|||
|
|
placeholder="请输入内容" autocomplete="on" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="margin-left: -10px;width: 50px;">
|
|||
|
|
<button style="border-left-width: 0;" type="button" onclick="javascript:$('#msg').val('');" class="layui-btn layui-btn-primary layui-btn-sm custom-btn" >清除</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="width: 120px;">
|
|||
|
|
<div style="width: 120px;margin-top: -5px;">
|
|||
|
|
<input type="checkbox" name="overMatchSelected" title="全词匹配" lay-skin="primary" checked>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="width: 120px;">
|
|||
|
|
<div style="width: 120px;margin-top: -5px;">
|
|||
|
|
<input type="checkbox" name="similaritySelected" title="匹配度排序" lay-skin="primary">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<button type="button" onclick="resetForm()" class="layui-btn layui-btn-primary layui-btn-sm custom-btn"><i class="layui-icon"></i>重置</button>
|
|||
|
|
<button class="layui-btn layui-btn-normal layui-btn-sm custom-btn" lay-submit lay-filter="esQuery"><i class="layui-icon"></i>查询</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-panel">
|
|||
|
|
<!--移动：6/12 | 平板：6/12 | 桌面：4/12-->
|
|||
|
|
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
|
|||
|
|
<table id="msgTable" lay-filter="msgTable" lay-size="sm"></table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="bottomContent">
|
|||
|
|
<!--移动：6/12 | 平板：6/12 | 桌面：4/12-->
|
|||
|
|
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
|
|||
|
|
<span class="layui-badge-rim">总条数: <span id="total">0</span></span>
|
|||
|
|
<span class="layui-badge-rim">已加载: <span id="already">0</span></span>
|
|||
|
|
<span class="layui-badge-rim">每次加载数量: <input id="size" value="100" style="width:50px;border-color: #ccc;border-width: 1px;"/></span>
|
|||
|
|
<i onclick="help()" class="layui-icon " style="width: 24px;height: 24px;cursor: pointer;"></i>
|
|||
|
|
<!-- <span class="layui-badge layui-bg-blue" style="cursor: pointer;" onclick="next()">加载更多</span>-->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div id="detailContent" style="display: none;">
|
|||
|
|
<form class="layui-form" lay-size="sm" action="" lay-filter="detail-form">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">程序</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" id="loggerStr2" name="loggerStr2" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">类路径</label>
|
|||
|
|
<div class="layui-input-inline" style="min-width: 220px;">
|
|||
|
|
<input type="text" name="logger2" id="logger2" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">时间</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" id="createTimeStr2" name="createTimeStr2" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">消息类型</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" id="level2" name="level2" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-inline"><label class="layui-form-label">线程ID</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" id="thread2" name="thread2" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline" style="margin-left: -10px;width: 50px;">
|
|||
|
|
<button style="border-left-width: 0;" type="button" onclick="filterThread()" class="layui-btn layui-btn-primary layui-btn-sm custom-btn" >过滤</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">用户</label>
|
|||
|
|
<div class="layui-input-inline" style="width: 220px;">
|
|||
|
|
<input type="text" id="userId2" name="userId2" lay-verify="required"
|
|||
|
|
placeholder="请输入标题" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<button type="button" onclick="fastFilter()" class="layui-btn layui-btn-sm custom-btn" >快速过滤</button>
|
|||
|
|
<button type="button" onclick="copyMsg()" class="layui-btn layui-btn-sm custom-btn " >复制内容</button>
|
|||
|
|
<button type="button" onclick="closeDetail()" class="layui-btn layui-btn-sm custom-btn layui-btn-primary" >关闭</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item layui-form-text">
|
|||
|
|
<label class="layui-form-label">内容</label>
|
|||
|
|
<div class="layui-input-block" style="padding-right: 15px;">
|
|||
|
|
<pre class="layui-textarea layui-text layui-code" name="msg2" id="msg2" ></pre>
|
|||
|
|
</div>
|
|||
|
|
<label class="layui-form-label" name="exceptionLabel" id="exceptionLabel">异常</label>
|
|||
|
|
<div class="layui-input-block" style="padding-right: 15px;">
|
|||
|
|
<pre class="layui-textarea layui-text layui-code" name="exception" id="exception" ></pre>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<table class="layui-table layui-form" id="tree-table" lay-size="sm" style="display: none;"></table>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
var sourceTemp = {};/*数据源喊出*/
|
|||
|
|
var dataTemp = [];/*已加载的数据*/
|
|||
|
|
var loggerTemp = {};/*程序缓存 ID>OBJ*/
|
|||
|
|
var loggerKeyTemp = {};/*程序缓存 logger>name*/
|
|||
|
|
var tableBodyDom;//表格主题DOM
|
|||
|
|
var treeTable1;/*程序选择*/
|
|||
|
|
var scrollTop = 0;
|
|||
|
|
var click = false;
|
|||
|
|
var size = 100;// 每次加载数量
|
|||
|
|
|
|||
|
|
// 添加窗口大小变化的事件监听器
|
|||
|
|
window.addEventListener('resize', function() {
|
|||
|
|
var headContent = document.getElementById("headContent");
|
|||
|
|
var bottomContent = document.getElementById("bottomContent");
|
|||
|
|
var height = headContent.offsetHeight + (bottomContent.offsetHeight || 35);
|
|||
|
|
|
|||
|
|
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
|
|||
|
|
|
|||
|
|
var bodyHeight = windowHeight - height;
|
|||
|
|
var tableHeight = bodyHeight < 400 ? 400 : bodyHeight - 55;
|
|||
|
|
// 清空表格数据
|
|||
|
|
layui.table.reload('msgTable', {
|
|||
|
|
height: tableHeight
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function init() {
|
|||
|
|
var headContent = document.getElementById("headContent");
|
|||
|
|
var bottomContent = document.getElementById("bottomContent");
|
|||
|
|
var height = headContent.offsetHeight + (bottomContent.offsetHeight || 35);
|
|||
|
|
|
|||
|
|
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
|
|||
|
|
|
|||
|
|
var bodyHeight = windowHeight - height;
|
|||
|
|
var tableHeight = bodyHeight < 400 ? 400 : bodyHeight - 55;
|
|||
|
|
// 时间快捷选择
|
|||
|
|
layui.dropdown.render({
|
|||
|
|
elem: '#timeFastBtn' //可绑定在任意元素中，此处以上述按钮为例
|
|||
|
|
,data: [
|
|||
|
|
{title: '今天',id: 1,href: '#'},
|
|||
|
|
{title: '过去15分钟',id: 2,href: '#'},
|
|||
|
|
{title: '过去30分钟',id: 5,href: '#'},
|
|||
|
|
{title: '过去1小时',id: 6,href: '#'},
|
|||
|
|
{title: '过去3小时',id: 7,href: '#'},
|
|||
|
|
{title: '过去12小时',id: 8,href: '#'},
|
|||
|
|
{title: '过去24小时',id: 9,href: '#'},
|
|||
|
|
{title: '过去48小时',id: 10,href: '#'},
|
|||
|
|
{title: '自选',id: 11,href: '#'},
|
|||
|
|
]
|
|||
|
|
,id: 'timeFastBtn'
|
|||
|
|
//菜单被点击的事件
|
|||
|
|
,click: function(obj){
|
|||
|
|
switch(obj.id){
|
|||
|
|
case 1:
|
|||
|
|
setDefaultTime(0,true);
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
setDefaultTime(1000*60*15,false);
|
|||
|
|
break;
|
|||
|
|
case 5:
|
|||
|
|
setDefaultTime(1000*60*30,false);
|
|||
|
|
break;
|
|||
|
|
case 6:
|
|||
|
|
setDefaultTime(1000*60*60,false);
|
|||
|
|
break;
|
|||
|
|
case 7:
|
|||
|
|
setDefaultTime(1000*60*180,false);
|
|||
|
|
break;
|
|||
|
|
case 8:
|
|||
|
|
setDefaultTime(1000*60*720,false);
|
|||
|
|
break;
|
|||
|
|
case 9:
|
|||
|
|
setDefaultTime(1000*60*1440,false);
|
|||
|
|
break;
|
|||
|
|
case 10:
|
|||
|
|
setDefaultTime(1000*60*1440*2,false);
|
|||
|
|
break;
|
|||
|
|
case 11:
|
|||
|
|
$('#date1').click();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//数据表格
|
|||
|
|
layui.table.render({
|
|||
|
|
elem: '#msgTable'
|
|||
|
|
, height: tableHeight
|
|||
|
|
, data: []
|
|||
|
|
, limits: [50]
|
|||
|
|
, limit: 10000
|
|||
|
|
, page: false //开启分页
|
|||
|
|
, cols: [[ //表头
|
|||
|
|
{
|
|||
|
|
field: 'id', title: '序号', width: 50, sort: false, templet: function (d) {
|
|||
|
|
return d.LAY_INDEX
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
, {field: 'createTimeStr', title: '时间', width: 160, sort: true}
|
|||
|
|
, {field: 'logger', title: '程序', width: 200, templet: function (d) {
|
|||
|
|
return loggerKeyTemp[d.logger] || showClassName(d.logger);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
, {
|
|||
|
|
field: 'level', title: '消息类型', width: 70, templet: function (d) {
|
|||
|
|
var tempLevel = '<span>' + d.level + '</span>';
|
|||
|
|
switch (d.level) {
|
|||
|
|
case "INFO":
|
|||
|
|
tempLevel = '<span style="color:#666;padding:2px;">' + d.level + '</span>';
|
|||
|
|
break;
|
|||
|
|
case "ERROR":
|
|||
|
|
tempLevel = '<span style="background-color:#c00;color:white;font-size:10px;padding:2px;">' + d.level + '</span>';
|
|||
|
|
break;
|
|||
|
|
case "TIME":
|
|||
|
|
tempLevel = '<span style="background-color:#ffff4d;color:#666;font-size:10px;padding:2px;">' + d.level + '</span>';
|
|||
|
|
break;
|
|||
|
|
case "DEBUG":
|
|||
|
|
tempLevel = '<span style="background-color:#ffffcc;color:#666;font-size:10px;padding:2px;">' + d.level + '</span>';
|
|||
|
|
break;
|
|||
|
|
case "TRACE":
|
|||
|
|
tempLevel = '<span style="background-color:#e6e6cc;color:#666;font-size:10px;padding:2px;">' + d.level + '</span>';
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
return tempLevel;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
, {field: 'thread', title: '线程', width: 180}
|
|||
|
|
, {field: 'msg', title: '日志内容'}
|
|||
|
|
, {field: 'ip', title: '服务端IP', width: 100}
|
|||
|
|
]]
|
|||
|
|
,done: function (res, curr, count) {
|
|||
|
|
if(scrollTop>0){
|
|||
|
|
$('.layui-table-body').scrollTop(scrollTop);
|
|||
|
|
}
|
|||
|
|
var table2 = $('.layui-table-body').find("table")[0];
|
|||
|
|
// 重载表格---保持滚动条位置
|
|||
|
|
$('.layui-table-body').scroll(function () {
|
|||
|
|
var top = $('.layui-table-body').scrollTop();
|
|||
|
|
var tableHeight = $('.layui-table-body').height();
|
|||
|
|
var contentHeight = $(table2).height();
|
|||
|
|
var windowHeight = $(window).height();
|
|||
|
|
scrollTop = top;
|
|||
|
|
//console.log('top:'+top+'-contentHeight:'+contentHeight+'tableHeight:' + tableHeight + '-windowHeight:' + windowHeight);
|
|||
|
|
if(contentHeight>0 && top >= contentHeight - tableHeight-2){
|
|||
|
|
console.log('botttttttm')
|
|||
|
|
if(!click){
|
|||
|
|
click = true;
|
|||
|
|
next();
|
|||
|
|
setTimeout(function () {
|
|||
|
|
click = false;
|
|||
|
|
},2000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// , skin: 'line' //行边框风格
|
|||
|
|
, even: true //开启隔行背景
|
|||
|
|
, size: 'sm' //小尺寸的表格
|
|||
|
|
});
|
|||
|
|
// 程序列表
|
|||
|
|
treeTable1 = layui.treeTable.render({
|
|||
|
|
elem: '#tree-table',
|
|||
|
|
data: [],
|
|||
|
|
id: 'demoId',
|
|||
|
|
icon_key: 'title',
|
|||
|
|
is_checkbox: true,
|
|||
|
|
checked: {
|
|||
|
|
key: 'id',
|
|||
|
|
data: [],
|
|||
|
|
},
|
|||
|
|
end: function(e){
|
|||
|
|
// form.render();
|
|||
|
|
},
|
|||
|
|
cols: [
|
|||
|
|
{
|
|||
|
|
key: 'title',
|
|||
|
|
title: '名称',
|
|||
|
|
width: '180px',
|
|||
|
|
template: function(item){
|
|||
|
|
return item.title || item.name;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'value',
|
|||
|
|
title: '类路径',
|
|||
|
|
align: 'left',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'type',
|
|||
|
|
title: '类型',
|
|||
|
|
width: '100px',
|
|||
|
|
align: 'left',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'pinyin',
|
|||
|
|
title: '拼音',
|
|||
|
|
width: '100px',
|
|||
|
|
align: 'left'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'favourite',
|
|||
|
|
title: '收藏',
|
|||
|
|
width: '100px',
|
|||
|
|
align: 'left'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听checkbox选择
|
|||
|
|
layui.treeTable.on('tree(box)',function(data){
|
|||
|
|
setChooseLogger();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
//触发行单击事件
|
|||
|
|
layui.table.on('row(msgTable)', function (obj) {
|
|||
|
|
console.log(obj.tr) //得到当前行元素对象
|
|||
|
|
console.log(obj.data) //得到当前行数据
|
|||
|
|
var row = obj.data;
|
|||
|
|
layui.$('#logger2').val(row.logger);
|
|||
|
|
layui.$('#loggerStr2').val(loggerKeyTemp[row.logger] || row.logger);
|
|||
|
|
layui.$('#level2').val(row.level);
|
|||
|
|
layui.$('#thread2').val(row.thread);
|
|||
|
|
layui.$('#userId2').val(row.userId);
|
|||
|
|
layui.$('#createTimeStr2').val(row.createTimeStr);
|
|||
|
|
layui.$('#msg2').html(row.htmlMsg || row.msg);
|
|||
|
|
if ('ERROR' !== row.level) {
|
|||
|
|
$('#exception').hide();
|
|||
|
|
$('#exceptionLabel').hide();
|
|||
|
|
} else {
|
|||
|
|
$('#exception').show();
|
|||
|
|
$('#exceptionLabel').show();
|
|||
|
|
}
|
|||
|
|
layui.$('#exception').html(row.exception);
|
|||
|
|
|
|||
|
|
$(".layui-table-body .layui-table tr").attr({"style":"background:#black"}); //其它tr恢复原样（必须在前）
|
|||
|
|
$(obj.tr.selector).attr({"style":"background:#FFE48D"}); //改变当前tr颜色（必须在后）
|
|||
|
|
|
|||
|
|
|
|||
|
|
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
|
|||
|
|
var windowWight = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
maxmin: true,
|
|||
|
|
area: [windowWight * 0.8 + 'px', windowHeight * 0.8 + 'px'],
|
|||
|
|
content: $("#detailContent"), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
|
|||
|
|
cancel: function (index, layero) {
|
|||
|
|
$("#detailContent").css("display", "none");
|
|||
|
|
layer.close(index)
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听数据源选择器更新事件
|
|||
|
|
layui.form.on('select(dataSourceSelect)', function (data) {
|
|||
|
|
// 切换数据源，删除数据
|
|||
|
|
dataTemp = [];/*已加载的数据*/
|
|||
|
|
loggerTemp = {};/*程序缓存 ID>OBJ*/
|
|||
|
|
loggerKeyTemp = {};/*程序缓存 logger>name*/
|
|||
|
|
// 获取选择的数据源
|
|||
|
|
// 获取选中的数据源
|
|||
|
|
var selectedValue = $('#dataSourceSelect').val();
|
|||
|
|
window.localStorage.setItem('sourceId',selectedValue)
|
|||
|
|
window.localStorage.setItem('source',JSON.stringify(sourceTemp[selectedValue]))
|
|||
|
|
|
|||
|
|
// 清空表格数据
|
|||
|
|
layui.table.reload('msgTable', {
|
|||
|
|
data: dataTemp,
|
|||
|
|
});
|
|||
|
|
// 重新加载程序列表
|
|||
|
|
loadLoggerItems();
|
|||
|
|
// 清空程序选择
|
|||
|
|
$("#logger").val('');
|
|||
|
|
treeTable1.checked = {
|
|||
|
|
key: 'id',
|
|||
|
|
data: [],
|
|||
|
|
};
|
|||
|
|
layui.treeTable.render(treeTable1);
|
|||
|
|
layui.form.render();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var options = [];
|
|||
|
|
// 加载下拉数据源
|
|||
|
|
$.ajax({
|
|||
|
|
url: 'http://10.30.35.208:9999/es/es-source'+ "?uuid="+new Date().getTime(),
|
|||
|
|
type: 'GET',
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function (resp) {
|
|||
|
|
if (resp.success) {
|
|||
|
|
var data = resp.data;
|
|||
|
|
alert('JSON datasource:' + JSON.stringify(data));
|
|||
|
|
var sourceId = window.localStorage.getItem('sourceId') || '';
|
|||
|
|
var sourceStr = window.localStorage.getItem('source') || '{}';
|
|||
|
|
var source = JSON.parse(sourceStr === 'undefined' ? '{}' : sourceStr);
|
|||
|
|
options.push('<option value="' + (source.id || '') + '">' + (source.name || '请选择') + '</option>')
|
|||
|
|
// 将返回的数据处理成options格式
|
|||
|
|
for (var ceIndex in data) {
|
|||
|
|
var groupName = data[ceIndex].name;
|
|||
|
|
var optionsData = data[ceIndex].children;
|
|||
|
|
|
|||
|
|
var cegroupBefore = '<optgroup label="'+groupName+'"> '
|
|||
|
|
options.push(cegroupBefore);
|
|||
|
|
for(var opIndex in optionsData){
|
|||
|
|
var key = optionsData[opIndex].id;
|
|||
|
|
var option = '<option value="' + optionsData[opIndex].id + '">' + optionsData[opIndex].name + '</option>';
|
|||
|
|
sourceTemp[key] = optionsData[opIndex];
|
|||
|
|
options.push(option);
|
|||
|
|
}
|
|||
|
|
var cegroupBehind = '</optgroup>';
|
|||
|
|
options.push(cegroupBehind);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
var optionsStr = options.join('');
|
|||
|
|
console.log(optionsStr);
|
|||
|
|
// 更新select的内容
|
|||
|
|
$('#dataSourceSelect').empty();
|
|||
|
|
$('#dataSourceSelect').append(optionsStr);
|
|||
|
|
|
|||
|
|
$('#dataSourceSelect').val(sourceId || data[0].children[0].id);
|
|||
|
|
|
|||
|
|
// 重新初始化select组件
|
|||
|
|
layui.form.render('select');
|
|||
|
|
// 加载程序列表
|
|||
|
|
loadLoggerItems();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}).then(function (resp) {
|
|||
|
|
console.log(resp);
|
|||
|
|
})
|
|||
|
|
var dateNow = new Date();
|
|||
|
|
var month = dateNow.getMonth() + 1; // 月份从0开始，需要加1
|
|||
|
|
var day = dateNow.getDate();
|
|||
|
|
var mmdd = ''+(month>9 ? month : '0' + month) + '-' + (day>9 ? day : '0' + day);
|
|||
|
|
|
|||
|
|
//日期时间范围
|
|||
|
|
layui.laydate.render({
|
|||
|
|
elem: '#date1'
|
|||
|
|
, type: 'datetime'
|
|||
|
|
, range: true
|
|||
|
|
, format: "MM-dd HH:mm:ss"
|
|||
|
|
, value: mmdd+' 00:00:00 - '+mmdd+' 23:59:59'
|
|||
|
|
, btns: ['now', 'clear', 'confirm']
|
|||
|
|
, calendar: true
|
|||
|
|
, done: function (value, date, endDate) {
|
|||
|
|
$("#startTime").val(date.year
|
|||
|
|
+ '-' + (date.month > 9 ? date.month : '0' + date.month)
|
|||
|
|
+ '-' + (date.date > 9 ? date.date : '0' + date.date)
|
|||
|
|
+ ' ' + (date.hours > 9 ? date.hours : '0' + date.hours)
|
|||
|
|
+ ':' + (date.minutes > 9 ? date.minutes : '0' + date.minutes)
|
|||
|
|
+ ':' + (date.seconds > 9 ? date.seconds : '0' + date.seconds))
|
|||
|
|
$("#endTime").val(date.year
|
|||
|
|
+ '-' + (endDate.month > 9 ? endDate.month : '0' + endDate.month)
|
|||
|
|
+ '-' + (endDate.date > 9 ? endDate.date : '0' + endDate.date)
|
|||
|
|
+ ' ' + (endDate.hours > 9 ? endDate.hours : '0' + endDate.hours)
|
|||
|
|
+ ':' + (endDate.minutes > 9 ? endDate.minutes : '0' + endDate.minutes)
|
|||
|
|
+ ':' + (endDate.seconds > 9 ? endDate.seconds : '0' + endDate.seconds))
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
setDefaultTime(0,true);
|
|||
|
|
//监听from提交
|
|||
|
|
layui.form.on('submit(esQuery)', function (data) {
|
|||
|
|
// 重置滚动条为0
|
|||
|
|
scrollTop = 0;
|
|||
|
|
$('.layui-table-body').scrollTop(0)
|
|||
|
|
// 重置数量
|
|||
|
|
$("#already").text(0);
|
|||
|
|
$("#total").text(0);
|
|||
|
|
dataTemp = [];
|
|||
|
|
var levels = [];
|
|||
|
|
var overMatchSelected = false;
|
|||
|
|
var similaritySelected = false;
|
|||
|
|
// 关闭弹窗
|
|||
|
|
layer.closeAll();
|
|||
|
|
// 操作记录
|
|||
|
|
saveHistory();
|
|||
|
|
if (data.field.info && data.field.info === 'on') {
|
|||
|
|
levels.push('INFO')
|
|||
|
|
}
|
|||
|
|
if (data.field.error && data.field.error === 'on') {
|
|||
|
|
levels.push('ERROR')
|
|||
|
|
}
|
|||
|
|
if (data.field.debug && data.field.debug === 'on') {
|
|||
|
|
levels.push('DEBUG')
|
|||
|
|
}
|
|||
|
|
if (data.field.time && data.field.time === 'on') {
|
|||
|
|
levels.push('TIME')
|
|||
|
|
}
|
|||
|
|
if (data.field.trace && data.field.trace === 'on') {
|
|||
|
|
levels.push('TRACE')
|
|||
|
|
}
|
|||
|
|
if (data.field.overMatchSelected && data.field.overMatchSelected === 'on') {
|
|||
|
|
overMatchSelected = true
|
|||
|
|
}
|
|||
|
|
if (data.field.similaritySelected && data.field.similaritySelected === 'on') {
|
|||
|
|
similaritySelected = true
|
|||
|
|
}
|
|||
|
|
loadMore(levels, overMatchSelected, similaritySelected);
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
// 修改size
|
|||
|
|
$("#size").blur(function(){
|
|||
|
|
size = parseInt($("#size").val()) || 100;
|
|||
|
|
console.log(size)
|
|||
|
|
});
|
|||
|
|
// 消息历史记录单机显示
|
|||
|
|
$('#msg').on('click', function(){
|
|||
|
|
var msgHistory = window.localStorage.getItem('msgHistory');
|
|||
|
|
if(msgHistory){
|
|||
|
|
var items = JSON.parse(msgHistory);
|
|||
|
|
var lis = '';
|
|||
|
|
for (var msgHistoryKey in items) {
|
|||
|
|
var item = items[msgHistoryKey];
|
|||
|
|
lis += '<div onclick="setMsgHistory('+msgHistoryKey+')" class="single-line" style="width:240px;color:black;overflow: hidden;">'+item+'</div>';
|
|||
|
|
}
|
|||
|
|
console.log(lis)
|
|||
|
|
layer.tips(lis, '#msg',{tips:[3, '#ffffff']});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 线程历史记录单机显示
|
|||
|
|
$('#thread').on('click', function(){
|
|||
|
|
var threadHistory = window.localStorage.getItem('threadHistory');
|
|||
|
|
if(threadHistory){
|
|||
|
|
var items = JSON.parse(threadHistory);
|
|||
|
|
var lis = '';
|
|||
|
|
for (var msgHistoryKey in items) {
|
|||
|
|
var item = items[msgHistoryKey];
|
|||
|
|
lis += '<div onclick="setThreadHistory('+msgHistoryKey+')" class="single-line" style="width:240px;color:black;overflow: hidden;">'+item+'</div>';
|
|||
|
|
}
|
|||
|
|
layer.tips(lis, '#thread',{tips:[3, '#ffffff']});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setThreadHistory(index){
|
|||
|
|
var threadHistory = window.localStorage.getItem('threadHistory');
|
|||
|
|
if(threadHistory) {
|
|||
|
|
var items = JSON.parse(threadHistory);
|
|||
|
|
$('#thread').val(items[index]+'');
|
|||
|
|
}
|
|||
|
|
layer.closeAll();
|
|||
|
|
};
|
|||
|
|
function setMsgHistory(index){
|
|||
|
|
var msgHistory = window.localStorage.getItem('msgHistory');
|
|||
|
|
if(msgHistory) {
|
|||
|
|
var items = JSON.parse(msgHistory);
|
|||
|
|
$('#msg').val(items[index]+'');
|
|||
|
|
}
|
|||
|
|
layer.closeAll();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function showClassName(logger){
|
|||
|
|
if(logger){
|
|||
|
|
return logger.substring(logger.lastIndexOf('.')+1 || 0);
|
|||
|
|
}
|
|||
|
|
return logger;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function next(){
|
|||
|
|
if(parseInt($('#already').text()) >= parseInt($('#total').text())){
|
|||
|
|
// layer.msg('已经加载完所有数据!');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 重置数量 form.val('formId');
|
|||
|
|
var data = layui.form.val('search-form');
|
|||
|
|
console.log(data);
|
|||
|
|
var levels = [];
|
|||
|
|
var overMatchSelected = false;
|
|||
|
|
var similaritySelected = false;
|
|||
|
|
if (data.info && data.info === 'on') {
|
|||
|
|
levels.push('INFO')
|
|||
|
|
}
|
|||
|
|
if (data.error && data.error === 'on') {
|
|||
|
|
levels.push('ERROR')
|
|||
|
|
}
|
|||
|
|
if (data.debug && data.debug === 'on') {
|
|||
|
|
levels.push('DEBUG')
|
|||
|
|
}
|
|||
|
|
if (data.time && data.time === 'on') {
|
|||
|
|
levels.push('TIME')
|
|||
|
|
}
|
|||
|
|
if (data.trace && data.trace === 'on') {
|
|||
|
|
levels.push('TRACE')
|
|||
|
|
}
|
|||
|
|
if (data.overMatchSelected && data.overMatchSelected === 'on') {
|
|||
|
|
overMatchSelected = true
|
|||
|
|
}
|
|||
|
|
if (data.similaritySelected && data.similaritySelected === 'on') {
|
|||
|
|
similaritySelected = true
|
|||
|
|
}
|
|||
|
|
loadMore(levels, overMatchSelected, similaritySelected);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setChooseLogger(){
|
|||
|
|
var chooseLoggers = layui.treeTable.checked(treeTable1);
|
|||
|
|
var loggerStr = '';
|
|||
|
|
if(chooseLoggers){
|
|||
|
|
for(var index in chooseLoggers){
|
|||
|
|
if(loggerStr.length > 0){loggerStr += ',';}
|
|||
|
|
var key = chooseLoggers[index];
|
|||
|
|
loggerStr += loggerTemp[key] && loggerTemp[key].value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$("#logger").val(loggerStr);
|
|||
|
|
}
|
|||
|
|
function resetForm(){
|
|||
|
|
$("#logger").val('');
|
|||
|
|
$("#thread").val('');
|
|||
|
|
$("#msg").val('');
|
|||
|
|
$("input[name='error']").prop('checked', true);
|
|||
|
|
$("input[name='info']").prop('checked', true);
|
|||
|
|
$("input[name='debug']").prop('checked', false);
|
|||
|
|
$("input[name='time']").prop('checked', false);
|
|||
|
|
$("input[name='trace']").prop('checked', false);
|
|||
|
|
$("input[name='overMatchSelected']").prop('checked', true);
|
|||
|
|
$("input[name='similaritySelected']").prop('checked', false);
|
|||
|
|
// loggers程序重置
|
|||
|
|
treeTable1.checked = {
|
|||
|
|
key: 'id',
|
|||
|
|
data: [],
|
|||
|
|
};
|
|||
|
|
layui.treeTable.render(treeTable1);
|
|||
|
|
layui.form.render();
|
|||
|
|
// 日期重置
|
|||
|
|
setDefaultTime(0,true);
|
|||
|
|
// 重置滚动条为0
|
|||
|
|
scrollTop = 0;
|
|||
|
|
$('.layui-table-body').scrollTop(0)
|
|||
|
|
// 关闭弹窗
|
|||
|
|
layer.closeAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setDefaultTime(offset,flag){
|
|||
|
|
var timestamp = Date.now();
|
|||
|
|
var dateNow = new Date(timestamp);
|
|||
|
|
var beforeDate = new Date(timestamp-offset);
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 当前时间年月日时分秒
|
|||
|
|
var behindYear = dateNow.getFullYear();
|
|||
|
|
var behindMonth = dateNow.getMonth() + 1; // 月份从0开始，需要加1
|
|||
|
|
var behindDay = dateNow.getDate();
|
|||
|
|
var behindHours = flag ? 23 : dateNow.getHours();
|
|||
|
|
var behindMinutes = flag ? 59 : dateNow.getMinutes();
|
|||
|
|
var behindSeconds = flag ? 59 :dateNow.getSeconds();
|
|||
|
|
// 前面时间年月日时分秒
|
|||
|
|
var beforeYear = beforeDate.getFullYear();
|
|||
|
|
var beforeMonth = beforeDate.getMonth() + 1; // 月份从0开始，需要加1
|
|||
|
|
var beforeDay = beforeDate.getDate();
|
|||
|
|
var beforeHours = flag ? 0 : beforeDate.getHours();
|
|||
|
|
var beforeMinutes = flag ? 0 : beforeDate.getMinutes();
|
|||
|
|
var beforeSeconds = flag ? 0 :beforeDate.getSeconds();
|
|||
|
|
|
|||
|
|
var beforeMMddHHmmss = ''+(beforeMonth>9 ? beforeMonth : '0' + beforeMonth) + '-' + (beforeDay>9 ? beforeDay : '0' + beforeDay)
|
|||
|
|
+ ' '+(beforeHours>9 ? beforeHours : '0' + beforeHours)
|
|||
|
|
+ ':' + (beforeMinutes>9 ? beforeMinutes : '0' + beforeMinutes)
|
|||
|
|
+ ':' + (beforeSeconds>9 ? beforeSeconds : '0' + beforeSeconds);;
|
|||
|
|
var beforeyyyyMMddHHmmss = beforeYear+'-'+(beforeMonth>9 ? beforeMonth : '0' + beforeMonth) + '-' + (beforeDay>9 ? beforeDay : '0' + beforeDay)
|
|||
|
|
+ ' '+(beforeHours>9 ? beforeHours : '0' + beforeHours)
|
|||
|
|
+ ':' + (beforeMinutes>9 ? beforeMinutes : '0' + beforeMinutes)
|
|||
|
|
+ ':' + (beforeSeconds>9 ? beforeSeconds : '0' + beforeSeconds);
|
|||
|
|
|
|||
|
|
var behindMMddHHmmss = ''+(behindMonth>9 ? behindMonth : '0' + behindMonth) + '-' + (behindDay>9 ? behindDay : '0' + behindDay)
|
|||
|
|
+ ' '+(behindHours>9 ? behindHours : '0' + behindHours)
|
|||
|
|
+ ':' + (behindMinutes>9 ? behindMinutes : '0' + behindMinutes)
|
|||
|
|
+ ':' + (behindSeconds>9 ? behindSeconds : '0' + behindSeconds);;
|
|||
|
|
var behindyyyyMMddHHmmss = behindYear+'-'+(behindMonth>9 ? behindMonth : '0' + behindMonth) + '-' + (behindDay>9 ? behindDay : '0' + behindDay)
|
|||
|
|
+ ' '+(behindHours>9 ? behindHours : '0' + behindHours)
|
|||
|
|
+ ':' + (behindMinutes>9 ? behindMinutes : '0' + behindMinutes)
|
|||
|
|
+ ':' + (behindSeconds>9 ? behindSeconds : '0' + behindSeconds);
|
|||
|
|
|
|||
|
|
$("#startTime").val(beforeyyyyMMddHHmmss);
|
|||
|
|
$("#endTime").val(behindyyyyMMddHHmmss);
|
|||
|
|
|
|||
|
|
layui.laydate.render({
|
|||
|
|
elem: '#date1'
|
|||
|
|
, value: beforeMMddHHmmss +' - ' + behindMMddHHmmss
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadMore(levels,overMatchSelected,similaritySelected){
|
|||
|
|
|
|||
|
|
// 获取选中的数据源
|
|||
|
|
var selectedValue = $('#dataSourceSelect').val();
|
|||
|
|
console.log(selectedValue)
|
|||
|
|
if(!selectedValue){
|
|||
|
|
layer.msg('请先选择数据源');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var source = sourceTemp[selectedValue];
|
|||
|
|
var loggers = [];
|
|||
|
|
// 获取选中的loggers
|
|||
|
|
var loggerStr = $("#logger").val();
|
|||
|
|
if(loggerStr){
|
|||
|
|
var strarr = loggerStr.split(',');
|
|||
|
|
for (var strarrIndex in strarr) {
|
|||
|
|
var temp = {
|
|||
|
|
"pinyin": "",
|
|||
|
|
"title": "",
|
|||
|
|
"index": 0,
|
|||
|
|
"favourite": false,
|
|||
|
|
"type": "OTHER",
|
|||
|
|
"value": strarr[strarrIndex],
|
|||
|
|
"children": [],
|
|||
|
|
"pid": 0,
|
|||
|
|
"id": 0
|
|||
|
|
}
|
|||
|
|
loggers.push(temp)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var index = layer.load(2); //换了种风格
|
|||
|
|
try{
|
|||
|
|
var dataJson = {
|
|||
|
|
source: source,
|
|||
|
|
startTime: $("#startTime").val(),
|
|||
|
|
endTime: $("#endTime").val(),
|
|||
|
|
logger: loggers,
|
|||
|
|
thread: $("#thread").val(),
|
|||
|
|
levels: levels,
|
|||
|
|
msg: $("#msg").val(),
|
|||
|
|
overMatchSelected: overMatchSelected,
|
|||
|
|
similaritySelected: similaritySelected,
|
|||
|
|
from: parseInt($("#already").text()) || 0,
|
|||
|
|
size: size
|
|||
|
|
}
|
|||
|
|
var dataStr = JSON.stringify(dataJson);
|
|||
|
|
$.ajax({
|
|||
|
|
url: "http://10.30.35.208:9999/es/es-query"+ "?uuid="+new Date().getTime(),
|
|||
|
|
type: 'POST',
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
contentType:'application/json', // 指定编码格式
|
|||
|
|
data: dataStr,
|
|||
|
|
success: function (result) {
|
|||
|
|
if(result.code === 200 && result.data.code === 0){
|
|||
|
|
var data = result.data.data;
|
|||
|
|
$("#total").text(result.data.size);
|
|||
|
|
//layer.msg(result.message);
|
|||
|
|
dataTemp = dataTemp.concat(data)
|
|||
|
|
$("#already").text(dataTemp.length);
|
|||
|
|
|
|||
|
|
layui.use('table', function() {
|
|||
|
|
var table = layui.table;
|
|||
|
|
table.reload('msgTable', {
|
|||
|
|
data: dataTemp,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//关闭
|
|||
|
|
setTimeout(function () {
|
|||
|
|
layer.close(index);
|
|||
|
|
},300);
|
|||
|
|
|
|||
|
|
}else{
|
|||
|
|
layer.msg(result.data.message || result.msg);
|
|||
|
|
//关闭
|
|||
|
|
setTimeout(function () {
|
|||
|
|
layer.close(index);
|
|||
|
|
},300);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function (xhrJson,status,error) {
|
|||
|
|
layer.msg("error:"+JSON.stringify(xhrJson)+status+JSON.stringify(error))
|
|||
|
|
try{
|
|||
|
|
// 1. 创建ajax对象（异步对象）
|
|||
|
|
let xmlHttpRequest = new XMLHttpRequest();
|
|||
|
|
// 2. 创建请求
|
|||
|
|
// xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false')
|
|||
|
|
xmlHttpRequest.open("POST", "http://10.30.35.208:9999/es/es-query"+ "?uuid="+new Date().getTime());
|
|||
|
|
// 3. 设置 Content-Type 属性（固定写法）
|
|||
|
|
xmlHttpRequest.setRequestHeader('Content-Type', 'application/json')
|
|||
|
|
// 3. 发送请求
|
|||
|
|
xmlHttpRequest.send(dataStr);
|
|||
|
|
// 4. 监听状态，接收响应
|
|||
|
|
xmlHttpRequest.onreadystatechange = function() {
|
|||
|
|
layer.msg(xmlHttpRequest.readyState+"===>"+xmlHttpRequest.status+"===" + JSON.stringify(xmlHttpRequest.response))
|
|||
|
|
// 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
|
|||
|
|
if (xmlHttpRequest.readyState === 4&& xmlHttpRequest.status === 200) {
|
|||
|
|
// 4.2 使用xhr.response 获取服务器返回的数据
|
|||
|
|
layer.msg(JSON.stringify(xmlHttpRequest.response));
|
|||
|
|
}
|
|||
|
|
//关闭
|
|||
|
|
layer.close(index);
|
|||
|
|
}
|
|||
|
|
}catch (e){
|
|||
|
|
layer.msg("e:"+JSON.stringify(e))
|
|||
|
|
console.log(e)
|
|||
|
|
//关闭
|
|||
|
|
layer.close(index);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}catch (e){
|
|||
|
|
layer.msg("e:"+JSON.stringify(e))
|
|||
|
|
console.log(e)
|
|||
|
|
//关闭
|
|||
|
|
layer.close(index);
|
|||
|
|
}finally {
|
|||
|
|
|
|||
|
|
console.log(3)
|
|||
|
|
//关闭
|
|||
|
|
setTimeout(function () {
|
|||
|
|
layer.close(index);
|
|||
|
|
},10000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadLoggerItems() {
|
|||
|
|
// 获取选中的数据源
|
|||
|
|
var selectedValue = $('#dataSourceSelect').val();
|
|||
|
|
if(!selectedValue){
|
|||
|
|
layer.msg('请先选择数据源');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var source = sourceTemp[selectedValue];
|
|||
|
|
if(loggerTemp && Object.keys(loggerTemp).length === 0){
|
|||
|
|
$.ajax({
|
|||
|
|
url: "http://10.30.35.208:9999/es/" + source.config + "?uuid="+new Date().getTime(),
|
|||
|
|
type: 'GET',
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
contentType:'application/json',
|
|||
|
|
success: function (result) {
|
|||
|
|
layer.msg("loadLoggerItems result:"+JSON.stringify(result));
|
|||
|
|
loggerTemp = {};
|
|||
|
|
loggerKeyTemp = {};
|
|||
|
|
var tempData = [];
|
|||
|
|
for(var index in result.data){
|
|||
|
|
var item = result.data[index];
|
|||
|
|
loggerTemp[item.id] = item;
|
|||
|
|
loggerKeyTemp[item.value] = item.title || item.name;
|
|||
|
|
tempData.push(item)
|
|||
|
|
}
|
|||
|
|
treeTable1.data = tempData;
|
|||
|
|
layui.treeTable.render(treeTable1);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showTreeFix(){
|
|||
|
|
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
|
|||
|
|
var windowWight = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: '程序别名',
|
|||
|
|
maxmin: true,
|
|||
|
|
btn: ['确定','关闭','清除选择并关闭'],
|
|||
|
|
area: [windowWight * 0.8 + 'px', windowHeight * 0.8 + 'px'],
|
|||
|
|
content: $("#tree-table"), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
|
|||
|
|
yes: function(index, layero){
|
|||
|
|
setChooseLogger();
|
|||
|
|
$("#tree-table").css("display", "none");
|
|||
|
|
layer.close(index)
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
,btn2: function(index, layero){
|
|||
|
|
$("#tree-table").css("display", "none");
|
|||
|
|
layer.close(index)
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
,btn3: function(index, layero){
|
|||
|
|
$("#logger").val('');
|
|||
|
|
treeTable1.checked = {
|
|||
|
|
key: 'id',
|
|||
|
|
data: [],
|
|||
|
|
};
|
|||
|
|
layui.treeTable.render(treeTable1);
|
|||
|
|
layui.form.render();
|
|||
|
|
$("#tree-table").css("display", "none");
|
|||
|
|
layer.close(index)
|
|||
|
|
return true;
|
|||
|
|
},
|
|||
|
|
cancel: function (index, layero) {
|
|||
|
|
$("#tree-table").css("display", "none");
|
|||
|
|
layer.close(index)
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fastFilter(){
|
|||
|
|
$("#thread").val($("#thread2").val());
|
|||
|
|
$("#logger").val($("#logger2").val());
|
|||
|
|
$("#tree-table").css("display", "none");
|
|||
|
|
$("#detailContent").css("display", "none");
|
|||
|
|
layer.closeAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function filterThread(){
|
|||
|
|
$("#thread").val($("#thread2").val());
|
|||
|
|
$("#tree-table").css("display", "none");
|
|||
|
|
$("#detailContent").css("display", "none");
|
|||
|
|
layer.closeAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeDetail(){
|
|||
|
|
$("#tree-table").css("display", "none");
|
|||
|
|
$("#detailContent").css("display", "none");
|
|||
|
|
layer.closeAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function copyMsg(){
|
|||
|
|
var msg = $("#msg2").val();
|
|||
|
|
// HTML元素的id为"myText"
|
|||
|
|
var text = $("#msg2").text(); //获取要复制的文本内容
|
|||
|
|
copyToClipboard(text); //调用函数并传入要复制的文本内容
|
|||
|
|
layer.msg('复制成功');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function copyToClipboard(elementId) {
|
|||
|
|
var aux = document.createElement("input");
|
|||
|
|
aux.setAttribute("value", elementId);
|
|||
|
|
document.body.appendChild(aux);
|
|||
|
|
aux.select();
|
|||
|
|
document.execCommand("copy");
|
|||
|
|
document.body.removeChild(aux);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveHistory(){
|
|||
|
|
// 将输入存入到历史
|
|||
|
|
var msg = $('#msg').val();
|
|||
|
|
var thread = $('#thread').val();
|
|||
|
|
var msgHistory = window.localStorage.getItem('msgHistory');
|
|||
|
|
var threadHistory = window.localStorage.getItem('threadHistory');
|
|||
|
|
if(msg){
|
|||
|
|
if(!msgHistory){// 没有记录
|
|||
|
|
var items = [msg];
|
|||
|
|
window.localStorage.setItem('msgHistory',JSON.stringify(items));
|
|||
|
|
}else{
|
|||
|
|
var items = JSON.parse(msgHistory);
|
|||
|
|
// 判断对象是否存在，存在那么不管
|
|||
|
|
if (items.includes(msg)) {
|
|||
|
|
console.log("数组包含该值");
|
|||
|
|
} else {
|
|||
|
|
// 添加到头
|
|||
|
|
items.unshift(msg);
|
|||
|
|
if(items.length >= 8){
|
|||
|
|
//删除最后一个
|
|||
|
|
items.pop();
|
|||
|
|
}
|
|||
|
|
window.localStorage.setItem('msgHistory',JSON.stringify(items));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(thread){
|
|||
|
|
if(!threadHistory){// 没有记录
|
|||
|
|
var items = [thread];
|
|||
|
|
window.localStorage.setItem('threadHistory',JSON.stringify(items));
|
|||
|
|
}else{
|
|||
|
|
var items = JSON.parse(threadHistory);
|
|||
|
|
// 判断对象是否存在，存在那么不管
|
|||
|
|
if (items.includes(thread)) {
|
|||
|
|
console.log("数组包含该值");
|
|||
|
|
} else {
|
|||
|
|
// 添加到头
|
|||
|
|
items.unshift(thread);
|
|||
|
|
if(items.length >= 8){
|
|||
|
|
//删除最后一个
|
|||
|
|
items.pop();
|
|||
|
|
}
|
|||
|
|
window.localStorage.setItem('threadHistory',JSON.stringify(items));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function help(){
|
|||
|
|
layer.alert('1.勾选匹配度查询时将不会以时间进行排序，而是以文档相似计算得分，得分越高越靠前。<br>' +
|
|||
|
|
'2.数据源选择会暂存到浏览器，下次打开时会默认选择该数据源。<br>' +
|
|||
|
|
'3.日志级别说明：错误:ERROR 信息:INFO 耗时:TIME 调试:DEBUG 追踪:TRACE。<br>' +
|
|||
|
|
'4.网页加载数据比较慢，请不要将加载行数设置过大，以免把服务器搞蹦啦~o(╥﹏╥)o。</br>' +
|
|||
|
|
'5.表格高度是计算的，当浏览器宽高变化时，请右键刷新或者F5刷新浏览器即可从新计算显示表格高度。</br>', {icon: 3});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</html>
|