338 lines
6.8 KiB
Vue
338 lines
6.8 KiB
Vue
<!-- 全厂电量统计 -->
|
|
<template>
|
|
<div class="app-container">
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-date-picker
|
|
v-model="search_date"
|
|
type="year"
|
|
value-format="YYYY"
|
|
format="YYYY"
|
|
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="1600"
|
|
cellspacing="0"
|
|
:key="timeStamp"
|
|
id="myTable"
|
|
class="myTable"
|
|
>
|
|
<thead class="myTableHead">
|
|
<tr>
|
|
<th colspan="16">电量消耗月报表</th>
|
|
</tr>
|
|
<tr>
|
|
<th>工段</th>
|
|
<th>设备</th>
|
|
<th>单位</th>
|
|
<th v-for="item in months" :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
|
|
"
|
|
>
|
|
{{ item[0] }}
|
|
</td>
|
|
<td class="numCell">{{ item[1] }}</td>
|
|
<td class="numCell">{{ item[2] }}</td>
|
|
<td
|
|
class="numCell"
|
|
v-for="month_item in months"
|
|
:key="month_item"
|
|
@click="itemClick(item, index)"
|
|
>
|
|
{{ item[2 + month_item] }}
|
|
</td>
|
|
<td class="numCell">{{ item[15] }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-dialog v-model="itemVisible" :title="tableName">
|
|
<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 {
|
|
year: "",
|
|
search_date: "",
|
|
mpointList: [],
|
|
tableDatas: [],
|
|
timeStamp: null,
|
|
itemVisible: false,
|
|
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
|
tableName: "全厂电量月统计",
|
|
sourceData: {},
|
|
xAxisData: [],
|
|
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: [
|
|
"1月",
|
|
"2月",
|
|
"3月",
|
|
"4月",
|
|
"5月",
|
|
"6月",
|
|
"7月",
|
|
"8月",
|
|
"9月",
|
|
"10月",
|
|
"11月",
|
|
"12月",
|
|
],
|
|
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: [4, 1, 9, 2, 11, 3, 5, 7, 8, 10, 6, 12],
|
|
type: "line",
|
|
symbolSize: 8,
|
|
symbol: "circle",
|
|
smooth: 0.5,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
},
|
|
lineStyle: {
|
|
width: 1,
|
|
type: "dotted",
|
|
color: "#3366CC",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
var nowDate = new Date();
|
|
that.year = nowDate.getFullYear();
|
|
that.search_date = that.year;
|
|
that.timeStamp = nowDate.getTime();
|
|
this.getMPoints();
|
|
},
|
|
methods: {
|
|
dateChange() {
|
|
let that = this;
|
|
that.tableDatas = [];
|
|
that.year = that.search_date;
|
|
let nowDate = new Date();
|
|
that.timeStamp = nowDate.getTime();
|
|
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 = data;
|
|
that.dataLoop();
|
|
});
|
|
},
|
|
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 < 12; i++) {
|
|
arr[i + 3] = 0;
|
|
}
|
|
that.tableDatas.push(arr);
|
|
that.getData(item.id, index);
|
|
});
|
|
},
|
|
getData(id, index) {
|
|
let that = this;
|
|
let obj = {};
|
|
obj.type = "month";
|
|
obj.year = that.year;
|
|
obj.mpoint__material__code = "elec";
|
|
obj.mpoint__need_display = 1;
|
|
obj.mpoint = id;
|
|
obj.page = 0;
|
|
this.$API.enm.mpoint.stat.req(obj).then((res) => {
|
|
console.log(res);
|
|
res.forEach((item) => {
|
|
let ind = item.month + 2;
|
|
that.tableDatas[index][ind] = item.val;
|
|
});
|
|
that.$forceUpdate();
|
|
});
|
|
},
|
|
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>
|