feat: 新增导出整车列表
parent
d364741783
commit
445ae91686
@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<span>
|
||||||
|
报表下载
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import ExcelJS from 'exceljs';
|
||||||
|
import { saveAs } from 'file-saver-es';
|
||||||
|
|
||||||
|
// 模拟列表数据 (替换成你的真实数据)
|
||||||
|
const listData = [
|
||||||
|
{
|
||||||
|
trainCode: 'T-20250508',
|
||||||
|
trainType: 'C54K',
|
||||||
|
occurrenceTime: 5785.67354,
|
||||||
|
alarmType: '车辆损坏',
|
||||||
|
faultType: '搭扣未扣',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 模拟图片 URL (替换成你的真实图片URL)
|
||||||
|
const imageUrl = ref(''); // Replace with the actual image URL
|
||||||
|
const placeholderImageUrl = 'https://via.placeholder.com/150'; // Fallback
|
||||||
|
|
||||||
|
const convertImageToBase64 = async (url: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url);
|
||||||
|
const blob = await response.blob();
|
||||||
|
return new Promise<string>((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = () => resolve(reader.result as string);
|
||||||
|
reader.onerror = reject;
|
||||||
|
reader.readAsDataURL(blob);
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading image:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const saveToExcel = async () => {
|
||||||
|
const workbook = new ExcelJS.Workbook();
|
||||||
|
const worksheet = workbook.addWorksheet('Sheet1');
|
||||||
|
|
||||||
|
// 1. 设置列宽 (根据你的内容调整)
|
||||||
|
worksheet.getColumn('A').width = 15;
|
||||||
|
worksheet.getColumn('B').width = 15;
|
||||||
|
worksheet.getColumn('C').width = 15;
|
||||||
|
worksheet.getColumn('D').width = 10; // Smaller width for '车型'
|
||||||
|
worksheet.getColumn('E').width = 15;
|
||||||
|
worksheet.getColumn('F').width = 15;
|
||||||
|
worksheet.getColumn('G').width = 15;
|
||||||
|
worksheet.getColumn('H').width = 10;
|
||||||
|
worksheet.getColumn('I').width = 10;
|
||||||
|
|
||||||
|
|
||||||
|
// 2. 添加头部数据
|
||||||
|
worksheet.getCell('A1').value = '进场时间';
|
||||||
|
worksheet.getCell('B1').value = '出场时间';
|
||||||
|
worksheet.getCell('A3').value = '车厢编号';
|
||||||
|
worksheet.getCell('C3').value = '1234567890'; // Example Value
|
||||||
|
|
||||||
|
// 3. 添加表格头部
|
||||||
|
worksheet.getCell('C5').value = '列车编号';
|
||||||
|
worksheet.getCell('D5').value = '车型';
|
||||||
|
worksheet.getCell('E5').value = '发生时间';
|
||||||
|
worksheet.getCell('F5').value = '告警类型';
|
||||||
|
worksheet.getCell('G5').value = '故障类型';
|
||||||
|
|
||||||
|
// 4. 填充表格数据
|
||||||
|
listData.forEach((item, index) => {
|
||||||
|
const row = index + 6; // 从第6行开始
|
||||||
|
worksheet.getCell(`C${row}`).value = item.trainCode;
|
||||||
|
worksheet.getCell(`D${row}`).value = item.trainType;
|
||||||
|
worksheet.getCell(`E${row}`).value = item.occurrenceTime;
|
||||||
|
worksheet.getCell(`F${row}`).value = item.alarmType;
|
||||||
|
worksheet.getCell(`G${row}`).value = item.faultType;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. 添加图片
|
||||||
|
|
||||||
|
// Load the image (using a data URL or URL)
|
||||||
|
try {
|
||||||
|
if (imageUrl.value) {
|
||||||
|
const base64Image = await convertImageToBase64(imageUrl.value);
|
||||||
|
|
||||||
|
if (base64Image) {
|
||||||
|
const imageId = workbook.addImage({
|
||||||
|
base64: base64Image,
|
||||||
|
extension: 'png', // Adjust extension if needed (jpeg, etc.)
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add the image to the worksheet
|
||||||
|
worksheet.addImage(imageId, {
|
||||||
|
tl: { col: 2, row: 8 }, // Top left corner of the image (C9 in Excel)
|
||||||
|
br: { col: 7, row: 25 }, // Bottom right corner of the image (H26 in Excel)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error adding image:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 6. 添加 "车身缺陷" 文本
|
||||||
|
worksheet.getCell('A17').value = '车身缺陷';
|
||||||
|
|
||||||
|
// 7. 设置 H 列的背景色
|
||||||
|
for (let i = 8; i <= 28; i++) {
|
||||||
|
const cell = worksheet.getCell(`H${i}`);
|
||||||
|
cell.fill = {
|
||||||
|
type: 'pattern',
|
||||||
|
pattern: 'solid',
|
||||||
|
fgColor: { argb: 'ADD8E6' }, // Light blue color
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 8. (Optional) Style the header rows
|
||||||
|
const headerRange = 'A1:G5'; // Adjust as needed
|
||||||
|
worksheet.getCell(headerRange).font = { bold: true };
|
||||||
|
worksheet.getCell(headerRange).alignment = { vertical: 'middle', horizontal: 'center' }; // Center align headers
|
||||||
|
|
||||||
|
// 9. 下载 Excel 文件
|
||||||
|
const buffer = await workbook.xlsx.writeBuffer();
|
||||||
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), '车辆信息.xlsx');
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// Pre-load the image (or use a placeholder if loading fails)
|
||||||
|
imageUrl.value = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/1665px-No-Image-Placeholder.svg.png'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,166 @@
|
|||||||
|
import ExcelJS from "exceljs";
|
||||||
|
// import { saveAs } from 'file-saver-es';
|
||||||
|
|
||||||
|
// 模拟列表数据 (替换成你的真实数据)
|
||||||
|
|
||||||
|
export const useTrainSaveToExcel = (props) => {
|
||||||
|
const { arrive_at, data, leave_at } = props;
|
||||||
|
console.log("useTrainSaveToExcel_data", data);
|
||||||
|
const listData = [
|
||||||
|
{
|
||||||
|
trainCode: "T-20250508",
|
||||||
|
trainType: "C54K",
|
||||||
|
occurrenceTime: 5785.67354,
|
||||||
|
alarmType: "车辆损坏",
|
||||||
|
faultType: "搭扣未扣",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
trainCode: "T-20250508",
|
||||||
|
trainType: "C54K",
|
||||||
|
occurrenceTime: 5785.67354,
|
||||||
|
alarmType: "车辆损坏",
|
||||||
|
faultType: "搭扣未扣",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
trainCode: "T-20250508",
|
||||||
|
trainType: "C54K",
|
||||||
|
occurrenceTime: 5785.67354,
|
||||||
|
alarmType: "车辆损坏",
|
||||||
|
faultType: "搭扣未扣",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
// 模拟图片 URL (替换成你的真实图片URL)
|
||||||
|
const imageUrl =
|
||||||
|
"http://192.168.10.14:8123/sftp/2025-07-01/20250701_131010.jpg"; // Fallback
|
||||||
|
|
||||||
|
const convertImageToBase64 = async (url: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url);
|
||||||
|
const blob = await response.blob();
|
||||||
|
return new Promise<string>((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = () => resolve(reader.result as string);
|
||||||
|
reader.onerror = reject;
|
||||||
|
reader.readAsDataURL(blob);
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error loading image:", error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveToExcel = async () => {
|
||||||
|
const workbook = new ExcelJS.Workbook();
|
||||||
|
const worksheet = workbook.addWorksheet("Sheet1");
|
||||||
|
|
||||||
|
// 1. 设置列宽 (根据你的内容调整)
|
||||||
|
worksheet.getColumn("A").width = 15;
|
||||||
|
worksheet.getColumn("B").width = 15;
|
||||||
|
worksheet.getColumn("C").width = 15;
|
||||||
|
worksheet.getColumn("D").width = 10; // Smaller width for '车型'
|
||||||
|
worksheet.getColumn("E").width = 15;
|
||||||
|
worksheet.getColumn("F").width = 15;
|
||||||
|
worksheet.getColumn("G").width = 15;
|
||||||
|
worksheet.getColumn("H").width = 10;
|
||||||
|
worksheet.getColumn("I").width = 10;
|
||||||
|
|
||||||
|
// 2. 添加头部数据
|
||||||
|
worksheet.getCell("A1").value = "进场时间";
|
||||||
|
worksheet.getCell("B1").value = "出场时间";
|
||||||
|
worksheet.getCell("A3").value = "车厢编号";
|
||||||
|
worksheet.getCell("C3").value = "1234567890"; // Example Value
|
||||||
|
|
||||||
|
// 3. 添加表格头部
|
||||||
|
worksheet.getCell("C5").value = "列车编号";
|
||||||
|
worksheet.getCell("D5").value = "车型";
|
||||||
|
worksheet.getCell("E5").value = "发生时间";
|
||||||
|
worksheet.getCell("F5").value = "告警类型";
|
||||||
|
worksheet.getCell("G5").value = "故障类型";
|
||||||
|
|
||||||
|
const loadRemark = async (record) => {
|
||||||
|
try {
|
||||||
|
if (imageUrl) {
|
||||||
|
const base64Image = await convertImageToBase64(imageUrl);
|
||||||
|
|
||||||
|
if (base64Image) {
|
||||||
|
const imageId = workbook.addImage({
|
||||||
|
base64: base64Image,
|
||||||
|
extension: "png", // Adjust extension if needed (jpeg, etc.)
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add the image to the worksheet
|
||||||
|
worksheet.addImage(imageId, {
|
||||||
|
tl: { col: 2, row: 8 }, // Top left corner of the image (C9 in Excel)
|
||||||
|
br: { col: 7, row: 25 }, // Bottom right corner of the image (H26 in Excel)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error adding image:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. 填充表格数据
|
||||||
|
listData.forEach((item, index) => {
|
||||||
|
const row = index + 6; // 从第6行开始
|
||||||
|
worksheet.getCell(`C${row}`).value = item.trainCode;
|
||||||
|
worksheet.getCell(`D${row}`).value = item.trainType;
|
||||||
|
worksheet.getCell(`E${row}`).value = item.occurrenceTime;
|
||||||
|
worksheet.getCell(`F${row}`).value = item.alarmType;
|
||||||
|
worksheet.getCell(`G${row}`).value = item.faultType;
|
||||||
|
loadRemark(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. 添加图片
|
||||||
|
|
||||||
|
// Load the image (using a data URL or URL)
|
||||||
|
|
||||||
|
// 6. 添加 "车身缺陷" 文本
|
||||||
|
worksheet.getCell("A17").value = "车身缺陷";
|
||||||
|
|
||||||
|
// 7. 设置 H 列的背景色
|
||||||
|
for (let i = 8; i <= 28; i++) {
|
||||||
|
const cell = worksheet.getCell(`H${i}`);
|
||||||
|
cell.fill = {
|
||||||
|
type: "pattern",
|
||||||
|
pattern: "solid",
|
||||||
|
fgColor: { argb: "ADD8E6" }, // Light blue color
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 8. (Optional) Style the header rows
|
||||||
|
const headerRanges = ["A1:G5", "B1:G5"]; // Adjust as needed
|
||||||
|
// const headerRange = "A1:G5, B8:G5"; // Adjust as needed
|
||||||
|
for (const headerRange of headerRanges) {
|
||||||
|
worksheet.getCell(headerRange).font = { bold: true };
|
||||||
|
worksheet.getCell(headerRange).alignment = {
|
||||||
|
vertical: "middle",
|
||||||
|
horizontal: "center",
|
||||||
|
}; // Center align headers
|
||||||
|
}
|
||||||
|
|
||||||
|
// 9. 下载 Excel 文件
|
||||||
|
const buffer = await workbook.xlsx.writeBuffer();
|
||||||
|
try {
|
||||||
|
const blob = new Blob([buffer], {
|
||||||
|
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||||
|
});
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = url;
|
||||||
|
link.download = "车辆信息.xlsx";
|
||||||
|
link.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("导出 Excel 文件时出错:", error);
|
||||||
|
}
|
||||||
|
// saveAs(
|
||||||
|
// new Blob([buffer], { type: "application/octet-stream" }),
|
||||||
|
// "车辆信息.xlsx"
|
||||||
|
// );
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
saveToExcel,
|
||||||
|
};
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue