From 9c4002de965e013c25b14b3d5b7104277670e0c8 Mon Sep 17 00:00:00 2001
From: chenhc <2369838784@qq.com>
Date: Wed, 15 Jan 2025 11:13:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShelfDisplay/index.vue    | 78 ++++++++++++++++++++----
 src/views/basic/workplace/rackManage.vue | 76 +++++++++++------------
 2 files changed, 103 insertions(+), 51 deletions(-)

diff --git a/src/components/ShelfDisplay/index.vue b/src/components/ShelfDisplay/index.vue
index e0bd4109..10fbf0de 100644
--- a/src/components/ShelfDisplay/index.vue
+++ b/src/components/ShelfDisplay/index.vue
@@ -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>
diff --git a/src/views/basic/workplace/rackManage.vue b/src/views/basic/workplace/rackManage.vue
index b266eb63..a8e4508d 100644
--- a/src/views/basic/workplace/rackManage.vue
+++ b/src/views/basic/workplace/rackManage.vue
@@ -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']},
           ]
         },
       ],