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

feat: 优化UI组件样式和交互逻辑

Browse Source 
- 为对话框添加背景图片并调整布局
- 修改视频监控组件的小视频切换逻辑
- 调整天气卡片样式增加内边距和背景
- 修复视频监控组件展开/收起状态判断
- 为安全监控页面添加顶部间距
This commit is contained in:
tcy
2025-09-23 10:50:47 +08:00
parent 6d960a1fc7
commit 31c1732af5
6 changed files with 97 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/pvSystem/siteOverview/components/CustomDialogAlarm.vue
View File

@ -1,83 +1,85 @@
<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 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>
<div class="info-box">
<div class="list">
<div class="item">
<div>
<div class="title">告警位置</div>
<div class="text">光伏区A区-3排-08号</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>
<div class="title">告警级别</div>
<div class="text">二级告警（紧急）</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>
<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 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>
</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>
<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="item">
<div class="title">任务指派</div>
<div class="time"></div>
<div class="content">指派任务给相关责任人</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>
<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>
</el-col>
</el-row>
</div>
</div>
</el-dialog>
</template>

15
src/views/pvSystem/siteOverview/components/qixiang.vue
View File

@ -2,13 +2,16 @@
<div class="cardItem">
<el-card>
<div class="tianqi"
style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px">
<div>
<img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px;padding: 20px;">
<div
style="width: 100%;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;margin: 0 20px;border-radius: 15px;padding: 20px;">
<div>
<img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
</div>
<div style="font-family: 'Alibaba-PuHuiTi-Bold'; font-size: 24px">31℃</div>
<div>晴朗</div>
<div style="color: rgba(154, 154, 154, 1); font-size: 14px">紫外线强度：<span>高</span></div>
</div>
<div style="font-family: 'Alibaba-PuHuiTi-Bold'; font-size: 24px">31℃</div>
<div>晴朗</div>
<div style="color: rgba(154, 154, 154, 1); font-size: 14px">紫外线强度：<span>高</span></div>
<div class="tianqi2">
<div class="item">
<div>