|
|
@@ -5,45 +5,22 @@
|
|
|
<v-container>
|
|
|
<v-row>
|
|
|
<!-- block过滤 -->
|
|
|
- <v-col
|
|
|
- cols="18"
|
|
|
- md="2"
|
|
|
- >
|
|
|
- <v-text-field
|
|
|
- v-model="query.block"
|
|
|
- label="BlockNumber"
|
|
|
- required
|
|
|
- ></v-text-field>
|
|
|
+ <v-col cols="18" md="2">
|
|
|
+ <v-text-field required label="BlockNumber" v-model="query.block" />
|
|
|
</v-col>
|
|
|
|
|
|
<!-- hash过滤 -->
|
|
|
- <v-col
|
|
|
- cols="18"
|
|
|
- md="2"
|
|
|
- >
|
|
|
- <v-text-field
|
|
|
- v-model="query.hash"
|
|
|
- label="Hash"
|
|
|
- required
|
|
|
- ></v-text-field>
|
|
|
+ <v-col cols="18" md="2">
|
|
|
+ <v-text-field required label="Hash" v-model="query.hash" />
|
|
|
</v-col>
|
|
|
|
|
|
<!-- data过滤 -->
|
|
|
- <v-col
|
|
|
- cols="18"
|
|
|
- md="6"
|
|
|
- >
|
|
|
- <v-text-field
|
|
|
- v-model="query.dataVague"
|
|
|
- label="Data"
|
|
|
- required
|
|
|
- ></v-text-field>
|
|
|
+ <v-col cols="18" md="6">
|
|
|
+ <v-text-field required label="Data" v-model="query.dataVague" />
|
|
|
</v-col>
|
|
|
|
|
|
- <v-col
|
|
|
- cols="18"
|
|
|
- md="1"
|
|
|
- >
|
|
|
+ <!-- 搜索按钮 -->
|
|
|
+ <v-col cols="18" md="1">
|
|
|
<v-btn outlined x-large tile color="primary" @click="generateHistoryData">
|
|
|
<v-icon>mdi-cloud-search-outline</v-icon>
|
|
|
</v-btn>
|
|
|
@@ -51,9 +28,9 @@
|
|
|
</v-row>
|
|
|
</v-container>
|
|
|
|
|
|
- <v-card
|
|
|
- elevation="0"
|
|
|
- >
|
|
|
+ <!-- 表格组件 -->
|
|
|
+ <v-card elevation="0">
|
|
|
+ <!-- 表格上功能区 -->
|
|
|
<v-card-title>
|
|
|
<v-container id="dataTableHeader">
|
|
|
<v-row>
|
|
|
@@ -61,44 +38,27 @@
|
|
|
Pending 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-text-field hide-details single-line label="Local Search" append-icon="mdi-magnify" v-model="search"/>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
|
|
|
<v-row>
|
|
|
<v-col cols="12">
|
|
|
- Block: {{ showBlock }}
|
|
|
+ Block: {{ showBlock }}
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
</v-container>
|
|
|
</v-card-title>
|
|
|
|
|
|
- <v-data-table
|
|
|
- multi-sort
|
|
|
- group-by="block"
|
|
|
- calculate-widths
|
|
|
- :headers="headers"
|
|
|
- :items="tableData"
|
|
|
- :search="search"
|
|
|
- :items-per-page="200"
|
|
|
- :loading="loading"
|
|
|
- :sort-by="['block', 'gasPrice', 'pending']"
|
|
|
- :sort-desc="[false, true, false]"
|
|
|
- >
|
|
|
+ <!-- 表格主体 -->
|
|
|
+ <v-data-table calculate-widths multi-sort
|
|
|
+ group-by="block"
|
|
|
+ :headers="headers" :items="tableData" :search="search" :items-per-page="200" :loading="loading"
|
|
|
+ :sort-by="['block', 'gasPrice', 'pending']" :sort-desc="[false, true, false]">
|
|
|
+ <!-- 操作区 -->
|
|
|
<template v-slot:item.option="{ item }">
|
|
|
<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" large @click="deleteByHash(item.hash)">
|
|
|
<v-icon large>mdi-delete-forever-outline</v-icon>
|
|
|
@@ -115,39 +75,22 @@
|
|
|
</template>
|
|
|
<!-- Hash -->
|
|
|
<template v-slot:item.hash="{ item }">
|
|
|
- <v-chip
|
|
|
- label
|
|
|
- :href="'https://www.oklink.com/en/ethw/tx/' + item.hash"
|
|
|
- target="_blank"
|
|
|
- >
|
|
|
- {{ hashKit.head5(item.hash) + '..' }}
|
|
|
+ <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)"
|
|
|
- >
|
|
|
+ <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 label
|
|
|
- color="indigo lighten-4"
|
|
|
- @click="httpKit.jumpToEthw(item.to)"
|
|
|
- v-if="!item.toName"
|
|
|
- >
|
|
|
+ <v-chip v-if="!item.toName" label color="indigo lighten-4" @click="httpKit.jumpToEthw(item.to)">
|
|
|
{{ hashKit.headAndEnd2(item.to) }}
|
|
|
</v-chip>
|
|
|
- <v-chip
|
|
|
- label
|
|
|
- color="indigo lighten-4"
|
|
|
- @click="httpKit.jumpToEthw(item.to)"
|
|
|
- v-else
|
|
|
- >
|
|
|
+ <v-chip v-else label color="indigo lighten-4" @click="httpKit.jumpToEthw(item.to)">
|
|
|
{{ item.toName }}
|
|
|
</v-chip>
|
|
|
</template>
|
|
|
@@ -198,140 +141,131 @@
|
|
|
</v-data-table>
|
|
|
</v-card>
|
|
|
|
|
|
- <v-snackbar
|
|
|
- v-model="blockSnackbar"
|
|
|
- timeout="100000"
|
|
|
- color="blue-grey"
|
|
|
- >
|
|
|
+ <v-snackbar color="blue-grey" timeout="100000" v-model="blockSnackbar">
|
|
|
block: {{ showBlock }}
|
|
|
|
|
|
<template v-slot:action="{ attrs }">
|
|
|
- <v-btn
|
|
|
- color="white"
|
|
|
- text
|
|
|
- v-bind="attrs"
|
|
|
- @click="blockSnackbar = false"
|
|
|
- >
|
|
|
- Close
|
|
|
- </v-btn>
|
|
|
+ <v-btn text color="white" v-bind="attrs" @click="blockSnackbar = false">Close</v-btn>
|
|
|
</template>
|
|
|
</v-snackbar>
|
|
|
</v-card>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import NumKit from '@/plugins/kit/NumKit'
|
|
|
- import HashKit from '@/plugins/kit/HashKit'
|
|
|
- import HttpKit from '@/plugins/kit/HttpKit'
|
|
|
- import EthMev from '@/plugins/model/EthMev'
|
|
|
- import TradeInfo from '@/components/history/TradeInfo';
|
|
|
+import NumKit from '@/plugins/kit/NumKit'
|
|
|
+import HashKit from '@/plugins/kit/HashKit'
|
|
|
+import HttpKit from '@/plugins/kit/HttpKit'
|
|
|
+import EthMev from '@/plugins/model/EthMev'
|
|
|
+import TradeInfo from '@/components/history/TradeInfo';
|
|
|
|
|
|
- export default {
|
|
|
- name: 'Pending',
|
|
|
- components: { TradeInfo },
|
|
|
- methods: {
|
|
|
- // 获取数据
|
|
|
- async generateHistoryData () {
|
|
|
- this.tableData.length = 0
|
|
|
+export default {
|
|
|
+ name: 'Pending',
|
|
|
+ components: {TradeInfo},
|
|
|
+ methods: {
|
|
|
+ // 获取数据
|
|
|
+ async generateHistoryData() {
|
|
|
+ this.tableData.length = 0
|
|
|
|
|
|
- this.loading = true
|
|
|
- const rst = await EthMev.getEthMevPendingData(this.query.block, this.query.hash, this.query.dataVague)
|
|
|
- this.loading = false
|
|
|
+ this.loading = true
|
|
|
+ const rst = await EthMev.getEthMevPendingData(this.query.block, this.query.hash, this.query.dataVague)
|
|
|
+ this.loading = false
|
|
|
|
|
|
- if (!rst.data.state) {
|
|
|
- this.$msgkit.error(rst.data.msg)
|
|
|
+ if (!rst.data.state) {
|
|
|
+ this.$msgkit.error(rst.data.msg)
|
|
|
|
|
|
- return
|
|
|
- }
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- this.$msgkit.success(rst.data.msg)
|
|
|
- this.tableData = rst.data.data
|
|
|
+ this.$msgkit.success(rst.data.msg)
|
|
|
+ this.tableData = rst.data.data
|
|
|
|
|
|
- this.tableData.map(function (one) {
|
|
|
- try {
|
|
|
- let dataObj = one.dataObj
|
|
|
+ this.tableData.map(function (one) {
|
|
|
+ try {
|
|
|
+ let dataObj = one.dataObj
|
|
|
|
|
|
- one.tradeInfo = dataObj.tradeInfo
|
|
|
- one.from = dataObj.fromAdd
|
|
|
- one.to = dataObj.toAdd
|
|
|
- one.gasPrice = NumKit._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 = []
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- async deleteByHash(hash_code) {
|
|
|
- if (confirm('要删吗?\n' + hash_code)) {
|
|
|
- const rst = await EthMev.deleteByHash(hash_code)
|
|
|
+ one.tradeInfo = dataObj.tradeInfo
|
|
|
+ one.from = dataObj.fromAdd
|
|
|
+ one.to = dataObj.toAdd
|
|
|
+ one.gasPrice = NumKit._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 = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async deleteByHash(hash_code) {
|
|
|
+ if (confirm('要删吗?\n' + hash_code)) {
|
|
|
+ const rst = await EthMev.deleteByHash(hash_code)
|
|
|
|
|
|
- if (rst.data.state) {
|
|
|
- this.$msgkit.success(rst.data.msg)
|
|
|
+ if (rst.data.state) {
|
|
|
+ this.$msgkit.success(rst.data.msg)
|
|
|
|
|
|
- await this.pullData()
|
|
|
- } else {
|
|
|
- this.$msgkit.error(rst.data.msg)
|
|
|
- }
|
|
|
+ await this.pullData()
|
|
|
+ } else {
|
|
|
+ this.$msgkit.error(rst.data.msg)
|
|
|
}
|
|
|
- },
|
|
|
- logInfo (info) {
|
|
|
- console.log(info)
|
|
|
- },
|
|
|
- changeShowBlock (item, openSnackbar) {
|
|
|
- if (openSnackbar) this.blockSnackbar = true
|
|
|
- this.showBlock = item.block
|
|
|
}
|
|
|
},
|
|
|
+ logInfo(info) {
|
|
|
+ console.log(info)
|
|
|
+ },
|
|
|
+ changeShowBlock(item, openSnackbar) {
|
|
|
+ if (openSnackbar) this.blockSnackbar = true
|
|
|
+ this.showBlock = item.block
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- data: () => ({
|
|
|
- hashKit: HashKit,
|
|
|
- httpKit: HttpKit,
|
|
|
- query: {
|
|
|
- block: '',
|
|
|
- hash: '',
|
|
|
- dataVague: ''
|
|
|
- },
|
|
|
- blockSnackbar: false,
|
|
|
- search: '',
|
|
|
- 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: 'Type', value: 'type' },
|
|
|
- { text: 'Index', value: 'index' },
|
|
|
- { text: 'State', value: 'state' },
|
|
|
- { text: 'Mev', value: 'mev' },
|
|
|
- { text: 'Pending', value: 'pending' },
|
|
|
- // { 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"},
|
|
|
- tableData: []
|
|
|
- }),
|
|
|
+ data: () => ({
|
|
|
+ hashKit: HashKit,
|
|
|
+ httpKit: HttpKit,
|
|
|
+ query: {
|
|
|
+ block: '',
|
|
|
+ hash: '',
|
|
|
+ dataVague: ''
|
|
|
+ },
|
|
|
+ blockSnackbar: false,
|
|
|
+ search: '',
|
|
|
+ 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: 'Type', value: 'type'},
|
|
|
+ {text: 'Index', value: 'index'},
|
|
|
+ {text: 'State', value: 'state'},
|
|
|
+ {text: 'Mev', value: 'mev'},
|
|
|
+ {text: 'Pending', value: 'pending'},
|
|
|
+ // { text: 'TradeInfo', value: 'tradeInfo'}
|
|
|
+ ],
|
|
|
+ tableData: []
|
|
|
+ }),
|
|
|
|
|
|
- async mounted () {
|
|
|
- await this.generateHistoryData()
|
|
|
- }
|
|
|
+ async mounted() {
|
|
|
+ await this.generateHistoryData()
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
#dataTable {
|
|
|
height: 410px;
|
|
|
}
|
|
|
+
|
|
|
#dataTableHeader {
|
|
|
max-width: none;
|
|
|
}
|
|
|
+
|
|
|
.tradeLabel {
|
|
|
width: 250px;
|
|
|
}
|
|
|
+
|
|
|
thead.v-data-table-header {
|
|
|
position: fixed !important;
|
|
|
bottom: 0 !important;
|
|
|
@@ -340,14 +274,17 @@ thead.v-data-table-header {
|
|
|
width: 95%;
|
|
|
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%;
|
|
|
}
|
