Wulaer/src/views/HomeView.vue

<!-- 主容器页面，通过顶部导航栏（TopNav）切换各子视图页面 -->
<template>
  <div class="dashboard">
    <div class="background-image" v-if="activeTab !== '工作台'"></div>
    <div class="bottom-bg" v-if="!showMap && activeTab !== '工作台'"></div>
    <div class="top-title" v-if="activeTab !== '工作台'"></div>
    <TopNav v-if="activeTab !== '工作台'" :activeButton="navButtonMap[activeTab]" @navigate="handleNav" @toggle-mode="handleToggleMode" />
    
    <!-- 全局地图 -->
    <div class="map-container" v-if="showMap">
      <CesiumMap 
        @toggleMap="toggleMap" 
        :simulationTime="simulationTime"
        :simulationData="simulationData"
        :loadEmbankmentWarning="loadEmbankmentWarning"
        :poiVisible="activeTab === '水文四预'"
        :cameraTarget="cameraTarget"
      />
    </div>
    
    <!-- 渐变装饰层（四周暗角） -->
    <GradientOverlay v-if="activeTab !== '工作台'" />
    
    <!-- 流域总览视图 -->
    <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"
    />
    
    <!-- 全生命周期管理视图 -->
    <LifecycleView v-if="activeTab === '全生命周期管理'" />
    <!-- 工程安全运维视图 -->
    <div v-if="activeTab === '工程安全运维'" class="tab-wrapper">
      <EngineeringSafetyView />
    </div>
    <!-- 闸门控制视图（内嵌模式，不重新加载地图） -->
    <GateControlView v-if="activeTab === '闸门控制'" :embedded="true" />
    <!-- 视频监控视图 -->
    <VideoMonitorView v-if="activeTab === '视频监控'" />
    <!-- 工作台视图 -->
    <WorkspaceView v-if="activeTab === '工作台'" @backToDashboard="selectTab('流域总览')" />
    
    <!-- 水资源调度视图 -->
    <div v-if="activeTab === '水资源调度'" class="tab-wrapper">
      <WaterResourceAllocationView style="width:100%;height:100%;padding:70px 16px 16px 16px;" />
    </div>
  </div>
</template>

<script>
import OverviewView from './mainPages/OverviewView.vue'
import HydrologyForecastView from './mainPages/HydrologyForecastView.vue'
import CesiumMap from '../components/CesiumMap.vue'
import GradientOverlay from '../components/gradient-overlay.vue'
import EngineeringSafetyView from './mainPages/EngineeringSafetyView.vue'
import GateControlView from './mainPages/GateControlView.vue'
import LifecycleView from './mainPages/LifecycleView.vue'
import VideoMonitorView from './mainPages/VideoMonitorView.vue'
import WorkspaceView from './mainPages/WorkspaceView.vue'
import WaterResourceAllocationView from './admin/WaterResourceAllocationView.vue'
import TopNav from '../components/TopNav.vue'

export default {
  name: 'HomeView',
  components: {
    OverviewView,
    HydrologyForecastView,
    EngineeringSafetyView,
    GateControlView,
    LifecycleView,
    VideoMonitorView,
    WorkspaceView,
    WaterResourceAllocationView,
    CesiumMap,
    GradientOverlay,
    TopNav
  },
  data() {
    return {
      activeTab: '流域总览',
      activeSecondaryTab: '水文监控',
      showMap: true,
      loadEmbankmentWarning: false,
      navButtonMap: {
        '流域总览': '综合首页',
        '水文四预': '水情测报',
        '全生命周期管理': '生命周期',
        '工程安全运维': '工程安全',
        '水资源调度': '水资源调度',
        '视频监控': '视频监控',
        '工作台': '工作台'
      },
      tabButtonMap: {
        '综合首页': '流域总览',
        '水情测报': '水文四预',
        '生命周期': '全生命周期管理',
        '工程安全': '工程安全运维',
        '水资源调度': '水资源调度',
        '闸门控制': '闸门控制',
        '视频监控': '视频监控',
        '工作台': '工作台'
      },
      simulationTime: 0,
      simulationData: {
        heilinStation: {
          waterLevel: '3.25',
          flow: '12.5',
          rainfall: '0.5'
        },
        reservoir: {
          waterLevel: '18.5',
          storage: '2350.8'
        }
      },
      cameraTarget: 'default'
    }
  },
  created() {
    this.applyTabFromRoute()
  },
  watch: {
    '$route.query.tab'(newTab) {
      if (newTab && this.tabButtonMap[newTab]) {
        this.selectTab(this.tabButtonMap[newTab])
      }
    }
  },
  methods: {
    applyTabFromRoute() {
      const tab = this.$route.query.tab
      if (tab && this.tabButtonMap[tab]) {
        this.selectTab(this.tabButtonMap[tab])
      }
    },
    selectTab(tab) {
      this.activeTab = tab
      const btn = this.navButtonMap[tab]
      if (btn && this.$route.query.tab !== btn) {
        this.$router.replace({ query: { tab: btn } })
      }
      if (tab === '水文四预' || tab === '水资源调配') {
        this.activeSecondaryTab = '水文监控'
      }
      if (tab !== '水文四预') {
        this.loadEmbankmentWarning = false
      }
      // 镜头切换
      if (tab === '水文四预') {
        this.cameraTarget = 'hydrology'
      } else {
        this.cameraTarget = 'default'
      }
      // 工作台和水资源调度页面隐藏地图（水资源调度有独立地图），其他页面显示地图
      if (tab === '工作台' || tab === '水资源调度') {
        this.showMap = false
      } else {
        this.showMap = true
      }
    },
    handleNav(button) {
      if (button === '综合首页') this.selectTab('流域总览')
      else if (button === '水情测报') this.selectTab('水文四预')
      else if (button === '工程安全') this.selectTab('工程安全运维')
      else if (button === '水资源调度') this.selectTab('水资源调度')
      else if (button === '生命周期') this.selectTab('全生命周期管理')
      else 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 }
    },
    handleToggleMode(isFrontend) {
      console.log('切换模式:', isFrontend ? '前台模式' : '后台模式')
      // 可以在这里添加前后台切换的具体逻辑
    }
  }
}</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;
}

/* tab 视图容器必须相对定位并填满，子视图用绝对定位 */
.tab-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}



</style>