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