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

逆变器综合监控

Browse Source
This commit is contained in:
tcy
2025-08-27 17:45:27 +08:00
parent e7dc466c88
commit 93c2f6e512
22 changed files with 496 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/views/demo/components/gaojing.vue Normal file
View 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/demo/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/demo/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/demo/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/demo/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>