finish blocks
This commit is contained in:
liangping
parent
c8822a2869
commit
d7fbe18858
@ -111,6 +111,20 @@ const router = new VueRouter({
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/:chain/blocks',
|
||||
name: 'blocks',
|
||||
component: () => import('@/views/Blocks.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Block',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Blocks',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/:chain/block/:height',
|
||||
name: 'block',
|
||||
|
||||
124
src/views/Blocks.vue
Normal file
124
src/views/Blocks.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-card
|
||||
no-body
|
||||
>
|
||||
<b-card-header>
|
||||
<b-card-title>
|
||||
Blocks
|
||||
</b-card-title>
|
||||
</b-card-header>
|
||||
<b-table
|
||||
:items="blocks"
|
||||
:fields="list_fields"
|
||||
:sort-desc="true"
|
||||
sort-by="tokens"
|
||||
striped
|
||||
hover
|
||||
responsive="sm"
|
||||
>
|
||||
<!-- Column: Height -->
|
||||
<template #cell(height)="data">
|
||||
<router-link :to="`./block/${data.item.block.header.height}`">
|
||||
#{{ data.item.block.header.height }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template #cell(hash)="data">
|
||||
{{ data.item.block_id.hash }}
|
||||
</template>
|
||||
<template #cell(time)="data">
|
||||
{{ formatTime(data.item.block.header.time) }}
|
||||
</template>
|
||||
<template #cell(proposer)="data">
|
||||
{{ data.item.block.header.proposer_address }}
|
||||
</template>
|
||||
<template #cell(txs)="data">
|
||||
{{ length(data.item.block.data.txs) }}
|
||||
</template>
|
||||
|
||||
</b-table>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BTable, BCard, BCardHeader, BCardTitle, VBTooltip,
|
||||
} from 'bootstrap-vue'
|
||||
import {
|
||||
toDay,
|
||||
} from '@/libs/data'
|
||||
// import fetch from 'node-fetch'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BCard,
|
||||
BTable,
|
||||
BCardHeader,
|
||||
BCardTitle,
|
||||
},
|
||||
directives: {
|
||||
'b-tooltip': VBTooltip,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
islive: true,
|
||||
blocks: [],
|
||||
list_fields: [
|
||||
{ key: 'height', sortable: true },
|
||||
{
|
||||
key: 'hash',
|
||||
tdClass: 'text-truncate',
|
||||
},
|
||||
{
|
||||
key: 'proposer',
|
||||
tdClass: 'text-truncate',
|
||||
},
|
||||
{
|
||||
key: 'txs',
|
||||
// formatter: (value, i, data) => this.apr(value, i, data),
|
||||
tdClass: 'text-right',
|
||||
thClass: 'text-right',
|
||||
},
|
||||
{ key: 'time' },
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$http.getLatestBlock().then(res => {
|
||||
this.blocks.push(res)
|
||||
const list = []
|
||||
const { height } = res.block.header
|
||||
for (let i = 1; i < 20; i += 1) {
|
||||
list.push(height - i)
|
||||
}
|
||||
console.log(height, list)
|
||||
let promise = Promise.resolve()
|
||||
list.forEach(item => {
|
||||
promise = promise.then(() => new Promise(resolve => {
|
||||
this.$http.getBlockByHeight(item).then(b => {
|
||||
resolve()
|
||||
this.blocks.push(b)
|
||||
})
|
||||
}))
|
||||
})
|
||||
this.timer = setInterval(this.fetch, 6000)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.islive = false
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
length: v => (Array.isArray(v) ? v.length : 0),
|
||||
formatTime: v => toDay(v),
|
||||
fetch() {
|
||||
this.$http.getLatestBlock().then(b => {
|
||||
const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height)
|
||||
if (has < 0) this.blocks.unshift(b)
|
||||
if (this.blocks.length > 200) this.blocks.pop()
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -25,50 +25,53 @@
|
||||
md="4"
|
||||
sm="6"
|
||||
>
|
||||
<b-card
|
||||
v-if="data"
|
||||
no-body
|
||||
>
|
||||
<b-card-header>
|
||||
<h4 class="mb-0 text-uppercase">
|
||||
{{ data.chain_name }}
|
||||
</h4>
|
||||
<b-card-text class="mb-0">
|
||||
Updated on {{ data.time }}
|
||||
</b-card-text>
|
||||
</b-card-header>
|
||||
|
||||
<b-img
|
||||
:src="data.logo"
|
||||
height="145"
|
||||
class="mb-2"
|
||||
/>
|
||||
<b-row class="text-center mx-0">
|
||||
<b-col
|
||||
cols="6"
|
||||
class="border-top border-right d-flex align-items-between flex-column py-1"
|
||||
>
|
||||
<b-card-text class="text-muted mb-0">
|
||||
SDK Version
|
||||
<router-link :to="data.chain_name">
|
||||
<b-card
|
||||
v-if="data"
|
||||
no-body
|
||||
hover
|
||||
>
|
||||
<b-card-header>
|
||||
<h4 class="mb-0 text-uppercase">
|
||||
{{ data.chain_name }}
|
||||
</h4>
|
||||
<b-card-text class="mb-0">
|
||||
Updated on {{ data.time }}
|
||||
</b-card-text>
|
||||
<h3 class="font-weight-bolder mb-0">
|
||||
{{ data.sdk_version }}
|
||||
</h3>
|
||||
</b-col>
|
||||
</b-card-header>
|
||||
|
||||
<b-col
|
||||
cols="6"
|
||||
class="border-top d-flex align-items-between flex-column py-1"
|
||||
>
|
||||
<b-card-text class="text-muted mb-0">
|
||||
Height
|
||||
</b-card-text>
|
||||
<h3 class="font-weight-bolder mb-0">
|
||||
{{ data.height }}
|
||||
</h3>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-img
|
||||
:src="data.logo"
|
||||
height="145"
|
||||
class="mb-2"
|
||||
/>
|
||||
<b-row class="text-center mx-0">
|
||||
<b-col
|
||||
cols="6"
|
||||
class="border-top border-right d-flex align-items-between flex-column py-1"
|
||||
>
|
||||
<b-card-text class="text-muted mb-0">
|
||||
SDK Version
|
||||
</b-card-text>
|
||||
<h3 class="font-weight-bolder mb-0">
|
||||
{{ data.sdk_version }}
|
||||
</h3>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="6"
|
||||
class="border-top d-flex align-items-between flex-column py-1"
|
||||
>
|
||||
<b-card-text class="text-muted mb-0">
|
||||
Height
|
||||
</b-card-text>
|
||||
<h3 class="font-weight-bolder mb-0">
|
||||
{{ data.height }}
|
||||
</h3>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</router-link>
|
||||
</b-col>
|
||||
|
||||
<!-- no result found -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user