529 lines
12 KiB
Vue
529 lines
12 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"
|
||
id="myTable"
|
||
class="myTable"
|
||
>
|
||
<thead class="myTableHead">
|
||
<tr>
|
||
<th colspan="5">
|
||
原料磨工段主要设备（100KW以上）单位产品电耗数据表
|
||
</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="chartWrap">
|
||
<div class="chartTitle">小时生产参数统计图</div>
|
||
<scEcharts
|
||
height="400px"
|
||
width="1033px"
|
||
:option="optionHour"
|
||
></scEcharts>
|
||
</div>
|
||
<div class="chartWrap">
|
||
<div class="chartTitle">本月生产参数统计图</div>
|
||
<scEcharts
|
||
height="400px"
|
||
width="1033px"
|
||
:option="optionDay"
|
||
></scEcharts>
|
||
</div>
|
||
<div class="chartWrap">
|
||
<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"
|
||
:mgroup="query.mgroup"
|
||
:modelValue="modelValue"
|
||
:showClose="showClose"
|
||
:echartType="echartType"
|
||
@closed="asynDialog = false"
|
||
></charts>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
const colors = ["#647bfe", "#8698fe", "#a9b6fe", "#cbd3fe", "#91CC75"];
|
||
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: "5%",
|
||
feature: {
|
||
dataView: { show: true, readOnly: false },
|
||
saveAsImage: { show: true },
|
||
},
|
||
};
|
||
let legend = {
|
||
top: "2%",
|
||
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 {
|
||
exportLoading: false,
|
||
chartShow: false,
|
||
myOption: null,
|
||
timeStamp: null,
|
||
optionHour: {},
|
||
optionDay: {},
|
||
optionMonth: {},
|
||
year: 2024,
|
||
month: 5,
|
||
days: 13,
|
||
hours: 1,
|
||
query: {
|
||
mgroup: "",
|
||
},
|
||
tableName: "主要设备（100KW以上）单位产品电耗数据表",
|
||
tableDatas: [
|
||
// ["辊压机", "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: [
|
||
{
|
||
name: "辊压机",
|
||
type: "bar",
|
||
data: [],
|
||
},
|
||
{
|
||
name: "循环风机",
|
||
type: "bar",
|
||
data: [],
|
||
},
|
||
],
|
||
},
|
||
option2: {
|
||
color: colors,
|
||
tooltip: tooltip,
|
||
grid: grid,
|
||
toolbox: toolbox,
|
||
legend: legend,
|
||
xAxis: {
|
||
axisTick: {
|
||
show: true,
|
||
length: 5,
|
||
inside: true,
|
||
},
|
||
data: [],
|
||
},
|
||
yAxis: yAxis,
|
||
series: [
|
||
{
|
||
name: "辊压机",
|
||
type: "bar",
|
||
data: [],
|
||
},
|
||
{
|
||
name: "循环风机",
|
||
type: "bar",
|
||
data: [],
|
||
},
|
||
],
|
||
},
|
||
option3: {
|
||
color: colors,
|
||
tooltip: tooltip,
|
||
grid: grid,
|
||
toolbox: toolbox,
|
||
legend: legend,
|
||
xAxis: {
|
||
axisTick: {
|
||
show: true,
|
||
length: 5,
|
||
inside: true,
|
||
},
|
||
data: [
|
||
"一月",
|
||
"二月",
|
||
"三月",
|
||
"四月",
|
||
"五月",
|
||
"六月",
|
||
"七月",
|
||
"八月",
|
||
"九月",
|
||
"十月",
|
||
"十一月",
|
||
"十二月",
|
||
],
|
||
},
|
||
yAxis: yAxis,
|
||
series: [
|
||
{
|
||
name: "辊压机",
|
||
type: "bar",
|
||
data: [],
|
||
},
|
||
{
|
||
name: "循环风机",
|
||
type: "bar",
|
||
data: [],
|
||
},
|
||
],
|
||
},
|
||
mpointList: [],
|
||
};
|
||
},
|
||
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.getTableHourData();
|
||
that.getHourData();
|
||
that.getDayData();
|
||
that.getMonthData();
|
||
},
|
||
methods: {
|
||
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) => {
|
||
console.log("getTableHourData", res);
|
||
res.forEach((item) => {
|
||
let obj = [];
|
||
obj[0] = item.ep_monitored_name;
|
||
obj[1] = "KW·h/t";
|
||
obj[2] = item.elec_consume_unit;
|
||
obj[3] = 0;
|
||
obj[4] = 0;
|
||
that.tableDatas.push(obj);
|
||
});
|
||
})
|
||
.then(() => {
|
||
let yetTime = timeDate - 3600000 * 24;
|
||
let ystDate = new Date(yetTime);
|
||
let year_h = ystDate.getFullYear();
|
||
let month_h = ystDate.getMonth() + 1;
|
||
let days_h = ystDate.getDate();
|
||
month_h = month_h > 9 ? month_h : "0" + month_h;
|
||
days_h = days_h > 9 ? days_h : "0" + days_h;
|
||
let obj = {};
|
||
obj.type = "day_s";
|
||
obj.year_s = year_h;
|
||
obj.month_s = month_h;
|
||
obj.day_s = days_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) => {
|
||
console.log("getTableHourData", res);
|
||
res.forEach((item, index) => {
|
||
that.tableDatas[index][3] = item.elec_consume_unit;
|
||
});
|
||
});
|
||
})
|
||
.then(() => {
|
||
let obj = {};
|
||
obj.type = "month_s";
|
||
obj.year_s = that.year;
|
||
obj.month_s = that.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((res) => {
|
||
console.log("getTableHourData", res);
|
||
res.forEach((item, index) => {
|
||
that.tableDatas[index][4] = item.elec_consume_unit;
|
||
});
|
||
});
|
||
});
|
||
},
|
||
//获取小时数据
|
||
getHourData() {
|
||
let that = this;
|
||
let obj = {};
|
||
obj.type = "hour_s";
|
||
obj.year_s = that.year;
|
||
obj.month_s = that.month;
|
||
obj.day_s = that.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 seriesData0 = [],
|
||
seriesData1 = [];
|
||
response.forEach((item) => {
|
||
console.log(item.ep_monitored_name);
|
||
let ind = item.hour - 1;
|
||
if (item.ep_monitored_name == "辊压机") {
|
||
seriesData0[ind] = item.elec_consume_unit;
|
||
} else if (item.ep_monitored_name == "循环风机") {
|
||
seriesData1[ind] = item.elec_consume_unit;
|
||
}
|
||
});
|
||
let options = { ...that.option1 };
|
||
options.series[0].data = seriesData0;
|
||
options.series[1].data = seriesData1;
|
||
let hourXAxis = [];
|
||
for (let i = 1; i < that.hours + 1; i++) {
|
||
let item = i + "时";
|
||
hourXAxis.push(item);
|
||
}
|
||
options.xAxis.data = hourXAxis;
|
||
that.optionHour = options;
|
||
});
|
||
},
|
||
//获取天数据
|
||
getDayData() {
|
||
let that = this;
|
||
let obj = {};
|
||
obj.type = "day_s";
|
||
obj.year_s = that.year;
|
||
obj.month_s = that.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 seriesData0 = [],
|
||
seriesData1 = [];
|
||
let data = response;
|
||
data.forEach((item) => {
|
||
let ind = item.day_s - 1;
|
||
if (item.ep_monitored_name == "辊压机") {
|
||
seriesData0[ind] = item.elec_consume_unit;
|
||
} else if (item.ep_monitored_name == "循环风机") {
|
||
seriesData1[ind] = item.elec_consume_unit;
|
||
}
|
||
});
|
||
let options = { ...that.option2 };
|
||
options.series[0].data = seriesData0;
|
||
options.series[1].data = seriesData1;
|
||
let dayXAxis = [];
|
||
for (let i = 1; i <= that.days; i++) {
|
||
let item = i + "日";
|
||
dayXAxis.push(item);
|
||
}
|
||
options.xAxis.data = dayXAxis;
|
||
that.optionDay = options;
|
||
});
|
||
},
|
||
//获取月数据
|
||
getMonthData() {
|
||
let that = this;
|
||
let obj = {};
|
||
obj.type = "month_s";
|
||
obj.year_s = that.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 seriesData0 = [],
|
||
seriesData1 = [];
|
||
let data = response;
|
||
data.forEach((item) => {
|
||
let ind = item.month_s - 1;
|
||
if (item.ep_monitored_name == "辊压机") {
|
||
seriesData0[ind] = item.elec_consume_unit;
|
||
} else if (item.ep_monitored_name == "循环风机") {
|
||
seriesData1[ind] = item.elec_consume_unit;
|
||
}
|
||
});
|
||
let options = { ...that.option3 };
|
||
options.series[0].data = seriesData0;
|
||
options.series[1].data = seriesData1;
|
||
let monthXAxis = [];
|
||
for (let i = 1; i <= that.month; 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.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;
|
||
}
|
||
</style>
|