tianyi_DataV/src/views/zccView/index.vue

<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, 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'"
                        :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 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">
                            <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> -->
            </div>
        </div>
    </div>
</template>

<script>
import { getZccList } from '@/api/index'
export default {
    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() {
    },
    beforeDestroy() {

    },
    methods: {
        filterData(arr, 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(); })
        },
        // 定时器重复加载
        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 })
        }
    }
}
</script>

<style lang="scss" scoped>
$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;
    .box-x {
        display: flex;
        margin-bottom: 40px;

        .index {
            display: flex;
            align-items: center;
            margin-right: 30px;
            width: 10px;
        }
    }

    .item-x {
        width: 100px;
        height: 115px;
        margin-right: 25px;
        // margin-bottom: 5px;
        color: rgba(0, 0, 0, .5);
        display: inline-grid;
        position: relative;
        border-radius: 8%;

        .lists {
            line-height: 20px;
            width: 100%;
            font-size: 12px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            div {
                text-align: center;
            }
        }
    }

    .item-top {
        border: 2px solid $sysColor;
        border-top: 0px;
        padding: 8px 8px 0 18px;
    }

    .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>