区块部分的基础数据

src/App.vue

@@ -30,10 +30,12 @@ watch(route, (to: RouteLocationNormalizedLoaded) => {
 * {
   padding: 0;
   margin: 0;
+  box-sizing: border-box;
 }
 
 body {
   font-size: 14px;
+  background: #FAFAFA;
 }
 
 #layout {

src/api/interfaces/block.ts

@@ -1,3 +1,3 @@
 import Chain33Rpc from '@33cn/chain33-rpc-api'
 
-export default new Chain33Rpc('http://explorer.cnskl.com/api', null)
+export default new Chain33Rpc('http://47.100.214.15:8080/api', null)

src/components/Header.vue

@@ -27,7 +27,7 @@ const router = useRouter()
 
   .wrap {
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
 
     .nav {
       width: 600px;

src/store/index.ts

@@ -30,7 +30,7 @@ export default createStore<State>({
         tokenType: '',
         openId: '',
         loginAt: 0,
-        maxHeight:110,
+        maxHeight: 0,
         user: {} as BaseInfo
     },
     getters: {
@@ -71,7 +71,7 @@ export default createStore<State>({
         },
         setMaxHeight: (state: State, height: number): void => {
             state.maxHeight = height
-        },
+        }
     },
     actions: {
         setUserInfo: ({ commit }, info: BaseInfo): void => {

src/views/Address/index.vue

@@ -1,17 +1,16 @@
 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>地址信息</el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
+  <div class="container">
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>地址信息</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
 
+  </div>
 </template>
 
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-</script>
+<script lang="ts" setup></script>
 
 <style scoped lang="less">
 

src/views/Block/detail.vue

@@ -1,21 +1,98 @@
 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item :to="{ name: 'Block' }">全部区块</el-breadcrumb-item>
-      <el-breadcrumb-item>区块详情</el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
+  <div class="container">
 
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ name: 'Block' }">全部区块</el-breadcrumb-item>
+        <el-breadcrumb-item>区块详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="info">
+      <div>{{ info.hash }}</div>
+      <div>默克尔根 {{ info.txHash }}</div>
+      <div>{{ info.txCount }}</div>
+      <div>{{ info.blockTime }}</div>
+      <div>{{ info.stateHash }}</div>
+      <div>{{ info.height }}</div>
+      <div>{{ info.parentHash }}</div>
+      <div>下个区块</div>
+    </div>
+
+    <div class="records">
+      <h2>交易记录</h2>
+
+      <el-table :data="records" stripe class="table">
+        <template #empty>
+          <el-empty description="暂无数据"></el-empty>
+        </template>
+
+        <el-table-column prop="txHash" label="交易哈希"/>
+        <el-table-column prop="fromAddr" label="发送放"/>
+        <el-table-column prop="tx.to" label="区块哈希"/>
+        <el-table-column prop="amount" label="交易量" align="center"/>
+        <el-table-column prop="tx.feefmt" label="手续费" align="center"/>
+        <el-table-column prop="blockTime" label="上链时间" align="center"/>
+        <el-table-column prop="assets" label="上链时间" align="center"/>
+      </el-table>
+    </div>
+
+    <el-pagination
+        v-model:currentPage="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+  </div>
 </template>
 
 <script lang="ts" setup>
-
+import { block } from '@/api'
 import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
-const blocks = ref([])
+const router = useRouter()
+const route = useRoute()
+
+const hash = route.params.hash
+
+const info = ref({})
+const records = ref([])
+
+block.getBlockOverview(hash).then(res => {
+  console.log(res)
+
+  info.value = res.result.head
+
+  block.getTxByHashes(res.result.txHashes).then(txs => {
+    records.value = txs.result.txs
+  })
+})
 </script>
 
 <style scoped lang="less">
+.info {
+  background: #FFFFFF;
+  border: 1px solid rgba(235, 239, 241, 1);
+}
 
+.records {
+  margin-top: 30px;
+  border: 1px solid #ebeff1;
+
+  h2 {
+    height: 80px;
+    line-height: 80px;
+    padding-left: 25px;
+    font-size: 16px;
+    font-weight: 500;
+    background: #FFFFFF;
+    border-bottom: 1px solid #ececec;
+  }
+}
 </style>

src/views/Block/index.vue

@@ -13,35 +13,52 @@
       </div>
       <el-pagination
           background
-          v-model:currentPage="currentPage"
           :page-sizes="[10, 20, 30, 40]"
           :page-size="20"
           layout="total, sizes, prev, pager, next, jumper"
           :total="400"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
       >
       </el-pagination>
     </div>
 
-    <el-table :data="blocks" stripe class="table">
+    <el-table :data="blockList" stripe class="table">
       <template #empty>
         <el-empty description="暂无数据"></el-empty>
       </template>
 
-      <el-table-column prop="date" label="高度" width="100" align="center"/>
-      <el-table-column prop="date" label="区块哈希"/>
-      <el-table-column prop="date" label="数据量" width="180" align="center"/>
-      <el-table-column prop="date" label="上链时间" width="180" align="center"/>
+      <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>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="区块哈希">
+        <template #default="scope">
+          <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{ scope.row.hash }}</router-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="txCount" label="数据量" width="180" align="center"/>
+      <el-table-column prop="blockTime" label="上链时间" width="180" align="center"/>
     </el-table>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { block } from '@/api'
+import { useStore } from '@/store'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-import { ref } from 'vue'
+const store = useStore()
+const router = useRouter()
+const maxHeight = computed(() => store.getters.maxHeight)
 
-const blocks = ref([])
+const start = maxHeight.value - 19
+const blockList = ref([])
+
+block.getHeaders(start, maxHeight.value, false).then(res => {
+  blockList.value = res.result.items.reverse()
+})
 </script>
 
 <style scoped lang="less">

src/views/Home/index.vue

@@ -1,11 +1,203 @@
 <template>
   <Banner/>
+  <div class="home">
+    <div class="blocks">
+      <div class="head">
+        <h1>最新区块</h1>
+        <router-link :to="{name: 'Block'}">查看全部</router-link>
+      </div>
+
+      <div class="items">
+        <div class="item" v-for="(item, index) in blockList" :key="index">
+          <div class="height" @click="router.push({name: 'BlockDetail', params: {hash: item.hash}})">
+            {{ item.height }}
+          </div>
+          <div class="info">
+            <div class="hash" @click="router.push({name: 'BlockDetail', params: {hash: item.hash}})">
+              {{ item.hash }}
+            </div>
+            <div class="data">
+              <span class="num">{{ item.txCount }} 笔交易</span>
+              <span class="time">出块时间：{{ item.blockTime }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="trades">
+      <div class="head">
+        <h1>最新交易</h1>
+        <router-link :to="{name: 'Trade'}">查看全部</router-link>
+      </div>
+
+      <div class="items">
+        <div class="item" v-for="(item, index) in tradeList" :key="index">
+          {{ item.from }}
+          {{ item.to }}
+          {{ item.hash }}
+          {{ item.feefmt }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import Banner from '@/components/Banner'</script>
+import { block } from '@/api'
+import Banner from '@/components/Banner'
+import { useStore } from '@/store'
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const store = useStore()
+const router = useRouter()
+const maxHeight = computed(() => store.getters.maxHeight)
+
+onMounted(() => {
+  getLastHeader()
+  getBlockList()
+})
+
+setInterval(() => {
+  getLastHeader()
+}, 5000)
+
+const getLastHeader = () => {
+  block.getLastHeader().then(res => {
+    if (maxHeight.value < res.result.height) {
+      store.dispatch('setMaxHeight', res.result.height)
+      getBlockList()
+    } else {
+      console.log(maxHeight.value, res.result.height)
+    }
+  })
+}
+
+const blockList = ref([])
+const tradeList = ref([])
+
+const getBlockList = () => {
+  const start = maxHeight.value - 5
+
+  block.getHeaders(start, maxHeight.value, false).then(res => {
+    blockList.value = res.result.items.reverse()
+  })
+
+  // block.getBlocks(start, maxHeight.value, false).then(res => {
+  //   res.result.items.reverse().forEach((item) => {
+  //
+  //     blockList.value.push({
+  //       height: item.block.height,
+  //       blockTime: item.block.blockTime,
+  //       txCount: item.block.txs.length,
+  //       // hash: block.getBlockHash(item.block.height)
+  //     })
+  //
+  //     // block.getBlockHash(item.block.height).then(hash => {
+  //     //   blockList.value.push({
+  //     //     height: item.block.height,
+  //     //     blockTime: item.block.blockTime,
+  //     //     txCount: item.block.txs.length,
+  //     //     hash: hash.result.hash
+  //     //   })
+  //     // })
+  //     tradeList.value.push(...item.block.txs)
+  //     console.log(tradeList.value)
+  //   })
+  // })
+}
+</script>
 
 <style scoped lang="less">
 .home {
+  display: flex;
+  width: 1200px;
+  margin: 16px auto;
+  justify-content: space-between;
+
+  .trades,
+  .blocks {
+    width: 592px;
+
+    .head {
+      display: flex;
+      justify-content: space-between;
+      padding: 16px;
+
+      h1 {
+        font-size: 16px;
+        font-weight: 600;
+        color: #516379;
+      }
+
+      a {
+        text-decoration: none;
+        color: #f6812d;
+        font-size: 12px;
+      }
+    }
+
+    .items {
+      background: #FFFFFF;
+      box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, .5);
+
+      .item {
+        height: 90px;
+        padding: 16px;
+        display: flex;
+      }
+    }
+  }
+
+  .blocks {
+
+    .height {
+      height: 50px;
+      min-width: 80px;
+      line-height: 51px;
+      text-align: center;
+      color: #fff;
+      background: #6368de;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: .3s;
+    }
+
+    .info {
+      width: 464px;
+      margin-left: 16px;
+      height: 50px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .hash {
+        color: #6368de;
+        cursor: pointer;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .data {
+        display: flex;
+        justify-content: space-between;
+
+        .num {
+          color: #6368de;
+        }
+
+        .time {
+          color: #9ea2a9;
+        }
+      }
+    }
+  }
+
+  .trades {
+
+  }
 }
+
 </style>

src/views/Other/analytical.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>解析数据</el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
+  <div class="container">
 
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>解析数据</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+  </div>
 </template>
 
 <script lang="ts" setup>

src/views/Other/broadcast.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>广播数据</el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
+  <div class="container">
 
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>广播数据</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+  </div>
 </template>
 
 <script lang="ts" setup>

src/views/Trade/detail.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item :to="{ name: 'Trade' }">全部交易</el-breadcrumb-item>
-      <el-breadcrumb-item>交易详情</el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
+  <div class="container">
 
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ name: 'Trade' }">全部交易</el-breadcrumb-item>
+        <el-breadcrumb-item>交易详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>

src/views/Trade/index.vue

@@ -1,38 +1,41 @@
 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>全部区块</el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
+  <div class="container">
 
-  <div class="page-header">
-    <div class="title">
-      全部数据（65条数据）
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>全部区块</el-breadcrumb-item>
+      </el-breadcrumb>
     </div>
-    <el-pagination
-        background
-        v-model:currentPage="currentPage"
-        :page-sizes="[10, 20, 30, 40]"
-        :page-size="20"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-    >
-    </el-pagination>
+
+    <div class="page-header">
+      <div class="title">
+        全部数据（65条数据）
+      </div>
+      <el-pagination
+          background
+          v-model:currentPage="currentPage"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="20"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+      >
+      </el-pagination>
+    </div>
+
+    <el-table :data="blocks" stripe class="table">
+      <template #empty>
+        <el-empty description="暂无数据"></el-empty>
+      </template>
+
+      <el-table-column prop="date" label="高度" width="100" align="center"/>
+      <el-table-column prop="date" label="区块哈希"/>
+      <el-table-column prop="date" label="数据量" width="180" align="center"/>
+      <el-table-column prop="date" label="上链时间" width="180" align="center"/>
+    </el-table>
   </div>
-
-  <el-table :data="blocks" stripe class="table">
-    <template #empty>
-      <el-empty description="暂无数据"></el-empty>
-    </template>
-
-    <el-table-column prop="date" label="高度" width="100" align="center"/>
-    <el-table-column prop="date" label="区块哈希"/>
-    <el-table-column prop="date" label="数据量" width="180" align="center"/>
-    <el-table-column prop="date" label="上链时间" width="180" align="center"/>
-  </el-table>
 </template>
 
 <script lang="ts" setup>