feat(站点概览): 添加状态和告警自定义弹窗组件

refactor(样式): 重构弹窗样式并分离状态和告警样式
style: 调整页面间距和布局

src/assets/styles/1.html

@@ -0,0 +1,16 @@
+<div class="card">
+    <div id="content">
+
+    </div>
+</div>
+
+<script type="text/javascript">
+    // 定义每个状态对应的图片URL
+    const titleList = ['运行正常', '运行异常', '未运行']
+    let titleHtml = ""
+    titleList.forEach((title, index) => {
+        titleHtml += `我是标题${title}<br>`
+    })
+    document.getElementById('content').innerHTML = titleHtml
+
+</script>

src/assets/styles/dialog.scss

@@ -1,3 +1,7 @@
+.no-header-dialog {
+    height: auto;
+}
+
 #custom-dialog {
     padding: 0;
     top: 0;
@@ -11,9 +15,11 @@
 
     .el-dialog__body {
         padding: 0 !important;
+        // height: auto !important;
+        max-height: none !important;
     }
 
-    .alert-content {
+    .status-alert-content {
         background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
         display: flex;
         align-items: center;
@@ -99,15 +105,118 @@
         }
     }
 
-    .alert-content .success {
+    .status-alert-content .success {
         color: rgba(0, 184, 122, 1) !important;
     }
 
-    .alert-content .orange {
+    .status-alert-content .orange {
         color: rgba(255, 153, 0, 1) !important;
     }
 
-    .alert-content .red {
+    .status-alert-content .red {
+        color: rgba(227, 39, 39, 1) !important;
+    }
+
+    .alarm-alert-content {
+        background: linear-gradient(180deg, rgba(255, 87, 51, 0.23) 0%, rgba(255, 219, 219, 0) 100%);
+        padding-left: 50px;
+        padding-right: 50px;
+        padding-bottom: 50px;
+
+        .top {
+            display: flex;
+            gap: 50px;
+            align-items: center;
+            padding: 50px 0;
+            padding-bottom: 20px;
+
+            .info {
+                display: flex;
+                flex-direction: column;
+                gap: 15px;
+
+                .title {
+                    color: rgba(227, 39, 39, 1);
+                    font-size: 28px;
+                    font-weight: bold;
+                }
+
+                .alarm-id {
+                    color: rgba(0, 30, 59, 1);
+                    font-size: 18px;
+                    font-weight: bold;
+                }
+
+                .status-box {
+                    display: flex;
+                    gap: 20px;
+
+                    .status {
+                        font-weight: bold;
+                    }
+
+                    .last-update {
+                        color: rgba(113, 128, 150, 1);
+                    }
+                }
+            }
+
+            .info-box {
+                .list {
+                    display: flex;
+                    gap: 90px;
+
+                    .item {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 30px;
+
+                        .title {
+                            color: rgba(113, 128, 150, 1);
+                            margin-bottom: 10px;
+                        }
+
+                        .text {
+                            color: rgba(0, 30, 59, 1);
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+        }
+
+        .progress-box {
+            .title {
+                color: rgba(0, 30, 59, 1);
+                font-weight: bold;
+                font-size: 20px;
+                margin-bottom: 24px;
+            }
+        }
+
+        .notice-box {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .item {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            color: rgba(113, 128, 150, 1);
+
+            .time {
+                font-size: 12px;
+            }
+        }
+
+        .title.active {
+            color: rgba(247, 89, 10, 1);
+            font-weight: bold;
+        }
+    }
+
+    .alarm-alert-content .red {
         color: rgba(227, 39, 39, 1) !important;
     }
 }

src/components/TitleComponent/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-row>
+    <el-row v-if="titleStatus">
         <el-col>
             <div style="color: rgba(0, 30, 59, 1);font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
                 :style="{ fontSize: fontLevelMap[props.fontLevel] }">
@@ -11,10 +11,10 @@
                 {{ props.subtitle }}
             </p>
         </el-col>
-
     </el-row>
 </template>
 <script setup>
+const titleStatus = ref(false)
 const props = defineProps({
     title: String,
     subtitle: String,

src/views/pvSystem/mainSystemDiagram/index.vue

@@ -2,7 +2,7 @@
     <div style="padding: 20px;">
         <el-row>
             <el-col :span="15">
-                <el-row>
+                <el-row style="margin: 20px 0;">
                     <TitleComponent title="设备情况" subtitle="电站一次监控数据" />
                     <sbqk />
                 </el-row>

src/views/pvSystem/siteOverview/components/CustomDialogAlarm.vue

@@ -0,0 +1,93 @@
+<template>
+    <el-dialog :visible="dialogVisible" width="1200" id="custom-dialog" class="no-header-dialog normal">
+        <div class="alarm-alert-content success">
+            <el-row>
+                <el-col :span="22">
+                    <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>
+    </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+    dialogVisible: {
+        type: Boolean,
+        required: true, // 若外部必传，设为true；否则可加default: false
+        default: false // 可选：若外部可能不传，设置默认值
+    }
+});
+</script>

src/views/pvSystem/siteOverview/index.vue

@@ -5,7 +5,8 @@
                 <TitleComponent title="XXX电站·逆变器综合监控" subtitle="实时监控X台逆变器运行状态、发电趋势及环境信息" />
             </el-col>
             <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
-            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+            <el-col :span="12"
+                style="display: flex; justify-content: flex-end; align-items: center;margin-bottom: 20px;">
                 <!-- 子col1：输入框容器 -->
                 <el-col :span="8">
                     <el-input placeholder="请输入逆变器...">
@@ -32,7 +33,7 @@
                 </el-col>
             </el-col>
         </el-row>
-        <el-row style="display: flex; gap: 30px;" class="card">
+        <el-row style="display: flex; gap: 30px;margin: 20px 0;" class="card">
             <el-col style="flex: 1;" class="item">
                 <div class="box" style="height: 100%;display: flex;">
                     <div class="left"
@@ -161,7 +162,7 @@
                 </div>
             </el-col>
         </el-row>
-        <el-row>
+        <el-row style="margin: 20px 0;">
             <el-col :span="15">
                 <el-row style="display: flex;flex-direction: column;height: 100%;">
                     <div>
@@ -177,7 +178,7 @@
                 <QiXiang />
             </el-col>
         </el-row>
-        <el-row :gutter="20"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
+        <el-row style="margin: 20px 0;"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
             <!-- 标题列：占满12列（栅格系统默认12列） -->
             <el-col> <!-- span=12 表示占满一行宽度 -->
                 <TitleComponent title="逆变器运行状态" :fontLevel="2" />