ipp-tl/ipp-ap/src/views/idp/data/forecastpowerdata/index.vue

<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <div class="filter">
      <div class="startTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;起始时间:</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="endTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;截止时间:</span>
        <el-date-picker
          v-model="endTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div style="display: inline-block">
        <span style="font-weight: bold;font-size: 14px">&#12288;场站名称：</span>
        <el-select style="width:250px" v-model="stationCode" size="small" @change="getManufactor">
          <el-option
            v-for="item in stationList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6;font-size: 13px">{{ item.value }}</span>
          </el-option>
        </el-select>
      </div>
      &nbsp;
      <div style="display: inline-block">
        <span style="font-weight: bold;font-size: 14px">&#12288;预测厂家：</span>
        <el-select style="width:250px" clearable v-model="forecastManufactor" size="small">
          <el-option
            v-for="item in forecastManufactorList"
            :key="item.sign"
            :label="item.name"
            :value="item.sign">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6;font-size: 13px">{{ item.sign }}</span>
          </el-option>
        </el-select>
      </div>
      <div style="display: inline-block">
        <span style="font-weight: bold;font-size: 14px">&#12288;短期预测点位：</span>
        <el-select style="width:150px" v-model="dqQueryPoint" size="small">
          <el-option
            v-for="item in dqPoint"
            :key="item.label"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="display: inline-block">
        <span style="font-weight: bold;font-size: 14px">&#12288;超短期预测点位：</span>
        <el-select style="width:150px" v-model="cdqQueryPoint" size="small">
          <el-option
            v-for="item in cdqPoint"
            :key="item.label"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="timeQuery" style="display: inline-block">
        &#12288;<el-button size="small" :loading="loading" @click="getCompositeData">查询</el-button>
      </div>
    </div>
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="图表" name="first">
        <div style="width: 100%; height: calc(80vh - 50px)" id="echarts"></div>
      </el-tab-pane>
      <el-tab-pane label="表格" name="second">
        <vxe-table
          align="center"
          :loading="loading"
          ref="xTable"
          auto-resize
          border
          resizable
          highlight-current-row
          show-overflow
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        >
          <vxe-table-column
            v-for="(item, index) in fromHead"
            :key="index"
            align="center"
            :title="item.label"
            :field="item.field"
          ></vxe-table-column>

        </vxe-table>
        <vxe-pager
          perfect
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :total="total"
          :page-sizes=[10,50,100]
          :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getStation,
  getCapacity,
  // getForecastManufactor,
  getCompositeData
} from '@/api/forecastpowerultrashortterm'
import {tableOption} from '@/const/crud/forecastpowerultrashortterm'
import {mapGetters} from 'vuex'
import * as echarts from 'echarts';
import {getManufactorByStationCode} from '@/api/forecastmanufactor'
import cc from '../../../curvecolors'

export default {
  name: 'forecastpowerultrashortterm',
  data() {
    return {
      cdqPoint: [
        {
          value: 0,
          label: '实时超短期'
        }, {
        value: 1,
        label: '1'
      }, {
        value: 2,
        label: '2'
      }, {
        value: 3,
        label: '3'
      }, {
        value: 4,
        label: '4'
      }, {
        value: 5,
        label: '5'
      }, {
        value: 6,
        label: '6'
      }, {
        value: 7,
        label: '7'
      }, {
        value: 8,
        label: '8'
      }, {
        value: 9,
        label: '9'
      }, {
        value: 10,
        label: '10'
      }, {
        value: 11,
        label: '11'
      }, {
        value: 12,
        label: '12'
      }, {
        value: 13,
        label: '13'
      }, {
        value: 14,
        label: '14'
      }, {
        value: 15,
        label: '15'
      }, {
        value: 16,
        label: '16'
      }],
      dqPoint: [
        {
          value: 0,
          label: '实时短期'
        }, {
          value: 1,
          label: '1'
        }, {
          value: 2,
          label: '2'
        }, {
          value: 3,
          label: '3'
        }, {
          value: 4,
          label: '4'
        }, {
          value: 5,
          label: '5'
        }, {
          value: 6,
          label: '6'
        }, {
          value: 7,
          label: '7'
        }, {
          value: 8,
          label: '8'
        }, {
          value: 9,
          label: '9'
        }, {
          value: 10,
          label: '10'
        }, {
          value: 11,
          label: '11'
        }, {
          value: 12,
          label: '12'
        }, {
          value: 13,
          label: '13'
        }, {
          value: 14,
          label: '14'
        }, {
          value: 15,
          label: '15'
        }],
      cdqQueryPoint: 0,
      dqQueryPoint: 0,
      searchForm: {},
      tableData: [],

      total: 0, // 总页数
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示多少条

      tableLoading: false,
      tableOption: tableOption,
      startTime: new Date(new Date().toLocaleDateString()).getTime(),
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
      stationCode: '',
      stationList: [],
      forecastManufactor: '',
      forecastManufactorList: [],
      drawData: {datas: [], times: []},
      resizeKey: 1,
      activeName: 'first',
      loading: false,
      ultraShortData: [],
      shortData: [],
      powerStationStatusData: [],
      timeStamp: [],
      arrays: [],
      fromHead: []
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  mounted() {
    this.getStationCode()
    // this.getForecastManufactor(this.page)
    // this.draw()
  },
  methods: {
    draw(timeaxis, realpower, shortPower, ultraShortPower, cap,nwp,cft) {
      this.arrays = []
      this.arrays.push({
        name: '实际功率',
        type: 'line',
        smooth: true,
        showSymbol:false,
        symbolSize: 5,
        data: realpower,
        itemStyle: {
          color: 'red'
        }
      });
      let _this = this

      let tempDqLineColor = 1
      for (let item in shortPower[0]) {
        _this.arrays.push({
          name: item + '短期',
          type: 'line',
          smooth: true,
          showSymbol:false,
          symbolSize: 5,
          data: shortPower[0][item],
          itemStyle: {
            color: cc["dq"+tempDqLineColor]
          }
        });
        tempDqLineColor=tempDqLineColor+1
      }

      let tempCdqLineColor = 1
      for (let item in ultraShortPower[0]) {
        _this.arrays.push({
          name: item + '超短期',
          type: 'line',
          smooth: true,
          showSymbol:false,
          symbolSize: 5,
          data: ultraShortPower[0][item],
          itemStyle: {
            color: cc["cdq"+tempCdqLineColor]
          }
        });
        tempCdqLineColor = tempCdqLineColor+1
      }

      this.chart = echarts.init(document.getElementById('echarts'))
      const option = {
        backgroundColor: 'transparent',
        title: {
          top: 20,
          text: '预测数据查询',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#040606'
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation:false,
            lineStyle: {
              color: '#040606'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          // data: ['实际功率', '短期数据', '超短期数据'],
          right: '4%',
          textStyle: {
            fontSize: 12
          }
        },
        dataZoom: [
          {
            startValue: ''
          },
          {
            type: 'inside'
          }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#040606'
            }
          },
          data: timeaxis
        }],
        yAxis: [{
          type: 'value',
          name: '(MW)',
          max:cap,
          min:0,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#040606'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: this.arrays
      };


      option.yAxis.push({
        type: 'value',
        name: '(m/s)',
        min: 0,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#4fe512'
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14
          }
        },
        splitLine: {
          lineStyle: {
            color: '#666633'
          }
        }
      })

      option.series.push({
        yAxisIndex: 1,
        name: '中心侧NWP轮毂风速',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 2
          }
        },
        itemStyle: {
          normal: {
            color: cc.lggdfs,
            borderColor: 'rgba(201,209,210,0.2)',
            borderWidth: 12
          }
        },
        data: nwp
      })

      option.series.push({
        yAxisIndex: 1,
        name: '测风塔轮毂风速',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 2
          }
        },
        itemStyle: {
          normal: {
            color: cc.line24,
            borderColor: 'rgba(201,209,210,0.2)',
            borderWidth: 12
          }
        },
        data: cft
      })
      // option.legend.data.push('中心侧NWP')


      this.chart.setOption(option, true)
    },
    getManufactor(val) {
      this.forecastManufactorList = []
      this.forecastManufactor = []
      getManufactorByStationCode(val).then(response => {
        this.forecastManufactorList = response.data.data
        if (this.forecastManufactorList != '') {
          this.forecastManufactor = this.forecastManufactorList[0].sign;
        }
        this.tableLoading = false
      })
    },
    getCompositeData() {
      const param = new URLSearchParams()
      param.append('stationCode', this.stationCode)
      param.append('startTime', this.startTime)
      param.append('endTime', this.endTime)
      param.append("cdqPoint", this.cdqQueryPoint)
      param.append("dqPoint", this.dqQueryPoint)
      param.append("forecastManufactor", this.forecastManufactor)
      getCompositeData(param).then(response => {
        // this.tableData = response.data.data.composite
        // this.page.total = this.tableData.length
        Promise.all([this.getCapacity(param)]).then((values) => {
          this.fromHead = response.data.data.fromHead
          this.tableData = response.data.data.tableList
          this.total = response.data.data.tableList.length
          this.draw(response.data.data.time, response.data.data.sj, response.data.data.dq, response.data.data.cdq, values[0].capacity,response.data.data.nwp,response.data.data.cft)
        });
      })
    },
    getCapacity(param) {
      return new Promise(function (resolve, reject) {
        getCapacity(param).then(response => {
          resolve(response.data.data)
        })
      })
    },
    // getForecastManufactor(page, params) {
    //   this.tableLoading = true
    //   getForecastManufactor(Object.assign({
    //     // current: page.currentPage,
    //     // size: page.pageSize
    //   }, params, this.searchForm)).then(response => {
    //     console.log(response)
    //     this.forecastManufactorList = response.data.data.records
    //     if (this.forecastManufactorList.length > 0) {
    //       this.forecastManufactor = this.forecastManufactorList[0].sign
    //     }
    //   })
    // },
    getStationCode() {
      this.tableLoading = true
      getStation().then(response => {
        this.stationList = response.data.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
          this.getManufactor(this.stationCode)
        }
        this.tableLoading = false
      })
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage;//当前页
      this.pageSize = pageSize//每页显示的条数
    },
    // sizeChange(pageSize) {
    //   this.page.pageSize = pageSize
    // },
    // currentChange(current) {
    //   this.page.currentPage = current
    // },
    // searchChange(form, done) {
    //   this.searchForm = form
    //   this.page.currentPage = 1
    //   // this.getCompositeData()
    //   done()
    // },
    refreshChange() {
      // this.getCompositeData()
      this.getStationCode()
    }
  }
}
</script>