148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="head-container">
|
|
<el-form
|
|
:inline="true"
|
|
class="demo-form-inline"
|
|
label-position="right"
|
|
label-width="90px"
|
|
label-suffix=":"
|
|
>
|
|
<el-form-item label="日志级别">
|
|
<el-select
|
|
v-model="query.level"
|
|
clearable
|
|
size="mini"
|
|
placeholder="日志级别"
|
|
class="filter-item"
|
|
>
|
|
<el-option
|
|
v-for="item in levelOptions"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="模糊搜索">
|
|
<el-input
|
|
v-model="query.message"
|
|
clearable
|
|
size="mini"
|
|
placeholder="日志内容"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="链路ID">
|
|
<el-input
|
|
v-model="query.tlogTraceId"
|
|
clearable
|
|
size="mini"
|
|
placeholder="请输入链路ID"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="时间">
|
|
<el-date-picker
|
|
v-model="query.createTime"
|
|
type="datetimerange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="mini" @click="queryData">
|
|
查询
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!--表格渲染-->
|
|
<el-card shadow="hover" style="width: 100%" class="log-warpper">
|
|
<div style="width: 100%">
|
|
<div v-for="(log, index) in logs" :key="index">
|
|
<div style="margin-bottom: 5px; font-size: 14px;" v-html="log" />
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
:page-sizes="[100, 500, 1000]"
|
|
:page-size.sync="query.size"
|
|
:total="query.total"
|
|
:current-page.sync="query.page"
|
|
style="margin-top: 8px;"
|
|
layout="total, prev, pager, next, sizes"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import luceneOperation from '@/views/lucene/api/lucene'
|
|
import { default as AnsiUp } from 'ansi_up'
|
|
export default {
|
|
name: 'LuceneLog',
|
|
data() {
|
|
return {
|
|
permission: {
|
|
add: ['admin', 'param:add'],
|
|
edit: ['admin', 'param:edit'],
|
|
del: ['admin', 'param:del']
|
|
},
|
|
levelOptions: [{
|
|
value: 'DEBUG',
|
|
label: 'DEBUG'
|
|
}, {
|
|
value: 'INFO',
|
|
label: 'INFO'
|
|
}, {
|
|
value: 'ERROR',
|
|
label: 'ERROR'
|
|
}, {
|
|
value: 'WARN',
|
|
label: 'WARN'
|
|
}],
|
|
rules: {},
|
|
logs: [],
|
|
query: {
|
|
tlogTraceId: '',
|
|
message: '',
|
|
page: 0,
|
|
size: 100,
|
|
total: 0,
|
|
createTime: ''
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.queryData()
|
|
},
|
|
methods: {
|
|
handleSizeChange(val) {
|
|
this.query.size = val
|
|
this.queryData()
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.query.page = val
|
|
this.queryData()
|
|
},
|
|
queryData() {
|
|
luceneOperation.getLogData(this.query).then(res => {
|
|
this.logs = [] // 清空
|
|
var ansi_up = new AnsiUp()
|
|
// 数据初始化
|
|
for (const i in res.content) {
|
|
this.logs[i] = ansi_up.ansi_to_html(res.content[i])
|
|
}
|
|
// this.logs = res.content
|
|
this.query.total = res.totalElements
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|