123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303 |
- /**
- *@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'>
- <!-- @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='{ height: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>8'>
- <!-- 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() {
- let marginTop = parseInt(this.marginTop)
- marginTop < 0 && this.changeFloor(1, this.currIndex)
- },
- /**
- * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
- */
- decrease() {
- let marginTop = Math.abs(parseInt(this.marginTop)),
- marginTopMax = Math.abs(parseInt(this.marginTopMax))
- marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
- },
- 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) {
- 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>
|