水环境水资源切换

src/views/waterStation/WaterResource.vue

@@ -0,0 +1,584 @@
+<template>
+  <div class="water-resource-content">
+    <!-- 左侧面板 -->
+    <div class="left-panel">
+      <div class="left-panel-3d">
+        <!-- 全量监测面板 -->
+        <m-card title="全量监测" class="water-resource-card water-resource-card-top" :width="398" :height="280">
+          <div class="full-monitoring-panel">
+            <!-- 核心数据 -->
+            <div class="core-data-grid">
+              <div class="data-item">
+                <div class="data-label">今日入境水量</div>
+                <div class="data-value">125<span class="unit">万m³</span></div>
+              </div>
+              <div class="data-item">
+                <div class="data-label">今日出境水量</div>
+                <div class="data-value">118<span class="unit">万m³</span></div>
+              </div>
+              <div class="data-item">
+                <div class="data-label">本月累计差值</div>
+                <div class="data-value">+156<span class="unit">万m³</span></div>
+              </div>
+              <div class="data-item">
+                <div class="data-label">监测站点覆盖率</div>
+                <div class="data-value">98<span class="unit">%</span></div>
+              </div>
+              <div class="data-item">
+                <div class="data-label">水资源利用效率</div>
+                <div class="data-value">85<span class="unit">%</span></div>
+              </div>
+              <div class="data-item">
+                <div class="data-label">污水日处理能力</div>
+                <div class="data-value">104<span class="unit">万吨/天</span></div>
+              </div>
+            </div>
+            
+            <!-- 年用水总量 -->
+            <div class="annual-water-usage">
+              <div class="usage-label">年用水总量</div>
+              <div class="usage-value">5.4<span class="unit">亿立方米</span></div>
+            </div>
+          </div>
+        </m-card>
+        
+        <!-- 出入境对比分析 -->
+        <m-card title="出入境对比分析" class="water-resource-card water-resource-card-bottom" :width="398" :height="520">
+          <div class="water-flow-analysis">
+            <div class="analysis-header">
+              <div class="time-range">
+                <button :class="{ 'active': timeRange === 'day' }" @click="timeRange = 'day'">日</button>
+                <button :class="{ 'active': timeRange === 'month' }" @click="timeRange = 'month'">月</button>
+                <button :class="{ 'active': timeRange === 'year' }" @click="timeRange = 'year'">年</button>
+              </div>
+            </div>
+            
+            <!-- 图表 -->
+            <div class="flow-chart" ref="flowChartRef"></div>
+            
+            <!-- 预警提示 -->
+            <div class="warning-alert" v-if="hasWarning">
+              <div class="alert-icon">⚠️</div>
+              <div class="alert-content">
+                <div class="alert-title">水量异常预警</div>
+                <div class="alert-message">入境水量骤减，建议加强监测</div>
+              </div>
+            </div>
+          </div>
+        </m-card>
+      </div>
+    </div>
+    
+    <!-- 右侧面板 -->
+    <div class="right-panel">
+      <div class="right-panel-3d">
+        <!-- 水资源管控支撑 -->
+        <m-card title="水资源管控支撑" class="water-resource-card water-resource-card-top" :width="398" :height="320">
+          <div class="water-management-panel">
+            <!-- 重点取水单位 -->
+            <div class="water-users">
+              <div class="users-header">
+                <div class="header-item">单位名称</div>
+                <div class="header-item">取水额度</div>
+                <div class="header-item">实际取水</div>
+                <div class="header-item">状态</div>
+              </div>
+              <div class="users-body">
+                <div class="user-item" v-for="(user, index) in waterUsers" :key="index" :class="{ 'over-limit': user.isOverLimit }">
+                  <div class="user-name">{{ user.name }}</div>
+                  <div class="user-quota">{{ user.quota }}万m³</div>
+                  <div class="user-actual">{{ user.actual }}万m³</div>
+                  <div class="user-status" :class="{ 'warning': user.isOverLimit }">
+                    {{ user.isOverLimit ? '超额度' : '正常' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 节水成效 -->
+            <div class="water-saving-results">
+              <div class="result-item">
+                <div class="result-label">污水提质增效</div>
+                <div class="result-value">92%</div>
+              </div>
+              <div class="result-item">
+                <div class="result-label">再生水利用率</div>
+                <div class="result-value">35%</div>
+              </div>
+            </div>
+          </div>
+        </m-card>
+        
+        <!-- 全域水资源态势 -->
+        <m-card title="全域水资源态势" class="water-resource-card water-resource-card-bottom" :width="398" :height="480">
+          <div class="water-situation-panel">
+            <!-- 热力图 -->
+            <div class="heatmap" ref="heatmapRef"></div>
+            
+            <!-- 区域状态 -->
+            <div class="area-status">
+              <div class="status-item">
+                <div class="status-color red"></div>
+                <div class="status-label">水资源紧张区域</div>
+              </div>
+              <div class="status-item">
+                <div class="status-color yellow"></div>
+                <div class="status-label">水资源一般区域</div>
+              </div>
+              <div class="status-item">
+                <div class="status-color green"></div>
+                <div class="status-label">水资源充足区域</div>
+              </div>
+            </div>
+          </div>
+        </m-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue"
+import mCard from "@/components/mCard/index.vue"
+import * as echarts from "echarts"
+
+// 时间范围
+const timeRange = ref('day')
+
+// 预警状态
+const hasWarning = ref(true)
+
+// 重点取水单位数据
+const waterUsers = ref([
+  { name: '昆山高新区', quota: 1200, actual: 1150, isOverLimit: false },
+  { name: '昆山开发区', quota: 1500, actual: 1580, isOverLimit: true },
+  { name: '张浦镇', quota: 800, actual: 780, isOverLimit: false },
+  { name: '周市镇', quota: 600, actual: 620, isOverLimit: true }
+])
+
+// 图表引用
+const flowChartRef = ref(null)
+const heatmapRef = ref(null)
+let flowChart = null
+let heatmapChart = null
+
+// 初始化出入境对比分析图表
+function initFlowChart() {
+  if (!flowChartRef.value) return
+  
+  flowChart = echarts.init(flowChartRef.value)
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999'
+        }
+      }
+    },
+    legend: {
+      data: ['入境水量', '出境水量', '差值']
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: timeRange.value === 'day' ? ['1日', '2日', '3日', '4日', '5日', '6日', '7日'] :
+              timeRange.value === 'month' ? ['1月', '2月', '3月', '4月', '5月', '6月'] :
+              ['2020年', '2021年', '2022年', '2023年', '2024年', '2025年'],
+        axisPointer: {
+          type: 'shadow'
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '水量 (万m³)',
+        min: 0,
+        max: timeRange.value === 'day' ? 150 : timeRange.value === 'month' ? 4000 : 60000,
+        axisLabel: {
+          formatter: '{value}'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '入境水量',
+        type: 'bar',
+        data: timeRange.value === 'day' ? [120, 125, 118, 105, 98, 110, 122] :
+              timeRange.value === 'month' ? [3800, 3900, 4100, 3700, 3600, 3800] :
+              [52000, 53000, 54000, 54500, 53800, 54200],
+        itemStyle: {
+          color: '#00BFFF'
+        }
+      },
+      {
+        name: '出境水量',
+        type: 'bar',
+        data: timeRange.value === 'day' ? [115, 118, 110, 100, 95, 105, 115] :
+              timeRange.value === 'month' ? [3600, 3700, 3900, 3500, 3400, 3600] :
+              [50000, 51000, 52000, 52500, 51800, 52200],
+        itemStyle: {
+          color: '#FF6347'
+        }
+      },
+      {
+        name: '差值',
+        type: 'line',
+        data: timeRange.value === 'day' ? [5, 7, 8, 5, 3, 5, 7] :
+              timeRange.value === 'month' ? [200, 200, 200, 200, 200, 200] :
+              [2000, 2000, 2000, 2000, 2000, 2000],
+        itemStyle: {
+          color: '#4CAF50'
+        }
+      }
+    ]
+  }
+  
+  flowChart.setOption(option)
+}
+
+// 初始化全域水资源态势热力图
+function initHeatmap() {
+  if (!heatmapRef.value) return
+  
+  heatmapChart = echarts.init(heatmapRef.value)
+  
+  const option = {
+    tooltip: {
+      position: 'top'
+    },
+    grid: {
+      height: '60%',
+      top: '10%'
+    },
+    xAxis: {
+      type: 'category',
+      data: ['巴城镇', '周市镇', '高新区', '开发区', '张浦镇', '陆家镇', '花桥镇', '千灯镇', '周庄镇', '锦溪镇', '淀山湖镇'],
+      splitArea: {
+        show: true
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: ['水资源量', '取水量', '用水量', '排水量'],
+      splitArea: {
+        show: true
+      }
+    },
+    visualMap: {
+      min: 0,
+      max: 100,
+      calculable: true,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: '15%',
+      inRange: {
+        color: ['#4CAF50', '#FFEB3B', '#FF5722']
+      }
+    },
+    series: [
+      {
+        name: '水资源态势',
+        type: 'heatmap',
+        data: [
+          [0, 0, 85], [0, 1, 45], [0, 2, 40], [0, 3, 35],
+          [1, 0, 75], [1, 1, 55], [1, 2, 50], [1, 3, 45],
+          [2, 0, 60], [2, 1, 70], [2, 2, 65], [2, 3, 60],
+          [3, 0, 55], [3, 1, 75], [3, 2, 70], [3, 3, 65],
+          [4, 0, 80], [4, 1, 40], [4, 2, 35], [4, 3, 30],
+          [5, 0, 70], [5, 1, 45], [5, 2, 40], [5, 3, 35],
+          [6, 0, 65], [6, 1, 50], [6, 2, 45], [6, 3, 40],
+          [7, 0, 85], [7, 1, 35], [7, 2, 30], [7, 3, 25],
+          [8, 0, 90], [8, 1, 30], [8, 2, 25], [8, 3, 20],
+          [9, 0, 88], [9, 1, 32], [9, 2, 28], [9, 3, 22],
+          [10, 0, 92], [10, 1, 28], [10, 2, 24], [10, 3, 18]
+        ],
+        label: {
+          show: true
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+  
+  heatmapChart.setOption(option)
+}
+
+// 监听时间范围变化
+watch(timeRange, () => {
+  initFlowChart()
+})
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  initFlowChart()
+  initHeatmap()
+  
+  // 监听窗口大小变化，调整图表大小
+  window.addEventListener('resize', () => {
+    flowChart?.resize()
+    heatmapChart?.resize()
+  })
+})
+</script>
+
+<style lang="scss">
+.water-resource-content {
+  display: flex;
+  gap: 20px;
+  padding: 20px;
+  
+  .left-panel,
+  .right-panel {
+    flex: 1;
+    
+    &-3d {
+      position: relative;
+      transform-style: preserve-3d;
+      perspective: 1000px;
+    }
+  }
+  
+  .water-resource-card {
+    margin-bottom: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+    }
+    
+    &-top {
+      margin-top: 20px;
+    }
+  }
+  
+  // 全量监测面板
+  .full-monitoring-panel {
+    .core-data-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 15px;
+      margin-bottom: 20px;
+      margin-top: 40px;
+      
+      .data-item {
+        text-align: center;
+        
+        .data-label {
+          font-size: 12px;
+          color: #fff;
+          margin-bottom: 5px;
+        }
+        
+        .data-value {
+          font-size: 18px;
+          font-weight: bold;
+          color: #00BFFF;
+          
+          .unit {
+            font-size: 12px;
+            font-weight: normal;
+            color: rgba(255, 255, 255, 0.8);
+          }
+        }
+      }
+    }
+    
+    .annual-water-usage {
+      text-align: center;
+      padding-top: 15px;
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
+      
+      .usage-label {
+        font-size: 14px;
+        color: #fff;
+        margin-bottom: 5px;
+      }
+      
+      .usage-value {
+        font-size: 24px;
+        font-weight: bold;
+        color: #00BFFF;
+        
+        .unit {
+          font-size: 14px;
+          font-weight: normal;
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
+  
+  // 出入境对比分析
+  .water-flow-analysis {
+    .analysis-header {
+      margin-bottom: 15px;
+      
+      .time-range {
+        display: flex;
+        gap: 10px;
+        
+        button {
+          padding: 5px 15px;
+          border: 1px solid #ddd;
+          background: #fff;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          
+          &.active {
+            background: #00BFFF;
+            color: #fff;
+            border-color: #00BFFF;
+          }
+        }
+      }
+    }
+    
+    .flow-chart {
+      height: 350px;
+      margin-bottom: 15px;
+    }
+    
+    .warning-alert {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px;
+      background: #FFF3CD;
+      border: 1px solid #FFEEBA;
+      border-radius: 4px;
+      
+      .alert-icon {
+        font-size: 20px;
+      }
+      
+      .alert-content {
+        .alert-title {
+          font-weight: bold;
+          margin-bottom: 2px;
+        }
+        
+        .alert-message {
+          font-size: 12px;
+          color: #666;
+        }
+      }
+    }
+  }
+  
+  // 水资源管控支撑
+  .water-management-panel {
+    .water-users {
+      margin-bottom: 20px;
+      
+      .users-header {
+        display: grid;
+        grid-template-columns: 2fr 1fr 1fr 1fr;
+        gap: 10px;
+        padding: 10px;
+        background: #f5f5f5;
+        border-radius: 4px;
+        font-weight: bold;
+        font-size: 12px;
+      }
+      
+      .users-body {
+        max-height: 150px;
+        overflow-y: auto;
+        
+        .user-item {
+          display: grid;
+          grid-template-columns: 2fr 1fr 1fr 1fr;
+          gap: 10px;
+          padding: 10px;
+          border-bottom: 1px solid #eee;
+          font-size: 12px;
+          
+          &.over-limit {
+            background: #FFF5F5;
+          }
+          
+          .user-status {
+            &.warning {
+              color: #FF5722;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+    
+    .water-saving-results {
+      display: flex;
+      gap: 20px;
+      
+      .result-item {
+        flex: 1;
+        text-align: center;
+        
+        .result-label {
+          font-size: 12px;
+          color: #666;
+          margin-bottom: 5px;
+        }
+        
+        .result-value {
+          font-size: 20px;
+          font-weight: bold;
+          color: #4CAF50;
+        }
+      }
+    }
+  }
+  
+  // 全域水资源态势
+  .water-situation-panel {
+    .heatmap {
+      height: 350px;
+      margin-bottom: 20px;
+    }
+    
+    .area-status {
+      display: flex;
+      gap: 20px;
+      justify-content: center;
+      
+      .status-item {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 12px;
+        
+        .status-color {
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          
+          &.red {
+            background: #FF5722;
+          }
+          
+          &.yellow {
+            background: #FFEB3B;
+          }
+          
+          &.green {
+            background: #4CAF50;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/waterStation/index.vue

@@ -137,115 +137,7 @@
       <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="indicator-label">水厂总数</div>
-                </div>
-                <div class="stats-grid">
-                  <div class="stat-item">
-                    <div class="stat-value">931</div>
-                    <div class="stat-label">区域面积</div>
-                  </div>
-                  <div class="stat-item">
-                    <div class="stat-value">156</div>
-                    <div class="stat-label">排水口</div>
-                  </div>
-                  <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>
-              </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>
-            </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>
-            </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>
-            </m-card>
-          </div>
-        </div>
-      </div>
+      <WaterResource v-else-if="activeTab === 'resource'" />
     </template>
     
     <!-- 圩区详情 -->
@@ -304,6 +196,7 @@ import TopStats from "./TopStats.vue"
 import PolderDetail from "./PolderDetail.vue"
 import HydrologyDetail from "./HydrologyDetail.vue"
 import WaterEnvironment from "./WaterEnvironment.vue"
+import WaterResource from "./WaterResource.vue"
 import mSvglineAnimation from "@/components/mSvglineAnimation/index.vue"
 import gsap from "gsap"