Skip to content

D
dexfilter-web-nuxt3
Commit a0bbd5f4 by lei
Options

1

parent d72da515
Showing with 464 additions and 754 deletions
.output (2).zip 0 → 100644
File added
.output.zip 0 → 100644
File added
components/announcement.vue
......@@ -4,15 +4,15 @@
<div class="Announcement-box" v-if="hasOpen">
<div class="Announcement-box-cl">
<div class="header">
{{ $t('Announcement.title') }}
{{ $t("Announcement.title") }}
</div>
<div class="content">
<span>{{ $t('Announcement.content') }}</span>
<span>{{ $t("Announcement.content") }}</span>
<AnnSvg></AnnSvg>
</div>
<div class="footer">
<t-button @click="JoinUs(tgUrl)">{{
$t('Customized.Contact')
$t("Customized.Contact")
}}</t-button>
</div>
<div class="close" @click="closeAnn">
......@@ -25,9 +25,9 @@
</template>
<script lang="ts" setup>
import AnnSvg from '/public/images/svg/filter/announcement.svg';
import closeSvg from '/public/images/svg/filter/close.svg';
import { tgUrl } from '@/utils/open';
import AnnSvg from "/public/images/svg/filter/announcement.svg";
import closeSvg from "/public/images/svg/filter/close.svg";
import { tgUrl } from "@/utils/open";
// 是否展示广告
const hasOpen = ref(false);
......@@ -38,13 +38,17 @@ const getCurTime = () => {
return date.valueOf();
};
onMounted(() => {
let open = JSON.parse(window.localStorage.getItem('openAnn'));
let open = JSON.parse(window.localStorage.getItem("openAnn"));
if (open && Object.keys(open).length) {
// 获取当前时间
let curTime = getCurTime();
if (curTime - open.last >= 86400000) {
hasOpen.value = true;
} else {
hasOpen.value = false;
}
} else {
hasOpen.value = true;
}
});
const JoinUs = (url: string) => {
......@@ -55,18 +59,18 @@ const closeAnn = () => {
hasOpen.value = false;
// 每天只弹出一次
window.localStorage.setItem(
'openAnn',
"openAnn",
JSON.stringify({
last: getCurTime(),
value: 'close',
value: "close",
})
);
};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
@import "@/style/variables.less";
@import "@/style/flex.less";
.Announcement-box {
position: fixed;
bottom: 12px;
......
nuxt.config.ts
import viteCompression from 'vite-plugin-compression';
import viteCompression from "vite-plugin-compression";
// import visualizer from 'rollup-plugin-visualizer';
// 筛选接口地址
let filterApi = 'http://156.247.9.93:9501/';
let loginApi = 'http://156.247.9.93:8001/';
let filterApi = "http://156.247.9.93:9501/";
let loginApi = "http://156.247.9.93:8001/";
export default defineNuxtConfig({
// plugins: [],
modules: ['nuxt-svgo', '@nuxtjs-alt/proxy'],
modules: ["nuxt-svgo", "@nuxtjs-alt/proxy"],
proxy: {
enableProxy: true,
proxies: {
'/score': {
"/score": {
target: filterApi,
changeOrigin: true,
},
'/v1': {
"/v1": {
target: filterApi,
changeOrigin: true,
},
'/search': {
"/search": {
target: filterApi,
changeOrigin: true,
},
'/favorites': {
"/favorites": {
target: filterApi,
changeOrigin: true,
},
//api-ip是另外滴
'/api': {
"/api": {
target: loginApi,
changeOrigin: true,
},
......@@ -40,9 +40,9 @@ export default defineNuxtConfig({
// },
vite: {
plugins: [viteCompression()],
envDir: '~/env',
envDir: "~/env",
build: {
minify: 'terser', // 混淆器，terser构建后文件体积更小
minify: "terser", // 混淆器，terser构建后文件体积更小
// 构建后是否生成 source map 文件
// sourcemap: 'hidden',
cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
......@@ -60,11 +60,14 @@ export default defineNuxtConfig({
rollupOptions: {
output: {
manualChunks: {
TdesignVueNext: ['tdesign-vue-next'],
CustomEcharts: ['echarts'],
// TdesignVueNext: ['tdesign-vue-next'],
CustomEcharts: ["echarts"],
},
},
},
sourcemap: false,
// 关闭文件计算
reportCompressedSize: false,
},
},
build: {
......@@ -72,11 +75,11 @@ export default defineNuxtConfig({
// vendor-已被弃用
// 第三方插件转es5
transpile:
process.env.NODE_ENV === 'production'
? ['tdesign-vue-next', 'echarts', 'vue-i18n']
: ['echarts'],
process.env.NODE_ENV === "production"
? ["tdesign-vue-next", "echarts", "vue-i18n"]
: ["echarts"],
// cssSourceMap: true,
// analyze: true,
},
css: ['@/style/font-family.css'],
css: ["@/style/font-family.css"],
});
plugins/Tdesign.ts
import { defineNuxtPlugin } from '#app';
import { defineNuxtPlugin } from "#app";
import {
Table as TTable,
HeadMenu as THeadMenu,
MenuItem as TMenuItem,
Icon as TIcon,
......@@ -34,7 +33,7 @@ import {
Divider as TDivider,
Swiper as TSwiper,
SwiperItem as TSwiperItem,
} from 'tdesign-vue-next';
} from "tdesign-vue-next";
const components = [
THeadMenu,
TMenuItem,
......@@ -71,10 +70,10 @@ const components = [
TSwiperItem,
];
// 无法循环挂载的组件--单独拎出来
const oncomponents = [TTable];
// const oncomponents = [TTable];
export default defineNuxtPlugin((nuxtApp) => {
components.forEach((item: any) => {
nuxtApp.vueApp.use(item);
});
nuxtApp.vueApp.component('t-table', oncomponents[0]);
// nuxtApp.vueApp.component('t-table', oncomponents[0]);
});
stats.html deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
style/reset.css
......@@ -4,42 +4,3 @@ body {
padding: 0;
margin: 0;
}
/* html {
font-size: 14px;
}
@media screen and (max-width: 1550px) {
#__nuxt {
height: 100vh;
}
.t-layout {
zoom: 0.8;
height: 100%;
}
.t-layout .t-layout__content {
height: calc(100vh - 70px);
}
.home-wrapper {
width: 100% !important;
}
.token-page-wrapper {
flex: 1;
}
.home-wrapper .right-detail-wrapper {
width: 320px !important;
height: calc((100vh - 70px) * 1.25);
flex: none;
}
.right-detail-wrapper .details-title-box {
height: calc(100% - 40px);
display: flex;
flex-direction: column;
}
.right-body-scroll {
flex: 1;
}
.right-body-scroll .right-body {
}
.custom-search-drawer .t-drawer__content-wrapper {
zoom: 0.8;
}
} */
text.js deleted 100644 → 0
// 获取0的个数
let test = (1000000000 + '').match(/0/g);
console.log(test);
views/analysis/DealBox.vue
......@@ -24,34 +24,32 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.r24hBay') }}</span>
<span class="value">{{ formData.value1 ?? '---' }}</span>
<span class="label">{{ $t("analysis.r24hBay") }}</span>
<span class="value">{{ formData.value1 ?? "---" }}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.r24hSell') }}</span>
<span class="value">{{ formData.value2 ?? '---' }}</span>
<span class="label">{{ $t("analysis.r24hSell") }}</span>
<span class="value">{{ formData.value2 ?? "---" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-2"></div>
<!-- <NoData v-show="currentType"></NoData> -->
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import NoData from './noData.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const {
maxNum,
resultList,
......@@ -71,7 +69,7 @@ const props = defineProps({
r24h: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
let myChart: any = null;
// 初始化折线图
const WatchEcharts = useWatchEcharts();
......@@ -79,8 +77,8 @@ const WatchEcharts = useWatchEcharts();
const chain = useChain();
const currentType = ref(true);
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
watch(
() => WatchEcharts.value,
......@@ -105,12 +103,12 @@ watch(
changeEchart();
}
);
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -129,7 +127,7 @@ const changeEchart = () => {
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-2', props.theme);
initChart("chart-box-2", props.theme);
};
const getData = (timestamp: number) => {
try {
......@@ -152,10 +150,10 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.buy;
formData.value2 = res?.count?.sell;
// 先计算出双轴各自的最大值
getMinNum(res.list.buy, 'oneMin');
getMaxNum(res.list.buy, 'oneMax');
getMinNum(res.list.sell, 'twoMin');
getMaxNum(res.list.sell, 'twoMax');
getMinNum(res.list.buy, "oneMin");
getMaxNum(res.list.buy, "oneMax");
getMinNum(res.list.sell, "twoMin");
getMaxNum(res.list.sell, "twoMax");
resultList.list = res.list;
renderChart(res.list);
} else {
......@@ -171,60 +169,60 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.bay'), t('analysis.sell')],
icon: 'circle',
data: [t("analysis.bay"), t("analysis.sell")],
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
left: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
name: t('analysis.bay'),
type: "value",
name: t("analysis.bay"),
axisLabel: {
formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
{
type: 'value',
name: t('analysis.sell'),
type: "value",
name: t("analysis.sell"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
},
],
series: [
{
name: t('analysis.bay'),
type: 'line',
name: t("analysis.bay"),
type: "line",
data: list.buy,
lineStyle: {
color: lightLineColor.blue,
......@@ -233,8 +231,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.sell'),
type: 'line',
name: t("analysis.sell"),
type: "line",
data: list.sell,
showSymbol: false,
...greenGradientLight,
......@@ -244,7 +242,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-2').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-2").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/DiscordBox.vue
......@@ -23,32 +23,31 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.CurrentTotal') }}</span>
<span class="value">{{ formData.value1 ?? '---' }}</span>
<span class="label">{{ $t("analysis.CurrentTotal") }}</span>
<span class="value">{{ formData.value1 ?? "---" }}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.Currentpeopleonline') }}</span>
<span class="value">{{ formData.value2 ?? '---' }}</span>
<span class="label">{{ $t("analysis.Currentpeopleonline") }}</span>
<span class="value">{{ formData.value2 ?? "---" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-8"></div>
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
} from "@/utils/echarts/color";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
const { maxNum, resultList, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
......@@ -69,7 +68,7 @@ watch(
() => WatchEcharts.value,
(v) => {
onInit();
getData();
getData("");
}
);
// 提交时间戳
......@@ -78,11 +77,11 @@ const onChange = (value: number) => {
};
// 当前链
const chain = useChain();
const date = ref('5m');
const date = ref("5m");
//
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
const changeEchart = () => {
onInit();
......@@ -100,30 +99,30 @@ watch(
(v) => {
// 当处于右侧折线图页面时,点击行，切换重新加载折线图
onInit();
getData();
getData("");
}
);
onMounted(() => {
nextTick(() => {
if (route.name !== 'tokenAnalysis') {
if (route.name !== "tokenAnalysis") {
onInit();
getData();
getData("");
}
});
});
const onInit = () => {
initChart('chart-box-8', props.theme);
initChart("chart-box-8", props.theme);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
const getData = (timestamp: number) => {
const getData = (timestamp: number | undefined | string) => {
if (!props.token) {
return;
}
......@@ -142,10 +141,10 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.din;
formData.value2 = res?.count?.diol;
// 先计算出双轴各自的最大值
getMinNum(res.list.din, 'oneMin');
getMaxNum(res.list.din, 'oneMax');
getMinNum(res.list.diol, 'twoMin');
getMaxNum(res.list.diol, 'twoMax');
getMinNum(res.list.din, "oneMin");
getMaxNum(res.list.din, "oneMax");
getMinNum(res.list.diol, "twoMin");
getMaxNum(res.list.diol, "twoMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -155,31 +154,31 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.Totaladditions'), t('analysis.peopleaddedonline')],
icon: 'circle',
data: [t("analysis.Totaladditions"), t("analysis.peopleaddedonline")],
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
left: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
......@@ -189,15 +188,15 @@ const renderChart = (list) => {
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value',
type: "value",
// name: t("analysis.Totaladditions"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
......@@ -206,23 +205,23 @@ const renderChart = (list) => {
max: maxNum.twoMax,
splitNumber: 5,
interval: (maxNum.twoMax - maxNum.twoMin) / 5,
type: 'value',
type: "value",
// name: t("analysis.peopleaddedonline"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.Totaladditions'),
type: 'line',
name: t("analysis.Totaladditions"),
type: "line",
data: list.dind,
lineStyle: {
color: lightLineColor.blue,
......@@ -231,8 +230,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.peopleaddedonline'),
type: 'line',
name: t("analysis.peopleaddedonline"),
type: "line",
data: list.diold,
lineStyle: {
color: lightLineColor.green,
......@@ -244,7 +243,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-8').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-8").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/HolderBox.vue
......@@ -23,37 +23,36 @@
</template>
<template #header>
<div class="newfield">
<span class="label">{{ $t('analysis.TotalHolder') }}</span>
<span class="value">{{ formData.value1 ?? '--' }}</span>
<span class="label">{{ $t("analysis.TotalHolder") }}</span>
<span class="value">{{ formData.value1 ?? "--" }}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.r24hadded') }}</span>
<span class="value">{{ formData.value2 ?? '--' }}</span>
<span class="label">{{ $t("analysis.r24hadded") }}</span>
<span class="value">{{ formData.value2 ?? "--" }}</span>
</div>
<div class="threefield">
<span class="label">{{ $t('analysis.r24hClearance') }}：</span>
<span class="value">{{ formData.value3 ?? '--' }}</span>
<span class="label">{{ $t("analysis.r24hClearance") }}：</span>
<span class="value">{{ formData.value3 ?? "--" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-1"></div>
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
yellowGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const {
maxNum,
resultList,
......@@ -64,7 +63,6 @@ const {
formatter,
} = useEchartNum();
const { t } = useI18n();
const route = useRoute();
const props = defineProps({
title: String,
options: Array,
......@@ -74,7 +72,7 @@ const props = defineProps({
currentPath: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
// 折线图状态
const WatchEcharts = useWatchEcharts();
watch(
......@@ -93,12 +91,12 @@ const onChange = (value: number) => {
let myChart: any = null;
// 头部数据
const formData = reactive({
value1: '',
value2: '',
value3: '',
value1: "",
value2: "",
value3: "",
});
const onInit = () => {
initChart('chart-box-1', props.theme);
initChart("chart-box-1", props.theme);
};
onMounted(async () => {
......@@ -107,12 +105,12 @@ onMounted(async () => {
getData();
});
});
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -155,12 +153,12 @@ const getData = (timestamp: number) => {
formData.value2 = res?.count?.add_24;
formData.value3 = res?.count?.cl_24;
// 先计算出双轴各自的最大值
getMinNum(res.list.active, 'oneMin');
getMaxNum(res.list.active, 'oneMax');
getMinNum(res.list.cl_nh, 'twoMin');
getMaxNum(res.list.cl_nh, 'twoMax');
getMinNum(res.list.new_nh, 'threeMin');
getMaxNum(res.list.new_nh, 'threeMax');
getMinNum(res.list.active, "oneMin");
getMaxNum(res.list.active, "oneMax");
getMinNum(res.list.cl_nh, "twoMin");
getMaxNum(res.list.cl_nh, "twoMax");
getMinNum(res.list.new_nh, "threeMin");
getMaxNum(res.list.new_nh, "threeMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -170,56 +168,56 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [
t('analysis.AddressActivity'),
t('analysis.newHoders'),
t('analysis.ClearanceHolder'),
t("analysis.AddressActivity"),
t("analysis.newHoders"),
t("analysis.ClearanceHolder"),
],
icon: 'circle',
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
left: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
type: "value",
axisLabel: {
formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.AddressActivity'),
type: 'line',
name: t("analysis.AddressActivity"),
type: "line",
data: list.active,
lineStyle: {
color: lightLineColor.blue,
......@@ -229,8 +227,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.newHoders'),
type: 'line',
name: t("analysis.newHoders"),
type: "line",
data: list.new_nh,
lineStyle: {
color: lightLineColor.green,
......@@ -240,8 +238,8 @@ const renderChart = (list) => {
...greenGradientLight,
},
{
name: t('analysis.ClearanceHolder'),
type: 'line',
name: t("analysis.ClearanceHolder"),
type: "line",
data: list.cl_nh,
lineStyle: {
color: lightLineColor.yellow,
......@@ -252,7 +250,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-1').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-1").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/InAndOutBox.vue
......@@ -23,21 +23,21 @@
</template>
<template #header>
<div class="newfield">
<span class="label">{{ $t('analysis.TotalTurnover') }}</span>
<span class="label">{{ $t("analysis.TotalTurnover") }}</span>
<span class="value">{{
formData.value1 ? '$' + conversionNum(formData.value1) : '-'
formData.value1 ? "$" + conversionNum(formData.value1) : "-"
}}</span>
</div>
<div class="onefield">
<span class="label">{{ $t('analysis.Numberdeposits') }}</span>
<span class="label">{{ $t("analysis.Numberdeposits") }}</span>
<span class="value">{{
formData.value2 ? '$' + conversionNum(formData.value2) : '-'
formData.value2 ? "$" + conversionNum(formData.value2) : "-"
}}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.Numberwithdrawals') }}</span>
<span class="label">{{ $t("analysis.Numberwithdrawals") }}</span>
<span class="value">{{
formData.value3 ? '$' + conversionNum(formData.value3) : '-'
formData.value3 ? "$" + conversionNum(formData.value3) : "-"
}}</span>
</div>
</template>
......@@ -45,24 +45,22 @@
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { conversionNum } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { conversionNum } from "@/utils/tool";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const { maxNum, getMaxNum, getMinNum, hideLoading, ShowLoading, formatter } =
} from "@/utils/echarts/color";
const { getMaxNum, getMinNum, hideLoading, ShowLoading, formatter } =
useEchartNum();
const route = useRoute();
const { t } = useI18n();
let myChart: any = null;
const props = defineProps({
......@@ -74,7 +72,7 @@ const props = defineProps({
currentPath: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
const resultList = reactive({
list: [],
});
......@@ -88,9 +86,9 @@ watch(
);
const chain = useChain();
const formData = reactive({
value1: '',
value2: '',
value3: '',
value1: "",
value2: "",
value3: "",
});
onMounted(() => {
nextTick(() => {
......@@ -121,17 +119,17 @@ const changeEchart = () => {
const onChange = (value: number) => {
getData(value);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
const onInit = () => {
initChart('chart-box-3', props.theme);
initChart("chart-box-3", props.theme);
};
const getData = (timestamp: number) => {
if (!props.tb) {
......@@ -163,10 +161,10 @@ const getData = (timestamp: number) => {
}
});
// 先计算出双轴各自的最大值
getMinNum(res.list.buy, 'oneMin');
getMaxNum(res.list.buy, 'oneMax');
getMinNum(res.list.sell, 'twoMin');
getMaxNum(res.list.sell, 'twoMax');
getMinNum(res.list.buy, "oneMin");
getMaxNum(res.list.buy, "oneMax");
getMinNum(res.list.sell, "twoMin");
getMaxNum(res.list.sell, "twoMax");
// 实例化
resultList.list = res.list;
renderChart(res.list);
......@@ -177,60 +175,60 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.Deposit'), t('analysis.Withdrawal')],
icon: 'circle',
data: [t("analysis.Deposit"), t("analysis.Withdrawal")],
icon: "circle",
},
grid: {
bottom: 30,
left: '66px',
left: "66px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
name: `${t('analysis.Deposit')}($)`,
type: "value",
name: `${t("analysis.Deposit")}($)`,
axisLabel: {
formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
{
type: 'value',
name: `${t('analysis.Withdrawal')}($)`,
type: "value",
name: `${t("analysis.Withdrawal")}($)`,
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
},
],
series: [
{
name: t('analysis.Deposit'),
type: 'line',
name: t("analysis.Deposit"),
type: "line",
data: list.buy,
lineStyle: {
color: lightLineColor.blue,
......@@ -239,8 +237,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.Withdrawal'),
type: 'line',
name: t("analysis.Withdrawal"),
type: "line",
data: list.sell,
lineStyle: {
color: lightLineColor.green,
......@@ -250,7 +248,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-3').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-3").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/PoolBox.vue
......@@ -23,9 +23,9 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.curPool') }}</span>
<span class="label">{{ $t("analysis.curPool") }}</span>
<span class="value">{{
formData.value1 ? '$' + conversionNum(formData.value1) : '-'
formData.value1 ? "$" + conversionNum(formData.value1) : "-"
}}</span>
</div>
</template>
......@@ -33,29 +33,26 @@
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import { conversionNum } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import { conversionNum } from "@/utils/tool";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const {
resultList,
maxNum,
getMaxNum,
getMinNum,
ShowLoading,
hideLoading,
formatter,
} = useEchartNum();
const route = useRoute();
const { t } = useI18n();
const props = defineProps({
tb: String,
......@@ -64,7 +61,7 @@ const props = defineProps({
r24h: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
let myChart: any = null;
const WatchEcharts = useWatchEcharts();
watch(
......@@ -80,7 +77,7 @@ const onChange = (value: number) => {
};
const chain = useChain();
const formData = reactive({
value1: '',
value1: "",
});
onMounted(async () => {
nextTick(() => {
......@@ -108,14 +105,14 @@ const changeEchart = () => {
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-9', props.theme);
initChart("chart-box-9", props.theme);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -135,25 +132,25 @@ const getData = (timestamp: number) => {
.then((res: any) => {
hideLoading(myChart);
if (res) {
if (typeof res.list.date[0] === 'number') {
if (typeof res.list.date[0] === "number") {
res.list.date.forEach((item, index) => {
let date = new Date(item * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
let Y = date.getFullYear() + '-';
let Y = date.getFullYear() + "-";
let M =
(date.getMonth() + 1 < 10
? '0' + (date.getMonth() + 1)
: date.getMonth() + 1) + '-';
let D = date.getDate() + ' ';
let h = date.getHours() + ':';
let m = date.getMinutes() + ':';
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
let D = date.getDate() + " ";
let h = date.getHours() + ":";
let m = date.getMinutes() + ":";
let s = date.getSeconds();
res.list.date[index] = Y + M + D + h + m + s;
});
}
formData.value1 = res?.count?.ub;
// 先计算出双轴各自的最大值
getMinNum(res.list.ub, 'oneMin');
getMaxNum(res.list.ub, 'oneMax');
getMinNum(res.list.ub, "oneMin");
getMaxNum(res.list.ub, "oneMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -166,53 +163,53 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.Flowpoolchanges')],
icon: 'circle',
data: [t("analysis.Flowpoolchanges")],
icon: "circle",
},
grid: {
bottom: 20,
left: '60px',
left: "60px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
name: t('analysis.Flowpoolchanges'),
type: "value",
name: t("analysis.Flowpoolchanges"),
axisLabel: {
formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.Flowpoolchanges'),
type: 'line',
name: t("analysis.Flowpoolchanges"),
type: "line",
data: list.ub,
lineStyle: {
color: lightLineColor.blue,
......@@ -222,7 +219,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-9').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-9").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/TelegramBox.vue
......@@ -23,32 +23,31 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.tgCurrentTotal') }}</span>
<span class="value">{{ formData.value1 ?? '---' }}</span>
<span class="label">{{ $t("analysis.tgCurrentTotal") }}</span>
<span class="value">{{ formData.value1 ?? "---" }}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.tgCurrentPeople') }}</span>
<span class="value">{{ formData.value2 ?? '---' }}</span>
<span class="label">{{ $t("analysis.tgCurrentPeople") }}</span>
<span class="value">{{ formData.value2 ?? "---" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-7"></div>
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
......@@ -62,7 +61,7 @@ const props = defineProps({
theme: String,
});
const route = useRoute();
const date = ref('5m');
const date = ref("5m");
const WatchEcharts = useWatchEcharts();
watch(
() => WatchEcharts.value,
......@@ -73,13 +72,13 @@ watch(
);
const chain = useChain();
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
let myChart: any = null;
onMounted(async () => {
nextTick(() => {
if (route.name !== 'tokenAnalysis') {
if (route.name !== "tokenAnalysis") {
onInit();
getData();
}
......@@ -111,15 +110,15 @@ const changeEchart = () => {
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-7', props.theme);
initChart("chart-box-7", props.theme);
};
// 初始化折线图
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -142,10 +141,10 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.tgn;
formData.value2 = res?.count?.tgol;
// 先计算出双轴各自的最大值
getMinNum(res.list.tgn, 'oneMin');
getMaxNum(res.list.tgn, 'oneMax');
getMinNum(res.list.tgol, 'twoMin');
getMaxNum(res.list.tgol, 'twoMax');
getMinNum(res.list.tgn, "oneMin");
getMaxNum(res.list.tgn, "oneMax");
getMinNum(res.list.tgol, "twoMin");
getMaxNum(res.list.tgol, "twoMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -155,35 +154,35 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [
t('analysis.TotalNumberofAdditions'),
t('analysis.Numberofpeopleaddedonline'),
t("analysis.TotalNumberofAdditions"),
t("analysis.Numberofpeopleaddedonline"),
],
icon: 'circle',
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
right: '50px',
left: "50px",
right: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
......@@ -193,15 +192,15 @@ const renderChart = (list) => {
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value',
type: "value",
// name: t("analysis.TotalNumberofAdditions"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
......@@ -210,23 +209,23 @@ const renderChart = (list) => {
max: maxNum.twoMax,
splitNumber: 5,
interval: (maxNum.twoMax - maxNum.twoMin) / 5,
type: 'value',
type: "value",
// name: t("analysis.Numberofpeopleaddedonline"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.TotalNumberofAdditions'),
type: 'line',
name: t("analysis.TotalNumberofAdditions"),
type: "line",
data: list.tgnd,
lineStyle: {
color: lightLineColor.blue,
......@@ -235,8 +234,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.Numberofpeopleaddedonline'),
type: 'line',
name: t("analysis.Numberofpeopleaddedonline"),
type: "line",
data: list.tgold,
lineStyle: {
color: lightLineColor.green,
......@@ -246,7 +245,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-7').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-7").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/Top100Box.vue
......@@ -19,15 +19,15 @@
</template>
<template #header>
<div class="onefield">
<span class="label">{{ $t('analysis.top10024HDeposit') }}</span>
<span class="label">{{ $t("analysis.top10024HDeposit") }}</span>
<span class="value">{{
formData.value1 ? '$' + conversionNum(formData.value1) : '-'
formData.value1 ? "$" + conversionNum(formData.value1) : "-"
}}</span>
</div>
<div class="twofield">
<span class="label">{{ $t('analysis.top100withdrawal') }}</span>
<span class="label">{{ $t("analysis.top100withdrawal") }}</span>
<span class="value">{{
formData.value2 ? '$' + conversionNum(formData.value2) : '-'
formData.value2 ? "$" + conversionNum(formData.value2) : "-"
}}</span>
</div>
</template>
......@@ -35,25 +35,23 @@
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { conversionNum } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { conversionNum } from "@/utils/tool";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
} from "@/utils/echarts/color";
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
const route = useRoute();
const props = defineProps({
title: String,
options: Array,
......@@ -63,7 +61,7 @@ const props = defineProps({
currentPath: String,
theme: String,
});
const date = ref('5m');
const date = ref("5m");
let myChart: any = null;
const WatchEcharts = useWatchEcharts();
watch(
......@@ -82,8 +80,8 @@ watch(
);
const chain = useChain();
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
const changeEchart = () => {
onInit();
......@@ -108,15 +106,15 @@ watch(
}
);
const onInit = () => {
initChart('chart-box-6', props.theme);
initChart("chart-box-6", props.theme);
};
// 初始化折线图
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -126,7 +124,7 @@ const getData = () => {
}
ShowLoading(myChart);
let newtb =
props.tb[0] == 'd' ? props.tb.slice(1, props.tb.length) : props.tb;
props.tb[0] == "d" ? props.tb.slice(1, props.tb.length) : props.tb;
request
.get(`/v1${chain.value}/analysis/getTop100ChangeV1`, {
params: {
......@@ -155,10 +153,10 @@ const getData = () => {
}
});
// 先计算出双轴各自的最大值
getMinNum(res.list.buy, 'oneMin');
getMaxNum(res.list.buy, 'oneMax');
getMinNum(res.list.sell, 'twoMin');
getMaxNum(res.list.sell, 'twoMax');
getMinNum(res.list.buy, "oneMin");
getMaxNum(res.list.buy, "oneMax");
getMinNum(res.list.sell, "twoMin");
getMaxNum(res.list.sell, "twoMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -168,32 +166,32 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.Deposit'), t('analysis.Withdrawal')],
icon: 'circle',
data: [t("analysis.Deposit"), t("analysis.Withdrawal")],
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
right: '50px',
left: "50px",
right: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
......@@ -203,15 +201,15 @@ const renderChart = (list) => {
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value',
name: `${t('analysis.Deposit')}($)`,
type: "value",
name: `${t("analysis.Deposit")}($)`,
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
......@@ -220,23 +218,23 @@ const renderChart = (list) => {
max: maxNum.twoMax,
splitNumber: 5,
interval: (maxNum.twoMax - maxNum.twoMin) / 5,
type: 'value',
name: `${t('analysis.Withdrawal')}($)`,
type: "value",
name: `${t("analysis.Withdrawal")}($)`,
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.Deposit'),
type: 'line',
name: t("analysis.Deposit"),
type: "line",
data: list.buy,
lineStyle: {
color: lightLineColor.blue,
......@@ -245,8 +243,8 @@ const renderChart = (list) => {
...blueGradientLight,
},
{
name: t('analysis.Withdrawal'),
type: 'line',
name: t("analysis.Withdrawal"),
type: "line",
data: list.sell,
lineStyle: {
color: lightLineColor.green,
......@@ -258,7 +256,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-6').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-6").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/analysis/TwitterBox.vue
......@@ -23,32 +23,31 @@
</template>
<template #header>
<div class="newfield">
<span class="label">{{ $t('analysis.Dateaccountcreation') }}</span>
<span class="value">{{ formData.value1 ?? '---' }}</span>
<span class="label">{{ $t("analysis.Dateaccountcreation") }}</span>
<span class="value">{{ formData.value1 ?? "---" }}</span>
</div>
<div class="onefield">
<span class="label">{{ $t('analysis.Numberfans') }}</span>
<span class="value">{{ formData.value2 ?? '---' }}</span>
<span class="label">{{ $t("analysis.Numberfans") }}</span>
<span class="value">{{ formData.value2 ?? "---" }}</span>
</div>
</template>
<div class="chart-box" id="chart-box-4"></div>
</chart-box>
</template>
<script setup lang="tsx">
import echarts from '@/utils/echarts/echarts';
import ChartBox from './ChartBox.vue';
import request from '@/utils/request';
import RadioGroup from '@/components/RadioGroup.vue';
import { useI18n } from 'vue-i18n';
import useEchartNum from '@/hooks/useEchartNum';
import TimeFilter from './TimeFilter.vue';
import echarts from "@/utils/echarts/echarts";
import ChartBox from "./ChartBox.vue";
import request from "@/utils/request";
import RadioGroup from "@/components/RadioGroup.vue";
import { useI18n } from "vue-i18n";
import useEchartNum from "@/hooks/useEchartNum";
import TimeFilter from "./TimeFilter.vue";
import {
blueGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
} from "@/utils/echarts/color";
const { resultList, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
const props = defineProps({
......@@ -61,11 +60,11 @@ const props = defineProps({
theme: String,
});
const route = useRoute();
const date = ref('5m');
const date = ref("5m");
let myChart: any = null;
const formData = reactive({
value1: '',
value2: '',
value1: "",
value2: "",
});
const WatchEcharts = useWatchEcharts();
watch(
......@@ -85,7 +84,7 @@ watch(
const chain = useChain();
onMounted(() => {
nextTick(() => {
if (route.name !== 'tokenAnalysis') {
if (route.name !== "tokenAnalysis") {
onInit();
getData();
}
......@@ -110,15 +109,15 @@ watch(
}
);
const onInit = () => {
initChart('chart-box-4', props.theme);
initChart("chart-box-4", props.theme);
renderChart(resultList.list);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
const initChart = (id: string, theme: string, height: string = "212px") => {
if (myChart) {
myChart.dispose();
}
const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.width = chartDom.offsetWidth + "px";
chartDom.style.height = height;
myChart = echarts.init(chartDom, theme);
};
......@@ -141,8 +140,8 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.twt;
formData.value2 = res?.count?.twf;
// 先计算出双轴各自的最大值
getMinNum(res.list.twn, 'oneMin');
getMaxNum(res.list.twn, 'oneMax');
getMinNum(res.list.twn, "oneMin");
getMaxNum(res.list.twn, "oneMax");
resultList.list = res.list;
renderChart(res.list);
}
......@@ -152,53 +151,53 @@ const renderChart = (list) => {
let options = {
backgroundColor: echartBackground[props.theme],
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
crossStyle: {
color: '#999',
color: "#999",
},
},
},
legend: {
data: [t('analysis.ChildNumberfans')],
icon: 'circle',
data: [t("analysis.ChildNumberfans")],
icon: "circle",
},
grid: {
bottom: 30,
left: '50px',
left: "50px",
},
xAxis: [
{
type: 'category',
type: "category",
data: list.date,
axisLine: {
onZero: false,
},
axisPointer: {
type: 'shadow',
type: "shadow",
},
},
],
yAxis: [
{
type: 'value',
name: t('analysis.ChildNumberfans'),
type: "value",
name: t("analysis.ChildNumberfans"),
axisLabel: {
formatter: '{value}',
formatter: "{value}",
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
type: "dashed",
},
},
},
],
series: [
{
name: t('analysis.ChildNumberfans'),
type: 'line',
name: t("analysis.ChildNumberfans"),
type: "line",
data: list.twfd,
lineStyle: {
color: lightLineColor.blue,
......@@ -208,7 +207,7 @@ const renderChart = (list) => {
},
],
};
document.querySelector('#chart-box-4').removeAttribute('_echarts_instance_');
document.querySelector("#chart-box-4").removeAttribute("_echarts_instance_");
myChart.setOption(options);
};
</script>
......
views/token/RightDetail.vue
......@@ -117,7 +117,6 @@ import TokenPool from "./TokenPool.vue";
import TokenSocialList from "./TokenSocialList.vue";
import * as Cache from "@/utils/cache";
import { MessagePlugin } from "tdesign-vue-next";
import DetailsEcharts from "../analysis/detailsEcharts.vue";
import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
import Favo from "/public/images/svg/rightDetail/favo.svg";
import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
......@@ -125,6 +124,11 @@ import { useI18n } from "vue-i18n";
import RightDetailHeader from "./rightDetailHeader.vue";
import SubmitSocialInfo from "./SubmitSocialInfo.vue";
import Collection from "./Collection.vue";
// 异步组件
const DetailsEcharts = defineAsyncComponent(
() => import("../analysis/detailsEcharts.vue")
);
const router = useRouter();
const { t, locale } = useI18n();
// 通知表格收藏图表取消收藏
......@@ -342,6 +346,7 @@ watch(
z-index: 99;
margin-right: 8px;
box-sizing: border-box;
background: var(--td--right-back-color-2);
.right-header {
box-sizing: border-box;
height: 40px;
......
views/token/TokenFilter.vue
......@@ -620,7 +620,6 @@ watch(formData, (v) => {
font-family: "Regular";
background: none;
color: var(--td-Search-info-color-1);
margin-left: -2px;
}
.active {
background: var(--td--main-btn-color-1);
......
views/token/TokenList.vue deleted 100644 → 0
<template>
<div class="token-list-wrapper-fa">
<FilterBtns @filterChange="filterChange"></FilterBtns>
<div class="token-list-wrapper">
<t-table
rowKey="tbname"
hover
:onRowClick="handleRowClick"
:row-class-name="getRowClassName"
:sort="sort"
:headerAffixedTop="TableScroll"
@sort-change="sortChange"
:data="resultData.list"
:loading="loading"
table-layout="auto"
:columns="columns"
id="table-height-auto"
>
<template #index="{ row }">
<span>
{{ row.index + 100 * (pageNum - 1) }}
</span>
</template>
<template #Pool>
<span>{{ $t('TableList.pool') + HeadTokenType }}</span>
</template>
<template #pb="{ row }">
<span>{{ Judgment() + row.pb }}</span>
</template>
<template #tn="{ row }">
<div class="name-block">
<div class="tn">{{ row.tn }}</div>
<div class="symbol">{{ row.sy }}/{{ row.ps }}</div>
</div>
</template>
<template #operation="{ row }">
<JumpOther :tb="row.tbname" type="detail" content="K Line">
<template #svg> <KLink class="k-link"></KLink> </template
></JumpOther>
</template>
<template #media="{ row }">
<JumpOther :tb="row.tbname" type="analysis" content="analysis">
<template #svg>
<analysisSvg class="to-analysis"></analysisSvg>
</template>
</JumpOther>
</template>
<template #sortIcon>
<SortSvg></SortSvg>
</template>
</t-table>
<div class="page-footer">
<CustPagination
:pageNum="pageNum"
:total="resultData.total"
:continues="8"
@pageChange="onCurrentChange"
></CustPagination>
</div>
</div>
</div>
</template>
<script setup lang="tsx">
const sort = ref({});
const sortChange = (v, options) => {
sort.value = v;
resultData.list = options.currentDataSource;
};
</script>
<style lang="less">
@import '@/style/variables.less';
@import '@/style/line.less';
.token-list-wrapper-fa {
margin-top: 8px;
background: var(--td--right-back-color-2);
border-radius: @border-radius;
box-shadow: @box-shadow;
.token-list-wrapper {
box-sizing: border-box;
padding: 1px;
#table-height-auto {
.t-table__content {
background: var(--main-theme-color-2);
}
.t-table__affixed-header-elm-wrap {
.scrollbar {
overflow: hidden;
}
}
th,
td {
padding: 10px 12px;
}
tr {
cursor: pointer;
}
thead {
tr {
th {
white-space: nowrap;
border: none;
box-sizing: border-box;
background: var(--td--right-back-color-2);
}
}
& > :nth-child(1) {
th {
color: var(--td--main-btn-color-1);
font-weight: bold;
white-space: nowrap;
font-family: 'bold';
}
.t-align-center {
height: 30px !important;
padding: 0;
}
& > :nth-child(1) {
&::before {
border-left: none;
}
}
& > :last-child {
&::before {
border-right: none;
}
}
}
& > :nth-child(2) {
th {
font-size: 14px;
font-family: 'Medium';
border-bottom: 1px solid var(--new-border-4);
}
& > * {
position: relative !important;
box-sizing: border-box;
&::before {
content: '';
width: 200%;
height: 200%;
position: absolute;
border: var(--new-border-2);
top: 0;
left: 0;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
}
}
& > :nth-child(1) {
&::before {
border-left: none;
}
}
.t-table__double-icons {
.t-table-sort-asc {
padding-top: 6px;
svg {
fill: #7b7d87;
opacity: 1;
}
&:hover {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
.t-table-sort-desc {
padding-bottom: 0px;
svg {
fill: #7b7d87;
}
&:hover {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
.t-table__sort-icon--active {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
}
}
.t-table__body {
font-size: var(--font-size-s);
tr {
background: var(--td-table-tr-back-color);
transition: background-color 0s ease-in;
td {
border: none;
border-bottom: 1px solid var(--new-border-3);
background: var(--new-background-5);
font-family: 'Regular';
}
}
.custom-third-class-name {
td {
background: var(--td-table-tr-click-back-color);
}
}
}
.name-block {
.tn {
color: var(--main-theme-color);
font-weight: 700;
font-size: 16px;
font-family: 'bold';
}
.symbol {
color: var(--td-search-btn-back-1);
margin-top: 2px;
font-size: 14px;
}
}
.up {
color: #23ab94;
}
.down {
color: #f85260;
}
.custom-r-time-td {
font-weight: 600;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
}
.custom-Indicators-td {
font-size: 14px;
}
}
.page-footer {
padding: 0 24px;
}
}
}
</style>
views/token/collectionTable.vue
......@@ -24,13 +24,14 @@
</template>
<script lang="ts" setup>
import { getCollectionList, deleteCollection } from '@/utils/cache';
import request from '@/utils/request';
import { parseCoinAmount, parsePercent } from '@/utils/tool';
import { DeleteIcon } from 'tdesign-icons-vue-next';
import { useI18n } from 'vue-i18n';
import { getCollectionList, deleteCollection } from "@/utils/cache";
import request from "@/utils/request";
import { parseCoinAmount, parsePercent } from "@/utils/tool";
import { DeleteIcon } from "tdesign-icons-vue-next";
import { useI18n } from "vue-i18n";
// import { goDetailK } from '@/utils/router/routerGo';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { Table as TTable } from "tdesign-vue-next";
const i18n = useI18n();
const list = ref([]);
const loading = ref(false);
......@@ -51,12 +52,12 @@ const getList = () => {
return;
}
let tags = collections.map((item) => item.hash);
request.post('/v1/coinnav/favorites', tags).then((res: any) => {
request.post("/v1/coinnav/favorites", tags).then((res: any) => {
let tmp = (res || []).filter((item) => item);
tmp.forEach((item, index) => {
item.up = parseCoinAmount(item.up);
if (item.r24h.toString()[0] !== '-') {
item.r24h = '+' + parsePercent(item.r24h);
if (item.r24h.toString()[0] !== "-") {
item.r24h = "+" + parsePercent(item.r24h);
} else {
item.r24h = parsePercent(item.r24h);
}
......@@ -96,38 +97,38 @@ const deleteToken = (tb) => {
};
const ListenColor = computed((value) => {
return function (value) {
if (value[0] === '-') {
return '#f85260';
if (value[0] === "-") {
return "#f85260";
} else {
return '#23ab94';
return "#23ab94";
}
};
});
const columns = computed(() => {
return [
{
title: i18n.t('collection.name'),
colKey: 'tn',
title: i18n.t("collection.name"),
colKey: "tn",
},
{
title: i18n.t('collection.price'),
colKey: 'up',
title: i18n.t("collection.price"),
colKey: "up",
},
{
title: i18n.t('collection.r24h'),
colKey: 'r24h',
slot: 'r24h',
width: '108px',
title: i18n.t("collection.r24h"),
colKey: "r24h",
slot: "r24h",
width: "108px",
},
];
});
const handleRowClick = (item) => {
let Obj = filterChainObj('value', chain.value, true);
let Obj = filterChainObj("value", chain.value, true);
let params: any = {
path: Obj.name,
tb:
item.row.tb[0] === 'd'
item.row.tb[0] === "d"
? item.row.tb.slice(1, item.row.tb.length)
: item.row.tb,
};
......
views/user/Billing.vue
<template>
<div class="bill-box">
<div class="bill-content">
<div class="header">{{ $t('user.BillingDetails') }}</div>
<div class="header">{{ $t("user.BillingDetails") }}</div>
<div class="table-box">
<t-table
tableLayout="auto"
......@@ -18,7 +18,7 @@
<span v-else-if="row.status == 0">等待支付</span>
</template>
<template #vip_list_title="{ row }">
<span>{{ row.vip_list?.title ?? '---' }}</span>
<span>{{ row.vip_list?.title ?? "---" }}</span>
</template>
</t-table>
</div>
......@@ -37,45 +37,46 @@
</template>
<script lang="ts" setup>
import request from '@/utils/request';
import { MessagePlugin } from 'tdesign-vue-next';
import { useI18n } from 'vue-i18n';
import request from "@/utils/request";
import { MessagePlugin } from "tdesign-vue-next";
import { useI18n } from "vue-i18n";
import { Table as TTable } from "tdesign-vue-next";
const { t } = useI18n();
const columns = computed(() => [
{
colKey: 'index',
title: '#',
align: 'center',
colKey: "index",
title: "#",
align: "center",
},
{
colKey: 'vip_list_title',
title: t('user.Packages'),
align: 'center',
colKey: "vip_list_title",
title: t("user.Packages"),
align: "center",
},
{
colKey: 'amount',
title: t('user.price'),
align: 'center',
colKey: "amount",
title: t("user.price"),
align: "center",
},
{
colKey: 'default',
title: t('user.ExpirationDate2'),
align: 'center',
colKey: "default",
title: t("user.ExpirationDate2"),
align: "center",
},
{
colKey: 'created_at',
title: t('user.OrderTime'),
align: 'center',
colKey: "created_at",
title: t("user.OrderTime"),
align: "center",
},
{
colKey: 'status',
title: t('user.Status'),
align: 'center',
colKey: "status",
title: t("user.Status"),
align: "center",
},
{
colKey: 'needed',
title: t('user.PaymentMethod'),
align: 'center',
colKey: "needed",
title: t("user.PaymentMethod"),
align: "center",
},
]);
const pageNum = ref(1);
......@@ -86,7 +87,7 @@ const BillData = reactive({
list: [],
});
// 用户token
const Cookie = useCookie('userCookie');
const Cookie = useCookie("userCookie");
onMounted(() => {
getBillList();
});
......@@ -96,7 +97,7 @@ const getBillList = () => {
try {
loading.value = true;
request
.get('/api/user/recharge/List', {
.get("/api/user/recharge/List", {
headers: {
authorization: `Bearer ${Cookie.value}`,
},
......@@ -110,7 +111,7 @@ const getBillList = () => {
total.value = res.data.total;
} else if (res.code == 2) {
MessagePlugin.closeAll();
MessagePlugin.warning('登录信息已过期');
MessagePlugin.warning("登录信息已过期");
}
loading.value = false;
});
......@@ -121,8 +122,8 @@ const getBillList = () => {
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
@import '@/style/variables.less';
@import "@/style/flex.less";
@import "@/style/variables.less";
.bill-box {
height: calc(100vh - 100px);
width: calc(100vw - 410px);
......
views/user/recordDialog.vue
......@@ -9,32 +9,32 @@
:draggable="true"
>
<template #header>
<h3>{{ $t('user.InvitationRecord') }}</h3>
<h3>{{ $t("user.InvitationRecord") }}</h3>
</template>
<template #body>
<div class="Invited-title">
<div class="Invited-content">
<div class="Invited-item1">
<p>{{ $t('user.MyInvitationCode') }}</p>
<p>{{ $t("user.MyInvitationCode") }}</p>
<p class="Invited-active">{{ inviteData.invite_code }}</p>
</div>
<div class="Invited-item1">
<p>{{ $t('user.TotalNumber') }}</p>
<p>{{ $t("user.TotalNumber") }}</p>
<p class="Invited-active">{{ inviteData.invite_total }}</p>
</div>
<div class="Invited-item1">
<p>{{ $t('user.ValidInvitation') }}</p>
<p>{{ $t("user.ValidInvitation") }}</p>
<p class="Invited-active">{{ inviteData.valid_invite_total }}</p>
</div>
</div>
<div class="Invited-href">
<div class="Invited-item1">
<p>{{ $t('user.InvitationLinks') }}</p>
<p>{{ $t("user.InvitationLinks") }}</p>
<p class="Invited-active">{{ inviteData.invite_href }}</p>
</div>
<div class="href-btn">
<t-button @click="QrCodevisible = true">{{
$t('user.InvitationQRCode')
$t("user.InvitationQRCode")
}}</t-button>
</div>
</div>
......@@ -67,16 +67,17 @@
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useI18n } from "vue-i18n";
import { Table as TTable } from "tdesign-vue-next";
const { t } = useI18n();
const props = defineProps({
recordVisible: Boolean,
inviteData: Object as any,
});
const emit = defineEmits(['closeRecordDialog']);
const emit = defineEmits(["closeRecordDialog"]);
const QrCodevisible = ref(false);
const closerecordDialog = () => {
emit('closeRecordDialog', false);
emit("closeRecordDialog", false);
};
// 二维码窗口关闭
const closeDialog = (value: boolean) => {
......@@ -86,27 +87,27 @@ const closeDialog = (value: boolean) => {
};
const columns1 = computed(() => [
{
colKey: 'userName',
title: t('user.InviteUsername'),
colKey: "userName",
title: t("user.InviteUsername"),
},
{
colKey: 'up_time',
title: t('user.RechargeTime'),
colKey: "up_time",
title: t("user.RechargeTime"),
},
{
colKey: 'time',
title: t('user.InvitationTime'),
colKey: "time",
title: t("user.InvitationTime"),
},
{
colKey: 'email',
title: t('user.InvitationEmail'),
colKey: "email",
title: t("user.InvitationEmail"),
},
]);
</script>
<style lang="less" scoped>
@import '@/style/components/hierarchyDialog.less';
@import '@/style/flex.less';
@import "@/style/components/hierarchyDialog.less";
@import "@/style/flex.less";
.Invited-record-box {
.record-dialog-box {
:deep(.t-dialog) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment