Wulaer/src/views/HomeView.vue

<template>
  <div class="dashboard">
    <div class="background-image"></div>
    <div class="bottom-bg" v-if="!showMap"></div>
    <div class="top-title"></div>
    <TopNav :activeButton="navButtonMap[activeTab]" @navigate="handleNav" />
    
    <!-- 全局地图 -->
    <div class="map-container" v-if="showMap">
      <CesiumMap 
        @toggleMap="toggleMap" 
        :simulationTime="simulationTime"
        :simulationData="simulationData"
        :loadEmbankmentWarning="loadEmbankmentWarning"
      />
    </div>
    
    <!-- 渐变装饰层（四周暗角） -->
    <GradientOverlay />
    
    <!-- 流域总览视图 -->
    <OverviewView v-if="activeTab === '流域总览'" @selectTab="selectTab" />
    
    <!-- 水文四预视图 -->
    <HydrologyForecastView 
      v-if="activeTab === '水文四预'" 
      :activeSecondaryTab="activeSecondaryTab"
      :simulationTime="simulationTime"
      :simulationData="simulationData"
      :loadEmbankmentWarning="loadEmbankmentWarning"
      @selectSecondaryTab="selectSecondaryTab"
      @updateSimulationTime="updateSimulationTime"
      @updateSimulationData="updateSimulationData"
      @loadEmbankmentWarning="handleLoadEmbankmentWarning"
      @updateForecastData="handleUpdateForecastData"
    />
    
    <!-- 工程安全视图 -->
    <EngineeringSafetyView 
      v-if="activeTab === '工程安全'" 
    />
    <!-- 水资源调配视图 -->
    <WaterResourceAllocationView 
      v-if="activeTab === '水资源调配'" 
    />
  </div>
</template>

<script>
import OverviewView from './OverviewView.vue'
import HydrologyForecastView from './HydrologyForecastView.vue'
import WaterResourceAllocationView from './WaterResourceAllocationView.vue'
import CesiumMap from '../components/CesiumMap.vue'
import GradientOverlay from '../components/gradient-overlay.vue'
import EngineeringSafetyView from './EngineeringSafetyView.vue'
import TopNav from '../components/TopNav.vue'

export default {
  name: 'HomeView',
  components: {
    OverviewView,
    HydrologyForecastView,
    WaterResourceAllocationView,
    EngineeringSafetyView,
    CesiumMap,
    GradientOverlay,
    TopNav
  },
  data() {
    return {
      activeTab: '流域总览',
      activeSecondaryTab: '水文监控',
      showMap: true,
      loadEmbankmentWarning: false,
      navButtonMap: {
        '流域总览': '综合首页',
        '水文四预': '水情测报',
        '工程安全': '工程安全'
      },
      simulationTime: 0,
      simulationData: {
        heilinStation: {
          waterLevel: '3.25',
          flow: '12.5',
          rainfall: '0.5'
        },
        reservoir: {
          waterLevel: '18.5',
          storage: '2350.8'
        }
      }
    }
  },
  methods: {
    selectTab(tab) {
      this.activeTab = tab
      if (tab === '水文四预' || tab === '水资源调配') {
        this.activeSecondaryTab = '水文监控'
      }
      if (tab !== '水文四预') {
        this.loadEmbankmentWarning = false
      }
    },
    handleNav(button) {
      if (button === '综合首页') this.selectTab('流域总览')
      else if (button === '水情测报') this.selectTab('水文四预')
      else if (button === '工程安全') this.selectTab('工程安全')
    },
    selectSecondaryTab(tab) {
      this.activeSecondaryTab = tab
      // 在水文预警和水文预演页面时显示堤防图层
      if (this.activeTab === '水文四预' && (tab === '水文预警' || tab === '水文预演')) {
        // 先设为false，再设为true，触发重新加载
        this.loadEmbankmentWarning = false
        this.$nextTick(() => {
          this.loadEmbankmentWarning = true
        })
      } else if (this.activeTab === '水文四预' && tab !== '水文预警') {
        this.loadEmbankmentWarning = false
      }
    },
    toggleMap(show) {
      this.showMap = show
    },
    updateSimulationTime(time) {
      this.simulationTime = time
    },
    updateSimulationData(data) {
      this.simulationData = { ...this.simulationData, ...data }
    },
    handleLoadEmbankmentWarning() {
      // 在水文预警和水文预演页面时显示堤防图层
      if (this.activeTab === '水文四预' && (this.activeSecondaryTab === '水文预警' || this.activeSecondaryTab === '水文预演')) {
        this.loadEmbankmentWarning = true
      }
    },
    handleUpdateForecastData(data) {
      this.simulationData = { ...this.simulationData, ...data }
    }
  }
}
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/src/assets/images/背景.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

.bottom-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/src/assets/images/Heilin/WPS图片(1).jpeg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

.top-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/src/assets/images/顶部大标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

/* 地图容器样式 */
.map-container {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: auto;
}



.bottom-sub-title {
  position: absolute;
  bottom: 46px;
  width: 159px;
  height: 31px;
  background-image: url('/src/assets/images/未选中底部标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bottom-sub-title:hover,
.bottom-sub-title.active {
  background-image: url('/src/assets/images/选中底部标题.png');
}

.bottom-sub-title.bottom-left {
  left: 50%;
  transform: translateX(-169px);
}

.bottom-sub-title.bottom-right {
  right: 50%;
  transform: translateX(169px);
}

.bottom-text {
  font-size: 14px;
  font-weight: bold;
  background: linear-gradient(to bottom, #e2e8ff, #7bbef6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.bottom-sub-title.active .bottom-text {
  background: linear-gradient(to bottom, #e2e8ff, #62f6fb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 二级标题样式 */
.secondary-title-container {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 4;
}

.secondary-title {
  width: 159px;
  height: 31px;
  background-image: url('/src/assets/images/未选中底部标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-title span {
  background: linear-gradient(to bottom, #e2e8ff, #7bbef6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.secondary-title:hover,
.secondary-title.active {
  background-image: url('/src/assets/images/选中底部标题.png');
}

.secondary-title:hover span,
.secondary-title.active span {
  background: linear-gradient(to bottom, #e2e8ff, #62f6fb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


</style>