|
@@ -6,20 +6,22 @@
|
|
|
<template>
|
|
|
<div class='floor-box'>
|
|
|
<div class='floor-list'>
|
|
|
- <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop(num)'></i>
|
|
|
+ <!-- <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop(num)'></i> -->
|
|
|
+ <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>
|
|
|
<div class='floor-out'>
|
|
|
<div class='floor-center'>
|
|
|
<div
|
|
|
class='floor-item'
|
|
|
- :class='item.code==floorId?"isActive":""'
|
|
|
+ :class='item.seq == currentFloorId?"isActive":""'
|
|
|
@click='tabFloor(item,index)'
|
|
|
v-for='(item,index) in floorsArr'
|
|
|
:key='index'
|
|
|
>{{item.code}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom(num)'></i>
|
|
|
+ <!-- <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom(num)'></i> -->
|
|
|
+ <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>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -41,23 +43,144 @@ export default {
|
|
|
gname: 'f1',
|
|
|
name: '第1层',
|
|
|
seq: 100
|
|
|
- }
|
|
|
+ },
|
|
|
+ currentFloorId: null,
|
|
|
+ floorIdArr: []
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.removeBottom(-1)
|
|
|
- this.tabFloor()
|
|
|
+ // this.removeBottom(-1)
|
|
|
+ // this.tabFloor()
|
|
|
+ console.log(`floorsArr---------------:\n`, this.floorsArr)
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 监听floorsArr的变化
|
|
|
+ /* floorsArr: {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ } */
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(['floorsArr'])
|
|
|
},
|
|
|
methods: {
|
|
|
- tabFloor(item = this.floor, index) {
|
|
|
+ init() {
|
|
|
+ window.vm = this
|
|
|
+ this.floorIdArr = []
|
|
|
+ this.floorsArr.map(item => {
|
|
|
+ this.floorIdArr.push(item.seq)
|
|
|
+ })
|
|
|
+ console.log('cookie:', this.$cookie.get('currentFloorId'))
|
|
|
+ this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
|
|
|
+ this.changeFloor(0)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name changeFloor
|
|
|
+ * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
|
|
|
+ * @description 点击图例下方的,上下切换按钮
|
|
|
+ */
|
|
|
+ changeFloor(flag) {
|
|
|
+ console.log(this.floorIdArr)
|
|
|
+ const len = this.floorIdArr.length
|
|
|
+ let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
|
|
|
+ // 点击上箭头
|
|
|
+ if (flag === 1) {
|
|
|
+ index--
|
|
|
+ this.currentFloorId = this.floorIdArr[index]
|
|
|
+ } else if (flag === -1) {
|
|
|
+ //点击下箭头
|
|
|
+ index++
|
|
|
+ this.currentFloorId = this.floorIdArr[index]
|
|
|
+ }
|
|
|
+ // 数据处理
|
|
|
+ this.handleCookie()
|
|
|
+ // debugger
|
|
|
+ console.log('---------------index:', index, '--------------')
|
|
|
+ console.log('---------------floorIdArr:', this.floorIdArr, '--------------')
|
|
|
+ //楼层位置处理,
|
|
|
+ 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) {
|
|
|
+ index < len - 1 && animate(innerbox, { marginTop: -height * (index - (showNumber - 2)) }, timer)
|
|
|
+ } else {
|
|
|
+ // 前 showNumber 条的margin-top设置为0
|
|
|
+ animate(innerbox, { marginTop: 0 }, 500)
|
|
|
+ }
|
|
|
+ // 处理上下按钮禁用逻辑
|
|
|
+ this.handleUpDownStatus(index, len)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name handleUpDownStatus
|
|
|
+ * @param { Number } index 当前楼层在floorIdArr中的下标
|
|
|
+ * @param { Number } len floorIdArr的长度
|
|
|
+ * @description 处理上下按钮禁用逻辑
|
|
|
+ */
|
|
|
+ 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]
|
|
|
+ console.log('currentFloorId', this.currentFloorId)
|
|
|
+ this.showT = true
|
|
|
+ this.showB = false
|
|
|
+ break
|
|
|
+ // 默认都可以点击
|
|
|
+ default:
|
|
|
+ this.showT = true
|
|
|
+ this.showB = true
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name handleCookie
|
|
|
+ * @description cookie数据处理
|
|
|
+ */
|
|
|
+ handleCookie() {
|
|
|
+ let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
|
|
|
+ console.log('------------------------')
|
|
|
+ console.log('currentFloor', currentFloor)
|
|
|
+ console.log('------------------------')
|
|
|
+ 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
|
|
|
+ this.$emit('emitFloor', currentFloor)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name tabFloor
|
|
|
+ * @param {Object} 选中的楼层信息
|
|
|
+ * @param {Number} 楼层信息在floorsArr数组中的位置
|
|
|
+ */
|
|
|
+ tabFloor(item, index) {
|
|
|
+ this.currentFloorId = this.floorIdArr[index]
|
|
|
+ this.handleCookie()
|
|
|
+ this.handleUpDownStatus(index, this.floorIdArr.length)
|
|
|
+ },
|
|
|
+ /* tabFloor(item = this.floor, index) {
|
|
|
console.log(this.num)
|
|
|
if (this.num <= -1) {
|
|
|
this.showT = true
|
|
|
}
|
|
|
- if (this.num >= -1) {
|
|
|
+ if (this.num > -1) {
|
|
|
this.showB = true
|
|
|
}
|
|
|
this.$cookie.set('floorNow', item.code, 3)
|
|
@@ -65,7 +188,8 @@ export default {
|
|
|
this.floorId = this.$cookie.get('floorNow') || item.code
|
|
|
this.floorMapIdName = this.$cookie.get('floorMapId') || item.gname
|
|
|
this.$emit('emitFloor', item)
|
|
|
- },
|
|
|
+ }, */
|
|
|
+
|
|
|
removeTop(num) {
|
|
|
console.log(num)
|
|
|
if (num == -1) {
|
|
@@ -117,6 +241,7 @@ export default {
|
|
|
.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;
|
|
@@ -125,6 +250,8 @@ export default {
|
|
|
text-align: center;
|
|
|
.floor-out {
|
|
|
height: 160px;
|
|
|
+ // height: 312px;
|
|
|
+ //TODO:
|
|
|
overflow: hidden;
|
|
|
// overflow-y: auto;
|
|
|
position: relative;
|
|
@@ -133,6 +260,8 @@ export default {
|
|
|
// }
|
|
|
|
|
|
.floor-center {
|
|
|
+ // TODO:
|
|
|
+ // margin-top: 0 !important;
|
|
|
.floor-item {
|
|
|
width: 36px;
|
|
|
height: 32px;
|