|
|
@@ -1,188 +0,0 @@
|
|
|
-<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></snapshot>
|
|
|
- <button class="ui-button submit" @click="onClick">将当前视角设为初始画面</button>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-// 会广播initView，用于初始-右侧初始化面组件screen/setting.vue里面更新画面截图。
|
|
|
-// 会广播toggleFlash，用于初始-场景预览界面取景框组件snapshot.vue呈现闪白效果。
|
|
|
-// 会监听currentPcode广播，用于与下方的toolbar里切换选中场景事件做同步。
|
|
|
-// 会监听addhotspot广播，用于与热点页面的添加热点事件做同步。
|
|
|
-
|
|
|
-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";
|
|
|
-
|
|
|
-let __krfn = krfn.default;
|
|
|
-export default {
|
|
|
- components: { Snapshot },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- activeItem: '',
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters({
|
|
|
- info: "info",
|
|
|
- }),
|
|
|
- //用于确保只在初始画面设置页面显示取景框
|
|
|
- showSnapshot() {
|
|
|
- return this.$route.name == "screen";
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 找到info.scenes中与当前选中场景对应的那一个场景，把当前选中场景的数据拷贝进去。
|
|
|
- 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广播触发。
|
|
|
- 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');
|
|
|
- },
|
|
|
- // 会被currentPcode广播间接触发，导致全景图更新。
|
|
|
- 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 {
|
|
|
- background: blue;
|
|
|
- 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>
|
任一存