taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
refactor(样式): 重构弹窗样式并分离状态和告警样式
style: 调整页面间距和布局
This commit is contained in:
tcy
2025-09-22 19:47:06 +08:00
parent c027533d4f
commit 6d960a1fc7
8 changed files with 353 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/pvSystem/mainSystemDiagram/index.vue
View File

@ -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>

93
src/views/pvSystem/siteOverview/components/CustomDialogAlarm.vue Normal file
View File

@ -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>

102
src/views/pvSystem/siteOverview/components/CustomDialogStatus.vue Normal file
View File

File diff suppressed because one or more lines are too long

130
src/views/pvSystem/siteOverview/components/status.vue
View File

File diff suppressed because one or more lines are too long

9
src/views/pvSystem/siteOverview/index.vue
View File

@ -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" />