Skip to content

D
dexfilter-web-nuxt3
Commit 4574a60a by haojie
Options

1

parent 8fbd0c91
Showing with 977 additions and 369 deletions
a-disst.zip
No preview for this file type
hooks/useEchartNum.ts
import { reactive } from 'vue'; import { reactive } from 'vue';
import { parseNumberToK } from '@/utils/tool';
export default function () { export default function () {
const maxNum = reactive({ const maxNum = reactive({
oneMin: 0, oneMin: 0,
...@@ -9,6 +9,9 @@ export default function () { ...@@ -9,6 +9,9 @@ export default function () {
threeMin: 0, threeMin: 0,
threeMax: 0, threeMax: 0,
}); });
const resultList = reactive({
list: [],
});
const getMaxNum = (list: any, key: string) => { const getMaxNum = (list: any, key: string) => {
if (list) { if (list) {
const max = Math.max(...list); const max = Math.max(...list);
...@@ -27,10 +30,31 @@ export default function () { ...@@ -27,10 +30,31 @@ export default function () {
maxNum[key] = Math.floor(min / 12) * 10; maxNum[key] = Math.floor(min / 12) * 10;
} }
}; };
// 开启loading
const ShowLoading = (dom: any) => {
dom &&
dom.showLoading({
textColor: 'rgb(150,150,150)', //文字颜色
maskColor: 'rgba(255,255,255,0)',
});
};
// 关闭loading
const hideLoading = (dom: any) => {
dom && dom.hideLoading();
};
const formatter = (value: number) => {
let list = [];
list.push(parseNumberToK(value));
return list;
};
return { return {
resultList,
maxNum, maxNum,
getMaxNum, getMaxNum,
getMinNum, getMinNum,
ShowLoading,
hideLoading,
formatter,
}; };
} }
language/cn.ts
...@@ -439,6 +439,11 @@ const cn = { ...@@ -439,6 +439,11 @@ const cn = {
}, },
tooltip: { tooltip: {
NoList: '没有记录', NoList: '没有记录',
historyData: '历史数据',
DataFilter: '历史数据筛选',
startTime: '请选择时间',
endTime: '结束时间',
Cannotexceed: '不能超过当前时间',
}, },
}; };
export default cn; export default cn;
language/en.ts
...@@ -437,6 +437,11 @@ const cn = { ...@@ -437,6 +437,11 @@ const cn = {
}, },
tooltip: { tooltip: {
NoList: 'No Records', NoList: 'No Records',
historyData: 'Historical Data',
DataFilter: 'Historical Data Filter',
startTime: 'Please select a time',
endTime: 'End time',
Cannotexceed: 'Cannot exceed the current time',
}, },
}; };
export default cn; export default cn;
public/images/svg/analysis/timefilter.svg 0 → 100644
<svg width="32" height="32" viewBox="0 0 32 32" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M29.3332 14.0003V6.00166C29.3334 5.82656 29.299 5.65315 29.2322 5.49131C29.1653 5.32948 29.0673 5.18239 28.9436 5.05846C28.8199 4.93452 28.673 4.83616 28.5113 4.769C28.3496 4.70183 28.1763 4.66717 28.0012 4.66699H23.9998V6.00033L27.9998 6.00166V12.667H3.99985V6.00166L7.99985 6.00033V4.66699H3.99851C3.82329 4.66673 3.64975 4.70109 3.48785 4.7681C3.32595 4.83511 3.17889 4.93346 3.05511 5.05748C2.93134 5.1815 2.83329 5.32876 2.7666 5.49079C2.69991 5.65283 2.6659 5.82644 2.66651 6.00166V27.999C2.66616 28.3525 2.8062 28.6917 3.05586 28.942C3.30551 29.1922 3.64434 29.3331 3.99785 29.3337H15.3332V27.9997L3.99985 27.999V14.0003H29.3332ZM9.33318 2.66699H10.6665V8.00033H9.33318V2.66699ZM21.3332 2.66699H22.6665V8.00033H21.3332V2.66699ZM11.9998 4.66699H19.9998V6.00033H11.9998V4.66699Z" fill=""/>
<path d="M23.3332 28.667C24.0336 28.667 24.7272 28.5291 25.3743 28.2611C26.0214 27.9931 26.6094 27.6003 27.1047 27.105C27.6 26.6098 27.9928 26.0218 28.2609 25.3747C28.5289 24.7276 28.6669 24.0341 28.6669 23.3337C28.6669 22.6332 28.5289 21.9397 28.2609 21.2926C27.9928 20.6455 27.6 20.0575 27.1047 19.5623C26.6094 19.067 26.0214 18.6742 25.3743 18.4062C24.7272 18.1382 24.0336 18.0003 23.3332 18.0003C21.9188 18.0004 20.5623 18.5624 19.5622 19.5626C18.5621 20.5627 18.0002 21.9192 18.0002 23.3337C18.0002 24.7481 18.5621 26.1046 19.5622 27.1048C20.5623 28.1049 21.9188 28.6669 23.3332 28.667ZM23.3332 30.0003C19.6512 30.0003 16.6665 27.0157 16.6665 23.3337C16.6665 19.6517 19.6512 16.667 23.3332 16.667C27.0152 16.667 29.9998 19.6517 29.9998 23.3337C29.9998 27.0157 27.0152 30.0003 23.3332 30.0003Z" fill=""/>
<path d="M23.9999 23.7257V19.9977C23.9999 19.635 23.7012 19.333 23.3332 19.333C22.9625 19.333 22.6665 19.6303 22.6665 19.9977V24.0017C22.666 24.0882 22.6825 24.174 22.7152 24.2541C22.748 24.3341 22.7962 24.407 22.8572 24.4683L24.7519 26.363C24.8137 26.4244 24.887 26.4731 24.9676 26.5061C25.0483 26.5391 25.1347 26.5559 25.2218 26.5555C25.309 26.555 25.3952 26.5374 25.4755 26.5036C25.5558 26.4697 25.6287 26.4204 25.6899 26.3583C25.814 26.2341 25.8842 26.0659 25.8851 25.8903C25.8859 25.7147 25.8175 25.5458 25.6945 25.4203L23.9999 23.7257Z" fill=""/>
</svg>
style/default.css
...@@ -86,6 +86,7 @@ ...@@ -86,6 +86,7 @@
--new-background-4: #f9fafb; --new-background-4: #f9fafb;
--new-background-5: white; --new-background-5: white;
--new-background-6: #f4f5f7; --new-background-6: #f4f5f7;
--new-background-7: rgba(40, 126, 255, 0.3);
--new-border-1: #dcdcdc; --new-border-1: #dcdcdc;
--new-border-2: 1px solid #e0e3ea; --new-border-2: 1px solid #e0e3ea;
...@@ -156,6 +157,7 @@ ...@@ -156,6 +157,7 @@
--new-background-4: #151515; --new-background-4: #151515;
--new-background-5: #0b1217; --new-background-5: #0b1217;
--new-background-6: #0b1217; --new-background-6: #0b1217;
--new-background-7: rgba(40, 126, 255, 0.3);
--new-border-1: none; --new-border-1: none;
/* 有颜色的 */ /* 有颜色的 */
......
style/reset.css
@import './default.css'; @import './default.css';
@import './ui.css';
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
......
style/ui.css 0 → 100644
.t-dialog {
background: var(--main-theme-color-2);
}
utils/echarts/color.ts 0 → 100644
import echarts from "./echarts";
export const blueGradientLight = {
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(40, 126, 255, 0.3)", //靠上方的透明颜色
},
{
offset: 1,
color: "rgba(22, 93, 255, 0)", //靠下方的透明颜色
},
]),
},
};
export const greenGradientLight = {
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(20, 201, 201, 0.3)", //靠上方的透明颜色
},
{
offset: 1,
color: "rgba(20, 201, 201, 0)", //靠下方的透明颜色
},
]),
},
};
export const yellowGradientLight = {
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(253, 240, 71, 0.3)", //靠上方的透明颜色
},
{
offset: 1,
color: "rgba(254, 254, 190, 0)", //靠下方的透明颜色
},
]),
},
};
// 白色主题下的三条折线图颜色
export const lightLineColor = {
blue: "#287eff",
green: "#14C9C9",
yellow: "#FADC19",
};
// 暗黑模式--折线图背景色
export const echartBackground = {
light: "white",
dark: "#142028",
};
// loading动画
export const echartShowLoaing = {
light: {
textColor: "black", //文字颜色
maskColor: "white",
},
dark: {
textColor: "white", //文字颜色
maskColor: "#142028",
},
};
utils/echarts/echartsTool.ts deleted 100644 → 0
export const changeEchartsList = (arr: any) => {
// 用来循环
let ForArr: any = JSON.parse(JSON.stringify(arr));
// return出去的数组
let newArr: any = JSON.parse(JSON.stringify(arr));
// for (let j = 0; j < ForArr.length; j++) {
// console.log('--------',ForArr.length)
// getMaxMin(ForArr)
// }
while (ForArr.length > 1) {
getMaxMin(ForArr)
}
function getMaxMin(arr: any) {
let maxValue = {
search_rank: arr[0].search_rank,
index: 0
};
let minValue = {
search_rank: arr[0].search_rank,
index: 0
};
for (let i = 1; i < arr.length; i++) {
// 拿到最大值
if (arr[i].search_rank >= maxValue.search_rank) {
maxValue.search_rank = arr[i].search_rank;
maxValue.index = i;
}
}
ForArr.splice(maxValue.index, 1)
for (let i = 1; i < arr.length; i++) {
// 拿到最小值
if (arr[i].search_rank <= minValue.search_rank) {
minValue.search_rank = arr[i].search_rank;
minValue.index = i;
}
}
ForArr.splice(minValue.index, 1)
// 当前最大值的下标
let curIndexMax = newArr.findIndex((item: any, index: number) => item.search_rank === maxValue.search_rank)
// 当前最小值得下标
let curIndexMin = newArr.findIndex((item: any, index: number) => item.search_rank === minValue.search_rank)
newArr[curIndexMax].value = minValue.search_rank
newArr[curIndexMin].value = maxValue.search_rank
}
if (ForArr.length === 1) {
let curIndex = newArr.findIndex((item: any, index: number) => item.search_rank === ForArr[0].search_rank)
newArr[curIndex].newValue = ForArr[0].search_rank
}
return newArr
}
\ No newline at end of file
utils/tool.ts
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Copyright（C）: 2019-2020 ZP Inc. All rights reserved. * @Copyright（C）: 2019-2020 ZP Inc. All rights reserved.
*/ */
import dayjs from 'dayjs'; import dayjs from 'dayjs';
export const commafy = function (num, fixedNum) { export const commafy = function (num: any, fixedNum: any) {
num = parseFloat(num); num = parseFloat(num);
if (fixedNum != 0 && !fixedNum) fixedNum = 2; if (fixedNum != 0 && !fixedNum) fixedNum = 2;
if (num || 0 == num) { if (num || 0 == num) {
...@@ -42,13 +42,13 @@ export const selectMonthList = function (initMonth = 202203) { ...@@ -42,13 +42,13 @@ export const selectMonthList = function (initMonth = 202203) {
* @param {*} value * @param {*} value
* @returns * @returns
*/ */
export const thousandthMoney = function (value, unit = '') { export const thousandthMoney = function (value: any, unit = '') {
if (value !== '') { if (value !== '') {
value = (Number(value) / 100000).toFixed(2); value = (Number(value) / 100000).toFixed(2);
value = String(value); value = String(value);
const match = value.split('.'); const match = value.split('.');
const res = match const res = match
.map((item) => item.replace(/(\d)(?=(\d{3})+$)/g, '$1,')) .map((item: any) => item.replace(/(\d)(?=(\d{3})+$)/g, '$1,'))
.join('.'); .join('.');
return unit ? unit + res : res; return unit ? unit + res : res;
} }
...@@ -74,7 +74,7 @@ export const RemoveSpaces = (value: string) => { ...@@ -74,7 +74,7 @@ export const RemoveSpaces = (value: string) => {
return newVal; return newVal;
}; };
export const parseCoinAmount = function (value) { export const parseCoinAmount = function (value: any) {
let res = ''; let res = '';
if (!value) { if (!value) {
return res; return res;
...@@ -134,7 +134,7 @@ export const parseScore = function (value: string | number) { ...@@ -134,7 +134,7 @@ export const parseScore = function (value: string | number) {
export const parseUrlQuery = function (url: string) { export const parseUrlQuery = function (url: string) {
const parseResult = url.split('?'); const parseResult = url.split('?');
let result = { let result: any = {
path: parseResult[0], path: parseResult[0],
query: {}, query: {},
}; };
...@@ -150,7 +150,7 @@ export const parseUrlQuery = function (url: string) { ...@@ -150,7 +150,7 @@ export const parseUrlQuery = function (url: string) {
}; };
//获取元素是否在可视区域 //获取元素是否在可视区域
export function isElementInViewport(el) { export function isElementInViewport(el: any) {
let rect = el.getBoundingClientRect(); let rect = el.getBoundingClientRect();
return ( return (
rect.top >= 0 && rect.top >= 0 &&
...@@ -161,22 +161,23 @@ export function isElementInViewport(el) { ...@@ -161,22 +161,23 @@ export function isElementInViewport(el) {
); );
} }
export function parseNumberToK(num, fixed = 1) { export function parseNumberToK(num: number | string, fixed = 1) {
if (!num) { let newNum = parseFloat(num + '');
if (!newNum) {
return '0'; return '0';
} }
if (num < 1000) { if (newNum < 1000) {
return parseFloat(parseFloat(num).toFixed(1)); return parseFloat(newNum.toFixed(1));
} else if (num >= 1000 && num < 1000000) { } else if (newNum >= 1000 && newNum < 1000000) {
return parseFloat((num / 1000).toFixed(fixed)) + 'K'; return parseFloat((newNum / 1000).toFixed(fixed)) + 'K';
} else { } else {
return parseFloat((num / 1000000).toFixed(fixed)) + 'M'; return parseFloat((newNum / 1000000).toFixed(fixed)) + 'M';
} }
} }
// //
export const filterEmptyParams = (params) => { export const filterEmptyParams = (params: any) => {
const result = {}; const result: any = {};
for (const index in params) { for (const index in params) {
if ( if (
params[index] === undefined || params[index] === undefined ||
...@@ -194,10 +195,10 @@ export const filterEmptyParams = (params) => { ...@@ -194,10 +195,10 @@ export const filterEmptyParams = (params) => {
/** /**
* 函数节流处理 * 函数节流处理
*/ */
export function throttle(func, delay) { export function throttle(func: any, delay: any) {
let timer = null; let timer: any = null;
let startTime = Date.now(); let startTime = Date.now();
return function (...args) { return function (...args: any) {
const curTime = Date.now(); const curTime = Date.now();
const remaining = delay - (curTime - startTime); const remaining = delay - (curTime - startTime);
const context = this; const context = this;
...@@ -220,11 +221,11 @@ export function throttle(func, delay) { ...@@ -220,11 +221,11 @@ export function throttle(func, delay) {
* @param Immediate -首次立即执行 * @param Immediate -首次立即执行
* @returns * @returns
*/ */
export function debounce(func, delay, Immediate = false) { export function debounce(func: any, delay: any, Immediate = false) {
let timer = null; let timer: any = null;
let closeImmed = null; let closeImmed: any = null;
let immed = Immediate; let immed = Immediate;
return function (...args) { return function (...args: any) {
const context = this; const context = this;
if (Immediate) { if (Immediate) {
if (closeImmed) { if (closeImmed) {
...@@ -382,7 +383,7 @@ export const sortImg = (list: any) => { ...@@ -382,7 +383,7 @@ export const sortImg = (list: any) => {
}; };
// 过滤两者之间的值--比较number大小 // 过滤两者之间的值--比较number大小
export const filtercriteria = (filter, list) => { export const filtercriteria = (filter: any, list: any) => {
// 解构 // 解构
const { min, max, filtervalue } = filter; const { min, max, filtervalue } = filter;
let newList: any = []; let newList: any = [];
......
views/CustomComponent/CheckBox2.vue
...@@ -72,6 +72,7 @@ const isSelected = (value: string) => { ...@@ -72,6 +72,7 @@ const isSelected = (value: string) => {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
font-size: 12px; font-size: 12px;
color: var(--td-Search-info-color-1);
} }
.check-box-active { .check-box-active {
background: var(--td--main-btn-color-1); background: var(--td--main-btn-color-1);
......
views/analysis/ChartBox.vue
...@@ -16,6 +16,9 @@ ...@@ -16,6 +16,9 @@
>{{ $t('collection.goAna') }}</t-button >{{ $t('collection.goAna') }}</t-button
> >
</div> </div>
<div class="chart-switch">
<slot name="chartSwitch"></slot>
</div>
<div class="left" v-if="hasHeader"> <div class="left" v-if="hasHeader">
<div class="sub-title"> <div class="sub-title">
<slot name="header"></slot> <slot name="header"></slot>
...@@ -24,9 +27,6 @@ ...@@ -24,9 +27,6 @@
<div class="left" v-else-if="$slots['title']"> <div class="left" v-else-if="$slots['title']">
<slot name="title"></slot> <slot name="title"></slot>
</div> </div>
<div class="chart-switch">
<slot name="chartSwitch"></slot>
</div>
</div> </div>
<div class="echart-container"> <div class="echart-container">
<slot></slot> <slot></slot>
...@@ -70,16 +70,21 @@ const goAnalysis = () => { ...@@ -70,16 +70,21 @@ const goAnalysis = () => {
@import '@/style/flex.less'; @import '@/style/flex.less';
.chart-box-wrapper { .chart-box-wrapper {
margin-top: 2px; margin-top: 2px;
background-color: var(--td-bg-color-container); background: var(--td--right-back-color-2);
min-height: 346px; min-height: 346px;
width: 100%; width: 100%;
.dj();
flex-direction: column;
border-radius: 8px;
overflow: hidden;
.header { .header {
color: @td-Search-info-color-1; color: @td-Search-info-color-1;
border: 1px solid var(--td-Search-info-border-bottom-2); border: var(--new-border-2);
border-bottom: none; border-bottom: none;
border-radius: 8px 8px 0 0;
.header-title { .header-title {
height: 30px; height: 30px;
border-bottom: 1px solid var(--td-Search-info-border-bottom-2); border-bottom: 1px solid var(--new-border-9);
padding-left: 8px; padding-left: 8px;
.dja(space-between,center); .dja(space-between,center);
font-family: 'Medium'; font-family: 'Medium';
...@@ -100,74 +105,60 @@ const goAnalysis = () => { ...@@ -100,74 +105,60 @@ const goAnalysis = () => {
padding-left: 8px; padding-left: 8px;
.title { .title {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
line-height: 24px; line-height: 24px;
} }
.sub-title { .sub-title {
width: 100%;
font-size: @font-size-s; font-size: @font-size-s;
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
margin-top: 2px; margin-bottom: 12px;
height: 70px; height: 50px;
:deep(.onefield) { .dja();
.label { flex-wrap: wrap;
font-family: 'Regular'; row-gap: 6px;
} & > :deep(*) {
color: rgb(84, 112, 198); font-family: 'Regular';
.value {
font-weight: bold;
font-family: 'Medium';
}
}
:deep(.twofield) {
color: rgb(145, 204, 117);
.label {
font-family: 'Regular';
}
.value {
font-weight: bold;
font-family: 'Medium';
}
}
:deep(.threefield) {
.label { .label {
font-family: 'Regular'; color: #7b7d87;
} }
color: rgb(250, 200, 88);
.value { .value {
font-weight: bold; color: var(--td-Search-info-color-1);
font-family: 'Medium';
} }
} }
:deep(.newfield) { & > :deep(:not(:first-child)) {
.label { margin-left: 20px;
font-family: 'Regular';
}
.value {
font-family: 'Medium';
}
} }
} }
} }
.chart-switch { .chart-switch {
.dja(right,center); .dja();
position: relative;
:deep .dimension-wrapper { :deep .dimension-wrapper {
.t-radio-group { .t-radio-group {
margin-right: 6px; margin: 12px 6px 12px 0;
.t-radio-button { .t-radio-button {
font-size: @font-size-s; font-size: @font-size-s;
border-radius: 0; padding: 2px 20px;
padding: 2px 8px;
font-family: 'Medium'; font-family: 'Medium';
} }
.t-is-checked {
background: var(--new-background-7);
}
& > :nth-child(1) {
border-radius: 4px 0px 0px 4px;
}
} }
} }
} }
} }
.echart-container { .echart-container {
border: 1px solid var(--td-Search-info-border-bottom-2); border: var(--new-border-2);
border-top: none; border-top: none;
flex: 1;
border-radius: 0 0 8px 8px;
overflow: hidden;
} }
} }
</style> </style>
views/analysis/DealBox.vue
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
<template #chartSwitch> <template #chartSwitch>
<radio-group type="analysisDate" v-model:current="date" @change="getData"> <radio-group type="analysisDate" v-model:current="date" @change="getData">
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter>
</template> </template>
<template #header> <template #header>
<div class="onefield"> <div class="onefield">
...@@ -37,7 +38,23 @@ import request from '@/utils/request'; ...@@ -37,7 +38,23 @@ 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';
const { maxNum, getMaxNum, getMinNum } = useEchartNum(); import TimeFilter from './TimeFilter.vue';
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const {
maxNum,
resultList,
getMaxNum,
getMinNum,
ShowLoading,
hideLoading,
formatter,
} = useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
title: String, title: String,
...@@ -46,8 +63,10 @@ const props = defineProps({ ...@@ -46,8 +63,10 @@ const props = defineProps({
token: String, token: String,
currentPath: String, currentPath: String,
r24h: String, r24h: String,
theme: String,
}); });
const date = ref('5m'); const date = ref('5m');
let myChart: any = null;
// 初始化折线图 // 初始化折线图
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
// 当前链 // 当前链
...@@ -59,41 +78,54 @@ const formData = reactive({ ...@@ -59,41 +78,54 @@ const formData = reactive({
watch( watch(
() => WatchEcharts.value, () => WatchEcharts.value,
(v) => { (v) => {
initChart(); onInit();
getData(); getData();
} }
); );
let myChart: any = null;
onMounted(() => {
nextTick(() => {
initChart();
getData();
});
});
watch( watch(
() => props.tb, () => props.tb,
(v) => { (v) => {
if (v) { if (v) {
initChart(); onInit();
getData(); getData();
} }
} }
); );
const initChart = () => { watch(
() => props.theme,
(v) => {
// 主题切换
changeEchart();
}
);
const initChart = (id: string, theme: string, height: string = '212px') => {
if (myChart) { if (myChart) {
myChart.dispose(); myChart.dispose();
} }
const chartDom = document.getElementById('chart-box-2') as HTMLCanvasElement; const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px'; chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.height = '212px'; chartDom.style.height = height;
myChart = echarts.init(chartDom, 'vintage'); myChart = echarts.init(chartDom, theme);
};
onMounted(() => {
nextTick(() => {
onInit();
getData();
});
});
// 提交时间戳
const onChange = (value: number) => {
console.log(value);
};
const changeEchart = () => {
onInit();
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-2', props.theme);
}; };
const getData = () => { const getData = () => {
myChart && ShowLoading(myChart);
myChart.showLoading({
textColor: 'rgb(150,150,150)', //文字颜色
maskColor: 'rgba(255,255,255,0)',
});
request request
.get(`/v1${chain.value}/analysis/getBuyAndSellNumber`, { .get(`/v1${chain.value}/analysis/getBuyAndSellNumber`, {
params: { params: {
...@@ -102,7 +134,7 @@ const getData = () => { ...@@ -102,7 +134,7 @@ const getData = () => {
}, },
}) })
.then((res: any) => { .then((res: any) => {
myChart && myChart.hideLoading(); hideLoading(myChart);
formData.value1 = res?.count?.buy; formData.value1 = res?.count?.buy;
formData.value2 = res?.count?.sell; formData.value2 = res?.count?.sell;
// 先计算出双轴各自的最大值 // 先计算出双轴各自的最大值
...@@ -110,11 +142,13 @@ const getData = () => { ...@@ -110,11 +142,13 @@ const getData = () => {
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;
renderChart(res.list); renderChart(res.list);
}); });
}; };
const renderChart = (list) => { const renderChart = (list) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -126,11 +160,11 @@ const renderChart = (list) => { ...@@ -126,11 +160,11 @@ const renderChart = (list) => {
}, },
legend: { legend: {
data: [t('analysis.bay'), t('analysis.sell')], data: [t('analysis.bay'), t('analysis.sell')],
icon: 'circle',
}, },
grid: { grid: {
bottom: 30, bottom: 30,
left: '50px', left: '50px',
right: '50px',
}, },
xAxis: [ xAxis: [
{ {
...@@ -146,21 +180,19 @@ const renderChart = (list) => { ...@@ -146,21 +180,19 @@ const renderChart = (list) => {
], ],
yAxis: [ yAxis: [
{ {
min: maxNum.oneMin,
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value', type: 'value',
name: t('analysis.bay'), name: t('analysis.bay'),
axisLabel: { axisLabel: {
formatter: '{value}', formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
}, },
}, },
{ {
min: maxNum.twoMin,
max: maxNum.twoMax,
splitNumber: 5,
interval: (maxNum.twoMax - maxNum.twoMin) / 5,
type: 'value', type: 'value',
name: t('analysis.sell'), name: t('analysis.sell'),
axisLabel: { axisLabel: {
...@@ -173,13 +205,21 @@ const renderChart = (list) => { ...@@ -173,13 +205,21 @@ const renderChart = (list) => {
name: t('analysis.bay'), name: t('analysis.bay'),
type: 'line', type: 'line',
data: list.buy, data: list.buy,
lineStyle: {
color: lightLineColor.blue,
},
showSymbol: false,
...blueGradientLight,
}, },
{ {
name: t('analysis.sell'), name: t('analysis.sell'),
type: 'line', type: 'line',
data: list.sell, data: list.sell,
// 右侧y轴 showSymbol: false,
yAxisIndex: 1, ...greenGradientLight,
lineStyle: {
color: lightLineColor.green,
},
}, },
], ],
}; };
......
views/analysis/DiscordBox.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<template #chartSwitch> <template #chartSwitch>
<radio-group type="analysisDate" v-model:current="date" @change="getData"> <radio-group type="analysisDate" v-model:current="date" @change="getData">
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter>
</template> </template>
<template #header> <template #header>
<div class="onefield"> <div class="onefield">
...@@ -34,9 +35,18 @@ import echarts from '@/utils/echarts/echarts'; ...@@ -34,9 +35,18 @@ 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 {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} 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, getMaxNum, getMinNum } = useEchartNum(); const { maxNum, resultList, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
title: String, title: String,
...@@ -45,17 +55,23 @@ const props = defineProps({ ...@@ -45,17 +55,23 @@ const props = defineProps({
tb: String, tb: String,
currentPath: String, currentPath: String,
r24h: String, r24h: String,
theme: String,
}); });
const route = useRoute(); const route = useRoute();
let myChart: any = null;
// 初始化折线图 // 初始化折线图
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
watch( watch(
() => WatchEcharts.value, () => WatchEcharts.value,
(v) => { (v) => {
initChart(); onInit();
getData(); getData();
} }
); );
// 提交时间戳
const onChange = (value: number) => {
console.log(value);
};
// 当前链 // 当前链
const chain = useChain(); const chain = useChain();
const date = ref('5m'); const date = ref('5m');
...@@ -64,38 +80,47 @@ const formData = reactive({ ...@@ -64,38 +80,47 @@ const formData = reactive({
value1: '', value1: '',
value2: '', value2: '',
}); });
let myChart: any = null; const changeEchart = () => {
onInit();
renderChart(resultList.list);
};
watch(
() => props.theme,
(v) => {
// 主题切换
changeEchart();
}
);
watch( watch(
() => props.token, () => props.token,
(v) => { (v) => {
// 当处于右侧折线图页面时,点击行，切换重新加载折线图 // 当处于右侧折线图页面时,点击行，切换重新加载折线图
initChart(); onInit();
getData(); getData();
} }
); );
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
if (route.name !== 'tokenAnalysis') { if (route.name !== 'tokenAnalysis') {
initChart(); onInit();
getData(); getData();
} }
}); });
}); });
const initChart = () => { const onInit = () => {
initChart('chart-box-8', props.theme);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
if (myChart) { if (myChart) {
myChart.dispose(); myChart.dispose();
} }
const chartDom = document.getElementById('chart-box-8') as HTMLCanvasElement; const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px'; chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.height = '212px'; chartDom.style.height = height;
myChart = echarts.init(chartDom, 'vintage'); myChart = echarts.init(chartDom, theme);
}; };
const getData = () => { const getData = () => {
myChart && ShowLoading(myChart);
myChart.showLoading({
textColor: 'rgb(150,150,150)', //文字颜色
maskColor: 'rgba(255,255,255,0)',
});
request request
.get(`/v1${chain.value}/analysis/getDiscordData`, { .get(`/v1${chain.value}/analysis/getDiscordData`, {
params: { params: {
...@@ -104,7 +129,7 @@ const getData = () => { ...@@ -104,7 +129,7 @@ const getData = () => {
}, },
}) })
.then((res: any) => { .then((res: any) => {
myChart && myChart.hideLoading(); hideLoading(myChart);
formData.value1 = res?.count?.din; formData.value1 = res?.count?.din;
formData.value2 = res?.count?.diol; formData.value2 = res?.count?.diol;
// 先计算出双轴各自的最大值 // 先计算出双轴各自的最大值
...@@ -112,11 +137,13 @@ const getData = () => { ...@@ -112,11 +137,13 @@ const getData = () => {
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;
renderChart(res.list); renderChart(res.list);
}); });
}; };
const renderChart = (list) => { const renderChart = (list) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -128,14 +155,11 @@ const renderChart = (list) => { ...@@ -128,14 +155,11 @@ const renderChart = (list) => {
}, },
legend: { legend: {
data: [t('analysis.Totaladditions'), t('analysis.peopleaddedonline')], data: [t('analysis.Totaladditions'), t('analysis.peopleaddedonline')],
// show: true, icon: 'circle',
// top: '20%',
}, },
grid: { grid: {
bottom: 30, bottom: 30,
left: '50px', left: '50px',
right: '50px',
top: 80,
}, },
xAxis: [ xAxis: [
{ {
...@@ -156,10 +180,16 @@ const renderChart = (list) => { ...@@ -156,10 +180,16 @@ const renderChart = (list) => {
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: {
show: true,
lineStyle: {
type: 'dashed',
},
},
}, },
{ {
min: maxNum.twoMin, min: maxNum.twoMin,
...@@ -167,24 +197,40 @@ const renderChart = (list) => { ...@@ -167,24 +197,40 @@ const renderChart = (list) => {
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: {
show: true,
lineStyle: {
type: 'dashed',
},
},
}, },
], ],
series: [ series: [
{ {
name: t('analysis.Totaladditions'), name: t('analysis.Totaladditions'),
type: 'line', type: 'line',
data: list.din, data: list.dind,
lineStyle: {
color: lightLineColor.blue,
},
showSymbol: false,
...blueGradientLight,
}, },
{ {
name: t('analysis.peopleaddedonline'), name: t('analysis.peopleaddedonline'),
type: 'line', type: 'line',
data: list.diol, data: list.diold,
lineStyle: {
color: lightLineColor.green,
},
// 右侧y轴 // 右侧y轴
yAxisIndex: 1, yAxisIndex: 1,
showSymbol: false,
...greenGradientLight,
}, },
], ],
}; };
......
views/analysis/HolderBox.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<template #chartSwitch> <template #chartSwitch>
<radio-group type="analysisDate" v-model:current="date" @change="getData"> <radio-group type="analysisDate" v-model:current="date" @change="getData">
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter>
</template> </template>
<template #header> <template #header>
<div class="newfield"> <div class="newfield">
...@@ -40,7 +41,24 @@ import request from '@/utils/request'; ...@@ -40,7 +41,24 @@ 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';
const { maxNum, getMaxNum, getMinNum } = useEchartNum(); import TimeFilter from './TimeFilter.vue';
import {
blueGradientLight,
greenGradientLight,
yellowGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const {
maxNum,
resultList,
getMaxNum,
getMinNum,
ShowLoading,
hideLoading,
formatter,
} = useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const props = defineProps({ const props = defineProps({
...@@ -50,54 +68,70 @@ const props = defineProps({ ...@@ -50,54 +68,70 @@ const props = defineProps({
token: String, token: String,
r24h: String, r24h: String,
currentPath: String, currentPath: String,
theme: String,
}); });
const date = ref('5m'); const date = ref('5m');
let myChart: any = null;
// 折线图状态 // 折线图状态
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
watch( watch(
() => WatchEcharts.value, () => WatchEcharts.value,
(v) => { (v) => {
initChart(); onInit();
getData(); getData();
} }
); );
const chain = useChain(); const chain = useChain();
// 提交时间戳
const onChange = (value: number) => {
console.log(value);
};
let myChart: any = null;
// 头部数据 // 头部数据
const formData = reactive({ const formData = reactive({
value1: '', value1: '',
value2: '', value2: '',
value3: '', value3: '',
}); });
const onInit = () => {
initChart('chart-box-1', props.theme);
};
onMounted(async () => { onMounted(async () => {
nextTick(() => { nextTick(() => {
initChart(); onInit();
getData(); getData();
}); });
}); });
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.height = height;
myChart = echarts.init(chartDom, theme);
};
const changeEchart = () => {
onInit();
renderChart(resultList.list);
};
watch( watch(
() => props.tb, () => props.tb,
(v) => { (v) => {
// 当处于右侧折线图页面时,点击行，重新加载折线图 // 当处于右侧折线图页面时,点击行，重新加载折线图
initChart(); onInit();
getData(); getData();
} }
); );
const initChart = () => { watch(
if (myChart) { () => props.theme,
myChart.dispose(); (v) => {
// 主题切换
changeEchart();
} }
const chartDom = document.getElementById('chart-box-1') as HTMLCanvasElement; );
chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.height = '212px';
myChart = echarts.init(chartDom, 'vintage');
};
const getData = () => { const getData = () => {
myChart && ShowLoading(myChart);
myChart.showLoading({
textColor: 'rgb(150,150,150)', //文字颜色
maskColor: 'rgba(255,255,255,0)',
});
request request
.get(`/v1${chain.value}/analysis/getNhData`, { .get(`/v1${chain.value}/analysis/getNhData`, {
params: { params: {
...@@ -106,7 +140,7 @@ const getData = () => { ...@@ -106,7 +140,7 @@ const getData = () => {
}, },
}) })
.then((res: any) => { .then((res: any) => {
myChart && myChart.hideLoading(); hideLoading(myChart);
formData.value1 = res?.count?.total_nh; formData.value1 = res?.count?.total_nh;
formData.value2 = res?.count?.add_24; formData.value2 = res?.count?.add_24;
formData.value3 = res?.count?.cl_24; formData.value3 = res?.count?.cl_24;
...@@ -117,11 +151,13 @@ const getData = () => { ...@@ -117,11 +151,13 @@ const getData = () => {
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;
renderChart(res.list); renderChart(res.list);
}); });
}; };
const renderChart = (list) => { const renderChart = (list) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -137,6 +173,7 @@ const renderChart = (list) => { ...@@ -137,6 +173,7 @@ const renderChart = (list) => {
t('analysis.newHoders'), t('analysis.newHoders'),
t('analysis.ClearanceHolder'), t('analysis.ClearanceHolder'),
], ],
icon: 'circle',
}, },
grid: { grid: {
bottom: 30, bottom: 30,
...@@ -157,32 +194,14 @@ const renderChart = (list) => { ...@@ -157,32 +194,14 @@ const renderChart = (list) => {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
// min: maxNum.oneMin,
// max: maxNum.oneMax,
// splitNumber: 5,
// interval: (maxNum.oneMax - maxNum.oneMin) / 5,
axisLabel: { axisLabel: {
formatter: '{value}', formatter: formatter,
}, },
}, splitLine: {
{ show: true,
type: 'value', lineStyle: {
// min: maxNum.twoMin, type: 'dashed',
// max: maxNum.twoMax, },
// splitNumber: 5,
// interval: (maxNum.twoMax - maxNum.twoMin) / 5,
axisLabel: {
formatter: '{value}',
},
},
{
type: 'value',
// min: maxNum.threeMin,
// max: maxNum.threeMax,
// splitNumber: 5,
// interval: (maxNum.threeMax - maxNum.threeMin) / 5,
axisLabel: {
formatter: '{value}',
}, },
}, },
], ],
...@@ -191,16 +210,34 @@ const renderChart = (list) => { ...@@ -191,16 +210,34 @@ const renderChart = (list) => {
name: t('analysis.AddressActivity'), name: t('analysis.AddressActivity'),
type: 'line', type: 'line',
data: list.active, data: list.active,
lineStyle: {
color: lightLineColor.blue,
},
showSymbol: false,
// 数据下方透明样式
...blueGradientLight,
}, },
{ {
name: t('analysis.newHoders'), name: t('analysis.newHoders'),
type: 'line', type: 'line',
data: list.new_nh, data: list.new_nh,
lineStyle: {
color: lightLineColor.green,
},
showSymbol: false,
// 数据下方透明样式
...greenGradientLight,
}, },
{ {
name: t('analysis.ClearanceHolder'), name: t('analysis.ClearanceHolder'),
type: 'line', type: 'line',
data: list.cl_nh, data: list.cl_nh,
lineStyle: {
color: lightLineColor.yellow,
},
showSymbol: false,
// 数据下方透明样式
...yellowGradientLight,
}, },
], ],
}; };
......
views/analysis/InAndOutBox.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<template #chartSwitch> <template #chartSwitch>
<radio-group type="analysisDate" v-model:current="date" @change="getData"> <radio-group type="analysisDate" v-model:current="date" @change="getData">
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter>
</template> </template>
<template #header> <template #header>
<div class="newfield"> <div class="newfield">
...@@ -47,9 +48,19 @@ import RadioGroup from '@/components/RadioGroup.vue'; ...@@ -47,9 +48,19 @@ 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';
const { maxNum, getMaxNum, getMinNum } = useEchartNum(); import TimeFilter from './TimeFilter.vue';
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const { maxNum, getMaxNum, getMinNum, hideLoading, ShowLoading, formatter } =
useEchartNum();
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
let myChart: any = null;
const props = defineProps({ const props = defineProps({
title: String, title: String,
options: Array, options: Array,
...@@ -57,13 +68,17 @@ const props = defineProps({ ...@@ -57,13 +68,17 @@ const props = defineProps({
r24h: String, r24h: String,
token: String, token: String,
currentPath: String, currentPath: String,
theme: String,
}); });
const date = ref('5m'); const date = ref('5m');
const resultList = reactive({
list: [],
});
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
watch( watch(
() => WatchEcharts.value, () => WatchEcharts.value,
(v) => { (v) => {
initChart(); onInit();
getData(); getData();
} }
); );
...@@ -73,33 +88,49 @@ const formData = reactive({ ...@@ -73,33 +88,49 @@ const formData = reactive({
value2: '', value2: '',
value3: '', value3: '',
}); });
let myChart: any = null;
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
initChart(); onInit();
getData(); getData();
}); });
}); });
watch(props, (v) => { watch(
// 当处于右侧折线图页面时,点击行，切换重新加载折线图 () => props.theme,
initChart(); (v) => {
getData(); // 主题切换
}); changeEchart();
const initChart = () => { }
);
watch(
() => props.tb,
(v) => {
// tb切换重新请求接口
onInit();
getData();
}
);
const changeEchart = () => {
onInit();
renderChart(resultList.list);
};
// 提交时间戳
const onChange = (value: number) => {
console.log(value);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
if (myChart) { if (myChart) {
myChart.dispose(); myChart.dispose();
} }
const chartDom = document.getElementById('chart-box-3') as HTMLCanvasElement; const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px'; chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.height = '212px'; chartDom.style.height = height;
myChart = echarts.init(chartDom, 'vintage'); myChart = echarts.init(chartDom, theme);
};
const onInit = () => {
initChart('chart-box-3', props.theme);
}; };
const getData = () => { const getData = () => {
myChart && ShowLoading(myChart);
myChart.showLoading({
textColor: 'rgb(150,150,150)', //文字颜色
maskColor: 'rgba(255,255,255,0)',
});
request request
.get(`/v1${chain.value}/analysis/getTurnover`, { .get(`/v1${chain.value}/analysis/getTurnover`, {
params: { params: {
...@@ -108,7 +139,7 @@ const getData = () => { ...@@ -108,7 +139,7 @@ const getData = () => {
}, },
}) })
.then((res: any) => { .then((res: any) => {
myChart && myChart.hideLoading(); hideLoading(myChart);
formData.value1 = res?.count?.total; formData.value1 = res?.count?.total;
formData.value2 = res?.count?.buy; formData.value2 = res?.count?.buy;
formData.value3 = res?.count?.sell; formData.value3 = res?.count?.sell;
...@@ -128,11 +159,13 @@ const getData = () => { ...@@ -128,11 +159,13 @@ const getData = () => {
getMinNum(res.list.sell, 'twoMin'); getMinNum(res.list.sell, 'twoMin');
getMaxNum(res.list.sell, 'twoMax'); getMaxNum(res.list.sell, 'twoMax');
// 实例化 // 实例化
resultList.list = res.list;
renderChart(res.list); renderChart(res.list);
}); });
}; };
const renderChart = (list) => { const renderChart = (list) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -144,12 +177,11 @@ const renderChart = (list) => { ...@@ -144,12 +177,11 @@ const renderChart = (list) => {
}, },
legend: { legend: {
data: [t('analysis.Deposit'), t('analysis.Withdrawal')], data: [t('analysis.Deposit'), t('analysis.Withdrawal')],
icon: 'circle',
}, },
grid: { grid: {
bottom: 30, bottom: 30,
left: '66px', left: '66px',
right: '66px',
// containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
...@@ -165,21 +197,19 @@ const renderChart = (list) => { ...@@ -165,21 +197,19 @@ const renderChart = (list) => {
], ],
yAxis: [ yAxis: [
{ {
min: maxNum.oneMin,
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value', type: 'value',
name: `${t('analysis.Deposit')}($)`, name: `${t('analysis.Deposit')}($)`,
axisLabel: { axisLabel: {
formatter: '{value}', formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
}, },
}, },
{ {
min: maxNum.twoMin,
max: maxNum.twoMax,
splitNumber: 5,
interval: (maxNum.twoMax - maxNum.twoMin) / 5,
type: 'value', type: 'value',
name: `${t('analysis.Withdrawal')}($)`, name: `${t('analysis.Withdrawal')}($)`,
axisLabel: { axisLabel: {
...@@ -192,13 +222,21 @@ const renderChart = (list) => { ...@@ -192,13 +222,21 @@ const renderChart = (list) => {
name: t('analysis.Deposit'), name: t('analysis.Deposit'),
type: 'line', type: 'line',
data: list.buy, data: list.buy,
lineStyle: {
color: lightLineColor.blue,
},
showSymbol: false,
...blueGradientLight,
}, },
{ {
name: t('analysis.Withdrawal'), name: t('analysis.Withdrawal'),
type: 'line', type: 'line',
data: list.sell, data: list.sell,
// 右侧y轴 lineStyle: {
yAxisIndex: 1, color: lightLineColor.green,
},
showSymbol: false,
...greenGradientLight,
}, },
], ],
}; };
......
views/analysis/PoolBox.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<template #chartSwitch> <template #chartSwitch>
<RadioGroup type="analysisDate" v-model:current="date" @change="getData"> <RadioGroup type="analysisDate" v-model:current="date" @change="getData">
</RadioGroup> </RadioGroup>
<TimeFilter @change="onChange"></TimeFilter>
</template> </template>
<template #header> <template #header>
<div class="onefield"> <div class="onefield">
...@@ -34,7 +35,22 @@ import request from '@/utils/request'; ...@@ -34,7 +35,22 @@ 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';
const { maxNum, getMaxNum, getMinNum } = useEchartNum(); import TimeFilter from './TimeFilter.vue';
import {
blueGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const {
resultList,
maxNum,
getMaxNum,
getMinNum,
ShowLoading,
hideLoading,
formatter,
} = useEchartNum();
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
...@@ -42,47 +58,65 @@ const props = defineProps({ ...@@ -42,47 +58,65 @@ const props = defineProps({
currentPath: String, currentPath: String,
token: String, token: String,
r24h: String, r24h: String,
theme: String,
}); });
const date = ref('5m'); const date = ref('5m');
let myChart: any = null;
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
watch( watch(
() => WatchEcharts.value, () => WatchEcharts.value,
(v) => { (v) => {
initChart(); onInit();
getData(); getData();
} }
); );
// 提交时间戳
const onChange = (value: number) => {
console.log(value);
};
const chain = useChain(); const chain = useChain();
const formData = reactive({ const formData = reactive({
value1: '', value1: '',
}); });
let myChart: any = null;
onMounted(async () => { onMounted(async () => {
nextTick(() => { nextTick(() => {
initChart(); onInit();
getData(); getData();
}); });
}); });
watch(props, (v) => { watch(
// 当处于右侧折线图页面时,点击行，切换重新加载折线图 () => props.tb,
initChart(); (v) => {
getData(); // 当处于右侧折线图页面时,点击行，切换重新加载折线图
}); onInit();
const initChart = () => { getData();
}
);
watch(
() => props.theme,
(v) => {
// 主题切换
changeEchart();
}
);
const changeEchart = () => {
onInit();
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-9', props.theme);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
if (myChart) { if (myChart) {
myChart.dispose(); myChart.dispose();
} }
const chartDom = document.getElementById('chart-box-9') as HTMLCanvasElement; const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px'; chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.height = '212px'; chartDom.style.height = height;
myChart = echarts.init(chartDom, 'vintage'); myChart = echarts.init(chartDom, theme);
}; };
const getData = () => { const getData = () => {
myChart && ShowLoading(myChart);
myChart.showLoading({
textColor: 'rgb(150,150,150)', //文字颜色
maskColor: 'rgba(255,255,255,0)',
});
request request
.get(`/v1${chain.value}/analysis/getUbData`, { .get(`/v1${chain.value}/analysis/getUbData`, {
params: { params: {
...@@ -106,19 +140,21 @@ const getData = () => { ...@@ -106,19 +140,21 @@ const getData = () => {
res.list.date[index] = Y + M + D + h + m + s; res.list.date[index] = Y + M + D + h + m + s;
}); });
} }
myChart && myChart.hideLoading(); hideLoading(myChart);
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;
renderChart(res.list); renderChart(res.list);
}) })
.catch((e) => { .catch((e) => {
myChart && myChart.hideLoading(); hideLoading(myChart);
}); });
}; };
const renderChart = (list) => { const renderChart = (list) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -130,10 +166,11 @@ const renderChart = (list) => { ...@@ -130,10 +166,11 @@ const renderChart = (list) => {
}, },
legend: { legend: {
data: [t('analysis.Flowpoolchanges')], data: [t('analysis.Flowpoolchanges')],
icon: 'circle',
}, },
grid: { grid: {
bottom: '30px', bottom: 20,
left: '70px', left: '60px',
}, },
xAxis: [ xAxis: [
{ {
...@@ -149,14 +186,16 @@ const renderChart = (list) => { ...@@ -149,14 +186,16 @@ const renderChart = (list) => {
], ],
yAxis: [ yAxis: [
{ {
min: maxNum.oneMin,
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value', type: 'value',
name: t('analysis.Flowpoolchanges'), name: t('analysis.Flowpoolchanges'),
axisLabel: { axisLabel: {
formatter: '{value}', formatter: formatter,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
}, },
}, },
], ],
...@@ -165,6 +204,11 @@ const renderChart = (list) => { ...@@ -165,6 +204,11 @@ const renderChart = (list) => {
name: t('analysis.Flowpoolchanges'), name: t('analysis.Flowpoolchanges'),
type: 'line', type: 'line',
data: list.ub, data: list.ub,
lineStyle: {
color: lightLineColor.blue,
},
showSymbol: false,
...blueGradientLight,
}, },
], ],
}; };
......
views/analysis/TelegramBox.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<template #chartSwitch> <template #chartSwitch>
<radio-group type="analysisDate" v-model:current="date" @change="getData"> <radio-group type="analysisDate" v-model:current="date" @change="getData">
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter>
</template> </template>
<template #header> <template #header>
<div class="onefield"> <div class="onefield">
...@@ -36,7 +37,16 @@ import request from '@/utils/request'; ...@@ -36,7 +37,16 @@ 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';
const { maxNum, getMaxNum, getMinNum } = useEchartNum(); import TimeFilter from './TimeFilter.vue';
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
title: String, title: String,
...@@ -45,6 +55,7 @@ const props = defineProps({ ...@@ -45,6 +55,7 @@ const props = defineProps({
tb: String, tb: String,
r24h: String, r24h: String,
currentPath: String, currentPath: String,
theme: String,
}); });
const route = useRoute(); const route = useRoute();
const date = ref('5m'); const date = ref('5m');
...@@ -52,7 +63,7 @@ const WatchEcharts = useWatchEcharts(); ...@@ -52,7 +63,7 @@ const WatchEcharts = useWatchEcharts();
watch( watch(
() => WatchEcharts.value, () => WatchEcharts.value,
(v) => { (v) => {
initChart(); onInit();
getData(); getData();
} }
); );
...@@ -65,36 +76,51 @@ let myChart: any = null; ...@@ -65,36 +76,51 @@ let myChart: any = null;
onMounted(async () => { onMounted(async () => {
nextTick(() => { nextTick(() => {
if (route.name !== 'tokenAnalysis') { if (route.name !== 'tokenAnalysis') {
initChart(); onInit();
getData(); getData();
} }
}); });
}); });
// 提交时间戳
const onChange = (value: number) => {
console.log(value);
};
watch( watch(
() => props.token, () => props.token,
(v) => { (v) => {
if (v) { if (v) {
// 当处于右侧折线图页面时,点击行，切换重新加载折线图 // 当处于右侧折线图页面时,点击行，切换重新加载折线图
initChart(); onInit();
getData(); getData();
} }
} }
); );
const initChart = () => { watch(
() => props.theme,
(v) => {
// 主题切换
changeEchart();
}
);
const changeEchart = () => {
onInit();
renderChart(resultList.list);
};
const onInit = () => {
initChart('chart-box-7', props.theme);
};
// 初始化折线图
const initChart = (id: string, theme: string, height: string = '212px') => {
if (myChart) { if (myChart) {
myChart.dispose(); myChart.dispose();
} }
const chartDom = document.getElementById('chart-box-7') as HTMLCanvasElement; const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px'; chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.height = '212px'; chartDom.style.height = height;
myChart = echarts.init(chartDom, 'vintage'); myChart = echarts.init(chartDom, theme);
}; };
const getData = () => { const getData = () => {
myChart && ShowLoading(myChart);
myChart.showLoading({
textColor: 'rgb(150,150,150)', //文字颜色
maskColor: 'rgba(255,255,255,0)',
});
request request
.get(`/v1${chain.value}/analysis/getTelegramData`, { .get(`/v1${chain.value}/analysis/getTelegramData`, {
params: { params: {
...@@ -103,7 +129,7 @@ const getData = () => { ...@@ -103,7 +129,7 @@ const getData = () => {
}, },
}) })
.then((res: any) => { .then((res: any) => {
myChart && myChart.hideLoading(); hideLoading(myChart);
formData.value1 = res?.count?.tgn; formData.value1 = res?.count?.tgn;
formData.value2 = res?.count?.tgol; formData.value2 = res?.count?.tgol;
// 先计算出双轴各自的最大值 // 先计算出双轴各自的最大值
...@@ -111,11 +137,13 @@ const getData = () => { ...@@ -111,11 +137,13 @@ const getData = () => {
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;
renderChart(res.list); renderChart(res.list);
}); });
}; };
const renderChart = (list) => { const renderChart = (list) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -130,10 +158,10 @@ const renderChart = (list) => { ...@@ -130,10 +158,10 @@ const renderChart = (list) => {
t('analysis.TotalNumberofAdditions'), t('analysis.TotalNumberofAdditions'),
t('analysis.Numberofpeopleaddedonline'), t('analysis.Numberofpeopleaddedonline'),
], ],
icon: 'circle',
}, },
grid: { grid: {
bottom: 30, bottom: 30,
top: 80,
left: '50px', left: '50px',
right: '50px', right: '50px',
}, },
...@@ -156,10 +184,16 @@ const renderChart = (list) => { ...@@ -156,10 +184,16 @@ const renderChart = (list) => {
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: {
show: true,
lineStyle: {
type: 'dashed',
},
},
}, },
{ {
min: maxNum.twoMin, min: maxNum.twoMin,
...@@ -167,28 +201,38 @@ const renderChart = (list) => { ...@@ -167,28 +201,38 @@ const renderChart = (list) => {
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"),
nameTextStyle: {
// align: 'right',
padding: [0, 50, 0, 0],
},
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
}, },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
}, },
], ],
series: [ series: [
{ {
name: t('analysis.TotalNumberofAdditions'), name: t('analysis.TotalNumberofAdditions'),
type: 'line', type: 'line',
data: list.tgn, data: list.tgnd,
lineStyle: {
color: lightLineColor.blue,
},
showSymbol: false,
...blueGradientLight,
}, },
{ {
name: t('analysis.Numberofpeopleaddedonline'), name: t('analysis.Numberofpeopleaddedonline'),
type: 'line', type: 'line',
data: list.tgol, data: list.tgold,
// 右侧y轴 lineStyle: {
yAxisIndex: 1, color: lightLineColor.green,
},
showSymbol: false,
...greenGradientLight,
}, },
], ],
}; };
......
views/analysis/TimeFilter.vue 0 → 100644
<template>
<div class="custom-ana-time-filter">
<div class="dividing-line"></div>
<t-tooltip :content="$t('tooltip.historyData')">
<span class="openIcon" @click="openDialog">
<Timefilter></Timefilter>
</span>
</t-tooltip>
<t-dialog v-model:visible="visible" placement="center" @Close="closeDialog">
<template #header>
{{ $t('tooltip.DataFilter') }}
</template>
<template #body>
<div class="start-time">
<span class="label"> {{ $t('tooltip.startTime') }}： </span>
<div class="chose-time">
<t-date-picker
v-model:value="StartDate"
:placeholder="$t('TableList.Seletdate')"
:popupProps="{
overlayClassName: 'custom_chose_date_popup',
}"
clearable
allow-input
/>
<t-time-picker
v-model="StartTime"
:popupProps="{
overlayClassName: 'custom_chose_time_popup2',
}"
allow-input
clearable
@change="onTimeChange"
:placeholder="$t('TableList.filterTimeCom')"
/>
</div>
</div>
</template>
<template #footer>
<t-button class="Cancel-btn" @click="closeDialog">{{
$t('user.Cancel')
}}</t-button>
<t-button class="Confirm-btn" @click="submit">{{
$t('user.Confirm')
}}</t-button>
</template>
</t-dialog>
</div>
</template>
<script lang="ts" setup>
import { MessagePlugin } from 'tdesign-vue-next';
import { useI18n } from 'vue-i18n';
import Timefilter from '/public/images/svg/analysis/timefilter.svg';
const emit = defineEmits(['change']);
const { t } = useI18n();
const visible = ref(false);
const StartDate = ref('');
const StartTime = ref('');
// 转换后的时间戳
const Timestamp = ref(0);
const openDialog = () => {
visible.value = true;
};
const closeDialog = () => {
visible.value = false;
};
let onInterval: any = null;
// 修改文字信息
const changeText = () => {
try {
if (visible.value) {
onInterval = window.setInterval(() => {
let dom = document.querySelector(
'.t-time-picker__panel-section-footer'
);
if (dom) {
let child = dom.children;
if (child.length) {
child[0].children[0].textContent = t('common.confirm');
}
if (onInterval) {
window.clearInterval(onInterval);
}
}
}, 200);
} else {
if (onInterval) {
window.clearInterval(onInterval);
}
}
} catch (e) {
console.log(e);
}
};
watch(
() => visible.value,
(v) => {
changeText();
}
);
const onTimeChange = (value) => {
if (StartDate.value && value) {
// 拼接日期并转换为时间戳
let date = new Date(StartDate.value + ' ' + StartTime.value);
Timestamp.value = date.valueOf();
}
};
const submit = () => {
if (!StartDate.value || !StartTime.value) {
MessagePlugin.closeAll();
MessagePlugin.warning(t('tooltip.startTime'));
return;
}
onTimeChange(1);
// 不能超过当前时间
let date = new Date();
if (date.valueOf() < Timestamp.value) {
MessagePlugin.closeAll();
MessagePlugin.warning(t('tooltip.Cannotexceed'));
return;
}
if (Timestamp.value) {
emit('change', Timestamp.value);
closeDialog();
}
};
</script>
<style lang="less">
.custom-ana-time-filter {
position: absolute;
right: 12px;
display: flex;
align-items: center;
.dividing-line {
height: 24px;
width: 1px;
background: #e5e6e8;
margin-right: 6px;
}
.openIcon {
display: flex;
align-items: center;
cursor: pointer;
svg {
fill: #7b7d87;
transition: fill 0.3s;
}
&:hover {
svg {
fill: var(--td--main-btn-color-1);
transition: fill 0.3s;
}
}
}
.Cancel-btn {
background: var(--td--Search-drawer-back-color);
border: none;
color: var(--td-Search-info-color-2);
--ripple-color: none !important;
&:hover {
background: #ddd;
}
}
.Confirm-btn {
background-color: var(--td--main-btn-color-1);
border: none;
}
.start-time {
font-size: 16px;
font-family: 'Medium';
.label {
width: 94px;
white-space: nowrap;
}
}
.start-time {
.chose-time {
margin-top: 8px;
.t-time-picker {
width: 120px;
height: 32px;
margin-left: 12px;
}
}
}
.t-date-picker {
width: 150px;
}
}
.custom_chose_time_popup2 {
.t-time-picker__panel-section-footer {
& > :last-child {
display: none;
}
}
}
</style>
views/analysis/Top100Box.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<template #chartSwitch> <template #chartSwitch>
<radio-group type="analysisDate" v-model:current="date" @change="getData"> <radio-group type="analysisDate" v-model:current="date" @change="getData">
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter>
</template> </template>
<template #header> <template #header>
<div class="onefield"> <div class="onefield">
...@@ -41,7 +42,16 @@ import RadioGroup from '@/components/RadioGroup.vue'; ...@@ -41,7 +42,16 @@ 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';
const { maxNum, getMaxNum, getMinNum } = useEchartNum(); import TimeFilter from './TimeFilter.vue';
import {
blueGradientLight,
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const props = defineProps({ const props = defineProps({
...@@ -51,6 +61,7 @@ const props = defineProps({ ...@@ -51,6 +61,7 @@ const props = defineProps({
token: String, token: String,
r24h: String, r24h: String,
currentPath: String, currentPath: String,
theme: String,
}); });
const date = ref('5m'); const date = ref('5m');
let myChart: any = null; let myChart: any = null;
...@@ -58,44 +69,62 @@ const WatchEcharts = useWatchEcharts(); ...@@ -58,44 +69,62 @@ const WatchEcharts = useWatchEcharts();
watch( watch(
() => WatchEcharts.value, () => WatchEcharts.value,
(v) => { (v) => {
initChart(); onInit();
getData(); getData();
} }
); );
watch(
() => props.theme,
(v) => {
// 主题切换
changeEchart();
}
);
const chain = useChain(); const chain = useChain();
const formData = reactive({ const formData = reactive({
value1: '', value1: '',
value2: '', value2: '',
}); });
const changeEchart = () => {
onInit();
renderChart(resultList.list);
};
onMounted(async () => { onMounted(async () => {
nextTick(() => { nextTick(() => {
initChart(); onInit();
getData(); getData();
}); });
}); });
watch(props, (v) => { // 提交时间戳
// 当处于右侧折线图页面时,点击行，切换重新加载折线图 const onChange = (value: number) => {
initChart(); console.log(value);
getData(); };
}); watch(
const initChart = () => { () => props.tb,
(v) => {
// 当处于右侧折线图页面时,点击行，切换重新加载折线图
onInit();
getData();
}
);
const onInit = () => {
initChart('chart-box-6', props.theme);
};
// 初始化折线图
const initChart = (id: string, theme: string, height: string = '212px') => {
if (myChart) { if (myChart) {
myChart.dispose(); myChart.dispose();
} }
const chartDom = document.getElementById('chart-box-6') as HTMLCanvasElement; const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px'; chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.height = '212px'; chartDom.style.height = height;
myChart = echarts.init(chartDom, 'vintage'); myChart = echarts.init(chartDom, theme);
}; };
const getData = () => { const getData = () => {
if (!props.tb) { if (!props.tb) {
return; return;
} }
myChart && ShowLoading(myChart);
myChart.showLoading({
maskColor: 'rgba(255,255,255,0)',
textColor: 'rgb(150,150,150)', //文字颜色
});
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
...@@ -106,7 +135,7 @@ const getData = () => { ...@@ -106,7 +135,7 @@ const getData = () => {
}, },
}) })
.then((res: any) => { .then((res: any) => {
myChart && myChart.hideLoading(); hideLoading(myChart);
let buy_24h, sell_24h; let buy_24h, sell_24h;
if (res.count) { if (res.count) {
buy_24h = parseFloat(res.count.buy_24h).toFixed(2); buy_24h = parseFloat(res.count.buy_24h).toFixed(2);
...@@ -129,11 +158,13 @@ const getData = () => { ...@@ -129,11 +158,13 @@ const getData = () => {
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;
renderChart(res.list); renderChart(res.list);
}); });
}; };
const renderChart = (list) => { const renderChart = (list) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -145,12 +176,12 @@ const renderChart = (list) => { ...@@ -145,12 +176,12 @@ const renderChart = (list) => {
}, },
legend: { legend: {
data: [t('analysis.Deposit'), t('analysis.Withdrawal')], data: [t('analysis.Deposit'), t('analysis.Withdrawal')],
icon: 'circle',
}, },
grid: { grid: {
bottom: 30, bottom: 30,
left: '50px', left: '50px',
right: '50px', right: '50px',
// containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
...@@ -175,6 +206,12 @@ const renderChart = (list) => { ...@@ -175,6 +206,12 @@ const renderChart = (list) => {
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
}, },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
}, },
{ {
min: maxNum.twoMin, min: maxNum.twoMin,
...@@ -186,6 +223,12 @@ const renderChart = (list) => { ...@@ -186,6 +223,12 @@ const renderChart = (list) => {
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
}, },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
}, },
], ],
series: [ series: [
...@@ -193,17 +236,23 @@ const renderChart = (list) => { ...@@ -193,17 +236,23 @@ const renderChart = (list) => {
name: t('analysis.Deposit'), name: t('analysis.Deposit'),
type: 'line', type: 'line',
data: list.buy, data: list.buy,
lineStyle: {
color: lightLineColor.blue,
},
showSymbol: false,
...blueGradientLight,
}, },
{ {
name: t('analysis.Withdrawal'), name: t('analysis.Withdrawal'),
type: 'line', type: 'line',
data: list.sell, data: list.sell,
lineStyle: {
color: lightLineColor.green,
},
// 右侧y轴 // 右侧y轴
yAxisIndex: 1, yAxisIndex: 1,
// 线条粗细 showSymbol: false,
// lineStyle: { ...greenGradientLight,
// width: 1,
// },
}, },
], ],
}; };
......
views/analysis/TwitterBox.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<template #chartSwitch> <template #chartSwitch>
<radio-group type="analysisDate" v-model:current="date" @change="getData"> <radio-group type="analysisDate" v-model:current="date" @change="getData">
</radio-group> </radio-group>
<TimeFilter @change="onChange"></TimeFilter>
</template> </template>
<template #header> <template #header>
<div class="newfield"> <div class="newfield">
...@@ -36,7 +37,15 @@ import request from '@/utils/request'; ...@@ -36,7 +37,15 @@ 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';
const { maxNum, getMaxNum, getMinNum } = useEchartNum(); import TimeFilter from './TimeFilter.vue';
import {
blueGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from '@/utils/echarts/color';
const { resultList, maxNum, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
title: String, title: String,
...@@ -45,56 +54,72 @@ const props = defineProps({ ...@@ -45,56 +54,72 @@ const props = defineProps({
tb: String, tb: String,
r24h: String, r24h: String,
currentPath: String, currentPath: String,
theme: String,
}); });
const route = useRoute(); const route = useRoute();
const date = ref('5m'); const date = ref('5m');
let myChart: any = null;
const formData = reactive({ const formData = reactive({
value1: '', value1: '',
value2: '', value2: '',
}); });
let myChart: any = null;
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
watch( watch(
() => WatchEcharts.value, () => WatchEcharts.value,
(v) => { (v) => {
initChart(); onInit();
getData(); getData();
} }
); );
watch(
() => props.theme,
(v) => {
// 主题切换
changeEchart();
}
);
const chain = useChain(); const chain = useChain();
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
if (route.name !== 'tokenAnalysis') { if (route.name !== 'tokenAnalysis') {
initChart(); onInit();
getData(); getData();
} }
}); });
}); });
// 提交时间戳
const onChange = (value: number) => {
console.log(value);
};
const changeEchart = () => {
onInit();
renderChart(resultList.list);
};
watch( watch(
() => props.token, () => props.token,
(v) => { (v) => {
if (v) { if (v) {
// 当处于右侧折线图页面时,点击行，切换重新加载折线图 // 当处于右侧折线图页面时,点击行，切换重新加载折线图
initChart(); onInit();
getData(); getData();
} }
} }
); );
const initChart = () => { const onInit = () => {
initChart('chart-box-4', props.theme);
renderChart(resultList.list);
};
const initChart = (id: string, theme: string, height: string = '212px') => {
if (myChart) { if (myChart) {
myChart.dispose(); myChart.dispose();
} }
const chartDom = document.getElementById('chart-box-4') as HTMLCanvasElement; const chartDom = document.getElementById(id) as HTMLCanvasElement;
chartDom.style.width = chartDom.offsetWidth + 'px'; chartDom.style.width = chartDom.offsetWidth + 'px';
chartDom.style.height = '212px'; chartDom.style.height = height;
myChart = echarts.init(chartDom, 'vintage'); myChart = echarts.init(chartDom, theme);
}; };
const getData = () => { const getData = () => {
myChart && ShowLoading(myChart);
myChart.showLoading({
maskColor: 'rgba(255,255,255,0)',
textColor: 'rgb(150,150,150)', //文字颜色
});
request request
.get(`/v1${chain.value}/analysis/getTwitter`, { .get(`/v1${chain.value}/analysis/getTwitter`, {
params: { params: {
...@@ -103,17 +128,19 @@ const getData = () => { ...@@ -103,17 +128,19 @@ const getData = () => {
}, },
}) })
.then((res: any) => { .then((res: any) => {
myChart && myChart.hideLoading(); hideLoading(myChart);
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;
renderChart(res.list); renderChart(res.list);
}); });
}; };
const renderChart = (list) => { const renderChart = (list) => {
let options = { let options = {
backgroundColor: echartBackground[props.theme],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -125,10 +152,11 @@ const renderChart = (list) => { ...@@ -125,10 +152,11 @@ const renderChart = (list) => {
}, },
legend: { legend: {
data: [t('analysis.ChildNumberfans')], data: [t('analysis.ChildNumberfans')],
icon: 'circle',
}, },
grid: { grid: {
bottom: 30, bottom: 30,
left: '60px', left: '50px',
}, },
xAxis: [ xAxis: [
{ {
...@@ -144,24 +172,29 @@ const renderChart = (list) => { ...@@ -144,24 +172,29 @@ const renderChart = (list) => {
], ],
yAxis: [ yAxis: [
{ {
min: maxNum.oneMin,
max: maxNum.oneMax,
splitNumber: 5,
interval: (maxNum.oneMax - maxNum.oneMin) / 5,
type: 'value', type: 'value',
name: t('analysis.ChildNumberfans'), name: t('analysis.ChildNumberfans'),
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
}, },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
}, },
], ],
series: [ series: [
{ {
name: t('analysis.ChildNumberfans'), name: t('analysis.ChildNumberfans'),
type: 'line', type: 'line',
data: list.twn, data: list.twfd,
// 是否在折现点展示数值 lineStyle: {
// itemStyle: { normal: { label: { show: true } } }, color: lightLineColor.blue,
},
showSymbol: false,
...blueGradientLight,
}, },
], ],
}; };
......
views/analysis/TwitterTotalBox.vue
...@@ -32,6 +32,7 @@ import ChartBox from './ChartBox.vue'; ...@@ -32,6 +32,7 @@ import ChartBox from './ChartBox.vue';
const props = defineProps({ const props = defineProps({
token: String, token: String,
url: String, url: String,
theme: String,
}); });
const loading = ref(true); const loading = ref(true);
watch( watch(
...@@ -118,13 +119,17 @@ const getScript = (path) => { ...@@ -118,13 +119,17 @@ const getScript = (path) => {
}; };
// const socialInfo = computed(() => store.getters['token/getSocialInfo'](props.token)); // const socialInfo = computed(() => store.getters['token/getSocialInfo'](props.token));
</script> </script>
<style lang="less" scoped> <style lang="less">
@import '@/style/flex.less'; @import '@/style/flex.less';
.empty-twitter { .empty-twitter {
height: 312px; height: 330px;
}
.twitter-timeline {
height: 330px;
display: block;
} }
.loading-box { .loading-box {
height: 314px; height: 330px;
.dja(); .dja();
} }
</style> </style>
views/analysis/index.vue
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
id="hoder-box" id="hoder-box"
:tb="tb" :tb="tb"
:currentPath="currentPath" :currentPath="currentPath"
:theme="theme"
></holder-box> ></holder-box>
</t-col> </t-col>
<t-col :lg="6" :xl="4" class="box-col"> <t-col :lg="6" :xl="4" class="box-col">
...@@ -23,6 +24,7 @@ ...@@ -23,6 +24,7 @@
id="deal-box" id="deal-box"
:tb="tb" :tb="tb"
:currentPath="currentPath" :currentPath="currentPath"
:theme="theme"
></deal-box> ></deal-box>
</t-col> </t-col>
<t-col :lg="6" :xl="4" class="box-col"> <t-col :lg="6" :xl="4" class="box-col">
...@@ -30,6 +32,7 @@ ...@@ -30,6 +32,7 @@
id="in-and-out-box" id="in-and-out-box"
:tb="tb" :tb="tb"
:currentPath="currentPath" :currentPath="currentPath"
:theme="theme"
></in-and-out-box> ></in-and-out-box>
</t-col> </t-col>
<t-col :lg="6" :xl="4" class="box-col"> <t-col :lg="6" :xl="4" class="box-col">
...@@ -37,6 +40,7 @@ ...@@ -37,6 +40,7 @@
id="pool-box" id="pool-box"
:tb="tb" :tb="tb"
:currentPath="currentPath" :currentPath="currentPath"
:theme="theme"
></pool-box> ></pool-box>
</t-col> </t-col>
<t-col :lg="6" :xl="4" class="box-col"> <t-col :lg="6" :xl="4" class="box-col">
...@@ -44,6 +48,7 @@ ...@@ -44,6 +48,7 @@
id="twitter-box" id="twitter-box"
:token="token" :token="token"
:currentPath="currentPath" :currentPath="currentPath"
:theme="theme"
></twitter-box> ></twitter-box>
</t-col> </t-col>
<t-col :lg="6" :xl="4" class="box-col"> <t-col :lg="6" :xl="4" class="box-col">
...@@ -51,6 +56,7 @@ ...@@ -51,6 +56,7 @@
id="top100-box" id="top100-box"
:tb="tb" :tb="tb"
:currentPath="currentPath" :currentPath="currentPath"
:theme="theme"
></top100-box> ></top100-box>
</t-col> </t-col>
<t-col :lg="6" :xl="4" class="box-col"> <t-col :lg="6" :xl="4" class="box-col">
...@@ -58,6 +64,7 @@ ...@@ -58,6 +64,7 @@
id="telegram-box" id="telegram-box"
:token="token" :token="token"
:currentPath="currentPath" :currentPath="currentPath"
:theme="theme"
></telegram-box> ></telegram-box>
</t-col> </t-col>
<t-col :lg="6" :xl="4" class="box-col"> <t-col :lg="6" :xl="4" class="box-col">
...@@ -65,6 +72,7 @@ ...@@ -65,6 +72,7 @@
id="discord-box" id="discord-box"
:token="token" :token="token"
:currentPath="currentPath" :currentPath="currentPath"
:theme="theme"
></discord-box> ></discord-box>
</t-col> </t-col>
<t-col :lg="6" :xl="4" class="box-col"> <t-col :lg="6" :xl="4" class="box-col">
...@@ -72,6 +80,7 @@ ...@@ -72,6 +80,7 @@
:token="token" :token="token"
:currentPath="currentPath" :currentPath="currentPath"
:url="twitter" :url="twitter"
:theme="theme"
></twitter-total-box> ></twitter-total-box>
</t-col> </t-col>
</t-row> </t-row>
...@@ -111,6 +120,7 @@ import { WebS } from '@/utils/TokenTrans'; ...@@ -111,6 +120,7 @@ import { WebS } from '@/utils/TokenTrans';
import { filterChainObj } from '@/constants/UnifiedManagementChain'; import { filterChainObj } from '@/constants/UnifiedManagementChain';
import { webLogo } from '@/constants/logo'; import { webLogo } from '@/constants/logo';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const theme = useCurTheme();
const { locale } = useI18n(); const { locale } = useI18n();
// 初始化折线图 // 初始化折线图
const WatchEcharts = useWatchEcharts(); const WatchEcharts = useWatchEcharts();
...@@ -127,7 +137,7 @@ const chain = useChain(); ...@@ -127,7 +137,7 @@ const chain = useChain();
// token---接口得到 // token---接口得到
const token = ref(''); const token = ref('');
// r24h--接口 // r24h--接口
const r24h = ref(''); const r24h = ref();
useHead({ useHead({
title: `Dexfilter | analysis`, title: `Dexfilter | analysis`,
meta: [ meta: [
...@@ -154,7 +164,7 @@ onBeforeMount(() => { ...@@ -154,7 +164,7 @@ onBeforeMount(() => {
}, },
}) })
.then((res: any) => { .then((res: any) => {
r24h.value = res.r24h + ''; r24h.value = res.r24h;
token.value = res.token; token.value = res.token;
}); });
}); });
...@@ -209,11 +219,12 @@ const SettwitterRul = (value: string) => { ...@@ -209,11 +219,12 @@ const SettwitterRul = (value: string) => {
} }
.right-wrapper { .right-wrapper {
width: 360px; flex: 1;
margin-left: auto;
position: sticky; position: sticky;
top: 0; top: 0;
border-left: 1px solid var(--td-component-border); .right-detail-wrapper {
margin-right: 0;
}
} }
} }
</style> </style>
views/detail/index.vue
...@@ -238,6 +238,7 @@ const getPoll = (PoolValue) => { ...@@ -238,6 +238,7 @@ const getPoll = (PoolValue) => {
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/flex.less'; @import '@/style/flex.less';
@import '@/style/variables.less';
.token-detail-wrapper { .token-detail-wrapper {
padding: 12px 0 0 12px; padding: 12px 0 0 12px;
box-sizing: border-box; box-sizing: border-box;
...@@ -258,6 +259,9 @@ const getPoll = (PoolValue) => { ...@@ -258,6 +259,9 @@ const getPoll = (PoolValue) => {
// height: calc((100vh - 70px) * 0.4); // height: calc((100vh - 70px) * 0.4);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: @box-shadow;
padding: 1px;
box-sizing: border-box;
#tv_chart_container { #tv_chart_container {
height: 100%; height: 100%;
&.mask { &.mask {
...@@ -280,7 +284,6 @@ const getPoll = (PoolValue) => { ...@@ -280,7 +284,6 @@ const getPoll = (PoolValue) => {
bottom: 2px; bottom: 2px;
left: 0px; left: 0px;
cursor: row-resize; cursor: row-resize;
z-index: 100;
.resize-icon { .resize-icon {
width: 100%; width: 100%;
position: relative; position: relative;
...@@ -289,7 +292,6 @@ const getPoll = (PoolValue) => { ...@@ -289,7 +292,6 @@ const getPoll = (PoolValue) => {
.da(); .da();
.t-icon { .t-icon {
color: var(--td-brand-color-6); color: var(--td-brand-color-6);
z-index: 1000;
} }
.line { .line {
width: 100%; width: 100%;
...@@ -309,6 +311,9 @@ const getPoll = (PoolValue) => { ...@@ -309,6 +311,9 @@ const getPoll = (PoolValue) => {
height: calc(33vh + 23px); height: calc(33vh + 23px);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: @box-shadow;
padding: 1px;
box-sizing: border-box;
} }
} }
.right-wrapper { .right-wrapper {
......
views/token/CustomTokenList.vue
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
<td align="center" class="index">{{ item.index }}</td> <td align="center" class="index">{{ item.index }}</td>
<td class="tn"> <td class="tn">
<div class="token-name"> <div class="token-name">
<template v-if="item.swap"> <template v-if="false">
{{ item.swap }} {{ item.swap }}
</template> </template>
<template v-else> <template v-else>
......
views/token/HistoryList.vue
...@@ -764,13 +764,16 @@ const columns = computed(() => [ ...@@ -764,13 +764,16 @@ const columns = computed(() => [
} }
} }
} }
:deep(.t-table__affixed-header-elm-wrap) {
margin-top: -3px !important;
}
// 按钮组 // 按钮组
.history-btns { .history-btns {
width: 100%; width: 100%;
height: 60px; height: 60px;
.dja(space-between); .dja(space-between);
position: sticky; position: sticky;
top: 3px; top: 0;
z-index: 80; z-index: 80;
background-color: var(--td--right-back-color-2); background-color: var(--td--right-back-color-2);
.left { .left {
......
views/token/RightDetail.vue
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
:class="{ :class="{
active: monitor(item.value), active: monitor(item.value),
occupy: occupy:
currentRouter === 'tokenAnalysis' && item.value == 'details', currentRouter === 'tokenAnalysis' &&
(item.value == 'details' || item.value == 'collection'),
}" }"
v-if="btnLoad(item.value)" v-if="btnLoad(item.value)"
> >
...@@ -213,7 +214,7 @@ watch( ...@@ -213,7 +214,7 @@ watch(
watch( watch(
() => props.r24h, () => props.r24h,
(v) => { (v) => {
if (typeof v !== 'undefined' && typeof v !== 'null') { if (typeof v !== 'undefined') {
getPriceRange(); getPriceRange();
} }
} }
...@@ -284,8 +285,6 @@ watch( ...@@ -284,8 +285,6 @@ watch(
() => locale.value, () => locale.value,
(v) => { (v) => {
if (defaBtn.value == 'echart') { if (defaBtn.value == 'echart') {
// ifDetails.value = true;
} else {
WatchEcharts.value += 1; WatchEcharts.value += 1;
} }
} }
...@@ -398,7 +397,7 @@ watch( ...@@ -398,7 +397,7 @@ watch(
} }
} }
.occupy { .occupy {
width: 98.5%; width: 50%;
} }
.title { .title {
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
......
views/token/TimeTab.vue
...@@ -112,7 +112,7 @@ const getTimeList = async (PoolAddress) => { ...@@ -112,7 +112,7 @@ const getTimeList = async (PoolAddress) => {
return; return;
} }
request request
.get(`/v1/${chain.value}/getRightTimeInfo`, { .get(`/v1${chain.value}/getRightTimeInfo`, {
params: { params: {
tag: PoolAddress ? PoolAddress : props.tb, tag: PoolAddress ? PoolAddress : props.tb,
dataRange: current.value, dataRange: current.value,
......
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