|  |  |  | 
|---|
|  |  |  | <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, reactive } from 'vue' | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | font-size: 28px; | 
|---|
|  |  |  | color: orange; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .log-card { | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|