设备单位产品电耗趋势图

This commit is contained in:
shijing 2023-08-28 13:35:41 +08:00
parent 9dd33d43b1
commit 2b98daca58
8 changed files with 113 additions and 411 deletions

View File

@ -2,15 +2,15 @@
NODE_ENV = development
# 标题
# VUE_APP_TITLE = '曲阳金隅安全智能管控平台'
VUE_APP_TITLE = '托克逊能源管理平台'
VUE_APP_TITLE = '曲阳金隅安全智能管控平台'
# VUE_APP_TITLE = '托克逊能源管理平台'
# 接口地址
#VUE_APP_API_BASEURL = http://1.203.161.103:2800/api
#VUE_APP_WS_API = 'ws://localhost:8000'
# VUE_APP_API_BASEURL = http://222.222.144.147:6013/api
VUE_APP_API_BASEURL = http://222.222.144.147:6013/api
#VUE_APP_API_BASEURL = http://10.99.5.79:20309/api
VUE_APP_API_BASEURL = http://49.232.14.174:2226/api
# VUE_APP_API_BASEURL = http://49.232.14.174:2226/api
# VUE_APP_API_BASEURL = http://127.0.0.1:2226/api
VUE_APP_BASEURL = http://49.232.14.174:2226

View File

@ -32,7 +32,7 @@
<div id="app" class="aminui">
<div class="app-loading">
<div class="app-loading__logo">
<img src="img/bbmg.jpg"/>
<!-- <img src="img/bbmg.jpg"/> -->
</div>
<div class="app-loading__loader"></div>
<div class="app-loading__title"><%= VUE_APP_TITLE %></div>

View File

@ -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' },
@ -124,8 +126,7 @@
myChart:null,
option: {
title: {
text: '折线图',
subtext: '小标题',
text: '设备单位产品电耗',
x: 'center'
},
grid: { // px
@ -230,23 +231,68 @@
}
},
mounted() {
console.log(this.type);
console.log(this.title);
console.log(this.echartType);
this.visible = this.modelValue;
this.$nextTick(res=>{
this.getChartsData();
let that = this;
var myDate = new Date();
that.year = myDate.getFullYear();
that.month = myDate.getMonth()+1;
that.days = myDate.getDate();
that.visible = that.modelValue;
that.option.legend.data.push(that.cate);
that.option.series[0].name=that.cate;
that.visible = that.modelValue;
that.$nextTick(res=>{
that.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);
let params = {};
params.page = 0;
params.type = that.type;
params.mgroup = that.mgroup;
let type = that.type,unit='时';
if(this.type=='hour_s'){
type = 'hour';//key
params.year = that.year;
params.month = that.month;
params.day = that.day;
}else if(this.type=='day_s'){
unit='日';
params.year_s = that.year;
params.month_s = that.month;
}else if(this.type=='month_s'){
unit='月';
params.year_s = that.year;
}
that.apiObj.req(params).then(res=>{
function compare(property) {
return function (a, b) {
return a[property]-b[property];
}
}
let xAxisData = [],lineData = [],filterList=[];
res.forEach(item=>{
if(item.ep_monitored_name==that.cate){
filterList.push(item);
}
})
let arr = filterList.sort(compare(type));
//that.cate
arr.forEach(item=>{
lineData.push(item.elec_consume_unit)
let xAxis = item[type]+unit;
xAxisData.push(xAxis)
})
this.$nextTick(()=>{
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);
})
})
},
//
closeDialog(){

View File

@ -36,9 +36,9 @@
<tr v-for="item in tableDatas" :key="item">
<template v-for="(item1,ind) in item" :key="item1">
<td v-if="ind==0||ind==1||ind==2" class="numCell">{{item1}}</td>
<td v-if="ind==3" class="numCell hoursItem" @click="itemClick('hours',item1)">{{item1}}</td>
<td v-if="ind==4" class="numCell monthItem" @click="itemClick('month',item1)">{{item1}}</td>
<td v-if="ind==5" class="numCell yearItem" @click="itemClick1('year',item1)">{{item1}}</td>
<td v-if="ind==3" class="numCell hoursItem" @click="itemClick('hour_s',item1)">{{item1}}</td>
<td v-if="ind==4" class="numCell monthItem" @click="itemClick('day_s',item1)">{{item1}}</td>
<td v-if="ind==5" class="numCell yearItem" @click="itemClick('month_s',item1)">{{item1}}</td>
</template>
</tr>
</tbody>
@ -57,72 +57,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>
<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'
@ -202,9 +143,10 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
['煤磨主电机','','KW·h/t','','',''],
],
modelValue:true,
type:'hours',
title:'title',
apiObj:'',
type:'hour_s',
title:'煤磨工段',
cate:'',
apiObj:this.$API.enm.mpoint.stat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -515,19 +457,9 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
},
itemClick(type,item){
this.type=type;
this.cate = item[0];
this.asynDialog = true;
},
itemClick1(type,item){
this.chartShow = false;
this.$API.bi.dataset.exec
.req('3322567213885833216')
.then((res) => {
this.myOption = JSON.parse(res.echart_options);
debugger;
console.log(this.myOption)
this.chartShow = true;
});
},
handlePrint() {
this.$PRINT('#myReport');
},

View File

@ -36,9 +36,9 @@
<tr v-for="item in tableDatas" :key="item">
<template v-for="(item1,ind) in item" :key="item1">
<td v-if="ind==0||ind==1||ind==2" class="numCell">{{item1}}</td>
<td v-if="ind==3" class="numCell hoursItem" @click="itemClick('hours',item1)">{{item1}}</td>
<td v-if="ind==4" class="numCell monthItem" @click="itemClick('month',item1)">{{item1}}</td>
<td v-if="ind==5" class="numCell yearItem" @click="itemClick1('year',item1)">{{item1}}</td>
<td v-if="ind==3" class="numCell" @click="itemClick('hour_s',item)">{{item1}}</td>
<td v-if="ind==4" class="numCell" @click="itemClick('day_s',item)">{{item1}}</td>
<td v-if="ind==5" class="numCell" @click="itemClick('month_s',item)">{{item1}}</td>
</template>
</tr>
</tbody>
@ -57,72 +57,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>
<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'
@ -202,9 +143,10 @@
['窑主电机','','KW·h/t','','',''],
],
modelValue:true,
type:'hours',
title:'title',
apiObj:'',
type:'hour_s',
title:'回转窑工段',
cate:'',
apiObj:this.$API.enm.mpoint.stat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -667,19 +609,9 @@
},
itemClick(type,item){
this.type=type;
this.cate = item[0];
this.asynDialog = true;
},
itemClick1(type,item){
this.chartShow = false;
this.$API.bi.dataset.exec
.req('3322567213885833216')
.then((res) => {
this.myOption = JSON.parse(res.echart_options);
debugger;
console.log(this.myOption)
this.chartShow = true;
});
},
handlePrint() {
this.$PRINT('#myReport');
},

View File

@ -36,9 +36,9 @@
<tr v-for="item in tableDatas" :key="item">
<template v-for="(item1,ind) in item" :key="item1">
<td v-if="ind==0||ind==1||ind==2" class="numCell">{{item1}}</td>
<td v-if="ind==3" class="numCell hoursItem" @click="itemClick('hours',item1)">{{item1}}</td>
<td v-if="ind==4" class="numCell monthItem" @click="itemClick('month',item1)">{{item1}}</td>
<td v-if="ind==5" class="numCell yearItem" @click="itemClick1('year',item1)">{{item1}}</td>
<td v-if="ind==3" class="numCell" @click="itemClick('hour_s',item)">{{item1}}</td>
<td v-if="ind==4" class="numCell" @click="itemClick('day_s',item)">{{item1}}</td>
<td v-if="ind==5" class="numCell" @click="itemClick('month_s',item)">{{item1}}</td>
</template>
</tr>
</tbody>
@ -57,72 +57,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>
<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'
@ -210,9 +151,10 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
// {name:'2#',number:'NM002',unit:'KW·h/t',hours:'',days:'',month:''},
],
modelValue:true,
type:'hours',
title:'title',
apiObj:'',
type:'hour_s',
title:'水泥磨工段',
cate:'',
apiObj:this.$API.enm.mpoint.stat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -649,19 +591,9 @@ const colors =['#647bfe','#8698fe','#a9b6fe','#cbd3fe','#91CC75','#EE6666'];
},
itemClick(type,item){
this.type=type;
this.cate = item[0];
this.asynDialog = true;
},
itemClick1(type,item){
this.chartShow = false;
this.$API.bi.dataset.exec
.req('3322567213885833216')
.then((res) => {
this.myOption = JSON.parse(res.echart_options);
debugger;
console.log(this.myOption)
this.chartShow = true;
});
},
handlePrint() {
this.$PRINT('#myReport');
},

View File

@ -36,9 +36,9 @@
<tr v-for="item in tableDatas" :key="item">
<template v-for="(item1,ind) in item" :key="item1">
<td v-if="ind==0||ind==1||ind==2" class="numCell">{{item1}}</td>
<td v-if="ind==3" class="numCell hoursItem" @click="itemClick('hours',item1)">{{item1}}</td>
<td v-if="ind==4" class="numCell monthItem" @click="itemClick('month',item1)">{{item1}}</td>
<td v-if="ind==5" class="numCell yearItem" @click="itemClick1('year',item1)">{{item1}}</td>
<td v-if="ind==3" class="numCell" @click="itemClick('hour_s',item)">{{item1}}</td>
<td v-if="ind==4" class="numCell" @click="itemClick('day_s',item)">{{item1}}</td>
<td v-if="ind==5" class="numCell" @click="itemClick('month_s',item)">{{item1}}</td>
</template>
</tr>
</tbody>
@ -57,72 +57,13 @@
</div>
</div>
</div>
<sc-dialog v-model="chartShow" draggable>
<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>
<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'
@ -204,9 +145,10 @@
],
modelValue:true,
type:'hours',
title:'title',
apiObj:'',
type:'hour_s',
title:'原料磨工段',
cate:'',
apiObj:this.$API.enm.mpoint.stat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -588,19 +530,9 @@
},
itemClick(type,item){
this.type=type;
this.cate = item[0];
this.asynDialog = true;
},
itemClick1(type,item){
this.chartShow = false;
this.$API.bi.dataset.exec
.req('3322567213885833216')
.then((res) => {
this.myOption = JSON.parse(res.echart_options);
debugger;
console.log(this.myOption)
this.chartShow = true;
});
},
handlePrint() {
this.$PRINT('#myReport');
},

View File

@ -35,8 +35,8 @@
<tr v-for="item in tableDatas" :key="item">
<template v-for="(item1,ind) in item" :key="item1">
<td v-if="ind==0||ind==1||ind==2" class="numCell">{{item1}}</td>
<td v-if="ind==3" class="numCell monthItem" @click="itemClick('month',item1)">{{item1}}</td>
<td v-if="ind==4" class="numCell yearItem" @click="itemClick1('year',item1)">{{item1}}</td>
<td v-if="ind==3" class="numCell" @click="itemClick('day_s',item)">{{item1}}</td>
<td v-if="ind==4" class="numCell" @click="itemClick('month_s',item)">{{item1}}</td>
</template>
</tr>
</tbody>
@ -51,68 +51,6 @@
</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>
<scEcharts height="360px" :option="myOption" v-if="chartShow"></scEcharts>
</sc-dialog>
<charts
v-if="asynDialog"
:type="type"
@ -196,7 +134,7 @@
type:'hour_s',
title:'电石渣工段',
cate:'',
apiObj:this.$API.enm.mpointstat,
apiObj:this.$API.enm.mpoint.stat,
showClose:true,
echartType:'line',
asynDialog:false,
@ -387,19 +325,9 @@
},
itemClick(type,item){
this.type=type;
this.cate = item[0];
this.asynDialog = true;
},
itemClick1(type,item){
this.chartShow = false;
this.$API.bi.dataset.exec
.req('3322567213885833216')
.then((res) => {
this.myOption = JSON.parse(res.echart_options);
debugger;
console.log(this.myOption)
this.chartShow = true;
});
},
handlePrint() {
this.$PRINT('#myReport');
},