web_qp_phone_ui/src/components/Scene.vue

<template>
  <div class="scene">
    <div class="scene_button" :class="{ active: openStatus }" @click="openSceneList"></div>
    <div class="scene_container animate__animated" ref="scene_list">
      <!-- v-show="sceneContainerShow" -->
      <van-tabs v-model="scene_index" @change="tabChange" :animated="true">
        <van-tab v-for="(item, index) in sceneData" :key="index" :title="item.name" :name="index">
          <div :class="[{ swiper: true }, 'mySwiper' + (index + 1)]">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(slide, index_) in item.children" :key="index_" @click="jumpScene(slide)"
                :class="{ active: slide.active }">
                <img :src="slide.image" />
                <span v-if="slide.name.length < 8">{{ slide.name }}</span>
                <marquee v-else class="marquee" direction="left" scrollamount="1" behavior="scroll" scrolldelay="0"
                  loop="loop">
                  {{ slide.name }}
                </marquee>
              </div>
              <div class="swiper-scrollbar"></div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let sceneData = JSON.parse(JSON.stringify(systemConfig.scene));
    sceneData = sceneData.map(function (item, firstIndex) {
      if (firstIndex == 0) {
        item.active = true;
      } else {
        item.active = false;
      }
      item.children = item.children.map(function (sce, secondIndex) {
        sce.active = false;
        return sce;
      });
      return item;
    });
    return {
      scene_index: 0,
      openStatus: true,
      sceneContainerShow: true,
      sceneData: sceneData,
      swiper1: null,
      swiper2: null,
      swiper3: null,
      swiper4: null,
    };
  },
  // components: {
  //   swiper,
  //   swiperSlide,
  // },
  mounted() {
    let that = this;
    window.clearSceneActive = this.clearSceneActive;
    setTimeout(() => {
      that.tabTendered(that.scene_index);
    }, 100);
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
      that.tabTendered(that.scene_index);
      // if(that.swiper1)that.swiper1.updateSize();
      // if(that.swiper2)that.swiper2.updateSize();
      // if(that.swiper3)that.swiper3.updateSize();
      // if(that.swiper4)that.swiper4.updateSize();
      // if (window.orientation === 180 || window.orientation === 0) {
      //   console.log("竖屏");
      //   // $(".codeIg_s").removeClass('vercreen');//取消横屏样式
      // }
      // if (window.orientation === 90 || window.orientation === -90 ){
      //   console.log("横屏");
      //   // $(".codeIg_s").addClass('vercreen');//添加横屏样式
      // }
    }, false);
  },
  methods: {
    openSceneList() {
      let that = this;
      this.openStatus = !this.openStatus;
      if (this.openStatus) {
        // 向上平移
        this.$refs["scene_list"].style.display = "block";
        this.$refs["scene_list"].classList.add("animate__fadeInUp");
        setTimeout(() => {
          this.$refs["scene_list"].classList.remove("animate__fadeInUp");
        }, 1000);
      } else {
        // 向下平移
        this.$refs["scene_list"].classList.add("animate__fadeOutDown");
        setTimeout(() => {
          this.$refs["scene_list"].style.display = "none";
          this.$refs["scene_list"].classList.remove("animate__fadeOutDown");
        }, 1000);
      }
    },
    jumpScene(item) {
      this.sceneData = this.sceneData.map(function (item, index) {
        item.children = item.children.map(function (tt, index) {
          tt.active = false;
          return tt;
        });
        return item;
      });

      item.active = true;
      cancelLookAround();
      showTitle(item.name);
      this.$flyTo({
        lon: item.camera.lon,
        lat: item.camera.lat,
        h: item.camera.h,
        heading: item.camera.heading,
        pitch: item.camera.pitch,
        roll: item.camera.roll,
        time: 1,
        pitchAdjustHeight: 1000,
        details: item,
        callback: null,
      });
    },
    clearSceneActive(index) {
      if (this.imageList)
        this.imageList = this.imageList.map(function (tt, index) {
          tt.active = false;
          return tt;
        });
    },
    tabChange(index, title) {
      let that = this;
      setTimeout(() => {
        that.tabTendered(index);
      }, 100);
    },
    tabTendered(index) {
      let swiperOptions = {
        loop: false, //自动轮播
        slideToClickedSlide: true,
        slidesPerView: "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。auto为居中显示一个
        centeredSlides: true, //若为true，那么活动块会居中，而非默认状态下的居左...false
        spaceBetween: 20, //设置每个slide之间的距离（单位px）。
      };
      switch (index) {
        case 0:
          this.swiper1 = new Swiper(".mySwiper1", swiperOptions);
          break;

        case 1:
          this.swiper2 = new Swiper(".mySwiper2", swiperOptions);
          break;

        case 2:
          this.swiper3 = new Swiper(".mySwiper3", swiperOptions);
          break;

        case 3:
          this.swiper4 = new Swiper(".mySwiper4", swiperOptions);
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.scene {
  position: absolute;
  z-index: 0;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 0px;

  .scene_button {
    position: relative;
    z-index: 1;
    bottom: 11vw;
    left: 0px;
    width: 11vw;
    height: 11vw;
    background: url(~@/assets/img/scene/scene.png) center center/100% 100% no-repeat;

    &.active {
      background: url(~@/assets/img/scene/scene_active.png) center center/100% 100% no-repeat;
    }
  }

  .scene_container {
    position: absolute;
    z-index: 1;
    bottom: 11vw;
    left: 0px;
    height: 32vw;
    width: 100%;

    .van-tabs {
      width: 100%;
      height: 100%;

      :deep(.van-tabs__wrap) {
        height: 8vw;
        padding: 5px 20px;
        background: #33333366;
        transform: translateY(20vw);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        .van-tabs__nav {
          background: transparent;
          padding: 0 0;

          .van-tab {
            width: fit-content;
            min-width: 72px;
            max-width: 120px;

            .van-tab__text {
              color: #ffffff;
              font-size: 3vw;
              height: 5vw;
              line-height: 5vw
            }

            .van-tab--active {
              color: #ffffff;
            }
          }

          .van-tabs__line {
            bottom: 0px;
            height: 2px;
          }
        }
      }

      :deep(.van-tabs__content) {
        transform: translateY(-140px);
        background: #33333366;
        padding: 5px 0px;
        height: 200px;

        .van-tab__panel {
          height: 200px;
        }

        .swiper {
          width: 100%;
          height: 100%;
        }

        .swiper-slide {
          // width: 145.5px !important;
          // height: 78px !important;
          width: 349.2px !important;
          height: 187.2px !important;
          overflow: hidden;

          img {
            width: 349.2px;
            height: 187.2px;
          }

          .marquee,
          span {
            width: 100%;
            color: #ffffff;
            position: absolute;
            bottom: 0px;
            left: 0px;
            font-size: 28px;
            text-align: center;
            background: #33333366;
          }

          &.active {
            border: 2px solid #e77d00;
          }
        }

        .swiper .swiper-wrapper .swiper-slide {
          width: 650px;
        }
      }
    }
  }
}
</style>