shuochen
/
VRSystem


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
							@page "/"
@rendermode InteractiveServer
@using BlazorWeb1.Models
@using BlazorWeb1.Server
@using System.Timers
@inject PizzaService PizzaSvc
@inject NavigationManager Navigation
@* @inject UdpListenerService us *@


<head>
    <meta charset="utf-8" />
    @*     <link href="css/site.css" rel="stylesheet" /> *@
    <title>Blazing Pizza</title>
</head>

<div class="main">
    <div class="container">
        <div class="nozzle-content">
            <div class="grid-container">
                @{
                    int i = 0;

                    foreach (var item in items)
                    {
                        i++;
                        int num_page = ShowNozzleItem_Row * ShowNozzle_Col;

                        if (i >= currentPage * num_page+1 && i <= (currentPage + 1) * num_page)
                        {
                            <div class="grid-item">
                                <Nozzle BottomText=""
                                warnstate="@item.Value.warnstate"
                                NozNo="@item.Value.noz.ToString()"
                                VLR="@item.Value.VLR"
                                nozzlestate="@item.Value.nozzlestate"
                                OilName="@item.Value.oil" />
                            </div>
                        }
                    }
                }
            </div>
        </div>
    </div>


    <PageSwitcher CurrentPage="@currentPage"
    PageChanged="OnPageChanged" />


    <div class="infoctainer">

        <div class="sensorcontainer">
            <!-- 传感器按钮网格 -->
            <div class="button-row">
                <SensorButton SensorName="油罐压力" 
                AlertLevel="@alertLevels["oilTankPressure"]" 
                OnClick="@(() => ShowDetailModal("oilTankPressure"))" />

                <SensorButton SensorName="浓度信息" 
                AlertLevel="@alertLevels["concentrationInfo"]" 
                OnClick="@(() => ShowDetailModal("concentrationInfo"))" />
            </div>
            <div class="button-row">
                <SensorButton SensorName="管线压力" 
                AlertLevel="@alertLevels["pipelinePressure"]" 
                OnClick="@(() => ShowDetailModal("pipelinePressure"))" />

                <SensorButton SensorName="油罐温度" 
                AlertLevel="@alertLevels["oilTankTemperature"]" 
                OnClick="@(() => ShowDetailModal("oilTankTemperature"))" />
            </div>

            <!-- 详细信息模态框 -->
            @if (showModal)
            {
                <Modal Title="BasicModal"
                Style="top: 20px"
                @bind-Visible="@_visible_sensordetail">
                    <SensorDetailModal SensorType="@selectedSensor" 
                    SensorData="@sensorData[selectedSensor]" 
                    OnClose="@CloseModal" />

                </Modal>
            }
        </div>


        <div class="remoteinfocontainer">

            <div class="button-row">
                <button class="info-button">北京</button>
                <button class ="info-button-state"> 不开启上传</button>
            </div>
            <div class="button-row">
                <button class="info-button">无设置</button>
                <button class="info-button-state"> 不开启上传</button>
            </div>
            <div class="button-row">
                <button class="info-button">无设置</button>
                <button class="info-button-state"> 不开启上传</button>
            </div>

        </div>

    </div>
</div>


@code {
    private Dictionary<string, int> alertLevels = new Dictionary<string, int>
    {
        ["oilTankPressure"] = 0,
        ["concentrationInfo"] = 0,
        ["pipelinePressure"] = 0,
        ["oilTankTemperature"] = 0
    };

    private bool showModal = false;
    private string selectedSensor = "";
    bool _visible_sensordetail = false;

    // 示例传感器数据
    private Dictionary<string, List<SensorRecord>> sensorData = new Dictionary<string, List<SensorRecord>>
    {
        ["oilTankPressure"] = new List<SensorRecord>
        {
            new SensorRecord { Sensor = "PT-101A", Value = "2.5 MPa", Status = 0, Message = "正常" },
            new SensorRecord { Sensor = "PT-101B", Value = "2.3 MPa", Status = 1, Message = "轻微波动" },
            new SensorRecord { Sensor = "PT-102", Value = "2.7 MPa", Status = 2, Message = "高压预警" }
        },
        ["concentrationInfo"] = new List<SensorRecord>
        {
            new SensorRecord { Sensor = "CT-201", Value = "85%", Status = 0, Message = "正常" },
            new SensorRecord { Sensor = "CT-202", Value = "87%", Status = 1, Message = "接近上限" },
            new SensorRecord { Sensor = "CT-203", Value = "92%", Status = 2, Message = "浓度过高" }
        },
        ["pipelinePressure"] = new List<SensorRecord>
        {
            new SensorRecord { Sensor = "PL-301", Value = "3.2 MPa", Status = 0, Message = "正常" },
            new SensorRecord { Sensor = "PL-302", Value = "3.0 MPa", Status = 0, Message = "稳定" },
            new SensorRecord { Sensor = "PL-303", Value = "3.8 MPa", Status = 2, Message = "超压警报" }
        },
        ["oilTankTemperature"] = new List<SensorRecord>
        {
            new SensorRecord { Sensor = "TT-401", Value = "45°C", Status = 0, Message = "正常" },
            new SensorRecord { Sensor = "TT-402", Value = "52°C", Status = 1, Message = "温度升高" },
            new SensorRecord { Sensor = "TT-403", Value = "68°C", Status = 2, Message = "高温警告" }
        }
    };

    private void HandleAlertChange(string sensorType, int level)
    {
        alertLevels[sensorType] = level;
        StateHasChanged();
    }

    private void ShowDetailModal(string sensorType)
    {
        selectedSensor = sensorType;
        showModal = true;
        _visible_sensordetail = true;
    }

    private void CloseModal()
    {
        showModal = false;
        selectedSensor = "";
    }

    public class SensorRecord
    {
        public string Sensor { get; set; }
        public string Value { get; set; }
        public int Status { get; set; }
        public string Message { get; set; }
    }
}


@code {
    private Dictionary<int, NozzleState> items = new Dictionary<int, NozzleState>();

    private const int ShowNozzleItem_Row = 8;//每行显示的枪数
    private const int ShowNozzle_Col = 4;//每页显示的行数

    int totalpage = 0;
    int currentPage = 0;


    private void OnPageChanged(int pageIndex)
    {
        currentPage = pageIndex;


    }


    private Timer timer;
    private bool isAutoRefreshEnabled = true;
    private DateTime lastUpdateTime = DateTime.Now;


    protected override async Task OnInitializedAsync()
    {
        await RefreshData();
        StartTimer();
    }

    private void StartTimer()
    {
        timer = new Timer(1000); // 1秒间隔
        timer.Elapsed += async (sender, e) => await RefreshData();
        timer.Start();
    }

    private async Task RefreshData()
    {
        var nozzlestates = GlobalTool.g_mNozzleState;//us.GetNozzleState();
        try
        {
            // 更新UI
            await InvokeAsync(() =>
            {
                items = nozzlestates;// mockData;
                lastUpdateTime = DateTime.Now;
                StateHasChanged();
            });
        }
        catch (Exception ex)
        {
            Console.WriteLine($"数据刷新失败: {ex.Message}");
        }
    }

    private void ToggleAutoRefresh()
    {
        isAutoRefreshEnabled = !isAutoRefreshEnabled;
        if (isAutoRefreshEnabled)
        {
            StartTimer();
        }
        else
        {
            timer?.Stop();
        }
    }

    public void Dispose()
    {
        timer?.Stop();
        timer?.Dispose();
    }

    public class NozzleData
    {
        public string IconUrl { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public int warnstate { get; set; }
        public string Line1 { get; set; }
        public string Line2 { get; set; }
        public string Line3 { get; set; }
    }
}


<style>
    .main {
        background-color: white;
    }

.container {
    padding: 5px;
        font-family: Arial, sans-serif;
        background-color: white;
}

    .nozzle-content {
        grid-area: main;
        padding: 5px;
        overflow-y: auto;
        /* 固定主要内容区域大小 */
        /* width: calc(100vw - 250px);
        height: calc(100vh - 110px); */
        width:950px;
        height: 340px;
        border-radius: 6px;
        border: 1px solid lightblue;
    }

.grid-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    margin-top: 5px;
}

.grid-item {
    background-color: #f0f8ff;
    border: 1px solid #b0e0e6;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    /* min-height: 60px; */
    display: flex;
    align-items: center;
    justify-content: center;
}


    .infoctainer {
        display: flex;
        margin-top: 10px;
        flex-direction: row;
        gap: 5px;
        padding: 10px;
        background-color: lightblue
    }

    .sensorcontainer {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        background-color:lightblue
    }

    .remoteinfocontainer {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        background-color: lightblue
    }


  .button-row {
        display: flex;
        gap: 5px;
    }

    .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;
    }


    .info-button {
        border: none;
        width: 80px;
        height: 40px;
        font-size: 16px;
        cursor: pointer;
        background: lightblue; 
    }


    .info-button-state {
        border: none;
        width: 120px;
        height: 40px;
        font-size: 16px;
        cursor: pointer;
        background: lightblue;
    }

    .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>


@* <style>
    .gridrow
    {
        background-color: aqua;
        border-color: #1861ac;
    }

    #components-grid-demo-playground [class~='ant-col'] {
        background: transparent;
        border: 0;
    }

        #components-grid-demo-playground [class~='ant-col'] > div {
            height: 120px;
            font-size: 14px;
            line-height: 120px;
            background: #0092ff;
            border-radius: 4px;
        }

    #components-grid-demo-playground pre {
        padding: 8px 16px;
        font-size: 13px;
        background: #f9f9f9;
        border-radius: 6px;
    }

        #components-grid-demo-playground pre.demo-code {
            direction: ltr;
        }

    #components-grid-demo-playground .ant-col {
        padding: 0;
    }
</style> *@


@* 
<table>
    <thead>
        <tr>
            <th>Pizza Name</th>
            <th>Description</th>
            <th>Vegetarian?</th>
            <th>Vegan?</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var pizza in todaysPizzas)
        {
            <tr >
                <td>@pizza.Name <CascadingValue Value="NickName"><Child Message=@pizza.Name> </Child></CascadingValue></td>
                <td>@pizza.Description</td>
                <td>@pizza.Vegetarian</td>
                <td>@pizza.Vegan</td>
                <td>@pizza.Price</td>
            </tr>
        }
    </tbody>
</table> *@


@* <ul class="pizza-cards">
    @if (specials != null)
    {
        @foreach (var special in specials)
        {
            <li class="image-item" style="background-image: url('@special.ImageUrl')">
                <div class="pizza-info">
                    <span class="title">@special.Name</span>
                    @special.Description
                    <span class="price">@special.GetFormattedBasePrice()</span>
                </div>
            </li>
        }
    }
</ul> *@

@code {

    string NickName = "ES";

    private Pizza[] todaysPizzas;

// protected override async Task OnInitializedAsync()
// {
//     todaysPizzas = PizzaSvc.GetPizzasAsync();
// }


    List<PizzaSpecial> specials = new();

    // protected override void OnInitialized()
    // {
    //     specials.AddRange(new List<PizzaSpecial>
    //     {
    //         new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
    //         new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
    //         new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
    //         new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
    //         new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
    //         new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }
    //     });
    // }
}