hanst
/
wms-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

显示空托盘

master
han\hanst 3 months ago
parent
f3eac1aa61
commit
80fb3cf954
2 changed files with 148 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/views/modules/dashboard/robot-picking-board.vue
  2. 175
      src/views/modules/dashboard/warehouse-3d-board.vue

4
src/views/modules/dashboard/robot-picking-board.vue
View File

@ -659,9 +659,9 @@ export default {
}
&.status-warning {
background: linear-gradient(135deg, #f59e0b, #fbbf24);
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}
&.status-pending {

175
src/views/modules/dashboard/warehouse-3d-board.vue
View File

@ -79,6 +79,38 @@
<div class="item-percent">{{ taskData.inboundPercent }}%</div>
</div>
</div>
<!-- 托盘数量统计 -->
<div class="pallet-statistics">
<!-- <div class="pallet-item flat">
<div class="pallet-icon">📋</div>
<div class="pallet-info">
<div class="pallet-label">平托盘</div>
<div class="pallet-value">{{ storageData.flatPallet || 0 }}</div>
</div>
</div>
<div class="pallet-item guard">
<div class="pallet-icon">🔲</div>
<div class="pallet-info">
<div class="pallet-label">围挡托盘</div>
<div class="pallet-value">{{ storageData.guardPallet || 0 }}</div>
</div>
</div>
<div class="pallet-item steel">
<div class="pallet-icon">⚙️</div>
<div class="pallet-info">
<div class="pallet-label">钢托盘</div>
<div class="pallet-value">{{ storageData.steelPallet || 0 }}</div>
</div>
</div>-->
<div class="pallet-item other">
<div class="pallet-icon">📦</div>
<div class="pallet-info">
<div class="pallet-label">空托盘</div>
<div class="pallet-value">{{ storageData.emptyPallet || 0 }}</div>
</div>
</div>
</div>
</div>
</div>
@ -104,7 +136,7 @@
<span class="summary-value rate">{{ storageData.utilizationRate }}%</span>
</div>
</div>
<div id="storageChart" style="margin-left: 90px" class="chart-container"></div>
<div id="storageChart" style="margin-left: 70px" class="chart-container"></div>
</div>
</div>
@ -448,6 +480,9 @@ export default {
// 更新库位数据
if (message.data.storageData && Object.keys(message.data.storageData).length > 0) {
this.storageData = Object.assign({}, this.storageData, message.data.storageData)
this.storageData.emptyPallet = this.storageData.otherPallet
this.storageData.otherPallet = this.storageData.totalSlots-this.storageData.flatPallet-
this.storageData.guardPallet-this.storageData.steelPallet
// 重新初始化库位利用率图表
this.$nextTick(() => {
this.initStorageChart()
@ -591,8 +626,8 @@ export default {
{
name: '库位类型',
type: 'pie',
radius: ['45%', '70%'],
center: ['35%', '50%'],
radius: ['30%', '70%'],
center: ['40%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 8,
@ -664,7 +699,7 @@ export default {
},
{
value: this.storageData.otherPallet,
name: '其他',
name: '可用库位数',
itemStyle: {
color: {
type: 'linear',
@ -1512,28 +1547,28 @@ export default {
.task-summary {
.task-stats {
display: flex;
gap: 16px;
margin-bottom: 20px;
gap: 12px;
margin-bottom: 12px;
.stat-item {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 132, 255, 0.1) 100%);
border: 1px solid rgba(0, 212, 255, 0.3);
border-radius: 10px;
border-radius: 8px;
.stat-icon {
width: 50px;
height: 50px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #00d4ff, #0084ff);
border-radius: 10px;
font-size: 24px;
border-radius: 8px;
font-size: 20px;
color: #fff;
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}
@ -1542,13 +1577,13 @@ export default {
flex: 1;
.stat-label {
font-size: 12px;
font-size: 11px;
color: #8ab8d6;
margin-bottom: 6px;
margin-bottom: 4px;
}
.stat-value {
font-size: 28px;
font-size: 22px;
font-weight: bold;
color: #00d4ff;
line-height: 1;
@ -1556,9 +1591,9 @@ export default {
}
.stat-unit {
font-size: 12px;
font-size: 11px;
color: #8ab8d6;
margin-top: 4px;
margin-top: 3px;
}
}
}
@ -1571,46 +1606,128 @@ export default {
.task-breakdown {
display: flex;
gap: 12px;
gap: 10px;
margin-bottom: 10px;
.breakdown-item {
flex: 1;
padding: 16px;
padding: 10px 12px;
background: rgba(25, 50, 85, 0.7);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 8px;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
gap: 4px;
.item-icon {
font-size: 32px;
margin-bottom: 4px;
font-size: 24px;
margin-bottom: 2px;
}
.item-label {
font-size: 13px;
font-size: 11px;
color: #8ab8d6;
}
.item-value {
font-size: 24px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.item-percent {
font-size: 12px;
font-size: 11px;
color: #00ff88;
}
&.outbound {
border-top: 3px solid #00d4ff;
border-top: 2px solid #00d4ff;
}
&.inbound {
border-top: 3px solid #00ff88;
border-top: 2px solid #00ff88;
}
}
}
/* 托盘数量统计样式 */
.pallet-statistics {
display: flex;
gap: 8px;
.pallet-item {
flex: 1;
padding: 6px 8px;
background: rgba(25, 50, 85, 0.5);
border: 1px solid rgba(0, 212, 255, 0.15);
border-radius: 4px;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
&:hover {
background: rgba(25, 50, 85, 0.8);
border-color: rgba(0, 212, 255, 0.4);
transform: translateY(-2px);
}
.pallet-icon {
font-size: 18px;
opacity: 0.9;
}
.pallet-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
.pallet-label {
font-size: 10px;
color: #8ab8d6;
letter-spacing: 0.3px;
}
.pallet-value {
font-size: 15px;
font-weight: bold;
color: #fff;
}
}
/* 不同托盘类型的边框颜色 */
&.flat {
border-left: 2px solid #00ff88;
.pallet-value {
color: #00ff88;
}
}
&.guard {
border-left: 2px solid #7b68ee;
.pallet-value {
color: #9370db;
}
}
&.steel {
border-left: 2px solid #00d4ff;
.pallet-value {
color: #00d4ff;
}
}
&.other {
border-left: 2px solid #ffd700;
.pallet-value {
color: #ffd700;
}
}
}
}

Write Preview
Loading…
Cancel
Save