asb_cloud_front/src/components/AnalysisOperationTime.jsx

42 lines
1.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import moment from 'moment'
import { DatePicker } from 'antd'
import { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { TelemetryAnalyticsService } from '@api'
import { ChartOperationTime } from './charts/ChartOperationTime'
const { RangePicker } = DatePicker
const lines = [{ labelAccessorName: 'processName', pieceAccessorName: 'duration' }]
export const AnalysisOperationTime = () => {
const { id } = useParams()
const [operationTimeData, setOperationTimeData] = useState([])
const [loader, setLoader] = useState(false)
const [range, setRange] = useState([moment().subtract(1,'days'), moment()])
useEffect(() => invokeWebApiWrapperAsync(
async () => {
const begin = range?.length > 1 ? range[0].toISOString() : null
const end = range?.length > 1 ? range[1].toISOString() : null
const summary = await TelemetryAnalyticsService.getOperationsSummary(id, begin, end)
setOperationTimeData(summary)
},
setLoader,
`Не удалось получить данные для анализа Операция-Время по скважине '${id}' за период с ${begin} по ${end}`,
'Получение данных для анализа Операция-Время по скважине'
), [id, range])
return (
<LoaderPortal show={loader}>
<RangePicker showTime onChange={(range) => setRange(range)} />
<ChartOperationTime data={operationTimeData} lines={lines} />
</LoaderPortal>
)
}
export default AnalysisOperationTime