31 lines
1.3 KiB
Vue
31 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { useInventory } from '@/modules/inventory/composables/useInventory'
|
||
|
|
const { state, formatCurrency } = useInventory()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<el-row :gutter="16">
|
||
|
|
<el-col :span="8" v-for="card in [
|
||
|
|
{ icon: '📦', value: state.dashboard?.product_count || 0, label: '成品数量' },
|
||
|
|
{ icon: '📊', value: state.dashboard?.total_stock || 0, label: '物料库存总量' },
|
||
|
|
{ icon: '💰', value: formatCurrency(state.dashboard?.total_value || 0), label: '库存价值' },
|
||
|
|
{ icon: '🏭', value: state.dashboard?.supplier_count || 0, label: '供应商' },
|
||
|
|
{ icon: '👥', value: state.dashboard?.customer_count || 0, label: '客户' },
|
||
|
|
{ icon: '🏪', value: state.dashboard?.warehouse_count || 0, label: '仓库' }
|
||
|
|
]" :key="card.label" style="margin-bottom: 16px">
|
||
|
|
<el-card shadow="hover">
|
||
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
||
|
|
<span style="font-size: 32px;">{{ card.icon }}</span>
|
||
|
|
<div>
|
||
|
|
<div style="font-size: 24px; font-weight: 700;">{{ card.value }}</div>
|
||
|
|
<div style="color: var(--text-tertiary); font-size: 13px;">{{ card.label }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
</style>
|