feat：【ele】【erp】home 的迁移（100%）

apps/web-antd/src/api/erp/statistics/purchase/index.ts

@@ -1,16 +1,16 @@
 import { requestClient } from '#/api/request';
 
 export namespace ErpPurchaseStatisticsApi {
-  /** ERP 采购全局统计 */
+  /** 采购全局统计 */
-  export interface PurchaseSummary {
+  export interface PurchaseSummaryRespVO {
     todayPrice: number; // 今日采购金额
     yesterdayPrice: number; // 昨日采购金额
     monthPrice: number; // 本月采购金额
     yearPrice: number; // 今年采购金额
   }
 
-  /** ERP 采购时间段统计 */
+  /** 采购时间段统计 */
-  export interface PurchaseTimeSummary {
+  export interface PurchaseTimeSummaryRespVO {
     time: string; // 时间
     price: number; // 采购金额
   }
@@ -18,14 +18,14 @@ export namespace ErpPurchaseStatisticsApi {
 
 /** 获得采购统计 */
 export function getPurchaseSummary() {
-  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseSummary>(
+  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(
     '/erp/purchase-statistics/summary',
   );
 }
 
 /** 获得采购时间段统计 */
 export function getPurchaseTimeSummary() {
-  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(
+  return requestClient.get<
-    '/erp/purchase-statistics/time-summary',
+    ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]
-  );
+  >('/erp/purchase-statistics/time-summary');
 }

apps/web-antd/src/api/erp/statistics/sale/index.ts

@@ -1,16 +1,16 @@
 import { requestClient } from '#/api/request';
 
 export namespace ErpSaleStatisticsApi {
-  /** ERP 销售全局统计 */
+  /** 销售全局统计 */
-  export interface SaleSummary {
+  export interface SaleSummaryRespVO {
     todayPrice: number; // 今日销售金额
     yesterdayPrice: number; // 昨日销售金额
     monthPrice: number; // 本月销售金额
     yearPrice: number; // 今年销售金额
   }
 
-  /** ERP 销售时间段统计 */
+  /** 销售时间段统计 */
-  export interface SaleTimeSummary {
+  export interface SaleTimeSummaryRespVO {
     time: string; // 时间
     price: number; // 销售金额
   }
@@ -18,14 +18,14 @@ export namespace ErpSaleStatisticsApi {
 
 /** 获得销售统计 */
 export function getSaleSummary() {
-  return requestClient.get<ErpSaleStatisticsApi.SaleSummary>(
+  return requestClient.get<ErpSaleStatisticsApi.SaleSummaryRespVO>(
     '/erp/sale-statistics/summary',
   );
 }
 
 /** 获得销售时间段统计 */
 export function getSaleTimeSummary() {
-  return requestClient.get<ErpSaleStatisticsApi.SaleTimeSummary[]>(
+  return requestClient.get<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(
     '/erp/sale-statistics/time-summary',
   );
 }

apps/web-antd/src/views/erp/home/index.vue

@@ -5,10 +5,10 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { Col, Row, Spin } from 'ant-design-vue';
 
-import SummaryCard from './modules/SummaryCard.vue';
+import SummaryCard from './modules/summary-card.vue';
-import TimeSummaryChart from './modules/TimeSummaryChart.vue';
+import TimeSummaryChart from './modules/time-summary-chart.vue';
 
-/** ERP首页 */
+/** ERP 首页 */
 defineOptions({ name: 'ErpHome' });
 
 const loading = ref(false); // 加载中

apps/web-antd/src/views/erp/home/modules/time-summary-chart.vue

@@ -26,17 +26,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 /** 销售统计数据 */
-const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
+const saleSummary = ref<ErpSaleStatisticsApi.SaleSummaryRespVO>(); // 销售概况统计
-const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(); // 销售时段统计
 const getSaleStatistics = async () => {
   saleSummary.value = await getSaleSummary();
   saleTimeSummaryList.value = await getSaleTimeSummary();
 };
 
 /** 采购统计数据 */
-const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(); // 采购概况统计
 const purchaseTimeSummaryList =
-  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]>(); // 采购时段统计
 const getPurchaseStatistics = async () => {
   purchaseSummary.value = await getPurchaseSummary();
   purchaseTimeSummaryList.value = await getPurchaseTimeSummary();

apps/web-ele/src/api/erp/statistics/purchase/index.ts

@@ -0,0 +1,31 @@
+import { requestClient } from '#/api/request';
+
+export namespace ErpPurchaseStatisticsApi {
+  /** 采购全局统计 */
+  export interface PurchaseSummaryRespVO {
+    todayPrice: number; // 今日采购金额
+    yesterdayPrice: number; // 昨日采购金额
+    monthPrice: number; // 本月采购金额
+    yearPrice: number; // 今年采购金额
+  }
+
+  /** 采购时间段统计 */
+  export interface PurchaseTimeSummaryRespVO {
+    time: string; // 时间
+    price: number; // 采购金额
+  }
+}
+
+/** 获得采购统计 */
+export function getPurchaseSummary() {
+  return requestClient.get<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(
+    '/erp/purchase-statistics/summary',
+  );
+}
+
+/** 获得采购时间段统计 */
+export function getPurchaseTimeSummary() {
+  return requestClient.get<
+    ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]
+  >('/erp/purchase-statistics/time-summary');
+}

apps/web-ele/src/api/erp/statistics/sale/index.ts

@@ -0,0 +1,31 @@
+import { requestClient } from '#/api/request';
+
+export namespace ErpSaleStatisticsApi {
+  /** 销售全局统计 */
+  export interface SaleSummaryRespVO {
+    todayPrice: number; // 今日销售金额
+    yesterdayPrice: number; // 昨日销售金额
+    monthPrice: number; // 本月销售金额
+    yearPrice: number; // 今年销售金额
+  }
+
+  /** 销售时间段统计 */
+  export interface SaleTimeSummaryRespVO {
+    time: string; // 时间
+    price: number; // 销售金额
+  }
+}
+
+/** 获得销售统计 */
+export function getSaleSummary() {
+  return requestClient.get<ErpSaleStatisticsApi.SaleSummaryRespVO>(
+    '/erp/sale-statistics/summary',
+  );
+}
+
+/** 获得销售时间段统计 */
+export function getSaleTimeSummary() {
+  return requestClient.get<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(
+    '/erp/sale-statistics/time-summary',
+  );
+}

apps/web-ele/src/views/erp/home/index.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElCol, ElRow } from 'element-plus';
+
+import SummaryCard from './modules/summary-card.vue';
+import TimeSummaryChart from './modules/time-summary-chart.vue';
+
+/** ERP 首页 */
+defineOptions({ name: 'ErpHome' });
+
+const loading = ref(false); // 加载中
+
+/** 图表组件引用 */
+const saleChartRef = ref();
+const purchaseChartRef = ref();
+</script>
+
+<template>
+  <Page>
+    <template #doc>
+      <DocAlert
+        title="ERP 手册（功能开启）"
+        url="https://doc.iocoder.cn/erp/build/"
+      />
+    </template>
+
+    <div v-loading="loading" class="flex flex-col gap-4">
+      <!-- 销售/采购的全局统计 -->
+      <SummaryCard />
+
+      <!-- 销售/采购的时段统计 -->
+      <ElRow :gutter="16">
+        <!-- 销售统计 -->
+        <ElCol :md="12" :sm="12" :xs="24">
+          <TimeSummaryChart ref="saleChartRef" title="销售统计" type="sale" />
+        </ElCol>
+        <!-- 采购统计 -->
+        <ElCol :md="12" :sm="12" :xs="24">
+          <TimeSummaryChart
+            ref="purchaseChartRef"
+            title="采购统计"
+            type="purchase"
+          />
+        </ElCol>
+      </ElRow>
+    </div>
+  </Page>
+</template>

apps/web-ele/src/views/erp/home/modules/summary-card.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+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 {
+  saleSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
+  purchaseSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
+}
+
+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>
+  <AnalysisOverview :items="overviewItems" />
+</template>

apps/web-ele/src/views/erp/home/modules/time-summary-chart.vue

@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+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 { ElCard } from 'element-plus';
+
+import {
+  getPurchaseSummary,
+  getPurchaseTimeSummary,
+} from '#/api/erp/statistics/purchase';
+import { getSaleSummary, getSaleTimeSummary } from '#/api/erp/statistics/sale';
+
+interface Props {
+  title: string;
+  type?: 'purchase' | 'sale';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'sale',
+});
+
+/** 销售统计数据 */
+const saleSummary = ref<ErpSaleStatisticsApi.SaleSummaryRespVO>(); // 销售概况统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(); // 销售时段统计
+const getSaleStatistics = async () => {
+  saleSummary.value = await getSaleSummary();
+  saleTimeSummaryList.value = await getSaleTimeSummary();
+};
+
+/** 采购统计数据 */
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(); // 采购概况统计
+const purchaseTimeSummaryList =
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]>(); // 采购时段统计
+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);
+
+/** 折线图配置 */
+const lineChartOptions: echarts.EChartsOption = {
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [
+    {
+      name: '金额',
+      type: 'line',
+      smooth: true,
+      areaStyle: {},
+      data: [],
+    },
+  ],
+  toolbox: {
+    feature: {
+      dataZoom: {
+        yAxisIndex: false,
+      },
+      brush: {
+        type: ['lineX', 'clear'],
+      },
+      saveAsImage: {
+        show: true,
+        name: props.title,
+      },
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+    data: [],
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+};
+
+/** 初始化数据 */
+const initData = async () => {
+  if (props.type === 'sale') {
+    await getSaleStatistics();
+    currentTimeSummaryList.value = saleTimeSummaryList.value;
+  } else {
+    await getPurchaseStatistics();
+    currentTimeSummaryList.value = purchaseTimeSummaryList.value;
+  }
+};
+
+/** 监听数据变化并更新图表 */
+watch(
+  () => currentTimeSummaryList.value,
+  (val) => {
+    if (!val || val.length === 0) {
+      return;
+    }
+    // 更新图表数据
+    const xAxisData = val.map((item) => item.time);
+    const seriesData = val.map((item) => item.price);
+    const options = {
+      ...lineChartOptions,
+      xAxis: {
+        ...lineChartOptions.xAxis,
+        data: xAxisData,
+      },
+      series: [
+        {
+          ...(lineChartOptions.series as any)[0],
+          data: seriesData,
+        },
+      ],
+    };
+    renderEcharts(options);
+  },
+  { immediate: true },
+);
+
+/** 组件挂载时初始化数据 */
+onMounted(() => {
+  initData();
+});
+</script>
+
+<template>
+  <ElCard>
+    <template #header>
+      <span>{{ title }}</span>
+    </template>
+    <!-- 折线图 -->
+    <EchartsUI ref="chartRef" />
+  </ElCard>
+</template>