From f35872c1c4f44aeb85e2ecfdbce349e287ff38d3 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Mon, 27 Sep 2021 14:05:07 +0800
Subject: [PATCH] update

---
 src/App.vue                    | 14 ++++++++++++++
 src/views/Home/index.vue       | 14 +++++++++-----
 src/views/Other/analytical.vue | 29 +++++++++++++++++++++++++----
 src/views/Other/broadcast.vue  | 14 ++++++++++++--
 src/views/Trade/detail.vue     | 10 ++++++----
 5 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9baabdb..d2e3a1f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,4 +54,18 @@ a {
   text-decoration: none;
   color: #2055ca;
 }
+
+.inputTxt {
+  height: 250px;
+  vertical-align: middle;
+  overflow-y: auto;
+  width: 100%;
+  line-height: 14px;
+  word-break: break-all;
+  padding: 0px 11px;
+  background: #FFFFFF;
+  border-radius: 2px;
+  border: 2px solid rgba(235, 239, 241, 1);
+  font-size: 14px;
+}
 </style>
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index d05460a..79a2470 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -14,9 +14,8 @@
           </div>
           <div class="info">
             <div class="hash">
-              <router-link :to="{name: 'BlockDetail', params: {hash: item.hash}}">{{
-                  filterHash(item.hash)
-                }}
+              <router-link :to="{name: 'BlockDetail', params: {hash: item.hash}}">
+                {{ filterHash(item.hash) }}
               </router-link>
             </div>
             <div class="data">
@@ -84,7 +83,13 @@ onBeforeUnmount(() => {
   clearInterval(Number(interval.value))
 })
 
-const blockList = ref([])
+type HomeBlock = {
+  hash: string,
+  height: number,
+  txCount: number,
+  blockTime: number
+}
+const blockList = ref<HomeBlock[]>([])
 const tradeList = ref([])
 
 const getBlockList = () => {
@@ -93,7 +98,6 @@ const getBlockList = () => {
   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) => {
   //
diff --git a/src/views/Other/analytical.vue b/src/views/Other/analytical.vue
index 5a2187f..a5224a5 100644
--- a/src/views/Other/analytical.vue
+++ b/src/views/Other/analytical.vue
@@ -3,7 +3,7 @@
 
     <Breadcrumb :path="[{name: '解析数据'}]"/>
 
-    <div>
+    <div class="info">
       <h2>解析数据</h2>
       <div>
         您可以在此页面输入未签名的源数据，十六进制格式文本，将会解析成可读的格式。
@@ -13,29 +13,48 @@
       <textarea v-model="data"></textarea>
     </div>
     <el-button type="primary" @click="decodeTransaction">解析数据</el-button>
+    <div>
+    <pre contenteditable="true" v-if="result" class="inputTxt">
+<code>{{ result }}</code>
+    </pre>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { block } from '@/api'
-import { ref } from 'vue'
 import { Breadcrumb } from '@/components'
+import { ref } from 'vue'
 
-const data = ref<string>('')
+const data = ref<string>('0x0a2d10808084fea6dee1112222314b7572754d7066744c503851544a5156356e704c3233634e46575445616e757474122d1080b0d78a98dee1112222314b7572754d7066744c503851544a5156356e704c3233634e46575445616e757474')
+const result = ref('')
 
 const decodeTransaction = () => {
   block.decodeRawTransaction(data.value).then(res => {
     console.log(res)
+    result.value = res.result
   })
 }
 
 </script>
 
 <style scoped lang="less">
+.info {
+  h2 {
+    font-size: 18px;
+  }
+
+  div {
+    line-height: 32px;
+    font-size: 14px;
+    color: #838b9e;
+  }
+}
+
 textarea {
   width: 100%;
   height: 200px;
-  padding: 20px;
+  padding: 8px;
   resize: none;
   background: #fff;
   border-radius: 5px;
@@ -46,4 +65,6 @@ textarea {
     outline: none;
   }
 }
+
+
 </style>
diff --git a/src/views/Other/broadcast.vue b/src/views/Other/broadcast.vue
index acd2379..328a077 100644
--- a/src/views/Other/broadcast.vue
+++ b/src/views/Other/broadcast.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <Breadcrumb :path="[{name: '广播数据'}]"/>
 
-    <div>
+    <div class="info">
       <h2>广播数据</h2>
       <div>
         您可以在此页面输入签过名的源数据，十六进制格式文本，并将其广播到区块链网络。
@@ -21,7 +21,6 @@ import { Breadcrumb } from '@/components'
 import { ref } from 'vue'
 
 const data = ref<string>('')
-
 const decodeTransaction = () => {
   block.decodeRawTransaction(data.value).then(res => {
     console.log(res)
@@ -30,6 +29,17 @@ const decodeTransaction = () => {
 </script>
 
 <style scoped lang="less">
+.info {
+  h2 {
+    font-size: 18px;
+  }
+
+  div {
+    line-height: 32px;
+    font-size: 14px;
+    color: #838b9e;
+  }
+}
 textarea {
   width: 100%;
   height: 200px;
diff --git a/src/views/Trade/detail.vue b/src/views/Trade/detail.vue
index d3aa56c..338ed4c 100644
--- a/src/views/Trade/detail.vue
+++ b/src/views/Trade/detail.vue
@@ -4,7 +4,7 @@
 
     <div class="height">
       <h2>数据详情</h2>
-      <div>数据哈希 {{  detail.tx.hash }}
+      <div>数据哈希 {{ detail.tx.hash }}
         <el-button type="primary" round size="mini">复 制</el-button>
       </div>
     </div>
@@ -21,13 +21,15 @@
       <div>类型{{ detail.index }}</div>
       <div>
         输入数据
-        <pre>
-          {{ JSON.stringify(detail.receipt.logs) }}
+        <pre contenteditable="true" >
+<code>{{ detail.receipt.logs }}</code>
         </pre>
       </div>
       <hr>
       输出数据
-      <div>{{ JSON.stringify(detail.receipt.logs) }}</div>
+      <pre contenteditable="true" class="inputTxt">
+<code>{{ detail.receipt.logs }}</code>
+      </pre>
     </div>
   </div>
 </template>