<template>
|
<div>
|
<!-- 顶部统计卡片 -->
|
<div class="stats-cards">
|
<div
|
v-for="(item, index) in statItems"
|
:key="item.name"
|
class="stat-card"
|
>
|
<div class="card-icon" :style="{ color: iconColors[index % iconColors.length] }">
|
<!-- 销售 -->
|
<svg v-if="index % 3 === 0" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
<path d="M3 17l6-6 4 4 8-8" />
|
<path d="M15 7h6v6" />
|
</svg>
|
<!-- 采购 -->
|
<svg v-else-if="index % 3 === 1" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
<path d="M21 8l-9-5-9 5 9 5 9-5z" />
|
<path d="M3 8v8l9 5 9-5V8" />
|
</svg>
|
<!-- 库存 -->
|
<svg v-else width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
<rect x="3" y="4" width="18" height="16" rx="2" />
|
<path d="M3 10h18M12 4v16" />
|
</svg>
|
</div>
|
<div class="card-content">
|
<span class="card-label">{{ item.name }}</span>
|
<span class="card-value">{{ item.value }}</span>
|
<div class="card-compare" :class="compareClass(Number(item.rate))">
|
<span>同比</span>
|
<span class="compare-value">{{ formatPercent(item.rate) }}</span>
|
<span class="compare-icon">{{ Number(item.rate) >= 0 ? '↑' : '↓' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js'
|
import { BI } from '../theme.js'
|
|
const statItems = ref([])
|
const iconColors = [BI.accentBright, '#35C6D6', '#8E7CE6']
|
|
const formatPercent = (val) => {
|
const num = Number(val) || 0
|
return `${num.toFixed(2)}%`
|
}
|
|
const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
|
|
const fetchData = () => {
|
salesPurchaseStorageProductCount()
|
.then((res) => {
|
if (res.code === 200 && Array.isArray(res.data)) {
|
statItems.value = res.data.map((item) => ({
|
name: item.name,
|
value: item.value,
|
rate: item.rate,
|
}))
|
}
|
})
|
.catch((err) => {
|
console.error('获取销售/采购/储存产品数失败:', err)
|
})
|
}
|
|
onMounted(() => {
|
fetchData()
|
})
|
</script>
|
|
<style scoped>
|
.stats-cards {
|
display: flex;
|
gap: 30px;
|
}
|
|
.stat-card {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
background: var(--bi-panel-bg);
|
border: 1px solid var(--bi-panel-border);
|
border-radius: 8px;
|
position: relative;
|
overflow: hidden;
|
height: 142px;
|
}
|
|
/* 顶部品牌蓝亮线，替代图片描边 */
|
.stat-card::before {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 2px;
|
background: linear-gradient(90deg, var(--bi-accent) 0%, transparent 70%);
|
}
|
|
.card-icon {
|
width: 52px;
|
height: 52px;
|
margin: 0 16px 0 20px;
|
border-radius: 8px;
|
background: rgba(74, 108, 240, 0.12);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
|
.card-content {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
min-width: 0;
|
}
|
|
.card-value {
|
font-weight: 600;
|
font-size: 36px;
|
color: var(--bi-text-strong);
|
font-variant-numeric: tabular-nums;
|
line-height: 1.1;
|
}
|
|
.card-label {
|
font-weight: 400;
|
font-size: 16px;
|
color: var(--bi-text);
|
}
|
|
.card-compare {
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
font-size: 15px;
|
color: #d0e7ff;
|
}
|
|
.card-compare > span:first-child {
|
font-size: 13px;
|
color: var(--bi-text);
|
}
|
|
.compare-value {
|
font-weight: 600;
|
font-variant-numeric: tabular-nums;
|
}
|
|
.compare-icon {
|
font-size: 14px;
|
position: relative;
|
top: -1px; /* 轻微上移，让箭头与文字垂直居中对齐 */
|
}
|
|
.compare-up .compare-value,
|
.compare-up .compare-icon {
|
color: var(--bi-up, #34c77b);
|
}
|
|
.compare-down .compare-value,
|
.compare-down .compare-icon {
|
color: var(--bi-down, #ff6b6b);
|
}
|
|
</style>
|
