feat(圩区水位): 添加圩内外水位切换功能并优化显示

- 为孔巷联圩添加圩内/圩外水位切换功能
- 动态显示不同区域的水位数据和图表
- 优化水位分析面板的布局和样式
- 使用计算属性动态生成图表配置和数据

src/views/waterStation/index.vue

@@ -71,33 +71,43 @@
           <!-- 圩区水位分析 -->
           <m-card :title="selectedPolderDetail === 'konggang' ? '孔巷联圩水位分析' : '圩区水位分析'" class="water-station-card water-station-card-top" :width="398" :height="320">
             <div class="water-level-analysis-panel">
+              <!-- 切换按钮 -->
+              <div class="water-level-tabs" v-if="selectedPolderDetail === 'konggang'">
+                <div class="tab-item" :class="{ active: currentWaterLevelTab === 'inner' }" @click="currentWaterLevelTab = 'inner'">
+                  <span>圩内</span>
+                </div>
+                <div class="tab-item" :class="{ active: currentWaterLevelTab === 'outer' }" @click="currentWaterLevelTab = 'outer'">
+                  <span>圩外</span>
+                </div>
+              </div>
+              
               <!-- 水位数据 -->
               <div class="water-level-data">
                 <div class="data-item">
                   <div class="data-label">水位(m)</div>
-                  <div class="data-value">2.54</div>
+                  <div class="data-value">{{ currentWaterLevelData.level }}</div>
                 </div>
                 <div class="data-item">
                   <div class="data-label">比昨日(m)</div>
-                  <div class="data-value negative">-0.05</div>
+                  <div class="data-value" :class="{ negative: currentWaterLevelData.change < 0 }">{{ currentWaterLevelData.change }}</div>
                 </div>
                 <div class="data-item">
                   <div class="data-label">历史最高(m)</div>
-                  <div class="data-value">4.06</div>
+                  <div class="data-value">{{ currentWaterLevelData.historyMax }}</div>
                 </div>
                 <div class="data-item">
                   <div class="data-label">生态水位(m)</div>
-                  <div class="data-value">2.08</div>
+                  <div class="data-value">{{ currentWaterLevelData.ecological }}</div>
                 </div>
                 <div class="data-item">
                   <div class="data-label">比警戒(m)</div>
-                  <div class="data-value negative">-0.79</div>
+                  <div class="data-value" :class="{ negative: currentWaterLevelData.alertDiff < 0 }">{{ currentWaterLevelData.alertDiff }}</div>
                 </div>
               </div>
               
               <!-- 水位趋势图 -->
               <div class="water-level-chart">
-                <VChart ref="waterLevelChart" :option="waterLevelChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
+                <VChart ref="waterLevelChart" :option="currentWaterLevelChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
               </div>
             </div>
           </m-card>
@@ -262,7 +272,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue"
+import { ref, computed } from "vue"
 import mCard from "@/components/mCard/index.vue"
 import VChart from "vue-echarts"
 import * as echarts from "echarts"
@@ -315,6 +325,196 @@ const stationRanking = ref([
   { district: '淀山湖镇', name: '清水湾', level: '2.52', time: '02-12 10:05' }
 ])
 
+// 当前选中的水位标签
+const currentWaterLevelTab = ref('inner')
+
+// 圩内水位数据
+const innerWaterLevelData = {
+  level: '2.54',
+  change: '-0.05',
+  historyMax: '4.06',
+  ecological: '2.08',
+  alertDiff: '-0.79',
+  chartData: [2.60, 2.62, 2.58, 2.56, 2.54],
+  flowData: [0.4, 0.5, 0.3, 0.4, 0.3]
+}
+
+// 圩外水位数据
+const outerWaterLevelData = {
+  level: '2.65',
+  change: '+0.02',
+  historyMax: '4.12',
+  ecological: '2.10',
+  alertDiff: '-0.68',
+  chartData: [2.62, 2.63, 2.64, 2.65, 2.65],
+  flowData: [0.5, 0.6, 0.5, 0.4, 0.5]
+}
+
+// 当前水位数据
+const currentWaterLevelData = computed(() => {
+  return currentWaterLevelTab.value === 'inner' ? innerWaterLevelData : outerWaterLevelData
+})
+
+// 当前水位图表配置
+const currentWaterLevelChartOption = computed(() => {
+  const data = currentWaterLevelTab.value === 'inner' ? innerWaterLevelData : outerWaterLevelData
+  return {
+    grid: {
+      left: '2%',
+      top: '8%',
+      right: '10%',
+      bottom: '10%',
+      containLabel: true
+    },
+    legend: {
+      data: ['水位', '流量'],
+      top: '2%',
+      textStyle: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 10
+      },
+      itemWidth: 10,
+      itemHeight: 10,
+      selected: {
+        '水位': true,
+        '流量': false
+      },
+      selectedMode: 'single'
+    },
+    xAxis: {
+      type: 'category',
+      data: ['02-11 10:00', '02-11 16:00', '02-11 22:00', '02-12 04:00', '02-12 10:00'],
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(48, 220, 255, 0.6)'
+        }
+      },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 10
+      }
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 5.5,
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(48, 220, 255, 0.6)'
+        }
+      },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 10
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(48, 220, 255, 0.2)'
+        }
+      },
+      axisPointer: {
+        show: true
+      },
+      markLine: {
+        silent: true,
+        lineStyle: {
+          width: 1,
+          type: 'dashed'
+        },
+        symbol: 'none',
+        label: {
+          position: 'end',
+          distance: 10
+        },
+        data: [
+          {
+            yAxis: 3.32,
+            label: {
+              formatter: '警戒水位',
+              color: '#ffcc00'
+            },
+            lineStyle: {
+              color: '#ffcc00'
+            }
+          }
+        ]
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 20, 40, 0.9)',
+      borderColor: 'rgba(48, 220, 255, 0.5)',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    series: [
+      {
+        name: '水位',
+        type: 'line',
+        data: data.chartData,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          color: '#30dcff',
+          width: 2,
+          shadowColor: 'rgba(48, 220, 255, 0.6)',
+          shadowBlur: 10
+        },
+        itemStyle: {
+          color: '#30dcff',
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(48, 220, 255, 0.3)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(48, 220, 255, 0.1)'
+            }
+          ])
+        }
+      },
+      {
+        name: '流量',
+        type: 'line',
+        data: data.flowData,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          color: '#00ff88',
+          width: 2,
+          shadowColor: 'rgba(0, 255, 136, 0.6)',
+          shadowBlur: 10
+        },
+        itemStyle: {
+          color: '#00ff88',
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 255, 136, 0.3)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 255, 136, 0.1)'
+            }
+          ])
+        }
+      }
+    ]
+  }
+})
+
 // 水位过程线图表配置
 const waterLevelChartOption = ref({
   grid: {
@@ -577,7 +777,7 @@ const rainfallChartOption = ref({
   bottom: 0;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 10px;
   transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
   z-index: 4;
 }
@@ -793,7 +993,7 @@ const rainfallChartOption = ref({
   bottom: 0;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 10px;
   transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
   z-index: 4;
 }
@@ -940,34 +1140,74 @@ const rainfallChartOption = ref({
 
 .water-level-analysis-panel {
   height: 100%;
-  padding: 15px;
+  padding: 8px;
   box-sizing: border-box;
   background: rgba(0, 30, 60, 0.5);
   border-radius: 6px;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 6px;
+}
+
+.water-level-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 2px;
+  background: rgba(0, 100, 150, 0.3);
+  border-radius: 3px;
+  
+  .tab-item {
+    flex: 1;
+    padding: 3px 6px;
+    text-align: center;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: rgba(0, 50, 100, 0.5);
+    border: 1px solid rgba(48, 220, 255, 0.3);
+    
+    span {
+      font-size: 9px;
+      color: rgba(255, 255, 255, 0.8);
+    }
+    
+    &:hover {
+      background: rgba(0, 80, 120, 0.6);
+      border-color: rgba(48, 220, 255, 0.5);
+    }
+    
+    &.active {
+      background: rgba(48, 220, 255, 0.2);
+      border-color: rgba(48, 220, 255, 0.8);
+      box-shadow: 0 0 6px rgba(48, 220, 255, 0.3);
+      
+      span {
+        color: #30dcff;
+        font-weight: bold;
+      }
+    }
+  }
 }
 
 .water-level-data {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  gap: 8px;
-  padding: 10px;
+  gap: 4px;
+  padding: 6px;
   background: rgba(0, 100, 150, 0.3);
-  border-radius: 6px;
+  border-radius: 4px;
   
   .data-item {
     text-align: center;
     
     .data-label {
-      font-size: 11px;
+      font-size: 9px;
       color: rgba(255, 255, 255, 0.7);
-      margin-bottom: 4px;
+      margin-bottom: 1px;
     }
     
     .data-value {
-      font-size: 14px;
+      font-size: 11px;
       font-weight: bold;
       color: #30dcff;
       font-family: "D-DIN";
@@ -981,11 +1221,8 @@ const rainfallChartOption = ref({
 
 .water-level-chart {
   flex: 1;
-  height: 200px;
-  padding: 10px;
-  background: rgba(0, 100, 150, 0.2);
-  border-radius: 6px;
-  border: 1px solid rgba(48, 220, 255, 0.3);
+  min-height: 230px;
+  padding: 0;
   
   :deep(.echarts-container) {
     width: 100% !important;