|  |  | 
 |  |  | <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 eventBus from "../uitils/eventBus"; | 
 |  |  | 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 | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     eventBus.on('stackerData', eventData => { | 
 |  |  |         console.log(eventData); | 
 |  |  |     }) | 
 |  |  |     eventBus.on('locationData', eventData => { | 
 |  |  |         console.log(eventData); | 
 |  |  |     }) | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  | 
 |  |  |   font-size: 28px; | 
 |  |  |   color: orange; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .log-card { | 
 |  |  |   margin-bottom: 10px; | 
 |  |  | } | 
 |  |  | </style> |