shuochen
/
VRSystem


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
							@page "/"
@rendermode InteractiveServer
@using EasyTemplate.Tool.Util
@attribute [ReuseTabsPage(Title = "主页", Pin = true, Closable = false, Order = 0)]
@using Microsoft.AspNetCore.Components
@using EasyTemplate.Service
@using System.Timers

@* @inject UdpListenerService us *@

@* 
<p>@udpdata</p> *@


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


@* 

<GridContent>
    <Row Type="flex" Gutter="24">
        <AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
            <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard Title="Total Sales"
                       Total="$ 126,560"
                       ContentHeight="46">
                <ChildContent>
                    <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Trend Flag="up">
                        WoW Change
                        <span class="trendText">12%</span>
                    </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Trend>
                    <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Trend Flag="down">
                        DoD Change
                        <span class="trendText">11%</span>
                    </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Trend>
                </ChildContent>
                <Footer>
                    <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.Field Label="Daily Sale" Value="$12,423" />
                </Footer>
            </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard>
        </AntDesign.Col>
        <AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
            <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard Title="今日Api访问次数"
                                                                                            Total="@SystemStatistics.ApiDaily.ToString()"
                       ContentHeight="46">
                <Footer>
                    <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.Field Label="Api访问总数" Value="@SystemStatistics.ApiTotal.ToString()" />
                </Footer>
            </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard>
        </AntDesign.Col>
        <AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
            <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard Title="Payments"
                       Total="6560"
                       ContentHeight="46">
                <ChildContent>
                    <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.MiniBar />
                </ChildContent>
                <Footer>
                    <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.Field Label="Conversion Rate" Value="60%" />
                </Footer> 
            </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard>
        </AntDesign.Col>
        <AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
            <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard Title="Operational Effect"
                       Total="78%"
                       ContentHeight="46">
                <ChildContent>
                    <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.MiniProgress Percent="78" 
                        StrokeWidth="8" 
                        Target="80" 
                        Color="#13C2C2" />
                </ChildContent>
                <Footer>
                    <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.Field Label="Conversion Rate" Value="60%" />
                </Footer>
            </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard>
        </AntDesign.Col>
    </Row>
    <div class="salesCard">
        <Card>
            <Tabs TabBarStyle="margin-bottom: 24px;">
                <TabPane Key="1" Tab="服务管理">
                    <Descriptions Bordered>
                        <DescriptionsItem Title="Mysql服务" Span="3">
                            <Badge Status="@MySqlStatus" Text="@MySqlText"></Badge>
                        </DescriptionsItem>
                        <DescriptionsItem Title="账号异常更新状态服务" Span="3">
                            <Badge Status="BadgeStatus.Success" Text="运行中"></Badge>
                        </DescriptionsItem>
                    </Descriptions>
                </TabPane>
                <TabPane Key="2" Tab="服务器信息">
                    <Descriptions Bordered>
                        <DescriptionsItem Title="服务器名称" Span="3">@Environment.MachineName</DescriptionsItem>
                        <DescriptionsItem Title="操作系统" Span="3">@System.Runtime.InteropServices.RuntimeInformation.OSDescription</DescriptionsItem>
                        <DescriptionsItem Title="系统架构" Span="3">@System.Runtime.InteropServices.RuntimeInformation.OSArchitecture</DescriptionsItem>
                        <DescriptionsItem Title="已使用内存/总内存" Span="3">@ComputerInfo.RAMUsage</DescriptionsItem>
                        <DescriptionsItem Title="内存使用率" Span="3">
                            <Badge Status="@RAMStatus" Text="@ComputerInfo.RAMUsageRate"></Badge>
                        </DescriptionsItem>
                        <DescriptionsItem Title="系统盘占用/系统盘总空间" Span="3">@ComputerInfo.SystemDiskUsage</DescriptionsItem>
                        <DescriptionsItem Title="系统盘使用率" Span="3">
                            <Badge Status="@SystemDiskStatus" Text="@ComputerInfo.SystemDiskUsageRate"></Badge>
                        </DescriptionsItem>
                    </Descriptions>
                </TabPane>
                <TabPane Key="3" Tab="项目框架">
                    <Descriptions Bordered>
                        <DescriptionsItem Title="环境变量" Span="3">@Environment.MachineName</DescriptionsItem>
                        <DescriptionsItem Title=".Net版本" Span="3">@System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription</DescriptionsItem>
                        <DescriptionsItem Title="启动时间" Span="3">@System.Diagnostics.Process.GetCurrentProcess().StartTime.ToString("yyyy-MM-dd HH:mm:ss")</DescriptionsItem>
                    </Descriptions>
                </TabPane>
            </Tabs>
        </Card>
    </div>
</GridContent>

@inject NavigationManager NavigationManager;
@inject IMessageService MessageService;
@inject IJSRuntime IJSRuntime;

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await NavigationManager.RedirectLogin(IJSRuntime);
            await Statistics();
            await Information();
            await ServiceStatistics();
        }
    }

    private async Task ServiceStatistics()
    {
        try
        {
            using var con = Sql.Connect();
            await con.Queryable<SystemUser>().FirstAsync();

            MySqlStatus = BadgeStatus.Success;
            MySqlText = "运行中";
        }
        catch (Exception ex)
        {
            MySqlStatus = BadgeStatus.Error;
            MySqlText = $"服务异常（{ex.Message}）";
        }

        StateHasChanged();
    }

    private async Task Statistics()
    {
        SystemStatistics.ApiDaily = await Cache.Get<int>($"request_{DateTime.Now.ToString("yyyyMMdd")}"); 
        SystemStatistics.ApiTotal = await Cache.Get<int>($"request_total"); 
    }

    private async Task Information()
    {
        //windows环境
        ComputerInfo = Computer.GetComputerInfo();

        switch (ComputerInfo.RAMStatus)
        {
            default:
            case ComputerStatus.Normal: RAMStatus = BadgeStatus.Success; break;
            case ComputerStatus.Error: RAMStatus = BadgeStatus.Error; break;
            case ComputerStatus.Warning: RAMStatus = BadgeStatus.Warning; break;
        }

        switch (ComputerInfo.SystemDiskStatus)
        {
            default:
            case ComputerStatus.Normal: SystemDiskStatus = BadgeStatus.Success; break;
            case ComputerStatus.Error: SystemDiskStatus = BadgeStatus.Error; break;
            case ComputerStatus.Warning: SystemDiskStatus = BadgeStatus.Warning; break;
        }
    }

    IChartComponent chart1;

    private async Task OnTabChanged(string activeKey)
    {
        if (activeKey == "1")
        {

        }
        //    await _saleChart.ChangeData(data.SalesData);
        //else
        //    await _visitChart.ChangeData(data.SalesData);
    }

    private async Task onChart1_FirstRender(IChartComponent chart)
    {
        //var data1 = await ChartsDemoData.FireworksSalesAsync(NavigationManager, HttpClient);
        //chart1.ChangeData(data1);
    }

    readonly AreaConfig config1 = new AreaConfig()
        {
            XField = "Date",
            YField = "scales",
            XAxis = new ValueCatTimeAxis()
            {
                Range = new[] { 0, 1 },
                TickCount = 5
            },
            AreaStyle = new GraphicStyle()
            {
                Fill = "l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff"
            }
        };

    /// <summary>
    ///
    /// </summary>
    private SystemStatistics SystemStatistics = new SystemStatistics();
    /// <summary>
    ///
    /// </summary>
    private ComputerInfo ComputerInfo = new ComputerInfo();
    /// <summary>
    ///
    /// </summary>
    private BadgeStatus RAMStatus { get; set; }
    /// <summary>
    ///
    /// </summary>
    private BadgeStatus SystemDiskStatus { get; set; }
    /// <summary>
    /// 
    /// </summary>
    private BadgeStatus MySqlStatus { get; set; }
    /// <summary>
    /// 
    /// </summary>
    private string MySqlText { get; set; }
} *@