转移仓库

src/views/zccView/index.vue

@@ -1,10 +1,17 @@
 <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 class="index">{{ index + 1 }}</div>
             <div>
-                <div class="item-top" v-for="i of 6" :key="i">
+                <div class="item-top" v-for="i of [6, 5, 4, 3, 2, 1]" :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'"
@@ -36,16 +43,18 @@
 <script>
 import { getZccList } from '@/api/index'
 export default {
-    name: 'yclView',
+    name: 'zccView',
     data() {
         return {
             data: [],
+            loadboxV:false,
             // ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S']
 
         }
     },
     created() {
         this.getZccList()
+        this.timer = setInterval(this.getYclListLoad, 30000);
     },
     mounted() {
     },
@@ -76,6 +85,23 @@ export default {
                     }
                 })
             }).finally(e => { loading.close(); })
+        },
+        // 定时器重复加载
+        getYclListLoad() {
+            this.loadboxV = true
+            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 => { this.loadboxV = false })
         }
     }
 }
@@ -140,5 +166,63 @@ $sysColor: rgba(85, 110, 255, 0.9);
     .item-top:last-child {
         border-bottom: 0px;
     }
+       // 加载动画
+       .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>