119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<template>
|
|
<div class="metrics-card">
|
|
<div class="metrics-grid">
|
|
<!-- 总客户数 -->
|
|
<div class="metric-item">
|
|
<div class="metric-value">{{ totalCustomers }}</div>
|
|
<div class="metric-label">总客户数</div>
|
|
<div class="metric-trend" :class="customerTrendClass">
|
|
<el-icon :size="14"><ArrowUp /></el-icon> {{ customerTrend }}%
|
|
</div>
|
|
</div>
|
|
<!-- 总订单数 -->
|
|
<div class="metric-item">
|
|
<div class="metric-value">{{ totalOrders }}</div>
|
|
<div class="metric-label">总订单数</div>
|
|
<div class="metric-trend" :class="orderTrendClass">
|
|
<el-icon :size="14"><ArrowUp /></el-icon> {{ orderTrend }}%
|
|
</div>
|
|
</div>
|
|
<!-- 总销售额 -->
|
|
<div class="metric-item">
|
|
<div class="metric-value">¥{{ totalSales.toFixed(2) }}</div>
|
|
<div class="metric-label">总销售额</div>
|
|
<div class="metric-trend" :class="salesTrendClass">
|
|
<el-icon :size="14"><ArrowUp /></el-icon> {{ salesTrend }}%
|
|
</div>
|
|
</div>
|
|
<!-- 退换货率 -->
|
|
<div class="metric-item">
|
|
<div class="metric-value">{{ returnRate.toFixed(2) }}%</div>
|
|
<div class="metric-label">退换货率</div>
|
|
<div class="metric-trend" :class="returnRateTrendClass">
|
|
<el-icon :size="14"><ArrowDown /></el-icon> {{ returnRateTrend }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
|
|
|
|
const props = defineProps({
|
|
customers: { type: Array, default: () => [] },
|
|
orders: { type: Array, default: () => [] },
|
|
returnExchanges: { type: Array, default: () => [] },
|
|
// 趋势数据（模拟，可从接口扩展）
|
|
customerTrend: { type: Number, default: 5.2 },
|
|
orderTrend: { type: Number, default: 8.7 },
|
|
salesTrend: { type: Number, default: 12.3 },
|
|
returnRateTrend: { type: Number, default: -2.1 }
|
|
});
|
|
|
|
// 计算核心指标
|
|
const totalCustomers = computed(() => props.customers.length);
|
|
const totalOrders = computed(() => props.orders.length);
|
|
const totalSales = computed(() => {
|
|
return props.orders.reduce((sum, order) => sum + Number(order.taxAmount || 0), 0);
|
|
});
|
|
const returnRate = computed(() => {
|
|
if (totalOrders.value === 0) return 0;
|
|
return (props.returnExchanges.length / totalOrders.value) * 100;
|
|
});
|
|
|
|
// 趋势样式（升序绿色，降序红色）
|
|
const customerTrendClass = computed(() => props.customerTrend > 0 ? 'up-trend' : 'down-trend');
|
|
const orderTrendClass = computed(() => props.orderTrend > 0 ? 'up-trend' : 'down-trend');
|
|
const salesTrendClass = computed(() => props.salesTrend > 0 ? 'up-trend' : 'down-trend');
|
|
const returnRateTrendClass = computed(() => props.returnRateTrend > 0 ? 'up-trend' : 'down-trend');
|
|
</script>
|
|
|
|
<style scoped>
|
|
.metrics-card {
|
|
background: rgba(15, 23, 42, 0.8);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.metric-item {
|
|
text-align: center;
|
|
padding: 12px;
|
|
background: rgba(30, 41, 59, 0.5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #f8fafc;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 14px;
|
|
color: #94a3b8;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.metric-trend {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.up-trend {
|
|
color: #10b981; /* 绿色：上升趋势 */
|
|
}
|
|
|
|
.down-trend {
|
|
color: #ef4444; /* 红色：下降趋势 */
|
|
}
|
|
</style> |