factory_web/src/views/enm_coal/report.vue

813 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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="10">煤磨工段生产报告</th>
</tr>
<tr>
<th colspan="2">参数</th>
<th>上个小时</th>
<th>昨日</th>
<th>本月</th>
<th>本年</th>
<th>月目标值</th>
<th>月完成度</th>
<th>年目标值</th>
<th>年完成度</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableDatas" :key="item">
<td
class="numCell"
v-if="index == 0 || index == 2"
rowspan="2"
>
{{ item[0] }}
</td>
<td class="numCell" v-else-if="index == 4">
{{ item[0] }}
</td>
<td class="numCell">{{ item[1] }}</td>
<td
class="numCell hoursItem"
@click="itemClick('hour_s', item)"
>
{{ item[2] }}
</td>
<td
class="numCell daysItem"
@click="itemClick('day_s', item)"
>
{{ item[3] }}
</td>
<td
class="numCell monthItem"
@click="itemClick('month_s', item)"
>
{{ item[4] }}
</td>
<td
class="numCell yearItem"
@click="itemClick('year_s', item)"
>
{{ item[5] }}
</td>
<td class="numCell">{{ item[6].toFixed(2) }}</td>
<td class="numCell">{{ item[7] }}</td>
<td class="numCell">{{ item[8].toFixed(2) }}</td>
<td class="numCell">{{ item[9] }}</td>
</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"
:mgroup="query.mgroup"
:modelValue="modelValue"
:showClose="showClose"
:echartType="echartType"
@closed="asynDialog = false"
></charts>
</el-card>
</div>
</template>
<script>
const colors = ["#647bfe", "#8698fe", "#a9b6fe", "#91CC75", "#EE6666"];
let tooltip = {
show: true,
trigger: "axis",
axisPointer: {
type: "cross",
},
confine: false,
showContent: true,
triggerOn: "mousemove",
};
let grid = {
right: "8%",
left: "4%",
top: "15%",
};
let toolbox = {
right: "2%",
feature: {
dataView: { show: true, readOnly: false },
// restore: { show: true },
saveAsImage: { show: true },
},
};
let legend = {
top: "2%",
data: ["总产量", "台时产量", "运转率", "分布电耗"],
};
let yAxis = [
{
type: "value",
name: "产量 (t)",
position: "left",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "运转率 (%)",
position: "right",
alignTicks: true,
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[2],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "分布电耗(KW.h)",
position: "right",
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 {
searchDate: "",
typeRadio: "day",
chartShow: false,
myOption: null,
optionHour: {},
optionDay: {},
optionMonth: {},
year: 2023,
month: 1,
days: 1,
hours: 1,
query: {
mgroup: "",
},
tableDatas: [
["产量", "总产量t", 0, 0, 0, 0, 0, 0, 0, 0],
["产量", "台时产量t/h", "/", 0, 0, 0, 0, 0, 0, 0],
["运转时间", "运转时间h", "/", 0, 0, 0, 0, 0, 0, 0],
["运转时间", "运转率(%", "/", 0, 0, 0, 0, 0, 0, 0],
["能耗", "煤磨分布电耗KW·h/t", 0, 0, 0, 0, 0, 0, 0, 0],
],
tableName: "生产报告",
modelValue: true,
type: "hour_s",
title: "煤磨工段",
cate: "",
apiObj: this.$API.enm.enstat,
showClose: true,
echartType: "line",
asynDialog: false,
option1: {
color: colors,
tooltip: tooltip,
grid: grid,
toolbox: toolbox,
legend: legend,
xAxis: {
axisTick: {
show: true,
length: 5,
inside: true,
// alignWithLabel: true
},
data: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
},
yAxis: yAxis,
series: [
{
name: "总产量",
type: "bar",
yAxisIndex: 0,
data: [],
},
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
data: [],
},
],
},
option2: {
color: colors,
tooltip: tooltip,
grid: grid,
toolbox: toolbox,
legend: legend,
xAxis: {
axisTick: {
show: true,
length: 5,
inside: true,
// alignWithLabel: true
},
data: [],
},
yAxis: yAxis,
series: [
{
name: "总产量",
type: "bar",
yAxisIndex: 0,
data: [],
},
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
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",
yAxisIndex: 0,
data: [],
},
{
name: "台时产量",
type: "bar",
yAxisIndex: 0,
data: [],
},
{
name: "运转率",
type: "line",
yAxisIndex: 1,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 2,
data: [],
},
],
},
};
},
mounted() {
function precen(a, b) {
if (b !== 0 && b !== null && a !== null) {
let precen = (a / b)* 100;
return precen.toFixed(2) + "%";
} else {
return "/";
}
}
let that = this;
var myDate = new Date();
let year = (that.year = myDate.getFullYear());
let month = (that.month = myDate.getMonth() + 1);
let days = (that.days = myDate.getDate());
let hours = (that.hours = myDate.getHours());
let timeDate = myDate.getTime();
let dayTime = 24 * 60 * 60 * 1000;
//昨天的计算
let year_d = year,
month_d = month,
days_d = days;
if (hours < 21) {
//21点前查找昨日数据为前一天数据
let newDate = timeDate - dayTime;
let lastDate = new Date(newDate);
year_d = lastDate.getFullYear();
month_d = lastDate.getMonth() + 1;
days_d = lastDate.getDate();
}
//上一小时的计算
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();
this.$API.mtm.mgroup.list
.req({ page: 0, search: "煤磨" })
.then((res) => {
console.log("煤磨", res);
that.query.mgroup = res[0].id;
//昨日
let params3 = {};
params3.page = 0;
params3.year_s = year_d;
params3.month_s = month_d;
params3.day_s = days_d;
params3.type = "day_s";
params3.mgroup = that.query.mgroup;
that.$API.enm.enstat.req(params3).then((res3) => {
if (res3.length > 0) {
let data3 = res3[0];
that.tableDatas[0][3] = data3.total_production;
that.tableDatas[1][3] = data3.production_hour;
that.tableDatas[2][3] = data3.run_hour;
that.tableDatas[3][3] = data3.run_rate;
that.tableDatas[4][3] = data3.elec_consume_unit;
}
});
//上小时
let params4 = {};
params4.page = 0;
params4.year = year_h;
params4.month = month_h;
params4.day = days_h;
params4.hour = hours_h;
params4.type = "hour_s";
params4.mgroup = that.query.mgroup;
that.$API.enm.enstat.req(params4).then((res4) => {
if (res4.length > 0) {
let data4 = res4[0];
that.tableDatas[0][2] = data4.total_production;
that.tableDatas[4][2] = data4.elec_consume_unit;
}
});
//月目标
let params5 = {};
params5.page = 0;
params5.mgroup = that.query.mgroup;
this.$API.mtm.goal.list
.req(params5)
.then((res5) => {
if (res5.length > 0) {
let data5 = res5;
data5.forEach((item5) => {
let str = "goal_val_" + that.month;
if (item5.goal_cate_name == "总产量t") {
that.tableDatas[0][6] = item5[str];
that.tableDatas[0][8] = item5.goal_val;
} else if (
item5.goal_cate_name == "台时产量t/h"
) {
that.tableDatas[1][6] = item5[str];
that.tableDatas[1][8] = item5.goal_val;
} else if (
item5.goal_cate_name == "运转时间h"
) {
that.tableDatas[2][6] = item5[str];
that.tableDatas[2][8] = item5.goal_val;
} else if (
item5.goal_cate_name == "运转率(%"
) {
that.tableDatas[3][6] = item5[str];
that.tableDatas[3][8] = item5.goal_val;
} else if (
item5.goal_cate_name ==
"单位产品分布电耗KW·h/t"
) {
that.tableDatas[4][6] = item5[str];
that.tableDatas[4][8] = item5.goal_val;
}
});
}
})
.then((res) => {
//年
let params1 = {};
params1.page = 0;
params1.year_s = year;
params1.type = "year_s";
params1.mgroup = that.query.mgroup;
that.$API.enm.enstat.req(params1).then((res1) => {
if (res1.length > 0) {
let data1 = res1[0];
that.tableDatas[0][5] = data1.total_production;
that.tableDatas[0][9] = precen(
that.tableDatas[0][5],
that.tableDatas[0][8]
);
that.tableDatas[1][5] = data1.production_hour;
that.tableDatas[1][9] = precen(
that.tableDatas[1][5],
that.tableDatas[1][8]
);
that.tableDatas[2][5] = data1.run_hour;
that.tableDatas[2][9] = precen(
that.tableDatas[2][5],
that.tableDatas[2][8]
);
that.tableDatas[3][5] = data1.run_rate;
that.tableDatas[3][9] = precen(
that.tableDatas[3][5],
that.tableDatas[3][8]
);
that.tableDatas[4][5] = data1.elec_consume_unit;
that.tableDatas[4][9] = precen(
that.tableDatas[4][5],
that.tableDatas[4][8]
);
} else {
}
});
//月
let params2 = {};
params2.page = 0;
params2.year_s = year;
params2.month_s = month;
params2.type = "month_s";
params2.mgroup = that.query.mgroup;
that.$API.enm.enstat.req(params2).then((res2) => {
if (res2.length > 0) {
let data2 = res2[0];
that.tableDatas[0][4] = data2.total_production;
that.tableDatas[0][7] = precen(
that.tableDatas[0][4],
that.tableDatas[0][6]
);
that.tableDatas[1][4] = data2.production_hour;
that.tableDatas[1][7] = precen(
that.tableDatas[1][4],
that.tableDatas[1][6]
);
that.tableDatas[2][4] = data2.run_hour;
that.tableDatas[2][7] = precen(
that.tableDatas[2][4],
that.tableDatas[2][6]
);
that.tableDatas[3][4] = data2.run_rate;
that.tableDatas[3][7] = precen(
that.tableDatas[3][4],
that.tableDatas[3][6]
);
that.tableDatas[4][4] = data2.elec_consume_unit;
that.tableDatas[4][7] = precen(
that.tableDatas[4][4],
that.tableDatas[4][6]
);
}
});
});
that.getHourData(year, month, days);
that.getDayData(year, month);
that.getMonthData(year);
});
},
methods: {
typeRadioChange() {
this.searchDate = "";
},
dateChange(val) {
let that = this;
console.log(val);
if (val !== null) {
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);
}
} else {
if (this.typeRadio == "day") {
that.getHourData(that.year, that.month, that.days);
} else if (this.typeRadio == "month") {
this.getDayData(that.year, that.month);
} else {
this.getMonthData(that.year);
}
}
},
//获取小时数据
getHourData(year, month, days) {
let that = this;
let query = {};
query.page = 0;
query.year_s = year;
query.month_s = month;
query.day_s = days;
query.type = "hour_s";
query.mgroup = that.query.mgroup;
this.$API.enm.enstat.req(query).then((response) => {
let seriesData0 = [],
seriesData1 = [],
seriesData2 = [],
seriesData3 = [];
let data = response;
data.forEach((item) => {
let ind = item.hour;
seriesData0[ind] = item.total_production; //总产量
seriesData1[ind] = item.production_hour; //台时产量
seriesData2[ind] = item.run_rate; //运转率
seriesData3[ind] = item.elec_consume_unit; //分布电耗
});
let options = { ...that.option1 };
options.series[0].data = seriesData0;
options.series[1].data = seriesData1;
options.series[2].data = seriesData2;
options.series[3].data = seriesData3;
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 query1 = {};
query1.page = 0;
query1.year_s = year;
query1.month_s = month;
query1.type = "day_s";
query1.mgroup = this.query.mgroup;
this.$API.enm.enstat.req(query1).then((response) => {
let seriesData0 = [],
seriesData1 = [],
seriesData2 = [],
seriesData3 = [];
let data = response;
data.forEach((item) => {
let ind = item.day_s - 1;
seriesData0[ind] = item.total_production;
seriesData1[ind] = item.production_hour;
seriesData2[ind] = item.run_rate;
seriesData3[ind] = item.elec_consume_unit;
});
let options = { ...that.option2 };
options.series[0].data = seriesData0;
options.series[1].data = seriesData1;
options.series[2].data = seriesData2;
options.series[3].data = seriesData3;
let dayXAxis = [];
for (let i = 1; i <= that.days; i++) {
let item = i + "日";
dayXAxis.push(item);
}
options.xAxis.data = dayXAxis;
that.optionDay = options;
});
},
//获取月数据
getMonthData(year) {
let that = this;
let query2 = {};
query2.page = 0;
query2.year_s = year;
query2.type = "month_s";
query2.mgroup = that.query.mgroup;
this.$API.enm.enstat.req(query2).then((response) => {
let seriesData0 = [],
seriesData1 = [],
seriesData2 = [],
seriesData3 = [];
let data = response;
data.forEach((item) => {
let ind = item.month_s - 1;
seriesData0[ind] = item.total_production;
seriesData1[ind] = item.production_hour;
seriesData2[ind] = item.run_rate;
seriesData3[ind] = item.elec_consume_unit;
});
let options = { ...that.option3 };
options.series[0].data = seriesData0;
options.series[1].data = seriesData1;
options.series[2].data = seriesData2;
options.series[3].data = seriesData3;
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[1];
this.asynDialog = true;
},
itemClick1(type, item) {
this.chartShow = false;
this.$API.bi.dataset.exec.req("3322567213885833216").then((res) => {
this.myOption = JSON.parse(res.echart_options);
debugger;
console.log(this.myOption);
this.chartShow = 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>