feat: 添加光伏系统主系统图页面及相关组件
新增主系统图页面及多个组件，包括设备情况、实时数据监控、功率输出趋势、操作指令记录等。添加天气图标、字体文件和样式资源，实现系统状态监控和操作功能。优化图表展示和交互体验，完善响应式布局。
This commit is contained in:
210
src/views/pvSystem/siteOverview/components/gaojing.vue
Normal file
210
src/views/pvSystem/siteOverview/components/gaojing.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<el-card shadow="never" style="border-radius: 10px;">
|
||||
<div style="margin-bottom: 20px;display: flex;align-items: center;justify-content: right;">
|
||||
<span style="margin-right: 5px;color: rgba(113, 128, 150, 1);font-size: 14px;">
|
||||
查看全部告警信息
|
||||
</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8"
|
||||
viewBox="0 0 8 8" fill="none">
|
||||
<path
|
||||
d="M5.94575 4.15722C5.94975 4.14947 5.95624 4.14298 5.95975 4.13497C6.0285 3.99197 6.00599 3.81697 5.88425 3.70197L3.1245 1.09172C2.97399 0.949466 2.73676 0.956216 2.59425 1.10648C2.45199 1.25698 2.4585 1.49422 2.60901 1.63673L5.08526 3.97922L2.61875 6.35647C2.46975 6.50021 2.46525 6.73746 2.60901 6.88672C2.6825 6.96321 2.78076 7.00148 2.87901 7.00148C2.97276 7.00148 3.06651 6.96648 3.13926 6.89648L5.87401 4.26073C5.87927 4.25547 5.88125 4.24823 5.88651 4.24274C5.89052 4.23899 5.89476 4.23623 5.89875 4.23224C5.92 4.20997 5.93124 4.18272 5.94575 4.15722Z"
|
||||
fill="#718096">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="notice">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<img src="/assets/zgjxx.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>总告警信息</p>
|
||||
<p style="color: rgba(42, 130, 228, 1);">1,921条</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<img src="/assets/ycl.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>已处理</p>
|
||||
<p style="color:rgba(0, 184, 122, 1);">500条</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<img src="/assets/zzcl.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>正在处理</p>
|
||||
<p style="color: rgba(255, 141, 26, 1);">200条</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<img src="/assets/wcl.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>未处理</p>
|
||||
<p style="color: rgba(227, 39, 39, 1);">1,221</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="list">
|
||||
<div class="item waring">
|
||||
<div class="left">
|
||||
<p class="title">
|
||||
逆变器温度过高
|
||||
</p>
|
||||
<p class="text">INV-2023-003 温度达到52℃，超过阈值48℃</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="time">
|
||||
10分钟前
|
||||
</div>
|
||||
<el-text type="warning" size="small">正在处理</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item danger">
|
||||
<div class="left">
|
||||
<p class="title">
|
||||
通信中断
|
||||
</p>
|
||||
<p class="text">INV-2023-003 与监控系统通信中断</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="time">
|
||||
20分钟前
|
||||
</div>
|
||||
<el-text type="primary" size="small">查看详情</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item danger">
|
||||
<div class="left">
|
||||
<p class="title">
|
||||
通信中断
|
||||
</p>
|
||||
<p class="text">INV-2023-003 与监控系统通信中断</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="time">
|
||||
1小时前
|
||||
</div>
|
||||
<el-text type="primary" size="small">查看详情</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grey">
|
||||
<div class="left">
|
||||
<p class="title">
|
||||
逆变器温度过高
|
||||
</p>
|
||||
<p class="text">INV-2023-003 温度达到52℃，超过阈值48℃</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="time">
|
||||
2小时前
|
||||
</div>
|
||||
<!-- <el-text type="primary" size="small">查看详情</el-text> -->
|
||||
<el-button type="info" size="small" disabled>已处理</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.notice {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(32, 32, 32, 0.05);
|
||||
padding-bottom: 20px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content p:nth-child(2) {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.item {
|
||||
border-radius: 10px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.text {
|
||||
color: rgba(125, 133, 146, 1);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 12px;
|
||||
color: rgba(125, 133, 146, 1);
|
||||
|
||||
.time {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.waring {
|
||||
background-color: #FFFCE6;
|
||||
border: 1px solid #FFF0E1;
|
||||
|
||||
.title {
|
||||
color: #FFA408;
|
||||
}
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: #FFE9E5;
|
||||
border: 1px solid #FFEFEB;
|
||||
|
||||
.title {
|
||||
color: rgba(255, 87, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.grey {
|
||||
background-color: #F3F3F3;
|
||||
border: 1px solid #FCFCFC;
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup></script>
|
||||
Reference in New Issue
Block a user