Skip to content

D
dexfilter-web-nuxt3
Commit de6ee3bb by lei
Options

1

parent 2a246fa2
Showing with 350 additions and 272 deletions
components/Animation.vue
......@@ -6,6 +6,7 @@
height: height,
background: background,
position: position,
zIndex: zIndex,
}"
:class="{ 'custom-is-table-box': !isTable }"
>
......@@ -31,26 +32,27 @@ const props = withDefaults(
left?: string;
top?: string;
isTable?: boolean;
zIndex?: number;
}>(),
{
background: 'rgba(230,230,230,0.2)',
position: 'absolute',
width: '100%',
height: '100%',
left: '0px',
top: '0px',
background: "rgba(230,230,230,0.2)",
position: "absolute",
width: "100%",
height: "100%",
left: "0px",
top: "0px",
isTable: false,
zIndex: 100,
}
);
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
@import "@/style/flex.less";
.custom-loading-box {
top: 0;
// -webkit-transform: translateY(-50%) translateX(-50%);
// transform: translateY(-50%) translateX(-50%);
z-index: 100;
box-sizing: border-box;
.ball-beat {
position: sticky;
......
composables/useTable.ts
/*
* @Author: lei 2897821407@qq.com
* @Date: 2023-02-20 19:44:53
* @LastEditors: lei 2897821407@qq.com
* @LastEditTime: 2023-02-22 18:10:45
* @FilePath: \dexfilter-web-nuxt3\composables\useTable.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import {
DefaultChain,
filterChainObj,
} from '@/constants/UnifiedManagementChain';
} from "@/constants/UnifiedManagementChain";
// 表格需要展示的币种名称
export const useTableHeadToken = () => {
return useState('TableHeadTokenType', () => {
let Obj = filterChainObj('value', DefaultChain);
return useState("TableHeadTokenType", () => {
let Obj = filterChainObj("value", DefaultChain);
return Obj.Currency[0];
});
};
// 通知收藏内容更新
export const CollectionChange = () => {
return useState('CollectionTable', () => 0);
return useState("CollectionTable", () => 0);
};
// 通知右侧详情，取消收藏
export const CollectionDelete = () => {
return useState('CollectionListDetele', () => 1);
return useState("CollectionListDetele", () => 1);
};
// 折线图是否重载
export const useWatchEcharts = () => {
return useState('WatchEchartsInit', () => 1);
return useState("WatchEchartsInit", () => 1);
};
// loading
export const useTableLoading = () => {
return useState('TableLoading', () => false);
return useState("TableLoading", () => false);
};
// table数组及dataCount
export const useTableListAndCount = () => {
return useState("TableListAndCount", () => {
return {
list: [] as any[],
filterList: [] as any[],
total: 0,
};
});
};
composables/useToken.ts
import { useState } from '#app';
import { DefaultChain } from '@/constants/UnifiedManagementChain';
import { useState } from "#app";
import { DefaultChain } from "@/constants/UnifiedManagementChain";
const tokenName = 'token';
let filter = {
pool_column: 'wb',
const tokenName = "token";
interface filterfield {
pool_column?: string;
nt?: number;
range_date?: string;
rise_or_fall?: string;
page?: number;
page_size?: number;
date_orderby?: string;
sort?: string;
}
let filter: filterfield = {
pool_column: "wb",
nt: 0,
range_date: '5m',
rise_or_fall: 'up',
range_date: "5m",
rise_or_fall: "up",
page: 1,
page_size: 100,
};
// 获取当前交易token
export const useCurToken = () => {
return useState(tokenName, () => 'bar');
return useState(tokenName, () => "bar");
};
// 当前链
export const useChain = () => {
return useState('chain', () => DefaultChain);
return useState("chain", () => DefaultChain);
};
// 当前筛选条件
export const useCurFilter = () => {
return useState('filterParams', () => filter);
return useState("filterParams", () => filter);
};
// 当前时间筛选条件
export const useCurrentTimeChange = () => {
return useState('CurrentTimeChange', () => '5m');
return useState("CurrentTimeChange", () => "5m");
};
// 通知表格请求数据
export const useChangeTable = () => {
return useState('filterChange', () => 1);
return useState("filterChange", () => 1);
};
// 当前右侧的token和tb等数据
export const useCurrentRightInfo = () => {
return useState('RightInfo', () => ({
token: '',
tb: '',
r24h: '',
return useState("RightInfo", () => ({
token: "",
tb: "",
r24h: "",
up: null,
swap: "",
}));
};
// 当前主题
export const useCurTheme = () => {
return useState('theme', () => 'light');
};
// 预渲染的数据列表
export const UsePreRenderList = () => {
return useState('preRenderList', () => ({
list: [],
total: 0,
}));
return useState("theme", () => "light");
};
// 用户钱包地址
export const useUserAddress = () => {
return useState('walletAddress', () => '');
return useState("walletAddress", () => "");
};
// 当前k线的价格
export const useCurrentKLinePrice = () => {
return useState('CurrentKLinePrice', () => 0);
return useState("CurrentKLinePrice", () => 0);
};
// 全局loading
export const useGlbLogin = () => {
return useState('GlbLogin', () => false);
return useState("GlbLogin", () => false);
};
public/images/svg/filter/CloseScrollToken.svg
<svg width="10" height="45" viewBox="0 0 10 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 -1C5.52285 -1 10 3.47715 10 9H8C8 4.58172 4.41828 1 0 1V-1ZM10 36C10 41.5228 5.52285 46 0 46V44C4.41828 44 8 40.4183 8 36H10ZM0 45V0V45ZM0 -1C5.52285 -1 10 3.47715 10 9V36C10 41.5228 5.52285 46 0 46V44C4.41828 44 8 40.4183 8 36V9C8 4.58172 4.41828 1 0 1V-1Z" fill="#DCDCDC" mask="url(#path-1-inside-1_3031_9687)"/>
<path d="M4.4875 16.5622C4.56568 16.7243 4.60905 16.9361 4.60905 17.1559C4.60905 17.3758 4.56568 17.5876 4.4875 17.7497L1.9875 22.4997L4.4875 27.2497C4.53368 27.4157 4.55065 27.6055 4.53591 27.7912C4.52118 27.977 4.47551 28.1488 4.40562 28.2816C4.33572 28.4144 4.24527 28.5012 4.14753 28.5292C4.04979 28.5572 3.9499 28.5249 3.8625 28.4372L1.0125 23.1291C0.926767 22.9594 0.877693 22.7348 0.875 22.4997C0.876078 22.2674 0.925514 22.0454 1.0125 21.8822L3.83125 16.5622C3.87424 16.48 3.92536 16.4147 3.98167 16.3702C4.03799 16.3257 4.09838 16.3027 4.15938 16.3027C4.22037 16.3027 4.28076 16.3257 4.33708 16.3702C4.39339 16.4147 4.44451 16.48 4.4875 16.5622Z" fill="#838383"/>
<path d="M6.9875 16.5622C7.06568 16.7243 7.10905 16.9361 7.10905 17.1559C7.10905 17.3758 7.06568 17.5876 6.9875 17.7497L4.4875 22.4997L6.9875 27.2497C7.03368 27.4157 7.05065 27.6055 7.03591 27.7912C7.02118 27.977 6.97551 28.1488 6.90562 28.2816C6.83572 28.4144 6.74527 28.5012 6.64753 28.5292C6.54979 28.5572 6.4499 28.5249 6.3625 28.4372L3.5125 23.1291C3.42677 22.9594 3.37769 22.7348 3.375 22.4997C3.37608 22.2674 3.42551 22.0454 3.5125 21.8822L6.33125 16.5622C6.37424 16.48 6.42536 16.4147 6.48167 16.3702C6.53799 16.3257 6.59838 16.3027 6.65938 16.3027C6.72037 16.3027 6.78076 16.3257 6.83708 16.3702C6.89339 16.4147 6.94451 16.48 6.9875 16.5622Z" fill="#838383"/>
</svg>
\ No newline at end of file
<path d="M0 -1C6.07513 -1 11 3.92487 11 10H9C9 5.02944 4.97056 1 0 1V-1ZM11 35C11 41.0751 6.07513 46 0 46V44C4.97056 44 9 39.9706 9 35H11ZM0 45V0V45ZM0 -1C6.07513 -1 11 3.92487 11 10V35C11 41.0751 6.07513 46 0 46V44C4.97056 44 9 39.9706 9 35V10C9 5.02944 4.97056 1 0 1V-1Z" fill="#DCDCDC" mask="url(#path-1-inside-1_2996_6270)"/>
</svg>
public/images/svg/filter/Closeleft.svg 0 → 100644
<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.03625 0.562677C4.12225 0.72474 4.16995 0.936591 4.16995 1.15643C4.16995 1.37626 4.12225 1.58811 4.03625 1.75018L1.28625 6.50018L4.03625 11.2502C4.08705 11.4162 4.10571 11.606 4.0895 11.7917C4.07329 11.9774 4.02306 12.1493 3.94618 12.2821C3.86929 12.4149 3.7698 12.5017 3.66228 12.5297C3.55477 12.5577 3.44489 12.5254 3.34875 12.4377L0.21375 7.12955C0.119443 6.95992 0.0654621 6.7353 0.0625 6.50018C0.063686 6.26791 0.118066 6.04589 0.21375 5.88268L3.31438 0.562677C3.36166 0.480456 3.41789 0.415203 3.47984 0.370675C3.54178 0.326147 3.60822 0.303223 3.67531 0.303223C3.74241 0.303223 3.80884 0.326147 3.87079 0.370675C3.93273 0.415203 3.98896 0.480456 4.03625 0.562677Z" fill="#838383"/>
<path d="M6.78625 0.562677C6.87225 0.72474 6.91995 0.936591 6.91995 1.15643C6.91995 1.37626 6.87225 1.58811 6.78625 1.75018L4.03625 6.50018L6.78625 11.2502C6.83705 11.4162 6.85571 11.606 6.8395 11.7917C6.82329 11.9774 6.77306 12.1493 6.69618 12.2821C6.61929 12.4149 6.5198 12.5017 6.41228 12.5297C6.30477 12.5577 6.19489 12.5254 6.09875 12.4377L2.96375 7.12955C2.86944 6.95992 2.81546 6.7353 2.8125 6.50018C2.81369 6.26791 2.86807 6.04589 2.96375 5.88268L6.06437 0.562677C6.11166 0.480456 6.16789 0.415203 6.22984 0.370675C6.29178 0.326147 6.35822 0.303223 6.42531 0.303223C6.49241 0.303223 6.55884 0.326147 6.62079 0.370675C6.68273 0.415203 6.73896 0.480456 6.78625 0.562677Z" fill="#838383"/>
</svg>
public/images/svg/filter/Closeright.svg 0 → 100644
<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.96375 12.4373C2.87775 12.2753 2.83005 12.0634 2.83005 11.8436C2.83005 11.6237 2.87775 11.4119 2.96375 11.2498L5.71375 6.49982L2.96375 1.74982C2.91295 1.58377 2.89429 1.39398 2.9105 1.20827C2.92671 1.02256 2.97694 0.850703 3.05382 0.717902C3.13071 0.585101 3.2302 0.49834 3.33772 0.470342C3.44523 0.442343 3.55511 0.474579 3.65125 0.562324L6.78625 5.87045C6.88056 6.04008 6.93454 6.2647 6.9375 6.49982C6.93631 6.73209 6.88193 6.95411 6.78625 7.11732L3.68562 12.4373C3.63834 12.5195 3.58211 12.5848 3.52016 12.6293C3.45822 12.6739 3.39178 12.6968 3.32469 12.6968C3.25759 12.6968 3.19116 12.6739 3.12921 12.6293C3.06727 12.5848 3.01103 12.5195 2.96375 12.4373Z" fill="#838383"/>
<path d="M0.21375 12.4373C0.127754 12.2753 0.0800495 12.0634 0.0800495 11.8436C0.0800495 11.6237 0.127754 11.4119 0.21375 11.2498L2.96375 6.49982L0.21375 1.74982C0.162951 1.58377 0.144288 1.39398 0.160497 1.20827C0.176707 1.02256 0.226937 0.850703 0.303821 0.717902C0.380706 0.585101 0.480201 0.49834 0.587717 0.470342C0.695233 0.442343 0.805115 0.474579 0.90125 0.562324L4.03625 5.87045C4.13056 6.04008 4.18454 6.2647 4.1875 6.49982C4.18631 6.73209 4.13193 6.95411 4.03625 7.11732L0.935625 12.4373C0.88834 12.5195 0.832105 12.5848 0.77016 12.6293C0.708215 12.6739 0.641783 12.6968 0.574687 12.6968C0.507592 12.6968 0.441159 12.6739 0.379214 12.6293C0.317269 12.5848 0.261035 12.5195 0.21375 12.4373Z" fill="#838383"/>
</svg>
views/layout/rollToken.vue
<template>
<div class="custom-scroll-token">
<span class="close-scroll_box" @click="changeScrollBox">
<CloseScrollToken></CloseScrollToken>
<div class="custom-close-scroll-box">
<CloseScrollToken></CloseScrollToken>
<span
class="left"
:class="{
'revolve-box': srcollType == 'close',
}"
>
<Closeleft></Closeleft>
</span>
</div>
</span>
<transition name="scroll-change">
<div class="header-scroll_box-fa" v-show="srcollType == 'open'">
......@@ -86,14 +96,15 @@
</template>
<script lang="ts" setup>
import request from '@/utils/request';
import { publicTokenImg } from '@/constants/UnifiedManagementChain';
import CloseScrollToken from '/public/images/svg/filter/CloseScrollToken.svg';
import request from "@/utils/request";
import { publicTokenImg } from "@/constants/UnifiedManagementChain";
import CloseScrollToken from "/public/images/svg/filter/CloseScrollToken.svg";
import Closeleft from "/public/images/svg/filter/Closeleft.svg";
const ScrollList = reactive({
list: [],
});
// 滚动代币当前状态--默认展开
const srcollType = ref('open');
const srcollType = ref("open");
// 获取当前链
const chain = useChain();
watch(
......@@ -103,17 +114,17 @@ watch(
}
);
// 动画速度
const animationSpeed = ref('');
const animationSpeed = ref("");
onMounted(() => {
if (!ScrollList.list.length) {
getPublicToken();
}
});
const changeScrollBox = () => {
if (srcollType.value == 'open') {
srcollType.value = 'close';
if (srcollType.value == "open") {
srcollType.value = "close";
} else {
srcollType.value = 'open';
srcollType.value = "open";
}
};
// 获取滚动代币
......@@ -136,8 +147,8 @@ const getPublicToken = async () => {
// 检测图片是否存在
// console.log(Obj.sy);
Obj.img = CurImgObj.img;
if (Obj.sy.indexOf('.e') !== -1) {
Obj.sy = Obj.sy.replace('.e', 'E');
if (Obj.sy.indexOf(".e") !== -1) {
Obj.sy = Obj.sy.replace(".e", "E");
}
list.push(Obj);
});
......@@ -151,32 +162,33 @@ const getPublicToken = async () => {
};
// 图片
const doubt = {
img: '/images/svg/header/doubt.svg',
img: "/images/svg/header/doubt.svg",
};
const scroll_box_1 = ref(null);
const scroll_box_2 = ref(null);
const scroll_box_3 = ref(null);
// 鼠标移入暂停
const stopAn = () => {
scroll_box_1.value.style.animationPlayState = 'paused';
scroll_box_2.value.style.animationPlayState = 'paused';
scroll_box_3.value.style.animationPlayState = 'paused';
scroll_box_1.value.style.animationPlayState = "paused";
scroll_box_2.value.style.animationPlayState = "paused";
scroll_box_3.value.style.animationPlayState = "paused";
};
// 鼠标移出继续滚动
const leaveAn = () => {
scroll_box_1.value.style.animationPlayState = 'running';
scroll_box_2.value.style.animationPlayState = 'running';
scroll_box_3.value.style.animationPlayState = 'running';
scroll_box_1.value.style.animationPlayState = "running";
scroll_box_2.value.style.animationPlayState = "running";
scroll_box_3.value.style.animationPlayState = "running";
};
</script>
<style lang="less">
@import '@/style/variables.less';
@import '@/style/flex.less';
@import "@/style/variables.less";
@import "@/style/flex.less";
.custom-scroll-token {
.header-scroll_box-fa {
user-select: none;
height: 57px;
margin-left: 2px;
.header-scroll_box {
width: 100%;
box-sizing: border-box;
......@@ -211,17 +223,17 @@ const leaveAn = () => {
.span-1 {
padding-left: 6px;
font-weight: 500;
font-family: 'Medium';
font-family: "Medium";
}
}
.right-info {
.da();
.span-2 {
font-weight: 600;
font-family: 'Regular';
font-family: "Regular";
}
.span-3 {
font-family: 'Medium';
font-family: "Medium";
color: #9b96b6;
}
}
......@@ -234,6 +246,20 @@ const leaveAn = () => {
top: 82px;
left: 0;
cursor: pointer;
.custom-close-scroll-box {
position: relative;
.left {
position: absolute;
top: 14px;
left: 1px;
transform: rotateY(0);
transition: transform 0.3s;
}
.revolve-box {
transform: rotateY(180deg);
transition: transform 0.3s;
}
}
}
}
</style>
......
views/token/CustomTokenList.vue
......@@ -42,7 +42,7 @@
<th class="custom-before-line">
<div class="thead-sort-box">
<template v-if="item.title == 'Pool'">
{{ $t('TableList.pool') + HeadTokenType }}
{{ $t("TableList.pool") + HeadTokenType }}
</template>
<template v-else>
{{ item.title }}
......@@ -77,7 +77,7 @@
<th class="custom-before-line" ref="tableTrOne">
<div class="thead-sort-box">
<template v-if="item.title == 'Pool'">
{{ $t('TableList.pool') + HeadTokenType }}
{{ $t("TableList.pool") + HeadTokenType }}
</template>
<template v-else>
{{ item.title }}
......@@ -169,12 +169,12 @@
<template v-if="!resultData.list.length">
<tr>
<td colspan="12">
<div class="custom-no-list">{{ $t('filter.noList') }}</div>
<div class="custom-no-list">{{ $t("filter.noList") }}</div>
</td>
</tr>
</template>
</tbody>
<Animation v-show="loading"></Animation>
<Animation v-show="loading" :zIndex="201"></Animation>
</table>
</div>
<div class="page-footer">
......@@ -189,30 +189,30 @@
</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, getSwap } 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 { webLogo } from '@/constants/logo';
import CustomTableSort from './tableSort.vue';
import { TableSort, TableSortAsc } from '@/utils/tool';
import CustomRadio from '../CustomComponent/radio.vue';
import BscChain from '/public/images/svg/selectChain/bsc.svg';
import SwapSvg from '/public/images/svg/socialInfoWrapper/bscTransaction.svg';
import CustomAvatar from './avatar.vue';
import TokenAvatar from './tokenAvatar.vue';
import useSwap from '@/hooks/useSwap';
import { parsePercent, parseCoinAmount, parseNumberToK } from "@/utils/tool";
import { useI18n } from "vue-i18n";
import CustPagination from "./CustPagination.vue";
import request from "@/utils/request";
import { filterChainObj, getSwap } 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 { webLogo } from "@/constants/logo";
import CustomTableSort from "./tableSort.vue";
import { TableSort, TableSortAsc } from "@/utils/tool";
import CustomRadio from "../CustomComponent/radio.vue";
import BscChain from "/public/images/svg/selectChain/bsc.svg";
import SwapSvg from "/public/images/svg/socialInfoWrapper/bscTransaction.svg";
import CustomAvatar from "./avatar.vue";
import TokenAvatar from "./tokenAvatar.vue";
import useSwap from "@/hooks/useSwap";
const { ChainObj, getCurSwap, getCurChainImg } = useSwap();
const route = useRoute();
const LoadHead = ref(false);
const CustomHead = ref(null);
const CustomTable = ref(null);
const BodyscrollDom = ref(null);
const loading = ref(false);
const CustomHead = ref<HTMLTableSectionElement | null>(null);
const CustomTable = ref<HTMLDivElement | null>(null);
const BodyscrollDom = ref<HTMLElement | null>(null);
const loading = useTableLoading();
const pageNum = ref(1);
// 当前链
const chain = useChain();
......@@ -222,190 +222,189 @@ const HeadTokenType = useTableHeadToken();
const GlbFilter = useCurFilter();
const CurrentTime = useCurrentTimeChange();
// 吸顶元素
const affixedHeadRef = ref(null);
const affixedTableWidth = ref('');
const affixedHeadRef = ref<HTMLDivElement | null>(null);
const affixedTableWidth = ref("");
// 当前选中的行数
const CurLineIndex = ref(0);
// 表格数据轮询
let listInterval: any = null;
const ChangeTable = useChangeTable();
// 预渲染的数据
const PreRenderList = UsePreRenderList();
const resultData = reactive({
...PreRenderList.value,
filterList: [],
});
const resultData = useTableListAndCount();
// 动态获取colgroup的宽度--用于吸顶表头
const tableTrOne = ref(null);
const tableTrOne = ref<any>(null);
// colGroupList
const colGroupList = reactive({
const colGroupList = reactive<{
list: string[];
}>({
list: [],
});
// 右侧数据
const RightInfo = useCurrentRightInfo();
// 吸顶表头左右跟随滑动
const affixedHead = reactive({
left: '',
top: '',
height: '',
width: '',
left: "",
top: "",
height: "",
width: "",
});
// 当前排序状态
const SortOptions = reactive({
const SortOptions = reactive<any>({
up: {
field: 'up',
type: 'all',
field: "up",
type: "all",
status: false,
},
pb: {
field: 'pb',
type: 'all',
field: "pb",
type: "all",
status: false,
},
vn: {
field: 'vn',
type: 'all',
field: "vn",
type: "all",
status: false,
},
txn: {
field: 'txn',
type: 'all',
field: "txn",
type: "all",
status: false,
},
r5m: {
field: 'r5m',
type: 'all',
field: "r5m",
type: "all",
status: false,
},
r1h: {
field: 'r1h',
type: 'all',
field: "r1h",
type: "all",
status: false,
},
r4h: {
field: 'r4h',
type: 'all',
field: "r4h",
type: "all",
status: false,
},
r24h: {
field: 'r24h',
type: 'all',
field: "r24h",
type: "all",
status: false,
},
});
const currentBtn = ref('default');
const currentBtn = ref("default");
const btns = computed(() => [
{
label: t('filter.pairs'),
value: 'default',
label: t("filter.pairs"),
value: "default",
},
{
label: t('filter.updated'),
value: 'new',
label: t("filter.updated"),
value: "new",
},
{
label: t('filter.gainers'),
value: 'max-up',
label: t("filter.gainers"),
value: "max-up",
},
{
label: t('filter.losers'),
value: 'max-down',
label: t("filter.losers"),
value: "max-down",
},
{
label: t('filter.r24hVolume'),
value: 'txn',
label: t("filter.r24hVolume"),
value: "txn",
},
]);
const onFilterChange = (value: string) => {
if (value == 'new') {
if (value == "new") {
GlbFilter.value.nt = 1;
} else if (value == 'default') {
} else if (value == "default") {
GlbFilter.value.nt = 0;
}
// 永远请求第一页
pageNum.value = 1;
if (value == 'txn') {
GlbFilter.value.date_orderby = 'txn';
GlbFilter.value.sort = 'desc';
} else if (value == 'max-up') {
if (value == "txn") {
GlbFilter.value.date_orderby = "txn";
GlbFilter.value.sort = "desc";
} else if (value == "max-up") {
// 最大涨幅
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
GlbFilter.value.sort = 'desc';
} else if (value == 'max-down') {
GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
GlbFilter.value.sort = "desc";
} else if (value == "max-down") {
// 最大跌幅
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
GlbFilter.value.sort = 'asc';
GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
GlbFilter.value.sort = "asc";
}
getTableList();
};
// 获取涨跌幅
const getUpDown = (value: string) => {
if (value && value[0] == '-') {
if (value && value[0] == "-") {
return `${value}%`;
}
return `+${value}%`;
};
// 获取涨跌幅颜色
const getUpDownColor = (value: string) => {
if (value && value[0] == '-') {
if (value && value[0] == "-") {
// down
return '#f23645';
return "#f23645";
}
// up
return '#23ab94';
return "#23ab94";
};
// 获取表格可视区域宽度
const getTableWidth = () => {
if (CustomTable.value) {
// 获取元素可视区域宽度
let width = CustomTable.value.clientWidth;
affixedHead.width = width + 'px';
affixedHead.width = width + "px";
}
};
// 排序事件
const submitSort = ({ sort, field }: any) => {
// 先将其他th的筛选关闭
Object.keys(SortOptions).forEach((item: any) => {
Object.keys(SortOptions).forEach((item: string) => {
if (item == field) {
SortOptions[item].type = sort;
SortOptions[item].status = true;
} else {
SortOptions[item].type = 'all';
SortOptions[item].type = "all";
SortOptions[item].status = false;
}
});
// 开始排序
if (sort === 'asc') {
if (sort === "asc") {
// 升序
resultData.list = TableSortAsc(resultData.list, field);
} else if (sort === 'desc') {
resultData.value.list = TableSortAsc(resultData.value.list, field);
} else if (sort === "desc") {
// 降序
resultData.list = TableSort(resultData.list, field);
resultData.value.list = TableSort(resultData.value.list, field);
} else {
// 还原
resultData.list = JSON.parse(JSON.stringify(resultData.filterList));
resultData.value.list = JSON.parse(
JSON.stringify(resultData.value.filterList)
);
}
};
// 获取head的宽度赋给吸顶表头
const getMinWidth = () => {
if (CustomHead.value) {
affixedTableWidth.value = CustomHead.value.clientWidth + 'px';
affixedTableWidth.value = CustomHead.value.clientWidth + "px";
}
};
// 表格数据过滤方法
const TableFilter = (result: any) => {
if ('list' in result && result.list.length) {
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_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 = 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);
......@@ -414,12 +413,13 @@ const TableFilter = (result: any) => {
// console.log(item.swapImg);
// console.log('swap名称', item.swap);
});
resultData.list = JSON.parse(JSON.stringify(result.list));
resultData.filterList = JSON.parse(JSON.stringify(result.list));
resultData.total = result.dataCount;
resultData.value.list = JSON.parse(JSON.stringify(result.list));
resultData.value.filterList = JSON.parse(JSON.stringify(result.list));
resultData.value.total = result.dataCount;
} else {
resultData.list = [];
resultData.total = result.dataCount;
resultData.value.list = [];
resultData.value.filterList = [];
resultData.value.total = result.dataCount ? result.dataCount : 0;
}
if (process.client) {
getMinWidth();
......@@ -431,7 +431,7 @@ const getParams = () => {
};
if (CurrentTime.value) {
params.date = CurrentTime.value;
} else if ('date' in params) {
} else if ("date" in params) {
delete params.date;
}
return params;
......@@ -442,9 +442,9 @@ const getBaseUrl = () => {
// if (process.dev) {
// return "http://156.247.9.93:9501";
// }
return 'https://apiv1.dexfilter.com/';
return "http://apiv1.dexfilter.com/";
} else {
return '/v1';
return "/v1";
}
};
......@@ -452,9 +452,9 @@ const getBaseUrl = () => {
const { data, refresh } = await useFetch(() => `/v1${chain.value}/indexV1`, {
params: getParams(),
lazy: true,
method: 'GET',
mode: 'cors',
credentials: 'include',
method: "GET",
mode: "cors",
credentials: "include",
baseURL: getBaseUrl(),
onRequest(context: any) {},
onResponse({ request, response, options }) {
......@@ -466,16 +466,16 @@ const { data, refresh } = await useFetch(() => `/v1${chain.value}/indexV1`, {
TableFilter(toRaw(response._data.data));
}
} catch (e) {
resultData.list = [];
resultData.value.list = [];
console.log(e);
}
return response._data;
},
onRequestError({ error }) {
console.log(error, '请求错误');
console.log(error, "请求错误");
},
onResponseError(error) {
console.log(error, '返回的error');
console.log(error, "返回的error");
},
});
......@@ -486,22 +486,24 @@ const next = () => {
// 获取默认数据
const getDefaultList = () => {
if (process.client && data.value) {
TableFilter(data.value.data);
if (data.value.data) {
TableFilter(data.value.data);
}
}
};
const CustomgetRoute = () => {
if (route.params.chain) {
let Obj = filterChainObj('name', route.params.chain);
if (route.params.chain && typeof route.params.chain == "string") {
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);
ChainObj.value = filterChainObj("value", chain.value);
}
if (route.params.page) {
if (typeof parseInt(route.params.page) === 'number')
if (route.params.page && typeof route.params.page == "string") {
if (typeof parseInt(route.params.page) === "number")
pageNum.value = parseInt(route.params.page);
GlbFilter.value.page = parseInt(route.params.page);
}
......@@ -514,9 +516,9 @@ useHead({
link: [webLogo],
meta: [
{
name: 'description',
name: "description",
content:
'DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。',
"DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。",
},
],
});
......@@ -527,7 +529,7 @@ const getColGroupWidth = () => {
// 动态改变吸顶表头的th宽度
colGroupList.list.forEach((it: any) => {
tableTrOne.value.forEach((item: any, index: number) => {
colGroupList.list[index] = item.clientWidth + 'px';
colGroupList.list[index] = item.clientWidth + "px";
});
});
};
......@@ -538,7 +540,11 @@ const getTableList = async () => {
let result: any = await request.get(`/v1${chain.value}/indexV1`, {
params: getParams(),
});
if (result.list.length) {
if (Object.prototype.toString.call(result) == "[object Array]") {
resultData.value.list = [];
resultData.value.filterList = [];
resultData.value.total = 0;
} else {
TableFilter(result);
}
loading.value = false;
......@@ -558,16 +564,16 @@ watch(
CurLineIndex.value = 0;
pageNum.value = 1;
// 修改title
ChainObj.value = filterChainObj('value', chain.value);
ChainObj.value = filterChainObj("value", chain.value);
getTableList();
}
);
// 判断是否需要加$
const Judgment = () => {
if (HeadTokenType.value === 'USDT') {
return '$';
if (HeadTokenType.value === "USDT") {
return "$";
} else {
return '';
return "";
}
};
// tbName---流动池折线图传递参数
......@@ -582,11 +588,11 @@ const handleRowClick = (item: any, index: number) => {
};
// 监听是否切出页面
const listenerWindow = (fn: any) => {
document.addEventListener('visibilitychange', fn);
document.addEventListener("visibilitychange", fn);
};
// 取消监听
const closeListener = (fn: any) => {
document.removeEventListener('visibilitychange', fn);
document.removeEventListener("visibilitychange", fn);
};
// 有数据，开启定时器
const Intervalfun = () => {
......@@ -606,7 +612,7 @@ const closeInterVal = () => {
const windowOpenFn = (e: any) => {
// ==visible代表在当前窗口
let isExist = e.target.visibilityState;
if (isExist === 'visible') {
if (isExist === "visible") {
// 先关再开
closeInterVal();
Intervalfun();
......@@ -615,7 +621,7 @@ const windowOpenFn = (e: any) => {
closeInterVal();
}
};
const onCurrentChange = (v) => {
const onCurrentChange = (v: number) => {
loading.value = true;
pageNum.value = v;
GlbFilter.value.page = v;
......@@ -623,20 +629,30 @@ const onCurrentChange = (v) => {
};
const onScrollEvent = () => {
// 获取滚动元素dom
BodyscrollDom.value = document.getElementById('layout-scroll');
if (BodyscrollDom.value) {
affixedHead.top = BodyscrollDom.value.offsetTop + 'px';
BodyscrollDom.value = document.getElementById("layout-scroll");
if (BodyscrollDom.value && CustomHead.value) {
affixedHead.top = BodyscrollDom.value.offsetTop + "px";
let Newclient = CustomHead.value.getBoundingClientRect();
if (Newclient.top <= BodyscrollDom.value.offsetTop) {
// 显示吸顶表头
LoadHead.value = true;
} else {
// 隐藏吸顶表头
LoadHead.value = false;
}
BodyscrollDom.value.onscroll = function (e: any) {
let client = CustomHead.value.getBoundingClientRect();
if (client.top <= BodyscrollDom.value.offsetTop) {
// 显示吸顶表头
LoadHead.value = true;
} else {
// 隐藏吸顶表头
LoadHead.value = false;
if (BodyscrollDom.value && CustomHead.value) {
let client = CustomHead.value.getBoundingClientRect();
if (client.top <= BodyscrollDom.value.offsetTop) {
// 显示吸顶表头
LoadHead.value = true;
} else {
// 隐藏吸顶表头
LoadHead.value = false;
}
getTableWidth();
getColGroupWidth();
}
getTableWidth();
getColGroupWidth();
};
}
};
......@@ -644,15 +660,16 @@ const onTableScroll = () => {
if (CustomTable.value) {
// 表格左右滚动
CustomTable.value.onscroll = function (e: any) {
let left = CustomTable.value.scrollLeft;
//
affixedHeadRef.value.scrollLeft = left;
if (CustomTable.value && affixedHeadRef.value) {
let left = CustomTable.value.scrollLeft;
affixedHeadRef.value.scrollLeft = left;
}
};
}
};
const setColGroupList = () => {
columnsChild.value.forEach((item: any) => {
colGroupList.list.push('0px');
colGroupList.list.push("0px");
});
};
onMounted(() => {
......@@ -662,6 +679,11 @@ onMounted(() => {
onScrollEvent();
// 表格左右滚动
onTableScroll();
//
getTableWidth();
getColGroupWidth();
// 修改吸顶表头宽度
getMinWidth();
// 屏幕宽度变化
window.onresize = function (e: any) {
getTableWidth();
......@@ -676,12 +698,12 @@ onMounted(() => {
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;
RightInfo.value.up = resultData.list[0].up;
RightInfo.value.swap = resultData.list[0].swap;
if (resultData.value.list.length) {
RightInfo.value.token = resultData.value.list[0].token;
RightInfo.value.tb = resultData.value.list[0].tbname;
RightInfo.value.r24h = resultData.value.list[0].r24h;
RightInfo.value.up = resultData.value.list[0].up;
RightInfo.value.swap = resultData.value.list[0].swap;
}
// 获取th的个数并修改ColGroupList
setColGroupList();
......@@ -705,79 +727,79 @@ onUnmounted(() => {
const columns = computed(() => {
return [
{
title: t('TableList.tokenbase'),
title: t("TableList.tokenbase"),
children: [
{
colKey: 'index',
width: 'auto',
title: '#',
colKey: "index",
width: "auto",
title: "#",
},
{
colKey: 'tn',
title: t('TableList.token'),
colKey: "tn",
title: t("TableList.token"),
},
],
},
{
title: t('TableList.basic'),
title: t("TableList.basic"),
children: [
{
colKey: 'up',
title: t('TableList.price'),
colKey: "up",
title: t("TableList.price"),
sort: true,
},
{
colKey: 'pb',
title: 'Pool',
colKey: "pb",
title: "Pool",
sort: true,
},
{
colKey: 'vn',
title: t('TableList.volume'),
colKey: "vn",
title: t("TableList.volume"),
sort: true,
},
{
colKey: 'txn',
title: t('TableList.txns'),
colKey: "txn",
title: t("TableList.txns"),
sort: true,
},
],
},
{
title: t('TableList.priceChange'),
title: t("TableList.priceChange"),
children: [
{
colKey: 'r5m',
title: t('TableList.time1'),
colKey: "r5m",
title: t("TableList.time1"),
sort: true,
},
{
colKey: 'r1h',
title: t('TableList.time2'),
colKey: "r1h",
title: t("TableList.time2"),
sort: true,
},
{
colKey: 'r4h',
title: t('TableList.time3'),
colKey: "r4h",
title: t("TableList.time3"),
sort: true,
},
{
colKey: 'r24h',
title: t('TableList.time4'),
colKey: "r24h",
title: t("TableList.time4"),
sort: true,
},
],
},
{
title: t('TableList.others'),
title: t("TableList.others"),
children: [
{
colKey: 'operation',
title: t('TableList.k_line'),
colKey: "operation",
title: t("TableList.k_line"),
},
{
colKey: 'media',
title: t('TableList.mediaData'),
colKey: "media",
title: t("TableList.mediaData"),
},
],
},
......@@ -786,7 +808,7 @@ const columns = computed(() => {
// 过滤出所有children
const columnsChild = computed(() => {
let list = [];
let list: any = [];
columns.value.forEach((item: any) => {
item.children.forEach((it: any) => {
list.push(it);
......@@ -797,21 +819,21 @@ const columnsChild = computed(() => {
let arr1 = new Array(100);
for (let i = 0; i < arr1.length; i++) {
arr1[i] = {
one: '1',
two: '2',
three: '3',
four: '4',
five: '5',
sex: '6',
seven: '7',
one: "1",
two: "2",
three: "3",
four: "4",
five: "5",
sex: "6",
seven: "7",
};
}
</script>
<style lang="less">
@import '@/style/variables.less';
@import '@/style/line.less';
@import '@/style/flex.less';
@import "@/style/variables.less";
@import "@/style/line.less";
@import "@/style/flex.less";
.custom-token-list {
margin-top: 8px;
box-sizing: border-box;
......@@ -854,7 +876,7 @@ for (let i = 0; i < arr1.length; i++) {
font-size: 14px;
color: var(--td--main-btn-color-1);
white-space: nowrap;
font-family: 'bold';
font-family: "bold";
padding: 4px 12px;
}
.t-align-center {
......@@ -877,7 +899,7 @@ for (let i = 0; i < arr1.length; i++) {
th {
font-weight: 500;
font-size: 14px;
font-family: 'Medium';
font-family: "Medium";
border-bottom: 1px solid var(--new-border-4);
padding: 10px 12px;
.thead-sort-box {
......@@ -919,7 +941,7 @@ for (let i = 0; i < arr1.length; i++) {
font-size: 14px;
color: var(--td--main-btn-color-1);
white-space: nowrap;
font-family: 'bold';
font-family: "bold";
padding: 4px 12px;
}
.t-align-center {
......@@ -942,7 +964,7 @@ for (let i = 0; i < arr1.length; i++) {
th {
font-weight: 500;
font-size: 14px;
font-family: 'Medium';
font-family: "Medium";
border-bottom: 1px solid var(--new-border-4);
padding: 10px 12px;
.thead-sort-box {
......@@ -967,7 +989,7 @@ for (let i = 0; i < arr1.length; i++) {
border: none;
border-bottom: 1px solid var(--new-border-3);
background: var(--new-background-5);
font-family: 'Regular';
font-family: "Regular";
padding: 10px 12px;
.custom-no-list {
.dja();
......@@ -998,7 +1020,7 @@ for (let i = 0; i < arr1.length; i++) {
color: var(--main-theme-color);
font-weight: 700;
font-size: 16px;
font-family: 'bold';
font-family: "bold";
}
.symbol {
color: var(--td-search-btn-back-1);
......
views/token/RightDetail.vue
<template>
<div class="right-detail-wrapper">
<!-- <div class="right-detail-wrapper">
<div class="right-header">
<template v-for="item in headerBtns" :key="item.value">
<t-button
......@@ -105,7 +105,8 @@
></details-echarts>
</div>
</template>
</div>
</div> -->
<div></div>
</template>
<script setup lang="ts">
import request from "@/utils/request";
......
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