SIS_Web/src/views/rankingIndex/SingleMachinePower.vue

<template>
    <div class="box">
        <div class="searchBar">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                <el-tab-pane label="总功率情况" name="first" :key="'first'">
                    <el-card class="box-card">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
                <el-row :gutter="1">
                    <el-form-item label="查询条件:">
                    </el-form-item>
                    <el-form-item label="风电电场：">
                    <el-select v-model="value"  
                    @change="queryApData()" placeholder="请选择">
                    <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-select v-model="value2"  
                    @change="queryApData()" 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>
                    <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-tab-pane>
            <el-tab-pane label="月功率情况" name="second" :key="'second'">
                <el-card class="box-card">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
                <el-row :gutter="1">
                    <el-form-item label="查询条件:">
                    </el-form-item>
                    <el-form-item label="风场">
                    <el-select v-model="value"  
                    @change="queryApData()" placeholder="请选择">
                    <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-select v-model="value2"  
                    @change="queryApData()" 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
                        value-format="yyyy"
                        v-model="timeyear"
                        type="year"
                        placeholder="选择年"
                        format="yyyy"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="月份：">
                        <el-date-picker
                        value-format="yyyy-MM"
                        v-model="month"
                        type="month"
                        placeholder="选择月"
                        format="yyyy-MM"
                        >
                        </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-tab-pane>
            <el-tab-pane label="日功率情况" name="cord" :key="'cord'">
                <el-card class="box-card">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
                <el-row :gutter="1">
                    <el-form-item label="查询条件:">
                    </el-form-item>
                    <el-form-item label="风场">
                    <el-select v-model="value"  
                    @change="queryApData()" placeholder="请选择">
                    <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-select v-model="value2"  
                    @change="queryApData()" 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
                        value-format="yyyy-MM-dd"
                        v-model="time"
                        type="date"
                        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-tab-pane>
        </el-tabs>
        <el-table v-if="switchtableall"
            id="singlemachinepower"
            :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:0.5%">
            <el-table-column :label=title>
            <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="speed"
              label="风速"
              width="460">
            </el-table-column>
            <el-table-column
              prop="actualpower"   
              label="实际拟合功率"
              width="460">
            </el-table-column>
            <el-table-column
              prop="optimalpower"
              label="最优拟合功率"
              width="460">
            </el-table-column>
            </el-table-column>        
       </el-table>
       <el-table v-if="switchtableday"
            id="singlemachinepower"
            :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:0.5%">
            <el-table-column :label=title>
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="windturbineid"
              label="风机"
               width="370">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="speed"
              label="风速"
              width="370">
            </el-table-column>
            <el-table-column
              prop="actualpower"   
              label="实际拟合功率"
              width="370">
            </el-table-column>
            <el-table-column
              prop="optimalpower"
              label="最优拟合功率"
              width="370">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作"
                    width="370">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table-column>        
       </el-table>
          <el-table v-if="switchtablemonth"
            id="singlemachinepower" 
            :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:0.5%">
            <el-table-column :label=title>
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="windturbineid"
              label="风机"
               width="370">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="speed"
              label="风速"
              width="370">
            </el-table-column>
            <el-table-column
              prop="actualpower"   
              label="实际拟合功率"
              width="370">
            </el-table-column>
            <el-table-column
              prop="optimalpower"
              label="最优拟合功率"
              width="370">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作"
                    width="370">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table-column>        
       </el-table>
       <div style="text-align: center;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2"
				:page-sizes="[10, 50, 100, 1000]"
				:page-size="pagesize" layout="total,sizes, prev, pager, next" :total="total">
			</el-pagination>
		</div>
        <div id="leiDaTu" class="echart"></div>
        </div>
    </div>
</template>
<script>
import excelHelper from "@/utils/excelHelper";
export default {
    data(){
        return {
            formInline: {
                windfarm: "",
                project: "",
                line: "",
            },
            activeName: 'first',
            information:'first',
            value:'MHS_FDC',
            value2:'MG01_01',
            options: [],
            options2:[],
            month:'',
            time:'',
            timemonth:'',
            timeyear:'',
            updateTime:'',
            title:'月曲线偏差率排行榜',
            daymonth:'',
            dayyear:'',
            currentPage2: 1,
		    pagesize: 10,
            orderByColumn:'',
            isAsc: '',
            gridData:[],
            gridDataChart:[],
            gridDataChartX:[],
            gridDataChartYsjnh:[],
            gridDataChartYzynh:[],
            gridDataChartYbzgl:[],
            switchtableall:true,
            switchtableday:false,
            switchtablemonth:false,
            total:'',
        }
    },
    created(){
        this.singleMachinePower();
    },
    methods:{
        queryApData() {
             this.singleMachinePower();
        },
        handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pagesize = val;
            this.singleMachinePower();
		},
        handleCurrentChange(val) {
			// console.log(`当前页: ${val}`);
            this.singleMachinePower();
		},
        headStyle() {
			return "text-align:center"
		},
        handleClick(tab) {
            // console.log(tab.name)
            this.information = tab.name;
            this.singleMachinePower();
        },
        changeTableSort(column){
			this.orderByColumn = column.prop;
			if(column.order == "descending"){
				this.isAsc = 'desc';
			}else if(column.order == "ascending"){
				this.isAsc = "asc";
			}
			this.singleMachinePower();
		},
        singleMachinePower(){
            this.gridDataChartX = [];
            this.gridDataChartYsjnh = [];
            this.gridDataChartYzynh = [];
            this.gridDataChartYbzgl = [];
            this.$http.get('/powercompare/windfarmAjax').then((res) => {
                this.options = res.data.data;
            })
            this.$http.get('/powercompare/windturbineAjax?wpId=' + this.value).then((res) => {
                this.options2 = res.data.data;
            })
            var singleMachinePowerData = new URLSearchParams();
            var singleMachinePowerDataChart = new URLSearchParams();
            if(this.information == 'first'){
                this.title = '单机总功率信息列表';
                this.switchtableall = true;
                this.switchtableday = false;
                this.switchtablemonth = false;
                singleMachinePowerData.append('pageNum',this.currentPage2);
                singleMachinePowerData.append('pageSize',this.pagesize);
                singleMachinePowerData.append('orderByColumn',this.orderByColumn);
                singleMachinePowerData.append('isAsc',this.isAsc);
                singleMachinePowerData.append('wtId',this.value2);
                this.$http.post("/powersaturation/powersaturationamonutlist",singleMachinePowerData).then((res) => {
                    this.gridData = res.data.data.list;
                    this.total = res.data.data.total;
                })
                singleMachinePowerDataChart.append('wtId',this.value2);
                this.$http.post("/powersaturation/powersaturationamonutchart",singleMachinePowerDataChart).then((res) => {
                    this.gridDataChart = res.data.data;
                     for(let i=0;i<this.gridDataChart.length;i++){
                        this.gridDataChartX.push(this.gridDataChart[i].value1);
                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
                    }
                    this.$nextTick(function() {
                        this.drawPie('leiDaTu')
                    })
                })
            }else if(this.information == 'second'){
                this.title = '单机月功率信息列表';
                this.switchtableall = false;
                this.switchtableday = true;
                this.switchtablemonth = false;
                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 - 1:'0'+date.date
                this.updateTime = date.year + '-' + newmonth + '-' + day
                singleMachinePowerData.append('pageNum',this.currentPage2);
                singleMachinePowerData.append('pageSize',this.pagesize);
                singleMachinePowerData.append('orderByColumn',this.orderByColumn);
                singleMachinePowerData.append('isAsc',this.isAsc);
                singleMachinePowerData.append('wtId',this.value2);
                if(this.timeyear == ''){
                    this.timeyear = this.updateTime;
                    this.timeyear = this.timeyear.slice(0,4);
                }else{
                    this.timeyear = this.timeyear.toString();          
                    
                }
                singleMachinePowerData.append('year',this.timeyear);
                if(this.month == ''){
                    this.month = this.updateTime;
                    if(this.month.substring(5,7) < 10 ){
                        this.timemonth = this.month.substring(6,7);
                    }else{
                        this.timemonth = this.month.substring(5,7);
                    }
                }else{
                    this.timemonth = this.month.toString(); 
                    if(this.timemonth.substring(5,7) < 10){
                        this.timemonth = this.timemonth.substring(6,7);
                    }else{
                        this.timemonth = this.timemonth.substring(5,7)
                    }
                }
                console.log(this.timemonth)
                singleMachinePowerData.append('month',this.timemonth);
                this.$http.post("/powersaturation/powersaturationmonthlist",singleMachinePowerData).then((res) =>{
                    this.gridData = res.data.data.list;
                     this.total = res.data.data.total;
                })
                singleMachinePowerDataChart.append('wtId',this.value2);
                singleMachinePowerDataChart.append('year',this.timeyear);
                singleMachinePowerDataChart.append('month',this.timemonth);
                this.$http.post("/powersaturation/powersaturationmonthchart",singleMachinePowerDataChart).then((res) => {
                    this.gridDataChart = res.data.data;
                     for(let i=0;i<this.gridDataChart.length;i++){
                        this.gridDataChartX.push(this.gridDataChart[i].value1);
                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
                    }
                    console.log(this.gridDataChart)
                    this.$nextTick(function() {
                        this.drawPie('leiDaTu')
                    })
                })
            }else if(this.information == 'cord'){
                this.title = '单机日功率信息列表';
                this.switchtableall = false;
                this.switchtableday = false;
                this.switchtablemonth = true;
                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 - 1:'0'+date.date
                this.updateTime = date.year + '-' + newmonth + '-' + day
                if(this.time == ''){
                    this.time = this.updateTime;
                }
                singleMachinePowerData.append('pageNum',this.currentPage2);
                singleMachinePowerData.append('pageSize',this.pagesize);
                singleMachinePowerData.append('orderByColumn',this.orderByColumn);
                singleMachinePowerData.append('isAsc',this.isAsc);
                singleMachinePowerData.append('wtId',this.value2);
                singleMachinePowerData.append('recorddate',this.time);
                this.$http.post("/powersaturation/powersaturationlist",singleMachinePowerData).then((res) =>{
                    this.gridData = res.data.data.list;
                    this.total = res.data.data.total;
                })
                singleMachinePowerDataChart.append('wtId',this.value2);
                singleMachinePowerDataChart.append('recorddate',this.time);
                this.$http.post("/powersaturation/powersaturationchart",singleMachinePowerDataChart).then((res) => {
                    this.gridDataChart = res.data.data;
                     for(let i=0;i<this.gridDataChart.length;i++){
                        this.gridDataChartX.push(this.gridDataChart[i].value1);
                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
                    }
                    this.$nextTick(function() {
                        this.drawPie('leiDaTu')
                    })
                })
            }
        },
        toExcel(){
            excelHelper.exportExcel("singlemachinepower","负荷率排行榜",".xls",true);
        },
        drawPie() {
				var charts;
				if (charts != null && charts != "" && charts != undefined){
				    charts.dispose();
				}
				charts= this.$echarts.init(document.getElementById('leiDaTu'));
				let option = {
					title: {
                        left: 'center',
                        text: '功率曲线'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['实际拟合功率', '最优拟合功率', '保证功率'],
                        x: 'right',
                        
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.gridDataChartX
                    },
                    yAxis: {
                        type: 'value',
                        name:'功率(KW)',
                        nameLocation :'center',
                        nameTextStyle: {
                            padding: [0, 0, 30, 0]    // 四个数字分别为上右下左与原位置距离
                        },
                        max: 2000,
                        axisLabel:{
                            formatter: function (value) {
                            var texts = [];
                                if (value < 1000) {
                                    value = value / 1000;
                                    texts.push(value+'k');
                                }
                                if (value >= 1000) {
                                    value = value / 1000;
                                    texts.push(value+'k');
                                }
                                return texts;
                            }
                        },
                    },
                    series: [
                        {
                            name: '实际拟合功率',
                            type: 'line',
                            stack: '总量',
                            data: this.gridDataChartYsjnh
                        },
                        {
                            name: '最优拟合功率',
                            type: 'line',
                            stack: '总量',
                            data: this.gridDataChartYzynh
                        },
                        {
                            name: '保证功率',
                            type: 'line',
                            stack: '总量',
                            data: this.gridDataChartYbzgl
                        },
                    ]
				}
				charts.clear();
				charts.setOption(option);
				
			},
    }
}
</script>
<style lang="scss" scoped>
    .box{
		width: 100%;
		display: flex;
		justify-content: space-around;
 		align-items: center;
 		overflow: hidden;
	}
    .searchBar{
        margin-top: 1%;
    }
    #leiDaTu {
		margin-left: 5%;
		height: 200px;
		width: 90%;
		float: left;
	}
</style>