feat: 增加峰谷平和 水报表
This commit is contained in:
parent
bc583ecb8d
commit
47b225d7ab
|
|
@ -143,6 +143,14 @@ export default {
|
|||
data);
|
||||
}
|
||||
},
|
||||
groupValues: {
|
||||
name: "测点统计记录",
|
||||
req: async function(data){
|
||||
return await http.get(
|
||||
`${config.API_URL}/enm/mpointstat/group_values/`,
|
||||
data);
|
||||
}
|
||||
},
|
||||
statCreate: {
|
||||
name: "添加测点统计记录",
|
||||
req: async function(data){
|
||||
|
|
|
|||
|
|
@ -965,16 +965,16 @@ const routes = [
|
|||
},
|
||||
component: "enm_energy/value",
|
||||
},
|
||||
// {
|
||||
// name: "electric",
|
||||
// path: "/enm_energy/electric",
|
||||
// meta: {
|
||||
// title: "全厂电量统计",
|
||||
// // icon: "el-icon-grid",
|
||||
// perms: ["enm_energy_electric"],
|
||||
// },
|
||||
// component: "enm_energy/electric",
|
||||
// },
|
||||
{
|
||||
name: "electric_peak",
|
||||
path: "/enm_energy/electric_peak",
|
||||
meta: {
|
||||
title: "峰谷平",
|
||||
// icon: "el-icon-grid",
|
||||
perms: ["enm_energy_electric"],
|
||||
},
|
||||
component: "enm_energy/electric_peak",
|
||||
},
|
||||
{
|
||||
name: "electricHour",
|
||||
path: "/enm_energy/electricHour",
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
>
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value"
|
||||
>{{ percentage }}t</span
|
||||
>{{ percentage }}t/h</span
|
||||
>
|
||||
<p class="percentage-label">{{ item.name }}</p>
|
||||
</template>
|
||||
|
|
@ -434,9 +434,6 @@ export default {
|
|||
窑头: "煤磨",
|
||||
水泥配料库: "水泥磨",
|
||||
水泥储存及散装库: "水泥包装",
|
||||
// 煤粉制备_primitive0: "煤磨",
|
||||
// 水泥磨房_primitive1: "水泥磨",
|
||||
// 水泥储存及散装库: "水泥包装",
|
||||
},
|
||||
totalData: {
|
||||
shuliao: 0,
|
||||
|
|
@ -444,12 +441,10 @@ export default {
|
|||
out_cement: 0,
|
||||
},
|
||||
rateData: [
|
||||
{ name: "电石渣", value: 0 },
|
||||
{ name: "原料磨", value: 0 },
|
||||
{ name: "煤磨", value: 0 },
|
||||
{ name: "烧成", value: 0 },
|
||||
{ name: "水泥磨", value: 0 },
|
||||
{ name: "水泥包装", value: 0 },
|
||||
],
|
||||
elecData: [
|
||||
{ name: "电石渣", value: 0 },
|
||||
|
|
@ -1088,25 +1083,18 @@ export default {
|
|||
let seriesData = [];
|
||||
let data = response;
|
||||
data.forEach((item) => {
|
||||
if (item.mgroup_name == "电石渣") {
|
||||
if (item.mgroup_name == "原料磨") {
|
||||
that.rateData[0].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "原料磨") {
|
||||
} else if (item.mgroup_name == "煤磨") {
|
||||
that.rateData[1].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "煤磨") {
|
||||
} else if (item.mgroup_name == "回转窑") {
|
||||
that.rateData[2].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "回转窑") {
|
||||
that.rateData[3].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "水泥磨") {
|
||||
that.rateData[4].value = item.production_hour
|
||||
;
|
||||
} else if (item.mgroup_name == "水泥包装") {
|
||||
that.rateData[5].value = item.production_hour
|
||||
;
|
||||
}
|
||||
that.rateData[3].value = item.production_hour
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -2164,7 +2152,7 @@ export default {
|
|||
padding-top: 1vh;
|
||||
}
|
||||
.item_circle {
|
||||
width: 33%;
|
||||
width: 49%;
|
||||
text-align: center;
|
||||
}
|
||||
@keyframes rotate {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,259 @@
|
|||
<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"
|
||||
@change="typeCange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></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-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="handlePrint">打印 </el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-card style="margin-top:5px">
|
||||
<!-- <div ref="print" id="myReport" class="printContainer">
|
||||
<h3 style="text-align: center;">{{ tableName }}</h3>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
:height="tableHeight"
|
||||
:span-method="objectSpanMethod">
|
||||
<el-table-column
|
||||
v-for="item in tableData[0]"
|
||||
:key="item"
|
||||
:prop="item"
|
||||
:label="item"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</div> -->
|
||||
<div>
|
||||
<table id="myTable" class="myTable" border="1" cellspacing="0" style="width: 100%; text-align: center;">
|
||||
<thead class="myTableHead">
|
||||
<tr>
|
||||
<th colspan="2">主要用能设备（100KW以上）</th>
|
||||
<th v-for="(header, index) in headers" :key="index">{{ header }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
|
||||
<td v-for="(cell, cellIndex) in row" :key="cellIndex"
|
||||
>{{ cell }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query:{
|
||||
type:0,
|
||||
day:'',
|
||||
year:'',
|
||||
month:'',
|
||||
yearStart:'',
|
||||
start_time:'',
|
||||
end_time:'',
|
||||
},
|
||||
headers: ['生料立磨','循环风机','高温风机','尾排风机','回转窑','水泥磨','水泥循环风机','水泥系统风机','电石渣','原料磨','煤磨','水泥粉磨','水泥包装'],
|
||||
mpoint_name: ['立磨主电机','循环风机-原料磨','高温风机','尾排风机','回转窑合计','水泥高压进线','循环风机-水泥磨','系统风机','电石渣合计','原料磨合计','煤磨合计','水泥磨主电机','包装进线'],
|
||||
tableData: [
|
||||
['用电峰','用电尖峰','','','','','','','','','','','','',''],
|
||||
['用电峰','用电高峰','','','','','','','','','','','','',''],
|
||||
['用电谷','用电低谷','','','','','','','','','','','','',''],
|
||||
['用电谷','用电深谷','','','','','','','','','','','','',''],
|
||||
['用电平','用电平谷','','','','','','','','','','','','',''],
|
||||
],
|
||||
mpointList:["3631338253279723520,3631338547577257984,3631332708552392704,3631333116071026688,3631877739432493056,3631344327579828224,3631853750379200512,3631853436771090432,3631869508278722560,3631875738288111616,3631878174063050752,3631852596106797056,3631854361455820800"],
|
||||
tableName:'峰谷平',
|
||||
options:[
|
||||
{id:0,name:'日统计'},
|
||||
{id:1,name:'月统计'},
|
||||
{id:2,name:'年统计'},
|
||||
],
|
||||
row_list : ['peak','high','low','deep','flat'],
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
var myDate = new Date();
|
||||
let month = myDate.getMonth()+1;
|
||||
if(month<10){
|
||||
month = '0'+month;
|
||||
}
|
||||
this.query.month = myDate.getFullYear()+'-'+month;
|
||||
// this.getMgroup();
|
||||
|
||||
},
|
||||
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,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
dateChange() {
|
||||
let that = this;
|
||||
let arr = [],
|
||||
obj = {};
|
||||
|
||||
// 根据 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;
|
||||
}
|
||||
obj.page = 0;
|
||||
obj.type = 'hour';
|
||||
obj.group_by = 'val_level';
|
||||
obj.mpoint__in = that.mpointList[0];
|
||||
this.$API.enm.mpoint.groupValues.req(obj)
|
||||
.then((res) => {
|
||||
res.forEach(item => {
|
||||
// 查找对应的列索引
|
||||
const colIndex = this.mpoint_name.indexOf(item.mpoint__name) + 2;
|
||||
const rowIndex = this.row_list.indexOf(item.val_level);
|
||||
if (rowIndex > -1 && colIndex > 1) {
|
||||
this.tableData[rowIndex][colIndex] = (item.total_val).toFixed(2);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("API 请求错误: ", error);
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// let that = this;
|
||||
// let params = {page:0};
|
||||
// let arr = [];
|
||||
// if(that.query.type==0){//日
|
||||
// params.type='day_s';
|
||||
// arr = that.query.month.split('-');
|
||||
// params.year_s = Number(arr[0]);
|
||||
// params.month_s = Number(arr[1]);
|
||||
// params.day = Number(arr[2]);
|
||||
// }else if(that.query.type==1){//月
|
||||
// params.type='month_s';
|
||||
// params.year_s = Number(that.query.year);
|
||||
// }else if (that.query.type==2){
|
||||
// params.type='year_s';
|
||||
// params.year_s = Number(that.query.yearStart);
|
||||
// }
|
||||
|
||||
// },
|
||||
getTableData(){
|
||||
this.getData();
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,6 +17,19 @@
|
|||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<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-date-picker
|
||||
v-model="query.day"
|
||||
type="date"
|
||||
|
|
@ -164,6 +177,28 @@
|
|||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
v-if="query.type==3"
|
||||
id="hourBaseTable"
|
||||
:data="tableDatas_range"
|
||||
style="width: 100%"
|
||||
border
|
||||
:height="tableHeight"
|
||||
@cell-click="handleCellClick_range"
|
||||
>
|
||||
<el-table-column
|
||||
label="分类"
|
||||
prop="mpoint__nickname"
|
||||
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>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -192,6 +227,7 @@ export default {
|
|||
day: "",
|
||||
year: "",
|
||||
month: "",
|
||||
daterange:[],
|
||||
search_date: "",
|
||||
query:{
|
||||
type:0,
|
||||
|
|
@ -199,6 +235,8 @@ export default {
|
|||
year:'',
|
||||
month:'',
|
||||
yearStart:'',
|
||||
start_time:'',
|
||||
end_time:'',
|
||||
},
|
||||
mgroupObj: {},
|
||||
indexList: [],
|
||||
|
|
@ -208,9 +246,11 @@ export default {
|
|||
{id:0,name:'日统计'},
|
||||
{id:1,name:'月统计'},
|
||||
{id:2,name:'年统计'},
|
||||
{id:3,name:'时间段'},
|
||||
],
|
||||
tableDatas2: [],
|
||||
tableDatas_day:[],
|
||||
tableDatas_range:[],
|
||||
tableDatas_month:[],
|
||||
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
hours: [
|
||||
|
|
@ -328,6 +368,7 @@ export default {
|
|||
xAxisData: [],
|
||||
xAxisData_day: [],
|
||||
xAxisData_month: [],
|
||||
xTtimeRange: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -375,6 +416,21 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
changeDate(){
|
||||
let obj = {};
|
||||
obj.type = "hour";
|
||||
obj.start_time = this.daterange[0];
|
||||
obj.end_time = this.daterange[1];
|
||||
obj.mpoint__in = "3631858394648182784,3631858982832218112,3631858687335112704";
|
||||
obj.page = 0;
|
||||
this.$API.enm.mpoint.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.tableDatas = [];
|
||||
|
|
@ -398,6 +454,8 @@ export default {
|
|||
}else if (that.query.type==2){
|
||||
that.year = that.query.year;
|
||||
that.dataLoop_month();
|
||||
}else if(that.query.type==3){//时间段
|
||||
that.xTtimeRange.push("总计")
|
||||
}
|
||||
let nowDate = new Date();
|
||||
that.timeStamp = nowDate.getTime();
|
||||
|
|
@ -678,6 +736,16 @@ export default {
|
|||
that.option.series[0].data = lineData;
|
||||
this.itemVisible = true;
|
||||
},
|
||||
handleCellClick_range(row, column, cell, event) {
|
||||
let that = this;
|
||||
let index = that.tableDatas_range.indexOf(row);
|
||||
// that.tableName = `${row.nickname}-电量范围统计`
|
||||
//获取图数据
|
||||
// let lineData = that.tableDatas[index].slice(2, 3);
|
||||
// that.option.xAxis.data = that.xAxisData_month;
|
||||
// that.option.series[0].data = lineData;
|
||||
this.itemVisible = true;
|
||||
},
|
||||
exportExcel() {
|
||||
this.exportLoading = true;
|
||||
this.$XLSX("#hourBaseTable", this.tableName);
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@
|
|||
size="small"
|
||||
@click="mpointStat_del(scope.row)"
|
||||
type="danger"
|
||||
v-auth="'mpointstat.delete'"
|
||||
v-auth="'mpointstat.delete_write'"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue