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

fix:power添加筛选条件

This commit is contained in:
shijing 2024-05-15 11:17:24 +08:00
parent b73f62b4d2
commit 245c2b6155
4 changed files with 878 additions and 560 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,371 +1,486 @@
<template> <template>
<el-dialog v-model="visible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="showClose"> <el-dialog
<template #header> v-model="visible"
<slot name="header"> :fullscreen="isFullscreen"
<span class="el-dialog__title">{{ title }}</span> v-bind="$attrs"
</slot> :show-close="showClose"
<div class="sc-dialog__headerbtn"> >
<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen"> <template #header>
<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon> <slot name="header">
<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon> <span class="el-dialog__title">{{ title }}</span>
</button> </slot>
<button v-if="showClose" aria-label="close" type="button" @click="closeDialog"> <div class="sc-dialog__headerbtn">
<el-icon class="el-dialog__close"></el-icon> <button
</button> v-if="showFullscreen"
</div> aria-label="fullscreen"
</template> type="button"
<div v-loading="loading"> @click="setFullscreen"
<div class="searchHead" v-if="type=='hour_s'"> >
<el-date-picker <el-icon v-if="isFullscreen" class="el-dialog__close"
v-model="query.start_time" ><el-icon-bottom-left
type="datetime" /></el-icon>
placeholder="选择时间" <el-icon v-else class="el-dialog__close"
format="YYYY-MM-DD HH" ><el-icon-full-screen
value-format="YYYY-MM-DD HH" /></el-icon>
:picker-options="pickerOptions" </button>
/> <button
<span class="middleText">至</span> v-if="showClose"
<el-date-picker aria-label="close"
v-model="query.end_time" type="button"
type="datetime" @click="closeDialog"
format="YYYY-MM-DD HH" >
value-format="YYYY-MM-DD HH" <el-icon class="el-dialog__close"></el-icon>
start-placeholder="结束日期" </button>
:picker-options="pickerOptions" </div>
/> </template>
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button> <div v-loading="loading">
</div> <div class="searchHead" v-if="type == 'hour_s'">
<div class="searchHead" v-if="type=='day_s'"> <el-date-picker
<el-date-picker v-model="query.start_time"
v-model="query.start_time" type="datetime"
type="date" placeholder="选择时间"
format="YYYY-MM-DD" format="YYYY-MM-DD HH"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD HH"
start-placeholder="开始日期" :picker-options="pickerOptions"
:picker-options="pickerOptions" />
/> <span class="middleText">至</span>
<el-date-picker <el-date-picker
v-model="query.end_time" v-model="query.end_time"
type="date" type="datetime"
format="YYYY-MM-DD" format="YYYY-MM-DD HH"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD HH"
start-placeholder="结束日期" start-placeholder="结束日期"
:picker-options="pickerOptions" :picker-options="pickerOptions"
/> />
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button> <el-button type="primary" class="searchBtn" @click="dataSearch"
</div> >查询</el-button
<div class="searchHead" v-if="type=='month_s'"> >
<el-date-picker </div>
v-model="query.start_time" <div class="searchHead" v-if="type == 'day_s'">
type="month" <el-date-picker
format="YYYY-MM" v-model="query.start_time"
value-format="YYYY-MM" type="date"
start-placeholder="开始月份" format="YYYY-MM-DD"
:picker-options="pickerOptions" value-format="YYYY-MM-DD"
/> start-placeholder="开始日期"
<el-date-picker :picker-options="pickerOptions"
v-model="query.end_time" />
type="month" <el-date-picker
format="YYYY-MM" v-model="query.end_time"
value-format="YYYY-MM" type="date"
start-placeholder="结束月份" format="YYYY-MM-DD"
:picker-options="pickerOptions" value-format="YYYY-MM-DD"
/> start-placeholder="结束日期"
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button> :picker-options="pickerOptions"
</div> />
<div class="searchHead" v-if="type=='year_s'"> <el-button type="primary" class="searchBtn" @click="dataSearch"
<el-date-picker >查询</el-button
v-model="query.start_time" >
type="year" </div>
format="YYYY" <div class="searchHead" v-if="type == 'month_s'">
value-format="YYYY" <el-date-picker
start-placeholder="开始日期" v-model="query.start_time"
:picker-options="pickerOptions" type="month"
/> format="YYYY-MM"
<el-date-picker value-format="YYYY-MM"
v-model="query.end_time" start-placeholder="开始月份"
type="year" :picker-options="pickerOptions"
format="YYYY" />
value-format="YYYY" <el-date-picker
start-placeholder="结束日期" v-model="query.end_time"
:picker-options="pickerOptions" type="month"
/> format="YYYY-MM"
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button> value-format="YYYY-MM"
</div> start-placeholder="结束月份"
<div id="myChart" style="width:100%;height:400px;"></div> :picker-options="pickerOptions"
</div> />
<template #footer> <el-button type="primary" class="searchBtn" @click="dataSearch"
<slot name="footer"></slot> >查询</el-button
</template> >
</el-dialog> </div>
<div class="searchHead" v-if="type == 'year_s'">
<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> </template>
<script> <script>
import * as echarts from "echarts";
import * as echarts from 'echarts'; export default {
export default { props: {
props: { cate: { type: String, default: "" },
cate:{ type: String, default: ""}, type: { type: String, default: "hours_s" },
type: { type: String, default: "hours_s" }, title: { type: String, default: "" },
title: { type: String, default: "" }, mgroup: { type: String, default: "" },
mgroup: { type: String, default: "" }, mpoint: { type: String, default: "" },
mpoint: { type: String, default: "" }, apiObj: { type: Object, default: () => {} },
apiObj: { type: Object, default: () => { } }, showClose: { type: Boolean, default: true },
showClose: { type: Boolean, default: true }, echartType: { type: String, default: "bar" },
echartType: { type: String, default: 'bar' }, modelValue: { type: Boolean, default: false },
modelValue: { type: Boolean, default: false }, showFullscreen: { type: Boolean, default: true },
showFullscreen: { type: Boolean, default: true }, loading: { type: Boolean, default: false },
loading: { type: Boolean, default: false } },
}, data() {
data() { return {
return { visible: false,
visible: false, isFullscreen: false,
isFullscreen: false, query: {
query:{ time: "",
time:''
},
cateName:'',
myChart:null,
option: {
title: {
text: '折线图',
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: [4,1,9,2,11,3,5,7,8,10,6,12],
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() {
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.mgroup){
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';
}
}else{
that.cateName = 'val';
}
this.$nextTick(res=>{
this.getChartsData();
})
},
methods: {
getChartsData(){
let that = this;
let params = {};
params.page = 0;
params.type = this.type;
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;
if(that.mgroup){
params.mgroup = this.mgroup;
}else{
params.mpoint = that.mpoint;
}
that.apiObj.req(params).then(res=>{
let xAxisData = [],lineData = [];
res.forEach(item=>{
let values = Number(item[that.cateName]);
lineData.push(values)
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(){
this.visible = false;
}, },
//最大化 code: "",
setFullscreen(){ cateName: "",
this.isFullscreen = !this.isFullscreen myChart: null,
dictData: [],
option: {
title: {
text: "",
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: [4, 1, 9, 2, 11, 3, 5, 7, 8, 10, 6, 12],
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() {
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.mgroup) {
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";
} else if (that.cate == "发电功率（KW·h）") {
that.cateName = "production_hour";
} else if (that.cate == "吨熟料发电量（KW·h/t）") {
that.cateName = "production_elec_unit";
} else if (that.cate == "用电量（KW·h）") {
that.cateName = "elec_consume";
}
} else {
that.cateName = "elec_consume_unit";
}
this.$nextTick((res) => {
this.getDict();
this.getChartsData();
});
},
methods: {
getDict() {
let that = this;
let params = {};
params.page = 0;
params.type__code = "goal_cate";
this.$API.system.dict.list.req(params).then((res) => {
that.dictData = res;
res.forEach((item) => {
if (item.name == that.cate) {
that.code = item.code;
}
});
});
},
getChartsData() {
let that = this;
let params = {};
params.page = 0;
params.type = this.type;
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 = that.query.start_time + "-01-01 00:00:00";
end_time = that.query.end_time + "-01-01 00:00:00";
}
params.start_time = start_time;
params.end_time = end_time;
if (that.mgroup) {
params.mgroup = that.mgroup;
} else {
params.mpoint = that.mpoint;
}
that.apiObj.req(params).then((res) => {
let xAxisData = [],
lineData = [];
res.forEach((item) => {
let ind = 0;
let values = Number(item[that.cateName]);
if (type == "hour_s") {
ind = item[type];
xAxisData[ind] = item[type] + unit;
lineData[ind] = values;
} else {
lineData.push(values);
let xAxis = item[type] + unit;
xAxisData.push(xAxis);
// ind = item[type] - 1;
// xAxisData[ind] = item[type] + unit;
// lineData[ind] = values;
}
});
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() {
this.visible = false;
},
//最大化
setFullscreen() {
this.isFullscreen = !this.isFullscreen;
},
},
};
</script> </script>
<style scoped> <style scoped>
.searchHead{ .searchHead {
display:flex display: flex;
} }
.middleText{ .middleText {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
margin: 0 5px; margin: 0 5px;
display: inline-block; display: inline-block;
} }
.searchBtn{ .searchBtn {
margin-left: 5px; margin-left: 5px;
} }
.sc-dialog__headerbtn {position: absolute;top: var(--el-dialog-padding-primary);right: var(--el-dialog-padding-primary);} .sc-dialog__headerbtn {
.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);} position: absolute;
.sc-dialog__headerbtn button:hover .el-dialog__close {color: var(--el-color-primary);} top: var(--el-dialog-padding-primary);
.sc-dialog:deep(.el-dialog).is-fullscreen {display: flex;flex-direction: column;top:0px !important;left:0px !important;} right: var(--el-dialog-padding-primary);
.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__headerbtn button {
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {padding-bottom: 10px;border-top: 1px solid var(--el-border-color-base);} padding: 0;
</style> 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>

161
src/views/enm_coalbase/power.vue
View File

@ -49,21 +49,21 @@
<td <td
v-if="ind == 2" v-if="ind == 2"
class="numCell hoursItem" class="numCell hoursItem"
@click="itemClick('hour_s', item1)" @click="itemClick('hour_s', item)"
> >
{{ item1 }} {{ item1 }}
</td> </td>
<td <td
v-if="ind == 3" v-if="ind == 3"
class="numCell monthItem" class="numCell monthItem"
@click="itemClick('day_s', item1)" @click="itemClick('day_s', item)"
> >
{{ item1 }} {{ item1 }}
</td> </td>
<td <td
v-if="ind == 4" v-if="ind == 4"
class="numCell yearItem" class="numCell yearItem"
@click="itemClick('month_s', item1)" @click="itemClick('month_s', item)"
> >
{{ item1 }} {{ item1 }}
</td> </td>
@ -71,7 +71,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="radioWrap"> <div class="radioWrap" @change="typeRadioChange">
<el-radio-group v-model="typeRadio"> <el-radio-group v-model="typeRadio">
<el-radio-button label="day">本日</el-radio-button> <el-radio-button label="day">本日</el-radio-button>
<el-radio-button label="month" <el-radio-button label="month"
@ -79,6 +79,35 @@
> >
<el-radio-button label="year">本年</el-radio-button> <el-radio-button label="year">本年</el-radio-button>
</el-radio-group> </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 == 'day'"
@change="dateChange"
></el-date-picker>
<el-date-picker
v-model="searchDate"
type="month"
value-format="YYYY-MM"
formatter="YYYY-MM"
placeholder="选择月"
v-if="typeRadio == 'month'"
@change="dateChange"
></el-date-picker>
<el-date-picker
v-if="typeRadio == 'year'"
v-model="searchDate"
type="year"
value-format="YYYY"
formatter="YYYY"
placeholder="选择年"
@change="dateChange"
></el-date-picker>
</div>
</div> </div>
<div class="chartWrap" v-show="typeRadio == 'day'"> <div class="chartWrap" v-show="typeRadio == 'day'">
@ -113,7 +142,7 @@
:title="title" :title="title"
:cate="cate" :cate="cate"
:apiObj="apiObj" :apiObj="apiObj"
:mgroup="query.mgroup" :mpoint="mpoint"
:modelValue="modelValue" :modelValue="modelValue"
:showClose="showClose" :showClose="showClose"
:echartType="echartType" :echartType="echartType"
@ -197,11 +226,13 @@ export default {
query: { query: {
mgroup: "", mgroup: "",
}, },
searchDate: "",
tableName: "主要设备（100KW以上）单位产品电耗数据表", tableName: "主要设备（100KW以上）单位产品电耗数据表",
tableDatas: [ tableDatas: [
["煤磨排风机主电机", "", "KW·h/t", "", "", ""], ["煤磨排风机主电机", "", "KW·h/t", "", "", ""],
["煤磨主电机", "", "KW·h/t", "", "", ""], ["煤磨主电机", "", "KW·h/t", "", "", ""],
], ],
tableData: [],
modelValue: true, modelValue: true,
type: "hour_s", type: "hour_s",
title: "煤磨工段", title: "煤磨工段",
@ -320,11 +351,30 @@ export default {
that.days = myDate.getDate(); that.days = myDate.getDate();
that.hours = myDate.getHours(); that.hours = myDate.getHours();
that.getTableHourData(); that.getTableHourData();
that.getHourData(); that.getHourData(that.year, that.month, that.days);
that.getDayData(); that.getDayData(that.year, that.month);
that.getMonthData(); that.getMonthData(that.year);
}, },
methods: { methods: {
typeRadioChange() {
this.searchDate = "";
},
dateChange(val) {
console.log(val);
if (this.typeRadio == "day") {
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];
this.getDayData(year, month);
} else {
this.getMonthData(val);
}
this.searchDate;
},
getTableHourData() { getTableHourData() {
let that = this; let that = this;
that.tableDatas = []; that.tableDatas = [];
@ -358,6 +408,7 @@ export default {
this.$API.enm.mpoint.stat this.$API.enm.mpoint.stat
.req(obj) .req(obj)
.then((res) => { .then((res) => {
that.tableData = res;
console.log("getTableHourData", res); console.log("getTableHourData", res);
res.forEach((item) => { res.forEach((item) => {
let obj = []; let obj = [];
@ -366,10 +417,9 @@ export default {
obj[2] = item.elec_consume_unit; obj[2] = item.elec_consume_unit;
obj[3] = 0; obj[3] = 0;
obj[4] = 0; obj[4] = 0;
obj[5] = item.mpoint;
that.tableDatas.push(obj); that.tableDatas.push(obj);
}); });
})
.then(() => {
let yetTime = timeDate - 3600000 * 24; let yetTime = timeDate - 3600000 * 24;
let ystDate = new Date(yetTime); let ystDate = new Date(yetTime);
let year_h = ystDate.getFullYear(); let year_h = ystDate.getFullYear();
@ -377,52 +427,51 @@ export default {
let days_h = ystDate.getDate(); let days_h = ystDate.getDate();
month_h = month_h > 9 ? month_h : "0" + month_h; month_h = month_h > 9 ? month_h : "0" + month_h;
days_h = days_h > 9 ? days_h : "0" + days_h; days_h = days_h > 9 ? days_h : "0" + days_h;
let obj = {}; let obj_d = {};
obj.type = "day_s"; obj_d.type = "day_s";
obj.year_s = year_h; obj_d.year_s = year_h;
obj.month_s = month_h; obj_d.month_s = month_h;
obj.day_s = days_h; obj_d.day_s = days_h;
obj.mgroup__name = "煤磨"; obj_d.mgroup__name = "煤磨";
obj.mpoint__material__code__in = "elec,elec_0"; obj_d.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0; obj_d.mpoint__ep_monitored__isnull = 0;
obj.mpoint__need_display = 1; obj_d.mpoint__need_display = 1;
obj.page = 0; obj_d.page = 0;
this.$API.enm.mpoint.stat.req(obj).then((res) => { this.$API.enm.mpoint.stat.req(obj_d).then((res) => {
console.log("getTableHourData", res); console.log("getTableHourData", res);
res.forEach((item, index) => { res.forEach((item, index) => {
that.tableDatas[index][3] = item.elec_consume_unit; that.tableDatas[index][3] = item.elec_consume_unit;
}); });
}); let obj_m = {};
}) obj_m.type = "month_s";
.then(() => { obj_m.year_s = that.year;
let obj = {}; obj_m.month_s = that.month;
obj.type = "month_s"; obj_m.mgroup__name = "煤磨";
obj.year_s = that.year; obj_m.mpoint__material__code__in = "elec,elec_0";
obj.month_s = that.month; obj_m.mpoint__ep_monitored__isnull = 0;
obj.mgroup__name = "煤磨"; obj_m.mpoint__need_display = 1;
obj.mpoint__material__code__in = "elec,elec_0"; obj_m.page = 0;
obj.mpoint__ep_monitored__isnull = 0; this.$API.enm.mpoint.stat.req(obj_m).then((res) => {
obj.mpoint__need_display = 1; console.log("getTableHourData", res);
obj.page = 0; res.forEach((item, index) => {
this.$API.enm.mpoint.stat.req(obj).then((res) => { that.tableDatas[index][4] =
console.log("getTableHourData", res); item.elec_consume_unit;
res.forEach((item, index) => { });
that.tableDatas[index][4] = item.elec_consume_unit;
}); });
}); });
}); })
.then(() => {});
}, },
//获取小时数据 //获取小时数据
getHourData() { getHourData(year, month, days) {
let that = this; let that = this;
let query = {}; let query = {};
query.page = 0; query.page = 0;
query.year_s = that.year; query.year_s = year;
query.month_s = that.month; query.month_s = month;
query.day_s = that.days; query.day_s = days;
query.type = "hour_s"; query.type = "hour_s";
query.mgroup = that.query.mgroup; query.mgroup = that.query.mgroup;
query.mpoint__ep_monitored__power_kw__gte = 100;
this.$API.enm.mpoint.stat.req(query).then((response) => { this.$API.enm.mpoint.stat.req(query).then((response) => {
let seriesData0 = [], let seriesData0 = [],
seriesData1 = []; seriesData1 = [];
@ -439,7 +488,7 @@ export default {
options.series[0].data = seriesData0; options.series[0].data = seriesData0;
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
let hourXAxis = []; let hourXAxis = [];
for (let i = 1; i <= that.hours; i++) { for (let i = 0; i < 24; i++) {
let item = i + "时"; let item = i + "时";
hourXAxis.push(item); hourXAxis.push(item);
} }
@ -448,16 +497,15 @@ export default {
}); });
}, },
//获取天数据 //获取天数据
getDayData() { getDayData(year, month) {
let that = this; let that = this;
let query1 = {}; let query1 = {};
query1.page = 0; query1.page = 0;
query1.year_s = that.year; query1.year_s = year;
query1.month_s = that.month; query1.month_s = month;
query1.type = "day_s"; query1.type = "day_s";
query1.mgroup = this.query.mgroup; query1.mgroup = this.query.mgroup;
query1.mpoint__ep_monitored__power_kw__gte = 100; this.$API.enm.mpoint.stat.req(query1).then((response) => {
this.$API.enm.enstat.req(query1).then((response) => {
let seriesData0 = [], let seriesData0 = [],
seriesData1 = []; seriesData1 = [];
let data = response; let data = response;
@ -473,7 +521,8 @@ export default {
options.series[0].data = seriesData0; options.series[0].data = seriesData0;
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
let dayXAxis = []; let dayXAxis = [];
for (let i = 1; i <= that.days; i++) { let dayss = new Date(year, month, 0).getDate();
for (let i = 1; i <= dayss; i++) {
let item = i + "日"; let item = i + "日";
dayXAxis.push(item); dayXAxis.push(item);
} }
@ -482,15 +531,14 @@ export default {
}); });
}, },
//获取月数据 //获取月数据
getMonthData() { getMonthData(year) {
let that = this; let that = this;
let query2 = {}; let query2 = {};
query2.page = 0; query2.page = 0;
query2.year_s = that.year; query2.year_s = year;
query2.type = "month_s"; query2.type = "month_s";
query2.mgroup = that.query.mgroup; query2.mgroup = that.query.mgroup;
query2.mpoint__ep_monitored__power_kw__gte = 100; this.$API.enm.mpoint.stat.req(query2).then((response) => {
this.$API.enm.enstat.req(query2).then((response) => {
let seriesData0 = [], let seriesData0 = [],
seriesData1 = []; seriesData1 = [];
let data = response; let data = response;
@ -506,7 +554,7 @@ export default {
options.series[0].data = seriesData0; options.series[0].data = seriesData0;
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
let monthXAxis = []; let monthXAxis = [];
for (let i = 1; i <= that.month; i++) { for (let i = 1; i < 13; i++) {
let item = i + "月"; let item = i + "月";
monthXAxis.push(item); monthXAxis.push(item);
} }
@ -515,8 +563,10 @@ export default {
}); });
}, },
itemClick(type, item) { itemClick(type, item) {
console.log(type, item);
this.type = type; this.type = type;
this.cate = item[0]; this.cate = item[0];
this.mpoint = item[5];
this.asynDialog = true; this.asynDialog = true;
}, },
handlePrint() { handlePrint() {
@ -538,5 +588,6 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 10px; padding-top: 10px;
position: relative;
} }
</style> </style>

208
src/views/enm_kilnbase/power.vue
View File

@ -72,13 +72,45 @@
</tbody> </tbody>
</table> </table>
<div class="radioWrap"> <div class="radioWrap">
<el-radio-group v-model="typeRadio"> <el-radio-group
v-model="typeRadio"
@change="typeRadioChange"
>
<el-radio-button label="day">本日</el-radio-button> <el-radio-button label="day">本日</el-radio-button>
<el-radio-button label="month" <el-radio-button label="month"
>本月</el-radio-button >本月</el-radio-button
> >
<el-radio-button label="year">本年</el-radio-button> <el-radio-button label="year">本年</el-radio-button>
</el-radio-group> </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 == 'day'"
@change="dateChange"
></el-date-picker>
<el-date-picker
v-model="searchDate"
type="month"
value-format="YYYY-MM"
formatter="YYYY-MM"
placeholder="选择月"
v-if="typeRadio == 'month'"
@change="dateChange"
></el-date-picker>
<el-date-picker
v-if="typeRadio == 'year'"
v-model="searchDate"
type="year"
value-format="YYYY"
formatter="YYYY"
placeholder="选择年"
@change="dateChange"
></el-date-picker>
</div>
</div> </div>
<div class="chartWrap" v-show="typeRadio == 'day'"> <div class="chartWrap" v-show="typeRadio == 'day'">
<div class="chartTitle">小时生产参数统计图</div> <div class="chartTitle">小时生产参数统计图</div>
@ -112,7 +144,7 @@
:title="title" :title="title"
:cate="cate" :cate="cate"
:apiObj="apiObj" :apiObj="apiObj"
:mgroup="query.mgroup" :mpoint="mpoint"
:modelValue="modelValue" :modelValue="modelValue"
:showClose="showClose" :showClose="showClose"
:echartType="echartType" :echartType="echartType"
@ -198,6 +230,8 @@ export default {
query: { query: {
mgroup: "", mgroup: "",
}, },
mpoint: "",
searchDate: "",
tableName: "主要设备（100KW以上）单位产品电耗数据表", tableName: "主要设备（100KW以上）单位产品电耗数据表",
tableDatas: [ tableDatas: [
["尾排风机", "KW·h/t", "", "", ""], ["尾排风机", "KW·h/t", "", "", ""],
@ -352,11 +386,30 @@ export default {
that.days = myDate.getDate(); that.days = myDate.getDate();
that.hours = myDate.getHours(); that.hours = myDate.getHours();
that.getTableHourData(); that.getTableHourData();
that.getHourData(); that.getHourData(that.year, that.month, that.days);
that.getDayData(); that.getDayData(that.year, that.month);
that.getMonthData(); that.getMonthData(that.year);
}, },
methods: { methods: {
typeRadioChange() {
this.searchDate = "";
},
dateChange(val) {
console.log(val);
if (this.typeRadio == "day") {
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];
this.getDayData(year, month);
} else {
this.getMonthData(val);
}
this.searchDate;
},
getTableHourData() { getTableHourData() {
let that = this; let that = this;
that.tableDatas = []; that.tableDatas = [];
@ -387,71 +440,87 @@ export default {
obj.mpoint__ep_monitored__isnull = 0; obj.mpoint__ep_monitored__isnull = 0;
obj.mpoint__need_display = 1; obj.mpoint__need_display = 1;
obj.page = 0; obj.page = 0;
this.$API.enm.mpoint.stat this.$API.enm.mpoint.stat.req(obj).then((res) => {
.req(obj) res.forEach((item) => {
.then((res) => { let obj = [];
console.log("getTableHourData", res); obj[0] = item.ep_monitored_name;
res.forEach((item) => { obj[1] = "KW·h/t";
let obj = []; obj[2] = item.elec_consume_unit;
obj[0] = item.ep_monitored_name; obj[3] = 0;
obj[1] = "KW·h/t"; obj[4] = 0;
obj[2] = item.elec_consume_unit; obj[5] = item.mpoint;
obj[3] = 0; that.tableDatas.push(obj);
obj[4] = 0; });
that.tableDatas.push(obj); let yetTime = timeDate - 3600000 * 24;
let ystDate = new Date(yetTime);
let year_d = ystDate.getFullYear();
let month_d = ystDate.getMonth() + 1;
let days_d = ystDate.getDate();
month_d = month_d > 9 ? month_d : "0" + month_d;
days_d = days_d > 9 ? days_d : "0" + days_d;
let obj_d = {};
obj_d.type = "day_s";
obj_d.year_s = year_d;
obj_d.month_s = month_d;
obj_d.day_s = days_d;
obj_d.mgroup__name = "回转窑";
obj_d.mpoint__material__code__in = "elec,elec_0";
obj_d.mpoint__ep_monitored__isnull = 0;
obj_d.mpoint__need_display = 1;
obj_d.page = 0;
this.$API.enm.mpoint.stat.req(obj_d).then((res) => {
res.forEach((item, index_d) => {
// that.tableDatas[index][3] = item.elec_consume_unit;
if (that.tableDatas[index_d]) {
that.tableDatas[index_d][3] =
item.elec_consume_unit;
} else {
let obj = [];
obj[0] = item.ep_monitored_name;
obj[1] = "KW·h/t";
obj[3] = item.elec_consume_unit;
obj[5] = item.mpoint;
that.tableDatas.push(obj);
}
}); });
}) let obj_m = {};
.then(() => { obj_m.type = "month_s";
let yetTime = timeDate - 3600000 * 24; obj_m.year_s = that.year;
let ystDate = new Date(yetTime); obj_m.month_s = that.month;
let year_h = ystDate.getFullYear(); obj_m.mgroup__name = "回转窑";
let month_h = ystDate.getMonth() + 1; obj_m.mpoint__material__code__in = "elec,elec_0";
let days_h = ystDate.getDate(); obj_m.mpoint__ep_monitored__isnull = 0;
month_h = month_h > 9 ? month_h : "0" + month_h; obj_m.mpoint__need_display = 1;
days_h = days_h > 9 ? days_h : "0" + days_h; obj_m.page = 0;
let obj = {}; this.$API.enm.mpoint.stat.req(obj_m).then((res) => {
obj.type = "day_s";
obj.year_s = year_h;
obj.month_s = month_h;
obj.day_s = days_h;
obj.mgroup__name = "回转窑";
obj.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0;
obj.mpoint__need_display = 1;
obj.page = 0;
this.$API.enm.mpoint.stat.req(obj).then((res) => {
console.log("getTableHourData", res); console.log("getTableHourData", res);
res.forEach((item, index) => { res.forEach((item, index_m) => {
that.tableDatas[index][3] = item.elec_consume_unit; // that.tableDatas[index_m][4] =
}); // item.elec_consume_unit;
}); if (that.tableDatas[index_m]) {
}) that.tableDatas[index_m][4] =
.then(() => { item.elec_consume_unit;
let obj = {}; } else {
obj.type = "month_s"; let obj = [];
obj.year_s = that.year; obj[0] = item.ep_monitored_name;
obj.month_s = that.month; obj[1] = "KW·h/t";
obj.mgroup__name = "回转窑"; obj[4] = item.elec_consume_unit;
obj.mpoint__material__code__in = "elec,elec_0"; obj[5] = item.mpoint;
obj.mpoint__ep_monitored__isnull = 0; that.tableDatas.push(obj);
obj.mpoint__need_display = 1; }
obj.page = 0;
this.$API.enm.mpoint.stat.req(obj).then((res) => {
console.log("getTableHourData", res);
res.forEach((item, index) => {
that.tableDatas[index][4] = item.elec_consume_unit;
}); });
}); });
}); });
});
}, },
//获取小时数据 //获取小时数据
getHourData() { getHourData(year, month, days) {
let that = this; let that = this;
let obj = {}; let obj = {};
obj.type = "hour_s"; obj.type = "hour_s";
obj.year_s = that.year; obj.year_s = year;
obj.month_s = that.month; obj.month_s = month;
obj.day_s = that.days; obj.day_s = days;
obj.mgroup__name = "回转窑"; obj.mgroup__name = "回转窑";
obj.mpoint__material__code__in = "elec,elec_0"; obj.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0; obj.mpoint__ep_monitored__isnull = 0;
@ -477,7 +546,7 @@ export default {
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
options.series[2].data = seriesData2; options.series[2].data = seriesData2;
let hourXAxis = []; let hourXAxis = [];
for (let i = 1; i < that.hours + 1; i++) { for (let i = 0; i < 24; i++) {
let item = i + "时"; let item = i + "时";
hourXAxis.push(item); hourXAxis.push(item);
} }
@ -486,12 +555,12 @@ export default {
}); });
}, },
//获取天数据 //获取天数据
getDayData() { getDayData(year, month) {
let that = this; let that = this;
let obj = {}; let obj = {};
obj.type = "day_s"; obj.type = "day_s";
obj.year_s = that.year; obj.year_s = year;
obj.month_s = that.month; obj.month_s = month;
obj.mgroup__name = "回转窑"; obj.mgroup__name = "回转窑";
obj.mpoint__material__code__in = "elec,elec_0"; obj.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0; obj.mpoint__ep_monitored__isnull = 0;
@ -517,7 +586,8 @@ export default {
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
options.series[2].data = seriesData2; options.series[2].data = seriesData2;
let dayXAxis = []; let dayXAxis = [];
for (let i = 1; i <= that.days; i++) { let dayss = new Date(year, month, 0).getDate();
for (let i = 1; i <= dayss; i++) {
let item = i + "日"; let item = i + "日";
dayXAxis.push(item); dayXAxis.push(item);
} }
@ -526,11 +596,11 @@ export default {
}); });
}, },
//获取月数据 //获取月数据
getMonthData() { getMonthData(year) {
let that = this; let that = this;
let obj = {}; let obj = {};
obj.type = "month_s"; obj.type = "month_s";
obj.year_s = that.year; obj.year_s = year;
obj.mgroup__name = "回转窑"; obj.mgroup__name = "回转窑";
obj.mpoint__material__code__in = "elec,elec_0"; obj.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0; obj.mpoint__ep_monitored__isnull = 0;
@ -556,7 +626,7 @@ export default {
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
options.series[2].data = seriesData2; options.series[2].data = seriesData2;
let monthXAxis = []; let monthXAxis = [];
for (let i = 1; i <= that.month; i++) { for (let i = 1; i < 13; i++) {
let item = i + "月"; let item = i + "月";
monthXAxis.push(item); monthXAxis.push(item);
} }
@ -567,6 +637,7 @@ export default {
itemClick(type, item) { itemClick(type, item) {
this.type = type; this.type = type;
this.cate = item[0]; this.cate = item[0];
this.mpoint = item[5];
this.asynDialog = true; this.asynDialog = true;
}, },
handlePrint() { handlePrint() {
@ -588,5 +659,6 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 10px; padding-top: 10px;
position: relative;
} }
</style> </style>

232
src/views/enm_rmbase/power.vue
View File

@ -24,9 +24,7 @@
> >
<thead class="myTableHead"> <thead class="myTableHead">
<tr> <tr>
<th colspan="5"> <th colspan="5">主要设备单位产品电耗数据表</th>
原料磨工段主要设备（100KW以上）单位产品电耗数据表
</th>
</tr> </tr>
<tr> <tr>
<th>设备名称</th> <th>设备名称</th>
@ -73,7 +71,45 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="chartWrap"> <div class="radioWrap" @change="typeRadioChange">
<el-radio-group v-model="typeRadio">
<el-radio-button label="day">本日</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 == 'day'"
@change="dateChange"
></el-date-picker>
<el-date-picker
v-model="searchDate"
type="month"
value-format="YYYY-MM"
formatter="YYYY-MM"
placeholder="选择月"
v-if="typeRadio == 'month'"
@change="dateChange"
></el-date-picker>
<el-date-picker
v-if="typeRadio == 'year'"
v-model="searchDate"
type="year"
value-format="YYYY"
formatter="YYYY"
placeholder="选择年"
@change="dateChange"
></el-date-picker>
</div>
</div>
<div class="chartWrap" v-show="typeRadio == 'day'">
<div class="chartTitle">小时生产参数统计图</div> <div class="chartTitle">小时生产参数统计图</div>
<scEcharts <scEcharts
height="400px" height="400px"
@ -81,7 +117,7 @@
:option="optionHour" :option="optionHour"
></scEcharts> ></scEcharts>
</div> </div>
<div class="chartWrap"> <div class="chartWrap" v-show="typeRadio == 'month'">
<div class="chartTitle">本月生产参数统计图</div> <div class="chartTitle">本月生产参数统计图</div>
<scEcharts <scEcharts
height="400px" height="400px"
@ -89,7 +125,7 @@
:option="optionDay" :option="optionDay"
></scEcharts> ></scEcharts>
</div> </div>
<div class="chartWrap"> <div class="chartWrap" v-show="typeRadio == 'year'">
<div class="chartTitle">本年生产参数统计图</div> <div class="chartTitle">本年生产参数统计图</div>
<scEcharts <scEcharts
height="400px" height="400px"
@ -105,7 +141,7 @@
:title="title" :title="title"
:cate="cate" :cate="cate"
:apiObj="apiObj" :apiObj="apiObj"
:mgroup="query.mgroup" :mpoint="mpoint"
:modelValue="modelValue" :modelValue="modelValue"
:showClose="showClose" :showClose="showClose"
:echartType="echartType" :echartType="echartType"
@ -167,6 +203,7 @@ export default {
}, },
data() { data() {
return { return {
typeRadio: "day",
exportLoading: false, exportLoading: false,
chartShow: false, chartShow: false,
myOption: null, myOption: null,
@ -181,6 +218,8 @@ export default {
query: { query: {
mgroup: "", mgroup: "",
}, },
mpoint: "",
searchDate: "",
tableName: "主要设备（100KW以上）单位产品电耗数据表", tableName: "主要设备（100KW以上）单位产品电耗数据表",
tableDatas: [ tableDatas: [
// ["辊压机", "KW·h/t", "", "", ""], // ["辊压机", "KW·h/t", "", "", ""],
@ -305,11 +344,30 @@ export default {
that.days = myDate.getDate(); that.days = myDate.getDate();
that.hours = myDate.getHours(); that.hours = myDate.getHours();
that.getTableHourData(); that.getTableHourData();
that.getHourData(); that.getHourData(that.year, that.month, that.days);
that.getDayData(); that.getDayData(that.year, that.month);
that.getMonthData(); that.getMonthData(that.year);
}, },
methods: { methods: {
typeRadioChange() {
this.searchDate = "";
},
dateChange(val) {
console.log(val);
if (this.typeRadio == "day") {
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];
this.getDayData(year, month);
} else {
this.getMonthData(val);
}
this.searchDate;
},
getTableHourData() { getTableHourData() {
let that = this; let that = this;
that.tableDatas = []; that.tableDatas = [];
@ -340,71 +398,85 @@ export default {
obj.mpoint__ep_monitored__isnull = 0; obj.mpoint__ep_monitored__isnull = 0;
obj.mpoint__need_display = 1; obj.mpoint__need_display = 1;
obj.page = 0; obj.page = 0;
this.$API.enm.mpoint.stat this.$API.enm.mpoint.stat.req(obj).then((res) => {
.req(obj) res.forEach((item) => {
.then((res) => { let obj = [];
console.log("getTableHourData", res); obj[0] = item.ep_monitored_name;
res.forEach((item) => { obj[1] = "KW·h/t";
let obj = []; obj[2] = item.elec_consume_unit;
obj[0] = item.ep_monitored_name; obj[3] = 0;
obj[1] = "KW·h/t"; obj[4] = 0;
obj[2] = item.elec_consume_unit; obj[5] = item.mpoint;
obj[3] = 0; that.tableDatas.push(obj);
obj[4] = 0; });
that.tableDatas.push(obj); let yetTime = timeDate - 3600000 * 24;
}); let ystDate = new Date(yetTime);
}) let year_d = ystDate.getFullYear();
.then(() => { let month_d = ystDate.getMonth() + 1;
let yetTime = timeDate - 3600000 * 24; let days_d = ystDate.getDate();
let ystDate = new Date(yetTime); month_d = month_d > 9 ? month_d : "0" + month_d;
let year_h = ystDate.getFullYear(); days_d = days_d > 9 ? days_d : "0" + days_d;
let month_h = ystDate.getMonth() + 1; let obj_d = {};
let days_h = ystDate.getDate(); obj_d.type = "day_s";
month_h = month_h > 9 ? month_h : "0" + month_h; obj_d.year_s = year_d;
days_h = days_h > 9 ? days_h : "0" + days_h; obj_d.month_s = month_d;
let obj = {}; obj_d.day_s = days_d;
obj.type = "day_s"; obj_d.mgroup__name = "原料磨";
obj.year_s = year_h; obj_d.mpoint__material__code__in = "elec,elec_0";
obj.month_s = month_h; obj_d.mpoint__ep_monitored__isnull = 0;
obj.day_s = days_h; obj_d.mpoint__need_display = 1;
obj.mgroup__name = "原料磨"; obj_d.page = 0;
obj.mpoint__material__code__in = "elec,elec_0"; this.$API.enm.mpoint.stat.req(obj_d).then((res) => {
obj.mpoint__ep_monitored__isnull = 0; console.log("getTableDayData", res);
obj.mpoint__need_display = 1; res.forEach((item, index_d) => {
obj.page = 0; if (that.tableDatas[index_d]) {
this.$API.enm.mpoint.stat.req(obj).then((res) => { that.tableDatas[index_d][3] =
console.log("getTableHourData", res); item.elec_consume_unit;
res.forEach((item, index) => { } else {
that.tableDatas[index][3] = item.elec_consume_unit; let obj = [];
}); obj[0] = item.ep_monitored_name;
}); obj[1] = "KW·h/t";
}) obj[3] = item.elec_consume_unit;
.then(() => { obj[5] = item.mpoint;
let obj = {}; that.tableDatas.push(obj);
obj.type = "month_s"; }
obj.year_s = that.year;
obj.month_s = that.month;
obj.mgroup__name = "原料磨";
obj.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0;
obj.mpoint__need_display = 1;
obj.page = 0;
this.$API.enm.mpoint.stat.req(obj).then((res) => {
console.log("getTableHourData", res);
res.forEach((item, index) => {
that.tableDatas[index][4] = item.elec_consume_unit;
});
}); });
}); });
let obj_m = {};
obj_m.type = "month_s";
obj_m.year_s = that.year;
obj_m.month_s = that.month;
obj_m.mgroup__name = "原料磨";
obj_m.mpoint__material__code__in = "elec,elec_0";
obj_m.mpoint__ep_monitored__isnull = 0;
obj_m.mpoint__need_display = 1;
obj_m.page = 0;
this.$API.enm.mpoint.stat.req(obj_m).then((res) => {
console.log("getTableMonthrData", res);
res.forEach((item, index_m) => {
if (that.tableDatas[index_m]) {
that.tableDatas[index_m][4] =
item.elec_consume_unit;
} else {
let obj = [];
obj[0] = item.ep_monitored_name;
obj[1] = "KW·h/t";
obj[4] = item.elec_consume_unit;
obj[5] = item.mpoint;
that.tableDatas.push(obj);
}
});
});
});
}, },
//获取小时数据 //获取小时数据
getHourData() { getHourData(year, month, days) {
let that = this; let that = this;
let obj = {}; let obj = {};
obj.type = "hour_s"; obj.type = "hour_s";
obj.year_s = that.year; obj.year_s = year;
obj.month_s = that.month; obj.month_s = month;
obj.day_s = that.days; obj.day_s = days;
obj.mgroup__name = "原料磨"; obj.mgroup__name = "原料磨";
obj.mpoint__material__code__in = "elec,elec_0"; obj.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0; obj.mpoint__ep_monitored__isnull = 0;
@ -426,7 +498,7 @@ export default {
options.series[0].data = seriesData0; options.series[0].data = seriesData0;
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
let hourXAxis = []; let hourXAxis = [];
for (let i = 1; i < that.hours + 1; i++) { for (let i = 0; i < 24; i++) {
let item = i + "时"; let item = i + "时";
hourXAxis.push(item); hourXAxis.push(item);
} }
@ -435,12 +507,12 @@ export default {
}); });
}, },
//获取天数据 //获取天数据
getDayData() { getDayData(year, month) {
let that = this; let that = this;
let obj = {}; let obj = {};
obj.type = "day_s"; obj.type = "day_s";
obj.year_s = that.year; obj.year_s = year;
obj.month_s = that.month; obj.month_s = month;
obj.mgroup__name = "原料磨"; obj.mgroup__name = "原料磨";
obj.mpoint__material__code__in = "elec,elec_0"; obj.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0; obj.mpoint__ep_monitored__isnull = 0;
@ -462,7 +534,8 @@ export default {
options.series[0].data = seriesData0; options.series[0].data = seriesData0;
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
let dayXAxis = []; let dayXAxis = [];
for (let i = 1; i <= that.days; i++) { let dayss = new Date(year, month, 0).getDate();
for (let i = 1; i <= dayss; i++) {
let item = i + "日"; let item = i + "日";
dayXAxis.push(item); dayXAxis.push(item);
} }
@ -471,11 +544,11 @@ export default {
}); });
}, },
//获取月数据 //获取月数据
getMonthData() { getMonthData(year) {
let that = this; let that = this;
let obj = {}; let obj = {};
obj.type = "month_s"; obj.type = "month_s";
obj.year_s = that.year; obj.year_s = year;
obj.mgroup__name = "原料磨"; obj.mgroup__name = "原料磨";
obj.mpoint__material__code__in = "elec,elec_0"; obj.mpoint__material__code__in = "elec,elec_0";
obj.mpoint__ep_monitored__isnull = 0; obj.mpoint__ep_monitored__isnull = 0;
@ -497,7 +570,7 @@ export default {
options.series[0].data = seriesData0; options.series[0].data = seriesData0;
options.series[1].data = seriesData1; options.series[1].data = seriesData1;
let monthXAxis = []; let monthXAxis = [];
for (let i = 1; i <= that.month; i++) { for (let i = 1; i < 13; i++) {
let item = i + "月"; let item = i + "月";
monthXAxis.push(item); monthXAxis.push(item);
} }
@ -508,6 +581,7 @@ export default {
itemClick(type, item) { itemClick(type, item) {
this.type = type; this.type = type;
this.cate = item[0]; this.cate = item[0];
this.mpoint = item[5];
this.asynDialog = true; this.asynDialog = true;
}, },
handlePrint() { handlePrint() {
@ -525,4 +599,10 @@ export default {
.printContainer { .printContainer {
padding-left: 20px; padding-left: 20px;
} }
.radioWrap {
display: flex;
justify-content: center;
padding-top: 10px;
position: relative;
}
</style> </style>