芋道源码
2 years ago
committed by
Gitee
commit
654094b4fd
@ -0,0 +1,70 @@
|
||||
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
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
<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>
|
||||
@ -0,0 +1,54 @@
|
||||
<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>
|
||||
Loading…
Reference in New Issue