Общая структура компонентов панели "Прогноз технического состояния", дерево технических объектов

panels/eqs_tech_cond_forecast/admin_tab.js

@@ -0,0 +1,35 @@
+/*
+    Парус 8 - Панели мониторинга - ТОиР - Прогнозирование технического состояния
+    Закладка администрирования
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React from "react"; //Классы React
+import { Grid } from "@mui/material"; //Интерфейсные компоненты
+
+//-----------
+//Тело модуля
+//-----------
+
+//Закладка администрирования
+const AdminTab = () => {
+    //Генерация содержимого
+    return (
+        <div>
+            <Grid container>
+                <Grid item xs={12} sx={{ backgroundColor: "magenta" }}>
+                    Здесь только администраторы могут работать
+                </Grid>
+            </Grid>
+        </div>
+    );
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { AdminTab };

panels/eqs_tech_cond_forecast/eqs_tech_cond_forecast.js

@@ -0,0 +1,67 @@
+/*
+    Парус 8 - Панели мониторинга - ТОиР - Прогнозирование технического состояния
+    Панель мониторинга: Корневая панель прогнозирования технического состояния
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React, { useState, useEffect } from "react"; //Классы React
+import { Box, Tabs, Tab } from "@mui/material"; //Интерфейсные компоненты
+import { AdminTab } from "./admin_tab"; //Интерфейс администрирования
+import { ForecastTab } from "./forecast_tab"; //Интерфейс прогнозирования
+
+//---------
+//Константы
+//---------
+
+//Режимы работы панели
+const MODES = {
+    FORECAST: 1,
+    ADMIN: 2
+};
+
+//-----------
+//Тело модуля
+//-----------
+
+//Закладка
+const TapPanel = ({ children }) => <Box>{children}</Box>;
+
+//Корневая панель прогнозирования технического состояния
+const EqsTechCondForecast = () => {
+    //Собственное состояние
+    const [mode, setMode] = useState(MODES.FORECAST);
+
+    //При переключении закладки
+    const handleTabChange = (e, newValue) => setMode(newValue);
+
+    //Генерация содержимого
+    return (
+        <>
+            <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+                <Tabs value={mode} onChange={handleTabChange}>
+                    <Tab label="Прогноз" value={MODES.FORECAST} />
+                    <Tab label="Обучение" value={MODES.ADMIN} />
+                </Tabs>
+            </Box>
+            {mode == MODES.ADMIN ? (
+                <TapPanel>
+                    <AdminTab />{" "}
+                </TapPanel>
+            ) : null}
+            {mode == MODES.FORECAST ? (
+                <TapPanel>
+                    <ForecastTab />
+                </TapPanel>
+            ) : null}
+        </>
+    );
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { EqsTechCondForecast };

panels/eqs_tech_cond_forecast/forecast_tab.js

@@ -0,0 +1,80 @@
+/*
+    Парус 8 - Панели мониторинга - ТОиР - Прогнозирование технического состояния
+    Закладка прогнозирования
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React, { useState } from "react"; //Классы React
+import { Box, Grid } from "@mui/material"; //Интерфейсные компоненты
+import { RichTreeView } from "@mui/x-tree-view/RichTreeView"; //Дерево
+import { useEqConfigTree, needLoadLevel } from "./forecast_tab_hooks"; //Вспомогательные хуки
+
+//---------
+//Константы
+//---------
+
+//Высота главного меню
+const APP_BAR_HEIGHT = "64px";
+
+//Высота закладок
+const TABS_HEIGHT = "49px";
+
+//Стили
+const STYLES = {
+    LEFT_SIDE_GRID: { backgroundColor: "red" },
+    RIGHT_SIDE_GRID: { backgroundColor: "green" },
+    TREE_BOX: {
+        minHeight: `calc(100vh - ${APP_BAR_HEIGHT} - ${TABS_HEIGHT})`,
+        maxHeight: `calc(100vh - ${APP_BAR_HEIGHT} - ${TABS_HEIGHT})`,
+        backgroundColor: "yellow",
+        overflowX: "hidden",
+        overflowY: "auto",
+        scrollbarWidth: "thin",
+        scrollbarColor: "red blue"
+    }
+};
+
+//-----------
+//Тело модуля
+//-----------
+
+//Закладка прогнозирования
+const ForecastTab = () => {
+    //Собственное состояние - текущая загружаемая ветка
+    const [loadingTreeItem, setLoadingTreeItem] = useState(0);
+
+    //Загрузчик веток дерева
+    const { tree } = useEqConfigTree(loadingTreeItem);
+
+    //Обработка развёртывания/свёртывания уровня дерева
+    const handleTreeItemExpansionToggle = (event, itemId, isExpanded) =>
+        isExpanded && needLoadLevel(tree, itemId) ? setLoadingTreeItem(parseInt(itemId)) : null;
+
+    //Обработка фокусировки на элементе дерева
+    const handleTreeItemFocus = (event, itemId, isExpanded) => console.log(event, itemId, isExpanded);
+
+    //Генерация содержимого
+    return (
+        <div>
+            <Grid container>
+                <Grid item xs={4} sx={STYLES.LEFT_SIDE_GRID}>
+                    <Box sx={STYLES.TREE_BOX}>
+                        <RichTreeView items={tree} onItemExpansionToggle={handleTreeItemExpansionToggle} onItemFocus={handleTreeItemFocus} />
+                    </Box>
+                </Grid>
+                <Grid item xs={8} sx={STYLES.RIGHT_SIDE_GRID}>
+                    ОБОРУДОВАНИЕ
+                </Grid>
+            </Grid>
+        </div>
+    );
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { ForecastTab };

panels/eqs_tech_cond_forecast/forecast_tab_hooks.js

@@ -0,0 +1,96 @@
+/*
+    Парус 8 - Панели мониторинга - ТОиР - Прогнозирование технического состояния
+    Кастомные хуки закладки Прогнозирования
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { useState, useEffect, useContext } from "react"; //Классы React
+import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
+import { deepCopyObject } from "../../core/utils"; //Утилиты
+
+//-----------------------
+//Вспомогательные функции
+//-----------------------
+
+//Проверка необходимости загрузки уровня для указанного родителя
+const needLoadLevel = (tree, parent) => {
+    let res = false;
+    tree.forEach(treeItem => {
+        if (treeItem.id == parent) {
+            if (treeItem.children && treeItem.children.length == 1 && treeItem.children[0].id.endsWith("loader")) res = true;
+        }
+        if (treeItem.children && treeItem.children.length > 0 && !treeItem.children[0].id.endsWith("loader"))
+            res = needLoadLevel(treeItem.children, parent);
+    });
+    return res;
+};
+
+//Встраивание уровня в указанного родителя
+const appendLevel = (tree, parent, children) => {
+    tree.forEach(treeItem => {
+        if (treeItem.id == parent) {
+            treeItem.children = children;
+            return;
+        }
+        if (treeItem.children && treeItem.children.length > 0 && !treeItem.children[0].id.endsWith("loader"))
+            appendLevel(treeItem.children, parent, children);
+    });
+};
+
+//-----------
+//Тело модуля
+//-----------
+
+//Загрузка ветки дерева состава оборудования
+const useEqConfigTree = parent => {
+    //Собственное состояние - флаг загрузки
+    const [isLoading, setLoading] = useState(false);
+
+    //Собственное состояние - данные дерева
+    const [tree, setTree] = useState([]);
+
+    //Подключение к контексту взаимодействия с сервером
+    const { executeStored } = useContext(BackEndСtx);
+
+    //Загрузка данных при изменении зависимостей
+    useEffect(() => {
+        const loadData = async () => {
+            try {
+                setLoading(true);
+                const data = await executeStored({
+                    stored: "UDO_PKG_EQUIPTCF.EQCONFIG_HIER",
+                    args: {
+                        NPEQCONFIG: parent
+                    },
+                    respArg: "COUT",
+                    isArray: name => ["children"].includes(name),
+                    attributeValueProcessor: (name, val) => (["id"].includes(name) ? undefined : val),
+                    loader: false
+                });
+                setTree(prevTree => {
+                    if (prevTree.length == 0) return data.children;
+                    else {
+                        let newTree = deepCopyObject(prevTree);
+                        appendLevel(newTree, parent, data.children);
+                        return newTree;
+                    }
+                });
+            } finally {
+                setLoading(false);
+            }
+        };
+        if (parent == 0 || parent) loadData();
+    }, [parent, executeStored]);
+
+    //Вернём данные
+    return { tree, isLoading };
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { useEqConfigTree, needLoadLevel };

panels/eqs_tech_cond_forecast/index.js

@@ -0,0 +1,16 @@
+/*
+    Парус 8 - Панели мониторинга - ТОиР - Прогнозирование технического состояния
+    Панель мониторинга: Точка входа
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { EqsTechCondForecast } from "./eqs_tech_cond_forecast"; //Корневая панель прогнозирования технического состояния
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export const RootClass = EqsTechCondForecast;