YuHuaTai-Mobile/src/views/PanoView.vue

<template>
  <div class="pano-view">
    <div
      id="pano"
      :style="{zIndex: $globalConfig.zIndex.pano.self}"
    />

    <button
      class="top back"
      @click="onClickBack"
    >
      <img
        src="@/assets/images/pano/back.png"
        alt=""
        draggable="false"
      >
      <div>返回</div>
    </button>

    <button
      class="top switch-pano"
      @click="onClickSwitchPano"
    >
      <img
        src="@/assets/images/swkk/changjingdaolan.png"
        alt=""
        draggable="false"
      >
      <div>全景切换</div>
    </button>

    <PanoDesc
      v-if="currentSceneDesc"
      :desc="currentSceneDesc"
      :audio-src="currentSceneAudio"
      class="pano-desc"
    />

    <router-view />
  </div>
</template>

<script>
import * as krfn from "@/libs/pano-core/index.js"
import PanoDesc from "@/components/panoDesc.vue"
import { vrTxtInfo as sceneDescList } from "@/components/sceneDesc.js"

let __krfn = krfn.default

export default {
  components: {
    'PanoDesc': PanoDesc,
  },
  beforeRouteUpdate(to, from, next) {
    next()
    if (to.name === 'PanoView') {
      if (this.$route.params.scene) {
        this.scene = this.$route.params.scene
        this.loadScene()
      }
    }
  },
  data() {
    return {
      scene: null,
    }
  },
  computed: {
    ...globalMapState([
      'panoData',
    ]),
    sceneDescList() {
      return sceneDescList
    },
    currentSceneDesc() {
      return this.sceneDescList.find((item) => {
        return item.code === this.scene?.sceneCode
      })
    },
    currentSceneAudio() {
      return `${process.env.VUE_APP_CDN_PATH_QJKK_DESC}${this.scene?.sceneCode}.mp3`
    }
  },
  async mounted() {
    console.log('this.$route.params.scene: ', this.$route.params.scene)
    this.scene = this.$route.params.scene

    window.__krfn = __krfn

    this.loadScene()

    this.$msgCenter.subscribe('clickHotspot', (hotspotName) => {
      console.log('hotspotName: ', hotspotName)
      let someData = this.scene.someData
      if (typeof someData == "string") {
        someData = JSON.parse(this.activeItem.someData)
      }
      let clickedHotspot = someData.hotspots.find((item) => item.name == hotspotName)
      if (clickedHotspot) {
        if (clickedHotspot.hotspotType == "link") {
          window.open(clickedHotspot.hyperlink, "_blank")
        } else if (clickedHotspot.hotspotType == "scene") {
          this.scene = clickedHotspot.secne
          this.loadScene()
          // this.$router.replace({ name: 'PanoView', params: { scene: clickedHotspot.secne } })
        }
      }
    })
  },
  methods: {
    loadScene() {
      $("#pano").empty()
      window.vrInitFn = () => {
      // eslint-disable-next-line no-undef
      // $smallWaiting.hide()
        var krpano = document.getElementById("krpanoSWFObject")
        __krfn.utils.initHotspot(krpano, this.scene.someData, false)
      }
      window.vrViewFn = () => {
        try {
          let tmp = this.scene.initVisual || {}
          var krpano = document.getElementById("krpanoSWFObject")
          krpano.set("view.vlookat", tmp.vlookat || 0)
          krpano.set("view.hlookat", tmp.hlookat || 0)
          krpano.set("autorotate.enabled", Boolean(this.panoData.isAuto))
        } catch (error) {
          console.log(error)
        }
      }
      let settings = {
        "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
        "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
      }
      // eslint-disable-next-line no-undef
      removepano("#pano")
      // eslint-disable-next-line no-undef
      embedpano({
        xml: `${process.env.VUE_APP_PROTOCOL}zzbbh.4dage.com/YHT/Qjkk/local/pano/${this.scene.sceneCode}/vtour/tour.xml`,
        swf: "%HTMLPATH%/static/template/tour.swf", // todo: 咋回事？
        target: "pano",
        html5: "auto",
        mobilescale: 1,
        vars: settings,
        passQueryParameters: true,
      })
    },
    onClickBack: globalUtils.throttle(function() {
      this.$router.push({ name: 'ObliqueView' })
    }, 1000),
    onClickSwitchPano() {
      this.$router.push({ name: 'PanoListInPano' })
    }
  },
}
</script>

<style lang="less" scoped>
.pano-view {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  #pano {
    width: 100%;
    height: 100%;
  }
  > button.top {
    position: absolute;
    top: 2.08rem;
    width: 5rem;
    z-index: 2;
    > img {
      width: 100%;
    }
    > div {
      margin-top: 0.17rem;
      text-shadow: 0 0 0.1rem rgba(0,0,0,0.3);
      color: #333333;
      font-size: 1.17rem;
      font-weight: bold;
    }
    &.back {
      left: 1.63rem;
    }
    &.switch-pano {
      right: 1.63rem;
    }
  }
  > .pano-desc {
    position: absolute;
    top: 2.54rem;
    left: 50%;
    transform: translateX(-50%);
    height: 4.17rem;
    width: 22.5rem;
  }
}
</style>