SIS_Web/src/views/rankingIndex/CutAndSpeed.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.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="选择日期">
                        </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="callthepolicetable"
            :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="80">
            </el-table-column>
            <el-table-column
              prop="inputsmallratio"
              label="总小风切入"
              width="60">
            </el-table-column>
            <el-table-column
              prop="inputbigratio"
              label="总大风切入"
               width="60">
            </el-table-column>
            <el-table-column
              prop="outputsmallratio"
              label="总小风切出"
               width="60">
            </el-table-column>
            <el-table-column
              prop="outputbigmaxratio"
              label="总大风切出"
               width="60">
            </el-table-column>
            <el-table-column
              prop="dayinputsmall"
              label="日小风切入"
               width="60">
            </el-table-column>
            <el-table-column
              prop="dayinputsmallratio"
              label="日小风切入合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="dayoutputsmall"
              label="日小风切出"
               width="60">
            </el-table-column>
            <el-table-column
              prop="dayoutputsmallratio"
              label="日小风切出合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="dayinputbig"
              label="日大风切入"
               width="60">
            </el-table-column>
            <el-table-column
              prop="dayinputbigratio"
              label="日大风切入合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="dayoutputbig"
              label="日大风切出"
               width="60">
            </el-table-column>
            <el-table-column
              prop="dayoutputbigratio"
              label="日大风切出合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="monthinputsmall"
              label="月小风切入"
               width="60">
            </el-table-column>
            <el-table-column
              prop="monthinputsmallratio"
              label="月小风切入合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="monthinputbig"
              label="月大风切入"
               width="60">
            </el-table-column>
            <el-table-column
              prop="monthinputbigratio"
              label="月大风切入合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="monthoutputsmall"
              label="月小风切出"
               width="60">
            </el-table-column>
            <el-table-column
              prop="monthoutputsmallratio"
              label="月小风切出合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="monthoutputbig"
              label="月大风切出"
               width="60">
            </el-table-column>
            <el-table-column
              prop="monthoutputbigratio"
              label="月大风切出合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="yearinputsmall"
              label="年小风切入"
               width="60">
            </el-table-column>
            <el-table-column
              prop="yearinputsmallratio"
              label="年小风切入合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="yearinputbig"
              label="年大风切入"
               width="60">
            </el-table-column>
            <el-table-column
              prop="yearinputbigratio"
              label="年大风切入合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="yearoutputsmall"
              label="年小风切出"
               width="60">
            </el-table-column>
            <el-table-column
              prop="yearoutputsmallratio"
              label="年小风切出合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="yearoutputbig"
              label="年大风切出"
               width="60">
            </el-table-column>
            <el-table-column
              prop="yearoutputbigratio"
              label="年大风切出合格"
               width="60">
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
               width="80">
               <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="margin-top:1%"> 
       <div id="chartHistogram" style="width: 100%; height: 250px; margin: auto"></div>
       </div>
       </div>
    </div>
</template>
<script>
import excelHelper from "@/utils/excelHelper";
import * as echarts from "echarts";
export default {
    data() {
      return {
        formInline: {
        windfarm: "",
        project: "",
        line: "",
        },
        time: '2021-01-01',
        currentPage2: 1,
	      pagesize: 10,
        gridData:[],
        gridDataChart:[],
        charFreData:[],
        charNameData:[],
        options: [],
        orderByColumn:'',
        isAsc: '',
        value: 'MHS_FDC',
        wtid:'',
        endDate:'',
      }
    },
   
    created(){
        this.callAndSpeedData();
        this.getNowFormatDate()
    },
    methods:{
       getNowFormatDate(){
          var date = new Date();
          var seperator1 = "-";
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
          }
          var currentdate = year + seperator1 + month + seperator1 + strDate;
          this.endDate = currentdate;
          return currentdate;
       },
        queryApData() {
            this.callAndSpeedData();
        },
        handleEdit(a,b){
          this.wtId = b.windturbineid;
          console.log(this.wtId)
          this.$router.push({
          path:'/cutAndSpeedHistory',
          query:{
            wpId:this.value,
            wtId:this.wtId,
            beginDate:this.time,
            endDate:this.endDate,
          }
        })
        },
        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.callAndSpeedData();
        },
        callAndSpeedData(){
            this.$http.get('/powercompare/windfarmAjax').then((res) => {
                this.options = res.data.data;
            })
            console.log(this.time)
            var callAndSpeedData = new URLSearchParams();
            callAndSpeedData.append('pageNum',this.currentPage2);
		      	callAndSpeedData.append('pageSize',this.pagesize);
            callAndSpeedData.append('orderByColumn',this.orderByColumn);
            callAndSpeedData.append('isAsc',this.isAsc);
		  	    callAndSpeedData.append('wpId',this.value);
		      	callAndSpeedData.append('recorddate',this.time);
            this.$http.post('/outputspeed/outputSpeedlist',callAndSpeedData).then((res) => {
                this.gridData = res.data.data
                console.log(this.gridData)
            })
        },
        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>