This commit is contained in:
@@ -11,14 +11,15 @@ import Loading from '@/components/Loading'
|
|||||||
// زمان بهروزرسانی خودکار (به میلیثانیه) - میتوانید این مقدار را تغییر دهید
|
// زمان بهروزرسانی خودکار (به میلیثانیه) - میتوانید این مقدار را تغییر دهید
|
||||||
const AUTO_REFRESH_INTERVAL = 10 * 1000 // 10 ثانیه
|
const AUTO_REFRESH_INTERVAL = 10 * 1000 // 10 ثانیه
|
||||||
|
|
||||||
type TimeRange = '1day' | '1hour' | '2hours' | '6hours' | '10hours'
|
type TimeRange = 'today' | '1day' | '1hour' | '2hours' | '6hours' | '10hours'
|
||||||
|
|
||||||
const TIME_RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
|
const TIME_RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
|
||||||
{ value: '1day', label: 'یک روز' },
|
{ value: 'today', label: 'امروز' },
|
||||||
{ value: '1hour', label: 'یک ساعت اخیر' },
|
{ value: '1day', label: '۲۴ ساعت اخیر' },
|
||||||
{ value: '2hours', label: 'دو ساعت اخیر' },
|
|
||||||
{ value: '6hours', label: '۶ ساعت اخیر' },
|
|
||||||
{ value: '10hours', label: '۱۰ ساعت اخیر' }
|
{ value: '10hours', label: '۱۰ ساعت اخیر' }
|
||||||
|
{ value: '6hours', label: '۶ ساعت اخیر' },
|
||||||
|
{ value: '2hours', label: 'دو ساعت اخیر' },
|
||||||
|
{ value: '1hour', label: 'یک ساعت اخیر' },
|
||||||
]
|
]
|
||||||
|
|
||||||
function useQueryParam(name: string) {
|
function useQueryParam(name: string) {
|
||||||
@@ -62,7 +63,7 @@ export default function TelemetryPage() {
|
|||||||
let startDate: Date
|
let startDate: Date
|
||||||
let endDate: Date
|
let endDate: Date
|
||||||
|
|
||||||
if (timeRange === '1day') {
|
if (timeRange === 'today') {
|
||||||
// برای یک روز، از تاریخ انتخابی استفاده میکنیم
|
// برای یک روز، از تاریخ انتخابی استفاده میکنیم
|
||||||
const [year, month, day] = selectedDate.split('/').map(Number)
|
const [year, month, day] = selectedDate.split('/').map(Number)
|
||||||
startDate = persianToGregorian(year, month, day)
|
startDate = persianToGregorian(year, month, day)
|
||||||
@@ -75,6 +76,9 @@ export default function TelemetryPage() {
|
|||||||
const now = new Date()
|
const now = new Date()
|
||||||
|
|
||||||
switch (timeRange) {
|
switch (timeRange) {
|
||||||
|
case '1day':
|
||||||
|
startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000)
|
||||||
|
break
|
||||||
case '1hour':
|
case '1hour':
|
||||||
startDate = new Date(now.getTime() - 60 * 60 * 1000)
|
startDate = new Date(now.getTime() - 60 * 60 * 1000)
|
||||||
break
|
break
|
||||||
@@ -92,8 +96,8 @@ export default function TelemetryPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const startUtc = startDate.toString();
|
const startUtc = startDate.toISOString();
|
||||||
const endUtc = endDate.toString();
|
const endUtc = endDate.toISOString();
|
||||||
|
|
||||||
const result = await api.listTelemetry({ deviceId, startUtc, endUtc, pageSize: 100000 })
|
const result = await api.listTelemetry({ deviceId, startUtc, endUtc, pageSize: 100000 })
|
||||||
setTelemetry(result.items)
|
setTelemetry(result.items)
|
||||||
@@ -160,6 +164,25 @@ export default function TelemetryPage() {
|
|||||||
const gas = useMemo(() => sortedTelemetry.map(t => Number(t.gasPPM ?? 0)), [sortedTelemetry])
|
const gas = useMemo(() => sortedTelemetry.map(t => Number(t.gasPPM ?? 0)), [sortedTelemetry])
|
||||||
const lux = useMemo(() => sortedTelemetry.map(t => Number(t.lux ?? 0)), [sortedTelemetry])
|
const lux = useMemo(() => sortedTelemetry.map(t => Number(t.lux ?? 0)), [sortedTelemetry])
|
||||||
|
|
||||||
|
|
||||||
|
const tempMinMax = useMemo(() => {
|
||||||
|
const min = Math.min(...temp);
|
||||||
|
const max = Math.max(...temp);
|
||||||
|
return {
|
||||||
|
min: min < 0 ? Math.floor(min / 10) * 10 : 0,
|
||||||
|
max: max > 40 ? Math.floor(max / 10) * 10 : 40
|
||||||
|
}
|
||||||
|
}, [temp]);
|
||||||
|
|
||||||
|
const luxMinMax = useMemo(() => {
|
||||||
|
const max = Math.max(...lux);
|
||||||
|
return {
|
||||||
|
min: 0,
|
||||||
|
max: max > 2000 ? Math.floor(max / 1000) * 1000 : 2000
|
||||||
|
}
|
||||||
|
}, [lux]);
|
||||||
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Loading message="در حال بارگذاری دادهها..." />
|
return <Loading message="در حال بارگذاری دادهها..." />
|
||||||
}
|
}
|
||||||
@@ -264,16 +287,16 @@ export default function TelemetryPage() {
|
|||||||
<LineChart
|
<LineChart
|
||||||
labels={labels}
|
labels={labels}
|
||||||
series={[{ label: 'دما (°C)', data: temp, borderColor: '#ef4444', backgroundColor: '#fee2e2', fill: true }]}
|
series={[{ label: 'دما (°C)', data: temp, borderColor: '#ef4444', backgroundColor: '#fee2e2', fill: true }]}
|
||||||
yAxisMin={-10}
|
yAxisMin={tempMinMax.min}
|
||||||
yAxisMax={80}
|
yAxisMax={tempMinMax.max}
|
||||||
/>
|
/>
|
||||||
</Panel>
|
</Panel>
|
||||||
<Panel title="نور">
|
<Panel title="نور">
|
||||||
<LineChart
|
<LineChart
|
||||||
labels={labels}
|
labels={labels}
|
||||||
series={[{ label: 'Lux', data: lux, borderColor: '#a855f7', backgroundColor: '#f3e8ff', fill: true }]}
|
series={[{ label: 'Lux', data: lux, borderColor: '#a855f7', backgroundColor: '#f3e8ff', fill: true }]}
|
||||||
yAxisMin={0}
|
yAxisMin={luxMinMax.min}
|
||||||
yAxisMax={50000}
|
yAxisMax={luxMinMax.max}
|
||||||
/>
|
/>
|
||||||
</Panel>
|
</Panel>
|
||||||
<Panel title="گاز CO">
|
<Panel title="گاز CO">
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ function detectColor(title: string, icon?: string): 'light' | 'gas' | 'soil' | '
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function DashboardGrid({ children }: { children: React.ReactNode }) {
|
export function DashboardGrid({ children }: { children: React.ReactNode }) {
|
||||||
return <div className="grid gap-4 grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6">{children}</div>
|
return <div className="grid gap-4 grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-6">{children}</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Card({ title, value, subtitle, icon, color }: CardProps) {
|
export function Card({ title, value, subtitle, icon, color }: CardProps) {
|
||||||
|
|||||||
Reference in New Issue
Block a user