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

            });
        },
        handleChange(value) {
            console.log(value)
            this.select = value
        }
    },
    components: {}
};
</script>
<style lang="scss" scoped>
    .check-page {
        position: relative;

        .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: 50px 0 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;
                    }
                }
            }
        }

        .select-roadway {
            position: absolute;
            top: 350px;
        }
    }
</style>