全景图切换加载问题修复

gjj

2025-03-20 7152f8645b1bff7cb51bc7fa01d974b38974209e

 src/views/Home.vue

@@ -11,7 +11,7 @@
   <div class="time-info-item">
    <i class="el-icon-date" style="color: #FFBF00;font-size: 20px;"></i>
    <div class="text-white text-[16px] ml-[4px]">工程倒计时/天</div>
    <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">175</div>
    <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">{{endDate}}</div>
   </div>
   <div class="time-line">
   </div>
@@ -20,39 +20,36 @@
 <div class="bottom-nav">
  <div class="content-wrapper mb-[20px]">
   <!-- 720菜单 -->
   <div class="side-menu" v-if="currentView === '720'">
    <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange">
   <div class="side-menu z-[100]" v-if="currentView === '720'">
    <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange" :props="{ value: 'id',label: 'label',children: 'Children'}">
    </el-cascader>
   </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 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;' : ''">
       <div class="w-[160px] h-[100px] mr-[10px] ml-[10px] cursor-pointer border-[1px] border-[#3068A5] rounded-[2px]">
        <img :src="item.img" alt="全景图" class="w-full h-full" />
       <div class="w-[160px] h-[100px] mr-[10px] ml-[10px] cursor-pointer border-[1px] border-[#3068A5] rounded-[2px]" @click="panoPreview(panoObj, item)">
        <img :src="getItemImg(item)" alt="全景图" class="w-full h-full" />
       </div>
      </div>
     </div>
     </div>-->

     <!-- 放大镜 -->
     <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%]" v-if="currentView === '720'" @click="handleZoomOut">
      <img src="../assets/images/backgrounds/zoomout.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
     <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>
    </div>
    <!-- 项目 -->
    <div class="w-full h-full" v-if="currentView === 'project'">
     <iframe id="scene-iframe" class="scene-frame w-full h-full" src="" frameborder="0"></iframe>
      <iframe id="scene-iframe" frameborder='0' allowfullscreen class="scene-frame w-full h-full"></iframe>
    </div>
   </div>

@@ -78,6 +75,14 @@
import {
 nextTick
} from 'vue'
import {
 HomeAPI
} from "../api/home";
import {
 getProjectId,
 getToken,
 getProjectEndDate
} from "../utils/getToken.js";
export default {
 name: 'Home',
 components: {},
@@ -95,19 +100,11 @@
   bottomImage: new URL('@/assets/images/titles/shigong.png',
    import.meta.url).href,
   isLoading: false,
   panoVersionList: [{
     value: '1',
     img: 'http://dev-pano.vothing.com/Panorama/bfb5597e-72cc-7f70-679c-fda46008effe/vtour/panos/7299e0b4-eac5-4c93-9d63-305fa2867f10.tiles/thumb.jpg'
    },
    {
     value: '2',
     img: 'http://dev-pano.vothing.com/Panorama/bfb5597e-72cc-7f70-679c-fda46008effe/vtour/panos/2e984554-8708-47dd-b8a0-b53e9e727ca2.tiles/thumb.jpg'
    },

   ],
   panoVersionList: [],
   isFullScreen: false,
   fullScreenStyle: '',
   fullScreenPanoStyle: '',
   fullScreenModelStyle: '',
   panoList: [{
    value: 'zhinan',
    label: '指南',
@@ -144,8 +141,25 @@
   panoValue: [],
   backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
    import.meta.url).href,
   endDate: 0,
  }
 },
 watch: {
  projectEndDate:{
      deep: true,
      handler (newVal) {
        console.log('newVal', newVal)
      const date = new Date(newVal);
      // 获取当前日期作为Date对象
      const now = new Date();
      // 计算两个日期的差异（毫秒）
      const diffTime = Math.abs(now - date);
      // 将毫秒转换为天数
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
      this.endDate = diffDays
    }
  }
 }, 
 computed: {
  sectionStyle() {
   return {
@@ -154,25 +168,61 @@
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  }, 
  projectId() {
   return getProjectId()
  },
  projectEndDate() {
    return getProjectEndDate()
  }
 },
 mounted() {
  setTimeout(() => {
    console.log('projectEndDate', getProjectEndDate())
    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) {
    return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`
  },
  handleZoomOut() {
   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()
    })
@@ -188,51 +238,117 @@
  },
  handlePanoChange(value) {
   console.log('value', value)
   this.isLoading = true
   this.panoList.forEach(item => {
    if (item.LabelId === value[0]) {
     item.Children.forEach(item2 => {
      if (item2.PbGuid === value[1]) {
       this.panoObj = item2
       console.log('panoObj', this.panoObj)
       this.getPanoPhase(item2)
      }
     })
    }
   })
  },
  modelShow() {
   const iframe = document.getElementById('model-iframe')
   const token = '08168BBAD572518D1AB6EC233A13C3E2FA9C16340A21C6B6D0F2785DBDF2CB3506A0873877DA22C7E7ADA6CB1012493B4C702FC75B529ABD'
   const projectId = '1c179617-a7d9-4243-b813-84fa55a17ce7'
   const token = getToken()
   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(item, scene) {
   this.isLoading = false
   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
    }
  panoShow() {
   const data = {
    projectId: this.projectId
   }
   this.$nextTick(() => {
    embedpano({
     xml: xmlurl,
     target: 'panoviewpreview',
     basepath,
     vars: setting,
     html5: 'auto',
     passQueryParameters: true
    })
   HomeAPI.GetProjectPanoramaList(data).then(res => {
    console.log('全景图', res)
    if (res.Ret === 1) {
     const result = res.Data
     if (result.length > 0) {
      result.forEach(element => {
       element.id = element.LabelId
       element.label = element.LabelName
       element.Children.forEach(item => {
        item.id = item.PbGuid
        item.label = item.PbName
       });
      });
      this.panoList = result
      this.panoValue = [result[0].id, result[0].Children[0].id]
      this.panoObj = result[0].Children[0]
      this.getPanoPhase()
     }
    }
   })

  },
  getPanoPhase() {
   const data = {
    pbguid: this.panoObj.PbGuid
   }
   HomeAPI.GetScenesByPbGuid(data).then(res => {
    console.log('全景图阶段', res)
    if (res.Ret === 1) {
     this.panoVersionList = res.Data
     this.panoPreview(this.panoObj, this.panoVersionList[0])
    }
   })
  },
  panoPreview(item, scene) {
    // /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')
   const ifrSrc = window.ProjectConfig.sceneUrl
   let ifrSrc = ''
   ifrSrc = window.ProjectConfig.sceneUrl
   iframe.src = ifrSrc
   this.isLoading = false
  },
  mounted() {
   this.isLoading = true
   this.modelShow()
  }
 },
 mounted() {
  this.isLoading = true
  this.modelShow()
 },
 }
}
</script>

@@ -251,8 +367,9 @@
 align-items: center;
 color: white;
}
.bottom-nav{
  flex: 1;

.bottom-nav {
 flex: 1;
}

.nav-items {
@@ -297,7 +414,7 @@
 display: flex;
 overflow: hidden;
 position: relative;
 height: 52%;
 height: 98%;
}

.chart-content {