diff --git a/package.json b/package.json
index a8794e6..6e2c4b0 100644
--- a/package.json
+++ b/package.json
@@ -46,11 +46,13 @@
       "parser": "babel-eslint"
     },
     "rules": {
-      "no-unused-vars": "off"
+      "no-unused-vars": "off",
+      "no-debugger": "off",
+      "no-console": "off"
     }
   },
   "browserslist": [
     "> 1%",
     "last 2 versions"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/api/index.js b/src/api/index.js
index b930926..78c061e 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -34,3 +34,4 @@ export function getEqpList() {
     method: 'post',
 })
 }
+
diff --git a/src/assets/scss/tianyi.scss b/src/assets/scss/tianyi.scss
index c8495bc..0f4e133 100644
--- a/src/assets/scss/tianyi.scss
+++ b/src/assets/scss/tianyi.scss
@@ -12,4 +12,24 @@
 
 .typeFo {
     background-image: linear-gradient(red, darken(red, 20%));
+}
+
+
+.type0 {
+    background-image: linear-gradient(#849384, darken(#849384, 20%));
+}
+.type1 {
+    background-image: linear-gradient(#6acbf0, darken(#6acbf0, 20%));
+}
+.type2 {
+    background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
+}
+.type3 {
+    background-image: linear-gradient(#d3ff33, darken(#d3ff33, 20%));
+}
+.type4 {
+    background-image: linear-gradient(#ff7db7, darken(#ff7db7, 20%));
+}
+.type5 {
+    background-image: linear-gradient(red, darken(red, 20%));
 }
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index 8f78ac4..028a123 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,7 +2,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, //配置超时时间
+  timeout: 30000, //配置超时时间
   headers:{}//配置请求头
 })
 // axios的拦截器
diff --git a/src/views/cpcView/index.vue b/src/views/cpcView/index.vue
index 011bc60..5829067 100644
--- a/src/views/cpcView/index.vue
+++ b/src/views/cpcView/index.vue
@@ -1,33 +1,26 @@
 <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' : 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 || it.type == 1">载具:{{ it.carry_code }}</div>
-                            <div v-if="it.type == 2">物料:{{ it.material_code }}</div>
-                            <div v-if="it.type == 2">数量:{{ it.num }}</div>
+        <div v-for="(items, indexs) of data" :key="indexs">
+            <div class="title">{{ region[indexs] }}</div>
+            <div v-for="(item, index) of items" :key="index" class="box-x">
+                <div class="index">{{ index + 1 }}</div>
+                <div>
+                    <div class="item-top">
+                        <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 || it.type == 1">载具:{{ it.carry_code }}</div>
+                                <div v-if="it.type == 2">物料:{{ it.material_code }}</div>
+                                <div v-if="it.type == 2">数量:{{ it.num }}</div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+
     </div>
 </template>
 
@@ -38,8 +31,8 @@ export default {
     name: 'yclView',
     data() {
         return {
-            data: []
-
+            data: [],
+            region: ['A', 'B', 'C']
         }
     },
     created() {
@@ -61,8 +54,147 @@ export default {
             getCpcList().then(res => {
                 console.log(res);
                 this.data = res.data.data || []
-                // console.log(this.data, 999);
+                let arr1 = []
+                let arr2 = []
+                // let arr3 = []
+                this.data.forEach(item => {
+                    if (item[0].location_code.indexOf("A") !== -1) {
+                        arr1.push(item)
+                    }
+                    if (item[0].location_code.indexOf("B") !== -1) {
+                        arr2.push(item)
+                    }
+                })
+                arr1 = this.formatFn(arr1, 'A')
+                arr2 = this.formatFn(arr2, 'B')
+                // arr3 = this.formatFn(arr3)
+                // this.data = [arr1, arr2, arr3]
+                this.data = [arr1, arr2]
+                console.log(this.data, 999);
             }).finally(e => { loading.close(); })
+
+        },
+        formatFn(arr1, fig) {
+            let arr3 = []
+            arr1.forEach(item => {
+                item.forEach(it => {
+                    if (!arr3.length) return arr3.push([it])
+                    let fig = arr3.findIndex(value => value[0].location_code.slice(-2) == it.location_code.slice(-2))
+                    if (fig < 0) {
+                        arr3.push([it])
+                    } else {
+                        arr3[fig].push(it)
+                    }
+                })
+            })
+            if (fig == 'A') {
+                const arrone = [4, 7, 11, 15, 19, 23, 27]
+                const arrtwo = [4, 5, 13, 19, 20]
+                arr3.forEach((item, index) => {
+                    if (arrtwo.some(it => { return it == index + 1 })) {
+                        arrone.forEach(it => {
+                            item.splice(it, 0, { type: 4, location_code: '' })
+                        })
+                    }
+                    if (17 == index + 1 || 18 == index + 1) {
+                        item.splice(4, 0, { type: 4, location_code: '' })
+                    }
+                    if (21 == index + 1) {
+                        item.splice(7, 0, { type: 4, location_code: '' })
+                        item.splice(15, 0, { type: 4, location_code: '' })
+                        item.splice(19, 0, { type: 4, location_code: '' })
+                        item.splice(23, 0, { type: 4, location_code: '' })
+                        item.splice(27, 0, { type: 4, location_code: '' })
+                    }
+                    if (22 == index + 1) {
+                        item.splice(15, 0, { type: 4, location_code: '' })
+                        item.splice(19, 0, { type: 4, location_code: '' })
+                        item.splice(23, 0, { type: 4, location_code: '' })
+                        item.splice(27, 0, { type: 4, location_code: '' })
+                    }
+                    if (27 == index + 1) {
+                        item.splice(4, 0, { type: 4, location_code: '' })
+                        item.splice(7, 0, { type: 4, location_code: '' })
+                    }
+                    if (28 == index + 1) {
+                        item.splice(4, 0, { type: 4, location_code: '' })
+                        item.splice(7, 0, { type: 4, location_code: '' })
+                        item.splice(11, 0, { type: 4, location_code: '' })
+                        item.splice(15, 0, { type: 4, location_code: '' })
+                        item.splice(19, 0, { type: 4, location_code: '' })
+                        item.splice(23, 0, { type: 4, location_code: '' })
+                        item.splice(27, 0, { type: 4, location_code: '' })
+                    }
+                    if (index + 1 > 33) {
+                        item.splice(0, 0, { type: 4, location_code: '' })
+                        if (34 == index + 1) {
+                            item.splice(7, 0, { type: 4, location_code: '' })
+                            item.splice(11, 0, { type: 4, location_code: '' })
+                            item.splice(15, 0, { type: 4, location_code: '' })
+                            item.splice(27, 0, { type: 4, location_code: '' })
+                        }
+                        if (35 == index + 1) {
+                            item.splice(7, 0, { type: 4, location_code: '' })
+                            item.splice(11, 0, { type: 4, location_code: '' })
+                            item.splice(15, 0, { type: 4, location_code: '' })
+                            item.splice(19, 0, { type: 4, location_code: '' })
+                            item.splice(23, 0, { type: 4, location_code: '' })
+                            item.splice(27, 0, { type: 4, location_code: '' })
+                        }
+                        if (36 == index + 1 || 37 == index + 1) {
+                            item.splice(15, 0, { type: 4, location_code: '' })
+                            item.splice(27, 0, { type: 4, location_code: '' })
+                        }
+                        if (43 == index + 1) {
+                            item.splice(7, 0, { type: 4, location_code: '' })
+                            item.splice(11, 0, { type: 4, location_code: '' })
+                            item.splice(15, 0, { type: 4, location_code: '' })
+                            item.splice(19, 0, { type: 4, location_code: '' })
+                            item.splice(23, 0, { type: 4, location_code: '' })
+                            item.splice(27, 0, { type: 4, location_code: '' })
+                        }
+                    }
+                })
+            } else if (fig == 'B') {
+                arr3.sort((a, b) => a[0].location_code.slice(-2) - b[0].location_code.slice(-2))
+                const arrone = [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
+                const arrtwo = [6, 14, 21, 29, 30, 36, 44, 45]
+                const arrth = [4, 7, 11, 15, 19, 23, 27]
+                arr3.forEach((item, index) => {
+                    if (arrone.some(it => { return it == index + 1 })) {
+                        for (let i = 1; i < 5; i++) {
+                            item.splice(0, 0, { type: 4, location_code: '' })
+                        }
+                    }
+                    if (arrtwo.some(it => { return it == index + 1 })) {
+                        arrth.forEach(it => {
+                            item.splice(it, 0, { type: 4, location_code: '' })
+                        })
+                        if (index + 1 == 6 || index + 1 == 14) { item.splice(4, 1) }
+                    }
+                    if (4 == index + 1) {
+                        item.splice(4, 0, { type: 4, location_code: '' })
+                    }
+                    if (12 == index + 1 || 13 == index + 1) {
+                        item.splice(15, 0, { type: 4, location_code: '' })
+                    }
+                    if (15 == index + 1) {
+                        item.splice(15, 0, { type: 4, location_code: '' })
+                        item.splice(26, 0, { type: 4, location_code: '' })
+                    }
+                    if (27 == index + 1 || 28 == index + 1) {
+                        item.splice(4, 0, { type: 4, location_code: '' })
+                        item.splice(27, 0, { type: 4, location_code: '' })
+                    }
+                    if (37 == index + 1) {
+                        item.splice(15, 0, { type: 4, location_code: '' })
+                    }
+                    if (46 == index + 1) {
+                        item.splice(4, 0, { type: 4, location_code: '' })
+                    }
+                })
+            }
+            return arr3
         }
     }
 }
@@ -76,9 +208,17 @@ export default {
     height: 860px;
     margin: 30px;
     overflow-y: scroll;
+
+    .title {
+        text-align: center;
+        font-size: 30px;
+        margin: 15px;
+    }
+
     .box-x {
         display: flex;
         margin-bottom: 30px;
+
         .index {
             display: flex;
             align-items: center;
@@ -86,6 +226,7 @@ export default {
             width: 10px;
         }
     }
+
     .item-x {
         width: 50px;
         height: 60px;
diff --git a/src/views/index.vue b/src/views/index.vue
index d836ed3..05a7f56 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -57,6 +57,10 @@
               <span class="react-after"></span>
               <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
             </div>
+            <!-- <div class="react-right mr-4 react-l-s">
+              <span class="react-after"></span>
+              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
+            </div> -->
           </div>
         </div>
 
diff --git a/src/views/yclView/index copy.vue b/src/views/yclView/index copy.vue
new file mode 100644
index 0000000..0680134
--- /dev/null
+++ b/src/views/yclView/index copy.vue	
@@ -0,0 +1,241 @@
+<template>
+    <div class="box">
+        <div v-for="(item, index) of data" :key="index" class="box-x">
+            <div class="index">{{ ab[index] }}</div>
+            <div>
+                <div class="item-top">
+                    <div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x "
+                        :class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
+                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
+                        @mouseleave="mouseleave(it, $event)">
+                        <div class="lists">
+                            <div>{{ it.location_code }}</div>
+                            <div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
+                            <div v-if="it.type == 2">物料:{{ it.material_code }}</div>
+                            <div v-if="it.type == 2">数量:{{ it.num }}</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 == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
+                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
+                        @mouseleave="mouseleave(it, $event)">
+                        <div class="lists">
+                            <div>{{ it.location_code }}</div>
+                            <div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
+                            <div v-if="it.type == 2">物料:{{ it.material_code }}</div>
+                            <div v-if="it.type == 2">数量:{{ it.num }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="float" ref="float">
+            <div>库位编号：{{ this.mouseInfo.location_code }}</div>
+            <div>物料编码：{{ this.mouseInfo.material_code }}</div>
+            <div>数量：{{ this.mouseInfo.qty }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getYclList } from '@/api/index'
+export default {
+    name: 'yclView',
+    data() {
+        return {
+            data: [],
+            ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T'],
+            mouseInfo: {}
+
+        }
+    },
+    created() {
+        this.getYclList()
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        filterData(arr, 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 (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 })
+                        }
+                        if (index + 1 !== 17) {
+                            for (let i = 1; i < 3; i++) {
+                                item.splice(50, 0, { type: 4, location_code: '', layers: i })
+                            }
+                        } else {
+                            for (let i = 1; i < 3; i++) {
+                                item.splice(57, 0, { type: 4, location_code: '', layers: i })
+                            }
+                        }
+
+                    }
+                    if (arr.some(it => { return it !== index + 1 })) {
+                        let fig = false
+                        if (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 })
+                        }
+                    }
+                })
+                console.log(this.data, 99);
+            }).finally(e => { loading.close(); })
+        },
+        mouseenter(it, e) {
+            this.$refs.float.style.display = "block"
+            this.$refs.float.style.left = e.clientX / document.body.clientWidth * 100 + "%"
+            this.$refs.float.style.top = e.clientY / document.body.clientHeight * 100 + "%"
+            this.mouseInfo = it
+            console.log(it);
+        },
+        mouseleave(it, e) {
+            this.$refs.float.style.display = "none"
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+$sysColor: rgba(85, 110, 255, 0.9);
+
+
+@import '@/assets/scss/tianyi.scss';
+
+.box {
+    width: 100%;
+    height: 860px;
+    margin: 30px;
+    overflow-y: scroll;
+    // margin-bottom: 20px;
+
+    .box-x {
+        display: flex;
+        margin-bottom: 40px;
+
+        .index {
+            display: flex;
+            align-items: center;
+            margin-right: 30px;
+            width: 10px;
+        }
+    }
+
+    .item-x {
+        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;
+        //     line-height: 18px;
+        //     // display: inline-grid;
+        // }
+        .lists {
+            // text-align: center;
+            line-height: 10px;
+            width: 100%;
+            font-size: 7px;
+            // height: 100%;
+            // display: flex;
+            // justify-content: center;
+            // flex-direction: column;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+
+            div {
+                text-align: center;
+            }
+        }
+    }
+
+    .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;
+        // div {
+        //     position: relative;
+        // }
+
+        // div:nth-child(18):before {
+        //     width: 45px;
+        //     height: 125px;
+        //     content: "";
+        //     border: solid 2px rgba(85, 110, 255, 0.9);
+        //     padding: 2px;
+        //     margin: 0 10px 0 0;
+        //     position: absolute;
+        //     top: 110%;
+        //     left: 160%;
+        //     transform: translate(-50%, -50%);
+        // }
+
+    }
+
+    .item-bo {
+        border-left: 2px solid $sysColor;
+        border-right: 2px solid $sysColor;
+        padding-top: 5px;
+        padding-left: 5px;
+    }
+
+    .float {
+        width: 200px;
+        // height: 240px;
+        background-color: antiquewhite;
+        position: fixed;
+        top: 0;
+        left: 0;
+        // background-color: rgb(44, 43, 43);
+        background: -webkit-linear-gradient(top, rgba(0,0,0,1)0%,rgba(0,0,0,0.5)66%, rgba(0,0,0,0)99%);
+        color: #fff;
+        text-align: center;
+        border-radius: 6px;
+        padding: 5px 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/yclView/index.vue b/src/views/yclView/index.vue
index f4357c1..62f3b0b 100644
--- a/src/views/yclView/index.vue
+++ b/src/views/yclView/index.vue
@@ -1,58 +1,81 @@
 <template>
     <div class="box">
+        <div class="loadbox" v-if="loadboxV">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
         <div v-for="(item, index) of data" :key="index" class="box-x">
             <div class="index">{{ ab[index] }}</div>
             <div>
                 <div class="item-top">
-                    <div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x "
-                        :class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
-                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }">
+                    <div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x "
+                        :class="`type${it.status}`"
+                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
+                        @mouseleave="mouseleave(it, $event)">
                         <div class="lists">
                             <div>{{ it.location_code }}</div>
-                            <!-- <div>载具:LX001</div>
-                    <div>物料:包装袋</div>
-                    <div>数量:10</div> -->
-                            <div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
-                            <div v-if="it.type == 2">物料:{{ it.material_code }}</div>
+                            <!-- <div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div> -->
+                            <div v-if="it.type == 2">{{ it.material_code }}</div>
+                            <div v-if="it.type == 2">{{ it.material_name }}</div>
                             <div v-if="it.type == 2">数量:{{ it.num }}</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 == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
-                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }">
+                    <div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x"
+                        :class="`type${it.status}`"
+                        :style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
+                        @mouseleave="mouseleave(it, $event)">
                         <div class="lists">
                             <div>{{ it.location_code }}</div>
-                            <div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
-                            <div v-if="it.type == 2">物料:{{ it.material_code }}</div>
+                            <div v-if="it.type == 2">{{ it.material_code }}</div>
+                            <div v-if="it.type == 2">{{ it.material_name }}</div>
+                            <div v-if="it.type == 2">{{ it.code_batch }}</div>
                             <div v-if="it.type == 2">数量:{{ it.num }}</div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- <div class="float" ref="float">
+            <div>库位编号：{{ this.mouseInfo.location_code }}</div>
+            <div>物料编码：{{ this.mouseInfo.material_code }}</div>
+            <div>物料批次：{{ this.mouseInfo.code_batch }}</div>
+            <div>数量：{{ this.mouseInfo.qty }}</div>
+            <div>载具编号：{{ this.mouseInfo.carry_code }}</div>
+        </div> -->
     </div>
 </template>
 
 <script>
+// 0 空库（包括已锁定）
+// 1 空载具码垛
+// 2 合格品
+// 3 待检
+// 4 让步接受
+// 5 不合格
 import { getYclList } from '@/api/index'
 export default {
     name: 'yclView',
     data() {
         return {
             data: [],
-            ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T']
-
+            ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T'],
+            mouseInfo: {},
+            loadboxV: false
         }
     },
     created() {
         this.getYclList()
+        this.timer = setInterval(this.getYclListLoad, 30000);
     },
     mounted() {
     },
     beforeDestroy() {
-
+        clearInterval(this.timer);
     },
     methods: {
         filterData(arr, key) {
@@ -80,27 +103,30 @@ export default {
                         for (let i = 1; i < 3; i++) {
                             item.splice(24, 0, { type: 4, location_code: '', layers: i })
                         }
-                        if (index + 1 !== 17) {
-                            for (let i = 1; i < 3; i++) {
+                        // if (index + 1 !== 17) {
+                        //     for (let i = 1; i < 3; i++) {
+                        //         item.splice(50, 0, { type: 4, location_code: '', layers: i })
+                        //     }
+                        // } else {
+                        //     for (let i = 1; i < 3; i++) {
+                        //         item.splice(50, 0, { type: 4, location_code: '', layers: i })
+                        //     }
+                        // }
+                        for (let i = 1; i < 3; i++) {
                                 item.splice(50, 0, { type: 4, location_code: '', layers: i })
                             }
-                        } else {
-                            for (let i = 1; i < 3; i++) {
-                                item.splice(57, 0, { type: 4, location_code: '', layers: i })
-                            }
-                        }
 
                     }
                     if (arr.some(it => { return it !== index + 1 })) {
-                        let fig = false
-                        if (index + 1 == 18) {
-                            for (let i = 1; i < 3; i++) {
-                                item.splice(37, 0, { type: 4, location_code: '', layers: i })
-                            }
-                            fig = true
-                        }
+                        // let fig = false
+                        // if (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
+                            // 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 })
@@ -109,6 +135,46 @@ export default {
                 })
                 console.log(this.data, 99);
             }).finally(e => { loading.close(); })
+        },
+        mouseenter(it, e) {
+            // this.$refs.float.style.display = "block"
+            // this.$refs.float.style.left = e.clientX / document.body.clientWidth * 100 + "%"
+            // this.$refs.float.style.top = e.clientY / document.body.clientHeight * 100 + "%"
+            // this.mouseInfo = it
+            // console.log(it);
+        },
+        mouseleave(it, e) {
+            // this.$refs.float.style.display = "none"
+        },
+        // 定时器重复加载
+        getYclListLoad() {
+            this.loadboxV = true
+            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]
+                    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(50, 0, { type: 4, location_code: '', layers: i })
+                            }
+
+                    }
+                    if (arr.some(it => { return it !== index + 1 })) {
+                        for (let i = 1; i < 3; i++) {
+                            item.splice(36, 0, { type: 4, location_code: '', layers: i })
+                        }
+                    }
+                })
+                console.log(this.data, 99);
+            }).finally(e => { this.loadboxV = false })
         }
     }
 }
@@ -140,11 +206,11 @@ $sysColor: rgba(85, 110, 255, 0.9);
     }
 
     .item-x {
-        width: 48px;
-        height: 60px;
+        width: 51px;
+        height: 70px;
         margin-right: 5px;
         // margin-bottom: 5px;
-        color: rgba(0, 0, 0, .5);
+        color: rgba(0, 0, 0);
         display: inline-grid;
         position: relative;
         border-radius: 8%;
@@ -158,7 +224,7 @@ $sysColor: rgba(85, 110, 255, 0.9);
             // text-align: center;
             line-height: 10px;
             width: 100%;
-            font-size: 7px;
+            font-size: 8px;
             // height: 100%;
             // display: flex;
             // justify-content: center;
@@ -208,7 +274,78 @@ $sysColor: rgba(85, 110, 255, 0.9);
         padding-left: 5px;
     }
 
+    .float {
+        width: 220px;
+        // height: 240px;
+        background-color: antiquewhite;
+        position: fixed;
+        top: 0;
+        left: 0;
+        // background-color: rgb(44, 43, 43);
+        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1)0%, rgba(0, 0, 0, 0.5)66%, rgba(0, 0, 0, 0)99%);
+        color: #fff;
+        // text-align: center;
+        border-radius: 6px;
+        padding: 10px;
+    }
 
+    // 加载动画
+    .loadbox {
+        position: relative;
+        width: 90px;
+        height: 50px;
+        // margin: 50px auto;
+        position: fixed;
+        top: 40px;
+        right: 20px;
+    }
 
+    .loadbox span {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background: #3498db;
+        opacity: 0.5;
+        border-radius: 100%;
+        animation: anim 1s infinite ease-in-out;
+    }
+
+    .loadbox> :nth-child(2) {
+        left: 20px;
+        animation-delay: 0.2s;
+    }
+
+    .loadbox> :nth-child(3) {
+        left: 40px;
+        animation-delay: 0.4s;
+    }
+
+    .loadbox> :nth-child(4) {
+        left: 60px;
+        animation-delay: 0.6s;
+    }
+
+    .loadbox> :nth-child(5) {
+        left: 80px;
+        animation-delay: 0.8s;
+    }
+
+    @keyframes anim {
+        0% {
+            opacity: 0.3;
+            transform: translateY(0px);
+        }
+
+        50% {
+            opacity: 1;
+            transform: translateY(-10px);
+            background: #64dbe3;
+        }
+
+        100% {
+            opacity: 0.3;
+            transform: translateY(0px);
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index fe85b14..e4c342f 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,7 +13,7 @@ module.exports = {
         postcss: {
             plugins: [
                 require('postcss-plugin-px2rem')({
-                     rootValue: 63, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
+                    rootValue: 63, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                     unitPrecision: 5, //允许REM单位增长到的十进制数字。
                     propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                     propBlackList: [], //黑名单