VRSystem/tmptestproject/BlazorWeb1/Components/Pages/SensorDetailModal - 复制.razor


<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden">
        <!-- 模态框头部 -->
        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6 flex justify-between items-center">
            <h2 class="text-2xl font-bold text-white">传感器详细信息</h2>
            <button @onclick="OnClose"
                    class="text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-white rounded-full p-2 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <!-- 模态框内容 -->
        <div class="overflow-y-auto max-h-[70vh]">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">传感器</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数值</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当天预报警状态</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预报警信息</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @if (SensorData != null)
                    {
                        @foreach (var record in SensorData)
                        {
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@record.Sensor</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">@record.Value</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium
                                          @(record.Status == 0 ? "text-gray-900" :
                                            record.Status == 1 ? "text-yellow-600" : "text-red-600")">
                                    @(record.Status == 0 ? "正常" :
                                        record.Status == 1 ? "警告" : "严重")
                                </td>
                                <td class="px-6 py-4 text-sm
                                          @(record.Status == 0 ? "text-gray-500" :
                                            record.Status == 1 ? "text-yellow-600" : "text-red-600")">
                                    @record.Message
                                </td>
                            </tr>
                        }
                    }
                    else
                    {
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">暂无数据</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>

        <!-- 模态框底部 -->
        <div class="bg-gray-50 px-6 py-4 flex justify-end">
            <button @onclick="OnClose"
                    class="px-6 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
                关闭
            </button>
        </div>
    </div>
</div>

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

    [Parameter]
    public List<Home.SensorRecord> SensorData { get; set; }

    [Parameter]
    public EventCallback OnClose { get; set; }


  
}