429 lines
13 KiB
Vue
429 lines
13 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<el-row :gutter="16" class="summary">
|
|
<el-col :sm="6" :xs="12">
|
|
<TradeStatisticValue
|
|
tooltip="昨日订单数量"
|
|
title="昨日订单数量"
|
|
:value="summary?.value?.yesterdayOrderCount || 0"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
summary?.value?.yesterdayOrderCount,
|
|
summary?.reference?.yesterdayOrderCount
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :sm="6" :xs="12">
|
|
<TradeStatisticValue
|
|
tooltip="本月订单数量"
|
|
title="本月订单数量"
|
|
:value="summary?.value?.monthOrderCount || 0"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
summary?.value?.monthOrderCount,
|
|
summary?.reference?.monthOrderCount
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :sm="6" :xs="12">
|
|
<TradeStatisticValue
|
|
tooltip="昨日支付金额"
|
|
title="昨日支付金额"
|
|
prefix="￥"
|
|
:decimals="2"
|
|
:value="fenToYuan(summary?.value?.yesterdayPayPrice || 0)"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
summary?.value?.yesterdayPayPrice,
|
|
summary?.reference?.yesterdayPayPrice
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :sm="6" :xs="12">
|
|
<TradeStatisticValue
|
|
tooltip="本月支付金额"
|
|
title="本月支付金额"
|
|
prefix="￥"
|
|
::decimals="2"
|
|
:value="fenToYuan(summary?.value?.monthPayPrice || 0)"
|
|
:percent="
|
|
calculateRelativeRate(summary?.value?.monthPayPrice, summary?.reference?.monthPayPrice)
|
|
"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<el-card shadow="never">
|
|
<template #header>
|
|
<!-- 标题 -->
|
|
<div class="flex flex-row items-center justify-between">
|
|
<span>交易状况</span>
|
|
<!-- 查询条件 -->
|
|
<div class="flex flex-row items-center gap-2">
|
|
<el-radio-group v-model="shortcutDays" @change="handleDateTypeChange">
|
|
<el-radio-button :label="1">昨天</el-radio-button>
|
|
<el-radio-button :label="7">最近7天</el-radio-button>
|
|
<el-radio-button :label="30">最近30天</el-radio-button>
|
|
</el-radio-group>
|
|
<el-date-picker
|
|
v-model="queryParams.times"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
type="daterange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
:shortcuts="shortcuts"
|
|
class="!w-240px"
|
|
@change="getTradeTrendData"
|
|
/>
|
|
<el-button
|
|
class="ml-4"
|
|
@click="handleExport"
|
|
:loading="exportLoading"
|
|
v-hasPermi="['statistics:trade:export']"
|
|
>
|
|
<Icon icon="ep:download" class="mr-1" />导出
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 统计值 -->
|
|
<el-row :gutter="16">
|
|
<el-col :md="6" :sm="12" :xs="24">
|
|
<TradeTrendValue
|
|
title="营业额"
|
|
tooltip="商品支付金额、充值金额"
|
|
icon="fa-solid:yen-sign"
|
|
icon-color="bg-blue-100"
|
|
icon-bg-color="text-blue-500"
|
|
prefix="￥"
|
|
:decimals="2"
|
|
:value="fenToYuan(trendSummary?.value?.turnover || 0)"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
trendSummary?.value?.turnover,
|
|
trendSummary?.reference?.turnover
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :md="6" :sm="12" :xs="24">
|
|
<TradeTrendValue
|
|
title="商品支付金额"
|
|
tooltip="用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）"
|
|
icon="fa-solid:shopping-cart"
|
|
icon-color="bg-purple-100"
|
|
icon-bg-color="text-purple-500"
|
|
prefix="￥"
|
|
:decimals="2"
|
|
:value="fenToYuan(trendSummary?.value?.orderPayPrice || 0)"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
trendSummary?.value?.orderPayPrice,
|
|
trendSummary?.reference?.orderPayPrice
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :md="6" :sm="12" :xs="24">
|
|
<TradeTrendValue
|
|
title="充值金额"
|
|
tooltip="用户成功充值的金额"
|
|
icon="fa-solid:money-check-alt"
|
|
icon-color="bg-yellow-100"
|
|
icon-bg-color="text-yellow-500"
|
|
prefix="￥"
|
|
:decimals="2"
|
|
:value="fenToYuan(trendSummary?.value?.rechargePrice || 0)"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
trendSummary?.value?.rechargePrice,
|
|
trendSummary?.reference?.rechargePrice
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :md="6" :sm="12" :xs="24">
|
|
<TradeTrendValue
|
|
title="支出金额"
|
|
tooltip="余额支付金额、支付佣金金额、商品退款金额"
|
|
icon="ep:warning-filled"
|
|
icon-color="bg-green-100"
|
|
icon-bg-color="text-green-500"
|
|
prefix="￥"
|
|
:decimals="2"
|
|
:value="fenToYuan(trendSummary?.value?.expensePrice || 0)"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
trendSummary?.value?.expensePrice,
|
|
trendSummary?.reference?.expensePrice
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :md="6" :sm="12" :xs="24">
|
|
<TradeTrendValue
|
|
title="余额支付金额"
|
|
tooltip="用户下单时使用余额实际支付的金额"
|
|
icon="fa-solid:wallet"
|
|
icon-color="bg-cyan-100"
|
|
icon-bg-color="text-cyan-500"
|
|
prefix="￥"
|
|
:decimals="2"
|
|
:value="fenToYuan(trendSummary?.value?.balancePrice || 0)"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
trendSummary?.value?.balancePrice,
|
|
trendSummary?.reference?.balancePrice
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :md="6" :sm="12" :xs="24">
|
|
<TradeTrendValue
|
|
title="支付佣金金额"
|
|
tooltip="后台给推广员支付的推广佣金，以实际支付为准"
|
|
icon="fa-solid:award"
|
|
icon-color="bg-yellow-100"
|
|
icon-bg-color="text-yellow-500"
|
|
prefix="￥"
|
|
:decimals="2"
|
|
:value="fenToYuan(trendSummary?.value?.brokerageSettlementPrice || 0)"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
trendSummary?.value?.brokerageSettlementPrice,
|
|
trendSummary?.reference?.brokerageSettlementPrice
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
<el-col :md="6" :sm="12" :xs="24">
|
|
<TradeTrendValue
|
|
title="商品退款金额"
|
|
tooltip="用户成功退款的商品金额"
|
|
icon="fa-solid:times-circle"
|
|
icon-color="bg-blue-100"
|
|
icon-bg-color="text-blue-500"
|
|
prefix="￥"
|
|
:decimals="2"
|
|
:value="fenToYuan(trendSummary?.value?.orderRefundPrice || 0)"
|
|
:percent="
|
|
calculateRelativeRate(
|
|
trendSummary?.value?.orderRefundPrice,
|
|
trendSummary?.reference?.orderRefundPrice
|
|
)
|
|
"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 拆线图 -->
|
|
<el-skeleton :loading="trendLoading" animated>
|
|
<Echart :height="500" :options="lineChartOptions" />
|
|
</el-skeleton>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import * as TradeStatisticsApi from '@/api/statistics/trade'
|
|
import TradeStatisticValue from './components/TradeStatisticValue.vue'
|
|
import TradeTrendValue from './components/TradeTrendValue.vue'
|
|
import { EChartsOption } from 'echarts'
|
|
import {
|
|
TradeStatisticsComparisonRespVO,
|
|
TradeSummaryRespVO,
|
|
TradeTrendReqVO,
|
|
TradeTrendSummaryRespVO
|
|
} from '@/api/statistics/trade'
|
|
import dayjs from 'dayjs'
|
|
import { fenToYuan } from '@/utils'
|
|
import * as DateUtil from '@/utils/formatTime'
|
|
import download from '@/utils/download'
|
|
|
|
/** 交易统计 */
|
|
defineOptions({ name: 'TradeStatistics' })
|
|
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
const loading = ref(true) // 加载中
|
|
const trendLoading = ref(true) // 交易状态加载中
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
const queryParams = reactive<TradeTrendReqVO>({ times: ['', ''] }) // 交易状况查询参数
|
|
const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
|
|
const summary = ref<TradeStatisticsComparisonRespVO<TradeSummaryRespVO>>() // 交易统计数据
|
|
const trendSummary = ref<TradeStatisticsComparisonRespVO<TradeTrendSummaryRespVO>>() // 交易状况统计数据
|
|
|
|
/** 日期快捷选择 */
|
|
const shortcuts = [
|
|
{
|
|
text: '昨天',
|
|
value: () => DateUtil.getDayRange(new Date(), -1)
|
|
},
|
|
{
|
|
text: '最近7天',
|
|
value: () => DateUtil.getLast7Days()
|
|
},
|
|
{
|
|
text: '本月',
|
|
value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
|
|
},
|
|
{
|
|
text: '最近30天',
|
|
value: () => DateUtil.getLast30Days()
|
|
},
|
|
{
|
|
text: '最近1年',
|
|
value: () => DateUtil.getLast1Year()
|
|
}
|
|
]
|
|
|
|
/** 折线图配置 */
|
|
const lineChartOptions = reactive<EChartsOption>({
|
|
dataset: {
|
|
dimensions: ['date', 'turnover', 'orderPayPrice', 'rechargePrice', 'expensePrice'],
|
|
source: []
|
|
},
|
|
grid: {
|
|
left: 20,
|
|
right: 20,
|
|
bottom: 20,
|
|
top: 80,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
top: 50
|
|
},
|
|
series: [
|
|
{ name: '营业额', type: 'line', smooth: true },
|
|
{ name: '商品支付金额', type: 'line', smooth: true },
|
|
{ name: '充值金额', type: 'line', smooth: true },
|
|
{ name: '支出金额', type: 'line', smooth: true }
|
|
],
|
|
toolbox: {
|
|
feature: {
|
|
// 数据区域缩放
|
|
dataZoom: {
|
|
yAxisIndex: false // Y轴不缩放
|
|
},
|
|
brush: {
|
|
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
|
},
|
|
saveAsImage: { show: true, name: '交易状况' } // 保存为图片
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
},
|
|
padding: [5, 10]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}
|
|
}) as EChartsOption
|
|
|
|
/** 计算环比 */
|
|
const calculateRelativeRate = (value?: number, reference?: number) => {
|
|
// 防止除0
|
|
if (!reference) return 0
|
|
|
|
return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
|
|
}
|
|
|
|
/** 设置时间范围 */
|
|
function setTimes() {
|
|
const beginDate = dayjs().subtract(shortcutDays.value, 'd')
|
|
const yesterday = dayjs().subtract(1, 'd')
|
|
queryParams.times = DateUtil.getDateRange(beginDate, yesterday)
|
|
}
|
|
|
|
/** 处理交易状况查询（日期单选按钮组选择后） */
|
|
const handleDateTypeChange = async () => {
|
|
// 设置时间范围
|
|
setTimes()
|
|
// 查询数据
|
|
await getTradeTrendData()
|
|
}
|
|
|
|
/** 处理交易状况查询 */
|
|
const getTradeTrendData = async () => {
|
|
trendLoading.value = true
|
|
await Promise.all([getTradeTrendSummary(), getTradeTrendList()])
|
|
trendLoading.value = false
|
|
}
|
|
|
|
/** 查询交易统计 */
|
|
const getTradeStatisticsSummary = async () => {
|
|
summary.value = await TradeStatisticsApi.getTradeStatisticsSummary()
|
|
}
|
|
|
|
/** 查询交易状况数据统计 */
|
|
const getTradeTrendSummary = async () => {
|
|
loading.value = true
|
|
trendSummary.value = await TradeStatisticsApi.getTradeTrendSummary(queryParams)
|
|
loading.value = false
|
|
}
|
|
|
|
/** 查询交易状况数据列表 */
|
|
const getTradeTrendList = async () => {
|
|
const times = queryParams.times
|
|
// 开始与截止在同一天的, 折线图出不来, 需要延长一天
|
|
if (DateUtil.isSameDay(times[0], times[1])) {
|
|
// 前天
|
|
times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
|
|
}
|
|
// 查询数据
|
|
const list = await TradeStatisticsApi.getTradeTrendList({ times })
|
|
// 处理数据
|
|
for (let item of list) {
|
|
item.turnover = fenToYuan(item.turnover)
|
|
item.orderPayPrice = fenToYuan(item.orderPayPrice)
|
|
item.rechargePrice = fenToYuan(item.rechargePrice)
|
|
item.expensePrice = fenToYuan(item.expensePrice)
|
|
}
|
|
// 更新 Echarts 数据
|
|
if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
|
|
lineChartOptions.dataset['source'] = list
|
|
}
|
|
}
|
|
|
|
/** 导出按钮操作 */
|
|
const handleExport = async () => {
|
|
try {
|
|
// 导出的二次确认
|
|
await message.exportConfirm()
|
|
// 发起导出
|
|
exportLoading.value = true
|
|
const data = await TradeStatisticsApi.exportTradeTrend(queryParams)
|
|
download.excel(data, '交易状况.xls')
|
|
} catch {
|
|
} finally {
|
|
exportLoading.value = false
|
|
}
|
|
}
|
|
|
|
/** 初始化 **/
|
|
onMounted(async () => {
|
|
await getTradeStatisticsSummary()
|
|
await handleDateTypeChange()
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.summary {
|
|
.el-col {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
</style>
|