106 lines
4.3 KiB
Plaintext
106 lines
4.3 KiB
Plaintext
@page "/"
|
|
@attribute [Authorize]
|
|
|
|
@using RobotNet.Script.Shares.Dashboard
|
|
@using RobotNet.WebApp.Clients
|
|
@using RobotNet.WebApp.Dashboard.Components
|
|
|
|
@inject IJSRuntime JSRuntime
|
|
@inject NavigationManager Nav
|
|
@inject DashboardHubClient DashboardHub
|
|
@inject ISnackbar Snackbar
|
|
|
|
<PageTitle>Dashboard</PageTitle>
|
|
|
|
<div class="d-flex w-100 h-100 flex-column overflow-hidden p-2">
|
|
<div class="dashboard-title">
|
|
<span>AMR MONITORING</span>
|
|
<div class="button-group">
|
|
<span class="me-4" style="font-size: 20px;">@timeUpdate</span>
|
|
<div>
|
|
<MudIconButton Icon="@Icons.Material.Filled.Refresh" Variant="Variant.Filled" OnClick="GetDashboardData" Color="Color.Info" />
|
|
</div>
|
|
<div>
|
|
<MudIconButton Class="mx-4" Icon="@Icons.Material.Filled.ZoomOutMap" OnClick="ToogleFullScreen" Variant="Variant.Filled" Color="Color.Info" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-content">
|
|
<div class="daily-data">
|
|
<DailyData @ref="DailyDataRef" />
|
|
</div>
|
|
<div class="charts">
|
|
<div class="performance-chart">
|
|
<div class="daily-performance-chart">
|
|
<PerformancePieChart @ref="TodayPerformancePieChartRef" ChartName="Today's AMR Performance" />
|
|
</div>
|
|
<div class="weeky-performance-chart">
|
|
<PerformancePieChart @ref="WeekyPerformancePieChartRef" ChartName="Weekly AMR Performance" />
|
|
</div>
|
|
</div>
|
|
<div class="weely-overall-chart">
|
|
<div class="mission-bar-chart">
|
|
<MissionsPerformanceBarChart @ref="MissionsPerformanceBarChartRef" />
|
|
</div>
|
|
<div class="takt-time-chart">
|
|
<TaktTimeLineChart @ref="TaktTimeLineChartRef" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private bool isFullScreen = false;
|
|
|
|
private DailyData DailyDataRef = default!;
|
|
private PerformancePieChart TodayPerformancePieChartRef = default!;
|
|
private PerformancePieChart WeekyPerformancePieChartRef = default!;
|
|
private MissionsPerformanceBarChart MissionsPerformanceBarChartRef = default!;
|
|
private TaktTimeLineChart TaktTimeLineChartRef = default!;
|
|
|
|
private string timeUpdate = "";
|
|
|
|
private async Task ToogleFullScreen()
|
|
{
|
|
await JSRuntime.InvokeVoidAsync("setFullscreen", isFullScreen ? false : true);
|
|
isFullScreen = isFullScreen ? false : true;
|
|
}
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
await base.OnAfterRenderAsync(firstRender);
|
|
if (!firstRender) return;
|
|
DashboardHub.DashboardDataUpdated += (async (value) => await DashboardHub_DashboardDataUpdated(value));
|
|
await DashboardHub.StartAsync();
|
|
await GetDashboardData();
|
|
}
|
|
|
|
private async Task GetDashboardData()
|
|
{
|
|
var dashboardData = await DashboardHub.GetDashboardData();
|
|
if (dashboardData.IsSuccess && dashboardData.Data is not null)
|
|
{
|
|
timeUpdate = dashboardData.Data.TimeUpdate;
|
|
DailyDataRef.UpdateData(dashboardData.Data.DailyMission);
|
|
await TodayPerformancePieChartRef.UpdateData(dashboardData.Data.TodayPerformance);
|
|
await WeekyPerformancePieChartRef.UpdateData(dashboardData.Data.ThisWeekPerformance);
|
|
await MissionsPerformanceBarChartRef.UpdateData(dashboardData.Data.TotalMissionPerformance);
|
|
await TaktTimeLineChartRef.UpdateData(dashboardData.Data.TaktTimeMissions);
|
|
}
|
|
else Snackbar.Add($"{(string.IsNullOrEmpty(dashboardData.Message) ? "Có lỗi xảy ra khi lấy dữ liệu dashboard" : dashboardData.Message)}");
|
|
StateHasChanged();
|
|
}
|
|
|
|
private async Task DashboardHub_DashboardDataUpdated(DashboardDto data)
|
|
{
|
|
timeUpdate = data.TimeUpdate;
|
|
DailyDataRef.UpdateData(data.DailyMission);
|
|
await TodayPerformancePieChartRef.UpdateData(data.TodayPerformance);
|
|
await WeekyPerformancePieChartRef.UpdateData(data.ThisWeekPerformance);
|
|
await MissionsPerformanceBarChartRef.UpdateData(data.TotalMissionPerformance);
|
|
await TaktTimeLineChartRef.UpdateData(data.TaktTimeMissions);
|
|
StateHasChanged();
|
|
}
|
|
}
|