diff --git a/src/api/index.js b/src/api/index.js
index 3bba8ba..b930926 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,7 +1,36 @@
 import request from '../utils/request' 
+// 生产任务
 export function gettaskList() {
  return request({
     url: '/api/production/prd-mo/prd-task',
     method: 'post',
 })
 }
+// 原材料
+export function getYclList() {
+ return request({
+    url: '/api/wms/location-definition/yc-llocation',
+    method: 'post',
+})
+}
+// 中储仓
+export function getZccList() {
+ return request({
+    url: '/api/wms/location-definition/ct-ulocation',
+    method: 'post',
+})
+}
+// 成品仓
+export function getCpcList() {
+ return request({
+    url: '/api/wms/location-definition/c-plocation',
+    method: 'post',
+})
+}
+// 设备
+export function getEqpList() {
+ return request({
+    url: '/api/wms/location-definition/zsj-data',
+    method: 'post',
+})
+}
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index 3847f50..9d45766 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -8,7 +8,7 @@
   transform: translate(-50%, -50%);
   transform-origin: left top;
   overflow: hidden;
-  
+
   .bg {
     width: 100%;
     height: 100%;
@@ -19,18 +19,22 @@
   }
 
   .host-body {
+
     .dv-dec-10,
     .dv-dec-10-s {
       width: 33.3%;
       height: 5px;
     }
+
     .dv-dec-10-s {
       transform: rotateY(180deg);
     }
+
     .dv-dec-8 {
       width: 200px;
       height: 50px;
     }
+
     .title {
       position: relative;
       width: 500px;
@@ -39,7 +43,7 @@
       background-repeat: no-repeat;
 
       .title-text {
-        font-size: 24px;
+        font-size: 35px;
         position: absolute;
         bottom: 0;
         left: 50%;
@@ -60,6 +64,7 @@
     .aside-width {
       width: 40%;
     }
+
     .react-r-s,
     .react-l-s {
       background-color: #0f1325;
@@ -71,6 +76,7 @@
         text-align: right;
         width: 500px;
       }
+
       font-size: 18px;
       width: 300px;
       line-height: 50px;
@@ -94,10 +100,13 @@
     }
 
     .react-left {
+      user-select: none;
+
       &.react-l-s {
         width: 500px;
         text-align: left;
       }
+
       font-size: 18px;
       width: 300px;
       height: 50px;
@@ -141,4 +150,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/scss/tianyi.scss b/src/assets/scss/tianyi.scss
new file mode 100644
index 0000000..c8495bc
--- /dev/null
+++ b/src/assets/scss/tianyi.scss
@@ -0,0 +1,15 @@
+.typeOne {
+    background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
+}
+
+.typeTwo {
+    background-image: linear-gradient(#849384, darken(#849384, 20%));
+}
+
+.typeTh {
+    background-image: linear-gradient(#6acbf0, darken(#6acbf0, 20%));
+}
+
+.typeFo {
+    background-image: linear-gradient(red, darken(red, 20%));
+}
\ No newline at end of file
diff --git a/src/utils/fontSize.js b/src/utils/fontSize.js
index cd2f0cb..f650384 100644
--- a/src/utils/fontSize.js
+++ b/src/utils/fontSize.js
@@ -5,7 +5,7 @@
     function setBodyFontSize() {
       if (document.body) {
         // 1.body 字体大小默认为 16px
-        document.body.style.fontSize = 16 * dpr + "px";
+        document.body.style.fontSize = 14 * dpr + "px";
       } else {
         document.addEventListener("DOMContentLoaded", setBodyFontSize);
       }
diff --git a/src/utils/request.js b/src/utils/request.js
index 91c96b6..8f78ac4 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,6 +1,7 @@
 import axios from 'axios'
 const server = axios.create({
   baseURL: "http://192.168.11.109", //配置请求的url
+  // baseURL: "http://tnb.tuotong-tech.com", //配置请求的url
   timeout: 6000, //配置超时时间
   headers:{}//配置请求头
 })
diff --git a/src/views/cpcView/index.vue b/src/views/cpcView/index.vue
index fdabc0e..ad40712 100644
--- a/src/views/cpcView/index.vue
+++ b/src/views/cpcView/index.vue
@@ -1,223 +1,85 @@
 <template>
     <div class="box">
         <div v-for="(item, index) of data" :key="index" class="box-x">
-            <div class="index">{{ index + 1 }}</div>
-            <div v-for="(it, ind) of item" :key="ind" class="item" :class="it.type == 1 ? 'typeOne' : 'typeTwo'">
-                <div>
+            <!-- <div class="index">{{ index + 1 }}</div> -->
+            <!-- <div v-for="(it, ind) of item" :key="ind" class="item"
+                :class="it.type == 1 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'">
+                <div class="lists">
                     <div>{{ it.location_code }}</div>
                     <div v-if="it.type == 1">载具:LX001</div>
                     <div v-if="it.type == 1">物料:包装袋</div>
                     <div v-if="it.type == 1">数量:10</div>
                 </div>
+            </div> -->
+            <div class="index">{{ index + 1 }}</div>
+            <div>
+                <div class="item-top">
+                    <!-- <div class="item-x" v-if="item.type == 0"> </div> -->
+                    <div v-for="(it, ind) of item" :key="ind" class="item-x"
+                        :class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
+                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }">
+                        <div class="lists">
+                            <div>{{ it.location_code }}</div>
+                            <div v-if="it.type == 2">载具:LX00{{ ind }}</div>
+                            <div v-if="it.type == 2">物料:包装袋</div>
+                            <div v-if="it.type == 2">数量:10</div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import { getCpcList } from '@/api/index'
+
 export default {
     name: 'yclView',
     data() {
         return {
-            data: [
-                [
-                    { type: 1, location_code: 'YCL-A02-1' },
-                    { type: 2, location_code: 'YCL-A03-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                ],
-                [
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },]
-                ,
-                [
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A02-1' },
-                    { type: 2, location_code: 'YCL-A03-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                ],
-                [
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 0, location_code: 'YCL-A01-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },
-                    { type: 1, location_code: 'YCL-A11-1' },]
-                ,
-            ]
+            data: []
 
         }
     },
+    created() {
+        this.getCpcList()
+    },
     mounted() {
     },
     beforeDestroy() {
 
     },
     methods: {
-
+        getCpcList() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            getCpcList().then(res => {
+                console.log(res);
+                this.data = res.data.data || []
+                // console.log(this.data, 999);
+            }).finally(e => { loading.close(); })
+        }
     }
 }
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/tianyi.scss';
+
 .box {
     width: 100%;
     height: 860px;
-    // display: flex;
-    padding: 30px;
+    margin: 30px;
+    overflow-y: scroll;
 
-    // justify-content: space-evenly;
-    // flex-wrap: wrap;
     .box-x {
         display: flex;
-        margin-bottom: 10px;
+        margin-bottom: 30px;
 
         .index {
             display: flex;
@@ -227,37 +89,31 @@ export default {
         }
     }
 
-    .item {
-        width: 70px;
-        height: 75px;
+    .item-x {
+        width: 50px;
+        height: 60px;
         margin-right: 5px;
+        // margin-bottom: 5px;
         color: rgba(0, 0, 0, .5);
-        font-size: 9px;
-        display: inline-block;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        display: inline-grid;
+        position: relative;
+        border-radius: 8%;
 
-        div {
-            text-align: center;
-            // line-height: 18px;
+        .lists {
+            line-height: 10px;
+            width: 100%;
+            font-size: 8px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+
+            div {
+                text-align: center;
+            }
         }
     }
 
-    .typeOne {
-        background-color: #35ff39;
-        background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
 
-    }
-
-    .typeTwo {
-        background-color: #849384;
-        background-image: linear-gradient(#849384, darken(#849384, 20%));
-
-    }
-
-    .typeth {
-        background-color: #d2de25;
-    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/eqpView/index.vue b/src/views/eqpView/index.vue
index 0366f0c..9932841 100644
--- a/src/views/eqpView/index.vue
+++ b/src/views/eqpView/index.vue
@@ -1,83 +1,61 @@
 <template>
     <div class="box">
-        <div v-for="(it,ind) of data" :key="ind" class="item" :class="it.type==1?'typeOne':it.type==0?'typeTwo':'typeth'">
-            {{ it.name }}
+        <div v-for="(it, ind) of data" :key="ind" class="item"
+            :class="it.type == 1 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeFo'">
+            <div class="lists">
+                <div>{{ it.device_code }}</div>
+                <div>设备状态:{{ it.device_state.replace("。", "") }}</div>
+                <div v-if="it.zsspeed">注射速度:{{ it.zsspeed }}</div>
+                <div v-if="it.sjspeed">射胶速度:{{ it.sjspeed }}</div>
+                <div v-if="it.sjspeed">成型时间:{{ it.sjspeed }}</div>
+                <div v-if="it.temp1">一段温度:{{ it.temp1 }}</div>
+                <div v-if="it.temp3">三段温度:{{ it.temp3 }}</div>
+                <div v-if="it.temp5">五段温度:{{ it.temp5 }}</div>
+            </div>
         </div>
 
 
     </div>
 </template>
-  
+
 <script>
+import { getEqpList } from '@/api/index'
+
 export default {
     name: 'yclView',
     data() {
         return {
-            data: [
-                { type: 1, name: '设备1' },
-                { type: 2, name: '设备2' },
-                { type: 0, name: '设备3' },
-                { type: 0, name: '设备3' },
-                { type: 0, name: '设备3' },
-                { type: 0, name: '设备3' },
-                { type: 1, name: '设备3' },
-                { type: 0, name: '设备3' },
-                { type: 1, name: '设备3' },
-                { type: 1, name: '设备3' },
-                { type: 0, name: '设备3' },
-                { type: 0, name: '设备3' },
-                { type: 1, name: '设备3' },
-                { type: 1, name: '设备3' },
-                { type: 0, name: '设备3' },
-                { type: 1, name: '设备3' },
-                { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-                // { type: 0, name: '设备3' },
-            ]
+            data: []
 
         }
     },
+    created() {
+        this.getEqpList()
+    },
     mounted() {
     },
     beforeDestroy() {
 
     },
     methods: {
-
+        getEqpList() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            getEqpList().then(res => {
+                this.data = res.data.data || []
+            }).finally(e => { loading.close(); })
+        }
     }
 }
 </script>
-  
+
 <style lang="scss" scoped>
+@import '@/assets/scss/tianyi.scss';
+
 .box {
     width: 100%;
     height: 860px;
@@ -88,22 +66,26 @@ export default {
 
     .item {
         width: 200px;
-        height: 220px;
+        height: 210px;
         margin-right: 20px;
-        color: rgba(0, 0, 0, .5);
-        font-size: 20px;
+        color: #cbaeae;
+        // color: rgba(0, 0, 0, .5);
         text-align: center;
-        line-height: 220px;
+        border-radius: 6%;
+        position: relative;
+
         // padding-top: 90px;
+        .lists {
+            line-height: 20px;
+            width: 100%;
+            font-size: 14px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
     }
-    .typeOne{
-        background-color: #35ff39;
-    }
-    .typeTwo{
-        background-color: #849384;
-    }
-    .typeth{
-        background-color: #d2de25;
-    }
+
+
 }
 </style>
\ No newline at end of file
diff --git a/src/views/taskView/index.vue b/src/views/taskView/index.vue
index 8637e17..1cb18fb 100644
--- a/src/views/taskView/index.vue
+++ b/src/views/taskView/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="box">
-        <el-table :data="data" style="width: 100%" height="760" v-loading="loadingShow">
+        <el-table :data="data" style="width: 100%" height="640" v-loading="loadingShow">
             <el-table-column prop="mo_code" label="任务单编号">
             </el-table-column>
             <el-table-column prop="f_fullname" label="状态">
@@ -55,6 +55,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/tianyi.scss';
 .box {
     width: 100%;
     height: 860px;
diff --git a/src/views/yclView/index.vue b/src/views/yclView/index.vue
index 8ef0da8..aebdf5b 100644
--- a/src/views/yclView/index.vue
+++ b/src/views/yclView/index.vue
@@ -5,26 +5,28 @@
             <div>
                 <div class="item-top">
                     <div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x "
-                        :class="it.type == 1 ? 'typeOne' : 'typeTwo'">
+                        :class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
+                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }">
                         <div class="lists">
                             <div>{{ it.location_code }}</div>
                             <!-- <div>载具:LX001</div>
                     <div>物料:包装袋</div>
                     <div>数量:10</div> -->
-                            <div v-if="it.type == 1">载具:LX001</div>
-                            <div v-if="it.type == 1">物料:包装袋</div>
-                            <div v-if="it.type == 1">数量:10</div>
+                            <div v-if="it.type == 2">载具:LX001</div>
+                            <div v-if="it.type == 2">物料:包装袋</div>
+                            <div v-if="it.type == 2">数量:10</div>
                         </div>
                     </div>
                 </div>
                 <div class="item-bo">
                     <div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x"
-                        :class="it.type == 1 ? 'typeOne' : 'typeTwo'">
+                        :class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
+                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }">
                         <div class="lists">
                             <div>{{ it.location_code }}</div>
-                            <div v-if="it.type == 1">载具:LX001</div>
-                            <div v-if="it.type == 1">物料:包装袋</div>
-                            <div v-if="it.type == 1">数量:10</div>
+                            <div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
+                            <div v-if="it.type == 2">物料:包装袋</div>
+                            <div v-if="it.type == 2">数量:10</div>
                         </div>
                     </div>
                 </div>
@@ -34,357 +36,19 @@
 </template>
 
 <script>
+import { getYclList } from '@/api/index'
 export default {
     name: 'yclView',
     data() {
         return {
-            data: [
-                [
-                    { type: 1, location_code: 'YCL-A02-1', layer: '1' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                // [
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                //     { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                // ]
-                // ,
-                // [
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                //     { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                // ],
-                // [
-                //     { type: 1, location_code: 'YCL-A02-1',layer:'1' },
-                //     { type: 2, location_code: 'YCL-A03-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //   { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A02-1',layer:'2' },
-                // { type: 2, location_code: 'YCL-A03-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // ],
-                // [
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                // ],
-                // [
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                // ],
-                // [
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },]
-                // ,
-            ],
-            ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S']
+            data: [],
+            ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T']
 
         }
     },
+    created() {
+        this.getYclList()
+    },
     mounted() {
     },
     beforeDestroy() {
@@ -392,15 +56,60 @@ export default {
     },
     methods: {
         filterData(arr, key) {
-            return arr.filter(item => { return item.layer == key })
+            return arr.filter(item => { return item.layers == key })
+        },
+        getYclList() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            getYclList().then(res => {
+                console.log(res);
+                this.data = res.data.data || []
+                this.data.forEach((item, index) => {
+                    const arr = [1]
+                    const arrone = [3, 7, 10, 13, 14, 17]
+                    // const obj = { type: 1, location_code: '', layer: '1' }
+                    if (arr.some(it => { return it !== index + 1 })) {
+                        let fig = false
+                        if (index + 1 == 17 || index + 1 == 18) {
+                            for (let i = 1; i < 3; i++) {
+                                item.splice(37, 0, { type: 4, location_code: '', layers: i })
+                            }
+                            fig = true
+                        }
+                        for (let i = 1; i < 3; i++) {
+                            if (fig) break
+                            item.splice(36, 0, { type: 4, location_code: '', layers: i })
+                            // item.splice(36, 0, { type: 4, location_code: '', layers: i })
+                            // item.splice(36, 0, { type: 4, location_code: '', layers: i })
+                        }
+                    }
+                    if (arrone.some(it => { return it == index + 1 })) {
+                        for (let i = 1; i < 3; i++) {
+                            item.splice(8, 0, { type: 4, location_code: '', layers: i })
+                        }
+                        for (let i = 1; i < 3; i++) {
+                            item.splice(24, 0, { type: 4, location_code: '', layers: i })
+                        }
+                        for (let i = 1; i < 3; i++) {
+                            item.splice(52, 0, { type: 4, location_code: '', layers: i })
+                        }
+                    }
+                })
+            }).finally(e => { loading.close(); })
         }
     }
 }
 </script>
 
 <style lang="scss" scoped>
-// $sysColor: rgba(0, 194, 255, 0.9);
-$sysColor: rgba(237, 175, 109, 0.7);
+$sysColor: rgba(85, 110, 255, 0.9);
+
+
+@import '@/assets/scss/tianyi.scss';
 
 .box {
     width: 100%;
@@ -411,7 +120,7 @@ $sysColor: rgba(237, 175, 109, 0.7);
 
     .box-x {
         display: flex;
-        margin-bottom: 30px;
+        margin-bottom: 40px;
 
         .index {
             display: flex;
@@ -422,13 +131,14 @@ $sysColor: rgba(237, 175, 109, 0.7);
     }
 
     .item-x {
-        width: 110px;
-        height: 120px;
+        width: 48px;
+        height: 60px;
         margin-right: 5px;
         // margin-bottom: 5px;
         color: rgba(0, 0, 0, .5);
         display: inline-grid;
         position: relative;
+        border-radius: 8%;
 
         // div {
         //     text-align: center;
@@ -437,8 +147,9 @@ $sysColor: rgba(237, 175, 109, 0.7);
         // }
         .lists {
             // text-align: center;
-            line-height: 18px;
+            line-height: 10px;
             width: 100%;
+            font-size: 8px;
             // height: 100%;
             // display: flex;
             // justify-content: center;
@@ -458,7 +169,7 @@ $sysColor: rgba(237, 175, 109, 0.7);
         border-bottom: 2px solid $sysColor;
         border-left: 2px solid $sysColor;
         border-right: 2px solid $sysColor;
-        padding-bottom: 5px;
+        // padding-bottom: 5px;
         padding-left: 5px;
         // margin-bottom: 5px;
     }
@@ -470,16 +181,7 @@ $sysColor: rgba(237, 175, 109, 0.7);
         padding-left: 5px;
     }
 
-    .typeOne {
-        background-color: #35ff39;
-        background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
-        
-    }
 
-    .typeTwo {
-        background-color: #849384;
-        background-image: linear-gradient(#849384, darken(#849384, 20%));
 
-    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/zccView/index.vue b/src/views/zccView/index.vue
index 1886269..632e469 100644
--- a/src/views/zccView/index.vue
+++ b/src/views/zccView/index.vue
@@ -1,23 +1,23 @@
 <template>
     <div class="box">
         <div v-for="(item, index) of data" :key="index" class="box-x">
-            <div class="index">{{ ab[index] }}</div>
+            <!-- <div class="index">{{ ab[index] }}</div> -->
+            <div class="index">{{ index + 1 }}</div>
             <div>
-                <div class="item-top">
-                    <div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x "
-                        :class="it.type == 1 ? 'typeOne' : 'typeTwo'">
+                <div class="item-top" v-for="i of 6" :key="i">
+                    <!-- <div class="item-x" v-if="item.type == 0"> </div> -->
+                    <div v-for="(it, ind) of filterData(item, i)" :key="ind" class="item-x"
+                        :class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
+                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }">
                         <div class="lists">
                             <div>{{ it.location_code }}</div>
-                            <!-- <div>载具:LX001</div>
-                    <div>物料:包装袋</div>
-                    <div>数量:10</div> -->
-                            <div v-if="it.type == 1">载具:LX001</div>
-                            <div v-if="it.type == 1">物料:包装袋</div>
-                            <div v-if="it.type == 1">数量:10</div>
+                            <div v-if="it.type == 1 || it.type == 2">载具:{{ it.carry_code }}</div>
+                            <div v-if="it.type == 2">物料:包装袋</div>
+                            <div v-if="it.type == 2">数量:10</div>
                         </div>
                     </div>
                 </div>
-                <div class="item-bo">
+                <!-- <div class="item-bo">
                     <div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x"
                         :class="it.type == 1 ? 'typeOne' : 'typeTwo'">
                         <div class="lists">
@@ -27,364 +27,26 @@
                             <div v-if="it.type == 1">数量:10</div>
                         </div>
                     </div>
-                </div>
+                </div> -->
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import { getZccList } from '@/api/index'
 export default {
     name: 'yclView',
     data() {
         return {
-            data: [
-                [
-                    { type: 1, location_code: 'YCL-A02-1', layer: '1' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                [
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                    { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                    { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                ],
-                // [
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                //     { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                // ]
-                // ,
-                // [
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 1, location_code: 'YCL-A11-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '1' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A02-1', layer: '2' },
-                //     { type: 2, location_code: 'YCL-A03-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 1, location_code: 'YCL-A01-1', layer: '2' },
-                //     { type: 0, location_code: 'YCL-A01-1', layer: '2' },
-                // ],
-                // [
-                //     { type: 1, location_code: 'YCL-A02-1',layer:'1' },
-                //     { type: 2, location_code: 'YCL-A03-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //   { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A02-1',layer:'2' },
-                // { type: 2, location_code: 'YCL-A03-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 1, location_code: 'YCL-A01-1',layer:'2' },
-                // { type: 0, location_code: 'YCL-A01-1',layer:'2' },
-                // ],
-                // [
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 0, location_code: 'YCL-A01-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                // ],
-                // [
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                // ],
-                // [
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },
-                //     { type: 1, location_code: 'YCL-A11-1',layer:'1' },]
-                // ,
-            ],
-            ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S']
+            data: [],
+            // ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S']
 
         }
     },
+    created() {
+        this.getZccList()
+    },
     mounted() {
     },
     beforeDestroy() {
@@ -392,7 +54,28 @@ export default {
     },
     methods: {
         filterData(arr, key) {
-            return arr.filter(item => { return item.layer == key })
+            return arr.filter(item => { return item.layers == key })
+        },
+        getZccList() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            getZccList().then(res => {
+                this.data = res.data.data || []
+                this.data.forEach((item, index) => {
+                    const arr = [6, 7, 8, 9, 10, 24, 25, 26, 27, 28, 29, 40, 41, 42, 43, 44]
+                    // const obj = { type: 1, location_code: '', layer: '1' }
+                    if (arr.some(it => { return it == index + 1 })) {
+                        for (let i = 1; i < 7; i++) {
+                            item.splice(42, 0, { type: 4, location_code: '', layers: i })
+                            item.splice(42, 0, { type: 4, location_code: '', layers: i })
+                        }
+                    }
+                })
+            }).finally(e => { loading.close(); })
         }
     }
 }
@@ -402,16 +85,18 @@ export default {
 $sysColor: rgba(85, 110, 255, 0.9);
 // $sysColor: rgba(237, 175, 109, 0.7);
 
+@import '@/assets/scss/tianyi.scss';
+
 .box {
     width: 100%;
     height: 860px;
     margin: 30px;
     overflow-y: scroll;
-    // margin-bottom: 20px;
 
+    // margin-bottom: 20px;
     .box-x {
         display: flex;
-        margin-bottom: 30px;
+        margin-bottom: 40px;
 
         .index {
             display: flex;
@@ -422,27 +107,19 @@ $sysColor: rgba(85, 110, 255, 0.9);
     }
 
     .item-x {
-        width: 110px;
-        height: 120px;
-        margin-right: 5px;
+        width: 117px;
+        height: 135px;
+        margin-right: 10px;
         // margin-bottom: 5px;
         color: rgba(0, 0, 0, .5);
         display: inline-grid;
         position: relative;
+        border-radius: 8%;
 
-        // div {
-        //     text-align: center;
-        //     line-height: 18px;
-        //     // display: inline-grid;
-        // }
         .lists {
-            // text-align: center;
-            line-height: 18px;
+            line-height: 20px;
             width: 100%;
-            // height: 100%;
-            // display: flex;
-            // justify-content: center;
-            // flex-direction: column;
+            font-size: 14px;
             position: absolute;
             top: 50%;
             left: 50%;
@@ -455,29 +132,13 @@ $sysColor: rgba(85, 110, 255, 0.9);
     }
 
     .item-top {
-        border-bottom: 2px solid $sysColor;
-        border-left: 2px solid $sysColor;
-        border-right: 2px solid $sysColor;
-        padding-bottom: 5px;
-        padding-left: 5px;
-        // margin-bottom: 5px;
+        border: 2px solid $sysColor;
+        border-top: 0px;
+        padding: 5px 5px 0 5px;
     }
 
-    .item-bo {
-        border-left: 2px solid $sysColor;
-        border-right: 2px solid $sysColor;
-        padding-top: 5px;
-        padding-left: 5px;
-    }
-
-    .typeOne {
-        background-color: #35ff39;
-        background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
-    }
-
-    .typeTwo {
-        background-color: #849384;
-        background-image: linear-gradient(#849384, darken(#849384, 20%));
+    .item-top:last-child {
+        border-bottom: 0px;
     }
 }
 </style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 6e44772..fe85b14 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,7 +13,7 @@ module.exports = {
         postcss: {
             plugins: [
                 require('postcss-plugin-px2rem')({
-                     rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
+                     rootValue: 63, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                     unitPrecision: 5, //允许REM单位增长到的十进制数字。
                     propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                     propBlackList: [], //黑名单