Browse Source

floorList 楼层状态处理

unknown 4 years ago
parent
commit
42b7f524e7
1 changed files with 138 additions and 9 deletions
  1. 138 9
      src/components/floorList.vue

+ 138 - 9
src/components/floorList.vue

@@ -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;