* {
border:0;
padding:0px;
margin:0px;
}
table {
height: 600px;
}
table th {
min-height: 30px;
min-width:30px;
}
table th td {
min-height: 30px;
min-width:30px;
}
table,th,td,button {
border: 1px solid black;
}
button {
padding: 5px;
margin: 0px 0px 5px 420px;
}
var arr = [
{
"xian": "简阳市",
"reservoirName": "棉丰",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P1-1"
],
"sTime": [
"2023-07-20T17:12:23"
]
},
{
"xian": "金堂县",
"reservoirName": "油房堰",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P2-1"
],
"sTime": [
"2023-07-20T17:12:34"
]
},
{
"xian": "大邑县",
"reservoirName": "七一",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P2-2"
],
"sTime": [
"2023-07-20T15:04:55"
]
},
{
"xian": "蒲江县",
"reservoirName": "庙峰",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P4-3"
],
"sTime": [
"2023-07-19T12:48:57"
]
},
{
"xian": "蒲江县",
"reservoirName": "凉风岭",
"stateName": "error",
"state": 2,
"devName": "监测",
"sName": [
"P6-2",
"P5-4"
],
"sTime": [
"2023-07-19T12:48:57",
"2023-07-19T12:48:57"
]
},
{
"xian": "简阳市",
"reservoirName": "连山",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P3-1"
],
"sTime": [
"2023-07-16T15:46:35"
]
},
{
"xian": "金堂县",
"reservoirName": "红旗",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P2-2"
],
"sTime": [
"2023-07-20T17:06:28"
]
},
{
"xian": "金堂县",
"reservoirName": "黄鹤",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P2-1"
],
"sTime": [
"2023-07-20T17:12:25"
]
},
{
"xian": "金堂县",
"reservoirName": "油房堰",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P4-4"
],
"sTime": [
"2023-07-20T17:12:34"
]
},
{
"xian": "金堂县",
"reservoirName": "磙子坝",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P6-6"
],
"sTime": [
"2023-07-20T11:09:35"
]
},
{
"xian": "金堂县",
"reservoirName": "黄鹤",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P7-1"
],
"sTime": [
"2023-07-20T17:12:25"
]
},
{
"xian": "东部新区",
"reservoirName": "五龙",
"stateName": "error",
"state": 2,
"devName": "监测",
"sName": [
"P4-4",
"P3-2"
],
"sTime": [
"2023-06-28T11:06:17",
"2023-06-28T11:01:02"
]
},
{
"xian": "东部新区",
"reservoirName": "前进",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P7-7"
],
"sTime": [
"2023-07-20T17:11:03"
]
},
{
"xian": "简阳市",
"reservoirName": "飞凤",
"stateName": "error",
"state": 1,
"devName": "监测",
"sName": [
"P3-3"
],
"sTime": [
"2023-07-20T17:12:43"
]
}
]
var stateNum = 0
var rowNum = arr.length
var dName = arr[0].devName
for(var i=0,j=arr.length;i<j;i++) {
stateNum += arr[i].state
}
var tb = document.getElementById('table')
arr.reduce((acc, item) => {
if (acc[item.xian]) {
acc[item.xian].push(item);
} else {
acc[item.xian] = [item];
}
// 将数据按照 区县市 整理好 传入 dt中
return arr = acc;
}, {});
var rnArr = Object.keys(arr)
var table = '<table border="1" cellspacing="0"><thead><tr><th>类型</th><th>区县</th><th>地点</th><th>数量</th><th>设备名称</th><th>最后在线时间</th></tr></thead><tbody>'
table += `<tr><td rowspan="${stateNum}">${dName}(${stateNum})</td></tr>`
rnArr.forEach(rN=>{
for(var i=0,j=arr[rN].length;i<j;i++) {
if(i==0){
var add = 0
arr[rN].forEach(nu=>{
add += nu.state
})
table += `<tr><td rowspan="${j}">${rN}(${add})</td><td>${arr[rN][i].reservoirName}</td><td>${arr[rN][i].state}</td>`
if(arr[rN][i].sName.length == 1) {
table += `<td>${arr[rN][i].sName[0]}</td>`
} else {
var stateAndTime = ''
for(var k = 0; k < arr[rN][i].sName.length; k++) {
// if(k>0) {
// stateAndTime += '</br>'
// }
stateAndTime += `<div>${arr[rN][i].sName[k]}</div>`
}
table += `<td>${stateAndTime}</td>`
}
if(arr[rN][i].sTime.length == 1) {
table += `<td>${arr[rN][i].sTime[0].replace("T"," ")}</td></tr>`
} else {
var stateAndTime = ''
for(var k = 0; k < arr[rN][i].sTime.length; k++) {
// if(k>0) {
// stateAndTime += '</br>'
// }
stateAndTime += `<div>${arr[rN][i].sTime[k].replace("T"," ")}</div>`
}
table += `<td>${stateAndTime}</td></tr>`
}
}else{
table += `<tr><td>${arr[rN][i].reservoirName}</td><td>${arr[rN][i].state}</td>`
if(arr[rN][i].sName.length == 1) {
table += `<td>${arr[rN][i].sName[0]}</td>`
} else {
var stateAndTime = ''
for(var k = 0; k < arr[rN][i].sName.length; k++) {
// if(k>0) {
// stateAndTime += '</br>'
// }
stateAndTime += `<div>${arr[rN][i].sName[k]}</div>`
}
table += `<td>${stateAndTime}</td>`
}
if(arr[rN][i].sTime.length == 1) {
table += `<td>${arr[rN][i].sTime[0].replace("T"," ")}</td></tr>`
} else {
var stateAndTime = ''
for(var k = 0; k < arr[rN][i].sTime.length; k++) {
// if(k>0) {
// stateAndTime += '</br>'
// }
stateAndTime += `<div>${arr[rN][i].sTime[k].replace("T"," ")}</div>`
}
table += `<td>${stateAndTime}</td></tr>`
}
}
}
})
table += '</tbody></table>'
tb.innerHTML = table
console.log(arr);
// 导出Excel
function leadingOutExcel(html) {
const uri = 'data:text/xls;charset=utf-8,\ufeff' + encodeURIComponent(html);
const link = document.createElement("a");
link.href = uri;
link.download = "Data.xls";
link.click();
}
let btn = document.getElementById('eExcel')
btn.onclick = function() {
leadingOutExcel(table)
}
