ethereum_viewer_webapp/src/components/viewer/Top.vue

<template>
  <div class="top-container">
    <v-row>
      <!-- tx信息过滤 -->
      <v-col cols="18" md="2">
        <v-text-field required label="Tx.Hash" v-model="query.tx.hash" />
      </v-col>
      <v-col cols="18" md="2">
        <v-text-field required label="Tx.From" v-model="query.tx.from" />
      </v-col>
      <v-col cols="18" md="2">
        <v-text-field required label="Tx.To" v-model="query.tx.to" />
      </v-col>
      <!-- block过滤 -->
      <v-col cols="18" md="2">
        <v-text-field required label="Tx.BlockNumber" v-model="query.block" />
      </v-col>

      <!-- 搜索按钮 -->
      <v-col cols="18" md="2">
        <v-btn outlined x-large tile color="primary" @click="generateTableDataAgain">
          <v-icon left>mdi-cloud-search-outline</v-icon>
          拉取想要的
        </v-btn>
      </v-col>
    </v-row>
    <v-row>
      <!-- transfer信息过滤 -->
      <v-col cols="18" md="2">
        <v-text-field required label="Transfer.Token" v-model="query.transfer.token" />
      </v-col>
      <v-col cols="18" md="2">
        <v-text-field required label="Transfer.From" v-model="query.transfer.from" />
      </v-col>
      <v-col cols="18" md="2">
        <v-text-field required label="Transfer.To" v-model="query.transfer.to" />
      </v-col>

      <!-- 数据刷新时间 -->
      <v-col cols="18" md="2">
        <v-text-field required label="自定义刷新时间" v-model="query.autoFlushTime" />
      </v-col>

      <!-- 自动刷新提示 -->
      <v-col v-if='query.autoFlushTime === 0' cols="18" md="2">
        <v-btn outlined x-large tile color="teal" @click='query.autoFlushTime = 20'>
          <v-icon left>mdi-clock</v-icon>
          以20s/次刷新
        </v-btn>
      </v-col>

      <!-- 自动刷新提示 -->
      <v-col v-else-if='query.autoFlushTime !== 0' cols="18" md="2">
        <v-btn outlined x-large tile color="red" @click='query.autoFlushTime = 0'>停止刷新</v-btn>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: 'Top',
  props: ['query', 'page', 'table'],
  inject: ['generateTableData'],
  methods: {
    async generateTableDataAgain() {
      await this.generateTableData()
    }
  },
  async mounted() {
    let prevFlushTime = 0
    setInterval(async function(top) {
      if (top.query.autoFlushTime > 0) {
        let now = parseInt(new Date().getTime() / 1000)

        if (now - top.query.autoFlushTime > prevFlushTime) {
          await top.generateTableDataAgain()

          prevFlushTime = now
        }
      }
    }, 1000, this)
  }
}
</script>

<style scoped>
.top-container {
  width: 95%;
  margin: auto;
}
</style>