|
@@ -6,14 +6,19 @@
|
|
|
<template>
|
|
|
<div class='floor-box'>
|
|
|
<div class='floor-list'>
|
|
|
- <!-- <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop(num)'></i> -->
|
|
|
<div v-if='floorsArr.length>5'>
|
|
|
- <i class='el-icon-caret-top icon-top' v-if='showT' @click='changeFloor(1)'></i>
|
|
|
- <i class='el-icon-caret-top icon-top' v-else style='color:#ccc'></i>
|
|
|
+ <i
|
|
|
+ class='el-icon-caret-top icon-top'
|
|
|
+ :class='{disabled:currentFloorId == floorsArr[0].seq }'
|
|
|
+ v-if='showT'
|
|
|
+ @click='changeFloor(1)'
|
|
|
+ @mousedown='mousedown'
|
|
|
+ @mouseup='mouseup'
|
|
|
+ ></i>
|
|
|
+ <i class='el-icon-caret-top icon-top' :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else style='color:#ccc'></i>
|
|
|
</div>
|
|
|
-
|
|
|
<div class='floor-out'>
|
|
|
- <div class='floor-center'>
|
|
|
+ <div class='floor-center' :style='{ marginTop : marginTop }'>
|
|
|
<div
|
|
|
class='floor-item'
|
|
|
:class='item.seq == currentFloorId?"isActive":""'
|
|
@@ -23,16 +28,24 @@
|
|
|
>{{item.code}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom(num)'></i> -->
|
|
|
<div v-if='floorsArr.length>5'>
|
|
|
- <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='changeFloor(-1)'></i>
|
|
|
- <i class='el-icon-caret-bottom icon-bottom' v-else style='color:#ccc'></i>
|
|
|
+ <i
|
|
|
+ class='el-icon-caret-bottom icon-bottom'
|
|
|
+ :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
|
|
|
+ v-if='showB'
|
|
|
+ @click='changeFloor(-1)'
|
|
|
+ ></i>
|
|
|
+ <i
|
|
|
+ class='el-icon-caret-bottom icon-bottom'
|
|
|
+ :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
|
|
|
+ v-else
|
|
|
+ style='color:#ccc'
|
|
|
+ ></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { animate } from '@/utils/animate.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -48,14 +61,32 @@ export default {
|
|
|
name: '第1层',
|
|
|
seq: 100
|
|
|
},
|
|
|
- currentFloorId: null
|
|
|
+ currentFloorId: null,
|
|
|
+ marginTop: 0,
|
|
|
+ startTime: '',
|
|
|
+ endTime: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ floorsArr: {
|
|
|
+ type: Array
|
|
|
+ /* default: () => {
|
|
|
+ return [
|
|
|
+ { name: '第6层', code: 'F6', gname: 'f6', gcode: '6F', seq: 600 },
|
|
|
+ { name: '第5层', code: 'F5', gname: 'f5', gcode: '5F', seq: 500 },
|
|
|
+ { name: '第4层', code: 'F4', gname: 'f4', gcode: '4F', seq: 400 },
|
|
|
+ { name: '第3层', code: 'F3', gname: 'f3', gcode: '3F', seq: 300 },
|
|
|
+ { name: '第2层', code: 'F2', gname: 'f2', gcode: '2F', seq: 200 },
|
|
|
+ { name: '第1层', code: 'F1', gname: 'f1', gcode: '1F', seq: 100 },
|
|
|
+ { name: '地下1层', code: 'B1', gname: 'b1', gcode: 'B1', seq: -100 },
|
|
|
+ { name: '地下2层', code: 'B2', gname: 'b2', gcode: 'B2', seq: -200 },
|
|
|
+ { name: '地下3层', code: 'B3', gname: 'b3', gcode: 'B3', seq: -300 },
|
|
|
+ { name: '地下4层', code: 'B4', gname: 'b4', gcode: 'B4', seq: -400 }
|
|
|
+ ]
|
|
|
+ } */
|
|
|
}
|
|
|
},
|
|
|
- props: ['floorsArr'],
|
|
|
mounted() {
|
|
|
- //console.log('this.floorsArrthis.floorsArrthis.floorsArrthis.floorsArr', this.floorsArr)
|
|
|
- // this.removeBottom(-1)
|
|
|
- // this.tabFloor()
|
|
|
this.init()
|
|
|
},
|
|
|
watch: {
|
|
@@ -68,6 +99,16 @@ export default {
|
|
|
// }
|
|
|
},
|
|
|
methods: {
|
|
|
+ mousedown() {
|
|
|
+ this.startTime = new Date()
|
|
|
+ console.log()
|
|
|
+ },
|
|
|
+ mouseup() {
|
|
|
+ this.endTime = new Date()
|
|
|
+ if (this.endTime - this.startTime < 200) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
init() {
|
|
|
if (!this.floorsArr.length) {
|
|
|
return false
|
|
@@ -76,7 +117,6 @@ export default {
|
|
|
this.floorsArr.map(item => {
|
|
|
this.floorIdArr.push(item.seq)
|
|
|
})
|
|
|
- // this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
|
|
|
this.currentFloorId = this.floorsArr[0].seq
|
|
|
this.changeFloor(0)
|
|
|
},
|
|
@@ -99,27 +139,12 @@ export default {
|
|
|
}
|
|
|
// 数据处理
|
|
|
this.handleCookie()
|
|
|
- //楼层位置处理,
|
|
|
- const inner = document.querySelectorAll('.floor-item')
|
|
|
- const innerbox = document.querySelector('.floor-center')
|
|
|
- // 页面显示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) {
|
|
|
- animate(innerbox, { marginTop: -height * (index - (showNumber - 2)) }, timer)
|
|
|
- // index < len - 1 && animate(innerbox, { marginTop: -height * (index - (showNumber - 2)) }, timer)
|
|
|
- } else {
|
|
|
- // 前 showNumber 条的margin-top设置为0
|
|
|
- animate(innerbox, { marginTop: 0 }, 500)
|
|
|
- }
|
|
|
+ // 楼层位置动画处理
|
|
|
+ this.handlePosition(flag, index, len)
|
|
|
// 处理上下按钮禁用逻辑
|
|
|
this.handleUpDownStatus(index, len)
|
|
|
},
|
|
|
+
|
|
|
/**
|
|
|
* @name handleUpDownStatus
|
|
|
* @param { Number } index 当前楼层在floorIdArr中的下标
|
|
@@ -152,6 +177,7 @@ export default {
|
|
|
* @description cookie数据处理
|
|
|
*/
|
|
|
handleCookie() {
|
|
|
+ // return true
|
|
|
let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
|
|
|
// this.$cookie.set('floorNow', currentFloor.code, 3)
|
|
|
// this.$cookie.set('floorMapId', currentFloor.gname, 3)
|
|
@@ -168,45 +194,34 @@ export default {
|
|
|
tabFloor(item, index) {
|
|
|
this.currentFloorId = this.floorIdArr[index]
|
|
|
this.handleCookie()
|
|
|
+ this.handlePosition(1, index, this.floorIdArr.length)
|
|
|
this.handleUpDownStatus(index, this.floorIdArr.length)
|
|
|
},
|
|
|
- removeTop(num) {
|
|
|
- //console.log(num)
|
|
|
- if (num == -1) {
|
|
|
- this.num = num
|
|
|
- this.showT = false
|
|
|
- this.showB = true
|
|
|
- }
|
|
|
- var inner = document.querySelectorAll('.floor-item')
|
|
|
- var innerbox = document.querySelector('.floor-center')
|
|
|
- if (this.num < 0) {
|
|
|
- this.num++
|
|
|
- } else {
|
|
|
- this.num = 0
|
|
|
- this.showT = false
|
|
|
- }
|
|
|
- if (this.num <= 0) {
|
|
|
- animate(innerbox, { marginTop: 32 * this.num }, 500, function() {})
|
|
|
- }
|
|
|
- },
|
|
|
- removeBottom(num) {
|
|
|
- //console.log(num)
|
|
|
- // let num = 0
|
|
|
- if (num == -2) {
|
|
|
- this.num = num
|
|
|
- this.showB = false
|
|
|
- this.showT = true
|
|
|
- }
|
|
|
- var inner = document.querySelectorAll('.floor-item')
|
|
|
- var innerbox = document.querySelector('.floor-center')
|
|
|
- if (this.num > -(inner.length - 4)) {
|
|
|
- this.num--
|
|
|
+ /**
|
|
|
+ * @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 {
|
|
|
- this.num = -(inner.length - 4)
|
|
|
- this.showB = false
|
|
|
- }
|
|
|
- if (this.num > -(inner.length - 4)) {
|
|
|
- animate(innerbox, { marginTop: 32 * this.num }, 500, function() {})
|
|
|
+ // 前 showNumber 条的margin-top设置为0
|
|
|
+ this.marginTop = 0
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -220,8 +235,6 @@ export default {
|
|
|
z-index: 2;
|
|
|
.floor-list {
|
|
|
width: 44px;
|
|
|
- // height: 212px;
|
|
|
- // height: 312px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
|
border-radius: 2px;
|
|
@@ -229,9 +242,6 @@ export default {
|
|
|
padding: 28px 4px;
|
|
|
text-align: center;
|
|
|
.floor-out {
|
|
|
- // height: 160px;
|
|
|
- // height: 312px;
|
|
|
- //TODO:
|
|
|
overflow: hidden;
|
|
|
// overflow-y: auto;
|
|
|
position: relative;
|
|
@@ -240,8 +250,7 @@ export default {
|
|
|
// }
|
|
|
|
|
|
.floor-center {
|
|
|
- // TODO:
|
|
|
- // margin-top: 0 !important;
|
|
|
+ transition: all linear 0.8s;
|
|
|
.floor-item {
|
|
|
width: 36px;
|
|
|
height: 32px;
|
|
@@ -283,5 +292,8 @@ export default {
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
}
|
|
|
+ .disabled {
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|