|
@@ -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,10 +43,14 @@ export default {
|
|
|
gname: 'f1',
|
|
|
name: '第1层',
|
|
|
seq: 100
|
|
|
- }
|
|
|
+ },
|
|
|
+ currentFloorId: 100,
|
|
|
+ floorIdArr: []
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
+ console.log(this.floorsArr)
|
|
|
+ this.init()
|
|
|
this.removeBottom(-1)
|
|
|
this.tabFloor()
|
|
|
},
|
|
@@ -52,6 +58,41 @@ export default {
|
|
|
...mapGetters(['floorsArr'])
|
|
|
},
|
|
|
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)
|
|
|
+
|
|
|
+ if (flag) {
|
|
|
+ this.currentFloorId = this.floorIdArr[index--]
|
|
|
+ } else {
|
|
|
+ this.currentFloorId = this.floorIdArr[index++]
|
|
|
+ }
|
|
|
+ console.log(this.currentFloorId)
|
|
|
+
|
|
|
+ if (index === 0) {
|
|
|
+ this.showT = false
|
|
|
+ this.showB = true
|
|
|
+ } else if (index === len - 1) {
|
|
|
+ this.showT = true
|
|
|
+ this.showB = false
|
|
|
+ }
|
|
|
+ },
|
|
|
tabFloor(item = this.floor, index) {
|
|
|
console.log(this.num)
|
|
|
if (this.num <= -1) {
|
|
@@ -117,6 +158,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 +167,8 @@ export default {
|
|
|
text-align: center;
|
|
|
.floor-out {
|
|
|
height: 160px;
|
|
|
+ height: 290px;
|
|
|
+ //TODO:
|
|
|
overflow: hidden;
|
|
|
// overflow-y: auto;
|
|
|
position: relative;
|