feat：【mall 商城】交易统计、商品统计【ele】60%：初始化
This commit is contained in:
YunaiV
@@ -1,147 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
|
||||
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
|
||||
import { AnalysisChartCard } from '@vben/common-ui';
|
||||
import { buildSortingField, fenToYuanFormat } from '@vben/utils';
|
||||
|
||||
import * as ProductStatisticsApi from '#/api/mall/statistics/product';
|
||||
import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
|
||||
|
||||
/** 商品排行 */
|
||||
defineOptions({ name: 'ProductRank' });
|
||||
|
||||
// 格式化：访客-支付转化率
|
||||
const formatConvertRate = (row: MallProductStatisticsApi.ProductStatistics) => {
|
||||
return `${row.browseConvertPercent}%`;
|
||||
};
|
||||
|
||||
const handleSortChange = (params: any) => {
|
||||
queryParams.sortingFields = [buildSortingField(params)];
|
||||
getSpuList();
|
||||
};
|
||||
|
||||
const handleDateRangeChange = (times: any[]) => {
|
||||
queryParams.times = times as [];
|
||||
getSpuList();
|
||||
};
|
||||
|
||||
const shortcutDateRangePicker = ref();
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
times: [],
|
||||
sortingFields: {},
|
||||
});
|
||||
const loading = ref(false); // 列表的加载中
|
||||
const total = ref(0); // 列表的总页数
|
||||
const list = ref<MallProductStatisticsApi.ProductStatistics[]>([]); // 列表的数据
|
||||
|
||||
/** 查询商品列表 */
|
||||
const getSpuList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data =
|
||||
await ProductStatisticsApi.getProductStatisticsRankPage(queryParams);
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await getSpuList();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<AnalysisChartCard title="商品排行">
|
||||
<template #header-suffix>
|
||||
<ShortcutDateRangePicker
|
||||
ref="shortcutDateRangePicker"
|
||||
@change="handleDateRangeChange"
|
||||
/>
|
||||
</template>
|
||||
<!-- 排行列表 -->
|
||||
<el-table v-loading="loading" :data="list" @sort-change="handleSortChange">
|
||||
<el-table-column label="商品 ID" prop="spuId" min-width="70" />
|
||||
<el-table-column label="商品图片" align="center" prop="picUrl" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
:src="row.picUrl"
|
||||
:preview-src-list="[row.picUrl]"
|
||||
class="h-30px w-30px"
|
||||
preview-teleported
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="商品名称"
|
||||
prop="name"
|
||||
min-width="200"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="浏览量"
|
||||
prop="browseCount"
|
||||
min-width="90"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
label="访客数"
|
||||
prop="browseUserCount"
|
||||
min-width="90"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
label="加购件数"
|
||||
prop="cartCount"
|
||||
min-width="105"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
label="下单件数"
|
||||
prop="orderCount"
|
||||
min-width="105"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
label="支付件数"
|
||||
prop="orderPayCount"
|
||||
min-width="105"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
label="支付金额"
|
||||
prop="orderPayPrice"
|
||||
min-width="105"
|
||||
sortable="custom"
|
||||
:formatter="fenToYuanFormat"
|
||||
/>
|
||||
<el-table-column
|
||||
label="收藏数"
|
||||
prop="favoriteCount"
|
||||
min-width="90"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
label="访客-支付转化率(%)"
|
||||
prop="browseConvertPercent"
|
||||
min-width="180"
|
||||
sortable="custom"
|
||||
:formatter="formatConvertRate"
|
||||
/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getSpuList"
|
||||
/>
|
||||
</AnalysisChartCard>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,332 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
|
||||
import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
|
||||
import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
|
||||
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
import { confirm } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
import {
|
||||
calculateRelativeRate,
|
||||
downloadFileFromBlobPart,
|
||||
fenToYuan,
|
||||
formatDate,
|
||||
isSameDay,
|
||||
} from '@vben/utils';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import * as ProductStatisticsApi from '#/api/mall/statistics/product';
|
||||
import AnalysisChartCard from '#/views/mall/home/components/analysis-chart-card.vue';
|
||||
import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
|
||||
import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
|
||||
|
||||
/** 商品概况 */
|
||||
defineOptions({ name: 'ProductSummary' });
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
const trendLoading = ref(true); // 商品状态加载中
|
||||
const exportLoading = ref(false); // 导出的加载中
|
||||
const trendSummary =
|
||||
ref<MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>>(); // 商品状况统计数据
|
||||
const shortcutDateRangePicker = ref();
|
||||
|
||||
/** 折线图配置 */
|
||||
const lineChartOptions = reactive({
|
||||
dataset: {
|
||||
dimensions: [
|
||||
'time',
|
||||
'browseCount',
|
||||
'browseUserCount',
|
||||
'orderPayPrice',
|
||||
'afterSaleRefundPrice',
|
||||
],
|
||||
source: [] as MallProductStatisticsApi.ProductStatistics[],
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
top: 80,
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
top: 50,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
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' },
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
// 数据区域缩放
|
||||
dataZoom: {
|
||||
yAxisIndex: false, // Y轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] as const, // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '商品状况' }, // 保存为图片
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
padding: [5, 10],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category' as const,
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value' as const,
|
||||
name: '金额',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#7F8B9C',
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#F5F7F9',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value' as const,
|
||||
name: '数量',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#7F8B9C',
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#F5F7F9',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
/** 处理商品状况查询 */
|
||||
const getProductTrendData = async () => {
|
||||
trendLoading.value = true;
|
||||
// 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
|
||||
const times = shortcutDateRangePicker.value.times;
|
||||
if (isSameDay(times[0], times[1])) {
|
||||
// 前天
|
||||
times[0] = formatDate(dayjs(times[0]).subtract(1, 'd').toDate());
|
||||
}
|
||||
// 查询数据
|
||||
await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
|
||||
renderEcharts(lineChartOptions as unknown as echarts.EChartsOption);
|
||||
loadOverview();
|
||||
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;
|
||||
const list: MallProductStatisticsApi.ProductStatistics[] =
|
||||
await ProductStatisticsApi.getProductStatisticsList({ times });
|
||||
// 处理数据
|
||||
for (const item of list) {
|
||||
item.orderPayPrice = Number(fenToYuan(item.orderPayPrice));
|
||||
item.afterSaleRefundPrice = Number(fenToYuan(item.afterSaleRefundPrice));
|
||||
}
|
||||
// 更新 Echarts 数据
|
||||
if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
|
||||
lineChartOptions.dataset.source = list;
|
||||
}
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await confirm('确定要导出商品状况吗？');
|
||||
// 发起导出
|
||||
exportLoading.value = true;
|
||||
const times = shortcutDateRangePicker.value.times;
|
||||
const data = await ProductStatisticsApi.exportProductStatisticsExcel({
|
||||
times,
|
||||
});
|
||||
downloadFileFromBlobPart({ fileName: '商品状况.xls', source: data });
|
||||
} finally {
|
||||
exportLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const overviewItems = ref<AnalysisOverviewIconItem[]>();
|
||||
const loadOverview = () => {
|
||||
overviewItems.value = [
|
||||
{
|
||||
icon: 'ep:view',
|
||||
title: '商品浏览量',
|
||||
value: trendSummary.value?.value?.browseCount || 0,
|
||||
iconColor: 'bg-blue-100',
|
||||
iconBgColor: 'text-blue-500',
|
||||
tooltip:
|
||||
'在选定条件下，所有商品详情页被访问的次数，一个人在统计时间内访问多次记为多次',
|
||||
percent: calculateRelativeRate(
|
||||
trendSummary?.value?.value?.browseCount,
|
||||
trendSummary.value?.reference?.browseCount,
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: 'ep:user-filled',
|
||||
title: '商品访客数',
|
||||
value: trendSummary.value?.value?.browseUserCount || 0,
|
||||
iconColor: 'bg-purple-100',
|
||||
iconBgColor: 'text-purple-500',
|
||||
tooltip:
|
||||
'在选定条件下，访问任何商品详情页的人数，一个人在统计时间范围内访问多次只记为一个',
|
||||
percent: calculateRelativeRate(
|
||||
trendSummary?.value?.value?.browseUserCount,
|
||||
trendSummary.value?.reference?.browseUserCount,
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: 'fa-solid:money-check-alt',
|
||||
title: '支付件数',
|
||||
iconColor: 'bg-yellow-100',
|
||||
iconBgColor: 'text-yellow-500',
|
||||
value: trendSummary.value?.value?.orderPayCount || 0,
|
||||
tooltip: '在选定条件下，成功付款订单的商品件数之和',
|
||||
percent: calculateRelativeRate(
|
||||
trendSummary?.value?.value?.orderPayCount,
|
||||
trendSummary.value?.reference?.orderPayCount,
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: 'ep:warning-filled',
|
||||
title: '支付金额',
|
||||
iconColor: 'bg-green-100',
|
||||
iconBgColor: 'text-green-500',
|
||||
prefix: '￥',
|
||||
value: Number(fenToYuan(trendSummary.value?.value?.orderPayPrice || 0)),
|
||||
tooltip: '在选定条件下，成功付款订单的商品金额之和',
|
||||
decimals: 2,
|
||||
percent: calculateRelativeRate(
|
||||
trendSummary?.value?.value?.orderPayPrice,
|
||||
trendSummary.value?.reference?.orderPayPrice,
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: 'fa-solid:wallet',
|
||||
title: '退款件数',
|
||||
iconColor: 'bg-cyan-100',
|
||||
iconBgColor: 'text-cyan-500',
|
||||
value: trendSummary.value?.value?.afterSaleCount || 0,
|
||||
tooltip: '在选定条件下，成功退款的商品件数之和',
|
||||
percent: calculateRelativeRate(
|
||||
trendSummary?.value?.value?.afterSaleCount,
|
||||
trendSummary.value?.reference?.afterSaleCount,
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: 'fa-solid:award',
|
||||
title: '退款金额',
|
||||
iconColor: 'bg-yellow-100',
|
||||
iconBgColor: 'text-yellow-500',
|
||||
prefix: '￥',
|
||||
decimals: 2,
|
||||
value: Number(
|
||||
fenToYuan(trendSummary.value?.value?.afterSaleRefundPrice || 0),
|
||||
),
|
||||
tooltip: '在选定条件下，成功退款的商品金额之和',
|
||||
percent: calculateRelativeRate(
|
||||
trendSummary?.value?.value?.afterSaleRefundPrice,
|
||||
trendSummary.value?.reference?.afterSaleRefundPrice,
|
||||
),
|
||||
},
|
||||
];
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<AnalysisChartCard title="商品概况">
|
||||
<template #header-suffix>
|
||||
<!-- 查询条件 -->
|
||||
<ShortcutDateRangePicker
|
||||
ref="shortcutDateRangePicker"
|
||||
@change="getProductTrendData"
|
||||
>
|
||||
<el-button
|
||||
class="ml-4"
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-access:code="['statistics:product:export']"
|
||||
>
|
||||
<IconifyIcon icon="ep:download" class="mr-1" />导出
|
||||
</el-button>
|
||||
</ShortcutDateRangePicker>
|
||||
</template>
|
||||
<!-- 统计值 -->
|
||||
<AnalysisOverviewIcon
|
||||
v-model:model-value="overviewItems"
|
||||
:columns-number="6"
|
||||
class="mt-5 md:mr-4 md:mt-0 md:w-full"
|
||||
/>
|
||||
<!-- 折线图 -->
|
||||
<el-skeleton :loading="trendLoading" animated>
|
||||
<EchartsUI ref="chartRef" height="500px" />
|
||||
</el-skeleton>
|
||||
</AnalysisChartCard>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,21 +1,27 @@
|
||||
<script lang="ts" setup>
|
||||
import { DocAlert, Page } from '@vben/common-ui';
|
||||
|
||||
import ProductRank from './components/product-rank.vue';
|
||||
import ProductSummary from './components/product-summary.vue';
|
||||
import ProductRankCard from './modules/rank-card.vue';
|
||||
import ProductSummaryCard from './modules/summary-card.vue';
|
||||
|
||||
/** 商品统计 */
|
||||
defineOptions({ name: 'ProductStatistics' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<DocAlert
|
||||
title="【统计】会员、商品、交易统计"
|
||||
url="https://doc.iocoder.cn/mall/statistics/"
|
||||
/>
|
||||
<div class="mt-5 w-full">
|
||||
<ProductSummary class="mt-5 md:mr-4 md:mt-0" />
|
||||
</div>
|
||||
<div class="mt-5 w-full">
|
||||
<ProductRank class="mt-5 md:mr-4 md:mt-0" />
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="【统计】会员、商品、交易统计"
|
||||
url="https://doc.iocoder.cn/mall/statistics/"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- 商品概览 -->
|
||||
<ProductSummaryCard />
|
||||
<!-- 商品排行 -->
|
||||
<ProductRankCard />
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { buildSortingField } from '@vben/request';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as ProductStatisticsApi from '#/api/mall/statistics/product';
|
||||
import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
|
||||
|
||||
/** 商品排行 */
|
||||
defineOptions({ name: 'ProductRankCard' });
|
||||
|
||||
const searchTimes = ref<string[]>([]);
|
||||
|
||||
/** 处理日期范围变化 */
|
||||
const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
|
||||
if (times?.length !== 2) {
|
||||
return;
|
||||
}
|
||||
searchTimes.value = [
|
||||
formatDateTime(times[0]) as string,
|
||||
formatDateTime(times[1]) as string,
|
||||
];
|
||||
gridApi.query();
|
||||
};
|
||||
|
||||
const columns: VxeTableGridOptions['columns'] = [
|
||||
{ field: 'spuId', title: '商品 ID', minWidth: 100 },
|
||||
{
|
||||
field: 'picUrl',
|
||||
title: '商品图片',
|
||||
minWidth: 100,
|
||||
cellRender: { name: 'CellImage' },
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '商品名称',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'browseCount',
|
||||
title: '浏览量',
|
||||
minWidth: 100,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'browseUserCount',
|
||||
title: '访客数',
|
||||
minWidth: 100,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'cartCount',
|
||||
title: '加购件数',
|
||||
minWidth: 110,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'orderCount',
|
||||
title: '下单件数',
|
||||
minWidth: 110,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'orderPayCount',
|
||||
title: '支付件数',
|
||||
minWidth: 110,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'orderPayPrice',
|
||||
title: '支付金额（元）',
|
||||
minWidth: 120,
|
||||
formatter: 'formatFenToYuanAmount',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'favoriteCount',
|
||||
title: '收藏数',
|
||||
minWidth: 100,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'browseConvertPercent',
|
||||
title: '访客-支付转化率(%)',
|
||||
minWidth: 160,
|
||||
sortable: true,
|
||||
formatter: ({ cellValue }) => `${cellValue || 0}%`,
|
||||
},
|
||||
];
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns,
|
||||
height: 400,
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page, sorts }) => {
|
||||
return await ProductStatisticsApi.getProductStatisticsRankPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
|
||||
...buildSortingField(sorts),
|
||||
});
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
},
|
||||
sortConfig: {
|
||||
remote: true,
|
||||
multiple: false,
|
||||
},
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
} as VxeTableGridOptions,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>商品排行</span>
|
||||
<ShortcutDateRangePicker @change="handleDateRangeChange" />
|
||||
</div>
|
||||
</template>
|
||||
<Grid />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,255 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import type { DataComparisonRespVO } from '#/api/mall/statistics/common';
|
||||
import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { confirm, SummaryCard } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
import {
|
||||
downloadFileFromBlobPart,
|
||||
fenToYuan,
|
||||
formatDateTime,
|
||||
isSameDay,
|
||||
} from '@vben/utils';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import * as ProductStatisticsApi from '#/api/mall/statistics/product';
|
||||
import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
|
||||
|
||||
import { getProductSummaryChartOptions } from './summary-chart-options';
|
||||
|
||||
/** 商品概况 */
|
||||
defineOptions({ name: 'ProductSummaryCard' });
|
||||
|
||||
const trendLoading = ref(true); // 商品状态加载中
|
||||
const exportLoading = ref(false); // 导出的加载中
|
||||
const trendSummary =
|
||||
ref<DataComparisonRespVO<MallProductStatisticsApi.ProductStatistics>>(); // 商品状况统计数据
|
||||
const searchTimes = ref<string[]>([]);
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
/** 计算环比百分比 */
|
||||
const calculateRelativeRate = (value?: number, reference?: number): string => {
|
||||
const refValue = Number(reference || 0);
|
||||
const curValue = Number(value || 0);
|
||||
if (!refValue || refValue === 0) {
|
||||
return '0.00';
|
||||
}
|
||||
return (((curValue - refValue) / refValue) * 100).toFixed(2);
|
||||
};
|
||||
|
||||
/** 处理日期范围变化 */
|
||||
const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
|
||||
if (times?.length !== 2) {
|
||||
getProductTrendData();
|
||||
return;
|
||||
}
|
||||
// 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
|
||||
let adjustedTimes = times;
|
||||
if (isSameDay(times[0], times[1])) {
|
||||
adjustedTimes = [dayjs(times[0]).subtract(1, 'd'), times[1]];
|
||||
}
|
||||
searchTimes.value = [
|
||||
formatDateTime(adjustedTimes[0]) as string,
|
||||
formatDateTime(adjustedTimes[1]) as string,
|
||||
];
|
||||
|
||||
// 查询数据
|
||||
getProductTrendData();
|
||||
};
|
||||
|
||||
/** 处理商品状况查询 */
|
||||
const getProductTrendData = async () => {
|
||||
trendLoading.value = true;
|
||||
try {
|
||||
await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
|
||||
} finally {
|
||||
trendLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 查询商品状况数据统计 */
|
||||
async function getProductTrendSummary() {
|
||||
trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({
|
||||
times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
/** 查询商品状况数据列表 */
|
||||
async function getProductStatisticsList() {
|
||||
const list = await ProductStatisticsApi.getProductStatisticsList({
|
||||
times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
|
||||
});
|
||||
|
||||
// 渲染图表
|
||||
await renderEcharts(getProductSummaryChartOptions(list));
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
async function handleExport() {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await confirm({
|
||||
content: '确认导出商品状况数据吗？',
|
||||
});
|
||||
// 发起导出
|
||||
exportLoading.value = true;
|
||||
const data = await ProductStatisticsApi.exportProductStatisticsExcel({
|
||||
times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
|
||||
});
|
||||
// 处理下载
|
||||
downloadFileFromBlobPart({ fileName: '商品状况.xlsx', source: data });
|
||||
} catch {
|
||||
// 用户取消导出
|
||||
} finally {
|
||||
exportLoading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never" class="h-full">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>商品概况</span>
|
||||
<!-- 查询条件 -->
|
||||
<div class="flex items-center gap-2">
|
||||
<ShortcutDateRangePicker @change="handleDateRangeChange">
|
||||
<el-button class="ml-4" @click="handleExport" :loading="exportLoading">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:download" />
|
||||
</template>
|
||||
导出
|
||||
</el-button>
|
||||
</ShortcutDateRangePicker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 统计值 -->
|
||||
<el-row :gutter="16" class="mb-4">
|
||||
<el-col :xl="8" :md="8" :sm="24" class="mb-4">
|
||||
<SummaryCard
|
||||
title="商品浏览量"
|
||||
tooltip="在选定条件下，所有商品详情页被访问的次数，一个人在统计时间内访问多次记为多次"
|
||||
icon="lucide:eye"
|
||||
icon-color="text-blue-500"
|
||||
icon-bg-color="bg-blue-100"
|
||||
:decimals="0"
|
||||
:value="trendSummary?.value?.browseCount || 0"
|
||||
:percent="
|
||||
calculateRelativeRate(
|
||||
trendSummary?.value?.browseCount,
|
||||
trendSummary?.reference?.browseCount,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xl="8" :md="8" :sm="24" class="mb-4">
|
||||
<SummaryCard
|
||||
title="商品访客数"
|
||||
tooltip="在选定条件下，访问任何商品详情页的人数，一个人在统计时间范围内访问多次只记为一个"
|
||||
icon="lucide:users"
|
||||
icon-color="text-purple-500"
|
||||
icon-bg-color="bg-purple-100"
|
||||
:decimals="0"
|
||||
:value="trendSummary?.value?.browseUserCount || 0"
|
||||
:percent="
|
||||
calculateRelativeRate(
|
||||
trendSummary?.value?.browseUserCount,
|
||||
trendSummary?.reference?.browseUserCount,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xl="8" :md="8" :sm="24" class="mb-4">
|
||||
<SummaryCard
|
||||
title="支付件数"
|
||||
tooltip="在选定条件下，成功付款订单的商品件数之和"
|
||||
icon="lucide:credit-card"
|
||||
icon-color="text-yellow-500"
|
||||
icon-bg-color="bg-yellow-100"
|
||||
:decimals="0"
|
||||
:value="trendSummary?.value?.orderPayCount || 0"
|
||||
:percent="
|
||||
calculateRelativeRate(
|
||||
trendSummary?.value?.orderPayCount,
|
||||
trendSummary?.reference?.orderPayCount,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xl="8" :md="8" :sm="24" class="mb-4">
|
||||
<SummaryCard
|
||||
title="支付金额"
|
||||
tooltip="在选定条件下，成功付款订单的商品金额之和"
|
||||
icon="lucide:banknote"
|
||||
icon-color="text-green-500"
|
||||
icon-bg-color="bg-green-100"
|
||||
prefix="￥"
|
||||
:decimals="2"
|
||||
:value="Number(fenToYuan(trendSummary?.value?.orderPayPrice || 0))"
|
||||
:percent="
|
||||
calculateRelativeRate(
|
||||
trendSummary?.value?.orderPayPrice,
|
||||
trendSummary?.reference?.orderPayPrice,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xl="8" :md="8" :sm="24" class="mb-4">
|
||||
<SummaryCard
|
||||
title="退款件数"
|
||||
tooltip="在选定条件下，成功退款的商品件数之和"
|
||||
icon="lucide:wallet"
|
||||
icon-color="text-cyan-500"
|
||||
icon-bg-color="bg-cyan-100"
|
||||
:decimals="0"
|
||||
:value="trendSummary?.value?.afterSaleCount || 0"
|
||||
:percent="
|
||||
calculateRelativeRate(
|
||||
trendSummary?.value?.afterSaleCount,
|
||||
trendSummary?.reference?.afterSaleCount,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
|
||||
<el-col :xl="8" :md="8" :sm="24" class="mb-4">
|
||||
<SummaryCard
|
||||
title="退款金额"
|
||||
tooltip="在选定条件下，成功退款的商品金额之和"
|
||||
icon="lucide:receipt"
|
||||
icon-color="text-orange-500"
|
||||
icon-bg-color="bg-orange-100"
|
||||
prefix="￥"
|
||||
:decimals="2"
|
||||
:value="
|
||||
Number(fenToYuan(trendSummary?.value?.afterSaleRefundPrice || 0))
|
||||
"
|
||||
:percent="
|
||||
calculateRelativeRate(
|
||||
trendSummary?.value?.afterSaleRefundPrice,
|
||||
trendSummary?.reference?.afterSaleRefundPrice,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 折线图 -->
|
||||
<div v-loading="trendLoading">
|
||||
<EchartsUI ref="chartRef" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
/** 商品统计折线图配置 */
|
||||
export function getProductSummaryChartOptions(data: any[]): any {
|
||||
// 处理数据：将金额从分转换为元
|
||||
const processedData = data.map((item) => ({
|
||||
...item,
|
||||
orderPayPrice: Number((item.orderPayPrice / 100).toFixed(2)),
|
||||
afterSaleRefundPrice: Number((item.afterSaleRefundPrice / 100).toFixed(2)),
|
||||
}));
|
||||
|
||||
return {
|
||||
dataset: {
|
||||
dimensions: [
|
||||
'time',
|
||||
'browseCount',
|
||||
'browseUserCount',
|
||||
'orderPayPrice',
|
||||
'afterSaleRefundPrice',
|
||||
],
|
||||
source: processedData,
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
top: 80,
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
top: 50,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
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' },
|
||||
},
|
||||
],
|
||||
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: true,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#7F8B9C',
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#F5F7F9',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#7F8B9C',
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#F5F7F9',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user