| | |
| | | <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> |