trust-module-frontend/src/Charts2/Components/StatusLogTable.jsx

86 lines
2.4 KiB
JavaScript

// src/Components/StatusLogTable.jsx
import React from 'react';
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Chip,
Typography
} from '@mui/material';
const statusColors = {
'0': 'default',
'1': 'success',
'2': 'warning',
'3': 'error'
};
const StatusLogTable = ({ logs }) => {
return (
<TableContainer component={Paper} sx={{ mt: 2, maxHeight: 400 }}>
<Table stickyHeader size="small">
<TableHead>
<TableRow>
<TableCell>Время</TableCell>
<TableCell>Устройство</TableCell>
<TableCell>Модуль</TableCell>
<TableCell>Статус</TableCell>
<TableCell>Значение</TableCell>
<TableCell>Описание</TableCell>
</TableRow>
</TableHead>
<TableBody>
{logs.map((log, index) => (
<TableRow key={index}>
<TableCell>
{new Date(log.timestamp).toLocaleString()}
</TableCell>
<TableCell>{log.device}</TableCell>
<TableCell>{log.source_id?.split('$')[1]}</TableCell>
<TableCell>
<Chip
label={getStatusText(log.status)}
color={statusColors[log.status] || 'default'}
size="small"
/>
</TableCell>
<TableCell>{parseFloat(log.value).toFixed(2)}</TableCell>
<TableCell>
<Typography variant="body2">
{log.description || getStatusDescription(log.status)}
</Typography>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
// Вспомогательные функции
const getStatusText = (status) => {
const statusMap = {
'0': 'Нет соединения',
'1': 'Норма',
'2': 'Отклонение',
'3': 'Критично'
};
return statusMap[status] || 'Неизвестно';
};
const getStatusDescription = (status) => {
const descriptions = {
'0': 'Устройство не отвечает',
'1': 'Параметры в норме',
'2': 'Обнаружены отклонения от нормы',
'3': 'Критическое состояние системы'
};
return descriptions[status] || 'Статус неизвестен';
};
export default StatusLogTable;