tcy
31c1732af5
- 为对话框添加背景图片并调整布局 - 修改视频监控组件的小视频切换逻辑 - 调整天气卡片样式增加内边距和背景 - 修复视频监控组件展开/收起状态判断 - 为安全监控页面添加顶部间距
95 lines
5.0 KiB
Vue
95 lines
5.0 KiB
Vue
<template>
|
||
<el-dialog :visible="dialogVisible" width="1200" id="custom-dialog" class="no-header-dialog normal">
|
||
<div class="back">
|
||
<div class="alarm-alert-content success">
|
||
<el-row>
|
||
<el-col :span="20">
|
||
<div class="top">
|
||
<div class="info">
|
||
<div class="title">通信中断</div>
|
||
<div class="alarm-id">告警ID：INV-2023-003</div>
|
||
<div class="status-box">
|
||
<div class="status red">状态：待处理</div>
|
||
<div class="last-update">最后更新：刚刚</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-box">
|
||
<div class="list">
|
||
<div class="item">
|
||
<div>
|
||
<div class="title">告警位置</div>
|
||
<div class="text">光伏区A区-3排-08号</div>
|
||
</div>
|
||
<div>
|
||
<div class="title">告警级别</div>
|
||
<div class="text">二级告警（紧急）</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div>
|
||
<div class="title">预计解决时间</div>
|
||
<div class="text">2025-09-19 18:00</div>
|
||
</div>
|
||
<div>
|
||
<div class="title">上报时间</div>
|
||
<div class="text">2025-09-18 18:00</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div>
|
||
<div class="title">设备负责人</div>
|
||
<div class="text">李华（现场运维组）</div>
|
||
</div>
|
||
<div>
|
||
<div class="title">通知方式</div>
|
||
<div class="text">系统消息、短信、电话</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-divider vertical border-style="dashed"></el-divider>
|
||
<!-- 进度 -->
|
||
<div class="progress-box" style="margin-bottom: 24px;">
|
||
<div class="title">处理进度</div>
|
||
<el-progress :text-inside="true" color="#ABABAB" :stroke-width="10" :percentage="3"
|
||
:show-text="false" />
|
||
</div>
|
||
<div class="notice-box">
|
||
<div class="item">
|
||
<div class="title active">告警产生并通知</div>
|
||
<div class="time">2025-09-19 18:05</div>
|
||
<div class="content">系统检测到告警并通知负责人</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="title">任务指派</div>
|
||
<div class="time"></div>
|
||
<div class="content">指派任务给相关责任人</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="title">开始处理</div>
|
||
<div class="time"></div>
|
||
<div class="content">运维人员开始处理告警</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="title">告警产生</div>
|
||
<div class="time"></div>
|
||
<div class="content">告警已解决并记录结果</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
dialogVisible: {
|
||
type: Boolean,
|
||
required: true, // 若外部必传，设为true；否则可加default: false
|
||
default: false // 可选：若外部可能不传，设置默认值
|
||
}
|
||
});
|
||
</script> |