UDI
/
udiwms-vue-frame
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化

Browse Source
20240912_adapter
chenhc 3 months ago
parent 679f843075
commit 9c4002de96
2 changed files with 103 additions and 51 deletions
Show Stats Download Patch File Download Diff File

78
src/components/ShelfDisplay/index.vue
Unescape Escape View File

@ -6,22 +6,27 @@
v-for="(row, rowIndex) in shelfData"
:key="rowIndex"
class="shelf-row"
:style="{ display: 'flex', flexWrap: 'nowrap' ,height: `${ row.height}px`}"
:style="{ display: 'flex', flexWrap: 'nowrap', height: `${ row.height}px` }"
>
<div
v-for="(slot, slotIndex) in row.sysWorkplaceQueues"
:key="slot.id"
class="shelf-slot"
:style="{ width: `${100 / row.sysWorkplaceQueues.length}%` }"
:style="{ width: `${100 / row.sysWorkplaceQueues.length}%` , height: `${ row.height}px`}"
@click="handleSlotClick(slot)"
>
<div class="top-border-boxes">
<div :class="['top-border-box', {'red-box': slot.colors.includes('red')} ? {'red-box': slot.colors.includes('red')} : 'white-box' ]"></div>
<div :class="['top-border-box', {'blue-box': slot.colors.includes('blue')} ? {'blue-box': slot.colors.includes('blue')} : 'white-box' ]"></div>
<div :class="['top-border-box', {'green-box': slot.colors.includes('green')} ? {'green-box': slot.colors.includes('green')} : 'white-box' ]"></div>
<div :class="['top-border-box', {'yellow-box': slot.colors.includes('yellow')} ? {'yellow-box': slot.colors.includes('yellow')} : 'white-box' ]"></div>
</div>
<div class="centered-container">
<span style="text-align: center;">{{ slot.code }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
@ -33,10 +38,14 @@ export default {
type: Array,
required: true,
},
freightCode:{
freightCode: {
type: Object,
required: true,
},
colorCount: {
type: Number,
default: 4, // 默认颜色数量为 4
},
},
methods: {
handleSlotClick(slot) {
@ -46,7 +55,7 @@ export default {
},
created() {
this.shelfData = this.shelfData.sort((a, b) => a.id - b.id);
}
},
};
</script>
@ -57,20 +66,63 @@ export default {
}
.shelf-row {
margin: 0; /* 移除外边距 */
padding: 0; /* 移除内边距 */
margin: 0;
padding: 0;
display: flex;
align-items: center; /* 确保行内容垂直居中 */
}
.shelf-slot {
position: relative; /* 为伪元素定位 */
box-sizing: border-box;
border: 1px solid #ccc; /* Adjust border style as needed */
padding: 10px; /* Adjust padding as needed */
text-align: center; /* Center text inside the slot */
border: 1px solid #ccc;
padding: 10px;
text-align: center;
transition: transform 0.3s ease; /* 添加过渡效果 */
transform-style: preserve-3d; /* 保持3D子元素的变换 */
}
.shelf-slot:hover {
transform: rotateY(10deg); /* 添加旋转效果 */
}
.centered-container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
/*height: 100px; !* 假设父容器的高度 *!*/
align-items: center;
justify-content: center;
height: 100%; /* 确保子元素垂直居中 */
}
/* 上边框的颜色框容器 */
.top-border-boxes {
display: flex;
height: 10px; /* 上边框颜色框的高度 */
padding: 0;
}
/* 上边框的颜色框 */
.top-border-box {
flex: 1; /* 平均分配宽度 */
height: 10px; /* 与容器高度一致 */
border: 1px solid #ccc; /* 边框 */
}
.red-box {
background-color: red;
}
.blue-box {
background-color: blue;
}
.green-box {
background-color: green;
}
.yellow-box {
background-color: yellow;
}
.white-box {
background-color: white;
}
</style>

76
src/views/basic/workplace/rackManage.vue
Unescape Escape View File

@ -35,7 +35,7 @@
:close-on-press-escape="false"
>
<ShelfDisplay
:shelfData="this.layerList"
:shelfData="shelfData"
@slot-click="handleSlotClick"
:freightCode="freightCode"
>
@ -58,68 +58,68 @@ export default {
{
id: 1,
height: 50,
slots: [
{ id: 1, item: 'Item A1' },
{ id: 2, item: 'Item A2' },
{ id: 3, item: 'Item 3' },
{ id: 4, item: 'Item 4' },
sysWorkplaceQueues: [
{ id: 1, code: 'Item A1' ,colors: ['red', 'blue', 'green']},
{ id: 2, code: 'Item A2' ,colors: ['red', 'blue', 'green']},
{ id: 3, code: 'Item 3' ,colors: ['red', 'blue', 'green']},
{ id: 4, code: 'Item 4' ,colors: ['red', 'blue', 'green']},
]
},
{
row: 2,
height: 80,
slots: [
{ id: 1, item: 'Item B1' },
{ id: 2, item: 'Item B2' },
{ id: 3, item: 'Item 3' },
{ id: 4, item: 'Item 4' },
{ id: 5, item: 'Item 3' },
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1' ,colors: ['red', 'blue', 'green']},
{ id: 2, code: 'Item B2' ,colors: [ 'blue' ]},
{ id: 3, code: 'Item 3' ,colors: [ 'blue' ]},
{ id: 4, code: 'Item 4' ,colors: ['red', 'blue', 'green']},
{ id: 5, code: 'Item 3' ,colors: [ 'blue' ]},
]
},
{
row: 3,
height: 80,
slots: [
{ id: 1, item: 'Item B1' },
{ id: 2, item: 'Item B2' },
{ id: 3, item: 'Item 3' },
{ id: 4, item: 'Item 4' },
{ id: 5, item: 'Item 3' },
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1' ,colors: ['red', 'blue', 'green']},
{ id: 2, code: 'Item B2' ,colors: ['red', 'blue', 'green']},
{ id: 3, code: 'Item 3' ,colors: [ 'green']},
{ id: 4, code: 'Item 4' ,colors: [ 'green'] },
{ id: 5, code: 'Item 3' ,colors: [ 'green']},
]
},
{
row: 6,
height: 80,
slots: [
{ id: 1, item: 'Item B1' },
{ id: 2, item: 'Item B2' },
{ id: 3, item: 'Item 3' },
{ id: 4, item: 'Item 4' },
{ id: 5, item: 'Item 3' },
{ id: 5, item: 'Item 3' },
{ id: 5, item: 'Item 3' },
{ id: 5, item: 'Item 3' },
{ id: 5, item: 'Item 3' },
{ id: 5, item: 'Item 3' },
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1' ,colors: ['red', 'blue', 'green']},
{ id: 2, code: 'Item B2' ,colors: ['red']},
{ id: 3, code: 'Item 3' ,colors: [ 'yellow']},
{ id: 4, code: 'Item 4' ,colors: ['red'] },
{ id: 5, code: 'Item 3' ,colors: ['red', 'blue', 'green']},
{ id: 5, code: 'Item 3' ,colors: ['red'] },
{ id: 5, code: 'Item 3',colors: ['red'] },
{ id: 5, code: 'Item 3' ,colors: [ 'yellow']},
{ id: 5, code: 'Item 3' ,colors: [ 'yellow']},
{ id: 5, code: 'Item 3' ,colors: ['red', 'blue', 'green']},
]
},
{
row: 5,
height: 200,
slots: [
{ id: 1, item: 'Item B1' },
{ id: 2, item: 'Item B2' },
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1',colors: [ 'yellow'] },
{ id: 2, code: 'Item B2' ,colors: [ 'yellow']},
]
},
{
row: 4,
height: 80,
slots: [
{ id: 1, item: 'Item B1' },
{ id: 2, item: 'Item B2' },
{ id: 3, item: 'Item 3' },
{ id: 4, item: 'Item 4' },
{ id: 5, item: 'Item 3' },
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1' ,colors: [ 'green']},
{ id: 2, code: 'Item B2' ,colors: ['red'] },
{ id: 3, code: 'Item 3' ,colors: ['red'] },
{ id: 4, code: 'Item 4',colors: [ 'green'] },
{ id: 5, code: 'Item 3' ,colors: [ 'green']},
]
},
],

Write Preview
Loading…
Cancel
Save