全景图展示修改

gjj

2025-03-19 05f6d4e6609c973f63d51335a4b7d1f01405ebf3

 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 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: '指南',
@@ -193,17 +191,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,7 +214,6 @@
    })
   } else if (view === 'project') {
    nextTick(() => {
      removepano('krpanoSWFObject')
     this.sceneShow()
    })
   }
@@ -284,26 +284,18 @@
   })
  },
  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地址
      }
      let ifrSrc = ''
      ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}`
      panoFrame.setAttribute("src",ifrSrc);
    })
   })
    this.isLoading = false
  },
  sceneShow() {
   const iframe = document.getElementById('scene-iframe')
@@ -382,7 +374,7 @@
 display: flex;
 overflow: hidden;
 position: relative;
 height: 52%;
 height: 98%;
}

.chart-content {