Browse Source

'楼层组件优化及bug修改'

zhangyu 4 years ago
parent
commit
ee807d996f

+ 35 - 32
src/components/floorMap/floorList.vue

@@ -10,18 +10,19 @@
         <!-- <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/images/iconBlackTop.png' alt />
         <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/images/iconLightTop.png' alt /> -->
       </div>
-      <div class='floor-out' :style='{ height:conHeight + "px" }'>
+      <div id="floorBox" class='floor-out' :style='{ height:conHeight + "px" }'>
         <!--  放开marginTop样式  -->
-        <div class='floor-center' :style='{ marginTop : marginTop }'>
+        <!-- <div class='floor-center' :style='{ marginTop : marginTop }'> -->
+        <div class='floor-center'>
           <div class='floor-item' :class='item.gname == currentFloorId?"isActive":""' @click='tabFloor(item,index)'
             v-for='(item,index) in floorsArr' :key='index'>{{item.code}}</div>
         </div>
       </div>
       <div class='icon-bottom' v-if='floorsArr.length>8'>
         <i class="iconfont wanda-bottom" style="color:#9ca2a9;font-size:12px;"
-          v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'></i>
+          v-show='parseInt(marginTop) < marginTopMax' v-repeat-click='decrease'></i>
         <i class="iconfont wanda-bottom" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
-          v-show='parseInt(marginTop) === marginTopMax'></i>
+          v-show='parseInt(marginTop) >= marginTopMax'></i>
         <!-- v-repeat-click='decrease' -->
         <!-- <img v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'
           src='@/assets/images/iconBlackBottom.png' alt />
@@ -44,7 +45,7 @@ export default {
       marginTop: 0,
       marginTopMax: 0,
       showNumber: 8, //需要展示的楼层数   //TODO:
-      height: 39, //一个楼层的高度
+      height: 38, //一个楼层的高度
       currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
       conHeight: 0, // floor-out 的高度
       direction: 1, //1:竖屏;2:横屏
@@ -59,6 +60,10 @@ export default {
     }
   },
   mounted() {
+    let listener = document.getElementById('floorBox')
+    listener.addEventListener('scroll', () => {
+      this.marginTop = document.getElementById('floorBox').scrollTop;
+    })
     window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
       setTimeout(() => {
         if (window.orientation === 0 || window.orientation === 180) {
@@ -78,7 +83,7 @@ export default {
      */
     increase() {
       const marginTop = parseInt(this.marginTop)
-      marginTop < 0 && this.changeFloor(1, this.currIndex)
+      marginTop > 0 && this.changeFloor(1, this.currIndex)
     },
     /**
      * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
@@ -86,23 +91,25 @@ export default {
     decrease() {
       const marginTop = Math.abs(parseInt(this.marginTop)),
         marginTopMax = Math.abs(parseInt(this.marginTopMax))
-      marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
+      marginTop <= marginTopMax && this.changeFloor(-1, this.currIndex)
     },
     init() {
       if (this.direction == 1) {
         // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
-        this.conHeight = this.floorsArr.length * 37.5
+        this.height = 38
+        this.conHeight = this.floorsArr.length * 38
         this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
         this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
 
-        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
+        this.marginTopMax = (this.floorsArr.length - this.showNumber) * this.height
         // this.changeFloor(0, 0);
         // this.tabFloor(this.floorsArr[0], 0);
       } else if (this.direction == 2) {
+        this.height = 34.5
         this.conHeight = this.floorsArr.length * 30
-        this.conHeight = this.conHeight >= 230 ? 230 : this.conHeight
+        this.conHeight = this.conHeight >= 240 ? 240 : this.conHeight
         this.showNumber = this.floorsArr.length > 7 ? 7 : this.floorsArr.length
-        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
+        this.marginTopMax = (this.floorsArr.length - this.showNumber) * this.height
       }
     },
     /**
@@ -129,10 +136,10 @@ export default {
      * @param {Object} item 选中的楼层信息
      * @param {Number} index 楼层信息在floorsArr数组中的位置
      */
-    tabFloor(item, index) {
+    tabFloor(item, index, isMove) {
       this.currentFloorId = item.gname;
       this.$emit("emitFloor", item)
-      this.handlePosition(2, index, this.floorsArr.length)
+      this.handlePosition(2, index, this.floorsArr.length, isMove)
     },
     /**
      * @description 楼层位置动画处理
@@ -140,35 +147,31 @@ export default {
      * @param index 楼层 floorsArr
      * @param len floorsArr
      */
-    handlePosition(flag, index, len) {
-      // 取出当前 marginTop
-      let marginTop = parseInt(this.marginTop)
+    handlePosition(flag, index, len, isMove) {
+      let floorBox = document.getElementById("floorBox")
       switch (flag) {
         // 初始化进入页面,位置处理
         case 0:
         // 直接点击楼层,滚动楼层
         case 2:
-          // 将 marginTop 设置为对应的index 应滚动的距离
-          marginTop = -index * this.height
-          // marginTop 过大时,取最大值marginTopMax
-          if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
-            marginTop = parseInt(this.marginTopMax)
+          if (this.direction == 1 && isMove) {
+            let offsetLen = index - 6
+            floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
+          } else if (this.direction == 2 && isMove) {
+            let offsetLen = index - 5
+            floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
           }
-          // marginTop>0时,取0,防止楼层上边出现空白
-          marginTop = marginTop >= 0 ? 0 : marginTop
-          // index为0,marginTop设置为0
-          index == 0 && (marginTop = 0)
-          // index为最后一个,设置为最大marginTopMax
-          index == len - 1 && (marginTop = parseInt(this.marginTopMax))
-          this.marginTop = marginTop + 'px'
+          this.marginTop = floorBox.scrollTop;
           break
         //  1:向上滚动楼层
         case 1:
-          this.marginTop = marginTop + this.height + 'px'
+          floorBox.scrollTop = floorBox.scrollTop - this.height;
+          this.marginTop = floorBox.scrollTop;
           break
         // -1向下滚动楼层
         case -1:
-          this.marginTop = marginTop + this.height * -1 + 'px'
+          floorBox.scrollTop = floorBox.scrollTop + this.height;
+          this.marginTop = floorBox.scrollTop;
           break
         default:
           break
@@ -207,9 +210,9 @@ export default {
     .floor-out {
       // max-height: 300px; //TODO:
       min-height: 38px;
-      overflow: hidden;
+      overflow-x: hidden;
       position: relative;
-      overflow-y: auto;
+      overflow-y: scroll;
       &::-webkit-scrollbar {
         display: none;
       }

+ 1 - 1
src/router/index.ts

@@ -105,7 +105,7 @@ const routes: Array<RouteConfig> = [
         name: 'MainEquipment',
         component: () => import(/* webpackChunkName: "mainEquipment" */ '../views/equipmentFacilities/MainEquipment.vue'),
         meta: {
-            keepAlive: false,
+            keepAlive: true,
             showTabbar: false,
             hideNarBar: true,
         },

+ 1 - 0
src/views/FloorFunc.vue

@@ -157,6 +157,7 @@ export default {
     },
     // 查询附加数据图片
     queryTable(floorId) {
+      this.imgKey = `img${new Date().getTime()}`;
       let getParams = {
         module: '1003',
         floor: floorId,

+ 19 - 3
src/views/equipmentFacilities/MainEquipment.vue

@@ -177,11 +177,14 @@ export default {
     this.floorsArr.map(({ code, gcname, gcode, gname, seq }) => {
         floorList.push({ code, gcname, gcode, gname, seq, active: '' })
     })
-    this.floorList = floorList
-  },
-  mounted() {
+    this.floorList = floorList;
     this.getData();
   },
+  activated() {
+    if (this.$route.params.isInit) {
+      this.initData();
+    }
+  },
   methods: {
     backPage() {
       if (this.$route.query.first) {
@@ -190,6 +193,19 @@ export default {
         this.$router.go(-1);
       }
     },
+    // 初始化
+    initData() {
+      this.active = 0;
+      this.keyword = "";
+      this.floorList.map((item, index) => {
+          item.active = ''
+          if (index === 0) {
+              item.active = 'active';
+              this.floorId = "";
+          }
+      })
+      this.getData();
+    },
     // 切换tab
     changeTab(active) {
       this.tab_code = active;

+ 1 - 1
src/views/equipmentFacilities/index.vue

@@ -564,7 +564,7 @@ export default {
         },
 
         handleMainAsset() {
-            this.$router.push({ name: 'MainEquipment' })
+            this.$router.push({ name: 'MainEquipment', params: { isInit: true } })
         },
         handleWxwb() {
             this.$router.push({ name: 'MaintenanceRecordView', params: { isInit: true } })

+ 2 - 2
src/views/overview/MapOther.vue

@@ -114,7 +114,7 @@ export default {
     // 展示图例
     showLegend() {
       if(this.legendList.length) {
-        this.show = true;
+        this.show = !this.show;
       }
     },
     // 获取图例数据
@@ -533,7 +533,7 @@ export default {
             gname: floor.FloorId,
             code: floor.FloorName
           }
-          this.$refs.fList.tabFloor(item ,index);
+          this.$refs.fList.tabFloor(item ,index, true);
           // this.$refs.fList.currentFloorId = floor.FloorId;
           // this.init(floor.FloorId);
         })

+ 2 - 2
src/views/overview/MapView.vue

@@ -113,7 +113,7 @@ export default {
     // 展示图例
     showLegend() {
       if(this.legendList.length) {
-        this.show = true;
+        this.show = !this.show;
       }
     },
     // 获取图例数据
@@ -529,7 +529,7 @@ export default {
             gname: floor.FloorId,
             code: floor.FloorName
           }
-          this.$refs.fList.tabFloor(item ,index);
+          this.$refs.fList.tabFloor(item ,index, true);
           // this.$refs.fList.currentFloorId = floor.FloorId;
           // this.init(floor.FloorId);
         })