Skip to content

D
dexfilter-web-nuxt3
Commit a0bbd5f4 by lei
Options

1

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