优化log显示效果
This commit is contained in:
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}微信日志查看{% endblock %}
|
{% block title %}微信日志查看{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div>
|
<div class="log-page-container">
|
||||||
<el-card class="log-card">
|
<el-card class="log-card">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>日志查看</span>
|
<span>日志查看</span>
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="loadLogs">刷新</el-button>
|
<el-button style="float: right; padding: 3px 0" type="text" @click="loadLogs">刷新</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-loading="loading">
|
<div v-loading="loading" class="log-content-wrapper">
|
||||||
<div v-if="logContent && logContent.length > 0" class="log-content">
|
<div v-if="logContent && logContent.length > 0" class="log-content">
|
||||||
<pre>{% raw %}{{ logContent.join('') }}{% endraw %}</pre>
|
<pre>{% raw %}{{ logContent.join('') }}{% endraw %}</pre>
|
||||||
</div>
|
</div>
|
||||||
@@ -51,9 +51,10 @@
|
|||||||
logType: 'info',
|
logType: 'info',
|
||||||
logLines: 100,
|
logLines: 100,
|
||||||
logContent: [],
|
logContent: [],
|
||||||
refreshInterval: 0, // 新增,定时刷新间隔(秒),0为不自动刷新
|
refreshInterval: 0,
|
||||||
refreshTimer: null, // 新增,定时器句柄
|
refreshTimer: null,
|
||||||
currentView: '9' // 设置当前菜单项
|
currentView: '9',
|
||||||
|
showTimeRangeSelector: false // 禁用时间范围选择器
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -69,7 +70,6 @@
|
|||||||
.then(response => {
|
.then(response => {
|
||||||
if (response.data.success) {
|
if (response.data.success) {
|
||||||
this.logContent = response.data.data.content || [];
|
this.logContent = response.data.data.content || [];
|
||||||
// 日志内容更新后自动滚动到底部
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
const logDiv = this.$el.querySelector('.log-content');
|
const logDiv = this.$el.querySelector('.log-content');
|
||||||
if (logDiv) {
|
if (logDiv) {
|
||||||
@@ -107,17 +107,32 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.log-page-container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.log-card {
|
.log-card {
|
||||||
margin-bottom: 20px;
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-content {
|
.log-content {
|
||||||
max-height: 700px;
|
height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-content pre {
|
.log-content pre {
|
||||||
@@ -129,7 +144,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-log {
|
.empty-log {
|
||||||
padding: 40px 0;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user