работа над конфиг файлом
parent
306ac00efe
commit
c90bef284c
|
|
@ -19,7 +19,10 @@
|
|||
"chartjs-chart-box-and-violin-plot": "^4.0.0",
|
||||
"react-chartjs-2": "^5.0.0",
|
||||
"axios": "^1.7.9",
|
||||
"react-datepicker": "^8.1.0"
|
||||
"react-datepicker": "^8.1.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/material": "^6.4.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 729 B After Width: | Height: | Size: 729 B |
|
|
@ -40,11 +40,11 @@ const Dashboard = () => {
|
|||
|
||||
setStatusHistories((prevHistories) => ({
|
||||
history1: [
|
||||
...prevHistories.history1.slice(-49),
|
||||
...prevHistories.history1.slice(-29),
|
||||
{ time: new Date().toLocaleTimeString(), status: statusPercentage1 },
|
||||
],
|
||||
history2: [
|
||||
...prevHistories.history2.slice(-49),
|
||||
...prevHistories.history2.slice(-29),
|
||||
{ time: new Date().toLocaleTimeString(), status: statusPercentage2 },
|
||||
],
|
||||
}));
|
||||
|
|
@ -109,13 +109,21 @@ const Dashboard = () => {
|
|||
return (
|
||||
<div>
|
||||
<h2>Общий мониторинг состояния системы</h2>
|
||||
|
||||
<div>
|
||||
<div style={{ display: 'inline-block', width: '48%', marginRight: '2%' }}>
|
||||
<label>Надежность системы</label>
|
||||
<SystemStatusChart data={statusHistories.history1} />
|
||||
</div>
|
||||
<div style={{ display: 'inline-block', width: '48%' }}>
|
||||
<label>Функциональность системы</label>
|
||||
<SystemStatusChart data={statusHistories.history2} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>Статус компонентов системы</label>
|
||||
<TreeTable data={treeData1} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (activeTab === "Визуализация") {
|
||||
return <TreeChart data={treeData1} onNodeClick={(id, title) => handleOpenTab(id, title)} />;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import "../../Style/SidebarMenu.css";
|
||||
import { ThemeProvider, createTheme, CssBaseline, Button } from "@mui/material";
|
||||
import { getStatusColor } from "../TreeChart/dataUtils"; // Импортируем только нужную функцию
|
||||
|
||||
const MenuItem = ({ item, onSelectItem, sidebarWidth }) => {
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const TreeChart = ({ data, onNodeClick }) => {
|
|||
const svg = d3.select(chartRef.current)
|
||||
.attr("width", 2000)
|
||||
.attr("height", 2000)
|
||||
.attr("viewBox", [-500, -500, 1000, 1000])
|
||||
.attr("viewBox", [-500, -500, 1500, 1500])
|
||||
.attr("style", "max-width: 100%; height: auto;");
|
||||
|
||||
svg.append("g").attr("class", "links");
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,714 @@
|
|||
{
|
||||
"title": "Сервис ЗВКС",
|
||||
"id": "1",
|
||||
"items": [
|
||||
{
|
||||
"title": "Функциональные задачи",
|
||||
"id": "functional_tasks",
|
||||
"items": [
|
||||
{
|
||||
"id": "system_control",
|
||||
"title": "Контроль системы"
|
||||
},
|
||||
{
|
||||
"id": "system_management",
|
||||
"title": "Система управления"
|
||||
},
|
||||
{
|
||||
"id": "conference",
|
||||
"title": "Проведение ВКС"
|
||||
},
|
||||
{
|
||||
"id": "backup",
|
||||
"title": "Резервное копирование"
|
||||
},
|
||||
{
|
||||
"id": "relay_info",
|
||||
"title": "Ретрансляция информации"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "18",
|
||||
"title": "Graviton S2082I (device$18)",
|
||||
"items": [
|
||||
{
|
||||
"id": "4",
|
||||
"title": "OS Linux (module$4) АО",
|
||||
"items": [
|
||||
{
|
||||
"id": "190",
|
||||
"title": "Загрузка процессора за 1 минуту"
|
||||
},
|
||||
{
|
||||
"id": "191",
|
||||
"title": "Загрузка процессора за 5 минут"
|
||||
},
|
||||
{
|
||||
"id": "192",
|
||||
"title": "Загрузка процессора за 15 минут"
|
||||
},
|
||||
{
|
||||
"id": "197",
|
||||
"title": "Общий объем SWAP-файла"
|
||||
},
|
||||
{
|
||||
"id": "198",
|
||||
"title": "Используемый объем SWAP-файла"
|
||||
},
|
||||
{
|
||||
"id": "199",
|
||||
"title": "Общий объем физической оперативной памяти"
|
||||
},
|
||||
{
|
||||
"id": "200",
|
||||
"title": "Доступный объем физической оперативной памяти"
|
||||
},
|
||||
{
|
||||
"id": "201",
|
||||
"title": "Свободный объем физической и виртуальной оперативной памяти"
|
||||
},
|
||||
{
|
||||
"id": "202",
|
||||
"title": "Буферизованный объем оперативной памяти"
|
||||
},
|
||||
{
|
||||
"id": "203",
|
||||
"title": "Кэшированый объем оперативной памяти"
|
||||
},
|
||||
{
|
||||
"id": "274",
|
||||
"title": "Используемый объем SWAP-файла"
|
||||
},
|
||||
{
|
||||
"id": "275",
|
||||
"title": "Время затраченное процессором на процессы с пониженным приоритетом"
|
||||
},
|
||||
{
|
||||
"id": "276",
|
||||
"title": "Время затраченное процессором на процессы ядра ОС"
|
||||
},
|
||||
{
|
||||
"id": "277",
|
||||
"title": "Время простоя процессора"
|
||||
},
|
||||
{
|
||||
"id": "278",
|
||||
"title": "Общая емкость жестких дисков"
|
||||
},
|
||||
{
|
||||
"id": "279",
|
||||
"title": "Доступная емкость жестких дисков"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"title": "Vinteo (module$5) ПО",
|
||||
"items": [
|
||||
{
|
||||
"id": "31",
|
||||
"title": "Общее количество участников"
|
||||
},
|
||||
{
|
||||
"id": "32",
|
||||
"title": "Ожидание соединения"
|
||||
},
|
||||
{
|
||||
"id": "33",
|
||||
"title": "Зарегистрированные абоненты"
|
||||
},
|
||||
{
|
||||
"id": "34",
|
||||
"title": "Количество пользоватей HLS"
|
||||
},
|
||||
{
|
||||
"id": "35",
|
||||
"title": "Общее количество P2P комнат"
|
||||
},
|
||||
{
|
||||
"id": "36",
|
||||
"title": "Общее количество конференций"
|
||||
},
|
||||
{
|
||||
"id": "37",
|
||||
"title": "Общее количество активных конференций"
|
||||
},
|
||||
{
|
||||
"id": "38",
|
||||
"title": "Статус записи"
|
||||
},
|
||||
{
|
||||
"id": "39",
|
||||
"title": "Общее количество сохранённых записей"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "280",
|
||||
"title": "Сетевой адаптер №1 (port$261) Eth_1",
|
||||
"items": [
|
||||
{
|
||||
"id": "207",
|
||||
"title": "Скорость порта Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "209",
|
||||
"title": "Административное состояние порта Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "210",
|
||||
"title": "Оперативное состояние порта Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "211",
|
||||
"title": "Общее количество отправленных октетов Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "212",
|
||||
"title": "Количество входящих Multicast пакетов Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "213",
|
||||
"title": "Количество иcходящих Multiicast пакетов Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "214",
|
||||
"title": "Количество входящих Broadcast пакетов Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "215",
|
||||
"title": "Количество иcходящих Broadcast пакетов Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "216",
|
||||
"title": "Количество входящих Unicast пакетов Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "217",
|
||||
"title": "Количество иcходящих Unicast пакетов Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "218",
|
||||
"title": "Количество входящих пакетов помеченные как отброшенные Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "219",
|
||||
"title": "Количество иcходящих пакетов помеченные как отброшенные Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "220",
|
||||
"title": "Количество входящих пакетов с ошибкой Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "221",
|
||||
"title": "Количество исходящих пакетов с ошибкой Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "222",
|
||||
"title": "Количество входящих пакетов с неизвестным или неподдерживаемым протоколом Eth_1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "281",
|
||||
"title": "Сетевой адаптер №2 (port$262) Eth_2",
|
||||
"items": [
|
||||
{
|
||||
"id": "224",
|
||||
"title": "Скорость порта Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "226",
|
||||
"title": "Административное состояние порта Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "227",
|
||||
"title": "Оперативное состояние порта Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "228",
|
||||
"title": "Общее количество отправленных октетов Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "229",
|
||||
"title": "Количество входящих Multicast пакетов Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "230",
|
||||
"title": "Количество иcходящих Multiicast пакетов Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "231",
|
||||
"title": "Количество входящих Broadcast пакетов Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "232",
|
||||
"title": "Количество иcходящих Broadcast пакетов Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "233",
|
||||
"title": "Количество входящих Unicast пакетов Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "234",
|
||||
"title": "Количество иcходящих Unicast пакетов Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "235",
|
||||
"title": "Количество входящих пакетов помеченные как отброшенные Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "236",
|
||||
"title": "Количество иcходящих пакетов помеченные как отброшенные Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "237",
|
||||
"title": "Количество входящих пакетов с ошибкой Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "238",
|
||||
"title": "Количество исходящих пакетов с ошибкой Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "239",
|
||||
"title": "Количество входящих пакетов с неизвестным или неподдерживаемым протоколом Eth_2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "282",
|
||||
"title": "Сетевой адаптер №3 (port$263) Eth_3",
|
||||
"items": [
|
||||
{
|
||||
"id": "241",
|
||||
"title": "Скорость порта Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "243",
|
||||
"title": "Административное состояние порта Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "244",
|
||||
"title": "Оперативное состояние порта Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "245",
|
||||
"title": "Общее количество отправленных октетов Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "246",
|
||||
"title": "Количество входящих Multicast пакетов Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "247",
|
||||
"title": "Количество иcходящих Multiicast пакетов Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "248",
|
||||
"title": "Количество входящих Broadcast пакетов Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "249",
|
||||
"title": "Количество иcходящих Broadcast пакетов Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "250",
|
||||
"title": "Количество входящих Unicast пакетов Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "251",
|
||||
"title": "Количество иcходящих Unicast пакетов Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "252",
|
||||
"title": "Количество входящих пакетов помеченные как отброшенные Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "253",
|
||||
"title": "Количество иcходящих пакетов помеченные как отброшенные Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "254",
|
||||
"title": "Количество входящих пакетов с ошибкой Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "255",
|
||||
"title": "Количество исходящих пакетов с ошибкой Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "256",
|
||||
"title": "Количество входящих пакетов с неизвестным или неподдерживаемым протоколом Eth_3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "283",
|
||||
"title": "Сетевой адаптер №4 (port$264) Eth_4",
|
||||
"items": [
|
||||
{
|
||||
"id": "258",
|
||||
"title": "Скорость порта Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "260",
|
||||
"title": "Административное состояние порта Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "261",
|
||||
"title": "Оперативное состояние порта Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "262",
|
||||
"title": "Общее количество отправленных октетов Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "263",
|
||||
"title": "Количество входящих Multicast пакетов Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "264",
|
||||
"title": "Количество иcходящих Multiicast пакетов Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "265",
|
||||
"title": "Количество входящих Broadcast пакетов Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "266",
|
||||
"title": "Количество иcходящих Broadcast пакетов Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "267",
|
||||
"title": "Количество входящих Unicast пакетов Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "268",
|
||||
"title": "Количество иcходящих Unicast пакетов Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "269",
|
||||
"title": "Количество входящих пакетов помеченные как отброшенные Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "270",
|
||||
"title": "Количество иcходящих пакетов помеченные как отброшенные Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "271",
|
||||
"title": "Количество входящих пакетов с ошибкой Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "272",
|
||||
"title": "Количество исходящих пакетов с ошибкой Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "273",
|
||||
"title": "Количество входящих пакетов с неизвестным или неподдерживаемым протоколом Eth_4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Медиа сервер",
|
||||
"id": "media_server_1",
|
||||
"items": [
|
||||
{
|
||||
"title": "Аппаратное обеспечение",
|
||||
"id": "system_software_1",
|
||||
"items": [
|
||||
{
|
||||
"id": "media_system_software_1_2",
|
||||
"title": "Центральный процессор"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_2_2",
|
||||
"title": "Оперативная память"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_3_2",
|
||||
"title": "Жесткий диск"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_4_2",
|
||||
"title": "Сетевые адаптеры"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Программное обеспечение",
|
||||
"id": "software_1",
|
||||
"items": [
|
||||
{
|
||||
"id": "media_software_1_2",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_2_2",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_3_2",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_4_2",
|
||||
"title": "ПО"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Медиа сервер",
|
||||
"id": "media_server_2",
|
||||
"items": [
|
||||
{
|
||||
"title": "Аппаратное обеспечение",
|
||||
"id": "system_software_2",
|
||||
"items": [
|
||||
{
|
||||
"id": "media_system_software_1_3",
|
||||
"title": "Центральный процессор"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_2_3",
|
||||
"title": "Оперативная память"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_3_3",
|
||||
"title": "Жесткий диск"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_4_3",
|
||||
"title": "Сетевые адаптеры"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Программное обеспечение",
|
||||
"id": "software_2",
|
||||
"items": [
|
||||
{
|
||||
"id": "media_software_1_3",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_2_3",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_3_3",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_4_3",
|
||||
"title": "ПО"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Медиа сервер",
|
||||
"id": "media_server_3",
|
||||
"items": [
|
||||
{
|
||||
"title": "Аппаратное обеспечение",
|
||||
"id": "system_software_3",
|
||||
"items": [
|
||||
{
|
||||
"id": "media_system_software_1_4",
|
||||
"title": "Центральный процессор"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_2_4",
|
||||
"title": "Оперативная память"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_3_4",
|
||||
"title": "Жесткий диск"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_4_4",
|
||||
"title": "Сетевые адаптеры"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Программное обеспечение",
|
||||
"id": "software_3",
|
||||
"items": [
|
||||
{
|
||||
"id": "media_software_1_4",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_2_4",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_3_4",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_4_4",
|
||||
"title": "ПО"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Медиа сервер",
|
||||
"id": "media_server_4",
|
||||
"items": [
|
||||
{
|
||||
"title": "Аппаратное обеспечение",
|
||||
"id": "system_software_4",
|
||||
"items": [
|
||||
{
|
||||
"id": "media_system_software_1_5",
|
||||
"title": "Центральный процессор"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_2_5",
|
||||
"title": "Оперативная память"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_3_5",
|
||||
"title": "Жесткий диск"
|
||||
},
|
||||
{
|
||||
"id": "media_system_software_4_5",
|
||||
"title": "Сетевые адаптеры"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Программное обеспечение",
|
||||
"id": "software_4",
|
||||
"items": [
|
||||
{
|
||||
"id": "media_software_1_5",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_2_5",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_3_5",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "media_software_4_5",
|
||||
"title": "ПО"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Сервер систем",
|
||||
"id": "system_server_1",
|
||||
"items": [
|
||||
{
|
||||
"title": "Аппаратное обеспечение",
|
||||
"id": "system_software_5",
|
||||
"items": [
|
||||
{
|
||||
"id": "copy_system_software_1",
|
||||
"title": "Центральный процессор"
|
||||
},
|
||||
{
|
||||
"id": "copy_system_software_2",
|
||||
"title": "Оперативная память"
|
||||
},
|
||||
{
|
||||
"id": "copy_system_software_3",
|
||||
"title": "Жесткий диск"
|
||||
},
|
||||
{
|
||||
"id": "copy_system_software_4",
|
||||
"title": "Сетевые адаптеры"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Программное обеспечение",
|
||||
"id": "software_5",
|
||||
"items": [
|
||||
{
|
||||
"id": "copy_software_1",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "copy_software_2",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "copy_software_3",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "copy_software_4",
|
||||
"title": "ПО"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Сервер систем",
|
||||
"id": "system_server_2",
|
||||
"items": [
|
||||
{
|
||||
"title": "Аппаратное обеспечение",
|
||||
"id": "system_software_6",
|
||||
"items": [
|
||||
{
|
||||
"id": "control_system_software_1",
|
||||
"title": "Центральный процессор"
|
||||
},
|
||||
{
|
||||
"id": "control_system_software_2",
|
||||
"title": "Оперативная память"
|
||||
},
|
||||
{
|
||||
"id": "control_system_software_3",
|
||||
"title": "Жесткий диск"
|
||||
},
|
||||
{
|
||||
"id": "control_system_software_4",
|
||||
"title": "Сетевые адаптеры"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Программное обеспечение",
|
||||
"id": "software_6",
|
||||
"items": [
|
||||
{
|
||||
"id": "control_software_1",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "control_software_2",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "control_software_3",
|
||||
"title": "ПО"
|
||||
},
|
||||
{
|
||||
"id": "control_software_4",
|
||||
"title": "ПО"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import "../../Style/TreeTable.css";
|
||||
import { statusManager1, statusManager2 } from "../TreeChart/dataUtils";
|
||||
|
||||
const TreeTable = ({ data }) => {
|
||||
const tableRef = useRef(null);
|
||||
const [fontSize, setFontSize] = useState(16);
|
||||
const [log, setLog] = useState([]);
|
||||
const [isLogVisible, setIsLogVisible] = useState(true);
|
||||
|
||||
const adjustFontSize = () => {
|
||||
if (tableRef.current) {
|
||||
let newSize = 16;
|
||||
const maxWidth = window.innerWidth;
|
||||
|
||||
while (tableRef.current.scrollWidth > maxWidth && newSize > 10) {
|
||||
newSize -= 1;
|
||||
tableRef.current.style.fontSize = `${newSize}px`;
|
||||
}
|
||||
|
||||
while (tableRef.current.scrollWidth < maxWidth && newSize < 16) {
|
||||
newSize += 1;
|
||||
tableRef.current.style.fontSize = `${newSize}px`;
|
||||
}
|
||||
|
||||
setFontSize(newSize);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
adjustFontSize();
|
||||
window.addEventListener("resize", adjustFontSize);
|
||||
return () => window.removeEventListener("resize", adjustFontSize);
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
const newLog = [];
|
||||
const traverse = (items) => {
|
||||
items.forEach((item) => {
|
||||
if (["yellow", "orange", "red"].includes(item.status)) {
|
||||
newLog.push({
|
||||
title: item.title,
|
||||
status: item.status,
|
||||
time: new Date().toLocaleTimeString() // Добавляем время
|
||||
});
|
||||
}
|
||||
if (item.items) {
|
||||
traverse(item.items);
|
||||
}
|
||||
});
|
||||
};
|
||||
traverse(data.items);
|
||||
setLog(newLog);
|
||||
}, [data]);
|
||||
|
||||
const filteredData = data.items.filter((item) => item.title !== "Функциональные задачи");
|
||||
|
||||
const renderHeaders = (items) => {
|
||||
return items.map((item) => {
|
||||
// Если это последний уровень, не отображаем заголовок
|
||||
if (!item.items || item.items.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const colSpan = item.items ? item.items.length : 1;
|
||||
return (
|
||||
<th key={item.id} colSpan={colSpan} className="tree-table-header" title={item.title}>
|
||||
<div className="header-content">
|
||||
<div className="status-indicator-bar" style={{ backgroundColor: statusManager1.getStatusColor(item.status) }} />
|
||||
<div className="status-indicator-bar" style={{ backgroundColor: statusManager2.getStatusColor(item.status), marginLeft: "5px" }} />
|
||||
{item.title}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const renderRows = (items) => {
|
||||
if (!items || items.length === 0) return null;
|
||||
|
||||
// Если это последний уровень, не отображаем строки
|
||||
if (items.every((item) => !item.items || item.items.length === 0)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className="tree-table-row">
|
||||
{items.map((item) => {
|
||||
if (item.items && item.items.length > 0) {
|
||||
return (
|
||||
<React.Fragment key={item.id}>
|
||||
{item.items.map((child) => (
|
||||
<td key={child.id} className="tree-table-cell" title={child.title}>
|
||||
<div className="cell-content">
|
||||
<div className="status-indicator-bar" style={{ backgroundColor: statusManager1.getStatusColor(child.status) }} />
|
||||
<div className="status-indicator-bar" style={{ backgroundColor: statusManager2.getStatusColor(child.status), marginLeft: "5px" }} />
|
||||
{child.title}
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</React.Fragment>
|
||||
);
|
||||
} else {
|
||||
return null; // Не отображаем элементы последнего уровня
|
||||
}
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="tree-table-container">
|
||||
<table ref={tableRef} className="tree-table" style={{ fontSize: `${fontSize}px` }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
colSpan={filteredData.reduce((acc, item) => acc + (item.items ? item.items.length : 1), 0)}
|
||||
className="tree-table-header"
|
||||
title={data.title}
|
||||
>
|
||||
<div className="header-content">
|
||||
<div className="status-indicator-bar" style={{ backgroundColor: statusManager1.getStatusColor(data.status) }} />
|
||||
<div className="status-indicator-bar" style={{ backgroundColor: statusManager2.getStatusColor(data.status), marginLeft: "5px" }} />
|
||||
{data.title}
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>{renderHeaders(filteredData)}</tr>
|
||||
</thead>
|
||||
<tbody>{renderRows(filteredData)}</tbody>
|
||||
</table>
|
||||
<button onClick={() => setIsLogVisible(!isLogVisible)} className="toggle-log-button">
|
||||
{isLogVisible ? "Скрыть лог" : "Показать лог"}
|
||||
</button>
|
||||
{isLogVisible && (
|
||||
<div className="status-log">
|
||||
<h3>Лог статусов</h3>
|
||||
<ul>
|
||||
{log.map((entry, index) => (
|
||||
<li key={index} style={{ color: statusManager1.getStatusColor(entry.status) }}>
|
||||
[{entry.time}] {entry.status}: {entry.title}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TreeTable;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
||||
|
||||
// Светлая тема
|
||||
const lightTheme = createTheme({
|
||||
palette: {
|
||||
mode: "light",
|
||||
background: {
|
||||
default: "#FFFFFF",
|
||||
paper: "#f4f4f4",
|
||||
},
|
||||
text: {
|
||||
primary: "#000000",
|
||||
secondary: "#333333",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Темная тема
|
||||
const darkTheme = createTheme({
|
||||
palette: {
|
||||
mode: "dark",
|
||||
background: {
|
||||
default: "#1E1E1E",
|
||||
paper: "#2d2d2d",
|
||||
},
|
||||
text: {
|
||||
primary: "#E0E0E0",
|
||||
secondary: "#CCCCCC",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue