From b6130b6ca4160c261a5fdeeb20d894f8343b4fba Mon Sep 17 00:00:00 2001
From: yuan <123@>
Date: 星期一, 22 六月 2026 17:10:03 +0800
Subject: [PATCH] feat: 指标统计增加销售数量
---
src/views/salesManagement/indicatorStats/index.vue | 58 ++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 48 insertions(+), 10 deletions(-)
diff --git a/src/views/salesManagement/indicatorStats/index.vue b/src/views/salesManagement/indicatorStats/index.vue
index 8ae15ed..6c574ab 100644
--- a/src/views/salesManagement/indicatorStats/index.vue
+++ b/src/views/salesManagement/indicatorStats/index.vue
@@ -2,7 +2,7 @@
<div class="app-container indicator-stats">
<!-- KPI 姹囨�� -->
<el-row :gutter="20" class="stats-row">
- <el-col :xs="24" :sm="12" :md="8">
+ <el-col :xs="24" :sm="12" :md="6">
<div class="stat-card stat-card-blue">
<div class="stat-icon-wrapper">
<div class="stat-icon">
@@ -16,7 +16,7 @@
<div class="stat-bg-decoration"></div>
</div>
</el-col>
- <el-col :xs="24" :sm="12" :md="8">
+ <el-col :xs="24" :sm="12" :md="6">
<div class="stat-card stat-card-green">
<div class="stat-icon-wrapper">
<div class="stat-icon">
@@ -30,7 +30,21 @@
<div class="stat-bg-decoration"></div>
</div>
</el-col>
- <el-col :xs="24" :sm="12" :md="8">
+ <el-col :xs="24" :sm="12" :md="6">
+ <div class="stat-card stat-card-purple">
+ <div class="stat-icon-wrapper">
+ <div class="stat-icon">
+ <el-icon :size="32"><Goods /></el-icon>
+ </div>
+ </div>
+ <div class="stat-content">
+ <div class="stat-value">{{ formatQuantity(indicatorKpis.productSalesQuantity) }}</div>
+ <div class="stat-label">浜у搧閿�鍞暟閲�</div>
+ </div>
+ <div class="stat-bg-decoration"></div>
+ </div>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="6">
<div class="stat-card stat-card-orange">
<div class="stat-icon-wrapper">
<div class="stat-icon">
@@ -132,7 +146,7 @@
<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
-import { Document, Van, Tickets, Search, Refresh } from '@element-plus/icons-vue'
+import { Document, Van, Tickets, Search, Refresh, Goods } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { getTotalStatistics, getStatisticsTable } from '@/api/salesManagement/indicatorStats'
import { productTreeList } from '@/api/basicData/product.js'
@@ -142,6 +156,7 @@
const indicatorKpis = reactive({
orderCount: 0,
salesAmount: 0,
+ productSalesQuantity: 0,
shipRate: 0
})
@@ -161,6 +176,11 @@
const productOptions = ref([])
const customerOption = ref([])
+const formatQuantity = (value) => {
+ const num = Number(value)
+ if (Number.isNaN(num)) return '0'
+ return num.toLocaleString(undefined, { maximumFractionDigits: 2 })
+}
// 杞崲浜у搧鏍戞暟鎹紝灏� id 鏀逛负 value
function convertIdToValue(data) {
return data.map((item) => {
@@ -234,7 +254,7 @@
if (res && res.data) {
indicatorKpis.orderCount = res.data.total || 0
indicatorKpis.salesAmount = res.data.contractAmountTotal || 0
- // 鍙戣揣鐜囧鏋滄帴鍙ｆ病鏈夎繑鍥烇紝淇濇寔鍘熷�兼垨璁句负0
+ indicatorKpis.productSalesQuantity = res.data.productQuantityTotal || 0
indicatorKpis.shipRate = res.data.shipRate || 0
}
} catch (error) {
@@ -282,12 +302,11 @@
if (indicatorChart) indicatorChart.dispose()
indicatorChart = echarts.init(indicatorChartRef.value)
- // 鏍规嵁鎺ュ彛杩斿洖鐨勬暟鎹粨鏋勬洿鏂板浘琛�
- // 鎺ュ彛杩斿洖: dateList, orderCountList, salesAmountList
+ // 鎺ュ彛杩斿洖: dateList, orderCountList, salesAmountList, productQuantityList
const option = {
title: { text: '澶氱淮搴﹂攢鍞寚鏍囪秼鍔�', left: 'center' },
tooltip: { trigger: 'axis' },
- legend: { data: ['璁㈠崟鏁�', '閿�鍞'], top: 30 },
+ legend: { data: ['璁㈠崟鏁�', '閿�鍞', '浜у搧閿�鍞暟閲�'], top: 30 },
grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
@@ -322,6 +341,13 @@
yAxisIndex: 0,
data: chartData.salesAmountList || [],
itemStyle: { color: '#67c23a' }
+ },
+ {
+ name: '浜у搧閿�鍞暟閲�',
+ type: 'line',
+ yAxisIndex: 1,
+ data: chartData.productQuantityList || [],
+ itemStyle: { color: '#f56c6c' }
}
]
}
@@ -335,7 +361,7 @@
const option = {
title: { text: '澶氱淮搴﹂攢鍞寚鏍囪秼鍔�', left: 'center' },
tooltip: { trigger: 'axis' },
- legend: { data: ['璁㈠崟鏁�', '閿�鍞'], top: 30 },
+ legend: { data: ['璁㈠崟鏁�', '閿�鍞', '浜у搧閿�鍞暟閲�'], top: 30 },
grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
xAxis: { type: 'category', data: [] },
yAxis: [
@@ -355,7 +381,8 @@
],
series: [
{ name: '璁㈠崟鏁�', type: 'line', yAxisIndex: 1, data: [], itemStyle: { color: '#409eff' } },
- { name: '閿�鍞', type: 'bar', yAxisIndex: 0, data: [], itemStyle: { color: '#67c23a' } }
+ { name: '閿�鍞', type: 'bar', yAxisIndex: 0, data: [], itemStyle: { color: '#67c23a' } },
+ { name: '浜у搧閿�鍞暟閲�', type: 'line', yAxisIndex: 1, data: [], itemStyle: { color: '#f56c6c' } }
]
}
indicatorChart.setOption(option)
@@ -523,6 +550,17 @@
background: #e6a23c;
}
}
+
+ &.stat-card-purple {
+ .stat-icon {
+ background: linear-gradient(135deg, #9b59b6 0%, #b37fcc 100%);
+ color: #fff;
+ }
+
+ .stat-bg-decoration {
+ background: #9b59b6;
+ }
+ }
}
.chart-card,
--
Gitblit v1.9.3