feat: 峰谷平增加时间段选择
This commit is contained in:
parent
2c58eec472
commit
00fb81d95e
|
|
@ -43,6 +43,19 @@
|
|||
v-if="query.type==2"
|
||||
class="headerSearch"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="daterange"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
placeholder="时间范围"
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
v-if="query.type==3"
|
||||
style="margin-right: 6px"
|
||||
@change="changeDate"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
|
|
@ -80,6 +93,28 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- <el-table
|
||||
v-if="query.type==3"
|
||||
id="hourBaseTable"
|
||||
:data="tableDatas_range"
|
||||
style="width: 100%"
|
||||
border
|
||||
:height="tableHeight"
|
||||
|
||||
>
|
||||
<el-table-column
|
||||
label="分类"
|
||||
prop="mpoint__name"
|
||||
fixed
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="mpoint__unit" fixed align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label = "电耗" prop="total_val" fixed align="center">
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
</div>
|
||||
</el-card>
|
||||
<div id="barChart" style="width: 100%; height: 400px;"></div>
|
||||
|
|
@ -99,6 +134,8 @@ import * as echarts from 'echarts';
|
|||
start_time:'',
|
||||
end_time:'',
|
||||
},
|
||||
tableDatas_range:[],
|
||||
daterange:[],
|
||||
headers: ['生料立磨','循环风机','高温风机','尾排风机','回转窑','水泥磨','水泥循环风机','水泥系统风机','电石渣','原料磨','煤磨','水泥粉磨','水泥包装'],
|
||||
mpoint_name: ['原料立磨主电机','循环风机-原料磨','高温风机','尾排风机','回转窑合计','水泥高压进线','循环风机-水泥磨','系统风机','电石渣合计','原料磨合计','煤磨合计','水泥磨主电机','包装进线'],
|
||||
tableData: [
|
||||
|
|
@ -114,9 +151,11 @@ import * as echarts from 'echarts';
|
|||
{id:0,name:'日统计'},
|
||||
{id:1,name:'月统计'},
|
||||
{id:2,name:'年统计'},
|
||||
{id:3,name:'时间范围'},
|
||||
],
|
||||
row_list : ['peak','high','low','deep','flat'],
|
||||
row_translate: ['峰值', '高峰', '低谷', '深谷', '平谷'],
|
||||
row_translate: ['尖峰', '高峰', '低谷', '深谷', '平谷'],
|
||||
colors :["#EB1B1D", "#FE9900", "#0E4E51", "#2B8C05", "#A9C0A0"],// 自定义颜色
|
||||
|
||||
};
|
||||
},
|
||||
|
|
@ -130,7 +169,7 @@ import * as echarts from 'echarts';
|
|||
this.query.day = myDate.getFullYear()+'-'+(myDate.getMonth()+1)+'-'+myDate.getDate();
|
||||
this.query.year = myDate.getFullYear();
|
||||
this.dateChange();
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
|
|
@ -147,12 +186,25 @@ import * as echarts from 'echarts';
|
|||
rowspan: 1,
|
||||
colspan: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
translate(){
|
||||
|
||||
},
|
||||
|
||||
changeDate(){
|
||||
let obj = {};
|
||||
obj.type = "hour";
|
||||
obj.start_time = this.daterange[0];
|
||||
obj.end_time = this.daterange[1];
|
||||
obj.mpoint__in = this.mpointList[0];
|
||||
obj.page = 0;
|
||||
this.$API.enm.mpointstat.groupValues.req(obj).then((res) => {
|
||||
//处理res数组中的 total_val 字段 保留两位
|
||||
res.forEach(item => {
|
||||
item.total_val = Number(item.total_val).toFixed(2);
|
||||
});
|
||||
this.tableDatas_range = res;
|
||||
});
|
||||
},
|
||||
dateChange() {
|
||||
let that = this;
|
||||
let arr = [],
|
||||
|
|
@ -171,6 +223,9 @@ import * as echarts from 'echarts';
|
|||
obj.days = new Date(that.query.year, that.query.month, 0).getDate(); // 获取该月的天数
|
||||
} else if (that.query.type === 2) { // 年
|
||||
obj.year = that.query.year;
|
||||
} else if (that.query.type === 3) { // 时间范围
|
||||
obj.start_time = that.daterange[0];
|
||||
obj.end_time = that.daterange[1];
|
||||
}
|
||||
obj.page = 0;
|
||||
obj.type = 'hour';
|
||||
|
|
@ -196,7 +251,6 @@ import * as echarts from 'echarts';
|
|||
});
|
||||
});
|
||||
// 生成柱状图
|
||||
console.log('chartData',chartData);
|
||||
that.createBarChart(chartData);
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -214,7 +268,7 @@ import * as echarts from 'echarts';
|
|||
let seriesData = [];
|
||||
let categories = this.mpoint_name; // 横轴设备名称
|
||||
let rowList = this.row_list; // ['peak', 'high', 'low', 'deep', 'flat']
|
||||
let row_translate = this.row_translate; // ['峰值', '高峰', '低谷', '深谷', '平谷']
|
||||
let row_translate = this.row_translate; // ['尖峰', '高峰', '低谷', '深谷', '平谷']
|
||||
// 为每个电量级别（'peak', 'high', 'low', 'deep', 'flat'）创建一个系列
|
||||
rowList.forEach((level, index) => {
|
||||
let data = categories.map(device => {
|
||||
|
|
@ -231,6 +285,9 @@ import * as echarts from 'echarts';
|
|||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}' // 显示数值
|
||||
},
|
||||
itemStyle: {
|
||||
color: this.colors[index] // 根据索引获取颜色
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue