<template>
|
<div class="title"></div>
|
<el-container>
|
<el-header>日志</el-header>
|
<el-main>
|
<el-card v-for="(log, index) in logs" :key="index" class="log-card" :style="{ color: log.color }">
|
<div :style="{ color: log.color }">{{ log.logEntry }}</div>
|
<div :style="{ color: log.color }">{{ log.time }}</div>
|
</el-card>
|
</el-main>
|
</el-container>
|
</template>
|
|
<script>
|
import { ref, onMounted } from 'vue'
|
import eventBus from "@/uitils/eventBus";
|
|
export default {
|
setup() {
|
const logs = ref([]);
|
onMounted(() => {
|
eventBus.on('Logs', eventData => {
|
if (logs.value.length > 500) {
|
logs.value = [];
|
}
|
const logEntry = "日志信息：" + eventData.log
|
const time = "时间：" + eventData.time
|
logs.value.unshift({ logEntry: logEntry, time: time, color: eventData.color });
|
|
// logs.value.unshift(logEntry);
|
});
|
});
|
return {
|
logs
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.title {
|
line-height: 70vh;
|
text-align: center;
|
font-size: 28px;
|
color: orange;
|
}
|
|
.log-card {
|
margin-bottom: 10px;
|
}
|
</style>
|
