|
@@ -6,21 +6,24 @@
|
|
|
<template>
|
|
|
<div class='floor-box'>
|
|
|
<div class='floor-list'>
|
|
|
- <div class='icon-top' v-if='floorsArr.length>8'>
|
|
|
+ <div class='icon-top' v-if='floorsArr.length>showNumber'>
|
|
|
+ <!-- :class='{disabled:currentFloorId == floorsArr[0].seq }' -->
|
|
|
<img
|
|
|
- :class='{disabled:currentFloorId == floorsArr[0].seq }'
|
|
|
+ :class='{ disabled:currIndex === 0 }'
|
|
|
v-if='showT'
|
|
|
- @click='changeFloor(1)'
|
|
|
+ @click='changeFloor(1,currIndex)'
|
|
|
@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 />
|
|
|
+ <img :class='{ disabled:currIndex === 0 }' v-else src='@/assets/imgs/iconLightTop.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'>
|
|
|
+ <!-- 放开marginTop样式 -->
|
|
|
+ <div class='floor-center' :style='{ marginTop : marginTop }'>
|
|
|
<div
|
|
|
class='floor-item'
|
|
|
:class='item.seq == currentFloorId?"isActive":""'
|
|
@@ -30,15 +33,17 @@
|
|
|
>{{item.code}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class='icon-bottom' v-if='floorsArr.length>8'>
|
|
|
+ <div class='icon-bottom' v-if='floorsArr.length>showNumber'>
|
|
|
+ <!-- :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' -->
|
|
|
<img
|
|
|
- :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
|
|
|
+ :class='{disabled:currIndex === floorsArr.length - 1 }'
|
|
|
v-if='showB'
|
|
|
- @click='changeFloor(-1)'
|
|
|
+ @click='changeFloor(-1,currIndex)'
|
|
|
src='@/assets/imgs/iconBlackBottom.png'
|
|
|
alt
|
|
|
/>
|
|
|
- <img :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' v-else src='@/assets/imgs/iconLightBottom.png' alt />
|
|
|
+ <img :class='{ disabled:currIndex === floorsArr.length - 1 }' v-else src='@/assets/imgs/iconLightBottom.png' alt />
|
|
|
+ <!-- <img :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' v-else src='@/assets/imgs/iconLightBottom.png' alt /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -64,7 +69,9 @@ export default {
|
|
|
currentFloorId: null,
|
|
|
marginTop: 0,
|
|
|
startTime: '',
|
|
|
- endTime: ''
|
|
|
+ endTime: '',
|
|
|
+ showNumber: 8, //需要暂时的楼层数
|
|
|
+ currIndex: 0, //当前楼层在 楼层数组中的下标
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
@@ -93,6 +100,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
init() {
|
|
|
+ // console.log('init')
|
|
|
if (!this.floorsArr.length) {
|
|
|
return false
|
|
|
}
|
|
@@ -107,37 +115,49 @@ export default {
|
|
|
if (index === -1) {
|
|
|
this.currentFloorId = this.floorIdArr[0]
|
|
|
}
|
|
|
- this.changeFloor(0)
|
|
|
+ this.changeFloor(0,index)
|
|
|
},
|
|
|
/**
|
|
|
* @name changeFloor
|
|
|
* @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
|
|
|
* @description 点击图例下方的,上下切换按钮
|
|
|
*/
|
|
|
- changeFloor(flag) {
|
|
|
+ changeFloor(flag,index) {
|
|
|
+ // console.log('changeFloor')
|
|
|
const len = this.floorIdArr.length
|
|
|
- let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
|
|
|
+ // let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
|
|
|
+ this.currIndex = index
|
|
|
// 点击上箭头
|
|
|
if (flag === 1) {
|
|
|
index--
|
|
|
- this.currentFloorId = this.floorIdArr[index]
|
|
|
+ this.currIndex = index
|
|
|
+ // 点击上下箭头,不进行选中的楼层 状态更新
|
|
|
+ // this.currentFloorId = this.floorIdArr[index]
|
|
|
} else if (flag === -1) {
|
|
|
//点击下箭头
|
|
|
index++
|
|
|
- this.currentFloorId = this.floorIdArr[index]
|
|
|
+ this.currIndex = index
|
|
|
+ // 点击上下箭头,不进行选中的楼层 状态更新
|
|
|
+ // this.currentFloorId = this.floorIdArr[index]
|
|
|
+ }
|
|
|
+ // FEAT: 点击上下箭头,不触发cookie更改 , 只有初始化时,才进行选中的楼层 状态更新
|
|
|
+ if(flag === 0){
|
|
|
+ this.handleCookie()
|
|
|
+ // 点击楼层,处理上下箭头禁用逻辑
|
|
|
+ this.handleUpDownStatus(index, len)
|
|
|
+ }else{
|
|
|
+ // 点击上下箭头,处理上下按钮禁用逻辑
|
|
|
+ this.handleUpDownStatus1(index, len)
|
|
|
}
|
|
|
- this.handleCookie()
|
|
|
// 楼层位置动画处理
|
|
|
this.handlePosition(flag, index, len)
|
|
|
- // 处理上下按钮禁用逻辑
|
|
|
- this.handleUpDownStatus(index, len)
|
|
|
+
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
- * @name handleUpDownStatus
|
|
|
+ * @description 点击楼层时, 处理上下按钮禁用逻辑
|
|
|
* @param { Number } index 当前楼层在floorIdArr中的下标
|
|
|
* @param { Number } len floorIdArr的长度
|
|
|
- * @description 处理上下按钮禁用逻辑
|
|
|
*/
|
|
|
handleUpDownStatus(index, len) {
|
|
|
switch (index) {
|
|
@@ -161,6 +181,32 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
+ * @description 点击上下箭头时,处理上下按钮禁用逻辑
|
|
|
+ * @param { Number } index 当前楼层在floorIdArr中的下标
|
|
|
+ * @param { Number } len floorIdArr的长度
|
|
|
+ */
|
|
|
+ handleUpDownStatus1(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数据处理
|
|
|
*/
|
|
@@ -203,15 +249,16 @@ export default {
|
|
|
* @param len floorIdArr长度
|
|
|
*/
|
|
|
handlePosition(flag, index, len) {
|
|
|
+ // console.log('===============')
|
|
|
+ // console.log(`flag, index, len`,flag, index, len)
|
|
|
+ // console.log( this.marginTop)
|
|
|
//楼层位置处理
|
|
|
// 页面显示5条,当第五条以上,进行marginTop修改
|
|
|
// index从0开始
|
|
|
// TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
|
|
|
- let showNumber = 5, //页面中展示的楼层条数
|
|
|
- height = 32, //一个楼层的div标签高度
|
|
|
- timer = 500 //动画时长
|
|
|
- // flag 为0时,timer设置为0
|
|
|
- flag === 0 && (timer = 0)
|
|
|
+ // FEAT: 使用8条楼层
|
|
|
+ let showNumber = this.showNumber, //页面中展示的楼层条数
|
|
|
+ height = 32 //一个楼层的div标签高度
|
|
|
if (index >= showNumber - 1) {
|
|
|
if (index < len - 1) {
|
|
|
this.marginTop = -height * (index - (showNumber - 2)) + 'px'
|
|
@@ -222,6 +269,8 @@ export default {
|
|
|
// 前 showNumber 条的margin-top设置为0
|
|
|
this.marginTop = 0
|
|
|
}
|
|
|
+ // console.log('over', this.marginTop)
|
|
|
+ // console.log('===============')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -276,6 +325,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.icon-top {
|
|
|
+ cursor: pointer;
|
|
|
height: 18px;
|
|
|
img {
|
|
|
width: 18px;
|
|
@@ -284,6 +334,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.icon-bottom {
|
|
|
+ cursor: pointer;
|
|
|
height: 18px;
|
|
|
img {
|
|
|
width: 18px;
|