From bace8e818069fd3d9d20a11aaece4b8f5b249132 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Thu, 17 Apr 2025 09:59:22 +0800
Subject: [PATCH] fix: 优化tab显示
---
src/views/Home.vue | 108 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 70 insertions(+), 38 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ce401b6..fc41987 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -26,15 +26,12 @@
</div>
<!-- 主要内容区域 -->
- <div class="main-content" v-loading="isLoading">
- <!-- 模型 -->
- <div class="w-full h-full" v-if="currentView === 'model'">
- <iframe id="model-iframe" class="content-frame w-full h-full" src="" frameborder="0"></iframe>
+ <div class="main-content" :style="isFullScreen ? fullScreenStyle : ''" v-loading="isLoading">
+ <!-- 模型 / 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>
+ <iframe ref="panoiframe" id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''" v-if="currentView === '720'"></iframe>
</div>
- <!-- 720 -->
- <div :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'" v-if="currentView === '720'">
- <div id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''">
- </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;' : ''">
@@ -45,7 +42,7 @@
</div>-->
<!-- 放大镜 -->
- <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%]" v-if="currentView === '720'" @click="handleZoomOut">
+ <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%] z-[100]" v-if="currentView === 'model' || currentView === '720'" @click="handleZoomOut">
<img src="../assets/images/backgrounds/zoomin.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
<img src="../assets/images/backgrounds/zoomout.png" alt="缩小" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-else />
</div>
@@ -107,6 +104,7 @@
isFullScreen: false,
fullScreenStyle: '',
fullScreenPanoStyle: '',
+ fullScreenModelStyle: '',
panoList: [{
value: 'zhinan',
label: '指南',
@@ -184,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,17 +209,20 @@
console.log('放大')
this.isFullScreen = !this.isFullScreen
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;`
- }
+ const clientX = document.documentElement.clientWidth || document.body.clientWidth
+ const clientY = document.documentElement.clientHeight || document.body.clientHeight
+ 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.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;`
+ }
+ }
},
handleChange(view) {
this.isLoading = true
this.currentView = view
if (view === 'model') {
- removepano('krpanoSWFObject')
nextTick(() => {
this.modelShow()
})
@@ -213,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 => {
@@ -238,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
}
@@ -284,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')
@@ -382,7 +414,7 @@
display: flex;
overflow: hidden;
position: relative;
- height: 52%;
+ height: 98%;
}
.chart-content {
--
Gitblit v1.9.3