SIS_Web/src/views/rankingIndex/RankingUtilization.vue

<template>
    <div class="box">
        <div class="searchBar">
            <el-card class="box-card">
                <!-- <div slot="header" class="clearfix" style="font-size:15px">
                    <span>查询条件</span>
                </div> -->
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="1">
                <el-form-item label="查询条件">
                </el-form-item>
                <el-form-item label="类型">
                <el-select v-model="value"  placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value">
                </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="风场">
                <el-select v-model="value2"  
                 placeholder="请选择">
                <el-option
                    v-for="item in options2"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="选择时间：">
                <el-date-picker
                    v-model="timedate"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                >
                </el-date-picker>
                </el-form-item>

                <el-form-item>
                <el-button type="primary" @click="queryApData" :plain="true"
                    >查询</el-button
                >
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="toExcel()">导出</el-button>
                </el-form-item>
            </el-row>
            </el-form>
            </el-card>
            <el-table
            id="loadratetable"
            :data="gridData"
            :row-style="{ height: '10px' }" 
            :cell-style="{ textAlign: 'center',padding:'1px' }" 
            :header-cell-style="headStyle"
            @sort-change="changeTableSort"
            style="font-size: 10px;margin-top:1%">
            <el-table-column label="利用率排行榜">
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="windturbineid"
              label="名称"
               width="460">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="daydl2"
              label="实际发电量(万KW)"
               width="460">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="daylldl"
              label="理论发电量(万KW)"
               width="460">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="dayspeed"
              label="风能利用率(%)"
               width="460">
            </el-table-column>
            </el-table-column>        
       </el-table>
        </div>
    </div>
</template>
<script>
import {formatDate} from '../../utils/fomatDate';
import excelHelper from "@/utils/excelHelper";
export default {
    data() {
      return {
        formInline: {
        windfarm: "",
        project: "",
        line: "",
        },
        timedate: [
            // {beginDate:'2021-01-01'},
            // {endDate:'2021-01-04'}
        ],
        currentPage2: 1,
		pagesize: 10,
        gridData:[],
        options: [{
          value: '0',
          label: '风场'
        }, {
          value: '1',
          label: '项目'
        },{
          value: '2',
          label: '线路'
        },{
          value: '3',
          label: '风机'
        }],
        options2: [],
        orderByColumn:'',
        isAsc: '',
        value: '0',
        value2: ''
      }
    },
    filters: {　
　　 　//方法一: yyyy-MM-dd hh:mm
        formatDate(time) {
            let date = new Date(time)
            // console.log(new Date(time))
            return formatDate(date, 'yyyy-MM-dd')
        },
        rounding (value) {
            return value.toFixed(2)
        }
    },
    created(){
        this.UtilizationRateData();
    },
    methods:{
        queryApData() {
            this.UtilizationRateData();
        },
        
        headStyle() {
			return "text-align:center"
		},
        
        changeTableSort(column){
			this.orderByColumn = column.prop;
			if(column.order == "descending"){
				this.isAsc = 'desc';
			}else if(column.order == "ascending"){
				this.isAsc = "asc";
			}
			this.UtilizationRateData();
		},
        UtilizationRateData(){
            let that = this;
            this.$http.get('/powercompare/windfarmAjax').then((res) => {
                that.options2 = res.data.data;
            })
             const nowDate = new Date();
            const date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
            }
            const newmonth = date.month>10?date.month:'0'+date.month
            const day = date.date>10?date.date:'0'+date.date
            const day1 = date.date>10?date.date - 1:'0'+date.date
            this.updateTime = date.year + '-' + newmonth + '-' + day
            this.updateTime1 = date.year + '-' + newmonth + '-' + day1
            if(this.timedate == ''){
                this.timedate[0] = this.updateTime1;
                this.timedate[1] = this.updateTime;
                this.beginDate = this.timedate[0];
                this.endDate = this.timedate[1];
            }else{
                this.beginDate = this.timedate[0];
                this.endDate = this.timedate[1];
            }
            var utilizationRateData = new URLSearchParams();
            utilizationRateData.append('pageNum',this.currentPage2);
			utilizationRateData.append('pageSize',this.pagesize);
            utilizationRateData.append('orderByColumn',this.orderByColumn);
            utilizationRateData.append('isAsc',this.isAsc);
			utilizationRateData.append('wpId',this.value2);
			utilizationRateData.append('beginDate',this.beginDate);
            utilizationRateData.append('endDate',this.endDate);
            utilizationRateData.append('type',this.value);
            this.$http.post('/leaderboard/utilizationList',utilizationRateData).then((res) => {
                this.gridData = res.data.data
            })
        },
        toExcel(){
            excelHelper.exportExcel("loadratetable","曲线偏差率排行榜",".xls",true);
        }
    }
}
</script>
<style lang="scss" scoped>
    .box{
		width: 100%;
		display: flex;
		justify-content: space-around;
 		align-items: center;
 		overflow: hidden;
	}
    .searchBar{
        margin-top: 1%;
    }
    .box-card{
        width: 100%;
    }
</style>