添加防洪抗旱、水资源的切换

src/views/waterStation/WaterEnvironment.vue

@@ -0,0 +1,782 @@
+<template>
+  <div class="water-environment-content">
+    <!-- 左侧面板 -->
+    <div class="left-panel">
+      <div class="left-panel-3d">
+        <!-- 水质监测面板 -->
+        <m-card title="水质监测" class="water-environment-card water-environment-card-top" :width="398" :height="320">
+          <div class="water-quality-panel">
+            <!-- 核心成效数据 -->
+            <div class="quality-achievement">
+              <div class="achievement-item">
+                <div class="achievement-label">国省考断面优Ⅲ比例</div>
+                <div class="achievement-value">90%</div>
+              </div>
+              <div class="achievement-item">
+                <div class="achievement-label">优Ⅱ比例</div>
+                <div class="achievement-value">60%</div>
+              </div>
+            </div>
+            
+            <!-- 水质指标列表 -->
+            <div class="quality-indicators">
+              <div class="indicator-item" v-for="(indicator, index) in qualityIndicators" :key="index" :class="{ 'over-limit': indicator.isOverLimit }">
+                <div class="indicator-name">{{ indicator.name }}</div>
+                <div class="indicator-value">{{ indicator.value }} <span class="unit">{{ indicator.unit }}</span></div>
+                <div class="indicator-status">
+                  <div class="status-bar">
+                    <div class="status-fill" :style="{ width: indicator.percent + '%', background: indicator.isOverLimit ? '#ff4444' : '#00d4ff' }"></div>
+                  </div>
+                  <div class="status-text" :class="{ 'warning': indicator.isOverLimit }">{{ indicator.status }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </m-card>
+        
+        <!-- 水质趋势 -->
+        <m-card title="水质趋势" class="water-environment-card water-environment-card-bottom" :width="398" :height="480">
+          <div class="water-quality-trend">
+            <div class="trend-chart">
+              <div class="chart-header">
+                <div class="chart-title">近7日水质变化</div>
+                <div class="chart-legend">
+                  <div class="legend-item">
+                    <div class="legend-color" style="background: #00d4ff;"></div>
+                    <span>优Ⅲ</span>
+                  </div>
+                  <div class="legend-item">
+                    <div class="legend-color" style="background: #ffaa00;"></div>
+                    <span>Ⅳ</span>
+                  </div>
+                  <div class="legend-item">
+                    <div class="legend-color" style="background: #ff4444;"></div>
+                    <span>劣Ⅴ</span>
+                  </div>
+                </div>
+              </div>
+              <div class="chart-body">
+                <div class="chart-bar" v-for="(item, index) in trendData" :key="index">
+                  <div class="bar-wrapper">
+                    <div class="bar-fill" :style="{ height: item.height, background: item.color }"></div>
+                  </div>
+                  <div class="bar-label">{{ item.date }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </m-card>
+      </div>
+    </div>
+    
+    <!-- 右侧面板 -->
+    <div class="right-panel">
+      <div class="right-panel-3d">
+        <!-- 水质站点分布 -->
+        <m-card title="水质站点分布" class="water-environment-card water-environment-card-top" :width="398" :height="350">
+          <div class="station-distribution">
+            <div class="distribution-stats">
+              <div class="stat-item excellent">
+                <div class="stat-icon">优</div>
+                <div class="stat-info">
+                  <div class="stat-value">45</div>
+                  <div class="stat-label">优良站点</div>
+                </div>
+              </div>
+              <div class="stat-item good">
+                <div class="stat-icon">良</div>
+                <div class="stat-info">
+                  <div class="stat-value">8</div>
+                  <div class="stat-label">良好站点</div>
+                </div>
+              </div>
+              <div class="stat-item poor">
+                <div class="stat-icon">差</div>
+                <div class="stat-info">
+                  <div class="stat-value">4</div>
+                  <div class="stat-label">较差站点</div>
+                </div>
+              </div>
+            </div>
+            <div class="station-list">
+              <div class="station-item" v-for="(station, index) in stationList" :key="index">
+                <div class="station-name">{{ station.name }}</div>
+                <div class="station-level" :class="station.levelClass">{{ station.level }}</div>
+                <div class="station-score">{{ station.score }}</div>
+              </div>
+            </div>
+          </div>
+        </m-card>
+        
+        <!-- 污染源监控 -->
+        <m-card title="污染源监控" class="water-environment-card water-environment-card-bottom" :width="398" :height="450">
+          <div class="pollution-monitor">
+            <div class="pollution-stats">
+              <div class="pollution-item">
+                <div class="pollution-title">工业污染源</div>
+                <div class="pollution-value">12</div>
+                <div class="pollution-unit">个</div>
+              </div>
+              <div class="pollution-item">
+                <div class="pollution-title">生活污染源</div>
+                <div class="pollution-value">28</div>
+                <div class="pollution-unit">个</div>
+              </div>
+              <div class="pollution-item">
+                <div class="pollution-title">农业污染源</div>
+                <div class="pollution-value">15</div>
+                <div class="pollution-unit">个</div>
+              </div>
+            </div>
+            <div class="pollution-list">
+              <div class="pollution-list-header">
+                <div class="header-item">污染源名称</div>
+                <div class="header-item">类型</div>
+                <div class="header-item">排放量</div>
+                <div class="header-item">状态</div>
+              </div>
+              <div class="pollution-list-body">
+                <div class="pollution-item-row" v-for="(item, index) in pollutionList" :key="index">
+                  <div class="item-cell">{{ item.name }}</div>
+                  <div class="item-cell">{{ item.type }}</div>
+                  <div class="item-cell">{{ item.emission }}</div>
+                  <div class="item-cell">
+                    <div class="status-badge" :class="item.statusClass">{{ item.status }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </m-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import mCard from "@/components/mCard/index.vue"
+
+const qualityIndicators = ref([
+  { name: 'pH值', value: 7.2, unit: '', status: '正常', percent: 72, isOverLimit: false },
+  { name: '溶解氧', value: 6.8, unit: 'mg/L', status: '正常', percent: 85, isOverLimit: false },
+  { name: '氨氮', value: 0.45, unit: 'mg/L', status: '正常', percent: 45, isOverLimit: false },
+  { name: 'COD', value: 18.5, unit: 'mg/L', status: '正常', percent: 62, isOverLimit: false },
+  { name: '总磷', value: 0.12, unit: 'mg/L', status: '正常', percent: 60, isOverLimit: false },
+  { name: '总氮', value: 1.2, unit: 'mg/L', status: '正常', percent: 60, isOverLimit: false },
+  { name: '高锰酸盐指数', value: 4.2, unit: 'mg/L', status: '正常', percent: 70, isOverLimit: false },
+  { name: '氟化物', value: 0.8, unit: 'mg/L', status: '正常', percent: 40, isOverLimit: false },
+  { name: '氰化物', value: 0.005, unit: 'mg/L', status: '正常', percent: 10, isOverLimit: false },
+  { name: '挥发酚', value: 0.001, unit: 'mg/L', status: '正常', percent: 5, isOverLimit: false }
+])
+
+const trendData = ref([
+  { date: '02-06', height: '90%', color: '#00d4ff' },
+  { date: '02-07', height: '85%', color: '#00d4ff' },
+  { date: '02-08', height: '88%', color: '#00d4ff' },
+  { date: '02-09', height: '75%', color: '#ffaa00' },
+  { date: '02-10', height: '92%', color: '#00d4ff' },
+  { date: '02-11', height: '87%', color: '#00d4ff' },
+  { date: '02-12', height: '90%', color: '#00d4ff' }
+])
+
+const stationList = ref([
+  { name: '巴城湖', level: 'Ⅱ类', levelClass: 'level-excellent', score: '92' },
+  { name: '斜塘', level: 'Ⅲ类', levelClass: 'level-good', score: '85' },
+  { name: '赵库', level: 'Ⅱ类', levelClass: 'level-excellent', score: '90' },
+  { name: '兵希(浏)', level: 'Ⅲ类', levelClass: 'level-good', score: '82' },
+  { name: '大直', level: 'Ⅳ类', levelClass: 'level-poor', score: '68' }
+])
+
+const pollutionList = ref([
+  { name: '昆山污水处理厂', type: '工业', emission: '1200', status: '正常', statusClass: 'normal' },
+  { name: '周市化工园区', type: '工业', emission: '850', status: '正常', statusClass: 'normal' },
+  { name: '花桥生活污水站', type: '生活', emission: '680', status: '正常', statusClass: 'normal' },
+  { name: '张浦农业灌溉区', type: '农业', emission: '420', status: '正常', statusClass: 'normal' },
+  { name: '千灯印染厂', type: '工业', emission: '560', status: '预警', statusClass: 'warning' }
+])
+</script>
+
+<style lang="scss" scoped>
+.water-environment-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+}
+
+.left-panel {
+  position: absolute;
+  z-index: 4;
+  width: 398px;
+  left: 32px;
+  top: 100px;
+  bottom: 50px;
+  perspective: 500px;
+  perspective-origin: 50% 50%;
+}
+
+.left-panel-3d {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+  z-index: 4;
+}
+
+.right-panel {
+  position: absolute;
+  z-index: 4;
+  width: 398px;
+  right: 32px;
+  top: 100px;
+  bottom: 50px;
+  perspective: 500px;
+  perspective-origin: 50% 50%;
+}
+
+.right-panel-3d {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+  z-index: 4;
+}
+
+.water-environment-card {
+  pointer-events: auto;
+  
+  &.water-environment-card-top {
+    flex-shrink: 0;
+  }
+  
+  &.water-environment-card-bottom {
+    flex: 1;
+    min-height: 200px;
+  }
+}
+
+.water-quality-panel {
+  padding: 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+}
+
+.quality-achievement {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+}
+
+.achievement-item {
+  background: linear-gradient(135deg, rgba(48, 220, 255, 0.2) 0%, rgba(0, 191, 255, 0.15) 100%);
+  border: 1px solid rgba(48, 220, 255, 0.4);
+  border-radius: 6px;
+  padding: 12px;
+  text-align: center;
+}
+
+.achievement-label {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 11px;
+  margin-bottom: 6px;
+  letter-spacing: 0.5px;
+}
+
+.achievement-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #30DCFF;
+  font-family: "D-DIN";
+  text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
+}
+
+.quality-indicators {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+  
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(48, 220, 255, 0.3);
+    border-radius: 2px;
+  }
+}
+
+.indicator-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  background: rgba(0, 100, 150, 0.3);
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: rgba(0, 100, 150, 0.5);
+  }
+  
+  &.over-limit {
+    border-color: rgba(255, 68, 68, 0.6);
+    background: rgba(255, 68, 68, 0.15);
+  }
+}
+
+.indicator-name {
+  width: 100px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.indicator-value {
+  width: 80px;
+  color: #30DCFF;
+  font-size: 14px;
+  font-weight: bold;
+  font-family: "D-DIN";
+  text-align: right;
+  margin-right: 10px;
+  
+  .unit {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 2px;
+  }
+}
+
+.indicator-status {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-bar {
+  flex: 1;
+  height: 6px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.status-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.status-text {
+  width: 40px;
+  text-align: right;
+  font-size: 11px;
+  color: #00ff88;
+  
+  &.warning {
+    color: #ff4444;
+  }
+}
+
+.water-quality-trend {
+  padding: 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+}
+
+.trend-chart {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.chart-title {
+  color: #30DCFF;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.chart-legend {
+  display: flex;
+  gap: 12px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.chart-body {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.chart-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+}
+
+.bar-wrapper {
+  width: 30px;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.bar-fill {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 4px 4px 0 0;
+  transition: height 0.5s ease;
+}
+
+.bar-label {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.station-distribution {
+  padding: 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+}
+
+.distribution-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+}
+
+.stat-item {
+  background: rgba(0, 100, 150, 0.4);
+  border: 1px solid rgba(48, 220, 255, 0.5);
+  border-radius: 6px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  &.excellent {
+    border-color: #00ff88;
+    background: rgba(0, 255, 136, 0.15);
+  }
+  
+  &.good {
+    border-color: #00d4ff;
+    background: rgba(0, 212, 255, 0.15);
+  }
+  
+  &.poor {
+    border-color: #ff4444;
+    background: rgba(255, 68, 68, 0.15);
+  }
+}
+
+.stat-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 6px;
+  
+  .excellent & {
+    background: rgba(0, 255, 136, 0.3);
+    color: #00ff88;
+  }
+  
+  .good & {
+    background: rgba(0, 212, 255, 0.3);
+    color: #00d4ff;
+  }
+  
+  .poor & {
+    background: rgba(255, 68, 68, 0.3);
+    color: #ff4444;
+  }
+}
+
+.stat-info {
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
+  font-family: "D-DIN";
+  margin-bottom: 2px;
+}
+
+.stat-label {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.station-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+  
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(48, 220, 255, 0.3);
+    border-radius: 2px;
+  }
+}
+
+.station-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  background: rgba(0, 100, 150, 0.3);
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: rgba(0, 100, 150, 0.5);
+  }
+}
+
+.station-name {
+  flex: 1;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+}
+
+.station-level {
+  width: 50px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: bold;
+  padding: 2px 6px;
+  border-radius: 3px;
+  
+  &.level-excellent {
+    background: rgba(0, 255, 136, 0.3);
+    color: #00ff88;
+  }
+  
+  &.level-good {
+    background: rgba(0, 212, 255, 0.3);
+    color: #00d4ff;
+  }
+  
+  &.level-poor {
+    background: rgba(255, 68, 68, 0.3);
+    color: #ff4444;
+  }
+}
+
+.station-score {
+  width: 40px;
+  text-align: right;
+  font-size: 14px;
+  font-weight: bold;
+  color: #30DCFF;
+  font-family: "D-DIN";
+}
+
+.pollution-monitor {
+  padding: 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+}
+
+.pollution-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+}
+
+.pollution-item {
+  background: rgba(0, 100, 150, 0.4);
+  border: 1px solid rgba(48, 220, 255, 0.5);
+  border-radius: 6px;
+  padding: 12px;
+  text-align: center;
+}
+
+.pollution-title {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 11px;
+  margin-bottom: 6px;
+}
+
+.pollution-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #30DCFF;
+  font-family: "D-DIN";
+  margin-bottom: 2px;
+}
+
+.pollution-unit {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.pollution-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.pollution-list-header {
+  display: flex;
+  padding: 8px 10px;
+  background: rgba(0, 100, 150, 0.5);
+  border-bottom: 1px solid rgba(48, 220, 255, 0.4);
+  color: #30dcff;
+  font-weight: bold;
+  font-size: 12px;
+  flex-shrink: 0;
+  border-radius: 4px 4px 0 0;
+  margin-bottom: 5px;
+  
+  .header-item {
+    flex: 1;
+    text-align: center;
+    padding: 0 5px;
+  }
+}
+
+.pollution-list-body {
+  flex: 1;
+  overflow-y: auto;
+  
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(48, 220, 255, 0.3);
+    border-radius: 2px;
+  }
+}
+
+.pollution-item-row {
+  display: flex;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(48, 220, 255, 0.2);
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  line-height: 1.4;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: rgba(48, 220, 255, 0.15);
+    border-radius: 3px;
+  }
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  .item-cell {
+    flex: 1;
+    text-align: center;
+    padding: 0 5px;
+    
+    &:first-child {
+      flex: 2;
+      text-align: left;
+    }
+  }
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: bold;
+  
+  &.normal {
+    background: rgba(0, 255, 136, 0.3);
+    color: #00ff88;
+  }
+  
+  &.warning {
+    background: rgba(255, 68, 68, 0.3);
+    color: #ff4444;
+  }
+}
+</style>

src/views/waterStation/index.vue

@@ -1,132 +1,249 @@
 <template>
   <div class="water-station-content">
-    <!-- 顶部统计卡片 -->
-    <TopStats />
+    <!-- 顶部统计卡片 - 仅在圩区总览页面显示 -->
+    <TopStats v-if="!selectedPolderDetail && !showHydrologyDetail" />
     <!-- 圩区总览 -->
-    <template v-if="!selectedPolderDetail">
-      <div class="left-panel">
-        <div class="left-panel-3d">
-          <m-card title="圩区统计" class="water-station-card water-station-card-top" :width="398" :height="280">
-            <div class="stats-panel">
-              <div class="core-indicator">
-                <div class="indicator-main">
-                  <span class="main-value">94</span>
-                  <span class="main-unit">个</span>
-                </div>
-                <div class="indicator-label">圩区总数</div>
-              </div>
-              <div class="stats-grid">
-                <div class="stat-item">
-                  <div class="stat-value">18</div>
-                  <div class="stat-label">骨干河道</div>
+    <template v-if="!selectedPolderDetail && !showHydrologyDetail">
+      <!-- 防汛抗旱 -->
+      <template v-if="activeTab === 'flood'">
+        <div class="left-panel">
+          <div class="left-panel-3d">
+            <m-card title="圩区统计" class="water-station-card water-station-card-top" :width="398" :height="280">
+              <div class="stats-panel">
+                <div class="core-indicator">
+                  <div class="indicator-main">
+                    <span class="main-value">94</span>
+                    <span class="main-unit">个</span>
+                  </div>
+                  <div class="indicator-label">圩区总数</div>
                 </div>
-                <div class="stat-item">
-                  <div class="stat-value">618</div>
-                  <div class="stat-label">防洪闸</div>
+                <div class="stats-grid">
+                  <div class="stat-item">
+                    <div class="stat-value">18</div>
+                    <div class="stat-label">骨干河道</div>
+                  </div>
+                  <div class="stat-item">
+                    <div class="stat-value">618</div>
+                    <div class="stat-label">防洪闸</div>
+                  </div>
+                  <div class="stat-item">
+                    <div class="stat-value">560</div>
+                    <div class="stat-label">排涝站</div>
+                  </div>
+                  <div class="stat-item">
+                    <div class="stat-value">2173.69<span class="stat-unit">m³/s</span></div>
+                    <div class="stat-label">排涝流量</div>
+                  </div>
                 </div>
-                <div class="stat-item">
-                  <div class="stat-value">560</div>
-                  <div class="stat-label">排涝站</div>
+              </div>
+            </m-card>
+            <m-card title="圩区信息" class="water-station-card water-station-card-bottom" :width="398" :height="520">
+              <div class="polder-list">
+                <div class="polder-list-header">
+                  <div class="header-item">序号</div>
+                  <div class="header-item">圩区名称</div>
+                  <div class="header-item">实时水位</div>
+                  <div class="header-item">控制水位</div>
+                  <div class="header-item">流量</div>
+                  <div class="header-item">运行情况</div>
                 </div>
-                <div class="stat-item">
-                  <div class="stat-value">2173.69<span class="stat-unit">m³/s</span></div>
-                  <div class="stat-label">排涝流量</div>
+                <div class="polder-list-body">
+                  <div class="polder-item" v-for="(item, index) in polderList" :key="index">
+                    <div class="item-cell">{{ index + 1 }}</div>
+                    <div class="item-cell">{{ item.name }}</div>
+                    <div class="item-cell">{{ item.waterLevel }}</div>
+                    <div class="item-cell">{{ item.controlLevel }}</div>
+                    <div class="item-cell">{{ item.flow }}</div>
+                    <div class="item-cell">
+                      <div class="rate-bar">
+                        <div class="rate-fill" :style="{ width: item.rate }"></div>
+                        <span class="rate-text">{{ item.rate }}</span>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </m-card>
-          <m-card title="圩区信息" class="water-station-card water-station-card-bottom" :width="398" :height="520">
-            <div class="polder-list">
-              <div class="polder-list-header">
-                <div class="header-item">序号</div>
-                <div class="header-item">圩区名称</div>
-                <div class="header-item">实时水位</div>
-                <div class="header-item">控制水位</div>
-                <div class="header-item">流量</div>
-                <div class="header-item">运行情况</div>
-              </div>
-              <div class="polder-list-body">
-                <div class="polder-item" v-for="(item, index) in polderList" :key="index">
-                  <div class="item-cell">{{ index + 1 }}</div>
-                  <div class="item-cell">{{ item.name }}</div>
-                  <div class="item-cell">{{ item.waterLevel }}</div>
-                  <div class="item-cell">{{ item.controlLevel }}</div>
-                  <div class="item-cell">{{ item.flow }}</div>
-                  <div class="item-cell">
-                    <div class="rate-bar">
-                      <div class="rate-fill" :style="{ width: item.rate }"></div>
-                      <span class="rate-text">{{ item.rate }}</span>
+            </m-card>
+          </div>
+        </div>
+        
+        <!-- 右侧面板 -->
+        <div class="right-panel">
+          <div class="right-panel-3d">
+            <!-- 气象预警信息 -->
+            <m-card title="气象预警信息" class="water-station-card water-station-card-top" :width="398" :height="320">
+              <div class="weather-warning-panel">
+                <div class="warning-grid">
+                  <div class="warning-item">
+                    <div class="warning-title">暴雨</div>
+                    <div class="warning-icon rain-icon">
+                      <img src="@/assets/images/rain.svg" alt="暴雨" />
+                    </div>
+                    <div class="warning-status">无</div>
+                    <div class="warning-time">09-30 11:06</div>
+                  </div>
+                  <div class="warning-item">
+                    <div class="warning-title">强对流</div>
+                    <div class="warning-icon storm-icon">
+                      <img src="@/assets/images/storm.svg" alt="强对流" />
                     </div>
+                    <div class="warning-status">无</div>
+                    <div class="warning-time">10-18 05:28</div>
+                  </div>
+                  <div class="warning-item">
+                    <div class="warning-title">台风</div>
+                    <div class="warning-icon typhoon-icon">
+                      <img src="@/assets/images/typhoon.svg" alt="台风" />
+                    </div>
+                    <div class="warning-status">无</div>
+                    <div class="warning-time">07-31 10:08</div>
+                  </div>
+                  <div class="warning-item">
+                    <div class="warning-title">高温</div>
+                    <div class="warning-icon heat-icon">
+                      <img src="@/assets/images/heat.svg" alt="高温" />
+                    </div>
+                    <div class="warning-status">无</div>
+                    <div class="warning-time">09-17 17:27</div>
                   </div>
                 </div>
               </div>
-            </div>
-          </m-card>
+            </m-card>
+            
+            <!-- 预警统计 -->
+            <m-card title="预警统计" class="water-station-card water-station-card-bottom" :width="398" :height="240">
+              <div class="warning-stats-panel">
+                <div class="stats-grid">
+                  <div class="stat-card warning-stat">
+                    <div class="stat-title">超警站点个数</div>
+                    <div class="stat-value">0/11</div>
+                  </div>
+                  <div class="stat-card alert-stat">
+                    <div class="stat-title">超保站点个数</div>
+                    <div class="stat-value">0/11</div>
+                  </div>
+                  <div class="stat-card normal-stat">
+                    <div class="stat-title">正常站点个数</div>
+                    <div class="stat-value">55/57</div>
+                  </div>
+                </div>
+              </div>
+            </m-card>
+          </div>
         </div>
-      </div>
+      </template>
       
-      <!-- 右侧面板 -->
-      <div class="right-panel">
-        <div class="right-panel-3d">
-          <!-- 气象预警信息 -->
-          <m-card title="气象预警信息" class="water-station-card water-station-card-top" :width="398" :height="320">
-            <div class="weather-warning-panel">
-              <div class="warning-grid">
-                <div class="warning-item">
-                  <div class="warning-title">暴雨</div>
-                  <div class="warning-icon rain-icon">
-                    <img src="@/assets/images/rain.svg" alt="暴雨" />
+      <!-- 水环境 -->
+      <WaterEnvironment v-else-if="activeTab === 'environment'" />
+      
+      <!-- 水资源 -->
+      <div v-else-if="activeTab === 'resource'" class="water-resource-content">
+        <div class="left-panel">
+          <div class="left-panel-3d">
+            <m-card title="水资源统计" class="water-station-card water-station-card-top" :width="398" :height="280">
+              <div class="stats-panel">
+                <div class="core-indicator">
+                  <div class="indicator-main">
+                    <span class="main-value">8</span>
+                    <span class="main-unit">座</span>
                   </div>
-                  <div class="warning-status">无</div>
-                  <div class="warning-time">09-30 11:06</div>
+                  <div class="indicator-label">水厂总数</div>
                 </div>
-                <div class="warning-item">
-                  <div class="warning-title">强对流</div>
-                  <div class="warning-icon storm-icon">
-                    <img src="@/assets/images/storm.svg" alt="强对流" />
+                <div class="stats-grid">
+                  <div class="stat-item">
+                    <div class="stat-value">931</div>
+                    <div class="stat-label">区域面积</div>
                   </div>
-                  <div class="warning-status">无</div>
-                  <div class="warning-time">10-18 05:28</div>
-                </div>
-                <div class="warning-item">
-                  <div class="warning-title">台风</div>
-                  <div class="warning-icon typhoon-icon">
-                    <img src="@/assets/images/typhoon.svg" alt="台风" />
+                  <div class="stat-item">
+                    <div class="stat-value">156</div>
+                    <div class="stat-label">排水口</div>
                   </div>
-                  <div class="warning-status">无</div>
-                  <div class="warning-time">07-31 10:08</div>
-                </div>
-                <div class="warning-item">
-                  <div class="warning-title">高温</div>
-                  <div class="warning-icon heat-icon">
-                    <img src="@/assets/images/heat.svg" alt="高温" />
+                  <div class="stat-item">
+                    <div class="stat-value">57</div>
+                    <div class="stat-label">水文站</div>
+                  </div>
+                  <div class="stat-item">
+                    <div class="stat-value">18</div>
+                    <div class="stat-label">骨干河道</div>
                   </div>
-                  <div class="warning-status">无</div>
-                  <div class="warning-time">09-17 17:27</div>
                 </div>
               </div>
-            </div>
-          </m-card>
-          
-          <!-- 预警统计 -->
-          <m-card title="预警统计" class="water-station-card water-station-card-bottom" :width="398" :height="240">
-            <div class="warning-stats-panel">
-              <div class="stats-grid">
-                <div class="stat-card warning-stat">
-                  <div class="stat-title">超警站点个数</div>
-                  <div class="stat-value">0/11</div>
+            </m-card>
+            <m-card title="水资源分布" class="water-station-card water-station-card-bottom" :width="398" :height="520">
+              <div class="polder-list">
+                <div class="polder-list-header">
+                  <div class="header-item">序号</div>
+                  <div class="header-item">水源地</div>
+                  <div class="header-item">类型</div>
+                  <div class="header-item">蓄水量</div>
+                  <div class="header-item">状态</div>
+                </div>
+                <div class="polder-list-body">
+                  <div class="polder-item" v-for="(item, index) in resourceList" :key="index">
+                    <div class="item-cell">{{ index + 1 }}</div>
+                    <div class="item-cell">{{ item.name }}</div>
+                    <div class="item-cell">{{ item.type }}</div>
+                    <div class="item-cell">{{ item.capacity }}</div>
+                    <div class="item-cell">
+                      <div class="rate-bar">
+                        <div class="rate-fill" :style="{ width: item.rate }"></div>
+                        <span class="rate-text">{{ item.rate }}</span>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-                <div class="stat-card alert-stat">
-                  <div class="stat-title">超保站点个数</div>
-                  <div class="stat-value">0/11</div>
+              </div>
+            </m-card>
+          </div>
+        </div>
+        
+        <!-- 右侧面板 -->
+        <div class="right-panel">
+          <div class="right-panel-3d">
+            <!-- 用水统计 -->
+            <m-card title="用水统计" class="water-station-card water-station-card-top" :width="398" :height="320">
+              <div class="water-usage-panel">
+                <div class="usage-grid">
+                  <div class="usage-item">
+                    <div class="usage-title">工业用水</div>
+                    <div class="usage-value">45%</div>
+                  </div>
+                  <div class="usage-item">
+                    <div class="usage-title">农业用水</div>
+                    <div class="usage-value">30%</div>
+                  </div>
+                  <div class="usage-item">
+                    <div class="usage-title">生活用水</div>
+                    <div class="usage-value">20%</div>
+                  </div>
+                  <div class="usage-item">
+                    <div class="usage-title">其他用水</div>
+                    <div class="usage-value">5%</div>
+                  </div>
                 </div>
-                <div class="stat-card normal-stat">
-                  <div class="stat-title">正常站点个数</div>
-                  <div class="stat-value">55/57</div>
+              </div>
+            </m-card>
+            
+            <!-- 水质达标率 -->
+            <m-card title="水质达标率" class="water-station-card water-station-card-bottom" :width="398" :height="240">
+              <div class="warning-stats-panel">
+                <div class="stats-grid">
+                  <div class="stat-card normal-stat">
+                    <div class="stat-title">优Ⅲ以上</div>
+                    <div class="stat-value">90%</div>
+                  </div>
+                  <div class="stat-card warning-stat">
+                    <div class="stat-title">Ⅳ类</div>
+                    <div class="stat-value">8%</div>
+                  </div>
+                  <div class="stat-card alert-stat">
+                    <div class="stat-title">劣Ⅴ类</div>
+                    <div class="stat-value">2%</div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </m-card>
+            </m-card>
+          </div>
         </div>
       </div>
     </template>
@@ -147,8 +264,8 @@
       <HydrologyDetail />
     </template>
     
-    <!-- 底部托盘 -->
-    <div class="bottom-tray">
+    <!-- 底部托盘 - 仅在圩区总览页面显示 -->
+    <div class="bottom-tray" v-if="!selectedPolderDetail && !showHydrologyDetail">
       <!-- svg线条动画 -->
       <mSvglineAnimation class="bottom-svg-line-left" :width="721" :height="57" color="#00BFFF" :strokeWidth="2"
         :dir="[0, 1]" :length="50"
@@ -165,9 +282,9 @@
       </div>
       <!-- 底部菜单 -->
       <div class="bottom-menu">
-        <div class="bottom-menu-item is-active"><span>防汛抗旱</span></div>
-        <div class="bottom-menu-item"><span>水环境</span></div>
-        <div class="bottom-menu-item"><span>水资源</span></div>
+        <div class="bottom-menu-item" :class="{ 'is-active': activeTab === 'flood' }" @click="switchTab('flood')"><span>防汛抗旱</span></div>
+        <div class="bottom-menu-item" :class="{ 'is-active': activeTab === 'environment' }" @click="switchTab('environment')"><span>水环境</span></div>
+        <div class="bottom-menu-item" :class="{ 'is-active': activeTab === 'resource' }" @click="switchTab('resource')"><span>水资源</span></div>
       </div>
       <!-- 右箭头 -->
       <div class="bottom-tray-arrow is-reverse">
@@ -179,17 +296,18 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from "vue"
+import { ref, onMounted, nextTick, watch, computed } from "vue"
 import mCard from "@/components/mCard/index.vue"
 import VChart from "vue-echarts"
 import * as echarts from "echarts"
 import TopStats from "./TopStats.vue"
 import PolderDetail from "./PolderDetail.vue"
 import HydrologyDetail from "./HydrologyDetail.vue"
+import WaterEnvironment from "./WaterEnvironment.vue"
 import mSvglineAnimation from "@/components/mSvglineAnimation/index.vue"
 import gsap from "gsap"
 
-defineProps({
+const props = defineProps({
   selectedPolderDetail: {
     type: String,
     default: null
@@ -209,6 +327,8 @@ defineProps({
 })
 defineEmits(['update:showGate', 'update:showHydrology'])
 
+const activeTab = ref('flood')
+
 const polderList = ref([
   { name: '庙泾联圩', waterLevel: '2.19', controlLevel: '2.50', flow: '3.20', rate: '28%' },
   { name: '西河联圩', waterLevel: '2.74', controlLevel: '3.10', flow: '3.00', rate: '17%' },
@@ -237,14 +357,53 @@ const stationRanking = ref([
   { district: '淀山湖镇', name: '清水湾', level: '2.52', time: '02-12 10:05' }
 ])
 
-// 组件挂载时执行动画
-onMounted(() => {
+const resourceList = ref([
+  { name: '巴城湖水源地', type: '湖泊', capacity: '1200万m³', rate: '85%' },
+  { name: '傀儡湖水源地', type: '湖泊', capacity: '800万m³', rate: '90%' },
+  { name: '吴淞江水源地', type: '河道', capacity: '500万m³', rate: '75%' },
+  { name: '娄江水源地', type: '河道', capacity: '300万m³', rate: '80%' },
+  { name: '阳澄湖水源地', type: '湖泊', capacity: '2000万m³', rate: '92%' }
+])
+
+// 计算是否显示圩区总览
+const isOverview = computed(() => {
+  return !props.selectedPolderDetail && !props.showHydrologyDetail
+})
+
+// 切换标签页
+function switchTab(tab) {
+  activeTab.value = tab
+}
+
+// 执行动画
+function executeAnimations() {
   nextTick(() => {
     gsap.to(".water-station-content .water-station-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
     gsap.to(".water-station-content .count-card", { y: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
     gsap.to(".water-station-content .bottom-tray", { y: 0, opacity: 1, duration: 0.5 })
   })
+}
+
+// 组件挂载时执行动画
+onMounted(() => {
+  executeAnimations()
 })
+
+// 监听状态变化，重新执行动画
+watch(
+  [() => props.selectedPolderDetail, () => props.showHydrologyDetail, () => activeTab.value],
+  () => {
+    if (isOverview.value) {
+      // 重置元素初始状态
+      gsap.set(".water-station-content .water-station-card", { x: -150, opacity: 0 })
+      gsap.set(".water-station-content .count-card", { y: 150, opacity: 0 })
+      gsap.set(".water-station-content .bottom-tray", { y: 100, opacity: 0 })
+      
+      // 重新执行动画
+      executeAnimations()
+    }
+  }
+)
 </script>
 
 <style lang="scss">