Skip to content

phsl / admin

Go to a project
Commit 654094b4 by 芋道源码 Committed by Gitee
Options

!258 交易统计 

Merge pull request !258 from 疯狂的世界/dev
parents fb94ae96 6475f815
Showing with 249 additions and 19 deletions
src/api/statistics/trade.ts 0 → 100644
import request from '@/config/axios'
import dayjs from 'dayjs'
import { formatDate } from '@/utils/formatTime'
/** 交易统计对照 Response VO */
export interface TradeStatisticsComparisonRespVO<T> {
value: T
reference: T
}
/** 交易统计 Response VO */
export interface TradeSummaryRespVO {
yesterdayOrderCount: number
monthOrderCount: number
yesterdayPayPrice: number
monthPayPrice: number
}
/** 交易状况 Request VO */
export interface TradeTrendReqVO {
times: [dayjs.ConfigType, dayjs.ConfigType]
}
/** 交易状况统计 Response VO */
export interface TradeTrendSummaryRespVO {
time: string
turnover: number
orderPayPrice: number
rechargePrice: number
expensePrice: number
balancePrice: number
brokerageSettlementPrice: number
orderRefundPrice: number
}
// 查询交易统计
export const getTradeStatisticsSummary = () => {
return request.get<TradeStatisticsComparisonRespVO<TradeSummaryRespVO>>({
url: '/statistics/trade/summary'
})
}
// 获得交易状况统计
export const getTradeTrendSummary = (params: TradeTrendReqVO) => {
return request.get<TradeStatisticsComparisonRespVO<TradeTrendSummaryRespVO>>({
url: '/statistics/trade/trend/summary',
params: formatDateParam(params)
})
}
// 获得交易状况明细
export const getTradeTrendList = (params: TradeTrendReqVO) => {
return request.get<TradeTrendSummaryRespVO[]>({
url: '/statistics/trade/trend/list',
params: formatDateParam(params)
})
}
// 导出交易状况明细
export const exportTradeTrend = (params: TradeTrendReqVO) => {
return request.download({
url: '/statistics/trade/trend/export-excel',
params: formatDateParam(params)
})
}
/** 时间参数需要格式化, 确保接口能识别 */
const formatDateParam = (params: TradeTrendReqVO) => {
return { times: [formatDate(params.times[0]), formatDate(params.times[1])] } as TradeTrendReqVO
}
src/components/CountTo/src/CountTo.vue
...@@ -11,21 +11,21 @@ const { getPrefixCls } = useDesign() ...@@ -11,21 +11,21 @@ const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('count-to') const prefixCls = getPrefixCls('count-to')
const props = defineProps({ const props = defineProps({
startVal: propTypes.number.def(0), startVal: propTypes.number.def(0), // 开始播放值
endVal: propTypes.number.def(2021), endVal: propTypes.number.def(2021), // 最终值
duration: propTypes.number.def(3000), duration: propTypes.number.def(3000), // 动画时长
autoplay: propTypes.bool.def(true), autoplay: propTypes.bool.def(true), // 是否自动播放动画, 默认播放
decimals: propTypes.number.validate((value: number) => value >= 0).def(0), decimals: propTypes.number.validate((value: number) => value >= 0).def(0), // 显示的小数位数, 默认不显示小数
decimal: propTypes.string.def('.'), decimal: propTypes.string.def('.'), // 小数分隔符号, 默认为点
separator: propTypes.string.def(','), separator: propTypes.string.def(','), // 数字每三位的分隔符, 默认为逗号
prefix: propTypes.string.def(''), prefix: propTypes.string.def(''), // 前缀, 数值前面显示的内容
suffix: propTypes.string.def(''), suffix: propTypes.string.def(''), // 后缀, 数值后面显示的内容
useEasing: propTypes.bool.def(true), useEasing: propTypes.bool.def(true), // 是否使用缓动效果, 默认启用
easingFn: { easingFn: {
type: Function as PropType<(t: number, b: number, c: number, d: number) => number>, type: Function as PropType<(t: number, b: number, c: number, d: number) => number>,
default(t: number, b: number, c: number, d: number) { default(t: number, b: number, c: number, d: number) {
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
} } // 缓动函数
} }
}) })
......
src/layout/components/useRenderLayout.tsx
...@@ -107,7 +107,7 @@ export const useRenderLayout = () => { ...@@ -107,7 +107,7 @@ export const useRenderLayout = () => {
></ToolHeader> ></ToolHeader>
{tagsView.value ? ( {tagsView.value ? (
<TagsView class="layout-border__bottom layout-border__top"></TagsView> <TagsView class="layout-border__top layout-border__bottom"></TagsView>
) : undefined} ) : undefined}
</div> </div>
...@@ -121,13 +121,13 @@ export const useRenderLayout = () => { ...@@ -121,13 +121,13 @@ export const useRenderLayout = () => {
const renderTopLeft = () => { const renderTopLeft = () => {
return ( return (
<> <>
<div class="flex items-center bg-[var(--top-header-bg-color)] relative layout-border__bottom dark:bg-[var(--el-bg-color)]"> <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]">
{logo.value ? <Logo class="custom-hover"></Logo> : undefined} {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader> <ToolHeader class="flex-1"></ToolHeader>
</div> </div>
<div class="absolute top-[var(--logo-height)+1px] left-0 w-full h-[calc(100%-1px-var(--logo-height))] flex"> <div class="absolute left-0 top-[var(--logo-height)+1px] h-[calc(100%-1px-var(--logo-height))] w-full flex">
<Menu class="!h-full relative layout-border__right"></Menu> <Menu class="relative layout-border__right !h-full"></Menu>
<div <div
class={[ class={[
`${prefixCls}-content`, `${prefixCls}-content`,
...@@ -187,7 +187,7 @@ export const useRenderLayout = () => { ...@@ -187,7 +187,7 @@ export const useRenderLayout = () => {
]} ]}
> >
{logo.value ? <Logo class="custom-hover"></Logo> : undefined} {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu> <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
<ToolHeader></ToolHeader> <ToolHeader></ToolHeader>
</div> </div>
<div <div
...@@ -233,12 +233,12 @@ export const useRenderLayout = () => { ...@@ -233,12 +233,12 @@ export const useRenderLayout = () => {
const renderCutMenu = () => { const renderCutMenu = () => {
return ( return (
<> <>
<div class="flex items-center bg-[var(--top-header-bg-color)] relative layout-border__bottom"> <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
{logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined} {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader> <ToolHeader class="flex-1"></ToolHeader>
</div> </div>
<div class="absolute top-[var(--logo-height)] left-0 w-[calc(100%-2px)] h-[calc(100%-var(--logo-height))] flex"> <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-[calc(100%-2px)] flex">
<TabMenu></TabMenu> <TabMenu></TabMenu>
<div <div
class={[ class={[
......
src/utils/formatTime.ts
...@@ -11,7 +11,7 @@ import dayjs from 'dayjs' ...@@ -11,7 +11,7 @@ import dayjs from 'dayjs'
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ" * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
* @returns 返回拼接后的时间字符串 * @returns 返回拼接后的时间字符串
*/ */
export function formatDate(date: Date | number, format?: string): string { export function formatDate(date: dayjs.ConfigType, format?: string): string {
// 日期不存在，则返回空 // 日期不存在，则返回空
if (!date) { if (!date) {
return '' return ''
...@@ -221,3 +221,68 @@ export function convertDate(param: Date | string) { ...@@ -221,3 +221,68 @@ export function convertDate(param: Date | string) {
} }
return param return param
} }
/**
* 指定的两个日期, 是否为同一天
* @param a 日期 A
* @param b 日期 B
*/
export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
if (!a || !b) return false
const aa = dayjs(a)
const bb = dayjs(b)
return aa.year() == bb.year() && aa.month() == bb.month() && aa.day() == bb.day()
}
/**
* 获取一天的开始时间、截止时间
* @param date 日期
* @param days 天数
*/
export function getDayRange(
date: dayjs.ConfigType,
days: number
): [dayjs.ConfigType, dayjs.ConfigType] {
const day = dayjs(date).add(days, 'd')
return getDateRange(day, day)
}
/**
* 获取最近7天的开始时间、截止时间
*/
export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
const lastWeekDay = dayjs().subtract(7, 'd')
const yesterday = dayjs().subtract(1, 'd')
return getDateRange(lastWeekDay, yesterday)
}
/**
* 获取最近30天的开始时间、截止时间
*/
export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
const lastMonthDay = dayjs().subtract(30, 'd')
const yesterday = dayjs().subtract(1, 'd')
return getDateRange(lastMonthDay, yesterday)
}
/**
* 获取最近1年的开始时间、截止时间
*/
export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
const lastYearDay = dayjs().subtract(1, 'y')
const yesterday = dayjs().subtract(1, 'd')
return getDateRange(lastYearDay, yesterday)
}
/**
* 获取指定日期的开始时间、截止时间
* @param beginDate 开始日期
* @param endDate 截止日期
*/
export function getDateRange(
beginDate: dayjs.ConfigType,
endDate: dayjs.ConfigType
): [dayjs.ConfigType, dayjs.ConfigType] {
return [dayjs(beginDate).startOf('d'), dayjs(endDate).endOf('d')]
}
src/views/statistics/trade/components/TradeStatisticValue.vue 0 → 100644
<template>
<div class="bg flex flex-col gap-2 p-6">
<div class="flex items-center justify-between text-gray-500">
<span>{{ title }}</span>
<el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
<Icon icon="ep:warning" />
</el-tooltip>
</div>
<div class="mb-4 text-3xl">
<CountTo :prefix="prefix" :end-val="value" :decimals="decimals" />
</div>
<div class="flex flex-row gap-1 text-sm">
<span class="text-gray-500">环比</span>
<span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
{{ Math.abs(toNumber(percent)) }}%
<Icon :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'" class="!text-sm" />
</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { toNumber } from 'lodash-es'
/** 交易统计值组件 */
defineOptions({ name: 'TradeStatisticValue' })
defineProps({
tooltip: propTypes.string.def(''),
title: propTypes.string.def(''),
prefix: propTypes.string.def(''),
value: propTypes.number.def(0),
decimals: propTypes.number.def(0),
percent: propTypes.oneOfType([Number, String]).def(0)
})
</script>
<style scoped>
.bg {
background-color: var(--el-bg-color-overlay);
}
</style>
src/views/statistics/trade/components/TradeTrendValue.vue 0 → 100644
<template>
<div class="mb-8 flex flex-row items-center gap-3">
<div
class="h-12 w-12 flex flex-shrink-0 items-center justify-center rounded-1"
:class="`${iconColor} ${iconBgColor}`"
>
<Icon :icon="icon" class="!text-6" />
</div>
<div class="bg flex flex-col gap-1">
<div class="flex items-center gap-1 text-gray-500">
<span class="text-3.5">{{ title }}</span>
<el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
<Icon icon="ep:warning" class="item-center flex !text-3" />
</el-tooltip>
</div>
<div class="flex flex-row items-baseline gap-2">
<div class="text-7">
<CountTo :prefix="prefix" :end-val="value" :decimals="decimals" />
</div>
<span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
<span class="text-sm">{{ Math.abs(toNumber(percent)) }}%</span>
<Icon
:icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
class="ml-0.5 !text-3"
/>
</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { toNumber } from 'lodash-es'
/** 交易状况统计值组件 */
defineOptions({ name: 'TradeTrendValue' })
defineProps({
title: propTypes.string.def(''),
tooltip: propTypes.string.def(''),
icon: propTypes.string.def(''),
iconColor: propTypes.string.def(''),
iconBgColor: propTypes.string.def(''),
prefix: propTypes.string.def(''),
value: propTypes.number.def(0),
decimals: propTypes.number.def(0),
percent: propTypes.oneOfType([Number, String]).def(0)
})
</script>
<style scoped>
.bg {
background-color: var(--el-bg-color-overlay);
}
</style>
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 sign in to comment