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

1宫格

master
常熟吴彦祖 1 month ago
parent
920c3695c7
commit
9105861ee0
4 changed files with 196 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      src/views/modules/automatedWarehouse/palletAssembly.vue
  2. 54
      src/views/modules/automatedWarehouse/palletPacking.vue
  3. 54
      src/views/modules/automatedWarehouse/palletSorting.vue
  4. 54
      src/views/modules/automatedWarehouse/palletSortingNoAgv.vue

54
src/views/modules/automatedWarehouse/palletAssembly.vue
View File

@ -287,20 +287,21 @@
</label> </label>
<div class="position-grid" :class="[ <div class="position-grid" :class="[
{'position-grid-loading': positionGridLoading}, {'position-grid-loading': positionGridLoading},
positionGrid.length === 4 ? 'position-grid-4' : 'position-grid-9'
getPositionGridClass
]"> ]">
<div <div
v-for="(item, index) in positionGrid"
v-for="(item, index) in displayPositionGrid"
:key="index" :key="index"
class="position-item" class="position-item"
:class="{ :class="{
'position-disabled': positionGridLoading || !availablePositions.includes(item.position), 'position-disabled': positionGridLoading || !availablePositions.includes(item.position),
'position-selected': currentSelectedPosition === item.position, 'position-selected': currentSelectedPosition === item.position,
'position-loading': positionGridLoading
'position-loading': positionGridLoading,
'position-placeholder': item.isPlaceholder
}" }"
@click="handlePositionClick(item.position)" @click="handlePositionClick(item.position)"
> >
{{ item.position }}({{ item.count }})
<template v-if="!item.isPlaceholder">{{ item.position }}({{ item.count }})</template>
</div> </div>
</div> </div>
</div> </div>
@ -572,6 +573,33 @@ export default {
completeAssemblyLoading: false, // 完成组托按钮 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: { methods: {
// 返回上一页 - rqrq // 返回上一页 - rqrq
handleBack() { handleBack() {
@ -1757,7 +1785,14 @@ export default {
position: relative; 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 { .position-grid.position-grid-4 {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
@ -1771,6 +1806,15 @@ export default {
grid-auto-flow: row; 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 */ /* 加载中的遮罩效果 - rqrq */
.position-grid.position-grid-loading { .position-grid.position-grid-loading {
opacity: 0.7; opacity: 0.7;

54
src/views/modules/automatedWarehouse/palletPacking.vue
View File

@ -285,20 +285,21 @@
</label> </label>
<div class="position-grid" :class="[ <div class="position-grid" :class="[
{'position-grid-loading': positionGridLoading}, {'position-grid-loading': positionGridLoading},
positionGrid.length === 4 ? 'position-grid-4' : 'position-grid-9'
getPositionGridClass
]"> ]">
<div <div
v-for="(item, index) in positionGrid"
v-for="(item, index) in displayPositionGrid"
:key="index" :key="index"
class="position-item" class="position-item"
:class="{ :class="{
'position-disabled': positionGridLoading || !availablePositions.includes(item.position), 'position-disabled': positionGridLoading || !availablePositions.includes(item.position),
'position-selected': currentSelectedPosition === item.position, 'position-selected': currentSelectedPosition === item.position,
'position-loading': positionGridLoading
'position-loading': positionGridLoading,
'position-placeholder': item.isPlaceholder
}" }"
@click="handlePositionClick(item.position)" @click="handlePositionClick(item.position)"
> >
{{ item.position }}({{ item.count }})
<template v-if="!item.isPlaceholder">{{ item.position }}({{ item.count }})</template>
</div> </div>
</div> </div>
</div> </div>
@ -643,6 +644,33 @@ export default {
callPalletLoading: false, // Call栈板按钮 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: { methods: {
// 返回上一页 - rqrq // 返回上一页 - rqrq
handleBack() { handleBack() {
@ -1898,7 +1926,14 @@ export default {
position: relative; 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 { .position-grid.position-grid-4 {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
@ -1912,6 +1947,15 @@ export default {
grid-auto-flow: row; 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 */ /* 加载中的遮罩效果 - rqrq */
.position-grid.position-grid-loading { .position-grid.position-grid-loading {
opacity: 0.7; opacity: 0.7;

54
src/views/modules/automatedWarehouse/palletSorting.vue
View File

@ -246,20 +246,21 @@
</label> </label>
<div class="position-grid" :class="[ <div class="position-grid" :class="[
{'position-grid-loading': positionGridLoading}, {'position-grid-loading': positionGridLoading},
positionGrid.length === 4 ? 'position-grid-4' : 'position-grid-9'
getPositionGridClass
]"> ]">
<div <div
v-for="(item, index) in positionGrid"
v-for="(item, index) in displayPositionGrid"
:key="index" :key="index"
class="position-item" class="position-item"
:class="{ :class="{
'position-disabled': positionGridLoading || !availablePositions.includes(item.position), 'position-disabled': positionGridLoading || !availablePositions.includes(item.position),
'position-selected': currentSelectedPosition === item.position, 'position-selected': currentSelectedPosition === item.position,
'position-loading': positionGridLoading
'position-loading': positionGridLoading,
'position-placeholder': item.isPlaceholder
}" }"
@click="handlePositionClick(item.position)" @click="handlePositionClick(item.position)"
> >
{{ item.position }}({{ item.count }})
<template v-if="!item.isPlaceholder">{{ item.position }}({{ item.count }})</template>
</div> </div>
</div> </div>
</div> </div>
@ -507,6 +508,33 @@ export default {
sortingList: [], 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: { methods: {
// 返回上一页 - rqrq // 返回上一页 - rqrq
handleBack() { handleBack() {
@ -1830,7 +1858,14 @@ export default {
position: relative; 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 { .position-grid.position-grid-4 {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
@ -1844,6 +1879,15 @@ export default {
grid-auto-flow: row; 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 */ /* 加载中的遮罩效果 - rqrq */
.position-grid.position-grid-loading { .position-grid.position-grid-loading {
opacity: 0.7; opacity: 0.7;

54
src/views/modules/automatedWarehouse/palletSortingNoAgv.vue
View File

@ -246,20 +246,21 @@
</label> </label>
<div class="position-grid" :class="[ <div class="position-grid" :class="[
{'position-grid-loading': positionGridLoading}, {'position-grid-loading': positionGridLoading},
positionGrid.length === 4 ? 'position-grid-4' : 'position-grid-9'
getPositionGridClass
]"> ]">
<div <div
v-for="(item, index) in positionGrid"
v-for="(item, index) in displayPositionGrid"
:key="index" :key="index"
class="position-item" class="position-item"
:class="{ :class="{
'position-disabled': positionGridLoading || !availablePositions.includes(item.position), 'position-disabled': positionGridLoading || !availablePositions.includes(item.position),
'position-selected': currentSelectedPosition === item.position, 'position-selected': currentSelectedPosition === item.position,
'position-loading': positionGridLoading
'position-loading': positionGridLoading,
'position-placeholder': item.isPlaceholder
}" }"
@click="handlePositionClick(item.position)" @click="handlePositionClick(item.position)"
> >
{{ item.position }}({{ item.count }})
<template v-if="!item.isPlaceholder">{{ item.position }}({{ item.count }})</template>
</div> </div>
</div> </div>
</div> </div>
@ -507,6 +508,33 @@ export default {
sortingList: [], 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: { methods: {
// 返回上一页 - rqrq // 返回上一页 - rqrq
handleBack() { handleBack() {
@ -1830,7 +1858,14 @@ export default {
position: relative; 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 { .position-grid.position-grid-4 {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
@ -1844,6 +1879,15 @@ export default {
grid-auto-flow: row; 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 */ /* 加载中的遮罩效果 - rqrq */
.position-grid.position-grid-loading { .position-grid.position-grid-loading {
opacity: 0.7; opacity: 0.7;

Write Preview
Loading…
Cancel
Save