qjkankan_v1.1.1/packages/qjkankan-editor/src/framework/play/pano/index.vue

<template>
  <div class="panocon">
    <div v-show="currentScene.type !== '4dkk'" id="pano">
    </div>
    <iframe
      id="iframe-4dkk"
      width=""
      v-if="currentScene.type === '4dkk'"
      :src="`${locationOrigin}/sp${currentScene.version === 'V3' ? 'c' : currentScene.version === 'V4' ? 'g' : ''}.html?m=${currentScene.sceneCode}&lang=${lang}`"
      frameborder="0"
    />

    <div class="showexplanation" v-if="showExplanation&&currentScene.explanation && currentScene.explanation.audioId">
      <img :src="require(`@/assets/images/commentary@2x.png`)" alt="">
    </div>
    <list></list>

    <template v-if="showSnapshot && currentScene&&currentScene.type !=='4dkk'">
      <snapshot :showFlash="showFlash"></snapshot>
      <button class="ui-button submit set-initial-view" :class="{disable: currentScene.type === '4dkk',}" @click="onClick">{{$i18n.t('screen.setting_screen')}}</button>
    </template>

  </div>
</template>

<script>
import list from "./components/list";
import { mapGetters } from "vuex";
import * as krfn from "@/core/index.js";
import { $waiting } from "@/components/shared/loading";
import Snapshot from "@/components/Snapshot";
import {
  uploadCover,
  searchInAll3DScenes,
} from "@/api";
import config from '@/config'

let __krfn = krfn.default;

export default {
  components: { list, Snapshot },
  data() {
    return {
      showFlash: false,
      inter: null,
      lang: config.lang || 'zh',
      locationOrigin: process.env.VUE_APP_PROXY_URL_ROOT,
    }
  },
  computed: {
    ...mapGetters({
      currentScene: "scene/currentScene",
      info: "info",
      isConfirmingPosi: "tags/isConfirmingPosi",
    }),

    showSnapshot() {
      return this.$route.name == "screen";
    },
    showExplanation() {
      return this.$route.name == "explanation";
    },
  },
  watch: {
    '$route.name': function (newVal) {
      __krfn.utils.toggleHotspot(this.$getKrpano(), newVal == 'hotspot');
    },
    currentScene(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$bus.emit("initView", newVal.icon);
        })
      }
      if (newVal.type == '4dkk') {
        $("#pano").empty();
        if (!newVal.version) { // v1.3之前在作品中新增的三维场景，没有version这个值，需要查询。
          searchInAll3DScenes({
            searchKey: newVal.sceneTitle,
          }, (res) => {
            const originItem = res.data.list.find((item) => {
              return item.num === newVal.sceneCode
            })
            newVal.version = originItem.buildType
          })
        }
        return
      } else {
        $("#pano").empty();
        window.vrInitFn = () => {
          $waiting.hide()
          __krfn.utils.initHotspot(this.$getKrpano(), newVal && newVal.someData, true);
          __krfn.utils.toggleHotspot(this.$getKrpano(), this.$route.name == "hotspot");
        };
        window.vrViewFn = () => {
          try {
            let tmp = newVal.initVisual;
            this.$getKrpano().set("view.vlookat", tmp.vlookat);
            this.$getKrpano().set("view.hlookat", tmp.hlookat);
          } catch (error) {
            error;
          }
        };

        var settings = {
          "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
          "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
        };

        if (newVal) {
          removepano("#pano");
          $waiting.show();
          embedpano({
            // http://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com/720yun_fd_manage/fd720_Va0LrkXW3/vtour/tour.xml
            // xml: "%HTMLPATH%/static/template/tour.xml",
            xml: `${this.$cdn}/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
            swf: "%HTMLPATH%/static/template/tour.swf",
            target: "pano",
            html5: "auto",
            mobilescale: 1,
            vars: settings,
            webglsettings: { preserveDrawingBuffer: true },
            passQueryParameters: true,
          });
        }
      }

      var settings = {
        "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
        "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
      };

      if (newVal) {
        removepano("#pano");
        $waiting.show();
        embedpano({
          // http://ossxiaoan.4dage.com/720yun_fd_manage/fd720_Va0LrkXW3/vtour/tour.xml
          // xml: "%HTMLPATH%/static/template/tour.xml",
          xml: `${this.$cdn}/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
          swf: "%HTMLPATH%/static/template/tour.swf",
          target: "pano",
          html5: "auto",
          mobilescale: 1,
          vars: settings,
          webglsettings: { preserveDrawingBuffer: true },
          passQueryParameters: true,
        });
      }
    },
    isConfirmingPosi(newVal) {
      this.inter && clearInterval(this.inter)
      this.inter = null
      console.log(newVal,'isConfirmingPosiisConfirmingPosi');
      if (newVal) {
        this.inter = setInterval(() => {
          __krfn.utils.getCurrentMousePosition(this.$getKrpano(), newVal)
        }, 20);
      } else {
        this.$bus.emit('resethotspotTitle', '')
      }
    }

  },
  methods: {
    updateInfo() {
      let iidx = this.info.scenes.findIndex(item => this.currentScene.sceneCode == item.sceneCode)
      if (iidx > -1) {
        this.info.scenes[iidx] = {
          ...this.currentScene
        }
      }
      this.$store.commit("SetInfo", this.info);
    },
    onClick() {
      this.$bus.emit('toggleFlash', true)
      let canvas = $("#krpanoSWFObject canvas")[0];
      let data = __krfn.utils.setInitView(this.$getKrpano(), canvas);
      uploadCover(
        { file: data.url, filename: "initCover.jpg" },
        res => {
          if (res.code == 0) {
            this.currentScene.icon = res.data
            this.currentScene.initVisual = {
              hlookat: data.hlookat,
              vlookat: data.vlookat
            }
            this.$bus.emit('toggleFlash', false)
            this.$bus.emit("initView", res.data);
            this.updateInfo()
            this.$msg.success(this.$i18n.t("gather.setting_success"))
            this.$store.commit("SetInfo", this.info);
          }
        });
    },
    addhotspot(param) {
      __krfn.utils.addhotspot(this.$getKrpano(), param, true);
      this.$store.commit("tags/setIsConfirmingPosi", param.name);
    },
  },
  mounted() {
    window.__krfn = __krfn;

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

    this.$bus.on("openHotspot", (data) => {
      if (this.isConfirmingPosi) {
        this.$store.commit("tags/setIsConfirmingPosi", false);
      }
    })
  },
};
</script>

<style lang="less" scoped>
.panocon {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  #pano {
    width: 100%;
    height: 100%;
  }

  #iframe-4dkk {
    width: 100%;
    height: 100%;
  }
  
  .showexplanation {
    position: absolute;
    top: 20px;
    z-index: 999;
    right: 20px;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);

    >img {
      width: 100%;
      height: 100%;
    }
  }

  button.set-initial-view {
    position: absolute;
    bottom: 260px;
    min-width: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }

}
</style>