feat: 详情弹框和删除弹框开发
JINGYJ
2 weeks ago
parent
6256295c81
commit
030a2efae2
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@ -0,0 +1,168 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog class="alarmModal-wrap" v-model="show" @close="handleClose">
|
||||||
|
<!-- 自定义标题栏 -->
|
||||||
|
<template #header="{ close, titleId, titleClass }">
|
||||||
|
<div class="flex items-center justify-between alarm-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="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>
|
||||||
|
</div>
|
||||||
|
<div class="alarm-content-bottom">
|
||||||
|
<span class="alarm-content-bottom-title">列车信息:</span>
|
||||||
|
<div class="alarm-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="alarm-content-bottom-info">
|
||||||
|
<span class="mr-8">告警类型: <i>{{ info.alarm_type }}</i></span>
|
||||||
|
<span>故障类型: <i>{{ info.fault_type }}</i></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** 弹窗显隐 */
|
||||||
|
value: boolean;
|
||||||
|
info: Record<string, any>;
|
||||||
|
}
|
||||||
|
interface Emits {
|
||||||
|
(e: "update:value", val: boolean): void;
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
value: false,
|
||||||
|
info: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
|
// 处理对话框关闭事件
|
||||||
|
const handleClose = () => {
|
||||||
|
// emits('close');
|
||||||
|
};
|
||||||
|
|
||||||
|
const show = computed({
|
||||||
|
get() {
|
||||||
|
return props.value;
|
||||||
|
},
|
||||||
|
set(val: boolean) {
|
||||||
|
emit("update:value", val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.alarmModal-wrap.el-dialog {
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: url("@/assets/common/bg_real_dialog.png");
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 805px;
|
||||||
|
height: 612px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-dialog-header {
|
||||||
|
color: white;
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 8px;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-content {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 24px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.alarm-content-top {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between; /* 水平方向均匀分布间距 */
|
||||||
|
align-content: space-between; /* 垂直方向均匀分布间距 */
|
||||||
|
width: 752px;
|
||||||
|
height: 448px;
|
||||||
|
img {
|
||||||
|
width: 368px;
|
||||||
|
height: 216px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.alarm-content-bottom {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 12px;
|
||||||
|
.alarm-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;
|
||||||
|
|
||||||
|
}
|
||||||
|
.alarm-content-bottom-info {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.alarm-content-bottom-info:nth-of-type(1) {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue