1. 新增 监控中心 - 环境监测 - 历史数据 导出功能
2. 新增 监控中心 - 环境监测 - 平均数据 导出功能 3. 修改 分组管理 左侧树图表
This commit is contained in:
210
hx-ai-intelligent/src/util/ExcelUtil.js
Normal file
210
hx-ai-intelligent/src/util/ExcelUtil.js
Normal file
@@ -0,0 +1,210 @@
|
||||
/* eslint-disable */
|
||||
/** 导出Excel需要依赖
|
||||
* npm install xlsx file-saver -S
|
||||
* npm install script-loader -S -D
|
||||
*/
|
||||
|
||||
import ExcelJS from 'exceljs';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
// export default exportExcel;
|
||||
|
||||
// 导出excel文件
|
||||
export function exportExcel (tableColumns,data,fillName,isMerge,start,end) {
|
||||
if (!data || data.length == 0) {
|
||||
return;
|
||||
}
|
||||
// 创建工作簿
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
// 添加工作表,名为sheet1
|
||||
const sheet1 = workbook.addWorksheet('sheet1');
|
||||
|
||||
// 导出的表头名
|
||||
let tHeader = ['序号'];
|
||||
// 字段名
|
||||
let filterVal = ['index'];
|
||||
// 表格columns
|
||||
let columns = [{ header: '序号', key: 'index', width: 10 }];
|
||||
for (let i = 0; i < tableColumns.length; i++) {
|
||||
if (tableColumns[i].dataIndex) {
|
||||
tHeader.push(tableColumns[i].title);
|
||||
filterVal.push(tableColumns[i].dataIndex);
|
||||
|
||||
columns.push({
|
||||
header: tableColumns[i].title,
|
||||
key: tableColumns[i].dataIndex,
|
||||
width: tableColumns[i].width / 5,
|
||||
});
|
||||
}
|
||||
}
|
||||
//传入的数据
|
||||
const list = data;
|
||||
|
||||
const datas = formatJson(filterVal, list);
|
||||
|
||||
// // 导出数据列表
|
||||
// const data = [
|
||||
// { 姓名: '张三', 年龄: 18, 身高: 175, 体重: 74 },
|
||||
// { 姓名: '李四', 年龄: 22, 身高: 177, 体重: 84 },
|
||||
// { 姓名: '王五', 年龄: 53, 身高: 155, 体重: 64 },
|
||||
// ];
|
||||
// 获取表头所有键
|
||||
// const headers = Object.keys(data[0]);
|
||||
|
||||
sheet1.columns = columns;
|
||||
// // 将标题写入第一行
|
||||
// sheet1.addRow(tHeader);
|
||||
// 将数据写入工作表
|
||||
datas.forEach((row) => {
|
||||
// const values = Object.values(row);
|
||||
sheet1.addRow(row);
|
||||
});
|
||||
|
||||
// 判断是否合并单元格
|
||||
if (isMerge) {
|
||||
debugger
|
||||
// 遍历列,从第一列到 end 列
|
||||
for (let col = start; col <= end; col++) {
|
||||
// let mergeStartRow = 2; // 每次新列开始时,重置起始行
|
||||
for (let row = 3; row <= datas.length + 1; row++) {
|
||||
const currentCellValue = sheet1.getCell(row, col).value;
|
||||
const previousCellValue = sheet1.getCell(row - 1, col).value;
|
||||
|
||||
let currentCellValue_1 = ''
|
||||
let previousCellValue_1 = ''
|
||||
if (col > 1) {
|
||||
currentCellValue_1 = sheet1.getCell(row, col-1).value;
|
||||
previousCellValue_1 = sheet1.getCell(row - 1, col-1).value;
|
||||
}
|
||||
|
||||
if (currentCellValue === previousCellValue && currentCellValue_1 === previousCellValue_1) {
|
||||
// 当前列有变化,检查是否需要合并前面的单元格
|
||||
// if (mergeStartRow < row - 1) {
|
||||
// 只有在前面的行有超过1个时才合并
|
||||
sheet1.mergeCells(row, col, row - 1, col);
|
||||
// }
|
||||
// 更新起始行
|
||||
// mergeStartRow = row;
|
||||
}
|
||||
|
||||
// // 如果是最后一行,检查是否需要合并
|
||||
// if (row === datas.length + 1 && mergeStartRow < row) {
|
||||
// sheet1.mergeCells(mergeStartRow, col, row, col);
|
||||
// }
|
||||
}
|
||||
}
|
||||
// 从第一列开始逐列检查,前提是前面的列已合并
|
||||
// for (let col = start; col <= end; col++) {
|
||||
// let startRow = 2; // 从数据开始的第二行开始检查
|
||||
// let endRow = 2;
|
||||
|
||||
// while (endRow <= sheet1.rowCount) {
|
||||
// let currentValue = sheet1.getCell(endRow, col).value;
|
||||
// let prevValue = sheet1.getCell(endRow - 1, col).value;
|
||||
|
||||
// // 如果当前值等于前一个值,且前面的列是合并的,则继续合并
|
||||
// if (currentValue === prevValue) {
|
||||
// let mergeAllowed = true;
|
||||
// for (let prevCol = 1; prevCol < col; prevCol++) {
|
||||
// let range = sheet1.getCell(endRow - 1, prevCol).master;
|
||||
// if (range && range.row !== startRow) {
|
||||
// mergeAllowed = false;
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (mergeAllowed) {
|
||||
// endRow++;
|
||||
// } else {
|
||||
// // 不允许合并,直接移动起始行到当前行
|
||||
// startRow = endRow;
|
||||
// endRow++;
|
||||
// }
|
||||
// } else {
|
||||
// // 当前值不等于前一个值或合并不允许,进行合并操作
|
||||
// if (startRow < endRow - 1) {
|
||||
// sheet1.mergeCells(startRow, col, endRow - 1, col);
|
||||
// }
|
||||
// startRow = endRow;
|
||||
// endRow++;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 处理最后一段相同的单元格
|
||||
// if (startRow < endRow - 1) {
|
||||
// sheet1.mergeCells(startRow, col, endRow - 1, col);
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 修改所有单元格样式
|
||||
// 遍历每一行
|
||||
sheet1.eachRow((row, rowNumber) => {
|
||||
// 遍历每个单元格
|
||||
row.eachCell((cell) => {
|
||||
// 设置边框样式
|
||||
cell.border = {
|
||||
top: { style: 'thin' },
|
||||
left: { style: 'thin' },
|
||||
bottom: { style: 'thin' },
|
||||
right: { style: 'thin' },
|
||||
};
|
||||
// 设置居中对齐
|
||||
cell.alignment = {
|
||||
vertical: 'middle',
|
||||
horizontal: 'center',
|
||||
};
|
||||
});
|
||||
});
|
||||
// 获取标题行数据
|
||||
const titleCell = sheet1.getRow(1);
|
||||
// 设置行高为30
|
||||
titleCell.height = 30;
|
||||
// 设置标题行单元格样式
|
||||
titleCell.eachCell((cell) => {
|
||||
// 设置标题行背景颜色为黄色
|
||||
cell.fill = {
|
||||
type: 'pattern',
|
||||
pattern: 'solid',
|
||||
fgColor: { argb: 'FFFFFF' },
|
||||
};
|
||||
// 设置标题行字体
|
||||
cell.font = {
|
||||
// color: { argb: 'FF0000' }, //颜色为红色
|
||||
bold: true, // 字体粗体
|
||||
size: 18, // 设置字体大小为18
|
||||
};
|
||||
});
|
||||
// 获取第二行到最后一行的内容数据
|
||||
const bodyRows = sheet1.getRows(2, sheet1.rowCount);
|
||||
// 处理内容行的数据
|
||||
bodyRows.forEach((bodyRow) => {
|
||||
// 设置行高为20
|
||||
bodyRow.height = 20;
|
||||
bodyRow.eachCell((cell) => {
|
||||
cell.font = {
|
||||
size: 16, // 设置内容行字体大小为16
|
||||
};
|
||||
});
|
||||
});
|
||||
// 导出表格文件
|
||||
workbook.xlsx
|
||||
.writeBuffer()
|
||||
.then((buffer) => {
|
||||
let file = new Blob([buffer], { type: 'application/octet-stream' });
|
||||
FileSaver.saveAs(file, fillName + '.xlsx');
|
||||
})
|
||||
.catch((error) => console.log('Error writing excel export', error));
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化表格数据
|
||||
* @filterVal 格式头
|
||||
* @jsonData 用来格式化的表格数据
|
||||
*/
|
||||
function formatJson (filterVal, jsonData) {
|
||||
return jsonData.map((v) => filterVal.map((j) => v[j]));
|
||||
};
|
||||
|
@@ -1,220 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import { saveAs } from 'file-saver'
|
||||
import XLSX from 'xlsx'
|
||||
|
||||
function generateArray(table) {
|
||||
var out = [];
|
||||
var rows = table.querySelectorAll('tr');
|
||||
var ranges = [];
|
||||
for (var R = 0; R < rows.length; ++R) {
|
||||
var outRow = [];
|
||||
var row = rows[R];
|
||||
var columns = row.querySelectorAll('td');
|
||||
for (var C = 0; C < columns.length; ++C) {
|
||||
var cell = columns[C];
|
||||
var colspan = cell.getAttribute('colspan');
|
||||
var rowspan = cell.getAttribute('rowspan');
|
||||
var cellValue = cell.innerText;
|
||||
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
|
||||
|
||||
//Skip ranges
|
||||
ranges.forEach(function (range) {
|
||||
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
|
||||
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
|
||||
}
|
||||
});
|
||||
|
||||
//Handle Row Span
|
||||
if (rowspan || colspan) {
|
||||
rowspan = rowspan || 1;
|
||||
colspan = colspan || 1;
|
||||
ranges.push({
|
||||
s: {
|
||||
r: R,
|
||||
c: outRow.length
|
||||
},
|
||||
e: {
|
||||
r: R + rowspan - 1,
|
||||
c: outRow.length + colspan - 1
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//Handle Value
|
||||
outRow.push(cellValue !== "" ? cellValue : null);
|
||||
|
||||
//Handle Colspan
|
||||
if (colspan)
|
||||
for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
|
||||
}
|
||||
out.push(outRow);
|
||||
}
|
||||
return [out, ranges];
|
||||
};
|
||||
|
||||
function datenum(v, date1904) {
|
||||
if (date1904) v += 1462;
|
||||
var epoch = Date.parse(v);
|
||||
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
|
||||
}
|
||||
|
||||
function sheet_from_array_of_arrays(data, opts) {
|
||||
var ws = {};
|
||||
var range = {
|
||||
s: {
|
||||
c: 10000000,
|
||||
r: 10000000
|
||||
},
|
||||
e: {
|
||||
c: 0,
|
||||
r: 0
|
||||
}
|
||||
};
|
||||
for (var R = 0; R != data.length; ++R) {
|
||||
for (var C = 0; C != data[R].length; ++C) {
|
||||
if (range.s.r > R) range.s.r = R;
|
||||
if (range.s.c > C) range.s.c = C;
|
||||
if (range.e.r < R) range.e.r = R;
|
||||
if (range.e.c < C) range.e.c = C;
|
||||
var cell = {
|
||||
v: data[R][C]
|
||||
};
|
||||
if (cell.v == null) continue;
|
||||
var cell_ref = XLSX.utils.encode_cell({
|
||||
c: C,
|
||||
r: R
|
||||
});
|
||||
|
||||
if (typeof cell.v === 'number') cell.t = 'n';
|
||||
else if (typeof cell.v === 'boolean') cell.t = 'b';
|
||||
else if (cell.v instanceof Date) {
|
||||
cell.t = 'n';
|
||||
cell.z = XLSX.SSF._table[14];
|
||||
cell.v = datenum(cell.v);
|
||||
} else cell.t = 's';
|
||||
|
||||
ws[cell_ref] = cell;
|
||||
}
|
||||
}
|
||||
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
|
||||
return ws;
|
||||
}
|
||||
|
||||
function Workbook() {
|
||||
if (!(this instanceof Workbook)) return new Workbook();
|
||||
this.SheetNames = [];
|
||||
this.Sheets = {};
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export function export_table_to_excel(id) {
|
||||
var theTable = document.getElementById(id);
|
||||
var oo = generateArray(theTable);
|
||||
var ranges = oo[1];
|
||||
|
||||
/* original data */
|
||||
var data = oo[0];
|
||||
var ws_name = "SheetJS";
|
||||
|
||||
var wb = new Workbook(),
|
||||
ws = sheet_from_array_of_arrays(data);
|
||||
|
||||
/* add ranges to worksheet */
|
||||
// ws['!cols'] = ['apple', 'banan'];
|
||||
ws['!merges'] = ranges;
|
||||
|
||||
/* add worksheet to workbook */
|
||||
wb.SheetNames.push(ws_name);
|
||||
wb.Sheets[ws_name] = ws;
|
||||
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: false,
|
||||
type: 'binary'
|
||||
});
|
||||
|
||||
saveAs(new Blob([s2ab(wbout)], {
|
||||
type: "application/octet-stream"
|
||||
}), "test.xlsx")
|
||||
}
|
||||
|
||||
export function export_json_to_excel({
|
||||
multiHeader = [],
|
||||
header,
|
||||
data,
|
||||
filename,
|
||||
merges = [],
|
||||
autoWidth = true,
|
||||
bookType = 'xlsx'
|
||||
} = {}) {
|
||||
/* original data */
|
||||
filename = filename || 'excel-list'
|
||||
data = [...data]
|
||||
data.unshift(header);
|
||||
|
||||
for (let i = multiHeader.length - 1; i > -1; i--) {
|
||||
data.unshift(multiHeader[i])
|
||||
}
|
||||
|
||||
var ws_name = "SheetJS";
|
||||
var wb = new Workbook(),
|
||||
ws = sheet_from_array_of_arrays(data);
|
||||
|
||||
if (merges.length > 0) {
|
||||
if (!ws['!merges']) ws['!merges'] = [];
|
||||
merges.forEach(item => {
|
||||
ws['!merges'].push(XLSX.utils.decode_range(item))
|
||||
})
|
||||
}
|
||||
|
||||
if (autoWidth) {
|
||||
/*设置worksheet每列的最大宽度*/
|
||||
const colWidth = data.map(row => row.map(val => {
|
||||
/*先判断是否为null/undefined*/
|
||||
if (val == null) {
|
||||
return {
|
||||
'wch': 10
|
||||
};
|
||||
}
|
||||
/*再判断是否为中文*/
|
||||
else if (val.toString().charCodeAt(0) > 255) {
|
||||
return {
|
||||
'wch': val.toString().length * 2
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
'wch': val.toString().length
|
||||
};
|
||||
}
|
||||
}))
|
||||
/*以第一行为初始值*/
|
||||
let result = colWidth[0];
|
||||
for (let i = 1; i < colWidth.length; i++) {
|
||||
for (let j = 0; j < colWidth[i].length; j++) {
|
||||
if (result[j]['wch'] < colWidth[i][j]['wch']) {
|
||||
result[j]['wch'] = colWidth[i][j]['wch'];
|
||||
}
|
||||
}
|
||||
}
|
||||
ws['!cols'] = result;
|
||||
}
|
||||
|
||||
/* add worksheet to workbook */
|
||||
wb.SheetNames.push(ws_name);
|
||||
wb.Sheets[ws_name] = ws;
|
||||
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: bookType,
|
||||
bookSST: false,
|
||||
type: 'binary'
|
||||
});
|
||||
saveAs(new Blob([s2ab(wbout)], {
|
||||
type: "application/octet-stream"
|
||||
}), `${filename}.${bookType}`);
|
||||
}
|
Reference in New Issue
Block a user