metaforce-scan/src/pages/HomePage/index.vue

<template>
  <div class="bg-black desktop:pt-[122px] mobile:pt-[39px]">
    <div
      class="bg-home-page bg-cover bg-center bg-no-repeat desktop:w-[1440px] desktop:h-[535.5px] desktop:pt-[70px] mobile:w-full mobile:h-[219px] mobile:pt-[25px]"
    >
      <search-input />
    </div>
    <!-- 中间部分 -->
    <div
      class="desktop:px-[120px] desktop:mt-[-111.5px] mobile:px-[20px] mobile:mt-[-51px]"
    >
      <!-- Network Overview -->
      <div
        class="bg-black-19191A pt-[34px] pb-[38px] mobile:py-[28px] rounded-[10px]"
      >
        <p
          class="text-white text-[20px] font-semibold desktop:pl-[34px] mobile:pl-[20px] mobile:text-[20px] mobile:font-semibold"
        >
          Network Overview
        </p>
        <div
          class="flex flex-1 desktop:flex-row desktop:mt-[35px] mobile:flex-col"
        >
          <div
            v-for="(item, index) in overview"
            :key="index"
            class="flex flex-1 flex-col desktop:pl-[34px] mobile:pl-[20px] mobile:mt-[28px]"
          >
            <p class="text-gray-969697 text-[15px]">{{ item.label }}</p>
            <p class="text-[36px] text-white font-semibold mt-[12px]">
              {{ item.value || '-' }}
            </p>
          </div>
        </div>
      </div>
      <!-- Latest Transactions -->
      <div
        class="flex flex-1 flex-row justify-between items-center desktop:pt-[56px] desktop:pb-[27px] mobile:pt-[37px] mobile:pb-[17px] latest-transactions"
      >
        <p
          class="text-white font-semibold desktop:text-[20px] mobile:text-[18px] desktop:pl-[34px]"
        >
          Latest Transactions
        </p>
        <div
          class="flex flex-row justify-center items-center bg-black-19191A rounded-full desktop:py-[8px] desktop:px-[14px] mobile:py-[6px] mobile:px-[15px] cursor-pointer"
          @click="jumpRoute('blocks')"
        >
          <p
            class="text-white font-medium desktop:text-[14px] mobile:text-[12px]"
          >
            View All Txs
          </p>
          <el-icon color="#FFFFFF" class="ml-[8px] mobile:hidden">
            <Right />
          </el-icon>
        </div>
      </div>
      <!-- table -->
      <div class="bg-black-19191A rounded-[10px]">
        <div class="mobile:hidden rounded-[10px]">
          <hp-table :data="tableData" />
        </div>
        <div class="desktop:hidden">
          <hp-card
            v-for="(item, index) in tableData"
            :key="index"
            :option="item"
          />
        </div>
      </div>
      <!-- <el-skeleton :rows="3" animated /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Right } from '@element-plus/icons-vue'

import hpCard from '@src/components/base/hp_card.vue'
import HpTable from '@src/components/table/desktop/hpTable.vue'
import SearchInput from '@src/components/search.vue'

import { getHomePageList } from '@src/api/BlockController'
import { getFindTokenList } from '@src/api/TokensController'
import { getFindTransactionListPage } from '@src/api/TransactionsController'

import { middleDecimal, timeConvert } from '@src/utils/string'

// 表格数据
let tableData = ref([])
// 中间顶部渲染的数据
const overview = reactive([
  {
    label: 'Block',
    value: '',
  },
  {
    label: 'Transaction',
    value: '',
  },
  {
    label: 'Block Time',
    value: '',
  },
  {
    label: 'Tokens',
    value: '',
  },
])

const router = useRouter()
const input = ref()
let ws = ref<WebSocket>()
// 初始化接口请求
const initRequist = async () => {
  // 获取主页接口
  const res = await getHomePageList()
  overview[1].value = res.data.totalTransactions
  overview[2].value = res.data.averageBlockTime
  // 获取tokens接口拿到总数
  const tokenRes = await getFindTokenList()
  overview[3].value = tokenRes.data.total
  // 获取最新的交易 处理数据 加上tooltip
  const TransactionList = await getFindTransactionListPage({
    pageNum: 1,
    pageSize: 5,
  })
  tableData.value = TransactionList.data.rows.map((item: any) => {
    return {
      txnHash: middleDecimal(item.hash),
      txnHashTooltip: item.hash,
      from: middleDecimal(item.from),
      fromTooltip: item.from,
      to: middleDecimal(item.to),
      toTooltip: item.to,
      time: timeConvert(item.timestamp),
      fee: item.fee,
    }
  })
}
// 初始化websocket连接
const initWebSocket = () => {
  ws.value = new WebSocket('wss://apiasia.mbc.network/websocket')

  ws.value.addEventListener('open', () => {
    ws.value?.send(JSON.stringify({ type: 'add_block' }))
  })

  ws.value.onmessage = (e: any) => {
    try {
      const res = JSON.parse(e.data)
      overview[0].value = res.value[0].number
    } catch (error) {}
  }

  ws.value.onclose = () => {
    console.log('ws 已关闭')
  }
}

const jumpRoute = (route: string) => router.push(route)

onMounted(() => {
  initRequist()
  initWebSocket()
})

onUnmounted(() => {
  ws.value?.close()
})
</script>

<style lang="sass">
@import './index.scss'
</style>