new_era/src/pages/scene/index.vue

<template>
  <div :class="`theme${theme}`" id="scenebody" class="scene-body">
    <div class="logo" @click="$router.push({ path: '/' })">
      <img :src="require(`@/assets/images/proj2022/pc/logo.png`)" alt="" />
    </div>

    <div class="scene-con" :class="{ showscene: showAll }">
      <div v-show="!showViewMode && !tourStatus">
        <vmenu :currentPanoid="currentPanoid" v-show="!tourStatus && !isClear" :tourStatus="tourStatus" @opencp="handlecp" />

        <!-- <zhanxiang :currentPanoid="currentPanoid" v-show="!tourStatus && !isClear" :zxdata="zhanxiangData" :class="{ zxshow: isShowZX }" /> -->
        <div v-if="isClear" @click.stop="clicktoClear" class="isClear">
          <img :src="require('@/assets/images/proj2022/icon/clear_active.png')" alt="" />
          <span>恢复</span>
        </div>
      </div>
      <roundMenu
        @resetCurrentTheme="currentTheme = ''"
        :currentZhanqu="currentZhanqu"
        :currentTheme="currentTheme"
        :class="`${!tourStatus && !isClear ? 'ronundShow' : 'ronundHide'}`"
      />

      <scene v-if="showScene" />
    </div>

    <vhotspot v-if="hotspot" @close="hotspot = ''" :hotspot="hotspot" />
    <vpopup v-if="showpopup && cp" v-clickoutside="handleoutside">
      <div slot="vcon" class="popcon" :class="{ pad_notlandscape: isiPad && !g_isLandscape }">
        <component :is="cp" :currentPano="currentPano" :currentZhanqu="currentZhanqu" :currentItem="currentItem"> </component>

        <div class="close">
          <img @click="(showpopup = false), (cp = ''), $bus.$emit('resetMenuActive')" :src="require('@/assets/images/proj2022/pc/cancel_btn.png')" alt="" />
        </div>
      </div>
    </vpopup>
  </div>
</template>

<script>
import aside from "./aside.vue";
import menu from "./menu.vue";
import popup from "./popup.vue";
import vsearch from "./search";
import zhanxiang from "./zhanxiang";

import daka from "./components/daka.vue";
import content from "./components/content.vue";
import qrcode from "./components/qrcode.vue";

import scene from "./scene.vue";
import vhotspot from "@/components/hotspot/index.vue";
import roundMenu from "@/components/menu/index.vue";

import { region } from "@/data/raw.js";
import { Booth } from "@/data/booth.js";

let all_booth = [];
Booth.forEach((item) => {
  all_booth = all_booth.concat(item.company);
});

let exitFullscreen = function() {
  document.exitFullscreen
    ? document.exitFullscreen()
    : document.msExitFullscreen
    ? document.msExitFullscreen()
    : document.mozCancelFullScreen
    ? document.mozCancelFullScreen()
    : document.webkitExitFullscreen && document.webkitExitFullscreen();
};
let requestFullscreen = function(e) {
  e.requestFullscreen
    ? e.requestFullscreen()
    : e.mozRequestFullScreen
    ? e.mozRequestFullScreen()
    : e.webkitRequestFullscreen
    ? e.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)
    : e.msRequestFullscreen && e.msRequestFullscreen();
};

export default {
  components: {
    zhanxiang,
    vside: aside,
    vmenu: menu,
    vpopup: popup,
    daka,
    qrcode,
    vcontent: content,
    scene,
    vsearch,
    vhotspot,
    roundMenu,
  },
  data() {
    return {
      showpopup: false,
      cp: "",
      tourStatus: false,
      isClear: false,
      showAll: false,
      showScene: true,
      currentPanoid: "",
      isFull: false,
      hotspots: [],
      hotspot: "",
      currentTheme: "",
      currentZhanqu: "",
      isShowZX: true,
      showViewMode: false,
    };
  },
  computed: {
    currentItem() {
      return this.themes.find((item) => item.id == this.theme);
    },
    zhanxiangData() {
      return Booth.find((item) => item.id == this.theme);
    },
    currentPano() {
      return all_booth.find((item) => item.panoId == this.currentPanoid) || {};
    },
  },

  watch: {
    currentTheme(newVal) {
      if (newVal) {
        let tt = this.currentPanoid;
        this.currentPanoid = "";
        this.$router.push({ params: { type: newVal.id, isjump: "none" } });
        setTimeout(() => {
          this.currentPanoid = tt;
        });
      }
    },
    cp(newVal) {
      if (newVal) {
        this.$bus.$emit("toggleShowZX", false);
      }
    },
    isClear(newVal) {
      document.querySelector("#ifr").contentWindow.postMessage(
        {
          source: "toggleClear",
          data: newVal,
        },
        "*"
      );
    },
  },

  mounted() {
    this.$showLoading();
    this.$nextTick(() => {
      $("#scenebody")
        .off("click")
        .on("click", () => {
          window.goldlog.record("/spec.1.1", "", "snsScene=p_page3&product=pcweb&pagename=中国网络文明建设成果展云展示", "");
        });

      this.$bus.$on("toggleClear", (data) => {
        this.isClear = data;
      });

      
      this.$bus.$on("resetCurrentTheme", () => {
        this.currentTheme = "";
      });

      window.addEventListener("message", (res) => {
        if (Object.prototype.toString.call(res.data) == "[object Object]") {
          let data = res.data.data;
          if (res.data.source === "showAll") {
            this.showAll = true;
            this.$hideLoading();

            document.querySelector("#ifr").contentWindow.postMessage(
              {
                source: "changeTheme",
                data: this.theme,
              },
              "*"
            );
          }

          if (res.data.source === "mode.changed") {
            console.log("mode.changed", data);
            if (data == "floorplan" || data == "dollhouse") {
              this.showViewMode = true;
              this.cp = "";
            } else if (data == "panorama") {
              this.showViewMode = false;
              this.isShowZX = true;
            } else if (data == "transitioning") {
              this.flying = true;
            }
          }

          if (res.data.source === "onplayStatus") {
            this.tourStatus = data.tourIsPlaying;
            // document.querySelector("#ifr").contentWindow.postMessage(
            //   {
            //     source: "toggleClear",
            //     data: this.tourStatus,
            //   },
            //   "*"
            // );
          }

          if (res.data.source === "pano.chosen") {
            console.log("pano.chosen");
          }

          if (res.data.source === "tour.end") {
            console.log("tour.end");
          }

          if (res.data.source === "warp.interrupted") {
            console.log("warp.interrupted");
          }

          if (res.data.source === "flying.ended") {
            console.log("flying.ended");
            this.currentPanoid = data;
            this.currentTheme = region.find((item) => {
              if (item.spread.indexOf(Number(this.currentPanoid)) > -1) {
                return item;
              }
            });

            console.log(this.currentPanoid,'currentPanoid');
            this.currentZhanqu = "";
            this.currentZhanqu = all_booth.find((item) => {
              if (item.containPanos.indexOf(String(this.currentPanoid)) > -1) {
                return item;
              }
            });

            console.log(this.currentZhanqu,'currentZhanqu');

            this.currentZhanqu &&
              window.goldlog.record(
                `/p_area${this.currentZhanqu.id}`,
                "",
                `snsScene=p_area${this.currentZhanqu.id}&product=pcweb&pagename=中国网络文明建设成果展云展示`,
                ""
              );
          }

          if (res.data.source === "openHotspot") {
            this.hotspot = data;
            console.log(data, "openHotspot");
            this.$bus.$emit("isShowAside", false);
          }
        }
      });

      $(document).on("fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange", () => {
        this.isFull = !!(
          document.fullscreenElement ||
          document.mozFullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement ||
          document.msFullscreenElement
        );
      });
    });
  },
  beforeDestroy() {
    $(document).on("fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange");
  },

  methods: {
    clicktoClear() {
      this.isClear = false;
    },
    handleFull() {
      if (this.isFull) {
        exitFullscreen();
      } else {
        requestFullscreen($("html")[0]);
      }
    },
    handlecp(data) {
      this.cp = data;
      this.showpopup = true;
      this.$bus.$emit("isShowAside", false);
    },
    handleoutside() {
      this.cp = "";
      this.showpopup = false;
      this.$bus.$emit("resetMenuActive");
    },
  },
};
</script>

<style lang="less" scoped>
.scene-body {
  background-repeat: no-repeat;
  position: relative;
  .logo {
    position: absolute;
    left: 18px;
    top: 8px;
    z-index: 999;
    display: flex;
    align-items: center;
    cursor: pointer;
    > img {
      width: 600px;
      margin-right: 10px;
    }
  }
  .scene-con {
    width: 100%;
    height: 100%;
    .isClear {
      position: absolute;
      right: 20px;
      bottom: 20px;
      z-index: 99;
      width: 50px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      > img {
        width: 50px;
        height: 50px;
      }
    }
    .vright {
      position: absolute;
      right: 10px;
      top: 10px;
      display: flex;
      align-items: flex-start;
      z-index: 990;
      .vfull {
        width: 35px;
        height: 35px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        position: relative;
        margin-left: 20px;
        cursor: pointer;
        > img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 46%;
        }
      }
    }
    .zxshow {
      left: 0 !important;
      opacity: 1 !important;
    }
  }
  .popcon {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    .close {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      right: 60px;
      border-radius: 4px;
      > img {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 20px;
        cursor: pointer;
      }
    }
  }

  .pad_notlandscape {
    transform: scale(0.7) translate(-50%, -50%);
    transform-origin: top left;
  }

  .mascot {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 899;
    width: 330px;
    pointer-events: none;
    > img {
      width: 100%;
    }
  }

  .showscene {
    opacity: 1;
  }
}

.ronundShow {
  opacity: 1;
  pointer-events: auto;
  transition: ease all 0.5s;
}

.ronundHide {
  transition: ease all 0.5s;
  opacity: 0;
  pointer-events: none;
}
</style>