fix:电耗报表动态合并
This commit is contained in:
parent
b7fc2b8ded
commit
7e50f935e3
|
|
@ -1,7 +1,7 @@
|
||||||
<!-- 全厂电量统计 -->
|
<!-- 全厂电量统计 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container" id="app-container" style="height: 100%">
|
||||||
<el-header>
|
<el-header id="app-header">
|
||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="search_date"
|
v-model="search_date"
|
||||||
|
|
@ -26,99 +26,152 @@
|
||||||
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-card style="margin-top: 5px">
|
<el-main>
|
||||||
<div class="printWrap">
|
<el-card>
|
||||||
<div ref="print" id="myReport" class="printContainer">
|
<div>
|
||||||
<table
|
<div ref="print" id="myReport">
|
||||||
border="1"
|
<!-- <table
|
||||||
:width="tableWidth"
|
border="1"
|
||||||
cellspacing="0"
|
:width="tableWidth"
|
||||||
:key="timeStamp"
|
cellspacing="0"
|
||||||
id="myTable"
|
:key="timeStamp"
|
||||||
class="myTable"
|
id="myTable"
|
||||||
>
|
class="myTable"
|
||||||
<thead class="myTableHead">
|
>
|
||||||
<tr>
|
<thead class="myTableHead">
|
||||||
<th :colspan="headerLength">电量消耗日报表</th>
|
<tr>
|
||||||
|
<th :colspan="headerLength">
|
||||||
|
电量消耗日报表
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>工段</th>
|
||||||
|
<th>设备</th>
|
||||||
|
<th>单位</th>
|
||||||
|
<th v-for="item in this.days" :key="item">
|
||||||
|
{{ item }}日
|
||||||
|
</th>
|
||||||
|
<th>本月合计</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tr
|
||||||
|
v-for="(item, index) in tableDatas"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="numCell"
|
||||||
|
v-if="index == 0"
|
||||||
|
rowspan="4"
|
||||||
|
>
|
||||||
|
{{ item[0] }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="numCell"
|
||||||
|
v-else-if="index == 4"
|
||||||
|
rowspan="5"
|
||||||
|
>
|
||||||
|
{{ item[0] }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="numCell"
|
||||||
|
v-else-if="index == 9"
|
||||||
|
rowspan="5"
|
||||||
|
>
|
||||||
|
{{ item[0] }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="numCell"
|
||||||
|
v-else-if="index == 14"
|
||||||
|
rowspan="4"
|
||||||
|
>
|
||||||
|
{{ item[0] }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="numCell"
|
||||||
|
v-else-if="index == 18"
|
||||||
|
rowspan="3"
|
||||||
|
>
|
||||||
|
{{ item[0] }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="numCell"
|
||||||
|
v-else-if="index == 21"
|
||||||
|
rowspan="5"
|
||||||
|
>
|
||||||
|
{{ item[0] }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="numCell"
|
||||||
|
v-else-if="
|
||||||
|
index == 26 ||
|
||||||
|
index == 27 ||
|
||||||
|
index == 28 ||
|
||||||
|
index == 29
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item[0] }}
|
||||||
|
</td>
|
||||||
|
<td class="numCell">{{ item[1] }}</td>
|
||||||
|
<td class="numCell">{{ item[2] }}</td>
|
||||||
|
<td
|
||||||
|
v-for="day in days"
|
||||||
|
:key="day"
|
||||||
|
class="numCell"
|
||||||
|
@click="itemClick(item, index)"
|
||||||
|
>
|
||||||
|
{{ item[2 + day] }}
|
||||||
|
</td>
|
||||||
|
<td class="numCell">
|
||||||
|
{{ item[headerLength - 1] }}
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
</table> -->
|
||||||
<th>工段</th>
|
<el-table
|
||||||
<th>设备</th>
|
id="hourBaseTable"
|
||||||
<th>单位</th>
|
:data="tableDatas2"
|
||||||
<th v-for="item in this.days" :key="item">
|
style="width: 100%"
|
||||||
{{ item }}日
|
border
|
||||||
</th>
|
:height="tableHeight"
|
||||||
<th>本月合计</th>
|
:span-method="objectSpanMethod"
|
||||||
</tr>
|
@cell-click="handleCellClick"
|
||||||
</thead>
|
>
|
||||||
<tr v-for="(item, index) in tableDatas" :key="index">
|
<el-table-column
|
||||||
<td class="numCell" v-if="index == 0" rowspan="4">
|
label="工段"
|
||||||
{{ item[0] }}
|
prop="mgroupName"
|
||||||
</td>
|
width="100"
|
||||||
<td
|
fixed
|
||||||
class="numCell"
|
|
||||||
v-else-if="index == 4"
|
|
||||||
rowspan="5"
|
|
||||||
>
|
>
|
||||||
{{ item[0] }}
|
</el-table-column>
|
||||||
</td>
|
<el-table-column
|
||||||
<td
|
label="设备"
|
||||||
class="numCell"
|
prop="nickname"
|
||||||
v-else-if="index == 9"
|
width="110"
|
||||||
rowspan="5"
|
fixed
|
||||||
>
|
>
|
||||||
{{ item[0] }}
|
</el-table-column>
|
||||||
</td>
|
<el-table-column label="单位" prop="unit" fixed>
|
||||||
<td
|
</el-table-column>
|
||||||
class="numCell"
|
<el-table-column
|
||||||
v-else-if="index == 14"
|
v-for="item in xAxisData"
|
||||||
rowspan="4"
|
:key="item"
|
||||||
|
:label="item"
|
||||||
|
:prop="item"
|
||||||
|
width="100"
|
||||||
>
|
>
|
||||||
{{ item[0] }}
|
</el-table-column>
|
||||||
</td>
|
<el-table-column
|
||||||
<td
|
label="合计"
|
||||||
class="numCell"
|
prop="sum"
|
||||||
v-else-if="index == 18"
|
width="100"
|
||||||
rowspan="3"
|
fixed="right"
|
||||||
>
|
>
|
||||||
{{ item[0] }}
|
</el-table-column>
|
||||||
</td>
|
</el-table>
|
||||||
<td
|
</div>
|
||||||
class="numCell"
|
|
||||||
v-else-if="index == 21"
|
|
||||||
rowspan="5"
|
|
||||||
>
|
|
||||||
{{ item[0] }}
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="numCell"
|
|
||||||
v-else-if="
|
|
||||||
index == 26 ||
|
|
||||||
index == 27 ||
|
|
||||||
index == 28 ||
|
|
||||||
index == 29
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ item[0] }}
|
|
||||||
</td>
|
|
||||||
<td class="numCell">{{ item[1] }}</td>
|
|
||||||
<td class="numCell">{{ item[2] }}</td>
|
|
||||||
<td
|
|
||||||
v-for="day in days"
|
|
||||||
:key="day"
|
|
||||||
class="numCell"
|
|
||||||
@click="itemClick(item, index)"
|
|
||||||
>
|
|
||||||
{{ item[2 + day] }}
|
|
||||||
</td>
|
|
||||||
<td class="numCell">
|
|
||||||
{{ item[headerLength - 1] }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-card>
|
||||||
</el-card>
|
</el-main>
|
||||||
|
|
||||||
<el-dialog v-model="itemVisible" :title="tableName">
|
<el-dialog v-model="itemVisible" :title="tableName">
|
||||||
<scEcharts
|
<scEcharts
|
||||||
height="400px"
|
height="400px"
|
||||||
|
|
@ -139,20 +192,25 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
days: 30,
|
||||||
year: "",
|
year: "",
|
||||||
month: "",
|
month: "",
|
||||||
myChart: null,
|
myChart: null,
|
||||||
search_date: "",
|
search_date: "",
|
||||||
headerLength: 33,
|
headerLength: 33,
|
||||||
|
tableHeight: 600,
|
||||||
itemVisible: false,
|
itemVisible: false,
|
||||||
xAxisData: [],
|
xAxisData: [],
|
||||||
|
indexList: [],
|
||||||
mpointList: [],
|
mpointList: [],
|
||||||
tableDatas: [],
|
tableDatas: [],
|
||||||
|
tableDatas2: [],
|
||||||
timeStamp: null,
|
timeStamp: null,
|
||||||
tableWidth: "3300",
|
tableWidth: "3300",
|
||||||
itemChartTitle: "",
|
itemChartTitle: "",
|
||||||
tableName: "全厂电量日统计",
|
tableName: "全厂电量日统计",
|
||||||
sourceData: {},
|
sourceData: {},
|
||||||
|
mgroupObj: {},
|
||||||
option: {
|
option: {
|
||||||
title: {
|
title: {
|
||||||
text: "全厂电量日统计",
|
text: "全厂电量日统计",
|
||||||
|
|
@ -264,8 +322,30 @@ export default {
|
||||||
that.xAxisData.push(n + "日");
|
that.xAxisData.push(n + "日");
|
||||||
}
|
}
|
||||||
this.getMPoints();
|
this.getMPoints();
|
||||||
|
let heightContainer =
|
||||||
|
document.getElementById("app-container").clientHeight;
|
||||||
|
let heightHeader = document.getElementById("app-header").clientHeight;
|
||||||
|
let heightTable = heightContainer - heightHeader - 35;
|
||||||
|
that.tableHeight = heightTable;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||||
|
let that = this;
|
||||||
|
if (columnIndex == 0) {
|
||||||
|
if (that.indexList.indexOf(rowIndex) > -1) {
|
||||||
|
let rowspans = that.mgroupObj[row.mgroupName];
|
||||||
|
return {
|
||||||
|
rowspan: rowspans,
|
||||||
|
colspan: 1,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
rowspan: 1,
|
||||||
|
colspan: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
dateChange(e) {
|
dateChange(e) {
|
||||||
let that = this;
|
let that = this;
|
||||||
let arr = e.split("-");
|
let arr = e.split("-");
|
||||||
|
|
@ -295,7 +375,23 @@ export default {
|
||||||
dataLoop() {
|
dataLoop() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.tableDatas = [];
|
that.tableDatas = [];
|
||||||
|
let _mgroup = [],
|
||||||
|
_nameLength = [],
|
||||||
|
indexList = [];
|
||||||
|
let mgroupObj = {};
|
||||||
that.mpointList.forEach((item, index) => {
|
that.mpointList.forEach((item, index) => {
|
||||||
|
let indexs = _mgroup.indexOf(item.mgroup_name);
|
||||||
|
if (indexs > -1) {
|
||||||
|
_nameLength[indexs] += 1;
|
||||||
|
} else {
|
||||||
|
_mgroup.push(item.mgroup_name);
|
||||||
|
_nameLength.push(1);
|
||||||
|
indexList.push(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < _mgroup.length; i++) {
|
||||||
|
mgroupObj[_mgroup[i]] = _nameLength[i];
|
||||||
|
}
|
||||||
let arr = [];
|
let arr = [];
|
||||||
arr[0] =
|
arr[0] =
|
||||||
item.mgroup_name != null
|
item.mgroup_name != null
|
||||||
|
|
@ -309,8 +405,17 @@ export default {
|
||||||
arr[i + 3] = 0;
|
arr[i + 3] = 0;
|
||||||
}
|
}
|
||||||
that.tableDatas.push(arr);
|
that.tableDatas.push(arr);
|
||||||
|
let obj = {};
|
||||||
|
obj.mgroupName =
|
||||||
|
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||||
|
obj.nickname =
|
||||||
|
item.nickname != null ? item.nickname : item.name;
|
||||||
|
obj.unit = item.unit;
|
||||||
|
that.tableDatas2.push(obj);
|
||||||
that.getData(item.id, index);
|
that.getData(item.id, index);
|
||||||
});
|
});
|
||||||
|
that.mgroupObj = mgroupObj;
|
||||||
|
that.indexList = indexList;
|
||||||
},
|
},
|
||||||
getData(id, index) {
|
getData(id, index) {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
@ -327,6 +432,8 @@ export default {
|
||||||
let ind = item.day + 2;
|
let ind = item.day + 2;
|
||||||
that.tableDatas[index][ind] = item.val;
|
that.tableDatas[index][ind] = item.val;
|
||||||
sum += Number(item.val);
|
sum += Number(item.val);
|
||||||
|
let keyName = item.day + "日";
|
||||||
|
that.tableDatas2[index][keyName] = item.val;
|
||||||
});
|
});
|
||||||
sum = sum * 100;
|
sum = sum * 100;
|
||||||
sum = Math.round(sum);
|
sum = Math.round(sum);
|
||||||
|
|
@ -334,9 +441,20 @@ export default {
|
||||||
let dayss = 0;
|
let dayss = 0;
|
||||||
dayss = this.days + 3;
|
dayss = this.days + 3;
|
||||||
that.tableDatas[index][dayss] = sum.toFixed(2);
|
that.tableDatas[index][dayss] = sum.toFixed(2);
|
||||||
|
that.tableDatas2[index].sum = sum.toFixed(2);
|
||||||
that.$forceUpdate();
|
that.$forceUpdate();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
handleCellClick(row, column, cell, event) {
|
||||||
|
let that = this;
|
||||||
|
|
||||||
|
let index = that.tableDatas2.indexOf(row);
|
||||||
|
console.log(index, "index");
|
||||||
|
let lineData = that.tableDatas[index].slice(3, that.days + 3);
|
||||||
|
that.option.xAxis.data = that.xAxisData;
|
||||||
|
that.option.series[0].data = lineData;
|
||||||
|
this.itemVisible = true;
|
||||||
|
},
|
||||||
itemClick(item, index) {
|
itemClick(item, index) {
|
||||||
let that = this;
|
let that = this;
|
||||||
let lineData = that.tableDatas[index].slice(3, that.headerLength);
|
let lineData = that.tableDatas[index].slice(3, that.headerLength);
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<!-- 全厂电量统计 -->
|
<!-- 全厂电量统计 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container" id="app-container" style="height: 100%">
|
||||||
<el-header>
|
<el-header id="app-header">
|
||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="search_date"
|
v-model="search_date"
|
||||||
|
|
@ -26,10 +26,12 @@
|
||||||
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-card style="margin-top: 5px">
|
<el-main>
|
||||||
<div class="printWrap">
|
<el-card>
|
||||||
<div ref="print" id="myReport" class="printContainer">
|
<div>
|
||||||
<table
|
<!-- <div ref="print" id="myReport" class="printContainer"> -->
|
||||||
|
<div ref="print" id="myReport" class="printContainer">
|
||||||
|
<!-- <table
|
||||||
border="1"
|
border="1"
|
||||||
width="2700"
|
width="2700"
|
||||||
cellspacing="0"
|
cellspacing="0"
|
||||||
|
|
@ -114,10 +116,52 @@
|
||||||
</td>
|
</td>
|
||||||
<td class="numCell">{{ item[27] }}</td>
|
<td class="numCell">{{ item[27] }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table> -->
|
||||||
|
<el-table
|
||||||
|
id="hourBaseTable"
|
||||||
|
:data="tableDatas2"
|
||||||
|
style="width: 100%"
|
||||||
|
border
|
||||||
|
:height="tableHeight"
|
||||||
|
:span-method="objectSpanMethod"
|
||||||
|
@cell-click="handleCellClick"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="工段"
|
||||||
|
prop="mgroupName"
|
||||||
|
width="100"
|
||||||
|
fixed
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="设备"
|
||||||
|
prop="nickname"
|
||||||
|
width="110"
|
||||||
|
fixed
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="单位" prop="unit" fixed>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-for="(item, index) in 24"
|
||||||
|
:key="item"
|
||||||
|
:label="index + '时'"
|
||||||
|
:prop="index + '时'"
|
||||||
|
width="100"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="合计"
|
||||||
|
prop="sum"
|
||||||
|
width="100"
|
||||||
|
fixed="right"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-card>
|
||||||
</el-card>
|
</el-main>
|
||||||
<el-dialog v-model="itemVisible" :title="itemChartTitle">
|
<el-dialog v-model="itemVisible" :title="itemChartTitle">
|
||||||
<scEcharts
|
<scEcharts
|
||||||
height="400px"
|
height="400px"
|
||||||
|
|
@ -142,39 +186,11 @@ export default {
|
||||||
year: "",
|
year: "",
|
||||||
month: "",
|
month: "",
|
||||||
search_date: "",
|
search_date: "",
|
||||||
tableDatas1: [
|
mgroupObj: {},
|
||||||
["石灰石破碎", "破碎机", "kw.h"], //0
|
indexList: [],
|
||||||
["石灰石破碎", "堆取料机", "kw.h"],
|
|
||||||
["石灰石破碎", "低压变压器柜", "kw.h"],
|
|
||||||
["石灰石破碎", "石灰石破碎合计", "kw.h"],
|
|
||||||
["原料磨", "循环风机", "kw.h"],
|
|
||||||
["原料磨", "辊压机", "kw.h"],
|
|
||||||
["原料磨", "调配变压器", "kw.h"],
|
|
||||||
["原料磨", "低压变压器柜器", "kw.h"],
|
|
||||||
["原料磨", "原料磨系统合计", "kw.h"],
|
|
||||||
["回转窑", "尾排风机", "kw.h"],
|
|
||||||
["回转窑", "高温风机", "kw.h"],
|
|
||||||
["回转窑", "头排风机", "kw.h"],
|
|
||||||
["回转窑", "低压变压器柜", "kw.h"],
|
|
||||||
["回转窑", "回转窑烧成系统合计", "kw.h"],
|
|
||||||
["煤磨", "煤磨主电机", "kw.h"],
|
|
||||||
["煤磨", "煤磨排风机", "kw.h"],
|
|
||||||
["煤磨", "低压变压器柜", "kw.h"],
|
|
||||||
["煤磨", "煤磨系统合计", "kw.h"],
|
|
||||||
["余热发电", "余热发电量", "kw.h"],
|
|
||||||
["余热发电", "余热发电自用电量", "kw.h"],
|
|
||||||
["余热发电", "余热供电量", "kw.h"],
|
|
||||||
["空压机", "1#空压机", "kw.h"],
|
|
||||||
["空压机", "2#空压机", "kw.h"],
|
|
||||||
["空压机", "3#空压机", "kw.h"],
|
|
||||||
["空压机", "4#空压机", "kw.h"],
|
|
||||||
["空压机", "空压机合计", "kw.h"],
|
|
||||||
["富氧燃烧系统", "富氧燃烧耗电设备", "kw.h"],
|
|
||||||
["生产总耗电量", "生产部分总耗电", "kw.h"],
|
|
||||||
["全厂进线", "全厂耗电量", "kw.h"],
|
|
||||||
],
|
|
||||||
mpointList: [],
|
mpointList: [],
|
||||||
tableDatas: [],
|
tableDatas: [],
|
||||||
|
tableDatas2: [],
|
||||||
hours: [
|
hours: [
|
||||||
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
|
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
|
||||||
19, 20, 21, 22, 23, 24,
|
19, 20, 21, 22, 23, 24,
|
||||||
|
|
@ -190,6 +206,7 @@ export default {
|
||||||
"生产总耗电量",
|
"生产总耗电量",
|
||||||
"全厂进线",
|
"全厂进线",
|
||||||
],
|
],
|
||||||
|
tableHeight: 600,
|
||||||
mgroup: "石灰石破碎",
|
mgroup: "石灰石破碎",
|
||||||
itemChartTitle: "",
|
itemChartTitle: "",
|
||||||
itemChartData: [],
|
itemChartData: [],
|
||||||
|
|
@ -302,19 +319,41 @@ export default {
|
||||||
that.year = year;
|
that.year = year;
|
||||||
that.month = month;
|
that.month = month;
|
||||||
that.search_date = year + "-" + month_s + "-" + day_s;
|
that.search_date = year + "-" + month_s + "-" + day_s;
|
||||||
for (let i = 0; i < that.tableDatas.length; i++) {
|
// for (let i = 0; i < that.tableDatas.length; i++) {
|
||||||
for (let j = 0; j < 24; j++) {
|
// for (let j = 0; j < 24; j++) {
|
||||||
let k = 3 + j;
|
// let k = 3 + j;
|
||||||
that.tableDatas[i][k] = 0;
|
// that.tableDatas[i][k] = 0;
|
||||||
this.$forceUpdate();
|
// this.$forceUpdate();
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
for (let n = 0; n < 24; n++) {
|
for (let n = 0; n < 24; n++) {
|
||||||
that.xAxisData.push(n + "时");
|
that.xAxisData.push(n + "时");
|
||||||
}
|
}
|
||||||
this.getMPoints();
|
this.getMPoints();
|
||||||
|
let heightContainer =
|
||||||
|
document.getElementById("app-container").clientHeight;
|
||||||
|
let heightHeader = document.getElementById("app-header").clientHeight;
|
||||||
|
let heightTable = heightContainer - heightHeader - 35;
|
||||||
|
that.tableHeight = heightTable;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||||
|
let that = this;
|
||||||
|
if (columnIndex == 0) {
|
||||||
|
if (that.indexList.indexOf(rowIndex) > -1) {
|
||||||
|
let rowspans = that.mgroupObj[row.mgroupName];
|
||||||
|
return {
|
||||||
|
rowspan: rowspans,
|
||||||
|
colspan: 1,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
rowspan: 1,
|
||||||
|
colspan: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
dateChange(e) {
|
dateChange(e) {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.tableDatas = [];
|
that.tableDatas = [];
|
||||||
|
|
@ -331,7 +370,7 @@ export default {
|
||||||
// }
|
// }
|
||||||
let nowDate = new Date();
|
let nowDate = new Date();
|
||||||
that.timeStamp = nowDate.getTime();
|
that.timeStamp = nowDate.getTime();
|
||||||
that.getLengthData();
|
// that.getLengthData();
|
||||||
that.dataLoop();
|
that.dataLoop();
|
||||||
},
|
},
|
||||||
getMPoints() {
|
getMPoints() {
|
||||||
|
|
@ -346,7 +385,6 @@ export default {
|
||||||
query: "{ id, name, nickname, mgroup_name, unit }",
|
query: "{ id, name, nickname, mgroup_name, unit }",
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
// let data = res.slice(3);
|
|
||||||
that.mpointList = res;
|
that.mpointList = res;
|
||||||
that.dataLoop();
|
that.dataLoop();
|
||||||
});
|
});
|
||||||
|
|
@ -363,7 +401,23 @@ export default {
|
||||||
dataLoop() {
|
dataLoop() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.tableDatas = [];
|
that.tableDatas = [];
|
||||||
|
let _mgroup = [],
|
||||||
|
_nameLength = [],
|
||||||
|
indexList = [];
|
||||||
|
let mgroupObj = {};
|
||||||
that.mpointList.forEach((item, index) => {
|
that.mpointList.forEach((item, index) => {
|
||||||
|
let indexs = _mgroup.indexOf(item.mgroup_name);
|
||||||
|
if (indexs > -1) {
|
||||||
|
_nameLength[indexs] += 1;
|
||||||
|
} else {
|
||||||
|
_mgroup.push(item.mgroup_name);
|
||||||
|
_nameLength.push(1);
|
||||||
|
indexList.push(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < _mgroup.length; i++) {
|
||||||
|
mgroupObj[_mgroup[i]] = _nameLength[i];
|
||||||
|
}
|
||||||
let arr = [];
|
let arr = [];
|
||||||
arr[0] =
|
arr[0] =
|
||||||
item.mgroup_name != null ? item.mgroup_name : item.name;
|
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||||
|
|
@ -373,8 +427,17 @@ export default {
|
||||||
arr[i + 3] = 0;
|
arr[i + 3] = 0;
|
||||||
}
|
}
|
||||||
that.tableDatas.push(arr);
|
that.tableDatas.push(arr);
|
||||||
|
let obj = {};
|
||||||
|
obj.mgroupName =
|
||||||
|
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||||
|
obj.nickname =
|
||||||
|
item.nickname != null ? item.nickname : item.name;
|
||||||
|
obj.unit = item.unit;
|
||||||
|
that.tableDatas2.push(obj);
|
||||||
that.getData(item.id, index);
|
that.getData(item.id, index);
|
||||||
});
|
});
|
||||||
|
that.mgroupObj = mgroupObj;
|
||||||
|
that.indexList = indexList;
|
||||||
},
|
},
|
||||||
getData(id, index) {
|
getData(id, index) {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
@ -386,17 +449,20 @@ export default {
|
||||||
obj.mpoint = id;
|
obj.mpoint = id;
|
||||||
obj.page = 0;
|
obj.page = 0;
|
||||||
this.$API.enm.mpoint.stat.req(obj).then((res) => {
|
this.$API.enm.mpoint.stat.req(obj).then((res) => {
|
||||||
console.log(res);
|
// console.log(res);
|
||||||
let sum = 0;
|
let sum = 0;
|
||||||
res.forEach((item) => {
|
res.forEach((item) => {
|
||||||
let ind = item.hour + 3;
|
let ind = item.hour + 3;
|
||||||
that.tableDatas[index][ind] = item.val;
|
that.tableDatas[index][ind] = item.val;
|
||||||
sum += Number(item.val);
|
sum += Number(item.val);
|
||||||
|
let keyName = item.hour + "时";
|
||||||
|
that.tableDatas2[index][keyName] = item.val;
|
||||||
});
|
});
|
||||||
sum = sum * 100;
|
sum = sum * 100;
|
||||||
sum = Math.round(sum);
|
sum = Math.round(sum);
|
||||||
sum = sum / 100;
|
sum = sum / 100;
|
||||||
that.tableDatas[index][27] = sum.toFixed(2);
|
that.tableDatas[index][27] = sum.toFixed(2);
|
||||||
|
that.tableDatas2[index].sum = sum.toFixed(2);
|
||||||
that.$forceUpdate();
|
that.$forceUpdate();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -426,6 +492,18 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
handleCellClick(row, column, cell, event) {
|
||||||
|
let that = this;
|
||||||
|
console.log("row", row);
|
||||||
|
console.log("column", column);
|
||||||
|
console.log("cell", cell);
|
||||||
|
let index = that.tableDatas2.indexOf(row);
|
||||||
|
console.log(index, "index");
|
||||||
|
let lineData = that.tableDatas[index].slice(3, 27);
|
||||||
|
that.option.xAxis.data = that.xAxisData;
|
||||||
|
that.option.series[0].data = lineData;
|
||||||
|
this.itemVisible = true;
|
||||||
|
},
|
||||||
itemClick(item, index) {
|
itemClick(item, index) {
|
||||||
let that = this;
|
let that = this;
|
||||||
let lineData = that.tableDatas[index].slice(3, that.headerLength);
|
let lineData = that.tableDatas[index].slice(3, that.headerLength);
|
||||||
|
|
@ -435,7 +513,7 @@ export default {
|
||||||
},
|
},
|
||||||
exportExcel() {
|
exportExcel() {
|
||||||
this.exportLoading = true;
|
this.exportLoading = true;
|
||||||
this.$XLSX("#myTable", this.tableName);
|
this.$XLSX("#hourBaseTable", this.tableName);
|
||||||
this.exportLoading = false;
|
this.exportLoading = false;
|
||||||
},
|
},
|
||||||
handlePrint() {
|
handlePrint() {
|
||||||
|
|
@ -449,4 +527,7 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
|
.printContainer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<!-- 全厂电量统计 -->
|
<!-- 全厂电量统计 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container" id="app-container" style="height: 100%">
|
||||||
<el-header>
|
<el-header id="app-header">
|
||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="search_date"
|
v-model="search_date"
|
||||||
|
|
@ -26,10 +26,11 @@
|
||||||
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-card style="margin-top: 5px">
|
<el-main>
|
||||||
<div class="printWrap">
|
<el-card>
|
||||||
<div ref="print" id="myReport" class="printContainer">
|
<div>
|
||||||
<table
|
<div ref="print" id="myReport" class="printContainer">
|
||||||
|
<!-- <table
|
||||||
border="1"
|
border="1"
|
||||||
width="1600"
|
width="1600"
|
||||||
cellspacing="0"
|
cellspacing="0"
|
||||||
|
|
@ -113,10 +114,52 @@
|
||||||
</td>
|
</td>
|
||||||
<td class="numCell">{{ item[15] }}</td>
|
<td class="numCell">{{ item[15] }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table> -->
|
||||||
|
<el-table
|
||||||
|
id="hourBaseTable"
|
||||||
|
:data="tableDatas2"
|
||||||
|
style="width: 100%"
|
||||||
|
border
|
||||||
|
:height="tableHeight"
|
||||||
|
:span-method="objectSpanMethod"
|
||||||
|
@cell-click="handleCellClick"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="工段"
|
||||||
|
prop="mgroupName"
|
||||||
|
width="100"
|
||||||
|
fixed
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="设备"
|
||||||
|
prop="nickname"
|
||||||
|
width="110"
|
||||||
|
fixed
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="单位" prop="unit" fixed>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-for="item in months"
|
||||||
|
:key="item"
|
||||||
|
:label="item + '月'"
|
||||||
|
:prop="item + '月'"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="合计"
|
||||||
|
prop="sum"
|
||||||
|
width="100"
|
||||||
|
fixed="right"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-card>
|
||||||
</el-card>
|
</el-main>
|
||||||
|
|
||||||
<el-dialog v-model="itemVisible" :title="tableName">
|
<el-dialog v-model="itemVisible" :title="tableName">
|
||||||
<scEcharts
|
<scEcharts
|
||||||
height="400px"
|
height="400px"
|
||||||
|
|
@ -139,10 +182,14 @@ export default {
|
||||||
return {
|
return {
|
||||||
year: "",
|
year: "",
|
||||||
search_date: "",
|
search_date: "",
|
||||||
|
mgroupObj: {},
|
||||||
|
indexList: [],
|
||||||
mpointList: [],
|
mpointList: [],
|
||||||
tableDatas: [],
|
tableDatas: [],
|
||||||
|
tableDatas2: [],
|
||||||
timeStamp: null,
|
timeStamp: null,
|
||||||
itemVisible: false,
|
itemVisible: false,
|
||||||
|
tableHeight: 600,
|
||||||
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||||
tableName: "全厂电量月统计",
|
tableName: "全厂电量月统计",
|
||||||
sourceData: {},
|
sourceData: {},
|
||||||
|
|
@ -252,9 +299,34 @@ export default {
|
||||||
that.year = nowDate.getFullYear();
|
that.year = nowDate.getFullYear();
|
||||||
that.search_date = that.year;
|
that.search_date = that.year;
|
||||||
that.timeStamp = nowDate.getTime();
|
that.timeStamp = nowDate.getTime();
|
||||||
|
for (let n = 1; n < 13; n++) {
|
||||||
|
that.xAxisData.push(n + "月");
|
||||||
|
}
|
||||||
this.getMPoints();
|
this.getMPoints();
|
||||||
|
let heightContainer =
|
||||||
|
document.getElementById("app-container").clientHeight;
|
||||||
|
let heightHeader = document.getElementById("app-header").clientHeight;
|
||||||
|
let heightTable = heightContainer - heightHeader - 35;
|
||||||
|
that.tableHeight = heightTable;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||||
|
let that = this;
|
||||||
|
if (columnIndex == 0) {
|
||||||
|
if (that.indexList.indexOf(rowIndex) > -1) {
|
||||||
|
let rowspans = that.mgroupObj[row.mgroupName];
|
||||||
|
return {
|
||||||
|
rowspan: rowspans,
|
||||||
|
colspan: 1,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
rowspan: 1,
|
||||||
|
colspan: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
dateChange() {
|
dateChange() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.tableDatas = [];
|
that.tableDatas = [];
|
||||||
|
|
@ -275,7 +347,6 @@ export default {
|
||||||
query: "{ id, name, nickname, mgroup_name, unit }",
|
query: "{ id, name, nickname, mgroup_name, unit }",
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
// let data = res.slice(3);
|
|
||||||
that.mpointList = res;
|
that.mpointList = res;
|
||||||
that.dataLoop();
|
that.dataLoop();
|
||||||
});
|
});
|
||||||
|
|
@ -283,7 +354,23 @@ export default {
|
||||||
dataLoop() {
|
dataLoop() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.tableDatas = [];
|
that.tableDatas = [];
|
||||||
|
let _mgroup = [],
|
||||||
|
_nameLength = [],
|
||||||
|
indexList = [];
|
||||||
|
let mgroupObj = {};
|
||||||
that.mpointList.forEach((item, index) => {
|
that.mpointList.forEach((item, index) => {
|
||||||
|
let indexs = _mgroup.indexOf(item.mgroup_name);
|
||||||
|
if (indexs > -1) {
|
||||||
|
_nameLength[indexs] += 1;
|
||||||
|
} else {
|
||||||
|
_mgroup.push(item.mgroup_name);
|
||||||
|
_nameLength.push(1);
|
||||||
|
indexList.push(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < _mgroup.length; i++) {
|
||||||
|
mgroupObj[_mgroup[i]] = _nameLength[i];
|
||||||
|
}
|
||||||
let arr = [];
|
let arr = [];
|
||||||
arr[0] =
|
arr[0] =
|
||||||
item.mgroup_name != null ? item.mgroup_name : item.name;
|
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||||
|
|
@ -293,8 +380,17 @@ export default {
|
||||||
arr[i + 3] = 0;
|
arr[i + 3] = 0;
|
||||||
}
|
}
|
||||||
that.tableDatas.push(arr);
|
that.tableDatas.push(arr);
|
||||||
|
let obj = {};
|
||||||
|
obj.mgroupName =
|
||||||
|
item.mgroup_name != null ? item.mgroup_name : item.name;
|
||||||
|
obj.nickname =
|
||||||
|
item.nickname != null ? item.nickname : item.name;
|
||||||
|
obj.unit = item.unit;
|
||||||
|
that.tableDatas2.push(obj);
|
||||||
that.getData(item.id, index);
|
that.getData(item.id, index);
|
||||||
});
|
});
|
||||||
|
that.mgroupObj = mgroupObj;
|
||||||
|
that.indexList = indexList;
|
||||||
},
|
},
|
||||||
getData(id, index) {
|
getData(id, index) {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
@ -310,14 +406,30 @@ export default {
|
||||||
let ind = item.month + 2;
|
let ind = item.month + 2;
|
||||||
that.tableDatas[index][ind] = item.val;
|
that.tableDatas[index][ind] = item.val;
|
||||||
sum += Number(item.val);
|
sum += Number(item.val);
|
||||||
|
let keyName = item.month + "月";
|
||||||
|
that.tableDatas2[index][keyName] = item.val;
|
||||||
});
|
});
|
||||||
sum = sum * 100;
|
sum = sum * 100;
|
||||||
sum = Math.round(sum);
|
sum = Math.round(sum);
|
||||||
sum = sum / 100;
|
sum = sum / 100;
|
||||||
that.tableDatas[index][15] = sum.toFixed(2);
|
that.tableDatas[index][15] = sum.toFixed(2);
|
||||||
|
that.tableDatas2[index].sum = sum.toFixed(2);
|
||||||
that.$forceUpdate();
|
that.$forceUpdate();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
handleCellClick(row, column, cell, event) {
|
||||||
|
let that = this;
|
||||||
|
console.log("row", row);
|
||||||
|
console.log("column", column);
|
||||||
|
console.log("cell", cell);
|
||||||
|
let index = that.tableDatas2.indexOf(row);
|
||||||
|
console.log(index, "index");
|
||||||
|
//获取图数据
|
||||||
|
let lineData = that.tableDatas[index].slice(3, 14);
|
||||||
|
that.option.xAxis.data = that.xAxisData;
|
||||||
|
that.option.series[0].data = lineData;
|
||||||
|
this.itemVisible = true;
|
||||||
|
},
|
||||||
itemClick(item, index) {
|
itemClick(item, index) {
|
||||||
let that = this;
|
let that = this;
|
||||||
let lineData = that.tableDatas[index].slice(3, that.headerLength);
|
let lineData = that.tableDatas[index].slice(3, that.headerLength);
|
||||||
|
|
@ -327,7 +439,7 @@ export default {
|
||||||
},
|
},
|
||||||
exportExcel() {
|
exportExcel() {
|
||||||
this.exportLoading = true;
|
this.exportLoading = true;
|
||||||
this.$XLSX("#myTable", this.tableName);
|
this.$XLSX("#hourBaseTable", this.tableName);
|
||||||
this.exportLoading = false;
|
this.exportLoading = false;
|
||||||
},
|
},
|
||||||
handlePrint() {
|
handlePrint() {
|
||||||
|
|
@ -341,4 +453,7 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
|
.printContainer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue