<template>
|
<div>
|
<!-- 顶部统计卡片 -->
|
<div class="stats-cards">
|
<div class="stat-card">
|
<img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
|
<div class="card-content">
|
<span class="card-label">销售产品数</span>
|
<span class="card-value">{{ totalStaff }}</span>
|
<div class="card-compare" :class="compareClass(staffYoY)">
|
<span>同比</span>
|
<span class="compare-value">{{ formatPercent(staffYoY) }}</span>
|
<span class="compare-icon">{{ staffYoY >= 0 ? '↑' : '↓' }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="stat-card">
|
<img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
|
<div class="card-content">
|
<span class="card-label">采购产品数</span>
|
<span class="card-value">{{ totalCustomers }}</span>
|
<div class="card-compare" :class="compareClass(customersYoY)">
|
<span>同比</span>
|
<span class="compare-value">{{ formatPercent(customersYoY) }}</span>
|
<span class="compare-icon">{{ customersYoY >= 0 ? '↑' : '↓' }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="stat-card">
|
<img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
|
<div class="card-content">
|
<span class="card-label">库存数</span>
|
<span class="card-value">{{ totalSuppliers }}</span>
|
<div class="card-compare" :class="compareClass(suppliersYoY)">
|
<span>同比</span>
|
<span class="compare-value">{{ formatPercent(suppliersYoY) }}</span>
|
<span class="compare-icon">{{ suppliersYoY >= 0 ? '↑' : '↓' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { summaryStatistics } from '@/api/viewIndex.js'
|
|
// 统计数据
|
const totalStaff = ref(0)
|
const totalCustomers = ref(0)
|
const totalSuppliers = ref(0)
|
// 同比
|
const staffYoY = ref(0)
|
const customersYoY = ref(0)
|
const suppliersYoY = ref(0)
|
|
const formatPercent = (val) => {
|
const num = Number(val) || 0
|
return `${Math.abs(num).toFixed(2)}%`
|
}
|
|
const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
|
|
// 获取员工、客户、供应商数量
|
const getNum = () => {
|
summaryStatistics().then((res) => {
|
totalStaff.value = res.data.totalStaff
|
staffYoY.value = res.data.staffGrowthRate
|
totalCustomers.value = res.data.totalCustomer
|
customersYoY.value = res.data.customerGrowthRate
|
totalSuppliers.value = res.data.totalSupplier
|
suppliersYoY.value = res.data.supplierGrowthRate
|
}).catch(err => {
|
console.error('获取基础统计数据失败:', err)
|
})
|
}
|
|
onMounted(() => {
|
getNum()
|
})
|
</script>
|
|
<style scoped>
|
.stats-cards {
|
display: flex;
|
gap: 30px;
|
}
|
|
.stat-card {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
background-image: url('@/assets/BI/border@2x.png');
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
height: 142px;
|
}
|
|
.card-icon {
|
width: 100px;
|
height: 100px;
|
margin: 20px 20px 0 10px;
|
}
|
|
.card-content {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.card-value {
|
font-weight: 500;
|
font-size: 40px;
|
background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
background-clip: text;
|
}
|
|
.card-label {
|
font-weight: 400;
|
font-size: 19px;
|
color: rgba(208, 231, 255, 0.7);
|
}
|
|
.card-compare {
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
font-size: 15px;
|
color: #d0e7ff;
|
}
|
|
.card-compare > span:first-child {
|
font-size: 13px;
|
opacity: 0.8;
|
}
|
|
.compare-value {
|
font-weight: 600;
|
}
|
|
.compare-icon {
|
font-size: 14px;
|
position: relative;
|
top: -1px; /* 轻微上移，让箭头与文字垂直居中对齐 */
|
}
|
|
.compare-up .compare-value,
|
.compare-up .compare-icon {
|
color: #00c853;
|
}
|
|
.compare-down .compare-value,
|
.compare-down .compare-icon {
|
color: #ff5252;
|
}
|
|
</style>
|
