FD_Pano/src/framework/core/index.vue

<template>
  <div class="pano-body">
    <div class="none-center" v-show="!activeItem">请先上传或添加场景素材</div>

    <div v-show="activeItem" id="pano"></div>
    <template v-if="showSnapshot&&activeItem">
      <snapshot :showFlash="showFlash"></snapshot>
      <button class="ui-button submit" @click="onClick">将当前视角设为初始画面</button>
    </template>
  </div>
</template>

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

import Snapshot from "@/components/Snapshot";
import config from "@/config";

let __krfn = krfn.default;
export default {
  components: { Snapshot },
  data() {
    return {
      activeItem:'',
      showFlash:false,
      someData:''
    };
  },
  computed: {
    ...mapGetters({
      info: "info",
      backupInfo: "backupInfo"
    }),
    showSnapshot() {
      return this.$route.name == "screen";
    },
    krpano() {
      return this.$getKrpano();
    },
  },
  methods: {
    updateInfo(){
      let iidx = this.info.scenes.findIndex(item=>this.activeItem.sceneCode == item.sceneCode)
      if (iidx>-1) {
        this.info.scenes[iidx] = {
          ...this.activeItem
        }
      }
      this.$store.commit("SetInfo", this.info);
    },
    onClick() {
      this.$bus.emit('toggleFlash',true)
      let canvas = $("#krpanoSWFObject canvas")[0];
      let krpano = document.getElementById('krpanoSWFObject');
      let data = __krfn.utils.setInitView(krpano, canvas);

      console.log(data.url);

      uploadCover(
        { file: data.url, filename: "initCover.jpg" },
        res => {
          if (res.code==0) {
            this.activeItem.icon = res.data
            this.activeItem.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) {
      let krpano = document.getElementById('krpanoSWFObject');
      __krfn.utils.addhotspot(krpano, param, true);
    }
    
  },
  watch:{
    '$route.name':function(newVal){
        let krpano = document.getElementById('krpanoSWFObject');
        __krfn.utils.toggleHotspot(krpano,newVal!='screen');
    },
    activeItem:{
      handler(newVal) {
        if (newVal) {
          this.$nextTick(()=>{
            this.$bus.emit("initView", newVal.icon);
          })
        }
        $('#pano').empty();
        window.vrInitFn = ()=>{
            $waiting.hide()
              var krpano = document.getElementById('krpanoSWFObject');
            __krfn.utils.initHotspot(krpano,newVal&&newVal.someData,true);
            __krfn.utils.toggleHotspot(krpano,this.$route.name!='screen');
        }
        window.vrViewFn = ()=>{
          try {
            let tmp = newVal.initVisual
            var krpano = document.getElementById('krpanoSWFObject');
            krpano.set('view.vlookat',tmp.vlookat);
            krpano.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,
          });
          // $waiting.hide()
        }
      },
      immediate: true
    }
  },
  mounted() {
    window.__krfn = __krfn;
   
    this.$bus.on('currentPcode',data=>{
      this.activeItem = data
    })
    
    this.$bus.on("addhotspot", data => {
      this.addhotspot(data);
    });
  },
};
</script>

<style lang="less" scoped>
.pano-body {
  width: 100%;
  position: relative;
  height: 100%;
  .none-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  #pano {
    width: 100%;
    height: 100%;
  }
  .btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #000;
    cursor: pointer;
  }
  .ui-button {
    position: absolute;
    bottom: 20px;
    min-width: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }
}
</style>