统计：交易统计
owen
3 years ago
parent
150c77cff0
commit
c322fb3d0d
@ -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