wanda-bm-guide/src/components/floorList.vue

/**
*@author:Guoxiaohuan
*@date:2020.06.02
*@info：楼层列表
*/
<template>
    <div class='floor-box'>
        <div class='floor-list'>
            <div class='icon-top' v-if='floorsArr.length>8'>
                <img
                    :class='{disabled:currentFloorId == floorsArr[0].seq }'
                    v-if='showT'
                    @click='changeFloor(1)'
                    @mousedown='mousedown'
                    @mouseup='mouseup'
                    src='@/assets/imgs/iconBlackTop.png'
                    alt
                />
                <img :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else src='@/assets/imgs/iconLightTop.png' alt />
            </div>
            <div class='floor-out'>
                <!-- :style='{ marginTop : marginTop }' -->
                <div class='floor-center'>
                    <div
                        class='floor-item'
                        :class='item.seq == currentFloorId?"isActive":""'
                        @click='tabFloor(item,index)'
                        v-for='(item,index) in floorsArr'
                        :key='index'
                    >{{item.code}}</div>
                </div>
            </div>
            <div class='icon-bottom' v-if='floorsArr.length>8'>
                <img
                    :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
                    v-if='showB'
                    @click='changeFloor(-1)'
                    src='@/assets/imgs/iconBlackBottom.png'
                    alt
                />
                <img :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' v-else src='@/assets/imgs/iconLightBottom.png' alt />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            floorId: 'F1',
            showT: true,
            showB: true,
            num: 0,
            floorMapIdName: '',
            floor: {
                code: 'F1',
                gcode: '1F',
                gname: 'f1',
                name: '第1层',
                seq: 100
            },
            currentFloorId: null,
            marginTop: 0,
            startTime: '',
            endTime: ''
        }
    },
    props: {
        floorsArr: {
            type: Array,
            default: () => {
                ;[]
            }
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        // 监听floorsArr的变化
        // '$store.state.floorsArr': {
        //     handler(newV, oldV) {
        //         newV && this.init()
        //     },
        //     deep: true
        // }
    },
    methods: {
        mousedown() {
            this.startTime = new Date()
        },
        mouseup() {
            this.endTime = new Date()
            if (this.endTime - this.startTime < 200) {
                return false
            }
        },
        init() {
            if (!this.floorsArr.length) {
                return false
            }
            this.floorIdArr = []
            this.floorsArr.map(item => {
                this.floorIdArr.push(item.seq)
            })
            this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
            this.changeFloor(0)
        },
        /**
         * @name changeFloor
         * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
         * @description 点击图例下方的,上下切换按钮
         */
        changeFloor(flag) {
            const len = this.floorIdArr.length
            let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
            // 点击上箭头
            if (flag === 1) {
                index--
                this.currentFloorId = this.floorIdArr[index]
            } else if (flag === -1) {
                //点击下箭头
                index++
                this.currentFloorId = this.floorIdArr[index]
            }
            // 数据处理
            this.handleCookie()
            // 楼层位置动画处理
            this.handlePosition(flag, index, len)
            // 处理上下按钮禁用逻辑
            this.handleUpDownStatus(index, len)
        },

        /**
         * @name handleUpDownStatus
         * @param { Number } index 当前楼层在floorIdArr中的下标
         * @param { Number } len    floorIdArr的长度
         * @description 处理上下按钮禁用逻辑
         */
        handleUpDownStatus(index, len) {
            switch (index) {
                // 第一条的上箭头禁用
                case 0:
                    this.currentFloorId = this.floorIdArr[0]
                    this.showT = false
                    this.showB = true
                    break
                //  最后一条的 下箭头设置为禁用
                case len - 1:
                    this.currentFloorId = this.floorIdArr[len - 1]
                    this.showT = true
                    this.showB = false
                    break
                // 默认都可以点击
                default:
                    this.showT = true
                    this.showB = true
                    break
            }
        },
        /**
         * @name handleCookie
         * @description cookie数据处理
         */
        handleCookie() {
            // return true
            let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
            if (currentFloor) {
                this.$cookie.set('floorNow', currentFloor.code || '', 3)
                this.$cookie.set('floorMapId', currentFloor.gname, 3)
                this.$cookie.set('currentFloorId', currentFloor.seq, 3)
                this.floorId = this.$cookie.get('floorNow') || currentFloor.code
                this.floorMapIdName = this.$cookie.get('floorMapId') || currentFloor.gname
                this.$emit('emitFloor', currentFloor)
            }
        },
        /**
         * @name tabFloor
         * @param {Object} 选中的楼层信息
         * @param {Number} 楼层信息在floorsArr数组中的位置
         */
        tabFloor(item, index) {
            this.currentFloorId = this.floorIdArr[index]
            this.handleCookie()
            this.handlePosition(1, index, this.floorIdArr.length)
            this.handleUpDownStatus(index, this.floorIdArr.length)
        },
        /**
         * @description 楼层位置动画处理
         * @param flag 是否启用动画时长 0:不启用  其他 启动
         * @param index 楼层 在floorIdArr中的下标
         * @param len floorIdArr长度
         */
        handlePosition(flag, index, len) {
            //楼层位置处理
            // 页面显示5条,当第五条以上,进行marginTop修改
            // index从0开始
            // TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
            let showNumber = 5, //页面中展示的楼层条数
                height = 32, //一个楼层的div标签高度
                timer = 500 //动画时长
            // flag 为0时,timer设置为0
            flag === 0 && (timer = 0)
            if (index >= showNumber - 1) {
                if (index < len - 1) {
                    this.marginTop = -height * (index - (showNumber - 2)) + 'px'
                } else if ((index = len - 1)) {
                    this.marginTop = -height * (index - (showNumber - 1)) + 'px'
                }
            } else {
                // 前 showNumber 条的margin-top设置为0
                this.marginTop = 0
            }
        }
    }
}
</script>
<style lang="less" scoped>
.floor-box {
    position: fixed;
    right: 32px;
    top: 196px;
    z-index: 2;
    .floor-list {
        width: 44px;
        // height: 212px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
        border-radius: 2px;
        position: relative;
        padding: 6px 4px;
        text-align: center;
        .floor-out {
            // max-height: 260px;
            overflow: hidden;
            // overflow-y: auto;
            position: relative;
            // &::-webkit-scrollbar {
            //     display: none;
            // }

            .floor-center {
                transition: all linear 0.8s;
                .floor-item {
                    // border: 1px solid blue;
                    // width: 36px;
                    line-height: 28px;
                    height: 28px;
                    cursor: pointer;
                    position: relative;
                    &::after {
                        position: absolute;
                        left: 50%;
                        margin-left: -20%;
                        bottom: -6px;
                        content: '';
                        width: 14px;
                        height: 1px;
                        background: rgba(195, 199, 203, 1);
                        border: 0px solid rgba(228, 229, 231, 1);
                    }
                    & + .floor-item {
                        margin-top: 10px;
                    }
                }
            }
        }

        .icon-top {
            height: 18px;
            img {
                width: 18px;
                height: 100%;
                margin-top: -10px;
            }
        }
        .icon-bottom {
            height: 18px;
            img {
                width: 18px;
                height: 100%;
                margin-top: -10px;
            }
        }
        .isActive {
            border-radius: 4px;
            color: #025baa;
            background: #e1f2ff;
        }
    }
    .disabled {
        cursor: not-allowed !important;
    }
}
</style>