191 lines
7.7 KiB
Vue
191 lines
7.7 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<el-date-picker
|
||
v-model="query.time"
|
||
type="month"
|
||
value-format="YYYY-MM"
|
||
format="YYYY-MM"
|
||
placeholder="基础月份"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.time2"
|
||
type="month"
|
||
value-format="YYYY-MM"
|
||
format="YYYY-MM"
|
||
placeholder="对比月份"
|
||
/>
|
||
<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 ref="print" id="myReport" class="printContainer">
|
||
<table border="1" cellspacing="0" :key="timeStamp" id="myTable" class="myTable">
|
||
<thead class="myTableHead">
|
||
<tr>
|
||
<th colspan="11">电水泥包装工段班组月度对比分析</th>
|
||
</tr>
|
||
<tr>
|
||
<th rowspan="2">月份</th>
|
||
<th rowspan="2">班组</th>
|
||
<th rowspan="2">总产量（t）</th>
|
||
<th colspan="7">当期单位产品电耗</th>
|
||
<th rowspan="2">得分</th>
|
||
</tr>
|
||
<tr>
|
||
<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>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
query:{
|
||
year_s:'',
|
||
page : 0,
|
||
type : 'month_st',
|
||
mgroup:'3347217757455728640',
|
||
},
|
||
tableDatas:[],
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
var myDate = new Date();
|
||
let year = myDate.getFullYear();
|
||
that.query.year_s = year;
|
||
let query0={};
|
||
query0.page = 0;
|
||
query0.type='month_st';
|
||
query0.year_s = year-1;
|
||
query0.mgroup='3346520558031773696';
|
||
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[3]=item.elec_consume_unit//当期值（KW·h/t）
|
||
arr[4]=item.celec_consume_unit;//目标值（KW·h/t）//需要接口获取
|
||
arr[5]=item.celec_consume_unit;//当期与目标差值（KW·h/t）
|
||
let ind_pre = 0,huanbi = 0;
|
||
if(item.month_s==1){
|
||
ind_pre = 12;
|
||
huanbi = wrapArr0[ind_pre]?wrapArr0[ind_pre].elec_consume_unit:'/';
|
||
}else{
|
||
ind_pre=ind-1;
|
||
huanbi = wrapArr[ind_pre]?wrapArr[ind_pre].elec_consume_unit?wrapArr[ind_pre].elec_consume_unit:'/':'/'
|
||
}
|
||
arr[6]=huanbi;//环期值（KW·h/t）上个月的值
|
||
arr[7]=item.celec_consume_unit;//当期与环期差值（KW·h/t）
|
||
arr[8]=item.celec_consume_unit;//环比增长率（%）
|
||
arr[9]=item.celec_consume_unit;//同比增长率（%）
|
||
arr[10]=item.celec_consume_unit;//同比增长率（%）
|
||
wrapArr[ind] = arr;
|
||
});
|
||
console.log(wrapArr)
|
||
that.tableDatas = wrapArr;
|
||
}else{
|
||
}
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
|
||
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>
|
||
.printContainer{
|
||
width: 1075px;
|
||
}
|
||
</style> |