maintenance_system/src/views/pvSystem/operatingCurve/components/box1/statusBox.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
                            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>