From 19606d5b3551d26bee379fa0dc57eea627e37b98 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Tue, 25 Feb 2025 17:55:28 +0800
Subject: [PATCH] 全景图切换
---
src/views/Home.vue | 106 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 80 insertions(+), 26 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a2ab897..5b8a6d0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,7 +21,7 @@
<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">
+ <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange" :props="{ value: 'id',label: 'label',children: 'Children'}">
</el-cascader>
</div>
@@ -38,8 +38,8 @@
<!-- 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>
@@ -78,6 +78,13 @@
import {
nextTick
} from 'vue'
+import {
+ HomeAPI
+} from "../api/home";
+import {
+ getProjectId,
+ getToken
+} from "../utils/getToken.js";
export default {
name: 'Home',
components: {},
@@ -95,16 +102,7 @@
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: '',
@@ -154,10 +152,16 @@
backgroundPosition: 'center center',
backgroundSize: '100% 100%'
}
+ },
+ projectId() {
+ return getProjectId()
}
},
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
@@ -188,11 +192,22 @@
},
handlePanoChange(value) {
console.log('value', value)
+ 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`
@@ -200,8 +215,46 @@
console.log('加载iframe地址', ifrSrc)
this.isLoading = false
},
- panoShow(item, scene) {
+ panoShow() {
this.isLoading = false
+ const data = {
+ projectId: this.projectId
+ }
+ 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) {
const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
let setting = {}
@@ -218,21 +271,21 @@
basepath,
vars: setting,
html5: 'auto',
- passQueryParameters: true
+ 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 +304,9 @@
align-items: center;
color: white;
}
-.bottom-nav{
- flex: 1;
+
+.bottom-nav {
+ flex: 1;
}
.nav-items {
--
Gitblit v1.9.3