|
|
|
|
@ -13,10 +13,9 @@
|
|
|
|
|
<!-- 图片区域 -->
|
|
|
|
|
<div class="alarm-content">
|
|
|
|
|
<div class="alarm-content-top">
|
|
|
|
|
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt=""></img>
|
|
|
|
|
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt=""></img>
|
|
|
|
|
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt=""></img>
|
|
|
|
|
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt=""></img>
|
|
|
|
|
<template v-for="(item,index) in image" :key="index">
|
|
|
|
|
<img :src="item.image_url" alt="" v-if="index < 4"></img>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="alarm-content-bottom">
|
|
|
|
|
<span class="alarm-content-bottom-title">列车信息:</span>
|
|
|
|
|
@ -29,6 +28,11 @@
|
|
|
|
|
<span class="mr-8">告警类型: <i>{{ info.alarm_type }}</i></span>
|
|
|
|
|
<span>故障类型: <i>{{ info.fault_type }}</i></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="alarm-content-bottom-btn">
|
|
|
|
|
<el-button type="primary" @click="exportToExcel" class="alarm-btn">
|
|
|
|
|
<span class="icon"></span> 导出
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
@ -36,18 +40,21 @@
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
import ExcelJS from 'exceljs';
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
/** 弹窗显隐 */
|
|
|
|
|
value: boolean;
|
|
|
|
|
info: Record<string, any>;
|
|
|
|
|
image: any;
|
|
|
|
|
}
|
|
|
|
|
interface Emits {
|
|
|
|
|
(e: "update:value", val: boolean): void;
|
|
|
|
|
}
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
|
|
value: false,
|
|
|
|
|
info: {}
|
|
|
|
|
info: {},
|
|
|
|
|
image: []
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
|
@ -65,6 +72,62 @@ const show = computed({
|
|
|
|
|
emit("update:value", val);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 导出 Excel 文件
|
|
|
|
|
const exportToExcel = async () => {
|
|
|
|
|
const { info, image } = props;
|
|
|
|
|
|
|
|
|
|
const workbook = new ExcelJS.Workbook();
|
|
|
|
|
const worksheet = workbook.addWorksheet('Sheet1');
|
|
|
|
|
|
|
|
|
|
// 准备数据
|
|
|
|
|
const data = [
|
|
|
|
|
['列车编号', '车型', '发生时间', '告警类型', '故障类型'],
|
|
|
|
|
[info.train_number, info.train_model, info.created_at, info.alarm_type, info.fault_type]
|
|
|
|
|
];
|
|
|
|
|
worksheet.addRows(data);
|
|
|
|
|
|
|
|
|
|
// 检查是否有图片
|
|
|
|
|
if (image.length > 0) {
|
|
|
|
|
for (let i = 0; i < Math.min(image.length, 4); i++) {
|
|
|
|
|
const imgUrl = image[i].image_url;
|
|
|
|
|
try {
|
|
|
|
|
console.log(`开始加载图片: ${imgUrl}`);
|
|
|
|
|
const response = await fetch(imgUrl);
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
console.error(`图片加载失败，状态码: ${response.status}，URL: ${imgUrl}`);
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
const blob = await response.blob();
|
|
|
|
|
const arrayBuffer = await blob.arrayBuffer();
|
|
|
|
|
const imageId = workbook.addImage({
|
|
|
|
|
// 直接使用 arrayBuffer
|
|
|
|
|
buffer: arrayBuffer,
|
|
|
|
|
extension: 'png',
|
|
|
|
|
});
|
|
|
|
|
worksheet.addImage(imageId, {
|
|
|
|
|
tl: { col: 0, row: i + 2 },
|
|
|
|
|
ext: { width: 200, height: 200 },
|
|
|
|
|
});
|
|
|
|
|
console.log(`图片 ${imgUrl} 已成功添加到 Excel`);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error(`图片处理过程中出错，URL: ${imgUrl}，错误信息:`, error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const buffer = await workbook.xlsx.writeBuffer();
|
|
|
|
|
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 = 'alarm_info.xlsx';
|
|
|
|
|
link.click();
|
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('导出 Excel 文件时出错:', error);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
@ -74,13 +137,13 @@ const show = computed({
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
background-image: url("@/assets/common/bg_real_dialog.png");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
width: 805px;
|
|
|
|
|
height: 612px;
|
|
|
|
|
height: 712px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin-top: calc(50vh - 316px);
|
|
|
|
|
// margin-top: calc(50vh - 316px);
|
|
|
|
|
|
|
|
|
|
.el-dialog__header.show-close {
|
|
|
|
|
padding: 0;
|
|
|
|
|
@ -99,7 +162,7 @@ const show = computed({
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 0;
|
|
|
|
|
padding-top: 8px;
|
|
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
.header-left {
|
|
|
|
|
padding: 0 24px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
@ -161,6 +224,28 @@ const show = computed({
|
|
|
|
|
.alarm-content-bottom-info:nth-of-type(1) {
|
|
|
|
|
margin: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
.alarm-content-bottom-btn {
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
text-align: end;
|
|
|
|
|
.alarm-btn {
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%);
|
|
|
|
|
border: 1px solid #42a5f5;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
color: white;
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
& .icon {
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
background-image: url("@/assets/common/export_icon.png");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
JINGYJ
2 weeks ago
