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

fix:修复

Browse Source
20240912_adapter
chenhc 3 months ago
parent a09c6bca83
commit 8254c9690d
2 changed files with 77 additions and 32 deletions
Show Stats Download Patch File Download Diff File

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

@ -17,28 +17,38 @@
@click="handleSlotClick(slot)"
>
<div class="top-border-boxes">
<div
:class="['top-border-box', slot.red != null && slot.red != 0 ? 'red-box' : 'white-box' ]"
></div>
<div
:class="['top-border-box', slot.blue != null &&slot.blue != 0 ? 'blue-box': 'white-box' ]"
></div>
<div
:class="['top-border-box', slot.green != null &&slot.green != 0 ? 'green-box' : 'white-box' ]"
></div>
<div
:class="['top-border-box', slot.orange != null &&slot.orange != 0 ? 'orange-box': 'white-box' ]"
></div>
</div>
<div class="centered-container">
<div class="left-box">
<span :style="{
color: slot.cpmctymc ? 'green' : 'black',
fontSize:`${16 + 30/row.sysWorkplaceQueues.length}px` ,
fontSize:`${13 + 25/row.sysWorkplaceQueues.length}px` ,
fontWeight: 'bold'
}">
{{ slot.cpmctymc ? slot.cpmctymc: "暂未绑定"}}
</span>
</div>
<div class="right-box">
<div
:class="['top-border-box', slot.red != null && slot.red != 0 ? 'red-box' : 'white-box' ]"
></div>
<div
:class="['top-border-box', slot.blue != null &&slot.blue != 0 ? 'blue-box': 'white-box' ]"
></div>
<div
:class="['top-border-box', slot.green != null &&slot.green != 0 ? 'green-box' : 'white-box' ]"
></div>
<div
:class="['top-border-box', slot.orange != null &&slot.orange != 0 ? 'orange-box': 'white-box' ]"
></div>
</div>
</div>
<div class="centered-container">
<span v-if="slot.cpmctymc" :style="{
color: 'black',
fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
@ -183,15 +193,26 @@ export default {
/* 上边框的颜色框容器 */
.top-border-boxes {
display: flex;
height: 10px; /* 上边框颜色框的高度 */
height: 20px; /* 上边框颜色框的高度 */
padding: 0;
}
.top-border-boxes .left-box {
display: flex;
flex-grow: 5; /* 左边区域将占据剩余空间 */
}
.top-border-boxes .right-box {
display: flex;
flex-grow: 0.1;/* 右边区域将占据剩余空间 */
}
/* 上边框的颜色框 */
.top-border-box {
flex: 1; /* 平均分配宽度 */
height: 10px; /* 与容器高度一致 */
/*flex: 1; !* 平均分配宽度 *!*/
height:10px; /* 与容器高度一致 */
width: 10px; /* 与容器高度一致 */
border: 1px solid #ccc; /* 边框 */
border-radius: 50%; /* 使元素成为圆形 */
}
.red-box {

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

@ -26,16 +26,29 @@
>
<el-card class="slot-card">
<p style="font-size: 12px;fontWeight: bold">{{ slot.name }}</p>
<span :style="{
color: slot.reCount <= 0 ?'orange':'green' ,
fontSize: '12px',
fontWeight: 'bold',
position: 'absolute',
bottom: 0,
right: 0,
margin: '10px'
}">{{ slot.reCount <= 0 ?'低库存':'正常' }}
</span>
<div
v-for="(row, rowIndex) in slot.sysWorkplaceQueueList"
:key="rowIndex"
:style="{ display: 'flex', flexWrap: 'nowrap', height: `10px`,marginTop: `2px` }"
>
<div
v-for="(slot, slotIndex) in row.sysWorkplaceQueues"
:key="slot.id"
class="shelf-slot-Queue"
:style="{ width: `${180 / row.sysWorkplaceQueues.length}%` , height: `10px`, backgroundColor: slot.reCount <= 0? 'red': slot.reCount <= slot.remindCount?'orange':'green' }"
>
</div>
</div>
<!-- <span :style="{-->
<!-- color: slot.reCount <= 0 ?'orange':'green' ,-->
<!-- fontSize: '12px',-->
<!-- fontWeight: 'bold',-->
<!-- position: 'absolute',-->
<!-- bottom: 0,-->
<!-- right: 0,-->
<!-- margin: '10px'-->
<!-- }">{{ slot.reCount <= 0 ?'低库存':'正常' }}-->
<!-- </span>-->
</el-card>
</div>
@ -215,8 +228,8 @@ export default {
.shelf-slot {
margin-right: 10px; /* 增加槽位之间的间距 */
margin-bottom: 10px; /* 增加槽位之间的间距 */
width: 180px; /* 固定槽位宽度 */
height: 100px; /* 固定槽位高度 */
width: 200px; /* 固定槽位宽度 */
height: 200px; /* 固定槽位高度 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 水平居中 */
@ -226,6 +239,18 @@ export default {
z-index: 10;
}
.shelf-slot-Queue {
margin: 2px;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 水平居中 */
transition: transform 0.3s ease; /* 平滑的过渡效果 */
transform-style: preserve-3d; /* 保持3D变换的子元素在3D空间中 */
perspective: 800px; /* 设置透视效果，模拟3D深度 */
z-index: 66;
}
.shelf-slot:hover {
z-index: 25;
transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1.1); /* 悬停时应用3D变换和放大效果 */
@ -233,7 +258,7 @@ export default {
.slot-card {
width: 100%; /* 确保卡片宽度与槽位一致 */
height: 100%; /* 确保卡片高度与槽位一致 */
box-sizing: border-box; /* 确保宽度和高度包含内边距和边框 */
/*box-sizing: border-box; !* 确保宽度和高度包含内边距和边框 *!*/
/* 应用从白色到淡淡绿色的线性渐变背景 */
background: linear-gradient(to bottom, white, #d4edda);
/* #d4edda 是一个浅绿色，接近于 Bootstrap 中的成功提示背景色 */
@ -241,5 +266,4 @@ export default {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：为卡片添加阴影，增加立体感 */
position: relative; /* 为了让内部的绝对定位元素相对于卡片定位 */
}
</style>

Write Preview
Loading…
Cancel
Save