模型预览

gjj

2025-02-21 50ee7232f3c98fe24a1f2e31dba9508cfec14887

模型预览

 public/config.js

@@ -6,6 +6,8 @@
    workflowWebURL: "http://workflow.probim.cn",
    pid: "71f7a5df-a7e3-42f4-bcea-36d7d2924ddd",
    mapboxToken: 'pk.eyJ1Ijoiemhlbmd4dWZhbmciLCJhIjoiY2w5ejNiOWJ1MDE0bTN1cnp4MjNmM2dpNCJ9.qy3k-99E6-XSK5ldYUFz-A',
    modelUrl: '//multiverse-server.vothing.com', // 模型服务 数据请求地址

    modelUrl: '//dev.vothing.com/scenemanagerVothing/#/', // 模型预览地址
    panoUrl: '//47.95.223.61:6004', // 全景预览地址
    panoBaseUrl: '//47.95.223.61:6003', // 全景图及文档接口
    sceneUrl: 'http://dev.vothing.com/#/sceneDetail?linkToken=YjkzMWEyMzItNjQwOC00OTljLTlmOGItY2UxYWI4Mzc5YzQyLDFjMTc5NjE3LWE3ZDktNDI0My1iODEzLTg0ZmE1NWExN2NlNyxjODA0YzAzMS02ZGRmLTRkNmItYTM2ZC0xY2ExZjM4MzJiYTk=', // 场景地址
}

 src/Dashboard.vue

@@ -2,14 +2,13 @@
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-14 14:32:17
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-20 15:46:39
 * @LastEditTime: 2025-02-21 16:54:08
 * @FilePath: \北京交通大学\src\Dashboard.vue
-->
<!-- eslint-disable vue/no-textarea-mustache -->
<!-- eslint-disable vue/html-self-closing -->
<template>
  <main
    v-loading="isAuthenticating || isLoadingPrjList"
    id="appWrapper"
    class="absolute top-[50%] left-[50%] -translate-x-[50%] w-screen h-screen -translate-y-[50%] font-pingfang text-white select-none"
    :style="{
@@ -98,7 +97,8 @@
  },
  data() {
    return {
      backgroundImage: new URL('@/assets/images/backgrounds/screen.png', import.meta.url).href
      backgroundImage: new URL('@/assets/images/backgrounds/screen.png', import.meta.url).href,
      currentProjectId: '1c179617-a7d9-4243-b813-84fa55a17ce7'
    };
  },
  computed: {

 src/views/Home.vue

@@ -55,15 +55,19 @@
      </div>

      <!-- 主要内容区域 -->
      <div class="main-content">
      <div class="main-content" v-loading="isLoading">
        <!-- 模型 -->
        <div class="content" v-if="currentView === 'model'">
          <iframe id="model-iframe" class="content-frame" src="" frameborder="0"></iframe>
        <div class="w-full h-full" v-if="currentView === 'model'" >
          <iframe id="model-iframe" class="content-frame w-full h-[588px]" src="" frameborder="0"></iframe>
        </div>
        <!-- 720 -->
        <div class="pano-content" v-if="currentView === '720'">
          <div id="panoviewpreview" class="pano-frame">
        <div class="w-full h-full bg-white" v-if="currentView === '720'">
          <div id="panoviewpreview" class="pano-frame w-full h-[588px]">
          </div>
        </div>
        <!-- 项目 -->
        <div class="w-full h-full" v-if="currentView === 'project'" >
          <iframe id="scene-iframe" class="scene-frame w-full h-[588px]" src="" frameborder="0"></iframe>
        </div>
      </div>
    </div>
@@ -86,6 +90,7 @@
</template>

<script>
import { nextTick } from 'vue'
export default {
  name: 'Home',
  components: {
@@ -102,24 +107,68 @@
        }
      },
      bottomImage: new URL('@/assets/images/titles/shigong.png', import.meta.url).href,
      isLoading: false
    }
  },
  methods: {
    handleChange(view) {
      this.isLoading = true
      this.currentView = view
      
      if (view === 'model') {
        removepano('krpanoSWFObject')
        nextTick(() => {
          this.modelShow()
        })
      } else if (view === '720') {
        nextTick(() => {
          this.panoShow()
        })
      } else if (view === 'project') {
        nextTick(() => {
          this.sceneShow()
        })
      }
    },
    modelShow() {
      const iframe = document.getElementById('model-iframe')
      let token = ''
      const token = '08168BBAD572518D1AB6EC233A13C3E2FA9C16340A21C6B6D0F2785DBDF2CB3506A0873877DA22C7E7ADA6CB1012493B4C702FC75B529ABD'
      const projectId = '1c179617-a7d9-4243-b813-84fa55a17ce7'
      let ifrSrc = ''
      console.log('模型中查看')
      ifrSrc = `${window.IP_CONFIG.SCENE_URL}?token=${token}&projectId=${_this.projectID}&isPreview=1&edit=false`
      ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
      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 }
      }
      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
      iframe.src = ifrSrc
      this.isLoading = false
    }
  },
  mounted() {
    this.isLoading = true
    this.modelShow()
  },
}
@@ -245,8 +294,7 @@

.main-content {
  flex: 1;
  padding: 20px;
  background-color: #0a1931;
  background-color: #fff;
  width: 100%;
  height: 588px;
}