SIS_Web/src/views/gradeEvaluation/PerformanceAnalysis.vue

<template>
    <div class="box">
        <div class="searchBar">
            <el-card class="box-card">
                <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="请选择" @change="projectData">
                <el-option
                    v-for="item in options"
                    :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="timeyear"
                        type="year"
                        placeholder="选择年"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="月份：">
                        <el-date-picker
                        v-model="timemonth"
                        type="month"
                        placeholder="选择月">
                        </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>
            <div style="font-size:30px;text-align:center;margin-top:1%">{{title}}</div>
            <el-table
            id="callthepolicetable"
            :data="gridData"
            :row-style="{ height: '10px' }" 
            :cell-style="{ textAlign: 'center',padding:'1px' }" 
            :header-cell-style="{ textAlign:'center',background:'#F5F7FA'}"
            @sort-change="changeTableSort"
            @row-click="tableDatawindturbineName"
            border
            style="font-size: 10px;margin-top:1%">
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="windturbineName"
              label="机组编号"
               width="125">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="fdl"
              label="实际发电量(万千瓦时)"
              width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="llfdl"
              label="理论发电量(万千瓦时)"
               width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="sbklyl"
              label="设备利用小时数(小时)"
               width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="sbklyl"
              label="设备可利用率(%)"
               width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="dxklyxs"
              label="等效可用系数(%)"
               width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="fs"
              label="平均风速(m/s)"
               width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="xfqr"
              label="小风切入风速(m/s)"
               width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="yxxs"
              label="有效风时数(小时)"
               width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="gzss"
              label="故障损失电量(万千瓦时)"
               width="120">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="xdss"
              label="调度限电损失电量(万千瓦时)"
               width="120">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="jxss"
              label="计划检修损失电量(万千瓦时)"
               width="120">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="xnss"
              label="性能未达标损失电量(万千瓦时)"
               width="120">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="gzxs"
              label="故障停用时间(小时)"
               width="100">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="glyzxxs"
              label="机组功率一致性系数(%)"
               width="120">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="jfpl"
              label="静风频率"
               width="100">
            </el-table-column>        
       </el-table>
       </div>
    </div>
</template>
<script>
import excelHelper from "@/utils/excelHelper";
import * as echarts from "echarts";
export default {
    data() {
      return {
        formInline: {
        windfarm: "",
        project: "",
        line: "",
        },
        timeyear:'2021',
        timemonth:'1',
        currentPage2: 1,
	      pagesize: 10,
        gridData:[],
        gridDataChart:[],
        charFreData:[],
        charNameData:[],
        options: [],
        options2: [],
        orderByColumn:'',
        isAsc: '',
        value: 'MHS_FDC',
        value2:'',
        fanData:'',
        title:'',
      }
    },
   
    created(){
        this.callAndSpeedData();
    },
    methods:{
        queryApData() {
            this.callAndSpeedData();
        },
        headStyle() {
          return "text-align:center,background-color:red"
        },
        tableDatawindturbineName(val){
          this.fanData = val;
          console.log(this.fanData)
          this.$router.push({
            path:'/performanceAnalysisOperation',
            query:{
              data:this.fanData,
              timeyear: this.timeyear,
              timemonth: this.timemonth
            }
          })
        },
        changeTableSort(column){
          this.orderByColumn = column.prop;
          if(column.order == "descending"){
            this.isAsc = 'desc';
          }else if(column.order == "ascending"){
            this.isAsc = "asc";
          }
          this.callAndSpeedData();
        },
        projectData(){
            this.$http.get('/powercompare/projectAjax?wpIds=' + this.value).then((res) =>{
                this.options2 = res.data.data;
            })
        },
        callAndSpeedData(){
            this.$http.get('/powercompare/windfarmAjax').then((res) => {
                this.options = res.data.data;
            })
            var performanceAnalysis = new URLSearchParams();
            performanceAnalysis.append('pageNum',this.currentPage2);
		      	performanceAnalysis.append('pageSize',this.pagesize);
            performanceAnalysis.append('orderByColumn',this.orderByColumn);
            performanceAnalysis.append('isAsc',this.isAsc);
		  	    performanceAnalysis.append('wpId',this.value);
            performanceAnalysis.append('year',this.timeyear);
            performanceAnalysis.append('month',this.timemonth);
            this.$http.post('/singleanalysis/singleanalysisMain',performanceAnalysis).then((res) => {
                this.gridData = res.data.data;
                this.title = this.gridData[0].windPowerStationName + this.timeyear + '年' + this.timemonth + '月单台机组运行指标性能分析';
            })
        },
        toExcel(){
            excelHelper.exportExcel("callthepolicetable","负荷率排行榜",".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>