45 changed files with 1441 additions and 830 deletions
@ -0,0 +1,38 @@ |
|||
import { requestService } from '../requst' |
|||
interface getAddressInfoParams { |
|||
address: string |
|||
} |
|||
export const getAddressInfo = (params: getAddressInfoParams) => { |
|||
return requestService({ |
|||
url: '/api/address/getAddressInfo', |
|||
method: 'get', |
|||
params, |
|||
}) |
|||
} |
|||
interface getContractAddressParams { |
|||
contractAddress: string |
|||
} |
|||
export const getContractAddressInfoList = ( |
|||
params: getContractAddressParams |
|||
) => { |
|||
return requestService({ |
|||
url: '/api/address/getContractAddressInfoList', |
|||
method: 'get', |
|||
params, |
|||
}) |
|||
} |
|||
|
|||
interface getContractHoldingParams { |
|||
pageNum?: number |
|||
pageSize?: number |
|||
contractAddress: string |
|||
} |
|||
export const getContractHoldingQuantity = ( |
|||
params: getContractHoldingParams |
|||
) => { |
|||
return requestService({ |
|||
url: '/api/address/getContractHoldingQuantity', |
|||
method: 'get', |
|||
params, |
|||
}) |
|||
} |
|||
@ -1,8 +1,43 @@ |
|||
import { StringChain } from 'lodash' |
|||
import { requestService } from '../requst' |
|||
|
|||
export const getFindTokenList = () => { |
|||
interface TokensListProps { |
|||
pageNum?: number |
|||
pageSize?: number |
|||
search?: string |
|||
} |
|||
export const getFindTokenList = (params: TokensListProps) => { |
|||
return requestService({ |
|||
url: '/api/token/findTokenList', |
|||
method: 'get', |
|||
params, |
|||
}) |
|||
} |
|||
interface FindReceiptByTokenPageProps { |
|||
pageNum?: number |
|||
pageSize?: number |
|||
tokenId?: string |
|||
contractAddress: string |
|||
} |
|||
export const getFindReceiptByTokenPage = ( |
|||
params: FindReceiptByTokenPageProps |
|||
) => { |
|||
return requestService({ |
|||
url: '/api/token/findReceiptByTokenPage', |
|||
method: 'get', |
|||
params, |
|||
}) |
|||
} |
|||
interface TokenInfoProps { |
|||
pageNum?: number |
|||
pageSize?: number |
|||
tokenId: string |
|||
contractAddress: string |
|||
} |
|||
///api/token/findTokenInfo
|
|||
export const getFindTokenInfo = (params: TokenInfoProps) => { |
|||
return requestService({ |
|||
url: '/api/token/findTokenInfo', |
|||
method: 'get', |
|||
params, |
|||
}) |
|||
} |
|||
|
|||
@ -1,12 +1,54 @@ |
|||
import { requestService } from '../requst' |
|||
interface TransactionListProps { |
|||
address?: string |
|||
isContract?: Number |
|||
number?: Number |
|||
pageNum?: Number |
|||
pageSize?: Number |
|||
} |
|||
// 分页请求
|
|||
export const getFindTransactionListPage = (params: TransactionListProps) => { |
|||
return requestService({ |
|||
url: '/api/transactions/findTransactionListPage', |
|||
params: params, |
|||
params, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
interface TransactionsDetailProps { |
|||
hash: string |
|||
} |
|||
// 请求详情
|
|||
export const getFindTransactionsDetail = (params: TransactionsDetailProps) => { |
|||
return requestService({ |
|||
url: '/api/transactions/findTransactionsDetail', |
|||
params, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
interface TransactionsLogsProps { |
|||
hash: string |
|||
} |
|||
// 请求logs /api/transactions/findTransactionsLogs
|
|||
export const getFindTransactionsLogs = (params: TransactionsLogsProps) => { |
|||
return requestService({ |
|||
url: '/api/transactions/findTransactionsLogs', |
|||
params, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
interface FindReceiptByAddressPageProps { |
|||
pageNum?: Number |
|||
pageSize?: Number |
|||
address?: string |
|||
filterType?: string |
|||
} |
|||
// /api/transactions/findReceiptByAddressPage
|
|||
export const getFindReceiptByAddressPage = ( |
|||
params: FindReceiptByAddressPageProps |
|||
) => { |
|||
return requestService({ |
|||
url: '/api/transactions/findReceiptByAddressPage', |
|||
params, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
@ -0,0 +1,163 @@ |
|||
<template> |
|||
<div class="mobile:hidden"> |
|||
<div class="flex flex-row px-[120px] justify-between items-center"> |
|||
<div class="flex flex-1 justify-start items-center"> |
|||
<img :src="iconList.label" class="w-[60px] h-[33px]" /> |
|||
<span class="text-[34px] font-semibold text-white ml-[11.5px]" |
|||
>MetaForce Scan</span |
|||
> |
|||
</div> |
|||
<div class="flex flex-1 flex-col justify-end items-center relative"> |
|||
<div class="flex flex-1 w-full max-w-[554px]"> |
|||
<el-input |
|||
v-model="input" |
|||
class="bg-black h-[52px] pl-[33px] text-[12px] rounded-t-[32.5px] overflow-hidden hp-input-wrapper" |
|||
placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number" |
|||
:prefix-icon="Search" |
|||
:input-style="{ background: '#262626' }" |
|||
@focus="handleFocus" |
|||
@blur="handleBlur" |
|||
@change="handleEnter" |
|||
@input="handleChangeInput" |
|||
:class="isActive && data.length > 0 ? '' : 'rounded-b-[32.5px]'" |
|||
/> |
|||
</div> |
|||
<div |
|||
class="w-full max-w-[554px] absolute top-[52px] z-10" |
|||
:class="isActive && data.length > 0 ? '' : 'hidden'" |
|||
> |
|||
<div |
|||
class="bg-black-262626 px-[32px] py-[20px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer w-full whitespace-nowrap overflow-hidden text-ellipsis" |
|||
v-for="(item, index) in data" |
|||
:key="index + item.hash" |
|||
:class=" |
|||
index === data.length - 1 |
|||
? 'rounded-b-[32.5px] border-b-[0px]' |
|||
: 'border-b-[1px]' |
|||
" |
|||
@click="handleClick(item)" |
|||
> |
|||
<span class="text-blue-65B5FF">{{ item.hash || '-' }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="bg-home-page bg-cover bg-center bg-no-repeat w-[1440px] h-[535.5px]" |
|||
></div> |
|||
</div> |
|||
<!-- 移动端显示 --> |
|||
<div class="desktop:hidden"> |
|||
<div |
|||
class="bg-home-page bg-cover bg-center bg-no-repeat w-full h-[219px] pt-[25px]" |
|||
> |
|||
<div class="flex flex-1 justify-center items-center"> |
|||
<img :src="iconList.label" class="w-[40px] h-[24px]" /> |
|||
<span class="text-[24px] font-semibold text-white ml-[16px]" |
|||
>MetaForce Scan</span |
|||
> |
|||
</div> |
|||
<div |
|||
class="flex flex-1 w-full h-[40px] justify-center items-center mt-[32px] relative" |
|||
> |
|||
<div class="flex flex-1 px-[20px]"> |
|||
<el-input |
|||
v-model="input" |
|||
class="bg-black h-[40px] pl-[15.69px] text-[12px] rounded-t-[20px] overflow-hidden hp-input-wrapper" |
|||
placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number" |
|||
:prefix-icon="Search" |
|||
:input-style="{ background: '#262626' }" |
|||
@focus="handleFocus" |
|||
@blur="handleBlur" |
|||
@change="handleEnter" |
|||
@input="handleChangeInput" |
|||
:class="isActive && data.length > 0 ? '' : 'rounded-b-[20px]'" |
|||
/> |
|||
</div> |
|||
<div |
|||
class="w-full max-full-is-active absolute top-[40px] z-10" |
|||
:class="isActive && data.length > 0 ? '' : 'hidden'" |
|||
> |
|||
<div |
|||
class="bg-black-262626 px-[20px] py-[15px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer w-full whitespace-nowrap overflow-hidden text-ellipsis" |
|||
v-for="(item, index) in data" |
|||
:key="index + item.hash" |
|||
:class=" |
|||
index === data.length - 1 |
|||
? 'rounded-b-[20px] border-b-[0px]' |
|||
: 'border-b-[1px]' |
|||
" |
|||
@click="handleClick(item)" |
|||
> |
|||
<span class="text-blue-65B5FF">{{ item.hash || '-' }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { Search } from '@element-plus/icons-vue' |
|||
import { getSearch } from '@src/api/BlockController' |
|||
import { Throttle } from '@src/utils/throttle' |
|||
import { ref } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import * as iconList from '../assets/Icons/index' |
|||
|
|||
const router = useRouter() |
|||
|
|||
let input = ref<string>('') |
|||
let isActive = ref(false) |
|||
const data = ref<any>([]) |
|||
|
|||
const handleFocus = () => (isActive.value = true) |
|||
const handleBlur = () => |
|||
setTimeout(() => { |
|||
isActive.value = false |
|||
}, 150) |
|||
// 按下了enter / 失去焦点 |
|||
const handleEnter = (e: string | number) => { |
|||
// console.log(e) |
|||
} |
|||
// 处理点击 |
|||
const handleClick = (item: any) => { |
|||
console.log('click', item) |
|||
// 根据type判断需要跳转到哪个页面 |
|||
let route = '' |
|||
switch (item?.type) { |
|||
case 1: { |
|||
route = 'blocks' |
|||
break |
|||
} |
|||
case 2: { |
|||
route = 'tx' |
|||
break |
|||
} |
|||
case 3: { |
|||
route = 'tokens' |
|||
break |
|||
} |
|||
} |
|||
// 跳转 |
|||
router.push(`/${route}/${item.hash}`) |
|||
} |
|||
// 修改input |
|||
const handleChangeInput = () => { |
|||
Throttle(searchRequest, 1000)() |
|||
} |
|||
// 请求的函数 |
|||
const searchRequest = async () => { |
|||
try { |
|||
const res = await getSearch(input.value) |
|||
data.value = res.data |
|||
console.log(data) |
|||
} catch (error) {} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.max-full-is-active { |
|||
max-width: calc(100% - 40px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div |
|||
class="flex flex-1 flex-row justify-between items-center py-[16px] pl-[18px] border-b border-b-black-3B3B3C" |
|||
> |
|||
<div> |
|||
<p class="text-white text-[16px] font-medium">{{ title }}</p> |
|||
<p class="text-gray-BBB text-[14px] font-normal mt-[12px]"> |
|||
{{ value1 }} |
|||
</p> |
|||
<div |
|||
class="text-gray-BBB text-[14px] font-normal flex flex-row items-center mt-[12px]" |
|||
> |
|||
<p class="mr-[10px]">{{ value2 }}</p> |
|||
<Icons url="chevron_right" :size="16" /> |
|||
<p class="ml-[10px]">{{ value3 }}</p> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="flex flex-row items-center w-[87px] rounded-[4px] px-[12px] py-[4px] bg-green-2EAA7D" |
|||
:class="state === 'Success' ? 'bg-green-2EAA7D' : 'bg-red-C4403E'" |
|||
> |
|||
<Icons |
|||
:url="state === 'Success' ? 'check_circle' : 'cancel'" |
|||
:size="12" |
|||
/> |
|||
<p class="text-[12px] font-normal align-middle text-white ml-[2px]"> |
|||
{{ state }} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import Icons from '@src/components/icons/index.vue' |
|||
defineProps({ |
|||
title: [String, Number], |
|||
value1: String, |
|||
value2: String, |
|||
value3: String, |
|||
state: String, |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,28 @@ |
|||
<template> |
|||
<div |
|||
class="flex flex-1 flex-row justify-start items-center py-[16px] pl-[18px] border-b border-b-black-3B3B3C" |
|||
> |
|||
<div> |
|||
<p class="text-white text-[16px] font-medium">{{ title }}</p> |
|||
<div |
|||
class="text-gray-BBB text-[14px] font-normal flex flex-row items-center mt-[12px]" |
|||
> |
|||
<p class="mr-[10px]">{{ value1 }}</p> |
|||
<p>{{ value2 }}</p> |
|||
<p class="ml-[10px]">{{ value3 }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
defineProps({ |
|||
title: String, |
|||
value1: String, |
|||
value2: String, |
|||
value3: String, |
|||
value4: String, |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -1,114 +1,17 @@ |
|||
<template> |
|||
<div class="w-full desktop:pt-[23px] mobile:pt-[13px]"> |
|||
<div class="mobile:hidden"> |
|||
<desktop-tokens-table :data="tableData" /> |
|||
<desktop-tokens-table /> |
|||
</div> |
|||
<div class="desktop:hidden"> |
|||
<mobile-tokens-table :data="tableData" /> |
|||
<mobile-tokens-table /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import DesktopTokensTable from '@src/components/table/desktop/tokensTable.vue' |
|||
import MobileTokensTable from '@src/components/table/mobile/tokensTable.vue' |
|||
import { onMounted, ref } from 'vue' |
|||
|
|||
const tableData = ref<any[]>([ |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
{ |
|||
serialNumber: '0x1956...e1ea6', |
|||
token: '1017882', |
|||
adress: '0x3b9aca00', |
|||
totalSupply: '14 seconds ago', |
|||
holdersCount: '0x14f1... 4f0ba', |
|||
}, |
|||
]) |
|||
// onMounted(() => { |
|||
// setTimeout(() => { |
|||
// tableData.value = [{}].map((item, index) => ({ |
|||
// ...item, |
|||
// serialNumber: index + 1, |
|||
// })) |
|||
// console.log(tableData) |
|||
// }, 1000) |
|||
// }) |
|||
import DesktopTokensTable from '@src/components/table/desktop/tokensTable.vue' |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
|
|||
@ -0,0 +1,55 @@ |
|||
<template> |
|||
<div |
|||
class="bg-black-2B2B2C text-white desktop:text-[15px] desktop:px-[34px] mobile:text-[14px] mobile:px-[16px] py-[16px] rounded-[10px]" |
|||
> |
|||
<div |
|||
class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C" |
|||
> |
|||
<p class="min-w-[185px] text-gray-BBB">Address</p> |
|||
<p class="text-blue-65B5FF">{{ logsData?.address || '' }}</p> |
|||
</div> |
|||
<div |
|||
class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C" |
|||
> |
|||
<p class="min-w-[185px] text-gray-BBB">Topics</p> |
|||
<div> |
|||
<p |
|||
class="break-all" |
|||
v-for="(item, index) in logsData?.topics" |
|||
:key="index" |
|||
:class="index != 0 ? 'mt-[16px]' : ''" |
|||
> |
|||
{{ `[${index}] ${item}` }} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C" |
|||
> |
|||
<p class="min-w-[185px] text-gray-BBB">Data</p> |
|||
<p class="break-all">{{ logsData?.data }}</p> |
|||
</div> |
|||
<div |
|||
class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px]" |
|||
> |
|||
<p class="min-w-[185px] text-gray-BBB">Log Index</p> |
|||
<p class="break-all">{{ logsData?.logIndex }}</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, watchEffect } from 'vue' |
|||
|
|||
const props = defineProps({ |
|||
data: Object as any, |
|||
}) |
|||
const logsData = ref() |
|||
watchEffect(() => { |
|||
logsData.value = props.data?.[0] |
|||
}) |
|||
|
|||
console.log(props.data) |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,48 @@ |
|||
let getInfo = (data) => { |
|||
if (!data) return null |
|||
let result = [] |
|||
for (let i = 1; i <= 20; i++) { |
|||
try { |
|||
let item = {} |
|||
if (data['temp' + i]) { |
|||
item['temp'] = data['temp' + i] |
|||
|
|||
if (JSON.stringify(tilesState.max) !== '{}') |
|||
if (tilesState.max['temp' + i]) |
|||
item['maxTemp'] = tilesState.max['temp' + i] |
|||
|
|||
if (JSON.stringify(tilesState.min) !== '{}') |
|||
if (tilesState.min['temp' + i]) |
|||
item['minTemp'] = tilesState.min['temp' + i] |
|||
|
|||
if (JSON.stringify(tilesState.avg) !== '{}') |
|||
if (tilesState.avg['temp' + i]) |
|||
item['avgTemp'] = tilesState.avg['temp' + i] |
|||
} |
|||
|
|||
if (data['humidity' + i]) { |
|||
item['humidity'] = data['humidity' + i] |
|||
if (JSON.stringify(tilesState.max) !== '{}') |
|||
if (tilesState.max['humidity' + i]) |
|||
item['maxHumidity'] = tilesState.max['humidity' + i] |
|||
|
|||
if (JSON.stringify(tilesState.min) !== '{}') |
|||
if (tilesState.min['humidity' + i]) |
|||
item['minHumidity'] = tilesState.min['humidity' + i] |
|||
|
|||
if (JSON.stringify(tilesState.avg) !== '{}') |
|||
if (tilesState.avg['humidity' + i]) |
|||
item['avgHumidity'] = tilesState.avg['humidity' + i] |
|||
} |
|||
|
|||
if (JSON.stringify(item) !== '{}') { |
|||
item['title'] = 'Temperature-Humidity-' + i |
|||
result.push(item) |
|||
} |
|||
} catch (e) { |
|||
console.log(e) |
|||
} |
|||
} |
|||
console.log(result) |
|||
return result |
|||
} |
|||
Loading…
Reference in new issue