From 0a251e40e30e7c8a96d71b3b9b6c459d4dfa4b22 Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期三, 08 七月 2026 23:04:45 +0800
Subject: [PATCH] 暂存
---
src/views/salesManagement/indicatorStats/index.vue | 125 ++++++++++++++++++++++-------------------
1 files changed, 68 insertions(+), 57 deletions(-)
diff --git a/src/views/salesManagement/indicatorStats/index.vue b/src/views/salesManagement/indicatorStats/index.vue
index 8cbeb24..7e5e5ba 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">
@@ -38,7 +52,7 @@
</div>
</div>
<div class="stat-content">
- <div class="stat-value">{{ indicatorKpis.shipRate }}%</div>
+ <div class="stat-value">{{ indicatorKpis.shipRate }}</div>
<div class="stat-label">鍙戣揣鐜�</div>
</div>
<div class="stat-bg-decoration"></div>
@@ -98,11 +112,11 @@
<label class="filter-label">鏃ユ湡鑼冨洿</label>
<el-date-picker
v-model="indicatorFilter.dateRange"
- type="daterange"
+ type="monthrange"
range-separator="鑷�"
start-placeholder="寮�濮嬫棩鏈�"
end-placeholder="缁撴潫鏃ユ湡"
- value-format="YYYY-MM-DD"
+ value-format="YYYY-MM"
style="width: 100%"
/>
</div>
@@ -127,47 +141,12 @@
<div ref="indicatorChartRef" class="chart-wrapper"></div>
</div>
</el-card>
-
- <!-- 涓氱哗缁熻锛堝洟闃熺淮搴︼紝鏃犱釜浜哄鍚嶏級 -->
- <el-card v-if="showTeamPerformance" class="table-card" shadow="hover">
- <template #header>
- <div class="card-header">
- <span class="card-title">鍥㈤槦涓氱哗缁熻</span>
- </div>
- </template>
- <el-table
- :data="teamPerformanceList"
- border
- stripe
- style="width: 100%"
- :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
- >
- <el-table-column prop="team" label="閿�鍞洟闃�" min-width="120"/>
- <el-table-column prop="orderCount" label="璁㈠崟鏁�" align="right" min-width="100"/>
- <el-table-column prop="salesAmount" label="閿�鍞" align="right" min-width="140">
- <template #default="scope">楼{{ scope.row.salesAmount.toLocaleString() }}</template>
- </el-table-column>
- <el-table-column prop="shipRate" label="鍙戣揣鐜�" align="right" min-width="100">
- <template #default="scope">{{ scope.row.shipRate }}%</template>
- </el-table-column>
- <el-table-column prop="attainment" label="鐩爣杈炬垚鐜�" align="center" min-width="120">
- <template #default="scope">
- <el-tag
- :type="scope.row.attainment >= 100 ? 'success' : scope.row.attainment >= 80 ? 'warning' : 'danger'"
- effect="dark"
- >
- {{ scope.row.attainment }}%
- </el-tag>
- </template>
- </el-table-column>
- </el-table>
- </el-card>
</div>
</template>
<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'
@@ -177,6 +156,7 @@
const indicatorKpis = reactive({
orderCount: 0,
salesAmount: 0,
+ productSalesQuantity: 0,
shipRate: 0
})
@@ -196,13 +176,11 @@
const productOptions = ref([])
const customerOption = ref([])
-const teamPerformanceList = ref([
- { team: '鍗庝笢澶у尯', orderCount: 320, salesAmount: 2850000, shipRate: 90, attainment: 105 },
- { team: '鍗庡寳澶у尯', orderCount: 280, salesAmount: 2150000, shipRate: 86, attainment: 92 },
- { team: '鍗庡崡澶у尯', orderCount: 210, salesAmount: 1850000, shipRate: 88, attainment: 78 },
- { team: '瑗垮崡澶у尯', orderCount: 180, salesAmount: 1500000, shipRate: 83, attainment: 74 }
-])
-
+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) => {
@@ -276,8 +254,8 @@
if (res && res.data) {
indicatorKpis.orderCount = res.data.total || 0
indicatorKpis.salesAmount = res.data.contractAmountTotal || 0
- // 鍙戣揣鐜囧鏋滄帴鍙ｆ病鏈夎繑鍥烇紝淇濇寔鍘熷�兼垨璁句负0
- // indicatorKpis.shipRate = res.data.shipRate || 0
+ indicatorKpis.productSalesQuantity = res.data.productQuantityTotal || 0
+ indicatorKpis.shipRate = res.data.shipRate || 0
}
} catch (error) {
console.error('鑾峰彇澶撮儴缁熻澶辫触:', error)
@@ -324,12 +302,19 @@
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,
+ selected: {
+ '璁㈠崟鏁�': false,
+ '閿�鍞': true,
+ '浜у搧閿�鍞暟閲�': true
+ }
+ },
grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
@@ -364,6 +349,13 @@
yAxisIndex: 0,
data: chartData.salesAmountList || [],
itemStyle: { color: '#67c23a' }
+ },
+ {
+ name: '浜у搧閿�鍞暟閲�',
+ type: 'line',
+ yAxisIndex: 1,
+ data: chartData.productQuantityList || [],
+ itemStyle: { color: '#f56c6c' }
}
]
}
@@ -377,7 +369,15 @@
const option = {
title: { text: '澶氱淮搴﹂攢鍞寚鏍囪秼鍔�', left: 'center' },
tooltip: { trigger: 'axis' },
- legend: { data: ['璁㈠崟鏁�', '閿�鍞'], top: 30 },
+ legend: {
+ data: ['璁㈠崟鏁�', '閿�鍞', '浜у搧閿�鍞暟閲�'],
+ top: 30,
+ selected: {
+ '璁㈠崟鏁�': false,
+ '閿�鍞': true,
+ '浜у搧閿�鍞暟閲�': true
+ }
+ },
grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
xAxis: { type: 'category', data: [] },
yAxis: [
@@ -397,7 +397,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)
@@ -448,7 +449,6 @@
<style scoped lang="scss">
.indicator-stats {
padding: 20px;
- background: #f5f7fa;
min-height: calc(100vh - 84px);
}
@@ -566,6 +566,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