ssi/ui/src/views/bizManager/forecastPowerShortTerm/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="起始时间" prop="startTime">
            <el-date-picker
              v-model="startTime"
              :clearable="false"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="截止时间" prop="endTime">
            <el-date-picker
              v-model="endTime"
              :clearable="false"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="dateQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <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=""
              :auto-resize="true"
              highlight-hover-row
              max-height="90%"
              align="center"
              :data="tableData">
              <vxe-table-column  field="forecastTime" title="预测时间" :formatter="dateFormat" width="250" sortable min-width="250"></vxe-table-column>
              <vxe-table-column field="fpValue" title="预测功率" min-width="60" ></vxe-table-column>
            </vxe-table>
            <vxe-pager
              v-show="showTable"
              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>
          </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: 'nwp',
  components: { Chart},
  mixins: [resize],
  data(){
    return{
      showTable: true,
      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:false,
      drawLoading:true,
      tableLoading:true,
      resizeKey:1,
      activeName: 'first',
      drawData:{datas:[],times:[]},
      tableData:[],
      total:0,
      sortOrder:'asc',
      pageSize: 10,
      currentPage: 1,
      showToolBar:false,
      /*menuKey:1,
      isRenderingTime : new Date().getTime()*/

    }
  },
  created () {
  },
  mounted() {
    this.queryStartTime = this.startTime
    this.queryEndTime = this.endTime
    this.getDraw()
    this.getTable()

  },
  methods:{
    getDraw(){
      this.drawLoading = true
      var searchParams = {
        startTime: this.queryStartTime,
        endTime: this.queryEndTime
      }
      this.$axios.get('/forecastPowerShortTermController/getDraw',{params: searchParams}).then((res) => {
        this.drawData = res.data
      }).catch((error) => {
        this.$message.error('查询实时预测短期echarts出错' + error)
      })
    },
    getTable(){
      var searchParams = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        startTime: this.queryStartTime,
        endTime: this.queryEndTime
      }
      this.$axios.get('/forecastPowerShortTermController/getAll',
        {params: searchParams}).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      }).catch((error) => {
        // this.$message.error(error)
      })
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.startTime = this.queryStartTime
      this.endTime = this.queryEndTime
      this.loading = true
      this.getTable();
    },
    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*3){
        // this.startTime = this.queryStartTime
        // this.endTime = this.queryEndTime
        this.$message.error("只能最多查询3天的数据哦")
        this.loading = false
        return
      }
      this.queryStartTime = this.startTime
      this.queryEndTime = this.endTime
      this.getDraw(this.queryStartTime,this.queryEndTime)
      this.getTable()
    },
    Byresize(tab){
      if(tab.name =='first'){
        this.resizeKey++
        this.showToolBar = false
      }else{
        this.showToolBar = true
      }

    },
  }
}
</script>

<style scoped>
.chart-container{
  position:relative;
  width:100%;
  height:calc(100vh - 50px);
}

.filter{
  position:relative;
  display:flex;
  padding:20px 0 10px 15px;
  font-size:12px;
  line-height:11px;
  color:white;
}

input{
  background:transparent;
  border:none;
  color:white;
}

.timeText{
  opacity:0.69;
  padding-right:7px;
  font-size:14px;
}

.startTime{
  display:inline-block;
}

.endTime{
  display:inline-block;
  padding-left:42px;
}


.timeQuery{
  background:transparent;
}

.filter{
  width: 100%;background-color: transparent;height: 10%
}
.filter >>> input{
  background:transparent;
  border:none;
  color:white;
}
.content{
  width: 100%;
  background-color: transparent;
  height: 90%;
  padding-left: 5px;
  padding-right: 5px;
}



.tableContent{
  width: 100%;
  height:calc(80vh - 50px);
}
.tableContent >>> td{
  border:1px solid #ffffff;
}

.rtPageturning >>> button,
.rtPageturning >>> span,
.rtPageturning >>> input,
.rtPageturning >>> .vxe-pager--btn-wrapper li{
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}
.rtPageturning >>> span{
  border:none
}
.rtPageturning >>> .vxe-pager--wrapper .vxe-pager--btn-wrapper li:not(.disabled).is--active {
  background-color: #9f9fa0 !important;
}
.toolbar{
  position:absolute;right:0px;
}
.toolbar >>> .vxe-button.type--button.is--circle {
  padding: 0 .5em;
  min-width: 34px;
  border-radius: 10%;
  border: none;
  background: transparent;
  color: white;
}


</style>