forked from CITKParus/P8-Panels
WEB APP: Панель "Мониторинг сборки изделий" - объединены backend.js и hooks.js
This commit is contained in:
Mikhail Chechnev
parent
4736342e6f
commit
a457181a0d
@ -1,200 +0,0 @@
|
|||||||
//---------------------
|
|
||||||
//Подключение библиотек
|
|
||||||
//---------------------
|
|
||||||
|
|
||||||
import { useState, useCallback, useEffect, useContext } from "react"; //Классы React
|
|
||||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
|
||||||
import { object2Base64XML } from "../../core/utils"; //Вспомогательные функции
|
|
||||||
|
|
||||||
//---------
|
|
||||||
//Константы
|
|
||||||
//---------
|
|
||||||
|
|
||||||
//Размер страницы данных
|
|
||||||
const DATA_GRID_PAGE_SIZE = 0;
|
|
||||||
|
|
||||||
//-----------
|
|
||||||
//Тело модуля
|
|
||||||
//-----------
|
|
||||||
|
|
||||||
//Хук для основной таблицы панели
|
|
||||||
const useMechRecAssemblyMon = () => {
|
|
||||||
//Собственное состояние
|
|
||||||
let [state, setState] = useState({
|
|
||||||
init: false,
|
|
||||||
showPlanList: false,
|
|
||||||
planCtlgs: [],
|
|
||||||
planCtlgsLoaded: false,
|
|
||||||
selectedPlanCtlg: {},
|
|
||||||
plans: [],
|
|
||||||
plansLoaded: false,
|
|
||||||
selectedPlan: {}
|
|
||||||
});
|
|
||||||
|
|
||||||
//Подключение к контексту взаимодействия с сервером
|
|
||||||
const { executeStored } = useContext(BackEndСtx);
|
|
||||||
|
|
||||||
//Инициализация каталогов планов
|
|
||||||
const initPlanCtlgs = useCallback(async () => {
|
|
||||||
if (!state.init) {
|
|
||||||
const data = await executeStored({
|
|
||||||
stored: "PKG_P8PANELS_MECHREC.FCPRODPLAN_CTLG_INIT",
|
|
||||||
args: {},
|
|
||||||
respArg: "COUT",
|
|
||||||
isArray: name => name === "XFCPRODPLAN_CRNS"
|
|
||||||
});
|
|
||||||
setState(pv => ({ ...pv, init: true, planCtlgs: [...(data?.XFCPRODPLAN_CRNS || [])], planCtlgsLoaded: true }));
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [state.init, executeStored]);
|
|
||||||
|
|
||||||
//Получение информации о планах каталога
|
|
||||||
const loadPlans = useCallback(
|
|
||||||
async NCRN => {
|
|
||||||
if (NCRN) {
|
|
||||||
const data = await executeStored({
|
|
||||||
stored: "PKG_P8PANELS_MECHREC.FCPRODPLAN_GET",
|
|
||||||
args: { NCRN: NCRN },
|
|
||||||
respArg: "COUT",
|
|
||||||
isArray: name => name === "XFCPRODPLAN_INFO"
|
|
||||||
});
|
|
||||||
setState(pv => ({ ...pv, init: true, plans: [...(data?.XFCPRODPLAN_INFO || [])], plansLoaded: true }));
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
},
|
|
||||||
[executeStored]
|
|
||||||
);
|
|
||||||
|
|
||||||
//Выбор каталога планов
|
|
||||||
const selectPlanCtlg = planCtlg => {
|
|
||||||
setState(pv => ({
|
|
||||||
...pv,
|
|
||||||
selectedPlanCtlg: { ...planCtlg },
|
|
||||||
selectedPlan: {},
|
|
||||||
showPlanList: false
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
//Сброс выбора каталога планов
|
|
||||||
const unselectPlanCtlg = () =>
|
|
||||||
setState(pv => ({
|
|
||||||
...pv,
|
|
||||||
selectedPlanCtlg: {},
|
|
||||||
selectedPlan: {},
|
|
||||||
showPlanList: false
|
|
||||||
}));
|
|
||||||
|
|
||||||
//При подключении компонента к странице
|
|
||||||
useEffect(() => {
|
|
||||||
initPlanCtlgs();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
//При изменении каталога
|
|
||||||
useEffect(() => {
|
|
||||||
//Если каталог выбран
|
|
||||||
if (state.selectedPlanCtlg) {
|
|
||||||
loadPlans(state.selectedPlanCtlg.NRN);
|
|
||||||
} else {
|
|
||||||
setState(pv => ({ ...pv, plans: [], plansLoaded: false }));
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [state.selectedPlanCtlg]);
|
|
||||||
|
|
||||||
return [state, setState, selectPlanCtlg, unselectPlanCtlg];
|
|
||||||
};
|
|
||||||
|
|
||||||
//Хук для информации по производственным составам
|
|
||||||
const useCostProductComposition = nProdPlan => {
|
|
||||||
//Собственное состояние
|
|
||||||
let [costProductComposition, setCostProductComposition] = useState({
|
|
||||||
init: false,
|
|
||||||
showPlanList: false,
|
|
||||||
products: [],
|
|
||||||
productsLoaded: false,
|
|
||||||
model: null,
|
|
||||||
selectedProduct: null
|
|
||||||
});
|
|
||||||
|
|
||||||
//Подключение к контексту взаимодействия с сервером
|
|
||||||
const { executeStored } = useContext(BackEndСtx);
|
|
||||||
|
|
||||||
//Инициализация производственных составов
|
|
||||||
const initCostProductComposition = useCallback(async () => {
|
|
||||||
if (!costProductComposition.init) {
|
|
||||||
const data = await executeStored({
|
|
||||||
stored: "PKG_P8PANELS_MECHREC.FCPRODCMP_DETAILS_GET",
|
|
||||||
args: { NFCPRODPLAN: nProdPlan },
|
|
||||||
respArg: "COUT",
|
|
||||||
isArray: name => name === "XFCPRODCMP"
|
|
||||||
});
|
|
||||||
setCostProductComposition(pv => ({
|
|
||||||
...pv,
|
|
||||||
init: true,
|
|
||||||
products: [...(data?.XFCPRODCMP || [])],
|
|
||||||
productsLoaded: true,
|
|
||||||
model: data?.BMODEL
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [costProductComposition.init, executeStored]);
|
|
||||||
|
|
||||||
//При подключении компонента к странице
|
|
||||||
useEffect(() => {
|
|
||||||
initCostProductComposition();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return [costProductComposition, setCostProductComposition];
|
|
||||||
};
|
|
||||||
|
|
||||||
//Хук для таблицы детализации изделия
|
|
||||||
const useProductDetailsTable = (plan, product, orders, pageNumber, stored) => {
|
|
||||||
//Собственное состояние - флаг загрузки
|
|
||||||
const [isLoading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
//Собственное состояние - таблица данных
|
|
||||||
const [data, setData] = useState({
|
|
||||||
columnsDef: [],
|
|
||||||
rows: [],
|
|
||||||
morePages: true
|
|
||||||
});
|
|
||||||
|
|
||||||
//Подключение к контексту взаимодействия с сервером
|
|
||||||
const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx);
|
|
||||||
|
|
||||||
//Загрузка данных при изменении зависимостей
|
|
||||||
useEffect(() => {
|
|
||||||
const loadData = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
const data = await executeStored({
|
|
||||||
stored,
|
|
||||||
args: {
|
|
||||||
NPRODCMPSP: product,
|
|
||||||
NFCPRODPLAN: plan,
|
|
||||||
CORDERS: { VALUE: object2Base64XML(orders, { arrayNodeName: "orders" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB },
|
|
||||||
NPAGE_NUMBER: pageNumber,
|
|
||||||
NPAGE_SIZE: DATA_GRID_PAGE_SIZE,
|
|
||||||
NINCLUDE_DEF: 1
|
|
||||||
},
|
|
||||||
respArg: "COUT"
|
|
||||||
});
|
|
||||||
setData(pv => ({
|
|
||||||
...pv,
|
|
||||||
columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
|
|
||||||
rows: pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])],
|
|
||||||
morePages: DATA_GRID_PAGE_SIZE == 0 ? false : (data.XROWS || []).length >= DATA_GRID_PAGE_SIZE
|
|
||||||
}));
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (plan && product) loadData();
|
|
||||||
}, [plan, product, orders, pageNumber, stored, executeStored, SERV_DATA_TYPE_CLOB]);
|
|
||||||
|
|
||||||
//Вернём данные
|
|
||||||
return { data, isLoading };
|
|
||||||
};
|
|
||||||
|
|
||||||
export { useMechRecAssemblyMon, useCostProductComposition, useProductDetailsTable };
|
|
||||||
@ -13,7 +13,7 @@ import { Box, Grid, Container, Button, Typography, Icon, Stack, IconButton } fro
|
|||||||
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../../components/p8p_data_grid"; //Таблица данных
|
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../../components/p8p_data_grid"; //Таблица данных
|
||||||
import { P8PSVG } from "../../../components/p8p_svg"; //Интерактивные изображения
|
import { P8PSVG } from "../../../components/p8p_svg"; //Интерактивные изображения
|
||||||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||||
import { useCostProductComposition, useProductDetailsTable } from "../backend"; //Взаимодействие с сервером
|
import { useCostProductComposition, useProductDetailsTable } from "../hooks"; //Вспомогательные хуки
|
||||||
import { ProgressBox } from "./progress_box"; //Информация по прогрессу объекта
|
import { ProgressBox } from "./progress_box"; //Информация по прогрессу объекта
|
||||||
|
|
||||||
//---------
|
//---------
|
||||||
|
|||||||
@ -7,7 +7,16 @@
|
|||||||
//Подключение библиотек
|
//Подключение библиотек
|
||||||
//---------------------
|
//---------------------
|
||||||
|
|
||||||
import React from "react"; //Классы React
|
import React, { useState, useCallback, useEffect, useContext } from "react"; //Классы React
|
||||||
|
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||||
|
import { object2Base64XML } from "../../core/utils"; //Вспомогательные функции
|
||||||
|
|
||||||
|
//---------
|
||||||
|
//Константы
|
||||||
|
//---------
|
||||||
|
|
||||||
|
//Размер страницы данных
|
||||||
|
const DATA_GRID_PAGE_SIZE = 0;
|
||||||
|
|
||||||
//-----------
|
//-----------
|
||||||
//Тело модуля
|
//Тело модуля
|
||||||
@ -25,3 +34,185 @@ export const useFilteredPlanCtlgs = (planCtlgs, filter) => {
|
|||||||
|
|
||||||
return filteredPlanCtlgs;
|
return filteredPlanCtlgs;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//Хук для основной таблицы панели
|
||||||
|
const useMechRecAssemblyMon = () => {
|
||||||
|
//Собственное состояние
|
||||||
|
let [state, setState] = useState({
|
||||||
|
init: false,
|
||||||
|
showPlanList: false,
|
||||||
|
planCtlgs: [],
|
||||||
|
planCtlgsLoaded: false,
|
||||||
|
selectedPlanCtlg: {},
|
||||||
|
plans: [],
|
||||||
|
plansLoaded: false,
|
||||||
|
selectedPlan: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
//Подключение к контексту взаимодействия с сервером
|
||||||
|
const { executeStored } = useContext(BackEndСtx);
|
||||||
|
|
||||||
|
//Инициализация каталогов планов
|
||||||
|
const initPlanCtlgs = useCallback(async () => {
|
||||||
|
if (!state.init) {
|
||||||
|
const data = await executeStored({
|
||||||
|
stored: "PKG_P8PANELS_MECHREC.FCPRODPLAN_AM_CTLG_INIT",
|
||||||
|
args: {},
|
||||||
|
respArg: "COUT",
|
||||||
|
isArray: name => name === "XFCPRODPLAN_CRNS"
|
||||||
|
});
|
||||||
|
setState(pv => ({ ...pv, init: true, planCtlgs: [...(data?.XFCPRODPLAN_CRNS || [])], planCtlgsLoaded: true }));
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [state.init, executeStored]);
|
||||||
|
|
||||||
|
//Получение информации о планах каталога
|
||||||
|
const loadPlans = useCallback(
|
||||||
|
async NCRN => {
|
||||||
|
if (NCRN) {
|
||||||
|
const data = await executeStored({
|
||||||
|
stored: "PKG_P8PANELS_MECHREC.FCPRODPLAN_GET",
|
||||||
|
args: { NCRN: NCRN },
|
||||||
|
respArg: "COUT",
|
||||||
|
isArray: name => name === "XFCPRODPLAN_INFO"
|
||||||
|
});
|
||||||
|
setState(pv => ({ ...pv, init: true, plans: [...(data?.XFCPRODPLAN_INFO || [])], plansLoaded: true }));
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
},
|
||||||
|
[executeStored]
|
||||||
|
);
|
||||||
|
|
||||||
|
//Выбор каталога планов
|
||||||
|
const selectPlanCtlg = planCtlg => {
|
||||||
|
setState(pv => ({
|
||||||
|
...pv,
|
||||||
|
selectedPlanCtlg: { ...planCtlg },
|
||||||
|
selectedPlan: {},
|
||||||
|
showPlanList: false
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
//Сброс выбора каталога планов
|
||||||
|
const unselectPlanCtlg = () =>
|
||||||
|
setState(pv => ({
|
||||||
|
...pv,
|
||||||
|
selectedPlanCtlg: {},
|
||||||
|
selectedPlan: {},
|
||||||
|
showPlanList: false
|
||||||
|
}));
|
||||||
|
|
||||||
|
//При подключении компонента к странице
|
||||||
|
useEffect(() => {
|
||||||
|
initPlanCtlgs();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
//При изменении каталога
|
||||||
|
useEffect(() => {
|
||||||
|
//Если каталог выбран
|
||||||
|
if (state.selectedPlanCtlg) {
|
||||||
|
loadPlans(state.selectedPlanCtlg.NRN);
|
||||||
|
} else {
|
||||||
|
setState(pv => ({ ...pv, plans: [], plansLoaded: false }));
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [state.selectedPlanCtlg]);
|
||||||
|
|
||||||
|
return [state, setState, selectPlanCtlg, unselectPlanCtlg];
|
||||||
|
};
|
||||||
|
|
||||||
|
//Хук для информации по производственным составам
|
||||||
|
const useCostProductComposition = nProdPlan => {
|
||||||
|
//Собственное состояние
|
||||||
|
let [costProductComposition, setCostProductComposition] = useState({
|
||||||
|
init: false,
|
||||||
|
showPlanList: false,
|
||||||
|
products: [],
|
||||||
|
productsLoaded: false,
|
||||||
|
model: null,
|
||||||
|
selectedProduct: null
|
||||||
|
});
|
||||||
|
|
||||||
|
//Подключение к контексту взаимодействия с сервером
|
||||||
|
const { executeStored } = useContext(BackEndСtx);
|
||||||
|
|
||||||
|
//Инициализация производственных составов
|
||||||
|
const initCostProductComposition = useCallback(async () => {
|
||||||
|
if (!costProductComposition.init) {
|
||||||
|
const data = await executeStored({
|
||||||
|
stored: "PKG_P8PANELS_MECHREC.FCPRODCMP_DETAILS_GET",
|
||||||
|
args: { NFCPRODPLAN: nProdPlan },
|
||||||
|
respArg: "COUT",
|
||||||
|
isArray: name => name === "XFCPRODCMP"
|
||||||
|
});
|
||||||
|
setCostProductComposition(pv => ({
|
||||||
|
...pv,
|
||||||
|
init: true,
|
||||||
|
products: [...(data?.XFCPRODCMP || [])],
|
||||||
|
productsLoaded: true,
|
||||||
|
model: data?.BMODEL
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [costProductComposition.init, executeStored]);
|
||||||
|
|
||||||
|
//При подключении компонента к странице
|
||||||
|
useEffect(() => {
|
||||||
|
initCostProductComposition();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return [costProductComposition, setCostProductComposition];
|
||||||
|
};
|
||||||
|
|
||||||
|
//Хук для таблицы детализации изделия
|
||||||
|
const useProductDetailsTable = (plan, product, orders, pageNumber, stored) => {
|
||||||
|
//Собственное состояние - флаг загрузки
|
||||||
|
const [isLoading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
//Собственное состояние - таблица данных
|
||||||
|
const [data, setData] = useState({
|
||||||
|
columnsDef: [],
|
||||||
|
rows: [],
|
||||||
|
morePages: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//Подключение к контексту взаимодействия с сервером
|
||||||
|
const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx);
|
||||||
|
|
||||||
|
//Загрузка данных при изменении зависимостей
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const data = await executeStored({
|
||||||
|
stored,
|
||||||
|
args: {
|
||||||
|
NPRODCMPSP: product,
|
||||||
|
NFCPRODPLAN: plan,
|
||||||
|
CORDERS: { VALUE: object2Base64XML(orders, { arrayNodeName: "orders" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB },
|
||||||
|
NPAGE_NUMBER: pageNumber,
|
||||||
|
NPAGE_SIZE: DATA_GRID_PAGE_SIZE,
|
||||||
|
NINCLUDE_DEF: 1
|
||||||
|
},
|
||||||
|
respArg: "COUT"
|
||||||
|
});
|
||||||
|
setData(pv => ({
|
||||||
|
...pv,
|
||||||
|
columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
|
||||||
|
rows: pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])],
|
||||||
|
morePages: DATA_GRID_PAGE_SIZE == 0 ? false : (data.XROWS || []).length >= DATA_GRID_PAGE_SIZE
|
||||||
|
}));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (plan && product) loadData();
|
||||||
|
}, [plan, product, orders, pageNumber, stored, executeStored, SERV_DATA_TYPE_CLOB]);
|
||||||
|
|
||||||
|
//Вернём данные
|
||||||
|
return { data, isLoading };
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useMechRecAssemblyMon, useCostProductComposition, useProductDetailsTable };
|
||||||
|
|||||||
@ -15,8 +15,7 @@ import { MessagingСtx } from "../../context/messaging"; //Контекст со
|
|||||||
import { PlansList } from "./components/plans_list"; //Список планов
|
import { PlansList } from "./components/plans_list"; //Список планов
|
||||||
import { PlanDetail } from "./components/plan_detail"; //Детали плана
|
import { PlanDetail } from "./components/plan_detail"; //Детали плана
|
||||||
import { theme } from "./styles/themes"; //Стиль темы
|
import { theme } from "./styles/themes"; //Стиль темы
|
||||||
import { useFilteredPlanCtlgs } from "./hooks"; //Вспомогательные хуки
|
import { useMechRecAssemblyMon, useFilteredPlanCtlgs } from "./hooks"; //Вспомогательные хуки
|
||||||
import { useMechRecAssemblyMon } from "./backend"; //Хук корневой панели мониторинга сборки изделий
|
|
||||||
|
|
||||||
//---------
|
//---------
|
||||||
//Константы
|
//Константы
|
||||||
@ -194,9 +193,11 @@ const MechRecAssemblyMon = () => {
|
|||||||
state.selectedPlanCtlg.NRN ? (
|
state.selectedPlanCtlg.NRN ? (
|
||||||
<>
|
<>
|
||||||
<Typography variant="h3" align="center" color="text.title.fontColor" py={2}>
|
<Typography variant="h3" align="center" color="text.title.fontColor" py={2}>
|
||||||
{`${state.selectedPlanCtlg.SNAME} ${
|
{`${state.selectedPlanCtlg.SNAME} на ${state.selectedPlanCtlg.NMIN_YEAR} ${
|
||||||
state.selectedPlanCtlg.NMIN_YEAR ? `с ${state.selectedPlanCtlg.NMIN_YEAR} г` : ""
|
state.selectedPlanCtlg.NMIN_YEAR == state.selectedPlanCtlg.NMAX_YEAR
|
||||||
} ${state.selectedPlanCtlg.NMAX_YEAR ? `по ${state.selectedPlanCtlg.NMAX_YEAR}` : ""}`}
|
? "г."
|
||||||
|
: `- ${state.selectedPlanCtlg.NMAX_YEAR} г.г.`
|
||||||
|
} `}
|
||||||
</Typography>
|
</Typography>
|
||||||
{state.plansLoaded == true ? (
|
{state.plansLoaded == true ? (
|
||||||
state.selectedPlan.NRN ? (
|
state.selectedPlan.NRN ? (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user