1.新增报警管理部分图表

2.修改箭头为本地图片
3.优化部分样式
4.完成性能比水滴图
This commit is contained in:
re-JZzzz
2025-09-17 20:02:08 +08:00
parent f28a617bb3
commit 63167f66e7
23 changed files with 2184 additions and 90 deletions

View File

@ -6,14 +6,8 @@
<div class="card-title">总发电量</div>
<div class="card-value">{{ props.statusData.totalPower }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.totalPowerChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.totalPowerChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -37,14 +31,8 @@
<div class="card-title">系统效率</div>
<div class="card-value">{{ props.statusData.efficiency }}</div>
<div class="card-change negative">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 12.2252L15.15 12.3002L15.15 12.3752L15.075 12.3752C15.075 12.3752 15 12.3752 14.925 12.4502L11.25 12.4502C10.875 12.4502 10.575 12.1502 10.575 11.7752C10.575 11.4002 10.875 11.1002 11.25 11.1002L13.125 11.1002L9.52501 7.5002L7.72501 9.3002C7.35 9.67519 6.60001 9.67519 6.225 9.3002L3.075 6.1502C2.85 5.9252 2.85 5.4752 3.075 5.2502C3.22501 5.10019 3.37501 5.0252 3.525 5.0252C3.67501 5.0252 3.82501 5.0252 3.975 5.2502L6.9 8.1752L8.7 6.3752C9.07501 6.00019 9.825 6.00019 10.2 6.3752L13.95 10.1252L13.95 8.25019C13.95 7.87519 14.25 7.57519 14.625 7.57519C15 7.57519 15.3 7.87519 15.3 8.25019L15.3 11.6252L15.3 11.8502L15.15 12.2252Z"
fill="#E32727">
</path>
</svg>
{{ props.statusData.efficiencyChange }} 较上周
<img src="/src/assets/demo/down.png" alt="" class="change-icon">
<span>{{ props.statusData.efficiencyChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -65,14 +53,8 @@
<div class="card-title">组件温度</div>
<div class="card-value">{{ props.statusData.temperature }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.temperatureChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.temperatureChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -93,14 +75,8 @@
<div class="card-title">日照强度</div>
<div class="card-value">{{ props.statusData.sunlight }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.sunlightChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.sunlightChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -206,7 +182,7 @@ const props = defineProps({
margin-top: 4px;
&.positive {
color: #67c23a;
color: #00B87A;
}
&.negative {
@ -216,7 +192,7 @@ const props = defineProps({
.change-icon {
font-size: 10px;
margin-right: 2px;
margin-right: 5px;
}
.card-icon {

View File

@ -142,7 +142,7 @@ onUnmounted(() => {
.chart-content {
width: 100%;
height: calc(100% - 80px);
min-height: 200px;
min-height: 220px;
}
@media (max-width: 768px) {

View File

@ -185,7 +185,7 @@ onUnmounted(() => {
.chart-content {
width: 100%;
height: calc(100% - 80px);
min-height: 200px;
min-height: 220px;
}
@media (max-width: 768px) {

View File

@ -104,7 +104,7 @@ const mockData = ref({
totalPower: '3,456.8KWh',
totalPowerChange: '8.2%',
efficiency: '18.7%',
efficiencyChange: '-0.3%',
efficiencyChange: '0.3%',
temperature: '42.3°C',
temperatureChange: '2.1°C',
sunlight: '865 W/m²',