feat(shop-zone): 新增专区销量统计功能

- 后端新增专区销量统计相关 VO 并扩展 ShopHomeSection 实体 - 新增批量查询专区销量汇总与商品排行的 Mapper 方法及接口 - Controller 增加获取专区销量统计的接口支持时间范围查询 - 前端接口定义新增专区销量统计类型及请求方法 - 专区管理页面列表新增销量件数、销售额列及销量详情按钮 - 实现专区销量统计弹窗支持时间筛选、汇总展示和排行显示 - 完成前端相关界面和交互设计，保证功能完整可用 - 统计口径基于已支付且未取消/退款订单商品实际成交数据
2026-08-17 12:40:08 +08:00
parent fe97f49afe
commit ced8c7cff7
15 changed files with 1082 additions and 448 deletions
@@ -0,0 +1,91 @@
+<template>
+  <v-chart class="trend-chart" :option="chartOption" autoresize />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { LineChart, BarChart } from 'echarts/charts';
+import {
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent
+} from 'echarts/components';
+import VChart from 'vue-echarts';
+import type { ShopOrderTrendItem } from '@/api/shop/shopOrderStats/model';
+
+use([
+  CanvasRenderer,
+  LineChart,
+  BarChart,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent
+]);
+
+const props = defineProps<{
+  data?: ShopOrderTrendItem[] | null;
+  chartType?: 'line' | 'bar';
+}>();
+
+const chartOption = computed(() => {
+  const list = props.data ?? [];
+  const seriesType = props.chartType === 'bar' ? 'bar' : 'line';
+  const periods = list.map((d) => d.period);
+  const gmv = list.map((d) => Number(d.gmvSales) || 0);
+  const paid = list.map((d) => Number(d.paidSales) || 0);
+  const orders = list.map((d) => Number(d.orderCount) || 0);
+  return {
+    tooltip: { trigger: 'axis' },
+    legend: { data: ['GMV(含未付)', '实收(已付)', '订单数'], bottom: 0 },
+    grid: { left: 60, right: 24, top: 30, bottom: periods.length > 30 ? 70 : 50 },
+    xAxis: {
+      type: 'category',
+      data: periods,
+      boundaryGap: seriesType === 'bar'
+    },
+    yAxis: [
+      { type: 'value', name: '金额(元)' },
+      { type: 'value', name: '订单数', splitLine: { show: false } }
+    ],
+    dataZoom:
+      periods.length > 30
+        ? [{ type: 'inside' }, { type: 'slider', height: 18 }]
+        : undefined,
+    series: [
+      {
+        name: 'GMV(含未付)',
+        type: seriesType,
+        data: gmv,
+        smooth: true,
+        itemStyle: { color: '#91cc75' }
+      },
+      {
+        name: '实收(已付)',
+        type: seriesType,
+        data: paid,
+        smooth: true,
+        itemStyle: { color: '#00704A' }
+      },
+      {
+        name: '订单数',
+        type: seriesType,
+        yAxisIndex: 1,
+        data: orders,
+        smooth: true,
+        itemStyle: { color: '#5470c6' }
+      }
+    ]
+  };
+});
+</script>
+
+<style scoped>
+.trend-chart {
+  height: 380px;
+  width: 100%;
+}
+</style>