feat: 添加光伏系统主系统图页面及相关组件
新增主系统图页面及多个组件，包括设备情况、实时数据监控、功率输出趋势、操作指令记录等。添加天气图标、字体文件和样式资源，实现系统状态监控和操作功能。优化图表展示和交互体验，完善响应式布局。
This commit is contained in:
219
src/views/pvSystem/mainSystemDiagram/components/sbqk.vue
Normal file
219
src/views/pvSystem/mainSystemDiagram/components/sbqk.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<el-card style="width: 100%;">
|
||||
<div class="container">
|
||||
<div class="item">
|
||||
<div class="top">
|
||||
<div class="icon">
|
||||
<img src="/assets/sb1.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<p class="t1">运行中</p>
|
||||
<p class="t2">当前状态</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
|
||||
viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
|
||||
<path
|
||||
d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
|
||||
stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="t1">平稳运行</span>
|
||||
<span class="t2">(30 days)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top">
|
||||
<div class="icon">
|
||||
<img src="/assets/sb2.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<p class="t1" style="font-size: 21px;">128小时</p>
|
||||
<p class="t2">运行时长</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
|
||||
viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
|
||||
<path
|
||||
d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
|
||||
stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="t1">平稳运行</span>
|
||||
<span class="t2">(30 days)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top">
|
||||
<div class="icon">
|
||||
<img src="/assets/sb3.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<p class="t1">5/8</p>
|
||||
<p class="t2">已完成步骤</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
|
||||
viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
|
||||
<path
|
||||
d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
|
||||
fill="#00B87A">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
<span class="t1">完成率98%</span>
|
||||
<span class="t2">(30 days)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top">
|
||||
<div class="icon">
|
||||
<img src="/assets/sb4.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<p class="t1" style="color: rgba(255, 153, 0, 1);">2条</p>
|
||||
<p class="t2">告警信息</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
|
||||
viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
|
||||
<path
|
||||
d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
|
||||
fill="#00B87A">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
<span class="t1">4%</span>
|
||||
<span class="t2">(30 days)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item day">
|
||||
<span class="text">34522天</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
font-family: "Alibaba-PuHuiTi-Bold";
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.day {
|
||||
flex: 1.5 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background-color: transparent !important;
|
||||
background-image: url('/assets/dayImg.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
position: relative;
|
||||
width: 120px;
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
color: rgba(24, 109, 245, 1);
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
margin-left: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
background-color: rgba(240, 249, 255, 1);
|
||||
padding: 30px 15px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
margin: 75px 0;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
.icon {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.t1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
font-size: 18px;
|
||||
color: rgba(62, 73, 84, 1);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.t1 {
|
||||
color: rgba(0, 184, 122, 1);
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
color: rgba(150, 155, 160, 1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user