diff --git a/src/pages/Deposit/GeneralSubsystemStatistics.jsx b/src/pages/Deposit/GeneralSubsystemStatistics.jsx index b544157..2f9d4cd 100644 --- a/src/pages/Deposit/GeneralSubsystemStatistics.jsx +++ b/src/pages/Deposit/GeneralSubsystemStatistics.jsx @@ -1,6 +1,11 @@ -import { memo, useCallback, useEffect, useState } from 'react' -import { QuestionCircleOutlined } from '@ant-design/icons' -import { Card } from 'antd' +import { memo, useCallback, useEffect, useMemo, useState } from 'react' +import { + CheckOutlined, + StopOutlined, + QuestionCircleOutlined, + WarningOutlined, +} from '@ant-design/icons' +import { Card, Empty } from 'antd' import { WellView } from '@components/views' import LoaderPortal from '@components/LoaderPortal' @@ -19,8 +24,48 @@ const columns = [ makeNumericColumn('Коэф. использования, %', 'kUsage', undefined, undefined, (value) => numericRender(value * 100)), ] -const getSubsystemIcon = (subsystem) => { - return +const getSubsystemState = (subsystem) => { + if (!subsystem || typeof subsystem.kUsage !== 'number') return null + if (subsystem.kUsage <= 0.2) return 'error' + if (subsystem.kUsage <= 0.7) return 'warn' + return 'ok' +} + +const getSubsystemColor = (state) => { + switch (state) { + case 'ok': return '#52c41a' + case 'warn': return '#faad14' + case 'error': return '#ff4d4f' + default: return null + } +} + +const getSubsystemIcon = (state) => { + switch (state) { + case 'ok': return + case 'warn': return + case 'error': return + default: return + } +} + +const getCardState = (subsystems) => { + if (subsystems.length <= 0) return null + const states = subsystems.map((ss) => getSubsystemState(ss)) + if (states.some((state) => state === 'error')) return 'error' + if (states.some((state) => state === 'warn')) return 'warn' + return 'ok' +} + +const generateSubsystem = (subsystem) => { + const state = getSubsystemState(subsystem) + + return ( +
+ {getSubsystemIcon(state)} + {subsystem.subsystemName || subsystem.key} +
+ ) } const GeneralSubsystemStatistics = memo(() => { @@ -30,7 +75,10 @@ const GeneralSubsystemStatistics = memo(() => { 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(() => { @@ -39,7 +87,7 @@ const GeneralSubsystemStatistics = memo(() => { 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 })), + subsystems: Object.entries(subsystems).filter(([_, v]) => v).map(([key, v]) => ({ key, ...v })) })) setData(out) }, @@ -53,32 +101,37 @@ const GeneralSubsystemStatistics = memo(() => { 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)}`, + userSelect: 'none', + } + + return ( + } onClick={state ? makeOnCardClick(row) : null} style={cardStyle}> +
+ {state ? row.subsystems.map((ss) => generateSubsystem(ss)) : } +
+
+ ) + }) + }, [data, selected]) + 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} -
- ))} -
-
- ) - })} +
+
+ {cards} +
{selected && (
@@ -87,7 +140,6 @@ const GeneralSubsystemStatistics = memo(() => {