From fee271f24d6867b46ad1347559a25fa5aef99a02 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Sat, 25 Sep 2021 17:45:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E6=97=B6=E6=9B=B4=E6=96=B0=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Block/index.vue | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/views/Block/index.vue b/src/views/Block/index.vue
index ecd9fd4..188dbf5 100644
--- a/src/views/Block/index.vue
+++ b/src/views/Block/index.vue
@@ -9,7 +9,7 @@
 
     <div class="page-header">
       <div class="title">
-        全部区块（28个区块）
+        全部区块（{{ maxHeight }}个区块）
       </div>
       <el-pagination
           background
@@ -28,7 +28,10 @@
 
       <el-table-column width="100" align="center" label="高度">
         <template #default="scope">
-          <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{ scope.row.height }}</router-link>
+          <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{
+              scope.row.height
+            }}
+          </router-link>
         </template>
       </el-table-column>
 
@@ -46,7 +49,7 @@
 <script lang="ts" setup>
 import { block } from '@/api'
 import { useStore } from '@/store'
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const store = useStore()
@@ -56,6 +59,22 @@ const maxHeight = computed(() => store.getters.maxHeight)
 const start = maxHeight.value - 19
 const blockList = ref([])
 
+const interval = ref(0)
+
+interval.value = setInterval(() => {
+  block.getLastHeader().then(res => {
+    if (maxHeight.value < res.result.height) {
+      store.dispatch('setMaxHeight', res.result.height)
+    } else {
+      console.log(maxHeight.value, res.result.height)
+    }
+  })
+}, 1000)
+
+onBeforeUnmount(() => {
+  clearInterval(interval.value)
+})
+
 block.getHeaders(start, maxHeight.value, false).then(res => {
   blockList.value = res.result.items.reverse()
 })
@@ -77,6 +96,5 @@ block.getHeaders(start, maxHeight.value, false).then(res => {
   margin-top: 20px;
   box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
   border-radius: 2px;
-  font-size: 12px;
 }
 </style>