From 8254c9690d2150b496d4107e8c65ce270fba3660 Mon Sep 17 00:00:00 2001
From: chenhc <2369838784@qq.com>
Date: Mon, 20 Jan 2025 11:05:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShelfDisplay/index.vue    | 57 ++++++++++++++++--------
 src/views/basic/workplace/rackManage.vue | 52 +++++++++++++++------
 2 files changed, 77 insertions(+), 32 deletions(-)

diff --git a/src/components/ShelfDisplay/index.vue b/src/components/ShelfDisplay/index.vue
index ae3fd5f0..327592c0 100644
--- a/src/components/ShelfDisplay/index.vue
+++ b/src/components/ShelfDisplay/index.vue
@@ -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 {
diff --git a/src/views/basic/workplace/rackManage.vue b/src/views/basic/workplace/rackManage.vue
index 9d603bde..fb89536b 100644
--- a/src/views/basic/workplace/rackManage.vue
+++ b/src/views/basic/workplace/rackManage.vue
@@ -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>