|
@@ -3,128 +3,129 @@
|
|
|
<template #header>
|
|
|
<!-- 标题 -->
|
|
|
<div class="flex flex-row items-center justify-between">
|
|
|
- <CardTitle title="商品概况" />
|
|
|
+ <CardTitle title="产品概况" />
|
|
|
<!-- 查询条件 -->
|
|
|
<ShortcutDateRangePicker ref="shortcutDateRangePicker" @change="getProductTrendData">
|
|
|
<el-button
|
|
|
+ v-hasPermi="['statistics:product:export']"
|
|
|
+ :loading="exportLoading"
|
|
|
class="ml-4"
|
|
|
@click="handleExport"
|
|
|
- :loading="exportLoading"
|
|
|
- v-hasPermi="['statistics:product:export']"
|
|
|
>
|
|
|
- <Icon icon="ep:download" class="mr-1" />导出
|
|
|
+ <Icon class="mr-1" icon="ep:download" />
|
|
|
+ 导出
|
|
|
</el-button>
|
|
|
</ShortcutDateRangePicker>
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- 统计值 -->
|
|
|
<el-row :gutter="16">
|
|
|
- <el-col :xl="4" :md="8" :sm="24">
|
|
|
+ <el-col :md="8" :sm="24" :xl="4">
|
|
|
<SummaryCard
|
|
|
- title="商品浏览量"
|
|
|
- tooltip="在选定条件下,所有商品详情页被访问的次数,一个人在统计时间内访问多次记为多次"
|
|
|
- icon="ep:view"
|
|
|
- icon-color="bg-blue-100"
|
|
|
- icon-bg-color="text-blue-500"
|
|
|
- prefix=""
|
|
|
:decimals="0"
|
|
|
- :value="trendSummary?.value?.browseCount || 0"
|
|
|
:percent="
|
|
|
calculateRelativeRate(
|
|
|
trendSummary?.value?.browseCount,
|
|
|
trendSummary?.reference?.browseCount
|
|
|
)
|
|
|
"
|
|
|
+ :value="trendSummary?.value?.browseCount || 0"
|
|
|
+ icon="ep:view"
|
|
|
+ icon-bg-color="text-blue-500"
|
|
|
+ icon-color="bg-blue-100"
|
|
|
+ prefix=""
|
|
|
+ title="产品浏览量"
|
|
|
+ tooltip="在选定条件下,所有产品详情页被访问的次数,一个人在统计时间内访问多次记为多次"
|
|
|
/>
|
|
|
</el-col>
|
|
|
- <el-col :xl="4" :md="8" :sm="24">
|
|
|
+ <el-col :md="8" :sm="24" :xl="4">
|
|
|
<SummaryCard
|
|
|
- title="商品访客数"
|
|
|
- tooltip="在选定条件下,访问任何商品详情页的人数,一个人在统计时间范围内访问多次只记为一个"
|
|
|
- icon="ep:user-filled"
|
|
|
- icon-color="bg-purple-100"
|
|
|
- icon-bg-color="text-purple-500"
|
|
|
- prefix=""
|
|
|
:decimals="0"
|
|
|
- :value="trendSummary?.value?.browseUserCount || 0"
|
|
|
:percent="
|
|
|
calculateRelativeRate(
|
|
|
trendSummary?.value?.browseUserCount,
|
|
|
trendSummary?.reference?.browseUserCount
|
|
|
)
|
|
|
"
|
|
|
+ :value="trendSummary?.value?.browseUserCount || 0"
|
|
|
+ icon="ep:user-filled"
|
|
|
+ icon-bg-color="text-purple-500"
|
|
|
+ icon-color="bg-purple-100"
|
|
|
+ prefix=""
|
|
|
+ title="产品访客数"
|
|
|
+ tooltip="在选定条件下,访问任何产品详情页的人数,一个人在统计时间范围内访问多次只记为一个"
|
|
|
/>
|
|
|
</el-col>
|
|
|
- <el-col :xl="4" :md="8" :sm="24">
|
|
|
+ <el-col :md="8" :sm="24" :xl="4">
|
|
|
<SummaryCard
|
|
|
- title="支付件数"
|
|
|
- tooltip="在选定条件下,成功付款订单的商品件数之和"
|
|
|
- icon="fa-solid:money-check-alt"
|
|
|
- icon-color="bg-yellow-100"
|
|
|
- icon-bg-color="text-yellow-500"
|
|
|
- prefix=""
|
|
|
:decimals="0"
|
|
|
- :value="trendSummary?.value?.orderPayCount || 0"
|
|
|
:percent="
|
|
|
calculateRelativeRate(
|
|
|
trendSummary?.value?.orderPayCount,
|
|
|
trendSummary?.reference?.orderPayCount
|
|
|
)
|
|
|
"
|
|
|
+ :value="trendSummary?.value?.orderPayCount || 0"
|
|
|
+ icon="fa-solid:money-check-alt"
|
|
|
+ icon-bg-color="text-yellow-500"
|
|
|
+ icon-color="bg-yellow-100"
|
|
|
+ prefix=""
|
|
|
+ title="支付件数"
|
|
|
+ tooltip="在选定条件下,成功付款订单的产品件数之和"
|
|
|
/>
|
|
|
</el-col>
|
|
|
- <el-col :xl="4" :md="8" :sm="24">
|
|
|
+ <el-col :md="8" :sm="24" :xl="4">
|
|
|
<SummaryCard
|
|
|
- title="支付金额"
|
|
|
- tooltip="在选定条件下,成功付款订单的商品金额之和"
|
|
|
- icon="ep:warning-filled"
|
|
|
- icon-color="bg-green-100"
|
|
|
- icon-bg-color="text-green-500"
|
|
|
- prefix="¥"
|
|
|
:decimals="2"
|
|
|
- :value="fenToYuan(trendSummary?.value?.orderPayPrice || 0)"
|
|
|
:percent="
|
|
|
calculateRelativeRate(
|
|
|
trendSummary?.value?.orderPayPrice,
|
|
|
trendSummary?.reference?.orderPayPrice
|
|
|
)
|
|
|
"
|
|
|
+ :value="fenToYuan(trendSummary?.value?.orderPayPrice || 0)"
|
|
|
+ icon="ep:warning-filled"
|
|
|
+ icon-bg-color="text-green-500"
|
|
|
+ icon-color="bg-green-100"
|
|
|
+ prefix="¥"
|
|
|
+ title="支付金额"
|
|
|
+ tooltip="在选定条件下,成功付款订单的产品金额之和"
|
|
|
/>
|
|
|
</el-col>
|
|
|
- <el-col :xl="4" :md="8" :sm="24">
|
|
|
+ <el-col :md="8" :sm="24" :xl="4">
|
|
|
<SummaryCard
|
|
|
- title="退款件数"
|
|
|
- tooltip="在选定条件下,成功退款的商品件数之和"
|
|
|
- icon="fa-solid:wallet"
|
|
|
- icon-color="bg-cyan-100"
|
|
|
- icon-bg-color="text-cyan-500"
|
|
|
- prefix=""
|
|
|
:decimals="0"
|
|
|
- :value="trendSummary?.value?.afterSaleCount || 0"
|
|
|
:percent="
|
|
|
calculateRelativeRate(
|
|
|
trendSummary?.value?.afterSaleCount,
|
|
|
trendSummary?.reference?.afterSaleCount
|
|
|
)
|
|
|
"
|
|
|
+ :value="trendSummary?.value?.afterSaleCount || 0"
|
|
|
+ icon="fa-solid:wallet"
|
|
|
+ icon-bg-color="text-cyan-500"
|
|
|
+ icon-color="bg-cyan-100"
|
|
|
+ prefix=""
|
|
|
+ title="退款件数"
|
|
|
+ tooltip="在选定条件下,成功退款的产品件数之和"
|
|
|
/>
|
|
|
</el-col>
|
|
|
- <el-col :xl="4" :md="8" :sm="24">
|
|
|
+ <el-col :md="8" :sm="24" :xl="4">
|
|
|
<SummaryCard
|
|
|
- title="退款金额"
|
|
|
- tooltip="在选定条件下,成功退款的商品金额之和"
|
|
|
- icon="fa-solid:award"
|
|
|
- icon-color="bg-yellow-100"
|
|
|
- icon-bg-color="text-yellow-500"
|
|
|
- prefix="¥"
|
|
|
:decimals="2"
|
|
|
- :value="fenToYuan(trendSummary?.value?.afterSaleRefundPrice || 0)"
|
|
|
:percent="
|
|
|
calculateRelativeRate(
|
|
|
trendSummary?.value?.afterSaleRefundPrice,
|
|
|
trendSummary?.reference?.afterSaleRefundPrice
|
|
|
)
|
|
|
"
|
|
|
+ :value="fenToYuan(trendSummary?.value?.afterSaleRefundPrice || 0)"
|
|
|
+ icon="fa-solid:award"
|
|
|
+ icon-bg-color="text-yellow-500"
|
|
|
+ icon-color="bg-yellow-100"
|
|
|
+ prefix="¥"
|
|
|
+ title="退款金额"
|
|
|
+ tooltip="在选定条件下,成功退款的产品金额之和"
|
|
|
/>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -145,14 +146,14 @@ import { CardTitle } from '@/components/Card'
|
|
|
import * as DateUtil from '@/utils/formatTime'
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
-/** 商品概况 */
|
|
|
+/** 产品概况 */
|
|
|
defineOptions({ name: 'ProductSummary' })
|
|
|
|
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
|
|
-const trendLoading = ref(true) // 商品状态加载中
|
|
|
+const trendLoading = ref(true) // 产品状态加载中
|
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
|
-const trendSummary = ref<DataComparisonRespVO<ProductStatisticsVO>>() // 商品状况统计数据
|
|
|
+const trendSummary = ref<DataComparisonRespVO<ProductStatisticsVO>>() // 产品状况统计数据
|
|
|
const shortcutDateRangePicker = ref()
|
|
|
|
|
|
/** 折线图配置 */
|
|
@@ -172,8 +173,8 @@ const lineChartOptions = reactive<EChartsOption>({
|
|
|
top: 50
|
|
|
},
|
|
|
series: [
|
|
|
- { name: '商品浏览量', type: 'line', smooth: true, itemStyle: { color: '#B37FEB' } },
|
|
|
- { name: '商品访客数', type: 'line', smooth: true, itemStyle: { color: '#FFAB2B' } },
|
|
|
+ { name: '产品浏览量', type: 'line', smooth: true, itemStyle: { color: '#B37FEB' } },
|
|
|
+ { name: '产品访客数', type: 'line', smooth: true, itemStyle: { color: '#FFAB2B' } },
|
|
|
{ name: '支付金额', type: 'bar', smooth: true, yAxisIndex: 1, itemStyle: { color: '#1890FF' } },
|
|
|
{ name: '退款金额', type: 'bar', smooth: true, yAxisIndex: 1, itemStyle: { color: '#00C050' } }
|
|
|
],
|
|
@@ -186,7 +187,7 @@ const lineChartOptions = reactive<EChartsOption>({
|
|
|
brush: {
|
|
|
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
|
|
},
|
|
|
- saveAsImage: { show: true, name: '商品状况' } // 保存为图片
|
|
|
+ saveAsImage: { show: true, name: '产品状况' } // 保存为图片
|
|
|
}
|
|
|
},
|
|
|
tooltip: {
|
|
@@ -249,7 +250,7 @@ const lineChartOptions = reactive<EChartsOption>({
|
|
|
]
|
|
|
}) as EChartsOption
|
|
|
|
|
|
-/** 处理商品状况查询 */
|
|
|
+/** 处理产品状况查询 */
|
|
|
const getProductTrendData = async () => {
|
|
|
trendLoading.value = true
|
|
|
// 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
|
|
@@ -263,13 +264,13 @@ const getProductTrendData = async () => {
|
|
|
trendLoading.value = false
|
|
|
}
|
|
|
|
|
|
-/** 查询商品状况数据统计 */
|
|
|
+/** 查询产品状况数据统计 */
|
|
|
const getProductTrendSummary = async () => {
|
|
|
const times = shortcutDateRangePicker.value.times
|
|
|
trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({ times })
|
|
|
}
|
|
|
|
|
|
-/** 查询商品状况数据列表 */
|
|
|
+/** 查询产品状况数据列表 */
|
|
|
const getProductStatisticsList = async () => {
|
|
|
// 查询数据
|
|
|
const times = shortcutDateRangePicker.value.times
|
|
@@ -294,7 +295,7 @@ const handleExport = async () => {
|
|
|
exportLoading.value = true
|
|
|
const times = shortcutDateRangePicker.value.times
|
|
|
const data = await ProductStatisticsApi.exportProductStatisticsExcel({ times })
|
|
|
- download.excel(data, '商品状况.xls')
|
|
|
+ download.excel(data, '产品状况.xls')
|
|
|
} catch {
|
|
|
} finally {
|
|
|
exportLoading.value = false
|