yangshi_cloudExbition/src/pages/scenePage/index.vue

<template>
  <div class="parent-body">
    <!-- 热点 -->
    <hot />
    <!-- 热点弹出框 -->
    <popup />
    <!-- 加载初始页面 -->
    <div id="gui-thumb"></div>

    <!-- 主容器 -->
    <div id="player"></div>
    <div id="gui-parent">
      <!-- 进度条加载 -->
      <gui-loading v-show="false" />
      <div id="gui" class="disable">
        <!-- 退出VR模式按钮 -->
        <div id="vrOff">
          <img id="vrOffImg" src="images/vrOffImg.png" alt="" />
        </div>

        <!-- 热点列表 -->
        <hotspot-list />

        <!-- 标题 -->
        <v-title />

        <!-- 底部菜单 -->
        <v-menu class="disable" />

        <!-- 导览 -->
        <v-guide class="disable" />

        <!-- logo -->
        <div
          id="myCompany"
          style="width:100%;position:absolute;bottom:20px;text-align:center;font-size:14px;font-family: '微软雅黑';font-weight:580;color: rgba(255, 255, 255, 0.8);"
        >
          四维时代提供技术支持
        </div>
      </div>

      <!-- vr -->
      <web-vr />

      <!-- loading -->
      <div id="gui-spinner" style="display: none;">
        <div class="gui-spinner-icon"></div>
      </div>

      <!-- guimsg -->
      <guimsg />

      <!-- 错误提示 -->
      <v-error />

      <vr-con />

      <v-other />
    </div>
  </div>
</template>

<script>
import hot from "./views/hot";
import popup from "./views/popup";
import guiLoading from "./views/gui/loading";
import hotspotList from "./views/gui/hotspotlist";
import vTitle from "./views/gui/title";
import vMenu from "./views/gui/menu";
import vGuide from "./views/gui/guide";
import webVr from "./views/gui/webvr";
import guimsg from "./views/gui/guimsg";
import vError from "./views/gui/error";
import vrCon from "./views/gui/vrcon";
import vOther from "./views/gui/other";

export default {
  data() {
    return {
      hotspots: [],
    };
  },
  components: {
    hot,
    popup,
    guiLoading,
    hotspotList,
    vTitle,
    vMenu,
    vGuide,
    webVr,
    guimsg,
    vError,
    vrCon,
    vOther,
  },
  methods: {
    getHotSpotList() {
      $.ajax({
        url:
          window.g_Prefix +
          "data/" +
          window.number +
          "/hot/js/data.js" +
          "?" +
          Math.random(),
        type: "get",
        dataType: "json",
        contentType: "application/json",
        success: (result) => {
          this.hotspots = result;
        },
      });
    },
    start() {
      //加载完成页面展示
      window.parent.postMessage(
        {
          source: "showAll",
          data: true,
        },
        "*"
      );

      if (window.player) {
        this.getHotSpotList();
        //监听导览状态
        window.player.on("onplayStatus", (data) => {
          window.parent.postMessage(
            {
              source: "onplayStatus",
              data,
            },
            "*"
          );
        });

        window.player.on("flying.ended", (...data) => {
          window.parent.postMessage(
            {
              source: "flying.ended",
              data: data[2].id,
            },
            "*"
          );
        });

        window.player.on("openHotspot", (data) => {
          this.hotspot = this.hotspots[data];
          this.hotspot.contents = this.hotspot.content
            ? this.hotspot.content.split("(4dage)")
            : [];

          window.parent.postMessage(
            {
              source: "openHotspot",
              data: this.hotspot,
            },
            "*"
          );
        });
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      
      if (!window.evt) {
        window.evt = document.createEvent("HTMLEvents");
      }
      window.evt.initEvent("loadfinish", false, false);
      window.addEventListener("loadfinish", this.start, false);

      window.addEventListener("message", (res) => {
        if (Object.prototype.toString.call(res.data) == "[object Object]") {
          let data = res.data.data;
          if (res.data.source === "changeExhition") {
            window.player.flyToPano({
              pano: window.player.model.panos.index[data.index],
              quaternion: new THREE.Quaternion(...data.quat),
            });
          }

          if (res.data.source === "enterExhition") {
              window.firstView= data.firstView
          }
        }
      });
    });
  },
  beforeDestroy() {
    $(document).off(
      "fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange"
    );
    window.removeEventListener("loadfinish", this.start, false);
  },
};
</script>

<style lang="less" scoped>
.parent-body {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>