diff --git a/src/components/views/WellView.tsx b/src/components/views/WellView.tsx index 614dc52..125303a 100644 --- a/src/components/views/WellView.tsx +++ b/src/components/views/WellView.tsx @@ -19,6 +19,8 @@ export type WellViewProps = TooltipProps & { labelProps?: DetailedHTMLProps, HTMLSpanElement> } +export const getWellTitle = (well: WellDto) => `${well.deposit || '-'} / ${well.cluster || '-'} / ${well.caption || '-'}` + export const WellView = memo(({ well, iconProps, labelProps, ...other }) => well ? ( @@ -53,7 +55,7 @@ export const WellView = memo(({ well, iconProps, labelProps, ...o - {well.deposit} / {well.cluster} / {well.caption} + {getWellTitle(well)} ) : ( diff --git a/src/pages/Deposit/GeneralSubsystemStatistics.jsx b/src/pages/Deposit/GeneralSubsystemStatistics.jsx index 2f9d4cd..ddde54e 100644 --- a/src/pages/Deposit/GeneralSubsystemStatistics.jsx +++ b/src/pages/Deposit/GeneralSubsystemStatistics.jsx @@ -1,13 +1,13 @@ -import { memo, useCallback, useEffect, useMemo, useState } from 'react' +import { memo, useEffect, useMemo, useState } from 'react' import { CheckOutlined, StopOutlined, QuestionCircleOutlined, WarningOutlined, } from '@ant-design/icons' -import { Card, Empty } from 'antd' +import { Card, Empty, Popover } from 'antd' -import { WellView } from '@components/views' +import { getWellTitle, WellView } from '@components/views' import LoaderPortal from '@components/LoaderPortal' import { DateRangeWrapper, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table' import { invokeWebApiWrapperAsync } from '@components/factory' @@ -68,19 +68,18 @@ const generateSubsystem = (subsystem) => { ) } +const onRow = (record) => { + const state = getSubsystemState(record) + if (state === null) return null + const color = getSubsystemColor(state) + return { style: { backgroundColor: color, color: 'white' } } +} + 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) => { - const state = getSubsystemState(record) - if (state === null) return null - const color = getSubsystemColor(state) - return { style: { backgroundColor: color } } - }, [selected]) - useEffect(() => { invokeWebApiWrapperAsync( async () => { @@ -97,29 +96,45 @@ const GeneralSubsystemStatistics = memo(() => { ) }, [dates]) - const makeOnCardClick = useCallback((row) => () => { - setSelected((prev) => (prev?.well.id === row.well.id) ? null : row) - }, []) - const cards = useMemo(() => { return data.map((row) => { const state = getCardState(row.subsystems) - const isSelected = row.well.id === selected?.well.id const cardStyle = { - boxShadow: `0 0 5px 2px ${isSelected ? 'gray' : getSubsystemColor(state)}`, + boxShadow: `0 0 5px 2px ${getSubsystemColor(state)}`, userSelect: 'none', } - return ( - } onClick={state ? makeOnCardClick(row) : null} style={cardStyle}> + const card = ( +
{state ? row.subsystems.map((ss) => generateSubsystem(ss)) : }
) + + if (!state) return card + + const detailTitle = ( + <> + Детальная информация по скважине + + + ) + + const detailContent = ( + + ) + + return {card} }) - }, [data, selected]) + }, [data]) return ( @@ -128,26 +143,9 @@ const GeneralSubsystemStatistics = memo(() => { Диапазон дат: -
-
- {cards} -
+
+ {cards}
- {selected && ( -
-
- Детальная информация по скважине - -
-
- - )} )