From 51b56fa953fe56232b7d230e2192f7104ec54dff Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Sat, 25 Sep 2021 17:38:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=BA=E5=9D=97=E9=83=A8=E5=88=86=E7=9A=84?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |   2 +
 src/api/interfaces/block.ts    |   2 +-
 src/components/Header.vue      |   2 +-
 src/store/index.ts             |   4 +-
 src/views/Address/index.vue    |  19 ++--
 src/views/Block/detail.vue     |  95 ++++++++++++++--
 src/views/Block/index.vue      |  37 +++++--
 src/views/Home/index.vue       | 194 ++++++++++++++++++++++++++++++++-
 src/views/Other/analytical.vue |  15 ++-
 src/views/Other/broadcast.vue  |  15 ++-
 src/views/Trade/detail.vue     |  16 +--
 src/views/Trade/index.vue      |  65 +++++------
 12 files changed, 382 insertions(+), 84 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0f25bd..69e39cb 100644
--- a/src/App.vue
+++ b/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 {
diff --git a/src/api/interfaces/block.ts b/src/api/interfaces/block.ts
index cfc1d34..0d98977 100644
--- a/src/api/interfaces/block.ts
+++ b/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)
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 99356f5..2efeca6 100644
--- a/src/components/Header.vue
+++ b/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;
diff --git a/src/store/index.ts b/src/store/index.ts
index 0024dea..7cdc1f3 100644
--- a/src/store/index.ts
+++ b/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 => {
diff --git a/src/views/Address/index.vue b/src/views/Address/index.vue
index 8ead53e..59e79b2 100644
--- a/src/views/Address/index.vue
+++ b/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">
 
diff --git a/src/views/Block/detail.vue b/src/views/Block/detail.vue
index b7d07b6..13c43f2 100644
--- a/src/views/Block/detail.vue
+++ b/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>
diff --git a/src/views/Block/index.vue b/src/views/Block/index.vue
index 67d3627..ecd9fd4 100644
--- a/src/views/Block/index.vue
+++ b/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">
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index c00f8bc..b0ac781 100644
--- a/src/views/Home/index.vue
+++ b/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>
diff --git a/src/views/Other/analytical.vue b/src/views/Other/analytical.vue
index 84d04f4..909bea7 100644
--- a/src/views/Other/analytical.vue
+++ b/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>
diff --git a/src/views/Other/broadcast.vue b/src/views/Other/broadcast.vue
index 52db448..625a8e1 100644
--- a/src/views/Other/broadcast.vue
+++ b/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>
diff --git a/src/views/Trade/detail.vue b/src/views/Trade/detail.vue
index 20fb1e6..6f4d7bf 100644
--- a/src/views/Trade/detail.vue
+++ b/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>
diff --git a/src/views/Trade/index.vue b/src/views/Trade/index.vue
index 03fefc4..22f114c 100644
--- a/src/views/Trade/index.vue
+++ b/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>