lsh
/
log-search-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增多个消息查询，优化其它

master
shihua.lei 2025-04-15 16:45:41 +08:00
parent 28c1840d2a
commit fb5640e093
4 changed files with 955 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
index.html
View File

@ -66,7 +66,7 @@
<body onload="init()" style="background-color: #fbfbfb;"> <body onload="init()" style="background-color: #fbfbfb;">
<div class="layui-fluid" style="padding-top: 5px;"> <div class="layui-fluid" style="padding-top: 5px;">
<div class="layui-panel" id="headContent" > <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"> <form class="layui-form " style="background-color: #ebebeb7a;" lay-size="xs" action="" lay-filter="search-form" id="search-form">
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-inline"> <div class="layui-inline">
<label class="layui-form-label">ES数据源</label> <label class="layui-form-label">ES数据源</label>
@ -135,11 +135,11 @@
<div class="layui-inline"> <div class="layui-inline">
<label class="layui-form-label">检索内容</label> <label class="layui-form-label">检索内容</label>
<div class="layui-input-inline" style="width: 220px;"> <div class="layui-input-inline" style="width: 220px;">
<input type="text" name="msg" id="msg" <input type="text" name="msg" id="msg" placeholder="请输入内容" autocomplete="on" class="layui-input">
placeholder="请输入内容" autocomplete="on" class="layui-input"> <input type="text" name="msgAdd" id="msgAdd" placeholder="AND 内容" autocomplete="on" class="layui-input">
</div> </div>
<div class="layui-input-inline" style="margin-left: -10px;width: 50px;"> <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> <button style="border-left-width: 0;" type="button" onclick="javascript:$('#msg').val('');$('#msgAdd').val('');" class="layui-btn layui-btn-primary layui-btn-sm custom-btn" >清除</button>
</div> </div>
<div class="layui-input-inline" style="width: 120px;"> <div class="layui-input-inline" style="width: 120px;">
<div style="width: 120px;margin-top: -5px;"> <div style="width: 120px;margin-top: -5px;">
@ -164,6 +164,7 @@
<div class="layui-panel"> <div class="layui-panel">
<!--移动：6/12 | 平板：6/12 | 桌面：4/12--> <!--移动：6/12 | 平板：6/12 | 桌面：4/12-->
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
<!-- <span id="initBtn">msg</span>-->
<table id="msgTable" lay-filter="msgTable" lay-size="sm"></table> <table id="msgTable" lay-filter="msgTable" lay-size="sm"></table>
</div> </div>
</div> </div>
@ -287,6 +288,7 @@
var bodyHeight = windowHeight - height; var bodyHeight = windowHeight - height;
var tableHeight = bodyHeight < 400 ? 400 : bodyHeight - 55; var tableHeight = bodyHeight < 400 ? 400 : bodyHeight - 55;
// 时间快捷选择 // 时间快捷选择
layui.dropdown.render({ layui.dropdown.render({
elem: '#timeFastBtn' //可绑定在任意元素中，此处以上述按钮为例 elem: '#timeFastBtn' //可绑定在任意元素中，此处以上述按钮为例
@ -494,6 +496,7 @@
layer.open({ layer.open({
type: 1, type: 1,
maxmin: true, maxmin: true,
moveOut: true,
area: [windowWight * 0.8 + 'px', windowHeight * 0.8 + 'px'], area: [windowWight * 0.8 + 'px', windowHeight * 0.8 + 'px'],
content: $("#detailContent"), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 content: $("#detailContent"), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function (index, layero) { cancel: function (index, layero) {
@ -513,8 +516,10 @@
// 获取选择的数据源 // 获取选择的数据源
// 获取选中的数据源 // 获取选中的数据源
var selectedValue = $('#dataSourceSelect').val(); var selectedValue = $('#dataSourceSelect').val();
window.localStorage.setItem('sourceId',selectedValue) if(window.localStorage){
window.localStorage.setItem('source',JSON.stringify(sourceTemp[selectedValue])) window.localStorage.setItem('sourceId',selectedValue)
window.localStorage.setItem('source',JSON.stringify(sourceTemp[selectedValue]))
}
// 清空表格数据 // 清空表格数据
layui.table.reload('msgTable', { layui.table.reload('msgTable', {
@ -541,10 +546,13 @@
success: function (resp) { success: function (resp) {
if (resp.success) { if (resp.success) {
var data = resp.data; var data = resp.data;
var sourceId = window.localStorage.getItem('sourceId') || ''; var sourceId = window.localStorage ? window.localStorage.getItem('sourceId') : '';
var sourceStr = window.localStorage.getItem('source') || '{}'; var sourceStr = window.localStorage ? window.localStorage.getItem('source') : '{}';
var source = JSON.parse(sourceStr === 'undefined' ? '{}' : sourceStr); var source = JSON.parse(sourceStr === 'undefined' ? '{}' : sourceStr);
options.push('<option value="' + (source.id || '') + '">' + (source.name || '请选择') + '</option>') if(source){
options.push('<option value="' + (source.id || '') + '">' + (source.name || '请选择') + '</option>')
}
// 将返回的数据处理成options格式 // 将返回的数据处理成options格式
for (var ceIndex in data) { for (var ceIndex in data) {
var groupName = data[ceIndex].name; var groupName = data[ceIndex].name;
@ -578,6 +586,7 @@
} }
}).then(function (resp) { }).then(function (resp) {
console.log('then==resp>')
console.log(resp); console.log(resp);
}) })
var dateNow = new Date(); var dateNow = new Date();
@ -612,6 +621,7 @@
setDefaultTime(0,true); setDefaultTime(0,true);
//监听from提交 //监听from提交
layui.form.on('submit(esQuery)', function (data) { layui.form.on('submit(esQuery)', function (data) {
// document.getElementById('initBtn').innerText = new Date().getTime()+'====' + 111;
// 重置滚动条为0 // 重置滚动条为0
scrollTop = 0; scrollTop = 0;
$('.layui-table-body').scrollTop(0) $('.layui-table-body').scrollTop(0)
@ -657,7 +667,7 @@
}); });
// 消息历史记录单机显示 // 消息历史记录单机显示
$('#msg').on('click', function(){ $('#msg').on('click', function(){
var msgHistory = window.localStorage.getItem('msgHistory'); var msgHistory = window.localStorage ? window.localStorage.getItem('msgHistory') : undefined;
if(msgHistory){ if(msgHistory){
var items = JSON.parse(msgHistory); var items = JSON.parse(msgHistory);
var lis = ''; var lis = '';
@ -671,7 +681,7 @@
}); });
// 线程历史记录单机显示 // 线程历史记录单机显示
$('#thread').on('click', function(){ $('#thread').on('click', function(){
var threadHistory = window.localStorage.getItem('threadHistory'); var threadHistory = window.localStorage ? window.localStorage.getItem('threadHistory') : undefined;
if(threadHistory){ if(threadHistory){
var items = JSON.parse(threadHistory); var items = JSON.parse(threadHistory);
var lis = ''; var lis = '';
@ -685,7 +695,7 @@
} }
function setThreadHistory(index){ function setThreadHistory(index){
var threadHistory = window.localStorage.getItem('threadHistory'); var threadHistory = window.localStorage ? window.localStorage.getItem('threadHistory') : undefined;
if(threadHistory) { if(threadHistory) {
var items = JSON.parse(threadHistory); var items = JSON.parse(threadHistory);
$('#thread').val(items[index]+''); $('#thread').val(items[index]+'');
@ -693,7 +703,7 @@
layer.closeAll(); layer.closeAll();
}; };
function setMsgHistory(index){ function setMsgHistory(index){
var msgHistory = window.localStorage.getItem('msgHistory'); var msgHistory = window.localStorage ? window.localStorage.getItem('msgHistory') : undefined;
if(msgHistory) { if(msgHistory) {
var items = JSON.parse(msgHistory); var items = JSON.parse(msgHistory);
$('#msg').val(items[index]+''); $('#msg').val(items[index]+'');
@ -715,7 +725,7 @@
} }
// 重置数量 form.val('formId'); // 重置数量 form.val('formId');
var data = layui.form.val('search-form'); var data = layui.form.val('search-form');
console.log(data); // document.getElementById('initBtn').innerText = new Date().getTime()+'====' + JSON.stringify(data);
var levels = []; var levels = [];
var overMatchSelected = false; var overMatchSelected = false;
var similaritySelected = false; var similaritySelected = false;
@ -834,7 +844,7 @@
// 获取选中的数据源 // 获取选中的数据源
var selectedValue = $('#dataSourceSelect').val(); var selectedValue = $('#dataSourceSelect').val();
console.log(selectedValue)
if(!selectedValue){ if(!selectedValue){
layer.msg('请先选择数据源'); layer.msg('请先选择数据源');
return; return;
@ -843,6 +853,7 @@
var loggers = []; var loggers = [];
// 获取选中的loggers // 获取选中的loggers
var loggerStr = $("#logger").val(); var loggerStr = $("#logger").val();
if(loggerStr){ if(loggerStr){
var strarr = loggerStr.split(','); var strarr = loggerStr.split(',');
for (var strarrIndex in strarr) { for (var strarrIndex in strarr) {
@ -863,25 +874,34 @@
var index = layer.load(2); //换了种风格 var index = layer.load(2); //换了种风格
try{ try{
var form = parseInt($("#already").text()) || 0;
var dataJson = { var dataJson = {
source: source, source: source,
startTime: $("#startTime").val(), startTime: $("#startTime").val(),
endTime: $("#endTime").val(), endTime: $("#endTime").val(),
logger: loggers, logger: loggers,
thread: $("#thread").val(), thread: $("#thread").val(),
levels: levels, levels: levels,
msg: $("#msg").val(), msg: $("#msg").val(),
msgAdd: $("#msgAdd").val(),
overMatchSelected: overMatchSelected, overMatchSelected: overMatchSelected,
similaritySelected: similaritySelected, similaritySelected: similaritySelected,
from: parseInt($("#already").text()) || 0, from: form,
size: size size: size
} }
var params = 'source=' + JSON.stringify(source) +'&startTime='+$("#startTime").val()+'&endTime='+$("#endTime").val()+'&logger='+loggers
+'&thread='+$("#thread").val()+'&levels='+levels+'&msg='+$("#msg").val()+'&msgAdd='+$("#msgAdd").val()+'&overMatchSelected='+overMatchSelected+'&similaritySelected='+similaritySelected
+'&from='+form+'&size='+size;
var dataStr = JSON.stringify(dataJson); var dataStr = JSON.stringify(dataJson);
// document.getElementById('initBtn').innerText = new Date().getTime()+'====dataStr:' + dataStr;
$.ajax({ $.ajax({
url: "http://10.30.35.208:9999/es/es-query", url: "http://10.30.35.208:9999//es/es-query",
type: 'POST', type: 'POST',
dataType: 'JSON', dataType: 'json',
contentType:'application/json', // 指定编码格式 contentType:'application/json', // 指定编码格式
// headers: {
// 'content-type': 'application/json',
// },
data: dataStr, data: dataStr,
success: function (result) { success: function (result) {
if(result.code === 200 && result.data.code === 0){ if(result.code === 200 && result.data.code === 0){
@ -912,27 +932,57 @@
} }
}, },
error: function (xhrJson,status,error) { error: function (xhrJson,status,error) {
layer.msg("error:"+JSON.stringify(xhrJson)+status+JSON.stringify(error))
console.log(error)
//关闭
layer.close(index);
// 1. 创建ajax对象（异步对象） // 1. 创建ajax对象（异步对象）
let xmlHttpRequest = new XMLHttpRequest(); let xmlHttpRequest = new XMLHttpRequest();
// 2. 创建请求 // 2. 创建请求
// xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false') // xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false')
xmlHttpRequest.open("POST", "http://10.30.35.208:9999/es/es-query"); xmlHttpRequest.open("POST", "http://10.30.35.208:9999/es/es-query");
// 3. 设置 Content-Type 属性（固定写法） // // 3. 设置 Content-Type 属性（固定写法）
xmlHttpRequest.setRequestHeader('Content-Type', 'application/json') xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 3. 发送请求 // // 3. 发送请求
xmlHttpRequest.send(dataStr); xmlHttpRequest.send(params);
// 4. 监听状态，接收响应 // 4. 监听状态，接收响应
xmlHttpRequest.onreadystatechange = function() { xmlHttpRequest.onreadystatechange = function() {
layer.msg(xmlHttpRequest.readyState+"===>"+xmlHttpRequest.status+"===" + JSON.stringify(xmlHttpRequest.response)) // document.getElementById('initBtn').innerText = new Date().getTime()+'====xhr:' + JSON.stringify(xmlHttpRequest.response);
var result = JSON.parse(xmlHttpRequest.response);
// document.getElementById('initBtn').innerText = new Date().getTime()+'====xhr:' + JSON.stringify(result);
// 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
if (xmlHttpRequest.readyState === 4&& xmlHttpRequest.status === 200) { // if (xmlHttpRequest.readyState === 4&& xmlHttpRequest.status === 200) {
// 4.2 使用xhr.response 获取服务器返回的数据 // // 4.2 使用xhr.response 获取服务器返回的数据
layer.msg(JSON.stringify(xmlHttpRequest.response)); // document.getElementById('initBtn').innerText = new Date().getTime()+'====xhr:' + JSON.stringify();
// }else{
// layer.msg(result.data.message || result.msg);
// //关闭
// setTimeout(function () {
// layer.close(index);
// },300);
// }
// document.getElementById('initBtn').innerText = new Date().getTime()+'====result.code:' +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);
} }
} }
} }
@ -992,6 +1042,7 @@
type: 1, type: 1,
title: '程序别名', title: '程序别名',
maxmin: true, maxmin: true,
moveOut: true,
btn: ['确定','关闭','清除选择并关闭'], btn: ['确定','关闭','清除选择并关闭'],
area: [windowWight * 0.8 + 'px', windowHeight * 0.8 + 'px'], area: [windowWight * 0.8 + 'px', windowHeight * 0.8 + 'px'],
content: $("#tree-table"), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 content: $("#tree-table"), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
@ -1028,7 +1079,7 @@
function fastFilter(){ function fastFilter(){
$("#thread").val($("#thread2").val()); $("#thread").val($("#thread2").val());
$("#logger").val($("#logger2").val()); // $("#logger").val($("#logger2").val());
$("#tree-table").css("display", "none"); $("#tree-table").css("display", "none");
$("#detailContent").css("display", "none"); $("#detailContent").css("display", "none");
layer.closeAll(); layer.closeAll();
@ -1068,49 +1119,50 @@
// 将输入存入到历史 // 将输入存入到历史
var msg = $('#msg').val(); var msg = $('#msg').val();
var thread = $('#thread').val(); var thread = $('#thread').val();
var msgHistory = window.localStorage.getItem('msgHistory'); if(window.localStorage){
var threadHistory = window.localStorage.getItem('threadHistory'); var msgHistory = window.localStorage.getItem('msgHistory');
if(msg){ var threadHistory = window.localStorage.getItem('threadHistory');
if(!msgHistory){// 没有记录 if(msg){
var items = [msg]; if(!msgHistory){// 没有记录
window.localStorage.setItem('msgHistory',JSON.stringify(items)); var items = [msg];
}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)); window.localStorage.setItem('msgHistory',JSON.stringify(items));
} }else{
} var items = JSON.parse(msgHistory);
} // 判断对象是否存在，存在那么不管
if(thread){ if (items.includes(msg)) {
if(!threadHistory){// 没有记录 console.log("数组包含该值");
var items = [thread]; } else {
window.localStorage.setItem('threadHistory',JSON.stringify(items)); // 添加到头
}else{ items.unshift(msg);
var items = JSON.parse(threadHistory); if(items.length >= 8){
// 判断对象是否存在，存在那么不管 //删除最后一个
if (items.includes(thread)) { items.pop();
console.log("数组包含该值"); }
} else { window.localStorage.setItem('msgHistory',JSON.stringify(items));
// 添加到头
items.unshift(thread);
if(items.length >= 8){
//删除最后一个
items.pop();
} }
}
}
if(thread){
if(!threadHistory){// 没有记录
var items = [thread];
window.localStorage.setItem('threadHistory',JSON.stringify(items)); 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(){ function help(){

27
monaco.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monaco Editor Sample</title>
<link rel="stylesheet" href="./res/editor.main.css">
</head>
<body onload="initEditor">
<div id="container" style="width:800px;height:600px;">
<!-- 编辑器会在这个容器中被初始化 -->
</div>
<script src="./res/editor.main.js"></script>
<script>
function initEditor(){
// 初始化编辑器
const editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello World");', '}'].join('\n'),
language: 'javascript'
});
}
</script>
</body>
</html>

8
res/editor.main.css Normal file
View File

File diff suppressed because one or more lines are too long

798
res/editor.main.js Normal file
View File

File diff suppressed because one or more lines are too long