forked from ddrilling/asb_cloud_front
Удалены старые страницы, использующие TelemetryAnalytics
This commit is contained in:
goodmice
parent
f0659f234c
commit
9e8648d33e
@ -1,163 +0,0 @@
|
||||
import { Table, Select, DatePicker } from "antd";
|
||||
import { TelemetryAnalyticsService } from "../src/services/api";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import notify from "../src/components/notify";
|
||||
import LoaderPortal from "../src/components/LoaderPortal";
|
||||
import moment from "moment";
|
||||
import "../styles/message.css";
|
||||
|
||||
const { Option } = Select;
|
||||
const pageSize = 26;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Название операции",
|
||||
key: "name",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "Дата начала операции",
|
||||
key: "beginDate",
|
||||
dataIndex: "beginDate",
|
||||
render: (item) => moment.utc(item).local().format("DD MMM YYYY, HH:mm:ss"),
|
||||
},
|
||||
{
|
||||
title: "Дата окончания операции",
|
||||
key: "endDate",
|
||||
dataIndex: "endDate",
|
||||
render: (item) => moment.utc(item).local().format("DD MMM YYYY, HH:mm:ss"),
|
||||
},
|
||||
{
|
||||
title: "Глубина скважины в начале операции",
|
||||
key: "beginWellDepth",
|
||||
dataIndex: "startWellDepth",
|
||||
},
|
||||
{
|
||||
title: "Глубина скважины в конце операции",
|
||||
key: "endWellDepth",
|
||||
dataIndex: "endWellDepth",
|
||||
},
|
||||
];
|
||||
|
||||
const filterOptions = [
|
||||
{ label: "Невозможно определить операцию", value: 1 },
|
||||
{ label: "Роторное бурение", value: 2 },
|
||||
{ label: "Слайдирование", value: 3 },
|
||||
{ label: "Подъем с проработкой", value: 4 },
|
||||
{ label: "Спуск с проработкой", value: 5 },
|
||||
{ label: "Подъем с промывкой", value: 6 },
|
||||
{ label: "Спуск с промывкой", value: 7 },
|
||||
{ label: "Спуск в скважину", value: 8 },
|
||||
{ label: "Спуск с вращением", value: 9 },
|
||||
{ label: "Подъем из скважины", value: 10 },
|
||||
{ label: "Подъем с вращением", value: 11 },
|
||||
{ label: "Промывка в покое", value: 12 },
|
||||
{ label: "Промывка с вращением", value: 13 },
|
||||
{ label: "Удержание в клиньях", value: 14 },
|
||||
{ label: "Неподвижное состояние", value: 15 },
|
||||
{ label: "Вращение без циркуляции", value: 16 },
|
||||
{ label: "На поверхности", value: 17 },
|
||||
];
|
||||
|
||||
export default function WellTelemetryAnalysis() {
|
||||
let { id } = useParams();
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
const [range, setRange] = useState([]);
|
||||
const [categories, setCategories] = useState([]);
|
||||
const [pagination, setPagination] = useState(null);
|
||||
const [operations, setOperations] = useState([]);
|
||||
|
||||
const [loader, setLoader] = useState(false);
|
||||
|
||||
const children = filterOptions.map((line) => (
|
||||
<Option key={line.value}>{line.label}</Option>
|
||||
));
|
||||
|
||||
const onChangeRange = (range) => {
|
||||
setRange(range);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const GetOperations = async () => {
|
||||
setLoader(true);
|
||||
try {
|
||||
let begin = null;
|
||||
let end = null;
|
||||
if (range?.length > 1) {
|
||||
begin = range[0].toISOString();
|
||||
end = range[1].toISOString();
|
||||
}
|
||||
|
||||
await TelemetryAnalyticsService.getOperationsByWell(
|
||||
`${id}`,
|
||||
(page - 1) * pageSize,
|
||||
pageSize,
|
||||
categories,
|
||||
begin,
|
||||
end
|
||||
).then((paginatedOperations) => {
|
||||
setOperations(
|
||||
paginatedOperations?.items.map((o) => {
|
||||
return {
|
||||
key: o.id,
|
||||
begin: o.date,
|
||||
...o,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
setPagination({
|
||||
total: paginatedOperations?.count,
|
||||
current: Math.floor(paginatedOperations?.skip / pageSize),
|
||||
});
|
||||
});
|
||||
} catch (ex) {
|
||||
notify(`Не удалось загрузить операции по скважине "${id}"`, "error");
|
||||
console.log(ex);
|
||||
}
|
||||
setLoader(false);
|
||||
};
|
||||
GetOperations();
|
||||
}, [id, categories, range, page]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="filter-group">
|
||||
<h3 className="filter-group-heading">Фильтр операций</h3>
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
placeholder="Фильтр операций"
|
||||
className="filter-selector"
|
||||
value={categories}
|
||||
onChange={setCategories}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
<RangePicker
|
||||
showTime
|
||||
placeholder={["Дата начала операции", "Дата окончания операции"]}
|
||||
onChange={onChangeRange}
|
||||
/>
|
||||
</div>
|
||||
<LoaderPortal show={loader}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={operations}
|
||||
size={"small"}
|
||||
pagination={{
|
||||
pageSize: pageSize,
|
||||
showSizeChanger: false,
|
||||
total: pagination?.total,
|
||||
current: page,
|
||||
onChange: (page) => setPage(page),
|
||||
}}
|
||||
rowKey={(record) => record.id}
|
||||
/>
|
||||
</LoaderPortal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
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
|
||||
@ -1,68 +0,0 @@
|
||||
import moment from 'moment'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { ChartOpertationTimeBase } from './ChartOperationTimeBase'
|
||||
|
||||
export const CreateLabels = () => {
|
||||
let labels = []
|
||||
return labels
|
||||
}
|
||||
|
||||
export const CreateData = (lineConfig) => {
|
||||
let datasets = {
|
||||
label: lineConfig.label,
|
||||
data: [],
|
||||
backgroundColor: [
|
||||
'#f00', '#ff0', '#f0f', '#0ff', '#00f', '#0f0'
|
||||
],
|
||||
}
|
||||
return datasets
|
||||
}
|
||||
|
||||
export const ChartOperationTime = ({ lines, data, rangeDate }) => {
|
||||
const [opertationTimeDataParams, setOpertationTimeDataParams] = useState({ data: { labels: [], datasets: [] } })
|
||||
|
||||
useEffect(() => {
|
||||
if ((!lines)
|
||||
|| (!data))
|
||||
return
|
||||
|
||||
let newLabels = lines.map(lineCfg => {
|
||||
let labels = CreateLabels(lineCfg)
|
||||
if (data.length !== 0)
|
||||
labels = data.map(dataItem => {
|
||||
return dataItem[lineCfg.labelAccessorName]
|
||||
})
|
||||
return labels
|
||||
})
|
||||
|
||||
let newDatasets = lines.map(lineCfg => {
|
||||
let datasets = CreateData(lineCfg)
|
||||
if (data.length !== 0)
|
||||
datasets.data = data.map(dataItem => {
|
||||
return dataItem[lineCfg.pieceAccessorName]
|
||||
})
|
||||
return datasets
|
||||
})
|
||||
|
||||
let interval = rangeDate ? (rangeDate[1] - rangeDate[0]) / 1000 : null
|
||||
let startDate = rangeDate ? rangeDate[0] : moment()
|
||||
let newParams = {
|
||||
xInterval: interval,
|
||||
xStart: startDate,
|
||||
data: {
|
||||
labels: newLabels,
|
||||
datasets: newDatasets
|
||||
}
|
||||
}
|
||||
setOpertationTimeDataParams(newParams)
|
||||
|
||||
console.log(newParams)
|
||||
|
||||
}, [data, lines, rangeDate])
|
||||
|
||||
return (<>
|
||||
<ChartOpertationTimeBase dataParams={opertationTimeDataParams} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,177 +0,0 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import {
|
||||
Chart,
|
||||
ArcElement,
|
||||
TimeScale,
|
||||
Legend,
|
||||
PointElement,
|
||||
ChartData,
|
||||
ChartTypeRegistry,
|
||||
ChartOptions,
|
||||
DoughnutController,
|
||||
} from 'chart.js'
|
||||
import 'chartjs-adapter-moment'
|
||||
import ChartDataLabels from 'chartjs-plugin-datalabels'
|
||||
|
||||
Chart.register(TimeScale, DoughnutController, PointElement, ArcElement, Legend, ChartDataLabels)
|
||||
|
||||
const defaultOptions = {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: 'Doughnut Chart',
|
||||
fontSize: 18,
|
||||
fontColor: '#111'
|
||||
},
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
fontColor: '#333',
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export type ChartTimeData = ChartData<keyof ChartTypeRegistry, {
|
||||
x: String
|
||||
label: number
|
||||
y: number
|
||||
}[], unknown>
|
||||
|
||||
export type ChartTimeDataParams = {
|
||||
data: ChartTimeData,
|
||||
xStart?: Date,
|
||||
xInterval?: number,
|
||||
displayLabels?: Boolean,
|
||||
}
|
||||
|
||||
export type ChartTimeBaseProps = {
|
||||
dataParams: ChartTimeDataParams,
|
||||
// TODO: Create good type for options
|
||||
options?: ChartOptions<keyof ChartTypeRegistry> | any,
|
||||
}
|
||||
|
||||
export type TimeParams = {
|
||||
unit: String
|
||||
stepSize: number
|
||||
}
|
||||
|
||||
const linesPerInterval = 32
|
||||
|
||||
export const timeUnitByInterval = (intervalSec: number): String => {
|
||||
if (intervalSec <= 60)
|
||||
return 'millisecond'
|
||||
|
||||
if (intervalSec <= 32 * 60)
|
||||
return 'second'
|
||||
|
||||
if (intervalSec <= 32 * 60 * 60)
|
||||
return 'minute'
|
||||
|
||||
if (intervalSec <= 32 * 12 * 60 * 60)
|
||||
return 'hour'
|
||||
|
||||
if (intervalSec <= 32 * 24 * 60 * 60)
|
||||
return 'day'
|
||||
|
||||
if (intervalSec <= 32 * 7 * 24 * 60 * 60)
|
||||
return 'week'
|
||||
|
||||
if (intervalSec <= 32 * 30.4375 * 24 * 60 * 60)
|
||||
return 'month'
|
||||
|
||||
if (intervalSec <= 32 * 121.75 * 24 * 60 * 60)
|
||||
return 'quarter'
|
||||
else
|
||||
return 'year'
|
||||
}
|
||||
|
||||
export const timeParamsByInterval = (intervalSec: number): TimeParams => {
|
||||
let stepSize = intervalSec
|
||||
let unit = timeUnitByInterval(intervalSec)
|
||||
|
||||
switch (unit) {
|
||||
case 'millisecond':
|
||||
stepSize *= 1000
|
||||
break
|
||||
case 'second':
|
||||
//stepSize *= 1
|
||||
break
|
||||
case 'minute':
|
||||
stepSize /= 60
|
||||
break
|
||||
case 'hour':
|
||||
stepSize /= 60 * 60
|
||||
break
|
||||
case 'day':
|
||||
stepSize /= 24 * 60 * 60
|
||||
break
|
||||
case 'week':
|
||||
stepSize /= 7 * 24 * 60 * 60
|
||||
break
|
||||
case 'month':
|
||||
stepSize /= 30 * 24 * 60 * 60
|
||||
break
|
||||
case 'quarter':
|
||||
stepSize /= 91 * 24 * 60 * 60
|
||||
break
|
||||
case 'year':
|
||||
stepSize /= 365.25 * 24 * 60 * 60
|
||||
break
|
||||
}
|
||||
|
||||
stepSize = Math.round(stepSize / linesPerInterval)
|
||||
stepSize = stepSize > 0 ? stepSize : 1
|
||||
return { unit, stepSize }
|
||||
}
|
||||
|
||||
export const ChartOpertationTimeBase: React.FC<ChartTimeBaseProps> = ({ options, dataParams }) => {
|
||||
const chartRef = useRef<HTMLCanvasElement>(null)
|
||||
const [chart, setChart] = useState<any>()
|
||||
|
||||
useEffect(() => {
|
||||
if ((chartRef.current) && (!chart)) {
|
||||
let thisOptions = {}
|
||||
Object.assign(thisOptions, defaultOptions, options)
|
||||
|
||||
let newChart = new Chart(chartRef.current, {
|
||||
type: 'doughnut',
|
||||
plugins: [ChartDataLabels],
|
||||
options: thisOptions,
|
||||
data: dataParams.data
|
||||
})
|
||||
setChart(newChart)
|
||||
|
||||
return () => chart?.destroy()
|
||||
}
|
||||
}, [chart, options, dataParams])
|
||||
|
||||
useEffect(() => {
|
||||
if (!chart)
|
||||
return
|
||||
|
||||
chart.data = dataParams.data
|
||||
chart.options.aspectRatio = options?.aspectRatio
|
||||
if (dataParams.xStart) {
|
||||
let interval = Number(dataParams.xInterval ?? 600)
|
||||
let start = new Date(dataParams.xStart)
|
||||
let end = new Date(dataParams.xStart)
|
||||
end.setSeconds(end.getSeconds() + interval)
|
||||
let { unit, stepSize } = timeParamsByInterval(interval)
|
||||
|
||||
if (chart.options.scales?.x) {
|
||||
chart.options.scales.x.max = end.getTime()
|
||||
chart.options.scales.x.min = start.getTime()
|
||||
chart.options.scales.x.ticks.display = dataParams.displayLabels ?? true
|
||||
chart.options.scales.x.time.unit = unit
|
||||
chart.options.scales.x.time.stepSize = stepSize
|
||||
}
|
||||
}
|
||||
|
||||
chart.update()
|
||||
}, [chart, dataParams, options])
|
||||
|
||||
return (<canvas ref={chartRef} />)
|
||||
}
|
||||
@ -1,99 +0,0 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import {
|
||||
Chart,
|
||||
TimeScale,
|
||||
LinearScale,
|
||||
Legend,
|
||||
LineController,
|
||||
PointElement,
|
||||
LineElement
|
||||
} from 'chart.js'
|
||||
import 'chartjs-adapter-moment'
|
||||
import ChartDataLabels from 'chartjs-plugin-datalabels'
|
||||
import zoomPlugin from 'chartjs-plugin-zoom'
|
||||
|
||||
Chart.register(TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels, zoomPlugin)
|
||||
|
||||
const defaultOptions = {
|
||||
responsive: true,
|
||||
aspectRatio: 2.45,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'hour',
|
||||
displayFormats: {
|
||||
hour: 'MM.DD'
|
||||
},
|
||||
tooltipFormat: 'DD T'
|
||||
},
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
position: 'top',
|
||||
reverse: true,
|
||||
// ticks: {
|
||||
// // forces step size to be 50 units
|
||||
// stepSize: 50
|
||||
// }
|
||||
}
|
||||
},
|
||||
parsing: {
|
||||
xAxisKey: 'date',
|
||||
yAxisKey: 'depth'
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 1.7,
|
||||
hoverRadius: 5,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
datalabels: {
|
||||
display: false,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const makeDataset = (data, label, color, width = 1.5, dash) => ({
|
||||
label: label,
|
||||
data: data,
|
||||
backgroundColor: color,
|
||||
borderColor: color,
|
||||
borderWidth: width,
|
||||
borderDash: dash,
|
||||
})
|
||||
|
||||
export const ChartTelemetryDepthToDay = ({ depthData, bitPositionData }) => {
|
||||
const chartRef = useRef(null)
|
||||
const [chart, setChart] = useState()
|
||||
|
||||
useEffect(() => {
|
||||
const data = {
|
||||
datasets: [
|
||||
makeDataset(depthData, 'Глубина', '#0A0'),
|
||||
makeDataset(bitPositionData, 'Положение долота', 'blue'),
|
||||
]
|
||||
}
|
||||
|
||||
if(chartRef.current && !chart) {
|
||||
const thisOptions = {}
|
||||
Object.assign(thisOptions, defaultOptions)
|
||||
|
||||
const newChart = new Chart(chartRef.current, {
|
||||
type: 'line',
|
||||
plugins: [ChartDataLabels],
|
||||
options: thisOptions,
|
||||
data: data
|
||||
})
|
||||
setChart(newChart)
|
||||
|
||||
return () => chart?.destroy()
|
||||
} else {
|
||||
chart.data = data
|
||||
chart.update()
|
||||
}
|
||||
}, [chart, depthData, bitPositionData])
|
||||
|
||||
return(<canvas ref={chartRef} />)
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
|
||||
Chart.register(...registerables)
|
||||
|
||||
const defaultOptions = {
|
||||
responsive: true,
|
||||
aspectRatio: 2.6,
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Дата начала интервала'
|
||||
},
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Коэффициент скорости'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
datalabels: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ChartTelemetryDepthToInterval = ({ depthToIntervalData }) => {
|
||||
const chartRef = useRef(null)
|
||||
const [chart, setChart] = useState()
|
||||
|
||||
const calculateBarWidth = (dataLength) => {
|
||||
if (dataLength < 3) return 150
|
||||
if (dataLength < 16) return 70
|
||||
return 10
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const xData = depthToIntervalData.map(el => new Date(el.intervalStartDate).toLocaleString())
|
||||
const yData = depthToIntervalData.map(el => el.intervalDepthProgress.toFixed(3))
|
||||
|
||||
const data = {
|
||||
labels: xData,
|
||||
datasets: [{
|
||||
label: 'Скорость проходки за интервал',
|
||||
data: yData,
|
||||
borderColor: '#00b300',
|
||||
borderWidth: 2,
|
||||
backgroundColor: '#0A0',
|
||||
barThickness: calculateBarWidth(xData.length)
|
||||
}]
|
||||
}
|
||||
|
||||
const thisOptions = {}
|
||||
Object.assign(thisOptions, defaultOptions)
|
||||
|
||||
if (chartRef.current && !chart) {
|
||||
const newChart = new Chart(chartRef.current, {
|
||||
type: 'bar',
|
||||
options: thisOptions,
|
||||
data: data
|
||||
})
|
||||
setChart(newChart)
|
||||
} else {
|
||||
chart.data = data
|
||||
chart.options = thisOptions
|
||||
chart.update()
|
||||
}
|
||||
}, [chart, depthToIntervalData])
|
||||
|
||||
return (<canvas ref={chartRef} />)
|
||||
}
|
||||
@ -1,89 +0,0 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Chart, registerables } from 'chart.js'
|
||||
|
||||
Chart.register(...registerables)
|
||||
|
||||
const transformSecondsToHoursString = (seconds) => {
|
||||
const hours = Math.floor(seconds / 3600)
|
||||
const minutes = Math.floor((seconds % 3600) / 60)
|
||||
const s = seconds - (hours * 3600) - (minutes * 60)
|
||||
|
||||
return `${hours} ч.${minutes} мин.${s} сек.`
|
||||
}
|
||||
|
||||
const transformSecondsToTimeString = (seconds) => {
|
||||
if (seconds === 1) // 1 is default state if null returned (1 is to show chart anyway with 0 sec)
|
||||
return '0 сек.'
|
||||
else if(seconds < 60)
|
||||
return seconds + ' сек.'
|
||||
else if (seconds < 3600)
|
||||
return Math.floor(seconds / 60) + ' мин. ' + (0.6 * (seconds % 60)).toFixed() + ' сек.'
|
||||
else
|
||||
return transformSecondsToHoursString(seconds)
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
responsive: true,
|
||||
aspectRatio: 2.8,
|
||||
plugins: {
|
||||
datalabels: {
|
||||
color: '#ffffff',
|
||||
formatter: transformSecondsToTimeString,
|
||||
font: {
|
||||
weight: 'bold'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (tooltipItem) => transformSecondsToTimeString(tooltipItem.parsed),
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const chartPartsColors = [
|
||||
'#54a60c', '#0ca68a', '#0c8aa6', '#0c57a6', '#0c33a6',
|
||||
'#6f10d5', '#d510a1', '#f1bc41', '#c5f141', '#41f196',
|
||||
'#41cbf1', '#4196f1', '#bf41f1', '#41f1c5', '#cbf141',
|
||||
'#f1ce41', '#f17f41', '#f14141', '#34b40e', '#420eb4'
|
||||
]
|
||||
|
||||
export const ChartTelemetryOperationsSummary = ({ operationsData }) => {
|
||||
const chartRef = useRef(null)
|
||||
const [chart, setChart] = useState()
|
||||
|
||||
useEffect(() => {
|
||||
const namesData = operationsData?.map(el => el.operationName) ?? ['Нет операций']
|
||||
const durationsData = operationsData?.map(el => el.duration) ?? [1]
|
||||
|
||||
const data = {
|
||||
labels: namesData,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Скорость проходки за интервал',
|
||||
data: durationsData,
|
||||
borderColor: chartPartsColors,
|
||||
backgroundColor: chartPartsColors,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const thisOptions = {}
|
||||
Object.assign(thisOptions, defaultOptions)
|
||||
|
||||
if (chartRef.current && !chart) {
|
||||
const newChart = new Chart(chartRef.current, {
|
||||
type: 'doughnut',
|
||||
options: thisOptions,
|
||||
data: data
|
||||
})
|
||||
setChart(newChart)
|
||||
} else {
|
||||
chart.data = data
|
||||
chart.options = thisOptions
|
||||
chart.update()
|
||||
}
|
||||
}, [chart, operationsData])
|
||||
|
||||
return (<canvas ref={chartRef} />)
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
import { useState, useEffect, memo, useContext } from 'react'
|
||||
|
||||
import { IdWellContext } from '@asb/context'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { ChartTelemetryDepthToDay } from '@components/charts/ChartTelemetryDepthToDay'
|
||||
import { TelemetryAnalyticsService } from '@api'
|
||||
|
||||
|
||||
export const TelemetryAnalysisDepthToDay = memo(() => {
|
||||
const [depthData, setDepthData] = useState([])
|
||||
const [bitPositionData, setBitPositionData] = useState([])
|
||||
const [loader, setLoader] = useState(false)
|
||||
|
||||
const idWell = useContext(IdWellContext)
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const depthToDayData = await TelemetryAnalyticsService.getWellDepthToDay(idWell)
|
||||
|
||||
const depths = depthToDayData.map(el => ({depth: el.wellDepth, date: el.date}))
|
||||
.sort((a, b) => new Date(a.date) - new Date(b.date))
|
||||
setDepthData(depths)
|
||||
|
||||
const bitPositions = depthToDayData.map(el => ({depth: el.bitDepth, date: el.date}))
|
||||
.sort((a, b) => new Date(a.date) - new Date(b.date))
|
||||
setBitPositionData(bitPositions)
|
||||
},
|
||||
setLoader,
|
||||
`Не удалось получить данные для анализа Глубина-День по скважине "${idWell}"`,
|
||||
'Получение данных для анализа Глубина-День'
|
||||
), [idWell])
|
||||
|
||||
return (
|
||||
<LoaderPortal show={loader}>
|
||||
<div className={'mt-20px'}>
|
||||
<ChartTelemetryDepthToDay
|
||||
depthData={depthData}
|
||||
bitPositionData={bitPositionData}
|
||||
/>
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
)
|
||||
})
|
||||
|
||||
export default TelemetryAnalysisDepthToDay
|
||||
@ -1,53 +0,0 @@
|
||||
import { Select } from 'antd'
|
||||
import { useState, useEffect, memo, useContext } from 'react'
|
||||
|
||||
import { IdWellContext } from '@asb/context'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { ChartTelemetryDepthToInterval } from '@components/charts/ChartTelemetryDepthToInterval'
|
||||
import { TelemetryAnalyticsService } from '@api'
|
||||
import { arrayOrDefault } from '@utils'
|
||||
|
||||
|
||||
const timePeriodCollection = [
|
||||
{ value: '3600', label: '1 час' },
|
||||
{ value: '21600', label: '6 часов' },
|
||||
{ value: '43200', label: '12 часов' },
|
||||
{ value: '86400', label: '24 часа' }
|
||||
]
|
||||
|
||||
export const TelemetryAnalysisDepthToInterval = memo(() => {
|
||||
const [depthToIntervalData, setDepthToIntervalData] = useState([])
|
||||
const [chartInterval, setChartInterval] = useState(86400)
|
||||
const [loader, setLoader] = useState(false)
|
||||
|
||||
const idWell = useContext(IdWellContext)
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const depthToIntervalData = await TelemetryAnalyticsService.getWellDepthToInterval(idWell, chartInterval)
|
||||
setDepthToIntervalData(arrayOrDefault(depthToIntervalData))
|
||||
},
|
||||
setLoader,
|
||||
`Не удалось получить данные для анализа скорость проходки-интервал "${idWell}"`,
|
||||
'Получение данных для анализа скорость проходки-интервал'
|
||||
), [idWell, chartInterval])
|
||||
|
||||
return (
|
||||
<LoaderPortal show={loader}>
|
||||
<div className={'mt-20px'}>
|
||||
<Select
|
||||
options={timePeriodCollection}
|
||||
onChange={setChartInterval}
|
||||
defaultValue={'86400'}
|
||||
className={'ml-30px'}
|
||||
/>
|
||||
<ChartTelemetryDepthToInterval
|
||||
depthToIntervalData={depthToIntervalData}
|
||||
/>
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
)
|
||||
})
|
||||
|
||||
export default TelemetryAnalysisDepthToInterval
|
||||
@ -1,72 +0,0 @@
|
||||
import moment from 'moment'
|
||||
import { Form, DatePicker } from 'antd'
|
||||
import { useState, useEffect, memo, useContext } from 'react'
|
||||
|
||||
import { IdWellContext } from '@asb/context'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { ChartTelemetryOperationsSummary } from '@components/charts/ChartTelemetryOperationsSummary'
|
||||
import { TelemetryAnalyticsService } from '@api'
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker
|
||||
|
||||
export const TelemetryAnalysisOperationsSummary = memo(() => {
|
||||
const [avilableDatesRange, setAviableDatesRange] = useState([moment(),moment()])
|
||||
const [filterDateRange, setFilterDateRange] = useState([moment().subtract(1, 'days'),moment()])
|
||||
const [operationsData, setOperationsData] = useState([])
|
||||
const [loader, setLoader] = useState(false)
|
||||
|
||||
const idWell = useContext(IdWellContext)
|
||||
|
||||
const disabledDate = (current) => current < avilableDatesRange[0] || current > avilableDatesRange[1]
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async() => {
|
||||
const datesRange = await TelemetryAnalyticsService.getOperationsDateRange(idWell)
|
||||
setAviableDatesRange(datesRange)
|
||||
},
|
||||
setLoader,
|
||||
`Не удалось загрузить диапозон дат для скважины "${idWell}"`,
|
||||
'Получение диапозона дат телеметрии скважины'
|
||||
), [idWell])
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const operationsSummaryData = await TelemetryAnalyticsService.getOperationsSummary(idWell,
|
||||
filterDateRange[0].toISOString(), filterDateRange[1].toISOString())
|
||||
|
||||
setOperationsData(operationsSummaryData)
|
||||
},
|
||||
setLoader,
|
||||
`Не удалось получить данные для анализа операций по скважине "${idWell}"`,
|
||||
'Получение данных для анализа операций по скважине'
|
||||
), [idWell, filterDateRange])
|
||||
|
||||
return (
|
||||
<LoaderPortal show={loader}>
|
||||
<div className={'w-100 mt-20px'}>
|
||||
<Form layout={'vertical'} name={'operationsForm'} initialValues={{ remember: true }}>
|
||||
<div className={'d-flex'}>
|
||||
<Form.Item
|
||||
name={'period'}
|
||||
className={'ml-30px'}
|
||||
initialValue={filterDateRange}
|
||||
label={'Диапазон дат графика:'}
|
||||
>
|
||||
<RangePicker
|
||||
showTime
|
||||
allowClear={false}
|
||||
disabledDate={disabledDate}
|
||||
onCalendarChange={(dates) => setFilterDateRange(dates)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
<ChartTelemetryOperationsSummary operationsData={operationsData}/>
|
||||
</LoaderPortal>
|
||||
)
|
||||
})
|
||||
|
||||
export default TelemetryAnalysisOperationsSummary
|
||||
@ -1,5 +0,0 @@
|
||||
import { memo } from 'react'
|
||||
|
||||
export const TelemetryAnalysisOperationsToInterval = memo(() => (<>123</>))
|
||||
|
||||
export default TelemetryAnalysisOperationsToInterval
|
||||
@ -1,44 +0,0 @@
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { memo, useContext, useMemo } from 'react'
|
||||
import { FolderOutlined } from '@ant-design/icons'
|
||||
import { Layout } from 'antd'
|
||||
|
||||
import { RootPathContext } from '@asb/context'
|
||||
import { PrivateMenu, PrivateSwitch } from '@components/Private'
|
||||
|
||||
import TelemetryAnalysisDepthToDay from './TelemetryAnalysisDepthToDay'
|
||||
import TelemetryAnalysisDepthToInterval from './TelemetryAnalysisDepthToInterval'
|
||||
import TelemetryAnalysisOperationsSummary from './TelemetryAnalysisOperationsSummary'
|
||||
import TelemetryAnalysisOperationsToInterval from './TelemetryAnalysisOperationsToInterval'
|
||||
|
||||
const { Content } = Layout
|
||||
|
||||
export const TelemetryAnalysis = memo(() => {
|
||||
const { tab } = useParams()
|
||||
const root = useContext(RootPathContext)
|
||||
const rootPath = useMemo(() => `${root}/telemetryAnalysis`, [root])
|
||||
|
||||
return (
|
||||
<RootPathContext.Provider value={rootPath}>
|
||||
<PrivateMenu mode={'horizontal'} selectable={true} className={'well_menu'} selectedKeys={[tab]}>
|
||||
<PrivateMenu.Link icon={<FolderOutlined />} key={'depthToDay'} title={'Глубина-день'} />
|
||||
<PrivateMenu.Link icon={<FolderOutlined />} key={'depthToInterval'} title={'Глубина-интервал'} />
|
||||
<PrivateMenu.Link icon={<FolderOutlined />} key={'operationsSummary'} title={'Все операции'} />
|
||||
<PrivateMenu.Link icon={<FolderOutlined />} key={'operationsToInterval'} title={'Операции-интервал'} />
|
||||
</PrivateMenu>
|
||||
|
||||
<Layout>
|
||||
<Content className={'site-layout-background'}>
|
||||
<PrivateSwitch elseRedirect={['depthToDay', 'depthToInterval', 'operationsSummary', 'operationsToInterval']}>
|
||||
<TelemetryAnalysisDepthToDay key={'depthToDay'} />
|
||||
<TelemetryAnalysisDepthToInterval key={'depthToInterval'} />
|
||||
<TelemetryAnalysisOperationsSummary key={'operationsSummary'} />
|
||||
<TelemetryAnalysisOperationsToInterval key={'operationsToInterval'} />
|
||||
</PrivateSwitch>
|
||||
</Content>
|
||||
</Layout>
|
||||
</RootPathContext.Provider>
|
||||
)
|
||||
})
|
||||
|
||||
export default TelemetryAnalysis
|
||||
Loading…
Reference in New Issue
Block a user