216 lines
14 KiB
Vue
216 lines
14 KiB
Vue
<template>
|
|
<div class="status-box">
|
|
<!-- 总发电量 -->
|
|
<div class="status-card electricity">
|
|
<div class="card-left">
|
|
<div class="card-title">总发电量</div>
|
|
<div class="card-value">{{ props.statusData.totalPower }}</div>
|
|
<div class="card-change positive">
|
|
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
|
|
<span>{{ props.statusData.totalPowerChange }} 较上周</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-right">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48"
|
|
height="48" viewBox="0 0 48 48" fill="none">
|
|
<path
|
|
d="M44.5 37L34 37L34 12C34 9.8 32.2 8 30 8L17 8C14.8 8 13 9.8 13 12L13 37L3.5 37C2.7 37 2 37.7 2 38.5C2 39.3 2.7 40 3.5 40L44.5 40C45.3 40 46 39.3 46 38.5C46 37.7 45.3 37 44.5 37ZM18 22.2L24.4 14.1C24.8 13.5 25.6 13.7 25.5 14.4L24.8 21.7L28.2 21.7C28.9 21.7 29.3 22.5 28.8 23.1L22.5 31.2C22.1 31.8 21.3 31.6 21.4 30.9L22 23.6L18.6 23.6C17.9 23.6 17.5 22.8 18 22.2Z"
|
|
fill="#2A82E4"></path>
|
|
<path
|
|
d="M6.99998 32L11 32L11 14L6.99998 14C4.8 14 3 15.8 3 18L3 28C3 30.2 4.8 32 6.99998 32ZM42 28L42 26L43 26C44.1 26 45 25.1 45 24L45 22C45 20.9 44.1 20 43 20L42 20L42 18C42 15.8 40.2 14 38 14L36 14L36 32L38 32C40.2 32 42 30.2 42 28Z"
|
|
fill="#2A82E4"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 系统效率 -->
|
|
<div class="status-card efficiency">
|
|
<div class="card-left">
|
|
<div class="card-title">系统效率</div>
|
|
<div class="card-value">{{ props.statusData.efficiency }}</div>
|
|
<div class="card-change negative">
|
|
<img src="/src/assets/demo/down.png" alt="" class="change-icon">
|
|
<span>{{ props.statusData.efficiencyChange }} 较上周</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-right">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46"
|
|
height="46.00018310546875" viewBox="0 0 46 46.00018310546875" fill="none">
|
|
<path
|
|
d="M23 0C10.2 0 0 10.2 0 23C0 35.8 10.2 46.0002 23 46.0002C35.8 46.0002 46.0002 35.8 46.0002 23C46.0002 10.2 35.8 0 23 0ZM30.2 21.8L26 28.6C26.6 29.2 26.8 30 26.8 31C26.8 33.2 25 35 22.8 35C20.6 35 18.8 33.2 18.8 31C18.8 28.8 20.6 27 22.8 27L23.4 27L27.4 20.2C27.8 19.4 28.8 19.2 29.4 19.6C30.4 20.2 30.8 21 30.2 21.8ZM33.6 18.2C31.8 14.2 27.8 11.4 23 11.4C18.2 11.4 14.2 14.2 12.4 18.2L8.4 16.4C11 10.8 16.6 7.00003 23 7.00003C29.4 7.00003 35 10.8 37.6 16.4L33.6 18.2Z"
|
|
fill="#FFEB3B"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 组件温度 -->
|
|
<div class="status-card temperature">
|
|
<div class="card-left">
|
|
<div class="card-title">组件温度</div>
|
|
<div class="card-value">{{ props.statusData.temperature }}</div>
|
|
<div class="card-change positive">
|
|
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
|
|
<span>{{ props.statusData.temperatureChange }} 较上周</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-right">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48"
|
|
height="48" viewBox="0 0 48 48" fill="none">
|
|
<path
|
|
d="M23.9734 0C10.7276 0 0 10.7363 0 23.9798C0 37.2236 10.7276 47.9532 23.9734 47.9532C37.2149 47.9532 47.9466 37.2235 47.9466 23.9798C47.9466 10.7363 37.2149 0 23.9734 0ZM22.8214 4.5566L25.8706 4.5566L25.8706 10.5392L22.8214 10.5392L22.8214 4.5566ZM13.7083 15.7488L9.47281 11.5156L11.6312 9.36379L15.8624 13.5905L13.7083 15.7488ZM15.2114 6.74917L17.9735 5.46455L20.5002 10.886L17.7424 12.1752L15.2114 6.74917ZM24.3931 41.4545C21.7465 41.4545 19.5967 39.3048 19.5967 36.6582C19.5967 34.5875 20.9072 32.8297 22.7443 32.1531L22.7443 18.4704L25.7934 18.4704L25.7934 32.0652C27.7549 32.6627 29.1894 34.4912 29.1894 36.6581C29.1895 39.3048 27.0439 41.4545 24.3931 41.4545ZM27.9648 10.8796L30.4914 5.45594L33.2579 6.74487L30.7269 12.1709L27.9648 10.8796ZM34.6625 15.7488L32.5084 13.5904L36.7394 9.3637L38.8894 11.5156L34.6625 15.7488Z"
|
|
fill="#FF5733"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日照强度 -->
|
|
<div class="status-card sunlight">
|
|
<div class="card-left">
|
|
<div class="card-title">日照强度</div>
|
|
<div class="card-value">{{ props.statusData.sunlight }}</div>
|
|
<div class="card-change positive">
|
|
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
|
|
<span>{{ props.statusData.sunlightChange }} 较上周</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-right">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48"
|
|
height="48" viewBox="0 0 48 48" fill="none">
|
|
<path
|
|
d="M25.791 40.836L25.791 48L22.209 48L22.209 40.836L25.791 40.836ZM10.824 34.641L13.359 37.173L8.292 42.24L5.76 39.705L10.824 34.641ZM37.17 34.638L42.237 39.702L39.702 42.237L34.638 37.17L37.17 34.638ZM24 10.029C24.2287 10.0289 24.4573 10.0344 24.6857 10.0456C24.9141 10.0567 25.1422 10.0735 25.3697 10.0958C25.5973 10.1182 25.8242 10.1461 26.0505 10.1796C26.2767 10.2131 26.502 10.2521 26.7263 10.2966C26.9506 10.3412 27.1737 10.3912 27.3956 10.4467C27.6174 10.5022 27.8378 10.5631 28.0567 10.6295C28.2755 10.6958 28.4926 10.7674 28.708 10.8444C28.9233 10.9214 29.1367 11.0036 29.348 11.0911C29.5593 11.1786 29.7683 11.2711 29.9751 11.3689C30.1818 11.4666 30.3861 11.5694 30.5878 11.6771C30.7895 11.7849 30.9885 11.8975 31.1846 12.015C31.3808 12.1326 31.574 12.2549 31.7642 12.3818C31.9544 12.5089 32.1413 12.6405 32.325 12.7767C32.5087 12.9129 32.689 13.0535 32.8658 13.1985C33.0427 13.3436 33.2158 13.4929 33.3853 13.6464C33.5548 13.8 33.7204 13.9576 33.8821 14.1193C34.0439 14.281 34.2015 14.4465 34.3552 14.616C34.5088 14.7854 34.6581 14.9585 34.8032 15.1353C34.9483 15.312 35.089 15.4922 35.2252 15.6759C35.3615 15.8596 35.4932 16.0465 35.6203 16.2366C35.7473 16.4268 35.8697 16.6199 35.9873 16.816C36.1049 17.0122 36.2176 17.2111 36.3255 17.4128C36.4333 17.6145 36.5361 17.8187 36.6339 18.0254C36.7317 18.2321 36.8243 18.4411 36.9119 18.6524C36.9994 18.8637 37.0817 19.077 37.1588 19.2923C37.2359 19.5076 37.3076 19.7247 37.374 19.9436C37.4404 20.1624 37.5014 20.3827 37.5569 20.6046C37.6125 20.8265 37.6627 21.0495 37.7072 21.2738C37.7519 21.4981 37.791 21.7234 37.8246 21.9496C37.8581 22.1758 37.8861 22.4027 37.9085 22.6303C37.931 22.8579 37.9478 23.0859 37.959 23.3143C37.9702 23.5427 37.9758 23.7713 37.9758 24C37.9758 24.2287 37.9702 24.4573 37.959 24.6857C37.9478 24.9141 37.931 25.1421 37.9085 25.3697C37.8861 25.5973 37.8581 25.8242 37.8246 26.0504C37.791 26.2766 37.7519 26.5019 37.7072 26.7262C37.6626 26.9505 37.6125 27.1735 37.5569 27.3954C37.5014 27.6172 37.4404 27.8376 37.374 28.0564C37.3076 28.2753 37.2359 28.4924 37.1588 28.7077C37.0817 28.923 36.9994 29.1363 36.9119 29.3476C36.8243 29.5589 36.7317 29.7679 36.6339 29.9746C36.5361 30.1813 36.4333 30.3855 36.3255 30.5872C36.2176 30.7889 36.1049 30.9878 35.9873 31.184C35.8697 31.3801 35.7473 31.5732 35.6203 31.7634C35.4932 31.9535 35.3615 32.1404 35.2252 32.3241C35.089 32.5078 34.9483 32.688 34.8032 32.8648C34.6581 33.0415 34.5088 33.2146 34.3552 33.384C34.2015 33.5534 34.0439 33.719 33.8821 33.8807C33.7204 34.0424 33.5548 34.2 33.3853 34.3536C33.2158 34.5071 33.0427 34.6564 32.8658 34.8014C32.689 34.9465 32.5087 35.0872 32.325 35.2233C32.1413 35.3595 31.9544 35.4911 31.7642 35.6182C31.574 35.7451 31.3808 35.8674 31.1846 35.985C30.9885 36.1025 30.7895 36.2151 30.5878 36.3229C30.3861 36.4306 30.1818 36.5334 29.9751 36.6311C29.7683 36.7289 29.5593 36.8214 29.348 36.9089C29.1367 36.9964 28.9233 37.0786 28.708 37.1556C28.4926 37.2326 28.2755 37.3042 28.0567 37.3705C27.8378 37.4369 27.6174 37.4978 27.3956 37.5533C27.1737 37.6088 26.9506 37.6588 26.7263 37.7034C26.502 37.7479 26.2767 37.7869 26.0505 37.8204C25.8242 37.8539 25.5973 37.8818 25.3697 37.9042C25.1422 37.9265 24.9141 37.9432 24.6857 37.9544C24.4573 37.9656 24.2287 37.9711 24 37.971C23.7713 37.971 23.5428 37.9654 23.3145 37.9542C23.0861 37.943 22.8582 37.9261 22.6306 37.9037C22.4031 37.8813 22.1762 37.8533 21.95 37.8198C21.7238 37.7862 21.4987 37.7471 21.2744 37.7025C21.0502 37.658 20.8271 37.6079 20.6053 37.5523C20.3835 37.4968 20.1632 37.4358 19.9444 37.3694C19.7257 37.303 19.5086 37.2313 19.2933 37.1543C19.078 37.0773 18.8648 36.995 18.6535 36.9075C18.4423 36.82 18.2333 36.7274 18.0266 36.6296C17.82 36.5319 17.6158 36.4291 17.4141 36.3213C17.2125 36.2136 17.0136 36.1009 16.8175 35.9833C16.6214 35.8658 16.4282 35.7435 16.2381 35.6165C16.048 35.4894 15.8611 35.3578 15.6775 35.2216C15.4938 35.0854 15.3136 34.9448 15.1369 34.7997C14.9601 34.6547 14.787 34.5054 14.6176 34.3518C14.4482 34.1983 14.2827 34.0407 14.121 33.879C13.9593 33.7173 13.8017 33.5518 13.6482 33.3824C13.4946 33.2129 13.3453 33.0398 13.2003 32.8631C13.0552 32.6864 12.9146 32.5062 12.7784 32.3225C12.6422 32.1389 12.5106 31.952 12.3835 31.7619C12.2565 31.5718 12.1342 31.3786 12.0167 31.1825C11.8991 30.9864 11.7864 30.7875 11.6787 30.5859C11.5709 30.3842 11.4681 30.18 11.3704 29.9734C11.2726 29.7667 11.18 29.5577 11.0925 29.3465C11.005 29.1352 10.9227 28.922 10.8457 28.7067C10.7687 28.4914 10.697 28.2743 10.6306 28.0556C10.5642 27.8368 10.5032 27.6165 10.4477 27.3947C10.3921 27.1729 10.342 26.9498 10.2975 26.7256C10.2528 26.5013 10.2137 26.2762 10.1802 26.05C10.1467 25.8238 10.1187 25.5969 10.0963 25.3694C10.0739 25.1418 10.057 24.9139 10.0458 24.6855C10.0346 24.4572 10.029 24.2287 10.029 24C10.029 23.7713 10.0346 23.5428 10.0458 23.3145C10.057 23.0861 10.0739 22.8582 10.0963 22.6306C10.1187 22.4031 10.1467 22.1762 10.1802 21.95C10.2137 21.7238 10.2528 21.4987 10.2975 21.2744C10.342 21.0502 10.3921 20.8271 10.4477 20.6053C10.5032 20.3835 10.5642 20.1632 10.6306 19.9444C10.697 19.7257 10.7687 19.5086 10.8457 19.2933C10.9227 19.078 11.005 18.8648 11.0925 18.6535C11.18 18.4423 11.2726 18.2333 11.3704 18.0266C11.4681 17.82 11.5709 17.6158 11.6787 17.4141C11.7864 17.2125 11.8991 17.0136 12.0167 16.8175C12.1342 16.6214 12.2565 16.4282 12.3835 16.2381C12.5106 16.048 12.6422 15.8611 12.7784 15.6775C12.9146 15.4938 13.0552 15.3136 13.2003 15.1369C13.3453 14.9601 13.4946 14.787 13.6482 14.6176C13.8017 14.4482 13.9593 14.2827 14.121 14.121C14.2827 13.9593 14.4482 13.8017 14.6176 13.6482C14.787 13.4946 14.9601 13.3453 15.1369 13.2003C15.3136 13.0552 15.4938 12.9146 15.6775 12.7784C15.8611 12.6422 16.048 12.5106 16.2381 12.3835C16.4282 12.2565 16.6214 12.1342 16.8175 12.0167C17.0136 11.8991 17.2125 11.7864 17.4141 11.6787C17.6158 11.5709 17.82 11.4681 18.0266 11.3704C18.2333 11.2726 18.4423 11.18 18.6535 11.0925C18.8648 11.005 19.078 10.9227 19.2933 10.8457C19.5086 10.7687 19.7257 10.697 19.9444 10.6306C20.1632 10.5642 20.3835 10.5032 20.6053 10.4477C20.8271 10.3921 21.0502 10.342 21.2744 10.2975C21.4987 10.2528 21.7238 10.2137 21.95 10.1802C22.1762 10.1467 22.4031 10.1187 22.6306 10.0963C22.8582 10.0739 23.0861 10.057 23.3145 10.0458C23.5428 10.0346 23.7713 10.029 24 10.029ZM48 22.209L48 25.791L40.836 25.791L40.836 22.209L48 22.209ZM7.164 22.209L7.164 25.791L0 25.791L0 22.209L7.164 22.209ZM8.292 5.766L13.359 10.83L10.824 13.362L5.76 8.298L8.292 5.766ZM40.824 4.641L43.359 7.173L38.292 12.24L35.76 9.705L40.824 4.641ZM25.791 0L25.791 7.164L22.209 7.164L22.209 0L25.791 0Z"
|
|
fill="#FFC300"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 接收从父组件传入的数据
|
|
const props = defineProps({
|
|
statusData: {
|
|
type: Object,
|
|
default: () => ({
|
|
totalPower: '0 KWh',
|
|
totalPowerChange: '0%',
|
|
efficiency: '0%',
|
|
efficiencyChange: '0%',
|
|
temperature: '0°C',
|
|
temperatureChange: '0°C',
|
|
sunlight: '0 W/m²',
|
|
sunlightChange: '0%'
|
|
})
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.status-box {
|
|
display: flex;
|
|
gap: 20px;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.status-card {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
min-width: 200px;
|
|
flex: 1;
|
|
max-width: calc(25% - 15px);
|
|
|
|
&.electricity {
|
|
background: rgba(232, 243, 255, 1);
|
|
border-image: linear-gradient(90deg, rgba(42, 130, 228, 1) 0%, rgba(0, 0, 0, 0) 100%) 0 0 1 0;
|
|
}
|
|
|
|
&.efficiency {
|
|
background: rgba(255, 255, 232, 1);
|
|
border-image: linear-gradient(90deg, rgba(255, 235, 59, 1) 0%, rgba(255, 235, 59, 0) 100%) 0 0 1 0;
|
|
}
|
|
|
|
&.temperature {
|
|
background: rgba(255, 232, 232, 1);
|
|
border-image: linear-gradient(90deg, rgba(255, 87, 51, 1) 0%, rgba(0, 0, 0, 0) 100%) 0 0 1 0;
|
|
|
|
}
|
|
|
|
&.sunlight {
|
|
background: rgba(255, 241, 227, 1);
|
|
border-image: linear-gradient(90deg, rgba(255, 141, 26, 1) 0%, rgba(255, 241, 227, 1) 100%) 0 0 1 0;
|
|
}
|
|
}
|
|
|
|
.card-left {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.card-right {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 12px;
|
|
color: #606266;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
|
|
.card-change {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
|
|
&.positive {
|
|
color: #00B87A;
|
|
}
|
|
|
|
&.negative {
|
|
color: #f56c6c;
|
|
}
|
|
}
|
|
|
|
.change-icon {
|
|
font-size: 10px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.card-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1200px) {
|
|
.status-card {
|
|
max-width: calc(50% - 10px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.status-card {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style> |