feat: 修改 enm 报表

This commit is contained in:
zty 2025-01-10 17:32:01 +08:00
parent c1a4150080
commit 64c738acd2
20 changed files with 1521 additions and 314 deletions

View File

@ -148,6 +148,11 @@ export default {
.el-calendar {
border-radius: 15px;
}
#greenHeadTable .el-table th.el-table__cell,
#greenHeadTable .el-table.is-scrolling-left th.el-table-fixed-column--left,
#greenHeadTable .el-table.is-scrolling-none th.el-table-fixed-column--left{
background-color: #80f116!important;
}
.el-calendar > .el-calendar__body {
padding: 0 20px 20px;

View File

@ -33,9 +33,10 @@
<th>昨日</th>
<th>本月</th>
<th>本年</th>
<th>月目标值</th>
<th @click="goToTarget('3626253231757619200')"
style="font-weight: bold; color: #1CD6DD; font-size: 18px;">月目标值</th>
<th>月完成度</th>
<th>年目标值</th>
<th @click="goToTarget('3626253231757619200')">年目标值</th>
<th>年完成度</th>
</tr>
</thead>
@ -843,6 +844,14 @@ export default {
typeRadioChange() {
this.searchDate = "";
},
goToTarget(mgroup_id) {
this.$router.push({
path: "/enm_monthSet/goalSetting",
query: {
mgroup: mgroup_id,
},
})
},
dateChange(val) {
let that = this;
console.log(val);

View File

@ -38,7 +38,7 @@
>
<thead class="myTableHead">
<tr>
<th colspan="16">煤磨工序班组月度对比分析</th>
<th colspan="15">煤磨工序班组月度对比分析</th>
</tr>
<tr>
<th rowspan="2">月份</th>
@ -47,13 +47,13 @@
<th rowspan="2">台时产量t/h</th>
<th rowspan="2">运转率%</th>
<th colspan="2">质量</th>
<th colspan="8">单位产品电耗</th>
<th colspan="7">单位产品电耗</th>
<th rowspan="2">得分</th>
</tr>
<tr>
<th>细度%</th>
<th>水分%</th>
<th>煤磨排风机主电机kW·h/t</th>
<!-- <th>煤磨排风机主电机kW·h/t</th> -->
<th>当期值kW·h/t</th>
<th>目标值kW·h/t</th>
<th>当期与目标值差值kW·h/t</th>
@ -214,16 +214,16 @@ export default {
? item.出磨煤粉_水分_rate_pass
: 0;
//
arr[7] =
item.煤磨排风机主电机_consume_unit
!== undefined && item.煤磨排风机主电机_consume_unit
!== null
? item.煤磨排风机主电机_consume_unit
: 0;
// arr[7] =
// item._consume_unit
// !== undefined && item._consume_unit
// !== null
// ? item._consume_unit
// : 0;
let keyVale = "goal_val_" + n;
arr[8] = item.elec_consume_unit; //kW·h/t
arr[9] = goalData[keyVale]; //kW·h/t//
arr[10] = (arr[8] - arr[9]).toFixed(2); //kW·h/t
arr[7] = item.elec_consume_unit; //kW·h/t
arr[8] = goalData[keyVale]; //kW·h/t//
arr[9] = (arr[7] - arr[8]).toFixed(2); //kW·h/t
let ind_pre = 0,
huanqi = 0;
if (item.month_s == 1) {
@ -245,23 +245,23 @@ export default {
}
})
}
arr[11] = huanqi; //kW·h/t
arr[10] = huanqi; //kW·h/t
let huanqicha = 0;
if (huanqi !== "/") {
huanqicha = (arr[8] - arr[11]).toFixed(2);
huanqicha = (arr[7] - arr[10]).toFixed(2);
} else {
huanqicha = 0;
}
arr[12] = huanqicha; //kW·h/t
arr[11] = huanqicha; //kW·h/t
// arr[13] =
if (arr[11] !=="/" && arr[11]!=0 && arr[12] !=0 && arr[12] !== "undefined"){
arr[13] = ((arr[12]/arr[11])*100).toFixed(2);
if (arr[12] !=="/" && arr[10]!=0 && arr[11] !=0 && arr[11] !== "undefined"){
arr[12] = ((arr[11]/arr[10])*100).toFixed(2);
}else{
arr[13] = "/"; //%= kW·h/t/kW·h/t*100%
arr[12] = "/"; //%= kW·h/t/kW·h/t*100%
}
arr[14] = 0; //%
arr[13] = 0; //%
// arr[15] = 0.0; //
arr[15] = 0;
arr[14] = 0;
if (month_obj[n]) {
const monthData = month_obj[n];
const itemValue = item.elec_consume_unit; //
@ -277,7 +277,7 @@ export default {
} else if (index === 3) {
elec_score= 15;
}
arr[15] += elec_score;
arr[14] += elec_score;
// const run_rate_itemValue = item.run_rate; //
// const run_rate_sortedData = monthData.sort((a, b) => parseFloat(b.run_rate) - parseFloat(a.run_rate));
@ -307,7 +307,7 @@ export default {
} else if (production_hour_index === 3) {
production_hour_score= 4;
}
arr[15] += production_hour_score;
arr[14] += production_hour_score;
const xidu_itemValue = item.出磨煤粉_细度_rate_pass; //
const xidu_sortedData = monthData.sort((a, b) => parseFloat(b.xidu) - parseFloat(a.xidu));
@ -322,7 +322,7 @@ export default {
} else if (xidu_index === 3) {
xidu_score= 3;
}
arr[15] += xidu_score;
arr[14] += xidu_score;
const coal_powder_itemValue = item.出磨煤粉_水分_rate_pass; //
const coal_powder_sortedData = monthData.sort((a, b) => parseFloat(b.coal_powder) - parseFloat(a.coal_powder));
@ -337,8 +337,8 @@ export default {
} else if (coal_powder_index === 3) {
coal_powder_score= 2;
}
arr[15] += coal_powder_score;
arr[15] += 60;
arr[14] += coal_powder_score;
arr[14] += 60;
}
wrapArr.push(arr);
});

View File

@ -1,6 +1,6 @@
<!-- 全厂水量统计 -->
<template>
<div class="app-container" id="app-container" style="height: 50%">
<div class="app-container" id="app-container" style="height: 40%">
<el-header id="app-header">
<div class="left-panel">
<el-select
@ -201,14 +201,14 @@
</el-table>
</div>
</div>
<!-- <div class="chartWrap" v-show="query.type==0">
<div class="chartWrap" v-show="query.type==0">
<div class="chartTitle">本日生产参数统计图</div>
<scEcharts
height="400px"
width="1500px"
:option="optionHour"
></scEcharts>
</div> -->
</div>
<div class="chartWrap" v-show="query.type==1">
<div class="chartTitle">本月生产参数统计图</div>
<scEcharts
@ -275,6 +275,7 @@ export default {
optionDay: {},
optionMonth: {},
options: [
{id:0,name:'日统计'},
{id:1,name:'月统计'},
{id:2,name:'年统计'},
{id:3,name:'时间段'},
@ -604,7 +605,7 @@ export default {
name: ''
},
series: [{
name: '工业水(t)', //
name: '碳排放量(t)', //
type: 'bar',
data: gyhourlyData, //
itemStyle: {
@ -612,24 +613,6 @@ export default {
},
},
{
name: '绿化水(t)', //
type: 'bar',
data: lvhourlyData, //
itemStyle: {
color: '#DCE6CB',
},
},
{
name: '生活水(t)', //
type: 'bar',
data: shhourlyData, //
itemStyle: {
color: '#93F607',
},
},
]
};
that.optionHour = option;

View File

@ -0,0 +1,344 @@
<template>
<div class="app-container" id="app-container" style="height: 100%">
<el-header id="app-header">
<div class="left-panel">
<el-select
v-model="query.type"
placeholder="查询类型"
clearable
class="headerSearch"
@change="typeCange"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-date-picker
v-model="query.day"
type="date"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
placeholder="天"
v-if="query.type==0"
style="margin-right: 6px"
/>
<el-date-picker
v-model="query.month"
type="month"
value-format="YYYY-MM"
format="YYYY-MM"
placeholder="查询月份"
v-if="query.type==1"
class="headerSearch"
/>
<el-date-picker
v-model="query.year"
type="year"
value-format="YYYY"
format="YYYY"
placeholder="查询年份"
v-if="query.type==2"
class="headerSearch"
/>
<el-date-picker
v-model="daterange"
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
placeholder="时间范围"
value-format="YYYY-MM-DD hh:mm:ss"
v-if="query.type==3"
style="margin-right: 6px"
@change="changeDate"
/>
<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>
<table id="myTable" class="myTable" border="1" cellspacing="0" style="width: 100%; text-align: center;">
<thead class="myTableHead">
<tr>
<th colspan="2">主要用能设备100KW以上</th>
<th v-for="(header, index) in headers" :key="index">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
<td
v-if="rowIndex === 0 || rowIndex === 2 || rowIndex === 4"
:rowspan="rowIndex === 0 || rowIndex === 2 ? 2 : 1"
>
{{ row[0] }}
</td>
<td>{{ row[1] }}</td>
<td v-for="(cell, cellIndex) in row.slice(2)" :key="cellIndex"
>{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
</el-card>
<div id="barChart" style="width: 100%; height: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
query:{
type:0,
day:'',
year:'',
month:'',
yearStart:'',
start_time:'',
end_time:'',
},
tableDatas_range:[],
daterange:[],
headers: ['生料立磨','循环风机','高温风机','尾排风机','回转窑','水泥磨','水泥循环风机','水泥系统风机','电石渣','原料磨','煤磨','水泥粉磨','水泥包装'],
mpoint_name: ['原料立磨主电机','循环风机-原料磨','高温风机','尾排风机','烧成工序用电合计','水泥高压进线','循环风机-水泥磨','系统风机','电石渣用电合计','生料辅料工序用电量','煤磨合计','水泥磨主电机','包装进线'],
tableData: [
['用电峰','用电尖峰','','','','','','','','','','','','',''],
['用电峰','用电高峰','','','','','','','','','','','','',''],
['用电谷','用电低谷','','','','','','','','','','','','',''],
['用电谷','用电深谷','','','','','','','','','','','','',''],
['用电平','用电平谷','','','','','','','','','','','','',''],
],
mpointList:["3631338253279723520,3631338547577257984,3631332708552392704,3631333116071026688,3631877739432493056,3631344327579828224,3631853750379200512,3631853436771090432,3631869508278722560,3745109632247812096,3631878174063050752,3631852596106797056,3631854361455820800"],
tableName:'峰谷平',
options:[
{id:0,name:'日统计'},
{id:1,name:'月统计'},
{id:2,name:'年统计'},
{id:3,name:'时间范围'},
],
row_list : ['peak','high','low','deep','flat'],
row_translate: ['尖峰', '高峰', '低谷', '深谷', '平谷'],
colors :["#EB1B1D", "#FE9900", "#0E4E51", "#2B8C05", "#A9C0A0"],//
};
},
mounted() {
var myDate = new Date();
let month = myDate.getMonth()+1;
if(month<10){
month = '0'+month;
}
this.query.month = myDate.getFullYear()+'-'+month;
this.query.day = myDate.getFullYear()+'-'+(myDate.getMonth()+1)+'-'+myDate.getDate();
this.query.year = myDate.getFullYear();
this.dateChange();
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let that = this;
if (columnIndex == 0) {
if (that.indexList.indexOf(rowIndex) > -1) {
let rowspans = that.mgroupObj[row.mgroupName];
return {
rowspan: rowspans,
colspan: 1,
};
} else {
return {
rowspan: 1,
colspan: 0,
};
}
}
},
changeDate(){
let obj = {};
obj.type = "hour";
obj.start_time = this.daterange[0];
obj.end_time = this.daterange[1];
obj.mpoint__in = this.mpointList[0];
obj.page = 0;
this.$API.enm.mpointstat.groupValues.req(obj).then((res) => {
//res total_val
res.forEach(item => {
item.total_val = Number(item.total_val).toFixed(2);
});
this.tableDatas_range = res;
});
},
dateChange() {
let that = this;
let arr = [],
obj = {};
// type obj
if (that.query.type === 0) { //
arr = that.query.day.split('-');
obj.year = Number(arr[0]);
obj.month = Number(arr[1]);
obj.day = Number(arr[2]);
} else if (that.query.type === 1) { //
arr = that.query.month.split('-');
obj.year = Number(arr[0]);
obj.month = Number(arr[1]);
obj.days = new Date(that.query.year, that.query.month, 0).getDate(); //
} else if (that.query.type === 2) { //
obj.year = that.query.year;
} else if (that.query.type === 3) { //
obj.start_time = that.daterange[0];
obj.end_time = that.daterange[1];
}
obj.page = 0;
obj.type = 'hour';
obj.group_by = 'val_level';
obj.mpoint__in = that.mpointList[0];
this.$API.enm.mpointstat.groupValues.req(obj)
.then((res) => {
let chartData = {};
res.forEach(item => {
//
const colIndex = this.mpoint_name.indexOf(item.mpoint__name) + 2;
const rowIndex = this.row_list.indexOf(item.val_level);
if (rowIndex > -1 && colIndex > 1) {
this.tableData[rowIndex][colIndex] = (item.total_val).toFixed(2);
}
//
if (!chartData[item.mpoint__name]) {
chartData[item.mpoint__name] = [];
}
chartData[item.mpoint__name].push({
level: item.val_level,
total_val: item.total_val
});
});
//
that.createBarChart(chartData);
})
.catch((error) => {
console.error("API 请求错误: ", error);
});
},
//
createBarChart(chartData) {
//
let chartDom = document.getElementById('barChart');
let myChart = echarts.init(chartDom);
//
let seriesData = [];
let categories = this.mpoint_name; //
let rowList = this.row_list; // ['peak', 'high', 'low', 'deep', 'flat']
let row_translate = this.row_translate; // ['', '', '', '', '']
// 'peak', 'high', 'low', 'deep', 'flat'
rowList.forEach((level, index) => {
let data = categories.map(device => {
//
let deviceData = chartData[device]?.find(item => item.level === level);
return deviceData ? Math.round(deviceData.total_val) : ''; // 0
});
seriesData.push({
name: row_translate[index], // peakhigh
type: 'bar',
data: data, //
label: {
show: true,
position: 'top',
formatter: '{c}' //
},
itemStyle: {
color: this.colors[index] //
}
});
});
//
let option = {
title: {
text: '电量统计柱状图',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' } //
},
legend: {
data: row_translate, // 'peak', 'high'
top: '10%'
},
xAxis: {
type: 'category',
data: this.headers, //
axisLabel: {
rotate: 45 //
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} kW·h' // kW·h
}
},
series: seriesData
};
//
myChart.setOption(option);
},
handlePrint() {
this.$PRINT('#myReport');
},
exportExcel() {
this.exportLoading = true;
this.$XLSX('#myTable', this.tableName)
this.exportLoading = false;
},
}
};
</script>
<style>
#numTable{
margin-left: 37px;
}
#numTable td{
height: 32px;
padding-left: 5px;
}
.numCell{
width: 80px;
}
.numCell.numCell_last{
width: 100px;
}
.searchHead{
display:flex
}
.middleText{
height: 32px;
line-height: 32px;
margin: 0 5px;
display: inline-block;
}
.searchBtn{
margin-left: 5px;
}
</style>

View File

@ -7,13 +7,26 @@
placeholder="查询类型"
clearable
class="headerSearch"
@change="typeCange"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-select
v-model="query.mgroupName"
placeholder="查询工段"
clearable
class="headerSearch"
>
<el-option
v-for="item in mgroups"
:key="item.id"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
<el-date-picker
@ -35,26 +48,26 @@
class="headerSearch"
/>
<el-date-picker
v-model="query.year"
type="year"
value-format="YYYY"
format="YYYY"
placeholder="查询年份"
v-if="query.type==2"
class="headerSearch"
/>
<el-date-picker
v-model="daterange"
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
placeholder="时间范围"
value-format="YYYY-MM-DD hh:mm:ss"
v-if="query.type==3"
style="margin-right: 6px"
@change="changeDate"
v-model="query.year"
type="year"
value-format="YYYY"
format="YYYY"
placeholder="查询年份"
v-if="query.type==2"
class="headerSearch"
/>
<el-date-picker
v-model="daterange"
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
placeholder="时间范围"
value-format="YYYY-MM-DD hh:mm:ss"
v-if="query.type==3"
style="margin-right: 6px"
@change="changeDate"
/>
<el-button
type="primary"
@ -67,36 +80,78 @@
:loading="exportLoading"
>导出xlsx
</el-button>
<el-button
type="primary"
@click="showBarChart()"
icon="el-icon-pie-chart"
>趋势图
</el-button>
<!-- <el-button type="primary" @click="handlePrint">打印 </el-button> -->
</div>
</el-header>
<el-card style="margin-top:5px">
<div>
<table id="myTable" class="myTable" border="1" cellspacing="0" style="width: 100%; text-align: center;">
<thead class="myTableHead">
<tr>
<th colspan="2">主要用能设备100KW以上</th>
<th v-for="(header, index) in headers" :key="index">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
<td
v-if="rowIndex === 0 || rowIndex === 2 || rowIndex === 4"
:rowspan="rowIndex === 0 || rowIndex === 2 ? 2 : 1"
<el-card style="margin-top:5px">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<el-table
id = "greenHeadTable"
:data="tableData"
style="width: 70%"
border
:height="tableHeight"
>
<el-table-column label="100KW以上设备用电峰谷平" align="center" width="100" fixed>
<el-table-column label="设备" prop="mpoint__name" min-width="110" fixed></el-table-column>
<el-table-column label="单位" prop="unit" min-width="110" fixed></el-table-column>
<!-- 动态渲染尖峰波峰平谷波谷深谷 -->
<el-table-column
v-for="column in columns"
:key="column.prop"
:label="column.label"
:prop="column.prop"
min-width="120"
></el-table-column>
</el-table-column>
</el-table>
<el-table
:data="tableDatas2"
border
style="margin-left: 10px; margin-top: 10px; width: 500px; table-layout: fixed;"
:key="timeStamp"
class="myTable"
>
<!-- 第一列 -->
<el-table-column
label="峰谷平时间段划分"
prop="type"
width="150"
align="center"
>
{{ row[0] }}
</td>
<td>{{ row[1] }}</td>
<td v-for="(cell, cellIndex) in row.slice(2)" :key="cellIndex"
>{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
</el-card>
<div id="barChart" style="width: 100%; height: 400px;"></div>
</el-table-column>
<!-- 第二列 -->
<el-table-column
label="时间段"
prop="time"
align="left"
>
</el-table-column>
</el-table>
</div>
</el-card>
</div>
<el-dialog
title="柱状图"
v-model="isChartDialogVisible"
width="80%"
@close="onDialogClose">
<div
id="barChart"
style="width: 100%; height: 400px;"
></div>
<template #footer>
<el-button @click="isChartDialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</template>
<script>
import * as echarts from 'echarts';
@ -106,33 +161,53 @@ import * as echarts from 'echarts';
query:{
type:0,
day:'',
mgroupName:'',
year:'',
month:'',
yearStart:'',
start_time:'',
end_time:'',
},
tableHeight:800,
columns: [
{ label: '尖峰', prop: 'peak' },
{ label: '波峰', prop: 'high' },
{ label: '平谷', prop: 'flat' },
{ label: '波谷', prop: 'low' },
{ label: '深谷', prop: 'deep' },
],
tableData:[],
tableDatas2: [
{ type: "波峰", time: "8:00--11:00 19:00-24:00" },
{ type: "尖峰", time: "7月 21:00--23:00, 1、11、12月19:00--21:00" },
{ type: "平谷", time: "11:00--13:00 17:00-19:00 00:00-4:00" },
{ type: "波谷", time: "4:00--8:00 13:00-17:00" },
{ type: "深谷", time: "5、6、7、8月 14:00--16:00" },
],
tableDatas_day: [],
tableDatas_range:[],
mpoint_name: [],
isChartDialogVisible: false, //
mpointList: [],
daterange:[],
headers: ['生料立磨','循环风机','高温风机','尾排风机','回转窑','水泥磨','水泥循环风机','水泥系统风机','电石渣','原料磨','煤磨','水泥粉磨','水泥包装'],
mpoint_name: ['原料立磨主电机','循环风机-原料磨','高温风机','尾排风机','烧成工序用电合计','水泥高压进线','循环风机-水泥磨','系统风机','电石渣用电合计','生料辅料工序用电量','煤磨合计','水泥磨主电机','包装进线'],
tableData: [
['用电峰','用电尖峰','','','','','','','','','','','','',''],
['用电峰','用电高峰','','','','','','','','','','','','',''],
['用电谷','用电低谷','','','','','','','','','','','','',''],
['用电谷','用电深谷','','','','','','','','','','','','',''],
['用电平','用电平谷','','','','','','','','','','','','',''],
],
mpointList:["3631338253279723520,3631338547577257984,3631332708552392704,3631333116071026688,3631877739432493056,3631344327579828224,3631853750379200512,3631853436771090432,3631869508278722560,3745109632247812096,3631878174063050752,3631852596106797056,3631854361455820800"],
tableName:'峰谷平',
barChartData: {},
options:[
{id:0,name:'日统计'},
{id:1,name:'月统计'},
{id:2,name:'年统计'},
{id:3,name:'时间范围'},
],
row_list : ['peak','high','low','deep','flat'],
row_translate: ['尖峰', '高峰', '低谷', '深谷', '平谷'],
mgroups: [
{id:0,name:'电石渣'},
{id:1,name:'原料磨'},
{id:2,name:'生料工序(二次配料)'},
{id:3,name:'回转窑'},
{id:4,name:'煤磨'},
{id:5,name:'水泥磨'},
{id:6,name:'水泥包装'},
],
col_list : ['peak','high','low','deep','flat'],
row_translate: ['尖峰', '波峰', '波谷', '深谷', '平谷'],
colors :["#EB1B1D", "#FE9900", "#0E4E51", "#2B8C05", "#A9C0A0"],//
};
@ -167,28 +242,49 @@ import * as echarts from 'echarts';
}
}
},
changeDate(){
let obj = {};
obj.type = "hour";
obj.start_time = this.daterange[0];
obj.end_time = this.daterange[1];
obj.mpoint__in = this.mpointList[0];
obj.page = 0;
this.$API.enm.mpointstat.groupValues.req(obj).then((res) => {
//res total_val
res.forEach(item => {
item.total_val = Number(item.total_val).toFixed(2);
});
this.tableDatas_range = res;
});
},
let obj = {};
obj.type = "hour";
obj.start_time = this.daterange[0];
obj.end_time = this.daterange[1];
obj.mpoint__in = this.mpointList[0];
obj.page = 0;
this.$API.enm.mpointstat.groupValues.req(obj).then((res) => {
//res total_val
res.forEach(item => {
item.total_val = Number(item.total_val).toFixed(2);
});
this.tableDatas_range = res;
});
},
dateChange() {
let that = this;
that.mpointList = []; //
let arr = [],
obj = {};
// type obj
console.log(that.query.mgroupName, 'that.query.mgroupName')
that.$API.enm.mpoint.list
.req({
page: 0,
enabled: 1,
need_display: 1,
mgroup__name: that.query.mgroupName,
mpoint_ep_monitored__power_kw__gte: 100,
ordering: "report_sortstr",
material__code__in: "elec",
query: "{ id, name, nickname, mgroup_name, unit, report_sortstr, ep_monitored_name, }",
})
.then((res) => {
if (res.length === 0) {
return;
}
console.log(res, 'res-----------')
that.mpointList = res
.filter((item) => item.report_sortstr !== "" && item.mgroup_name !== '生活区')
.map((item) => item.id); // id
}).then(() => {
// type obj
if (that.query.type === 0) { //
arr = that.query.day.split('-');
obj.year = Number(arr[0]);
@ -205,70 +301,81 @@ import * as echarts from 'echarts';
obj.start_time = that.daterange[0];
obj.end_time = that.daterange[1];
}
console.log(that.mpointList.length, 'that.mpointList')
let mpointID = that.mpointList.join(',');
obj.page = 0;
obj.type = 'hour';
obj.group_by = 'val_level';
obj.mpoint__in = that.mpointList[0];
obj.mpoint__in = mpointID;
this.$API.enm.mpointstat.groupValues.req(obj)
.then((res) => {
let chartData = {};
res.forEach(item => {
//
const colIndex = this.mpoint_name.indexOf(item.mpoint__name) + 2;
const rowIndex = this.row_list.indexOf(item.val_level);
if (rowIndex > -1 && colIndex > 1) {
this.tableData[rowIndex][colIndex] = (item.total_val).toFixed(2);
}
//
if (!chartData[item.mpoint__name]) {
chartData[item.mpoint__name] = [];
}
chartData[item.mpoint__name].push({
level: item.val_level,
total_val: item.total_val
});
});
//
that.createBarChart(chartData);
const groupedData = res.reduce((acc, item) => {
// mpoint__name
let group = acc.find(g => g.mpoint__name === item.mpoint__name);
//
if (!group) {
group = {
mpoint__name: item.mpoint__name,
unit: item.mpoint__unit,
flat: null,
high: null,
low: null,
peak: null,
deep: null,
};
acc.push(group);
}
// val_level total_val
group[item.val_level] = (item.total_val.toFixed(2));
return acc;
}, []);
this.tableData = groupedData;
console.log("groupedData",groupedData)
})
.catch((error) => {
console.error("API 请求错误: ", error);
});
});
},
//
showBarChart(){
this.isChartDialogVisible = true;
this.$nextTick(() => {
this.createBarChart();
});
},
onDialogClose() {
this.isChartDialogVisible = false;
},
//
createBarChart(chartData) {
createBarChart() {
//
let chartDom = document.getElementById('barChart');
if (!chartDom) {
console.error('无法找到 #barChart 元素');
return;
}
let myChart = echarts.init(chartDom);
//
let seriesData = [];
let categories = this.mpoint_name; //
let rowList = this.row_list; // ['peak', 'high', 'low', 'deep', 'flat']
let row_translate = this.row_translate; // ['', '', '', '', '']
// 'peak', 'high', 'low', 'deep', 'flat'
rowList.forEach((level, index) => {
let data = categories.map(device => {
//
let deviceData = chartData[device]?.find(item => item.level === level);
return deviceData ? Math.round(deviceData.total_val) : ''; // 0
});
seriesData.push({
name: row_translate[index], // peakhigh
type: 'bar',
data: data, //
label: {
show: true,
position: 'top',
formatter: '{c}' //
},
itemStyle: {
color: this.colors[index] //
}
});
});
let seriesData = [
{ name: '平谷', data: [] },
{ name: '波峰', data: [] },
{ name: '波谷', data: [] },
{ name: '尖峰', data: [] },
{ name: '深谷', data: [] }
];
let categories = this.tableData.map(item => item.mpoint__name); //
this.tableData.forEach(item => {
seriesData[0].data.push(item.flat ? parseFloat(item.flat) : 0); //
seriesData[1].data.push(item.high ? parseFloat(item.high) : 0); //
seriesData[2].data.push(item.low ? parseFloat(item.low) : 0); //
seriesData[3].data.push(item.peak ? parseFloat(item.peak) : 0); //
seriesData[4].data.push(item.deep ? parseFloat(item.deep) : 0); //
});
//
let option = {
@ -281,27 +388,36 @@ import * as echarts from 'echarts';
axisPointer: { type: 'shadow' } //
},
legend: {
data: row_translate, // 'peak', 'high'
data: this.row_translate, // 'peak', 'high'
top: '10%'
},
xAxis: {
type: 'category',
data: this.headers, //
data: categories, //
axisLabel: {
rotate: 45 //
}
},
yAxis: {
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} kW·h' // kW·h
}
},
series: seriesData
};
},
series: seriesData.map(item => ({
name: item.name,
type: 'bar',
data: item.data, //
label: {
show: true,
position: 'top',
formatter: '{c}' //
}
}))
};
//
myChart.setOption(option);
//
myChart.setOption(option);
},
handlePrint() {
@ -341,4 +457,7 @@ import * as echarts from 'echarts';
.searchBtn{
margin-left: 5px;
}
.myTable td:first-child {
width: 150px !important; /* 使用 !important 确保优先级足够高 */
}
</style>

View File

@ -298,7 +298,7 @@
itemArr.push( item1[0].out_steam_coal)//tce)
}
itemArr.push( item1[0].total_production) //
if(item1[1].mgroup_name == '回转窑'){
if(item1[0].mgroup_name == '回转窑'){
itemArr.push( item1[0].cen_consume_unit)
}else{
itemArr.push( item1[0].en_consume_unit) //
@ -310,12 +310,14 @@
itemArr.push( 0)
itemArr.push( 0)
}
// if(that.deptName==''){
// // itemArr.push( item1[1].water_consume)//
// // itemArr.push( item1[1].kiln_end_heat)//
// }
itemArr.push( item1[1].total_production)
itemArr.push( item1[1].en_consume_unit)
if (item1[4] && item1[4].mgroup_name=='生料工序(二次配料)'){
itemArr.push( item1[4].elec_consume)
itemArr.push( item1[4].elec_coal_consume)
itemArr.push( item1[4].total_production)
itemArr.push( item1[4].en_consume_unit)
}
if(item1 &&item1[2]){
itemArr.push(item1[2].cair_consume)//
}else{
@ -331,21 +333,17 @@
}else{
if(parseFloat(item1[1].total_production) != 0 && item1[3]){
itemArr.push((item1[3].cair_consume/item1[1].total_production).toFixed(2))//
itemArr.push((item1[3].cair_consume/item1[1].total_production).toFixed(2))//
}else{
itemArr.push(0)
}
}
if (item1[4]){
itemArr.push( item1[4].elec_consume)
itemArr.push( item1[4].elec_coal_consume)
itemArr.push( item1[4].total_production)
itemArr.push( item1[4].en_consume_unit)
}
innerArr.push(itemArr)
}
})
that.tableDatas3 = innerArr;
console.log(that.tableDatas3, "-----------tableDatas3");
});
},
getTableData(){

View File

@ -5,7 +5,54 @@
<img src="/media/elec_flow.png" class="flowImg" >
<!-- <img src="/img/energy.png" class="flowImg" /> -->
<div class="pictureHeader" style="top: 35px;">
本日数据 时间段 00:00--24:00
<div class="left-panel">
<el-select
v-model="query.type"
placeholder="查询类型"
clearable
class="headerSearch"
@change="typeCange"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-date-picker
v-model="query.day"
type="date"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
placeholder="天"
v-if="query.type==0"
style="margin-right: 6px"
/>
<el-date-picker
v-model="query.month"
type="month"
value-format="YYYY-MM"
format="YYYY-MM"
placeholder="查询月份"
v-if="query.type==1"
class="headerSearch"
/>
<el-date-picker
v-model="query.year"
type="year"
value-format="YYYY"
format="YYYY"
placeholder="查询年份"
v-if="query.type==2"
class="headerSearch"
/>
<el-button
type="primary"
icon="el-icon-search"
@click="dateChange"
></el-button>
</div>
</div>
<div class="energyNumber energyNumberLeft" style="top: 183px;">
<img v-if="dataObj.全厂用电合计" class="iconImg" src="img/tkx_ele.png">
@ -164,8 +211,21 @@
data() {
return {
imgSrc:'',
dataObj:{ }
dataObj:{ },
options: [
{id:0,name:'日统计'},
{id:1,name:'月统计'},
{id:2,name:'年统计'},
],
query:{
type:0,
day:'',
year:'',
month:'',
yearStart:'',
},
};
},
mounted() {
let that = this;
@ -261,7 +321,7 @@
.pictureHeader {
position: absolute;
top: -30px; /* 调整表头距离图片的高度 */
left: 50%;
left: 20%;
transform: translateX(-50%);
background-color: #f8f9fa; /* 表头背景颜色 */
padding: 5px 10px;

View File

@ -446,15 +446,15 @@ export default {
that.dataLoop();
});
},
getLengthData() {
let that = this;
let arrs = [];
that.mpointList.forEach((item, index) => {
if (arrs.indexOf(item.mgroup_name) == -1) {
arrs.push(item.mgroup_name);
}
});
},
// getLengthData() {
// let that = this;
// let arrs = [];
// that.mpointList.forEach((item, index) => {
// if (arrs.indexOf(item.mgroup_name) == -1) {
// arrs.push(item.mgroup_name);
// }
// });
// },
dataLoop() {
let that = this;
that.tableDatas = [];

View File

@ -33,9 +33,12 @@
<th>昨日</th>
<th>本月</th>
<th>本年</th>
<th>月目标值</th>
<th
@click="goToTarget('3626253029718056960')"
style="font-weight: bold; color: #1CD6DD; font-size: 18px;"
>月目标值</th>
<th>月完成度</th>
<th>年目标值</th>
<th @click="goToTarget('3626253029718056960')">年目标值</th>
<th>年完成度</th>
</tr>
</thead>
@ -1179,6 +1182,14 @@ export default {
typeRadioChange() {
this.searchDate = "";
},
goToTarget(mgroup_id) {
this.$router.push({
path: "/enm_monthSet/goalSetting",
query: {
mgroup: mgroup_id,
},
})
},
dateChange(val) {
let that = this;
console.log(val);

View File

@ -382,10 +382,9 @@ export default {
this.$API.mtm.mgroup.list
.req({ page: 0, search: "回转窑" })
.then((res) => {
console.log("回转窑", res);
that.query.mgroup = res[0].id;
//
this.getMonthGoal();
that.getMonthGoal();
});
},
methods: {
@ -459,6 +458,7 @@ export default {
let that = this;
let paramsGoal = {};
paramsGoal.page = 0;
paramsGoal.year = that.query.year_s;
paramsGoal.mgroup = that.query.mgroup;
that.$API.mtm.goal.list.req(paramsGoal).then((ress) => {
if (ress.length > 0) {
@ -485,8 +485,8 @@ export default {
monthGoal[12] = goal.goal_val_12;
that.monthGoal = monthGoal;
}
if (
goal.goal_cate_name == "单位产品综合电耗(kW·h/t"
else if (
goal.goal_cate_name == "单位产品综合电耗(KW·h/t"
) {
monthGoal2[0] = goal.goal_val;
monthGoal2[1] = goal.goal_val_1;
@ -503,7 +503,8 @@ export default {
monthGoal2[12] = goal.goal_val_12;
that.monthGoal2 = monthGoal2;
}
if (goal.goal_cate_name == "单位产品标煤耗kgce/t") {
else if (goal.goal_cate_name == "单位产品标煤耗kgce/t") {
monthGoal3[0] = goal.goal_val;
monthGoal3[1] = goal.goal_val_1;
monthGoal3[2] = goal.goal_val_2;
@ -519,21 +520,21 @@ export default {
monthGoal3[12] = goal.goal_val_12;
that.monthGoal3 = monthGoal3;
}
if (
else if (
goal.goal_cate_name == "单位产品综合能耗kgce/t"
) {
monthGoal4[0] = goal.goal_val;
monthGoal4[1] = goal.goal_val_2;
monthGoal4[2] = goal.goal_val_3;
monthGoal4[3] = goal.goal_val_4;
monthGoal4[4] = goal.goal_val_5;
monthGoal4[5] = goal.goal_val_6;
monthGoal4[6] = goal.goal_val_7;
monthGoal4[7] = goal.goal_val_8;
monthGoal4[8] = goal.goal_val_9;
monthGoal4[9] = goal.goal_val_10;
monthGoal4[10] = goal.goal_val_11;
monthGoal4[11] = goal.goal_val_12;
monthGoal4[1] = goal.goal_val_1;
monthGoal4[2] = goal.goal_val_2;
monthGoal4[3] = goal.goal_val_3;
monthGoal4[4] = goal.goal_val_4;
monthGoal4[5] = goal.goal_val_5;
monthGoal4[6] = goal.goal_val_6;
monthGoal4[7] = goal.goal_val_7;
monthGoal4[8] = goal.goal_val_8;
monthGoal4[9] = goal.goal_val_9;
monthGoal4[10] = goal.goal_val_10;
monthGoal4[11] = goal.goal_val_11;
monthGoal4[12] = goal.goal_val_12;
that.monthGoal4 = monthGoal4;
}
@ -665,6 +666,7 @@ export default {
arrs[9] = item.id;
wrapArrs.push(arrs);
arrs2[1] = item.celec_consume_unit;
arrs2[2] =
that.monthGoal2[ind] !== undefined
? that.monthGoal2[ind]

View File

@ -33,9 +33,10 @@
<th>昨日</th>
<th>本月</th>
<th>本年</th>
<th>月目标值</th>
<th @click="goToTarget('3626253601661739008')"
style="font-weight: bold; color: #1CD6DD; font-size: 18px;">月目标值</th>
<th>月完成度</th>
<th>年目标值</th>
<th @click="goToTarget('3626253601661739008')">年目标值</th>
<th>年完成度</th>
</tr>
</thead>
@ -335,12 +336,12 @@ let yAxis = [
position: "right",
alignTicks: true,
nameRotate: 30,
offset: 80,
offset: 50,
max:100,
axisLine: {
show: true,
lineStyle: {
color: colors[2],
color: colors[1],
},
},
axisLabel: {
@ -356,7 +357,7 @@ let yAxis = [
axisLine: {
show: true,
lineStyle: {
color: colors[3],
color: colors[2],
},
},
axisLabel: {
@ -370,6 +371,23 @@ let yAxis = [
alignTicks: true,
nameRotate: 30,
offset: 70,
axisLine: {
show: true,
lineStyle: {
color: colors[3],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "水泥磨台时产量",
position: "right",
alignTicks: true,
nameRotate: 30,
offset: 100,
axisLine: {
show: true,
lineStyle: {
@ -400,11 +418,10 @@ let yAxis_month = [
},
{
type: "value",
name: "水泥磨运转率(%)",
name: "水泥磨台时产量",
position: "right",
alignTicks: true,
nameRotate: 30,
offset: 80,
max:100,
axisLine: {
show: true,
@ -415,13 +432,14 @@ let yAxis_month = [
axisLabel: {
formatter: "{value}",
},
},{
},
{
type: "value",
name: "水泥磨台时产量",
name: "水泥磨运转率(%)",
position: "right",
alignTicks: true,
nameRotate: 30,
offset: 80,
offset: 40,
max:100,
axisLine: {
show: true,
@ -433,30 +451,13 @@ let yAxis_month = [
formatter: "{value}",
},
},
{
type: "value",
name: "水泥磨运转率(%)",
position: "right",
alignTicks: true,
nameRotate: 30,
offset: 80,
max:100,
axisLine: {
show: true,
lineStyle: {
color: colors[3],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "分布电耗(kW·h/t)",
position: "right",
alignTicks: true,
nameRotate: 30,
offset:80,
axisLine: {
show: true,
lineStyle: {
@ -528,7 +529,7 @@ let yAxis_hour = [
axisLine: {
show: true,
lineStyle: {
color: colors[3],
color: colors[1],
},
},
axisLabel: {
@ -545,7 +546,7 @@ let yAxis_hour = [
axisLine: {
show: true,
lineStyle: {
color: colors[4],
color: colors[2],
},
},
axisLabel: {
@ -658,12 +659,6 @@ export default {
yAxisIndex: 0,
data: [],
},
{
name: "水泥磨台时产量",
type: "bar",
yAxisIndex: 0,
data: [],
},
{
name: "水泥磨运转率",
type: "line",
@ -682,6 +677,12 @@ export default {
yAxisIndex: 3,
data: [],
},
{
name: "水泥磨台时产量",
type: "bar",
yAxisIndex: 4,
data: [],
},
],
},
option3: {
@ -1035,6 +1036,14 @@ export default {
typeRadioChange() {
this.searchDate = "";
},
goToTarget(mgroup_id) {
this.$router.push({
path: "/enm_monthSet/goalSetting",
query: {
mgroup: mgroup_id,
},
})
},
dateChange(val) {
let that = this;
if (val !== null) {
@ -1079,10 +1088,16 @@ export default {
let data = response;
data.forEach((item) => {
let ind = item.hour;
let cost_=0
if(item.total_production==0){
cost_=0
}else{
cost_ = item.production_cost_unit
}
seriesData0[ind] = item.total_production;
// seriesData1[ind] = item.production_hour;
// seriesData2[ind] = item.run_rate;
seriesData3[ind] = item.production_cost_unit;
seriesData3[ind] = cost_;
seriesData4[ind] = item.elec_consume_unit;
});
let options = { ...that.option1 };
@ -1118,10 +1133,16 @@ export default {
let data = response;
data.forEach((item) => {
let ind = item.day_s - 1;
let cost_=0
if(item.total_production==0){
cost_=0
}else{
cost_ = item.production_cost_unit
}
seriesData0[ind] = item.total_production;
seriesData1[ind] = item.production_hour;
seriesData2[ind] = item.run_rate;
seriesData3[ind] = item.production_cost_unit;
seriesData3[ind] = cost_;
seriesData4[ind] = item.elec_consume_unit;
});
let options = { ...that.option2 };
@ -1178,10 +1199,16 @@ export default {
data.forEach((item) => {
let goal_index = 'goal_val_' + item.month_s;
let ind = item.month_s - 1;
let cost_=0
if(item.total_production==0){
cost_=0
}else{
cost_ = item.production_cost_unit
}
seriesData0[ind] = item.total_production;
seriesData1[ind] = item.production_hour;
seriesData2[ind] = item.run_rate;
seriesData3[ind] = item.production_cost_unit;
seriesData3[ind] = cost_;
seriesData4[ind] = item.elec_consume_unit;
seriesData5[ind] = that.goal_list[0][goal_index];
});

View File

@ -455,6 +455,11 @@ export default {
mounted() {
this.getMgroup();
this.getGoals(); //
console.log(this.$route.query.mgroup);
if (this.$route.query.mgroup){
this.query.mgroup = this.$route.query.mgroup;
this.handleQuery();
}
},
methods: {
//

View File

@ -167,6 +167,7 @@ export default {
let paramsGoal = {};
paramsGoal.page = 0;
paramsGoal.mgroup = that.query.mgroup;
paramsGoal.year = that.query.year_s;
that.$API.mtm.goal.list.req(paramsGoal).then((ress) => {
if (ress.length > 0) {
let monthGoal = [];

View File

@ -24,6 +24,20 @@
:value="item.id"
></el-option>
</el-select>
<el-select
v-model="query.cate"
placeholder="类别"
clearable
style="margin-left: 2px; width: 120px"
class="headerSearch"
>
<el-option
v-for="item in cate"
:key="item.id"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
<el-date-picker
v-model="value1"
type="datetimerange"
@ -196,6 +210,7 @@ export default {
start_time__year: '',
shift: '',
team: null,
cate: '',
},
params:{
mgroup: "",
@ -213,6 +228,12 @@ export default {
{ id: 1, name: '日统计' },
{ id: 2, name: '月统计' },
],
cate: [
{ id: 0, name: '工艺' },
{ id: 1, name: '机械' },
{ id: 2, name: '电气' },
{ id: 2, name: '其他' },
],
tableNmae: '',
tableData1: [],
stlogVisiable: false,

View File

@ -191,7 +191,11 @@
if(index>-1){
index = index+2;
that.tableDatas[0][index] = item.total_production;
//0
that.tableDatas[1][index] = item.production_hour;
if(item.mgroup_name=='水泥包装'){
that.tableDatas[1][index] = 0;
}
let str = '';
item.qua_data.forEach((item) => {
if(item.rate_pass!==null){
@ -203,7 +207,7 @@
that.tableDatas[4][index] = item.elec_consume;//
that.tableDatas[5][index] = item.imaterial_data_dict?item.imaterial_data_dict.柴油?(item.imaterial_data_dict.柴油.cost).toFixed(2):'':'';//
that.tableDatas[12][index] = item.out_steam;//
// 0
// 0,
if(item.mgroup_name=='煤磨' || item.mgroup_name=='水泥包装'){
that.tableDatas[13][index] = 0;
}else{

View File

@ -0,0 +1,347 @@
<!-- 交接班日志报表 -->
<template>
<el-container class="app-container">
<el-header>
<div>
<el-select v-model="query.mgroup" placeholder="工段" clearable class="headerSearch" @change="updateColumns">
<el-option v-for="item in mgroupOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-select v-model="query.type" placeholder="查询类型" clearable class="headerSearch" @change="typeCange">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-select
v-model="query.sflogs__team"
placeholder="班组"
clearable
style="margin-left: 2px; width: 120px"
class="headerSearch"
@change="teamChange"
>
<el-option
v-for="item in teams"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-select
v-model="query.shift"
placeholder="班次"
clearable
style="margin-left: 2px; width: 200px"
>
<el-option
v-for="item in optionsShift"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-date-picker
v-model="value1"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
placeholder="日"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-if="query.type == 1"
style="width: 300px;"
/>
<el-date-picker
v-model="query.month"
type="month"
value-format="YYYY-MM"
format="YYYY-MM"
placeholder="月"
v-if="query.type == 2"
/>
<el-button type="primary" icon="el-icon-search"
@click="getTableData">
</el-button>
<el-button type="primary"
@click="exportExcel()"
:loading="exportLoading"
v-auth="'export_excel'">导出xlsx
</el-button>
<el-button type="primary" @click="handlePrint">打印
</el-button>
</div>
</el-header>
<el-main class="nopadding">
<el-container>
<el-main class="nopadding" id="myReport">
<scTable
ref="stlogTable"
id="myTable"
:apiObj="apiObjSflog"
:query="query"
:params="params"
@dataChange = "handleDataChange"
row-key="id"
stripe
hideSetting
highlightCurrentRow
hideDo
> <el-table-column type="index" width="50" />
<el-table-column
label="工段"
prop="mgroup_name"
></el-table-column>
<el-table-column label="开始时间" prop="start_time">
<template #default="scope">
<span>{{ scope.row.start_time.slice(0, 16) }}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" prop="end_time">
<template #default="scope">
<span>{{ scope.row.end_time.slice(0, 16) }}</span>
</template>
</el-table-column>
<el-table-column
label="班组名称"
prop="team_name"
></el-table-column>
<el-table-column
label="当前班次"
prop="shift_name"
></el-table-column>
<el-table-column
label="产量(t)"
prop="enstat_info.total_production"
:formatter="formatToTwoDecimal"
>
</el-table-column>
<el-table-column
label="单耗(kW·h)"
prop="enstat_info.elec_consume_unit"
:formatter="formatToTwoDecimal">
</el-table-column>
<el-table-column
v-if="columnsToShow.includes('run_hour')"
label="台时(t/h)"
prop="enstat_info.production_hour"
:formatter="formatToTwoDecimal"
></el-table-column>
<el-table-column
v-if="columnsToShow.includes('run_rate')"
label="运转率(%)"
prop="enstat_info.run_rate"
:formatter="formatToTwoDecimal"
></el-table-column>
<el-table-column
v-if="columnsToShow.includes('production_cost_unit')"
label="成本(元/t)"
prop="enstat_info.production_cost_unit"
:formatter="formatToTwoDecimal"
>
</el-table-column>
<el-table-column
v-for="(col, index) in quaColumns"
:key="index"
:label="col.label"
:prop="col.prop"
:formatter="col.formatter"
></el-table-column>
</scTable>
</el-main>
</el-container>
</el-main>
</el-container>
</template>
<script>
import stlogDialog from "../enm_rm/stlog_form.vue";
export default {
components: {
stlogDialog
},
data() {
return {
query: {
month: '',
year: '',
mgroup: '',
start_time__gte: '',
end_time__lt: '',
start_time__month: '',
sflogs__team: '',
start_time__year: '',
end_time__month: '',
end_time__year: '',
shift: '',
team: null,
},
params:{
mgroup: "",
start_time__gte: '',
end_time__lt: '',
},
value1:[],
materialList: [],
sflogexpList: [],
optionsShift: [],
teams: [],
mgroupOptions: [],
tableName: '班组成本计算',
options: [
// { id: 0, name: '' },
{ id: 1, name: '日统计' },
{ id: 2, name: '月统计' },
],
tableNmae: '',
stlogVisiable: false,
apiObjSflog: null,
sourceData: {},
apiObj: null,
apiObj2: null,
deptId: "",
columnsToShow: [], //
quaColumns: [], //
};
},
mounted() {
var myDate = new Date();
let month = myDate.getMonth() + 1;
if (month < 10) {
month = '0' + month;
}
this.$API.mtm.mgroup.list
.req({ page: 0, search: "电石渣" })
.then((res) => {
console.log("电石渣", res);
this.query.mgroup = res[0].id;
this.apiObj = this.$API.wpm.sflog.list;
this.deptId = res[0].belong_dept;
});
this.getShift();
this.getMgroup();
this.getTeams();
this.getShift();
},
methods: {
handleDataChange(res, tableData){
if (Array.isArray(tableData) &&
tableData[2] &&
tableData[2].enstat_info &&
Array.isArray(tableData[2].enstat_info.qua_data) &&
tableData[2].enstat_info.qua_data.length > 0) {
const quaData = tableData[2].enstat_info.qua_data; // 3 qua_data
this.quaColumns = quaData.map((item, index) => ({
label: item.testitem_name+'(%)',
prop: `enstat_info.qua_data[${index}].rate_pass`,
formatter:(row)=>{
const ratePass = row && row.enstat_info && row.enstat_info.qua_data && row.enstat_info.qua_data[index]? row.enstat_info.qua_data[index].rate_pass : 0;
return (ratePass * 100).toFixed(2);
}
})
);
} else {
this.quaColumns = []; //
}
},
updateColumns() {
this.columnsToShow = [];
if (this.query.mgroup==='3626222897737302016'){ //
}else if(this.query.mgroup==='3626223084383801344'){ //
this.columnsToShow = ['run_hour', 'run_rate']
}else if(this.query.mgroup==='3744925985427398656'){//()
this.columnsToShow = ['run_hour', 'run_rate', 'production_cost_unit']
}else if(this.query.mgroup==='3626253231757619200'){//
this.columnsToShow = ['run_hour', 'run_rate', 'production_cost_unit']
}else if(this.query.mgroup==='3626253029718056960'){//
this.columnsToShow = ['run_hour', 'run_rate', 'production_cost_unit']
}else if(this.query.mgroup==='3626253601661739008'){//
this.columnsToShow = ['run_hour', 'run_rate', 'production_cost_unit']
}else {
this.columnsToShow = []
}
},
//
formatToTwoDecimal(row, column, cellValue) {
// null undefined
if (cellValue == null) return "";
//
return Number(cellValue).toFixed(2);
},
getMgroup() {
this.$API.mtm.mgroup.list.req({ page: 0, cate: 'section' }).then(res => {
res.forEach(item => {
this.mgroupOptions.push(item);
})
this.mgroupOptions = this.mgroupOptions.reverse();
this.apiObjSflog = this.$API.wpm.sflog.list;
this.tableName = this.mgroupOptions[0].name;
})
},
//
getTeams() {
let form = {};
form.page = 0;
this.teams = [];
this.$API.mtm.team.list.req(form).then((res) => {
this.teams = res;
});
},
//
getShift() {
this.$API.mtm.shift.list.req({ page: 0 }).then(res => {
this.optionsShift = res;
})
},
getTableData() {
let that = this;
let arr = [];
if (that.query.type == 1) {
this.query.start_time__gte = this.value1[0];
this.query.end_time__lt = this.value1[1];}
else if (that.query.type == 2) {
this.query.start_time__gte = '',
this.query.end_time__lt = '',
arr = that.query.month.split('-');
this.query.end_time__year = Number(arr[0]);
this.query.end_time__month = Number(arr[1]);
}
this.$refs.stlogTable.queryData(this.query)
},
handlePrint() {
this.$PRINT('#myReport');
},
exportExcel() {
this.exportLoading = true;
this.$XLSX('#myTable', this.tableName)
this.exportLoading = false;
},
//stlogsflogexp
// stlogRowClick(row) {
// console.log(row);
// this.sflogexpList = [];
// this.clickItem = row;
// this.getSflogexp(row.id);
// },
getSflogexp(id) {
let obj = {};
obj.page = 0;
obj.stlog = id;
this.$API.wpm.sflogexp.list.req(obj).then((res) => {
this.sflogexpList = res;
console.log(this.sflogexpList);
});
},
}
};
</script>
<style scoped>
.printContainer {
width: 100%;
overflow-x: scroll;
}
</style>

View File

@ -33,9 +33,14 @@
<th>昨日</th>
<th>本月</th>
<th>本年</th>
<th>月目标值</th>
<th
@click="goToTarget('3626223084383801344')"
style="font-weight: bold; color: #1CD6DD; font-size: 18px;"
>月目标值</th>
<th>月完成度</th>
<th>年目标值</th>
<th
@click="goToTarget('3626223084383801344')"
>年目标值</th>
<th>年完成度</th>
</tr>
</thead>
@ -383,6 +388,40 @@ let yAxis = [
nameRotate: 50
}
];
let yAxis_hour = [
{
type: "value",
name: "产量 (t)",
position: "left",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0],
},
},
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
{
type: "value",
name: "分布电耗(kW·h)",
position: "right",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[3],
},
},
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
}
];
let yAxis_month = [
{
type: "value",
@ -455,6 +494,7 @@ let yAxis_month = [
name: "分布电耗目标值",
position: "right",
alignTicks: true,
offset: 100,
axisLine: {
show: true,
lineStyle: {
@ -528,40 +568,7 @@ export default {
},
data: [],
},
yAxis: [
{
type: "value",
name: "产量 (t)",
position: "left",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0],
},
},
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
{
type: "value",
name: "分布电耗(kW·h)",
position: "right",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[3],
},
},
axisLabel: {
formatter: "{value}",
},
nameRotate: 50
},
],
yAxis: yAxis_hour,
series: [
{
name: "立磨总产量",
@ -572,7 +579,7 @@ export default {
{
name: "分布电耗",
type: "bar",
yAxisIndex: 0,
yAxisIndex: 1,
data: [],
},
],
@ -1121,6 +1128,14 @@ export default {
typeRadioChange() {
this.searchDate = "";
},
goToTarget(mgroup_id) {
this.$router.push({
path: "/enm_monthSet/goalSetting",
query: {
mgroup: mgroup_id,
},
})
},
dateChange(val) {
let that = this;
console.log(val);

View File

@ -33,9 +33,10 @@
<th>昨日</th>
<th>本月</th>
<th>本年</th>
<th>月目标值</th>
<th @click="goToTarget('3744925985427398656')"
style="font-weight: bold; color: #1CD6DD; font-size: 18px;">月目标值</th>
<th>月完成度</th>
<th>年目标值</th>
<th @click="goToTarget('3744925985427398656')">年目标值</th>
<th>年完成度</th>
</tr>
</thead>
@ -1185,6 +1186,14 @@ export default {
typeRadioChange() {
this.searchDate = "";
},
goToTarget(mgroup_id) {
this.$router.push({
path: "/enm_monthSet/goalSetting",
query: {
mgroup: mgroup_id,
},
})
},
dateChange(val) {
let that = this;
console.log(val);

View File

@ -33,9 +33,10 @@
<th>昨日</th>
<th>本月</th>
<th>本年</th>
<th>月目标值</th>
<th>月完成度</th>
<th>年目标值</th>
<th @click="goToTarget('3626222897737302016')"
style="font-weight: bold; color: #1CD6DD; font-size: 18px;">月目标值</th>
<th >月完成度</th>
<th @click="goToTarget('3626222897737302016')">年目标值</th>
<th>年完成度</th>
</tr>
</thead>
@ -82,13 +83,23 @@
<el-radio-group
v-model="typeRadio"
@change="typeRadioChange"
>
>
<el-radio-button label="days">按时</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 == 'days'"
@change="dateChange"
></el-date-picker>
<el-date-picker
v-model="searchDate"
type="month"
@ -109,7 +120,14 @@
></el-date-picker>
</div>
</div>
<div class="chartWrap" v-show="typeRadio == 'days'">
<div class="chartTitle">本日生产参数统计图</div>
<scEcharts
height="400px"
width="1035px"
:option="optionHour"
></scEcharts>
</div>
<div class="chartWrap" v-show="typeRadio == 'month'">
<div class="chartTitle">本月生产参数统计图</div>
<scEcharts
@ -384,7 +402,7 @@ let yAxis = [
position: "right",
alignTicks: true,
nameRotate: 50,
offset: 100,
offset: 150,
axisLine: {
show: true,
lineStyle: {
@ -413,6 +431,111 @@ let yAxis = [
},
},
];
let yAxis_hour = [
{
type: "value",
name: "电石渣干粉总产量 (t)",
position: "left",
alignTicks: true,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[0],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
nameRotate: 50,
name: "电石渣干粉分布电耗(kW·h/t)",
position: "left",
alignTicks: true,
offset: 100,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
nameRotate: 50,
name: "电石渣工段总电量(kW·h)",
position: "left",
alignTicks: true,
offset: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[2],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
nameRotate: 50,
name: "成本(元/t)",
position: "right",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[3],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "湿电石渣消耗(t)",
position: "right",
alignTicks: true,
nameRotate: 50,
offset: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[4],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "湿电石渣进厂(t)",
position: "right",
alignTicks: true,
nameRotate: 50,
offset: 90,
axisLine: {
show: true,
lineStyle: {
color: colors[5],
},
},
axisLabel: {
formatter: "{value}",
},
}
];
export default {
components: {
@ -455,6 +578,7 @@ export default {
echartType: "line",
asynDialog: false,
goal_list :[],
optionHour: {},
option1: {
color: colors,
tooltip: tooltip,
@ -469,7 +593,7 @@ export default {
},
data: [],
},
yAxis: yAxis,
yAxis: yAxis_hour,
series: [
{
name: "电石渣干粉总产量",
@ -569,6 +693,60 @@ export default {
},
],
},
option3: {
color: colors,
tooltip: tooltip,
grid: grid,
toolbox: toolbox,
legend: legend,
xAxis: {
axisTick: {
show: true,
length: 5,
inside: true,
},
data: [],
},
yAxis: yAxis_hour,
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: [],
},
{
name: "湿电石渣进厂",
type: "bar",
yAxisIndex: 5,
data: [],
},
],
},
};
},
mounted() {
@ -785,18 +963,18 @@ export default {
that.tableDatas[0][6]
);
that.tableDatas[1][4] = data2.elec_consume_unit;
that.tableDatas[1][7] = precen(
that.tableDatas[1][7] = consume_precen(
that.tableDatas[1][4],
that.tableDatas[1][6]
);
that.tableDatas[2][4] = data2.elec_consume;
that.tableDatas[3][4] =
data2.production_cost_unit;
that.tableDatas[3][7] = precen(
that.tableDatas[3][7] = consume_precen(
that.tableDatas[3][3],
that.tableDatas[3][6]
);
that.tableDatas[2][7] = precen(
that.tableDatas[2][7] = consume_precen(
that.tableDatas[2][4],
that.tableDatas[2][6]
);
@ -820,6 +998,7 @@ export default {
}
});
});
that.getHourData(year, month, days);
that.getDayData(year, month);
that.getMonthData(year);
});
@ -828,10 +1007,25 @@ export default {
typeRadioChange() {
this.searchDate = "";
},
goToTarget(mgroup_id) {
this.$router.push({
path: "/enm_monthSet/goalSetting",
query: {
mgroup: mgroup_id,
},
})
},
dateChange(val) {
let that = this;
if (val !== null) {
if (this.typeRadio == "month") {
if (this.typeRadio == "days") {
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];
month = Number(month);
@ -840,13 +1034,66 @@ export default {
this.getMonthData(val);
}
} else {
if (this.typeRadio == "month") {
if (this.typeRadio == "days") {
this.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 = year;
query.month = month;
query.day = days;
query.type = "hour_s";
query.mgroup = that.query.mgroup;
this.$API.enm.enstat.req(query).then((response) => {
let seriesData0 = [],
seriesData1 = [],
seriesData2 = [],
seriesData3 = [],
seriesData4 = [],
seriesData5 = [];
let data = response;
data.forEach((item) => {
let ind = item.hour ;
seriesData0[ind] = item.total_production;
seriesData1[ind] = item.production_cost_unit;
seriesData2[ind] = item.elec_consume_unit;
seriesData5[ind] = item.elec_consume;
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.option3 };
options.series[0].data = seriesData0;
options.series[1].data = seriesData2;
options.series[2].data = seriesData5;
options.series[3].data = seriesData1;
options.series[4].data = seriesData3;
options.series[5].data = seriesData4;
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;