DataOps-web/src/views/modelSystem/modelTrain/modelTrainLog.vue

<template>
  <v-navigation-drawer
      v-model="drawer"
      absolute
      right
      temporary
      overlay-opacity="0"
      width="700px"
  >
    <div class="pa-3 white sticky d-flex align-center justify-end">
      <DatePicker
        v-model="date"
        ref="picker"
        :option="{
          range: true,
          placeholder: '请选择时间',
          type: 'date',
          clearable: false
        }"
        @change="init"
      ></DatePicker>
      <!-- <v-btn rounded color="primary" class="ml-3 half-button">查 询</v-btn> -->
    </div>
    <v-timeline
      :reverse="false"
      dense
    >
      <v-timeline-item
        v-for="(item, index) in items"
        :key="index"
        :color="item.level.toLowerCase()"
      >
      <div>{{ item.timestamp }} </div>
      <div :class="{'red--text' : item.level === 'ERROR'}">{{ item.message }}</div>

      </v-timeline-item>
    </v-timeline>
  </v-navigation-drawer>
</template>

<script>
import DatePicker from '@/components/Form/datePicker.vue'
import {
  getTasksLog
} from '@/api/dataChart'
export default {
  name: 'modelTrainLog',
  components: {
    DatePicker
  },
  data () {
    return {
      drawer: false,
      date: null,
      items: [],
      id: null
    }
  },
  methods: {
    async open (id) {
      this.id = id
      this.drawer = true
      this.init()
    },
    async init () {
      try {
        const { data } = await getTasksLog(this.id, {})
        this.items = data.logs
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sticky {
  position: sticky;
  top: 0;
  z-index: 3;
}
</style>