DataOps-web/src/views/modelSystem/modelStatistics/index.vue

<template>
  <div class="content white">
    <v-container>
      <v-row >
        <v-col
          v-for="elevation in elevations"
          :key="elevation.value"
          cols="3"
        >
          <v-card
            class="pa-2"
            tile
            height="200"
          >
            <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
              <div class="text-h3" :class="`${elevation.textColor}--text`">{{ itemData[elevation.value] }}</div>
              <div>{{ elevation.text }}</div>
            </div>
          </v-card>
        </v-col>
      </v-row>

    </v-container>
  </div>
</template>

<script>
import {
  getFeedbackStats
} from '@/api/dataChart'
export default {
  name: 'modelStatistics',
  data () {
    return {
      elevations: [
        { text: '总反馈数', value: 'total_feedback', textColor: 'primary' },
        { text: '正向反馈数', value: 'positive_feedback', textColor: 'success' },
        { text: '负向反馈数', value: 'negative_feedback', textColor: 'error' },
        { text: '已训练反馈数', value: 'trained_feedback', textColor: 'indigo' },
        { text: '未训练反馈数', value: 'untrained_feedback', textColor: 'warning' },
        { text: '正向反馈率', value: 'positive_rate', textColor: 'primary' },
        { text: '训练覆盖率', value: 'training_rate', textColor: 'primary' }
      ],
      itemData: {}
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await getFeedbackStats()
        this.itemData = data
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  font-size: 14px;
}
</style>