Таблица на странице Наработка АКБ переработана в подсказку

src/components/views/WellView.tsx

@@ -19,6 +19,8 @@ export type WellViewProps = TooltipProps & {
     labelProps?: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
 }
 
+export const getWellTitle = (well: WellDto) => `${well.deposit || '-'} / ${well.cluster || '-'} / ${well.caption || '-'}`
+
 export const WellView = memo<WellViewProps>(({ well, iconProps, labelProps, ...other }) => well ? (
     <Tooltip {...other} title={(
         <Grid style={{ columnGap: '8px' }}>
@@ -53,7 +55,7 @@ export const WellView = memo<WellViewProps>(({ well, iconProps, labelProps, ...o
             <WellIcon state={wellState[well.idState || 0].enum} width={'1em'} height={'1em'} />
         </span>
         <span {...labelProps}>
-            {well.deposit} / {well.cluster} / {well.caption}
+            {getWellTitle(well)}
         </span>
     </Tooltip>
 ) : (

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 (
+            const card = (
-                <Card key={row.well.id} title={<WellView well={row.well} />} onClick={state ? makeOnCardClick(row) : null} style={cardStyle}>
+                <Card key={row.well.id} title={getWellTitle(row.well)} style={cardStyle}>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                         {state ? row.subsystems.map((ss) => generateSubsystem(ss)) : <Empty />}
                     </div>
                 </Card>
             )
+
+            if (!state) return card
+
+            const detailTitle = (
+                <>
+                    <span style={{ paddingRight: 15 }}>Детальная информация по скважине</span>
+                    <WellView well={row.well} />
+                </>
+            )
+
+            const detailContent = (
+                <Table
+                    size={'small'}
+                    pagination={false}
+                    dataSource={row.subsystems}
+                    columns={columns}
+                    onRow={onRow}
+                />
+            )
+
+            return <Popover title={detailTitle} content={detailContent}>{card}</Popover>
         })
-    }, [data, selected])
+    }, [data])
 
     return (
         <LoaderPortal show={isLoading} style={{ flex: 1 }}>
@@ -128,26 +143,9 @@ const GeneralSubsystemStatistics = memo(() => {
                     <span>Диапазон дат:</span>
                     <DateRangeWrapper allowClear onChange={setDates} value={dates} />
                 </div>
-                <div style={{ flex: 1, overflowY: 'scroll' }}>
+                <div style={{ padding: 15, display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 15 }}>
-                    <div style={{ padding: 15, display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 15 }}>
+                    {cards}
-                        {cards}
-                    </div>
                 </div>
-                {selected && (
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-                        <div style={{ display: 'flex', gap: 15, alignItems: 'center', justifyContent: 'center', fontSize: '1.25em', fontWeight: 600 }}>
-                            <span>Детальная информация по скважине</span>
-                            <WellView well={selected.well} />
-                        </div>
-                        <Table
-                            size={'small'}
-                            pagination={false}
-                            dataSource={selected.subsystems}
-                            columns={columns}
-                            onRow={onRow}
-                        />
-                    </div>
-                )}
             </div>
         </LoaderPortal>
     )