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>showNumber'>
                <!-- @click='changeFloor(1,currIndex)' -->
                <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/imgs/iconBlackTop.png' alt />
                <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/imgs/iconLightTop.png' alt />
            </div>
            <div class='floor-out' :style='{ maxHeight:conHeight + "px;" }'>
                <!--  放开marginTop样式  -->
                <div class='floor-center' :style='{ marginTop : marginTop }'>
                    <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>showNumber'>
                <!-- v-repeat-click='decrease' -->
                <img v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease' src='@/assets/imgs/iconBlackBottom.png' alt />
                <img class='disabled' v-show='parseInt(marginTop) === marginTopMax' src='@/assets/imgs/iconLightBottom.png' alt />
            </div>
        </div>
    </div>
</template>
<script>
import store from '../store'
import { mapGetters } from 'vuex'
import RepeatClick from '@/directives/repeat-click'

export default {
    directives: {
        repeatClick: RepeatClick
    },
    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,
            marginTopMax: 0,
            startTime: '',
            endTime: '',
            showNumber: 8, //需要展示的楼层数   //TODO:
            height: 39, //一个楼层的高度
            currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
            conHeight: 0 // floor-out 的高度
        }
    },
    props: {
        floorsArr: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 默认true,
        // 1. 切换楼层后,是否触发 cookie,vuex数据修改,
        // 2. 在fenbuPic组件中为false, 1)不触发cookie,vuex , 2) 选中的楼层ID,为楼层列表数组floorIdArr的第0个
        changeDataFlag: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        ...mapGetters(['legendTable'])
    },
    mounted() {
        window.vm = this
        this.init()
    },
    methods: {
        /**
         * @description 点击上箭头,marginTop<0时执行楼层滚动
         */
        increase() {
            // console.log('increase')
            let marginTop = parseInt(this.marginTop)
            marginTop < 0 && this.changeFloor(1, this.currIndex)
        },
        /**
         * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
         */
        decrease() {
            // console.log('decrease')
            let marginTop = Math.abs(parseInt(this.marginTop)),
                marginTopMax = Math.abs(parseInt(this.marginTopMax))
            marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
        },
        init() {
            // console.log('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)
            // bug fix 修复 fenbuPic 弹窗中,楼层不能选中的问题
            // 如果 floorIdArr 不在 floorIdArr数组中,或者changeDataFlag为false(弹窗组件中的楼层组件),使用 floorIdArr[0], 而不使用 cookie
            let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
            if (index === -1 || !this.changeDataFlag) {
                this.currentFloorId = this.floorIdArr[0]
            }
            // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
            this.conHeight = this.floorsArr.length * 37.5
            this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
            this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length

            this.marginTopMax = -(this.floorIdArr.length - this.showNumber) * this.height
            this.changeFloor(0, index)
        },
        /**
         * @name changeFloor
         * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
         * @description 点击图例下方的,上下切换按钮
         */
        changeFloor(flag, index) {
            // console.log('changeFloor')
            const len = this.floorIdArr.length
            // let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
            this.currIndex = index
            // 点击上箭头
            if (flag === 1) {
                index--
                this.currIndex = index
            } else if (flag === -1) {
                //点击下箭头
                index++
                this.currIndex = index
            }
            // FEAT:  点击上下箭头,不触发cookie更改 , 只有初始化时,才进行选中的楼层 状态更新
            if (flag === 0) {
                this.handleCookie()
            }
            this.handlePosition(flag, index, len)
        },
        handleCookie() {
            let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
            if (currentFloor) {
                // 如果 changeDataFlag为true(不是在 分布图弹窗组件中的 楼层组件),设置cookie,vuex
                if (this.changeDataFlag) {
                    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
                    store.commit('SETCURRENTFLOOR', currentFloor)
                }
                this.$emit('emitFloor', currentFloor)
            }
        },
        /**
         * @name tabFloor
         * @param {Object} item 选中的楼层信息
         * @param {Number} index 楼层信息在floorsArr数组中的位置
         */
        tabFloor(item, index) {
            this.currentFloorId = this.floorIdArr[index]
            this.handleCookie()
            this.handlePosition(2, index, this.floorIdArr.length)
            this.viewLengend()
        },
        viewLengend() {
            if (this.legendTable.length > 0) {
                this.$store.commit('SETSHOWVIEW', 1)
            } else {
                this.$store.commit('SETSHOWVIEW', 0)
            }
        },
        /**
         * @description 楼层位置动画处理
         * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
         * @param index 楼层 在floorIdArr中的下标
         * @param len floorIdArr长度
         */
        handlePosition(flag, index, len) {
            // 取出当前 marginTop
            let marginTop = parseInt(this.marginTop)
            switch (flag) {
                // 初始化进入页面,位置处理
                case 0:
                // 直接点击楼层,滚动楼层
                case 2:
                    // 将 marginTop 设置为对应的index 应滚动的距离
                    marginTop = -index * this.height
                    // marginTop 过大时,取最大值marginTopMax
                    if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
                        marginTop = parseInt(this.marginTopMax)
                    }
                    // marginTop＞0时,取0,防止楼层上边出现空白
                    marginTop = marginTop >= 0 ? 0 : marginTop
                    // index为0,marginTop设置为0
                    index == 0 && (marginTop = 0)
                    // index为最后一个,设置为最大marginTopMax
                    index == len - 1 && (marginTop = parseInt(this.marginTopMax))
                    this.marginTop = marginTop + 'px'
                    break
                //  1:向上滚动楼层
                case 1:
                    this.marginTop = marginTop + this.height + 'px'
                    break
                // -1向下滚动楼层
                case -1:
                    this.marginTop = marginTop + this.height * -1 + 'px'
                    break
                default:
                    break
            }
        }
    }
}
</script>
<style lang="less" scoped>
.floor-box {
    .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: 300px; //TODO:
            min-height: 38px;
            overflow: hidden;
            position: relative;
            overflow-y: auto;
            &::-webkit-scrollbar {
                display: none;
            }

            .floor-center {
                transition: all linear 0.5s;
                .floor-item {
                    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 {
            cursor: pointer;
            height: 18px;
            img {
                width: 18px;
                height: 100%;
                margin-top: -10px;
            }
        }
        .icon-bottom {
            cursor: pointer;
            height: 18px;
            img {
                width: 18px;
                height: 100%;
                margin-top: -10px;
            }
        }
        .isActive {
            border-radius: 4px;
            color: #025baa;
            background: #e1f2ff;
        }
    }
    .disabled {
        cursor: not-allowed !important;
    }
}
</style>