wanda-bm-guide/src/components/floorListDark.vue

/**
*@author:Guoxiaohuan
*@date:2020.06.02
*@info：楼层列表
*/
<template>
  <div class="floor-box">
    <div class="floor-list">
      <div class="icon-top" v-if="floorsArr.length > 8">
        <!-- @click='changeFloor(1,currIndex)' -->
        <img
          v-show="parseInt(marginTop) !== 0"
          v-repeat-click="increase"
          src="@/assets/imgs/iconBlackTop.png"
          alt
        />
        <img
          class="disabled"
          v-show="parseInt(marginTop) === 0"
          src="@/assets/imgs/iconLightTop.png"
          alt
        />
      </div>
      <div class="floor-out" :style="{ height: conHeight + 'px' }">
        <!--  放开marginTop样式  -->
        <div class="floor-center" :style="{ marginTop: marginTop }">
          <div
            class="floor-item"
            :class="item.seq == 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">
        <!-- v-repeat-click='decrease' -->
        <img
          v-show="parseInt(marginTop) !== marginTopMax"
          v-repeat-click="decrease"
          src="@/assets/imgs/iconBlackBottom.png"
          alt
        />
        <img
          class="disabled"
          v-show="parseInt(marginTop) === marginTopMax"
          src="@/assets/imgs/iconLightBottom.png"
          alt
        />
      </div>
    </div>
  </div>
</template>
<script>
import store from "../store";
import { mapGetters } from "vuex";
import RepeatClick from "@/directives/repeat-click";

export default {
  directives: {
    repeatClick: RepeatClick,
  },
  data() {
    return {
      floorId: "F1",
      showT: true,
      showB: true,
      num: 0,
      floorMapIdName: "",
      floor: {},
      currentFloorId: null,
      marginTop: 0,
      marginTopMax: 0,
      startTime: "",
      endTime: "",
      floorObj2: {},
      showNumber: 8, //需要展示的楼层数
      height: 39, //一个楼层的高度
      currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
      conHeight: 0, // floor-out 的高度
    };
  },
  props: {
    floorsArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 默认true,
    // 1. 切换楼层后,是否触发 cookie,vuex数据修改,
    // 2. 在fenbuPic组件中为false, 1)不触发cookie,vuex , 2) 选中的楼层ID,为楼层列表数组floorIdArr的第0个
    changeDataFlag: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapGetters(["legendTable", "floorObj"]),
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * @description 点击上箭头,marginTop<0时执行楼层滚动
     */
    increase() {
      let marginTop = parseInt(this.marginTop);
      marginTop < 0 && this.changeFloor(1, this.currIndex);
    },
    /**
     * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
     */
    decrease() {
      let marginTop = Math.abs(parseInt(this.marginTop)),
        marginTopMax = Math.abs(parseInt(this.marginTopMax));
      marginTop < marginTopMax && this.changeFloor(-1, this.currIndex);
    },
    init() {
      if (!this.floorsArr.length) {
        return false;
      }
      this.floorIdArr = [];
      this.floorsArr.map((item) => {
        this.floorIdArr.push(item.seq);
        if (item.seq == this.$cookie.get("currentFloorId")) {
          this.floor = item;
        } else {
          this.floor = this.floorObj;
        }
      });
      this.currentFloorId = Number(
        this.$cookie.get("currentFloorId") || this.floor.seq
      );
      // bug fix 修复 fenbuPic 弹窗中,楼层不能选中的问题
      // 如果 floorIdArr 不在 floorIdArr数组中,或者changeDataFlag为false(弹窗组件中的楼层组件),使用 floorIdArr[0], 而不使用 cookie
      let index = this.floorIdArr.findIndex(
        (item) => item === this.currentFloorId
      );
      if (index === -1 || !this.changeDataFlag) {
        this.currentFloorId = this.floorIdArr[0];
      }
      // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
      this.conHeight = this.floorsArr.length * 37.5;
      this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight;
      this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length;

      this.marginTopMax =
        -(this.floorIdArr.length - this.showNumber) * this.height;
      this.changeFloor(0, index);
    },
    /**
     * @name changeFloor
     * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
     * @description 点击图例下方的,上下切换按钮
     */
    changeFloor(flag, index) {
      const len = this.floorIdArr.length;
      // let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
      this.currIndex = index;
      // 点击上箭头
      if (flag === 1) {
        index--;
        this.currIndex = index;
      } else if (flag === -1) {
        //点击下箭头
        index++;
        this.currIndex = index;
      }
      // FEAT:  点击上下箭头,不触发cookie更改 , 只有初始化时,才进行选中的楼层 状态更新
      if (flag === 0) {
        this.handleCookie();
      }
      this.handlePosition(flag, index, len);
    },
    handleCookie() {
      let currentFloor = this.floorsArr.filter(
        (item) => item.seq == this.currentFloorId
      )[0];
      if (currentFloor) {
        // 如果 changeDataFlag为true(不是在 分布图弹窗组件中的 楼层组件),设置cookie,vuex
        if (this.changeDataFlag) {
          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;
          store.commit("SETCURRENTFLOOR", currentFloor);
        }
        this.$emit("emitFloor", currentFloor);
      }
    },
    /**
     * @name tabFloor
     * @param {Object} item 选中的楼层信息
     * @param {Number} index 楼层信息在floorsArr数组中的位置
     */
    tabFloor(item, index) {
      this.currentFloorId = this.floorIdArr[index];
      this.handleCookie();
      this.handlePosition(2, index, this.floorIdArr.length);
      this.viewLengend();
    },
    viewLengend() {
      if (this.legendTable.length > 0) {
        this.$store.commit("SETSHOWVIEW", 1);
      } else {
        this.$store.commit("SETSHOWVIEW", 0);
      }
    },
    /**
     * @description 楼层位置动画处理
     * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
     * @param index 楼层 在floorIdArr中的下标
     * @param len floorIdArr长度
     */
    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";
          break;
        //  1:向上滚动楼层
        case 1:
          this.marginTop = marginTop + this.height + "px";
          break;
        // -1向下滚动楼层
        case -1:
          this.marginTop = marginTop + this.height * -1 + "px";
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.floor-box {
  .floor-list {
    width: 44px;
    // height: 212px;
    box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
    border-radius: 2px;
    position: relative;
    padding: 6px 4px;
    text-align: center;
    background: rgba(22,73,206,0.36);
    border: 1px solid rgba(105,207,234,0.36);
    .floor-out {
      // max-height: 300px; //TODO:
      min-height: 38px;
      overflow: hidden;
      position: relative;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }

      .floor-center {
        transition: all linear 0.5s;
        .floor-item {
          line-height: 28px;
          height: 28px;
          cursor: pointer;
          position: relative;
          color: #69cfea;
          &::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;
      img {
        width: 18px;
        height: 100%;
        margin-top: -10px;
      }
    }
    .icon-bottom {
      cursor: pointer;
      height: 18px;
      img {
        width: 18px;
        height: 100%;
        margin-top: -10px;
      }
    }
    .isActive {
      background: rgba(98, 196, 221, 0.3);
      border-radius: 4px;
      border: 1px solid #62c4dd;
    }
  }
  .disabled {
    cursor: not-allowed !important;
  }
}
</style>