ipfcst-znzx2/ipfcst/ipfcst-reportquery/src/main/frontend/views/realTimeQuery/realPowerQuery/index.vue

<template>
  <div class="chart-container">
    <div class="filter">
      <div class="startTime">
        <span class="timeText">起始时间</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="endTime">
        <span class="timeText">截止时间</span>
        <el-date-picker
          v-model="endTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="timeQuery">
        <el-button  size="small" :loading="loading"  @click="dateQuery">查询</el-button>
      </div>
      <div class="toolbar" v-show="this.showToolBar"> <vxe-toolbar ref="fstToolBar" custom >
<!--        <template v-slot:buttons>-->
<!--          <vxe-button class="downloadButton" style="border:none;"  @click="exportDataEvent"><i class="vxe-icon&#45;&#45;download" ></i></vxe-button>-->
<!--        </template>-->
      </vxe-toolbar></div>
      <div class="toolbar" v-show="this.showToolBar"> <vxe-toolbar ref="nwpToolBar" custom></vxe-toolbar></div>
    </div>

    <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-grid
              id="nwpTable"
              ref="nwpRef"
              border
              export-config
              :loading="loading"
              @sort-change="sortChangeEvent"
              :custom-config="{storage: true, checkMethod: checkColumnMethod}"
              :auto-resize="true"
              highlight-hover-row
              :header-cell-style="styleStr"
              max-height="90%"
              :cell-style="styleTableStr"
              align="center"
              :data="tableData"
              :columns="tableColumn"
            >
            </vxe-grid>
            <div class="rtPageturning">
              <vxe-pager
                background
                :loading="loading"
                :current-page.sync="currentPage"
                :page-size.sync="pageSize"
                :total="total"
                @page-change="handlePageChange"
                :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import Chart from './charts'
  import resize from '../../../components/Charts/mixins/resize'
  export default {
    name: 'nwp',
    components: { Chart},
    mixins: [resize],
    data(){
      return{
        styleStr:{},
        styleTableStr:{},
        tableToolbar: {
          export: true,
          custom: true
        },
        tableColumn:[],
        chart: null,
        queryStartTime:'',
        queryEndTime:'',
        startTime:new Date(new Date().toLocaleDateString()).getTime(),
        endTime:new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000*1-1,
        loading:true,
        drawLoading:true,
        tableLoading:true,
        resizeKey:1,
        activeName: 'first',
        drawData:{datas:[],times:[]},
        tableData:[],
        total:0,
        sortOrder:'asc',
        pageSize: 10,
        currentPage: 1,
        showToolBar:false,
        abandonmentRates:[]
      }
    },
    created () {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.styleStr = {background:'black',color:'white',border:'white'}
        this.styleTableStr = {background:'black',color:'white'}
      }
      this.$nextTick(() => {
        // 手动将表格和工具栏进行关联
        this.$refs.nwpRef.connect(this.$refs.nwpToolBar)
      })
    },
    mounted() {
      this.init()
    },
    methods:{
      exportDataEvent() {
        this.loading = true
        this.$axios.get('export/powerStationStatus/'+this.startTime+'/'+this.endTime, {
          responseType: 'blob'// 用于解决中文乱码
        }).then((response) => {
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('导出失败' + error)
        })
      },
      init(){
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.loading = true
        this.getDraw(this.queryStartTime,this.queryEndTime)
        this.getTable()

      },
      getDraw(startTime,endTime){
        this.drawLoading = true
        this.$axios.get('/powerStationStatus/'+startTime+'/'+endTime).then((res) => {
          this.drawData = res.data
          this.abandonmentRates = res.data.abandonmentRates
          this.drawLoading = false
          // this.tableColumn = []

          this.tableColumn = [
            { field: 'time', title: '接入时间',formatter:this.dateFormat,sortable:true,minWidth:"150",width:"180" },
            { field: 'realValue', title: '实际功率',minWidth:"60"},
            { field: 'ableValue', title: '可用功率',minWidth:"60"},
            { field: 'theoryValue', title: '理论功率',minWidth:"60"},
            { field: 'referencePowerByMeasuring', title: '参照理论功率(测风、测光法)',minWidth:"60"},
            { field: 'referencePowerBySample', title: '参照理论功率(样板机法)',minWidth:"60"},
            { field: 'ablePowerByMeasuring', title: '参照可用功率(测风、测光法)',minWidth:"60"},
            { field: 'ablePowerBySample', title: '参照可用功率(样板机法)',minWidth:"60"},
            { field: 'openCapacity', title: '开机容量',minWidth:"60"},
            // { field: 'isRationingByManualControl', title: '人工判断是否限电',formatter:this.isRationingByManualControl,minWidth:"60"},
            // { field: 'isRationingByAutoControl', title: '系统判断是否限电',formatter:this.isRationingByAutoControl,minWidth:"60"},
            { field: 'capacity', title: '装机容量',minWidth:"60"},
            // { field: 'onGridNum', title: '并网设备',minWidth:"60"}
          ]

          if(this.drawData.abnormalShow == '1'){
            this.tableColumn .push({ field: 'abnormalOfMeasuring', title: '测风光法的异常值',minWidth:"60"})
            this.tableColumn .push({ field: 'abnormalOfSample', title: '样板机法的异常值',minWidth:"60"})
            this.tableColumn .push({ field: 'abnormalOfHubSpeed', title: '机头风速法的异常值',minWidth:"60"})
          }
          if(this.drawData.displaySz == '1'){
            this.tableColumn .push({ field: 'onSiteObstructed', title: '站内受阻功率',minWidth:"60"})
            this.tableColumn .push({ field: 'offSiteObstructed', title: '站外受阻功率',minWidth:"60"})
            this.tableColumn .push({ field: 'abandonmentRates', title: '弃电率指标%',minWidth:"60"})
          }
          if(this.drawData.displayJt == '1'){
            this.tableColumn .push({ field: 'referencePowerByHubSpeed', title: '参照理论功率(机头风速法)',minWidth:"60"})
            this.tableColumn .push({field: 'ablePowerByHubSpeed', title: '参照可用功率(机头风速法)',minWidth:"60"})
            this.tableColumn .push({ field: 'abnormalOfHubSpeed', title: '机头风速法的异常值',minWidth:"60"})
          }

          if(this.drawData.hasTableColumn == 'true'){
            for (let i = 0; i < this.drawData.tableColumns.length; i++) {
              this.tableColumn.push(this.drawData.tableColumns[i])
            }

          }
          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(){
        this.tableLoading = true
        this.$axios.get('/powerStationStatus/'+this.queryStartTime+'/'+this.queryEndTime+'/'+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
        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')
        const date = new Date(cellValue) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Y = date.getFullYear() + '-'
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '    '
        const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
        const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
        const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
        return Y + M + D + H + m + s
      },
      isRationingByManualControl({ cellValue, row, column }) {
        if (cellValue == 1){
          return '限电'
        }
        if (cellValue == 0){
          return '系统判断'
        }
        return '不限电'
      },
      isRationingByAutoControl({ cellValue, row, column }) {
        if (cellValue){
          return '限电'
        }
        return '不限电'
      },
      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.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);*/
  /*}*/
  /*.timeText{*/
    /*opacity:0.69;*/
    /*padding-right:7px;*/
    /*font-size:14px;*/
  /*}*/

  /*.startTime{*/
    /*display:inline-block;*/
  /*}*/

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

  /*.tableContent{*/
    /*width: 100%;*/
    /*height:calc(80vh - 50px);*/
  /*}*/
  /*.toolbar{*/
    /*position:absolute;right:0px;*/
  /*}*/
</style>