📖 ERP：增加 ERP 首页的统计
YunaiV
parent
71ac59f22e
commit
cd86c08e59
|
|
@ -0,0 +1,28 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
// ERP 采购全局统计 VO
|
||||
export interface ErpPurchaseSummaryRespVO {
|
||||
todayPrice: number // 今日采购金额
|
||||
yesterdayPrice: number // 昨日采购金额
|
||||
monthPrice: number // 本月采购金额
|
||||
yearPrice: number // 今年采购金额
|
||||
}
|
||||
|
||||
// ERP 采购时间段统计 VO
|
||||
export interface ErpPurchaseTimeSummaryRespVO {
|
||||
time: string // 时间
|
||||
price: number // 采购金额
|
||||
}
|
||||
|
||||
// ERP 采购统计 API
|
||||
export const PurchaseStatisticsApi = {
|
||||
// 获得采购统计
|
||||
getPurchaseSummary: async (): Promise<ErpPurchaseSummaryRespVO> => {
|
||||
return await request.get({ url: `/erp/purchase-statistics/summary` })
|
||||
},
|
||||
|
||||
// 获得采购时间段统计
|
||||
getPurchaseTimeSummary: async (): Promise<ErpPurchaseTimeSummaryRespVO[]> => {
|
||||
return await request.get({ url: `/erp/purchase-statistics/time-summary` })
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
// ERP 销售全局统计 VO
|
||||
export interface ErpSaleSummaryRespVO {
|
||||
todayPrice: number // 今日销售金额
|
||||
yesterdayPrice: number // 昨日销售金额
|
||||
monthPrice: number // 本月销售金额
|
||||
yearPrice: number // 今年销售金额
|
||||
}
|
||||
|
||||
// ERP 销售时间段统计 VO
|
||||
export interface ErpSaleTimeSummaryRespVO {
|
||||
time: string // 时间
|
||||
price: number // 销售金额
|
||||
}
|
||||
|
||||
// ERP 销售统计 API
|
||||
export const SaleStatisticsApi = {
|
||||
// 获得销售统计
|
||||
getSaleSummary: async (): Promise<ErpSaleSummaryRespVO> => {
|
||||
return await request.get({ url: `/erp/sale-statistics/summary` })
|
||||
},
|
||||
|
||||
// 获得销售时间段统计
|
||||
getSaleTimeSummary: async (): Promise<ErpSaleTimeSummaryRespVO[]> => {
|
||||
return await request.get({ url: `/erp/sale-statistics/time-summary` })
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
|
||||
<div class="flex items-center justify-between text-gray-500">
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<div class="flex flex-row items-baseline justify-between">
|
||||
<CountTo prefix="￥" :end-val="value" :decimals="2" :duration="500" class="text-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
/** 价格展示 Card */
|
||||
defineOptions({ name: 'ErpSummaryCard' })
|
||||
|
||||
defineProps({
|
||||
title: propTypes.string.def('').isRequired,
|
||||
value: propTypes.number.def(0).isRequired
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<CardTitle :title="props.title" />
|
||||
</template>
|
||||
<!-- 折线图 -->
|
||||
<Echart :height="300" :options="lineChartOptions" />
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { CardTitle } from '@/components/Card'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
/** 会员用户统计卡片 */
|
||||
defineOptions({ name: 'MemberStatisticsCard' })
|
||||
|
||||
const props = defineProps({
|
||||
title: propTypes.string.def('').isRequired,
|
||||
value: propTypes.object.isRequired
|
||||
})
|
||||
|
||||
/** 折线图配置 */
|
||||
const lineChartOptions = reactive<EChartsOption>({
|
||||
dataset: {
|
||||
dimensions: ['time', 'price'],
|
||||
source: []
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
top: 80,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 50
|
||||
},
|
||||
series: [{ name: '金额', type: 'line', smooth: true, areaStyle: {} }],
|
||||
toolbox: {
|
||||
feature: {
|
||||
// 数据区域缩放
|
||||
dataZoom: {
|
||||
yAxisIndex: false // Y轴不缩放
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
return
|
||||
}
|
||||
// 更新 Echarts 数据
|
||||
if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
|
||||
lineChartOptions.dataset['source'] = val
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- 销售/采购的全局统计 -->
|
||||
<el-row :gutter="16" class="row">
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<SummaryCard title="今日销售" :value="saleSummary?.todayPrice" />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<SummaryCard title="昨日销售" :value="saleSummary?.yesterdayPrice" />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<SummaryCard title="今日采购" :value="purchaseSummary?.todayPrice" />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<SummaryCard title="昨日采购" :value="purchaseSummary?.yesterdayPrice" />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<SummaryCard title="本月销售" :value="saleSummary?.monthPrice" />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<SummaryCard title="今年销售" :value="saleSummary?.yearPrice" />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<SummaryCard title="本月采购" :value="purchaseSummary?.monthPrice" />
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12" :xs="24" :loading="loading">
|
||||
<SummaryCard title="今年采购" :value="purchaseSummary?.yearPrice" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 销售/采购的时段统计 -->
|
||||
<el-row :gutter="16" class="row">
|
||||
<!-- 销售统计 -->
|
||||
<el-col :md="12" :sm="12" :xs="24" :loading="loading">
|
||||
<TimeSummaryChart title="销售统计" :value="saleTimeSummaryList" />
|
||||
</el-col>
|
||||
<!-- 采购统计 -->
|
||||
<el-col :md="12" :sm="12" :xs="24" :loading="loading">
|
||||
<TimeSummaryChart title="采购统计" :value="purchaseTimeSummaryList" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import SummaryCard from './components/SummaryCard.vue'
|
||||
import TimeSummaryChart from './components/TimeSummaryChart.vue'
|
||||
import {
|
||||
ErpSaleSummaryRespVO,
|
||||
ErpSaleTimeSummaryRespVO,
|
||||
SaleStatisticsApi
|
||||
} from '@/api/erp/statistics/sale'
|
||||
import {
|
||||
ErpPurchaseSummaryRespVO,
|
||||
ErpPurchaseTimeSummaryRespVO,
|
||||
PurchaseStatisticsApi
|
||||
} from '@/api/erp/statistics/purchase'
|
||||
|
||||
/** 商城首页 */
|
||||
defineOptions({ name: 'ErpHome' })
|
||||
|
||||
const loading = ref(true) // 加载中
|
||||
|
||||
/** 获得销售统计 */
|
||||
const saleSummary = ref<ErpSaleSummaryRespVO>() // 销售概况统计
|
||||
const saleTimeSummaryList = ref<ErpSaleTimeSummaryRespVO[]>() // 销售时段统计
|
||||
const getSaleSummary = async () => {
|
||||
saleSummary.value = await SaleStatisticsApi.getSaleSummary()
|
||||
saleTimeSummaryList.value = await SaleStatisticsApi.getSaleTimeSummary()
|
||||
}
|
||||
|
||||
/** 获得采购统计 */
|
||||
const purchaseSummary = ref<ErpPurchaseSummaryRespVO>() // 采购概况统计
|
||||
const purchaseTimeSummaryList = ref<ErpPurchaseTimeSummaryRespVO[]>() // 采购时段统计
|
||||
const getPurchaseSummary = async () => {
|
||||
purchaseSummary.value = await PurchaseStatisticsApi.getPurchaseSummary()
|
||||
purchaseTimeSummaryList.value = await PurchaseStatisticsApi.getPurchaseTimeSummary()
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
await Promise.all([getSaleSummary(), getPurchaseSummary()])
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.row {
|
||||
.el-col {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue