zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

生产报告趋势图数据导入

This commit is contained in:
shijing 2023-08-25 14:23:48 +08:00
parent 00e3fde1d4
commit 5ba3ab8656
13 changed files with 609 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

284
src/components/scEnm/empchartsdialog.vue Normal file
View File

@ -0,0 +1,284 @@
<template>
<el-dialog v-model="visible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="showClose">
<template #header>
<slot name="header">
<span class="el-dialog__title">{{ title }}</span>
</slot>
<div class="sc-dialog__headerbtn">
<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
</button>
<button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
<el-icon class="el-dialog__close"></el-icon>
</button>
</div>
</template>
<div v-loading="loading">
<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>
<div id="myChart" style="width:100%;height:400px;"></div>
</div>
<template #footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
type: { type: String, default: "hours" },
title: { type: String, default: "" },
apiObj: { type: Object, default: () => { } },
showClose: { type: Boolean, default: true },
echartType: { type: String, default: 'bar' },
modelValue: { type: Boolean, default: false },
showFullscreen: { type: Boolean, default: true },
loading: { type: Boolean, default: false }
},
data() {
return {
visible: false,
isFullscreen: false,
query:{
time:''
},
myChart:null,
option: {
title: {
text: '折线图',
subtext: '小标题',
x: 'center'
},
grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
top: '20%',
left: '3%',
right: '10%',
bottom: '5%',
containLabel: true
},
legend: { // 图例配置选项
orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
x: 'right', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
y: '10',// 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
data: ['查询对象'],
},
xAxis: {
type: 'category',
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
name: '时间',
// x轴名称样式
nameTextStyle: {
fontWeight: 600,
fontSize: 14
},
axisLine: {
lineStyle: { // X 轴颜色配置
color: '#3366CC'
}
},
axisLabel: {
rotate: 45, // X 轴标签文字旋转角度
interval: 0 //设置 X 轴数据间隔几个显示一个，为0表示都显示
},
boundaryGap: false, //数据从 Y 轴起始
},
yAxis: {
type: 'value',
name: '对象值',
// y轴名称样式
nameTextStyle: {
fontWeight: 500,
fontSize: 14
},
//min:0, // 配置 Y 轴刻度最小值
//max:4000, // 配置 Y 轴刻度最大值
//splitNumber:7, // 配置 Y 轴数值间隔
axisLine: {
lineStyle: { // Y 轴颜色配置
color: '#3366CC'
}
},
},
tooltip: {
show: true, // 是否显示
trigger: 'axis', // axis item none
axisPointer: { // 坐标轴指示器配置项。
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
showContent: true,
},
series: [
{
name: '查询对象',
data: [0,0,0,0,0,0,0,0,0,0,0,0],
type: 'line',
// symbolSize: function(value) { // 点的大小跟随数值增加而变大
// return value / 150;
// },
symbolSize:8, //设置折线上圆点大小
symbol:'circle',
smooth: 0.5, // 设置折线弧度
itemStyle: {
normal: {
label : {
show: true // 在折线拐点上显示数据
},
lineStyle:{
width:1, // 设置虚线宽度
type:'dotted', // 虚线'dotted' 实线'solid'
color: '#3366CC'// 折线颜色设置为0，即只显示点，不显示折线
}
}
}
},
]
},
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
},
watch:{
modelValue(){
this.visible = this.modelValue
if(this.visible){
this.isFullscreen = false
}
}
},
mounted() {
console.log(this.type);
console.log(this.title);
console.log(this.echartType);
this.visible = this.modelValue;
this.$nextTick(res=>{
this.getChartsData();
})
},
methods: {
async getChartsData(){
let that = this;
// var res = await this.apiObj.req(this.query);
let chartDom = document.getElementById('myChart');
that.myChart = echarts.init(chartDom);
// var option = {};
that.myChart.setOption(that.option);
},
//关闭
closeDialog(){
this.visible = false;
},
//最大化
setFullscreen(){
this.isFullscreen = !this.isFullscreen
}
}
}
</script>
<style scoped>
.searchHead{
display:flex
}
.middleText{
height: 32px;
line-height: 32px;
margin: 0 5px;
display: inline-block;
}
.searchBtn{
margin-left: 5px;
}
.sc-dialog__headerbtn {position: absolute;top: var(--el-dialog-padding-primary);right: var(--el-dialog-padding-primary);}
.sc-dialog__headerbtn button {padding: 0;background: transparent;border: none;outline: none;cursor: pointer;font-size: var(--el-message-close-size,16px);margin-left: 15px;color: var(--el-color-info);}
.sc-dialog__headerbtn button:hover .el-dialog__close {color: var(--el-color-primary);}
.sc-dialog:deep(.el-dialog).is-fullscreen {display: flex;flex-direction: column;top:0px !important;left:0px !important;}
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {}
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {flex:1;overflow: auto;}
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {padding-bottom: 10px;border-top: 1px solid var(--el-border-color-base);}
</style>

122
src/components/scEnm/lineChartsdialog.vue
View File

@ -15,27 +15,27 @@
</div>
</template>
<div v-loading="loading">
<div class="searchHead" v-if="type=='hours'">
<div class="searchHead" v-if="type=='hour_s'">
<el-date-picker
v-model="query.start_time"
type="date"
type="datetime"
placeholder="选择时间"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD HH"
value-format="YYYY-MM-DD HH"
: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"
type="datetime"
format="YYYY-MM-DD HH"
value-format="YYYY-MM-DD HH"
start-placeholder="结束日期"
:picker-options="pickerOptions"
/>
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
</div>
<div class="searchHead" v-if="type=='days'">
<div class="searchHead" v-if="type=='day_s'">
<el-date-picker
v-model="query.start_time"
type="date"
@ -54,7 +54,7 @@
/>
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
</div>
<div class="searchHead" v-if="type=='month'">
<div class="searchHead" v-if="type=='month_s'">
<el-date-picker
v-model="query.start_time"
type="month"
@ -73,7 +73,7 @@
/>
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
</div>
<div class="searchHead" v-if="type=='year'">
<div class="searchHead" v-if="type=='year_s'">
<el-date-picker
v-model="query.start_time"
type="year"
@ -105,8 +105,10 @@
import * as echarts from 'echarts';
export default {
props: {
cate:{ type: String, default: ""},
type: { type: String, default: "hours" },
title: { type: String, default: "" },
mgroup: { type: String, default: "" },
apiObj: { type: Object, default: () => { } },
showClose: { type: Boolean, default: true },
echartType: { type: String, default: 'bar' },
@ -121,6 +123,7 @@
query:{
time:''
},
cateName:'',
myChart:null,
option: {
title: {
@ -139,7 +142,7 @@
orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
x: 'right', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
y: '10',// 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
data: ['查询对象'],
data: [],
},
xAxis: {
type: 'category',
@ -190,7 +193,7 @@
},
series: [
{
name: '查询对象',
name: '',
data: [4,1,9,2,11,3,5,7,8,10,6,12],
type: 'line',
// symbolSize: function(value) { // 点的大小跟随数值增加而变大
@ -230,23 +233,98 @@
}
},
mounted() {
console.log(this.type);
console.log(this.title);
console.log(this.echartType);
let that = this;
var myDate = new Date();
let year =that.year = myDate.getFullYear();
let month = that.month = myDate.getMonth()+1;
let day = that.days = myDate.getDate();
let start_time='',end_time='';
if(this.type=='hour_s'){
start_time = year+'-'+month+'-'+day+' 00';
end_time = year+'-'+month+'-'+day+' 23';
}else if(this.type=='day_s'){
start_time = year+'-'+month+'-01';
end_time = year+'-'+month+'-15';
}else if(this.type=='month_s'){
start_time = year+'-01';
end_time = year+'-12';
}else if(this.type=='year_s'){
start_time = year-1;
end_time = year;
}
this.query.start_time = start_time;
this.query.end_time = end_time;
this.visible = this.modelValue;
this.option.legend.data.push(that.cate);
this.option.series[0].name=that.cate;
if(that.cate=='总产量（t）'){
that.cateName = 'total_production';
}else if(that.cate=='单位产品分布电耗（KW·h/t）'||that.cate=='生料分布电耗（KW·h/t）'||that.cate=='煤磨分布电耗（KW·h/t）'){
that.cateName = 'elec_consume_unit';
}else if(that.cate=='台时产量（t/h）'){
that.cateName = 'production_hour';
}else if(that.cate=='运转时间（h）'){
that.cateName = 'run_hour';
}else if(that.cate=='运转率（%）'){
that.cateName = 'run_rate';
}else if(that.cate=='单位产品成本（元/吨）'||that.cate=='电石渣成本（元/吨）'||that.cate=='生料成本（元/吨）'){
that.cateName = 'production_cost_unit';
}else if(that.cate=='单位产品综合电耗（KW·h/t）'){
that.cateName = 'celec_consume_unit';
}else if(that.cate=='单位产品标煤耗（kgce/t）'){
that.cateName = 'coal_consume_unit';
}else if(that.cate=='单位产品综合能耗（kgce/t）'){
that.cateName = 'cen_consume_unit';
}
this.$nextTick(res=>{
this.getChartsData();
})
},
methods: {
async getChartsData(){
getChartsData(){
let that = this;
// var res = await this.apiObj.req(this.query);
let chartDom = document.getElementById('myChart');
that.myChart = echarts.init(chartDom);
// var option = {};
that.myChart.setOption(that.option);
let params = {};
params.page = 0;
params.type = this.type;
params.mgroup = this.mgroup;
let start_time='',end_time='',type = that.type,unit='时';
if(this.type=='hour_s'){
type = 'hour';
start_time = this.query.start_time+':00:00'
end_time = this.query.end_time+':00:00'
}else if(this.type=='day_s'){
unit='日';
start_time = this.query.start_time+' 00:00:00'
end_time = this.query.end_time+' 00:00:00'
}else if(this.type=='month_s'){
unit='月';
start_time = this.query.start_time+'-01 00:00:00'
end_time = this.query.end_time+'-01 00:00:00'
}else if(this.type=='year_s'){
unit='年';
start_time = this.query.start_time+'-01-01 00:00:00'
end_time = this.query.end_time+'-01-01 00:00:00'
}
params.start_time = start_time;
params.end_time = end_time;
that.apiObj.req(params).then(res=>{
console.log(res)
debugger;
let xAxisData = [],lineData = [];
res.forEach(item=>{
lineData.push(item[that.cateName])
let xAxis = item[type]+unit;
xAxisData.push(xAxis)
})
let chartDom = document.getElementById('myChart');
that.myChart = echarts.init(chartDom);
that.option.xAxis.data = xAxisData;
that.option.series[0].data = lineData;
that.myChart.setOption(that.option);
})
},
dataSearch(){
this.getChartsData();
},
//关闭
closeDialog(){

2
src/views/enm_coal/power.vue
View File

@ -180,7 +180,7 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
export default {
components: {
scEcharts,
charts: defineAsyncComponent(() => import("@/components/scEnm/lineChartsdialog.vue")),
charts: defineAsyncComponent(() => import("@/components/scEnm/empchartsdialog.vue")),
},
data() {
return {

98
src/views/enm_coal/report.vue
View File

@ -40,10 +40,10 @@
<td class="numCell" v-if="index==0||index==2" rowspan="2">{{item[0]}}</td>
<td class="numCell" v-else-if="index==4">{{item[0]}}</td>
<td class="numCell">{{item[1]}}</td>
<td class="numCell hoursItem" @click="itemClick('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 hoursItem" @click="itemClick('hour_s',item)">{{item[2]}}</td>
<td class="numCell daysItem" @click="itemClick('day_s',item)">{{item[3]}}</td>
<td class="numCell monthItem" @click="itemClick('month_s',item)">{{item[4]}}</td>
<td class="numCell yearItem" @click="itemClick('year_s',item)">{{item[5]}}</td>
<td class="numCell">{{item[6]}}</td>
<td class="numCell">{{item[7]}}</td>
<td class="numCell">{{item[8]}}</td>
@ -65,91 +65,13 @@
</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'
@ -264,9 +186,10 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#91CC75','#EE6666'];
],
tableName:'生产报告',
modelValue:true,
type:'hours',
type:'hour_s',
title:'煤磨工段',
apiObj:'',
cate:'',
apiObj:this.$API.enm.enstat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -652,6 +575,7 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#91CC75','#EE6666'];
},
itemClick(type,item){
this.type=type;
this.cate=item[1];
this.asynDialog = true;
},
itemClick1(type,item){

2
src/views/enm_kiln/power.vue
View File

@ -180,7 +180,7 @@
export default {
components: {
scEcharts,
charts: defineAsyncComponent(() => import("@/components/scEnm/lineChartsdialog.vue")),
charts: defineAsyncComponent(() => import("@/components/scEnm/empchartsdialog.vue")),
},
data() {
return {

17
src/views/enm_kiln/report.vue
View File

@ -41,10 +41,10 @@
<td class="numCell" v-else-if="index==4" rowspan="4">{{ item[0] }}</td>
<td class="numCell" v-else-if="index==8">{{ 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 hoursItem" @click="itemClick('hour_s',item)" >{{item[2]}}</td>
<td class="numCell daysItem" @click="itemClick('day_s',item)">{{item[3]}}</td>
<td class="numCell monthItem" @click="itemClick('month_s',item)">{{item[4]}}</td>
<td class="numCell yearItem" @click="itemClick('year_s',item)">{{item[5]}}</td>
<td class="numCell">{{item[6]}}</td>
<td class="numCell">{{item[7]}}</td>
<td class="numCell">{{item[8]}}</td>
@ -151,6 +151,9 @@
v-if="asynDialog"
:type="type"
:title="title"
:cate="cate"
:apiObj = "apiObj"
:mgroup="query.mgroup"
:modelValue="modelValue"
:showClose="showClose"
:echartType='echartType'
@ -302,9 +305,10 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
],
tableName:'生产报告',
modelValue:true,
type:'hours',
type:'hour_s',
title:'回转窑工段',
apiObj:'',
cate:'',
apiObj:this.$API.enm.enstat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -772,6 +776,7 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
},
itemClick(type,item){
this.type=type;
this.cate=item[1];
this.asynDialog = true;
},
itemClick1(type,item){

2
src/views/enm_mill/power.vue
View File

@ -179,7 +179,7 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
export default {
components: {
scEcharts,
charts: defineAsyncComponent(() => import("@/components/scEnm/lineChartsdialog.vue")),
charts: defineAsyncComponent(() => import("@/components/scEnm/empchartsdialog.vue")),
},
data() {
return {

17
src/views/enm_mill/report.vue
View File

@ -40,10 +40,10 @@
<td class="numCell" v-if="index==0||index==2||index==4" rowspan="2">{{item[0]}}</td>
<td class="numCell" v-else-if="index==6">{{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 hoursItem" @click="itemClick('hour_s',item)">{{item[2]}}</td>
<td class="numCell daysItem" @click="itemClick('day_s',item)">{{item[3]}}</td>
<td class="numCell monthItem" @click="itemClick('month_s',item)">{{item[4]}}</td>
<td class="numCell yearItem" @click="itemClick('year_s',item)">{{item[5]}}</td>
<td class="numCell">{{item[6]}}</td>
<td class="numCell">{{item[7]}}</td>
<td class="numCell">{{item[8]}}</td>
@ -150,6 +150,9 @@
v-if="asynDialog"
:type="type"
:title="title"
:cate="cate"
:apiObj = "apiObj"
:mgroup="query.mgroup"
:modelValue="modelValue"
:showClose="showClose"
:echartType='echartType'
@ -281,9 +284,10 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
],
tableName:'生产报告',
modelValue:true,
type:'hours',
type:'hour_s',
title:'水泥磨工段',
apiObj:'',
cate:'',
apiObj:this.$API.enm.enstat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -711,6 +715,7 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
},
itemClick(type,item){
this.type=type;
this.cate=item[1];
this.asynDialog = true;
},
itemClick1(type,item){

17
src/views/enm_pack/report.vue
View File

@ -38,9 +38,9 @@
<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('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 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]}}</td>
<td class="numCell">{{item[6]}}</td>
<td class="numCell">{{item[7]}}</td>
@ -143,6 +143,9 @@
v-if="asynDialog"
:type="type"
:title="title"
:cate="cate"
:apiObj = "apiObj"
:mgroup="query.mgroup"
:modelValue="modelValue"
:showClose="showClose"
:echartType='echartType'
@ -232,7 +235,7 @@
page:0
},
query: {
mgroup:'3347217757455728640',
mgroup:'3347217757455728640',
},
tableDatas:[
['产量','总产量（t）',0,0,0,0,0,0,0,0],
@ -240,9 +243,10 @@
],
tableName:'生产报告',
modelValue:true,
type:'hours',
type:'hour_s',
title:'水泥磨工段',
apiObj:'',
cate:'',
apiObj:this.$API.enm.enstat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -492,6 +496,7 @@
},
itemClick(type,item){
this.type=type;
this.cate=item[1];
this.asynDialog = true;
},
itemClick1(type,item){

2
src/views/enm_rm/power.vue
View File

@ -178,7 +178,7 @@
export default {
components: {
scEcharts,
charts: defineAsyncComponent(() => import("@/components/scEnm/lineChartsdialog.vue")),
charts: defineAsyncComponent(() => import("@/components/scEnm/empchartsdialog.vue")),
},
data() {
return {

71
src/views/enm_rm/report.vue
View File

@ -40,10 +40,10 @@
<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 hoursItem" @click="itemClick('hour_s',item)">{{item[2]}}</td>
<td class="numCell daysItem" @click="itemClick('day_s',item)">{{item[3]}}</td>
<td class="numCell monthItem" @click="itemClick('month_s',item)">{{item[4]}}</td>
<td class="numCell yearItem" @click="itemClick('year_s',item)">{{item[5]}}</td>
<td class="numCell">{{item[6]}}</td>
<td class="numCell">{{item[7]}}</td>
<td class="numCell">{{item[8]}}</td>
@ -152,6 +152,9 @@
v-if="asynDialog"
:type="type"
:title="title"
:cate="cate"
:apiObj = "apiObj"
:mgroup="query.mgroup"
:modelValue="modelValue"
:showClose="showClose"
:echartType='echartType'
@ -287,7 +290,8 @@
modelValue:true,
type:'hours',
title:'原料磨工段',
apiObj:'',
cate:'',
apiObj:this.$API.enm.enstat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -484,8 +488,8 @@
}
],
dataX: [],
dataY: [],
dataY2: [],
dataY: [],
dataY2: [],
option : {
color: [ '#647bfe', '#8698fe', '#a9b6fe','#cbd3fe','#91CC75', '#EE6666'],
tooltip: {
@ -649,33 +653,33 @@
}
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.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.init(this.dataX, this.dataY);
});
this.$nextTick(() => {
var myDate = new Date();
let year =that.year = myDate.getFullYear();
@ -950,6 +954,7 @@
},
itemClick(type,item){
this.type=type;
this.cate=item[1];
this.asynDialog = true;
},
itemClick1(type,item){

2
src/views/enm_slag/power.vue
View File

@ -172,7 +172,7 @@
export default {
components: {
scEcharts,
charts: defineAsyncComponent(() => import("@/components/scEnm/lineChartsdialog.vue")),
charts: defineAsyncComponent(() => import("@/components/scEnm/empchartsdialog.vue")),
},
data() {
return {

273
src/views/enm_slag/report.vue
View File

@ -15,139 +15,141 @@
</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('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">{{item[6]}}</td>
<td class="numCell">{{item[6]}}</td>
<td class="numCell">{{item[7]}}</td>
<td class="numCell">{{item[8]}}</td>
</tr>
</tbody>
</table>
<div class="chartWrap">
<div class="chartTitle">本月生产参数统计图</div>
<scEcharts height="400px" width="1033px" :option="optionDay"></scEcharts>
</div>
<div class="chartWrap">
<div class="chartTitle">本年生产参数统计图</div>
<scEcharts height="400px" width="1033px" :option="optionMonth"></scEcharts>
<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[6]}}</td>
<td class="numCell">{{item[6]}}</td>
<td class="numCell">{{item[7]}}</td>
<td class="numCell">{{item[8]}}</td>
</tr>
</tbody>
</table>
<div class="chartWrap">
<div class="chartTitle">本月生产参数统计图</div>
<scEcharts height="400px" width="1033px" :option="optionDay"></scEcharts>
</div>
<div class="chartWrap">
<div class="chartTitle">本年生产参数统计图</div>
<scEcharts height="400px" width="1033px" :option="optionMonth"></scEcharts>
</div>
</div>
</div>
</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>
<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>
@ -163,8 +165,7 @@
},
confine:false,
showContent: true,
triggerOn:"mousemove",
// alwaysShowContent:true,
triggerOn:"mousemove",
};
let grid={
right: '7%',
@ -251,11 +252,12 @@
['能耗','单位产品分布电耗（KW·h/t）',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:'hours',
type:'hour_s',
title:'电石渣工段',
apiObj:'',
showClose:true,
echartType:'line',
asynDialog:false,
@ -503,6 +505,7 @@
},
itemClick(type,item){
this.type=type;
this.cate=item[1];
this.asynDialog = true;
},
itemClick1(type,item){