优化界面，冻结窗口，优化数据结构

src/components/History.vue

@@ -83,7 +83,7 @@
         multi-sort
         group-by="block"
         group-desc
-        fixed-header
+        calculate-widths
         :headers="headers"
         :items="tableData"
         :search="search"
@@ -137,14 +137,12 @@
         </template>
         <!-- to -->
         <template v-slot:item.to="{ item }">
-          <v-chip
-              label
+          <div
               @click="jump(item.to)"
-              target="_blank"
-              v-if="!item.toObj"
+              v-if="!item.toName"
           >
-              {{ getSimpleStr3(item.to) }}
-          </v-chip>
+            <a href="#">{{ getSimpleStr3(item.to) }}</a>
+          </div>
           <v-chip
               label
               color="primary"
@@ -152,10 +150,50 @@
               target="_blank"
               v-else
           >
-            {{ JSON.parse(item.toObj.data).name }}
+            {{ item.toName }}
           </v-chip>
         </template>
-        <!-- tradeInfo -->
+        <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 @mouseenter="changeShowBlock(item, false)">
             <v-container>
@@ -164,8 +202,12 @@
                   <v-chip class="ma-2 tradeLabel" label>
                     {{ trade.amount }}
                   </v-chip>
-                  <v-chip color="primary" class="ma-2" label @click="jump(trade.token, 'token')">
-                    {{ getSimpleStr2(trade.token) }}
+                  <v-chip  class="ma-2" label @click="jump(trade.token, 'token')" v-if="!trade.tokenName && trade.token !== '0xeth'">
+                    {{ getSimpleStr3(trade.token) }}
+                  </v-chip>
+                  <v-chip color="primary" class="ma-2" label @click="jump(trade.token, 'token')" v-else>
+                    <div v-if="trade.token === '0xeth'">Ethereum</div>
+                    <div v-else>{{ trade.tokenName }}</div>
                   </v-chip>
                   <v-chip dark color="blue-grey" class="ma-2" label @click="jump(trade.from)">{{ getSimpleStr2(trade.from) }}</v-chip>
                   <v-icon>mdi-arrow-expand-right</v-icon>
@@ -281,23 +323,16 @@
 
         this.tableData.map(function (one) {
           try {
-            let jsonData = JSON.parse(one.data)
+            let dataObj = one.dataObj
 
-            one.tradeInfo = jsonData.tradeInfo
-            one.from = jsonData.fromAdd
-            one.to = jsonData.toAdd
-            one.gasPrice = MyKit._N(parseInt(jsonData.gasPrice) / (10 ** 9), 2)
-            one.index = jsonData.index
-            one.type = jsonData.type
-            one.state = jsonData.status
-            one.pending = jsonData.pending
-            one.jsonData = jsonData
-
-            try {
-              one.toObj.dataObj = JSON.parse(one.toObj.data)
-            } catch (e) {
-              one.toObj = undefined
-            }
+            one.tradeInfo = dataObj.tradeInfo
+            one.from = dataObj.fromAdd
+            one.to = dataObj.toAdd
+            one.gasPrice = MyKit._N(parseInt(dataObj.gasPrice) / (10 ** 9), 2)
+            one.index = dataObj.index
+            one.type = dataObj.type
+            one.state = dataObj.status
+            one.pending = dataObj.pending
           } catch (e) {
             one.tradeInfo = []
           }
@@ -357,17 +392,17 @@
       showBlock: 0,
       loading: false,
       headers: [
-        { text: "Option", value: 'option'},
-        { text: 'Block', value: 'block'},
-        { text: 'Hash', value: 'hash' },
-        { text: 'From', value: 'from' },
-        { text: 'To', value: 'to' },
-        { text: 'GasPrice', value: 'gasPrice' },
-        { text: 'Index', value: 'index' },
-        { text: 'Type', value: 'type' },
-        { text: 'State', value: 'state' },
-        { text: 'Mev', value: 'mev' },
-        { text: 'Pending', value: 'pending' },
+        { text: "Option", value: 'option', width: '7%' },
+        { text: 'Block', value: 'block' },
+        { text: 'Hash', value: 'hash', width: '7%' },
+        { text: 'From', value: 'from', width: '7%'  },
+        { text: 'To', value: 'to', width: '7%' },
+        { text: 'GasPrice', value: 'gasPrice', width: '6%' },
+        { text: 'Type', value: 'type', width: '3%' },
+        { text: 'Index', value: 'index', width: '3%' },
+        { text: 'State', value: 'state', width: '3%' },
+        { text: 'Mev', value: 'mev', width: '3%' },
+        { text: 'Pending', value: 'pending', width: '7%' },
         { text: 'TradeInfo', value: 'tradeInfo'}
       ],
       history: {"data":[{"t":"0x8a2a17e7adb6cbf6635380a35c04c01db473ed5ca919706f1c492d3aa1d9f1a9","fm":"0x6ff6f16a2459114fad74eed1604b402b97b02717","hs":"0x8a2a17e7adb6cbf6635380a35c04c01db473ed5ca919706f1c492d3aa1d9f1a9","state":"ok","ts":1602503469,"o":"{'type': 'NO TOKEN', 'intoken': 'WETH', 'outtoken': false, 'inamount': 0.314674952033383, 'outamount': 48953401866254456333, 'symbol': false, 'gas': 56.100000233, 'profit': 0, 'balance': 0, 'stocks': 0, 'decimals': 18, 'symbolAddress': '0x054f76beed60ab6dbeb23502178c52d6c5debe40', 'pairAddress': false, 'from': '0x6ff6f16a2459114fad74eed1604b402b97b02717', 'to': '0x8a2a17e7adb6cbf6635380a35c04c01db473ed5ca919706f1c492d3aa1d9f1a9', 'hs': '0x8a2a17e7adb6cbf6635380a35c04c01db473ed5ca919706f1c492d3aa1d9f1a9'}"}],"count":1,"state":"ok"},
@@ -380,7 +415,7 @@
   }
 </script>
 
-<style scoped>
+<style>
 #dataTable {
   height: 410px;
 }
@@ -390,4 +425,12 @@
 .tradeLabel {
   width: 180px;
 }
+thead.v-data-table-header {
+  position: fixed !important;
+  bottom: 0 !important;
+  z-index: 999;
+  background-color: rgba(255, 255, 255, 255);
+  width: 95%;
+  border-top: grey 1px solid;
+}
 </style>