调整样式，接口对接

gjj

2025-02-25 fe2b697a063ab9898af5ec0b49c30ad20274d56e

 src/views/Home.vue

@@ -1,362 +1,491 @@
<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]">175</div>
   </div>
   <div class="time-line">
   </div>
  </div>
 </div>
 <div class="bottom-nav">
  <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>
   </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 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>
    <div class="chart-content">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
    <!-- 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;' : ''">
       <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>
      </div>
     </div>

     <!-- 放大镜 -->
     <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%]" v-if="currentView === '720'" @click="handleZoomOut">
      <img src="../assets/images/backgrounds/zoomout.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" class="scene-frame w-full h-full" 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>
   <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 {
 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
 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: [{
     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'
    },

   ],
   isFullScreen: false,
   fullScreenStyle: '',
   fullScreenPanoStyle: '',
   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,
  }
 },
 computed: {
  sectionStyle() {
   return {
    backgroundImage: `url(${this.backgroundImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  }
 },

 methods: {
  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.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;`
   }
  },
  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
  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()
    })
   }
  },
  handlePanoChange(value) {
   console.log('value', value)
  },
  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
    })
   })
  },
  mounted() {
    this.isLoading = true
    this.modelShow()
  },
  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">
<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: 52%;
}

.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;
  background-color: #fff;
  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>