From 16064d395121113d9a68fed1b83612b60385b282 Mon Sep 17 00:00:00 2001 From: Gary Gu <garygu@Garydebijibendiannao.local> Date: Tue, 27 May 2025 15:20:44 +0800 Subject: [PATCH] feat: 增加标段下拉 --- src/views/Home.vue | 84 ++++++++++++++++++++++++++++------------- 1 files changed, 57 insertions(+), 27 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index b44eb36..fc41987 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -30,8 +30,8 @@ <!-- 模型 / 720 --> <div class="w-full h-full" :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'" v-if="currentView === '720' || currentView === 'model'"> <iframe id="model-iframe" class="content-frame w-full h-full" src="" frameborder="0" :style="isFullScreen ? fullScreenModelStyle : ''" v-if="currentView === 'model'"></iframe> - <div id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''" v-if="currentView === '720'"></div> - </div> + <iframe ref="panoiframe" id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''" v-if="currentView === '720'"></iframe> + </div> <!-- 720全景图版本选择 --> <!--<div class="w-full h-[120px] bg-[rgba(19,40,64,0.8)] absolute bottom-0 left-0 right-0 flex items-center py-[10px]" :style="isFullScreen ? 'z-index: 100; height:' : ''" v-if="currentView === '720'"> <div v-for="item in panoVersionList" :key="item.value" :style="isFullScreen ? 'z-index: 100;' : ''"> @@ -182,6 +182,24 @@ this.modelShow() }, 1000) }, + updated() { + if (this.$refs.panoiframe) { + // IE + if (this.$refs.panoiframe.attachEvent) { + this.$refs.panoiframe.attachEvent('onload', () => { + console.log('loading') + // 加载成功 + this.isLoading = false; + }); + } else { + this.$refs.panoiframe.onload = () => { + console.log('loading2') + // 加载成功 + this.isLoading = false; + }; + } + } +}, methods: { getItemImg (item) { @@ -193,9 +211,9 @@ if (this.isFullScreen) { const clientX = document.documentElement.clientWidth || document.body.clientWidth const clientY = document.documentElement.clientHeight || document.body.clientHeight - this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; ` + this.fullScreenStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;` if (this.currentView === '720') { - this.fullScreenStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;` + this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; ` } else if(this.currentView === 'model'){ this.fullScreenModelStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;` } @@ -205,7 +223,6 @@ this.isLoading = true this.currentView = view if (view === 'model') { - removepano('krpanoSWFObject') nextTick(() => { this.modelShow() }) @@ -215,13 +232,13 @@ }) } else if (view === 'project') { nextTick(() => { - removepano('krpanoSWFObject') this.sceneShow() }) } }, handlePanoChange(value) { console.log('value', value) + this.isLoading = true this.panoList.forEach(item => { if (item.LabelId === value[0]) { item.Children.forEach(item2 => { @@ -240,14 +257,13 @@ const projectId = this.projectId let ifrSrc = '' console.log('模型中查看') - // ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false` + // ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false` ifrSrc = window.ProjectConfig.modelUrl iframe.src = ifrSrc console.log('加载iframe地址', ifrSrc) this.isLoading = false }, panoShow() { - this.isLoading = false const data = { projectId: this.projectId } @@ -286,26 +302,40 @@ }) }, panoPreview(item, scene) { - removepano('krpanoSWFObject') - const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/` - const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}` - let setting = {} - if (scene) { - const scenename = 'scene_' + scene.PsScenename - setting = { - startscene: scenename - } - } - this.$nextTick(() => { - embedpano({ - xml: xmlurl, - target: 'panoviewpreview', - basepath, - vars: setting, - html5: 'auto', - passQueryParameters: true, + // /LinkShare/PanoShare/:PanoId/:organizeId/:StartScene + // PanoId:全景图的id,organizeId:项目id,StartScene:初始场景id + const panoFrame = document.getElementById('panoviewpreview') + nextTick(() => { + if(panoFrame.src){ + panoFrame.removeAttribute("src"); //先移除上一次的src地址 + } + setTimeout(()=>{ + let ifrSrc = '' + ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}` + panoFrame.setAttribute("src",ifrSrc); + }, 300) + }) - }) + // removepano('krpanoSWFObject') + // const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/` + // const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}` + // let setting = {} + // if (scene) { + // const scenename = 'scene_' + scene.PsScenename + // setting = { + // startscene: scenename + // } + // } + // this.$nextTick(() => { + // embedpano({ + // xml: xmlurl, + // target: 'panoviewpreview', + // basepath, + // vars: setting, + // html5: 'auto', + // passQueryParameters: true, + // }) + // }) }, sceneShow() { const iframe = document.getElementById('scene-iframe') -- Gitblit v1.9.3