76 lines
3.3 KiB
JavaScript
76 lines
3.3 KiB
JavaScript
import React from "react";
|
||
import "../../Style/TreeTable.css";
|
||
import { getStatusColor } from "../TreeChart/dataUtils"; // Импортируем функцию
|
||
|
||
const TreeTable = ({ data }) => {
|
||
// Фильтруем данные, чтобы убрать "Функциональные задачи"
|
||
const filteredData = data.filter((item) => item.title !== "Функциональные задачи");
|
||
|
||
return (
|
||
<div className="table-container">
|
||
<table className="tree-table">
|
||
<thead>
|
||
{/* Первый уровень: Заголовки "Медиа сервер" */}
|
||
<tr>
|
||
{filteredData.map((item, index) => (
|
||
<th key={index} colSpan="2" className="tree-table-header" style={{ backgroundColor: getStatusColor(item.status) }}>
|
||
{item.title}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
{/* Второй уровень: "АО" и "ПО" */}
|
||
<tr>
|
||
{filteredData.map((item, index) => (
|
||
<React.Fragment key={index}>
|
||
<td className="tree-table-subheader" style={{ backgroundColor: getStatusColor(item.items[0]?.status) }}>
|
||
АО
|
||
</td>
|
||
<td className="tree-table-subheader" style={{ backgroundColor: getStatusColor(item.items[1]?.status) }}>
|
||
ПО
|
||
</td>
|
||
</React.Fragment>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{/* Третий уровень: Вложенные элементы "АО" и "ПО" */}
|
||
{renderRows(filteredData)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// Функция для отображения строк с вложенными элементами
|
||
const renderRows = (data) => {
|
||
const rows = [];
|
||
|
||
// Находим максимальное количество элементов среди всех "АО" и "ПО"
|
||
const maxItems = Math.max(
|
||
...data.flatMap((item) => [
|
||
item.items[0]?.items?.length || 0, // АО
|
||
item.items[1]?.items?.length || 0 // ПО
|
||
])
|
||
);
|
||
|
||
// Генерируем строки
|
||
for (let i = 0; i < maxItems; i++) {
|
||
rows.push(
|
||
<tr key={i} className="tree-table-row">
|
||
{data.map((item, index) => (
|
||
<React.Fragment key={index}>
|
||
<td className="tree-table-cell" style={{ backgroundColor: getStatusColor(item.items[0]?.items[i]?.status) }}>
|
||
{item.items[0]?.items[i]?.title || ""}
|
||
</td>
|
||
<td className="tree-table-cell" style={{ backgroundColor: getStatusColor(item.items[1]?.items[i]?.status) }}>
|
||
{item.items[1]?.items[i]?.title || ""}
|
||
</td>
|
||
</React.Fragment>
|
||
))}
|
||
</tr>
|
||
);
|
||
}
|
||
|
||
return rows;
|
||
};
|
||
export default TreeTable; |