327 lines
13 KiB
Vue
327 lines
13 KiB
Vue
<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="myTable1" 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="6">原料磨</th>
|
||
<th rowspan="2">压缩空气（m3）</th>
|
||
</tr>
|
||
<tr v-if="deptName=='烧成车间'">
|
||
<th colspan="11">回转窑</th>
|
||
<th colspan="4">煤磨</th>
|
||
<th rowspan="2">压缩空气（m3）</th>
|
||
</tr>
|
||
<tr v-if="deptName=='水泥车间'">
|
||
<th colspan="5">水泥磨</th>
|
||
<th colspan="4">包装</th>
|
||
<th rowspan="2">压缩空气（m3）</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>单位产品综合能耗（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 = {};
|
||
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);
|
||
}
|
||
params.mgroup__belong_dept = that.query.belong_dept;
|
||
|
||
this.$API.enm.enstat.req(params).then((res) => {
|
||
let data = res.results;
|
||
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(that.deptName=='烧成车间'){
|
||
if(item.mgroup_name=='回转窑'){
|
||
wrapArr[ind][1]=item
|
||
}else{
|
||
wrapArr[ind][0]=item
|
||
}
|
||
}else{
|
||
if(item.mgroup_name=='水泥磨'){
|
||
wrapArr[ind][1]=item
|
||
}else{
|
||
wrapArr[ind][0]=item
|
||
}
|
||
}
|
||
});
|
||
// debugger;
|
||
// console.log(wrapArr);
|
||
wrapArr.forEach((item1)=>{
|
||
//item1------一天的数据
|
||
if(item1!=undefined){
|
||
let itemArr = [];
|
||
let time =item1[0].day_s!=null? item1[0].year_s+'.'+item1[0].month_s+'.'+item1[0].day_s:item1[0].year_s+'.'+item1[0].month_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）
|
||
itemArr.push( item1[0].pcoal_consume)//柴油（t）
|
||
itemArr.push( item1[0].pcoal_coal_consume)//柴油折标煤（tce)
|
||
itemArr.push( item1[0].out_steam)//余热锅炉外送蒸汽（t）
|
||
itemArr.push( item1[0].out_steam_coal)//余热锅炉外送蒸汽折标煤（tce)
|
||
}else if(that.deptName=='水泥车间'){
|
||
itemArr.push( item1[0].water_consume)//水
|
||
}
|
||
itemArr.push( item1[0].total_production)
|
||
itemArr.push( item1[0].cen_consume_unit)
|
||
|
||
itemArr.push( item1[1].elec_consume)
|
||
itemArr.push( item1[1].elec_consume*0.1229/1000)
|
||
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].cen_consume_unit)
|
||
itemArr.push( item1[1].cair_consume)//压缩空气
|
||
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> |