cpp/cpp-ui/src/views/statistics/predictedPowerGeneration/index.vue

<template>
  <div class="app-container">
    <el-form :inline="true" size="small" class="dark-el-input dark-el-button">
      <el-form-item label="生成日期" prop="startTime">
        <el-date-picker
          popper-class="cpp-popper"
          v-model="dateTime"
          :clearable="false"
          type="date"
          value-format="timestamp"
          placeholder="选择开始日期"
          style="width: 255px"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="场站名称">
        <el-select v-model="stationCode" placeholder="请选择" style="width: 255px" popper-class="cpp-popper" filterable>
          <el-option
            v-for="item in stationList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search"
                   @click="queryByStationCode">查询
        </el-button>
      </el-form-item>
    </el-form>
    <div style="padding-top: 20px">
      <el-row :gutter="24">
        <el-col :span="6">
          <vxe-table
            ref="xTable"
            align="center"
            class="mytable-style"
            auto-resize
            border
            resizable
            export-config
            highlight-current-row
            show-overflow
            max-height="700"
            :loading="loading"
            :data="tableData">
            <vxe-table-column field="time" title="预测日期"></vxe-table-column>
            <vxe-table-column field="forecastPowerGenerationZd" title="站端上传"></vxe-table-column>
            <vxe-table-column field="forecastPowerGenerationYd" title="中心预测"></vxe-table-column>
          </vxe-table>
        </el-col>
        <el-col :span="18">
          <div style="width: 100%;height:600px" id="contrastCharts"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script>
import * as echarts from "echarts";

export default {
  name: 'predictedPowerGeneration',
  data() {
    return {
      dateTime: new Date(new Date().toLocaleDateString()).getTime(),
      stationList: [],
      stationCode: '',
      stationName: undefined,
      tableData: [],
      loading: false,
      predictionDataSource: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      contrastChart: null,
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date()
        }
      },
    }
  },
  created() {
    this.getStationCode()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.contrastChart) {
      this.contrastChart.dispose()
      this.contrastChart = null
    }
  },
  computed: {},
  methods: {
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      if (this.pageSize != pageSize) {
        this.changePageSize(pageSize)
      }
      this.pageSize = pageSize
    },
    getStationCode() {
      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
          this.queryByStationCode()
        }
      })
    },
    queryByStationCode() {
      let genDate = this.dateTime
      const param = {
        "stationCode": this.stationCode,
        "genDate": genDate,
        "predictionDataSource": this.predictionDataSource
      }
      this.$axios.get('/dayPowerGeneration/getList', {params: param}).then(response => {
        this.loading = true
        this.tableData = response.data
        this.total = this.tableData.length
        this.loading = false
        var times = []
        var yd = []
        var zd = []
        for (let i = 0; i < this.tableData.length; i++) {
          times.push(this.tableData[i].time);
          yd.push(this.tableData[i].forecastPowerGenerationYd);
          zd.push(this.tableData[i].forecastPowerGenerationZd);
        }
        this.contrastDraw(times, zd, yd)
      })
    },
    contrastDraw(times, zd, yd) {
      this.loading = true

      this.contrastChart = echarts.init(document.getElementById('contrastCharts'), "dark", {renderer: 'svg'})

      var option = {
        backgroundColor: 'transparent',
        title: {
          text: '发电量变化',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: [{
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['站端上传', '中心预测'],
          right: '4%',
          textStyle: {
            fontSize: 12,
          }
        }],
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: times,
          // axisLabel: {
          //   formatter: '{value}',
          //   hideOverlap: true
          // },

        },
        yAxis: [{
          type: 'value',
          name: '万(kWh)',
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [
          {
            name: '站端上传',
            type: 'bar',
            data: zd,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: '#ff8200',
                // borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            }
          },
          {
            name: '中心预测',
            type: 'bar',
            data: yd,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {

                color: '#EE82EE',
                // borderColor: 'rgba(87,219,50,0.2)',
                borderWidth: 12
              }
            }
          }
        ]
      }

      this.contrastChart.setOption(option, true)
      this.loading = false
      var _this = this
      window.addEventListener("resize", function () {
        _this.contrastChart.resize();
      });
    },
  }
}
</script>

<style scoped>
</style>