diff --git a/src/api/basic/workPlace/SysWorkplaceLayer.js b/src/api/basic/workPlace/SysWorkplaceLayer.js
index 68c8f477..ef540be6 100644
--- a/src/api/basic/workPlace/SysWorkplaceLayer.js
+++ b/src/api/basic/workPlace/SysWorkplaceLayer.js
@@ -42,3 +42,12 @@ export function getListByFreightCode(query) {
     params: query
   });
 }
+
+
+export function getListByFreightCodeView(query) {
+  return axios({
+    url: "/udiwms/WorkplaceLayer/getListByFreightCodeView",
+    method: "get",
+    params: query
+  });
+}
diff --git a/src/components/ShelfDisplay/index.vue b/src/components/ShelfDisplay/index.vue
index 8b76ed8e..9a7f430c 100644
--- a/src/components/ShelfDisplay/index.vue
+++ b/src/components/ShelfDisplay/index.vue
@@ -18,16 +18,16 @@
           >
             <div class="top-border-boxes">
               <div
-                :class="['top-border-box', {'red-box': slot.colors.includes('red')} ? {'red-box': slot.colors.includes('red')} : 'white-box' ]"
+                :class="['top-border-box',  slot.red != null && slot.red != 0 ?  'red-box' : 'white-box' ]"
               ></div>
               <div
-                :class="['top-border-box', {'blue-box': slot.colors.includes('blue')} ? {'blue-box': slot.colors.includes('blue')} : 'white-box' ]"
+                :class="['top-border-box',  slot.blue != null &&slot.blue != 0 ?  'blue-box': 'white-box' ]"
               ></div>
               <div
-                :class="['top-border-box', {'green-box': slot.colors.includes('green')} ? {'green-box': slot.colors.includes('green')} : 'white-box' ]"
+                :class="['top-border-box',  slot.green != null &&slot.green != 0 ?  'green-box'  : 'white-box' ]"
               ></div>
               <div
-                :class="['top-border-box', {'yellow-box': slot.colors.includes('yellow')} ? {'yellow-box': slot.colors.includes('yellow')} : 'white-box' ]"
+                :class="['top-border-box',  slot.orange != null &&slot.orange != 0 ?  'orange-box':  'white-box' ]"
               ></div>
             </div>
             <div class="centered-container">
@@ -148,8 +148,8 @@ export default {
   background-color: green;
 }
 
-.yellow-box {
-  background-color: yellow;
+.orange-box {
+  background-color: orange;
 }
 
 .white-box {
diff --git a/src/views/basic/workplace/rackManage.vue b/src/views/basic/workplace/rackManage.vue
index 08e85374..85462a9a 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="shelfData"
+      :shelfData="this.layerList"
       @slot-click="handleSlotClick"
       :freightCode="freightCode"
     >
@@ -47,7 +47,7 @@
 <script>
 import ShelfDisplay from "@/components/ShelfDisplay";
 import { getWorkplaceFreightList } from '@/api/basic/workPlace/SysWorkplaceFreight'
-import { getListByFreightCode } from '@/api/basic/workPlace/SysWorkplaceLayer'
+import { getListByFreightCodeView } from '@/api/basic/workPlace/SysWorkplaceLayer'
 
 export default {
   components:{ShelfDisplay},
@@ -59,71 +59,71 @@ export default {
           id: 1,
           height: 50,
           sysWorkplaceQueues: [
-            { id: 1, code: 'Item A1' ,colors: [    'green']},
-            { id: 2, code: 'Item A2' ,colors: [  'blue', 'green']},
-            { id: 3, code: 'Item 3' ,colors: ['red', 'yellow', ]},
-            { id: 4, code: 'Item 4' ,colors: ['yellow',  ]},
+            { id: 1, code: 'Item A1' ,red:0,green:0,blue:0,orange:1 },
+            { id: 2, code: 'Item A2' ,red:0,green:0,blue:0,orange:1 },
+            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
           ]
         },
         {
           row: 2,
           height: 80,
           sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1' ,colors: ['red', 'blue', 'green']},
-            { id: 2, code: 'Item B2' ,colors: [  'yellow' ]},
-            { id: 3, code: 'Item 3' ,colors: [  'blue' ]},
-            { id: 4, code: 'Item 4' ,colors: ['red',  'green']},
-            { id: 5, code: 'Item 3' ,colors: [  'yellow' ]},
-            { id: 5, code: 'Item 3' ,colors: [  'blue' ]},
+            { id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
+            { id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
+            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
           ]
         },
         {
           row: 3,
           height: 80,
           sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1' ,colors: ['red',  'green']},
-            { id: 2, code: 'Item B2' ,colors: ['red', 'blue',  ]},
-            { id: 3, code: 'Item 3' ,colors: [ 'green']},
-            { id: 4, code: 'Item 4' ,colors: [ 'green'] },
-            { id: 5, code: 'Item 3' ,colors: [ 'green']},
+            { id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
+            { id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
+            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3',red:0,green:0,blue:0,orange:1 },
           ]
         },
         {
           row: 6,
           height: 80,
           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: [ 'yellow']},
-            { id: 5, code: 'Item 3' ,colors: [ 'yellow']},
-            { id: 5, code: 'Item 3' ,colors: ['red', 'blue', 'green']},
+            { id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
+            { id: 2, code: 'Item B2',red:0,green:0,blue:0,orange:1 },
+            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
           ]
         },
         {
           row: 5,
           height: 200,
           sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1',colors: [ 'yellow'] },
-            { id: 2, code: 'Item B2' ,colors: [ 'yellow']},
-            { 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']},
+            { id: 1, code: 'Item B1',red:0,green:0,blue:0,orange:1  },
+            { id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3',red:0,green:0,blue:0,orange:1  },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
           ]
         },
         {
           row: 4,
           height: 80,
           sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1' ,colors: [ 'green']},
-            { id: 2, code: 'Item B2' ,colors: ['yellow'] },
-            { id: 3, code: 'Item 3' ,colors: ['red'] },
-            { id: 4, code: 'Item 4',colors: [ 'yellow'] },
-            { id: 5, code: 'Item 3' ,colors: [ 'green']},
+            { id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
+            { id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
+            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1  },
+            { id: 4, code: 'Item 4',red:0,green:0,blue:0,orange:1 },
+            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
           ]
         },
       ],
@@ -152,7 +152,7 @@ export default {
       let query = {
         freightCode:  this.freightCode
       }
-      getListByFreightCode(query).then(res => {
+      getListByFreightCodeView(query).then(res => {
         this.layerList = res.data
       })
     },