huangxiaoqiang
2 天以前 850105e8cdf0d048ef843d87520513ac77a64200
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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>