forked from ddrilling/asb_cloud_front
Добавлено отображение даты последней телеметрий
This commit is contained in:
parent
2b216927fa
commit
c428d51b06
@ -1,5 +1,5 @@
|
|||||||
import moment from 'moment'
|
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 {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons'
|
||||||
|
|
||||||
import '@styles/display.less'
|
import '@styles/display.less'
|
||||||
@ -15,7 +15,7 @@ const displayValueStyle = { display: 'flex', flexGrow: 1 }
|
|||||||
export type ValueDisplayProps = {
|
export type ValueDisplayProps = {
|
||||||
prefix?: ReactNode
|
prefix?: ReactNode
|
||||||
suffix?: ReactNode
|
suffix?: ReactNode
|
||||||
format?: number | string | ((arg: any) => any)
|
format?: number | string | ((arg: string) => ReactNode)
|
||||||
isArrowVisible?: boolean
|
isArrowVisible?: boolean
|
||||||
enumeration?: Record<string, string>
|
enumeration?: Record<string, string>
|
||||||
value: string
|
value: string
|
||||||
@ -27,18 +27,17 @@ export type DisplayProps = ValueDisplayProps & {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const ValueDisplay = memo<ValueDisplayProps>(({ prefix, value, suffix, isArrowVisible, format, enumeration }) => {
|
export const ValueDisplay = memo<ValueDisplayProps>(({ prefix, value, suffix, isArrowVisible, format, enumeration }) => {
|
||||||
const [val, setVal] = useState<string>('---')
|
const [val, setVal] = useState<ReactNode>('---')
|
||||||
const [arrowState, setArrowState] = useState({
|
const [arrowState, setArrowState] = useState({
|
||||||
preVal: NaN,
|
preVal: NaN,
|
||||||
preTimestamp: Date.now(),
|
preTimestamp: Date.now(),
|
||||||
direction: 0,
|
direction: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
const fmt = useCallback((arg) => typeof format === 'function' ? format(arg) : format, [format])
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setVal((preVal) => {
|
setVal((preVal) => {
|
||||||
if ((value ?? '-') === '-' || value === '--') return '---'
|
if ((value ?? '-') === '-' || value === '--') return '---'
|
||||||
|
if (typeof format === 'function') return format(enumeration?.[value] ?? value)
|
||||||
if (enumeration?.[value]) return enumeration[value]
|
if (enumeration?.[value]) return enumeration[value]
|
||||||
|
|
||||||
if (Number.isFinite(+value)) {
|
if (Number.isFinite(+value)) {
|
||||||
@ -56,18 +55,18 @@ export const ValueDisplay = memo<ValueDisplayProps>(({ prefix, value, suffix, is
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return formatNumber(value, Number(fmt(value)))
|
return formatNumber(value, Number(format))
|
||||||
}
|
}
|
||||||
|
|
||||||
if (value.length > 4) {
|
if (value.length > 4) {
|
||||||
const valueDate = moment(value)
|
const valueDate = moment(value)
|
||||||
if (valueDate.isValid())
|
if (valueDate.isValid())
|
||||||
return valueDate.format(String(fmt(value)))
|
return valueDate.format(String(format))
|
||||||
}
|
}
|
||||||
|
|
||||||
return value
|
return value
|
||||||
})
|
})
|
||||||
},[value, isArrowVisible, arrowState, fmt, enumeration])
|
},[value, isArrowVisible, arrowState, format, enumeration])
|
||||||
|
|
||||||
let arrow = null
|
let arrow = null
|
||||||
if(isArrowVisible)
|
if(isArrowVisible)
|
||||||
|
@ -1,11 +1,23 @@
|
|||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import { memo } from 'react'
|
import { memo } from 'react'
|
||||||
|
import { Tooltip, Typography } from 'antd'
|
||||||
|
|
||||||
import { Display } from '@components/Display'
|
import { Display } from '@components/Display'
|
||||||
|
|
||||||
import RigMnemo from './RigMnemo'
|
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 (
|
||||||
|
<Tooltip title={`Время последних данных: ${date.format('DD.MM.YYYY HH:mm:ss')}`}>
|
||||||
|
{date.isSame(new Date(), 'day') || (
|
||||||
|
<Typography.Text disabled style={{ fontSize: '12px', marginRight: '5px' }}>{date.format('DD.MM.YYYY')}</Typography.Text>
|
||||||
|
)}
|
||||||
|
{date.format('HH:mm:ss')}
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const params = [
|
const params = [
|
||||||
{ label: 'Рот., об/мин', accessorName: 'rotorSpeed', isArrowVisible: true },
|
{ label: 'Рот., об/мин', accessorName: 'rotorSpeed', isArrowVisible: true },
|
||||||
|
Loading…
Reference in New Issue
Block a user