diff --git a/src/views/modules/dashboard/warehouse-3d-board.vue b/src/views/modules/dashboard/warehouse-3d-board.vue index 10866d9..a2eceed 100644 --- a/src/views/modules/dashboard/warehouse-3d-board.vue +++ b/src/views/modules/dashboard/warehouse-3d-board.vue @@ -82,32 +82,41 @@
- +
+
+
📦
+
+
空托盘总数
+
{{ emptyPalletTotal }}
+
-
-
⚙️
-
-
钢托盘
-
{{ storageData.steelPallet || 0 }}
-
-
--> -
-
📦
-
-
空托盘
-
{{ storageData.emptyPallet || 0 }}
+ + +
+
+
+
📋
+
+
平托盘
+
{{ (storageData.emptyContainerInventory && storageData.emptyContainerInventory.flatPallet) || 0 }}
+
+
+
+
🔲
+
+
围框托盘
+
{{ (storageData.emptyContainerInventory && storageData.emptyContainerInventory.framePallet) || 0 }}
+
+
+
+
⚙️
+
+
钢托盘
+
{{ (storageData.emptyContainerInventory && storageData.emptyContainerInventory.steelPallet) || 0 }}
+
+
@@ -248,13 +257,6 @@
- -
-
-
-
-
-
@@ -312,11 +314,18 @@ export default { totalSlots: 1960,// 固定不变的 usedSlots: 0, utilizationRate: 0, - steelPallet: 0, - guardPallet: 0, - flatPallet: 0, - emptyPallet:0, - otherPallet: 0 + // 物料盘库存（按托盘类型分类） + materialInventory: { + steelPallet: 0, + framePallet: 0, + flatPallet: 0 + }, + // 空盘库存（按托盘类型分类） + emptyContainerInventory: { + flatPallet: 0, + framePallet: 0, + steelPallet: 0 + } }, // 机器人数据 @@ -356,6 +365,23 @@ export default { } }, + computed: { + /** + * 计算空托盘总数 + */ + emptyPalletTotal() { + const empty = this.storageData.emptyContainerInventory || {} + return (empty.flatPallet || 0) + (empty.framePallet || 0) + (empty.steelPallet || 0) + }, + + /** + * 计算可用库位数（总库位 - 已使用库位） + */ + availableSlots() { + return this.storageData.totalSlots - this.storageData.usedSlots + } + }, + mounted() { this.updateTime() this.timeInterval = setInterval(this.updateTime, 1000) @@ -395,6 +421,7 @@ export default { }, methods: { + /** * 处理窗口大小变化 */ @@ -479,10 +506,22 @@ 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.storageData = { + ...this.storageData, + ...message.data.storageData, + materialInventory: { + ...this.storageData.materialInventory, + ...(message.data.storageData.materialInventory || {}) + }, + emptyContainerInventory: { + ...this.storageData.emptyContainerInventory, + ...(message.data.storageData.emptyContainerInventory || {}) + } + } + + console.log('[智能立体仓库看板] 库位数据已更新:', this.storageData) + // 重新初始化库位利用率图表 this.$nextTick(() => { this.initStorageChart() @@ -600,16 +639,18 @@ export default { this.charts.storage = echarts.init(chartDom) - // 准备数据，用于legend formatter - const storageData = { - steelPallet: this.storageData.steelPallet || 0, - guardPallet: this.storageData.guardPallet || 0, - flatPallet: this.storageData.flatPallet || 0, - otherPallet: this.storageData.otherPallet || 0 - } + // 从新的嵌套结构中提取数据 + const materialInventory = this.storageData.materialInventory || {} + const materialSteelPallet = materialInventory.steelPallet || 0 + const materialFramePallet = materialInventory.framePallet || 0 + const materialFlatPallet = materialInventory.flatPallet || 0 + + // 计算可用库位数 + const availableSlots = this.availableSlots // 调试：打印数据 - console.log('初始化饼图 - 库位数据:', storageData) + console.log('初始化饼图 - 物料盘数据:', { materialSteelPallet, materialFramePallet, materialFlatPallet }) + console.log('初始化饼图 - 可用库位:', availableSlots) console.log('原始storageData:', this.storageData) const option = { @@ -675,8 +716,8 @@ export default { }, data: [ { - value: storageData.steelPallet, - name: '钢托盘（' + storageData.steelPallet + '）', + value: materialSteelPallet, + name: '钢托盘（' + materialSteelPallet + '）', itemStyle: { color: { type: 'linear', @@ -689,8 +730,8 @@ export default { } }, { - value: storageData.guardPallet, - name: '围挡托盘（' + storageData.guardPallet + '）', + value: materialFramePallet, + name: '围框托盘（' + materialFramePallet + '）', itemStyle: { color: { type: 'linear', @@ -703,8 +744,8 @@ export default { } }, { - value: storageData.flatPallet, - name: '平托盘（' + storageData.flatPallet + '）', + value: materialFlatPallet, + name: '平托盘（' + materialFlatPallet + '）', itemStyle: { color: { type: 'linear', @@ -717,8 +758,8 @@ export default { } }, { - value: storageData.otherPallet, - name: '可用库位数（' + storageData.otherPallet + '）', + value: availableSlots, + name: '可用库位数（' + availableSlots + '）', itemStyle: { color: { type: 'linear', @@ -1673,17 +1714,85 @@ export default { /* 托盘数量统计样式 */ .pallet-statistics { display: flex; - gap: 8px; + flex-direction: column; + gap: 6px; + + /* 空托盘总数区域 */ + .pallet-total-section { + .pallet-total-item { + padding: 1px 16px; + background: linear-gradient(135deg, rgba(192, 244, 181, 0.15) 0%, rgba(198, 230, 177, 0.15) 100%); + border: 2px solid rgba(255, 215, 0, 0.4); + border-radius: 8px; + display: flex; + align-items: center; + gap: 12px; + transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15); + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25); + border-color: rgba(255, 215, 0, 0.6); + } + + .total-icon { + font-size: 20px; + opacity: 0.95; + } + + .total-info { + flex: 1; + display: flex; + justify-content: space-between; + align-items: center; + + .total-label { + font-size: 13px; + font-weight: 600; + color: #bded8e; + letter-spacing: 1px; + } + + .total-value { + font-size: 20px; + font-weight: bold; + color: #bded8e; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); + } + } + } + } + + /* 分类明细区域 */ + .pallet-detail-section { + margin-left: 5px; + margin-right: 5px; + .detail-title { + font-size: 11px; + color: #8ab8d6; + margin-bottom: 8px; + padding-left: 4px; + letter-spacing: 0.5px; + opacity: 0.9; + } + + .detail-items { + display: flex; + gap: 8px; + } + } .pallet-item { flex: 1; - padding: 6px 8px; + min-width: 100px; + padding: 4px 12px; background: rgba(25, 50, 85, 0.5); border: 1px solid rgba(0, 212, 255, 0.15); - border-radius: 4px; + border-radius: 6px; display: flex; align-items: center; - gap: 6px; + gap: 8px; transition: all 0.3s ease; &:hover { @@ -1693,7 +1802,7 @@ export default { } .pallet-icon { - font-size: 18px; + font-size: 22px; opacity: 0.9; } @@ -1701,16 +1810,16 @@ export default { flex: 1; display: flex; flex-direction: column; - gap: 2px; + gap: 4px; .pallet-label { - font-size: 10px; + font-size: 11px; color: #8ab8d6; letter-spacing: 0.3px; } .pallet-value { - font-size: 15px; + font-size: 17px; font-weight: bold; color: #fff; } @@ -1742,10 +1851,10 @@ export default { } &.other { - border-left: 2px solid #ffd700; + border-left: 2px solid #b3f38d; .pallet-value { - color: #ffd700; + color: #b0ef77; } } } diff --git a/src/views/modules/labelSetting/components/DataSourceDialog.vue b/src/views/modules/labelSetting/components/DataSourceDialog.vue index 9865716..172a3d8 100644 --- a/src/views/modules/labelSetting/components/DataSourceDialog.vue +++ b/src/views/modules/labelSetting/components/DataSourceDialog.vue @@ -14,22 +14,6 @@