Skip to content

Commit cd86c08

Browse files
YunaiVYunaiV
committed
📖 ERP：增加 ERP 首页的统计
1 parent 71ac59f commit cd86c08

File tree

5 files changed

+254
-0
lines changed

5 files changed

+254
-0
lines changed

‎src/api/erp/statistics/purchase/index.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import request from '@/config/axios'
2+
3+
// ERP 采购全局统计 VO
4+
export interface ErpPurchaseSummaryRespVO {
5+
todayPrice: number // 今日采购金额
6+
yesterdayPrice: number // 昨日采购金额
7+
monthPrice: number // 本月采购金额
8+
yearPrice: number // 今年采购金额
9+
}
10+
11+
// ERP 采购时间段统计 VO
12+
export interface ErpPurchaseTimeSummaryRespVO {
13+
time: string // 时间
14+
price: number // 采购金额
15+
}
16+
17+
// ERP 采购统计 API
18+
export const PurchaseStatisticsApi = {
19+
// 获得采购统计
20+
getPurchaseSummary: async (): Promise<ErpPurchaseSummaryRespVO> => {
21+
return await request.get({ url: `/erp/purchase-statistics/summary` })
22+
},
23+
24+
// 获得采购时间段统计
25+
getPurchaseTimeSummary: async (): Promise<ErpPurchaseTimeSummaryRespVO[]> => {
26+
return await request.get({ url: `/erp/purchase-statistics/time-summary` })
27+
}
28+
}

‎src/api/erp/statistics/sale/index.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import request from '@/config/axios'
2+
3+
// ERP 销售全局统计 VO
4+
export interface ErpSaleSummaryRespVO {
5+
todayPrice: number // 今日销售金额
6+
yesterdayPrice: number // 昨日销售金额
7+
monthPrice: number // 本月销售金额
8+
yearPrice: number // 今年销售金额
9+
}
10+
11+
// ERP 销售时间段统计 VO
12+
export interface ErpSaleTimeSummaryRespVO {
13+
time: string // 时间
14+
price: number // 销售金额
15+
}
16+
17+
// ERP 销售统计 API
18+
export const SaleStatisticsApi = {
19+
// 获得销售统计
20+
getSaleSummary: async (): Promise<ErpSaleSummaryRespVO> => {
21+
return await request.get({ url: `/erp/sale-statistics/summary` })
22+
},
23+
24+
// 获得销售时间段统计
25+
getSaleTimeSummary: async (): Promise<ErpSaleTimeSummaryRespVO[]> => {
26+
return await request.get({ url: `/erp/sale-statistics/time-summary` })
27+
}
28+
}

‎src/views/erp/home/components/SummaryCard.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
3+
<div class="flex items-center justify-between text-gray-500">
4+
<span>{{ title }}</span>
5+
</div>
6+
<div class="flex flex-row items-baseline justify-between">
7+
<CountTo prefix="￥" :end-val="value" :decimals="2" :duration="500" class="text-3xl" />
8+
</div>
9+
</div>
10+
</template>
11+
<script lang="ts" setup>
12+
import { propTypes } from '@/utils/propTypes'
13+
14+
/** 价格展示 Card */
15+
defineOptions({ name: 'ErpSummaryCard' })
16+
17+
defineProps({
18+
title: propTypes.string.def('').isRequired,
19+
value: propTypes.number.def(0).isRequired
20+
})
21+
</script>

‎src/views/erp/home/components/TimeSummaryChart.vue

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<el-card shadow="never">
3+
<template #header>
4+
<CardTitle :title="props.title" />
5+
</template>
6+
<!-- 折线图 -->
7+
<Echart :height="300" :options="lineChartOptions" />
8+
</el-card>
9+
</template>
10+
<script lang="ts" setup>
11+
import { EChartsOption } from 'echarts'
12+
import { formatDate } from '@/utils/formatTime'
13+
import { CardTitle } from '@/components/Card'
14+
import { propTypes } from '@/utils/propTypes'
15+
16+
/** 会员用户统计卡片 */
17+
defineOptions({ name: 'MemberStatisticsCard' })
18+
19+
const props = defineProps({
20+
title: propTypes.string.def('').isRequired,
21+
value: propTypes.object.isRequired
22+
})
23+
24+
/** 折线图配置 */
25+
const lineChartOptions = reactive<EChartsOption>({
26+
dataset: {
27+
dimensions: ['time', 'price'],
28+
source: []
29+
},
30+
grid: {
31+
left: 20,
32+
right: 20,
33+
bottom: 20,
34+
top: 80,
35+
containLabel: true
36+
},
37+
legend: {
38+
top: 50
39+
},
40+
series: [{ name: '金额', type: 'line', smooth: true, areaStyle: {} }],
41+
toolbox: {
42+
feature: {
43+
// 数据区域缩放
44+
dataZoom: {
45+
yAxisIndex: false // Y轴不缩放
46+
},
47+
brush: {
48+
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
49+
},
50+
saveAsImage: { show: true, name: props.title } // 保存为图片
51+
}
52+
},
53+
tooltip: {
54+
trigger: 'axis',
55+
axisPointer: {
56+
type: 'cross'
57+
},
58+
padding: [5, 10]
59+
},
60+
xAxis: {
61+
type: 'category',
62+
boundaryGap: false,
63+
axisTick: {
64+
show: false
65+
}
66+
},
67+
yAxis: {
68+
axisTick: {
69+
show: false
70+
}
71+
}
72+
}) as EChartsOption
73+
74+
watch(
75+
() => props.value,
76+
(val) => {
77+
if (!val) {
78+
return
79+
}
80+
// 更新 Echarts 数据
81+
if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
82+
lineChartOptions.dataset['source'] = val
83+
}
84+
}
85+
)
86+
</script>

‎src/views/erp/home/index.vue

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<template>
2+
<div class="flex flex-col">
3+
<!-- 销售/采购的全局统计 -->
4+
<el-row :gutter="16" class="row">
5+
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
6+
<SummaryCard title="今日销售" :value="saleSummary?.todayPrice" />
7+
</el-col>
8+
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
9+
<SummaryCard title="昨日销售" :value="saleSummary?.yesterdayPrice" />
10+
</el-col>
11+
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
12+
<SummaryCard title="今日采购" :value="purchaseSummary?.todayPrice" />
13+
</el-col>
14+
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
15+
<SummaryCard title="昨日采购" :value="purchaseSummary?.yesterdayPrice" />
16+
</el-col>
17+
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
18+
<SummaryCard title="本月销售" :value="saleSummary?.monthPrice" />
19+
</el-col>
20+
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
21+
<SummaryCard title="今年销售" :value="saleSummary?.yearPrice" />
22+
</el-col>
23+
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
24+
<SummaryCard title="本月采购" :value="purchaseSummary?.monthPrice" />
25+
</el-col>
26+
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
27+
<SummaryCard title="今年采购" :value="purchaseSummary?.yearPrice" />
28+
</el-col>
29+
</el-row>
30+
<!-- 销售/采购的时段统计 -->
31+
<el-row :gutter="16" class="row">
32+
<!-- 销售统计 -->
33+
<el-col :md="12" :sm="12" :xs="24" :loading="loading">
34+
<TimeSummaryChart title="销售统计" :value="saleTimeSummaryList" />
35+
</el-col>
36+
<!-- 采购统计 -->
37+
<el-col :md="12" :sm="12" :xs="24" :loading="loading">
38+
<TimeSummaryChart title="采购统计" :value="purchaseTimeSummaryList" />
39+
</el-col>
40+
</el-row>
41+
</div>
42+
</template>
43+
<script lang="ts" setup>
44+
import SummaryCard from './components/SummaryCard.vue'
45+
import TimeSummaryChart from './components/TimeSummaryChart.vue'
46+
import {
47+
ErpSaleSummaryRespVO,
48+
ErpSaleTimeSummaryRespVO,
49+
SaleStatisticsApi
50+
} from '@/api/erp/statistics/sale'
51+
import {
52+
ErpPurchaseSummaryRespVO,
53+
ErpPurchaseTimeSummaryRespVO,
54+
PurchaseStatisticsApi
55+
} from '@/api/erp/statistics/purchase'
56+
57+
/** 商城首页 */
58+
defineOptions({ name: 'ErpHome' })
59+
60+
const loading = ref(true) // 加载中
61+
62+
/** 获得销售统计 */
63+
const saleSummary = ref<ErpSaleSummaryRespVO>() // 销售概况统计
64+
const saleTimeSummaryList = ref<ErpSaleTimeSummaryRespVO[]>() // 销售时段统计
65+
const getSaleSummary = async () => {
66+
saleSummary.value = await SaleStatisticsApi.getSaleSummary()
67+
saleTimeSummaryList.value = await SaleStatisticsApi.getSaleTimeSummary()
68+
}
69+
70+
/** 获得采购统计 */
71+
const purchaseSummary = ref<ErpPurchaseSummaryRespVO>() // 采购概况统计
72+
const purchaseTimeSummaryList = ref<ErpPurchaseTimeSummaryRespVO[]>() // 采购时段统计
73+
const getPurchaseSummary = async () => {
74+
purchaseSummary.value = await PurchaseStatisticsApi.getPurchaseSummary()
75+
purchaseTimeSummaryList.value = await PurchaseStatisticsApi.getPurchaseTimeSummary()
76+
}
77+
78+
/** 初始化 **/
79+
onMounted(async () => {
80+
loading.value = true
81+
await Promise.all([getSaleSummary(), getPurchaseSummary()])
82+
loading.value = false
83+
})
84+
</script>
85+
<style lang="scss" scoped>
86+
.row {
87+
.el-col {
88+
margin-bottom: 1rem;
89+
}
90+
}
91+
</style>

0 commit comments

Comments
 (0)