diff --git a/src/components/Display.tsx b/src/components/Display.tsx index 8ecf5d7..a423bab 100644 --- a/src/components/Display.tsx +++ b/src/components/Display.tsx @@ -1,5 +1,5 @@ import moment from 'moment' -import { useState, useEffect, memo, ReactNode, useCallback } from 'react' +import { useState, useEffect, memo, ReactNode } from 'react' import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons' import '@styles/display.less' @@ -15,7 +15,7 @@ const displayValueStyle = { display: 'flex', flexGrow: 1 } export type ValueDisplayProps = { prefix?: ReactNode suffix?: ReactNode - format?: number | string | ((arg: any) => any) + format?: number | string | ((arg: string) => ReactNode) isArrowVisible?: boolean enumeration?: Record value: string @@ -27,18 +27,17 @@ export type DisplayProps = ValueDisplayProps & { } export const ValueDisplay = memo(({ prefix, value, suffix, isArrowVisible, format, enumeration }) => { - const [val, setVal] = useState('---') + const [val, setVal] = useState('---') const [arrowState, setArrowState] = useState({ preVal: NaN, preTimestamp: Date.now(), direction: 0, }) - const fmt = useCallback((arg) => typeof format === 'function' ? format(arg) : format, [format]) - useEffect(() => { setVal((preVal) => { if ((value ?? '-') === '-' || value === '--') return '---' + if (typeof format === 'function') return format(enumeration?.[value] ?? value) if (enumeration?.[value]) return enumeration[value] if (Number.isFinite(+value)) { @@ -56,18 +55,18 @@ export const ValueDisplay = memo(({ prefix, value, suffix, is }) } - return formatNumber(value, Number(fmt(value))) + return formatNumber(value, Number(format)) } if (value.length > 4) { const valueDate = moment(value) if (valueDate.isValid()) - return valueDate.format(String(fmt(value))) + return valueDate.format(String(format)) } return value }) - },[value, isArrowVisible, arrowState, fmt, enumeration]) + },[value, isArrowVisible, arrowState, format, enumeration]) let arrow = null if(isArrowVisible) diff --git a/src/pages/Telemetry/TelemetryView/CustomColumn.jsx b/src/pages/Telemetry/TelemetryView/CustomColumn.jsx index 89c44c4..9bc1cc5 100755 --- a/src/pages/Telemetry/TelemetryView/CustomColumn.jsx +++ b/src/pages/Telemetry/TelemetryView/CustomColumn.jsx @@ -1,46 +1,58 @@ import moment from 'moment' import { memo } from 'react' +import { Tooltip, Typography } from 'antd' import { Display } from '@components/Display' import RigMnemo from './RigMnemo' -const getTimeFormat = (date) => moment(date).isSame(new Date(), 'day') ? 'HH:mm:ss' : 'DD.MM.YYYY HH:mm:ss' +const getTimeFormat = (value) => { + const date = moment(value) + + return ( + + {date.isSame(new Date(), 'day') || ( + {date.format('DD.MM.YYYY')} + )} + {date.format('HH:mm:ss')} + + ) +} const params = [ - { label: 'Рот., об/мин', accessorName: 'rotorSpeed', isArrowVisible: true }, - { label: 'Долото, м', accessorName: 'bitDepth', isArrowVisible: true, format: 2 }, - { label: 'Забой, м', accessorName: 'wellDepth', isArrowVisible: true, format: 2 }, - { label: 'Расход, м³/ч', accessorName: 'flow', isArrowVisible: true }, - { label: 'Расход х.х., м³/ч', accessorName: 'flowIdle', isArrowVisible: true }, - { label: 'Время', accessorName: 'date', format: getTimeFormat }, - { label: 'MSE, %', accessorName: 'mse', format: 2 }, + { label: 'Рот., об/мин', accessorName: 'rotorSpeed', isArrowVisible: true }, + { label: 'Долото, м', accessorName: 'bitDepth', isArrowVisible: true, format: 2 }, + { label: 'Забой, м', accessorName: 'wellDepth', isArrowVisible: true, format: 2 }, + { label: 'Расход, м³/ч', accessorName: 'flow', isArrowVisible: true }, + { label: 'Расход х.х., м³/ч', accessorName: 'flowIdle', isArrowVisible: true }, + { label: 'Время', accessorName: 'date', format: getTimeFormat }, + { label: 'MSE, %', accessorName: 'mse', format: 2 }, ] export const CustomColumn = memo(({ data }) => { - const dataLast = data[data.length - 1] - params.forEach(param => param.value = dataLast?.[param.accessorName] ?? '-') + const dataLast = data[data.length - 1] + params.forEach(param => param.value = dataLast?.[param.accessorName] ?? '-') - return ( - <> - {params.map(param => ( - - ))} - - - ) + return ( + <> + {params.map(param => ( + + ))} + + + ) }) export default CustomColumn