冻结窗口

src/components/History.vue

@@ -55,56 +55,91 @@
       elevation="0"
     >
       <v-card-title>
-        History Data
-        <v-spacer></v-spacer>
-        <v-text-field
-            v-model="search"
-            append-icon="mdi-magnify"
-            label="Local Search"
-            single-line
-            hide-details
-        ></v-text-field>
+        <v-container id="dataTableHeader">
+          <v-row>
+            <v-col cols="4">
+              History Data
+            </v-col>
+            <v-col cols="8">
+              <v-text-field
+                  v-model="search"
+                  append-icon="mdi-magnify"
+                  label="Local Search"
+                  single-line
+                  hide-details
+              ></v-text-field>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12">
+                Block: {{ showBlock }}
+            </v-col>
+          </v-row>
+        </v-container>
       </v-card-title>
 
       <v-data-table
         multi-sort
         group-by="block"
         group-desc
+        height="888"
+        fixed-header
         :headers="headers"
         :items="tableData"
         :search="search"
         :items-per-page="200"
         :loading="loading"
+        @click:row="changeShowBlock"
       >
         <!--        :sort-by="['ts', 'block', 'nonce']"-->
         <!--        :sort-desc="[true, true, true]"-->
         <template v-slot:item.option="{ item }">
-          <v-row>
-<!--            <v-col cols="5">-->
-<!--              <v-btn icon elevation="0" color="blue" small>-->
-<!--                <v-icon small>mdi-pencil-outline</v-icon>-->
-<!--              </v-btn>-->
-<!--            </v-col>-->
-            <v-col cols="5">
-              <v-btn icon elevation="0" color="red" small @click="deleteByHash(item.hash)">
-                <v-icon small>mdi-delete-forever-outline</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
+          <div @mouseenter="changeShowBlock(item, false)">
+            <v-row>
+              <!--            <v-col cols="5">-->
+              <!--              <v-btn icon elevation="0" color="blue" small>-->
+              <!--                <v-icon small>mdi-pencil-outline</v-icon>-->
+              <!--              </v-btn>-->
+              <!--            </v-col>-->
+              <v-col cols="5">
+                <v-btn icon elevation="0" color="red" small @click="deleteByHash(item.hash)">
+                  <v-icon small>mdi-delete-forever-outline</v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
+          </div>
         </template>
         <!-- Block -->
         <template v-slot:item.block="{ item }">
-          {{ item.block }}
+          <div @mouseenter="changeShowBlock(item, false)">
+            {{ item.block }}
+          </div>
         </template>
         <!-- Hash -->
         <template v-slot:item.hash="{ item }">
-          <v-tooltip right>
+          <v-tooltip right @mouseenter="changeShowBlock(item, false)">
             <template v-slot:activator="{ on, attrs }">
-              <v-btn x-small :href="'https://etherscan.io/tx/' + item.hash" target="_blank" text v-on="on" v-bind="attrs">{{ getSimpleStr(item.hash) }}</v-btn>
+              <v-btn
+                  x-small
+                  :href="'https://etherscan.io/tx/' + item.hash"
+                  target="_blank"
+                  text
+                  v-on="on"
+                  v-bind="attrs"
+              >
+                {{ getSimpleStr(item.hash) }}
+              </v-btn>
             </template>
-            <span>{{ item.hs }}</span>
+            <span>{{ item.hash }}</span>
           </v-tooltip>
         </template>
+        <!-- Data -->
+        <template v-slot:item.data="{ item }">
+          <div @mouseenter="changeShowBlock(item, false)">
+            {{ item.data }}
+          </div>
+        </template>
         <!-- From -->
 <!--        <template v-slot:item.fm="{ item }">-->
 <!--          <v-tooltip right>-->
@@ -149,6 +184,25 @@
 <!--        </template>-->
       </v-data-table>
     </v-card>
+
+    <v-snackbar
+        v-model="blockSnackbar"
+        timeout="100000"
+        color="blue-grey"
+    >
+      block: {{ showBlock }}
+
+      <template v-slot:action="{ attrs }">
+        <v-btn
+            color="white"
+            text
+            v-bind="attrs"
+            @click="blockSnackbar = false"
+        >
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-card>
 </template>
 
@@ -234,6 +288,13 @@
       },
       jump (pairAddress) {
         window.open('https://etherscan.io/address/' + pairAddress)
+      },
+      changeShowBlock (item, openSnackbar) {
+        if (openSnackbar) this.blockSnackbar = true
+        this.showBlock = item.block
+      },
+      removeShowBlock () {
+        this.showBlock = 0
       }
     },
 
@@ -243,7 +304,9 @@
         hash: '',
         dataVague: ''
       },
+      blockSnackbar: false,
       search: '',
+      showBlock: 0,
       loading: false,
       headers: [
         { text: "Option", value: 'option', width: '100' },
@@ -269,4 +332,12 @@
     }
   }
 </script>
-cl
+
+<style scoped>
+#dataTable {
+  height: 410px;
+}
+#dataTableHeader {
+  max-width: none;
+}
+</style>