Skip to content

W
warehousing-admin
Commit be959d49 by 杨子
Options

feat(首页统计): 重构统计卡片并新增多种统计图表 

重构统计卡片为动态渲染模式，新增供应商入库量排名、客户出库量排名、库存周转统计等7种图表
添加统计模块说明文档，详细描述现有统计内容和可扩展建议
parent 20ecc0a1
Showing with 732 additions and 163 deletions
src/views/index.vue
...@@ -2,113 +2,15 @@ ...@@ -2,113 +2,15 @@
<div class="app-container"> <div class="app-container">
<!-- 统计概览卡片 --> <!-- 统计概览卡片 -->
<div class="stats-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="stats-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<el-card shadow="hover" class="stat-card"> <el-card v-for="(item, index) in statCards" :key="index" shadow="hover" class="stat-card">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<p class="text-gray-500 text-sm">总库存</p> <p class="text-gray-500 text-sm">{{ item.label }}</p>
<el-statistic :value="statistics.totalInventory" :precision="0" suffix="件" class="text-2xl font-bold" /> <el-statistic :value="statistics[item.valueKey]" :precision="0" :suffix="item.suffix" class="text-2xl font-bold" />
</div> </div>
<div class="stat-icon bg-blue-100 text-blue-600 p-3 rounded-full"> <div :class="`stat-icon ${item.color} p-3 rounded-full w-14 h-14 flex items-center justify-center`">
<el-icon :size="32"> <el-icon :size="32">
<Goods /> <component :is="item.icon" />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="stat-card">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">待处理任务</p>
<el-statistic :value="statistics.pendingTasks" :precision="0" suffix="个" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-red-100 text-red-600 p-3 rounded-full">
<el-icon :size="32">
<Clock />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="stat-card">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">今日入库</p>
<el-statistic :value="statistics.todayInbound" :precision="0" suffix="件" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-green-100 text-green-600 p-3 rounded-full">
<el-icon :size="32">
<Plus />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="stat-card">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">今日出库</p>
<el-statistic :value="statistics.todayOutbound" :precision="0" suffix="件" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-purple-100 text-purple-600 p-3 rounded-full">
<el-icon :size="32">
<Minus />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="stat-card">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">物资总数</p>
<el-statistic :value="statistics.totalMaterials" :precision="0" suffix="种" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-cyan-100 text-cyan-600 p-3 rounded-full">
<el-icon :size="32">
<List />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="stat-card">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">仓库总数</p>
<el-statistic :value="statistics.totalWarehouses" :precision="0" suffix="个" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-orange-100 text-orange-600 p-3 rounded-full">
<el-icon :size="32">
<Box />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="stat-card">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">供应商总数</p>
<el-statistic :value="statistics.totalSuppliers" :precision="0" suffix="家" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-teal-100 text-teal-600 p-3 rounded-full">
<el-icon :size="32">
<UserFilled />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="stat-card">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">客户总数</p>
<el-statistic :value="statistics.totalCustomers" :precision="0" suffix="家" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-pink-100 text-pink-600 p-3 rounded-full">
<el-icon :size="32">
<UserFilled />
</el-icon> </el-icon>
</div> </div>
</div> </div>
...@@ -129,16 +31,42 @@ ...@@ -129,16 +31,42 @@
<h3 class="chart-title mb-2">库存分类分布</h3> <h3 class="chart-title mb-2">库存分类分布</h3>
<div id="inventoryCategoryChart" ref="inventoryCategoryChart" class="chart" style="height: 350px;"></div> <div id="inventoryCategoryChart" ref="inventoryCategoryChart" class="chart" style="height: 350px;"></div>
</div> </div>
<!-- 仓库库存占比 --> <!-- 供应商入库量排名 -->
<div class="chart-container">
<h3 class="chart-title mb-2">供应商入库量排名</h3>
<div id="supplierRankChart" ref="supplierRankChart" class="chart" style="height: 350px;"></div>
</div>
<!-- 客户出库量排名 -->
<div class="chart-container"> <div class="chart-container">
<h3 class="chart-title mb-2">仓库库存占比</h3> <h3 class="chart-title mb-2">客户出库量排名</h3>
<div id="warehouseInventoryChart" ref="warehouseInventoryChart" class="chart" style="height: 350px;"></div> <div id="customerRankChart" ref="customerRankChart" class="chart" style="height: 350px;"></div>
</div> </div>
<!-- 库存趋势 --> <!-- 库存周转统计 -->
<div class="chart-container lg:col-span-2"> <div class="chart-container">
<h3 class="chart-title mb-2">近30天库存趋势</h3> <h3 class="chart-title mb-2">库存周转统计</h3>
<div id="inventoryTurnoverChart" ref="inventoryTurnoverChart" class="chart" style="height: 350px;"></div>
</div>
<!-- 入库/出库统计 -->
<div class="chart-container">
<h3 class="chart-title mb-2">入库/出库统计</h3>
<div id="inboundOutboundChart" ref="inboundOutboundChart" class="chart" style="height: 350px;"></div>
</div>
<!-- 近7天库存趋势 -->
<div class="chart-container">
<h3 class="chart-title mb-2">近7天库存趋势</h3>
<div id="inventoryTrendChart" ref="inventoryTrendChart" class="chart" style="height: 350px;"></div> <div id="inventoryTrendChart" ref="inventoryTrendChart" class="chart" style="height: 350px;"></div>
</div> </div>
<!-- 盘点任务统计 -->
<div class="chart-container">
<h3 class="chart-title mb-2">盘点任务统计</h3>
<div id="inventoryCheckChart" ref="inventoryCheckChart" class="chart" style="height: 350px;"></div>
</div>
<!-- 预警处理统计 -->
<div class="chart-container">
<h3 class="chart-title mb-2">预警处理统计</h3>
<div id="alertProcessingChart" ref="alertProcessingChart" class="chart" style="height: 350px;"></div>
</div>
</div> </div>
</el-card> </el-card>
</div> </div>
...@@ -338,10 +266,28 @@ const statistics = ref({ ...@@ -338,10 +266,28 @@ const statistics = ref({
totalCustomers: 234 totalCustomers: 234
}) })
// 统计卡片数据
const statCards = ref([
{ label: '总库存', valueKey: 'totalInventory', suffix: '件', color: 'bg-blue-100 text-blue-600', icon: Goods },
{ label: '待处理任务', valueKey: 'pendingTasks', suffix: '个', color: 'bg-red-100 text-red-600', icon: Clock },
{ label: '今日入库', valueKey: 'todayInbound', suffix: '件', color: 'bg-green-100 text-green-600', icon: Plus },
{ label: '今日出库', valueKey: 'todayOutbound', suffix: '件', color: 'bg-purple-100 text-purple-600', icon: Minus },
{ label: '物资总数', valueKey: 'totalMaterials', suffix: '种', color: 'bg-cyan-100 text-cyan-600', icon: List },
{ label: '仓库总数', valueKey: 'totalWarehouses', suffix: '个', color: 'bg-orange-100 text-orange-600', icon: Box },
{ label: '供应商总数', valueKey: 'totalSuppliers', suffix: '家', color: 'bg-teal-100 text-teal-600', icon: UserFilled },
{ label: '客户总数', valueKey: 'totalCustomers', suffix: '家', color: 'bg-pink-100 text-pink-600', icon: UserFilled }
])
// 图表引用 // 图表引用
const inventoryCategoryChart = ref(null) const inventoryCategoryChart = ref(null)
const warehouseInventoryChart = ref(null)
const inventoryTrendChart = ref(null) const inventoryTrendChart = ref(null)
const supplierRankChart = ref(null)
const customerRankChart = ref(null)
const inventoryTurnoverChart = ref(null)
const inboundOutboundChart = ref(null)
const inventoryCheckChart = ref(null)
const alertProcessingChart = ref(null)
const customerSalesChart = ref(null)
// 模拟图表数据 // 模拟图表数据
const categoryData = [ const categoryData = [
...@@ -352,12 +298,7 @@ const categoryData = [ ...@@ -352,12 +298,7 @@ const categoryData = [
{ name: '工具设备', value: 1430 } { name: '工具设备', value: 1430 }
] ]
const warehouseData = [
{ name: '主仓库', value: 5230 },
{ name: '分仓库A', value: 3120 },
{ name: '分仓库B', value: 2890 },
{ name: '临时仓库', value: 1328 }
]
const trendData = { const trendData = {
dates: [], dates: [],
...@@ -366,8 +307,8 @@ const trendData = { ...@@ -366,8 +307,8 @@ const trendData = {
inventory: [] inventory: []
} }
// 生成30天的日期和数据 // 生成7天的日期和数据
for (let i = 29; i >= 0; i--) { for (let i = 6; i >= 0; i--) {
const date = new Date() const date = new Date()
date.setDate(date.getDate() - i) date.setDate(date.getDate() - i)
const dateStr = `${date.getMonth() + 1}/${date.getDate()}` const dateStr = `${date.getMonth() + 1}/${date.getDate()}`
...@@ -381,14 +322,95 @@ for (let i = 29; i >= 0; i--) { ...@@ -381,14 +322,95 @@ for (let i = 29; i >= 0; i--) {
trendData.outbound.push(outbound) trendData.outbound.push(outbound)
// 计算库存趋势 // 计算库存趋势
if (i === 29) { if (i === 6) {
trendData.inventory.push(statistics.value.totalInventory - (inbound - outbound) * 29) trendData.inventory.push(statistics.value.totalInventory - (inbound - outbound) * 6)
} else { } else {
const prevInventory = trendData.inventory[trendData.inventory.length - 1] const prevInventory = trendData.inventory[trendData.inventory.length - 1]
trendData.inventory.push(prevInventory + inbound - outbound) trendData.inventory.push(prevInventory + inbound - outbound)
} }
} }
// 供应商排名数据
const supplierRankData = [
{ name: '供应商A', value: 2850 },
{ name: '供应商B', value: 2340 },
{ name: '供应商C', value: 1980 },
{ name: '供应商D', value: 1650 },
{ name: '供应商E', value: 1430 },
{ name: '供应商F', value: 1200 },
{ name: '供应商G', value: 980 },
{ name: '供应商H', value: 850 }
]
// 客户排名数据
const customerRankData = [
{ name: '客户A', value: 3200 },
{ name: '客户B', value: 2800 },
{ name: '客户C', value: 2300 },
{ name: '客户D', value: 1900 },
{ name: '客户E', value: 1600 },
{ name: '客户F', value: 1300 },
{ name: '客户G', value: 1100 },
{ name: '客户H', value: 900 }
]
// 库存周转数据
const inventoryTurnoverData = [
{ name: '电子元件', turnoverRate: 5.2, turnoverDays: 70.2 },
{ name: '包装材料', turnoverRate: 8.5, turnoverDays: 42.9 },
{ name: '原材料', turnoverRate: 4.8, turnoverDays: 76.0 },
{ name: '成品', turnoverRate: 3.6, turnoverDays: 101.4 },
{ name: '工具设备', turnoverRate: 2.1, turnoverDays: 173.8 }
]
// 入库/出库统计数据（按月）
const inboundOutboundData = {
months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
inbound: [1200, 1500, 1300, 1800, 2000, 1700, 1900, 2200, 2100, 2500, 2300, 2800],
outbound: [1000, 1300, 1200, 1600, 1800, 1500, 1700, 2000, 1900, 2300, 2100, 2600]
}
// 盘点任务统计数据
const inventoryCheckData = {
// 盘点完成率和差异率
completionRate: 85,
differenceRate: 0.5,
// 按仓库的盘点任务分布
warehouseDistribution: [
{ name: '主仓库', value: 12 },
{ name: '分仓库A', value: 8 },
{ name: '分仓库B', value: 6 },
{ name: '临时仓库', value: 4 }
]
}
// 预警处理统计数据
const alertProcessingData = {
// 预警处理率
processingRate: 92,
// 预警平均处理时长（小时）
avgProcessingTime: 2.5,
// 预警类型分布
typeDistribution: [
{ name: '库存不足', value: 45 },
{ name: '库存超量', value: 25 },
{ name: '即将过期', value: 20 },
{ name: '其他', value: 10 }
]
}
// 客户销售额排名数据
const customerSalesData = [
{ name: '客户A', value: 52000 },
{ name: '客户B', value: 48000 },
{ name: '客户C', value: 35000 },
{ name: '客户D', value: 29000 },
{ name: '客户E', value: 24000 },
{ name: '客户F', value: 18000 },
{ name: '客户G', value: 15000 },
{ name: '客户H', value: 12000 }
]
// 初始化库存分类分布图表 // 初始化库存分类分布图表
const initInventoryCategoryChart = () => { const initInventoryCategoryChart = () => {
if (inventoryCategoryChart.value) { if (inventoryCategoryChart.value) {
...@@ -441,48 +463,6 @@ const initInventoryCategoryChart = () => { ...@@ -441,48 +463,6 @@ const initInventoryCategoryChart = () => {
} }
} }
// 初始化仓库库存占比图表
const initWarehouseInventoryChart = () => {
if (warehouseInventoryChart.value) {
const chart = echarts.init(warehouseInventoryChart.value)
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '仓库库存',
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: warehouseData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
formatter: '{b}\n{c}件\n({d}%)'
}
}
]
}
chart.setOption(option)
// 监听窗口大小变化，自动调整图表
window.addEventListener('resize', () => {
chart.resize()
})
}
}
// 初始化库存趋势图表 // 初始化库存趋势图表
const initInventoryTrendChart = () => { const initInventoryTrendChart = () => {
if (inventoryTrendChart.value) { if (inventoryTrendChart.value) {
...@@ -705,11 +685,404 @@ const getActivityIconClass = (type) => { ...@@ -705,11 +685,404 @@ const getActivityIconClass = (type) => {
} }
} }
// 初始化供应商入库量排名图表
const initSupplierRankChart = () => {
if (supplierRankChart.value) {
const chart = echarts.init(supplierRankChart.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
name: '入库量(件)'
},
yAxis: {
type: 'category',
data: supplierRankData.map(item => item.name),
inverse: true
},
series: [
{
name: '入库量',
type: 'bar',
data: supplierRankData.map(item => item.value),
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
}
}
]
}
chart.setOption(option)
window.addEventListener('resize', () => {
chart.resize()
})
}
}
// 初始化客户出库量排名图表
const initCustomerRankChart = () => {
if (customerRankChart.value) {
const chart = echarts.init(customerRankChart.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
name: '出库量(件)'
},
yAxis: {
type: 'category',
data: customerRankData.map(item => item.name),
inverse: true
},
series: [
{
name: '出库量',
type: 'bar',
data: customerRankData.map(item => item.value),
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#f68383' },
{ offset: 0.5, color: '#f01818' },
{ offset: 1, color: '#f01818' }
])
}
}
]
}
chart.setOption(option)
window.addEventListener('resize', () => {
chart.resize()
})
}
}
// 初始化库存周转统计图表
const initInventoryTurnoverChart = () => {
if (inventoryTurnoverChart.value) {
const chart = echarts.init(inventoryTurnoverChart.value)
const option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['周转率', '周转天数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: inventoryTurnoverData.map(item => item.name)
},
yAxis: [
{
type: 'value',
name: '周转率(次/年)',
position: 'left',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '周转天数(天)',
position: 'right',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '周转率',
type: 'bar',
data: inventoryTurnoverData.map(item => item.turnoverRate),
itemStyle: {
color: '#52c41a'
},
barMaxWidth: 30
},
{
name: '周转天数',
type: 'line',
yAxisIndex: 1,
data: inventoryTurnoverData.map(item => item.turnoverDays),
smooth: true,
itemStyle: {
color: '#1890ff'
}
}
]
}
chart.setOption(option)
window.addEventListener('resize', () => {
chart.resize()
})
}
}
// 初始化入库/出库统计图表
const initInboundOutboundChart = () => {
if (inboundOutboundChart.value) {
const chart = echarts.init(inboundOutboundChart.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['入库', '出库']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: inboundOutboundData.months
},
yAxis: {
type: 'value',
name: '数量(件)'
},
series: [
{
name: '入库',
type: 'line',
stack: 'Total',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(82, 196, 26, 0.5)' },
{ offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
])
},
emphasis: {
focus: 'series'
},
data: inboundOutboundData.inbound,
itemStyle: {
color: '#52c41a'
}
},
{
name: '出库',
type: 'line',
stack: 'Total',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 77, 79, 0.5)' },
{ offset: 1, color: 'rgba(255, 77, 79, 0.1)' }
])
},
emphasis: {
focus: 'series'
},
data: inboundOutboundData.outbound,
itemStyle: {
color: '#ff4d4f'
}
}
]
}
chart.setOption(option)
window.addEventListener('resize', () => {
chart.resize()
})
}
}
// 初始化盘点任务统计图表
const initInventoryCheckChart = () => {
if (inventoryCheckChart.value) {
const chart = echarts.init(inventoryCheckChart.value)
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '盘点任务分布',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold',
formatter: '{b}\n{c}项任务'
}
},
labelLine: {
show: false
},
data: inventoryCheckData.warehouseDistribution
}
]
}
chart.setOption(option)
window.addEventListener('resize', () => {
chart.resize()
})
}
}
// 初始化预警处理统计图表
const initAlertProcessingChart = () => {
if (alertProcessingChart.value) {
const chart = echarts.init(alertProcessingChart.value)
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '预警类型分布',
type: 'pie',
radius: '50%',
data: alertProcessingData.typeDistribution,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
formatter: '{b}\n{c}%'
}
}
]
}
chart.setOption(option)
window.addEventListener('resize', () => {
chart.resize()
})
}
}
// 初始化客户销售额排名图表
const initCustomerSalesChart = () => {
if (customerSalesChart.value) {
const chart = echarts.init(customerSalesChart.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: '{b}<br/>销售额: {c}元'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
name: '销售额(元)'
},
yAxis: {
type: 'category',
data: customerSalesData.map(item => item.name),
inverse: true
},
series: [
{
name: '销售额',
type: 'bar',
data: customerSalesData.map(item => item.value),
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#faad14' },
{ offset: 0.5, color: '#fa8c16' },
{ offset: 1, color: '#fa541c' }
])
}
}
]
}
chart.setOption(option)
window.addEventListener('resize', () => {
chart.resize()
})
}
}
// 组件挂载后初始化图表 // 组件挂载后初始化图表
onMounted(() => { onMounted(() => {
initInventoryCategoryChart() initInventoryCategoryChart()
initWarehouseInventoryChart()
initInventoryTrendChart() initInventoryTrendChart()
initSupplierRankChart()
initCustomerRankChart()
initInventoryTurnoverChart()
initInboundOutboundChart()
initInventoryCheckChart()
initAlertProcessingChart()
initCustomerSalesChart()
}) })
</script> </script>
......
src/views/index_statistics_doc.md 0 → 100644
# 仓库管理系统首页统计模块说明
## 1. 概述
首页统计模块是仓库管理系统的核心组成部分，旨在为用户提供全面、直观的系统运行状态和业务数据概览。通过合理的统计展示，用户可以快速了解仓库的运营情况，及时发现问题并做出决策。
## 2. 现有统计内容
### 2.1 统计概览卡片
| 统计项 | 说明 | 数据来源 | 更新频率 |
|-------|------|---------|---------|
| 总库存 | 系统中所有物资的总数量 | 库存管理模块 | 实时 |
| 待处理任务 | 系统中等待处理的任务数量 | 任务管理模块 | 实时 |
| 今日入库 | 当天的入库总数量 | 入库管理模块 | 实时 |
| 今日出库 | 当天的出库总数量 | 出库管理模块 | 实时 |
| 物资总数 | 系统中管理的物资种类数量 | 物资管理模块 | 实时 |
| 仓库总数 | 系统中管理的仓库数量 | 仓库管理模块 | 实时 |
| 供应商总数 | 系统中管理的供应商数量 | 供应商管理模块 | 实时 |
| 客户总数 | 系统中管理的客户数量 | 客户管理模块 | 实时 |
### 2.2 库存统计图表
#### 2.2.1 库存分类分布
- **图表类型**：环形图
- **展示内容**：不同类别物资的库存数量占比
- **数据维度**：物资分类、库存数量
- **图表功能**：
- 展示各类别物资的库存占比情况
- 支持鼠标悬停查看具体数值和占比
- 环形设计，突出核心数据
#### 2.2.2 近30天库存趋势
- **图表类型**：柱状图+折线图组合
- **展示内容**：近30天的入库、出库和库存总量变化趋势
- **数据维度**：日期、入库数量、出库数量、库存总量
- **图表功能**：
- 直观展示库存的变化趋势
- 同时展示入库和出库数据，便于对比分析
- 支持鼠标悬停查看具体数值
- 平滑的折线设计，突出趋势变化
### 2.3 库存预警
- **展示内容**：库存不足或超量的物资列表
- **数据维度**：物资名称、仓库、当前库存、安全库存、预警类型、预警时间等
- **功能**：
- 实时展示需要关注的物资
- 按预警级别分类显示
- 支持查看详情和处理预警
### 2.4 最近动态
- **展示内容**：系统最近的操作记录
- **数据维度**：操作内容、操作时间、操作类型等
- **功能**：
- 实时展示系统的最新动态
- 按时间倒序排列
- 不同类型的操作使用不同颜色和图标标识
### 2.5 待处理任务
- **展示内容**：需要处理的任务列表
- **数据维度**：任务名称、任务类型、所属仓库、创建时间、截止时间等
- **功能**：
- 展示待处理的任务
- 支持按任务类型分类显示
- 支持直接处理任务
### 2.6 快速操作
- **展示内容**：常用操作的快捷入口
- **操作项**：新增盘点任务、新增入库单、新增出库单、库存查询
- **功能**：
- 快速跳转到相应的操作页面
- 提高用户的操作效率
## 3. 可扩展统计内容建议
### 3.1 入库/出库统计
- **统计维度**：按日、周、月统计入库和出库量
- **图表类型**：柱状图或折线图
- **数据来源**：入库管理模块、出库管理模块
- **价值**：帮助用户了解入库和出库的规律，合理安排仓库运营
### 3.2 盘点任务统计
- **统计项**：
- 盘点完成率：已完成盘点任务数/总盘点任务数
- 盘点差异率：盘点差异数量/总盘点数量
- 盘点任务分布：按仓库或区域的盘点任务数量
- **图表类型**：环形图、柱状图或仪表盘
- **数据来源**：盘点管理模块
- **价值**：监控盘点工作的效率和准确性
### 3.3 库存周转统计
- **统计项**：
- 库存周转率：销售成本/平均库存
- 库存周转天数：365/库存周转率
- 不同类别物资的周转情况
- **图表类型**：柱状图或折线图
- **数据来源**：库存管理模块、出库管理模块
- **价值**：评估库存管理的效率，优化库存结构
### 3.4 供应商统计
- **统计项**：
- 供应商入库量排名
- 供应商物资合格率
- 供应商交货及时率
- **图表类型**：柱状图或雷达图
- **数据来源**：供应商管理模块、入库管理模块
- **价值**：评估供应商的表现，优化供应商管理
### 3.5 客户统计
- **统计项**：
- 客户出库量排名
- 客户销售额排名
- 客户订单频率
- **图表类型**：柱状图或饼图
- **数据来源**：客户管理模块、出库管理模块
- **价值**：了解客户需求，优化客户服务
### 3.6 预警处理统计
- **统计项**：
- 预警处理率：已处理预警数/总预警数
- 预警平均处理时长
- 预警类型分布
- **图表类型**：环形图或柱状图
- **数据来源**：预警管理模块
- **价值**：监控预警处理的效率，优化预警管理流程
### 3.7 仓库使用率统计
- **统计项**：
- 仓库利用率：已使用容量/总容量
- 不同仓库的使用率对比
- 仓库容量趋势
- **图表类型**：柱状图或仪表盘
- **数据来源**：仓库管理模块、库存管理模块
- **价值**：了解仓库的使用情况，合理规划仓库资源
## 4. 统计数据来源
| 统计类别 | 数据来源模块 |
|---------|-------------|
| 库存统计 | 库存管理模块 |
| 入库统计 | 入库管理模块 |
| 出库统计 | 出库管理模块 |
| 盘点统计 | 盘点管理模块 |
| 仓库统计 | 仓库管理模块 |
| 供应商统计 | 供应商管理模块、入库管理模块 |
| 客户统计 | 客户管理模块、出库管理模块 |
| 预警统计 | 预警管理模块 |
| 任务统计 | 任务管理模块 |
## 5. 统计更新频率
| 统计项 | 更新频率 |
|-------|---------|
| 实时数据（如总库存、今日入库等） | 实时更新 |
| 图表数据 | 定时更新（如每小时更新一次）或按需刷新 |
| 预警数据 | 实时更新 |
| 最近动态 | 实时更新 |
| 待处理任务 | 实时更新 |
## 6. 图表类型选择建议
| 统计需求 | 推荐图表类型 |
|---------|-------------|
| 占比分布 | 饼图、环形图 |
| 趋势变化 | 折线图、面积图 |
| 数据对比 | 柱状图、条形图 |
| 实时监控 | 仪表盘、数字卡片 |
| 多维数据 | 雷达图、热力图 |
| 关系网络 | 关系图、桑基图 |
## 7. 设计原则
1. **直观性**：图表设计应简洁明了，便于用户快速理解数据
2. **相关性**：统计内容应与用户的核心需求相关
3. **实时性**：重要数据应实时更新
4. **可定制性**：支持用户根据需要调整统计内容和图表类型
5. **响应式**：适配不同屏幕尺寸，确保在各种设备上都能正常显示
6. **美观性**：图表设计应美观大方，与系统整体风格保持一致
## 8. 总结
首页统计模块是仓库管理系统的重要组成部分，通过合理的统计展示，可以帮助用户快速了解系统运行状态和业务数据，提高决策效率。现有统计内容已经涵盖了核心业务指标，但仍有很大的扩展空间。根据业务需求和用户反馈，可以逐步添加更多的统计内容，不断优化首页的统计展示效果。
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment