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


<div >
    <button class="custom-button green"
            @onclick="OnClick">
        @SensorName
    </button>
</div>

@* <div class="sensor-button-container">
    <button class="w-full h-32 rounded-xl shadow-lg font-bold text-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-opacity-50
                  @(AlertLevel == 0 ? "bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-300" :
                    AlertLevel == 1 ? "bg-yellow-100 text-yellow-800 animate-pulse hover:bg-yellow-200 focus:ring-yellow-300" :
                    "bg-red-100 text-red-800 animate-pulse hover:bg-red-200 focus:ring-red-300")"
            @onclick="OnClick">
        @SensorName
    </button>
</div> *@

@code {
    [Parameter]
    public string SensorName { get; set; }

    [Parameter]
    public int AlertLevel { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }



    // 模拟传感器值变化（实际应用中由后台推送）
    protected override void OnInitialized()
    {
        // 每隔几秒随机更改告警级别以演示效果
        Timer timer = new Timer(async _ =>
        {
            Random random = new Random();
            int newLevel = random.Next(0, 3);
            if (newLevel != AlertLevel)
            {
                //await OnAlertChange.InvokeAsync((SensorName.ToLower().Replace(" ", ""), newLevel));
            }
        }, null, TimeSpan.FromSeconds(5), TimeSpan.FromSeconds(10));
    }
}

    <style>


    .custom-button {
        padding: 5px 10px;
        border: none;
        width: 150px;
        height: 50px;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .custom-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

    .green {
        background-color: #4CAF50;
        color: white;
    }

    .yellow {
        background-color: #FFEB3B;
        color: black;
    }

    .red {
        background-color: #F44336;
        color: white;
    }

    .default {
        background-color: #e0e0e0;
        color: black;
    }
    </style>