615 lines
15 KiB
Vue
615 lines
15 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<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="1035"
|
|
cellspacing="0"
|
|
:key="timeStamp"
|
|
class="myTable"
|
|
id="myTable"
|
|
>
|
|
<thead class="myTableHead">
|
|
<tr>
|
|
<th colspan="5">主要设备单位产品电耗数据表</th>
|
|
</tr>
|
|
<tr>
|
|
<th>设备名称</th>
|
|
<th>单位</th>
|
|
<th>上个小时</th>
|
|
<th>昨日</th>
|
|
<th>本月</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in tableDatas" :key="item">
|
|
<template
|
|
v-for="(item1, ind) in item"
|
|
:key="item1"
|
|
>
|
|
<td
|
|
v-if="ind == 0 || ind == 1"
|
|
class="numCell"
|
|
>
|
|
{{ item1 }}
|
|
</td>
|
|
<td
|
|
v-if="ind == 2"
|
|
class="numCell"
|
|
@click="itemClick('hour_s', item)"
|
|
>
|
|
{{ item1 }}
|
|
</td>
|
|
<td
|
|
v-if="ind == 3"
|
|
class="numCell"
|
|
@click="itemClick('day_s', item)"
|
|
>
|
|
{{ item1 }}
|
|
</td>
|
|
<td
|
|
v-if="ind == 4"
|
|
class="numCell"
|
|
@click="itemClick('month_s', item)"
|
|
>
|
|
{{ item1 }}
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="radioWrap">
|
|
<el-radio-group
|
|
v-model="typeRadio"
|
|
@change="typeRadioChange"
|
|
>
|
|
<el-radio-button label="day">本日</el-radio-button>
|
|
<el-radio-button label="month"
|
|
>本月</el-radio-button
|
|
>
|
|
<el-radio-button label="year">本年</el-radio-button>
|
|
</el-radio-group>
|
|
<div style="position: absolute; right: 20px">
|
|
<el-date-picker
|
|
v-model="searchDate"
|
|
type="date"
|
|
value-format="YYYY-MM-DD"
|
|
formatter="YYYY-MM-DD"
|
|
placeholder="选择日期"
|
|
v-if="typeRadio == 'day'"
|
|
@change="dateChange"
|
|
></el-date-picker>
|
|
<el-date-picker
|
|
v-model="searchDate"
|
|
type="month"
|
|
value-format="YYYY-MM"
|
|
formatter="YYYY-MM"
|
|
placeholder="选择月"
|
|
v-if="typeRadio == 'month'"
|
|
@change="dateChange"
|
|
></el-date-picker>
|
|
<el-date-picker
|
|
v-if="typeRadio == 'year'"
|
|
v-model="searchDate"
|
|
type="year"
|
|
value-format="YYYY"
|
|
formatter="YYYY"
|
|
placeholder="选择年"
|
|
@change="dateChange"
|
|
></el-date-picker>
|
|
</div>
|
|
</div>
|
|
<div class="chartWrap" v-show="typeRadio == 'day'">
|
|
<div class="chartTitle">小时生产参数统计图</div>
|
|
<scEcharts
|
|
height="400px"
|
|
width="1033px"
|
|
:option="optionHour"
|
|
></scEcharts>
|
|
</div>
|
|
<div class="chartWrap" v-show="typeRadio == 'month'">
|
|
<div class="chartTitle">本月生产参数统计图</div>
|
|
<scEcharts
|
|
height="400px"
|
|
width="1033px"
|
|
:option="optionDay"
|
|
></scEcharts>
|
|
</div>
|
|
<div class="chartWrap" v-show="typeRadio == 'year'">
|
|
<div class="chartTitle">本年生产参数统计图</div>
|
|
<scEcharts
|
|
height="400px"
|
|
width="1033px"
|
|
:option="optionMonth"
|
|
></scEcharts>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<charts
|
|
v-if="asynDialog"
|
|
:type="type"
|
|
:title="title"
|
|
:cate="cate"
|
|
:apiObj="apiObj"
|
|
:mpoint="mpoint"
|
|
:modelValue="modelValue"
|
|
:showClose="showClose"
|
|
:echartType="echartType"
|
|
@closed="asynDialog = false"
|
|
></charts>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
const colors = [
|
|
"#647bfe",
|
|
"#8698fe",
|
|
"#a9b6fe",
|
|
"#cbd3fe",
|
|
"#91CC75",
|
|
"#EE6666",
|
|
];
|
|
let tooltip = {
|
|
show: true,
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
},
|
|
confine: false,
|
|
showContent: true,
|
|
triggerOn: "mousemove",
|
|
};
|
|
let grid = {
|
|
right: "3%",
|
|
left: "7%",
|
|
top: "15%",
|
|
};
|
|
let toolbox = {
|
|
right: "2%",
|
|
feature: {
|
|
dataView: { show: true, readOnly: false },
|
|
saveAsImage: { show: true },
|
|
},
|
|
};
|
|
let legend = {
|
|
top: "2%",
|
|
left: "center",
|
|
data: [],
|
|
};
|
|
let yAxis = {
|
|
type: "value",
|
|
name: "电耗(KW.h/t)",
|
|
alignTicks: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: colors[3],
|
|
},
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
},
|
|
};
|
|
import scEcharts from "@/components/scEcharts";
|
|
import { defineAsyncComponent } from "vue";
|
|
export default {
|
|
components: {
|
|
scEcharts,
|
|
charts: defineAsyncComponent(() =>
|
|
import("@/components/scEnm/lineChartsdialog.vue")
|
|
),
|
|
},
|
|
data() {
|
|
return {
|
|
typeRadio: "day",
|
|
exportLoading: false,
|
|
chartShow: false,
|
|
myOption: null,
|
|
timeStamp: null,
|
|
optionHour: {},
|
|
optionDay: {},
|
|
optionMonth: {},
|
|
year: 2023,
|
|
month: 1,
|
|
days: 1,
|
|
hours: 1,
|
|
query: {
|
|
mgroup: "",
|
|
},
|
|
mpoint: "",
|
|
searchDate: "",
|
|
tableName: "主要设备单位产品电耗数据表",
|
|
tableDatas: [
|
|
["尾排风机", "KW·h/t", "", "", ""],
|
|
["高温风机", "KW·h/t", "", "", ""],
|
|
["头排风机", "KW·h/t", "", "", ""],
|
|
],
|
|
modelValue: true,
|
|
type: "hour_s",
|
|
title: "回转窑工段",
|
|
cate: "",
|
|
apiObj: this.$API.enm.mpoint.stat,
|
|
showClose: true,
|
|
echartType: "line",
|
|
asynDialog: false,
|
|
allValHour: 0,
|
|
allValDays: 0,
|
|
allValMonth: 0,
|
|
option1: {
|
|
color: colors,
|
|
tooltip: tooltip,
|
|
grid: grid,
|
|
toolbox: toolbox,
|
|
legend: legend,
|
|
xAxis: {
|
|
axisTick: {
|
|
show: true,
|
|
length: 5,
|
|
inside: true,
|
|
},
|
|
data: [],
|
|
},
|
|
yAxis: yAxis,
|
|
series: [],
|
|
},
|
|
option2: {
|
|
color: colors,
|
|
tooltip: tooltip,
|
|
grid: grid,
|
|
toolbox: toolbox,
|
|
legend: legend,
|
|
xAxis: {
|
|
axisTick: {
|
|
show: true,
|
|
length: 5,
|
|
inside: true,
|
|
},
|
|
data: [],
|
|
},
|
|
yAxis: yAxis,
|
|
series: [],
|
|
},
|
|
option3: {
|
|
color: colors,
|
|
tooltip: tooltip,
|
|
grid: grid,
|
|
toolbox: toolbox,
|
|
legend: legend,
|
|
xAxis: {
|
|
axisTick: {
|
|
show: true,
|
|
length: 5,
|
|
inside: true,
|
|
},
|
|
data: [],
|
|
},
|
|
yAxis: yAxis,
|
|
series: [],
|
|
},
|
|
mpoints: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
var myDate = new Date();
|
|
that.year = myDate.getFullYear();
|
|
that.month = myDate.getMonth() + 1;
|
|
that.days = myDate.getDate();
|
|
that.hours = myDate.getHours();
|
|
that.getMpoints();
|
|
that.getTableHourData();
|
|
that.getHourData(that.year, that.month, that.days);
|
|
that.getDayData(that.year, that.month);
|
|
that.getMonthData(that.year);
|
|
},
|
|
methods: {
|
|
getMpoints() {
|
|
let that = this;
|
|
let obj = {};
|
|
obj.mgroup__name = "回转窑";
|
|
obj.page = 0;
|
|
obj.enabled = 1;
|
|
obj.need_display = 1;
|
|
obj.ordering = "report_sortstr";
|
|
obj.material__code__in = "elec,elec_0";
|
|
this.$API.enm.mpoint.list.req(obj).then((res) => {
|
|
console.log("mpoints", res);
|
|
let arr = [];
|
|
res.forEach((item) => {
|
|
arr.push(item.nickname);
|
|
});
|
|
console.log("arr", arr);
|
|
that.mpoints = arr;
|
|
});
|
|
},
|
|
typeRadioChange() {
|
|
this.searchDate = "";
|
|
},
|
|
dateChange(val) {
|
|
console.log(val);
|
|
if (this.typeRadio == "day") {
|
|
let year = val.split("-")[0];
|
|
let month = val.split("-")[1];
|
|
let days = val.split("-")[2];
|
|
this.getHourData(year, month, days);
|
|
} else if (this.typeRadio == "month") {
|
|
let year = val.split("-")[0];
|
|
let month = val.split("-")[1];
|
|
this.getDayData(year, month);
|
|
} else {
|
|
this.getMonthData(val);
|
|
}
|
|
this.searchDate;
|
|
},
|
|
getTableHourData() {
|
|
let that = this;
|
|
that.tableDatas = [];
|
|
let timeDate = new Date().getTime();
|
|
let hourTime = timeDate - 3600000;
|
|
let hourDate = new Date(hourTime);
|
|
let year_h = hourDate.getFullYear();
|
|
let month_h = hourDate.getMonth() + 1;
|
|
let days_h = hourDate.getDate();
|
|
let hours_h = hourDate.getHours();
|
|
let minutes = hourDate.getMinutes();
|
|
month_h = month_h > 9 ? month_h : "0" + month_h;
|
|
days_h = days_h > 9 ? days_h : "0" + days_h;
|
|
if (hours_h > 5) {
|
|
hours_h = hours_h > 9 ? hours_h : "0" + hours_h;
|
|
} else {
|
|
hours_h = hours_h - 1;
|
|
hours_h = hours_h > 9 ? hours_h : "0" + hours_h;
|
|
}
|
|
let obj = {};
|
|
obj.type = "hour_s";
|
|
obj.year = year_h;
|
|
obj.month = month_h;
|
|
obj.day = days_h;
|
|
obj.hour = hours_h;
|
|
obj.mgroup__name = "回转窑";
|
|
obj.mpoint__material__code__in = "elec,elec_0";
|
|
// obj.mpoint__ep_monitored__isnull = 0;
|
|
obj.mpoint__need_display = 1;
|
|
obj.page = 0;
|
|
this.$API.enm.mpoint.stat.req(obj).then((res) => {
|
|
res.forEach((item) => {
|
|
let index = that.mpoints.indexOf(item.mpoint_nickname);
|
|
let obj = [];
|
|
obj[0] = item.mpoint_nickname;
|
|
obj[1] = "KW·h/t";
|
|
obj[2] = item.elec_consume_unit;
|
|
obj[3] = 0;
|
|
obj[4] = 0;
|
|
obj[5] = item.mpoint;
|
|
that.tableDatas[index] = obj;
|
|
});
|
|
let yetTime = timeDate - 3600000 * 24;
|
|
let ystDate = new Date(yetTime);
|
|
let year_d = ystDate.getFullYear();
|
|
let month_d = ystDate.getMonth() + 1;
|
|
let days_d = ystDate.getDate();
|
|
month_d = month_d > 9 ? month_d : "0" + month_d;
|
|
days_d = days_d > 9 ? days_d : "0" + days_d;
|
|
let obj_d = {};
|
|
obj_d.type = "day_s";
|
|
obj_d.year_s = year_d;
|
|
obj_d.month_s = month_d;
|
|
obj_d.day_s = days_d;
|
|
obj_d.mgroup__name = "回转窑";
|
|
obj_d.mpoint__material__code__in = "elec,elec_0";
|
|
obj_d.mpoint__need_display = 1;
|
|
obj_d.page = 0;
|
|
this.$API.enm.mpoint.stat.req(obj_d).then((res) => {
|
|
res.forEach((item) => {
|
|
let index_d = that.mpoints.indexOf(
|
|
item.mpoint_nickname
|
|
);
|
|
if (that.tableDatas[index_d]) {
|
|
that.tableDatas[index_d][3] =
|
|
item.elec_consume_unit;
|
|
} else {
|
|
let obj = [];
|
|
obj[0] = item.mpoint_nickname;
|
|
obj[1] = "KW·h/t";
|
|
obj[3] = item.elec_consume_unit;
|
|
obj[5] = item.mpoint;
|
|
that.tableDatas[index_d] = obj;
|
|
}
|
|
});
|
|
let obj_m = {};
|
|
obj_m.type = "month_s";
|
|
obj_m.year_s = that.year;
|
|
obj_m.month_s = that.month;
|
|
obj_m.mgroup__name = "回转窑";
|
|
obj_m.mpoint__material__code__in = "elec,elec_0";
|
|
obj_m.mpoint__need_display = 1;
|
|
obj_m.page = 0;
|
|
this.$API.enm.mpoint.stat.req(obj_m).then((res) => {
|
|
res.forEach((item) => {
|
|
let index_m = that.mpoints.indexOf(
|
|
item.mpoint_nickname
|
|
);
|
|
if (that.tableDatas[index_m]) {
|
|
that.tableDatas[index_m][4] =
|
|
item.elec_consume_unit;
|
|
} else {
|
|
let obj = [];
|
|
obj[0] = item.mpoint_nickname;
|
|
obj[1] = "KW·h/t";
|
|
obj[4] = item.elec_consume_unit;
|
|
obj[5] = item.mpoint;
|
|
that.tableDatas[index_m] = obj;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
//获取小时数据
|
|
getHourData(year, month, days) {
|
|
let that = this;
|
|
let obj = {};
|
|
obj.type = "hour_s";
|
|
obj.year_s = year;
|
|
obj.month_s = month;
|
|
obj.day_s = days;
|
|
obj.mgroup__name = "回转窑";
|
|
obj.mpoint__material__code__in = "elec,elec_0";
|
|
obj.mpoint__ep_monitored__isnull = 0;
|
|
obj.mpoint__need_display = 1;
|
|
obj.page = 0;
|
|
this.$API.enm.mpoint.stat.req(obj).then((response) => {
|
|
let seriesData = [];
|
|
for (let i = 0; i < that.mpoints.length; i++) {
|
|
seriesData.push([]);
|
|
}
|
|
response.forEach((item) => {
|
|
let index = that.mpoints.indexOf(item.mpoint_nickname); //第几个mpoint
|
|
let ind = item.hour; //xAxis
|
|
seriesData[index][ind] = item.elec_consume_unit;
|
|
});
|
|
let options = { ...that.option1 };
|
|
for (let j = 0; j < that.mpoints.length; j++) {
|
|
let chartItem = {};
|
|
chartItem.name = that.mpoints[j];
|
|
chartItem.type = "bar";
|
|
chartItem.data = seriesData[j];
|
|
options.series.push(chartItem);
|
|
}
|
|
options.legend.data = that.mpoints;
|
|
let hourXAxis = [];
|
|
for (let i = 0; i < 24; i++) {
|
|
let item = i + "时";
|
|
hourXAxis.push(item);
|
|
}
|
|
options.xAxis.data = hourXAxis;
|
|
that.optionHour = options;
|
|
});
|
|
},
|
|
//获取天数据
|
|
getDayData(year, month) {
|
|
let that = this;
|
|
let obj = {};
|
|
obj.type = "day_s";
|
|
obj.year_s = year;
|
|
obj.month_s = month;
|
|
obj.mgroup__name = "回转窑";
|
|
obj.mpoint__material__code__in = "elec,elec_0";
|
|
obj.mpoint__ep_monitored__isnull = 0;
|
|
obj.mpoint__need_display = 1;
|
|
obj.page = 0;
|
|
this.$API.enm.mpoint.stat.req(obj).then((response) => {
|
|
let seriesData = [];
|
|
for (let i = 0; i < that.mpoints.length; i++) {
|
|
seriesData.push([]);
|
|
}
|
|
let data = response;
|
|
data.forEach((item) => {
|
|
let index = that.mpoints.indexOf(item.mpoint_nickname); //第几个mpoint
|
|
let ind = item.day_s - 1;
|
|
seriesData[index][ind] = item.elec_consume_unit;
|
|
});
|
|
let options = { ...that.option2 };
|
|
for (let j = 0; j < that.mpoints.length; j++) {
|
|
let chartItem = {};
|
|
chartItem.name = that.mpoints[j];
|
|
chartItem.type = "bar";
|
|
chartItem.data = seriesData[j];
|
|
options.series.push(chartItem);
|
|
}
|
|
options.legend.data = that.mpoints;
|
|
let dayXAxis = [];
|
|
let dayss = new Date(year, month, 0).getDate();
|
|
for (let i = 1; i <= dayss; i++) {
|
|
let item = i + "日";
|
|
dayXAxis.push(item);
|
|
}
|
|
options.xAxis.data = dayXAxis;
|
|
that.optionDay = options;
|
|
});
|
|
},
|
|
//获取月数据
|
|
getMonthData(year) {
|
|
let that = this;
|
|
let obj = {};
|
|
obj.type = "month_s";
|
|
obj.year_s = year;
|
|
obj.mgroup__name = "回转窑";
|
|
obj.mpoint__material__code__in = "elec,elec_0";
|
|
obj.mpoint__ep_monitored__isnull = 0;
|
|
obj.mpoint__need_display = 1;
|
|
obj.page = 0;
|
|
this.$API.enm.mpoint.stat.req(obj).then((response) => {
|
|
let seriesData = [];
|
|
for (let i = 0; i < that.mpoints.length; i++) {
|
|
seriesData.push([]);
|
|
}
|
|
let data = response;
|
|
data.forEach((item) => {
|
|
let ind = item.month_s - 1;
|
|
let index = that.mpoints.indexOf(item.mpoint_nickname); //第几个mpoint
|
|
seriesData[index][ind] = item.elec_consume_unit;
|
|
});
|
|
let options = { ...that.option3 };
|
|
for (let j = 0; j < that.mpoints.length; j++) {
|
|
let chartItem = {};
|
|
chartItem.name = that.mpoints[j];
|
|
chartItem.type = "bar";
|
|
chartItem.data = seriesData[j];
|
|
options.series.push(chartItem);
|
|
}
|
|
options.legend.data = that.mpoints;
|
|
let monthXAxis = [];
|
|
for (let i = 1; i < 13; i++) {
|
|
let item = i + "月";
|
|
monthXAxis.push(item);
|
|
}
|
|
options.xAxis.data = monthXAxis;
|
|
that.optionMonth = options;
|
|
});
|
|
},
|
|
itemClick(type, item) {
|
|
this.type = type;
|
|
this.cate = item[0];
|
|
this.mpoint = item[5];
|
|
this.asynDialog = true;
|
|
},
|
|
handlePrint() {
|
|
this.$PRINT("#myReport");
|
|
},
|
|
exportExcel() {
|
|
this.exportLoading = true;
|
|
this.$XLSX("#myTable", this.tableName);
|
|
this.exportLoading = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.printContainer {
|
|
padding-left: 20px;
|
|
}
|
|
.printWrap {
|
|
overflow-x: auto;
|
|
}
|
|
.radioWrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 10px;
|
|
position: relative;
|
|
}
|
|
</style>
|