update

src/utils/filters.ts

@@ -0,0 +1,8 @@
+export const filterHash = (str: string, num?: number) => {
+    const length = num || 16
+    return str.substr(0, length) + '...' + str.substr(-4)
+}
+
+export default {
+    filterHash
+}

src/views/Address/index.vue

@@ -1,11 +1,35 @@
 <template>
   <div class="container">
-    <Breadcrumb />
+    <Breadcrumb :path="[{name: '地址信息'}]"/>
+
+    <div>
+      地址
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { block } from '@/api'
 import Breadcrumb from '@/components/Breadcrumb.vue'
+import { useRoute } from 'vue-router'
+
+const route= useRoute()
+const address = route.params.address as string
+
+block.getAddrBalance([address]).then(res => {
+  console.log(res.result)
+})
+
+block.getTxByAddr({
+  addr: address,
+  flag: 0,
+  count: 5,
+  direction: 0,
+  height: -1,
+  index: 1
+}).then(res => {
+  console.log(res.error, res.result.txs)
+})
 </script>
 
 <style scoped lang="less">

src/views/Block/detail.vue

@@ -38,25 +38,22 @@
 
         <el-table-column label="交易哈希">
           <template #default="scope">
-            <router-link :to="{name: 'TradeDetail', params: { hash: scope.row.txHash }}">{{
-                scope.row.txHash
-              }}
+            <router-link :to="{name: 'TradeDetail', params: { hash: scope.row.txHash }}">
+              {{ filterHash(scope.row.txHash) }}
             </router-link>
           </template>
         </el-table-column>
         <el-table-column label="发送方">
           <template #default="scope">
-            <router-link :to="{name: 'Address', params: { address: scope.row.fromAddr }}">{{
-                scope.row.fromAddr
-              }}
+            <router-link :to="{name: 'Address', params: { address: scope.row.fromAddr }}">
+              {{ filterHash(scope.row.fromAddr) }}
             </router-link>
           </template>
         </el-table-column>
         <el-table-column label="接收方">
           <template #default="scope">
-            <router-link :to="{name: 'Address', params: { address: scope.row.tx.to }}">{{
-                scope.row.tx.to
-              }}
+            <router-link :to="{name: 'Address', params: { address: scope.row.tx.to }}">
+              {{ filterHash(scope.row.tx.to) }}
             </router-link>
           </template>
         </el-table-column>
@@ -73,6 +70,7 @@
 import { block } from '@/api'
 import Breadcrumb from '@/components/Breadcrumb.vue'
 import { useStore } from '@/store'
+import { filterHash } from '@/utils/filters'
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 

src/views/Block/index.vue

@@ -9,11 +9,9 @@
       <el-pagination
           background
           v-model:currentPage="currentPage"
-          :page-sizes="[10, 20, 40]"
           :page-size="pageSize"
-          layout="prev,pager,next,sizes,jumper"
+          layout="prev,pager,next,jumper"
           :total="maxHeight"
-          @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
       >
       </el-pagination>
@@ -64,10 +62,10 @@ interval.value = setInterval(() => {
     if (maxHeight.value < res.result.height) {
       store.dispatch('setMaxHeight', res.result.height)
     } else {
-      console.log(maxHeight.value, res.result.height)
+      console.log('列表',maxHeight.value, res.result.height)
     }
   })
-}, 1000)
+}, 5000)
 
 onBeforeUnmount(() => {
   clearInterval(Number(interval.value))
@@ -80,10 +78,7 @@ block.getHeaders(start, maxHeight.value, false).then(res => {
 const currentPage = ref<number>(1)
 const pageSize = ref<number>(20)
 
-const handleSizeChange = (e: number) => {
-  pageSize.value = e
-}
-const handleCurrentChange = (e) => {
+const handleCurrentChange = (e: number) => {
   console.log(currentPage.value)
 }
 

src/views/Home/index.vue

@@ -13,8 +13,11 @@
             {{ item.height }}
           </div>
           <div class="info">
-            <div class="hash" @click="router.push({name: 'BlockDetail', params: {hash: item.hash}})">
-              {{ item.hash }}
+            <div class="hash">
+              <router-link :to="{name: 'BlockDetail', params: {hash: item.hash}}">{{
+                  filterHash(item.hash)
+                }}
+              </router-link>
             </div>
             <div class="data">
               <span class="num">{{ item.txCount }} 笔交易</span>
@@ -45,9 +48,10 @@
 
 <script lang="ts" setup>
 import { block } from '@/api'
-import Banner from '@/components/Banner'
+import Banner from '@/components/Banner.vue'
 import { useStore } from '@/store'
-import { computed, onMounted, ref } from 'vue'
+import { filterHash } from '@/utils/filters'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const store = useStore()
@@ -59,7 +63,9 @@ onMounted(() => {
   getBlockList()
 })
 
-setInterval(() => {
+// eslint-disable-next-line no-undef
+const interval = ref<NodeJS.Timeout | null>()
+interval.value = setInterval(() => {
   getLastHeader()
 }, 5000)
 
@@ -69,11 +75,15 @@ const getLastHeader = () => {
       store.dispatch('setMaxHeight', res.result.height)
       getBlockList()
     } else {
-      console.log(maxHeight.value, res.result.height)
+      console.log('首页', maxHeight.value, res.result.height)
     }
   })
 }
 
+onBeforeUnmount(() => {
+  clearInterval(Number(interval.value))
+})
+
 const blockList = ref([])
 const tradeList = ref([])
 
@@ -173,8 +183,6 @@ const getBlockList = () => {
       justify-content: space-between;
 
       .hash {
-        color: #6368de;
-        cursor: pointer;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -182,13 +190,13 @@ const getBlockList = () => {
 
       .data {
         display: flex;
-        justify-content: space-between;
 
         .num {
           color: #6368de;
         }
 
         .time {
+          margin-left: 16px;
           color: #9ea2a9;
         }
       }

src/views/Other/analytical.vue

@@ -4,7 +4,7 @@
     <Breadcrumb :path="[{name: '解析数据'}]"/>
 
     <div>
-      <h3>解析数据</h3>
+      <h2>解析数据</h2>
       <div>
         您可以在此页面输入未签名的源数据，十六进制格式文本，将会解析成可读的格式。
       </div>
@@ -12,15 +12,23 @@
     <div>
       <textarea v-model="data"></textarea>
     </div>
-    <el-button type="primary">解析数据</el-button>
+    <el-button type="primary" @click="decodeTransaction">解析数据</el-button>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { block } from '@/api'
 import { ref } from 'vue'
 import Breadcrumb from '@/components/Breadcrumb.vue'
 
 const data = ref<string>('')
+
+const decodeTransaction = () => {
+  block.decodeRawTransaction(data.value).then(res => {
+    console.log(res)
+  })
+}
+
 </script>
 
 <style scoped lang="less">

src/views/Other/broadcast.vue

@@ -3,7 +3,7 @@
     <Breadcrumb :path="[{name: '广播数据'}]"/>
 
     <div>
-      <h3>广播数据</h3>
+      <h2>广播数据</h2>
       <div>
         您可以在此页面输入签过名的源数据，十六进制格式文本，并将其广播到区块链网络。
       </div>
@@ -11,15 +11,22 @@
     <div>
       <textarea v-model="data"></textarea>
     </div>
-    <el-button type="primary">广播数据</el-button>
+    <el-button type="primary" @click="decodeTransaction">广播数据</el-button>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { block } from '@/api'
 import Breadcrumb from '@/components/Breadcrumb.vue'
 import { ref } from 'vue'
 
 const data = ref<string>('')
+
+const decodeTransaction = () => {
+  block.decodeRawTransaction(data.value).then(res => {
+    console.log(res)
+  })
+}
 </script>
 
 <style scoped lang="less">

src/views/Trade/detail.vue

@@ -2,14 +2,49 @@
   <div class="container">
     <Breadcrumb :path="[{name: '全部数据', router: 'Block'}, {name: '数据详情'}]"/>
 
+    <div class="height">
+      <h2>数据详情</h2>
+      <div>数据哈希 {{  detail.tx.hash }}
+        <el-button type="primary" round size="mini">复 制</el-button>
+      </div>
+    </div>
+
+    <div>
+      <div>发送方{{ detail.tx.from }}</div>
+      <div>接收方{{ detail.tx.to }}</div>
+      <div>上链时间{{ detail.blockTime }}</div>
+      <div>资产{{ detail.amount }}</div>
+      <div>GAS费{{ detail.tx.feefmt }}</div>
+      <div>随机数{{ detail.tx.nonce }}</div>
+      <div>执行器{{ detail.tx.execer }}</div>
+      <div>函数{{ detail.actionName }}</div>
+      <div>类型{{ detail.index }}</div>
+      <div>
+        输入数据
+        <pre>
+          {{ JSON.stringify(detail.receipt.logs) }}
+        </pre>
+      </div>
+      <hr>
+      输出数据
+      <div>{{ JSON.stringify(detail.receipt.logs) }}</div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { block } from '@/api'
 import Breadcrumb from '@/components/Breadcrumb.vue'
 import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const detail = ref({})
+block.queryTransaction(route.params.hash as string).then(res => {
+  console.log(res)
+  detail.value = res.result
+})
 
-const blocks = ref([])
 </script>
 
 <style scoped lang="less">

src/views/Trade/index.vue

@@ -9,11 +9,9 @@
       <el-pagination
           background
           v-model:currentPage="currentPage"
-          :page-sizes="[10, 20, 30, 40]"
-          :page-size="20"
-          layout="total, sizes, prev, pager, next, jumper"
+          :page-size="pageSize"
+          layout="prev,pager,next,jumper"
           :total="400"
-          @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
       >
       </el-pagination>
@@ -37,6 +35,11 @@ import Breadcrumb from '@/components/Breadcrumb.vue'
 
 import { ref } from 'vue'
 
+const currentPage = ref<number>(1)
+const pageSize = ref<number>(20)
+const handleCurrentChange = (e: number) => {
+  console.log(e)
+}
 const blocks = ref([])
 </script>