energy_storage/web/src/views/predict.vue

<template>
  <div class="predict">
    <div class="top">
        <predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData" ref="chartRef1"/>
    </div>
    <div class="bottom">
        <div class="item">
            <predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData" ref="chartRef2"/>
        </div>
        <div class="item">
            <predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData" ref="chartRef3"/>
        </div>

    </div>
  </div>
</template>

<script>
import predictEcharts from '@/components/predict/predictEcharts.vue';
import {getReq,postReq} from '@/request/api.js';
export default {
  name: '',
  components: {predictEcharts},
  props: {},
  data() {
    return {
      chartOptions:[ 
        {
          title: '储能充放电预测',
          type: 'line',
          smooth:false,
          dataKey: 'chargeDischarge',
          infoKeys: [
     
            {
              key: 'W_store_in',
              label: '充电电量',
              seriesOptions:{
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                  color: '#00FDF9' // 充电电量线条颜色
                },
                lineStyle: {
                  color: '#00FDF9' // 充电电量线条颜色
                }
              }
            
            },
            {
              key: 'W_store_ou',
              label: '储能放电电量',
              seriesOptions:{
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                  color: '#3E7EEF' // 充电电量线条颜色
                },
                lineStyle: {
                  color: '#3E7EEF' // 充电电量线条颜色
                }
              }
            }
          ]
        },
        {
        
          title: '充电负荷预测',
          type: 'line',
          smooth:false,
          dataKey: 'chargeDischarge',
          infoKeys: [
     
            {
              key: 'W_charge',
              label: '运行负荷',
              seriesOptions:{
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                  color: '#00FDF9' // 充电电量线条颜色
                },
                lineStyle: {
                  color: '#00FDF9' // 充电电量线条颜色
                }
              }
            
            },
            
          ]
        },
        {
        
          title: '光伏发电预测',
          type: 'line',
          smooth:false,
          dataKey: 'chargeDischarge',
          infoKeys: [
     
            {
              key: 'P_solar',
              label: '发电功率',
              seriesOptions:{
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                  color: '#3F80F2' // 充电电量线条颜色
                },
                lineStyle: {
                  color: '#3F80F2' // 充电电量线条颜色
                }
              }
            
            },
            {
              key: 'W_solar',
              label: '发电量',
           
              seriesOptions:{
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                  color: '#7747E8' // 充电电量线条颜色
                },
                lineStyle: {
                  color: '#7747E8' // 充电电量线条颜色
                }
              }
            }
          ]
        },
      ],
     
      chartData: {
        xdata:[],
        ydata:{}
      }
        
      
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getData()
    })
    
  },
  methods: {
    generateTimePoints() {
      const timePoints = []

      for (let hour = 0; hour <= 24; hour++) {
        for (let minute = 0; minute < 60; minute += 10) {
          // 处理24:00的特殊情况
          if (hour === 24 && minute === 0) {
            timePoints.push('24:00')
            break
          }

          // 格式化小时和分钟，确保两位数
          const formattedHour = hour.toString().padStart(2, '0')
          const formattedMinute = minute.toString().padStart(2, '0')

          timePoints.push(`${formattedHour}:${formattedMinute}`)
        }
      }

      return timePoints
    },
    async  getData(){
      try {
        const res=await getReq('/queryPredictionDetail')
        this.chartData.ydata=res.data
        this.chartData.xdata = this.generateTimePoints()
        
        this.$refs.chartRef1.initCharts()
        this.$refs.chartRef2.initCharts()
        this.$refs.chartRef3.initCharts()

      } catch (error) {
        console.log(error);
        
        
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.predict {
  width: 100%;
  height: 100%;
  background: $bg1-color;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .top,
  .bottom {
    flex: 1;
    width: 100%;
    height: calc(50% - 10px);

  }
  .bottom {
    display: flex;
  }
  .top{
    background-color: rgba(33, 105, 195, 0.12);
    padding: 20px 5px;
     border-radius: 15px;
  }
  .item{
    background-color: rgba(33, 105, 195, 0.12);
    padding: 20px 5px;
    flex: 1;
     border-radius: 15px;

    &:nth-child(2){
        margin-left: 20px;
    }
  }
}
</style>