|
@@ -6,22 +6,20 @@
|
|
<template>
|
|
<template>
|
|
<div class='floor-box'>
|
|
<div class='floor-box'>
|
|
<div class='floor-list'>
|
|
<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='changeFloor(1)'></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-else style='color:#ccc'></i>
|
|
<i class='el-icon-caret-top icon-top' v-else style='color:#ccc'></i>
|
|
<div class='floor-out'>
|
|
<div class='floor-out'>
|
|
<div class='floor-center'>
|
|
<div class='floor-center'>
|
|
<div
|
|
<div
|
|
class='floor-item'
|
|
class='floor-item'
|
|
- :class='item.seq == currentFloorId?"isActive":""'
|
|
|
|
|
|
+ :class='item.code==floorId?"isActive":""'
|
|
@click='tabFloor(item,index)'
|
|
@click='tabFloor(item,index)'
|
|
v-for='(item,index) in floorsArr'
|
|
v-for='(item,index) in floorsArr'
|
|
:key='index'
|
|
:key='index'
|
|
>{{item.code}}</div>
|
|
>{{item.code}}</div>
|
|
</div>
|
|
</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='changeFloor(-1)'></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-else style='color:#ccc'></i>
|
|
<i class='el-icon-caret-bottom icon-bottom' v-else style='color:#ccc'></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -43,14 +41,10 @@ export default {
|
|
gname: 'f1',
|
|
gname: 'f1',
|
|
name: '第1层',
|
|
name: '第1层',
|
|
seq: 100
|
|
seq: 100
|
|
- },
|
|
|
|
- currentFloorId: 100,
|
|
|
|
- floorIdArr: []
|
|
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
- console.log(this.floorsArr)
|
|
|
|
- this.init()
|
|
|
|
this.removeBottom(-1)
|
|
this.removeBottom(-1)
|
|
this.tabFloor()
|
|
this.tabFloor()
|
|
},
|
|
},
|
|
@@ -58,51 +52,12 @@ export default {
|
|
...mapGetters(['floorsArr'])
|
|
...mapGetters(['floorsArr'])
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- init() {
|
|
|
|
- // if (this.floorsArr) {
|
|
|
|
- this.floorIdArr = []
|
|
|
|
- this.floorsArr.map(item => {
|
|
|
|
- this.floorIdArr.push(item.seq)
|
|
|
|
- })
|
|
|
|
- this.currentFloorId = 100
|
|
|
|
- // }
|
|
|
|
- },
|
|
|
|
- /**
|
|
|
|
- * @name changeFloor
|
|
|
|
- * @param {Number} flag 1:向上滚动楼层, -1向下滚动
|
|
|
|
- * @description 点击图例下方的,上下切换按钮
|
|
|
|
- */
|
|
|
|
- changeFloor(flag) {
|
|
|
|
- console.log(this.floorIdArr)
|
|
|
|
- const len = this.floorIdArr.length
|
|
|
|
- let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
|
|
|
|
- console.log('---------------index:', index, '--------------')
|
|
|
|
- if (flag === 1) {
|
|
|
|
- index--
|
|
|
|
- this.currentFloorId = this.floorIdArr[index]
|
|
|
|
- } else if (flag === -1) {
|
|
|
|
- index++
|
|
|
|
- this.currentFloorId = this.floorIdArr[index]
|
|
|
|
- }
|
|
|
|
- // 最上最下处理
|
|
|
|
- if (index === 0) {
|
|
|
|
- this.currentFloorId = this.floorIdArr[0]
|
|
|
|
- console.log('currentFloorId', this.currentFloorId)
|
|
|
|
- this.showT = false
|
|
|
|
- this.showB = true
|
|
|
|
- } else if (index === len - 1) {
|
|
|
|
- this.currentFloorId = this.floorIdArr[len - 1]
|
|
|
|
- console.log('currentFloorId', this.currentFloorId)
|
|
|
|
- this.showT = true
|
|
|
|
- this.showB = false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
tabFloor(item = this.floor, index) {
|
|
tabFloor(item = this.floor, index) {
|
|
console.log(this.num)
|
|
console.log(this.num)
|
|
if (this.num <= -1) {
|
|
if (this.num <= -1) {
|
|
this.showT = true
|
|
this.showT = true
|
|
}
|
|
}
|
|
- if (this.num > -1) {
|
|
|
|
|
|
+ if (this.num >= -1) {
|
|
this.showB = true
|
|
this.showB = true
|
|
}
|
|
}
|
|
this.$cookie.set('floorNow', item.code, 3)
|
|
this.$cookie.set('floorNow', item.code, 3)
|
|
@@ -162,7 +117,6 @@ export default {
|
|
.floor-list {
|
|
.floor-list {
|
|
width: 44px;
|
|
width: 44px;
|
|
height: 212px;
|
|
height: 212px;
|
|
- height: 312px;
|
|
|
|
background: rgba(255, 255, 255, 1);
|
|
background: rgba(255, 255, 255, 1);
|
|
box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
border-radius: 2px;
|
|
border-radius: 2px;
|
|
@@ -171,8 +125,6 @@ export default {
|
|
text-align: center;
|
|
text-align: center;
|
|
.floor-out {
|
|
.floor-out {
|
|
height: 160px;
|
|
height: 160px;
|
|
- height: 312px;
|
|
|
|
- //TODO:
|
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
// overflow-y: auto;
|
|
// overflow-y: auto;
|
|
position: relative;
|
|
position: relative;
|
|
@@ -181,8 +133,6 @@ export default {
|
|
// }
|
|
// }
|
|
|
|
|
|
.floor-center {
|
|
.floor-center {
|
|
- // TODO:
|
|
|
|
- margin-top: 0 !important;
|
|
|
|
.floor-item {
|
|
.floor-item {
|
|
width: 36px;
|
|
width: 36px;
|
|
height: 32px;
|
|
height: 32px;
|