新UI测试

src/App.vue

@@ -65,7 +65,7 @@ export default {
   data: () => ({
     tab: 'pending',
     pwdMD5: '7f5029bbd4daae18f3ae4cd910f0f4f0',
-    pwd: ''
+    pwd: 'qwe410410'
   }),
   methods: {
     calcPwdMD5 () {

src/components/History.vue

@@ -11,8 +11,7 @@
 <script>
 import Top from '@/components/viewer/Top'
 import Table from '@/components/viewer/Table'
-import EthMev from "@/plugins/model/EthMev";
-import NumKit from "@/plugins/kit/NumKit";
+import EthMev from '@/plugins/model/EthMev'
 
 export default {
   name: 'History',
@@ -33,6 +32,7 @@ export default {
       sortBy: ['block', 'index'],
       sortDesc: [true, false],
       pageSize: 200,
+      pageNum: 1,
       data: [],
       headers: [
         { text: "Option", value: 'option', width: '7%' },
@@ -56,7 +56,8 @@ export default {
       this.table.loading = true
       this.table.data.length = 0
 
-      const rst = await EthMev.getEthMevData(this.query.block, this.query.hash, this.query.dataVague)
+      const rst = await EthMev.getEthMevData(this.query.block, this.query.hash, this.query.dataVague,
+          this.table.pageNum, this.table.pageSize)
 
       if (rst.state) {
         EthMev.generateTableDataByDbData(rst.data)
@@ -79,33 +80,3 @@ export default {
   }
 }
 </script>
-
-<style>
-#dataTable {
-  height: 410px;
-}
-#dataTableHeader {
-  max-width: none;
-}
-.tradeLabel {
-  width: 250px;
-}
-thead.v-data-table-header {
-  position: fixed !important;
-  bottom: 0 !important;
-  z-index: 999;
-  background-color: rgba(255, 255, 255, 255);
-  border-top: grey 1px solid;
-}
-div.tokenName {
-  text-align: left;
-  width: 100%;
-}
-div.tokenAmount {
-  text-align: right;
-  width: 100%;
-}
-span.v-chip__content {
-  width: 100%;
-}
-</style>

src/components/Pending.vue

@@ -11,8 +11,7 @@
 <script>
 import Top from '@/components/viewer/Top'
 import Table from '@/components/viewer/Table'
-import EthMev from "@/plugins/model/EthMev";
-import NumKit from "@/plugins/kit/NumKit";
+import EthMev from '@/plugins/model/EthMev'
 
 export default {
   name: 'Pending',
@@ -33,11 +32,12 @@ export default {
       sortBy: ['block', 'gasPrice', 'pending'],
       sortDesc: [false, true, false],
       pageSize: 200,
+      pageNum: 1,
       data: [],
       headers: [
         {text: "Option", value: 'option'},
         {text: 'Block', value: 'block'},
-        {text: 'Hash', value: 'hash'},
+        {text: 'Hash', value: 'hash', width: '10%'},
         {text: 'From', value: 'from'},
         {text: 'To', value: 'to'},
         {text: 'GasPrice', value: 'gasPrice'},
@@ -56,7 +56,8 @@ export default {
       this.table.loading = true
       this.table.data.length = 0
 
-      const rst = await EthMev.getEthMevPendingData(this.query.block, this.query.hash, this.query.dataVague)
+      const rst = await EthMev.getEthMevPendingData(this.query.block, this.query.hash, this.query.dataVague,
+          this.table.pageNum, this.table.pageSize)
 
       if (rst.state) {
         EthMev.generateTableDataByDbData(rst.data)
@@ -79,40 +80,3 @@ export default {
   }
 }
 </script>
-
-<style>
-#dataTable {
-  height: 410px;
-}
-
-#dataTableHeader {
-  max-width: none;
-}
-
-.tradeLabel {
-  width: 250px;
-}
-
-thead.v-data-table-header {
-  position: fixed !important;
-  bottom: 0 !important;
-  z-index: 999;
-  background-color: rgba(255, 255, 255, 255);
-  width: 96.35%;
-  border-top: grey 1px solid;
-}
-
-div.tokenName {
-  text-align: left;
-  width: 100%;
-}
-
-div.tokenAmount {
-  text-align: right;
-  width: 100%;
-}
-
-span.v-chip__content {
-  width: 100%;
-}
-</style>

src/components/viewer/Table.vue

@@ -1,115 +1,141 @@
 <template>
-  <v-card elevation="0">
-    <!-- 表格上功能区 -->
-    <v-card-title>
-      <v-container id="dataTableHeader">
-        <v-row>
-          <v-col cols="4">
-            {{ page.name }}
-          </v-col>
-          <v-col cols="8">
-            <v-text-field hide-details single-line label="Local Search" append-icon="mdi-magnify" v-model="table.search"/>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-card-title>
-
-    <!-- 表格主体 -->
-    <v-data-table calculate-widths multi-sort
-                  :group-by="table.groupBy"
-                  :headers="table.headers" :items="table.data" :search="table.search" :loading="table.loading"
-                  :items-per-page="table.pageSize"
-                  :sort-by="table.sortBy" :sort-desc="table.sortDesc">
-      <!-- 操作区 -->
-      <template v-slot:item.option="{ item }">
-        <div>
+  <v-container>
+    <v-card elevation="0">
+      <!-- 表格上功能区 -->
+      <v-card-title>
+        <v-container id="dataTableHeader">
           <v-row>
-            <v-col cols="5">
-              <v-btn icon elevation="0" color="red" large @click="deleteByHash(item.hash)">
-                <v-icon large>mdi-delete-forever-outline</v-icon>
-              </v-btn>
+            <v-col cols="4">
+              {{ page.name }}
+            </v-col>
+            <v-col cols="8">
+              <v-text-field hide-details single-line label="Local Search" append-icon="mdi-magnify" v-model="table.search"/>
             </v-col>
           </v-row>
-        </div>
-      </template>
-      <!-- Block -->
-      <template v-slot:item.block="{ item }">
-        <div>
-          {{ item.block }}
-        </div>
-      </template>
-      <!-- Hash -->
-      <template v-slot:item.hash="{ item }">
-        <v-chip label target="_blank" :href="'https://www.oklink.com/en/ethw/tx/' + item.hash">
-          {{ hashKit.head5(item.hash) + '..' }}
-        </v-chip>
-      </template>
-      <!-- From -->
-      <template v-slot:item.from="{ item }">
-        <v-chip label color="green lighten-3" target="_blank" @click="httpKit.jumpToEthw(item.from)">
-          {{ hashKit.headAndEnd2(item.from) }}
-        </v-chip>
-      </template>
-      <!-- to -->
-      <template v-slot:item.to="{ item }">
-        <v-chip v-if="!item.toName" label color="indigo lighten-4"  @click="httpKit.jumpToEthw(item.to)">
-          {{ hashKit.headAndEnd2(item.to) }}
-        </v-chip>
-        <v-chip v-else label color="indigo lighten-4" @click="httpKit.jumpToEthw(item.to)">
-          {{ item.toName }}
-        </v-chip>
-      </template>
-      <template v-slot:item.type="{ item }">
-        <div v-if="item.type !== undefined && item.type !== ''">
-          {{ item.type }}
-        </div>
-        <div v-else>
-          [type]
-        </div>
-      </template>
-      <template v-slot:item.index="{ item }">
-        <div v-if="item.index !== undefined">
-          {{ item.index }}
-        </div>
-        <div v-else>
-          [index]
-        </div>
-      </template>
-      <template v-slot:item.state="{ item }">
-        <div v-if="item.state !== undefined">
-          {{ item.state }}
-        </div>
-        <div v-else>
-          [state]
-        </div>
-      </template>
-      <template v-slot:item.mev="{ item }">
-        <div v-if="item.mev !== undefined">
-          {{ item.mev }}
-        </div>
-        <div v-else>
-          [mev]
-        </div>
-      </template>
-      <template v-slot:item.pending="{ item }">
-        <div v-if="item.pending !== undefined">
-          {{ item.pending }}
-        </div>
-        <div v-else>
-          [pending]
-        </div>
-      </template>
-      <!--tradeInfo-->
-      <template v-slot:item.tradeInfo="{ item }">
-        <TradeInfo :item="item"></TradeInfo>
-      </template>
-    </v-data-table>
-  </v-card>
+        </v-container>
+      </v-card-title>
+
+      <!-- 表格主体 -->
+      <v-data-table calculate-widths multi-sort
+                    :group-by="table.groupBy"
+                    :headers="table.headers" :items="table.data" :search="table.search" :loading="table.loading"
+                    :items-per-page="table.pageSize" :page="table.pageNum"
+                    :sort-by="table.sortBy" :sort-desc="table.sortDesc">
+        <!-- 操作区 -->
+        <template v-slot:item.option="{ item }">
+          <div>
+            <v-row>
+              <v-col cols="5">
+                <v-btn icon elevation="0" color="red" large @click="deleteByHash(item.hash)">
+                  <v-icon large>mdi-delete-forever-outline</v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
+          </div>
+        </template>
+        <!-- Block -->
+        <template v-slot:item.block="{ item }">
+          <div>
+            {{ item.block }}
+          </div>
+        </template>
+        <!-- Hash -->
+        <template v-slot:item.hash="{ item }">
+          <v-btn v-if="item.hash.indexOf('0x') !== -1" outlined text target="_blank" :href="'https://www.oklink.com/en/ethw/tx/' + item.hash">
+            {{ hashKit.head5(item.hash) + '..' }}
+          </v-btn>
+          <v-chip v-else label target="_blank">
+            {{ hashKit.head5(item.hash) + '..' }}
+          </v-chip>
+        </template>
+        <!-- From -->
+        <template v-slot:item.from="{ item }">
+          <v-chip label color="green lighten-3" target="_blank" @click="httpKit.jumpToEthw(item.from)">
+            {{ hashKit.headAndEnd2(item.from) }}
+          </v-chip>
+        </template>
+        <!-- to -->
+        <template v-slot:item.to="{ item }">
+          <v-chip v-if="!item.toName" label color="indigo lighten-4"  @click="httpKit.jumpToEthw(item.to)">
+            {{ hashKit.headAndEnd2(item.to) }}
+          </v-chip>
+          <v-chip v-else label color="indigo lighten-4" @click="httpKit.jumpToEthw(item.to)">
+            {{ item.toName }}
+          </v-chip>
+        </template>
+        <template v-slot:item.type="{ item }">
+          <div v-if="item.type !== undefined && item.type !== ''">
+            {{ item.type }}
+          </div>
+          <div v-else>
+            [type]
+          </div>
+        </template>
+        <template v-slot:item.index="{ item }">
+          <div v-if="item.index !== undefined">
+            {{ item.index }}
+          </div>
+          <div v-else>
+            [index]
+          </div>
+        </template>
+        <template v-slot:item.state="{ item }">
+          <div v-if="item.state !== undefined">
+            {{ item.state }}
+          </div>
+          <div v-else>
+            [state]
+          </div>
+        </template>
+        <template v-slot:item.mev="{ item }">
+          <div v-if="item.mev !== undefined">
+            {{ item.mev }}
+          </div>
+          <div v-else>
+            [mev]
+          </div>
+        </template>
+        <template v-slot:item.pending="{ item }">
+          <div v-if="item.pending !== undefined">
+            {{ item.pending }}
+          </div>
+          <div v-else>
+            [pending]
+          </div>
+        </template>
+        <!--tradeInfo-->
+        <template v-slot:item.tradeInfo="{ item }">
+          <div class="tradeInfoBtn" @click="showTradeInfo(item)">
+            <v-chip v-for="tokenAddress in item.tokenAddressList"
+                    :color="item.tokenMap[tokenAddress] ? hashKit.generateColorByHash(tokenAddress) : undefined" class="tokenChip">
+              {{ item.tokenMap[tokenAddress] ? item.tokenMap[tokenAddress] : hashKit.headAndEnd2(tokenAddress) }}
+            </v-chip>
+          </div>
+        </template>
+      </v-data-table>
+    </v-card>
+
+    <v-dialog v-model="dialog.visible" max-width="800">
+      <v-card>
+        <v-card-title>交易详情</v-card-title>
+        <v-card-text><TradeInfo :item="dialog.data"></TradeInfo></v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+              color="primary"
+              text
+              @click="dialog.visible = false"
+          >
+            我知道了
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
 </template>
 
 <script>
-import TradeInfo from '@/components/viewer/table/TradeInfo'
-import EthMev from '@/plugins/model/EthMev'
+import TradeInfo from '@/components/viewer/table/TradeInfoDetails'
 import HashKit from '@/plugins/kit/HashKit'
 import HttpKit from '@/plugins/kit/HttpKit'
 
@@ -120,6 +146,10 @@ export default {
   data: () => ({
     hashKit: HashKit,
     httpKit: HttpKit,
+    dialog: {
+      data: [],
+      visible: false
+    }
   }),
   methods: {
     async deleteByHash(hash_code) {
@@ -134,11 +164,32 @@ export default {
         //   this.$msgkit.error(rst.data.msg)
         // }
       }
+    },
+    showTradeInfo(item) {
+      this.dialog.data = item
+      this.dialog.visible = true
     }
   }
 }
 </script>
 
 <style scoped>
-
+#dataTable {
+  height: 410px;
+}
+#dataTableHeader {
+  max-width: none;
+}
+.tokenChip {
+  margin-top: 5px;
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
+.tradeInfoBtn {
+  padding: 15px !important;
+  border: grey 2px solid;
+}
+.tradeInfoBtn:hover {
+  background: beige;
+}
 </style>

src/components/viewer/table/TradeInfo.vue → src/components/viewer/table/TradeInfoDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-container>
-      <div v-for="trade in item.tradeInfo">
+      <div v-for="trade in item.tradeInfoList">
         <v-row>
           <!--token symbol-->
           <v-chip v-if="!trade.tokenSymbol"
@@ -21,12 +21,12 @@
           <div>
             <v-chip v-if="trade.from === item.from"
                     label class="ma-2" color="green lighten-3" @click="httpKit.jumpToEthw(trade.from)">
-              {{ hashKit.headAndEnd2(trade.from) }}
+              {{ '[F] ' + hashKit.headAndEnd2(trade.from) }}
             </v-chip>
             <v-chip v-else-if="trade.from === item.to"
                     label class="ma-2" color="indigo lighten-4" @click="httpKit.jumpToEthw(trade.from)">
-              <div v-if="!trade.fromName">{{ hashKit.headAndEnd2(trade.from) }}</div>
-              <div v-else>{{ trade.fromName }}</div>
+              <div v-if="!trade.fromName">{{ '[T] ' + hashKit.headAndEnd2(trade.from) }}</div>
+              <div v-else>{{ '[T] ' + trade.fromName }}</div>
             </v-chip>
             <v-chip v-else
                     label class="ma-2" :color="hashKit.generateColorByHash(trade.from)"
@@ -40,12 +40,12 @@
           <div>
             <v-chip v-if="trade.to === item.from"
                     label class="ma-2" color="green lighten-3" @click="httpKit.jumpToEthw(trade.to)">
-              {{ hashKit.headAndEnd2(trade.to) }}
+              {{ '[F] ' + hashKit.headAndEnd2(trade.to) }}
             </v-chip>
             <v-chip v-else-if="trade.to === item.to"
                     label class="ma-2" color="indigo lighten-4" @click="httpKit.jumpToEthw(trade.to)">
-              <div v-if="!trade.toName">{{ hashKit.headAndEnd2(trade.to) }}</div>
-              <div v-else>{{ trade.toName }}</div>
+              <div v-if="!trade.toName">{{ '[T] ' + hashKit.headAndEnd2(trade.to) }}</div>
+              <div v-else>{{'[T] ' +  trade.toName }}</div>
             </v-chip>
             <v-chip v-else
                     label class="ma-2" :color="hashKit.generateColorByHash(trade.to)" @click="httpKit.jumpToEthw(trade.to)">
@@ -78,6 +78,19 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style>
+.tradeLabel {
+  width: 250px;
+}
+div.tokenName {
+  text-align: left;
+  width: 100%;
+}
+div.tokenAmount {
+  text-align: right;
+  width: 100%;
+}
+span.v-chip__content {
+  width: 100%;
+}
 </style>

src/plugins/kit/HashKit.js

@@ -14,7 +14,7 @@ export default class HashKit {
     if (str && str.indexOf('x') !== -1 && str.length > 15) {
       return str.substr(0, 5)
     } else {
-      return str
+      return str.substr(0, 20)
     }
   }
 
@@ -25,10 +25,13 @@ export default class HashKit {
     if (hashSub !== 'eth') {
       let bit1 = parseInt(hashSub[0], 16)
       bit1 = bit1 < 8 ? bit1 + 8 : bit1
+      // bit1 = bit1 > 8 ? bit1 - 8 : bit1
       let bit2 = parseInt(hashSub[1], 16)
       bit2 = bit2 < 8 ? bit2 + 8 : bit2
+      // bit2 = bit2 > 8 ? bit2 - 8 : bit2
       let bit3 = parseInt(hashSub[2], 16)
       bit3 = bit3 < 8 ? bit3 + 8 : bit3
+      // bit3 = bit3 > 8 ? bit3 - 8 : bit3
 
       color = '#' + bit1.toString(16) + bit2.toString(16) + bit3.toString(16)
     }

src/plugins/model/EthMev.js

@@ -53,7 +53,6 @@ export default class EthMev {
       try {
         let dataObj = history.dataObj
 
-        history.tradeInfo = dataObj.tradeInfo
         history.from = dataObj.fromAdd
         history.to = dataObj.toAdd
         history.gasPrice = NumKit._N(parseInt(dataObj.gasPrice) / (1E9), 2)
@@ -61,6 +60,14 @@ export default class EthMev {
         history.type = dataObj.type
         history.state = dataObj.status
         history.pending = dataObj.pending
+        history.tradeInfoList = dataObj.tradeInfo
+
+        // token处理
+        history.tokenMap = {}
+        history.tradeInfoList.map(function (tradeInfo) {
+          if (!history.tokenMap[tradeInfo.token]) history.tokenMap[tradeInfo.token] = tradeInfo.tokenSymbol
+        })
+        history.tokenAddressList = Object.keys(history.tokenMap)
       } catch (e) {
         history.tradeInfo = []
       }