ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Добавлено отображение даты последней телеметрий

Browse Source
This commit is contained in:
goodmice 2022-06-02 16:16:11 +05:00
parent 2b216927fa
commit c428d51b06
2 changed files with 49 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Display.tsx
View File

@ -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<string, string>
value: string
@ -27,18 +27,17 @@ export type DisplayProps = ValueDisplayProps & {
}
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({
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<ValueDisplayProps>(({ 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)

72
src/pages/Telemetry/TelemetryView/CustomColumn.jsx
View File

@ -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 (
<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 = [
{ 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 => (
<Display
className={'border_small display_flex_container'}
key={param.label}
label={param.label}
value={param.value}
suffix={param.units}
format={param.format}
isArrowVisible={param.isArrowVisible}
/>
))}
<RigMnemo
wellDepth={dataLast?.wellDepth ?? Number.NaN}
bitPosition={dataLast?.bitDepth ?? Number.NaN}
blockPosition={dataLast?.blockPosition ?? Number.NaN}
/>
</>
)
return (
<>
{params.map(param => (
<Display
className={'border_small display_flex_container'}
key={param.label}
label={param.label}
value={param.value}
suffix={param.units}
format={param.format}
isArrowVisible={param.isArrowVisible}
/>
))}
<RigMnemo
wellDepth={dataLast?.wellDepth ?? Number.NaN}
bitPosition={dataLast?.bitDepth ?? Number.NaN}
blockPosition={dataLast?.blockPosition ?? Number.NaN}
/>
</>
)
})
export default CustomColumn