From 61c623b93dc29a428c0e2d21468a2f5e4be26013 Mon Sep 17 00:00:00 2001 From: DmitriyA Date: Tue, 8 Jul 2025 04:46:12 -0400 Subject: [PATCH] Range editor update --- src/Charts2/Components/StatusLogTable.jsx | 43 +++---------------- .../SettingsComponents/MetricRangeEditor.jsx | 43 +++++++++++++++---- .../SettingsComponents/statusConfig.jsx | 27 ++++++++++++ 3 files changed, 67 insertions(+), 46 deletions(-) create mode 100644 src/Components/Layout/SettingsComponents/statusConfig.jsx diff --git a/src/Charts2/Components/StatusLogTable.jsx b/src/Charts2/Components/StatusLogTable.jsx index ccffd23..4314ad4 100644 --- a/src/Charts2/Components/StatusLogTable.jsx +++ b/src/Charts2/Components/StatusLogTable.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { statusConfig } from '../../Components/Layout/SettingsComponents/statusConfig'; import { Table, TableBody, @@ -11,15 +12,6 @@ import { Typography } from '@mui/material'; -// Используем те же цвета, что и в LineChartComponent -const statusColors = { - '0': '#757575', // серый (нет связи) - '1': '#4CAF50', // зеленый (норма) - '2': '#FFC107', // желтый (отклонение) - '3': '#FF9800', // оранжевый (критично) - '4': '#F44336' // красный (авария) -}; - const StatusLogTable = ({ logs }) => { return ( @@ -44,10 +36,10 @@ const StatusLogTable = ({ logs }) => { {log.source_id?.split('$')[1]} { {parseFloat(log.value).toFixed(2)} - {log.description || getStatusDescription(log.status)} + {log.description || statusConfig.getStatusDescription(log.status)} @@ -68,27 +60,4 @@ const StatusLogTable = ({ logs }) => { ); }; -// Вспомогательные функции (оставляем без изменений) -const getStatusText = (status) => { - const statusMap = { - '0': 'Нет соединения', - '1': 'Норма', - '2': 'Отклонение', - '3': 'Критично', - '4': 'Авария' - }; - return statusMap[status] || 'Неизвестно'; -}; - -const getStatusDescription = (status) => { - const descriptions = { - '0': 'Устройство не отвечает', - '1': 'Параметры в норме', - '2': 'Обнаружены отклонения от нормы', - '3': 'Критическое состояние системы', - '4': 'Аварийное состояние системы' - }; - return descriptions[status] || 'Статус неизвестен'; -}; - export default StatusLogTable; \ No newline at end of file diff --git a/src/Components/Layout/SettingsComponents/MetricRangeEditor.jsx b/src/Components/Layout/SettingsComponents/MetricRangeEditor.jsx index 54f03fc..e21dabd 100644 --- a/src/Components/Layout/SettingsComponents/MetricRangeEditor.jsx +++ b/src/Components/Layout/SettingsComponents/MetricRangeEditor.jsx @@ -1,12 +1,13 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react'; import { TextField, Box, Typography, IconButton, Divider, - CircularProgress, Alert, Collapse, Tooltip, Button + CircularProgress, Alert, Collapse, Tooltip, Button, Select, MenuItem } from '@mui/material'; import DeleteIcon from '@mui/icons-material/Delete'; import AddIcon from '@mui/icons-material/Add'; import SearchIcon from '@mui/icons-material/Search'; import axios from 'axios'; +import { statusConfig } from './statusConfig'; import { VariableSizeList as List } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -30,7 +31,7 @@ const MetricItem = React.memo(({ metric, index, updateRange, addRange, deleteRan sx={{ display: 'flex', gap: 2, - alignItems: 'center', + alignItems: 'flex-end', // Изменено с 'center' на 'flex-end' mt: 1, '& > *': { flex: 1 } }} @@ -51,19 +52,38 @@ const MetricItem = React.memo(({ metric, index, updateRange, addRange, deleteRan size="small" variant="standard" /> - updateRange(index, j, 'status', e.target.value)} size="small" variant="standard" - /> + sx={{ + // Добавляем вертикальное выравнивание для label + '& .MuiInputLabel-root': { + transform: 'translate(0, -20px) scale(0.75)' + }, + // Корректируем положение выбранного значения + '& .MuiSelect-select': { + paddingBottom: '8px' + } + }} + > + {statusConfig.getAvailableStatuses().map(({ value, text }) => ( + + {text} + + ))} + deleteRange(index, j)} size="small" - sx={{ flex: 'none' }} + sx={{ + flex: 'none', + // Корректируем положение иконки + marginBottom: '8px' + }} > @@ -238,7 +258,6 @@ const MetricRangeEditor = ({ onSave }) => { {!loading && ( <> - { onChange={(e) => setFilter(e.target.value)} variant="standard" /> + - + { color="primary" disabled={!newMetricName.trim()} > - + diff --git a/src/Components/Layout/SettingsComponents/statusConfig.jsx b/src/Components/Layout/SettingsComponents/statusConfig.jsx new file mode 100644 index 0000000..fc06ea8 --- /dev/null +++ b/src/Components/Layout/SettingsComponents/statusConfig.jsx @@ -0,0 +1,27 @@ +export const statusConfig = { + statusMap: { + '0': { text: 'Нет соединения', color: '#757575', description: 'Устройство не отвечает' }, + '1': { text: 'Норма', color: '#4CAF50', description: 'Параметры в норме' }, + '2': { text: 'Отклонение', color: '#FFC107', description: 'Обнаружены отклонения от нормы' }, + '3': { text: 'Критично', color: '#FF9800', description: 'Критическое состояние системы' }, + '4': { text: 'Авария', color: '#F44336', description: 'Аварийное состояние системы' } + }, + + getStatusText(status) { + return this.statusMap[status]?.text || 'Неизвестно'; + }, + + getStatusColor(status) { + return this.statusMap[status]?.color || '#757575'; + }, + + getStatusDescription(status) { + return this.statusMap[status]?.description || 'Статус неизвестен'; + }, + + getAvailableStatuses() { + return Object.entries(this.statusMap) + .filter(([key]) => key !== '0') // исключаем статус "Нет соединения" + .map(([value, config]) => ({ value, text: config.text })); + } +}; \ No newline at end of file