forked from CITKParus/P8-Panels
main #5
@ -7,7 +7,7 @@
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react"; //Классы React
|
||||
import React, { useEffect, useState, useCallback, useRef } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import {
|
||||
Box,
|
||||
@ -364,6 +364,9 @@ const P8PGantt = ({
|
||||
editTask: null
|
||||
});
|
||||
|
||||
//Ссылки на DOM
|
||||
const svgContainerRef = useRef(null);
|
||||
|
||||
//Отображение диаграммы
|
||||
const showGantt = useCallback(() => {
|
||||
if (!state.gantt) {
|
||||
@ -418,6 +421,11 @@ const P8PGantt = ({
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [tasks]);
|
||||
|
||||
//При подключении компонента к старице
|
||||
useEffect(() => {
|
||||
svgContainerRef.current.children[0].classList.add("scroll");
|
||||
}, []);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div style={{ ...(containerStyle ? containerStyle : {}) }}>
|
||||
@ -468,7 +476,7 @@ const P8PGantt = ({
|
||||
cancelBtnCaption={cancelTaskEditorBtnCaption}
|
||||
/>
|
||||
) : null}
|
||||
<div style={STYLES.GANTT(state.noData, title, zoomBar)}>
|
||||
<div style={STYLES.GANTT(state.noData, title, zoomBar)} ref={svgContainerRef}>
|
||||
<svg id="__gantt__" width="100%"></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -9,6 +9,8 @@
|
||||
|
||||
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
|
||||
import { Grid, Box } from "@mui/material"; //Интерфейсные элементы
|
||||
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
|
||||
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
|
||||
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
|
||||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
@ -21,7 +23,7 @@ import { dataCellRender, groupCellRender } from "./layouts"; //Дополнит
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
DATA_GRID_CONTAINER: { minWidth: "95vw", maxWidth: "95vw", minHeight: "87vh", maxHeight: "87vh" }
|
||||
DATA_GRID_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", ...APP_STYLES.SCROLL }
|
||||
};
|
||||
|
||||
//-----------
|
||||
@ -71,32 +73,30 @@ const PrjGraph = () => {
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<Box pt={1} display="flex" justifyContent="center" alignItems="center">
|
||||
{dataGrid.dataLoaded ? (
|
||||
<P8PDataGrid
|
||||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||||
columnsDef={dataGrid.columnsDef}
|
||||
groups={dataGrid.groups}
|
||||
rows={dataGrid.rows}
|
||||
size={P8P_DATA_GRID_SIZE.LARGE}
|
||||
reloading={dataGrid.reload}
|
||||
fixedHeader={dataGrid.fixedHeader}
|
||||
fixedColumns={dataGrid.fixedColumns}
|
||||
dataCellRender={prms => dataCellRender({ ...prms, pOnlineShowDocument })}
|
||||
groupCellRender={prms => groupCellRender({ ...prms, pOnlineShowDocument })}
|
||||
containerComponentProps={{
|
||||
elevation: 3,
|
||||
sx: STYLES.DATA_GRID_CONTAINER
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Box display="flex" justifyContent="center" alignItems="center">
|
||||
{dataGrid.dataLoaded ? (
|
||||
<P8PDataGrid
|
||||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||||
columnsDef={dataGrid.columnsDef}
|
||||
groups={dataGrid.groups}
|
||||
rows={dataGrid.rows}
|
||||
size={P8P_DATA_GRID_SIZE.LARGE}
|
||||
reloading={dataGrid.reload}
|
||||
fixedHeader={dataGrid.fixedHeader}
|
||||
fixedColumns={dataGrid.fixedColumns}
|
||||
dataCellRender={prms => dataCellRender({ ...prms, pOnlineShowDocument })}
|
||||
groupCellRender={prms => groupCellRender({ ...prms, pOnlineShowDocument })}
|
||||
containerComponentProps={{
|
||||
elevation: 0,
|
||||
sx: STYLES.DATA_GRID_CONTAINER
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</Box>
|
||||
</Grid>
|
||||
</div>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -34,6 +34,7 @@ import { MessagingСtx } from "../../context/messaging"; //Контекст со
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
import { formatDateJSONDateOnly } from "../../core/utils"; //Вспомогательные функции
|
||||
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
|
||||
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
|
||||
import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||
import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта
|
||||
import { formatDateRF } from "../../core/utils"; //Вспомогательные функции
|
||||
@ -54,11 +55,11 @@ const STYLES = {
|
||||
PROJECTS_LIST_ITEM_SECONDARY_NOEDIT: { color: "gray" },
|
||||
PROJECTS_LIST_ITEM_SECONDARY_CHANGED: { color: "green" },
|
||||
PROJECTS_BUTTON: { position: "absolute", top: `calc(${APP_BAR_HEIGHT} + 16px)`, left: "16px" },
|
||||
PROJECTS_DRAWER: { width: "250px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "250px", boxSizing: "border-box" } },
|
||||
PROJECTS_DRAWER: { width: "250px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "250px", boxSizing: "border-box", ...APP_STYLES.SCROLL } },
|
||||
GANTT_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", paddingTop: "24px" },
|
||||
GANTT_TITLE: { paddingLeft: "150px", paddingRight: "150px" },
|
||||
PERIODS_BUTTON: { position: "absolute", top: `calc(${APP_BAR_HEIGHT} + 16px)`, right: "16px" },
|
||||
PERIODS_DRAWER: { width: "1200px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "1200px", boxSizing: "border-box" } }
|
||||
PERIODS_DRAWER: { width: "1200px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "1200px", boxSizing: "border-box", ...APP_STYLES.SCROLL } }
|
||||
};
|
||||
|
||||
//------------------------------------
|
||||
|
@ -9,16 +9,26 @@
|
||||
|
||||
import React, { useContext, useState, useCallback, useEffect } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
|
||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
import { object2Base64XML } from "../../core/utils"; //Вспомогательные функции
|
||||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
|
||||
import { P8PDataGrid, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_MORE_HEIGHT } from "../../components/p8p_data_grid"; //Таблица данных
|
||||
import { LabPlanFOTDtl } from "./lab_plan_fot_dtl"; //Детализация плановой трудоёмкости по ФОТ
|
||||
import { LabFactRptDtl } from "./lab_fact_rpt_dtl"; //Детализация фактической трудоёмкости по "Планам и отчетам подразделений"
|
||||
import { LabPlanJobsDtl } from "./lab_plan_jobs_dtl"; //Детализация плановой трудоёмкости по графику
|
||||
import { periodsDataCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
DATA_GRID_CONTAINER: morePages => ({ height: `calc(100vh - ${morePages ? P8P_DATA_GRID_MORE_HEIGHT : "0px"})`, ...APP_STYLES.SCROLL })
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
@ -134,11 +144,16 @@ const ResMon = ({ ident, onPlanJobsDtlProjectClick }) => {
|
||||
{peridos.dataLoaded ? (
|
||||
<P8PDataGrid
|
||||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||||
containerComponentProps={{
|
||||
elevation: 0,
|
||||
sx: STYLES.DATA_GRID_CONTAINER(peridos.morePages)
|
||||
}}
|
||||
columnsDef={peridos.columnsDef}
|
||||
rows={peridos.rows}
|
||||
size={P8P_DATA_GRID_SIZE.SMALL}
|
||||
morePages={peridos.morePages}
|
||||
reloading={peridos.reload}
|
||||
fixedHeader={true}
|
||||
onOrderChanged={handlePeriodsOrderChanged}
|
||||
onPagesCountChanged={handlePeriodsPagesCountChanged}
|
||||
dataCellRender={prms =>
|
||||
|
@ -0,0 +1,18 @@
|
||||
.scroll::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: #b4b4b4;
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #808080;
|
||||
}
|
12
dist/p8-panels.js
vendored
12
dist/p8-panels.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user