energy_storage/web/src/views/predict.vue

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

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

<script>
import predictEcharts from '@/components/predict/predictEcharts.vue';
export default {
  name: '',
  components: {predictEcharts},
  props: {},
  data() {
    return {
      chartOptions:[ {
        title: '储能充放电预测',
        type: 'line',
        smooth:false,
        dataKey: 'chargeDischarge',
        infoKeys: [
     
          {
            key: 'key1',
            label: '电压',
            seriesOptions:{
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#00FDF9' // 充电电量线条颜色
              },
              lineStyle: {
                color: '#00FDF9' // 充电电量线条颜色
              }
            }
            
          },
          {
            key: 'key2',
            label: '电流',
           
            seriesOptions:{
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#3E7EEF' // 充电电量线条颜色
              },
              lineStyle: {
                color: '#3E7EEF' // 充电电量线条颜色
              }
            }
          }
        ]
      },
      {
        
        title: '充电负荷预测',
        type: 'line',
        smooth:false,
        dataKey: 'chargeDischarge',
        infoKeys: [
     
          {
            key: 'key1',
            label: '电压',
            seriesOptions:{
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#00FDF9' // 充电电量线条颜色
              },
              lineStyle: {
                color: '#00FDF9' // 充电电量线条颜色
              }
            }
            
          },
          {
            key: 'key2',
            label: '电流',
           
            seriesOptions:{
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#3E7EEF' // 充电电量线条颜色
              },
              lineStyle: {
                color: '#3E7EEF' // 充电电量线条颜色
              }
            }
          }
        ]
      },
      {
        
        title: '光伏发电预测',
        type: 'line',
        smooth:false,
        dataKey: 'chargeDischarge',
        infoKeys: [
     
          {
            key: 'key1',
            label: '电压',
            seriesOptions:{
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#00FDF9' // 充电电量线条颜色
              },
              lineStyle: {
                color: '#00FDF9' // 充电电量线条颜色
              }
            }
            
          },
          {
            key: 'key2',
            label: '电流',
           
            seriesOptions:{
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#3E7EEF' // 充电电量线条颜色
              },
              lineStyle: {
                color: '#3E7EEF' // 充电电量线条颜色
              }
            }
          }
        ]
      },
      ],
     
      chartData: [
        {
          date: '2025-08-30',
          key1: 10,
          key2: 10,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-29',
          key1: 8,
          key2: 5,
          key3: 5,
          key4: 7
        },
        {
          date: '2025-08-28',
          key1: 10,
          key2: 10,
          key3: 20,
          key4: 4
        },
        {
          date: '2025-08-27',
          key1: 10,
          key2: 10,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-26',
          key1: 10,
          key2: 5,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-25',
          key1: 10,
          key2: 5,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-24',
          key1: 10,
          key2: 6,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-23',
          key1: 10,
          key2: 7,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-22',
          key1: 10,
          key2: 0,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-21',
          key1: 10,
          key2: 0,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-20',
          key1: 10,
          key2: 0,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-19',
          key1: 10,
          key2: 0,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-18',
          key1: 10,
          key2: 0,
          key3: 15,
          key4: 5
        },
        {
          date: '2025-08-17',
          key1: 10,
          key2: 0,
          key3: 15,
          key4: 5
        }
      ],
        
      
    }
  },
  mounted() {},
  methods: {}
}
</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>