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

16
src/assets/styles/1.html Normal file
View File

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

117
src/assets/styles/dialog.scss
View File

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

4
src/components/TitleComponent/index.vue
View File

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

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