<template>
    <div class="app-container">
        <el-header>
            <div class="left-panel">
                <el-date-picker
                    v-model="query.year_s"
                    type="year"
                    value-format="YYYY"
                    format="YYYY"
                    placeholder="查询年份"
                    class="headerSearch"
                />
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="handleQuery"
                ></el-button>
                <el-button
                    type="primary"
                    @click="exportExcel()"
                    :loading = "exportLoading"
                    >导出xlsx
                </el-button>
                <el-button
                    type="primary"
                    @click="handlePrint"
                    >打印
                </el-button>
            </div>
        </el-header>
        <el-card style="margin-top:5px">
            <div class="printWrap">
                <div ref="print" id="myReport" class="printContainer">
                    <table border="1"  cellspacing="0" :key="timeStamp" id="myTable" class="myTable">
                        <thead class="myTableHead">
                            <tr>
                                <th colspan="16">煤磨工段班组月度对比分析</th>
                            </tr>
                            <tr>
                                <th rowspan="2">月份</th>
                                <th rowspan="2">班组</th>
                                <th rowspan="2">总产量（t）</th>
                                <th rowspan="2">台时产量（t/h）</th>
                                <th rowspan="2">运转率（%）</th>
                                <th colspan="2">质量</th>
                                <th colspan="8">单位产品电耗</th>
                                <th rowspan="2">得分</th>
                            </tr>
                            <tr>
                                <th>细度（%）</th>
                                <th>水分（%）</th>
                                <th>煤磨排风机主电机（KW·h/t）</th>
                                <th>当期值（kW·h/t）</th>
                                <th>目标值（kW·h/t）</th>
                                <th>当期与目标值差值（kW·h/t）</th>
                                <th>环期值（kW·h/t）</th>
                                <th>当期与环期差值（kW·h/t）</th>
                                <th>环比增长率（%）</th>
                                <th>同比增长率（%）</th>
                            </tr>
                        </thead>
                        <tr v-for="(item,index) in tableDatas" :key="index">
                            <td v-for="(item0,index0) in item" :key="index0"  class="numCell">{{item0}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </el-card>
    </div>
  </template>
<script>
    export default {
        data() {
            return {
                timeStamp:0,
                query:{
                    year_s:'',
                    page : 0,
                    type : 'month_st',
                    mgroup:'3347217512021835776',
                },
                tableDatas:[],
            };
        },
        mounted() {
            let that = this;
            var myDate = new Date();
            let year = myDate.getFullYear();
            that.query.year_s = year;
            let params = {};
            params.page=0;
            params.year=year;
            params.mgroup=that.query.mgroup;
            this.$API.mtm.goal.list.req(params).then((res) => {
                let data = [];
                if(res.length>0){
                    data = res[0];
                }
                that.getData(data);
            })
        },
        methods: {
            getData(goalData){
                let that = this;
                let query0={};
                query0.page = 0;
                query0.type='month_st';
                query0.year_s = that.query.year_s-1;
                query0.mgroup=that.query.mgroup;
                let wrapArr = [],wrapArr0 = [] ,wrapArrs = [];
                this.$API.enm.enstat.req(query0).then((res0) => {
                    let data0 = res0;
                    if(data0.length>0){
                        data0.forEach(item0 => {
                            //先按月份排序，再按班组排序
                            let n0 = item0.month_s;
                            let ind0 = 0;
                            if(team_name0.indexOf('甲')>-1){
                                ind0 = (n0-1)*3;
                            }else if(team_name0.indexOf('乙')>-1){
                                ind0 = (n0-1)*3+1;
                            }else if(team_name0.indexOf('丙')>-1){
                                ind0 = (n0-1)*3+2;
                            }
                            wrapArr0[ind0] = item0;
                        });
                        console.log(wrapArr0)
                    }else{
                    }
                    this.$API.enm.enstat.req(that.query).then((res) => {
                        //今年的值
                        let data = res;
                        if(data.length>0){
                            data.forEach(item => {
                                //先按月份排序，再按班组排序
                                let n = item.month_s;
                                let team_name = item.team_name;
                                let ind = 0;
                                if(team_name.indexOf('甲')>-1){
                                    ind = (n-1)*3;
                                }else if(team_name.indexOf('乙')>-1){
                                    ind = (n-1)*3+1;
                                }else if(team_name.indexOf('丙')>-1){
                                    ind = (n-1)*3+2;
                                }
                                wrapArrs[ind] = item;
                                let arr = [];
                                let time = ''+item.year_s+'.'+item.month_s;
                                arr.push(time);
                                arr.push(item.team_name);
                                arr.push(item.total_production);
                                arr.push(item.production_hour);
                                arr.push(item.run_rate);
                                arr.push(item.production_cost_unit);
                                //质量
                                arr[6]=item.煤粉_细度_rate_pass!=null?item.煤粉_细度_rate_pass:'/';
                                arr[7]=item.煤粉_水分_rate_pass!=null?item.煤粉_水分_rate_pass:'/';
                                //设备
                                arr[8]=item.煤磨排风机_consume_unit!=null?item.煤磨排风机_consume_unit:'/';
                                let keyVale ='goal_val_'+n; 
                                arr[9]=item.elec_consume_unit//当期值（KW·h/t）
                                arr[10]=goalData[keyVale];//目标值（KW·h/t）//需要接口获取
                                arr[11]=item.celec_consume_unit-arr[10];//当期与目标差值（KW·h/t）
                                let ind_pre = 0,huanqi = 0,huanqicha=0,tongqi=0,tongqicha=0;
                                if(n==1){
                                    ind_pre = 12;
                                    huanqi = wrapArr0[ind_pre]?wrapArr0[ind_pre].elec_consume_unit:'/';
                                }else{
                                    ind_pre=n-1;
                                    huanqi =  wrapArr[ind_pre]?wrapArr[ind_pre].elec_consume_unit?wrapArr[ind_pre].elec_consume_unit:'/':'/'
                                }
                                arr[12]=huanqi;//环期值（KW·h/t）上个月的值
                                if(huanqi!=='/'){
                                    huanqicha = item.celec_consume_unit-huanqi;
                                }else{
                                    huanqicha = item.celec_consume_unit
                                }
                                arr[13]=huanqicha;//当期与环期差值（KW·h/t）
                                arr[14]=huanqi!='/'? huanqicha/huanqi*100:0;;//环比增长率（%）
                                if(wrapArr0[n]){
                                    tongqicha = item.celec_consume_unit-wrapArr0[n].celec_consume_unit;
                                    tongqi = tongqicha/tongqi;
                                }else{
                                    tongqicha = item.celec_consume_unit;
                                    tongqi = 0;
                                }
                                arr[15]=tongqi;//同比增长率（%）
                                arr[16]=0;//同比增长率（%）
                                wrapArr[ind] = arr;
                            });
                            console.log(wrapArr)
                            that.tableDatas = wrapArr;
                        }else{
                        }  
                    })  
                })
            },
            handleQuery(){
                this.tableDatas = [];
                this.getData();
            },
            itemClick(type,item){
                this.type=type;
                this.asynDialog = true;
            },
            itemClick1(type,item){
                this.chartShow = false;
                this.$API.bi.dataset.exec
                .req('3322567213885833216')
                .then((res) => {
                this.myOption = JSON.parse(res.echart_options);
                debugger;
                console.log(this.myOption)
                this.chartShow = true;
                });
            },
            handlePrint() {
                this.$PRINT('#myReport');
            },
            exportExcel() {
                this.exportLoading = true;
                this.$XLSX('#myTable', this.tableName)
                this.exportLoading = false;
            },
        }
    };
</script>
<style scoped>
    .printWrap{
        width: 100%;
        overflow-x: scroll;
    }
</style>