ipp-tl/ipp-ap/src/views/idp/data/windtotalpowercontrast/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 class="timeQuery" style="display: inline-block">
        &#12288;<el-button size="small" :loading="loading" @click="queryDataForCharts">查询</el-button>
        <el-button size="small" :loading="loading" @click="exportDataEvent">导出</el-button>
      </div>
    </div>
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <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 {mapGetters} from 'vuex'
import * as echarts from 'echarts';
import {
  queryCharts

} from '@/api/windtotalpowercontrast'
import {queryTableData} from "@/api/windtowerstatusdata";
export default {
  name: 'windtotalpowercontrast',
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      total: 0, // 总页数
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示多少条
      wsChart:null,
      tableLoading: false,
      startTime: new Date(new Date().toLocaleDateString()).getTime(),
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
      stationCode: '',
      stationType:'',
      stationList: [],
      forecastManufactor: '',
      forecastManufactorList: [],
      drawData: {datas: [], times: []},
      resizeKey: 1,
      activeName: 'first',
      loading: false,
      ultraShortData: [],
      shortData: [],
      powerStationStatusData: [],
      timeStamp: [],
      arrays: [],
      fromHead: []
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  mounted() {
  },
  methods: {
    queryDataForCharts() {
      if (this.startTime==null){
        this.$message.warning('请选择开始时间')
        return
      }
      if (this.endTime==null){
        this.$message.warning('请选择结束时间')
        return
      }
      const param = new URLSearchParams()
      param.append('startTime', this.startTime)
      param.append('endTime', this.endTime)

      queryCharts(param).then((res) => {
        this.drawData = res.data.data
        this.fromHead = res.data.data.headList
        this.tableData = res.data.data.tableList
        this.total = res.data.data.tableList.length


        this.dqDraw(this.drawData)
      }).catch((error) => {
        if (!this.tableLoading) {
          this.loading = false
        }
        console.log(error)
        this.$message.error('查询总功率charts出错' + error)
      })

    },
    handleClick() {
      if (this.activeName === "first") {
        this.chart = null
        this.$nextTick(() => {
          this.dqDraw(this.drawData)
          this.chart.resize()
        })
      } else if (this.activeName === "second") {
        this.wsChart = null

      }
    },
    dqDraw(dqData) {
      this.wsChart = echarts.init(document.getElementById('echarts'))

      var option = {
        backgroundColor: 'transparent',
        animation: false,
        title: {
          top: 20,
          text: '总功率对比',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            // color: this.lineColor
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            },
          },
        },
        legend: {
          top: 20,
          width: '70%',
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [],
          right: '4%',
          textStyle: {
            fontSize: 12,
            // color: this.lineColor
          },
          selected: {}
        },
        dataZoom: [{
          show: true,
          realtime: false,
          start: 0,
          end: 100,
          left: "15%",
          right: "15%",
          textStyle: {
            // color: this.lineColor
          }
        }, {
          type: 'inside',
        }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              // color: this.lineColor
            }
          },
          data: []
        }],
        yAxis: [{
          type: 'value',
          name: 'MW',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              // color: this.lineColor
            }
          },

          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              // color: this.lineColor
            },
            formatter: '{value}',
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: []
      }
      option.xAxis[0].data = dqData.time
      var index = 0;

      for (var key in dqData.chart) {
        option.legend.data.push(key)
        var sValue = {
          name: '',
          type: 'line',
          smooth: false,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {},
          data: []
        }
        sValue.name = key
        sValue.data = dqData.chart[key]
        // sValue.itemStyle = this.lineStyle[index].itemStyle
        sValue.connectNulls = true
        option.series.push(sValue)
        index++;
      }
      this.wsChart.setOption(option, true)
      var _this = this
      window.addEventListener("resize", function () {
        _this.wsChart.resize();
      });
    },
    exportDataEvent() {
      if (this.startTime==null){
        this.$message.warning('请选择开始时间')
        return
      }
      if (this.endTime==null){
        this.$message.warning('请选择结束时间')
        return
      }

      this.$axios.get("/windtotalpowercontrast/exportDataEvent/" + this.startTime + "/" + this.endTime, {
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
        this.loading = false
      }).catch((error) => {
        this.loading = false
        this.$message.error('导出失败' + error)
      })
    },

    getCapacity(param) {
      return new Promise(function (resolve, reject) {
        getCapacity(param).then(response => {
          resolve(response.data.data)
        })
      })
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage;//当前页
      this.pageSize = pageSize//每页显示的条数
    },
    refreshChange() {
      // this.getCompositeData()
      this.getStationCode()
    }
  }
}
</script>