new_era/src/pages/mobilescene/scene.vue

<template>
  <div class="scene-body">
    <iframe ref="ifr" id="ifr" :key="viewId" :src="`scene.html?m=1248${boothItem?(boothItem || firstView[viewId]):''}`" allowfullscreen="true" frameborder="0"></iframe>
  </div>
</template>

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

let firstView = {};
region.forEach((item) => {
  let { x, y, z, w } = item.firstView.panoQuaternion;
  firstView[item.id] = `&firstView=pano:${item.firstView.panoId},qua:${x + ", " + y + ", " + z + ", " + w}`;
});

export default {
  props: ["tourStatus"],
  data() {
    return {
      firstView,
      viewId: this.$route.params.type,
      boothId: this.$route.query.boothId,
      boothRepeat: this.$route.query.boothRepeat,
    };
  },

  computed: {
    boothItem: function() {
      let tmp = "";
      if (this.boothId) {
        let tt = "";
        let cutt = "";
        for (let index = 0; index < Booth.length; index++) {
          const item = Booth[index];
          tt = item.company.filter((sub) => sub.panoId == this.boothId);
          if (tt.length > 0) {
            cutt = tt[0];
            break;
          }
        }

        if (tt.length > 1 && this.boothRepeat) {
          cutt = tt[this.boothRepeat.split("_")[1]];
        }

        console.log(cutt);

        let panoQuat = cutt.firstView.split("qua:")[1];
        let [x, y, z, w] = panoQuat.split(",");
        tmp = `&firstView=pano:${cutt.panoId},qua:${x + ", " + y + ", " + z + ", " + w}`;
      }
      return tmp;
    },
  },
  mounted() {
    let ifrWindow = this.$refs.ifr.contentWindow;
    this.$bus.$on("ifrMessage", (data) => {
      if (data.events == "flyToPano") {
        let panoQuat = data.data.firstView.split("qua:")[1];
        let [x, y, z, w] = panoQuat.split(",");
        let fnname = "flyToPano";
        if (ifrWindow.player.mode == "panorama") {
          fnname = "blackToPano";
        }
        ifrWindow.player[fnname]({
          pano: ifrWindow.player.model.panos.index[data.data.panoId],
          quaternion: new ifrWindow.THREE.Quaternion(Number(x), Number(y), Number(z), Number(w)),
        });
      }

      if (data.events == "toggleTour") {
        ifrWindow[data.data]();
        if (data.data == "startAndPlay") {
          ifrWindow.postMessage(
            {
              source: "clickStartAndPlay",
              data: "clickStartAndPlay",
            },
            "*"
          );
        }
      }
    });
  },
  watch: {
    theme(newVal) {
      let currentRegion = region.find((item) => item.id == newVal);
      this.$refs.ifr.contentWindow.postMessage(
        {
          source: "changeTheme",
          data: newVal,
        },
        "*"
      );
      window.g_lock = true;
      if (this.$route.params.isjump == "yes") {
        this.$refs.ifr.contentWindow.postMessage(
          {
            source: "changeExhition",
            data: {
              quat: currentRegion.firstView.panoQuaternion,
              index: currentRegion.firstView.panoId,
            },
          },
          "*"
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.scene-body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}
</style>