factory_web/src/views/enm_slag/report.vue

811 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="9">电石渣工段生产报告</th>
</tr>
<tr>
<th colspan="2">参数</th>
<th>昨日</th>
<th>本月</th>
<th>本年</th>
<th>月目标值</th>
<th>月完成度</th>
<th>年目标值</th>
<th>年完成度</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableDatas" :key="item">
<td class="numCell"
>
{{ item[0] }}
</td>
<td class="numCell">{{ item[1] }}</td>
<td
class="numCell hoursItem"
@click="itemClick('day_s', item)"
>
{{ item[2] }}
</td>
<td
class="numCell daysItem"
@click="itemClick('month_s', item)"
>
{{ item[3] }}
</td>
<td
class="numCell monthItem"
@click="itemClick('year_s', item)"
>
{{ item[4] }}
</td>
<td class="numCell">{{ item[5].toFixed(2) }}</td>
<td class="numCell">{{ item[6] }}</td>
<td class="numCell">{{ item[7].toFixed(2) }}</td>
<td class="numCell">{{ item[8] }}</td>
</tr>
</tbody>
</table>
<div class="radioWrap">
<el-radio-group
v-model="typeRadio"
@change="typeRadioChange"
>
<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="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 == '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>
<sc-dialog v-model="chartShow" draggable title="电石渣工段">
<div class="searchHead" v-if="type == 'hours'">
<el-date-picker
v-model="query.start_time"
type="date"
placeholder="选择时间"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:picker-options="pickerOptions"
/>
<span class="middleText">至</span>
<el-date-picker
v-model="query.end_time"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
start-placeholder="结束日期"
:picker-options="pickerOptions"
/>
<el-button
type="primary"
class="searchBtn"
@click="dataSearch"
>查询</el-button
>
</div>
<div class="searchHead" v-if="type == 'days'">
<el-date-picker
v-model="query.start_time"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
start-placeholder="开始日期"
:picker-options="pickerOptions"
/>
<el-date-picker
v-model="query.end_time"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
start-placeholder="结束日期"
:picker-options="pickerOptions"
/>
<el-button
type="primary"
class="searchBtn"
@click="dataSearch"
>查询</el-button
>
</div>
<div class="searchHead" v-if="type == 'month'">
<el-date-picker
v-model="query.start_time"
type="month"
format="YYYY-MM"
value-format="YYYY-MM"
start-placeholder="开始月份"
:picker-options="pickerOptions"
/>
<el-date-picker
v-model="query.end_time"
type="month"
format="YYYY-MM"
value-format="YYYY-MM"
start-placeholder="结束月份"
:picker-options="pickerOptions"
/>
<el-button
type="primary"
class="searchBtn"
@click="dataSearch"
>查询</el-button
>
</div>
<div class="searchHead" v-if="type == 'year'">
<el-date-picker
v-model="query.start_time"
type="year"
format="YYYY"
value-format="YYYY"
start-placeholder="开始日期"
:picker-options="pickerOptions"
/>
<el-date-picker
v-model="query.end_time"
type="year"
format="YYYY"
value-format="YYYY"
start-placeholder="结束日期"
:picker-options="pickerOptions"
/>
<el-button
type="primary"
class="searchBtn"
@click="dataSearch"
>查询</el-button
>
</div>
<scEcharts
height="360px"
:option="myOption"
v-if="chartShow"
></scEcharts>
</sc-dialog>
<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>
import scEcharts from "@/components/scEcharts";
import { defineAsyncComponent } from "vue";
const colors = ["#647bfe", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC"];
let tooltip = {
show: true,
trigger: "axis",
axisPointer: {
type: "cross",
},
confine: false,
showContent: true,
triggerOn: "mousemove",
};
let grid = {
right: "7%",
left: "4%",
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: "产量 (t)",
position: "left",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "分布电耗(KW.h)",
position: "right",
alignTicks: true,
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "成本(元)",
position: "right",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[2],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "消耗(t)",
position: "right",
alignTicks: true,
offset: 130,
axisLine: {
show: true,
lineStyle: {
color: colors[3],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "进厂(t)",
position: "right",
alignTicks: true,
offset: 180,
axisLine: {
show: true,
lineStyle: {
color: colors[4],
},
},
axisLabel: {
formatter: "{value}",
},
},
];
export default {
components: {
scEcharts,
charts: defineAsyncComponent(() =>
import("@/components/scEnm/lineChartsdialog.vue")
),
},
data() {
return {
typeRadio: "month",
searchDate: "",
timeStamp: null,
exportLoading: false,
chartShow: false,
myOption: null,
optionDay: {},
optionMonth: {},
year: 2023,
month: 1,
days: 1,
query: {
mgroup: "3346491835287007232",
},
tableDatas: [
["产量", "总产量t", 0, 0, 0, 0, 0, 0, 0, 0],
["能耗", "单位产品分布电耗KW·h/t", 0, 0, 0, 0, 0, 0, 0, 0],
["成本", "电石渣成本(元/吨)", 0, 0, 0, 0, 0, 0, 0, 0],
["湿电石渣", "消耗", 0, 0, 0, 0, 0, 0, 0, 0],
["湿电石渣", "进厂", 0, 0, 0, 0, 0, 0, 0, 0],
],
cate: "",
apiObj: this.$API.enm.enstat,
tableName: "生产报告",
modelValue: true,
type: "hour_s",
title: "电石渣工段",
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,
},
data: [],
},
yAxis: yAxis,
series: [
{
name: "总产量",
type: "bar",
yAxisIndex: 0,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 1,
data: [],
},
{
name: "成本",
type: "bar",
yAxisIndex: 2,
data: [],
},
{
name: "消耗",
type: "bar",
yAxisIndex: 3,
data: [],
},
{
name: "进厂",
type: "bar",
yAxisIndex: 4,
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",
yAxisIndex: 0,
data: [],
},
{
name: "分布电耗",
type: "bar",
yAxisIndex: 1,
data: [],
},
{
name: "成本",
type: "bar",
yAxisIndex: 2,
data: [],
},
{
name: "消耗",
type: "bar",
yAxisIndex: 3,
data: [],
},
{
name: "进厂",
type: "bar",
yAxisIndex: 4,
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 = myDate.getHours();
let timeDate = myDate.getTime();
this.timeStamp = timeDate;
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();
}
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 = this.query.mgroup;
this.$API.enm.enstat.req(params3).then((res3) => {
if (res3.length > 0) {
let data3 = res3[0];
that.tableDatas[0][2] = data3.total_production;
that.tableDatas[1][2] = data3.elec_consume_unit;
that.tableDatas[2][2] = data3.production_cost_unit;
if (data3.imaterial_data.length > 0) {
data3.imaterial_data.forEach((item) => {
if (item.material_name == "湿电石渣消耗") {
that.tableDatas[3][2] = item.amount_consume;
}else if(item.material_name == "湿电石渣进厂"){
that.tableDatas[4][2] = item.amount_consume;
}
});
}
}
});
//月目标
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][5] = item5[str];
that.tableDatas[0][7] = item5.goal_val;
} else if (
item5.goal_cate_name ==
"单位产品分布电耗KW·h/t"
) {
that.tableDatas[1][5] = item5[str];
that.tableDatas[1][7] = item5.goal_val;
} else if (
item5.goal_cate_name ==
"单位产品成本(元/吨)"
) {
that.tableDatas[2][5] = item5[str];
that.tableDatas[2][7] = item5.goal_val;
}
});
}
})
.then((res) => {
//年
let params1 = {};
params1.page = 0;
params1.year_s = year;
params1.type = "year_s";
params1.mgroup = this.query.mgroup;
this.$API.enm.enstat.req(params1).then((res1) => {
if (res1.length > 0) {
let data1 = res1[0];
that.tableDatas[0][4] = data1.total_production;
that.tableDatas[0][8] = precen(
that.tableDatas[0][4],
that.tableDatas[0][7]
);
that.tableDatas[1][4] = data1.elec_consume_unit;
that.tableDatas[1][8] = precen(
that.tableDatas[1][4],
that.tableDatas[1][7]
);
that.tableDatas[2][4] =
data1.production_cost_unit;
that.tableDatas[2][8] = precen(
that.tableDatas[2][4],
that.tableDatas[2][7]
);
if (data1.imaterial_data.length > 0) {
data1.imaterial_data.forEach((item) => {
if (item.material_name == "湿电石渣消耗") {
that.tableDatas[3][4] = item.amount_consume;
}else if(item.material_name == "湿电石渣进厂"){
that.tableDatas[4][4] = item.amount_consume;
}
});
}
} else {
}
});
//月
let params2 = {};
params2.page = 0;
params2.year_s = year;
params2.month_s = month;
params2.type = "month_s";
params2.mgroup = this.query.mgroup;
this.$API.enm.enstat.req(params2).then((res2) => {
if (res2.length > 0) {
let data2 = res2[0];
that.tableDatas[0][3] = data2.total_production;
that.tableDatas[0][6] = precen(
that.tableDatas[0][3],
that.tableDatas[0][5]
);
that.tableDatas[1][3] = data2.elec_consume_unit;
that.tableDatas[1][6] = precen(
that.tableDatas[1][3],
that.tableDatas[1][5]
);
that.tableDatas[2][3] =
data2.production_cost_unit;
that.tableDatas[2][6] = precen(
that.tableDatas[2][3],
that.tableDatas[2][5]
);
if (data2.imaterial_data.length > 0) {
data2.imaterial_data.forEach((item) => {
if (item.material_name == "湿电石渣消耗") {
that.tableDatas[3][3] = item.amount_consume;
}else if(item.material_name == "湿电石渣进厂"){
that.tableDatas[4][3] = item.amount_consume;
}
});
}
}
});
});
that.getDayData(year, month);
that.getMonthData(year);
});
},
methods: {
typeRadioChange() {
this.searchDate = "";
},
dateChange(val) {
let that = this;
if (val !== null) {
if (this.typeRadio == "month") {
let year = val.split("-")[0];
let month = val.split("-")[1];
month = Number(month);
this.getDayData(year, month);
} else {
this.getMonthData(val);
}
} else {
if (this.typeRadio == "month") {
this.getDayData(that.year, that.month);
} else {
this.getMonthData(that.year);
}
}
},
//获取天数据
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 = [],
seriesData4 = [];
let data = response;
data.forEach((item) => {
let ind = item.day_s - 1;
seriesData0[ind] = item.total_production;
seriesData1[ind] = item.production_cost_unit;
seriesData2[ind] = item.elec_consume_unit;
if (item.imaterial_data.length > 0) {
item.imaterial_data.forEach((items_n) => {
if (items_n.material_name == "湿电石渣消耗") {
seriesData3[ind] = items_n.amount_consume;
}else if(items_n.material_name == "湿电石渣进厂"){
seriesData4[ind] = items_n.amount_consume;
}
});
}
});
let options = { ...that.option1 };
options.series[0].data = seriesData0;
options.series[1].data = seriesData1;
options.series[2].data = seriesData2;
options.series[3].data = seriesData3;
options.series[4].data = seriesData4;
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 = [],
seriesData4 = [];
let data = response;
data.forEach((item) => {
let ind = item.month_s - 1;
seriesData0[ind] = item.total_production;
seriesData1[ind] = item.production_cost_unit;
seriesData2[ind] = item.elec_consume_unit;
if (item.imaterial_data.length > 0) {
item.imaterial_data.forEach((items_n) => {
if (items_n.material_name == "湿电石渣消耗") {
seriesData3[ind] = items_n.amount_consume;
}else if(items_n.material_name == "湿电石渣进厂"){
seriesData4[ind] = items_n.amount_consume;
}
});
}
});
let options = { ...that.option2 };
options.series[0].data = seriesData0;
options.series[1].data = seriesData1;
options.series[2].data = seriesData2;
options.series[3].data = seriesData3;
options.series[4].data = seriesData4;
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>