VRSystem/EasyTemplate.Blazor.Web/Components/Pages/Dashboard/NozzleCard.razor

@using EasyTemplate.Service

<article class="nozzle-card @cardClass">
    <div class="nozzle-header">
        <span class="nozzle-number">@NozNo#</span>
        <span class="oil-type">@OilName</span>
    </div>
    
    <div class="nozzle-body">
        <div class="icon-container @iconContainerClass">
            @if (showFlowAnimation)
            {
                <div class="flow-indicator">
                    <span class="flow-chevron">⌃</span>
                    <span class="flow-chevron">⌃</span>
                </div>
            }
            
            @if (hasAlarmDot)
            {
                <div class="alarm-dot"></div>
            }
            
            <span class="fuel-icon">⛽</span>
        </div>
    </div>
    
    <div class="nozzle-footer">
        <div class="air-liquid-ratio">
            <span class="ratio-label">气液比</span>
            <span class="ratio-value @ratioValueClass">@VLR</span>
        </div>
        
        @if (!string.IsNullOrEmpty(statusText))
        {
            <span class="status-badge @statusBadgeClass">@statusText</span>
        }
    </div>
</article>

@code {
    [Parameter] public string NozNo { get; set; } = "";
    [Parameter] public string OilName { get; set; } = "";
    [Parameter] public string VLR { get; set; } = "";
    [Parameter] public int warnstate { get; set; }
    [Parameter] public int nozzlestate { get; set; }

    private string cardClass => warnstate switch
    {
        1 => "warning",
        2 => "alarm",
        3 => "offline",
        _ => "normal"
    };

    private string iconContainerClass => warnstate switch
    {
        1 => "icon-warning",
        2 => "icon-alarm",
        3 => "icon-offline",
        _ when nozzlestate == GlobalTool.NozzleState_Filling => "icon-filling",
        _ => "icon-normal"
    };

    private bool showFlowAnimation => nozzlestate == GlobalTool.NozzleState_Filling && (warnstate == 0 || warnstate == 1);
    
    private bool hasAlarmDot => warnstate == 2;
    
    private string statusText => nozzlestate switch
    {
        GlobalTool.NozzleState_Filling when warnstate != 2 => "加油中",
        GlobalTool.NozzleState_Idle => "空闲",
        GlobalTool.NozzleState_Offline => "离线",
        _ => ""
    };

    private string statusBadgeClass => warnstate switch
    {
        1 => "badge-warning",
        2 => "badge-alarm",
        3 => "badge-offline",
        _ when nozzlestate == GlobalTool.NozzleState_Filling => "badge-filling",
        _ => "badge-idle"
    };

    private string ratioValueClass => warnstate switch
    {
        1 => "text-warning",
        2 => "text-alarm",
        3 => "text-offline",
        _ => "text-normal"
    };
}

<style>
.nozzle-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nozzle-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nozzle-card.normal {
    border-color: #10b981;
}

.nozzle-card.warning {
    border: 2px solid #f59e0b;
    background-color: rgba(251, 146, 60, 0.03);
}

.nozzle-card.alarm {
    border: 2px solid #ef4444;
    background-color: rgba(239, 68, 68, 0.03);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}

.nozzle-card.offline {
    border-color: #cbd5e1;
    opacity: 0.75;
}

.nozzle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nozzle-number {
    font-size: 14px;
    font-family: monospace;
    font-weight: bold;
    color: #1e293b;
}

.oil-type {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.nozzle-card.warning .oil-type {
    background-color: #fef3c7;
    color: #f59e0b;
    border-color: #fcd34d;
}

.nozzle-card.alarm .oil-type {
    background-color: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
}

.nozzle-card.offline .oil-type {
    background-color: #f1f5f9;
    color: #94a3b8;
    border-color: #cbd5e1;
}

.nozzle-body {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
}

.icon-container {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-width: 2px;
    border-style: solid;
}

.icon-normal {
    background-color: #f8fafc;
    border-color: #10b981;
    color: #10b981;
}

.icon-filling {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.icon-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.icon-alarm {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
}

.icon-offline {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #94a3b8;
}

.flow-indicator {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flow-chevron {
    font-size: 8px;
    color: #10b981;
    animation: flowUp 1s linear infinite;
}

.flow-chevron:nth-child(2) {
    animation-delay: 0.3s;
}

@@keyframes flowUp {
    0% {
        transform: translateY(8px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-8px);
        opacity: 0;
    }
}

.alarm-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background-color: #ef4444;
    border-radius: 50%;
    animation: bounce 1s infinite;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

@@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
    }
    50% {
        transform: translateY(0);
    }
}

.fuel-icon {
    z-index: 1;
}

.nozzle-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 20px;
    margin-top: 4px;
}

.air-liquid-ratio {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ratio-label {
    font-size: 9px;
    color: #64748b;
}

.ratio-value {
    font-size: 12px;
    font-family: monospace;
    font-weight: bold;
}

.text-normal {
    color: #10b981;
}

.text-warning {
    color: #f59e0b;
}

.text-alarm {
    color: #ef4444;
}

.text-offline {
    color: #94a3b8;
}

.status-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-filling {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-idle {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-alarm {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-offline {
    background-color: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
}
</style>