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

<template>
  <div class="panocon">
    <div id="pano"></div>

    <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">
      <snapshot :showFlash="showFlash"></snapshot>
      <button class="ui-button submit" @click="onClick">将当前视角设为初始画面</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 } from "@/api";


let __krfn = krfn.default;

export default {
  components: { list, Snapshot },
  data() {
    return {
      showFlash: false,
      inter: null
    }
  },
  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') {
        return
      }

      $("#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://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.$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%;
  }

  .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%;
    }
  }

  .ui-button {
    position: absolute;
    bottom: 260px;
    min-width: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }
}
</style>