水文预报页面修改

src/components/HydrologySimulationPanel.vue

@@ -82,17 +82,261 @@
           </div>
         </div>
       </div>
+
+      <div class="data-card mt-20">
+        <div class="card-header">
+          <h3 class="card-title">水库调度情景预报</h3>
+        </div>
+        <div class="card-body">
+          <div class="chart-box">
+            <canvas id="scenarioComparisonChart" width="300" height="120"></canvas>
+          </div>
+          <div class="chart-box mt-10">
+            <canvas id="scenarioBarChart" width="300" height="120"></canvas>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import DataCard from './DataCard.vue'
+import * as echarts from 'echarts'
 
 export default {
   name: 'HydrologySimulationPanel',
   components: {
     DataCard
+  },
+  data() {
+    return {
+      scenarioComparisonChart: null,
+      scenarioBarChart: null
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.initCharts()
+    }, 100)
+  },
+  beforeUnmount() {
+    this.destroyCharts()
+  },
+  methods: {
+    initCharts() {
+      this.initScenarioComparisonChart()
+      this.initScenarioBarChart()
+    },
+    destroyCharts() {
+      if (this.scenarioComparisonChart) {
+        this.scenarioComparisonChart.dispose()
+      }
+      if (this.scenarioBarChart) {
+        this.scenarioBarChart.dispose()
+      }
+    },
+    initScenarioComparisonChart() {
+      if (document.getElementById('scenarioComparisonChart')) {
+        if (this.scenarioComparisonChart) {
+          this.scenarioComparisonChart.dispose()
+        }
+        this.scenarioComparisonChart = echarts.init(document.getElementById('scenarioComparisonChart'))
+        const option = {
+          animation: false,
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['常规调度', '优化调度', '应急调度'],
+            textStyle: {
+              color: '#7bbef6',
+              fontSize: 9
+            },
+            bottom: '0%'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '20%',
+            top: '10%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['00:00', '06:00', '12:00', '18:00', '次日00:00'],
+            axisLine: {
+              lineStyle: {
+                color: '#7bbef6'
+              }
+            },
+            axisLabel: {
+              color: '#7bbef6',
+              fontSize: 10
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: '水位(m)',
+            nameTextStyle: {
+              color: '#7bbef6',
+              fontSize: 10
+            },
+            min: 16,
+            max: 22,
+            axisLine: {
+              lineStyle: {
+                color: '#7bbef6'
+              }
+            },
+            axisLabel: {
+              color: '#7bbef6',
+              fontSize: 10
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(123, 190, 246, 0.2)'
+              }
+            }
+          },
+          series: [
+            {
+              name: '常规调度',
+              type: 'line',
+              data: [18.2, 18.3, 18.5, 18.6, 18.5],
+              lineStyle: {
+                color: '#62f6fb',
+                width: 2
+              },
+              itemStyle: {
+                color: '#62f6fb'
+              }
+            },
+            {
+              name: '优化调度',
+              type: 'line',
+              data: [18.2, 18.4, 18.7, 18.8, 18.6],
+              lineStyle: {
+                color: '#ffd93d',
+                width: 2
+              },
+              itemStyle: {
+                color: '#ffd93d'
+              }
+            },
+            {
+              name: '应急调度',
+              type: 'line',
+              data: [18.2, 18.5, 19.0, 19.2, 18.8],
+              lineStyle: {
+                color: '#f97316',
+                width: 2
+              },
+              itemStyle: {
+                color: '#f97316'
+              }
+            }
+          ]
+        }
+        this.scenarioComparisonChart.setOption(option)
+      }
+    },
+    initScenarioBarChart() {
+      if (document.getElementById('scenarioBarChart')) {
+        if (this.scenarioBarChart) {
+          this.scenarioBarChart.dispose()
+        }
+        this.scenarioBarChart = echarts.init(document.getElementById('scenarioBarChart'))
+        const option = {
+          animation: false,
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            data: ['常规调度', '优化调度', '应急调度'],
+            textStyle: {
+              color: '#7bbef6',
+              fontSize: 9
+            },
+            bottom: '0%'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '20%',
+            top: '10%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: ['最高水位', '最大泄洪', '总弃水'],
+            axisLine: {
+              lineStyle: {
+                color: '#7bbef6'
+              }
+            },
+            axisLabel: {
+              color: '#7bbef6',
+              fontSize: 10
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: '数值',
+            nameTextStyle: {
+              color: '#7bbef6',
+              fontSize: 10
+            },
+            min: 0,
+            axisLine: {
+              lineStyle: {
+                color: '#7bbef6'
+              }
+            },
+            axisLabel: {
+              color: '#7bbef6',
+              fontSize: 10
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(123, 190, 246, 0.2)'
+              }
+            }
+          },
+          series: [
+            {
+              name: '常规调度',
+              type: 'bar',
+              data: [18.6, 45, 32],
+              itemStyle: {
+                color: '#62f6fb'
+              }
+            },
+            {
+              name: '优化调度',
+              type: 'bar',
+              data: [18.8, 52, 25],
+              itemStyle: {
+                color: '#ffd93d'
+              }
+            },
+            {
+              name: '应急调度',
+              type: 'bar',
+              data: [19.2, 65, 18],
+              itemStyle: {
+                color: '#f97316'
+              }
+            }
+          ]
+        }
+        this.scenarioBarChart.setOption(option)
+      }
+    }
   }
 }
 </script>
@@ -278,4 +522,16 @@ export default {
   font-weight: bold;
   text-align: center;
 }
+
+.chart-box {
+  padding: 0;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
 </style>