factory_web/src/views/enm_energy/energy.vue

373 lines
16 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-header>
<div class="left-panel">
<el-select
v-model="query.belong_dept"
placeholder="车间"
clearable
@change="deptChange"
class="headerSearch"
>
<el-option
v-for="item in deptOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-select
v-model="query.type"
placeholder="查询类型"
clearable
class="headerSearch"
@change="typeCange"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-date-picker
v-model="query.month"
type="month"
value-format="YYYY-MM"
format="YYYY-MM"
placeholder="查询月份"
v-if="query.type==0"
class="headerSearch"
/>
<el-date-picker
v-model="query.year"
type="year"
value-format="YYYY"
format="YYYY"
placeholder="查询年份"
v-if="query.type==1"
class="headerSearch"
/>
<el-date-picker
v-model="query.yearStart"
type="year"
value-format="YYYY"
format="YYYY"
placeholder="起始年份"
v-if="query.type==2"
class="headerSearch"
/>
<el-button
type="primary"
icon="el-icon-search"
@click="getTableData"
></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">
<h3 style="text-align: center;">{{ tableName }}</h3>
<table border="1" cellspacing="0" :key="timeStamp" id="myTable" class="myTable">
<thead class="myTableHead">
<tr>
<th rowspan="3">日期</th>
<th v-if="deptName=='原料车间'" colspan="11">原料车间</th>
<th v-if="deptName=='烧成车间'" colspan="16">烧成车间</th>
<th v-if="deptName=='水泥车间'" colspan="10">水泥车间</th>
</tr>
<tr v-if="deptName=='原料车间'">
<th colspan="4">电石渣</th>
<th colspan="4">原料磨</th>
<th rowspan="2">压缩空气m3</th>
<th rowspan="2">车间用水t</th>
</tr>
<tr v-if="deptName=='烧成车间'">
<th colspan="10">回转窑</th>
<th colspan="4">煤磨</th>
<th rowspan="2">压缩空气m3</th>
<th rowspan="2">车间用水t</th>
</tr>
<tr v-if="deptName=='水泥车间'">
<th colspan="4">水泥磨</th>
<th colspan="4">包装</th>
<th rowspan="2">压缩空气m3</th>
<th rowspan="2">车间用水t</th>
</tr>
<tr>
<th>电量KW.h</th>
<th>电量折标煤tce</th>
<th v-if="deptName=='烧成车间'">煤粉t</th>
<th v-if="deptName=='烧成车间'">煤粉折标煤tce</th>
<!-- <th v-if="deptName!='原料车间'">水t</th> -->
<th v-if="deptName=='烧成车间'">柴油t</th>
<th v-if="deptName=='烧成车间'">柴油折标煤tce</th>
<th v-if="deptName=='烧成车间'">余热锅炉外送蒸汽t</th>
<th v-if="deptName=='烧成车间'">余热锅炉外送蒸汽折标煤tce</th>
<th>产品产量t</th>
<th v-if="deptName=='烧成车间'">单位产品综合能耗tce/t</th>
<th v-else>单位产品能耗tce/t</th>
<th>电量KW.h</th>
<th>电量折标煤tce</th>
<!-- <th v-if="deptName=='原料车间'">水t</th> -->
<!-- <th v-if="deptName=='原料车间'">窑尾余热利用tce</th> -->
<th>产品产量t</th>
<th>单位产品能耗tce/t</th>
</tr>
</thead>
<tr v-for="(item,index) in tableDatas3" :key="index">
<template v-if="item!==null&&item!==undefined">
<td v-for="(item1,index1) in item" :key="index1">{{ item1 }}</td>
</template>
</tr>
</table>
</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
query:{
type:0,
year:'',
month:'',
yearStart:'',
},
deptName:'',
tableName:'全厂能源日统计',
options:[
{id:0,name:'日统计'},
{id:1,name:'月统计'},
{id:2,name:'年统计'},
],
tableHead:['车间','工段','能源分类','1号','2号','3号','4号','5号','6号','7号','8号'],
deptOptions:[],
tableDatas3:[],
sourceData:{}
};
},
mounted() {
var myDate = new Date();
let month = myDate.getMonth()+1;
if(month<10){
month = '0'+month;
}
this.query.month = myDate.getFullYear()+'-'+month;
this.getGroup();
// this.getMgroup();
},
methods: {
typeCange(value){
if(value==1){
this.tableName = '全厂能源日统计'
}else if(value==1){
this.tableName = '全厂能源月统计'
}else{
this.tableName = '全厂能源年统计'
}
},
deptChange(e){
let that = this;
that.deptOptions.forEach(item=>{
if(item.id==e){
that.deptName = item.name;
that.tableDatas3 = [];
}
})
},
getGroup() {
let that = this;
that.$API.system.dept.list.req({ page_size: 3 , type:'dept'}).then(res=>{
that.deptOptions = res.results;
that.deptName = res.results[0].name;
that.query.belong_dept = res.results[0].id;
that.getData();
});
},
getData(){
let that = this;
let params = {page:0};
let arr = [];
if(that.query.type==0){//日
params.type='day_s';
arr = that.query.month.split('-');
params.year_s = Number(arr[0]);
params.month_s = Number(arr[1]);
}else if(that.query.type==1){//月
params.type='month_s';
params.year_s = Number(that.query.year);
}else if (that.query.type==2){
params.type='year_s';
params.year_s = Number(that.query.yearStart);
}
params.mgroup__belong_dept = that.query.belong_dept;
this.$API.enm.enstat.req(params).then((res) => {
let data = res;
let wrapArr = [];
let innerArr = [];
let ind = 0;
//1、将相同日期或月份/年份的数据放到一组
data.forEach(item => {
if(that.query.type==0){//日统计
ind = item.day_s-1;
}else if(that.query.type==1){//月统计
ind = item.month_s-1;
}
if(wrapArr[ind]){
}else{
wrapArr[ind] = [];
}
if(that.deptName=='原料车间'){
if(item.mgroup_name=='电石渣'){
wrapArr[ind][0]=item
}else if(item.mgroup_name=='原料磨'){
wrapArr[ind][1]=item
}else if(item.mgroup_name=='原料压缩空气'){
wrapArr[ind][2]=item
}else if(item.mgroup_name=='原料车间用水'){
wrapArr[ind][3]=item
}
}else if(that.deptName=='烧成车间'){
if(item.mgroup_name=='回转窑'){
wrapArr[ind][0]=item
}else if (item.mgroup_name=='烧成压缩空气') {
wrapArr[ind][2]=item
}
else if (item.mgroup_name=='烧成车间用水') {
wrapArr[ind][3]=item
}else{
wrapArr[ind][1]=item
}
}else{
if(item.mgroup_name=='水泥磨'){
wrapArr[ind][0]=item
}else if(item.mgroup_name=='水泥压缩空气'){
wrapArr[ind][2]=item
}else if(item.mgroup_name=='水泥车间用水'){
wrapArr[ind][3]=item
}else if(item.mgroup_name=='水泥包装'){
wrapArr[ind][1]=item
}
}
});
// debugger;
// console.log(wrapArr);
wrapArr.forEach((item1)=>{
//item1------一天的数据
if(item1!=undefined){
let itemArr = [];
let time = item1[0].day_s && item1[0].month_s
? item1[0].year_s + '.' + item1[0].month_s + '.' + item1[0].day_s
: item1[0].month_s
? item1[0].year_s + '.' + item1[0].month_s
: item1[0].year_s;
itemArr.push(time)
itemArr.push( item1[0].elec_consume) //电量
itemArr.push( item1[0].elec_coal_consume) //电量折标煤
if(that.deptName=='烧成车间'){
itemArr.push( item1[0].pcoal_consume)//煤粉t
itemArr.push( item1[0].pcoal_coal_consume)//煤粉折标煤tce)
// itemArr.push( item1[0].water_consume)//水t
// console.log(item1[0].imaterial_data_dict)
if (item1[0].imaterial_data_dict.length>0 || item1[0].imaterial_data_dict.柴油){
// console.log(item1[0].imaterial_data_dict.柴油.amount_consume)
itemArr.push( item1[0].imaterial_data_dict.柴油.amount_consume)//柴油t
itemArr.push( (item1[0].imaterial_data_dict.柴油.amount_consume*1.4571).toFixed(2))//柴油折标煤tce)
}else{
itemArr.push(0)//柴油t
itemArr.push(0)//柴油折标煤tce)
}
itemArr.push( item1[0].out_steam)//余热锅炉外送蒸汽t
itemArr.push( item1[0].out_steam_coal)//余热锅炉外送蒸汽折标煤tce)
}
itemArr.push( item1[0].total_production) //总产量
if(item1[1].mgroup_name == '回转窑'){
itemArr.push( item1[0].cen_consume_unit)
}else{
itemArr.push( item1[0].en_consume_unit) // 单位产品综合能耗
}
if (item1[1]){
itemArr.push( item1[1].elec_consume)
itemArr.push( item1[1].elec_coal_consume)
}else{
itemArr.push( 0)
itemArr.push( 0)
}
// if(that.deptName=='原料车间'){
// // itemArr.push( item1[1].water_consume)//水
// // itemArr.push( item1[1].kiln_end_heat)//窑尾余热
// }
itemArr.push( item1[1].total_production)
itemArr.push( item1[1].en_consume_unit)
if(item1 &&item1[2]){
itemArr.push(item1[2].cair_consume)//压缩空气
}else{
itemArr.push( 0)
}
if(item1 &&item1[3]){
itemArr.push(item1[3].water_consume)//水
}else{
itemArr.push(0)
}
innerArr.push(itemArr)
}
})
that.tableDatas3 = innerArr;
});
},
getTableData(){
this.getData();
},
handlePrint() {
this.$PRINT('#myReport');
},
exportExcel() {
this.exportLoading = true;
this.$XLSX('#myTable', this.tableName)
this.exportLoading = false;
},
}
};
</script>
<style>
#numTable{
margin-left: 37px;
}
#numTable td{
height: 32px;
padding-left: 5px;
}
.numCell{
width: 80px;
}
.numCell.numCell_last{
width: 100px;
}
.searchHead{
display:flex
}
.middleText{
height: 32px;
line-height: 32px;
margin: 0 5px;
display: inline-block;
}
.searchBtn{
margin-left: 5px;
}
</style>