Skip to content

D
dexfilter-web-nuxt3
Commit 37081707 by haojie
Options

1

parent 3bc7e4c9
Showing with 1005 additions and 588 deletions
app/router.options.ts
......@@ -11,7 +11,7 @@ export default <RouterConfig>{
{
name: 'tokenlistDefault',
path: '/',
component: () => import('~/views/token/TokenList.vue'),
component: () => import('~/views/token/CustomTokenList.vue'),
meta: { hasSearch: true, hasRollToken: true, footer: true },
},
{
......
components/Animation.vue
......@@ -25,7 +25,7 @@
const props = defineProps({
background: {
type: String,
default: 'var(--theme-color17)',
default: 'rgba(230,230,230,0.2)',
},
position: {
type: String,
......
language/cn.ts
......@@ -34,6 +34,8 @@ const cn = {
r24hVolume: '最大交易',
CustomFilter: '高级筛选',
Collection: '收藏',
asc: '升序排列',
desc: '降序排列',
},
login: {
h1: '区块链监控专家',
......
language/en.ts
......@@ -35,6 +35,8 @@ const cn = {
r24hVolume: '24h Volume',
CustomFilter: 'Custom filters',
Collection: 'Collection',
asc: 'Ascending order',
desc: 'Descending order',
},
login: {
h1: 'On-chain intelligent screening',
......
style/default.css
......@@ -101,6 +101,9 @@
--new-color-2: #287eff;
--new-color-3: #7b7d87;
--new-color-4: #5ab055;
--new-color-5: #16c784;
--new-color-6: #ea3943;
--new-color-7: rgb(108, 108, 108);
}
:root[theme-mode='dark'] {
......@@ -170,6 +173,9 @@
--new-color-2: #28b2ff;
--new-color-3: #848e9c;
--new-color-4: #5ab055;
--new-color-5: #19de92;
--new-color-6: #ec5058;
--new-color-7: #cfcfcf;
}
/* 主题按钮*/
.custom_button_back_border {
......
style/line.less
......@@ -19,5 +19,6 @@
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
pointer-events: none;
}
}
views/token/CustomTokenList.vue
<template>
<div>
<div class="custom-affixed-head">
<table>
<thead>
<tr class="firstHead">
<th colspan="5">基本工资</th>
<th colspan="3">基础性绩效</th>
<th colspan="1">奖励性绩效</th>
<th colspan="1" rowspan="2">绩效考核奖</th>
<th colspan="1" rowspan="2">上年度绩效工资</th>
<th colspan="1" rowspan="2">上年度绩效考核奖</th>
<th colspan="1" rowspan="2">X项目小计</th>
<th colspan="1" rowspan="2">上年度X项目小计</th>
<th colspan="1" rowspan="2">房贴</th>
<th colspan="1" rowspan="2">德育导师</th>
<th colspan="1" rowspan="2">临时补发</th>
<th colspan="2" rowspan="2">应发工资</th>
</tr>
<tr class="twoHead">
<th colspan="2">岗位工资</th>
<th>薪级工资</th>
<th>临时性补贴</th>
<th>小计</th>
<th>岗位津贴</th>
<th>生活补贴</th>
<th>小计</th>
<th>院聘</th>
</tr>
</thead>
</table>
<div class="custom-token-list">
<FilterBtns @filterChange="filterChange"></FilterBtns>
<div
class="custom-affixed-head"
ref="affixedHeadRef"
v-show="LoadHead"
:style="{
top: affixedHead.top,
width: affixedHead.width,
}"
>
<div class="custom-affixed-header-elm-wrap">
<table>
<colgroup>
<template v-for="(item, index) in colGroupList.list" :key="index">
<col
:style="{
width: item,
}"
/>
</template>
</colgroup>
<thead ref="CustomHead">
<tr class="firstHead">
<template v-for="item in columns" :key="item.title">
<th :colspan="item.children.length" class="custom-before-line">
{{ item.title }}
</th>
</template>
</tr>
<tr class="twoHead">
<template v-for="item in columnsChild" :key="item.title">
<th class="custom-before-line">
<div class="thead-sort-box">
<template v-if="item.title == 'Pool'">
{{ $t('TableList.pool') + HeadTokenType }}
</template>
<template v-else>
{{ item.title }}
</template>
<template v-if="item.sort">
<CustomTableSort
:options="SortOptions[item.colKey]"
:field="SortOptions[item.colKey].field"
@SubmitSort="submitSort"
></CustomTableSort>
</template>
</div>
</th>
</template>
</tr>
</thead>
</table>
</div>
</div>
<div class="custom-home-table">
<div class="custom-home-table narrow-scrollbar" ref="CustomTable">
<table class="filter-table-home">
<colgroup>
<col style="width: auto" />
......@@ -46,59 +70,690 @@
<col style="" />
<col style="" />
</colgroup>
<thead>
<thead ref="CustomHead">
<tr class="firstHead">
<th colspan="5">基本工资</th>
<th colspan="3">基础性绩效</th>
<th colspan="1">奖励性绩效</th>
<th colspan="1" rowspan="2">绩效考核奖</th>
<th colspan="1" rowspan="2">上年度绩效工资</th>
<th colspan="1" rowspan="2">上年度绩效考核奖</th>
<th colspan="1" rowspan="2">X项目小计</th>
<th colspan="1" rowspan="2">上年度X项目小计</th>
<th colspan="1" rowspan="2">房贴</th>
<th colspan="1" rowspan="2">德育导师</th>
<th colspan="1" rowspan="2">临时补发</th>
<th colspan="2" rowspan="2">应发工资</th>
<template v-for="item in columns" :key="item.title">
<th :colspan="item.children.length" class="custom-before-line">
{{ item.title }}
</th>
</template>
</tr>
<tr class="twoHead">
<th colspan="2">岗位工资</th>
<th>薪级工资</th>
<th>临时性补贴</th>
<th>小计</th>
<th>岗位津贴</th>
<th>生活补贴</th>
<th>小计</th>
<th>院聘</th>
<template v-for="item in columnsChild" :key="item.title">
<th class="custom-before-line" ref="tableTrOne">
<div class="thead-sort-box">
<template v-if="item.title == 'Pool'">
{{ $t('TableList.pool') + HeadTokenType }}
</template>
<template v-else>
{{ item.title }}
</template>
<template v-if="item.sort">
<CustomTableSort
:options="SortOptions[item.colKey]"
:field="SortOptions[item.colKey].field"
@SubmitSort="submitSort"
></CustomTableSort>
</template>
</div>
</th>
</template>
</tr>
</thead>
<tbody>
<tr v-for="item in arr1" :key="item">
<td colspan="2" align="center">{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td>{{ item.one }}</td>
<td colspan="2" align="center">16</td>
<tr
v-for="(item, index) in resultData.list"
:key="item.tbname"
:class="{
'row-active': CurLineIndex == index,
}"
@click="handleRowClick(item, index)"
>
<td align="center" class="index">{{ item.index }}</td>
<td class="tn">
<div class="name-block">
<div class="tn">{{ item.tn }}</div>
<div class="symbol">{{ item.sy }}/{{ item.ps }}</div>
</div>
</td>
<td class="up fs" align="center">{{ item.n_up }}</td>
<td class="pb fs" align="center">{{ item.n_pb }}</td>
<td class="vn fs" align="center">{{ item.n_vn }}</td>
<td class="txn fs" align="center">{{ item.txn }}</td>
<td
class="r5m fs2"
align="center"
:style="{ color: getUpDownColor(item.n_r5m) }"
>
{{ item.n_r5m }}
</td>
<td
class="r1h fs2"
align="center"
:style="{ color: getUpDownColor(item.n_r1h) }"
>
{{ item.n_r1h }}
</td>
<td
class="r4h fs2"
align="center"
:style="{ color: getUpDownColor(item.n_r4h) }"
>
{{ item.n_r4h }}
</td>
<td
class="r24h fs2"
align="center"
:style="{ color: getUpDownColor(item.n_r24h) }"
>
{{ item.n_r24h }}
</td>
<td class="operation" align="center">
<JumpOther :tb="item.tbname" type="detail" content="K Line">
<template #svg> <KLink class="k-link"></KLink> </template
></JumpOther>
</td>
<td class="media" align="center">
<JumpOther :tb="item.tbname" type="analysis" content="analysis">
<template #svg>
<analysisSvg class="to-analysis"></analysisSvg>
</template>
</JumpOther>
</td>
</tr>
</tbody>
</table>
<template v-if="loading">
<Animation></Animation>
</template>
</div>
<div class="page-footer">
<CustPagination
:pageNum="pageNum"
:total="resultData.total"
:continues="8"
@pageChange="onCurrentChange"
></CustPagination>
</div>
</div>
</template>
<script lang="ts" setup>
import { parsePercent, parseCoinAmount, parseNumberToK } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import CustPagination from './CustPagination.vue';
import request from '@/utils/request';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
import JumpOther from './JumpOther.vue';
import KLink from '/public/images/svg/table/k_link.svg';
import analysisSvg from '/public/images/svg/table/media.svg';
import SortSvg from '/public/images/svg/table/sort.svg';
import UpSvg from '/public/images/svg/table/up.svg';
import DownSvg from '/public/images/svg/table/down.svg';
import { webLogo } from '@/constants/logo';
import FilterBtns from './FilterBtn';
import CustomTableSort from './tableSort.vue';
import { TableSort, TableSortAsc } from '@/utils/tool';
const route = useRoute();
const LoadHead = ref(false);
const CustomHead = ref(null);
const CustomTable = ref(null);
const BodyscrollDom = ref(null);
const loading = ref(false);
const pageNum = ref(1);
// 当前请求哪个接口
const currentRequestType = ref(1);
// 当前链
const chain = useChain();
const { t } = useI18n();
const HeadTokenType = useTableHeadToken();
// 筛选条件
const GlbFilter = useCurFilter();
// 吸顶元素
const affixedHeadRef = ref(null);
const ChainObj = ref();
// 当前选中的行数
const CurLineIndex = ref(0);
// 表格数据轮询
let listInterval: any = null;
const ChangeTable = useChangeTable();
// 预渲染的数据
const PreRenderList = UsePreRenderList();
const resultData = reactive({
...PreRenderList.value,
filterList: [],
});
// 动态获取colgroup的宽度--用于吸顶表头
const tableTrOne = ref(null);
// colGroupList
const colGroupList = reactive({
list: [],
});
// 右侧数据
const RightInfo = useCurrentRightInfo();
const isFirst = ref(true);
// 新接口当前参数
const NewParams = ref({});
// 吸顶表头左右跟随滑动
const affixedHead = reactive({
left: '',
top: '',
height: '',
width: '',
});
// 当前排序状态
const SortOptions = reactive({
up: {
field: 'up',
type: 'all',
status: false,
},
pb: {
field: 'pb',
type: 'all',
status: false,
},
vn: {
field: 'vn',
type: 'all',
status: false,
},
txn: {
field: 'txn',
type: 'all',
status: false,
},
r5m: {
field: 'r5m',
type: 'all',
status: false,
},
r1h: {
field: 'r1h',
type: 'all',
status: false,
},
r4h: {
field: 'r4h',
type: 'all',
status: false,
},
r24h: {
field: 'r24h',
type: 'all',
status: false,
},
});
// 获取涨跌幅
const getUpDown = (value: string) => {
if (value && value[0] == '-') {
return `${value}%`;
}
return `+${value}%`;
};
// 获取涨跌幅颜色
const getUpDownColor = (value: string) => {
if (value && value[0] == '-') {
// down
return '#f23645';
}
// up
return '#23ab94';
};
// 获取表格可视区域宽度
const getTableWidth = () => {
if (CustomTable.value) {
// 获取元素可视区域宽度
let width = CustomTable.value.clientWidth;
affixedHead.width = width + 'px';
}
};
// 排序事件
const submitSort = ({ sort, field }: any) => {
// 先将其他th的筛选关闭
Object.keys(SortOptions).forEach((item: any) => {
if (item == field) {
SortOptions[item].type = sort;
SortOptions[item].status = true;
} else {
SortOptions[item].type = 'all';
SortOptions[item].status = false;
}
});
// 开始排序
if (sort === 'asc') {
// 升序
resultData.list = TableSortAsc(resultData.list, field);
} else if (sort === 'desc') {
// 降序
resultData.list = TableSort(resultData.list, field);
} else {
// 还原
resultData.list = JSON.parse(JSON.stringify(resultData.filterList));
}
};
const filterChange = (value: number, txn: string) => {
pageNum.value = 1;
currentRequestType.value = value;
if (value == 1) {
// 旧接口
getTableList();
} else {
NewParams.value = JSON.parse(JSON.stringify({}));
if (txn == 'txn') {
NewParams.value.date_orderby = txn;
NewParams.value.sort = 'desc';
} else if (txn == 'max-up') {
// 最大涨幅
NewParams.value.date_orderby = 'radio';
NewParams.value.sort = 'desc';
} else if (txn == 'max-down') {
// 最大跌幅
NewParams.value.date_orderby = 'radio';
NewParams.value.sort = 'asc';
}
getNewTableList();
}
};
// 表格数据过滤方法
const TableFilter = (result: any) => {
if ('list' in result && result.list.length) {
result.list.forEach((item: any, index: number) => {
item.index = index + 1;
item.n_up = '$' + parseCoinAmount(item.up);
item.n_vn = '$' + parseNumberToK(item.vn);
item.n_pb = parseNumberToK(item.pb);
item.n_r5m = parseFloat(item.r5m * 100).toFixed(2);
item.n_r1h = parseFloat(item.r1h * 100).toFixed(2);
item.n_r4h = parseFloat(item.r4h * 100).toFixed(2);
item.n_r24h = parseFloat(item.r24h * 100).toFixed(2);
//
item.n_r5m = getUpDown(item.n_r5m);
item.n_r1h = getUpDown(item.n_r1h);
item.n_r4h = getUpDown(item.n_r4h);
item.n_r24h = getUpDown(item.n_r24h);
});
resultData.list = JSON.parse(JSON.stringify(result.list));
resultData.filterList = JSON.parse(JSON.stringify(result.list));
resultData.total = result.dataCount;
} else {
resultData.list = [];
}
};
// 预取数据
const { data, refresh } = await useLazyFetch(
() => `http://156.247.9.93:9501/v1${chain.value}/index`,
{
params: GlbFilter.value,
onResponse({ request, response, options }) {
try {
loading.value = false;
if (response._data.data) {
TableFilter(toRaw(response._data.data));
}
} catch (e) {
resultData.list = [];
console.log(e);
}
return response._data;
},
onRequestError({ error }) {
console.log(error);
},
}
);
const next = () => {
loading.value = true;
refresh();
};
// 获取默认数据
const getDefaultList = () => {
if (process.client) {
TableFilter(data.value.data);
}
};
const CustomgetRoute = () => {
if (route.params.chain) {
let Obj = filterChainObj('name', route.params.chain);
if (Obj) {
ChainObj.value = Obj;
chain.value = Obj.value;
HeadTokenType.value = ChainObj.value.Currency[0];
}
} else {
ChainObj.value = filterChainObj('value', chain.value);
}
if (route.params.page) {
if (typeof parseInt(route.params.page) === 'number')
pageNum.value = parseInt(route.params.page);
GlbFilter.value.page = parseInt(route.params.page);
}
};
// 默认事件
CustomgetRoute();
getDefaultList();
useHead({
title: `Dexfilter | ${ChainObj.value.name}`,
link: [webLogo],
meta: [
{
name: 'description',
content:
'DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。',
},
],
});
// 获取colgroup的宽度
const getColGroupWidth = () => {
// 动态改变吸顶表头的th宽度
colGroupList.list.forEach((it: any) => {
tableTrOne.value.forEach((item: any, index: number) => {
colGroupList.list[index] = item.clientWidth + 'px';
});
});
console.log(colGroupList.list);
};
// 默认接口
const getTableList = async () => {
try {
loading.value = true;
let result: any = await request.get(`/v1${chain.value}/index`, {
params: GlbFilter.value,
});
if (result.list.length) {
TableFilter(result);
if (isFirst.value) {
// 通知右侧请求接口
RightInfo.value.token = result.list[0].token;
RightInfo.value.tb = result.list[0].tbname;
RightInfo.value.r24h = result.list[0].r24h + '';
isFirst.value = false;
}
}
loading.value = false;
} catch (e) {
loading.value = false;
} finally {
loading.value = false;
}
};
// 新接口
const getNewTableList = async () => {
try {
loading.value = true;
let params = JSON.parse(JSON.stringify(GlbFilter.value));
if ('nt' in params) {
delete params.nt;
}
let res: any = await request.get(`/v1${chain.value}/phone/index`, {
params: {
...params,
page: pageNum.value,
...NewParams.value,
},
});
loading.value = false;
TableFilter(res);
} catch (e) {
console.log(e);
loading.value = false;
} finally {
loading.value = false;
}
};
watch(
() => ChangeTable.value,
(v) => {
if (currentRequestType.value == 1) {
getTableList();
} else {
getNewTableList();
}
}
);
watch(
() => chain.value,
(v) => {
CurLineIndex.value = 0;
pageNum.value = 1;
// 修改title
ChainObj.value = filterChainObj('value', chain.value);
// 请求数据
currentRequestType.value = 1;
getTableList();
}
);
// 判断是否需要加$
const Judgment = () => {
if (HeadTokenType.value === 'USDT') {
return '$';
} else {
return '';
}
};
// tbName---流动池折线图传递参数
const handleRowClick = (item: any, index: number) => {
CurLineIndex.value = index;
// 提交到右侧
RightInfo.value.token = item.token;
RightInfo.value.tb = item.tbname;
RightInfo.value.r24h = item.r24h.toString();
};
// 监听是否切出页面
const listenerWindow = (fn: any) => {
document.addEventListener('visibilitychange', fn);
};
// 取消监听
const closeListener = (fn: any) => {
document.removeEventListener('visibilitychange', fn);
};
// 有数据，开启定时器
const Intervalfun = () => {
listInterval = setInterval(() => {
if (currentRequestType.value == 1) {
getTableList();
} else {
getNewTableList();
}
}, 10000);
};
// 关闭定时器
const closeInterVal = () => {
if (listInterval) {
clearInterval(listInterval);
}
};
// 窗口关闭和打开要执行的方法
const windowOpenFn = (e: any) => {
// ==visible代表在当前窗口
let isExist = e.target.visibilityState;
if (isExist === 'visible') {
// 先关再开
closeInterVal();
Intervalfun();
} else {
// 离开页面
closeInterVal();
}
};
const onCurrentChange = (v) => {
pageNum.value = v;
GlbFilter.value.page = v;
// next();
if (currentRequestType.value == 1) {
getTableList();
} else {
getNewTableList();
}
};
const onScrollEvent = () => {
// 获取滚动元素dom
BodyscrollDom.value = document.getElementById('layout-scroll');
if (BodyscrollDom.value) {
affixedHead.top = BodyscrollDom.value.offsetTop + 'px';
BodyscrollDom.value.onscroll = function (e: any) {
let client = CustomHead.value.getBoundingClientRect();
if (client.top <= BodyscrollDom.value.offsetTop) {
// 显示吸顶表头
LoadHead.value = true;
} else {
// 隐藏吸顶表头
LoadHead.value = false;
}
getTableWidth();
getColGroupWidth();
};
}
};
const onTableScroll = () => {
if (CustomTable.value) {
// 表格左右滚动
CustomTable.value.onscroll = function (e: any) {
let left = CustomTable.value.scrollLeft;
//
affixedHeadRef.value.scrollLeft = left;
};
}
};
const setColGroupList = () => {
columnsChild.value.forEach((item: any) => {
colGroupList.list.push('0px');
});
};
onMounted(() => {
// 监听滚动
nextTick(() => {
// main元素滚动，解决吸顶问题
onScrollEvent();
// 表格左右滚动
onTableScroll();
// 屏幕宽度变化
window.onresize = function (e: any) {
getTableWidth();
getColGroupWidth();
};
// 开启屏幕监听
listenerWindow(windowOpenFn);
// 开启定时器
// 先关再开
closeInterVal();
Intervalfun();
// 给右侧提供第一条数据
if (resultData.list.length) {
RightInfo.value.token = resultData.list[0].token;
RightInfo.value.tb = resultData.list[0].tbname;
RightInfo.value.r24h = resultData.list[0].r24h;
}
loading.value = false;
// 获取th的个数并修改ColGroupList
setColGroupList();
});
});
onUnmounted(() => {
BodyscrollDom.value.onscroll = null;
CustomTable.value.onscroll = null;
if (process.client) {
window.onresize = null;
}
// 关闭页面切出监听事件
closeListener(windowOpenFn);
// 关闭轮询
closeInterVal();
});
const columns = computed(() => {
return [
{
title: t('TableList.tokenbase'),
children: [
{
colKey: 'index',
width: 'auto',
title: '#',
},
{
colKey: 'tn',
title: t('TableList.token'),
},
],
},
{
title: t('TableList.basic'),
children: [
{
colKey: 'up',
title: t('TableList.price'),
sort: true,
},
{
colKey: 'pb',
title: 'Pool',
sort: true,
},
{
colKey: 'vn',
title: t('TableList.volume'),
sort: true,
},
{
colKey: 'txn',
title: t('TableList.txns'),
sort: true,
},
],
},
{
title: t('TableList.priceChange'),
children: [
{
colKey: 'r5m',
title: t('TableList.time1'),
sort: true,
},
{
colKey: 'r1h',
title: t('TableList.time2'),
sort: true,
},
{
colKey: 'r4h',
title: t('TableList.time3'),
sort: true,
},
{
colKey: 'r24h',
title: t('TableList.time4'),
sort: true,
},
],
},
{
title: t('TableList.others'),
children: [
{
colKey: 'operation',
title: t('TableList.k_line'),
},
{
colKey: 'media',
title: t('TableList.mediaData'),
},
],
},
];
});
// 过滤出所有children
const columnsChild = computed(() => {
let list = [];
columns.value.forEach((item: any) => {
item.children.forEach((it: any) => {
list.push(it);
});
});
return list;
});
let arr1 = new Array(100);
for (let i = 0; i < arr1.length; i++) {
arr1[i] = {
......@@ -114,47 +769,221 @@ for (let i = 0; i < arr1.length; i++) {
</script>
<style lang="less">
.custom-affixed-head {
position: sticky;
top: 0;
table {
thead {
th {
border: 1px solid #f5f5f5;
border-width: 0px 1px 1px 0px;
color: red;
@import '@/style/variables.less';
@import '@/style/line.less';
@import '@/style/flex.less';
.custom-token-list {
margin-top: 8px;
box-sizing: border-box;
position: relative;
border-radius: @border-radius;
box-shadow: @box-shadow;
padding: 1px;
.custom-affixed-head {
position: fixed;
z-index: 100;
height: 90px;
overflow-y: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
&::-webkit-scrollbar {
width: 0 !important;
}
.custom-affixed-header-elm-wrap {
width: 100%;
position: absolute;
top: 0;
z-index: 100;
table {
z-index: 100;
border-spacing: 0;
border-width: 1px 0px 0px 1px;
border-collapse: collapse;
width: 100%;
color: #909399;
min-width: 1000px;
thead {
tr {
th {
white-space: nowrap;
border: none;
box-sizing: border-box;
background: var(--td--right-back-color-2);
}
}
& > :nth-child(1) {
th {
font-weight: 700;
font-size: 14px;
color: var(--td--main-btn-color-1);
white-space: nowrap;
font-family: 'bold';
padding: 4px 12px;
}
.t-align-center {
height: 30px !important;
padding: 0;
}
& > :nth-child(1) {
&::before {
border-left: none;
border-right: none;
}
}
& > :last-child {
&::before {
border-right: none;
}
}
}
& > :nth-child(2) {
th {
font-weight: 500;
font-size: 14px;
font-family: 'Medium';
border-bottom: 1px solid var(--new-border-4);
padding: 10px 12px;
.thead-sort-box {
.dja();
cursor: pointer;
}
}
& > :nth-child(1) {
&::before {
border-left: none;
}
}
}
}
}
}
}
}
.custom-home-table {
overflow-y: auto;
.filter-table-home {
border: 1px solid #f5f5f5;
border-width: 1px 0px 0px 1px;
border-collapse: collapse;
width: 100%;
color: #909399;
min-width: 1000px;
td {
border: 1px solid #f5f5f5;
border-width: 0px 1px 1px 0px;
padding: 10px;
height: 50px;
text-align: center;
font-size: 12px;
color: #606266;
}
th {
border: 1px solid #f5f5f5;
border-width: 0px 1px 1px 0px;
}
thead {
background: white;
white-space: nowrap;
.firstHead {
.custom-home-table {
overflow-y: auto;
position: relative;
.filter-table-home {
border-spacing: 0;
border-width: 1px 0px 0px 1px;
border-collapse: collapse;
width: 100%;
color: #909399;
min-width: 1000px;
thead {
tr {
th {
white-space: nowrap;
border: none;
box-sizing: border-box;
background: var(--td--right-back-color-2);
}
}
& > :nth-child(1) {
th {
font-weight: 700;
font-size: 14px;
color: var(--td--main-btn-color-1);
white-space: nowrap;
font-family: 'bold';
padding: 4px 12px;
}
.t-align-center {
height: 30px !important;
padding: 0;
}
& > :nth-child(1) {
&::before {
border-left: none;
border-right: none;
}
}
& > :last-child {
&::before {
border-right: none;
}
}
}
& > :nth-child(2) {
th {
font-weight: 500;
font-size: 14px;
font-family: 'Medium';
border-bottom: 1px solid var(--new-border-4);
padding: 10px 12px;
.thead-sort-box {
.dja();
cursor: pointer;
}
}
& > :nth-child(1) {
&::before {
border-left: none;
}
}
}
}
tbody {
font-size: var(--font-size-s);
tr {
background: var(--td-table-tr-back-color);
transition: background-color 0s ease-in;
cursor: pointer;
td {
border: none;
border-bottom: 1px solid var(--new-border-3);
background: var(--new-background-5);
font-family: 'Regular';
padding: 10px 12px;
}
.fs {
font-weight: 500;
font-size: 14px;
color: var(--td-Search-info-color-1);
}
.fs2 {
font-weight: 600;
font-size: 14px;
}
}
.row-active {
td {
background: var(--td-table-tr-click-back-color);
}
}
}
.name-block {
.tn {
color: var(--main-theme-color);
font-weight: 700;
font-size: 16px;
font-family: 'bold';
}
.symbol {
color: var(--td-search-btn-back-1);
margin-top: 2px;
font-size: 14px;
}
}
.up {
color: #23ab94;
}
.down {
color: #f85260;
}
.custom-r-time-td {
font-weight: 600;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
}
.custom-Indicators-td {
font-size: 14px;
}
}
}
.page-footer {
padding: 0 24px;
background: var(--td--right-back-color-2);
}
}
</style>
views/token/FilterBtn/index.less
......@@ -3,6 +3,9 @@
align-items: center;
height: 44px;
padding-left: 8px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: var(--td--right-back-color-2);
.table-filter-btn {
height: 30px;
border: none;
......
views/token/SecurityCheck.vue
......@@ -3,8 +3,8 @@
<div class="header-box">{{ $t('securityCheck.securityCheck') }}</div>
<div class="field-list-status" v-show="ChainObj.honeypot.request">
<div class="field-header">
<div class="label">
{{ $t('securityCheck.honeypot') }}：
<div class="label">{{ $t('securityCheck.honeypot') }}：</div>
<div class="value">
<a :href="honeypotLink" target="_blank">
<Share></Share>
</a>
......@@ -45,8 +45,8 @@
</div>
<div class="field-list-status">
<div class="field-header">
<div class="label">
{{ $t('securityCheck.gopluslabs') }}：
<div class="label">{{ $t('securityCheck.gopluslabs') }}：</div>
<div class="value">
<a :href="gopluslabsLink" target="_blank">
<Share></Share>
</a>
......@@ -217,7 +217,7 @@ const getList = (token: string, Obj: any) => {
border-left: 1px solid var(--new-border-8);
border-right: 1px solid var(--new-border-8);
.header-box {
padding: 4px 12px;
padding: 4px 16px;
.dja();
height: 40px;
border-bottom: var(--new-border-2);
......@@ -228,31 +228,34 @@ const getList = (token: string, Obj: any) => {
}
.field-list-status {
.field-header {
padding: 4px 12px;
padding: 4px 16px;
font-size: var(--font-size-l);
color: var(--td--main-btn-color-1);
margin-top: 5px;
width: 80%;
.dj(space-between);
.label {
.dj(space-between);
font-family: 'Medium';
}
.value {
padding-right: 12px;
}
}
.field-row {
padding: 4px 12px;
font-size: 12px;
padding: 4px 16px;
font-size: 13px;
.dj(space-between);
width: 80%;
&:hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
}
.label {
color: var(--td-text-color-secondary);
color: var(--new-color-7);
font-family: 'Regular';
}
.value {
color: var(--td-text-color-primary);
font-family: 'Medium';
text-align: right;
padding-right: 12px;
}
}
}
......
views/token/TimeTab.vue
......@@ -168,10 +168,10 @@ const getTimeList = async (PoolAddress) => {
background: var(--td--right-back-color-2);
.label {
padding-top: 12px;
color: var(--td-text-color-secondary);
color: var(--new-color-7);
font-size: 12px;
margin-bottom: 6px;
font-family: 'Light';
font-family: 'Regular';
}
.value {
color: var(--td-text-color-primary);
......
views/token/TokenInfo.vue
......@@ -76,11 +76,11 @@ watch(
<style lang="less">
@import '@/style/flex.less';
.token-info-wrapper {
margin-top: 12px;
margin: 12px 0;
.field-list {
.field-row {
padding: 4px 16px;
font-size: 12px;
font-size: 13px;
.dj(space-between);
&:hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
......@@ -89,8 +89,8 @@ watch(
padding-left: 10px;
width: 40%;
flex-shrink: 0;
color: var(--td-text-color-secondary);
font-family: 'Regular';
color: var(--new-color-7);
font-family: 'Medium';
}
.value {
width: 50%;
......
views/token/TokenList.vue
......@@ -61,455 +61,11 @@
</div>
</template>
<script setup lang="tsx">
import { parsePercent, parseCoinAmount, parseNumberToK } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import CustPagination from './CustPagination.vue';
import request from '@/utils/request';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
import JumpOther from './JumpOther.vue';
import KLink from '/public/images/svg/table/k_link.svg';
import analysisSvg from '/public/images/svg/table/media.svg';
import SortSvg from '/public/images/svg/table/sort.svg';
import UpSvg from '/public/images/svg/table/up.svg';
import DownSvg from '/public/images/svg/table/down.svg';
import { webLogo } from '@/constants/logo';
import FilterBtns from './FilterBtn';
const route = useRoute();
// 当前链
const chain = useChain();
const loading = ref(false);
// 当前请求哪个接口
const currentRequestType = ref(1);
// 筛选条件
const GlbFilter = useCurFilter();
const HeadTokenType = useTableHeadToken();
const ChainObj = ref();
if (route.params.chain) {
let Obj = filterChainObj('name', route.params.chain);
if (Obj) {
ChainObj.value = Obj;
chain.value = Obj.value;
HeadTokenType.value = ChainObj.value.Currency[0];
}
} else {
ChainObj.value = filterChainObj('value', chain.value);
}
useHead({
title: `Dexfilter | ${ChainObj.value.name}`,
link: [webLogo],
meta: [
{
name: 'description',
content:
'DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。',
},
],
});
const { t } = useI18n();
const pageNum = ref(1);
if (route.params.page) {
if (typeof parseInt(route.params.page) === 'number')
pageNum.value = parseInt(route.params.page);
GlbFilter.value.page = parseInt(route.params.page);
}
// 预渲染的数据
const PreRenderList = UsePreRenderList();
const resultData = reactive(PreRenderList.value);
// 右侧数据
const RightInfo = useCurrentRightInfo();
const isFirst = ref(true);
// 新接口当前参数
const NewParams = ref({});
// 通知表格变化
const getTableList = async () => {
try {
loading.value = true;
let result: any = await request.get(`/v1${chain.value}/index`, {
params: GlbFilter.value,
});
if (result.list.length) {
TableFilter(result);
if (isFirst.value) {
// 通知右侧请求接口
RightInfo.value.token = result.list[0].token;
RightInfo.value.tb = result.list[0].tbname;
RightInfo.value.r24h = result.list[0].r24h;
isFirst.value = false;
}
}
loading.value = false;
} catch (e) {
loading.value = false;
} finally {
loading.value = false;
}
};
const getNewTableList = async () => {
try {
loading.value = true;
let params = JSON.parse(JSON.stringify(GlbFilter.value));
if ('nt' in params) {
delete params.nt;
}
let res: any = await request.get(`/v1${chain.value}/phone/index`, {
params: {
...params,
page: pageNum.value,
...NewParams.value,
},
});
loading.value = false;
TableFilter(res);
} catch (e) {
console.log(e);
loading.value = false;
} finally {
loading.value = false;
}
};
const filterChange = (value: number, txn: string) => {
pageNum.value = 1;
currentRequestType.value = value;
if (value == 1) {
// 旧接口
getTableList();
} else {
NewParams.value = JSON.parse(JSON.stringify({}));
if (txn == 'txn') {
NewParams.value.date_orderby = txn;
NewParams.value.sort = 'desc';
} else if (txn == 'max-up') {
// 最大涨幅
NewParams.value.date_orderby = 'radio';
NewParams.value.sort = 'desc';
} else if (txn == 'max-down') {
// 最大跌幅
NewParams.value.date_orderby = 'radio';
NewParams.value.sort = 'asc';
}
getNewTableList();
}
};
const ChangeTable = useChangeTable();
watch(
() => ChangeTable.value,
(v) => {
if (currentRequestType.value == 1) {
getTableList();
} else {
getNewTableList();
}
}
);
// 表格数据过滤方法
const TableFilter = (result: any) => {
if ('list' in result && result.list.length) {
result.list.forEach((item: any, index: number) => {
item.index = index + 1;
item.up = '$' + parseCoinAmount(item.up);
// 加上$符号后，无法排序，故加上原始vn
item.oldVn = item.vn;
item.vn = '$' + parseNumberToK(item.vn);
// 旧pb
item.oldPb = item.pb;
item.pb = parseNumberToK(item.pb);
item.r5m = parseFloat(item.r5m).toFixed(3);
item.r1h = parseFloat(item.r1h).toFixed(3);
item.r4h = parseFloat(item.r4h).toFixed(3);
item.r24h = parseFloat(item.r24h).toFixed(3);
// txn
});
resultData.list = JSON.parse(JSON.stringify(result.list));
resultData.total = result.dataCount;
} else {
resultData.list = [];
}
};
// 预取数据
const { refresh } = await useLazyFetch(
() => `http://156.247.9.93:9501/v1${chain.value}/index`,
{
params: GlbFilter.value,
onResponse({ request, response, options }) {
try {
loading.value = false;
if (response._data.data) {
TableFilter(toRaw(response._data.data));
}
} catch (e) {
resultData.list = [];
console.log(e);
}
return response._data;
},
onRequestError({ error }) {
console.log(error);
},
}
);
// 当前选中的行数
const CurLineIndex = ref(0);
function next() {
loading.value = true;
refresh();
}
watch(
() => chain.value,
(v) => {
CurLineIndex.value = 0;
pageNum.value = 1;
// 修改title
ChainObj.value = filterChainObj('value', chain.value);
// 请求数据
currentRequestType.value = 1;
getTableList();
}
);
// 判断是否需要加$
const Judgment = () => {
if (HeadTokenType.value === 'USDT') {
return '$';
} else {
return '';
}
};
// 添加行类名
const getRowClassName = ({ row, rowIndex }) => {
if (rowIndex == CurLineIndex.value) {
return 'custom-third-class-name';
}
return '';
};
// tbName---流动池折线图传递参数
const handleRowClick = ({ index, row }) => {
CurLineIndex.value = index;
// 提交到右侧
RightInfo.value.token = row.token;
RightInfo.value.tb = row.tbname;
RightInfo.value.r24h = row.r24h.toString();
};
// 表格数据轮询
let listInterval: any = null;
// 监听是否切出页面
const listenerWindow = (fn: any) => {
document.addEventListener('visibilitychange', fn);
};
// 取消监听
const closeListener = (fn: any) => {
document.removeEventListener('visibilitychange', fn);
};
// 关闭定时器
const closeInterVal = () => {
if (listInterval) {
clearInterval(listInterval);
}
};
// 有数据，开启定时器
const Intervalfun = () => {
listInterval = setInterval(() => {
if (currentRequestType.value == 1) {
getTableList();
} else {
getNewTableList();
}
}, 10000);
};
// 窗口关闭和打开要执行的方法
const windowOpenFn = (e: any) => {
// ==visible代表在当前窗口
let isExist = e.target.visibilityState;
if (isExist === 'visible') {
// 先关再开
closeInterVal();
Intervalfun();
} else {
// 离开页面
closeInterVal();
}
};
// 表头吸顶
const TableScroll = ref<any>(null);
onMounted(() => {
// 开启屏幕监听
listenerWindow(windowOpenFn);
// 开启定时器
// 先关再开
closeInterVal();
Intervalfun();
// 给右侧提供第一条数据
if (resultData.list.length) {
RightInfo.value.token = resultData.list[0].token;
RightInfo.value.tb = resultData.list[0].tbname;
RightInfo.value.r24h = resultData.list[0].r24h;
}
loading.value = false;
TableScroll.value = {
offsetTop: -1,
zIndex: 10,
container: '#layout-scroll',
};
});
onUnmounted(() => {
closeListener(windowOpenFn);
closeInterVal();
});
const onCurrentChange = (v) => {
pageNum.value = v;
GlbFilter.value.page = v;
// next();
if (currentRequestType.value == 1) {
getTableList();
} else {
getNewTableList();
}
};
const sort = ref({});
const sortChange = (v, options) => {
sort.value = v;
resultData.list = options.currentDataSource;
};
const riseFailLabel = (h, { col, row }) => {
let className = '';
let prefix = '';
if (row[col.colKey] > 0) {
className = 'up';
prefix = '+';
} else if (row[col.colKey] < 0) {
className = 'down';
prefix = '';
}
return (
<span class={[className, 'custom-r-time-td']}>
{className == 'up' ? <UpSvg></UpSvg> : ''}
{className == 'down' ? <DownSvg></DownSvg> : ''}
{prefix}
{parsePercent(row[col.colKey])}
</span>
);
};
const riseFailLabel2 = (h, { col, row }) => {
return <span class="custom-Indicators-td">{row[col.colKey]}</span>;
};
const columns = computed(() => {
return [
{
title: t('TableList.tokenbase'),
align: 'center',
className: 'custom-before-line',
children: [
{
colKey: 'index',
width: 'auto',
title: '#',
},
{
colKey: 'tn',
title: t('TableList.token'),
},
],
},
{
title: t('TableList.basic'),
align: 'center',
className: 'custom-before-line',
children: [
{
colKey: 'up',
title: t('TableList.price'),
align: 'center',
cell: riseFailLabel2,
},
{
colKey: 'pb',
title: 'Pool',
sortType: 'all',
align: 'center',
cell: riseFailLabel2,
sorter: (a, b) => parseFloat(a.oldPb) - parseFloat(b.oldPb),
},
{
colKey: 'vn',
title: t('TableList.volume'),
sortType: 'all',
cell: riseFailLabel2,
sorter: (a, b) => parseFloat(a.oldVn) - parseFloat(b.oldVn),
align: 'center',
},
{
colKey: 'txn',
title: t('TableList.txns'),
sortType: 'all',
cell: riseFailLabel2,
sorter: (a, b) => a.txn - b.txn,
align: 'center',
},
],
},
{
title: t('TableList.priceChange'),
align: 'center',
className: 'custom-before-line',
children: [
{
colKey: 'r5m',
title: t('TableList.time1'),
cell: riseFailLabel,
sortType: 'all',
sorter: (a, b) => a.r5m - b.r5m,
align: 'center',
},
{
colKey: 'r1h',
title: t('TableList.time2'),
cell: riseFailLabel,
sortType: 'all',
sorter: (a, b) => a.r1h - b.r1h,
align: 'center',
},
{
colKey: 'r4h',
title: t('TableList.time3'),
cell: riseFailLabel,
sortType: 'all',
sorter: (a, b) => a.r4h - b.r4h,
align: 'center',
},
{
colKey: 'r24h',
title: t('TableList.time4'),
cell: riseFailLabel,
sortType: 'all',
sorter: (a, b) => a.r24h - b.r24h,
align: 'center',
},
],
},
{
title: t('TableList.others'),
align: 'center',
className: 'custom-before-line',
children: [
{
colKey: 'operation',
title: t('TableList.k_line'),
align: 'center',
},
{
colKey: 'media',
title: t('TableList.mediaData'),
align: 'center',
},
],
},
];
});
</script>
<style lang="less">
@import '@/style/variables.less';
......
views/token/rightDetailHeader/index.less
......@@ -13,6 +13,7 @@
background-color: var(--td--right-back-color-2);
.filled-star-box {
.dja(flex-end);
margin-top: 4px;
.filled-star {
color: var(--td-brand-color);
cursor: pointer;
......@@ -52,8 +53,9 @@
}
.address-info {
display: flex;
color: var(--new-color-3);
font-family: 'Normal';
color: var(--new-color-7);
font-family: 'Regular';
margin-top: 1px;
.address-info-item {
font-size: var(--font-size);
.address {
......@@ -61,6 +63,9 @@
}
}
}
.margin {
margin-top: 2px;
}
:hover.address-info {
cursor: pointer;
}
......@@ -75,9 +80,9 @@
display: flex;
white-space: nowrap;
.price {
color: var(--new-color-4);
font-size: 16px;
font-weight: bold;
color: var(--new-color-4);
.price-box {
.dja(flex-end);
height: 50px;
......@@ -85,9 +90,10 @@
font-size: 28px;
min-height: 50px;
font-family: 'bold';
color: var(--td-Search-info-color-1);
}
.r24h-cl {
font-size: var(--font-size-s);
font-size: 13px;
font-weight: normal;
margin-top: -3px;
text-align: right;
......
views/token/rightDetailHeader/index.tsx
......@@ -73,7 +73,7 @@ export default defineComponent({
</span>
</span>
</div>
<div class="address-info">
<div class="address-info margin">
<span class="address-info-item">
<span>{t('TableList.pool')}</span>
<span class="address">：{props.tokenInfo.tbnameSub}</span>
......
views/token/tableSort.vue
<template>
<div class="custom-sort-th">
<AscSvg
:class="{ active: sorttype === 'asc' }"
class="sort-icon asc"
@click="sortChange('asc')"
></AscSvg>
<DescSvg
:class="{ active: sorttype === 'desc' }"
class="sort-icon desc"
@click="sortChange('desc')"
></DescSvg>
<t-tooltip :content="$t('filter.asc')">
<AscSvg
:class="{ active: sorttype === 'asc' }"
class="sort-icon asc"
@click="sortChange('asc')"
></AscSvg>
</t-tooltip>
<t-tooltip :content="$t('filter.desc')">
<DescSvg
:class="{ active: sorttype === 'desc' }"
class="sort-icon desc"
@click="sortChange('desc')"
></DescSvg>
</t-tooltip>
</div>
</template>
......@@ -26,7 +30,7 @@ const emit = defineEmits(['submitSort']);
// 当前排序状态
const sorttype = ref('all');
const sortChange = (value: string) => {
const { options, field } = props;
const { field } = props;
if (value == sorttype.value) {
// 代表重复点击--恢复表格初始状态
sorttype.value = 'all';
......@@ -39,9 +43,14 @@ const sortChange = (value: string) => {
});
};
watch(
() => props.options[props.options.field],
() => props.options,
(v) => {
console.log(v);
if (!v.status) {
sorttype.value = 'all';
}
},
{
deep: true,
}
);
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment