asb_cloud_front/src/components/AnalysisOperationTime.jsx

58 lines
1.7 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 { useParams } from "react-router-dom"
import { DatePicker } from 'antd';
import { notify } from "../components/factory"
import { useState, useEffect } from 'react'
import { TelemetryAnalyticsService } from '../services/api'
import { ChartOperationTime } from './charts/ChartOperationTime'
import LoaderPortal from '../components/LoaderPortal'
import moment from 'moment'
const { RangePicker } = DatePicker
const lines = [{ labelAccessorName: "processName", pieceAccessorName: "duration" }]
export function AnalysisOperationTime() {
let { id } = useParams()
const [operationTimeData, setOperationTimeData] = useState([])
const [loader, setLoader] = useState(false)
const [range, setRange] = useState([moment().subtract(1,'days'), moment()])
const onChangeRange = (range) => {
setRange(range)
}
const handleReceiveOperationTimeData = (data) => {
setOperationTimeData(data)
}
useEffect(() => {
setLoader(true)
let begin = null
let end = null
if (range?.length > 1) {
begin = range[0].toISOString()
end = range[1].toISOString()
}
TelemetryAnalyticsService.getOperationsSummary(id, begin, end)
.then(handleReceiveOperationTimeData)
.catch(error => {
notify(`Не удалось получить данные для Анализа Операция-Время по скважине "${id}" за период с ${begin} по ${end}`,
'warning')
console.log(error)
})
.finally(setLoader(false))
}, [id, range])
return (
<LoaderPortal show={loader}>
<RangePicker
showTime
onChange={onChangeRange}
/>
<ChartOperationTime
data={operationTimeData}
lines={lines}
/>
</LoaderPortal>
)
}