需求：能够根据后端给的数据，导出excel，并且相同车辆合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据需求合并表格</title>
<script src="js/jquery-2.1.0.min.js"></script>
<!-- <script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script> -->
<script type="text/javascript" src="xlsx/xlsx.full.min.js"></script>
</head>
<body>
<script>
let coolTitle = [
'车牌号',
'分区下标',
'硬盘容量',
'硬盘加载状态',
'硬盘DBR状态',
'硬盘FAT状态',
'硬盘录像状态',
'磁盘1容量',
'磁盘1加载状态',
'磁盘1DBR状态',
'磁盘1FAT状态',
'磁盘1录像状态',
'磁盘2容量',
'磁盘2加载状态',
'磁盘2DBR状态',
'磁盘2FAT状态',
'磁盘2录像状态'
];
let deviceDiskStateArray = [
{
deviceId: '18721363239',
diskStateInfoArray: [
{
DiskCapacity: 500107862016,
partitions: 4,
DiskType: 0,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 2,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 3,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 277668662016,
partitions: 2,
DiskType: 1,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 2,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 3,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 788662016,
partitions: 2,
DiskType: 2,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
}
]
}
]
},
{
deviceId: '122334455669',
diskStateInfoArray: [
{
DiskCapacity: 500107862016,
partitions: 4,
DiskType: 0,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 277668662016,
partitions: 2,
DiskType: 1,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
}
]
}
]
}
];
let array = [];
array.push(coolTitle)
deviceDiskStateArray.map(item => {
let arr = [], arr2 = [], arr3 = [], obj = {};
obj.deviceId = item.deviceId;
item.diskStateInfoArray.map(value => {
if (value.DiskType === 0) {
obj.ypRL = toFixed(getGB(value.DiskCapacity), 2) + 'G';
obj.ypLoading = constrAbx(value.MountType, 4);
value.diskPartitionArray.map(node => {
if (node.partitionIndex === 0) {
node.partitionIndex = '0';
}
let ypObj = ['', node.partitionIndex, '', '', constrAbx(node.DBRState, 4), constrAbx(node.FATState, 4), constrAbx(node.INDEXFileState, 4)];
arr.push(ypObj);
});
} else if (value.DiskType === 1) {
obj.s1RL = toFixed(getGB(value.DiskCapacity), 2) + 'G';
obj.s1Loading = constrAbx(value.MountType, 4);
value.diskPartitionArray.map(node => {
if (node.partitionIndex === 0) {
node.partitionIndex = '0';
}
let s1Obj = ['', node.partitionIndex, '', '', constrAbx(node.DBRState, 4), constrAbx(node.FATState, 4), constrAbx(node.INDEXFileState, 4)];
arr2.push(s1Obj);
});
} else if (value.DiskType === 2) {
obj.s2RL = toFixed(getGB(value.DiskCapacity), 2) + 'G';
obj.s2Loading = constrAbx(value.MountType, 4);
value.diskPartitionArray.map(node => {
if (node.partitionIndex === 0) {
node.partitionIndex = '0';
}
let s2Obj = ['', node.partitionIndex, '', '', constrAbx(node.DBRState, 4), constrAbx(node.FATState, 4), constrAbx(node.INDEXFileState, 4)];
arr3.push(s2Obj);
});
}
});
let addD = [[],[],[],[]];
if (arr.length !== 0) {
console.log(arr)
arr.map((value,index) => {
addD[index][0] = obj.deviceId ? obj.deviceId : '';
addD[index][2] = obj.ypRL ? obj.ypRL : '';
addD[index][3] = obj.ypLoading ? obj.ypLoading : '';
addD[index][1] = value[1] ? value[1] : '';
addD[index][4] = value[4] ? value[4] : '';
addD[index][5] = value[5] ? value[5] : '';
addD[index][6] = value[6] ? value[6] : '';
});
}
if (arr2.length !== 0) {
arr2.map((value, index) => {
addD[index][0] = obj.deviceId ? obj.deviceId : '';
addD[index][7] = obj.s1RL ? obj.s1RL : '';
addD[index][8] = obj.s1Loading ? obj.s1Loading : '';
addD[index][1] = value[1] ? value[1] : '';
addD[index][9] = value[4] ? value[4] : '';
addD[index][10] = value[5] ? value[5] : '';
addD[index][11] = value[6] ? value[6] : '';
});
}
if (arr3.length !== 0) {
arr3.map((value, index) => {
addD[index][0] = obj.deviceId ? obj.deviceId : '';
addD[index][12] = obj.s2RL ? obj.s2RL : '';
addD[index][13] = obj.s2Loading ? obj.s2Loading : '';
addD[index][1] = value[1] ? value[1] : '';
addD[index][14] = value[4] ? value[4] : '';
addD[index][15] = value[5] ? value[5] : '';
addD[index][16] = value[6] ? value[6] : '';
});
}
addD.map(item => {
if (item[0] !== undefined) {
array.push(item);
}
});
});
console.log(array);
getTableXlsx(array, 'diskInfo.xlsx');
// 导出xlsx
function getTableXlsx(aoa, filename) {
let colData = aoa[0][0];
var countedNames = aoa.reduce((obj, name) => {
if (name[0] != colData) {
if (name[0] in obj) {
obj[name[0]]++
} else {
obj[name[0]] = 1
}
}
return obj
}, {})
console.log(countedNames)
let number = [];
Object.keys(countedNames).forEach((key) => {
number.push(countedNames[key])
})
console.log(number);
let merges = [];
let ac = 0;
for (let i = 0; i < number.length; i++) {
let a = number[i], b = 0, c = 1, d = 0;
if (i == 0) {
let obj = { s: { c: 0, r: c }, e: { c: 0, r: a + b } };
merges.push(obj)
}
if (i !== number.length - 1) {
d = number[i + 1];
if (i == 0) {
ac += a + 1;
let obj = { s: { c: 0, r: ac }, e: { c: 0, r: ac + d - 1 } };
merges.push(obj)
} else {
ac += a;
let obj = { s: { c: 0, r: ac }, e: { c: 0, r: ac + d - 1 } };
merges.push(obj)
}
}
}
console.log(merges)
var sheet = XLSX.utils.aoa_to_sheet(aoa);
sheet['!merges'] = merges;
openDownloadDialog(sheet2blob(sheet), filename);
}
// 下载重点
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0,
null);
}
aLink.dispatchEvent(event);
}
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet;
// 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
});
// 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
// 时间默认值
function getDateInfo(number) {
let date = new Date();
let year = date.getFullYear();
let month = byZero(date.getMonth(), 1);
let day = byZero(date.getDate());
let hour = byZero(date.getHours());
let minute = byZero(date.getMinutes());
let second = byZero(date.getSeconds());
if (number === 1) {
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
}
// 时间默认值加零
function byZero(number, type) {
if (number >= 10) {
return number;
} else {
if (type === 1) {
number = number + 1;
return '0' + number;
} else {
return '0' + number;
}
}
}
// 转换
function constrAbx(num, number) {
if (number === 4) {
if (num === 0) {
return '正常';
} else if (num === 1) {
return '异常';
} else if (num === 2) {
return '不一致';
}
}
}
// 小数点
function toFixed(number, n) {
let numberStr = number + "";
let reg = /^(-|\+)?(\d+(\.\d*)?|\.\d+)$/i;
if (!reg.test(numberStr)) {
alert('输⼊的数字格式不对');
return;
}
let sign = numberStr.charAt(0) === '-' ? (numberStr = numberStr.slice(1), -1) : 1; // 判断是否是负数
let pointIndex = numberStr.indexOf("."); // 记录⼩数点的位置
if (pointIndex > -1) {
numberStr = numberStr.replace(".", "");
} else { // 没有⼩数点直接添加补0；
numberStr += ".";
numberStr += new Array(n).join('0');
return numberStr;
}
let numberArray = numberStr.split(""); //转成数组
let len = numberArray.length;
let oldPointNum = len - pointIndex; // 获取原数据有多少位⼩数
if (oldPointNum < n) { // 要保留的⼩数点⽐原来的要⼤，直接补0
while (n - oldPointNum > 0) {
numberArray.push(0);
n--;
}
} else if (oldPointNum > n) { // 模拟四舍五⼊
let i = oldPointNum - n; // 从倒数第i个数字开始⽐较
let more = numberArray[len - i] >= 5 ? true : false;
while (more) {
i++;
more = +numberArray[len - i] + 1 === 10 ? true : false; // 进位后判断是否等于10，是则继续进位
numberArray[len - i] = more && i !== (len + 1) ? 0 : +numberArray[len - i] + 1; // 其他位置的数字进位直接变成0，第⼀位的例外
}
numberArray.length = len - (oldPointNum - n); // 截取多余的⼩数
}
numberArray.splice(pointIndex, 0, ".");
return sign === -1 ? '-' + numberArray.join("") : numberArray.join("");
};
// KB转换成GB
function getGB(number) {
return number / 1024 / 1024 / 1024;
}
</script>
</body>
</html>走到这一步遇到的一些帮助：
纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例：https://www.jianshu.com/p/74d405940305
如果不知道该怎么去自定义合并列或合并行，可以参考下面代码：
js-xlsx导出自定义合并列头实现思路：https://www.jianshu.com/p/9a465d7d1448
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="xlsx/xlsx.core.min.js"></script> </head> <body> <input type="file" onchange="importf(this)" /> <div id="demo"></div> <script> var WB; var rABS = true; //是否将文件读取为二进制字符串 function importf(obj) {//导入 if (!obj.files) { return; } var f = obj.files[0]; { var reader = new FileReader(); var name = f.name; reader.onload = function (e) { var data = e.target.result; WB = XLSX.read(data, { type: 'binary' }); document.getElementById("demo").innerHTML = JSON.stringify(WB.Sheets[WB.SheetNames[0]]); }; if (rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f); } } </script> </body> </html>
摘自文章：js利用sheetjs生成excel并导出_QingHan_wow的博客-CSDN博客_sheetjs 导出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script> </head> <body> <script> var aoa = [ ['姓名', '性别', '年龄', '注册时间'], ['张三', '男', 18, new Date()], ['张三', '男', 18, new Date()], ['张三', '男', 18, new Date()], ['李四', '女', 22, new Date()], ['李四', '女', 22, new Date()], ['李四', '女', 22, new Date()], ['李四', '女', 22, new Date()], ['王五', '男', 22, new Date()], ['王五', '男', 22, new Date()], ['老六', '女', 22, new Date()], ['老六', '女', 22, new Date()], ['老六', '女', 22, new Date()] ]; var countedNames = aoa.reduce((obj, name) => { if (name[0] != '姓名') { if (name[0] in obj) { obj[name[0]]++ } else { obj[name[0]] = 1 } } return obj }, {}) console.log(countedNames) let number = []; Object.keys(countedNames).forEach((key) => { number.push(countedNames[key]) }) console.log(number); let merges = []; let ac = 0; for (let i = 0; i < number.length; i++) { let a = number[i], b = 0, c = 1, d = 0; if (i == 0) { let obj = { s: { c: 0, r: c }, e: { c: 0, r: a + b } }; merges.push(obj) } if (i !== number.length - 1) { d = number[i + 1]; if (i == 0) { ac += a + 1; let obj = { s: { c: 0, r: ac }, e: { c: 0, r: ac + d - 1 } }; merges.push(obj) } else { ac += a; let obj = { s: { c: 0, r: ac }, e: { c: 0, r: ac + d - 1 } }; merges.push(obj) } } } var sheet = XLSX.utils.aoa_to_sheet(aoa); sheet['!merges'] = merges; openDownloadDialog(sheet2blob(sheet), '导出.xlsx'); function openDownloadDialog(url, saveName) { if (typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 创建blob地址 } var aLink = document.createElement('a'); aLink.href = url; aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效 var event; if (window.MouseEvent) event = new MouseEvent('click'); else { event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } aLink.dispatchEvent(event); } // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载 function sheet2blob(sheet, sheetName) { sheetName = sheetName || 'sheet1'; var workbook = { SheetNames: [sheetName], Sheets: {} }; workbook.Sheets[sheetName] = sheet; // 生成excel的配置项 var wopts = { bookType: 'xlsx', // 要生成的文件类型 bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性 type: 'binary' }; var wbout = XLSX.write(workbook, wopts); var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" }); // 字符串转ArrayBuffer function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } return blob; } </script> </body> </html>
再此也保留一下查到的一些资料：
这种应该只能导出不能变的和数据，像合并单元格这种应该不支持，如果有的话，可以一起交流下。感谢！
<html>
<head>
<p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
<button onclick='tableToExcel()'>导出</button>
</head>
<body>
<script>
const tableToExcel = () => {
// 要导出的json数据
const jsonData = [
{
name:'路人甲',
phone:'123456789',
email:'[email protected]'
},
{
name:'炮灰乙',
phone:'123456789',
email:'[email protected]'
},
{
name:'土匪丙',
phone:'123456789',
email:'[email protected]'
},
{
name:'流氓丁',
phone:'123456789',
email:'[email protected]'
},
];
// 列标题，逗号隔开，每一个逗号就是隔开一个单元格
let str = `姓名\t电话\t邮箱\n`;
// 增加\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(const key in jsonData[i]){
str+=`${jsonData[i][key] + '\t'}`;
}
str+='\n';
}
console.log(str)
// encodeURIComponent解决中文乱码
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
// 通过创建a标签实现
const link = document.createElement("a");
link.href = uri;
// 对下载的文件命名
link.download = "json数据表.xlsx";
link.click();
}
</script>
</body>
</html>如果单纯导出数据，和layui合作，也可，只是我暂时不知道如何合并单元格
以下是代码，中间有个我对时间循环的解决办法，就一起放着保存吧
导出JS文件在这里可直接下载：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- layui -->
<link rel="stylesheet" href="layui/css/layui_base.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="xlsx/xlsx.js"></script>
<script src="xlsx/dom.js"></script>
<script src="xlsx/xlsx.core.min.js"></script>
<title>Document</title>
</head>
<body>
<button type="button" class="layui-btn" id="daochu" onclick="exportData()">导出</button>
<table class="layui-table" lay-filter="videoTable" id="videoTable"></table>
<script>
let table, layer;
let videoData = [];
let colsListFalse = [
{ field: 'deviceId', title: '车牌号', align: 'center' },
{ field: 'partitionIndex', title: '分区下标', align: 'center' },
{ field: 'ypRL', title: '硬盘容量', align: 'center' },
{ field: 'ypLoading', title: '硬盘加载状态', align: 'center' },
{ field: 'ypDBRState', title: '硬盘DBR状态', align: 'center' },
{ field: 'ypFATState', title: '硬盘FAT状态', align: 'center' },
{ field: 'ypINDEXFileState', title: '硬盘录像状态', align: 'center' },
{ field: 's1RL', title: '磁盘1容量', align: 'center' },
{ field: 's1Loading', title: '磁盘1加载状态', align: 'center' },
{ field: 's1DBRState', title: '磁盘1DBR状态', align: 'center' },
{ field: 's1FATState', title: '磁盘1FAT状态', align: 'center' },
{ field: 's1INDEXFileState', title: '磁盘1录像状态', align: 'center' },
{ field: 's2RL', title: '磁盘2容量', align: 'center' },
{ field: 's2Loading', title: '磁盘2加载状态', align: 'center' },
{ field: 's2DBRState', title: '磁盘2DBR状态', align: 'center' },
{ field: 's2FATState', title: '磁盘2FAT状态', align: 'center' },
{ field: 's2INDEXFileState', title: '磁盘2录像状态', align: 'center' }
];
let deviceDiskStateArray = [
{
deviceId: '18721363239',
diskStateInfoArray: [
{
DiskCapacity: 500107862016,
partitions: 4,
DiskType: 0,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 2,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 3,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 277668662016,
partitions: 2,
DiskType: 1,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 2,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 3,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 788662016,
partitions: 2,
DiskType: 2,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
}
]
}
]
},
{
deviceId: '122334455669',
diskStateInfoArray: [
{
DiskCapacity: 500107862016,
partitions: 4,
DiskType: 0,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 277668662016,
partitions: 2,
DiskType: 1,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
}
]
}
]
}
,
{
deviceId: '18721363239',
diskStateInfoArray: [
{
DiskCapacity: 500107862016,
partitions: 4,
DiskType: 0,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 2,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 277668662016,
partitions: 2,
DiskType: 1,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 2,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 788662016,
partitions: 2,
DiskType: 2,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
}
]
}
]
},
{
deviceId: '122334455669',
diskStateInfoArray: [
{
DiskCapacity: 500107862016,
partitions: 4,
DiskType: 0,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
},
{
FATState: 0,
partitionIndex: 1,
DBRState: 0,
INDEXFileState: 0
}
]
},
{
DiskCapacity: 277668662016,
partitions: 2,
DiskType: 1,
MountType: 0,
diskPartitionArray: [
{
FATState: 1,
partitionIndex: 0,
DBRState: 0,
INDEXFileState: 0
}
]
}
]
}
];
layui.use('layer', function () {
layer = layui.layer;
render();
});
exportArr();
// 表格
function render() {
layui.use('table', function () {
table = layui.table;
table.render({
elem: '#videoTable',
data: videoData,
height: '410',
width: '100%',
defaultToolbar: [],
cellMinWidth: 100,
cols: [colsListFalse],
page: true, //是否显示分页
limits: [10, 100, 1000, 2000],
page: {
count: videoData.length,
prev: '上一页',
next: '下一页',
layout: ['prev', 'page', 'next', 'count']
},
done: function (res, curr, count) {
mergeRows(res)
}
});
});
}
// 展示数据在表格
function exportArr() {
let array = [];
deviceDiskStateArray.map(item => {
let arr = [], arr2 = [], arr3 = [], obj = {};
obj.deviceId = item.deviceId;
item.diskStateInfoArray.map(value => {
if (value.DiskType === 0) {
obj.ypRL = toFixed(getGB(value.DiskCapacity), 2) + 'G';
obj.ypLoading = constrAbx(value.MountType, 4);
value.diskPartitionArray.map(node => {
if (node.partitionIndex === 0) {
node.partitionIndex = '0';
}
let ypObj = {
partitionIndex: node.partitionIndex,
ypDBRState: constrAbx(node.DBRState, 4),
ypFATState: constrAbx(node.FATState, 4),
ypINDEXFileState: constrAbx(node.INDEXFileState, 4)
}
arr.push(ypObj);
});
} else if (value.DiskType === 1) {
obj.s1RL = toFixed(getGB(value.DiskCapacity), 2) + 'G';
obj.s1Loading = constrAbx(value.MountType, 4);
value.diskPartitionArray.map(node => {
if (node.partitionIndex === 0) {
node.partitionIndex = '0';
}
let s1Obj = {
partitionIndex: node.partitionIndex,
s1DBRState: constrAbx(node.DBRState, 4),
s1FATState: constrAbx(node.FATState, 4),
s1INDEXFileState: constrAbx(node.INDEXFileState, 4)
}
arr2.push(s1Obj);
});
} else if (value.DiskType === 2) {
obj.s2RL = toFixed(getGB(value.DiskCapacity), 2) + 'G';
obj.s2Loading = constrAbx(value.MountType, 4);
value.diskPartitionArray.map(node => {
if (node.partitionIndex === 0) {
node.partitionIndex = '0';
}
let s2Obj = {
partitionIndex: node.partitionIndex,
s2DBRState: constrAbx(node.DBRState, 4),
s2FATState: constrAbx(node.FATState, 4),
s2INDEXFileState: constrAbx(node.INDEXFileState, 4)
}
arr3.push(s2Obj);
});
}
});
let stubborn = [{}, {}, {}, {}];
if (arr.length !== 0) {
arr.map((value, index) => {
let obj2 = {};
obj2.ypRL = obj.ypRL;
obj2.deviceId = obj.deviceId;
obj2.ypLoading = obj.ypLoading;
obj2.partitionIndex = value.partitionIndex;
obj2.ypDBRState = value.ypDBRState;
obj2.ypFATState = value.ypFATState;
obj2.ypINDEXFileState = value.ypINDEXFileState;
stubborn[index] = obj2;
});
}
if (arr2.length !== 0) {
arr2.map((value, index) => {
let obj2 = {};
obj2.s1RL = obj.s1RL;
obj2.deviceId = obj.deviceId;
obj2.s1Loading = obj.s1Loading;
obj2.partitionIndex = value.partitionIndex;
obj2.s1DBRState = value.s1DBRState;
obj2.s1FATState = value.s1FATState;
obj2.s1INDEXFileState = value.s1INDEXFileState;
Object.assign(stubborn[index], obj2)
});
}
if (arr3.length !== 0) {
arr3.map((value, index) => {
let obj2 = {};
obj2.s2RL = obj.s2RL;
obj2.deviceId = obj.deviceId;
obj2.s2Loading = obj.s2Loading;
obj2.partitionIndex = value.partitionIndex;
obj2.s2DBRState = value.s2DBRState;
obj2.s2FATState = value.s2FATState;
obj2.s2INDEXFileState = value.s2INDEXFileState;
Object.assign(stubborn[index], obj2)
});
}
stubborn.map(item => {
if (item.deviceId != undefined) {
array.push(item)
}
})
});
videoData = array;
render();
}
// 导出
function exportData() {
let arr5 = [], arrField = [];
colsListFalse.map((item, index) => {
arr5.push(item.title);
arrField.push(item.field);
});
if (videoData.length > 0) {
let dataLists = PlExportExcel.formatJson(arrField, videoData);
PlExportExcel.exportJsonToExcel({
header: arr5,
data: dataLists,
filename: 'diskInfo_' + getDateInfo(1),
autoWidth: true,
bookType: 'xlsx'
});
} else {
layer.open({
title: '提示',
content: '无数据'
});
}
}
// 这里是从别人那里拷贝来的代码
function mergeRows(res) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
// var columsName = ['deviceId', 'ypRL', 'ypLoading', 's1RL', 's1Loading', 's2RL', 's2Loading'];//需要合并的列名称
var columsName = ['deviceId'];//需要合并的列名称
// var columsIndex = [0, 2, 3, 7, 8, 12, 13];//需要合并的列索引值
var columsIndex = [0];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $('div[lay-id="videoTable"] .layui-table-body>.layui-table').find("tr");//所有行，如果页面多个表格，这里一定要定位到你所要合并的表格
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function () {//当前行隐藏
$(this).css("display", "none");
});
} else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
}
}
mergeIndex = 0;
mark = 1;
}
}
// 时间默认值
function getDateInfo(number) {
let date = new Date();
let year = date.getFullYear();
let month = byZero(date.getMonth(), 1);
let day = byZero(date.getDate());
let hour = byZero(date.getHours());
let minute = byZero(date.getMinutes());
let second = byZero(date.getSeconds());
// date = formatTimebytype(date, 'yyyy-MM-dd');//将日期转换成yyyy-mm-dd格式
var date2 = new Date(date.getFullYear(), 0, 1);
var day1 = date.getDay();
if (day1 == 0) day1 = 7;
var day2 = date2.getDay();
if (day2 == 0) day2 = 7;
let d = Math.round((date.getTime() - date2.getTime() + (day2 - day1) * (24 * 60 * 60 * 1000)) / 86400000);
//当周数大于52则为下一年的第一周
if ((Math.ceil(d / 7) + 1) > 52) {
return (date.getFullYear() + 1) + "第1周"
}
if (number === 1) {
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
} else if (number === 2) {
return year + '-' + Number(month - 1) + ' - ' + year + '-' + month;
} else if (number === 3) {
return Math.ceil(d / 7) + 1;
} else if (number === 4) {
return year;
} else if (number === 5) {
return year + '-' + month + '-' + day + ' ' + '00:00:00';
} else if (number === 6) {
return year + '-' + month + '-' + day + ' ' + (hour - 1) + ':' + minute + ':' + second;
}
}
// 时间默认值加零
function byZero(number, type) {
if (number >= 10) {
return number;
} else {
if (type === 1) {
number = number + 1;
return '0' + number;
} else {
return '0' + number;
}
}
}
// 转换
function constrAbx(num, number) {
if (number === 4) {
if (num === 0) {
return '正常';
} else if (num === 1) {
return '异常';
} else if (num === 2) {
return '不一致';
}
}
}
// 小数点
function toFixed(number, n) {
let numberStr = number + "";
let reg = /^(-|\+)?(\d+(\.\d*)?|\.\d+)$/i;
if (!reg.test(numberStr)) {
alert('输⼊的数字格式不对');
return;
}
let sign = numberStr.charAt(0) === '-' ? (numberStr = numberStr.slice(1), -1) : 1; // 判断是否是负数
let pointIndex = numberStr.indexOf("."); // 记录⼩数点的位置
if (pointIndex > -1) {
numberStr = numberStr.replace(".", "");
} else { // 没有⼩数点直接添加补0；
numberStr += ".";
numberStr += new Array(n).join('0');
return numberStr;
}
let numberArray = numberStr.split(""); //转成数组
let len = numberArray.length;
let oldPointNum = len - pointIndex; // 获取原数据有多少位⼩数
if (oldPointNum < n) { // 要保留的⼩数点⽐原来的要⼤，直接补0
while (n - oldPointNum > 0) {
numberArray.push(0);
n--;
}
} else if (oldPointNum > n) { // 模拟四舍五⼊
let i = oldPointNum - n; // 从倒数第i个数字开始⽐较
let more = numberArray[len - i] >= 5 ? true : false;
while (more) {
i++;
more = +numberArray[len - i] + 1 === 10 ? true : false; // 进位后判断是否等于10，是则继续进位
numberArray[len - i] = more && i !== (len + 1) ? 0 : +numberArray[len - i] + 1; // 其他位置的数字进位直接变成0，第⼀位的例外
}
numberArray.length = len - (oldPointNum - n); // 截取多余的⼩数
}
numberArray.splice(pointIndex, 0, ".");
return sign === -1 ? '-' + numberArray.join("") : numberArray.join("");
};
function getGB(number) {
return number / 1024 / 1024 / 1024;
}
</script>
<script>
layui.use('layer', function () {
let layer = layui.layer;
let mediaFileLists = [
{
DeviceVideoFrame: 1977.5,
SysConfigFrame: 3709,
alarmType: [],
avType: 9,
endTime: "2022-08-04 11:04:42",
logicalChannel: 1,
startTime: "2022-08-04 08:07:26",
storeType: 1,
streamType: 1
},
{
DeviceVideoFrame: 281.5,
SysConfigFrame: 4077,
alarmType: [],
avType: 9,
endTime: "2022-08-04 08:07:26",
logicalChannel: 1,
startTime: "2022-08-04 04:52:47",
storeType: 1,
streamType: 1
},
{
DeviceVideoFrame: 3847.5,
SysConfigFrame: 3600,
alarmType: [],
avType: 9,
endTime: "2022-08-04 04:52:47",
logicalChannel: 1,
startTime: "2022-08-04 02:00:56",
storeType: 1,
streamType: 1
},
{
DeviceVideoFrame: 2694.3,
SysConfigFrame: 476,
alarmType: [],
avType: 9,
endTime: "2022-08-04 02:00:02",
logicalChannel: 1,
startTime: "2022-08-04 01:37:23",
storeType: 1,
streamType: 1
},
{
DeviceVideoFrame: 3361.7,
SysConfigFrame: 2039,
alarmType: [],
avType: 9,
endTime: "2022-08-04 01:37:23",
logicalChannel: 1,
startTime: "2022-08-04 00:00:00",
storeType: 1,
streamType: 1
}
];
console.log(mediaFileLists);
let arr = [];
for (let i = 0; i < mediaFileLists.length; i++) {
let a = mediaFileLists[i];
if (a !== mediaFileLists[mediaFileLists.length - 1]) {
let b = mediaFileLists[i + 1];
console.log(a.startTime + ' ' + a.endTime)
console.log(a.startTime, ' hhh ', b.endTime)
if (a.startTime !== b.endTime) {
arr.push('通道' + b.logicalChannel + '的 结束时间为： ' + b.endTime + ' 时间段丢帧');
}
}
}
console.log(arr)
layer.msg(arr.toString(), {
icon: 2,
time: false,
closeBtn: 1,
offset: [$(window).height() - 100, $(window).width() / 2.5]
});
});
</script>
</body>
</html>