@page "/" @attribute [Authorize] @inject HttpClient Http @inject NavigationManager NavigationManager @inject AuthenticationStateProvider AuthenticationStateProvider @inject ILogger Logger @inject IJSRuntime JSRuntime داشبورد سنسورها @if (dashboard == null || isLoading) {

داشبورد شما در حال رشد است...

} else {

🌱 داشبورد هوشمند گلخانه

مدیریت لحظه‌ای و هوشمند محیط رشد گیاهان

@if (isLoading) {
}
@if (dashboard.ActiveAlerts != null && dashboard.ActiveAlerts.Any()) {
@foreach (var alert in dashboard.ActiveAlerts) {
هشدار سیستم

سنسور @alert.SensorTypeName @alert.SensorName در @alert.GreenhouseName

@alert.Title @alert.Condition مقدار فعلی: @alert.TriggeringValue @alert.StartedAtFormatted
}
} else {
همه چیز عالیه! 🌿

تمام سنسورها در وضعیت نرمال قرار دارند

}
@foreach (var w in dashboard.Widgets) {
@w.TypeName
@(w.Value?.ToString("0.0") ?? "--") @w.UnitSymbol
}
بازه زمانی نمایش داده‌ها
تا

تحلیل داده‌های سنسورها

@if (dashboard.Charts != null && dashboard.Charts.Any()) { @for (int i = 0; i < dashboard.Charts.Count; i++) { var chartGroup = dashboard.Charts[i]; } }
@if (dashboard.Charts != null && dashboard.Charts.Any()) { @for (int i = 0; i < dashboard.Charts.Count; i++) { var chartGroup = dashboard.Charts[i];
} }

جدول داده‌های سنسورها

@if (dashboard.Table != null && dashboard.Table.Any()) {
@foreach (var row in dashboard.Table) {
@row.Timestamp.Split(' ')[0]
@row.Value.Split(' ')[0] @(row.Value.Contains(' ') ? row.Value.Split(' ')[1] : "")
گلخانه @row.GreenhouseName
دستگاه @row.DeviceName
سنسور @row.SensorName
نوع @row.SensorType
}
@foreach (var row in dashboard.Table) { }
زمان
گلخانه
دستگاه
سنسور
نوع
مقدار
@row.Timestamp.Split(' ')[0] @(row.Timestamp.Contains(' ') ? row.Timestamp.Split(' ')[1] : "")
@row.GreenhouseName @row.DeviceName @row.SensorName @row.SensorType
@row.Value.Split(' ')[0] @(row.Value.Contains(' ') ? row.Value.Split(' ')[1] : "")
} else {

داده‌ای یافت نشد

در بازه زمانی انتخاب شده، هیچ داده‌ای ثبت نشده است

}
@if (dashboard.PivotTable != null && dashboard.PivotTable.Any()) {
@foreach (var row in dashboard.PivotTable) {
@row.Timestamp.Split(' ')[0]
@row.SensorValues.Count سنسور
@row.GreenhouseName
@row.DeviceName
@foreach (var sensor in row.SensorValues) {
@sensor.Key.Split('(')[0].Trim() @sensor.Value
}
}
@* ستون‌های داینامیک برای هر نوع سنسور *@ @if (dashboard.PivotColumns != null && dashboard.PivotColumns.Any()) { @foreach (var column in dashboard.PivotColumns) { } } else { @* اگر PivotColumns خالی باشد، از اولین ردیف استفاده کن *@ @foreach (var sensorKey in dashboard.PivotTable.FirstOrDefault()?.SensorValues.Keys.ToList() ?? new List()) { } } @foreach (var row in dashboard.PivotTable) { @* مقادیر سنسورها *@ @if (dashboard.PivotColumns != null && dashboard.PivotColumns.Any()) { @foreach (var column in dashboard.PivotColumns) { } } else { @* اگر PivotColumns خالی باشد *@ @foreach (var sensorKey in dashboard.PivotTable.FirstOrDefault()?.SensorValues.Keys.ToList() ?? new List()) { } } }
زمان
گلخانه
دستگاه
@column.DisplayName
@sensorKey
@{ var timeParts = row.Timestamp.Split(' '); var timeStr = timeParts.Length > 0 ? timeParts[0] : ""; var dateStr = timeParts.Length > 1 ? string.Join(" ", timeParts.Skip(1)) : ""; } @timeStr @dateStr
@row.GreenhouseName @row.DeviceName
@if (row.SensorValues.ContainsKey(column.DisplayName)) { var value = row.SensorValues[column.DisplayName]; var valueParts = value.Split(' '); var numberPart = valueParts.Length > 0 ? valueParts[0] : value; var unitPart = valueParts.Length > 1 ? string.Join(" ", valueParts.Skip(1)) : ""; @numberPart @if (!string.IsNullOrEmpty(unitPart)) { @unitPart } } else { -- }
@if (row.SensorValues.ContainsKey(sensorKey)) { var value = row.SensorValues[sensorKey]; var valueParts = value.Split(' '); var numberPart = valueParts.Length > 0 ? valueParts[0] : value; var unitPart = valueParts.Length > 1 ? string.Join(" ", valueParts.Skip(1)) : ""; @numberPart @if (!string.IsNullOrEmpty(unitPart)) { @unitPart } } else { -- }
} else {

داده‌ای یافت نشد

در بازه زمانی انتخاب شده، هیچ داده‌ای برای نمای ماتریسی ثبت نشده است

}
} @code { // code-behind moved to Home.razor.cs (separate file). See created file in this document. } // --- Home.razor.cs --- using FarabPortal.AdditionalSettings; using FarabPortal.DTOs.ClientApi.V1; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.SignalR.Client; using Microsoft.JSInterop; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using static FarabPortal.AdditionalSettings.Common; namespace FarabPortal.Components.Pages.Main { public partial class Home : ComponentBase, IAsyncDisposable { private HomeDashboardDto dashboard; private List greenhouses; private List devices; private HubConnection hubConnection; private bool isLoading = true; // در ابتدا لودینگ را فعال می‌کنیم // این متغیر برای جلوگیری از فراخوانی تکراری و غیرضروری JS است private int _lastRenderedDashboardHash; private string selectedGreenhouseId = ""; private string selectedDeviceId = ""; private DateTime? fromDate; private DateTime? toDate; // لیستی از نام سنسورهای موجود (برای چارت همه سنسورها) private List AvailableSensors = new(); protected override async Task OnInitializedAsync() { AdminState.OnChange += HandleCustomerChange; try { PageTitle = "خانه"; PageDescription = "مشاهده گزارش"; fromDate = DateTime.Today; toDate = DateTime.Today; await LoadInitialData(); await InitializeSignalR(); } catch (Exception ex) { Logger.LogError(ex, "Error in OnInitializedAsync of Home page"); InitializeEmptyDashboard(); } } protected override async Task OnAfterRenderAsync(bool firstRender) { // این بخش فقط یکبار برای کامپوننت‌های ثابت مثل DatePicker اجرا می‌شود if (firstRender) { await JSRuntime.InvokeVoidAsync("persianDatepickers.initialize"); } // این بخش چک می‌کند آیا داده‌های داشبورد جدید هستند و نیاز به رندر مجدد JS دارند یا خیر var currentDashboardHash = dashboard?.GetHashCode() ?? 0; if (dashboard != null && dashboard.Widgets.Any() && currentDashboardHash != _lastRenderedDashboardHash) { try { // یک تابع JS که هم نمودار و هم جداول را مقداردهی اولیه می‌کند await JSRuntime.InvokeVoidAsync("initializeDashboard", dashboard); // render combined "all sensors" chart and init sensor selector // we pass dashboard.Charts to JS and the JS will try to merge series by name await JSRuntime.InvokeVoidAsync("renderAllSensorsChart", dashboard?.Charts ?? new object[0]); // به‌روزرسانی تاریخ در DatePicker ها await JSRuntime.InvokeVoidAsync("persianDatepickers.setDates", fromDate?.ToString("yyyy-MM-dd"), toDate?.ToString("yyyy-MM-dd")); // هش را ذخیره می‌کنیم تا در رندرهای بعدی دوباره فراخوانی نشود _lastRenderedDashboardHash = currentDashboardHash; } catch (Exception ex) { Logger.LogError(ex, "Error calling JS interop in OnAfterRenderAsync"); } } } private async Task LoadInitialData() { InitializeEmptyDashboard(); await LoadGreenhousesAndDevices(); await LoadDashboardData(); } private async Task LoadDashboardData() { var currentCustomerId = AdminState.SelectedCustomerId; if (!currentCustomerId.HasValue) { InitializeEmptyDashboard(); return; } try { isLoading = true; await InvokeAsync(StateHasChanged); var query = new StringBuilder($"{NavigationManager.BaseUri}api/v1/dashboard/{currentCustomerId.Value}?"); if (!string.IsNullOrEmpty(selectedGreenhouseId)) query.Append($"greenhouseId={selectedGreenhouseId}&"); if (!string.IsNullOrEmpty(selectedDeviceId)) query.Append($"deviceId={selectedDeviceId}&"); if (fromDate.HasValue) query.Append($"fromDate={fromDate.Value:yyyy-MM-ddTHH:mm:ss}&"); if (toDate.HasValue) query.Append($"toDate={toDate.Value:yyyy-MM-ddTHH:mm:ss}&"); var url = query.ToString().TrimEnd('&', '?'); Logger.LogInformation($"Loading dashboard from: {url}"); dashboard = await Http.GetFromJsonAsync(url) ?? new HomeDashboardDto(); // Prepare AvailableSensors list (best-effort): AvailableSensors.Clear(); // first try PivotColumns if (dashboard.PivotColumns != null && dashboard.PivotColumns.Any()) { AvailableSensors.AddRange(dashboard.PivotColumns.Select(c => c.DisplayName)); } else if (dashboard.PivotTable != null && dashboard.PivotTable.Any()) { var keys = dashboard.PivotTable.First().SensorValues.Keys; AvailableSensors.AddRange(keys); } else if (dashboard.Charts != null && dashboard.Charts.Any()) { // fallback: collect series names foreach (var cg in dashboard.Charts) { var seriesList = cg?.Series as System.Text.Json.JsonElement?; } // Note: we just leave AvailableSensors empty if we can't extract easily } } catch (Exception ex) { Logger.LogError(ex, "Error loading dashboard data"); InitializeEmptyDashboard(); } finally { isLoading = false; await InvokeAsync(StateHasChanged); } } public async Task RefreshDashboard() { try { var fromDateStr = (await JSRuntime.InvokeAsync("persianDatepickers.getFromDate")).ToEnglishDigits(); var toDateStr = (await JSRuntime.InvokeAsync("persianDatepickers.getToDate")).ToEnglishDigits(); if (!string.IsNullOrEmpty(fromDateStr)) fromDate = DateTime.Parse(fromDateStr); else fromDate = DateTime.Today; if (!string.IsNullOrEmpty(toDateStr)) toDate = DateTime.Parse(toDateStr); else toDate = DateTime.Today; } catch (Exception ex) { Logger.LogError(ex, "Error getting dates from JS"); } await LoadDashboardData(); } private async Task OnGreenhouseChanged() { selectedDeviceId = ""; await LoadDevices(); await LoadDashboardData(); } private async Task HandleCustomerChange() { Logger.LogInformation($"Customer changed to: {AdminState.SelectedCustomerId}"); selectedGreenhouseId = ""; selectedDeviceId = ""; devices?.Clear(); await LoadInitialData(); } private async Task InitializeSignalR() { var currentCustomerId = AdminState.SelectedCustomerId; if (!currentCustomerId.HasValue) return; try { hubConnection = new HubConnectionBuilder() .WithUrl(NavigationManager.ToAbsoluteUri("/dashboardHub")) .WithAutomaticReconnect() .Build(); hubConnection.On("DashboardUpdated", async () => { await LoadDashboardData(); }); await hubConnection.StartAsync(); await hubConnection.InvokeAsync("JoinCustomerGroup", currentCustomerId.Value.ToString()); } catch (Exception ex) { Logger.LogError(ex, "Error initializing SignalR"); } } private async Task LoadGreenhousesAndDevices() { var currentCustomerId = AdminState.SelectedCustomerId; if (currentCustomerId.HasValue) { try { greenhouses = await Http.GetFromJsonAsync>( $"{NavigationManager.BaseUri}api/v1/dashboard/{currentCustomerId.Value}/greenhouses") ?? new(); } catch (Exception ex) { Logger.LogError(ex, "Error loading greenhouses"); greenhouses = new(); } } await LoadDevices(); } private async Task LoadDevices() { try { devices = string.IsNullOrEmpty(selectedGreenhouseId) ? new List() : await Http.GetFromJsonAsync>( $"{NavigationManager.BaseUri}api/v1/dashboard/{selectedGreenhouseId}/devices") ?? new(); } catch (Exception ex) { Logger.LogError(ex, "Error loading devices"); devices = new(); } } private async Task OnGreenhouseSelectionChanged(ChangeEventArgs e) { selectedGreenhouseId = e.Value?.ToString() ?? ""; selectedDeviceId = ""; await LoadDevices(); await LoadDashboardData(); } private async Task OnDeviceSelectionChanged(ChangeEventArgs e) { selectedDeviceId = e.Value?.ToString() ?? ""; await LoadDashboardData(); } private void InitializeEmptyDashboard() { dashboard = new HomeDashboardDto(); _lastRenderedDashboardHash = 0; // مهم: هش را ریست کن } public async ValueTask DisposeAsync() { AdminState.OnChange -= HandleCustomerChange; if (hubConnection != null) { await hubConnection.DisposeAsync(); } } } } // --- dashboard-charts.js --- "use strict"; window.chartInstances = window.chartInstances || {}; window.lastDashboardData = null; window.renderMultiCharts = function (chartsData) { console.log("renderMultiCharts called with data:", chartsData); window.lastDashboardData = { charts: chartsData }; // destroy previous instances Object.keys(window.chartInstances).forEach(key => { if (window.chartInstances[key] && window.chartInstances[key].destroy) { try { window.chartInstances[key].destroy(); } catch (e) { console.error(e); } } }); window.chartInstances = {}; if (!chartsData || chartsData.length === 0) { console.warn("No chart data available to render."); return; } const isDark = document.documentElement.getAttribute("data-bs-theme") === "dark"; chartsData.forEach(chartGroup => { const typeCode = chartGroup.typeCode || chartGroup.TypeCode; const typeName = chartGroup.typeName || chartGroup.TypeName; const series = chartGroup.series || chartGroup.Series || []; const containerId = `chart-${typeCode}`; const container = document.getElementById(containerId); if (!container) { console.error(`Chart container #${containerId} not found in the DOM.`); return; } if (series.length === 0 || !series[0].data) { container.innerHTML = `
داده‌ای برای این نمودار وجود ندارد.
`; return; } try { window.chartInstances[containerId] = Highcharts.chart(containerId, { chart: { type: 'line', backgroundColor: 'transparent', style: { fontFamily: 'inherit' } }, title: { text: null }, xAxis: { categories: series[0].categories, labels: { style: { color: isDark ? '#A1A5B7' : '#5E6278' } }, gridLineColor: isDark ? 'rgba(255, 255, 255, 0.1)' : '#E4E6EF', lineColor: isDark ? 'rgba(255, 255, 255, 0.1)' : '#E4E6EF' }, yAxis: { title: { text: null }, labels: { style: { color: isDark ? '#A1A5B7' : '#5E6278' } }, gridLineColor: isDark ? 'rgba(255, 255, 255, 0.1)' : '#E4E6EF' }, legend: { enabled: series.length > 1, itemStyle: { color: isDark ? '#A1A5B7' : '#5E6278' }, itemHoverStyle: { color: isDark ? '#FFFFFF' : '#000000' } }, series: series.map(s => ({ name: s.name, data: s.data, color: s.color })), tooltip: { shared: true, useHTML: true, headerFormat: '{point.key}', pointFormat: '', footerFormat: '
{series.name}: {point.y:.1f}
', backgroundColor: isDark ? '#2B2B40' : '#FFFFFF', borderColor: isDark ? '#4A4A62' : '#CCCCCC', style: { color: isDark ? '#FFFFFF' : '#333333' } }, credits: { enabled: false } }); console.log(`Chart for ${typeName} rendered successfully.`); } catch (error) { console.error(`Error rendering chart ${typeName}:`, error); } }); }; // Render combined "All Sensors" chart and build sensor filter UI window.renderAllSensorsChart = function (chartsData) { try { const containerId = 'chart-all-sensors'; const filterContainer = document.getElementById('chart-sensor-filter'); const container = document.getElementById(containerId); if (!container) return; // merge series from all charts by series.name const flatSeries = []; const categories = []; (chartsData || []).forEach(group => { const groupSeries = group.series || group.Series || []; groupSeries.forEach(s => { // ensure categories from the first series are used if (categories.length === 0 && s.categories) categories.push(...s.categories); const existing = flatSeries.find(x => x.name === s.name); if (!existing) { flatSeries.push({ name: s.name, data: Array.isArray(s.data) ? s.data.slice() : [], color: s.color }); } else { // if lengths differ, try to align by pushing values (best-effort) existing.data = existing.data.concat(Array.isArray(s.data) ? s.data : []); } }); }); // if no categories found, try to use first series categories const finalCategories = categories.length ? categories : ((chartsData[0] && (chartsData[0].series || chartsData[0].Series) && (chartsData[0].series[0] || chartsData[0].Series[0])?.categories) || []); // destroy previous instance if exists const instKey = containerId; if (window.chartInstances[instKey] && window.chartInstances[instKey].destroy) { try { window.chartInstances[instKey].destroy(); } catch (e) { console.warn(e); } } window.chartInstances[instKey] = Highcharts.chart(containerId, { chart: { type: 'line', backgroundColor: 'transparent', style: { fontFamily: 'inherit' } }, title: { text: null }, xAxis: { categories: finalCategories }, yAxis: { title: { text: null } }, legend: { enabled: true }, series: flatSeries.map(s => ({ name: s.name, data: s.data, color: s.color })), tooltip: { shared: true }, credits: { enabled: false } }); // build filter UI (checkboxes) if (filterContainer) { filterContainer.innerHTML = ''; flatSeries.forEach((s, idx) => { const id = `sensor-toggle-${idx}`; const label = document.createElement('label'); label.className = 'me-3'; label.style.display = 'inline-flex'; label.style.alignItems = 'center'; const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = true; cb.dataset.seriesName = s.name; cb.id = id; cb.style.marginLeft = '6px'; cb.addEventListener('change', function () { const series = window.chartInstances[instKey].series.find(x => x.name === s.name); if (series) series.setVisible(this.checked, true); }); const span = document.createElement('span'); span.textContent = s.name; label.appendChild(cb); label.appendChild(span); filterContainer.appendChild(label); }); } } catch (e) { console.error('renderAllSensorsChart error', e); } }; /* KPI responsive helper */ @media (min-width: 992px) { .col-kpi { width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important; padding: 0.5rem; } } @media (max-width: 991px) { .col-kpi { width: 50% !important;