tianyi_DataV/src/views/yclView/index.vue

<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' }">
                        <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.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 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>
</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']

        }
    },
    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(); })
        }
    }
}
</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;
    }



}
</style>