Skip to content

D
dexfilter-web-nuxt3
Commit a0bbd5f4 by lei
Options

1

parent d72da515
Showing with 633 additions and 922 deletions
.output (2).zip 0 → 100644
File added
.output.zip 0 → 100644
File added
components/announcement.vue
......@@ -4,15 +4,15 @@
<div class="Announcement-box" v-if="hasOpen">
<div class="Announcement-box-cl">
<div class="header">
{{ $t('Announcement.title') }}
{{ $t("Announcement.title") }}
</div>
<div class="content">
<span>{{ $t('Announcement.content') }}</span>
<span>{{ $t("Announcement.content") }}</span>
<AnnSvg></AnnSvg>
</div>
<div class="footer">
<t-button @click="JoinUs(tgUrl)">{{
$t('Customized.Contact')
$t("Customized.Contact")
}}</t-button>
</div>
<div class="close" @click="closeAnn">
......@@ -25,9 +25,9 @@
</template>
<script lang="ts" setup>
import AnnSvg from '/public/images/svg/filter/announcement.svg';
import closeSvg from '/public/images/svg/filter/close.svg';
import { tgUrl } from '@/utils/open';
import AnnSvg from "/public/images/svg/filter/announcement.svg";
import closeSvg from "/public/images/svg/filter/close.svg";
import { tgUrl } from "@/utils/open";
// 是否展示广告
const hasOpen = ref(false);
......@@ -38,13 +38,17 @@ const getCurTime = () => {
return date.valueOf();
};
onMounted(() => {
let open = JSON.parse(window.localStorage.getItem('openAnn'));
let open = JSON.parse(window.localStorage.getItem("openAnn"));
if (open && Object.keys(open).length) {
// 获取当前时间
let curTime = getCurTime();
if (curTime - open.last >= 86400000) {
hasOpen.value = true;
} else {
hasOpen.value = false;
}
} else {
hasOpen.value = true;
}
});
const JoinUs = (url: string) => {
......@@ -55,18 +59,18 @@ const closeAnn = () => {
hasOpen.value = false;
// 每天只弹出一次
window.localStorage.setItem(
'openAnn',
"openAnn",
JSON.stringify({
last: getCurTime(),
value: 'close',
value: "close",
})
);
};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
@import "@/style/variables.less";
@import "@/style/flex.less";
.Announcement-box {
position: fixed;
bottom: 12px;
......
nuxt.config.ts
import viteCompression from 'vite-plugin-compression';
import viteCompression from "vite-plugin-compression";
// import visualizer from 'rollup-plugin-visualizer';
// 筛选接口地址
let filterApi = 'http://156.247.9.93:9501/';
let loginApi = 'http://156.247.9.93:8001/';
let filterApi = "http://156.247.9.93:9501/";
let loginApi = "http://156.247.9.93:8001/";
export default defineNuxtConfig({
// plugins: [],
modules: ['nuxt-svgo', '@nuxtjs-alt/proxy'],
modules: ["nuxt-svgo", "@nuxtjs-alt/proxy"],
proxy: {
enableProxy: true,
proxies: {
'/score': {
"/score": {
target: filterApi,
changeOrigin: true,
},
'/v1': {
"/v1": {
target: filterApi,
changeOrigin: true,
},
'/search': {
"/search": {
target: filterApi,
changeOrigin: true,
},
'/favorites': {
"/favorites": {
target: filterApi,
changeOrigin: true,
},
//api-ip是另外滴
'/api': {
"/api": {
target: loginApi,
changeOrigin: true,
},
......@@ -40,9 +40,9 @@ export default defineNuxtConfig({
// },
vite: {
plugins: [viteCompression()],
envDir: '~/env',
envDir: "~/env",
build: {
minify: 'terser', // 混淆器，terser构建后文件体积更小
minify: "terser", // 混淆器，terser构建后文件体积更小
// 构建后是否生成 source map 文件
// sourcemap: 'hidden',
cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
......@@ -60,11 +60,14 @@ export default defineNuxtConfig({
rollupOptions: {
output: {
manualChunks: {
TdesignVueNext: ['tdesign-vue-next'],
CustomEcharts: ['echarts'],
// TdesignVueNext: ['tdesign-vue-next'],
CustomEcharts: ["echarts"],
},
},
},
sourcemap: false,
// 关闭文件计算
reportCompressedSize: false,
},
},
build: {
......@@ -72,11 +75,11 @@ export default defineNuxtConfig({
// vendor-已被弃用
// 第三方插件转es5
transpile:
process.env.NODE_ENV === 'production'
? ['tdesign-vue-next', 'echarts', 'vue-i18n']
: ['echarts'],
process.env.NODE_ENV === "production"
? ["tdesign-vue-next", "echarts", "vue-i18n"]
: ["echarts"],
// cssSourceMap: true,
// analyze: true,
},
css: ['@/style/font-family.css'],
css: ["@/style/font-family.css"],
});
plugins/Tdesign.ts
import { defineNuxtPlugin } from '#app';
import { defineNuxtPlugin } from "#app";
import {
Table as TTable,
HeadMenu as THeadMenu,
MenuItem as TMenuItem,
Icon as TIcon,
......@@ -34,7 +33,7 @@ import {
Divider as TDivider,
Swiper as TSwiper,
SwiperItem as TSwiperItem,
} from 'tdesign-vue-next';
} from "tdesign-vue-next";
const components = [
THeadMenu,
TMenuItem,
......@@ -71,10 +70,10 @@ const components = [
TSwiperItem,
];
// 无法循环挂载的组件--单独拎出来
const oncomponents = [TTable];
// const oncomponents = [TTable];
export default defineNuxtPlugin((nuxtApp) => {
components.forEach((item: any) => {
nuxtApp.vueApp.use(item);
});
nuxtApp.vueApp.component('t-table', oncomponents[0]);
// nuxtApp.vueApp.component('t-table', oncomponents[0]);
});
stats.html deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
style/reset.css
......@@ -4,42 +4,3 @@ body {
padding: 0;
margin: 0;
}
/* html {
font-size: 14px;
}
@media screen and (max-width: 1550px) {
#__nuxt {
height: 100vh;
}
.t-layout {
zoom: 0.8;
height: 100%;
}
.t-layout .t-layout__content {
height: calc(100vh - 70px);
}
.home-wrapper {
width: 100% !important;
}
.token-page-wrapper {
flex: 1;
}
.home-wrapper .right-detail-wrapper {
width: 320px !important;
height: calc((100vh - 70px) * 1.25);
flex: none;
}
.right-detail-wrapper .details-title-box {
height: calc(100% - 40px);
display: flex;
flex-direction: column;
}
.right-body-scroll {
flex: 1;
}
.right-body-scroll .right-body {
}
.custom-search-drawer .t-drawer__content-wrapper {
zoom: 0.8;
}
} */
text.js deleted 100644 → 0
// 获取0的个数
let test = (1000000000 + '').match(/0/g);
console.log(test);
views/analysis/DealBox.vue
......@@ -24,34 +24,32 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.r24hBay') }}</span>
<span class="value">{{ formData.value1 ?? '---' }}</span>
<span class="label">{{ $t("analysis.r24hBay") }}</span>
<span class="value">{{ formData.value1 ?? "---" }}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.r24hSell') }}</span>
<span class="value">{{ formData.value2 ?? '---' }}</span>
<span class="label">{{ $t("analysis.r24hSell") }}</span>
<span class="value">{{ formData.value2 ?? "---" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-2"></div>
<!-- <NoData v-show="currentType"></NoData> -->
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import NoData from './noData.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const {
maxNum,
resultList,
......@@ -71,7 +69,7 @@ const props = defineProps({
r24h: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
let myChart: any = null;
// 初始化折线图
const WatchEcharts = useWatchEcharts();
......@@ -79,8 +77,8 @@ const WatchEcharts = useWatchEcharts();
const chain = useChain();
const currentType = ref(true);
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
watch(
() => WatchEcharts.value,
......@@ -105,12 +103,12 @@ watch(
changeEchart();
}
);
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -129,7 +127,7 @@ const changeEchart = () => {
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-2', props.theme);
initChart("chart-box-2", props.theme);
};
const getData = (timestamp: number) => {
try {
......@@ -152,10 +150,10 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.buy;
formData.value2 = res?.count?.sell;
// 先计算出双轴各自的最大值
getMinNum(res.list.buy, 'oneMin');
getMaxNum(res.list.buy, 'oneMax');
getMinNum(res.list.sell, 'twoMin');
getMaxNum(res.list.sell, 'twoMax');
getMinNum(res.list.buy, "oneMin");
getMaxNum(res.list.buy, "oneMax");
getMinNum(res.list.sell, "twoMin");
getMaxNum(res.list.sell, "twoMax");
resultList.list = res.list;
renderChart(res.list);
} else {
......@@ -171,60 +169,60 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.bay'), t('analysis.sell')],
icon: 'circle',
data: [t("analysis.bay"), t("analysis.sell")],
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
left: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
name: t('analysis.bay'),
type: "value",
name: t("analysis.bay"),
axisLabel: {
formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
{
type: 'value',
name: t('analysis.sell'),
type: "value",
name: t("analysis.sell"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
},
],
series: [
{
name: t('analysis.bay'),
type: 'line',
name: t("analysis.bay"),
type: "line",
data: list.buy,
lineStyle: {
color: lightLineColor.blue,
......@@ -233,8 +231,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.sell'),
type: 'line',
name: t("analysis.sell"),
type: "line",
data: list.sell,
showSymbol: false,
...greenGradientLight,
......@@ -244,7 +242,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-2').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-2").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/DiscordBox.vue
......@@ -23,32 +23,31 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.CurrentTotal') }}</span>
<span class="value">{{ formData.value1 ?? '---' }}</span>
<span class="label">{{ $t("analysis.CurrentTotal") }}</span>
<span class="value">{{ formData.value1 ?? "---" }}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.Currentpeopleonline') }}</span>
<span class="value">{{ formData.value2 ?? '---' }}</span>
<span class="label">{{ $t("analysis.Currentpeopleonline") }}</span>
<span class="value">{{ formData.value2 ?? "---" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-8"></div>
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
} from "@/utils/echarts/color";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
const { maxNum, resultList, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
......@@ -69,7 +68,7 @@ watch(
() => WatchEcharts.value,
(v) => {
onInit();
getData();
getData("");
}
);
// 提交时间戳
......@@ -78,11 +77,11 @@ const onChange = (value: number) => {
};
// 当前链
const chain = useChain();
const date = ref('5m');
const date = ref("5m");
//
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
const changeEchart = () => {
onInit();
......@@ -100,30 +99,30 @@ watch(
(v) => {
// 当处于右侧折线图页面时,点击行，切换重新加载折线图
onInit();
getData();
getData("");
}
);
onMounted(() => {
nextTick(() => {
if (route.name !== 'tokenAnalysis') {
if (route.name !== "tokenAnalysis") {
onInit();
getData();
getData("");
}
});
});
const onInit = () => {
initChart('chart-box-8', props.theme);
initChart("chart-box-8", props.theme);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
const getData = (timestamp: number) => {
const getData = (timestamp: number | undefined | string) => {
if (!props.token) {
return;
}
......@@ -142,10 +141,10 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.din;
formData.value2 = res?.count?.diol;
// 先计算出双轴各自的最大值
getMinNum(res.list.din, 'oneMin');
getMaxNum(res.list.din, 'oneMax');
getMinNum(res.list.diol, 'twoMin');
getMaxNum(res.list.diol, 'twoMax');
getMinNum(res.list.din, "oneMin");
getMaxNum(res.list.din, "oneMax");
getMinNum(res.list.diol, "twoMin");
getMaxNum(res.list.diol, "twoMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -155,31 +154,31 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.Totaladditions'), t('analysis.peopleaddedonline')],
icon: 'circle',
data: [t("analysis.Totaladditions"), t("analysis.peopleaddedonline")],
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
left: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
......@@ -189,15 +188,15 @@ const renderChart = (list) => {
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value',
type: "value",
// name: t("analysis.Totaladditions"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
......@@ -206,23 +205,23 @@ const renderChart = (list) => {
max: maxNum.twoMax,
splitNumber: 5,
interval: (maxNum.twoMax - maxNum.twoMin) / 5,
type: 'value',
type: "value",
// name: t("analysis.peopleaddedonline"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.Totaladditions'),
type: 'line',
name: t("analysis.Totaladditions"),
type: "line",
data: list.dind,
lineStyle: {
color: lightLineColor.blue,
......@@ -231,8 +230,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.peopleaddedonline'),
type: 'line',
name: t("analysis.peopleaddedonline"),
type: "line",
data: list.diold,
lineStyle: {
color: lightLineColor.green,
......@@ -244,7 +243,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-8').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-8").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/HolderBox.vue
......@@ -23,37 +23,36 @@
</template>
<template #header>
<div class="newfield">
<span class="label">{{ $t('analysis.TotalHolder') }}</span>
<span class="value">{{ formData.value1 ?? '--' }}</span>
<span class="label">{{ $t("analysis.TotalHolder") }}</span>
<span class="value">{{ formData.value1 ?? "--" }}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.r24hadded') }}</span>
<span class="value">{{ formData.value2 ?? '--' }}</span>
<span class="label">{{ $t("analysis.r24hadded") }}</span>
<span class="value">{{ formData.value2 ?? "--" }}</span>
</div>
<div class="threefield">
<span class="label">{{ $t('analysis.r24hClearance') }}：</span>
<span class="value">{{ formData.value3 ?? '--' }}</span>
<span class="label">{{ $t("analysis.r24hClearance") }}：</span>
<span class="value">{{ formData.value3 ?? "--" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-1"></div>
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
yellowGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const {
maxNum,
resultList,
......@@ -64,7 +63,6 @@ const {
formatter,
} = useEchartNum();
const { t } = useI18n();
const route = useRoute();
const props = defineProps({
title: String,
options: Array,
......@@ -74,7 +72,7 @@ const props = defineProps({
currentPath: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
// 折线图状态
const WatchEcharts = useWatchEcharts();
watch(
......@@ -93,12 +91,12 @@ const onChange = (value: number) => {
let myChart: any = null;
// 头部数据
const formData = reactive({
value1: '',
value2: '',
value3: '',
value1: "",
value2: "",
value3: "",
});
const onInit = () => {
initChart('chart-box-1', props.theme);
initChart("chart-box-1", props.theme);
};
onMounted(async () => {
......@@ -107,12 +105,12 @@ onMounted(async () => {
getData();
});
});
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -155,12 +153,12 @@ const getData = (timestamp: number) => {
formData.value2 = res?.count?.add_24;
formData.value3 = res?.count?.cl_24;
// 先计算出双轴各自的最大值
getMinNum(res.list.active, 'oneMin');
getMaxNum(res.list.active, 'oneMax');
getMinNum(res.list.cl_nh, 'twoMin');
getMaxNum(res.list.cl_nh, 'twoMax');
getMinNum(res.list.new_nh, 'threeMin');
getMaxNum(res.list.new_nh, 'threeMax');
getMinNum(res.list.active, "oneMin");
getMaxNum(res.list.active, "oneMax");
getMinNum(res.list.cl_nh, "twoMin");
getMaxNum(res.list.cl_nh, "twoMax");
getMinNum(res.list.new_nh, "threeMin");
getMaxNum(res.list.new_nh, "threeMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -170,56 +168,56 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [
t('analysis.AddressActivity'),
t('analysis.newHoders'),
t('analysis.ClearanceHolder'),
t("analysis.AddressActivity"),
t("analysis.newHoders"),
t("analysis.ClearanceHolder"),
],
icon: 'circle',
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
left: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
type: "value",
axisLabel: {
formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.AddressActivity'),
type: 'line',
name: t("analysis.AddressActivity"),
type: "line",
data: list.active,
lineStyle: {
color: lightLineColor.blue,
......@@ -229,8 +227,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.newHoders'),
type: 'line',
name: t("analysis.newHoders"),
type: "line",
data: list.new_nh,
lineStyle: {
color: lightLineColor.green,
......@@ -240,8 +238,8 @@ const renderChart = (list) => {
...greenGradientLight,
},
{
name: t('analysis.ClearanceHolder'),
type: 'line',
name: t("analysis.ClearanceHolder"),
type: "line",
data: list.cl_nh,
lineStyle: {
color: lightLineColor.yellow,
......@@ -252,7 +250,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-1').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-1").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/InAndOutBox.vue
......@@ -23,21 +23,21 @@
</template>
<template #header>
<div class="newfield">
<span class="label">{{ $t('analysis.TotalTurnover') }}</span>
<span class="label">{{ $t("analysis.TotalTurnover") }}</span>
<span class="value">{{
formData.value1 ? '$' + conversionNum(formData.value1) : '-'
formData.value1 ? "$" + conversionNum(formData.value1) : "-"
}}</span>
</div>
<div class="onefield">
<span class="label">{{ $t('analysis.Numberdeposits') }}</span>
<span class="label">{{ $t("analysis.Numberdeposits") }}</span>
<span class="value">{{
formData.value2 ? '$' + conversionNum(formData.value2) : '-'
formData.value2 ? "$" + conversionNum(formData.value2) : "-"
}}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.Numberwithdrawals') }}</span>
<span class="label">{{ $t("analysis.Numberwithdrawals") }}</span>
<span class="value">{{
formData.value3 ? '$' + conversionNum(formData.value3) : '-'
formData.value3 ? "$" + conversionNum(formData.value3) : "-"
}}</span>
</div>
</template>
......@@ -45,24 +45,22 @@
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { conversionNum } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { conversionNum } from "@/utils/tool";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const { maxNum, getMaxNum, getMinNum, hideLoading, ShowLoading, formatter } =
} from "@/utils/echarts/color";
const { getMaxNum, getMinNum, hideLoading, ShowLoading, formatter } =
useEchartNum();
const route = useRoute();
const { t } = useI18n();
let myChart: any = null;
const props = defineProps({
......@@ -74,7 +72,7 @@ const props = defineProps({
currentPath: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
const resultList = reactive({
list: [],
});
......@@ -88,9 +86,9 @@ watch(
);
const chain = useChain();
const formData = reactive({
value1: '',
value2: '',
value3: '',
value1: "",
value2: "",
value3: "",
});
onMounted(() => {
nextTick(() => {
......@@ -121,17 +119,17 @@ const changeEchart = () => {
const onChange = (value: number) => {
getData(value);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
const onInit = () => {
initChart('chart-box-3', props.theme);
initChart("chart-box-3", props.theme);
};
const getData = (timestamp: number) => {
if (!props.tb) {
......@@ -163,10 +161,10 @@ const getData = (timestamp: number) => {
}
});
// 先计算出双轴各自的最大值
getMinNum(res.list.buy, 'oneMin');
getMaxNum(res.list.buy, 'oneMax');
getMinNum(res.list.sell, 'twoMin');
getMaxNum(res.list.sell, 'twoMax');
getMinNum(res.list.buy, "oneMin");
getMaxNum(res.list.buy, "oneMax");
getMinNum(res.list.sell, "twoMin");
getMaxNum(res.list.sell, "twoMax");
// 实例化
resultList.list = res.list;
renderChart(res.list);
......@@ -177,60 +175,60 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.Deposit'), t('analysis.Withdrawal')],
icon: 'circle',
data: [t("analysis.Deposit"), t("analysis.Withdrawal")],
icon: "circle",
},
grid: {
bottom: 30,
left: '66px',
left: "66px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
name: `${t('analysis.Deposit')}($)`,
type: "value",
name: `${t("analysis.Deposit")}($)`,
axisLabel: {
formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
{
type: 'value',
name: `${t('analysis.Withdrawal')}($)`,
type: "value",
name: `${t("analysis.Withdrawal")}($)`,
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
},
],
series: [
{
name: t('analysis.Deposit'),
type: 'line',
name: t("analysis.Deposit"),
type: "line",
data: list.buy,
lineStyle: {
color: lightLineColor.blue,
......@@ -239,8 +237,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.Withdrawal'),
type: 'line',
name: t("analysis.Withdrawal"),
type: "line",
data: list.sell,
lineStyle: {
color: lightLineColor.green,
......@@ -250,7 +248,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-3').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-3").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/PoolBox.vue
......@@ -23,9 +23,9 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.curPool') }}</span>
<span class="label">{{ $t("analysis.curPool") }}</span>
<span class="value">{{
formData.value1 ? '$' + conversionNum(formData.value1) : '-'
formData.value1 ? "$" + conversionNum(formData.value1) : "-"
}}</span>
</div>
</template>
......@@ -33,29 +33,26 @@
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import { conversionNum } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import { conversionNum } from "@/utils/tool";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const {
resultList,
maxNum,
getMaxNum,
getMinNum,
ShowLoading,
hideLoading,
formatter,
} = useEchartNum();
const route = useRoute();
const { t } = useI18n();
const props = defineProps({
tb: String,
......@@ -64,7 +61,7 @@ const props = defineProps({
r24h: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
let myChart: any = null;
const WatchEcharts = useWatchEcharts();
watch(
......@@ -80,7 +77,7 @@ const onChange = (value: number) => {
};
const chain = useChain();
const formData = reactive({
value1: '',
value1: "",
});
onMounted(async () => {
nextTick(() => {
......@@ -108,14 +105,14 @@ const changeEchart = () => {
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-9', props.theme);
initChart("chart-box-9", props.theme);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -135,25 +132,25 @@ const getData = (timestamp: number) => {
.then((res: any) => {
hideLoading(myChart);
if (res) {
if (typeof res.list.date[0] === 'number') {
if (typeof res.list.date[0] === "number") {
res.list.date.forEach((item, index) => {
let date = new Date(item * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
let Y = date.getFullYear() + '-';
let Y = date.getFullYear() + "-";
let M =
(date.getMonth() + 1 < 10
? '0' + (date.getMonth() + 1)
: date.getMonth() + 1) + '-';
let D = date.getDate() + ' ';
let h = date.getHours() + ':';
let m = date.getMinutes() + ':';
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
let D = date.getDate() + " ";
let h = date.getHours() + ":";
let m = date.getMinutes() + ":";
let s = date.getSeconds();
res.list.date[index] = Y + M + D + h + m + s;
});
}
formData.value1 = res?.count?.ub;
// 先计算出双轴各自的最大值
getMinNum(res.list.ub, 'oneMin');
getMaxNum(res.list.ub, 'oneMax');
getMinNum(res.list.ub, "oneMin");
getMaxNum(res.list.ub, "oneMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -166,53 +163,53 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.Flowpoolchanges')],
icon: 'circle',
data: [t("analysis.Flowpoolchanges")],
icon: "circle",
},
grid: {
bottom: 20,
left: '60px',
left: "60px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
name: t('analysis.Flowpoolchanges'),
type: "value",
name: t("analysis.Flowpoolchanges"),
axisLabel: {
formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.Flowpoolchanges'),
type: 'line',
name: t("analysis.Flowpoolchanges"),
type: "line",
data: list.ub,
lineStyle: {
color: lightLineColor.blue,
......@@ -222,7 +219,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-9').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-9").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/TelegramBox.vue
......@@ -23,32 +23,31 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.tgCurrentTotal') }}</span>
<span class="value">{{ formData.value1 ?? '---' }}</span>
<span class="label">{{ $t("analysis.tgCurrentTotal") }}</span>
<span class="value">{{ formData.value1 ?? "---" }}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.tgCurrentPeople') }}</span>
<span class="value">{{ formData.value2 ?? '---' }}</span>
<span class="label">{{ $t("analysis.tgCurrentPeople") }}</span>
<span class="value">{{ formData.value2 ?? "---" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-7"></div>
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
......@@ -62,7 +61,7 @@ const props = defineProps({
theme: String,
});
const route = useRoute();
const date = ref('5m');
const date = ref("5m");
const WatchEcharts = useWatchEcharts();
watch(
() => WatchEcharts.value,
......@@ -73,13 +72,13 @@ watch(
);
const chain = useChain();
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
let myChart: any = null;
onMounted(async () => {
nextTick(() => {
if (route.name !== 'tokenAnalysis') {
if (route.name !== "tokenAnalysis") {
onInit();
getData();
}
......@@ -111,15 +110,15 @@ const changeEchart = () => {
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-7', props.theme);
initChart("chart-box-7", props.theme);
};
// 初始化折线图
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -142,10 +141,10 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.tgn;
formData.value2 = res?.count?.tgol;
// 先计算出双轴各自的最大值
getMinNum(res.list.tgn, 'oneMin');
getMaxNum(res.list.tgn, 'oneMax');
getMinNum(res.list.tgol, 'twoMin');
getMaxNum(res.list.tgol, 'twoMax');
getMinNum(res.list.tgn, "oneMin");
getMaxNum(res.list.tgn, "oneMax");
getMinNum(res.list.tgol, "twoMin");
getMaxNum(res.list.tgol, "twoMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -155,35 +154,35 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [
t('analysis.TotalNumberofAdditions'),
t('analysis.Numberofpeopleaddedonline'),
t("analysis.TotalNumberofAdditions"),
t("analysis.Numberofpeopleaddedonline"),
],
icon: 'circle',
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
right: '50px',
left: "50px",
right: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
......@@ -193,15 +192,15 @@ const renderChart = (list) => {
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value',
type: "value",
// name: t("analysis.TotalNumberofAdditions"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
......@@ -210,23 +209,23 @@ const renderChart = (list) => {
max: maxNum.twoMax,
splitNumber: 5,
interval: (maxNum.twoMax - maxNum.twoMin) / 5,
type: 'value',
type: "value",
// name: t("analysis.Numberofpeopleaddedonline"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.TotalNumberofAdditions'),
type: 'line',
name: t("analysis.TotalNumberofAdditions"),
type: "line",
data: list.tgnd,
lineStyle: {
color: lightLineColor.blue,
......@@ -235,8 +234,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.Numberofpeopleaddedonline'),
type: 'line',
name: t("analysis.Numberofpeopleaddedonline"),
type: "line",
data: list.tgold,
lineStyle: {
color: lightLineColor.green,
......@@ -246,7 +245,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-7').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-7").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/Top100Box.vue
......@@ -19,15 +19,15 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.top10024HDeposit') }}</span>
<span class="label">{{ $t("analysis.top10024HDeposit") }}</span>
<span class="value">{{
formData.value1 ? '$' + conversionNum(formData.value1) : '-'
formData.value1 ? "$" + conversionNum(formData.value1) : "-"
}}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.top100withdrawal') }}</span>
<span class="label">{{ $t("analysis.top100withdrawal") }}</span>
<span class="value">{{
formData.value2 ? '$' + conversionNum(formData.value2) : '-'
formData.value2 ? "$" + conversionNum(formData.value2) : "-"
}}</span>
</div>
</template>
......@@ -35,25 +35,23 @@
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { conversionNum } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { conversionNum } from "@/utils/tool";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
const route = useRoute();
const props = defineProps({
title: String,
options: Array,
......@@ -63,7 +61,7 @@ const props = defineProps({
currentPath: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
let myChart: any = null;
const WatchEcharts = useWatchEcharts();
watch(
......@@ -82,8 +80,8 @@ watch(
);
const chain = useChain();
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
const changeEchart = () => {
onInit();
......@@ -108,15 +106,15 @@ watch(
}
);
const onInit = () => {
initChart('chart-box-6', props.theme);
initChart("chart-box-6", props.theme);
};
// 初始化折线图
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -126,7 +124,7 @@ const getData = () => {
}
ShowLoading(myChart);
let newtb =
props.tb[0] == 'd' ? props.tb.slice(1, props.tb.length) : props.tb;
props.tb[0] == "d" ? props.tb.slice(1, props.tb.length) : props.tb;
request
.get(`/v1${chain.value}/analysis/getTop100ChangeV1`, {
params: {
......@@ -155,10 +153,10 @@ const getData = () => {
}
});
// 先计算出双轴各自的最大值
getMinNum(res.list.buy, 'oneMin');
getMaxNum(res.list.buy, 'oneMax');
getMinNum(res.list.sell, 'twoMin');
getMaxNum(res.list.sell, 'twoMax');
getMinNum(res.list.buy, "oneMin");
getMaxNum(res.list.buy, "oneMax");
getMinNum(res.list.sell, "twoMin");
getMaxNum(res.list.sell, "twoMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -168,32 +166,32 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.Deposit'), t('analysis.Withdrawal')],
icon: 'circle',
data: [t("analysis.Deposit"), t("analysis.Withdrawal")],
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
right: '50px',
left: "50px",
right: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
......@@ -203,15 +201,15 @@ const renderChart = (list) => {
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value',
name: `${t('analysis.Deposit')}($)`,
type: "value",
name: `${t("analysis.Deposit")}($)`,
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
......@@ -220,23 +218,23 @@ const renderChart = (list) => {
max: maxNum.twoMax,
splitNumber: 5,
interval: (maxNum.twoMax - maxNum.twoMin) / 5,
type: 'value',
name: `${t('analysis.Withdrawal')}($)`,
type: "value",
name: `${t("analysis.Withdrawal")}($)`,
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.Deposit'),
type: 'line',
name: t("analysis.Deposit"),
type: "line",
data: list.buy,
lineStyle: {
color: lightLineColor.blue,
......@@ -245,8 +243,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.Withdrawal'),
type: 'line',
name: t("analysis.Withdrawal"),
type: "line",
data: list.sell,
lineStyle: {
color: lightLineColor.green,
......@@ -258,7 +256,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-6').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-6").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/TwitterBox.vue
......@@ -23,32 +23,31 @@
</template>
<template #header>
<div class="newfield">
<span class="label">{{ $t('analysis.Dateaccountcreation') }}</span>
<span class="value">{{ formData.value1 ?? '---' }}</span>
<span class="label">{{ $t("analysis.Dateaccountcreation") }}</span>
<span class="value">{{ formData.value1 ?? "---" }}</span>
</div>
<div class="onefield">
<span class="label">{{ $t('analysis.Numberfans') }}</span>
<span class="value">{{ formData.value2 ?? '---' }}</span>
<span class="label">{{ $t("analysis.Numberfans") }}</span>
<span class="value">{{ formData.value2 ?? "---" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-4"></div>
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
} from "@/utils/echarts/color";
const { resultList, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
const props = defineProps({
......@@ -61,11 +60,11 @@ const props = defineProps({
theme: String,
});
const route = useRoute();
const date = ref('5m');
const date = ref("5m");
let myChart: any = null;
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
const WatchEcharts = useWatchEcharts();
watch(
......@@ -85,7 +84,7 @@ watch(
const chain = useChain();
onMounted(() => {
nextTick(() => {
if (route.name !== 'tokenAnalysis') {
if (route.name !== "tokenAnalysis") {
onInit();
getData();
}
......@@ -110,15 +109,15 @@ watch(
}
);
const onInit = () => {
initChart('chart-box-4', props.theme);
initChart("chart-box-4", props.theme);
renderChart(resultList.list);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -141,8 +140,8 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.twt;
formData.value2 = res?.count?.twf;
// 先计算出双轴各自的最大值
getMinNum(res.list.twn, 'oneMin');
getMaxNum(res.list.twn, 'oneMax');
getMinNum(res.list.twn, "oneMin");
getMaxNum(res.list.twn, "oneMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -152,53 +151,53 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.ChildNumberfans')],
icon: 'circle',
data: [t("analysis.ChildNumberfans")],
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
left: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
name: t('analysis.ChildNumberfans'),
type: "value",
name: t("analysis.ChildNumberfans"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.ChildNumberfans'),
type: 'line',
name: t("analysis.ChildNumberfans"),
type: "line",
data: list.twfd,
lineStyle: {
color: lightLineColor.blue,
......@@ -208,7 +207,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-4').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-4").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/token/HistoryList.vue
......@@ -25,7 +25,7 @@
<template #icon>
<ResetSvg class="icon"></ResetSvg>
</template>
{{ $t('Customized.reset') }}</t-button
{{ $t("Customized.reset") }}</t-button
>
</div>
</div>
......@@ -51,17 +51,17 @@
>
<template #st="{ row }">
<span>{{
row.st == 'buy' ? $t('TableList.hisBuy') : $t('TableList.hisSell')
row.st == "buy" ? $t("TableList.hisBuy") : $t("TableList.hisSell")
}}</span>
</template>
<template #nh="{ row }">
<span>{{
row.nh == 1 ? $t('securityCheck.yes') : $t('securityCheck.no')
row.nh == 1 ? $t("securityCheck.yes") : $t("securityCheck.no")
}}</span>
</template>
<template #h100="{ row }">
<span>{{
row.h100 == 1 ? $t('securityCheck.yes') : $t('securityCheck.no')
row.h100 == 1 ? $t("securityCheck.yes") : $t("securityCheck.no")
}}</span>
</template>
<template #txn="{ row }">
......@@ -72,9 +72,9 @@
</t-table>
<div v-show="groupbtn !== 'table'" class="Customized">
<div class="custom-content">
<div class="title">{{ $t('TableList.customtitle') }}</div>
<div class="title">{{ $t("TableList.customtitle") }}</div>
<t-button @click="JoinUs(tgUrl)">{{
$t('Customized.Contact')
$t("Customized.Contact")
}}</t-button>
</div>
</div>
......@@ -92,16 +92,17 @@ import {
filtercriteria,
filterIncludeValue,
filterRepeatTimestamp,
} from '@/utils/tool';
import request from '@/utils/request';
import dayjs from 'dayjs';
import { useI18n } from 'vue-i18n';
import { tgUrl } from '@/utils/open';
import ResetSvg from '/public/images/svg/filter/reset.svg';
import FilterSvg from '/public/images/svg/filter/filter.svg';
import FilterBuyAndSellSVG from '/public/images/svg/filter/filterBuyAndSell.svg';
import historyListFilter from './historyListFilter.vue';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
} from "@/utils/tool";
import request from "@/utils/request";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
import { tgUrl } from "@/utils/open";
import ResetSvg from "/public/images/svg/filter/reset.svg";
import FilterSvg from "/public/images/svg/filter/filter.svg";
import FilterBuyAndSellSVG from "/public/images/svg/filter/filterBuyAndSell.svg";
import historyListFilter from "./historyListFilter.vue";
import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { Table as TTable } from "tdesign-vue-next";
const i18n = useI18n();
let interval = null;
const tokenVisible = ref(false);
......@@ -121,9 +122,9 @@ const resultData = reactive({
* 默认全部数据-true
*/
status: true,
type: '', // 交易类型 -- sell or buy
newHolder: '', //新增持有人--yes or no
top100Holder: '', //前一百持有人 -- yes or no
type: "", // 交易类型 -- sell or buy
newHolder: "", //新增持有人--yes or no
top100Holder: "", //前一百持有人 -- yes or no
});
// 表格加载状态
const loading = ref(false);
......@@ -134,20 +135,20 @@ const dialogTitle = ref({});
// 滚动元素
let historyList = ref(null);
// 当前选中的按钮
const groupbtn = ref('table');
const groupbtn = ref("table");
// 按钮组
const groupList = computed(() => [
{
label: i18n.t('TableList.TradingHistory'),
value: 'table',
label: i18n.t("TableList.TradingHistory"),
value: "table",
},
{
label: i18n.t('TableList.LargeOrderTracking'),
value: 'order',
label: i18n.t("TableList.LargeOrderTracking"),
value: "order",
},
{
label: i18n.t('TableList.PriceAlert'),
value: 'alert',
label: i18n.t("TableList.PriceAlert"),
value: "alert",
},
]);
const JoinUs = (url: string) => {
......@@ -157,7 +158,7 @@ const JoinUs = (url: string) => {
// 表格表头吸顶
const tablesticky = ref(null);
const asyncLoading = ref('');
const asyncLoading = ref("");
const props = defineProps({
currentPath: String,
tb: String,
......@@ -168,7 +169,7 @@ const props = defineProps({
// 自增赋值给key
let thisIndex = 1;
const groupbtnChange = (value: string) => {
if (value == 'order') {
if (value == "order") {
}
};
watch(
......@@ -178,8 +179,8 @@ watch(
// 先注销上个定时器
clearInterval(interval);
resultData.list = [];
asyncLoading.value = '';
getHistoryList('fetch');
asyncLoading.value = "";
getHistoryList("fetch");
handleScrollEvent();
}
}
......@@ -189,13 +190,13 @@ watch(
(v) => {
if (v) {
// 挂载前判断是否是主流币，如果是主流币，将交易历史表格中的部分字段隐藏
if (!hasOneTable.value && props.mt == '2') {
if (!hasOneTable.value && props.mt == "2") {
// 隐藏列
let h100 = MydisplayColumns.list.findIndex(
(item: any) => item === 'h100'
(item: any) => item === "h100"
);
let sr = MydisplayColumns.list.findIndex((item: any) => item === 'sr');
let nh = MydisplayColumns.list.findIndex((item: any) => item === 'nh');
let sr = MydisplayColumns.list.findIndex((item: any) => item === "sr");
let nh = MydisplayColumns.list.findIndex((item: any) => item === "nh");
if (h100 !== -1 && sr !== -1 && nh !== -1) {
MydisplayColumns.list.splice(h100, 1);
MydisplayColumns.list.splice(sr, 1);
......@@ -203,7 +204,7 @@ watch(
}
hasOneTable.value = true;
}
getHistoryList('fetch');
getHistoryList("fetch");
handleScrollEvent();
interval = setInterval(getHistoryList, 10000);
}
......@@ -211,7 +212,7 @@ watch(
);
const monitor = (e: any) => {
let isExist = e.target.visibilityState;
if (isExist === 'visible') {
if (isExist === "visible") {
// 先关再开
if (interval) {
clearInterval(interval);
......@@ -229,10 +230,10 @@ const monitor = (e: any) => {
// 滚动事件
const ScrollClick = () => {
let fiexdHeader: any = document.querySelector(
'.t-table__affixed-header-elm-wrap'
".t-table__affixed-header-elm-wrap"
);
if (fiexdHeader.style.display !== 'block') {
fiexdHeader.style.display = 'block';
if (fiexdHeader.style.display !== "block") {
fiexdHeader.style.display = "block";
} else {
return;
}
......@@ -240,16 +241,16 @@ const ScrollClick = () => {
onMounted(() => {
// 注册滚动监听,滚动时重新显示吸顶表头
historyList.value.addEventListener('scroll', ScrollClick);
historyList.value.addEventListener("scroll", ScrollClick);
// 监听是否切除页面
document.addEventListener('visibilitychange', monitor);
document.addEventListener("visibilitychange", monitor);
// 开启表格吸顶
tablesticky.value = {
offsetTop: 63,
zIndex: 1,
container: '#history-list-wrapper',
container: "#history-list-wrapper",
};
});
......@@ -259,52 +260,52 @@ onBeforeUnmount(() => {
onUnmounted(() => {
// 注销滚动监听
if (historyList.value) {
historyList.value.removeEventListener('scroll', ScrollClick, false);
historyList.value.removeEventListener("scroll", ScrollClick, false);
}
document.removeEventListener('visibilitychange', monitor);
document.removeEventListener("visibilitychange", monitor);
});
// 当前展示的列
const MydisplayColumns = reactive({
list: [
'tsStr',
'st',
'tokenNumStr',
'vnStr',
'upStr',
'nh',
'sr',
'h100',
'txn',
"tsStr",
"st",
"tokenNumStr",
"vnStr",
"upStr",
"nh",
"sr",
"h100",
"txn",
],
});
const handleScrollEvent = () => {
let dom = document.getElementById('history-list-wrapper');
let dom = document.getElementById("history-list-wrapper");
dom.onscroll = (e) => {
if (asyncLoading.value === 'loading' || asyncLoading.value === 'end') {
if (asyncLoading.value === "loading" || asyncLoading.value === "end") {
return;
}
if (
Math.abs(dom.scrollHeight - dom.clientHeight - dom.scrollTop) < 100 &&
resultData.status
) {
getHistoryList('fetch');
getHistoryList("fetch");
}
};
};
const loadingNode = (h) => {
if (asyncLoading.value === 'end' || asyncLoading.value === 'stop') {
if (asyncLoading.value === "end" || asyncLoading.value === "stop") {
return (
<div class="asyncLoadingTitle">
{i18n.t('TableList.emptyhistorylist')}
{i18n.t("TableList.emptyhistorylist")}
</div>
);
} else if (asyncLoading.value === 'maxLength') {
} else if (asyncLoading.value === "maxLength") {
return (
<div class="asyncLoadingTitle">{i18n.t('TableList.maxFilterlength')}</div>
<div class="asyncLoadingTitle">{i18n.t("TableList.maxFilterlength")}</div>
);
} else if (asyncLoading.value === 'nolist') {
} else if (asyncLoading.value === "nolist") {
return (
<div class="asyncLoadingTitle">{i18n.t('TableList.emptyfilterdata')}</div>
<div class="asyncLoadingTitle">{i18n.t("TableList.emptyfilterdata")}</div>
);
} else {
return (
......@@ -317,76 +318,76 @@ const loadingNode = (h) => {
// 历史数据筛选sell,buy
const filterHistoryList = (label: string) => {
// 交易类型
if (label == 'type') {
let buy = 'buy',
sell = 'sell';
if (resultData.type == '') {
resultData.filterlist = filterIncludeValue('st', buy, resultData.allList);
if (label == "type") {
let buy = "buy",
sell = "sell";
if (resultData.type == "") {
resultData.filterlist = filterIncludeValue("st", buy, resultData.allList);
resultData.type = buy;
} else if (resultData.type == buy) {
resultData.filterlist = filterIncludeValue(
'st',
"st",
sell,
resultData.allList
);
resultData.type = sell;
} else if (resultData.type == sell) {
resultData.filterlist = filterIncludeValue('st', buy, resultData.allList);
resultData.filterlist = filterIncludeValue("st", buy, resultData.allList);
resultData.type = buy;
}
} else if (label == 'nh') {
if (resultData.newHolder == '') {
} else if (label == "nh") {
if (resultData.newHolder == "") {
// 查不是新增持有人的
resultData.filterlist = filterIncludeValue('nh', 0, resultData.allList);
resultData.newHolder = 'no';
} else if (resultData.newHolder == 'no') {
resultData.filterlist = filterIncludeValue('nh', 1, resultData.allList);
resultData.newHolder = 'yes';
} else if (resultData.newHolder == 'yes') {
resultData.filterlist = filterIncludeValue('nh', 0, resultData.allList);
resultData.newHolder = 'no';
resultData.filterlist = filterIncludeValue("nh", 0, resultData.allList);
resultData.newHolder = "no";
} else if (resultData.newHolder == "no") {
resultData.filterlist = filterIncludeValue("nh", 1, resultData.allList);
resultData.newHolder = "yes";
} else if (resultData.newHolder == "yes") {
resultData.filterlist = filterIncludeValue("nh", 0, resultData.allList);
resultData.newHolder = "no";
}
} else if (label == 'top100') {
if (resultData.top100Holder == '') {
} else if (label == "top100") {
if (resultData.top100Holder == "") {
// 查不是新增持有人的
resultData.filterlist = filterIncludeValue('h100', 0, resultData.allList);
resultData.top100Holder = 'no';
} else if (resultData.top100Holder == 'no') {
resultData.filterlist = filterIncludeValue('h100', 1, resultData.allList);
resultData.top100Holder = 'yes';
} else if (resultData.top100Holder == 'yes') {
resultData.filterlist = filterIncludeValue('h100', 0, resultData.allList);
resultData.top100Holder = 'no';
resultData.filterlist = filterIncludeValue("h100", 0, resultData.allList);
resultData.top100Holder = "no";
} else if (resultData.top100Holder == "no") {
resultData.filterlist = filterIncludeValue("h100", 1, resultData.allList);
resultData.top100Holder = "yes";
} else if (resultData.top100Holder == "yes") {
resultData.filterlist = filterIncludeValue("h100", 0, resultData.allList);
resultData.top100Holder = "no";
}
}
// 改变异步加载模式
resultData.status = false;
if (resultData.filterlist.length) {
asyncLoading.value = 'stop';
asyncLoading.value = "stop";
} else {
asyncLoading.value = 'nolist';
asyncLoading.value = "nolist";
}
resultData.list = resultData.filterlist;
};
const getHistoryList = async (type = 'update') => {
const getHistoryList = async (type = "update") => {
try {
let params: any = {
tag: props.PoolAddress ? props.PoolAddress : props.tb,
mainstream: props.mt,
};
// 定时刷新数据
if (type === 'update') {
if (type === "update") {
params.t = resultData.allList[0].ts;
} else {
// 加载更多
if (resultData.allList.length !== 0) {
params.tb = resultData.allList[resultData.allList.length - 1].ts;
}
if (asyncLoading.value === 'end' || asyncLoading.value === 'loading') {
if (asyncLoading.value === "end" || asyncLoading.value === "loading") {
return;
}
asyncLoading.value = 'loading';
asyncLoading.value = "loading";
}
// 请求
let result: any = await request.get(
......@@ -395,7 +396,7 @@ const getHistoryList = async (type = 'update') => {
params,
}
);
if (result === null || result === 'null') {
if (result === null || result === "null") {
return;
}
// 过滤出重复数据
......@@ -411,19 +412,19 @@ const getHistoryList = async (type = 'update') => {
}
thisIndex += 1;
item.index = thisIndex;
item.upStr = '$' + parseCoinAmount(item.up);
item.tsStr = dayjs(item.ts).format('MM-DD HH:mm:ss');
item.upStr = "$" + parseCoinAmount(item.up);
item.tsStr = dayjs(item.ts).format("MM-DD HH:mm:ss");
// 筛选字段需要保留原始数据格式
item.tokenNumStr = parseCoinAmount(
item.st === 'sell' ? item.sn : item.bn
item.st === "sell" ? item.sn : item.bn
);
item.oldtokenNumStr = item.st === 'sell' ? item.sn : item.bn;
item.oldtokenNumStr = item.st === "sell" ? item.sn : item.bn;
//
item.vnStr = '$' + parseCoinAmount(item.vn);
item.vnStr = "$" + parseCoinAmount(item.vn);
item.vn = item.vn;
});
// 定时刷新数据
if (type === 'update') {
if (type === "update") {
resultData.allList = result.concat(resultData.allList);
if (resultData.status) {
resultData.list = resultData.allList;
......@@ -431,10 +432,10 @@ const getHistoryList = async (type = 'update') => {
// 大于100，则继续拉取最新数据
if (result.length === 100) {
getHistoryList('update');
getHistoryList("update");
}
} else {
asyncLoading.value = result.length < 100 ? 'end' : 'load-more';
asyncLoading.value = result.length < 100 ? "end" : "load-more";
resultData.allList = resultData.allList.concat(result);
if (resultData.status) {
resultData.list = resultData.allList;
......@@ -446,16 +447,16 @@ const getHistoryList = async (type = 'update') => {
const resetClick = () => {
resultData.list = resultData.allList;
resultData.status = true;
asyncLoading.value = 'load-more';
asyncLoading.value = "load-more";
};
const filterObj = reactive({
type: '',
tokenNum: { min: '', max: '' },
baseTokenNum: { min: '', max: '' },
type: "",
tokenNum: { min: "", max: "" },
baseTokenNum: { min: "", max: "" },
});
const togglePopup = (v) => {
if (v === 'token') {
if (v === "token") {
tokenVisible.value = !tokenVisible.value;
} else {
baseTokenVisible.value = !baseTokenVisible.value;
......@@ -465,7 +466,7 @@ const onFilterChange = (v, context) => {
console.log(v, context);
};
const goTxn = (item) => {
let Obj = filterChainObj('value', props.currentPath);
let Obj = filterChainObj("value", props.currentPath);
if (Obj) {
window.open(`${Obj.url.website.hashLink}${item.hash}`);
}
......@@ -482,19 +483,19 @@ const openfilterDialog = (label: any) => {
const closeDialog = ({ visible, value }) => {
dialogvisible.value = visible;
// 判断是否需要筛选
if (value.type == 'filter-self') {
if (value.type == "filter-self") {
// loading.value = true;
// filter--value是筛选条件对象
resultData.filterlist = filtercriteria(value, resultData.allList);
resultData.status = false;
if (resultData.filterlist.length) {
asyncLoading.value = 'stop';
asyncLoading.value = "stop";
} else {
asyncLoading.value = 'nolist';
asyncLoading.value = "nolist";
}
// 再赋值给表格数据
resultData.list = resultData.filterlist;
} else if (value.type == 'filter-time') {
} else if (value.type == "filter-time") {
// 请求后台数据
getfilterTimeList(value);
}
......@@ -516,7 +517,7 @@ const getfilterTimeList = async (value: any) => {
params,
}
);
if (result === null || result === 'null') {
if (result === null || result === "null") {
return;
}
// 阻止异步加载
......@@ -530,26 +531,26 @@ const getfilterTimeList = async (value: any) => {
}
thisIndex += 1;
item.index = thisIndex;
item.upStr = '$' + parseCoinAmount(item.up);
item.tsStr = dayjs(item.ts).format('MM-DD HH:mm:ss');
item.upStr = "$" + parseCoinAmount(item.up);
item.tsStr = dayjs(item.ts).format("MM-DD HH:mm:ss");
// 筛选字段需要保留原始数据格式
item.tokenNumStr = parseCoinAmount(
item.st === 'sell' ? item.sn : item.bn
item.st === "sell" ? item.sn : item.bn
);
item.oldtokenNumStr = item.st === 'sell' ? item.sn : item.bn;
item.oldtokenNumStr = item.st === "sell" ? item.sn : item.bn;
//
item.vnStr = '$' + parseCoinAmount(item.vn);
item.vnStr = "$" + parseCoinAmount(item.vn);
item.vn = item.vn;
});
// 有数据
if (result.length == 200) {
asyncLoading.value = 'maxLength';
asyncLoading.value = "maxLength";
} else {
asyncLoading.value = 'stop';
asyncLoading.value = "stop";
}
} else {
// 空数据
asyncLoading.value = 'nolist';
asyncLoading.value = "nolist";
}
loading.value = false;
resultData.list = result;
......@@ -558,15 +559,15 @@ const getfilterTimeList = async (value: any) => {
const columns = computed(() => [
{
colKey: 'tsStr',
colKey: "tsStr",
title: (h, { colIndex }) => (
<div class="filter-header filter-time">
<span>{i18n.t('TableList.date')}</span>
<span>{i18n.t("TableList.date")}</span>
<span
class="icon"
onClick={openfilterDialog.bind(this, {
title: i18n.t('TableList.date'),
value: 'ts',
title: i18n.t("TableList.date"),
value: "ts",
})}
>
<FilterSvg></FilterSvg>
......@@ -575,124 +576,124 @@ const columns = computed(() => [
),
},
{
colKey: 'st',
colKey: "st",
title: (h, { colIndex }) => (
<div class="filter-header">
<span class="name">{i18n.t('TableList.type')}</span>
<span class="icon" onClick={filterHistoryList.bind(this, 'type')}>
<span class="name">{i18n.t("TableList.type")}</span>
<span class="icon" onClick={filterHistoryList.bind(this, "type")}>
<FilterBuyAndSellSVG></FilterBuyAndSellSVG>
</span>
</div>
),
align: 'center',
align: "center",
},
{
colKey: 'tokenNumStr',
colKey: "tokenNumStr",
title: (h, { colIndex }) => (
<div class="filter-header">
<span class="name">{i18n.t('TableList.amountToken')}</span>
<span class="name">{i18n.t("TableList.amountToken")}</span>
<span
class="icon"
onClick={openfilterDialog.bind(this, {
title: i18n.t('TableList.amountToken'),
value: 'oldtokenNumStr',
title: i18n.t("TableList.amountToken"),
value: "oldtokenNumStr",
})}
>
<FilterSvg></FilterSvg>
</span>
</div>
),
align: 'center',
align: "center",
},
{
colKey: 'vnStr',
colKey: "vnStr",
title: (h, { colIndex }) => (
<div class="filter-header">
<span class="name">{i18n.t('TableList.AmountUSD')}</span>
<span class="name">{i18n.t("TableList.AmountUSD")}</span>
<span
class="icon"
onClick={openfilterDialog.bind(this, {
title: i18n.t('TableList.AmountUSD'),
value: 'vn',
title: i18n.t("TableList.AmountUSD"),
value: "vn",
})}
>
<FilterSvg></FilterSvg>
</span>
</div>
),
align: 'center',
align: "center",
},
{
colKey: 'upStr',
colKey: "upStr",
title: (h, { colIndex }) => (
<div class="filter-header">
<span class="name">{i18n.t('TableList.hisPrice')}</span>
<span class="name">{i18n.t("TableList.hisPrice")}</span>
<span
class="icon"
onClick={openfilterDialog.bind(this, {
title: i18n.t('TableList.hisPrice'),
value: 'up',
title: i18n.t("TableList.hisPrice"),
value: "up",
})}
>
<FilterSvg></FilterSvg>
</span>
</div>
),
align: 'center',
align: "center",
},
{
colKey: 'nh',
colKey: "nh",
title: (h, { colIndex }) => (
<div class="filter-header">
<span class="name">{i18n.t('TableList.NewHolder')}</span>
<span class="icon" onClick={filterHistoryList.bind(this, 'nh')}>
<span class="name">{i18n.t("TableList.NewHolder")}</span>
<span class="icon" onClick={filterHistoryList.bind(this, "nh")}>
<FilterBuyAndSellSVG></FilterBuyAndSellSVG>
</span>
</div>
),
align: 'center',
align: "center",
},
{
colKey: 'sr',
colKey: "sr",
// title: i18n.t('TableList.SellRatio'),
title: (h, { colIndex }) => (
<div class="filter-header">
<span class="name">{i18n.t('TableList.SellRatio')}</span>
<span class="name">{i18n.t("TableList.SellRatio")}</span>
<span
class="icon"
onClick={openfilterDialog.bind(this, {
title: i18n.t('TableList.SellRatio'),
value: 'oldsr',
title: i18n.t("TableList.SellRatio"),
value: "oldsr",
})}
>
<FilterSvg></FilterSvg>
</span>
</div>
),
align: 'center',
align: "center",
},
{
colKey: 'h100',
colKey: "h100",
title: (h, { colIndex }) => (
<div class="filter-header">
<span class="name">{i18n.t('TableList.top100Holders')}</span>
<span class="icon" onClick={filterHistoryList.bind(this, 'top100')}>
<span class="name">{i18n.t("TableList.top100Holders")}</span>
<span class="icon" onClick={filterHistoryList.bind(this, "top100")}>
<FilterBuyAndSellSVG></FilterBuyAndSellSVG>
</span>
</div>
),
align: 'center',
align: "center",
},
{
colKey: 'txn',
title: i18n.t('TableList.hisTxn'),
align: 'center',
colKey: "txn",
title: i18n.t("TableList.hisTxn"),
align: "center",
},
]);
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
@import '@/style/variables.less';
@import "@/style/flex.less";
@import "@/style/variables.less";
.history-list-wrapper {
width: 100%;
height: 100%;
......@@ -714,7 +715,7 @@ const columns = computed(() => [
tr {
th {
border-bottom: var(--new-border-2);
font-family: 'Normal';
font-family: "Normal";
}
}
}
......@@ -722,7 +723,7 @@ const columns = computed(() => [
tr {
td {
border-bottom: var(--new-border-2);
font-family: 'Medium';
font-family: "Medium";
}
}
}
......@@ -784,7 +785,7 @@ const columns = computed(() => [
padding: 4px 6px;
.t-radio-button {
border: none;
font-family: 'Medium';
font-family: "Medium";
}
.t-is-checked {
background: var(--themeColor);
......@@ -798,7 +799,7 @@ const columns = computed(() => [
border: 1px solid var(--td--table-icon-color-1);
background: var(--history-list-reset-btn-back);
color: var(--td-Search-info-color-1);
font-family: 'Regular';
font-family: "Regular";
.icon {
margin-right: 6px;
fill: var(--td-Search-info-color-1);
......
views/token/RightDetail.vue
......@@ -117,7 +117,6 @@ import TokenPool from "./TokenPool.vue";
import TokenSocialList from "./TokenSocialList.vue";
import * as Cache from "@/utils/cache";
import { MessagePlugin } from "tdesign-vue-next";
import DetailsEcharts from "../analysis/detailsEcharts.vue";
import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
import Favo from "/public/images/svg/rightDetail/favo.svg";
import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
......@@ -125,6 +124,11 @@ import { useI18n } from "vue-i18n";
import RightDetailHeader from "./rightDetailHeader.vue";
import SubmitSocialInfo from "./SubmitSocialInfo.vue";
import Collection from "./Collection.vue";
// 异步组件
const DetailsEcharts = defineAsyncComponent(
() => import("../analysis/detailsEcharts.vue")
);
const router = useRouter();
const { t, locale } = useI18n();
// 通知表格收藏图表取消收藏
......@@ -342,6 +346,7 @@ watch(
z-index: 99;
margin-right: 8px;
box-sizing: border-box;
background: var(--td--right-back-color-2);
.right-header {
box-sizing: border-box;
height: 40px;
......
views/token/TokenFilter.vue
......@@ -620,7 +620,6 @@ watch(formData, (v) => {
font-family: "Regular";
background: none;
color: var(--td-Search-info-color-1);
margin-left: -2px;
}
.active {
background: var(--td--main-btn-color-1);
......
views/token/TokenList.vue deleted 100644 → 0
<template>
<div class="token-list-wrapper-fa">
<FilterBtns @filterChange="filterChange"></FilterBtns>
<div class="token-list-wrapper">
<t-table
rowKey="tbname"
hover
:onRowClick="handleRowClick"
:row-class-name="getRowClassName"
:sort="sort"
:headerAffixedTop="TableScroll"
@sort-change="sortChange"
:data="resultData.list"
:loading="loading"
table-layout="auto"
:columns="columns"
id="table-height-auto"
>
<template #index="{ row }">
<span>
{{ row.index + 100 * (pageNum - 1) }}
</span>
</template>
<template #Pool>
<span>{{ $t('TableList.pool') + HeadTokenType }}</span>
</template>
<template #pb="{ row }">
<span>{{ Judgment() + row.pb }}</span>
</template>
<template #tn="{ row }">
<div class="name-block">
<div class="tn">{{ row.tn }}</div>
<div class="symbol">{{ row.sy }}/{{ row.ps }}</div>
</div>
</template>
<template #operation="{ row }">
<JumpOther :tb="row.tbname" type="detail" content="K Line">
<template #svg> <KLink class="k-link"></KLink> </template
></JumpOther>
</template>
<template #media="{ row }">
<JumpOther :tb="row.tbname" type="analysis" content="analysis">
<template #svg>
<analysisSvg class="to-analysis"></analysisSvg>
</template>
</JumpOther>
</template>
<template #sortIcon>
<SortSvg></SortSvg>
</template>
</t-table>
<div class="page-footer">
<CustPagination
:pageNum="pageNum"
:total="resultData.total"
:continues="8"
@pageChange="onCurrentChange"
></CustPagination>
</div>
</div>
</div>
</template>
<script setup lang="tsx">
const sort = ref({});
const sortChange = (v, options) => {
sort.value = v;
resultData.list = options.currentDataSource;
};
</script>
<style lang="less">
@import '@/style/variables.less';
@import '@/style/line.less';
.token-list-wrapper-fa {
margin-top: 8px;
background: var(--td--right-back-color-2);
border-radius: @border-radius;
box-shadow: @box-shadow;
.token-list-wrapper {
box-sizing: border-box;
padding: 1px;
#table-height-auto {
.t-table__content {
background: var(--main-theme-color-2);
}
.t-table__affixed-header-elm-wrap {
.scrollbar {
overflow: hidden;
}
}
th,
td {
padding: 10px 12px;
}
tr {
cursor: pointer;
}
thead {
tr {
th {
white-space: nowrap;
border: none;
box-sizing: border-box;
background: var(--td--right-back-color-2);
}
}
& > :nth-child(1) {
th {
color: var(--td--main-btn-color-1);
font-weight: bold;
white-space: nowrap;
font-family: 'bold';
}
.t-align-center {
height: 30px !important;
padding: 0;
}
& > :nth-child(1) {
&::before {
border-left: none;
}
}
& > :last-child {
&::before {
border-right: none;
}
}
}
& > :nth-child(2) {
th {
font-size: 14px;
font-family: 'Medium';
border-bottom: 1px solid var(--new-border-4);
}
& > * {
position: relative !important;
box-sizing: border-box;
&::before {
content: '';
width: 200%;
height: 200%;
position: absolute;
border: var(--new-border-2);
top: 0;
left: 0;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
}
}
& > :nth-child(1) {
&::before {
border-left: none;
}
}
.t-table__double-icons {
.t-table-sort-asc {
padding-top: 6px;
svg {
fill: #7b7d87;
opacity: 1;
}
&:hover {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
.t-table-sort-desc {
padding-bottom: 0px;
svg {
fill: #7b7d87;
}
&:hover {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
.t-table__sort-icon--active {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
}
}
.t-table__body {
font-size: var(--font-size-s);
tr {
background: var(--td-table-tr-back-color);
transition: background-color 0s ease-in;
td {
border: none;
border-bottom: 1px solid var(--new-border-3);
background: var(--new-background-5);
font-family: 'Regular';
}
}
.custom-third-class-name {
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;
}
}
}
</style>
views/token/collectionTable.vue
......@@ -24,13 +24,14 @@
</template>
<script lang="ts" setup>
import { getCollectionList, deleteCollection } from '@/utils/cache';
import request from '@/utils/request';
import { parseCoinAmount, parsePercent } from '@/utils/tool';
import { DeleteIcon } from 'tdesign-icons-vue-next';
import { useI18n } from 'vue-i18n';
import { getCollectionList, deleteCollection } from "@/utils/cache";
import request from "@/utils/request";
import { parseCoinAmount, parsePercent } from "@/utils/tool";
import { DeleteIcon } from "tdesign-icons-vue-next";
import { useI18n } from "vue-i18n";
// import { goDetailK } from '@/utils/router/routerGo';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { Table as TTable } from "tdesign-vue-next";
const i18n = useI18n();
const list = ref([]);
const loading = ref(false);
......@@ -51,12 +52,12 @@ const getList = () => {
return;
}
let tags = collections.map((item) => item.hash);
request.post('/v1/coinnav/favorites', tags).then((res: any) => {
request.post("/v1/coinnav/favorites", tags).then((res: any) => {
let tmp = (res || []).filter((item) => item);
tmp.forEach((item, index) => {
item.up = parseCoinAmount(item.up);
if (item.r24h.toString()[0] !== '-') {
item.r24h = '+' + parsePercent(item.r24h);
if (item.r24h.toString()[0] !== "-") {
item.r24h = "+" + parsePercent(item.r24h);
} else {
item.r24h = parsePercent(item.r24h);
}
......@@ -96,38 +97,38 @@ const deleteToken = (tb) => {
};
const ListenColor = computed((value) => {
return function (value) {
if (value[0] === '-') {
return '#f85260';
if (value[0] === "-") {
return "#f85260";
} else {
return '#23ab94';
return "#23ab94";
}
};
});
const columns = computed(() => {
return [
{
title: i18n.t('collection.name'),
colKey: 'tn',
title: i18n.t("collection.name"),
colKey: "tn",
},
{
title: i18n.t('collection.price'),
colKey: 'up',
title: i18n.t("collection.price"),
colKey: "up",
},
{
title: i18n.t('collection.r24h'),
colKey: 'r24h',
slot: 'r24h',
width: '108px',
title: i18n.t("collection.r24h"),
colKey: "r24h",
slot: "r24h",
width: "108px",
},
];
});
const handleRowClick = (item) => {
let Obj = filterChainObj('value', chain.value, true);
let Obj = filterChainObj("value", chain.value, true);
let params: any = {
path: Obj.name,
tb:
item.row.tb[0] === 'd'
item.row.tb[0] === "d"
? item.row.tb.slice(1, item.row.tb.length)
: item.row.tb,
};
......
views/user/Billing.vue
<template>
<div class="bill-box">
<div class="bill-content">
<div class="header">{{ $t('user.BillingDetails') }}</div>
<div class="header">{{ $t("user.BillingDetails") }}</div>
<div class="table-box">
<t-table
tableLayout="auto"
......@@ -18,7 +18,7 @@
<span v-else-if="row.status == 0">等待支付</span>
</template>
<template #vip_list_title="{ row }">
<span>{{ row.vip_list?.title ?? '---' }}</span>
<span>{{ row.vip_list?.title ?? "---" }}</span>
</template>
</t-table>
</div>
......@@ -37,45 +37,46 @@
</template>
<script lang="ts" setup>
import request from '@/utils/request';
import { MessagePlugin } from 'tdesign-vue-next';
import { useI18n } from 'vue-i18n';
import request from "@/utils/request";
import { MessagePlugin } from "tdesign-vue-next";
import { useI18n } from "vue-i18n";
import { Table as TTable } from "tdesign-vue-next";
const { t } = useI18n();
const columns = computed(() => [
{
colKey: 'index',
title: '#',
align: 'center',
colKey: "index",
title: "#",
align: "center",
},
{
colKey: 'vip_list_title',
title: t('user.Packages'),
align: 'center',
colKey: "vip_list_title",
title: t("user.Packages"),
align: "center",
},
{
colKey: 'amount',
title: t('user.price'),
align: 'center',
colKey: "amount",
title: t("user.price"),
align: "center",
},
{
colKey: 'default',
title: t('user.ExpirationDate2'),
align: 'center',
colKey: "default",
title: t("user.ExpirationDate2"),
align: "center",
},
{
colKey: 'created_at',
title: t('user.OrderTime'),
align: 'center',
colKey: "created_at",
title: t("user.OrderTime"),
align: "center",
},
{
colKey: 'status',
title: t('user.Status'),
align: 'center',
colKey: "status",
title: t("user.Status"),
align: "center",
},
{
colKey: 'needed',
title: t('user.PaymentMethod'),
align: 'center',
colKey: "needed",
title: t("user.PaymentMethod"),
align: "center",
},
]);
const pageNum = ref(1);
......@@ -86,7 +87,7 @@ const BillData = reactive({
list: [],
});
// 用户token
const Cookie = useCookie('userCookie');
const Cookie = useCookie("userCookie");
onMounted(() => {
getBillList();
});
......@@ -96,7 +97,7 @@ const getBillList = () => {
try {
loading.value = true;
request
.get('/api/user/recharge/List', {
.get("/api/user/recharge/List", {
headers: {
authorization: `Bearer ${Cookie.value}`,
},
......@@ -110,7 +111,7 @@ const getBillList = () => {
total.value = res.data.total;
} else if (res.code == 2) {
MessagePlugin.closeAll();
MessagePlugin.warning('登录信息已过期');
MessagePlugin.warning("登录信息已过期");
}
loading.value = false;
});
......@@ -121,8 +122,8 @@ const getBillList = () => {
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
@import '@/style/variables.less';
@import "@/style/flex.less";
@import "@/style/variables.less";
.bill-box {
height: calc(100vh - 100px);
width: calc(100vw - 410px);
......
views/user/recordDialog.vue
......@@ -9,32 +9,32 @@
:draggable="true"
>
<template #header>
<h3>{{ $t('user.InvitationRecord') }}</h3>
<h3>{{ $t("user.InvitationRecord") }}</h3>
</template>
<template #body>
<div class="Invited-title">
<div class="Invited-content">
<div class="Invited-item1">
<p>{{ $t('user.MyInvitationCode') }}</p>
<p>{{ $t("user.MyInvitationCode") }}</p>
<p class="Invited-active">{{ inviteData.invite_code }}</p>
</div>
<div class="Invited-item1">
<p>{{ $t('user.TotalNumber') }}</p>
<p>{{ $t("user.TotalNumber") }}</p>
<p class="Invited-active">{{ inviteData.invite_total }}</p>
</div>
<div class="Invited-item1">
<p>{{ $t('user.ValidInvitation') }}</p>
<p>{{ $t("user.ValidInvitation") }}</p>
<p class="Invited-active">{{ inviteData.valid_invite_total }}</p>
</div>
</div>
<div class="Invited-href">
<div class="Invited-item1">
<p>{{ $t('user.InvitationLinks') }}</p>
<p>{{ $t("user.InvitationLinks") }}</p>
<p class="Invited-active">{{ inviteData.invite_href }}</p>
</div>
<div class="href-btn">
<t-button @click="QrCodevisible = true">{{
$t('user.InvitationQRCode')
$t("user.InvitationQRCode")
}}</t-button>
</div>
</div>
......@@ -67,16 +67,17 @@
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useI18n } from "vue-i18n";
import { Table as TTable } from "tdesign-vue-next";
const { t } = useI18n();
const props = defineProps({
recordVisible: Boolean,
inviteData: Object as any,
});
const emit = defineEmits(['closeRecordDialog']);
const emit = defineEmits(["closeRecordDialog"]);
const QrCodevisible = ref(false);
const closerecordDialog = () => {
emit('closeRecordDialog', false);
emit("closeRecordDialog", false);
};
// 二维码窗口关闭
const closeDialog = (value: boolean) => {
......@@ -86,27 +87,27 @@ const closeDialog = (value: boolean) => {
};
const columns1 = computed(() => [
{
colKey: 'userName',
title: t('user.InviteUsername'),
colKey: "userName",
title: t("user.InviteUsername"),
},
{
colKey: 'up_time',
title: t('user.RechargeTime'),
colKey: "up_time",
title: t("user.RechargeTime"),
},
{
colKey: 'time',
title: t('user.InvitationTime'),
colKey: "time",
title: t("user.InvitationTime"),
},
{
colKey: 'email',
title: t('user.InvitationEmail'),
colKey: "email",
title: t("user.InvitationEmail"),
},
]);
</script>
<style lang="less" scoped>
@import '@/style/components/hierarchyDialog.less';
@import '@/style/flex.less';
@import "@/style/components/hierarchyDialog.less";
@import "@/style/flex.less";
.Invited-record-box {
.record-dialog-box {
:deep(.t-dialog) {
......
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