修改圩区页面圩区工情

src/views/waterStation/index.vue

@@ -114,23 +114,31 @@
             </div>
           </m-card>
           
-          <!-- 代表站水位排序 -->
-          <m-card title="代表站水位排序" class="water-station-card water-station-card-bottom" :width="398" :height="480">
-            <div class="station-ranking-panel">
-              <div class="ranking-table">
-                <div class="ranking-row header">
-                  <div class="ranking-cell">区镇</div>
-                  <div class="ranking-cell">站名</div>
-                  <div class="ranking-cell">水位(m)</div>
-                  <div class="ranking-cell">时间</div>
-                </div>
-                <div class="ranking-row" v-for="(station, index) in stationRanking" :key="index">
-                  <div class="ranking-cell">{{ station.district }}</div>
-                  <div class="ranking-cell">{{ station.name }}</div>
-                  <div class="ranking-cell">{{ station.level }}</div>
-                  <div class="ranking-cell">{{ station.time }}</div>
+          <!-- 圩区工情 -->
+          <m-card title="圩区工情" class="water-station-card water-station-card-bottom" :width="398" :height="480">
+            <div class="polder-work-status-panel">
+              <!-- 泵站启闭情况卡片 -->
+              <div class="pump-status-cards">
+                <div class="pump-status-card" v-for="(pump, index) in pumpStatus" :key="index">
+                  <div class="pump-name">{{ pump.name }}</div>
+                  <div class="pump-status" :class="{ 'status-active': pump.status === '运行中', 'status-inactive': pump.status === '停止' }">
+                    {{ pump.status }}
+                  </div>
+                  <div class="pump-flow">{{ pump.flow }}</div>
                 </div>
               </div>
+              
+              <!-- 开泵流量折线图 -->
+              <div class="flow-chart-container">
+                <h4 class="chart-title">开泵流量</h4>
+                <VChart ref="flowChart" :option="pumpFlowChartOption" :autoresize="true" style="width: 100%; height: 140px;" />
+              </div>
+              
+              <!-- 日排水量柱状图 -->
+              <div class="discharge-chart-container">
+                <h4 class="chart-title">日排水量</h4>
+                <VChart ref="dischargeChart" :option="dailyDischargeChartOption" :autoresize="true" style="width: 100%; height: 140px;" />
+              </div>
             </div>
           </m-card>
         </div>
@@ -328,6 +336,170 @@ const stationRanking = ref([
   { district: '淀山湖镇', name: '清水湾', level: '2.52', time: '02-12 10:05' }
 ])
 
+// 泵站状态数据
+const pumpStatus = ref([
+  { name: '泵站1', status: '运行中', flow: '8.5 m³/s' },
+  { name: '泵站2', status: '停止', flow: '0 m³/s' }
+])
+
+// 开泵流量图表配置
+const pumpFlowChartOption = ref({
+  grid: {
+    left: '2%',
+    top: '15%',
+    right: '5%',
+    bottom: '15%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 9
+    },
+    boundaryGap: true
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 9,
+      formatter: '{value} m³/s'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.2)'
+      }
+    }
+  },
+  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: [5.2, 7.8, 8.5, 8.2, 7.9, 8.5],
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 6,
+      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)'
+          }
+        ])
+      }
+    }
+  ]
+})
+
+// 日排水量图表配置
+const dailyDischargeChartOption = ref({
+  grid: {
+    left: '2%',
+    top: '15%',
+    right: '5%',
+    bottom: '15%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日'],
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 9,
+      rotate: 30
+    },
+    boundaryGap: true
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 9,
+      formatter: '{value} 万m³'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.2)'
+      }
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  series: [
+    {
+      name: '排水量',
+      type: 'bar',
+      barWidth: '40%',
+      data: [12.5, 15.8, 18.2, 16.5, 17.3],
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgba(48, 220, 255, 0.8)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(48, 220, 255, 0.3)'
+          }
+        ]),
+        shadowColor: 'rgba(48, 220, 255, 0.6)',
+        shadowBlur: 10
+      }
+    }
+  ]
+})
+
 // 当前选中的水位标签
 const currentWaterLevelTab = ref('inner')
 
@@ -363,10 +535,10 @@ const currentWaterLevelChartOption = computed(() => {
   const data = currentWaterLevelTab.value === 'inner' ? innerWaterLevelData : outerWaterLevelData
   return {
     grid: {
-      left: '2%',
-      top: '8%',
+      left: '4%',
+      top: '12%',
       right: '10%',
-      bottom: '10%',
+      bottom: '13%',
       containLabel: true
     },
     legend: {
@@ -395,12 +567,13 @@ const currentWaterLevelChartOption = computed(() => {
       axisLabel: {
         color: 'rgba(255, 255, 255, 0.8)',
         fontSize: 10
-      }
+      },
+      boundaryGap: false
     },
     yAxis: {
       type: 'value',
       min: 0,
-      max: 5.5,
+      max: 5,
       axisLine: {
         lineStyle: {
           color: 'rgba(48, 220, 255, 0.6)'
@@ -1223,7 +1396,7 @@ const rainfallChartOption = ref({
 
 .water-level-chart {
   flex: 1;
-  min-height: 230px;
+  min-height: 240px;
   padding: 0;
   
   :deep(.echarts-container) {
@@ -1354,6 +1527,80 @@ const rainfallChartOption = ref({
   }
 }
 
+.polder-work-status-panel {
+  height: 100%;
+  padding: 6px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.pump-status-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.pump-status-card {
+  background: rgba(0, 100, 150, 0.3);
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  border-radius: 4px;
+  padding: 6px;
+  text-align: center;
+  
+  .pump-name {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 4px;
+  }
+  
+  .pump-status {
+    font-size: 12px;
+    font-weight: bold;
+    margin-bottom: 2px;
+    
+    &.status-active {
+      color: #00ff88;
+      text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
+    }
+    
+    &.status-inactive {
+      color: #ff6b6b;
+    }
+  }
+  
+  .pump-flow {
+    font-size: 10px;
+    color: #30dcff;
+  }
+}
+
+.flow-chart-container,
+.discharge-chart-container {
+  flex: 1;
+  background: rgba(0, 100, 150, 0.2);
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  border-radius: 4px;
+  padding: 4px;
+  min-height: 160px;
+  
+  .chart-title {
+    font-size: 9px;
+    color: #30dcff;
+    margin-bottom: 2px;
+    text-align: center;
+    font-weight: bold;
+  }
+  
+  :deep(.echarts-container) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
 .polder-layer-controls {
   position: absolute;
   right: 20px;