975 lines
38 KiB
Vue
975 lines
38 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 ref="print" id="myReport" class="printContainer">
|
||
<table border="1" width="1000" 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-if="index==4||index==5">{{item[0]}}</td>
|
||
<td class="numCell">{{item[1]}}</td>
|
||
<td class="numCell hoursItem" @click="itemClick('hours',item)">{{item[2]}}</td>
|
||
<td class="numCell daysItem" @click="itemClick('days',item)">{{item[3]}}</td>
|
||
<td class="numCell monthItem" @click="itemClick('month',item)">{{item[4]}}</td>
|
||
<td class="numCell yearItem" @click="itemClick('year',item)">{{item[5]}}</td>
|
||
<td class="numCell">{{item[6]}}</td>
|
||
<td class="numCell">{{item[7]}}</td>
|
||
<td class="numCell">{{item[8]}}</td>
|
||
<td class="numCell">{{item[9]}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div id="main" style="width:1200px;height:600px;"></div>
|
||
<scEcharts height="400px" width="1074px" :option="optionHour"></scEcharts>
|
||
<scEcharts height="400px" width="1074px" :option="optionDay"></scEcharts>
|
||
<scEcharts height="400px" width="1074px" :option="optionMonth"></scEcharts>
|
||
</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"
|
||
:modelValue="modelValue"
|
||
:showClose="showClose"
|
||
:echartType='echartType'
|
||
@closed="asynDialog = false"
|
||
></charts>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
|
||
let tooltip= {
|
||
show: true,
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
},
|
||
confine:false,
|
||
showContent: true,
|
||
triggerOn:"mousemove",
|
||
// alwaysShowContent:true,
|
||
};
|
||
let grid={
|
||
right: '10%',
|
||
left:'10%',
|
||
top:'15%'
|
||
};
|
||
let toolbox={
|
||
right:'5%',
|
||
feature: {
|
||
dataView: { show: true, readOnly: false },
|
||
// restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
};
|
||
let legend= {
|
||
top:'5%',
|
||
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: 0,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colors[2]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '分布电耗(KW.h)',
|
||
position: 'right',
|
||
alignTicks: true,
|
||
offset: 80,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colors[3]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '成本(元)',
|
||
position: 'left',
|
||
alignTicks: true,
|
||
offset: 80,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colors[4]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
|
||
];
|
||
import * as echarts from 'echarts';
|
||
import scEcharts from "@/components/scEcharts";
|
||
import { defineAsyncComponent } from 'vue'
|
||
export default {
|
||
components: {
|
||
scEcharts,
|
||
charts: defineAsyncComponent(() => import("@/components/scEnm/lineChartsdialog.vue")),
|
||
},
|
||
data() {
|
||
return {
|
||
chartShow: false,
|
||
myOption: null,
|
||
optionHour:{},
|
||
optionDay:{},
|
||
optionMonth:{},
|
||
year:2023,
|
||
month:1,
|
||
days:1,
|
||
hours:1,
|
||
query: {
|
||
mgroup:'3346520558031773696',
|
||
},
|
||
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],
|
||
['成本','生料成本（元/吨）',0,0,0,0,0,0,0,0],
|
||
],
|
||
tableName:'生产报告',
|
||
modelValue:true,
|
||
type:'hours',
|
||
title:'原料磨工段',
|
||
apiObj:'',
|
||
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: []
|
||
},
|
||
{
|
||
name: '成本',
|
||
type: 'bar',
|
||
yAxisIndex: 3,
|
||
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: []
|
||
},
|
||
{
|
||
name: '成本',
|
||
type: 'bar',
|
||
yAxisIndex: 3,
|
||
data: []
|
||
},
|
||
|
||
]
|
||
},
|
||
option3:{
|
||
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: []
|
||
},
|
||
{
|
||
name: '成本',
|
||
type: 'bar',
|
||
yAxisIndex: 3,
|
||
data: []
|
||
}
|
||
]
|
||
},
|
||
list: [
|
||
{
|
||
x: 1,
|
||
y: 1,
|
||
z: 99,
|
||
k: 11
|
||
},
|
||
{
|
||
x: 2,
|
||
y: 2,
|
||
z: 70,
|
||
k: 11
|
||
},
|
||
{
|
||
x: 3,
|
||
y: 3,
|
||
z: 1,
|
||
k: 11
|
||
},
|
||
{
|
||
x: 4,
|
||
y: 4,
|
||
z: 30,
|
||
k: 11
|
||
},
|
||
{
|
||
x: 5,
|
||
y: 1,
|
||
z: 20,
|
||
k: 11
|
||
},
|
||
{
|
||
x: 6,
|
||
y: 0,
|
||
z: 18,
|
||
k: 11
|
||
},
|
||
{
|
||
x: 7,
|
||
y: 10,
|
||
z: 12,
|
||
k: 11
|
||
}
|
||
],
|
||
dataX: [],
|
||
dataY: [],
|
||
dataY2: [],
|
||
option : {
|
||
color: [ '#647bfe', '#8698fe', '#a9b6fe','#cbd3fe','#91CC75', '#EE6666'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
}
|
||
},
|
||
grid: {
|
||
right: '20%',
|
||
left:'20%'
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['总产量', '台时产量', '运转率', '分布电耗', '单位产品标煤耗', '成本']
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
// prettier-ignore
|
||
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '产量 (t)',
|
||
position: 'right',
|
||
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[1]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '成本(元)',
|
||
position: 'right',
|
||
alignTicks: true,
|
||
offset: 160,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colors[2]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '分布电耗(KW.h)',
|
||
position: 'left',
|
||
alignTicks: true,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colors[3]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value} '
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '标煤耗 (t)',
|
||
position: 'left',
|
||
alignTicks: true,
|
||
offset: 80,
|
||
min:0,max:180,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colors[4]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '总产量',
|
||
type: 'bar',
|
||
yAxisIndex:0,
|
||
data: [100, 120, 110, 130, 140, 120, 110, 120, 100,150, 120, 160]
|
||
},
|
||
{
|
||
name: '台时产量',
|
||
type: 'bar',
|
||
data: [
|
||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||
]
|
||
},
|
||
{
|
||
name: '运转率',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
data: [
|
||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||
]
|
||
},
|
||
{
|
||
name: '分布电耗',
|
||
type: 'line',
|
||
yAxisIndex: 2,
|
||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||
},
|
||
{
|
||
name: '单位产品标煤耗',
|
||
type: 'bar',
|
||
yAxisIndex: 2,
|
||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
function precen(a,b){
|
||
if(b!==0&&b!==null&&a!==null){
|
||
let precen = (a/b).toFixed(2)
|
||
return precen*100+'%'
|
||
}else{
|
||
return '/'
|
||
}
|
||
}
|
||
let that = this;
|
||
this.$nextTick(() => {
|
||
this.dataX = this.list.map(item => item.x);
|
||
// 第1个Y轴
|
||
this.dataY.push({
|
||
name: "AA",
|
||
type: "line", // 直线
|
||
yAxisIndex: 0, // 第几个Y轴 索引值
|
||
symbolSize: '10',
|
||
// lineStyle: { color: '#4485f4' },
|
||
data: this.list.map(item => item.y)
|
||
});
|
||
// 第2个Y轴
|
||
this.dataY.push({
|
||
name: "BB",
|
||
type: "line",
|
||
yAxisIndex: 1, // 第几个Y轴 索引值
|
||
data: this.list.map(item => item.z)
|
||
});
|
||
// 第3个Y轴
|
||
this.dataY.push({
|
||
name: "CC",
|
||
type: "line",
|
||
yAxisIndex: 2, // 第几个Y轴 索引值
|
||
data: this.list.map(item => item.k)
|
||
});
|
||
|
||
this.init(this.dataX, this.dataY);
|
||
});
|
||
this.$nextTick(() => {
|
||
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();
|
||
|
||
//昨日
|
||
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][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;
|
||
that.tableDatas[5][3]=data3.production_cost_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_st';
|
||
params4.mgroup = this.query.mgroup;
|
||
this.$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;
|
||
that.tableDatas[5][2]=data4.production_cost_unit;
|
||
}
|
||
})
|
||
//月目标
|
||
let params5 = {};
|
||
params5.page=0;
|
||
params5.mgroup='3346520558031773696';
|
||
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;
|
||
debugger;
|
||
console.log(str,item5[str])
|
||
|
||
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;
|
||
}else if(item5.goal_cate_name=='单位产品成本（元/吨）'){
|
||
that.tableDatas[5][6]=item5[str];
|
||
that.tableDatas[5][8]=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][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])
|
||
that.tableDatas[5][5]=data1.production_cost_unit;
|
||
that.tableDatas[5][9]=precen(that.tableDatas[5][5],that.tableDatas[5][8])
|
||
}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][4]=data2.total_production;
|
||
if(that.tableDatas[0][4]>that.tableDatas[0][6]){
|
||
that.wraning = true;
|
||
}
|
||
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.tableDatas[5][4]=data2.production_cost_unit;
|
||
that.tableDatas[5][7]=precen(that.tableDatas[5][4],that.tableDatas[5][6])
|
||
}
|
||
})
|
||
})
|
||
that.getHourData();
|
||
that.getDayData();
|
||
that.getMonthData();
|
||
})
|
||
},
|
||
methods: {
|
||
init(dataX, dataY) {
|
||
this.myChart = echarts.init(document.getElementById("main"));
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
this.myChart.setOption(this.option);
|
||
},
|
||
//获取小时数据
|
||
getHourData(){
|
||
let that = this;
|
||
let query = {};
|
||
query.page = 0;
|
||
query.year_s = that.year;
|
||
query.month_s = that.month;
|
||
query.day_s = that.days;
|
||
query.type = 'hour_s';
|
||
query.mgroup = that.query.mgroup;
|
||
this.$API.enm.enstat.req(query).then((response) => {
|
||
let seriesData0 = [],seriesData1 = [], seriesData2 = [],seriesData3 = [],seriesData4 = [];
|
||
console.log(response)
|
||
let data = response;
|
||
data.forEach(item => {
|
||
let ind = item.hour;
|
||
seriesData0[ind] = item.total_production;
|
||
seriesData1[ind] = item.production_hour.toFixed(2);
|
||
seriesData2[ind] = item.run_rate;
|
||
seriesData3[ind] = item.production_cost_unit;
|
||
seriesData4[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;
|
||
options.series[4].data=seriesData4;
|
||
let hourXAxis = [];
|
||
for (let i = 1; i <= that.hours; i++) {
|
||
let item = i+'时'
|
||
hourXAxis.push(item)
|
||
}
|
||
options.xAxis.data = hourXAxis;
|
||
that.optionHour = options;
|
||
})
|
||
},
|
||
//获取天数据
|
||
getDayData(){
|
||
let that = this;
|
||
let query1 = {};
|
||
query1.page = 0;
|
||
query1.year_s = that.year;
|
||
query1.month_s = that.month;
|
||
query1.type = 'day_s';
|
||
query1.mgroup = this.query.mgroup;
|
||
this.$API.enm.enstat.req(query1).then((response) => {
|
||
let seriesData0 = [],seriesData1 = [], seriesData2 = [],seriesData3 = [],seriesData4 = [];
|
||
// debugger;
|
||
console.log(response)
|
||
let data = response;
|
||
data.forEach(item => {
|
||
// debugger;
|
||
let ind = item.day_s;
|
||
seriesData0[ind] = item.total_production;
|
||
seriesData1[ind] = item.production_hour.toFixed(2);
|
||
seriesData2[ind] = item.run_rate;
|
||
seriesData3[ind] = item.production_cost_unit;
|
||
seriesData4[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;
|
||
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(){
|
||
let that = this;
|
||
let query2 = {};
|
||
query2.page = 0;
|
||
query2.year_s = that.year;
|
||
query2.type = 'month_s';
|
||
query2.mgroup = that.query.mgroup;
|
||
this.$API.enm.enstat.req(query2).then((response) => {
|
||
// debugger;
|
||
let seriesData0 = [],seriesData1 = [], seriesData2 = [],seriesData3 = [],seriesData4 = [];
|
||
console.log(response)
|
||
let data = response;
|
||
data.forEach(item => {
|
||
let ind = item.month_s;
|
||
seriesData0[ind] = item.total_production;
|
||
seriesData1[ind] = item.production_hour.toFixed(2);
|
||
seriesData2[ind] = item.run_rate;
|
||
seriesData3[ind] = item.production_cost_unit;
|
||
seriesData4[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;
|
||
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.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;
|
||
});
|
||
},
|
||
getData(){
|
||
|
||
},
|
||
handlePrint() {
|
||
this.$PRINT('#myReport');
|
||
},
|
||
exportExcel() {
|
||
this.exportLoading = true;
|
||
this.$XLSX('#myTable', this.tableName)
|
||
this.exportLoading = false;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.printContainer{
|
||
width: 1075px;
|
||
}
|
||
</style> |