|
|
|
|
@ -0,0 +1,431 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog class="appearanceAlarmModal" v-model="show" @close="handleClose">
|
|
|
|
|
<!-- 自定义标题栏 -->
|
|
|
|
|
<template #header="{ close, titleId, titleClass }">
|
|
|
|
|
<div class="flex items-center justify-between appearanceAlarm-dialog-header">
|
|
|
|
|
<div class="flex items-center justify-center header-left">
|
|
|
|
|
<div class="header-icon mr-[12px]"></div>
|
|
|
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]">{{
|
|
|
|
|
"故障提示" }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 图片区域 -->
|
|
|
|
|
<div class="appearanceAlarm-content">
|
|
|
|
|
<div class="appearanceAlarm-content-top">
|
|
|
|
|
<!-- <template v-for="(item,index) in image" :key="index">
|
|
|
|
|
<img :src="item.image_url" alt="" v-if="index < 4"></img>
|
|
|
|
|
</template> -->
|
|
|
|
|
<div class="appearanceAlarm-content-top-left">
|
|
|
|
|
<span class="appearanceAlarm-content-top-title">故障前</span>
|
|
|
|
|
<div class="appearanceAlarm-content-top-left-img">
|
|
|
|
|
<div class="appearanceAlarm-content-top-img">
|
|
|
|
|
<img :src="beforeImage[0]?.image_url" alt=""></img>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="appearanceAlarm-content-top-img-slider">
|
|
|
|
|
<swiper ref="swiperModalRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
|
|
|
|
|
:scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :observeParents="true"
|
|
|
|
|
@swiper="onSwiper" @slideChange="onSlideChange">
|
|
|
|
|
<swiper-slide v-for="(file, index) in beforeImage" :key="index" @click="handleSlideClick(index)"
|
|
|
|
|
:class="{ 'active-slide': activeIndex === index }">
|
|
|
|
|
<img :src="file.image_url" class="cursor-pointer" v-if="file.image_url" />
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
</swiper>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="appearanceAlarm-content-top-right">
|
|
|
|
|
<span class="appearanceAlarm-content-top-title">故障后</span>
|
|
|
|
|
<div class="appearanceAlarm-content-top-right-img">
|
|
|
|
|
<div class="appearanceAlarm-content-top-img">
|
|
|
|
|
<img :src="image[0]?.image_url" alt=""></img>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="appearanceAlarm-content-top-img-slider">
|
|
|
|
|
<swiper ref="swiperModalRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
|
|
|
|
|
:scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :observeParents="true"
|
|
|
|
|
@swiper="onSwiper" @slideChange="onSlideChange">
|
|
|
|
|
<swiper-slide v-for="(file, index) in image" :key="index" @click="handleSlideClick(index)"
|
|
|
|
|
:class="{ 'active-slide': activeIndex === index }">
|
|
|
|
|
<img :src="file.image_url" class="cursor-pointer" v-if="file.image_url" />
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
</swiper>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="appearanceAlarm-content-bottom">
|
|
|
|
|
<span class="appearanceAlarm-content-bottom-title">列车信息:</span>
|
|
|
|
|
<div class="appearanceAlarm-content-bottom-info">
|
|
|
|
|
<span class="mr-8">列车编号: <i>{{ info.train_number }}</i></span>
|
|
|
|
|
<span class="mr-8">车型: <i>{{ info.train_model }}</i></span>
|
|
|
|
|
<span>发生时间: <i>{{ info.created_at }}</i></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="appearanceAlarm-content-bottom-info">
|
|
|
|
|
<span class="mr-8">告警类型: <i>{{ info.alarm_type }}</i></span>
|
|
|
|
|
<span>故障类型: <i>{{ info.fault_type }}</i></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="appearanceAlarm-content-bottom-btn">
|
|
|
|
|
<el-button type="primary" @click="exportToExcel" class="appearanceAlarm-btn">
|
|
|
|
|
<span class="icon"></span> 导出
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
import ExcelJS from 'exceljs';
|
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
|
|
|
import { Navigation, Scrollbar } from "swiper/modules";
|
|
|
|
|
import "swiper/css";
|
|
|
|
|
import 'swiper/scss';
|
|
|
|
|
import 'swiper/scss/navigation';
|
|
|
|
|
import { it } from 'element-plus/es/locale';
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
/** 弹窗显隐 */
|
|
|
|
|
value: boolean;
|
|
|
|
|
info: Record<string, any>;
|
|
|
|
|
image: any;
|
|
|
|
|
beforeImage: any;
|
|
|
|
|
}
|
|
|
|
|
interface Emits {
|
|
|
|
|
(e: "update:value", val: boolean): void;
|
|
|
|
|
}
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
|
|
value: false,
|
|
|
|
|
info: {},
|
|
|
|
|
image: [],
|
|
|
|
|
beforeImage: []
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
|
const modules = [Navigation, Scrollbar];
|
|
|
|
|
const activeIndex = ref(-1);
|
|
|
|
|
const swiperModalRef = ref(null);
|
|
|
|
|
const loading = ref(true);
|
|
|
|
|
// 处理对话框关闭事件
|
|
|
|
|
const handleClose = () => {
|
|
|
|
|
// emits('close');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const show = computed({
|
|
|
|
|
get() {
|
|
|
|
|
return props.value;
|
|
|
|
|
},
|
|
|
|
|
set(val: boolean) {
|
|
|
|
|
emit("update:value", val);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const onSwiper = (swiper) => {
|
|
|
|
|
swiperModalRef.value = swiper;
|
|
|
|
|
console.log('Swiper 实例已获取:', swiper);
|
|
|
|
|
};
|
|
|
|
|
const onSlideChange = () => {
|
|
|
|
|
console.log("slide change");
|
|
|
|
|
};
|
|
|
|
|
const handleSlideClick = (index) => {
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 导出 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);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// 主图延迟加载
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
}, 2000); // 延迟 2 秒
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.appearanceAlarmModal.el-dialog {
|
|
|
|
|
border: none;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
background-image: url("@/assets/common/bg_real_dialog.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
width: 816px;
|
|
|
|
|
height:609px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
// margin-top: calc(50vh - 316px);
|
|
|
|
|
|
|
|
|
|
.el-dialog__header.show-close {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-dialog__close {
|
|
|
|
|
width: 56px;
|
|
|
|
|
height: 56px;
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
padding-top: 4px;
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appearanceAlarm-dialog-header {
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 0;
|
|
|
|
|
padding-top: 8px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
.header-left {
|
|
|
|
|
padding: 0 24px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
|
|
.header-icon {
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
background-image: url("@/assets/common/alarm_title.png");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appearanceAlarm-content {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 24px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.appearanceAlarm-content-top {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
// flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between; /* 水平方向均匀分布间距 */
|
|
|
|
|
align-content: space-between; /* 垂直方向均匀分布间距 */
|
|
|
|
|
width: 766px;
|
|
|
|
|
height: 360px;
|
|
|
|
|
// img {
|
|
|
|
|
// width: 368px;
|
|
|
|
|
// height: 216px;
|
|
|
|
|
// }
|
|
|
|
|
.appearanceAlarm-content-top-title {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 42px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin: 16px 0 12px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-top-left {
|
|
|
|
|
.appearanceAlarm-content-top-left-img {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.appearanceAlarm-content-top-img {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 368px;
|
|
|
|
|
height: 216px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
border-radius:4px;
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius:2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-top-img-slider {
|
|
|
|
|
width: 368px;
|
|
|
|
|
img {
|
|
|
|
|
width: 118px;
|
|
|
|
|
height: 74px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-top-right {
|
|
|
|
|
.appearanceAlarm-content-top-right-img {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.appearanceAlarm-content-top-img {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 368px;
|
|
|
|
|
height: 216px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
border-radius:4px;
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius:2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-top-img-slider {
|
|
|
|
|
width: 368px;
|
|
|
|
|
img {
|
|
|
|
|
width: 118px;
|
|
|
|
|
height: 74px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-top-right-img::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -16px;
|
|
|
|
|
border-left: 2px dashed rgba(255,255,255,0.6);
|
|
|
|
|
// width: 2px; /* 分割线宽度 */
|
|
|
|
|
height: 100%; /* 分割线高度，根据需要调整 */
|
|
|
|
|
// margin-right: 10px; /* 可选，增加分割线与内容的间距 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.swiper {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.swiper-slide {
|
|
|
|
|
width: 20%;
|
|
|
|
|
border-radius:2px;
|
|
|
|
|
height: 74px;
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 74px;
|
|
|
|
|
border-radius:2px;
|
|
|
|
|
object-fit: cover
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.active-slide img {
|
|
|
|
|
border-radius:2px;
|
|
|
|
|
border: 2px solid #2ECCE0;
|
|
|
|
|
}
|
|
|
|
|
.swiper-button-prev,
|
|
|
|
|
.swiper-button-next {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
color: white;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
top: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper-button-prev::after,
|
|
|
|
|
.swiper-button-next::after {
|
|
|
|
|
font-size: 12px ;
|
|
|
|
|
color: #FFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 修改按钮悬停样式 */
|
|
|
|
|
.swiper-button-prev:hover,
|
|
|
|
|
.swiper-button-next:hover {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-bottom {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
.appearanceAlarm-content-bottom-title {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
border-left: 3px solid #46A9ED;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-bottom-info {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
i {
|
|
|
|
|
font-style: normal;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-bottom-info:nth-of-type(1) {
|
|
|
|
|
margin: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
.appearanceAlarm-content-bottom-btn {
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
text-align: end;
|
|
|
|
|
.appearanceAlarm-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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
JINGYJ
1 month ago