refactor(@vben/web-antd): ERP 首页适配已有组件

- 移除不必要的 API 调用和数据处理逻辑
- 使用 AnalysisOverview 组件替换自定义统计卡片
- 优化 TimeSummaryChart组件,支持不同类型的数据展示
- 简化页面结构,提高组件的可复用性和可维护性
This commit is contained in:
nehc
2025-07-21 21:36:40 +08:00
committed by xingyu
parent dcffb9bbe3
commit b41ac68e06
3 changed files with 128 additions and 97 deletions

View File

@@ -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>