aiplat_vue/src/views/modules/snoop/jobResult.vue

<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-if="visible"
      :visible.sync="visible"
      width="75%">
      <el-table
        :data="useDataList"
        border
        v-loading="dataListLoading"
        height="530"
        style="width: 100%;margin-top: -30px;">

        <el-table-column v-if="showID" prop="Id" header-align="center" align="center" width="80" label="id"
                         type="index" :index='(index)=>{return (index+1) + (this.pageIndex-1)*this.pageSize}'>
        </el-table-column>
        <el-table-column  v-if="showID" header-align="center" align="center"  label="time">
          <template slot-scope="scope">
            {{scope.row.time | timeFormater}}
          </template>
        </el-table-column>
        <el-table-column v-for="col in tableClo" :key="col"
                         :prop="col"
                         header-align="center"
                         align="center"
                         :label="col">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout=" sizes, prev, pager, next">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'jobResult',
  data () {
    return {
      dataList: [],
      useDataList: [],
      tableClo: [],
      visible: true,
      info: null,
      showID: true,
      title: '',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false
    }
  },
  filters: {
    timeFormater (value) {
      // console.log('@', value)
      var date = new Date(value)
      let years = date.getFullYear()
      let month = (date.getMonth() + 1) > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
      let day = (date.getDate() >= 10) ? date.getDate() : '0' + date.getDate()
      let hours = (date.getHours() >= 10) ? date.getHours() : '0' + date.getHours()
      let minutes = (date.getMinutes() >= 10) ? date.getMinutes() : '0' + date.getMinutes()
      let seconds = (date.getSeconds() >= 10) ? date.getSeconds() : '0' + date.getSeconds()
      if (value) {
        return years + '-' + month + '-' + day +
          ' ' + hours + ':' + minutes + ':' + seconds
      } else {
        return 'N/A'
      }
    }
  },
  methods: {
    init (info) {
      this.visible = true
      this.info = info
      this.title = '结果 ： ' + info.jobName
      this.dataList = []
      this.useDataList = []
      this.getJobRes()
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      // console.log(info)
    },
    getJobRes () {
      this.dataListLoading = true
      this.useDataList = []
      this.$http({
        url: this.$http.adornUrl('/v1/metrics/values'),
        methods: 'get',
        params: this.$http.adornParams({
          'offset': (this.pageIndex - 1) * this.pageSize,
          'size': this.pageSize + 1,
          'metricName': this.info.jobName
        })
      }).then((data) => {
        if (data.data.length && data.status === 200) {
          this.showID = true
          this.dataList = data.data
          for (const item of this.dataList) {
            item.value['time'] = item.tmst
            for (let key in item.value) {
              if (typeof (item.value[key]) !== 'object') {
                item.value[key].toString()
              } else {
                const keysplit = key.split('-')
                let records = ''
                let record
                for (const i in item.value[key]) {
                  let name, count
                  for (const category in item.value[key][i]) {
                    if (category !== 'count') {
                      name = item.value[key][i][category]
                      count = item.value[key][i].count
                    }
                  }
                  record = ' (' + name + ',' + count + ') '
                  records += record
                }
                delete item.value[key]
                key = key + ' (' + keysplit[0].split('_')[0] + ', count)'
                item.value[key] = records
              }
            }
            this.useDataList.push(item.value)
          }
          // console.log(this.dataList)
          // this.useDataList = this.dataList
          // this.dataList.forEach((x) => {
          //   console.log(x)
          //   this.useDataList.push(x.value)
          // })
          // // console.log(this.dataList[0].value)
          this.tableClo = Object.keys(this.dataList[0].value)
          this.tableClo.forEach((data, index) => {
            if (data === 'time') {
              this.tableClo.splice(index, 1)
            }
          })
          this.dataListLoading = false
          this.$nextTick(() => {
            this.haveNextPage()
          })
          // console.log(this.tableClo)
        } else {
          this.tableClo = []
          this.showID = false
          this.dataListLoading = false
        }
      })
      // this.dataList = [
      //   {
      //     'name': 'demo3',
      //     'tmst': 1642670565000,
      //     'value': {
      //       'id_count': 6375000,
      //       'id_max': 124,
      //       'age_max': 2000,
      //       'age_min': 1
      //     }
      //   },
      //   {
      //     'name': 'demo3',
      //     'tmst': 1642670550000,
      //     'value': {
      //       'id_count': 6375000,
      //       'id_max': 124,
      //       'age_max': 2000,
      //       'age_min': 1
      //     }
      //   }]
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getJobRes()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getJobRes()
    },
    /** 判断是否还有下一页
     *  思路 ： 每次请求 pageSize +1 判断实际收到的数组长度
     */
    haveNextPage () {
      if (this.useDataList.length > this.pageSize) {
        this.totalPage = (this.pageIndex - 1) * this.pageSize + this.useDataList.length
        this.useDataList.pop()
      }
    }
  }
}
</script>

<style scoped>

</style>