~ganjingjun/jiaotongdaxue.git

<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">
        <!-- 模型 -->
        <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>
    <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>
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,
    }
  },
  methods: {
    handleChange(view) {
      this.currentView = view
      
    },
    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)
    }
  },
  mounted() {
    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;
  padding: 20px;
  background-color: #0a1931;
  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>