maintenance_system/src/views/pvSystem/siteOverview/components/CustomDialogAlarm.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>