ethereum_viewer_webapp/src/components/Pending.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";
import NumKit from "@/plugins/kit/NumKit";

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

      this.table.loading = true
      const rst = await EthMev.getEthMevPendingData(this.query.block, this.query.hash, this.query.dataVague)
      this.table.loading = false

      if (!rst.data.state) {
        this.$msgkit.error(rst.data.msg)

        return
      }

      this.$msgkit.success(rst.data.msg)
      this.table.data = rst.data.data

      this.table.data.map(function (one) {
        try {
          let dataObj = one.dataObj

          one.tradeInfo = dataObj.tradeInfo
          one.from = dataObj.fromAdd
          one.to = dataObj.toAdd
          one.gasPrice = NumKit._N(parseInt(dataObj.gasPrice) / (1E9), 2)
          one.index = dataObj.index
          one.type = dataObj.type
          one.state = dataObj.status
          one.pending = dataObj.pending
        } catch (e) {
          one.tradeInfo = []
        }
      })
    }
  },
  provide() {
    return {
      generateTableData: this.generateTableData
    }
  },
  async mounted () {
    await this.generateTableData()
  }
}
</script>

<style>
#dataTable {
  height: 410px;
}

#dataTableHeader {
  max-width: none;
}

.tradeLabel {
  width: 250px;
}

thead.v-data-table-header {
  position: fixed !important;
  bottom: 0 !important;
  z-index: 999;
  background-color: rgba(255, 255, 255, 255);
  width: 96.35%;
  border-top: grey 1px solid;
}

div.tokenName {
  text-align: left;
  width: 100%;
}

div.tokenAmount {
  text-align: right;
  width: 100%;
}

span.v-chip__content {
  width: 100%;
}
</style>