全景图切换加载问题修复

gjj

2025-03-20 7152f8645b1bff7cb51bc7fa01d974b38974209e

全景图切换加载问题修复

 src/views/Home.vue

@@ -30,7 +30,7 @@
    <!-- 模型 / 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 id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''" v-if="currentView === '720'"></iframe>
      <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'">
@@ -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) {
@@ -220,6 +238,7 @@
  },
  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
   }
@@ -291,11 +309,13 @@
      if(panoFrame.src){
        panoFrame.removeAttribute("src"); //先移除上一次的src地址
      }
      let ifrSrc = ''
      ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}`
      panoFrame.setAttribute("src",ifrSrc);
      setTimeout(()=>{
        let ifrSrc = ''
        ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}`
        panoFrame.setAttribute("src",ifrSrc);
      }, 300)
      
    })
    this.isLoading = false
  //   removepano('krpanoSWFObject')
  //  const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
  //  const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`

 src/views/ProjectView.vue

@@ -209,6 +209,7 @@
      bgImage: new URL('@/assets/images/titles/title_second.png', import.meta.url).href,
      tableImage: new URL('@/assets/images/backgrounds/table_bg.png', import.meta.url).href,
      projectInfo: {
        GrossFloorArea: '',
        ProjectName: '',
        Description: '',
        Thumbnail: '',
@@ -246,6 +247,7 @@
            this.projectInfo.ProjectName = result.ProjectName
            this.projectInfo.Description = result.Description
            this.projectInfo.Thumbnail = result.Thumbnail
            this.projectInfo.GrossFloorArea = result.GrossFloorArea
          } 
        }