Explorar o código

'另存楼层切换组件修改'

zhangyu %!s(int64=4) %!d(string=hai) anos
pai
achega
3b0e89188e
Modificáronse 1 ficheiros con 311 adicións e 0 borrados
  1. 311 0
      src/components/floorMap/floorListCopy.vue

+ 311 - 0
src/components/floorMap/floorListCopy.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class='floor-box'>
+    <div class='floor-list'>
+      <div class='icon-top' v-if='floorsArr.length>8'>
+        <i class="iconfont wanda-top" style="color:#9ca2a9;font-size:12px;" v-show='parseInt(marginTop) !== 0'
+          v-repeat-click='increase'></i>
+        <i class="iconfont wanda-top" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
+          v-show='parseInt(marginTop) === 0'></i>
+        <!-- @click='changeFloor(1,currIndex)' -->
+        <!-- <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 id="floorBox" class='floor-out' :style='{ height:conHeight + "px" }'>
+        <!--  放开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>
+        <i class="iconfont wanda-bottom" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
+          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 />
+        <img class='disabled' v-show='parseInt(marginTop) === marginTopMax' src='@/assets/images/iconLightBottom.png'
+          alt /> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import RepeatClick from '@/directives/repeat-click'
+
+export default {
+  directives: {
+    repeatClick: RepeatClick,
+  },
+  data() {
+    return {
+      currentFloorId: null,
+      marginTop: 0,
+      marginTopMax: 0,
+      showNumber: 8, //需要展示的楼层数   //TODO:
+      height: 38, //一个楼层的高度
+      currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
+      conHeight: 0, // floor-out 的高度
+      direction: 1, //1:竖屏;2:横屏
+    }
+  },
+  props: {
+    floorsArr: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    }
+  },
+  mounted() {
+    let listener = document.getElementById('floorBox')
+    listener.addEventListener('scroll', () => {
+      console.log(document.getElementById('floorBox').scrollTop)
+    })
+    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
+      setTimeout(() => {
+        if (window.orientation === 0 || window.orientation === 180) {
+          this.direction = 1;
+          this.init()
+        }
+        if (window.orientation === 90 || window.orientation === -90) {
+          this.direction = 2;
+          this.init()
+        }
+      }, 300)
+    },false);
+  },
+  methods: {
+    /**
+     * @description 点击上箭头,marginTop<0时执行楼层滚动
+     */
+    increase() {
+      const marginTop = parseInt(this.marginTop)
+      marginTop < 0 && this.changeFloor(1, this.currIndex)
+    },
+    /**
+     * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
+     */
+    decrease() {
+      const marginTop = Math.abs(parseInt(this.marginTop)),
+        marginTopMax = Math.abs(parseInt(this.marginTopMax))
+      marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
+    },
+    init() {
+      if (this.direction == 1) {
+        // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
+        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.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 >= 240 ? 240 : this.conHeight
+        this.showNumber = this.floorsArr.length > 7 ? 7 : this.floorsArr.length
+        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
+      }
+    },
+    /**
+     * @name changeFloor
+     * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
+     * @description 点击图例下方的,上下切换按钮
+     */
+    changeFloor(flag, index) {
+      const len = this.floorsArr.length
+      this.currIndex = index
+      // 点击上箭头
+      if (flag === 1) {
+        index--
+        this.currIndex = index
+      } else if (flag === -1) {
+        //点击下箭头
+        index++
+        this.currIndex = index
+      }
+      this.handlePosition(flag, index, len)
+    },
+    /**
+     * @name tabFloor
+     * @param {Object} item 选中的楼层信息
+     * @param {Number} index 楼层信息在floorsArr数组中的位置
+     */
+    tabFloor(item, index) {
+      this.currentFloorId = item.gname;
+      this.$emit("emitFloor", item)
+      this.handlePosition(2, index, this.floorsArr.length)
+    },
+    /**
+     * @description 楼层位置动画处理
+     * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
+     * @param index 楼层 floorsArr
+     * @param len floorsArr
+     */
+    handlePosition(flag, index, len) {
+      // 取出当前 marginTop
+      let marginTop = parseInt(this.marginTop)
+      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)
+          }
+          // 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'
+          let floorBox = document.getElementById("floorBox")
+          if (this.direction == 1) {
+            let offsetLen = index - 6
+            floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
+          } else if (this.direction == 2) {
+            let offsetLen = index - 5
+            floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
+          }
+          break
+        //  1:向上滚动楼层
+        case 1:
+          this.marginTop = marginTop + this.height + 'px'
+          break
+        // -1向下滚动楼层
+        case -1:
+          this.marginTop = marginTop + this.height * -1 + 'px'
+          break
+        default:
+          break
+      }
+    },
+  },
+  watch: {
+    floorsArr: {
+      handler() {
+        if (window.orientation === 0 || window.orientation === 180) {
+          this.direction = 1;
+          this.init()
+        }
+        if (window.orientation === 90 || window.orientation === -90) {
+          this.direction = 2;
+          this.init()
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.floor-box {
+  .floor-list {
+    width: 40px;
+    // height: 212px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
+    border-radius: 2px;
+    position: relative;
+    padding: 6px 4px;
+    text-align: center;
+    .floor-out {
+      // max-height: 300px; //TODO:
+      min-height: 38px;
+      overflow-x: hidden;
+      position: relative;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .floor-center {
+        transition: all linear 0.5s;
+        .floor-item {
+          line-height: 28px;
+          height: 28px;
+          cursor: pointer;
+          position: relative;
+          &::after {
+            position: absolute;
+            left: 50%;
+            margin-left: -20%;
+            bottom: -6px;
+            content: "";
+            width: 14px;
+            height: 1px;
+            background: rgba(195, 199, 203, 1);
+            border: 0px solid rgba(228, 229, 231, 1);
+          }
+          & + .floor-item {
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+
+    .icon-top {
+      cursor: pointer;
+      height: 18px;
+    }
+    .icon-bottom {
+      cursor: pointer;
+      height: 18px;
+    }
+    .isActive {
+      border-radius: 4px;
+      color: #ffffff;
+      background: #025baa;
+    }
+  }
+  .disabled {
+    cursor: not-allowed !important;
+  }
+}
+// 横屏
+@media screen and (orientation: landscape) {
+  .floor-box {
+    .floor-list {
+      width: 30px;
+      .floor-out {
+        .floor-center {
+          .floor-item {
+            line-height: 20px;
+            height: 20px;
+            &::after {
+              position: absolute;
+              left: 50%;
+              margin-left: -20%;
+              bottom: -2px;
+              content: "";
+              width: 10px;
+              height: 1px;
+              background: rgba(195, 199, 203, 1);
+              border: 0px solid rgba(228, 229, 231, 1);
+            }
+            & + .floor-item {
+              margin-top: 4px;
+            }
+          }
+        }
+      }
+      .icon-top {
+        height: 10px;
+      }
+      .icon-bottom {
+        height: 10px;
+      }
+    }
+  }
+}
+</style>