focus/ipfcst-console/src/main/frontend/views/dataquery/forecastPowerShortTerm/index.vue

<template>
  <div class="chart-container">
    <br/>
    <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>
    <br/>
    <div>

      <div style="display: inline-block">
        <span style="font-weight: bold;font-size: 14px">&#12288;场站名称：</span>
        <el-select style="width:250px" clearable v-model="stationCode" size="small">
          <el-option
            v-for="item in stationList"
            :key="item.stationCode"
            :label="item.name"
            :value="item.stationCode">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6;font-size: 13px">{{ item.stationCode }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="timeQuery" style="display: inline-block">
        <el-button size="small" :loading="loading" @click="dateQuery">&#12288;查询</el-button>
      </div>
    </div>
    <br/>
    <div class="content">
      <el-tabs type="card" v-model="activeName" @tab-click="Byresize">
        <el-tab-pane label="图表" name="first">
          <chart :drawData=this.drawData :resizeKey=this.resizeKey
          />
        </el-tab-pane>
        <el-tab-pane label="表格" name="second">
          <div class="tableContent">
            <vxe-table
              id="fstTable"
              ref="fstRef"
              border
              export-config
              beforeExportMethod=""
              :loading="loading"
              @sort-change="sortChangeEvent"
              :custom-config="{storage: true, checkMethod: checkColumnMethod}"
              :auto-resize="true"
              highlight-hover-row
              max-height="90%"
              align="center"
              :data="tableData">
              <vxe-table-column field="forecastTime" title="预测时间" :formatter="dateFormat" width="180" sortable
                                min-width="150"></vxe-table-column>
              <vxe-table-column field="genDate" title="生成时间" min-width="60" :formatter="dateMoment"></vxe-table-column>
              <vxe-table-column field="fpValue" title="预测功率" min-width="60"></vxe-table-column>
              <vxe-table-column field="predictionModelEnum" title="预测模型" min-width="60"
                                :formatter="enumToWord"></vxe-table-column>
            </vxe-table>
            <div class="rtPageturning">
              <vxe-pager
                background
                :loading="loading"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                @page-change="handlePageChange"
                :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager>
            </div>
          </div>
          <!-- <Table height="100%" width="100%" :queryTime=this.queryTime @sendLoading="getLoadingFormTable"></Table>-->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Chart from './charts'
import resize from '../../../components/Charts/mixins/resize'
import moment from "moment";

export default {
  name: 'dq',
  components: {Chart},
  mixins: [resize],
  data() {
    return {
      stationCode: '',
      chart: null,
      queryStartTime: '',
      queryEndTime: '',
      startTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000,
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 * 4 - 1,
      loading: true,
      drawLoading: true,
      tableLoading: true,
      resizeKey: 1,
      activeName: 'first',
      drawData: {datas: [], times: []},
      tableData: [],
      stationList: [],
      total: 0,
      sortOrder: 'asc',
      pageSize: 10,
      currentPage: 1,
      showToolBar: false,

    }
  },
  created() {
    this.$nextTick(() => {
      // 手动将表格和工具栏进行关联
      this.$refs.fstRef.connect(this.$refs.fstToolBar)
    })
  },
  mounted() {
    this.getStationList()
    this.init()
  },
  methods: {
    getStationList() {
      this.$axios.get('/electricField/getElectricField').then((res) => {
        this.stationList = res.data
      }).catch((error) => {
        this.$message.error('获取场站下拉框出错' + error)
      })
      this.loading = false
    },
    init() {
      this.pageSize = 10
      this.queryStartTime = this.startTime
      this.queryEndTime = this.endTime
      this.loading = false
    },
    getDraw(startTime, endTime, stationCode) {
      if (this.stationCode == '') {
        this.$message.error("场站编码不能为空")
        this.loading = false
        return
      }
      this.drawLoading = true
      this.$axios.get('/forecastPowerShortTerm/' + startTime + '/' + endTime + '/' + stationCode).then((res) => {
        this.drawData = res.data
        this.drawLoading = false
        if (!this.drawLoading && !this.tableLoading) {
          this.loading = false
        }
      }).catch((error) => {
        this.drawLoading = false
        if (!this.drawLoading && !this.tableLoading) {
          this.loading = false
        }
        this.$message.error('查询实时预测短期echarts出错' + error)
      })
    },
    getTable() {
      if (this.stationCode == '') {
        this.$message.error("场站编码不能为空")
        this.loading = false
        return
      }
      this.tableLoading = true
      this.$axios.get('/forecastPowerShortTerm/' + this.queryStartTime + '/' + this.queryEndTime + '/' + this.stationCode + '/' + this.currentPage + '/' + this.pageSize + '?sortOrder=' + this.sortOrder).then((res) => {
        this.tableData = res.data.content
        // 表分页格数据总条数
        this.total = res.data.count
        this.tableLoading = false
        if (!this.drawLoading && !this.tableLoading) {
          this.loading = false
        }
      }).catch((error) => {
        this.tableLoading = false
        if (!this.drawLoading && !this.tableLoading) {
          this.loading = false
        }
        this.$message.error('查询table出错' + error)
      })

    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      if (this.pageSize != pageSize) {
        this.changePageSize(pageSize)
      }
      this.pageSize = pageSize
      this.startTime = this.queryStartTime
      this.endTime = this.queryEndTime
      this.getTable()
    },
    changePageSize(pageSize) {
      this.currentPage = 1
      this.displayConfigPageSize.showCode = pageSize
      this.$axios.post('displayConfig/', this.displayConfigPageSize).then((res) => {
        this.displayConfigPageSize = res.data
        // this.$message.success('PageSize设置成功' )
        this.dialogVisible = false
      }).catch((error) => {
        this.$message.error('PageSize设置出错' + error)
      })
    },
    dateFormat({cellValue, row, column}) {
      return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
    },
    enumToWord({cellValue, row, column}) {
      if (cellValue == "E1") {
        return "云端模型"
      }
      if (cellValue == 'E2') {
        return "物理模型"
      }
      if (cellValue == 'E3') {
        return "统计模型"
      }
      if (cellValue == 'E4') {
        return "补录数据"
      }
      if (cellValue == 'E5') {
        return "差值模型"
      }
    },
    dateMoment({cellValue, row, column}) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    sortChangeEvent({column, property, order}) {
      if (order == null) {
        order = 'asc'
      }
      this.currentPage = 1
      this.sortOrder = order
      this.loading = true
      this.getTable()
    },

    checkColumnMethod({column}) {
      if (column.property === 'preTime') {
        return false
      }
      return true
    },
    dateQuery() {
      this.loading = true
      if (this.endTime <= this.startTime) {
        this.$message.error("开始时间不能小于结束时间")
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
        this.loading = false
        return
      }
      if (this.endTime - this.startTime > 60 * 60 * 24 * 1000 * 31) {
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
        this.$message.error("只能最多查询31天的数据哦")
        this.loading = false
        return
      }
      this.queryStartTime = this.startTime
      this.queryEndTime = this.endTime
      this.getDraw(this.queryStartTime, this.queryEndTime, this.stationCode)
      this.getTable()
    },
    Byresize(tab) {
      if (tab.name == 'first') {
        this.resizeKey++
        this.showToolBar = false
      } else {
        this.showToolBar = true
      }

    }
  }
}
</script>