From d3290cacdae24c00244569de87aa5d7f8cd0c774 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Tue, 27 May 2025 15:10:40 +0800
Subject: [PATCH] feat: 设备状态UI修改
---
src/views/Home.vue | 698 +++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 496 insertions(+), 202 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9e8fbf5..fc41987 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,314 +1,608 @@
<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="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]">{{endDate}}</div>
+ </div>
+ <div class="time-line">
+ </div>
+ </div>
+ </div>
+ <div class="bottom-nav">
+ <div class="content-wrapper mb-[20px]">
+ <!-- 720菜单 -->
+ <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="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">
- <!-- 模型 -->
- <div class="content" v-if="currentView === 'model'">
- <iframe id="model-iframe" class="content-frame" src="" frameborder="0"></iframe>
- </div>
- <!-- 720 -->
- <div class="pano-content" v-if="currentView === '720'">
- <div id="panoviewpreview" class="pano-frame">
- </div>
- </div>
- </div>
+ <!-- 主要内容区域 -->
+ <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>
- <div class="chart-content">
- <div
- class="w-full h-[4vh] mb-[1vh]"
- :style="{
+ <!-- 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]" @click="panoPreview(panoObj, item)">
+ <img :src="getItemImg(item)" alt="全景图" class="w-full h-full" />
+ </div>
+ </div>
+ </div>-->
+
+ <!-- 放大镜 -->
+ <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" frameborder='0' allowfullscreen class="scene-frame w-full h-full"></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>
+ <div class="chart-container" :style="sectionStyle">
+ <img src="../assets/images/backgrounds/shigongjinduchart.png" alt="施工进度" class="w-full h-full" />
+ </div>
</div>
+ </div>
+
+</div>
</template>
<script>
+import {
+ nextTick
+} from 'vue'
+import {
+ HomeAPI
+} from "../api/home";
+import {
+ getProjectId,
+ getToken,
+ getProjectEndDate
+} from "../utils/getToken.js";
export default {
- name: 'Home',
- components: {
+ 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,
+ panoVersionList: [],
+ isFullScreen: false,
+ fullScreenStyle: '',
+ fullScreenPanoStyle: '',
+ fullScreenModelStyle: '',
+ panoList: [{
+ value: 'zhinan',
+ label: '指南',
+ children: [{
+ value: 'shejiyuanze',
+ label: '设计原则'
+ }, {
+ value: 'daohang',
+ label: '导航'
+ }]
+ }, {
+ value: 'zujian',
+ label: '组件',
+ children: [{
+ value: 'basic',
+ label: 'Basic',
+ }, {
+ value: 'form',
+ label: 'Form',
+ }, {
+ value: 'data',
+ label: 'Data',
+ }, {
+ value: 'notice',
+ label: 'Notice',
+ }, {
+ value: 'navigation',
+ label: 'Navigation',
+ }, {
+ value: 'others',
+ label: 'Others',
+ }],
+ }],
+ 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 {
+ backgroundImage: `url(${this.backgroundImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }
+ },
+ projectId() {
+ return getProjectId()
},
- data() {
- return {
- currentView: 'model',
- chartOptions: {
- id: 'shigongjinduChart',
- options: {
- title: {
- text: '施工进度'
- }
- }
- },
- bottomImage: new URL('@/assets/images/titles/shigong.png', import.meta.url).href,
+ 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.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;`
+ }
}
},
- methods: {
- handleChange(view) {
- this.currentView = view
+ handleChange(view) {
+ this.isLoading = true
+ this.currentView = view
+ if (view === 'model') {
+ nextTick(() => {
+ this.modelShow()
+ })
+ } else if (view === '720') {
+ nextTick(() => {
+ this.panoShow()
+ })
+ } else if (view === 'project') {
+ nextTick(() => {
+ this.sceneShow()
+ })
+ }
+ },
+ 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 = 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
+ iframe.src = ifrSrc
+ console.log('加载iframe地址', ifrSrc)
+ this.isLoading = false
+ },
+ panoShow() {
+ 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) {
+ // /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)
- },
- modelShow() {
- const iframe = document.getElementById('model-iframe')
- let token = ''
- let ifrSrc = ''
- console.log('模型中查看')
- ifrSrc = `${window.IP_CONFIG.SCENE_URL}?token=${token}&projectId=${_this.projectID}&isPreview=1&edit=false`
- iframe.src = ifrSrc
- console.log('加载iframe地址', ifrSrc)
- }
+ })
+ // 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')
+ let ifrSrc = ''
+ ifrSrc = window.ProjectConfig.sceneUrl
+ iframe.src = ifrSrc
+ this.isLoading = false
},
mounted() {
- this.modelShow()
- },
+ this.isLoading = true
+ this.modelShow()
+ }
+ }
}
</script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
.home-container {
- display: flex;
- flex-direction: column;
- height: 100vh;
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 100px);
+ overflow: hidden;
}
.top-nav {
- height: 50px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: white;
+ height: 5vh;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: white;
+}
+
+.bottom-nav {
+ flex: 1;
}
.nav-items {
- display: flex;
- gap: 20px;
+ 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;
+ 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;
+ 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;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 200px;
}
+
.time-info-item {
- display: flex;
- align-items: center;
-
+ display: flex;
+ align-items: center;
+
}
+
.time-line {
- width: 200px;
- height: 1px;
- background: linear-gradient( 270deg, rgba(255,191,0,0) 0%, #FFBF00 100%);
+ width: 200px;
+ height: 1px;
+ background: linear-gradient(270deg, rgba(255, 191, 0, 0) 0%, #FFBF00 100%);
}
.content-wrapper {
- display: flex;
- overflow: hidden;
- position: relative;
+ display: flex;
+ overflow: hidden;
+ position: relative;
+ height: 98%;
+}
+
+.chart-content {
+ width: 100%;
+ height: calc(100% - 52% - 20px);
}
.side-menu {
- width: 250px;
- background-color: #1e3d6b;
- color: white;
- position: absolute;
- top: 10px;
- left: 10px;
- right: auto;
- bottom: auto;
+ width: 160px;
+ color: white;
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ right: auto;
+ bottom: auto;
+
+ ::v-deep .el-cascader {
+ width: 100%;
+ height: 100%;
+
+ .el-cascader-node__label {
+ color: #fff;
+ }
+
+ .el-input .el-input__inner {
+ background: rgba(33, 72, 115, 0.9);
+ }
+ }
}
.menu-dropdown {
- padding: 15px;
+ padding: 15px;
}
.menu-select {
- width: 100%;
- padding: 8px;
- background-color: #0a1931;
- color: white;
- border: 1px solid #2a4d7d;
+ width: 100%;
+ padding: 8px;
+ background-color: #0a1931;
+ color: white;
+ border: 1px solid #2a4d7d;
}
.menu-list {
- border-top: 1px solid #2a4d7d;
+ border-top: 1px solid #2a4d7d;
}
.menu-item {
- padding: 12px 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- cursor: pointer;
+ 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);
+ 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);
+ border: solid white;
+ border-width: 0 2px 2px 0;
+ display: inline-block;
+ padding: 3px;
+ transform: rotate(-45deg);
}
.submenu {
- background-color: #152b4a;
+ background-color: #152b4a;
}
.submenu-item {
- padding: 10px 30px;
- font-size: 14px;
- cursor: pointer;
+ padding: 10px 30px;
+ font-size: 14px;
+ cursor: pointer;
}
.submenu-item:hover {
- background-color: rgba(255, 255, 255, 0.1);
+ background-color: rgba(255, 255, 255, 0.1);
}
.main-content {
- flex: 1;
- padding: 20px;
- background-color: #0a1931;
- width: 100%;
- height: 588px;
+ flex: 1;
+ background-color: #fff;
+ width: 100%;
+ height: 100%;
}
.content-header {
- color: white;
- margin-bottom: 20px;
+ color: white;
+ margin-bottom: 20px;
}
.chart-container {
- background-color: #1e3d6b;
- border-radius: 8px;
- padding: 20px;
- width: 100%;
- height: 100%;
+ padding: 20px;
+ width: 100%;
+ height: calc(100% - 5vh);
}
.chart-legend {
- display: flex;
- gap: 20px;
- margin-bottom: 20px;
- color: white;
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
+ color: white;
}
.legend-item {
- display: flex;
- align-items: center;
- gap: 8px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
}
.dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
.dot.blue {
- background-color: #00ffff;
+ background-color: #00ffff;
}
.dot.yellow {
- background-color: #ffd700;
+ background-color: #ffd700;
}
.chart-area {
- height: 400px;
- margin-bottom: 20px;
+ height: 400px;
+ margin-bottom: 20px;
}
.chart-tabs {
- display: flex;
- gap: 10px;
+ display: flex;
+ gap: 10px;
}
.tab {
- padding: 8px 16px;
- color: white;
- cursor: pointer;
- border-radius: 4px;
+ padding: 8px 16px;
+ color: white;
+ cursor: pointer;
+ border-radius: 4px;
}
.tab.active {
- background-color: #2a4d7d;
+ background-color: #2a4d7d;
+}
+</style><style lang="scss">
+.custom-dropdown {
+ background-color: rgba(33, 72, 115, 0.9);
+ border-radius: 2px;
+ border: 1px solid #3068A5;
+
+ .el-cascader-menu {
+ color: #fff;
+
+ .el-cascader-node__label {
+ color: #fff;
+ }
+ }
+
+ .el-cascader .el-input .el-input__inner:focus,
+ .el-cascader .el-input.is-focus .el-input__inner {
+ height: 28px;
+ line-height: 28px;
+ }
+
+ .el-cascader .el-input .el-input__inner {
+ height: 28px;
+ line-height: 28px;
+ background: rgba(33, 72, 115, 0.9);
+ }
+
+ .el-input__icon {
+ line-height: 38px;
+ }
+
+ .el-cascader-node:not(.is-disabled):focus,
+ .el-cascader-node:not(.is-disabled):hover {
+ background: #3068A5;
+ }
+
+ .popper__arrow {
+ display: none;
+ }
+
+ .el-scrollbar__wrap {
+ overflow: hidden;
+ margin-bottom: 0px !important;
+ margin-right: 0px !important;
+ }
}
</style>
--
Gitblit v1.9.3