优化告警详情弹窗样式:加宽至720px、详情区域可滚动max-height 200px、pre-wrap换行、缩小标签宽度

main
haoliang 1 month ago
parent 689f0b1798
commit e1f086015c

@ -88,19 +88,21 @@
/>
<!-- 告警详情弹窗 -->
<el-dialog v-model="detailVisible" title="告警详情" width="600px" destroy-on-close>
<el-descriptions :column="1" border size="small">
<el-descriptions-item label="告警时间">{{ detailRow.createdAt }}</el-descriptions-item>
<el-descriptions-item label="告警类型">
<el-dialog v-model="detailVisible" title="告警详情" width="720px" destroy-on-close top="5vh">
<el-descriptions :column="1" border size="small" class="alert-detail-desc">
<el-descriptions-item label="告警时间" min-width="80">{{ detailRow.createdAt }}</el-descriptions-item>
<el-descriptions-item label="告警类型" min-width="80">
<el-tag :type="alertTypeTag(detailRow.alertType)" size="small">{{ alertTypeLabel(detailRow.alertType) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="标题">{{ detailRow.title }}</el-descriptions-item>
<el-descriptions-item label="机床">{{ detailRow.machineName || '-' }}</el-descriptions-item>
<el-descriptions-item label="详情">{{ detailRow.detail }}</el-descriptions-item>
<el-descriptions-item label="处理状态">
<el-descriptions-item label="标题" min-width="80">{{ detailRow.title }}</el-descriptions-item>
<el-descriptions-item label="机床" min-width="80">{{ detailRow.machineName || '-' }}</el-descriptions-item>
<el-descriptions-item label="详情" min-width="80">
<div class="alert-detail-text">{{ detailRow.detail }}</div>
</el-descriptions-item>
<el-descriptions-item label="处理状态" min-width="80">
<el-tag :type="detailRow.isResolved ? 'success' : 'danger'" size="small">{{ detailRow.isResolved ? '已处理' : '未处理' }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="处理时间">{{ detailRow.resolvedAt || '-' }}</el-descriptions-item>
<el-descriptions-item label="处理时间" min-width="80">{{ detailRow.resolvedAt || '-' }}</el-descriptions-item>
</el-descriptions>
<template #footer><el-button @click="detailVisible = false">关闭</el-button></template>
</el-dialog>
@ -222,3 +224,19 @@ onMounted(() => {
loadDrops()
})
</script>
<style scoped>
.alert-detail-text {
max-height: 200px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
font-size: 13px;
line-height: 1.6;
color: #303133;
padding: 4px 0;
}
.alert-detail-desc :deep(.el-descriptions__label) {
width: 80px;
}
</style>

Loading…
Cancel
Save