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

BIN
public/assets/dialog2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 685 KiB

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

@ -117,6 +117,13 @@
color: rgba(227, 39, 39, 1) !important;
}
.back {
background-image: url("/assets/dialog2.png");
background-size: 455px;
background-repeat: no-repeat;
background-position: 780px -65px;
}
.alarm-alert-content {
background: linear-gradient(180deg, rgba(255, 87, 51, 0.23) 0%, rgba(255, 219, 219, 0) 100%);
padding-left: 50px;
@ -130,6 +137,7 @@
padding: 50px 0;
padding-bottom: 20px;
.info {
display: flex;
flex-direction: column;

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>

14
src/views/securitySurveillance/components/spjk.vue
View File

@ -1,7 +1,7 @@
<template>
<el-row style="height: 100%;">
<el-card style="width: 100%;border-radius: 12px;height: 100%;">
<div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
<div style="display: flex;width: 100%;justify-content: flex-end;align-items: center;padding-bottom: 15px;">
<TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" />
<span style="color: rgba(24, 109, 245, 1);display: flex;align-items: center; cursor: pointer;">
<span>
@ -40,10 +40,13 @@
<el-row gutter="20">
<el-col :span="24" v-for="i in 3" :key="i">
<div class="item small" @click="() => {
activeIndex = videoList.length - 3 + i - 1;
// 计算要显示的视频索引 - 按照当前视频后面三个排序
const displayIndex = (activeIndex + i) % videoList.length;
activeIndex = displayIndex;
}">
<img :src="videoList[videoList.length - 3 + i - 1].url" alt="">
<div class="title">{{ videoList[videoList.length - 3 + i - 1].name }}</div>
<img :src="videoList[(activeIndex + i) % videoList.length].url" alt="">
<div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
</div>
</div>
</el-col>
</el-row>
@ -64,7 +67,7 @@
</template>
</el-row>
<el-row v-if="isExpanded">
<el-row v-if="!isExpanded">
<div class="pagination" v-if="activeTab !== 'record'">
<el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
@ -126,7 +129,6 @@ const videoList = ref([
<style scoped lang="scss">
.video-container {
.item {
height: 220px;
margin-bottom: 20px;

2
src/views/securitySurveillance/index.vue
View File

@ -24,7 +24,7 @@
</el-row> <!-- 闭合内层 el-row -->
</el-col>
</el-row>
<el-row>
<el-row style="margin-top: 20px;">
<Top />
</el-row>
<el-row style="margin-top: 20px;" :gutter="25">