diff --git a/app/panels/samples/chart.js b/app/panels/samples/chart.js new file mode 100644 index 0000000..453efff --- /dev/null +++ b/app/panels/samples/chart.js @@ -0,0 +1,93 @@ +/* + Парус 8 - Панели мониторинга - Примеры для разработчиков + Пример: Графики "P8PChart" +*/ + +//--------------------- +//Подключение библиотек +//--------------------- + +import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React +import PropTypes from "prop-types"; //Контроль свойств компонента +import { Typography, Grid, Paper } from "@mui/material"; //Интерфейсные элементы +import { P8PChart } from "../../components/p8p_chart"; //График +import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером +import { ApplicationСtx } from "../../context/application"; //Контекст приложения + +//--------- +//Константы +//--------- + +//Стили +const STYLES = { + CONTAINER: { textAlign: "center", paddingTop: "20px" }, + TITLE: { paddingBottom: "15px" }, + CHART: { maxHeight: "500px", display: "flex", justifyContent: "center" }, + CHART_PAPER: { height: "100%", padding: "5px" } +}; + +//----------- +//Тело модуля +//----------- + +//Пример: Графики "P8PChart" +const Chart = ({ title }) => { + //Собственное состояние - график + const [chart, setChart] = useState({ loaded: false, labels: [], datasets: [] }); + + //Подключение к контексту взаимодействия с сервером + const { executeStored } = useContext(BackEndСtx); + + //Подключение к контексту приложения + const { pOnlineShowUnit } = useContext(ApplicationСtx); + + //Загрузка данных графика с сервера + const loadChart = useCallback(async () => { + const chart = await executeStored({ stored: "PKG_P8PANELS_SAMPLES.CHART", respArg: "COUT" }); + setChart(pv => ({ ...pv, loaded: true, ...chart.XCHART })); + }, [executeStored]); + + //Отработка нажатия на график + const handleChartClick = ({ item }) => { + console.log(item); + pOnlineShowUnit({ + unitCode: "Contracts", + inputParameters: [{ name: item.SCOND, value: item.SCOND_VALUE }] + }); + }; + + //При подключении к странице + useEffect(() => { + loadChart(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + //Генерация содержимого + return ( +
+ + {title} + + + + + + {chart.loaded ? : null} + + + + +
+ ); +}; + +//Контроль свойств - Пример: Графики "P8PChart" +Chart.propTypes = { + title: PropTypes.string.isRequired +}; + +//---------------- +//Интерфейс модуля +//---------------- + +export { Chart }; diff --git a/app/panels/samples/data_grid.js b/app/panels/samples/data_grid.js new file mode 100644 index 0000000..599f3a1 --- /dev/null +++ b/app/panels/samples/data_grid.js @@ -0,0 +1,179 @@ +/* + Парус 8 - Панели мониторинга - Примеры для разработчиков + Пример: Таблица данных "P8PDataGrid" +*/ + +//--------------------- +//Подключение библиотек +//--------------------- + +import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React +import PropTypes from "prop-types"; //Контроль свойств компонента +import { Typography, Grid, Stack, Icon, Box } from "@mui/material"; //Интерфейсные элементы +import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции +import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных +import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения +import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером + +//--------- +//Константы +//--------- + +//Размер страницы данных +const DATA_GRID_PAGE_SIZE = 5; + +//Стили +const STYLES = { + CONTAINER: { textAlign: "center", paddingTop: "20px" }, + TITLE: { paddingBottom: "15px" } +}; + +//--------------------------------------------- +//Вспомогательные функции форматирования данных +//--------------------------------------------- + +//Формирование значения для колонки "Тип контрагента" +const formatAgentTypeValue = (value, addText = false) => { + const [text, icon] = value == 0 ? ["Юридическое лицо", "business"] : ["Физическое лицо", "person"]; + return ( + + {icon} + {addText == true ? text : null} + + ); +}; + +//Форматирование значений колонок +const valueFormatter = ({ value, columnDef }) => { + switch (columnDef.name) { + case "NAGNTYPE": + return formatAgentTypeValue(value, true); + } + return value; +}; + +//Генерация представления ячейки c данными +const dataCellRender = ({ row, columnDef }) => { + switch (columnDef.name) { + case "NAGNTYPE": + return { + cellProps: { align: "center" }, + data: formatAgentTypeValue(row[columnDef.name], false) + }; + } +}; + +//Генерация представления ячейки заголовка +const headCellRender = ({ columnDef }) => { + switch (columnDef.name) { + case "NAGNTYPE": + return { + stackProps: { justifyContent: "center" }, + cellProps: { align: "center" } + }; + } +}; + +//----------- +//Тело модуля +//----------- + +//Пример: Таблица данных "P8PDataGrid" +const DataGrid = ({ title }) => { + //Собственное состояние - таблица данных + const [dataGrid, setdataGrid] = useState({ + dataLoaded: false, + columnsDef: [], + filters: null, + orders: null, + rows: [], + reload: true, + pageNumber: 1, + morePages: true + }); + + //Подключение к контексту взаимодействия с сервером + const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx); + + //Загрузка данных таблицы с сервера + const loadData = useCallback(async () => { + if (dataGrid.reload) { + const data = await executeStored({ + stored: "PKG_P8PANELS_SAMPLES.DATA_GRID", + args: { + CFILTERS: { VALUE: object2Base64XML(dataGrid.filters, { arrayNodeName: "filters" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB }, + CORDERS: { VALUE: object2Base64XML(dataGrid.orders, { arrayNodeName: "orders" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB }, + NPAGE_NUMBER: dataGrid.pageNumber, + NPAGE_SIZE: DATA_GRID_PAGE_SIZE, + NINCLUDE_DEF: dataGrid.dataLoaded ? 0 : 1 + }, + respArg: "COUT" + }); + setdataGrid(pv => ({ + ...pv, + columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef, + rows: pv.pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])], + dataLoaded: true, + reload: false, + morePages: (data.XROWS || []).length >= DATA_GRID_PAGE_SIZE + })); + } + }, [dataGrid.reload, dataGrid.filters, dataGrid.orders, dataGrid.dataLoaded, dataGrid.pageNumber, executeStored, SERV_DATA_TYPE_CLOB]); + + //При изменении состояния фильтра + const handleFilterChanged = ({ filters }) => setdataGrid(pv => ({ ...pv, filters: [...filters], pageNumber: 1, reload: true })); + + //При изменении состояния сортировки + const handleOrderChanged = ({ orders }) => setdataGrid(pv => ({ ...pv, orders: [...orders], pageNumber: 1, reload: true })); + + //При изменении количества отображаемых страниц + const handlePagesCountChanged = () => setdataGrid(pv => ({ ...pv, pageNumber: pv.pageNumber + 1, reload: true })); + + //При необходимости обновить данные таблицы + useEffect(() => { + loadData(); + }, [dataGrid.reload, loadData]); + + //Генерация содержимого + return ( +
+ + {title} + + + + + {dataGrid.dataLoaded ? ( + + ) : null} + + + +
+ ); +}; + +//Контроль свойств - Пример: Таблица данных "P8PDataGrid" +DataGrid.propTypes = { + title: PropTypes.string.isRequired +}; + +//---------------- +//Интерфейс модуля +//---------------- + +export { DataGrid }; diff --git a/app/panels/samples/samples.js b/app/panels/samples/samples.js index aeaa80a..959b3f1 100644 --- a/app/panels/samples/samples.js +++ b/app/panels/samples/samples.js @@ -14,6 +14,8 @@ import { P8Online } from "./p8online"; //Пример: API для взаимод import { Mui } from "./mui"; //Пример: Компоненты MUI import { Messages } from "./messages"; //Пример: Сообщения import { Loader } from "./loader"; //Пример: Индикатор процесса +import { DataGrid } from "./data_grid"; //Пример: Таблица данных "P8PDataGrid" +import { Chart } from "./chart"; //Пример: Графики "P8PChart" //--------- //Константы @@ -24,7 +26,9 @@ const MODES = { P8ONLINE: { name: "P8ONLINE", caption: 'API для взаимодействия с "ПАРУС 8 Онлайн"', component: P8Online }, MUI: { name: "MUI", caption: "Компоненты MUI", component: Mui }, MESSAGES: { name: "MESSAGES", caption: "Сообщения", component: Messages }, - LOADER: { name: "LOADER", caption: "Индикатор процесса", component: Loader } + LOADER: { name: "LOADER", caption: "Индикатор процесса", component: Loader }, + DATAGRID: { name: "DATAGRID", caption: 'Таблица данных "P8PDataGrid"', component: DataGrid }, + CHART: { name: "CHART", caption: 'Графики "P8PChart"', component: Chart } }; //Стили