guoxiaohuan 4 年之前
父节点
当前提交
92437d1688
共有 2 个文件被更改,包括 50 次插入6 次删除
  1. 48 4
      src/components/floorList.vue
  2. 2 2
      src/views/equipment/index.vue

+ 48 - 4
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,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;

+ 2 - 2
src/views/equipment/index.vue

@@ -100,7 +100,7 @@ export default {
         emitFloor(item) {
             console.log('item', item)
             this.floorInfo = item
-            this.$refs.floorMap.init(this.floorInfo.gname)
+            // this.$refs.floorMap.init(this.floorInfo.gname)
             this.init()
         },
         dialogVisible(eve) {
@@ -132,7 +132,7 @@ export default {
     mounted() {
         this.everySystem = this.system[0].children
         this.init()
-        this.$refs.floorMap.init(this.floorInfo.gname)
+        // this.$refs.floorMap.init(this.floorInfo.gname)
     }
 }
 </script>