feat: 添加总订单金额统计并调整界面布局

在商店统计接口中新增`orderAmountSum`字段,用于显示总订单金额。同时调整欢迎页面的布局,增加总金额的显示,并优化卡片的内边距和宽度。
This commit is contained in:
dzq 2025-05-20 15:45:41 +08:00
parent ea52794aae
commit 39deeb7774
2 changed files with 13 additions and 6 deletions

View File

@ -48,6 +48,8 @@ export interface StatsDTO {
goodsCount: number;
/** 订单数量 */
orderCount: number;
/** 总订单金额 */
orderAmountSum: number;
/** 总柜子数量 */
cabinetCount: number;
/** 总格口数量 */

View File

@ -18,7 +18,8 @@ const todoItems = [
const shopData = ref([
{ name: '商店', value: 0 },
{ name: '商品', value: 0 },
{ name: '订单', value: 0 }
{ name: '订单', value: 0 },
{ name: '总金额', value: 0 }
]);
const deviceData = ref([
@ -39,7 +40,8 @@ onMounted(async () => {
shopData.value = [
{ name: '商店', value: data.shopCount },
{ name: '商品', value: data.goodsCount },
{ name: '订单', value: data.orderCount }
{ name: '订单', value: data.orderCount },
{ name: '总金额', value: data.orderAmountSum }
];
deviceData.value = [
{ name: '总柜子', value: data.cabinetCount },
@ -92,8 +94,8 @@ onMounted(async () => {
</div>
<el-row :gutter="12" class="data-section">
<!-- 商店数据 -->
<el-col :span="4" v-for="item in shopData" :key="item.name">
<el-card shadow="never" class="todo-card">
<el-col :span="5" v-for="item in shopData" :key="item.name">
<el-card shadow="never" :body-style="{ padding: ' 20px 0' }" class="todo-card">
<div class="todo-content">
<div class="todo-count">{{ item.value }}</div>
<div class="todo-name">{{ item.name }}</div>
@ -113,7 +115,7 @@ onMounted(async () => {
</div>
<el-row :gutter="12" class="data-section">
<el-col :span="4" v-for="item in deviceData" :key="item.name">
<el-card shadow="never" class="todo-card">
<el-card shadow="never" :body-style="{ padding: ' 20px 0' }" class="todo-card">
<div class="todo-content">
<div class="todo-count">{{ item.value }}</div>
<div class="todo-name">{{ item.name }}</div>
@ -351,14 +353,17 @@ onMounted(async () => {
.goods-right {
width: 150px;
}
.goods-count {
width: 45px;
width: 45px;
}
}
.order-container {
.goods-right {
width: 250px;
}
.goods-count {
width: 60px;
}