|
@@ -7,13 +7,14 @@
|
|
<div class='floor-box'>
|
|
<div class='floor-box'>
|
|
<div class='floor-list'>
|
|
<div class='floor-list'>
|
|
<div class='icon-top' v-if='floorsArr.length>showNumber'>
|
|
<div class='icon-top' v-if='floorsArr.length>showNumber'>
|
|
- <!-- :class='{disabled:currentFloorId == floorsArr[0].seq }' -->
|
|
|
|
- <img v-repeat-click='increase' :class='{ disabled:currIndex === 0 }' v-if='showT' src='@/assets/imgs/iconBlackTop.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 /> -->
|
|
|
|
|
|
+ <!-- @click='changeFloor(1,currIndex)' -->
|
|
|
|
+ <!-- @mousedown='mousedown' -->
|
|
|
|
+ <!-- @mouseup='mouseup' -->
|
|
|
|
+ <!-- v-repeat-click='increase' -->
|
|
|
|
+ <img v-if='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/imgs/iconBlackTop.png' alt />
|
|
|
|
+ <img class='disabled' v-else src='@/assets/imgs/iconLightTop.png' alt />
|
|
</div>
|
|
</div>
|
|
<div class='floor-out'>
|
|
<div class='floor-out'>
|
|
- <!-- :style='{ marginTop : marginTop }' -->
|
|
|
|
<!-- 放开marginTop样式 -->
|
|
<!-- 放开marginTop样式 -->
|
|
<div class='floor-center' :style='{ marginTop : marginTop }'>
|
|
<div class='floor-center' :style='{ marginTop : marginTop }'>
|
|
<div
|
|
<div
|
|
@@ -26,16 +27,9 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='icon-bottom' v-if='floorsArr.length>showNumber'>
|
|
<div class='icon-bottom' v-if='floorsArr.length>showNumber'>
|
|
- <!-- :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' -->
|
|
|
|
- <img
|
|
|
|
- :class='{disabled:currIndex === floorsArr.length - 1 }'
|
|
|
|
- v-if='showB'
|
|
|
|
- v-repeat-click='decrease'
|
|
|
|
- src='@/assets/imgs/iconBlackBottom.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 /> -->
|
|
|
|
|
|
+ <!-- v-repeat-click='decrease' -->
|
|
|
|
+ <img v-if='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease' src='@/assets/imgs/iconBlackBottom.png' alt />
|
|
|
|
+ <img class='disabled' v-else src='@/assets/imgs/iconLightBottom.png' alt />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -65,10 +59,12 @@ export default {
|
|
},
|
|
},
|
|
currentFloorId: null,
|
|
currentFloorId: null,
|
|
marginTop: 0,
|
|
marginTop: 0,
|
|
|
|
+ marginTopMax: 0,
|
|
startTime: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
endTime: '',
|
|
- showNumber: 8, //需要暂时的楼层数
|
|
|
|
- currIndex: 0 //当前楼层在 楼层数组中的下标
|
|
|
|
|
|
+ showNumber: 8, //需要暂时的楼层数 //TODO:
|
|
|
|
+ height: 32, //一个楼层的高度
|
|
|
|
+ currIndex: 0 //当前楼层在 楼层数组中的下标,上下箭头使用
|
|
}
|
|
}
|
|
},
|
|
},
|
|
props: {
|
|
props: {
|
|
@@ -87,15 +83,30 @@ export default {
|
|
this.init()
|
|
this.init()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- // 楼层向上
|
|
|
|
|
|
+ mousedown() {
|
|
|
|
+ this.startTime = new Date()
|
|
|
|
+ },
|
|
|
|
+ mouseup() {
|
|
|
|
+ this.endTime = new Date()
|
|
|
|
+ if (this.endTime - this.startTime < 200) {
|
|
|
|
+ console.log(11111111)
|
|
|
|
+ this.changeFloor(1, this.currIndex)
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
increase() {
|
|
increase() {
|
|
- this.changeFloor(1, this.currIndex)
|
|
|
|
|
|
+ console.log('increase')
|
|
|
|
+ let marginTop = parseInt(this.marginTop)
|
|
|
|
+ marginTop < 0 && this.changeFloor(1, this.currIndex)
|
|
},
|
|
},
|
|
- // 楼层向下
|
|
|
|
decrease() {
|
|
decrease() {
|
|
- this.changeFloor(-1, this.currIndex)
|
|
|
|
|
|
+ console.log('decrease')
|
|
|
|
+ let marginTop = Math.abs(parseInt(this.marginTop)),
|
|
|
|
+ marginTopMax = Math.abs(parseInt(this.marginTopMax))
|
|
|
|
+ marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
|
|
},
|
|
},
|
|
init() {
|
|
init() {
|
|
|
|
+ // console.log('init')
|
|
if (!this.floorsArr.length) {
|
|
if (!this.floorsArr.length) {
|
|
return false
|
|
return false
|
|
}
|
|
}
|
|
@@ -110,6 +121,7 @@ export default {
|
|
if (index === -1) {
|
|
if (index === -1) {
|
|
this.currentFloorId = this.floorIdArr[0]
|
|
this.currentFloorId = this.floorIdArr[0]
|
|
}
|
|
}
|
|
|
|
+ this.marginTopMax = -(this.floorIdArr.length - this.showNumber) * this.height
|
|
this.changeFloor(0, index)
|
|
this.changeFloor(0, index)
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
@@ -117,10 +129,8 @@ export default {
|
|
* @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
|
|
* @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
|
|
* @description 点击图例下方的,上下切换按钮
|
|
* @description 点击图例下方的,上下切换按钮
|
|
*/
|
|
*/
|
|
- changeFloors() {
|
|
|
|
- this.changeFloor(-1, this.currIndex)
|
|
|
|
- },
|
|
|
|
changeFloor(flag, index) {
|
|
changeFloor(flag, index) {
|
|
|
|
+ console.log('changeFloor')
|
|
const len = this.floorIdArr.length
|
|
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
|
|
this.currIndex = index
|
|
@@ -128,84 +138,17 @@ export default {
|
|
if (flag === 1) {
|
|
if (flag === 1) {
|
|
index--
|
|
index--
|
|
this.currIndex = index
|
|
this.currIndex = index
|
|
- // 点击上下箭头,不进行选中的楼层 状态更新
|
|
|
|
- // this.currentFloorId = this.floorIdArr[index]
|
|
|
|
} else if (flag === -1) {
|
|
} else if (flag === -1) {
|
|
//点击下箭头
|
|
//点击下箭头
|
|
index++
|
|
index++
|
|
this.currIndex = index
|
|
this.currIndex = index
|
|
- // 点击上下箭头,不进行选中的楼层 状态更新
|
|
|
|
- // this.currentFloorId = this.floorIdArr[index]
|
|
|
|
}
|
|
}
|
|
// FEAT: 点击上下箭头,不触发cookie更改 , 只有初始化时,才进行选中的楼层 状态更新
|
|
// FEAT: 点击上下箭头,不触发cookie更改 , 只有初始化时,才进行选中的楼层 状态更新
|
|
if (flag === 0) {
|
|
if (flag === 0) {
|
|
this.handleCookie()
|
|
this.handleCookie()
|
|
- // 点击楼层,处理上下箭头禁用逻辑
|
|
|
|
- this.handleUpDownStatus(index, len)
|
|
|
|
- } else {
|
|
|
|
- // 点击上下箭头,处理上下按钮禁用逻辑
|
|
|
|
- this.handleUpDownStatus1(index, len)
|
|
|
|
}
|
|
}
|
|
- // 楼层位置动画处理
|
|
|
|
this.handlePosition(flag, index, len)
|
|
this.handlePosition(flag, index, len)
|
|
},
|
|
},
|
|
-
|
|
|
|
- /**
|
|
|
|
- * @description 点击楼层时, 处理上下按钮禁用逻辑
|
|
|
|
- * @param { Number } index 当前楼层在floorIdArr中的下标
|
|
|
|
- * @param { Number } len floorIdArr的长度
|
|
|
|
- */
|
|
|
|
- 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
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- /**
|
|
|
|
- * @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数据处理
|
|
|
|
- */
|
|
|
|
handleCookie() {
|
|
handleCookie() {
|
|
// return true
|
|
// return true
|
|
let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
|
|
let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
|
|
@@ -221,14 +164,13 @@ export default {
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* @name tabFloor
|
|
* @name tabFloor
|
|
- * @param {Object} 选中的楼层信息
|
|
|
|
- * @param {Number} 楼层信息在floorsArr数组中的位置
|
|
|
|
|
|
+ * @param {Object} item 选中的楼层信息
|
|
|
|
+ * @param {Number} index 楼层信息在floorsArr数组中的位置
|
|
*/
|
|
*/
|
|
tabFloor(item, index) {
|
|
tabFloor(item, index) {
|
|
this.currentFloorId = this.floorIdArr[index]
|
|
this.currentFloorId = this.floorIdArr[index]
|
|
this.handleCookie()
|
|
this.handleCookie()
|
|
- this.handlePosition(1, index, this.floorIdArr.length)
|
|
|
|
- this.handleUpDownStatus(index, this.floorIdArr.length)
|
|
|
|
|
|
+ this.handlePosition(2, index, this.floorIdArr.length)
|
|
this.viewLengend()
|
|
this.viewLengend()
|
|
},
|
|
},
|
|
viewLengend() {
|
|
viewLengend() {
|
|
@@ -240,33 +182,43 @@ export default {
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* @description 楼层位置动画处理
|
|
* @description 楼层位置动画处理
|
|
- * @param flag 是否启用动画时长 0:不启用 其他 启动
|
|
|
|
|
|
+ * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
|
|
* @param index 楼层 在floorIdArr中的下标
|
|
* @param index 楼层 在floorIdArr中的下标
|
|
* @param len floorIdArr长度
|
|
* @param len floorIdArr长度
|
|
*/
|
|
*/
|
|
handlePosition(flag, index, len) {
|
|
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
|
|
|
|
- // FEAT: 使用8条楼层
|
|
|
|
- let showNumber = this.showNumber, //页面中展示的楼层条数
|
|
|
|
- height = 39 //一个楼层的div标签高度
|
|
|
|
- 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
|
|
|
|
|
|
+ // 取出当前 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
|
|
}
|
|
}
|
|
- // console.log('over', this.marginTop)
|
|
|
|
- // console.log('===============')
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -276,7 +228,7 @@ export default {
|
|
position: fixed;
|
|
position: fixed;
|
|
right: 32px;
|
|
right: 32px;
|
|
top: 172px;
|
|
top: 172px;
|
|
- z-index: 2;
|
|
|
|
|
|
+ z-index: 99;
|
|
.floor-list {
|
|
.floor-list {
|
|
width: 44px;
|
|
width: 44px;
|
|
// height: 212px;
|
|
// height: 212px;
|
|
@@ -287,11 +239,16 @@ export default {
|
|
padding: 6px 4px;
|
|
padding: 6px 4px;
|
|
text-align: center;
|
|
text-align: center;
|
|
.floor-out {
|
|
.floor-out {
|
|
- max-height: 300px;
|
|
|
|
|
|
+ height: 300px; //TODO:
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ &::-webkit-scrollbar {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
.floor-center {
|
|
.floor-center {
|
|
- transition: all linear 0.8s;
|
|
|
|
|
|
+ transition: all linear 0.5s;
|
|
.floor-item {
|
|
.floor-item {
|
|
line-height: 28px;
|
|
line-height: 28px;
|
|
height: 28px;
|
|
height: 28px;
|