463 lines
16 KiB
Vue
463 lines
16 KiB
Vue
<template>
|
||
<div class="app-container" id="app-container" style="height: 100%">
|
||
<el-header id="app-header">
|
||
<div class="left-panel">
|
||
<el-select
|
||
v-model="query.type"
|
||
placeholder="查询类型"
|
||
clearable
|
||
class="headerSearch"
|
||
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
<el-select
|
||
v-model="query.mgroupName"
|
||
placeholder="查询工段"
|
||
clearable
|
||
class="headerSearch"
|
||
>
|
||
<el-option
|
||
v-for="item in mgroups"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
></el-option>
|
||
</el-select>
|
||
<el-date-picker
|
||
v-model="query.day"
|
||
type="date"
|
||
value-format="YYYY-MM-DD"
|
||
format="YYYY-MM-DD"
|
||
placeholder="天"
|
||
v-if="query.type==0"
|
||
style="margin-right: 6px"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.month"
|
||
type="month"
|
||
value-format="YYYY-MM"
|
||
format="YYYY-MM"
|
||
placeholder="查询月份"
|
||
v-if="query.type==1"
|
||
class="headerSearch"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.year"
|
||
type="year"
|
||
value-format="YYYY"
|
||
format="YYYY"
|
||
placeholder="查询年份"
|
||
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"
|
||
@click="dateChange"
|
||
></el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="exportExcel()"
|
||
:loading="exportLoading"
|
||
>导出xlsx
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="showBarChart()"
|
||
icon="el-icon-pie-chart"
|
||
>趋势图
|
||
</el-button>
|
||
<!-- <el-button type="primary" @click="handlePrint">打印 </el-button> -->
|
||
</div>
|
||
</el-header>
|
||
<el-card style="margin-top:5px">
|
||
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
||
<el-table
|
||
id = "greenHeadTable"
|
||
:data="tableData"
|
||
style="width: 70%"
|
||
border
|
||
:height="tableHeight"
|
||
>
|
||
<el-table-column label="（100KW以上）设备用电峰谷平" align="center" width="100" fixed>
|
||
<el-table-column label="设备" prop="mpoint__name" min-width="110" fixed></el-table-column>
|
||
<el-table-column label="单位" prop="unit" min-width="110" fixed></el-table-column>
|
||
|
||
<!-- 动态渲染尖峰、波峰、平谷、波谷、深谷 -->
|
||
<el-table-column
|
||
v-for="column in columns"
|
||
:key="column.prop"
|
||
:label="column.label"
|
||
:prop="column.prop"
|
||
min-width="120"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-table
|
||
:data="tableDatas2"
|
||
border
|
||
style="margin-left: 10px; margin-top: 10px; width: 500px; table-layout: fixed;"
|
||
:key="timeStamp"
|
||
class="myTable"
|
||
>
|
||
<!-- 第一列 -->
|
||
<el-table-column
|
||
label="峰谷平时间段划分"
|
||
prop="type"
|
||
width="150"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
|
||
<!-- 第二列 -->
|
||
<el-table-column
|
||
label="时间段"
|
||
prop="time"
|
||
align="left"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<el-dialog
|
||
title="柱状图"
|
||
v-model="isChartDialogVisible"
|
||
width="80%"
|
||
@close="onDialogClose">
|
||
<div
|
||
id="barChart"
|
||
style="width: 100%; height: 400px;"
|
||
></div>
|
||
<template #footer>
|
||
<el-button @click="isChartDialogVisible = false">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
data() {
|
||
return {
|
||
query:{
|
||
type:0,
|
||
day:'',
|
||
mgroupName:'',
|
||
year:'',
|
||
month:'',
|
||
yearStart:'',
|
||
start_time:'',
|
||
end_time:'',
|
||
},
|
||
tableHeight:800,
|
||
columns: [
|
||
{ label: '尖峰', prop: 'peak' },
|
||
{ label: '波峰', prop: 'high' },
|
||
{ label: '平谷', prop: 'flat' },
|
||
{ label: '波谷', prop: 'low' },
|
||
{ label: '深谷', prop: 'deep' },
|
||
],
|
||
tableData:[],
|
||
tableDatas2: [
|
||
{ type: "波峰", time: "8:00--11:00 19:00-24:00" },
|
||
{ type: "尖峰", time: "7月 21:00--23:00, 1、11、12月19:00--21:00" },
|
||
{ type: "平谷", time: "11:00--13:00 17:00-19:00 00:00-4:00" },
|
||
{ type: "波谷", time: "4:00--8:00 13:00-17:00" },
|
||
{ type: "深谷", time: "5、6、7、8月 14:00--16:00" },
|
||
],
|
||
tableDatas_day: [],
|
||
tableDatas_range:[],
|
||
mpoint_name: [],
|
||
isChartDialogVisible: false, // 控制弹窗显示状态
|
||
mpointList: [],
|
||
daterange:[],
|
||
barChartData: {},
|
||
options:[
|
||
{id:0,name:'日统计'},
|
||
{id:1,name:'月统计'},
|
||
{id:2,name:'年统计'},
|
||
{id:3,name:'时间范围'},
|
||
],
|
||
mgroups: [
|
||
{id:0,name:'电石渣'},
|
||
{id:1,name:'原料磨'},
|
||
{id:2,name:'生料工序(二次配料)'},
|
||
{id:3,name:'回转窑'},
|
||
{id:4,name:'煤磨'},
|
||
{id:5,name:'水泥磨'},
|
||
{id:6,name:'水泥包装'},
|
||
],
|
||
col_list : ['peak','high','low','deep','flat'],
|
||
row_translate: ['尖峰', '波峰', '波谷', '深谷', '平谷'],
|
||
colors :["#EB1B1D", "#FE9900", "#0E4E51", "#2B8C05", "#A9C0A0"],// 自定义颜色
|
||
|
||
};
|
||
},
|
||
mounted() {
|
||
var myDate = new Date();
|
||
let month = myDate.getMonth()+1;
|
||
if(month<10){
|
||
month = '0'+month;
|
||
}
|
||
this.query.month = myDate.getFullYear()+'-'+month;
|
||
this.query.day = myDate.getFullYear()+'-'+(myDate.getMonth()+1)+'-'+myDate.getDate();
|
||
this.query.year = myDate.getFullYear();
|
||
this.dateChange();
|
||
|
||
},
|
||
methods: {
|
||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
let that = this;
|
||
if (columnIndex == 0) {
|
||
if (that.indexList.indexOf(rowIndex) > -1) {
|
||
let rowspans = that.mgroupObj[row.mgroupName];
|
||
return {
|
||
rowspan: rowspans,
|
||
colspan: 1,
|
||
};
|
||
} else {
|
||
return {
|
||
rowspan: 1,
|
||
colspan: 0,
|
||
};
|
||
}
|
||
}
|
||
},
|
||
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;
|
||
that.mpointList = []; // 清空数组
|
||
let arr = [],
|
||
obj = {};
|
||
console.log(that.query.mgroupName, 'that.query.mgroupName')
|
||
that.$API.enm.mpoint.list
|
||
.req({
|
||
page: 0,
|
||
enabled: 1,
|
||
need_display: 1,
|
||
mgroup__name: that.query.mgroupName,
|
||
mpoint_ep_monitored__power_kw__gte: 100,
|
||
ordering: "report_sortstr",
|
||
material__code__in: "elec",
|
||
query: "{ id, name, nickname, mgroup_name, unit, report_sortstr, ep_monitored_name, }",
|
||
})
|
||
.then((res) => {
|
||
if (res.length === 0) {
|
||
return;
|
||
}
|
||
console.log(res, 'res-----------')
|
||
that.mpointList = res
|
||
.filter((item) => item.report_sortstr !== "" && item.mgroup_name !== '生活区')
|
||
.map((item) => item.id); // 提取 id
|
||
}).then(() => {
|
||
// 根据 type 设置 obj 的值
|
||
if (that.query.type === 0) { // 日
|
||
arr = that.query.day.split('-');
|
||
obj.year = Number(arr[0]);
|
||
obj.month = Number(arr[1]);
|
||
obj.day = Number(arr[2]);
|
||
} else if (that.query.type === 1) { // 月
|
||
arr = that.query.month.split('-');
|
||
obj.year = Number(arr[0]);
|
||
obj.month = Number(arr[1]);
|
||
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];
|
||
}
|
||
console.log(that.mpointList.length, 'that.mpointList')
|
||
let mpointID = that.mpointList.join(',');
|
||
obj.page = 0;
|
||
obj.type = 'hour';
|
||
obj.group_by = 'val_level';
|
||
obj.mpoint__in = mpointID;
|
||
this.$API.enm.mpointstat.groupValues.req(obj)
|
||
.then((res) => {
|
||
const groupedData = res.reduce((acc, item) => {
|
||
// 查找是否已有当前 mpoint__name 的分组
|
||
let group = acc.find(g => g.mpoint__name === item.mpoint__name);
|
||
|
||
// 如果没有，创建一个新的分组对象
|
||
if (!group) {
|
||
group = {
|
||
mpoint__name: item.mpoint__name,
|
||
unit: item.mpoint__unit,
|
||
flat: null,
|
||
high: null,
|
||
low: null,
|
||
peak: null,
|
||
deep: null,
|
||
};
|
||
acc.push(group);
|
||
}
|
||
// 根据 val_level 将 total_val 填入对应字段
|
||
group[item.val_level] = (item.total_val.toFixed(2));
|
||
return acc;
|
||
}, []);
|
||
this.tableData = groupedData;
|
||
console.log("groupedData",groupedData)
|
||
})
|
||
.catch((error) => {
|
||
console.error("API 请求错误: ", error);
|
||
});
|
||
|
||
});
|
||
},
|
||
// 显示图表
|
||
showBarChart(){
|
||
this.isChartDialogVisible = true;
|
||
this.$nextTick(() => {
|
||
this.createBarChart();
|
||
});
|
||
},
|
||
onDialogClose() {
|
||
this.isChartDialogVisible = false;
|
||
},
|
||
|
||
// 用于生成柱状图的函数
|
||
createBarChart() {
|
||
// 获取图表容器
|
||
let chartDom = document.getElementById('barChart');
|
||
if (!chartDom) {
|
||
console.error('无法找到 #barChart 元素');
|
||
return;
|
||
}
|
||
let myChart = echarts.init(chartDom);
|
||
|
||
// 准备数据
|
||
let seriesData = [
|
||
{ name: '平谷', data: [] },
|
||
{ name: '波峰', data: [] },
|
||
{ name: '波谷', data: [] },
|
||
{ name: '尖峰', data: [] },
|
||
{ name: '深谷', data: [] }
|
||
];
|
||
let categories = this.tableData.map(item => item.mpoint__name); // 横轴设备名称
|
||
this.tableData.forEach(item => {
|
||
seriesData[0].data.push(item.flat ? parseFloat(item.flat) : 0); // 平谷
|
||
seriesData[1].data.push(item.high ? parseFloat(item.high) : 0); // 波峰
|
||
seriesData[2].data.push(item.low ? parseFloat(item.low) : 0); // 波谷
|
||
seriesData[3].data.push(item.peak ? parseFloat(item.peak) : 0); // 尖峰
|
||
seriesData[4].data.push(item.deep ? parseFloat(item.deep) : 0); // 深谷
|
||
});
|
||
|
||
// 配置图表选项
|
||
let option = {
|
||
title: {
|
||
text: '电量统计柱状图',
|
||
left: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' } // 鼠标悬停提示
|
||
},
|
||
legend: {
|
||
data: this.row_translate, // 显示 'peak', 'high' 等级别的图例
|
||
top: '10%'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categories, // 横轴设备名称
|
||
axisLabel: {
|
||
rotate: 45 // 旋转标签，防止重叠
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value} kW·h' // 单位为 kW·h
|
||
}
|
||
},
|
||
series: seriesData.map(item => ({
|
||
name: item.name,
|
||
type: 'bar',
|
||
data: item.data, // 数据数组
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}' // 显示数值
|
||
}
|
||
}))
|
||
};
|
||
|
||
// 设置图表选项
|
||
myChart.setOption(option);
|
||
},
|
||
|
||
handlePrint() {
|
||
this.$PRINT('#myReport');
|
||
},
|
||
exportExcel() {
|
||
this.exportLoading = true;
|
||
this.$XLSX('#myTable', this.tableName)
|
||
this.exportLoading = false;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
#numTable{
|
||
margin-left: 37px;
|
||
}
|
||
#numTable td{
|
||
height: 32px;
|
||
padding-left: 5px;
|
||
}
|
||
.numCell{
|
||
width: 80px;
|
||
}
|
||
.numCell.numCell_last{
|
||
width: 100px;
|
||
}
|
||
.searchHead{
|
||
display:flex
|
||
}
|
||
.middleText{
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin: 0 5px;
|
||
display: inline-block;
|
||
}
|
||
.searchBtn{
|
||
margin-left: 5px;
|
||
}
|
||
.myTable td:first-child {
|
||
width: 150px !important; /* 使用 !important 确保优先级足够高 */
|
||
}
|
||
</style> |