From b2d241a8e7c0a76d9d2a9768ea2c755a877a04ee Mon Sep 17 00:00:00 2001 From: goodmice Date: Sun, 13 Nov 2022 14:25:03 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?= =?UTF-8?q?=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=BD=D0=B0=20=D0=BC=D0=B0=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D1=8C=D0=BA=D0=B8=D1=85=20=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D0=B0?= =?UTF-8?q?=D1=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 63 ++++++++---------- src/components/LoaderPortal.tsx | 5 +- src/components/Table/EditableTable.jsx | 4 +- .../d3/monitoring/D3MonitoringCharts.tsx | 10 +-- src/index.tsx | 17 ++++- src/pages/Cluster/ClusterWells.jsx | 7 +- src/pages/Well/Telemetry/Archive/index.jsx | 3 +- src/pages/Well/Telemetry/Messages.jsx | 4 +- .../Well/Telemetry/TelemetryView/index.jsx | 4 +- src/styles/include/antd_theme.less | 7 +- src/styles/layout.less | 25 +++++-- src/styles/loader.css | 7 ++ src/styles/monitoring.less | 17 ----- src/styles/telemetry_view.less | 66 +++++++++++++++++++ 14 files changed, 156 insertions(+), 83 deletions(-) delete mode 100644 src/styles/monitoring.less create mode 100644 src/styles/telemetry_view.less diff --git a/src/App.tsx b/src/App.tsx index 28ed1b2..0d84e96 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,10 @@ import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom' import { lazy, memo, Suspense } from 'react' -import locale from 'antd/lib/locale/ru_RU' -import { ConfigProvider } from 'antd' import { RootPathContext } from '@asb/context' import SuspenseFallback from '@components/SuspenseFallback' -import { getUser, NoAccessComponent } from '@utils' -import { OpenAPI } from '@api' +import { NoAccessComponent } from '@utils' -import '@styles/include/antd_theme.less' import '@styles/App.less' const UserOutlet = lazy(() => import('@components/outlets/UserOutlet')) @@ -24,45 +20,38 @@ const Deposit = lazy(() => import('@pages/Deposit')) const Cluster = lazy(() => import('@pages/Cluster')) const Well = lazy(() => import('@pages/Well')) -// OpenAPI.BASE = 'http://localhost:3000' -// TODO: Удалить взятие из 'token' в следующем релизе, вставлено для совместимости -OpenAPI.TOKEN = async () => getUser().token || localStorage.getItem('token') || '' -OpenAPI.HEADERS = { 'Content-Type': 'application/json' } - export const App = memo(() => ( - - - }> - - - } /> - } /> + + }> + + + } /> + } /> - {/* Public pages */} - } /> - } /> + {/* Public pages */} + } /> + } /> - {/* User pages */} - }> - } /> + {/* User pages */} + }> + } /> - }> - }> - {/* Admin pages */} - } /> + }> + }> + {/* Admin pages */} + } /> - {/* Client pages */} - } /> - } /> - } /> - + {/* Client pages */} + } /> + } /> + } /> - - - - - + + + + + )) export default App diff --git a/src/components/LoaderPortal.tsx b/src/components/LoaderPortal.tsx index 04d9999..770c37a 100755 --- a/src/components/LoaderPortal.tsx +++ b/src/components/LoaderPortal.tsx @@ -6,11 +6,12 @@ type LoaderPortalProps = HTMLAttributes & { show?: boolean, fade?: boolean, spinnerProps?: HTMLAttributes, + fillContent?: boolean } -export const LoaderPortal: React.FC = ({ className = '', show, fade = true, children, spinnerProps, ...other }) => ( +export const LoaderPortal: React.FC = ({ className = '', show, fade = true, children, spinnerProps, fillContent, ...other }) => (
-
{children}
+
{children}
{show && fade &&
} {show &&
}
diff --git a/src/components/Table/EditableTable.jsx b/src/components/Table/EditableTable.jsx index a94955e..a471789 100755 --- a/src/components/Table/EditableTable.jsx +++ b/src/components/Table/EditableTable.jsx @@ -221,9 +221,7 @@ export const EditableTable = memo(({ const mergedColumns = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn]) - useEffect(() => { - setData(tryAddKeys(dataSource)) - }, [dataSource]) + useEffect(() => setData(tryAddKeys(dataSource)), [dataSource]) return (
diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index dbc2a54..bfeb30b 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx @@ -193,6 +193,7 @@ const _D3MonitoringCharts = >({ methods, className = '', + style, ...other }: D3MonitoringChartsProps) => { const [datasets, setDatasets, resetDatasets] = useUserSettings(chartName, datasetGroups) @@ -351,10 +352,10 @@ const _D3MonitoringCharts = >({ x: getByAccessor(dataset.xAxis?.accessor), } ) - + if (newChart.type === 'line') newChart.optimization = false - + // Если у графика нет группы создаём её if (newChart().empty()) group().append('g') @@ -496,12 +497,12 @@ const _D3MonitoringCharts = >({ default: break } - + if (chart.point) renderPoint(xAxis, yAxis, chart, chartData, true) if (dash) chart().attr('stroke-dasharray', dash) - + chart.afterDraw?.(chart) }) }) @@ -513,6 +514,7 @@ const _D3MonitoringCharts = >({ style={{ width: givenWidth, height: givenHeight, + ...style, }} >
getUser().token || localStorage.getItem('token') || '' +OpenAPI.HEADERS = { 'Content-Type': 'application/json' } + const container = document.getElementById('root') ?? document.body const root = createRoot(container) root.render( - + + + ) diff --git a/src/pages/Cluster/ClusterWells.jsx b/src/pages/Cluster/ClusterWells.jsx index a74c8bd..a84e9cb 100755 --- a/src/pages/Cluster/ClusterWells.jsx +++ b/src/pages/Cluster/ClusterWells.jsx @@ -7,11 +7,11 @@ import { makeTextColumn, makeGroupColumn, makeColumn, - makeDateSorter, makeNumericColumnPlanFact, Table, makeNumericRender, makeNumericColumn, + makeDateColumn, } from '@components/Table' import LoaderPortal from '@components/LoaderPortal' import PointerIcon from '@components/icons/PointerIcon' @@ -39,7 +39,6 @@ const filtersWellsType = [] const DAY_IN_MS = 86_400_000 const ONLINE_DEADTIME = 600_000 -const getDate = (str) => isRawDate(str) ? new Date(str).toLocaleString() : '-' const numericRender = makeNumericRender(1) const ClusterWells = memo(({ statsWells }) => { @@ -131,8 +130,8 @@ const ClusterWells = memo(({ statsWells }) => { ), makeTextColumn('Тип скв.', 'wellType', filtersWellsType, null, (text) => text ?? '-'), makeGroupColumn('Фактические сроки', [ - makeColumn('начало', 'factStart', { sorter: makeDateSorter('factStart'), render: getDate }), - makeColumn('окончание', 'factEnd', { sorter: makeDateSorter('factEnd'), render: getDate }), + makeDateColumn('начало', 'factStart'), + makeDateColumn('окончание', 'factEnd'), ]), makeNumericColumnPlanFact('Продолжительность, сут', 'period', filtersMinMax, makeFilterMinMaxFunction, numericRender), makeNumericColumnPlanFact('МСП, м/ч', 'rateOfPenetration', filtersMinMax, makeFilterMinMaxFunction, numericRender), diff --git a/src/pages/Well/Telemetry/Archive/index.jsx b/src/pages/Well/Telemetry/Archive/index.jsx index a6a6e6d..c708eaf 100644 --- a/src/pages/Well/Telemetry/Archive/index.jsx +++ b/src/pages/Well/Telemetry/Archive/index.jsx @@ -223,7 +223,7 @@ const Archive = memo(() => { const chartData = useMemo(() => cutData(dataSaub, domain.min, domain.max), [dataSaub, domain]) return ( - +
Начальная дата:  @@ -259,6 +259,7 @@ const Archive = memo(() => { render: cursorRender, } }} + style={{ flexGrow: 1 }} height={'76vh'} onWheel={onGraphWheel} /> diff --git a/src/pages/Well/Telemetry/Messages.jsx b/src/pages/Well/Telemetry/Messages.jsx index 653e122..4af1a31 100644 --- a/src/pages/Well/Telemetry/Messages.jsx +++ b/src/pages/Well/Telemetry/Messages.jsx @@ -28,7 +28,7 @@ const categoryDictionary = { // Конфигурация таблицы export const makeMessageColumns = (idWell) => [ - makeDateColumn('Дата', 'date', undefined, undefined, { width: '10rem' }), + makeDateColumn('Дата', 'date', undefined, undefined, { width: '120px' }), makeNumericColumn('Глубина, м', 'wellDepth', null, null, (depth, item) => ( [ ellipsis: true, }), makeColumn('Сообщение', 'message', { onFilter: (value, record) => record.name.indexOf(value) === 0 }), - makeTextColumn('Пользователь', 'user', null, null, null, { width: '10rem' }), + makeTextColumn('Пользователь', 'user', null, null, null, { width: '120px' }), ] const filterOptions = [ diff --git a/src/pages/Well/Telemetry/TelemetryView/index.jsx b/src/pages/Well/Telemetry/TelemetryView/index.jsx index 69094ea..a2fa8f1 100644 --- a/src/pages/Well/Telemetry/TelemetryView/index.jsx +++ b/src/pages/Well/Telemetry/TelemetryView/index.jsx @@ -32,7 +32,7 @@ import MomentStabPicDisabled from '@images/DempherOff.png' import SpinPicEnabled from '@images/SpinEnabled.png' import SpinPicDisabled from '@images/SpinDisabled.png' -import '@styles/monitoring.less' +import '@styles/telemetry_view.less' import '@styles/message.less' const { Option } = Select @@ -186,7 +186,7 @@ const TelemetryView = memo(() => { return ( - +
diff --git a/src/styles/include/antd_theme.less b/src/styles/include/antd_theme.less index 68e0e3f..c9acd72 100644 --- a/src/styles/include/antd_theme.less +++ b/src/styles/include/antd_theme.less @@ -7,8 +7,5 @@ // Переменные для темы тут: // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less -//@primary-color: rgba(124, 124, 124, 0.3); -@primary-color: rgb(195, 40,40); -//@primary-color:rgb(65, 63, 61); -//@layout-header-background: rgb(195, 40,40); -@layout-header-background: rgb(65, 63, 61); +@primary-color: #C32828; // rgb(195, 40, 40) +@layout-header-background:#413F3D; // rgb(65, 63, 61) diff --git a/src/styles/layout.less b/src/styles/layout.less index 4d5861f..225dd03 100644 --- a/src/styles/layout.less +++ b/src/styles/layout.less @@ -19,6 +19,10 @@ } .page-layout { + --sheet-padding: 15px; + + @sheet-padding: var(--sheet-padding); + height: 100vh; & .menu-sider { @@ -62,7 +66,7 @@ background-color: transparent; cursor: pointer; overflow: hidden; - + &:hover { color: white; } @@ -88,8 +92,9 @@ display: flex; justify-content: space-between; align-items: center; - gap: 15px; - padding: 0 15px 15px 15px; + gap: @sheet-padding; + padding: @sheet-padding; + padding-top: 0; & .ant-breadcrumb-link, .ant-breadcrumb-separator { .no-select; @@ -99,7 +104,7 @@ } & .sheet{ - padding: 15px; + padding: @sheet-padding; // min-height: calc(@layout-min-height - 30px); // 280px; overflow: visible; // margin: 15px; @@ -126,3 +131,15 @@ .site-layout-background { background: #fff; } + +@media only screen and (max-width: 1280px) { + .page-layout { + --sheet-padding: 10px; + } +} + +@media only screen and (max-width: 1024px) { + .page-layout { + --sheet-padding: 5px; + } +} diff --git a/src/styles/loader.css b/src/styles/loader.css index 23ab350..33a233a 100755 --- a/src/styles/loader.css +++ b/src/styles/loader.css @@ -39,11 +39,18 @@ } .loader-content{ + display: flex; + flex-direction: column; grid-column-start: 1; grid-column-end: span 3; grid-row-start: 1; } +.loader-content.loader-content-fill { + height: 100%; + width: 100%; +} + .loader-overlay{ grid-column-start: 1; grid-column-end: span 3; diff --git a/src/styles/monitoring.less b/src/styles/monitoring.less deleted file mode 100644 index 9a3cb0e..0000000 --- a/src/styles/monitoring.less +++ /dev/null @@ -1,17 +0,0 @@ -.page-top { - display: flex; - flex-wrap: wrap; - margin: -5px; - - & > * { - margin: 5px; - } - - & > .icons { - display: flex; - - & > * { - margin-left: 15px; - } - } -} diff --git a/src/styles/telemetry_view.less b/src/styles/telemetry_view.less new file mode 100644 index 0000000..cdbb3c6 --- /dev/null +++ b/src/styles/telemetry_view.less @@ -0,0 +1,66 @@ +.telemetry-view-page { + --page-gap: 10px; + + @page-gap: var(--page-gap); + + .flex-container { + display: flex; + align-items: stretch; + justify-content: space-between; + gap: @page-gap; + } + + width: 100%; + height: 100%; + flex-direction: column; + .flex-container; + + & .page-top { + .flex-container; + flex-wrap: wrap; + justify-content: flex-start; + + & .icons { + display: flex; + + & > * { + margin-left: 15px; + } + } + } + + & .page-main { + flex-grow: 1; + .flex-container; + + & .page-left { + .flex-container; + justify-content: flex-start; + flex-direction: column; + + & .modes, & .current-values { + .flex-container; + flex-direction: column; + gap: 0; + } + } + + & .page-right { + flex-grow: 1; + .flex-container; + flex-direction: column; + } + } +} + +@media only screen and (max-width: 1280px) { + .telemetry-view-page { + --page-gap: 7.5px; + } +} + +@media only screen and (max-width: 1024px) { + .telemetry-view-page { + --page-gap: 5px; + } +}