450 lines
10 KiB
Vue
450 lines
10 KiB
Vue
<!-- 全厂电量统计 -->
|
|
<template>
|
|
<div class="app-container">
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-date-picker
|
|
v-model="search_date"
|
|
type="date"
|
|
value-format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
placeholder="天"
|
|
style="margin-right: 6px"
|
|
@change="dateChange"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
@click="dateChange"
|
|
></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 class="printWrap">
|
|
<div ref="print" id="myReport" class="printContainer">
|
|
<table
|
|
border="1"
|
|
width="2700"
|
|
cellspacing="0"
|
|
:key="timeStamp"
|
|
id="myTable"
|
|
class="myTable"
|
|
>
|
|
<thead class="myTableHead">
|
|
<tr>
|
|
<th colspan="28">电量消耗小时报表</th>
|
|
</tr>
|
|
<tr>
|
|
<th>工段</th>
|
|
<th>设备</th>
|
|
<th>单位</th>
|
|
<th v-for="item in 24" :key="item">
|
|
{{ item - 1 }}时
|
|
</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
|
|
"
|
|
>
|
|
{{ item[0] }}
|
|
</td>
|
|
<td class="numCell">{{ item[1] }}</td>
|
|
<td class="numCell">{{ item[2] }}</td>
|
|
|
|
<td
|
|
class="numCell"
|
|
v-for="hour_item in hours"
|
|
:key="hour_item"
|
|
@click="itemClick(item, index)"
|
|
>
|
|
{{ item[2 + hour_item] }}
|
|
</td>
|
|
<td class="numCell">{{ item[27] }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-dialog v-model="itemVisible" :title="itemChartTitle">
|
|
<scEcharts
|
|
height="400px"
|
|
width="1033px"
|
|
:option="option"
|
|
></scEcharts>
|
|
<template #footer>
|
|
<slot name="footer"></slot>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import scEcharts from "@/components/scEcharts";
|
|
export default {
|
|
components: {
|
|
scEcharts,
|
|
},
|
|
data() {
|
|
return {
|
|
day: "",
|
|
year: "",
|
|
month: "",
|
|
search_date: "",
|
|
tableDatas1: [
|
|
["石灰石破碎", "破碎机", "kw.h"], //0
|
|
["石灰石破碎", "堆取料机", "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: [],
|
|
tableDatas: [],
|
|
hours: [
|
|
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
|
|
19, 20, 21, 22, 23, 24,
|
|
],
|
|
mgroupList: [
|
|
"石灰石破碎",
|
|
"原料磨",
|
|
"回转窑",
|
|
"煤磨",
|
|
"余热发电",
|
|
"空压机",
|
|
"富氧燃烧系统",
|
|
"生产总耗电量",
|
|
"全厂进线",
|
|
],
|
|
mgroup: "石灰石破碎",
|
|
itemChartTitle: "",
|
|
itemChartData: [],
|
|
itemChartXData: [],
|
|
itemChartYData: [],
|
|
itemChartLegend: [],
|
|
itemChartSeries: [],
|
|
timeStamp: null,
|
|
itemVisible: false,
|
|
exportLoading: false,
|
|
tableName: "全厂电量小时统计",
|
|
sourceData: {},
|
|
option: {
|
|
title: {
|
|
text: "全厂电量小时统计",
|
|
x: "center",
|
|
},
|
|
grid: {
|
|
top: "20%",
|
|
left: "3%",
|
|
right: "10%",
|
|
bottom: "5%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
orient: "horizontal",
|
|
x: "right",
|
|
y: "10",
|
|
data: [],
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [],
|
|
name: "时间",
|
|
|
|
nameTextStyle: {
|
|
fontWeight: 600,
|
|
fontSize: 14,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#3366CC",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
rotate: 45,
|
|
interval: 0,
|
|
},
|
|
boundaryGap: false,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: "对象值",
|
|
nameTextStyle: {
|
|
fontWeight: 500,
|
|
fontSize: 14,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#3366CC",
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
axis: "auto",
|
|
snap: true,
|
|
},
|
|
showContent: true,
|
|
},
|
|
series: [
|
|
{
|
|
name: "",
|
|
data: [],
|
|
type: "line",
|
|
symbolSize: 8,
|
|
symbol: "circle",
|
|
smooth: 0.5,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
},
|
|
lineStyle: {
|
|
width: 1,
|
|
type: "dotted",
|
|
color: "#3366CC",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
xAxisData: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
var nowDate = new Date();
|
|
let year = nowDate.getFullYear();
|
|
let month = nowDate.getMonth() + 1;
|
|
let day = nowDate.getDate();
|
|
that.timeStamp = nowDate.getTime();
|
|
let month_s = month > 9 ? month : "0" + month;
|
|
let day_s = day > 9 ? day : "0" + day;
|
|
that.day = day;
|
|
that.year = year;
|
|
that.month = month;
|
|
that.search_date = year + "-" + month_s + "-" + day_s;
|
|
for (let i = 0; i < that.tableDatas.length; i++) {
|
|
for (let j = 0; j < 24; j++) {
|
|
let k = 3 + j;
|
|
that.tableDatas[i][k] = 0;
|
|
this.$forceUpdate();
|
|
}
|
|
}
|
|
for (let n = 0; n < 24; n++) {
|
|
that.xAxisData.push(n + "时");
|
|
}
|
|
this.getMPoints();
|
|
},
|
|
methods: {
|
|
dateChange(e) {
|
|
let that = this;
|
|
that.tableDatas = [];
|
|
let arr = that.search_date.split("-");
|
|
that.year = Number(arr[0]);
|
|
that.month = Number(arr[1]);
|
|
that.day = Number(arr[2]);
|
|
// for (let i = 0; i < that.tableDatas.length; i++) {
|
|
// for (let j = 0; j < 25; j++) {
|
|
// let k = 3 + j;
|
|
// that.tableDatas[i][k] = 0;
|
|
// this.$forceUpdate();
|
|
// }
|
|
// }
|
|
let nowDate = new Date();
|
|
that.timeStamp = nowDate.getTime();
|
|
that.getLengthData();
|
|
that.dataLoop();
|
|
},
|
|
getMPoints() {
|
|
let that = this;
|
|
that.$API.enm.mpoint.list
|
|
.req({
|
|
page: 0,
|
|
enabled: 1,
|
|
need_display: 1,
|
|
ordering: "report_sortstr",
|
|
material__code__in: "elec,elec_0",
|
|
query: "{ id, name, nickname, mgroup_name, unit }",
|
|
})
|
|
.then((res) => {
|
|
// let data = res.slice(3);
|
|
that.mpointList = res;
|
|
that.dataLoop();
|
|
});
|
|
},
|
|
getLengthData() {
|
|
let that = this;
|
|
let arrs = [];
|
|
that.mpointList.forEach((item, index) => {
|
|
if (arrs.indexOf(item.mgroup_name) == -1) {
|
|
arrs.push(item.mgroup_name);
|
|
}
|
|
});
|
|
},
|
|
dataLoop() {
|
|
let that = this;
|
|
that.tableDatas = [];
|
|
that.mpointList.forEach((item, index) => {
|
|
let arr = [];
|
|
arr[0] =
|
|
item.mgroup_name != null ? item.mgroup_name : item.name;
|
|
arr[1] = item.nickname != null ? item.nickname : item.name;
|
|
arr[2] = item.unit;
|
|
for (let i = 0; i < 24; i++) {
|
|
arr[i + 3] = 0;
|
|
}
|
|
that.tableDatas.push(arr);
|
|
that.getData(item.id, index);
|
|
});
|
|
},
|
|
getData(id, index) {
|
|
let that = this;
|
|
let obj = {};
|
|
obj.type = "hour";
|
|
obj.year = that.year;
|
|
obj.month = that.month;
|
|
obj.day = that.day;
|
|
obj.mpoint = id;
|
|
obj.page = 0;
|
|
this.$API.enm.mpoint.stat.req(obj).then((res) => {
|
|
console.log(res);
|
|
let sum = 0;
|
|
res.forEach((item) => {
|
|
let ind = item.hour + 3;
|
|
that.tableDatas[index][ind] = item.val;
|
|
sum += Number(item.val);
|
|
});
|
|
sum = sum * 100;
|
|
sum = Math.round(sum);
|
|
sum = sum / 100;
|
|
that.tableDatas[index][27] = sum.toFixed(2);
|
|
that.$forceUpdate();
|
|
});
|
|
},
|
|
getHourData() {
|
|
let that = this;
|
|
let m = 0;
|
|
let date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
let hour = date.getHours();
|
|
let minute = date.getMinutes();
|
|
let second = date.getSeconds();
|
|
},
|
|
getTableData() {
|
|
for (let i = 0; i < this.tableDatas.length; i++) {
|
|
let k = 0;
|
|
if (i == 0 || i == 2 || i == 9 || i == 23 || i == 27) {
|
|
k = 3;
|
|
} else if (i == 49) {
|
|
k = 1;
|
|
} else {
|
|
k = 2;
|
|
}
|
|
for (let j = k; j < this.tableDatas[i].length; j++) {
|
|
this.tableDatas[i][j] = 0;
|
|
}
|
|
}
|
|
},
|
|
itemClick(item, index) {
|
|
let that = this;
|
|
let lineData = that.tableDatas[index].slice(3, that.headerLength);
|
|
that.option.xAxis.data = that.xAxisData;
|
|
that.option.series[0].data = lineData;
|
|
this.itemVisible = true;
|
|
},
|
|
exportExcel() {
|
|
this.exportLoading = true;
|
|
this.$XLSX("#myTable", this.tableName);
|
|
this.exportLoading = false;
|
|
},
|
|
handlePrint() {
|
|
this.$PRINT("#myReport");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.printWrap {
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
}
|
|
</style>
|