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 @@ ...@@ -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/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