ethereum_viewer_webapp/src/components/History.vue

<template>
  <v-card elevation="1">
    <!-- 顶部组件 -->
    <Top :query='query' :page='page' :table='table'></Top>

    <!-- 中间表格组件 -->
    <Table :query='query' :page='page' :table='table'></Table>
  </v-card>
</template>

<script>
import Top from '@/components/viewer/Top'
import Table from '@/components/viewer/Table'
import EthMev from '@/plugins/model/EthMev'

export default {
  name: 'History',
  components: {Top, Table},
  data: () => ({
    query: {
      block: '',
      hash: '',
      dataVague: '',
      autoFlushTime: 0
    },
    page: {
      name: 'History Page'
    },
    table: {
      search: '',
      loading: false,
      groupBy: 'block',
      groupDesc: true,
      sortBy: ['block', 'index'],
      sortDesc: [true, false],
      pageSize: 200,
      pageNum: 1,
      data: [],
      headers: [
        { text: "Option", value: 'option', width: '7%' },
        { text: 'Block', value: 'block' },
        { text: 'Hash', value: 'hash', width: '7%' },
        { text: 'From', value: 'from', width: '7%'  },
        { text: 'To', value: 'to', width: '7%' },
        { text: 'GasPrice', value: 'gasPrice', width: '6%' },
        { text: 'Type', value: 'type', width: '3%' },
        { text: 'Index', value: 'index', width: '3%' },
        { text: 'State', value: 'state', width: '3%' },
        { text: 'Mev', value: 'mev', width: '3%' },
        { text: 'Pending', value: 'pending', width: '7%' },
        { text: 'TradeInfo', value: 'tradeInfo'},
        { text: 'memo', value: 'memo', width: '10%'}
      ]
    },
  }),
  methods: {
    // 获取数据
    async generateTableData() {
      this.table.loading = true
      this.table.data.length = 0

      const rst = await EthMev.getEthMevData(this.query.block, this.query.hash, this.query.dataVague,
          this.table.pageNum, this.table.pageSize)

      if (rst.state) {
        EthMev.generateTableDataByDbData(rst.data)
        this.table.data = rst.data
        this.$msgkit.success(rst.msg)
      } else {
        this.$msgkit.error(rst.msg)
      }

      this.table.loading = false
    }
  },
  provide() {
    return {
      generateTableData: this.generateTableData
    }
  },
  async mounted () {
    await this.generateTableData()
  }
}
</script>