From 4b20a44d8857ef9ed52f3d81dc58b11954c18454 Mon Sep 17 00:00:00 2001 From: goodmice Date: Tue, 6 Dec 2022 04:44:03 +0500 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=B1=D0=B0=D0=B7=D0=BE=D0=B2=D0=B0=D1=8F=20?= =?UTF-8?q?=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F=20=D1=81=D1=82=D1=80=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D1=86=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/views/WellView.tsx | 12 +- src/pages/Deposit/DepositNavigationMenu.jsx | 2 + .../Deposit/GeneralSubsystemStatistics.jsx | 104 ++++++++++++++++++ src/pages/Deposit/index.jsx | 28 +++-- 4 files changed, 134 insertions(+), 12 deletions(-) create mode 100644 src/pages/Deposit/GeneralSubsystemStatistics.jsx diff --git a/src/components/views/WellView.tsx b/src/components/views/WellView.tsx index 316edb8..614dc52 100644 --- a/src/components/views/WellView.tsx +++ b/src/components/views/WellView.tsx @@ -1,4 +1,4 @@ -import { memo } from 'react' +import { DetailedHTMLProps, HTMLAttributes, memo } from 'react' import { Tooltip, TooltipProps } from 'antd' import { Grid, GridItem } from '@components/Grid' @@ -15,9 +15,11 @@ const wellState: Record = { export type WellViewProps = TooltipProps & { well?: WellDto + iconProps?: DetailedHTMLProps, HTMLSpanElement> + labelProps?: DetailedHTMLProps, HTMLSpanElement> } -export const WellView = memo(({ well, ...other }) => well ? ( +export const WellView = memo(({ well, iconProps, labelProps, ...other }) => well ? ( Название: @@ -47,10 +49,12 @@ export const WellView = memo(({ well, ...other }) => well ? ( {well.id ?? '---'} )}> - + - {well.caption} + + {well.deposit} / {well.cluster} / {well.caption} + ) : ( - diff --git a/src/pages/Deposit/DepositNavigationMenu.jsx b/src/pages/Deposit/DepositNavigationMenu.jsx index 304f062..b1c2965 100644 --- a/src/pages/Deposit/DepositNavigationMenu.jsx +++ b/src/pages/Deposit/DepositNavigationMenu.jsx @@ -1,5 +1,6 @@ import { memo } from 'react' import { + FundOutlined, HeatMapOutlined, } from '@ant-design/icons' @@ -7,6 +8,7 @@ import { makeItem, PrivateMenu } from '@components/PrivateMenu' export const menuItems = [ makeItem('Карта', 'map', [], ), + makeItem('Наработка АКБ', 'statistics', [], ), ] export const DepositNavigationMenu = memo((props) => ( diff --git a/src/pages/Deposit/GeneralSubsystemStatistics.jsx b/src/pages/Deposit/GeneralSubsystemStatistics.jsx new file mode 100644 index 0000000..b544157 --- /dev/null +++ b/src/pages/Deposit/GeneralSubsystemStatistics.jsx @@ -0,0 +1,104 @@ +import { memo, useCallback, useEffect, useState } from 'react' +import { QuestionCircleOutlined } from '@ant-design/icons' +import { Card } from 'antd' + +import { WellView } from '@components/views' +import LoaderPortal from '@components/LoaderPortal' +import { DateRangeWrapper, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table' +import { invokeWebApiWrapperAsync } from '@components/factory' +import { arrayOrDefault, withPermissions } from '@utils' +import { SubsystemOperationTimeService } from '@api' + +const numericRender = makeNumericRender(2) + +const columns = [ + makeTextColumn('Подсистема', 'subsystemName', undefined, undefined, (value, row) => value || row.key), + makeNumericColumn('Проходка, м', 'sumDepthInterval'), + makeNumericColumn('Время работы, ч', 'usedTimeHours'), + makeNumericColumn('Кол-во запусков', 'operationCount'), + makeNumericColumn('Коэф. использования, %', 'kUsage', undefined, undefined, (value) => numericRender(value * 100)), +] + +const getSubsystemIcon = (subsystem) => { + return +} + +const GeneralSubsystemStatistics = memo(() => { + const [data, setData] = useState([]) + const [isLoading, setIsLoading] = useState(false) + const [selected, setSelected] = useState(null) + const [dates, setDates] = useState([null, null]) + + const onRow = useCallback((record) => { + + }, [selected]) + + useEffect(() => { + invokeWebApiWrapperAsync( + async () => { + const data = await SubsystemOperationTimeService.getStatByWell(dates?.[0]?.toISOString(), dates?.[1]?.toISOString()) + const out = arrayOrDefault(data).map(({ well, ...subsystems }) => ({ + well, + subsystems: Object.entries(subsystems).map(([key, value]) => ({ key, ...value })), + })) + setData(out) + }, + setIsLoading, + 'Не удалось загрузить статистику наработки подсистем', + { actionName: 'Загрузка статистики наработки подсистем' }, + ) + }, [dates]) + + const makeOnCardClick = useCallback((row) => () => { + setSelected((prev) => (prev?.well.id === row.well.id) ? null : row) + }, []) + + return ( + +
+
+ Диапазон дат: + +
+
+ {data.map((row) => { + const cardStyle = { + boxShadow: row.well.id === selected?.well.id ? '0 0 5px 2px gray' : null, + } + + return ( + } onClick={makeOnCardClick(row)} style={cardStyle}> +
+ {row.subsystems.map((ss) => ( +
+ {getSubsystemIcon(ss)} + {ss.subsystemName || ss.key} +
+ ))} +
+ + ) + })} +
+ {selected && ( +
+
+ Детальная информация по скважине + +
+ + + )} + + + ) +}) + +export default withPermissions(GeneralSubsystemStatistics, []) diff --git a/src/pages/Deposit/index.jsx b/src/pages/Deposit/index.jsx index b0af444..c17a951 100644 --- a/src/pages/Deposit/index.jsx +++ b/src/pages/Deposit/index.jsx @@ -3,10 +3,15 @@ import { lazy, memo, useEffect, useMemo } from 'react' import { DepositContext, RootPathContext, useDepositList, useLayoutProps, useRootPath } from '@asb/context' import FastRunMenu from '@components/FastRunMenu' +import { makeMenuBreadcrumbItemsRender } from '@components/MenuBreadcrumb' import { NoAccessComponent, withPermissions } from '@utils' +import { DepositNavigationMenu, menuItems } from './DepositNavigationMenu' + const Map = lazy(() => import('./Map')) -const DepositNavigationMenu = lazy(() => import('./DepositNavigationMenu')) +const GeneralSubsystemStatistics = lazy(() => import('./GeneralSubsystemStatistics')) + +const breadcrumb = makeMenuBreadcrumbItemsRender(menuItems, /^\/deposit\/[^\/#?]+\//) const Deposit = memo(() => { const { '*': param } = useParams() @@ -17,9 +22,14 @@ const Deposit = memo(() => { const root = useRootPath() const rootPath = useMemo(() => `${root}/deposit`, [root]) - const idDeposit = useMemo(() => { - const result = /^([^\/#?]+)/.exec(param) - return result && result[1] !== 'null' ? Number(result[1]) : null + const [idDeposit, isMap] = useMemo(() => { + const result = /^([^\/#?]+)(:?\/([^\/#?]+))?/.exec(param) + if (!result) return [null, false] + console.log(result) + return [ + result[1] !== 'null' ? Number(result[1]) : null, + result[3] === 'map', + ] }, [param]) const deposit = useMemo(() => deposits.find((deposit) => deposit.id === idDeposit) || null, [deposits, idDeposit]) @@ -33,13 +43,14 @@ const Deposit = memo(() => { } setLayoutProps({ - sheet: false, - sider: , - showSelector: true, + breadcrumb: !isMap && breadcrumb, + sheet: !isMap, + sider: , + showSelector: isMap, selectorProps, title: 'Месторождение', }) - }, [setLayoutProps, idDeposit]) + }, [setLayoutProps, idDeposit, isMap]) return ( @@ -53,6 +64,7 @@ const Deposit = memo(() => { } /> } /> + } />