//数据格式
const res = {
"result": 1,
"msg": "操作成功!",
"data": {
"start": 0,
"end": 23,
"list": [{
"back_name": "强电井1层",
"used": 0.03,
"event_hour": 0
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 1
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 2
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 3
}, {
"back_name": "强电井1层",
"used": 0.03,
"event_hour": 4
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 5
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 6
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 7
}, {
"back_name": "强电井1层",
"used": 0.03,
"event_hour": 8
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 9
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 10
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 11
}, {
"back_name": "强电井1层",
"used": 0.03,
"event_hour": 12
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 13
}, {
"back_name": "强电井1层",
"used": 0.00,
"event_hour": 14
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"meter_id": 47603,
"event_hour": 0
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 1
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"meter_id": 47603,
"event_hour": 2
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 3
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 4
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 5
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 6
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 7
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 8
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 9
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 10
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 11
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 12
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 13
}, {
"back_name": "强电井3层2#",
"used": 0.00,
"event_hour": 14
}],
"day": "2022-05-18"
}
}
<el-table :data="tableData" style="width: 100%" height="615" border>
<el-table-column prop="back_name" label="回路名称" width="150" fixed></el-table-column>
<el-table-column label="时间">
<template v-for="i in tableColumns">
<el-table-column :prop="i" :label="i" border></el-table-column>
</template>
</el-table-column>
</el-table>
data(){
return{
tableData: [],
tableColumns: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
backNamelist: []
}
}
getEnergyReportList() {
getEnergyReportList().then(res => {
let nowtableData = res.data.list
this.tableData = this.fn(nowtableData)[0]
this.tableColumns = this.fn(nowtableData)[1]
// console.log(this.tableData)
// console.log(this.tableColumns)
}).catch(err => {
this.tableData = []
})
},
// 拆分数据格式
fn(data) {
const r = []
let t = {}
let headList = []
data.forEach((item, i) => {
t.back_name = item.back_name
t[item.event_hour] = item.used
if (i === data.length - 1 || (i < data.length - 1 && item.back_name !== data[i + 1].back_name)) {
r.push(t)
t = {}
}
})
if (r.length > 0) {
let t = JSON.parse(JSON.stringify(r[0]))
delete t.back_name
headList = Object.keys(t)
}
return [r, headList]
}
// 处理之后的数据格式
处理时间格式