From 50ee7232f3c98fe24a1f2e31dba9508cfec14887 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Fri, 21 Feb 2025 17:35:39 +0800
Subject: [PATCH] 模型预览
---
src/views/Home.vue | 362 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 362 insertions(+), 0 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..da552b2
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,362 @@
+<template>
+ <div class="home-container">
+ <!-- 顶部导航 -->
+ <div class="top-nav">
+ <div class="nav-items">
+ <div class="nav-item mr-[8px]" :class="{ active: currentView === 'model' }" @click="handleChange('model')">模型</div>
+ <div class="nav-item mr-[8px]" :class="{ active: currentView === '720' }" @click="handleChange('720')">720全景</div>
+ <div class="nav-item" :class="{ active: currentView === 'project' }" @click="handleChange('project')">项目实况</div>
+ </div>
+ <div class="time-info">
+ <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>
+ <div class="time-line">
+ </div>
+ </div>
+ </div>
+
+ <div class="content-wrapper mb-[20px]">
+ <!-- 720菜单 -->
+ <div class="side-menu" v-if="currentView === '720'">
+ <div class="menu-dropdown">
+ <select class="menu-select">
+ <option>请选择</option>
+ </select>
+ </div>
+ <div class="menu-list">
+ <div class="menu-item">
+ <span>一期</span>
+ <i class="arrow-icon"></i>
+ </div>
+ <div class="menu-item">
+ <span>二期</span>
+ <i class="arrow-icon"></i>
+ </div>
+ <div class="menu-item">
+ <span>三期</span>
+ <i class="arrow-icon"></i>
+ </div>
+ <div class="menu-item">
+ <span>四期</span>
+ <i class="arrow-icon"></i>
+ </div>
+ </div>
+ <div class="submenu">
+ <div class="submenu-item">1#楼东立面图</div>
+ <div class="submenu-item">1#出入口层立-1</div>
+ <div class="submenu-item">2#出入口层立-2</div>
+ <div class="submenu-item">2#楼东立面图</div>
+ <div class="submenu-item">3#楼东立面图</div>
+ <div class="submenu-item">停车场入口区控制面</div>
+ </div>
+ </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-[588px]" src="" frameborder="0"></iframe>
+ </div>
+ <!-- 720 -->
+ <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>
+ <div class="chart-content">
+ <div
+ class="w-full h-[4vh] mb-[1vh]"
+ :style="{
+ backgroundImage: `url(${bottomImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }"
+ >
+ </div>
+ <div class="chart-container">
+ <img src="../assets/images/backgrounds/shigongjinduchart.png" alt="施工进度" class="w-full h-[280px]"/>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { nextTick } from 'vue'
+export default {
+ name: 'Home',
+ components: {
+ },
+ data() {
+ return {
+ currentView: 'model',
+ chartOptions: {
+ id: 'shigongjinduChart',
+ options: {
+ title: {
+ text: '施工进度'
+ }
+ }
+ },
+ 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')
+ const token = '08168BBAD572518D1AB6EC233A13C3E2FA9C16340A21C6B6D0F2785DBDF2CB3506A0873877DA22C7E7ADA6CB1012493B4C702FC75B529ABD'
+ const projectId = '1c179617-a7d9-4243-b813-84fa55a17ce7'
+ let ifrSrc = ''
+ console.log('模型中查看')
+ 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()
+ },
+}
+</script>
+
+<style scoped lang="scss">
+.home-container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+.top-nav {
+ height: 50px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: white;
+}
+
+.nav-items {
+ display: flex;
+ gap: 20px;
+}
+
+.nav-item {
+ background: rgba(112,119,140,0.3);
+ border-radius: 2px;
+ border: 1px solid rgba(112,124,140,0.6);
+ padding: 5px 16px;
+ cursor: pointer;
+}
+
+.nav-item.active {
+ background: rgba(255,191,0,0.2);
+ border-radius: 2px;
+ border: 1px solid #FFBF00;
+}
+
+.time-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 200px;
+}
+.time-info-item {
+ display: flex;
+ align-items: center;
+
+}
+.time-line {
+ width: 200px;
+ height: 1px;
+ background: linear-gradient( 270deg, rgba(255,191,0,0) 0%, #FFBF00 100%);
+}
+
+.content-wrapper {
+ display: flex;
+ overflow: hidden;
+ position: relative;
+}
+
+.side-menu {
+ width: 250px;
+ background-color: #1e3d6b;
+ color: white;
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ right: auto;
+ bottom: auto;
+}
+
+.menu-dropdown {
+ padding: 15px;
+}
+
+.menu-select {
+ width: 100%;
+ padding: 8px;
+ background-color: #0a1931;
+ color: white;
+ border: 1px solid #2a4d7d;
+}
+
+.menu-list {
+ border-top: 1px solid #2a4d7d;
+}
+
+.menu-item {
+ padding: 12px 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+}
+
+.menu-item:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.arrow-icon {
+ border: solid white;
+ border-width: 0 2px 2px 0;
+ display: inline-block;
+ padding: 3px;
+ transform: rotate(-45deg);
+}
+
+.submenu {
+ background-color: #152b4a;
+}
+
+.submenu-item {
+ padding: 10px 30px;
+ font-size: 14px;
+ cursor: pointer;
+}
+
+.submenu-item:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.main-content {
+ flex: 1;
+ background-color: #fff;
+ width: 100%;
+ height: 588px;
+}
+
+.content-header {
+ color: white;
+ margin-bottom: 20px;
+}
+
+.chart-container {
+ background-color: #1e3d6b;
+ border-radius: 8px;
+ padding: 20px;
+ width: 100%;
+ height: 100%;
+}
+
+.chart-legend {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
+ color: white;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+}
+
+.dot.blue {
+ background-color: #00ffff;
+}
+
+.dot.yellow {
+ background-color: #ffd700;
+}
+
+.chart-area {
+ height: 400px;
+ margin-bottom: 20px;
+}
+
+.chart-tabs {
+ display: flex;
+ gap: 10px;
+}
+
+.tab {
+ padding: 8px 16px;
+ color: white;
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+.tab.active {
+ background-color: #2a4d7d;
+}
+</style>
--
Gitblit v1.9.3