From b41ac68e06f77d09a03dc61e5419296d48cce48f Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Mon, 21 Jul 2025 21:36:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor(@vben/web-antd):=20ERP=20=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E9=80=82=E9=85=8D=E5=B7=B2=E6=9C=89=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除不必要的 API 调用和数据处理逻辑
- 使用 AnalysisOverview 组件替换自定义统计卡片
- 优化 TimeSummaryChart组件，支持不同类型的数据展示
- 简化页面结构，提高组件的可复用性和可维护性
---
 .../views/erp/home/components/SummaryCard.vue | 78 +++++++++++++----
 .../erp/home/components/TimeSummaryChart.vue  | 61 ++++++++++++-
 apps/web-antd/src/views/erp/home/index.vue    | 86 +++----------------
 3 files changed, 128 insertions(+), 97 deletions(-)

diff --git a/apps/web-antd/src/views/erp/home/components/SummaryCard.vue b/apps/web-antd/src/views/erp/home/components/SummaryCard.vue
index 467155d14..ff98e556a 100644
--- a/apps/web-antd/src/views/erp/home/components/SummaryCard.vue
+++ b/apps/web-antd/src/views/erp/home/components/SummaryCard.vue
@@ -1,29 +1,69 @@
 <script lang="ts" setup>
-import { VbenCountToAnimator } from '@vben/common-ui';
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+
+import { computed } from 'vue';
+
+import { AnalysisOverview } from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
 
 interface Props {
-  title: string;
-  value?: number;
+  saleSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
+  purchaseSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
 }
 
-withDefaults(defineProps<Props>(), {
-  value: 0,
+const props = withDefaults(defineProps<Props>(), {
+  saleSummary: () => ({}),
+  purchaseSummary: () => ({}),
 });
+
+/** 概览数据 */
+const overviewItems = computed<AnalysisOverviewItem[]>(() => [
+  {
+    icon: SvgCardIcon,
+    title: '今日销售',
+    totalTitle: '今日采购',
+    totalValue: props.purchaseSummary?.todayPrice || 0,
+    value: props.saleSummary?.todayPrice || 0,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '昨日销售',
+    totalTitle: '昨日采购',
+    totalValue: props.purchaseSummary?.yesterdayPrice || 0,
+    value: props.saleSummary?.yesterdayPrice || 0,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '本月销售',
+    totalTitle: '本月采购',
+    totalValue: props.purchaseSummary?.monthPrice || 0,
+    value: props.saleSummary?.monthPrice || 0,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '今年销售',
+    totalTitle: '今年采购',
+    totalValue: props.purchaseSummary?.yearPrice || 0,
+    value: props.saleSummary?.yearPrice || 0,
+  },
+]);
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 rounded-lg border bg-white p-6 shadow-sm">
-    <div class="flex items-center justify-between text-gray-500">
-      <span>{{ title }}</span>
-    </div>
-    <div class="flex flex-row items-baseline justify-between">
-      <VbenCountToAnimator
-        :end-val="value"
-        :decimals="2"
-        :duration="500"
-        prefix="￥"
-        class="text-3xl font-semibold text-gray-900"
-      />
-    </div>
-  </div>
+  <AnalysisOverview :items="overviewItems" />
 </template>
diff --git a/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue b/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
index 831e33f80..40d9f1398 100644
--- a/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
+++ b/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
@@ -3,23 +3,51 @@ import type { EChartsOption } from 'echarts';
 
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { ref, watch } from 'vue';
+import type { ErpPurchaseStatisticsApi } from '#/api/erp/statistics/purchase';
+import type { ErpSaleStatisticsApi } from '#/api/erp/statistics/sale';
+
+import { onMounted, ref, watch } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Card } from 'ant-design-vue';
 
+import {
+  getPurchaseSummary,
+  getPurchaseTimeSummary,
+} from '#/api/erp/statistics/purchase';
+import { getSaleSummary, getSaleTimeSummary } from '#/api/erp/statistics/sale';
 import { CardTitle } from '#/components/card';
 
 interface Props {
   title: string;
-  value?: Array<{ price: number; time: string }>;
+  type?: 'purchase' | 'sale';
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  value: () => [],
+  type: 'sale',
 });
 
+/** 销售统计数据 */
+const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
+const getSaleStatistics = async () => {
+  saleSummary.value = await getSaleSummary();
+  saleTimeSummaryList.value = await getSaleTimeSummary();
+};
+
+/** 采购统计数据 */
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
+const purchaseTimeSummaryList =
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
+const getPurchaseStatistics = async () => {
+  purchaseSummary.value = await getPurchaseSummary();
+  purchaseTimeSummaryList.value = await getPurchaseTimeSummary();
+};
+
+/** 获取当前类型的时段数据 */
+const currentTimeSummaryList = ref<Array<{ price: number; time: string }>>();
+
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
@@ -80,8 +108,20 @@ const lineChartOptions: EChartsOption = {
   },
 };
 
+/** 初始化数据 */
+const initData = async () => {
+  if (props.type === 'sale') {
+    await getSaleStatistics();
+    currentTimeSummaryList.value = saleTimeSummaryList.value;
+  } else {
+    await getPurchaseStatistics();
+    currentTimeSummaryList.value = purchaseTimeSummaryList.value;
+  }
+};
+
+/** 监听数据变化并更新图表 */
 watch(
-  () => props.value,
+  () => currentTimeSummaryList.value,
   (val) => {
     if (!val || val.length === 0) {
       return;
@@ -109,6 +149,19 @@ watch(
   },
   { immediate: true },
 );
+
+/** 组件挂载时初始化数据 */
+onMounted(() => {
+  initData();
+});
+
+/** 暴露数据给父组件使用 */
+defineExpose({
+  saleSummary,
+  purchaseSummary,
+  saleTimeSummaryList,
+  purchaseTimeSummaryList,
+});
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/erp/home/index.vue b/apps/web-antd/src/views/erp/home/index.vue
index 3f3507be2..76f6af79a 100644
--- a/apps/web-antd/src/views/erp/home/index.vue
+++ b/apps/web-antd/src/views/erp/home/index.vue
@@ -1,50 +1,21 @@
 <script lang="ts" setup>
-import type { ErpPurchaseStatisticsApi } from '#/api/erp/statistics/purchase';
-import type { ErpSaleStatisticsApi } from '#/api/erp/statistics/sale';
-
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
 import { Col, Row, Spin } from 'ant-design-vue';
 
-import {
-  getPurchaseSummary,
-  getPurchaseTimeSummary,
-} from '#/api/erp/statistics/purchase';
-import { getSaleSummary, getSaleTimeSummary } from '#/api/erp/statistics/sale';
-
 import SummaryCard from './components/SummaryCard.vue';
 import TimeSummaryChart from './components/TimeSummaryChart.vue';
 
 /** ERP首页 */
 defineOptions({ name: 'ErpHome' });
 
-const loading = ref(true); // 加载中
+const loading = ref(false); // 加载中
 
-/** 获得销售统计 */
-const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
-const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
-const getSaleStatistics = async () => {
-  saleSummary.value = await getSaleSummary();
-  saleTimeSummaryList.value = await getSaleTimeSummary();
-};
-
-/** 获得采购统计 */
-const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
-const purchaseTimeSummaryList =
-  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
-const getPurchaseStatistics = async () => {
-  purchaseSummary.value = await getPurchaseSummary();
-  purchaseTimeSummaryList.value = await getPurchaseTimeSummary();
-};
-
-/** 初始化 */
-onMounted(async () => {
-  loading.value = true;
-  await Promise.all([getSaleStatistics(), getPurchaseStatistics()]);
-  loading.value = false;
-});
+/** 图表组件引用 */
+const saleChartRef = ref();
+const purchaseChartRef = ref();
 </script>
 
 <template>
@@ -59,56 +30,23 @@ onMounted(async () => {
     <Spin :spinning="loading">
       <div class="flex flex-col gap-4">
         <!-- 销售/采购的全局统计 -->
-        <Row :gutter="16">
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard title="今日销售" :value="saleSummary?.todayPrice" />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard
-              title="昨日销售"
-              :value="saleSummary?.yesterdayPrice"
-            />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard
-              title="今日采购"
-              :value="purchaseSummary?.todayPrice"
-            />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard
-              title="昨日采购"
-              :value="purchaseSummary?.yesterdayPrice"
-            />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard title="本月销售" :value="saleSummary?.monthPrice" />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard title="今年销售" :value="saleSummary?.yearPrice" />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard
-              title="本月采购"
-              :value="purchaseSummary?.monthPrice"
-            />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard title="今年采购" :value="purchaseSummary?.yearPrice" />
-          </Col>
-        </Row>
+        <SummaryCard
+          :sale-summary="saleChartRef?.saleSummary"
+          :purchase-summary="purchaseChartRef?.purchaseSummary"
+        />
 
         <!-- 销售/采购的时段统计 -->
         <Row :gutter="16">
           <!-- 销售统计 -->
           <Col :md="12" :sm="12" :xs="24">
-            <TimeSummaryChart title="销售统计" :value="saleTimeSummaryList" />
+            <TimeSummaryChart ref="saleChartRef" title="销售统计" type="sale" />
           </Col>
           <!-- 采购统计 -->
           <Col :md="12" :sm="12" :xs="24">
             <TimeSummaryChart
+              ref="purchaseChartRef"
               title="采购统计"
-              :value="purchaseTimeSummaryList"
+              type="purchase"
             />
           </Col>
         </Row>