shuangchuangzhou_2022/src/pages/scenePage/index.vue

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

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

        <!-- 热点列表 -->
        <hotspot-list class="disable" />

        <!-- 标题 -->
        <v-title class="disable" />

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

        <!-- 导览 -->
        <v-guide  :themescene="themescene" :isTour="isTour" :class="{ showGuide: isTour }" />

        <!-- logo -->
        <div
          class="disable"
          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>

    <vmap v-show="!toggleClear" :flying="flying" :themescene="themescene" />
  </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";
import vmap from "../scene/raside/map.vue";
import vmbmap from "../mobilescene/map.vue";
import browser from "@/utils/browser";

let tongjiurl = "https://shuangchuang-api.kczg.org.cn/Web/jt/";

export default {
  data() {
    return {
      hotspots: [],
      themescene: "xuting",
      toggleClear: false,
      isTour: false,
      flying: false,
    };
  },
  components: {
    hot,
    popup,
    guiLoading,
    hotspotList,
    vTitle,
    vMenu,
    vGuide,
    webVr,
    guimsg,
    vError,
    vrCon,
    vOther,
    vmap: browser.mobile ? vmbmap : vmap,
  },
  methods: {
    tongji(event) {
      if (event) {
        $.ajax({
          url: tongjiurl + `?Area=yunzhanlan&incident=${event}&rnd=` + Math.random(),
          type: "get",
          dataType: "json",
          contentType: "application/json",
          success: () => {},
        });
      }
    },
    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.parent.postMessage(
          {
            source: "flying.ended",
            data: window.player.currentPano.id,
          },
          "*"
        );

        window.player.on("onplayStatus", (data) => {
          console.log(data.tourIsPlaying);
          this.isTour = data.tourIsPlaying;

          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("mode.changed", (...data) => {
          if (data[1] == "floorplan" || data[1] == "dollhouse") {
            this.flying = false;
          } else if (data[1] == "panorama") {
            this.flying = false;
          } else if (data[1] == "transitioning") {
            this.flying = true;
          }

          window.parent.postMessage(
            {
              source: "mode.changed",
              data: data[1],
            },
            "*"
          );
        });

        window.player.on("pano.chosen", () => {
          window.parent.postMessage(
            {
              source: "pano.chosen",
              data: true,
            },
            "*"
          );
        });

        window.player.on("warp.interrupted", () => {
          window.parent.postMessage(
            {
              source: "warp.interrupted",
              data: true,
            },
            "*"
          );
        });

        window.player.on("input.start", () => {
          window.parent.postMessage(
            {
              source: "input.start",
              data: true,
            },
            "*"
          );
        });

        window.player.director.on("tour.end", () => {
          window.parent.postMessage(
            {
              source: "tour.end",
              data: true,
            },
            "*"
          );
        });

        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 === "toggleClear") {
            this.toggleClear = data;
            // this.$store.dispatch("changeTheme", data.data);
          }

          if (res.data.source === "changeTheme") {
            this.themescene = data;
            // this.$store.dispatch("changeTheme", data.data);
          }
          if (res.data.source === "changeExhition") {
            let { x, y, z, w } = data.quat;
            let fnname = "flyToPano";
            if (window.player.mode == "panorama") {
              fnname = "blackToPano";
            }

            window.player[fnname]({
              pano: window.player.model.panos.index[data.index],
              quaternion: new window.THREE.Quaternion(x, y, z, w),
            });
          }

          if (res.data.source === "enterExhition") {
            window.firstView = data.firstView;
          }
        }
      });

      $(document)
        .off("click touchstart")
        .on("click touchstart", () => {
          this.tongji("click");
        });

      $(document)
        .off("keydown")
        .on("keydown", () => {
          this.tongji("keydown");
        });
    });
  },
  beforeDestroy() {
    $(document).off("fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange click touchstart keydown");
    window.removeEventListener("loadfinish", this.start, false);
  },
};
</script>

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

<style lang="less">
.showGuide {
  bottom: 0 !important;
}


.hiddenzhangxiang{
  bottom: -160px!important;
}
</style>