davay-popozhe/P8-Panels
1
0
Fork 0
forked from CITKParus/P8-Panels
Code Issues Pull Requests Projects Releases Wiki Activity

WEB APP: Панель "Мониторинг сборки изделий" - индивидуальные индикаторы загрузки для таблиц детализации маршрута и комплектации

Browse Source
This commit is contained in:
Mikhail Chechnev 2024-05-27 13:07:05 +03:00
parent 239ca73548
commit b47fb2558d
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/panels/mech_rec_assembly_mon/components/plan_detail.js
View File

@ -9,7 +9,7 @@
import React, { useEffect, useState } from "react"; //Классы React import React, { useEffect, useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, Grid, Container, Button, Typography, Icon, Stack, IconButton } from "@mui/material"; //Интерфейсные элементы import { Box, Grid, Container, Button, Typography, Icon, Stack, IconButton, CircularProgress } from "@mui/material"; //Интерфейсные элементы
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"; //Подключение компонентов к настройкам приложения
@ -69,7 +69,7 @@ const STYLES = {
width: "280px", width: "280px",
borderBottom: "1px solid" borderBottom: "1px solid"
}, },
TABLE_DETAILS: { height: "230px" }, TABLE_DETAILS: { height: "240px" },
TABLE_DETAILS_HEADER_CELL: maxWidth => ({ TABLE_DETAILS_HEADER_CELL: maxWidth => ({
padding: "2px 2px", padding: "2px 2px",
fontSize: "11px", fontSize: "11px",
@ -78,7 +78,7 @@ const STYLES = {
...(maxWidth ? { maxWidth } : {}) ...(maxWidth ? { maxWidth } : {})
}), }),
TABLE_DETAILS_DATA_CELL: textAlign => ({ padding: "2px 2px", fontSize: "11px", ...(textAlign ? { textAlign } : {}) }), TABLE_DETAILS_DATA_CELL: textAlign => ({ padding: "2px 2px", fontSize: "11px", ...(textAlign ? { textAlign } : {}) }),
TABLE_DETAILS_MORE_BUTTON: { borderRadius: "25px" }, TABLE_DETAILS_MORE_BUTTON: { borderRadius: "25px", height: "20px" },
CARD_DETAILS_CONTAINER: { minWidth: "1200px", maxWidth: "1400px" }, CARD_DETAILS_CONTAINER: { minWidth: "1200px", maxWidth: "1400px" },
CARD_DETAILS_NAVIGATION_STACK: { width: "100%" } CARD_DETAILS_NAVIGATION_STACK: { width: "100%" }
}; };
@ -196,11 +196,14 @@ const ProductDetailsTable = ({ plan, product, stored, noProductMessage, noDataFo
<Typography variant="UDO_body2">{noProductMessage}</Typography> <Typography variant="UDO_body2">{noProductMessage}</Typography>
) : ( ) : (
<> <>
<Typography variant="h4"> <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">
<b>{title}</b> <CircularProgress size={18} sx={{ opacity: isLoading ? 1 : 0 }} />
</Typography> <Typography variant="h4">
<b>{title}</b>
</Typography>
</Stack>
<P8PDataGrid <P8PDataGrid
{...{ ...P8P_DATA_GRID_CONFIG_PROPS, noDataFoundText: isLoading ? "" : noDataFoundMessage }} {...{ ...P8P_DATA_GRID_CONFIG_PROPS, noDataFoundText: isLoading || !data.init ? "" : noDataFoundMessage }}
containerComponentProps={{ sx: STYLES.TABLE_DETAILS, elevation: 0 }} containerComponentProps={{ sx: STYLES.TABLE_DETAILS, elevation: 0 }}
columnsDef={data.columnsDef} columnsDef={data.columnsDef}
rows={data.rows} rows={data.rows}

9
app/panels/mech_rec_assembly_mon/hooks.js
View File

@ -163,10 +163,11 @@ const useCostProductComposition = plan => {
//Хук для таблицы детализации изделия //Хук для таблицы детализации изделия
const useProductDetailsTable = (plan, product, orders, pageNumber, stored) => { const useProductDetailsTable = (plan, product, orders, pageNumber, stored) => {
//Собственное состояние - флаг загрузки //Собственное состояние - флаг загрузки
const [isLoading, setLoading] = useState(true); const [isLoading, setLoading] = useState(false);
//Собственное состояние - таблица данных //Собственное состояние - таблица данных
const [data, setData] = useState({ const [data, setData] = useState({
init: false,
columnsDef: [], columnsDef: [],
rows: [], rows: [],
morePages: true morePages: true
@ -190,13 +191,15 @@ const useProductDetailsTable = (plan, product, orders, pageNumber, stored) => {
NPAGE_SIZE: DATA_GRID_PAGE_SIZE, NPAGE_SIZE: DATA_GRID_PAGE_SIZE,
NINCLUDE_DEF: pageNumber == 1 ? 1 : 0 NINCLUDE_DEF: pageNumber == 1 ? 1 : 0
}, },
respArg: "COUT" respArg: "COUT",
loader: false
}); });
setData(pv => ({ setData(pv => ({
...pv, ...pv,
columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef, columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
rows: pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])], rows: pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])],
morePages: DATA_GRID_PAGE_SIZE == 0 ? false : (data.XROWS || []).length >= DATA_GRID_PAGE_SIZE morePages: DATA_GRID_PAGE_SIZE == 0 ? false : (data.XROWS || []).length >= DATA_GRID_PAGE_SIZE,
init: true
})); }));
} finally { } finally {
setLoading(false); setLoading(false);