diff --git a/src/views/modules/automatedWarehouse/palletAssembly.vue b/src/views/modules/automatedWarehouse/palletAssembly.vue
index 74510bb..b70b048 100644
--- a/src/views/modules/automatedWarehouse/palletAssembly.vue
+++ b/src/views/modules/automatedWarehouse/palletAssembly.vue
@@ -287,20 +287,21 @@
- {{ item.position }}({{ item.count }})
+ {{ item.position }}({{ item.count }})
@@ -572,6 +573,33 @@ export default {
completeAssemblyLoading: false, // 完成组托按钮
};
},
+ computed: {
+ // 获取位置网格的CSS类 - rqrq
+ getPositionGridClass() {
+ const len = this.positionGrid.length;
+ if (len === 1) return 'position-grid-1';
+ if (len === 2) return 'position-grid-4'; // 2宫格用4宫格布局
+ if (len === 4) return 'position-grid-4';
+ return 'position-grid-9';
+ },
+ // 生成显示用的位置网格(处理2宫格斜对角显示)- rqrq
+ displayPositionGrid() {
+ const len = this.positionGrid.length;
+ // 2宫格特殊处理:用4宫格布局,1在左上(索引0),2在右下(索引3) - rqrq
+ if (len === 2) {
+ const pos1 = this.positionGrid.find(p => p.position === '1') || { position: '1', count: 0 };
+ const pos2 = this.positionGrid.find(p => p.position === '2') || { position: '2', count: 0 };
+ return [
+ { ...pos1, isPlaceholder: false }, // 左上 - 位置1
+ { position: '', count: 0, isPlaceholder: true }, // 右上 - 占位
+ { position: '', count: 0, isPlaceholder: true }, // 左下 - 占位
+ { ...pos2, isPlaceholder: false } // 右下 - 位置2
+ ];
+ }
+ // 1宫格、4宫格、9宫格直接返回
+ return this.positionGrid.map(p => ({ ...p, isPlaceholder: false }));
+ }
+ },
methods: {
// 返回上一页 - rqrq
handleBack() {
@@ -1757,7 +1785,14 @@ export default {
position: relative;
}
-/* 4宫格:2行2列,按列排列(1,2 | 3,4) - rqrq */
+/* 1宫格:单个居中 - rqrq */
+.position-grid.position-grid-1 {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+}
+
+/* 4宫格:2行2列,按列排列(1,2 | 3,4)- rqrq */
+/* 2宫格也使用此布局,只是1在左上,2在右下 - rqrq */
.position-grid.position-grid-4 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
@@ -1771,6 +1806,15 @@ export default {
grid-auto-flow: row;
}
+/* 2宫格占位格子样式(灰色不可选)- rqrq */
+.position-item.position-placeholder {
+ background-color: #f0f0f0 !important;
+ border: 1px dashed #d0d0d0 !important;
+ color: transparent !important;
+ cursor: not-allowed !important;
+ pointer-events: none !important;
+}
+
/* 加载中的遮罩效果 - rqrq */
.position-grid.position-grid-loading {
opacity: 0.7;
diff --git a/src/views/modules/automatedWarehouse/palletPacking.vue b/src/views/modules/automatedWarehouse/palletPacking.vue
index 03ce8eb..3eac19f 100644
--- a/src/views/modules/automatedWarehouse/palletPacking.vue
+++ b/src/views/modules/automatedWarehouse/palletPacking.vue
@@ -285,20 +285,21 @@
- {{ item.position }}({{ item.count }})
+ {{ item.position }}({{ item.count }})
@@ -643,6 +644,33 @@ export default {
callPalletLoading: false, // Call栈板按钮
};
},
+ computed: {
+ // 获取位置网格的CSS类 - rqrq
+ getPositionGridClass() {
+ const len = this.positionGrid.length;
+ if (len === 1) return 'position-grid-1';
+ if (len === 2) return 'position-grid-4'; // 2宫格用4宫格布局
+ if (len === 4) return 'position-grid-4';
+ return 'position-grid-9';
+ },
+ // 生成显示用的位置网格(处理2宫格斜对角显示)- rqrq
+ displayPositionGrid() {
+ const len = this.positionGrid.length;
+ // 2宫格特殊处理:用4宫格布局,1在左上(索引0),2在右下(索引3) - rqrq
+ if (len === 2) {
+ const pos1 = this.positionGrid.find(p => p.position === '1') || { position: '1', count: 0 };
+ const pos2 = this.positionGrid.find(p => p.position === '2') || { position: '2', count: 0 };
+ return [
+ { ...pos1, isPlaceholder: false }, // 左上 - 位置1
+ { position: '', count: 0, isPlaceholder: true }, // 右上 - 占位
+ { position: '', count: 0, isPlaceholder: true }, // 左下 - 占位
+ { ...pos2, isPlaceholder: false } // 右下 - 位置2
+ ];
+ }
+ // 1宫格、4宫格、9宫格直接返回
+ return this.positionGrid.map(p => ({ ...p, isPlaceholder: false }));
+ }
+ },
methods: {
// 返回上一页 - rqrq
handleBack() {
@@ -1898,7 +1926,14 @@ export default {
position: relative;
}
-/* 4宫格:2行2列,按列排列(1,2 | 3,4) - rqrq */
+/* 1宫格:单个居中 - rqrq */
+.position-grid.position-grid-1 {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+}
+
+/* 4宫格:2行2列,按列排列(1,2 | 3,4)- rqrq */
+/* 2宫格也使用此布局,只是1在左上,2在右下 - rqrq */
.position-grid.position-grid-4 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
@@ -1912,6 +1947,15 @@ export default {
grid-auto-flow: row;
}
+/* 2宫格占位格子样式(灰色不可选)- rqrq */
+.position-item.position-placeholder {
+ background-color: #f0f0f0 !important;
+ border: 1px dashed #d0d0d0 !important;
+ color: transparent !important;
+ cursor: not-allowed !important;
+ pointer-events: none !important;
+}
+
/* 加载中的遮罩效果 - rqrq */
.position-grid.position-grid-loading {
opacity: 0.7;
diff --git a/src/views/modules/automatedWarehouse/palletSorting.vue b/src/views/modules/automatedWarehouse/palletSorting.vue
index 3033e9f..4177796 100644
--- a/src/views/modules/automatedWarehouse/palletSorting.vue
+++ b/src/views/modules/automatedWarehouse/palletSorting.vue
@@ -246,20 +246,21 @@
- {{ item.position }}({{ item.count }})
+ {{ item.position }}({{ item.count }})
@@ -507,6 +508,33 @@ export default {
sortingList: [],
};
},
+ computed: {
+ // 获取位置网格的CSS类 - rqrq
+ getPositionGridClass() {
+ const len = this.positionGrid.length;
+ if (len === 1) return 'position-grid-1';
+ if (len === 2) return 'position-grid-4'; // 2宫格用4宫格布局
+ if (len === 4) return 'position-grid-4';
+ return 'position-grid-9';
+ },
+ // 生成显示用的位置网格(处理2宫格斜对角显示)- rqrq
+ displayPositionGrid() {
+ const len = this.positionGrid.length;
+ // 2宫格特殊处理:用4宫格布局,1在左上(索引0),2在右下(索引3) - rqrq
+ if (len === 2) {
+ const pos1 = this.positionGrid.find(p => p.position === '1') || { position: '1', count: 0 };
+ const pos2 = this.positionGrid.find(p => p.position === '2') || { position: '2', count: 0 };
+ return [
+ { ...pos1, isPlaceholder: false }, // 左上 - 位置1
+ { position: '', count: 0, isPlaceholder: true }, // 右上 - 占位
+ { position: '', count: 0, isPlaceholder: true }, // 左下 - 占位
+ { ...pos2, isPlaceholder: false } // 右下 - 位置2
+ ];
+ }
+ // 1宫格、4宫格、9宫格直接返回
+ return this.positionGrid.map(p => ({ ...p, isPlaceholder: false }));
+ }
+ },
methods: {
// 返回上一页 - rqrq
handleBack() {
@@ -1830,7 +1858,14 @@ export default {
position: relative;
}
-/* 4宫格:2行2列,按列排列(1,2 | 3,4) - rqrq */
+/* 1宫格:单个居中 - rqrq */
+.position-grid.position-grid-1 {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+}
+
+/* 4宫格:2行2列,按列排列(1,2 | 3,4)- rqrq */
+/* 2宫格也使用此布局,只是1在左上,2在右下 - rqrq */
.position-grid.position-grid-4 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
@@ -1844,6 +1879,15 @@ export default {
grid-auto-flow: row;
}
+/* 2宫格占位格子样式(灰色不可选)- rqrq */
+.position-item.position-placeholder {
+ background-color: #f0f0f0 !important;
+ border: 1px dashed #d0d0d0 !important;
+ color: transparent !important;
+ cursor: not-allowed !important;
+ pointer-events: none !important;
+}
+
/* 加载中的遮罩效果 - rqrq */
.position-grid.position-grid-loading {
opacity: 0.7;
diff --git a/src/views/modules/automatedWarehouse/palletSortingNoAgv.vue b/src/views/modules/automatedWarehouse/palletSortingNoAgv.vue
index acb1b8c..e054290 100644
--- a/src/views/modules/automatedWarehouse/palletSortingNoAgv.vue
+++ b/src/views/modules/automatedWarehouse/palletSortingNoAgv.vue
@@ -246,20 +246,21 @@
- {{ item.position }}({{ item.count }})
+ {{ item.position }}({{ item.count }})
@@ -507,6 +508,33 @@ export default {
sortingList: [],
};
},
+ computed: {
+ // 获取位置网格的CSS类 - rqrq
+ getPositionGridClass() {
+ const len = this.positionGrid.length;
+ if (len === 1) return 'position-grid-1';
+ if (len === 2) return 'position-grid-4'; // 2宫格用4宫格布局
+ if (len === 4) return 'position-grid-4';
+ return 'position-grid-9';
+ },
+ // 生成显示用的位置网格(处理2宫格斜对角显示)- rqrq
+ displayPositionGrid() {
+ const len = this.positionGrid.length;
+ // 2宫格特殊处理:用4宫格布局,1在左上(索引0),2在右下(索引3) - rqrq
+ if (len === 2) {
+ const pos1 = this.positionGrid.find(p => p.position === '1') || { position: '1', count: 0 };
+ const pos2 = this.positionGrid.find(p => p.position === '2') || { position: '2', count: 0 };
+ return [
+ { ...pos1, isPlaceholder: false }, // 左上 - 位置1
+ { position: '', count: 0, isPlaceholder: true }, // 右上 - 占位
+ { position: '', count: 0, isPlaceholder: true }, // 左下 - 占位
+ { ...pos2, isPlaceholder: false } // 右下 - 位置2
+ ];
+ }
+ // 1宫格、4宫格、9宫格直接返回
+ return this.positionGrid.map(p => ({ ...p, isPlaceholder: false }));
+ }
+ },
methods: {
// 返回上一页 - rqrq
handleBack() {
@@ -1830,7 +1858,14 @@ export default {
position: relative;
}
-/* 4宫格:2行2列,按列排列(1,2 | 3,4) - rqrq */
+/* 1宫格:单个居中 - rqrq */
+.position-grid.position-grid-1 {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+}
+
+/* 4宫格:2行2列,按列排列(1,2 | 3,4)- rqrq */
+/* 2宫格也使用此布局,只是1在左上,2在右下 - rqrq */
.position-grid.position-grid-4 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
@@ -1844,6 +1879,15 @@ export default {
grid-auto-flow: row;
}
+/* 2宫格占位格子样式(灰色不可选)- rqrq */
+.position-item.position-placeholder {
+ background-color: #f0f0f0 !important;
+ border: 1px dashed #d0d0d0 !important;
+ color: transparent !important;
+ cursor: not-allowed !important;
+ pointer-events: none !important;
+}
+
/* 加载中的遮罩效果 - rqrq */
.position-grid.position-grid-loading {
opacity: 0.7;