From eab4e3d7494f4d544caa95ed06bb737a42001166 Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Wed, 8 Sep 2021 16:58:49 +0500 Subject: [PATCH] Base pages and components for Telemetry analytics charts --- .../TelemetryAnalysisDepthToDay.jsx | 40 -------------- ...rsion.jsx => ChartTelemetryDepthToDay.jsx} | 9 ++-- ...n.tsx => ChartTelemetryDepthToDayBase.tsx} | 5 +- .../TelemetryAnalysis/OperationsSummary.jsx | 6 +++ .../OperationsToInterval.jsx | 6 +++ .../TelemetryAnalysisDepthToDay.jsx | 35 ++++++++++++ .../TelemetryAnalysisDepthToInterval.jsx | 18 +++---- src/pages/TelemetryAnalysis/index.jsx | 53 +++++++++++++++++++ src/pages/Well.jsx | 8 +++ 9 files changed, 123 insertions(+), 57 deletions(-) delete mode 100644 src/components/TelemetryAnalysisDepthToDay.jsx rename src/components/charts/{ChartDepthToDayOldVersion.jsx => ChartTelemetryDepthToDay.jsx} (77%) rename src/components/charts/{ChartDepthToDayBaseOldVersion.tsx => ChartTelemetryDepthToDayBase.tsx} (97%) create mode 100644 src/pages/TelemetryAnalysis/OperationsSummary.jsx create mode 100644 src/pages/TelemetryAnalysis/OperationsToInterval.jsx create mode 100644 src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx rename src/{components => pages/TelemetryAnalysis}/TelemetryAnalysisDepthToInterval.jsx (78%) create mode 100644 src/pages/TelemetryAnalysis/index.jsx diff --git a/src/components/TelemetryAnalysisDepthToDay.jsx b/src/components/TelemetryAnalysisDepthToDay.jsx deleted file mode 100644 index 4ff27a0..0000000 --- a/src/components/TelemetryAnalysisDepthToDay.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import { ChartDepthToDay } from './charts/ChartDepthToDayOldVersion' -import { notify } from "./factory" -import { useState, useEffect } from 'react' -import { TelemetryAnalyticsService } from "../services/api" -import LoaderPortal from './LoaderPortal' - -const lines = [ - { label: "Глубина забоя", yAccessorName: "wellDepth", color: '#f00' }, - { label: "Положение инструмента", yAccessorName: "bitDepth", color: '#ff0' } -] - -export function TelemetryAnalysisDepthToDay({idWell}) { - const [depthToDayData, setDepthToDayData] = useState([]) - const [loader, setLoader] = useState(false) - - const handleReceiveDepthToDayData = (data) => { - setDepthToDayData(data) - } - - useEffect(() => { - setLoader(true) - TelemetryAnalyticsService.getWellDepthToDay(idWell) - .then(handleReceiveDepthToDayData) - .catch(error => { - notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${idWell}"`, - 'warning') - console.log(error) - }) - .finally(setLoader(false)) - }, [idWell]) - - return ( - - - - ) -} \ No newline at end of file diff --git a/src/components/charts/ChartDepthToDayOldVersion.jsx b/src/components/charts/ChartTelemetryDepthToDay.jsx similarity index 77% rename from src/components/charts/ChartDepthToDayOldVersion.jsx rename to src/components/charts/ChartTelemetryDepthToDay.jsx index 8896992..08606a8 100644 --- a/src/components/charts/ChartDepthToDayOldVersion.jsx +++ b/src/components/charts/ChartTelemetryDepthToDay.jsx @@ -1,13 +1,12 @@ import { useEffect, useState } from 'react' -import { ChartDepthToDayBase } from './ChartDepthToDayBaseOldVersion' +import { ChartTelemetryDepthToDayBase } from './ChartTelemetryDepthToDayBase' import { CreateDataset } from './ChartTimeArchive' -export const ChartDepthToDayOldVersion = ({data, lines}) => { +export const ChartTelemetryDepthToDay = ({data, lines}) => { const [depthToDayDataParams, setDepthToDayDataParams] = useState({data: {datasets: []}}) useEffect(() => { - if ((!lines) - || (!data)) + if (!lines || !data) return let newDatasets = lines.map(lineCfg => { @@ -33,6 +32,6 @@ export const ChartDepthToDayOldVersion = ({data, lines}) => { }, [data, lines]) return ( - + ) } \ No newline at end of file diff --git a/src/components/charts/ChartDepthToDayBaseOldVersion.tsx b/src/components/charts/ChartTelemetryDepthToDayBase.tsx similarity index 97% rename from src/components/charts/ChartDepthToDayBaseOldVersion.tsx rename to src/components/charts/ChartTelemetryDepthToDayBase.tsx index 78d2294..6168ae6 100644 --- a/src/components/charts/ChartDepthToDayBaseOldVersion.tsx +++ b/src/components/charts/ChartTelemetryDepthToDayBase.tsx @@ -62,7 +62,8 @@ const defaultOptions = { y:{ type:'linear', - position:'top' + position:'top', + reverse: true, } }, elements:{ @@ -174,7 +175,7 @@ export const timeParamsByInterval = (intervalSec:number) :TimeParams => { return {unit, stepSize} } -export const ChartDepthToDayBaseOldVersion: React.FC = ({options, dataParams}) => { +export const ChartTelemetryDepthToDayBase: React.FC = ({options, dataParams}) => { const chartRef = useRef(null) const [chart, setChart] = useState() diff --git a/src/pages/TelemetryAnalysis/OperationsSummary.jsx b/src/pages/TelemetryAnalysis/OperationsSummary.jsx new file mode 100644 index 0000000..a4b57d6 --- /dev/null +++ b/src/pages/TelemetryAnalysis/OperationsSummary.jsx @@ -0,0 +1,6 @@ + + +export default function OperationsSummary({idWell}){ + + return (<>123) +} \ No newline at end of file diff --git a/src/pages/TelemetryAnalysis/OperationsToInterval.jsx b/src/pages/TelemetryAnalysis/OperationsToInterval.jsx new file mode 100644 index 0000000..22815d4 --- /dev/null +++ b/src/pages/TelemetryAnalysis/OperationsToInterval.jsx @@ -0,0 +1,6 @@ + + +export default function OperationsToInterval({idWell}){ + + return (<>123) +} \ No newline at end of file diff --git a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx new file mode 100644 index 0000000..4a2fc98 --- /dev/null +++ b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx @@ -0,0 +1,35 @@ +import { ChartTelemetryDepthToDay } from '../../components/charts/ChartTelemetryDepthToDay' +import { useState, useEffect } from 'react' +import { invokeWebApiWrapperAsync } from '../../components/factory' +import { TelemetryAnalyticsService } from "../../services/api" +import LoaderPortal from '../../components/LoaderPortal' + +const lines = [ + { label: "Глубина забоя", yAccessorName: "wellDepth", color: '#f00' }, + { label: "Положение инструмента", yAccessorName: "bitDepth", color: '#ff0' } +] + +export default function TelemetryAnalysisDepthToDay({idWell}) { + const [depthToDayData, setDepthToDayData] = useState([]) + const [loader, setLoader] = useState(false) + + useEffect(() => { + setLoader(true) + invokeWebApiWrapperAsync( + async () => { + const depthToDayData = await TelemetryAnalyticsService.getWellDepthToDay(idWell) + setDepthToDayData(depthToDayData) + }, + setLoader, + `Не удалось получить данные для Анализа Глубина-День по скважине "${idWell}"`) + }, [idWell]) + + return ( + + + + ) +} \ No newline at end of file diff --git a/src/components/TelemetryAnalysisDepthToInterval.jsx b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx similarity index 78% rename from src/components/TelemetryAnalysisDepthToInterval.jsx rename to src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx index 5f6bb5f..c45743b 100644 --- a/src/components/TelemetryAnalysisDepthToInterval.jsx +++ b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx @@ -1,10 +1,9 @@ -import { useParams } from "react-router-dom" -import { notify } from "./factory" +import { notify } from "../../components/factory" import { useState, useEffect } from 'react' -import { TelemetryAnalyticsService } from '../services/api' -import { ChartDepthToInterval } from './charts/ChartDepthToInterval' +import { TelemetryAnalyticsService } from '../../services/api' +import { ChartDepthToInterval } from '../../components/charts/ChartDepthToInterval' import { Select } from 'antd' -import LoaderPortal from './LoaderPortal' +import LoaderPortal from '../../components/LoaderPortal' const { Option } = Select @@ -21,8 +20,7 @@ const timePeriodCollection = [ const lines = [{ label: 'График скорость проходки-интервал', yAccessorName: "intervalDepthProgress", xAccessorName: "intervalStartDate", color: '#00f' }] -export function TelemetryAnalysisDepthToInterval() { - let { id } = useParams() +export default function TelemetryAnalysisDepthToInterval({idWell}) { const [depthToIntervalData, setDepthToIntervalData] = useState([]) const [loader, setLoader] = useState(false) const [chartInterval, setChartInterval] = useState(600) @@ -35,15 +33,15 @@ export function TelemetryAnalysisDepthToInterval() { useEffect(() => { setLoader(true) - TelemetryAnalyticsService.getWellDepthToInterval(id, chartInterval) + TelemetryAnalyticsService.getWellDepthToInterval(idWell, chartInterval) .then(handleReceiveDepthToIntervalData) .catch(error => { - notify(`Не удалось получить данные для Анализа скорость проходки-интервал "${id}"`, + notify(`Не удалось получить данные для Анализа скорость проходки-интервал "${idWell}"`, 'warning') console.log(error) }) .finally(setLoader(false)) - }, [id, chartInterval]) + }, [idWell, chartInterval]) return ( diff --git a/src/pages/TelemetryAnalysis/index.jsx b/src/pages/TelemetryAnalysis/index.jsx new file mode 100644 index 0000000..eca3d81 --- /dev/null +++ b/src/pages/TelemetryAnalysis/index.jsx @@ -0,0 +1,53 @@ +import {Layout, Menu} from "antd"; +import {Switch, Link, Route, useParams} from "react-router-dom"; +import { FolderOutlined } from "@ant-design/icons"; +import OperationsSummary from "./OperationsSummary"; +import OperationsToInterval from "./OperationsToInterval"; +import TelemetryAnalysisDepthToDay from './TelemetryAnalysisDepthToDay' +import TelemetryAnalysisDepthToInterval from './TelemetryAnalysisDepthToInterval' + +const { Content } = Layout + +export default function TelemetryAnalysis({idWell}) { + let {tab} = useParams() + const rootPath = `/well/${idWell}/telemetryAnalysis`; + + return (<> + + }> + Глубина-день + + }> + Глубина-интервал + + }> + Все операции + + }> + Операции-интервал + + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/Well.jsx b/src/pages/Well.jsx index 2d7752d..dd48669 100644 --- a/src/pages/Well.jsx +++ b/src/pages/Well.jsx @@ -6,6 +6,7 @@ import { FilePdfOutlined, DatabaseOutlined, ExperimentOutlined, + FundProjectionScreenOutlined } from "@ant-design/icons"; import { Link, Redirect, Route, Switch, useParams } from "react-router-dom"; import TelemetryView from "./TelemetryView"; @@ -17,6 +18,7 @@ import Measure from "./Measure"; import { makeMenuItems } from "./Documents/menuItems"; import WellOperations from "./WellOperations"; import DrillingProgram from "./Documents/DrillingProgram"; +import TelemetryAnalysis from "./TelemetryAnalysis" import {PrivateMenuItem} from '../components/Private' const { Content } = Layout; @@ -49,6 +51,9 @@ export default function Well() { }> Архив + }> + Операции по телеметрии + + + +