<template>
|
<div class="inventory-stats-container">
|
<div class="stats-grid">
|
<!-- 日出入库统计 -->
|
<div class="stat-card">
|
<div class="stat-title">今日出入库</div>
|
<div class="stat-content">
|
<div class="stat-item">
|
<span class="stat-label">入库：</span>
|
<span class="stat-value in">{{ dailyStats.in }}</span>
|
</div>
|
<div class="stat-item">
|
<span class="stat-label">出库：</span>
|
<span class="stat-value out">{{ dailyStats.out }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 周出入库统计 -->
|
<div class="stat-card">
|
<div class="stat-title">本周出入库</div>
|
<div class="stat-content">
|
<div class="stat-item">
|
<span class="stat-label">入库：</span>
|
<span class="stat-value in">{{ weeklyStats.in }}</span>
|
</div>
|
<div class="stat-item">
|
<span class="stat-label">出库：</span>
|
<span class="stat-value out">{{ weeklyStats.out }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 月出入库统计 -->
|
<div class="stat-card">
|
<div class="stat-title">本月出入库</div>
|
<div class="stat-content">
|
<div class="stat-item">
|
<span class="stat-label">入库：</span>
|
<span class="stat-value in">{{ monthlyStats.in }}</span>
|
</div>
|
<div class="stat-item">
|
<span class="stat-label">出库：</span>
|
<span class="stat-value out">{{ monthlyStats.out }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 库存有货数量 -->
|
<div class="stat-card inventory">
|
<div class="stat-title">当前库存有货数量</div>
|
<div class="stat-content">
|
<div class="inventory-value">{{ inventoryCount.toLocaleString() }}</div>
|
<div class="inventory-desc">个货位</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'InventoryStats',
|
data() {
|
return {
|
dailyStats: {
|
in: 0,
|
out: 0
|
},
|
weeklyStats: {
|
in: 0,
|
out: 0
|
},
|
monthlyStats: {
|
in: 0,
|
out: 0
|
},
|
inventoryCount: 0
|
};
|
},
|
mounted() {
|
this.getData();
|
// 每10秒刷新一次数据
|
this.refreshInterval = setInterval(() => {
|
this.getData();
|
}, 10000);
|
},
|
beforeDestroy() {
|
if (this.refreshInterval) {
|
clearInterval(this.refreshInterval);
|
}
|
},
|
methods: {
|
getData() {
|
import('@/api/api').then(({ WMS_POST }) => {
|
// 获取出入库统计数据
|
WMS_POST('/api/Home/GetDt_TaskHty')
|
.then((response) => {
|
if (response && response.data) {
|
this.dailyStats = {
|
in: response.data.todayInbound || 0,
|
out: response.data.todayOutbound || 0
|
};
|
this.weeklyStats = {
|
in: response.data.weekInbound || 0,
|
out: response.data.weekOutbound || 0
|
};
|
this.monthlyStats = {
|
in: response.data.monthInbound || 0,
|
out: response.data.monthOutbound || 0
|
};
|
this.inventoryCount = response.data.warehouseUtilization && response.data.warehouseUtilization.used ? response.data.warehouseUtilization.used : 0;
|
}
|
})
|
.catch((error) => {
|
console.error('获取统计数据失败:', error);
|
});
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.inventory-stats-container {
|
width: 100%;
|
height: 100%;
|
padding: 16px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.stats-grid {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 20px;
|
width: 100%;
|
height: 100%;
|
}
|
|
.stat-card {
|
background: rgba(0, 20, 40, 0.6);
|
border: 1px solid rgba(0, 255, 255, 0.1);
|
border-radius: 8px;
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
transition: all 0.3s ease;
|
|
&:hover {
|
border-color: rgba(0, 255, 255, 0.3);
|
box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
|
}
|
|
&.inventory {
|
background: rgba(0, 40, 20, 0.6);
|
border-color: rgba(0, 255, 128, 0.1);
|
|
&:hover {
|
border-color: rgba(0, 255, 128, 0.3);
|
box-shadow: 0 0 10px rgba(0, 255, 128, 0.2);
|
}
|
}
|
}
|
|
.stat-title {
|
font-size: 20px;
|
color: #00fdfa;
|
margin-bottom: 16px;
|
font-weight: bold;
|
text-align: center;
|
text-shadow: 0 0 5px currentColor;
|
}
|
|
.stat-content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.stat-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.stat-label {
|
font-size: 18px;
|
color: rgba(255, 255, 255, 0.7);
|
}
|
|
.stat-value {
|
font-size: 24px;
|
font-weight: bold;
|
|
&.in {
|
color: #07f7a8;
|
text-shadow: 0 0 5px currentColor;
|
}
|
|
&.out {
|
color: #00fdfa;
|
text-shadow: 0 0 5px currentColor;
|
}
|
}
|
|
.inventory-value {
|
font-size: 36px;
|
font-weight: bold;
|
color: #07f7a8;
|
text-shadow: 0 0 10px currentColor;
|
text-align: center;
|
margin-bottom: 8px;
|
}
|
|
.inventory-desc {
|
font-size: 18px;
|
color: rgba(255, 255, 255, 0.7);
|
text-align: center;
|
}
|
|
/* 响应式调整 */
|
@media screen and (max-height: 1080px) {
|
.stats-grid {
|
gap: 12px;
|
}
|
|
.stat-card {
|
padding: 16px;
|
}
|
|
.stat-title {
|
font-size: 18px;
|
margin-bottom: 12px;
|
}
|
|
.stat-label {
|
font-size: 16px;
|
}
|
|
.stat-value {
|
font-size: 20px;
|
}
|
|
.inventory-value {
|
font-size: 30px;
|
}
|
|
.inventory-desc {
|
font-size: 16px;
|
}
|
}
|
</style>
|
