定时更新任务

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>