ipp-tl/ipp-ap/src/views/idp/data/ultraforecast16/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="endTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;超短期日期:</span>
        <el-date-picker
          value-format="timestamp"
          v-model="cdqDate"
          :clearable="false"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="timeQuery" style="display: inline-block">
        &#12288;<el-button size="small" :loading="loading" @click="fetchStationData">查询</el-button>
        <el-button size="small" :loading="loading" @click="exportDataEvent">导出</el-button>
      </div>
    </div>

    <div class="station-container">
      <el-tabs v-model="activeStation" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(stationData, stationName) in stationMap"
          :key="stationName"
          :label="stationName"
          :name="stationName"
        >
        </el-tab-pane>
      </el-tabs>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ textAlign: 'center' }"
        v-loading="loading"
        height="720"
      >
        <el-table-column header-align="center" prop="time" label="时间" ></el-table-column>
        <el-table-column header-align="center" prop="value1" label="第1点" ></el-table-column>
        <el-table-column header-align="center" prop="value2" label="第2点" ></el-table-column>
        <el-table-column header-align="center" prop="value3" label="第3点" ></el-table-column>
        <el-table-column header-align="center" prop="value4" label="第4点" ></el-table-column>
        <el-table-column header-align="center" prop="value5" label="第5点" ></el-table-column>
        <el-table-column header-align="center" prop="value6" label="第6点" ></el-table-column>
        <el-table-column header-align="center" prop="value7" label="第7点" ></el-table-column>
        <el-table-column header-align="center" prop="value8" label="第8点" ></el-table-column>
        <el-table-column header-align="center" prop="value9" label="第9点" ></el-table-column>
        <el-table-column header-align="center" prop="value10" label="第10点" ></el-table-column>
        <el-table-column header-align="center" prop="value11" label="第11点" ></el-table-column>
        <el-table-column header-align="center" prop="value12" label="第12点" ></el-table-column>
        <el-table-column header-align="center" prop="value13" label="第13点" ></el-table-column>
        <el-table-column header-align="center" prop="value14" label="第14点" ></el-table-column>
        <el-table-column header-align="center" prop="value15" label="第15点" ></el-table-column>
        <el-table-column header-align="center" prop="value16" label="第16点" ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import * as echarts from 'echarts';
import {
  queryCharts

} from '@/api/windtotalpowercontrast'
export default {
  name: 'forecastReport',
  data() {
    return {
      activeStation: '', // 当前激活的场站名称
      stationMap: {},   // 存储所有场站数据
      cdqDate: new Date(new Date().toLocaleDateString()).getTime() - 60 * 60 * 24 * 1000,
      dynamicColumns: [], // 动态风电场信息，例如: [{ name: '哈斯风电场' }, { name: '千伏苏加风电场' }]
      columns: [],
      searchForm: {},
      tableData: [],
      times: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      total: 0, // 总页数
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示多少条
      wsChart:null,
      tableLoading: false,
      stationCode: '',
      stationType:'',
      stationList: [],
      forecastManufactor: '',
      forecastManufactorList: [],
      resizeKey: 1,
      activeName: 'first',
      loading: false,
      ultraShortData: [],
      shortData: [],
      powerStationStatusData: [],
      timeStamp: [],
      arrays: [],
      fromHead: []
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  methods: {
    // 获取场站数据
    async fetchStationData() {
      this.loading = true;
      var queryParams = {
        ycDate:this.ycDate,
        cdqDate:this.cdqDate,
        sjDate:this.sjDate,
        agcDate:this.agcDate
      }
      this.$axios.get('/ultraForecast16Controller/queryReport',{params: queryParams}).then((res) => {
        this.times = res.data.data.times;
        this.stationMap = res.data.data.dataMap;
        // 设置默认激活第一个场站
        const stationNames = Object.keys(this.stationMap);
        if (stationNames.length > 0) {
          this.activeStation = stationNames[0];
          this.tableData = []
          const value = this.stationMap[this.activeStation];
          for(let i = 0;i< 96;i++){
            const temp = {}
            temp.time = this.times[i]
            temp.value1 = value.value1[i]
            temp.value2 = value.value2[i]
            temp.value3 = value.value3[i]
            temp.value4 = value.value4[i]
            temp.value5 = value.value5[i]
            temp.value6 = value.value6[i]
            temp.value7 = value.value7[i]
            temp.value8 = value.value8[i]
            temp.value9 = value.value9[i]
            temp.value10 = value.value10[i]
            temp.value11 = value.value11[i]
            temp.value12 = value.value12[i]
            temp.value13 = value.value13[i]
            temp.value14 = value.value14[i]
            temp.value15 = value.value15[i]
            temp.value16 = value.value16[i]
            this.tableData.push(temp)
          }
        }
      })
      this.loading = false;
    },
    handleClick(tab, event) {
      this.tableData = []
      const value = this.stationMap[tab.name];
      for(let i = 0;i< 96;i++){
        const temp = {}
        temp.time = this.times[i]
        temp.value1 = value.value1[i]
        temp.value2 = value.value2[i]
        temp.value3 = value.value3[i]
        temp.value4 = value.value4[i]
        temp.value5 = value.value5[i]
        temp.value6 = value.value6[i]
        temp.value7 = value.value7[i]
        temp.value8 = value.value8[i]
        temp.value9 = value.value9[i]
        temp.value10 = value.value10[i]
        temp.value11 = value.value11[i]
        temp.value12 = value.value12[i]
        temp.value13 = value.value13[i]
        temp.value14 = value.value14[i]
        temp.value15 = value.value15[i]
        temp.value16 = value.value16[i]
        this.tableData.push(temp)
      }
    },
    exportDataEvent() {
      this.$axios.get("/ultraForecast16Controller/exportDataEvent/" + this.cdqDate, {
        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>