xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

监控中心各页面导出表格

Browse Source
This commit is contained in:
fks-yangshouda
2024-08-29 15:26:37 +08:00
parent ce97741978
commit 583347ba70
10 changed files with 304 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
hx-ai-intelligent/src/util/ExcelUtil.js
View File

@@ -10,10 +10,43 @@ import FileSaver from 'file-saver';
// export default exportExcel;
// 导出excel文件
export function exportExcel (tableColumns,data,fillName,isMerge,start,end) {
/**
*
* @param {*} tableColumns 表头
* @param {*} data 数据
* @param {*} fillName 文件名
* @param {*} isMerge 是否合并单元格
* @param {*} firstKey 第一个字段的key，用来判断序号列是否合并
* @param {*} start 合并单元格开始列
* @param {*} end 合并单元格结束列
* @returns
*/
export function exportExcel (tableColumns,data,fillName,isMerge = false, firstKey = '',start = 0, end = 0) {
debugger
if (!data || data.length == 0) {
return;
}
if (isMerge) {
// 需要合并序号
for (let i = 0; i < data.length; i++) {
// 自定义单元格内容，这里返回序号
if (i == 0) {
data[i].index = 1;
// return 1;
} else if (data[i - 1][firstKey] == data[i][firstKey]) {
data[i].index = data[i - 1].index;
// return data.value[index].index;
} else {
data[i].index = data[i - 1].index + 1;
}
}
} else {
// 不需要合并序号
for (let i = 0; i < data.length; i++) {
data[i].index = i + 1;
}
}
// 创建工作簿
const workbook = new ExcelJS.Workbook();
// 添加工作表，名为sheet1
@@ -33,27 +66,22 @@ export function exportExcel (tableColumns,data,fillName,isMerge,start,end) {
columns.push({
header: tableColumns[i].title,
key: tableColumns[i].dataIndex,
width: tableColumns[i].width / 5,
width: tableColumns[i].width ? tableColumns[i].width / 5 : 20,
});
}
}
//传入的数据
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);
@@ -62,80 +90,30 @@ export function exportExcel (tableColumns,data,fillName,isMerge,start,end) {
// 判断是否合并单元格
if (isMerge) {
debugger
// 遍历列，从第一列到 end 列
// 遍历列，从 start 列到 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 = ''
// 从第二列开始就要看前一列是否已经合并
let isMerged = true
if (col > 1) {
currentCellValue_1 = sheet1.getCell(row, col-1).value;
previousCellValue_1 = sheet1.getCell(row - 1, col-1).value;
isMerged = ifMerged(sheet1,row - 1, col-1,row, col-1)
}
if (currentCellValue === previousCellValue && currentCellValue_1 === previousCellValue_1) {
// 当前列有变化，检查是否需要合并前面的单元格
// if (mergeStartRow < row - 1) {
// 只有在前面的行有超过1个时才合并
if (currentCellValue === previousCellValue && isMerged) {
// 检查是上边需要合并的单元格是否已经合并
const mergeInfo = getMergeInfo(sheet1, row - 1, col)
if ( mergeInfo.isMerged ) {
sheet1.unMergeCells( mergeInfo.startRow, col, row - 1, col);
sheet1.mergeCells(mergeInfo.startRow, col, row, col);
} else {
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);
// }
// }
}
}
}
@@ -208,3 +186,43 @@ function formatJson (filterVal, jsonData) {
return jsonData.map((v) => filterVal.map((j) => v[j]));
};
/**
* 获取给定行和列的单元格是否为合并单元格，并返回合并起始行
* @param {Worksheet} worksheet - ExcelJS 工作表对象
* @param {number} row - 单元格的行号 (从 1 开始)
* @param {number} col - 单元格的列号 (从 1 开始)
* @returns {Object} - 返回一个对象，包含 isMerged 和 startRow 属性
*/
function getMergeInfo(worksheet, row, col) {
// 遍历所有的合并范围
for (const mergeRange in worksheet._merges) {
if (worksheet._merges.hasOwnProperty(mergeRange)) {
const { top, left, bottom, right } = worksheet._merges[mergeRange];
// 检查行列是否在当前合并范围内
if (row >= top && row <= bottom && col >= left && col <= right) {
return { isMerged: true, startRow: top }; // 找到合并范围，返回合并信息
}
}
}
return { isMerged: false, startRow: null }; // 单元格不在任何合并范围内
}
// 函数：检查两个单元格是否属于同一个合并区域
function ifMerged(worksheet, row1, col1, row2, col2) {
const merges = worksheet._merges; // 获取所有的合并区域
for (let mergeAddress in merges) {
const mergeRange = merges[mergeAddress];
const { top, left, bottom, right } = mergeRange;
const isCell1InRange = (row1 >= top && row1 <= bottom && col1 >= left && col1 <= right);
const isCell2InRange = (row2 >= top && row2 <= bottom && col2 >= left && col2 <= right);
if (isCell1InRange && isCell2InRange) {
return true;
}
}
return false;
}

4
hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
View File

@@ -52,6 +52,10 @@
if (graphRef.value) {
graphRef.value.downloadChart();
}
} else {
if (tableRef.value) {
tableRef.value.export1();
}
}
};

5
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
View File

@@ -16,6 +16,7 @@
</template>
<script lang="ts">
import { exportExcel } from '/@/util/ExcelUtil.js';
import { defineComponent, watch, ref, onMounted } from 'vue';
import type { TableColumnType } from 'ant-design-vue';
import { Pagination } from 'ant-design-vue';
@@ -245,6 +246,9 @@
columns.value = columnA;
total.value = dataList.value.length;
onChange(1, 10);
}; // 导出excel文件
const export1 = () => {
exportExcel(columns.value, dataList.value, '历史数据导出', true, 'deviceName', 1, 4);
};
onMounted(() => {
init();
@@ -257,6 +261,7 @@
total,
onChange,
x,
export1,
};
},
});

4
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
View File

@@ -15,7 +15,7 @@
:tree-data="treeData1"
@change="changeDeviceType" />
<a-spin :spinning="treeLoading">
<!-- <a-spin :spinning="treeLoading"> -->
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
@@ -25,7 +25,7 @@
:height="560"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2" />
</a-spin>
<!-- </a-spin> -->
<!-- <div class="fixed-bottom"> -->
<div>

150
hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
View File

@@ -18,6 +18,8 @@
</template>
<script lang="ts">
import ExcelJS from 'exceljs';
import FileSaver from 'file-saver';
import { defineComponent, ref, inject, watch, onMounted } from 'vue';
export default defineComponent({
@@ -130,6 +132,153 @@
},
{ deep: true },
);
// 导出excel文件
// 因为有多级表头，特殊处理，没有用公共方法
const export1 = () => {
if (!data.value || data.value.length == 0) {
return;
}
// 不需要合并序号
for (let i = 0; i < data.value.length; i++) {
data.value[i].index = i + 1;
}
// 创建工作簿
const workbook = new ExcelJS.Workbook();
// 添加工作表，名为sheet1
const sheet1 = workbook.addWorksheet('sheet1');
// 字段名
let filterVal = [
'name',
'value',
'yoyDiff',
'yoyRate',
'momDiff',
'momRate',
'zongxiangDiff',
'zongxiangRate',
];
// 表格columns
// 添加多行表头
sheet1.addRows([
['设备/节点', '统计值', '同比', '', '环比', '', '纵向对比', ''],
['', '', '△差值', '增长率', '△差值', '增长率', '△差值', '增长率'],
]);
// 合并单元格来实现多行表头
sheet1.mergeCells('A1:A2'); // 合并 '设备/节点' 单元格
sheet1.mergeCells('B1:B2'); // 合并 '统计值' 单元格
sheet1.mergeCells('C1:D1'); // 合并 '同比' 单元格
sheet1.mergeCells('E1:F1'); // 合并 '环比' 单元格
sheet1.mergeCells('G1:H1'); // 合并 '纵向对比' 单元格
//传入的数据
const list = data.value;
//格式化数据
const datas = formatJson(filterVal, list);
// 将数据写入工作表
datas.forEach((row: any) => {
// const values = Object.values(row);
sheet1.addRow(row);
});
let column = sheet1.columns;
for (let i = 0; i < column.length; i++) {
column[i].width = 20;
}
// 修改所有单元格样式
// 遍历每一行
sheet1.eachRow((row) => {
// 遍历每个单元格
row.eachCell((cell) => {
// 设置边框样式
cell.border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' },
};
// 设置居中对齐
cell.alignment = {
vertical: 'middle',
horizontal: 'center',
};
});
});
// 获取标题行数据
const titleCell1 = sheet1.getRow(1);
// 设置行高为30
titleCell1.height = 30;
// 设置标题行单元格样式
titleCell1.eachCell((cell) => {
// 设置标题行背景颜色为黄色
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: 'FFFFFF' },
};
// 设置标题行字体
cell.font = {
// color: { argb: 'FF0000' }, //颜色为红色
bold: true, // 字体粗体
size: 18, // 设置字体大小为18
};
});
const titleCell2 = sheet1.getRow(2);
// 设置行高为30
titleCell2.height = 30;
// 设置标题行单元格样式
titleCell2.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(3, sheet1.rowCount);
if (bodyRows) {
// 处理内容行的数据
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, '分析数据导出.xlsx');
})
.catch((error) => console.log('Error writing excel export', error));
};
/**
* 格式化表格数据
* @filterVal 格式头
* @jsonData 用来格式化的表格数据
*/
function formatJson(filterVal: any, jsonData: any) {
return jsonData.map((v: any) => filterVal.map((j: any) => v[j]));
}
onMounted(() => {
// 深度拷贝
data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
@@ -165,6 +314,7 @@
rowSelection,
selectedKey,
setStandard,
export1,
};
},
});

5
hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
View File

@@ -16,6 +16,7 @@
</template>
<script lang="ts">
import { exportExcel } from '/@/util/ExcelUtil.js';
import { defineComponent, watch, inject, ref, onMounted } from 'vue';
import type { TableColumnType } from 'ant-design-vue';
import { Pagination } from 'ant-design-vue';
@@ -152,6 +153,9 @@
columns.value = columnA;
total.value = dataList.value.length;
onChange(1, 10);
}; // 导出excel文件
const export1 = () => {
exportExcel(columns.value, dataList.value, '图表数据导出');
};
onMounted(() => {
init();
@@ -167,6 +171,7 @@
columns,
total,
onChange,
export1,
};
},
});

18
hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
View File

@@ -28,7 +28,7 @@
</template> -->
</a-tabs>
<div class="button">
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="download" />
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
</div>
</div>
@@ -74,15 +74,27 @@
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
});
const downloadChart = () => {
if (activeKey.value == '1' && isGraph) {
const download = () => {
if (activeKey.value == '1') {
if (isGraph.value) {
if (graphRef.value) {
graphRef.value.downloadChart();
}
} else {
if (tableRef.value) {
tableRef.value.export1();
}
}
} else {
if (isGraph.value) {
if (analysisGraphRef.value) {
analysisGraphRef.value.downloadChart();
}
} else {
if (analysisTableRef.value) {
analysisTableRef.value.export1();
}
}
}
};
const changeActive = () => {

6
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
View File

@@ -35,14 +35,14 @@
v-if="mode == '0'"
@change="changeMode" />
<a-input v-model:value="pointName" placeholder="请输入节点名称" v-else @change="changeMode" />
<a-spin :spinning="treeLoading">
<!-- <a-spin :spinning="treeLoading"> -->
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
:show-line="{ showLeafIcon: false }"
checkable
:height="600"
:height="500"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2">
<!-- <template #title="{ title }">
@@ -59,7 +59,7 @@
<span v-else>{{ title }}</span>
</template> -->
</a-tree>
</a-spin>
<!-- </a-spin> -->
<!-- <div class="fixed-bottom"> -->
<div>

5
hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
View File

@@ -206,10 +206,7 @@
};
// 导出excel文件
const export1 = () => {
for (let i = 0; i < data.value.length; i++) {
data.value[i].index = i + 1;
}
exportExcel(tableColumns.value, data.value, '平均数据导出', false);
exportExcel(tableColumns.value, data.value, '平均数据导出');
};
onMounted(async () => {
// 获取频率

6
hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
View File

@@ -288,6 +288,10 @@
// 获取表格数据
const getTableList = () => {
loading.value = true;
tableColumns.value = [];
data.value = [];
total.value = 0;
pageData.value = [];
let environmentType = '';
for (let i = 0; i < typeList.value.length; i++) {
if (typeList.value[i].value == typeValue.value) {
@@ -353,7 +357,7 @@
};
// 导出excel文件
const export1 = () => {
exportExcel(tableColumns.value, data.value, '历史数据导出', true, 1, 3);
exportExcel(tableColumns.value, data.value, '历史数据导出', true, 'location', 1, 3);
};
onMounted(async () => {
// 获取频率