284 lines
13 KiB
Vue
284 lines
13 KiB
Vue
<!-- 全厂电量统计 -->
|
||
<template>
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<el-date-picker
|
||
v-model="search_month"
|
||
type="year"
|
||
value-format="YYYY"
|
||
format="YYYY"
|
||
placeholder="年份"
|
||
style="margin-right: 6px;"
|
||
@change="monthChange"
|
||
/>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="getTableData"
|
||
></el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="exportExcel()"
|
||
:loading = "exportLoading"
|
||
v-auth="'export_excel'"
|
||
>导出xlsx
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="handlePrint"
|
||
>打印
|
||
</el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main>
|
||
<el-card shadow="never">
|
||
<div ref="print" id="myReport" class="printContainer" style="width: 100%;">
|
||
<table border="1" cellspacing="0" :key="timeStamp" id="numTable" class="myTable">
|
||
<thead class="myTableHead">
|
||
<tr>
|
||
<th :colspan="tableDatas.length > 0 ? tableDatas[0].length : 3" v-if="type == 'day'">生产月报</th>
|
||
<th :colspan="tableDatas.length > 0 ? tableDatas[0].length : 3" v-else>生产月报</th>
|
||
</tr>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th colspan="2">项目</th>
|
||
<th v-for="(day, i) in tableHeaders" :key="i" style="width:100px">
|
||
{{ day }}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in tableDatas" :key="index">
|
||
<td class="numCell">{{ item[0] }}</td>
|
||
<td class="numCell" v-if="index == 0" rowspan="5">{{ item[1] }}</td>
|
||
<td class="numCell" v-else-if="index == 5" rowspan="9">{{ item[1] }}</td>
|
||
<td class="numCell" v-else-if="index == 14" rowspan="5">{{ item[1] }}</td>
|
||
<td class="numCell" v-else-if="index == 19" rowspan="4">{{ item[1] }}</td>
|
||
<td class="numCell" v-else-if="index == 23" rowspan="6">{{ item[1] }}</td>
|
||
<td class="numCell" style="width: 180px !important;">{{ item[2] }}</td>
|
||
<td class="numCell" v-for="(value, i) in item.slice(3)" :key="i">{{ value }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</el-card>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
search_month:'',
|
||
tableHeaders:[],
|
||
tableDatas:[
|
||
[1,'主机设备台产','立磨台产（t/h）',''],
|
||
[2,'主机设备台产','烘干破台产（t/h）'],
|
||
[3,'主机设备台产','煤磨台产（t/h）'],
|
||
[4,'主机设备台产','回转窑台产（t/h）'],
|
||
[5,'主机设备台产','水泥磨台产（t/h）'],
|
||
|
||
[6,'能耗','熟料月综合电耗（kW·h/t）'],
|
||
[7,'能耗','熟料月单位标煤耗(kgce/t)'],
|
||
[8,'能耗','熟料月综合能耗(kgce/t)'],
|
||
[9,'能耗','水泥月综合能耗(kgce/t)'],
|
||
[10,'能耗','月电石渣分布电耗（kW·h/t）'],
|
||
[11,'能耗','月生料分布电耗（kW·h/t）'],
|
||
[12,'能耗','月熟料分布电耗（kW·h/t）'],
|
||
[13,'能耗','月水泥粉磨分布电耗（kW·h/t）'],
|
||
[14,'能耗','月水泥包装分布电耗（kW·h/t）'],
|
||
|
||
|
||
[15,'产量','月电石渣产量(t)'],
|
||
[16,'产量','月生料产量(t)'],
|
||
[17,'产量','月熟料产量(t)'],
|
||
[18,'产量','月水泥磨产量(t)'],
|
||
[19,'产量','月出厂水泥产量(t)'],
|
||
|
||
[20,'成本','月电石渣成本(元/吨)'],
|
||
[21,'成本','月生料成本(元/吨)'],
|
||
[22,'成本','月熟料成本(元/吨)'],
|
||
[23,'成本','月水泥粉磨成本(元/吨)'],
|
||
// [30,'成本','月水泥包装成本(元/吨)'],
|
||
|
||
[24,'耗电量','月电石渣耗电量（kW·h）'],
|
||
[25,'耗电量','月生料耗电量（kW·h）'],
|
||
[26,'耗电量','月熟料耗电量（kW·h）'],
|
||
[27,'耗电量','月水泥粉磨耗电量（kW·h）'],
|
||
[28,'耗电量','月水泥包装耗电量（kW·h）'],
|
||
[29,'耗电量','月生活区耗电量（kW·h）'],
|
||
],
|
||
year:'',
|
||
month:'',
|
||
year_h:'',
|
||
month_h:'',
|
||
year_t:'',
|
||
month_t:'',
|
||
dataList:{},
|
||
nowData:[],
|
||
tableName:'',
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
var myDate = new Date();
|
||
let year = myDate.getFullYear();
|
||
let month = myDate.getMonth()+1;
|
||
that.year = year;
|
||
that.month = month;
|
||
that.year_t = year-1;
|
||
that.month_t = month;
|
||
if(that.year==12){
|
||
that.year_h = year-1;
|
||
that.month_h = 1;
|
||
}else{
|
||
that.year_h = year
|
||
that.month_h = month-1;
|
||
}
|
||
that.search_month = that.year;
|
||
this.getNowData();
|
||
let heights = document.getElementsByClassName('el-main')[0].clientHeight-30;
|
||
document.getElementById('myReport').style.height = heights+'px';
|
||
},
|
||
methods: {
|
||
monthChange(e){
|
||
let that = this;
|
||
if(e){
|
||
console.log('e',e);
|
||
that.year = Number(e);
|
||
}
|
||
|
||
},
|
||
getNowData(){
|
||
let that = this;
|
||
let params = {};
|
||
params.page = 0;
|
||
params.year_s = that.year;
|
||
that.tableName = that.year + '_' + that.month+'-生产月报表';
|
||
params.type = 'month_s';
|
||
this.$API.enm.enstat.req(params).then((res) => {
|
||
let dataList = {};
|
||
if(res.length <= 0){
|
||
return;
|
||
}
|
||
res.forEach(item => {
|
||
let label = item.mgroup_name;
|
||
if(!dataList[label]){
|
||
dataList[label] = [];
|
||
}
|
||
dataList[label].push(item);
|
||
});
|
||
//台产
|
||
let dataList2 = dataList.回转窑;
|
||
console.log('dataList2',dataList2);
|
||
// 取回转窑长度作为列索引
|
||
dataList2.forEach((item,index) => {
|
||
that.tableHeaders.push(item.month_s);
|
||
let colIndex = index+3;
|
||
that.tableDatas[0][colIndex] = dataList['原料磨'][index].production_hour;
|
||
that.tableDatas[1][colIndex] = dataList['电石渣'][index].production_hour;
|
||
that.tableDatas[2][colIndex] = dataList['煤磨'][index].production_hour;
|
||
that.tableDatas[3][colIndex] = dataList['回转窑'][index].production_hour;
|
||
that.tableDatas[4][colIndex] = dataList['水泥磨'][index].production_hour;
|
||
//能耗（kW·h/t）
|
||
that.tableDatas[5][colIndex] = dataList['回转窑'][index].celec_consume_unit;
|
||
that.tableDatas[6][colIndex] = dataList['回转窑'][index].coal_consume_unit;
|
||
that.tableDatas[7][colIndex] = dataList['回转窑'][index].cen_consume_unit;
|
||
that.tableDatas[8][colIndex] = dataList['水泥磨'][index].cen_consume_unit;
|
||
that.tableDatas[9][colIndex] = dataList['电石渣'][index].elec_consume_unit;
|
||
that.tableDatas[10][colIndex] = dataList['原料磨'][index].elec_consume_unit;
|
||
that.tableDatas[11][colIndex] = dataList['回转窑'][index].elec_consume_unit;
|
||
that.tableDatas[12][colIndex] = dataList['水泥磨'][index].elec_consume_unit;
|
||
that.tableDatas[13][colIndex] = dataList['水泥包装'][index].elec_consume_unit;
|
||
//产量(t)
|
||
that.tableDatas[14][colIndex] = dataList['电石渣'][index].total_production;
|
||
that.tableDatas[15][colIndex] = dataList['生料工序(二次配料)'][index].total_production;
|
||
that.tableDatas[16][colIndex] = dataList['回转窑'][index].total_production;
|
||
that.tableDatas[17][colIndex] = dataList['水泥磨'][index].total_production;
|
||
that.tableDatas[18][colIndex] = dataList['水泥包装'][index].total_production;
|
||
//成本(元/吨)
|
||
that.tableDatas[19][colIndex] = dataList['电石渣'][index].production_cost_unit;
|
||
that.tableDatas[20][colIndex] = dataList['原料磨'][index].production_cost_unit;
|
||
that.tableDatas[21][colIndex] = dataList['回转窑'][index].production_cost_unit;
|
||
that.tableDatas[22][colIndex] = dataList['水泥磨'][index].production_cost_unit;
|
||
// that.tableDatas[32][3] = dataList.水泥包装.production_cost_unit;
|
||
//耗电量（kW·h）
|
||
that.tableDatas[23][colIndex] = dataList['电石渣'][index].elec_consume;
|
||
that.tableDatas[24][colIndex] = dataList['生料工序(二次配料)'][index].elec_consume;
|
||
that.tableDatas[25][colIndex] = dataList['回转窑'][index].elec_consume;
|
||
that.tableDatas[26][colIndex] = dataList['水泥磨'][index].elec_consume;
|
||
that.tableDatas[27][colIndex] = dataList['水泥包装'][index].elec_consume;
|
||
that.tableDatas[28][colIndex] = dataList['生活区'][index].elec_consume;
|
||
})
|
||
// this.updateTableHeaders();
|
||
});
|
||
},
|
||
canCompute(a,b){
|
||
debugger;
|
||
if(b!=0&&b!=='/'&&b!==''&&b!==null){
|
||
if(a!=='/'&&a!==''&&a!==null){
|
||
a= Number(a)
|
||
b= Number(b)
|
||
let num =((a-b)/b*100).toFixed(2)
|
||
return num
|
||
}
|
||
}else{
|
||
return 0
|
||
}
|
||
},
|
||
|
||
getTableData(){
|
||
// 清空table数据 当item里面有数据时每项索引大于2时候
|
||
this.tableDatas.forEach((item,index) => {
|
||
item.length = 3;
|
||
});
|
||
this.tableHeaders = [];
|
||
this.getNowData();
|
||
},
|
||
// updateTableHeaders() {
|
||
// let that = this;
|
||
// // 假设 tableDatas 至少有一行数据，且列数始终 >= 3
|
||
// if (this.tableDatas.length > 0) {
|
||
// let columnCount = this.tableDatas[0].length - 3; // 计算有多少月
|
||
// this.tableHeaders = Array.from({ length: columnCount }, (_, i) => i + 1);
|
||
// } else {
|
||
// this.tableHeaders = [];
|
||
// }
|
||
// },
|
||
handlePrint() {
|
||
this.$PRINT('#myReport');
|
||
},
|
||
exportExcel() {
|
||
this.exportLoading = true;
|
||
this.$XLSX('#myReport', this.tableName)
|
||
this.exportLoading = false;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.topTableDiv{
|
||
position: absolute;
|
||
}
|
||
#myReport{
|
||
overflow-y: scroll;
|
||
}
|
||
.myTable thead {
|
||
position: sticky;
|
||
top: 0; /* 固定表头在顶部 */
|
||
background-color: #008080; /* 设置表头的背景颜色 */
|
||
z-index: 1; /* 保证表头在内容之上 */
|
||
}
|
||
|
||
.myTable th {
|
||
padding: 8px;
|
||
text-align: center;
|
||
background-color: #008080; /* 设置表头的背景色 */
|
||
}
|
||
|
||
.myTable td {
|
||
padding: 8px;
|
||
text-align: center;
|
||
}
|
||
</style> |