80 lines
2.8 KiB
HTML
80 lines
2.8 KiB
HTML
<div id="global-log-app">
|
|
<!-- 悬浮日志按钮 -->
|
|
<el-button
|
|
type="info"
|
|
icon="el-icon-tickets"
|
|
@click="logDialogVisible = true"
|
|
class="floating-log-btn"
|
|
round>
|
|
后台运行日志
|
|
</el-button>
|
|
|
|
<!-- 弹窗式日志窗口 -->
|
|
<el-dialog title="后台运行日志" :visible.sync="logDialogVisible" width="60%" center append-to-body>
|
|
<div class="log-window" id="globalLogContainer" style="margin-top: 0; height: 400px; background-color: #1e1e1e; color: #a9b7c6; border-radius: 8px; padding: 15px; overflow-y: auto; text-align: left; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; line-height: 1.5; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); border: 1px solid #333;">
|
|
<div v-if="logs.length === 0" style="color: #666; text-align: center; margin-top: 150px;">
|
|
暂无后台任务输出...
|
|
</div>
|
|
<div v-for="(log, index) in logs" :key="index" style="margin-bottom: 2px;">
|
|
{{ log }}
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="logDialogVisible = false">关 闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<style>
|
|
.floating-log-btn {
|
|
position: fixed;
|
|
right: 40px;
|
|
bottom: 40px;
|
|
z-index: 9999;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.floating-log-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// 确保 Vue 和 axios 已经加载
|
|
if (typeof Vue !== 'undefined' && typeof axios !== 'undefined') {
|
|
window.globalLogApp = new Vue({
|
|
el: '#global-log-app',
|
|
data() {
|
|
return {
|
|
logs: [],
|
|
logTimer: null,
|
|
logDialogVisible: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchLogs();
|
|
this.logTimer = setInterval(this.fetchLogs, 1500);
|
|
},
|
|
beforeDestroy() {
|
|
if (this.logTimer) {
|
|
clearInterval(this.logTimer);
|
|
}
|
|
},
|
|
methods: {
|
|
fetchLogs() {
|
|
// 如果弹窗没打开，也可以不刷新日志以节省性能，或者一直拉取保持最新
|
|
if (!this.logDialogVisible) return;
|
|
|
|
axios.get('/api/task_logs')
|
|
.then(res => {
|
|
if (res.data.logs && res.data.logs.length > 0) {
|
|
this.logs = res.data.logs;
|
|
}
|
|
})
|
|
.catch(err => {});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script> |