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

<template>
    <div class="subsection">
        <a-layout style="width: 1500px">
            <a-layout style="width: 99%;height: 310px">
                <!-- <a-layout-sider width="110px">
                    <a-tabs :activeKey="this.select.row" tab-position="left" @change="changeTabLeft" v-if="total.row > nums.row">
                        <a-tab-pane 
                            v-for="index in latticeRow"
                            :key="index"
                        >
                            <span slot="tab" >
                                {{  getRandom(latticeRow + 1 -index, latticeRow, nums.row, total.row) }}
                                <a-icon type="info-circle" v-if="status.row[index] === 1" style="color: #d81e06"/>
                                <a-icon type="exclamation-circle" v-else style="color: #909399" />
                            </span>
                        </a-tab-pane>
                    </a-tabs>
                </a-layout-sider> -->
                <a-layout-content>
                    <!-- <slot :data="{select, nums, random}"></slot> -->
                    <div class="roadway-buttom">
                        <div class="roadway-box">
                            
                            <div class="line" v-for="(row,rowIndex) in total.row" :key="rowIndex"  v-if="row >= random.row[0] && row <= random.row[1]">
                                <p style="width:90px;">
                                    {{ random.row[0] + random.row[1] - rowIndex - 1 +"层"}}
                                </p>
                                
                                <div v-for="(column,index) in total.column" :key="index" class="el" v-if="column >= random.column[0] && column <= random.column[1]">

                                    <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
                                    <span 
                                        class="default"
                                        :id="`${direction}-${side}-${random.row[0] + random.row[1] - rowIndex - 1}-${column}`"
                                        @click="tocheckPage(random.row[0] + random.row[1] - rowIndex - 1,column)">
                                        <!-- {{column}}-{{ random.row[0] + random.row[1] - rowIndex - 1}} -->
                            {{column}}
                                        
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-layout-content>
            </a-layout>
            <a-layout-footer>
                <!-- <a-tabs default-active-key="1" tab-position="bottom" @change="value => select.row = value" v-if="total.row > nums.row"> -->
                <a-tabs :activeKey="this.select.column" tab-position="bottom" @change="changeTab" v-if="total.column > nums.column">
                    <a-tab-pane
                        v-for="index in latticeColumn"
                        :key="index"

                    >
                            <span slot="tab">
                                {{  getRandom(index, latticeColumn, nums.column, total.column) }}
                                <!-- <a-icon :id="`${shelveId}-row-${getRandom(index,latticeRow,nums.row,total.row)}`"/> -->
                                
                                <a-icon type="info-circle" v-if="status.column[index] === 1" style="color: #d81e06"/>
                                <a-icon type="exclamation-circle" v-else style="color: #909399" />
                            </span>
                    </a-tab-pane>
                </a-tabs>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
export default {
    name: "Subsection",
    components: {},
    props: {
        // 默认行第一个  列第一个
        select: {
            type: Object,
            default: () => {
                return {
                    row: 1,
                    column: 1
                }
            }
        },
        // 总共数据
        total:{
            type: Object,
            default:()=>{
                return {}
            }
        },
        nums: {
            type: Object,
            default: () => {
                return {
                    row: 20,
                    column: 71
                }
            }
        },
        direction: {
            type: Number,
            default: () => {
                return {}
            }
        },
        side: {
            type: Number,
            default: () => {
                return {}
            }
        },
        
        streetId: {
            type: Number,
            default: () => {
                return {}
            }
        },
        streetName: {
            type: String,
            default: () => {
                return {}
            }
        },
        
        
    },
    computed: {
        // 应有的格子数
        latticeRow() {
            return  parseInt(this.total.row / this.nums.row) + (this.total.row % this.nums.row > 0 ? 1 : 0);
        },
        latticeColumn() {
            return  parseInt(this.total.column / this.nums.column) + (this.total.column % this.nums.column > 0 ? 1 : 0);
        },
        random() {
            
            return {
                
                row: this.getRandomRow(this.select.row),
                column: this.getRandomColumn(this.select.column),
            }
        },
        watchDirection(){
            return this.direction;
        },   
        watchSide(){
            return this.side;
        },  
    },
    watch: {
        watchDirection() {
            this.getStatus();
        },
        watchSide() {
            this.getStatus();
        },
        immediate: true,
        
    },
    data() {
        return {
            status: {
                row: {},
                column: {}
            },
            timer: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.getStatus();
        })
        this.$on('hook:activated', () => {
            this.timer = window.setInterval(this.getStatus, 3000);
        })
        this.timer = window.setInterval(this.getStatus, 3000);

        this.$on('hook:deactivated', () => {
            clearInterval(this.timer)
            this.timer = null
        })
    },
    
    beforeDestroy() {
        console.log("beforeDestroy")
        window.clearInterval(this.timer);        
        this.timer = null;
    },
    created() {
        var nameEQC = "s"+this.streetId+"d"+this.direction+"e"+this.side + "c" + "=";
        var nameEQR = "s"+this.streetId+"d"+this.direction+"e"+this.side + "r" + "=";
        var ca = document.cookie.split(';');
        
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQC) == 0) {
                this.select.column = Number(c.substring(nameEQC.length,c.length));
            }
            if (c.indexOf(nameEQR) == 0) {
                this.select.row = Number(c.substring(nameEQR.length,c.length));
            }
                
        }
    },
    destroyed() {
        window.clearInterval(this.timer);        
        this.timer = null;
    },
    
    methods: {
        changeTab(value){
            document.cookie = "s"+this.streetId+"d"+this.direction+"e"+this.side + "c"+ "=" +value;

            this.select.column = value
            this.getStatus()
        },
        changeTabLeft(value){
            
            document.cookie = "s"+this.streetId+"d"+this.direction+"e"+this.side + "r" + "=" +value;
            
            this.select.row = value
            this.getStatus()

        },
        // 获取行或列的范围字符串
        getRandom(index, lattice, num, total) {
            if(index !== lattice) {
                return `${(index - 1) * num + 1} - ${index * num}`;
            }else {
                return `${(index - 1) * num + 1} - ${total}`;
            }
        },
        // 获取行和列的范围数组
        getRandomRow(val) {
            console.log(" "+this.latticeRow);
            console.log(this.latticeRow + 1 - val, this.latticeRow, this.nums.row, this.total.row)
            return this.getRandom(this.latticeRow + 1 - val, this.latticeRow, this.nums.row, this.total.row).split(' - ').map(item => Number(item));
        },
        getRandomColumn(val) {
            return this.getRandom(val, this.latticeColumn, this.nums.column, this.total.column).split(' - ').map(item => Number(item));
        },
        
        getStatusBg(row,column,status) {
            var dom = document.getElementById(this.direction+"-"+this.side+"-"+row+'-'+column);
            var color;
            if(status == -1){
                color = '#f2ed48'
            }else if(status == 2){
                color = '#1afa29'
            }else if( status == 3){
                color = '#4c71d8'
            }else if(status == 1){
                color = '#d81e06'
            }else if(status == 4){
                color = '#bc55cf'
            }else{
                color = '#bfbfbf'
            }
            dom.style.background = color
        },
        getStatus(){
            
            var columnTab = []
            for(let c = 1; c <= this.latticeColumn ;c++){
                let tab = this.getRandom(c,this.latticeColumn,this.nums.column,this.total.column)
                columnTab.push(tab)
            }
            var rowTab = []
            for(let r = 1; r <= this.latticeRow ;r++){
                let tab = this.getRandom(r,this.latticeRow,this.nums.row,this.total.row)
                rowTab.push(tab)
            }
            this.$api.httpApi.getStatusByRowColumn({
                data: {
                    columnStart: this.random.column[0],
                    columnEnd: this.random.column[1],
                    rowStart: this.random.row[0],
                    rowEnd: this.random.row[1],
                    streetId: this.streetId,
                    direction: this.direction,
                    side: this.side,
                    rowTabs: rowTab,
                    columnTabs: columnTab
                }
            }).then(res => {
                if(res.code == 200){
                    if(res.data.stocks){
                        for(let a of res.data.stocks){
                            this.getStatusBg(a.row,a.column,a.status)
                        }
                    }
                
                    var i = 1;
                    for(let a in res.data.columnTabStatus){
                        this.$set(this.status.column, i, res.data.columnTabStatus[a]);
                        
                        i++;
                    }
                    
                    
                    var j = 0;
                    for(let a in res.data.rowTabStatus){
                        j++;
                    } 
                    for(let a in res.data.rowTabStatus){
                        this.$set(this.status.row, j, res.data.rowTabStatus[a]);
                        
                        j--;
                    } 
                }
            }).catch(err => {

            });
        },
        tocheckPage(row,column){
            this.$router.push({
                name: 'checkOperation',
                query: {row: row, column: column, direction: this.direction,side:this.side, streetId: this.streetId, name:this.streetName}
            }) 
        }
    }
}
</script>

<style scoped lang="scss">
.subsection /deep/{
    width: 100%;
    height: 360px;
    overflow: hidden;
    .ant-tabs-nav .ant-tabs-tab {
        // padding: 0;
        margin-right: 0;
    }
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        &:hover{
            background: #40a9ff;
            border-color: #40a9ff;
        }
        background: #40a9ff;
        border-color: #40a9ff;
        box-shadow: -1px 0 0 0 #40a9ff;
    }
    .ant-radio-button-wrapper-checked {
        box-shadow: -1px 0 0 0 #40a9ff;
    }
    .radio-button-cell {
        width: 100px;
        text-align: center;
    }
    .ant-layout-sider {
        height: 100%;
        .ant-tabs {
            height: 300px;
        }

        .ant-tabs-tab {
            padding: 8px;
            margin-bottom: 5px;
            width: 104px;
        }
    }
    .ant-layout-footer {
        // width: 500px;
        padding: 0 0 0 110px;
        .ant-tabs {
            // width: 735px;
        }
        .ant-tabs-bottom-bar {
            margin-top: 0;
        }
    }
    .ant-layout, .ant-layout-sider, .ant-layout-footer {
        background-color: #ffffff;
    }
    roadway-buttom {
        padding: 5px 0;
        width: 100%;
    }

    .roadway-box {
        //transform: rotateX(180deg);
        padding: 10px 10px 0 0;
        .line {
            display: flex;
            //transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上

            .el {
                width: 46px;
                height: 25px;
                line-height: 25px;
                margin: 2px;
                font-size: 12px;
                text-align: center;
                border-radius: 4px;
                cursor: pointer;
                position: relative;
                .default {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }
}
</style>