流域总览页面添加出入库水量

src/views/OverviewView.vue

@@ -41,15 +41,14 @@
         <div class="card-header" @click="toggleDistrictRainfall">
           <h3 class="card-title">分区雨情</h3>
           <div class="header-actions">
+            <span class="update-time">{{ rainfallDateRange }}</span>
             <span class="toggle-btn">{{ districtRainfallExpanded ? '▼' : '▶' }}</span>
           </div>
         </div>
         <div v-if="districtRainfallExpanded" class="card-body">
           <div class="district-rainfall-content">
             <div class="rainfall-map-container">
-              <div class="rainfall-map-placeholder">
-                <div class="map-label">分区雨情示意图</div>
-              </div>
+              <img :src="rainfallMapImage" alt="连云港降雨分布图" class="rainfall-map-image">
             </div>
             <div class="rainfall-legend">
               <div class="legend-item">
@@ -86,7 +85,6 @@
         <div class="card-header" @click="toggleHeilinHydrology">
           <h3 class="card-title">黑林水文站实时水情</h3>
           <div class="header-actions">
-            <span class="update-time">{{ updateTimeStr }}</span>
             <span class="toggle-btn">{{ heilinHydrologyExpanded ? '▼' : '▶' }}</span>
           </div>
         </div>
@@ -165,6 +163,28 @@
           </div>
         </div>
       </div>
+      
+      <!-- 出入库水量数据卡片 -->
+      <div class="data-card mt-20">
+        <div class="card-header" @click="toggleInOutFlow">
+          <h3 class="card-title">出入库水量</h3>
+          <div class="header-actions">
+            <span class="toggle-btn">{{ inOutFlowExpanded ? '▼' : '▶' }}</span>
+          </div>
+        </div>
+        <div v-if="inOutFlowExpanded" class="card-body">
+          <div class="inout-charts-container">
+            <div class="chart-item-small">
+              <div class="chart-subtitle">入库水量</div>
+              <canvas id="inflowChart" width="150" height="170"></canvas>
+            </div>
+            <div class="chart-item-small">
+              <div class="chart-subtitle">出库水量</div>
+              <canvas id="outflowChart" width="150" height="170"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     
     <!-- 底部数据栏 -->
@@ -194,6 +214,7 @@
 <script>
 import DataCard from '../components/DataCard.vue'
 import * as echarts from 'echarts'
+import rainfallMapImage from '../assets/images/连云港降雨分布图.png'
 
 export default {
   name: 'OverviewView',
@@ -204,10 +225,12 @@ export default {
     return {
       currentTime: '',
       updateTimeStr: '',
+      rainfallDateRange: '',
       weatherForecastExpanded: true,
       districtRainfallExpanded: true,
       heilinHydrologyExpanded: true,
       xiaotaishanExpanded: true,
+      inOutFlowExpanded: true,
       xiaotaishanWarningDiff: -1.5,
       warningDiff: -2.0,
       monitoringData: [
@@ -220,13 +243,16 @@ export default {
       ],
       scrollPosition: 0,
       scrollInterval: null,
+      rainfallMapImage: rainfallMapImage,
       waterLevel24hChart: null,
       rainfall24hChart: null,
       flowChart: null,
       capacityChart: null,
       heilinWaterLevelChart: null,
       heilinFlowChart: null,
-      xiaotaishanCombinedChart: null
+      xiaotaishanCombinedChart: null,
+      inflowChart: null,
+      outflowChart: null
     }
   },
   mounted() {
@@ -234,6 +260,12 @@ export default {
     this.startScroll()
     setInterval(this.updateTime, 1000)
     
+    // 初始化雨情日期范围
+    const now = new Date()
+    const month = now.getMonth() + 1
+    const day = now.getDate()
+    this.rainfallDateRange = `${month}月${day}日至今`
+    
     // 延迟初始化图表，确保DOM已经渲染
     setTimeout(() => {
       this.initCharts()
@@ -278,6 +310,15 @@ export default {
         }, 100)
       }
     },
+    toggleInOutFlow() {
+      this.inOutFlowExpanded = !this.inOutFlowExpanded
+      if (this.inOutFlowExpanded) {
+        setTimeout(() => {
+          this.initInflowChart()
+          this.initOutflowChart()
+        }, 100)
+      }
+    },
     goToHydrologyForecast() {
       // 跳转到水文四预页面
       this.$emit('selectTab', '水文四预')
@@ -302,6 +343,10 @@ export default {
       this.initHeilinFlowChart()
       // 初始化小塔山水库水位和库容组合图
       this.initXiaotaishanCombinedChart()
+      // 初始化入库水量饼图
+      this.initInflowChart()
+      // 初始化出库水量饼图
+      this.initOutflowChart()
       
       // 初始化24h水位变化趋势图（核心监测卡片中）
       if (document.getElementById('waterLevel24hChart')) {
@@ -564,7 +609,8 @@ export default {
         const capacityOption = {
           animation: false,
           tooltip: {
-            trigger: 'item'
+            trigger: 'item',
+            formatter: '{b}: {c}万m³ ({d}%)'
           },
           legend: {
             orient: 'vertical',
@@ -643,6 +689,12 @@ export default {
       if (this.xiaotaishanCombinedChart) {
         this.xiaotaishanCombinedChart.dispose()
       }
+      if (this.inflowChart) {
+        this.inflowChart.dispose()
+      }
+      if (this.outflowChart) {
+        this.outflowChart.dispose()
+      }
     },
     initXiaotaishanCombinedChart() {
       if (document.getElementById('xiaotaishanCombinedChart')) {
@@ -654,12 +706,6 @@ export default {
           animation: false,
           tooltip: {
             trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-              label: {
-                backgroundColor: '#6a7985'
-              }
-            },
             formatter: function(params) {
               let result = params[0].axisValue + '<br/>';
               params.forEach(function(item) {
@@ -680,7 +726,7 @@ export default {
             left: '3%',
             right: '4%',
             bottom: '15%',
-            top: '5%',
+            top: '15%',
             containLabel: true
           },
           xAxis: [
@@ -979,6 +1025,204 @@ export default {
         }
         this.heilinFlowChart.setOption(heilinFlowOption)
       }
+    },
+    initInflowChart() {
+      if (document.getElementById('inflowChart')) {
+        if (this.inflowChart) {
+          this.inflowChart.dispose()
+        }
+        this.inflowChart = echarts.init(document.getElementById('inflowChart'))
+        const inflowOption = {
+          animation: false,
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c}万m³ ({d}%)'
+          },
+          legend: {
+            orient: 'horizontal',
+            bottom: 8,
+            textStyle: {
+              color: '#7bbef6',
+              fontSize: 9
+            },
+            itemGap: 8,
+            itemWidth: 8,
+            itemHeight: 8
+          },
+          grid: {
+            top: 10,
+            bottom: 10,
+            left: 60,
+            right: 10
+          },
+          series: [
+            {
+              name: '入库水量',
+              type: 'pie',
+              radius: ['35%', '60%'],
+              center: ['50%', '32%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderColor: 'rgba(0, 30, 60, 0.6)',
+                borderWidth: 1.5
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 11,
+                  fontWeight: 'bold',
+                  color: '#e0fcff',
+                  formatter: '{b}\n{c}万m³'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                {
+                  value: 450,
+                  name: '降雨径流入库',
+                  itemStyle: {
+                    color: '#62f6fb'
+                  }
+                },
+                {
+                  value: 380,
+                  name: '上游河道来水',
+                  itemStyle: {
+                    color: '#00d4ff'
+                  }
+                },
+                {
+                  value: 180,
+                  name: '地下水补给',
+                  itemStyle: {
+                    color: '#38bdf8'
+                  }
+                },
+                {
+                  value: 120,
+                  name: '其他调水入库',
+                  itemStyle: {
+                    color: 'rgba(123, 190, 246, 0.5)'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+        this.inflowChart.setOption(inflowOption)
+      }
+    },
+    initOutflowChart() {
+      if (document.getElementById('outflowChart')) {
+        if (this.outflowChart) {
+          this.outflowChart.dispose()
+        }
+        this.outflowChart = echarts.init(document.getElementById('outflowChart'))
+        const outflowOption = {
+          animation: false,
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c}万m³ ({d}%)'
+          },
+          legend: {
+            orient: 'horizontal',
+            bottom: 8,
+            textStyle: {
+              color: '#7bbef6',
+              fontSize: 9
+            },
+            itemGap: 8,
+            itemWidth: 8,
+            itemHeight: 8
+          },
+          grid: {
+            top: 10,
+            bottom: 10,
+            left: 60,
+            right: 10
+          },
+          series: [
+            {
+              name: '出库水量',
+              type: 'pie',
+              radius: ['35%', '60%'],
+              center: ['50%', '32%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderColor: 'rgba(0, 30, 60, 0.6)',
+                borderWidth: 1.5
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 11,
+                  fontWeight: 'bold',
+                  color: '#e0fcff',
+                  formatter: '{b}\n{c}万m³'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                {
+                  value: 220,
+                  name: '工业供水',
+                  itemStyle: {
+                    color: '#f97316'
+                  }
+                },
+                {
+                  value: 300,
+                  name: '农业灌溉用水',
+                  itemStyle: {
+                    color: '#eab308'
+                  }
+                },
+                {
+                  value: 120,
+                  name: '发电用水',
+                  itemStyle: {
+                    color: '#84cc16'
+                  }
+                },
+                {
+                  value: 80,
+                  name: '生态流量下放',
+                  itemStyle: {
+                    color: '#22c55e'
+                  }
+                },
+                {
+                  value: 50,
+                  name: '泄洪/排沙',
+                  itemStyle: {
+                    color: '#ef4444'
+                  }
+                },
+                {
+                  value: 30,
+                  name: '蒸发渗漏损失',
+                  itemStyle: {
+                    color: 'rgba(123, 190, 246, 0.3)'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+        this.outflowChart.setOption(outflowOption)
+      }
     }
   }
 }
@@ -1559,13 +1803,10 @@ export default {
   justify-content: center;
 }
 
-.rainfall-map-placeholder {
-  text-align: center;
-  color: #7bbef6;
-}
-
-.map-label {
-  font-size: 14px;
+.rainfall-map-image {
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
 }
 
 .rainfall-legend {
@@ -1697,4 +1938,26 @@ export default {
   margin-bottom: 6px;
   text-align: left;
 }
+
+.inout-charts-container {
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.chart-item-small {
+  flex: 1;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.chart-subtitle {
+  color: #7bbef6;
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 4px;
+  text-align: center;
+}
 </style>