!258 交易统计

Merge pull request !258 from 疯狂的世界/dev

Author: YunaiV

src/api/statistics/trade.ts

@@ -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
+}

src/components/CountTo/src/CountTo.vue

@@ -11,21 +11,21 @@ const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('count-to')
 
 const props = defineProps({
-  startVal: propTypes.number.def(0),
-  endVal: propTypes.number.def(2021),
-  duration: propTypes.number.def(3000),
-  autoplay: propTypes.bool.def(true),
-  decimals: propTypes.number.validate((value: number) => value >= 0).def(0),
-  decimal: propTypes.string.def('.'),
-  separator: propTypes.string.def(','),
-  prefix: propTypes.string.def(''),
-  suffix: propTypes.string.def(''),
-  useEasing: propTypes.bool.def(true),
+  startVal: propTypes.number.def(0), // 开始播放值
+  endVal: propTypes.number.def(2021), // 最终值
+  duration: propTypes.number.def(3000), // 动画时长
+  autoplay: propTypes.bool.def(true), // 是否自动播放动画, 默认播放
+  decimals: propTypes.number.validate((value: number) => value >= 0).def(0), // 显示的小数位数, 默认不显示小数
+  decimal: propTypes.string.def('.'), // 小数分隔符号, 默认为点
+  separator: propTypes.string.def(','), // 数字每三位的分隔符, 默认为逗号
+  prefix: propTypes.string.def(''), // 前缀, 数值前面显示的内容
+  suffix: propTypes.string.def(''), // 后缀, 数值后面显示的内容
+  useEasing: propTypes.bool.def(true), // 是否使用缓动效果, 默认启用
   easingFn: {
     type: Function as PropType<(t: number, b: number, c: number, d: number) => number>,
     default(t: number, b: number, c: number, d: number) {
       return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
-    }
+    } // 缓动函数
   }
 })
 

src/layout/components/useRenderLayout.tsx

@@ -107,7 +107,7 @@ export const useRenderLayout = () => {
               ></ToolHeader>
 
               {tagsView.value ? (
-                <TagsView class="layout-border__bottom layout-border__top"></TagsView>
+                <TagsView class="layout-border__top layout-border__bottom"></TagsView>
               ) : undefined}
             </div>
 
@@ -121,13 +121,13 @@ export const useRenderLayout = () => {
   const renderTopLeft = () => {
     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}
 
           <ToolHeader class="flex-1"></ToolHeader>
         </div>
-        <div class="absolute top-[var(--logo-height)+1px] left-0 w-full h-[calc(100%-1px-var(--logo-height))] flex">
-          <Menu class="!h-full relative layout-border__right"></Menu>
+        <div class="absolute left-0 top-[var(--logo-height)+1px] h-[calc(100%-1px-var(--logo-height))] w-full flex">
+          <Menu class="relative layout-border__right !h-full"></Menu>
           <div
             class={[
               `${prefixCls}-content`,
@@ -187,7 +187,7 @@ export const useRenderLayout = () => {
           ]}
         >
           {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>
         </div>
         <div
@@ -233,12 +233,12 @@ export const useRenderLayout = () => {
   const renderCutMenu = () => {
     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}
 
           <ToolHeader class="flex-1"></ToolHeader>
         </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>
           <div
             class={[

src/utils/formatTime.ts

@@ -11,7 +11,7 @@ import dayjs from 'dayjs'
  * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
  * @returns 返回拼接后的时间字符串
  */
-export function formatDate(date: Date | number, format?: string): string {
+export function formatDate(date: dayjs.ConfigType, format?: string): string {
   // 日期不存在，则返回空
   if (!date) {
     return ''
@@ -221,3 +221,68 @@ export function convertDate(param: Date | string) {
   }
   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,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>

src/views/statistics/trade/components/TradeTrendValue.vue

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