feat(断路器): 修复日志缺少类型,添加日志类型过滤

This commit is contained in:
fhysy 2024-08-16 17:09:33 +08:00
parent 69756af817
commit 6257501187
2 changed files with 57 additions and 29 deletions

View File

@ -208,11 +208,14 @@
<div id="log-box" class="log-box" :class="isOpenLog ? 'open-log' : ''"> <div id="log-box" class="log-box" :class="isOpenLog ? 'open-log' : ''">
<div class="log-box-header"> <div class="log-box-header">
<div class="log-box-title"> <div class="log-box-title">
<div>日志</div> <div>日志</div>
<div class="log-box-search"> <div class="log-box-search">
<el-input v-model="logSearch" placeholder="请输入搜索日志" clearable /> <el-input v-model="logSearch" placeholder="请输入搜索日志" clearable style="max-width: 200px" />
</div> <el-select v-model="logType" multiple collapse-tags placeholder="Select" style="margin-left: 10px; width: 150px">
</div> <el-option v-for="item in logTypeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="log-box-operate"> <div class="log-box-operate">
<view class="log-box-operate-item"> <view class="log-box-operate-item">
<div>mqtt状态</div> <div>mqtt状态</div>
@ -299,6 +302,27 @@ const activeFold = ref(['1', '3', '4', '5']);
const logList = ref([]); const logList = ref([]);
const logSearch = ref(''); const logSearch = ref('');
const logItemWidth = ref('auto'); const logItemWidth = ref('auto');
const logType = ref(['subscribe', 'publish', 'system', '']);
//
const logTypeList = [
{
label: '订阅',
value: 'subscribe'
},
{
label: '发布',
value: 'publish'
},
{
label: '系统',
value: 'system'
},
{
label: '其他',
value: ''
}
];
// //
const connectionState = ref(false); const connectionState = ref(false);
@ -649,7 +673,7 @@ const runMqtt = formEl => {
formEl.validate(valid => { formEl.validate(valid => {
if (valid) { if (valid) {
axios axios
.get(config.url + '/mqtt/conn', { .get(config.url + '/mqtt/conn', {
// GET // GET
params: mqttForm params: mqttForm
}) })
@ -1038,16 +1062,17 @@ const switchSocketStatus = computed(() => {
}); });
const searchLogList = computed(() => { const searchLogList = computed(() => {
if (!logSearch.value) { if (!logSearch.value) {
return logList.value return logList.value.filter(item => {
}else{ console.log(item, logType.value.indexOf(item.type));
return logList.value.filter(item => { return logType.value.indexOf(item.type) !== -1;
return JSON.stringify(item.msg).includes(logSearch.value) });
}) } else {
} return logList.value.filter(item => {
}) return JSON.stringify(item.msg).includes(logSearch.value) && logType.value.indexOf(item.type) !== -1;
});
}
});
// //
onMounted(() => { onMounted(() => {
@ -1111,16 +1136,15 @@ onUnmounted(() => {
background: #e6e6e6; background: #e6e6e6;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
color: #333333; color: #333333;
.log-box-title{ .log-box-title {
display: flex; display: flex;
align-items: center; align-items: center;
.log-box-search{ .log-box-search {
margin-left: 10px; margin-left: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
}
} }
}
.log-box-operate { .log-box-operate {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1204,9 +1228,13 @@ onUnmounted(() => {
} }
} }
:deep(.log-box-search .el-input__wrapper) { :deep(.log-box-search .el-input__wrapper) {
background: #fff; background: #fff;
} }
:deep(.log-box-search .el-select__wrapper) {
background: #fff;
}
.btn-box { .btn-box {
:deep(.el-form-item__content) { :deep(.el-form-item__content) {