duoji-frontend/src/views/checkManage/index.vue

<template>
    <div class="check-page">
        <div class="title-info">
            <span class="explain">颜色说明：</span>
            <span class="info-text">
               <a-tag color="#d81e06" style="width:30px;height:20px"></a-tag>
               盘点错误
           </span>
            <span class="info-text">
                <a-tag color="#1afa29" style="width:30px;height:20px"></a-tag>
               盘点正确
           </span>
            <span class="info-text">
                <a-tag color="#bfbfbf" style="width:30px;height:20px"></a-tag>
               未盘点
           </span>
        </div>

        <div class="check-content" v-for="list in data" :key="list">
            <div class="roadway-top">
                <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                    <div class="roadway-box">
                        <div class="line" v-for="item in Number(list.leftColumn)" :key="item">
                            <div
                                class="ele"
                                :style="{background:i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#bfbfbf':'#bfbfbf'}"
                                v-for="i in Number(list.leftRow)"
                                :key="i">{{i}}-{{item}}
                            </div>
                        </div>
                    </div>
                </happy-scroll>
                <!--               <a-radio-group v-model="size" style="margin:10px 0">-->
                <!--                   <a-radio-button value="small">-->
                <!--                       外-->
                <!--                   </a-radio-button>-->
                <!--                   <a-radio-button value="default">-->
                <!--                       内-->
                <!--                   </a-radio-button>-->
                <!--               </a-radio-group>-->
            </div>
            <a-select :default-value="list.name" style="width: 180px">
                <a-select-option :value="list.name">
                    {{list.name}}
                </a-select-option>
            </a-select>
            <div class="roadway-buttom">
                <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                    <div class="roadway-box">
                        <div class="line" v-for="item in Number(list.rightColumn)" :key="item">
                            <div class="ele"
                                 :style="{background:i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#bfbfbf':'#bfbfbf'}"
                                 v-for="i in Number(list.rightRow)"
                                 :key="i">{{i}}-{{item}}
                            </div>
                        </div>
                    </div>
                </happy-scroll>
                <!--               <a-radio-group v-model="size2" style="margin:10px 0">-->
                <!--                   <a-radio-button value="small">-->
                <!--                       外-->
                <!--                   </a-radio-button>-->
                <!--                   <a-radio-button value="default">-->
                <!--                       内-->
                <!--                   </a-radio-button>-->
                <!--               </a-radio-group>-->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            size: 'small',
            size2: 'small',
            data: '',
        };
    },
    mounted() {
        this.request()
    },
    methods: {
        request() {
            this.$api.httpApi.getStreetList({
                data: {
                    pageNum: 1,
                    pageSize: 10,
                }
            }).then(res => {
                this.data = res.data.list;
            }).catch(err => {

            });
        },
    },
    components: {}
};
</script>
<style lang="scss" scoped>
    .check-page {
        .title-info {
            display: flex;
            align-items: center;
            justify-content: start;

            .explain {
                font-weight: 600;
            }

            .info-text {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 15px;
            }
        }

        .ant-tag {
            margin-right: 0;
            display: block;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
        }

        .roadway-top {
            padding: 20px 0;
            width: 1000px;
        }

        .roadway-buttom {
            padding: 20px 0;
            width: 1000px;
        }

        .scroll-box {
            height: 270px;

            .roadway-box {
                transform: rotateX(180deg);
                padding: 10px 10px 0 0;

                .line {
                    display: flex;
                    transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
                    .ele {
                        width: 46px;
                        height: 25px;
                        margin: 1px 2px;
                        text-align: center;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 14px;
                    }
                }
            }
        }
    }
</style>