ISMS-Visualization-BJGD-TKT/src/views/basePage/panels/Fold.vue

<template>
  <div class="fold transition">
    <div
      class="openFold"
      :class="[mapMode.value === 'home' ? 'isno' : 'isyes']"
      @click="clickOpen"
    >
      <span>
        {{ mapMode.value === "home" ? "收起面板" : "展开面板" }}
      </span>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: { positionFold: Object },
  data() {
    return {
      position: {
        left: 490,
        right: 490,
        isopen: true,
        issprh: false,
      },
    };
  },
  computed: {
    ...mapGetters(["mapMode"]),
  },
  watch: {
    mapMode: {
      handler(val, oldVal) {
        console.log("mapMode", val.value, oldVal.value);
        this.updateStyle();
      },
      deep: true,
    },
  },
  methods: {
    updateStyle() {
      this.position.isopen = !this.position.isopen;
      if (this.mapMode.value === "home") {
        let main = document.querySelector(".fold");
        main.style.transform = `translateX(0px)`;
        main.style.transition = "transform 1s ease";
      } else {
        let main = document.querySelector(".fold");
        main.style.transform = `translateX(470px)`;
        main.style.transition = "transform 1s ease";
      }
      var param = {
        isopen: this.position.isopen,
        issprh: this.position.issprh,
      };
      this.$emit("position", param);
    },
    clickOpen() {
      if (this.mapMode) {
        if (this.mapMode.value === "home") {
          this.$store.dispatch("globalConfig/setMapMode", { value: "3d" });
        } else if (this.mapMode.value === "3d") {
          this.$store.dispatch("globalConfig/setMapMode", { value: "home" });
        }
      }
    },
  },
  mounted() {
    this.position = this.positionFold;
  },
  updated() {
    this.position = this.positionFold;
  },
};
</script>
<style lang="less" scoped>
.fold {
  position: absolute;
  z-index: 99;
  width: 140px;
  // height: 200px;
  top: 106px;
  right: 450px;
  //   background: #000;
  .openFold {
    pointer-events: auto;
    cursor: pointer;
    width: 140px;
    height: 45px;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    line-height: 45px;
    span {
      font-size: 14px;
      font-weight: 700;
      background-image: linear-gradient(180deg, #ffffff, #419aff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}
.isno {
  background-image: url(~@/assets/imgs/fold/button_收起面板_sel.png);
}
.isyes {
  background-image: url(~@/assets/imgs/fold/button_收起面板_pre.png);
}
</style>