135 lines
4.8 KiB
HTML
135 lines
4.8 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}微信日志查看{% endblock %}
|
||
|
||
{% block content %}
|
||
<div>
|
||
<el-card class="log-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>日志查看</span>
|
||
<el-radio-group v-model="logType" size="small" style="margin-left: 20px;" @change="loadLogs">
|
||
<el-radio-button label="info">信息日志</el-radio-button>
|
||
<el-radio-button label="error">错误日志</el-radio-button>
|
||
<el-radio-button label="debug">调试日志</el-radio-button>
|
||
</el-radio-group>
|
||
<el-select v-model="logLines" size="small" style="margin-left: 20px;" @change="loadLogs">
|
||
<el-option label="最近100行" :value="100"></el-option>
|
||
<el-option label="最近500行" :value="500"></el-option>
|
||
<el-option label="最近1000行" :value="1000"></el-option>
|
||
</el-select>
|
||
<el-select v-model="refreshInterval" size="small" style="margin-left: 20px; width: 100px;" @change="handleRefreshInterval">
|
||
<el-option label="手动" :value="0"></el-option>
|
||
<el-option label="1秒" :value="1"></el-option>
|
||
<el-option label="3秒" :value="3"></el-option>
|
||
<el-option label="5秒" :value="5"></el-option>
|
||
<el-option label="10秒" :value="10"></el-option>
|
||
<el-option label="60秒" :value="60"></el-option>
|
||
</el-select>
|
||
<el-button style="float: right; padding: 3px 0" type="text" @click="loadLogs">刷新</el-button>
|
||
</div>
|
||
|
||
<div v-loading="loading">
|
||
<div v-if="logContent && logContent.length > 0" class="log-content">
|
||
<pre>{% raw %}{{ logContent.join('') }}{% endraw %}</pre>
|
||
</div>
|
||
<div v-else class="empty-log">
|
||
<el-empty description="暂无日志内容"></el-empty>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
mixins: [baseApp],
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
logType: 'info',
|
||
logLines: 100,
|
||
logContent: [],
|
||
refreshInterval: 0, // 新增，定时刷新间隔（秒），0为不自动刷新
|
||
refreshTimer: null, // 新增，定时器句柄
|
||
currentView: '9' // 设置当前菜单项
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadLogs();
|
||
},
|
||
beforeDestroy() {
|
||
this.clearRefreshTimer();
|
||
},
|
||
methods: {
|
||
loadLogs() {
|
||
this.loading = true;
|
||
axios.get(`/api/wx_logs?type=${this.logType}&lines=${this.logLines}`)
|
||
.then(response => {
|
||
if (response.data.success) {
|
||
this.logContent = response.data.data.content || [];
|
||
// 日志内容更新后自动滚动到底部
|
||
this.$nextTick(() => {
|
||
const logDiv = this.$el.querySelector('.log-content');
|
||
if (logDiv) {
|
||
logDiv.scrollTop = logDiv.scrollHeight;
|
||
}
|
||
});
|
||
} else {
|
||
this.$message.error('加载日志失败');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('加载日志出错:', error);
|
||
this.$message.error('加载日志出错');
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
handleRefreshInterval() {
|
||
this.clearRefreshTimer();
|
||
if (this.refreshInterval > 0) {
|
||
this.refreshTimer = setInterval(() => {
|
||
this.loadLogs();
|
||
}, this.refreshInterval * 1000);
|
||
}
|
||
},
|
||
clearRefreshTimer() {
|
||
if (this.refreshTimer) {
|
||
clearInterval(this.refreshTimer);
|
||
this.refreshTimer = null;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.log-card {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.log-content {
|
||
max-height: 700px;
|
||
overflow-y: auto;
|
||
overflow-x: auto;
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.log-content pre {
|
||
margin: 0;
|
||
white-space: pre;
|
||
word-break: normal;
|
||
word-wrap: normal;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.empty-log {
|
||
padding: 40px 0;
|
||
}
|
||
</style>
|
||
{% endblock %} |