diff --git a/src/pages/TelemetryView/ChartTimeOnlineFooter.jsx b/src/pages/TelemetryView/ChartTimeOnlineFooter.jsx index e85b765..8413355 100644 --- a/src/pages/TelemetryView/ChartTimeOnlineFooter.jsx +++ b/src/pages/TelemetryView/ChartTimeOnlineFooter.jsx @@ -2,51 +2,40 @@ import {ValueDisplay} from '../../components/Display' import {ControlOutlined} from '@ant-design/icons' import {Popover} from 'antd' -export const ChartTimeOnlineFooter = (props) =>{ - const { data, - lineIdle, - lineSp, - linesOther} = props - - let sp = null - let idle = null +export const ChartTimeOnlineFooter = ({ data, lineGroup }) => { + const getFooterData = (name) => { + const dataIdx = data && lineGroup?.find(line => line?.footer === name)?.xAccessorName + return () + } - if(data && lineSp) - sp = data[lineSp.xAccessorName] + let spValues = getFooterData('SP') + const idleValues = getFooterData('IDLE') - if(data && lineIdle) - idle = data[lineIdle.xAccessorName] - - let spField = - - let popContent = linesOther?.map(line =>{ - let val = null - if(data) - val = data[line.xAccessorName] - return ( + const popContent = lineGroup?.filter(line => line.footer === true).map(line => (
{line.label} - -
) - }) - - if(popContent) - spField = -
- - {spField} -
-
- else - spField =
- {spField} -
- - return(
- {spField} -
- х.х. - +
-
) -} \ No newline at end of file + )) + + return( +
+ {popContent?.length > 0 ? ( + +
+ +
{spValues}
+
+
+ ) : ( +
+
{spValues}
+
+ )} +
+ х.х. +
{idleValues}
+
+
+ ) +} diff --git a/src/pages/TelemetryView/Column.jsx b/src/pages/TelemetryView/Column.jsx index db97573..7d20ebb 100644 --- a/src/pages/TelemetryView/Column.jsx +++ b/src/pages/TelemetryView/Column.jsx @@ -1,45 +1,43 @@ -import {Display} from "../../components/Display"; -import {ChartTimeOnline} from "./ChartTimeOnline"; -import {ChartTimeOnlineFooter} from "./ChartTimeOnlineFooter"; +import {Grid, GridItem} from '../../components/Grid'; +import {ChartTimeOnline} from './ChartTimeOnline'; +import {ChartTimeOnlineFooter} from './ChartTimeOnlineFooter'; -export const Column = ({lineGroup, data, interval, showBorder, style}) => { - let lines = [lineGroup.linePv] - - if (lineGroup.lineSp) - lines.push(lineGroup.lineSp) - - if (lineGroup.lineOther) - lines.push(lineGroup.lineOther) - - if (lineGroup.lineAvg) - lines.push(lineGroup.lineAvg) - - if (lineGroup.lineMax) - lines.push(lineGroup.lineMax) +const stroke = (sz='1px', c='white') => ({ textShadow: `-${sz} -${sz} 0 ${c}, ${sz} -${sz} 0 ${c}, -${sz} ${sz} 0 ${c}, ${sz} ${sz} 0 ${c}` }) +export const Column = ({lineGroup, data, interval, showBorder, style, headerHeight}) => { let dataLast = null let pv = null if (data?.length > 0) { dataLast = data[data.length - 1]; - if (lineGroup.linePv) - pv = dataLast[lineGroup.linePv?.xAccessorName] + pv = lineGroup.filter(line => line.showValue).map(line => ({ + color: line.color, + label: line.label, + unit: line.units, + value: dataLast[line.xAccessorName] + })) } return (
-
- + + {pv?.map((v, idx) => ( + {v.label} + ))} + +
+ + {pv?.map((v, idx) => ( + {v.value.toFixed(2)} {v.unit} + ))} + +
- - -
) -} \ No newline at end of file + +
+ ) +} diff --git a/src/pages/TelemetryView/index.jsx b/src/pages/TelemetryView/index.jsx index 8f0727f..9bf1fa2 100644 --- a/src/pages/TelemetryView/index.jsx +++ b/src/pages/TelemetryView/index.jsx @@ -1,17 +1,17 @@ -import {useState, useEffect} from 'react' -import {Select} from 'antd' +import { useState, useEffect } from 'react' +import { Select } from 'antd' -import {Column} from './Column' -import {CustomColumn} from './CustomColumn' +import { Column } from './Column' +import { CustomColumn } from './CustomColumn' import ActiveMessagesOnline from './ActiveMessagesOnline' -import {ModeDisplay} from "./ModeDisplay" -import {UserOfWell} from './UserOfWells' +import { ModeDisplay } from "./ModeDisplay" +import { UserOfWell } from './UserOfWells' import LoaderPortal from '../../components/LoaderPortal' -import {Grid, GridItem, Flex} from '../../components/Grid' -import {Subscribe} from '../../services/signalr' -import {TelemetryDataSaubService, TelemetryDataSpinService} from '../../services/api' -import {invokeWebApiWrapperAsync} from '../../components/factory' +import { Grid, GridItem, Flex } from '../../components/Grid' +import { Subscribe } from '../../services/signalr' +import { TelemetryDataSaubService, TelemetryDataSpinService } from '../../services/api' +import { invokeWebApiWrapperAsync } from '../../components/factory' import MomentStabPicEnabled from "../../images/DempherOn.png" import MomentStabPicDisabled from "../../images/DempherOff.png" @@ -20,123 +20,207 @@ import SpinPicDisabled from "../../images/SpinDisabled.png" import '../../styles/message.css' -const {Option} = Select +const { Option } = Select const dash = [7, 3] -const blockHeightGroup = { - label: "Высота блока", - yDisplay: false, - linePv: {label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333'}, - lineOther: { +const blockHeightGroup = [ + { + label: "Высота блока", + units: 'м', + xAccessorName: "blockPosition", + yAccessorName: "date", + color: '#333', + showValue: true + }, { label: "wellDepth", units: 'м', xAccessorName: "wellDepth", yAccessorName: "date", color: '#333', showLine: false, - xConstValue: 30 + xConstValue: 30, + dash + }, { + label: 'Расход', + units: 'м³/ч', + xAccessorName: 'flow', + yAccessorName: 'date', + color: '#077', + showValue: true + } +] + +const blockSpeedGroup = [ + { + label: "Скорость блока", + units: 'м/ч', + xAccessorName: "blockSpeed", + yAccessorName: "date", + color: '#0a0', + showValue: true + }, { + label: "blockSpeedSp", + units: 'м/ч', + xAccessorName: "blockSpeedSp", + yAccessorName: "date", + color: '#0a0', + footer: 'SP', + dash + } +] + +const pressureGroup = [ + { + label: "Давление", + units: 'атм', + xAccessorName: "pressure", + yAccessorName: "date", + color: '#c00', + showValue: true + }, { + label: "pressureSp", + units: 'атм', + xAccessorName: "pressureSp", + yAccessorName: "date", + color: '#c00', + footer: 'SP', + dash + }, { + label: "pressureIdle", + units: 'атм', + xAccessorName: "pressureIdle", + yAccessorName: "date", + color: '#c00', + footer: 'IDLE', + dash + }, { + label: "pressureDeltaLimitMax", + units: 'атм', + xAccessorName: "pressureDeltaLimitMax", + yAccessorName: "date", + color: '#c00', + footer: true, + dash + } +] + +const axialLoadGroup = [ + { + label: "Осевая нагрузка", + units: 'т', + xAccessorName: "axialLoad", + yAccessorName: "date", + color: '#00a', + showValue: true + }, { + label: "axialLoadSp", + units: 'т', + xAccessorName: "axialLoadSp", + yAccessorName: "date", + color: '#00a', + footer: 'SP', + dash + }, { + label: "axialLoadLimitMax", + units: 'т', + xAccessorName: "axialLoadLimitMax", + yAccessorName: "date", + color: '#00a', + footer: true, + dash }, -} +] -const blockSpeedGroup = { - label: "Скорость блока", - yDisplay: false, - linePv: {label: "blockSpeed", units: 'м/ч', xAccessorName: "blockSpeed", yAccessorName: "date", color: '#0a0'}, - lineSp: {label: "blockSpeedSp", units: 'м/ч', xAccessorName: "blockSpeedSp", yAccessorName: "date", color: '#0a0'}, -} - -const pressureGroup = { - label: "Давление", - yDisplay: false, - linePv: {label: "pressure", units: 'атм', xAccessorName: "pressure", yAccessorName: "date", color: '#c00'}, - lineSp: {label: "pressureSp", units: 'атм', xAccessorName: "pressureSp", yAccessorName: "date", color: '#c00'}, - lineIdle: {label: "pressureIdle", units: 'атм', xAccessorName: "pressureIdle", yAccessorName: "date", color: '#c00'}, - linesOther: [ - { - label: "мекс. перепад", - units: 'атм', - xAccessorName: "pressureDeltaLimitMax", - yAccessorName: "date", - color: '#c00' - }, - ], -} - -const axialLoadGroup = { - label: "Осевая нагрузка", - yDisplay: false, - linePv: {label: "axialLoad", units: 'т', xAccessorName: "axialLoad", yAccessorName: "date", color: '#00a'}, - lineSp: {label: "axialLoadSp", units: 'т', xAccessorName: "axialLoadSp", yAccessorName: "date", color: '#00a', dash}, - linesOther: [ - {label: "axialLoadLimitMax", units: 'т', xAccessorName: "axialLoadLimitMax", yAccessorName: "date", color: '#00a'}, - ], -} - -const hookWeightGroup = { - label: "Вес на крюке", - yDisplay: false, - linePv: {label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa'}, - lineIdle: { +const hookWeightGroup = [ + { + label: "Вес на крюке", + units: 'т', + xAccessorName: "hookWeight", + yAccessorName: "date", + color: '#0aa', + showValue: true + }, { label: "hookWeightIdle", units: 'т', xAccessorName: "hookWeightIdle", yAccessorName: "date", color: '#0aa', + footer: 'IDLE', + dash + }, { + label: "hookWeightLimitMin", + units: 'т', + xAccessorName: "hookWeightLimitMin", + yAccessorName: "date", + color: '#0aa', + footer: true, + dash + }, { + label: "hookWeightLimitMax", + units: 'т', + xAccessorName: "hookWeightLimitMax", + yAccessorName: "date", + color: '#0aa', + footer: true, dash }, - linesOther: [ - { - label: "hookWeightLimitMin", - units: 'т', - xAccessorName: "hookWeightLimitMin", - yAccessorName: "date", - color: '#0aa' - }, - { - label: "hookWeightLimitMax", - units: 'т', - xAccessorName: "hookWeightLimitMax", - yAccessorName: "date", - color: '#0aa' - }, - ], -} + { + label: 'Обороты ротора', + units: 'об/мин', + xAccessorName: 'rotorSpeed', + yAccessorName: 'date', + color: '#aa0', + showValue: true + } +] -const rotorTorqueGroup = { - label: "Момент на роторе", - yDisplay: false, - linePv: {label: "rotorTorque", units: 'кН·м', xAccessorName: "rotorTorque", yAccessorName: "date", color: '#a0a'}, - lineSp: {label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a'}, - lineIdle: { - label: "rotorTorqueIdle", +const rotorTorqueGroup = [ + { + label: "Момент на роторе", + units: 'кН·м', + xAccessorName: "rotorTorque", + yAccessorName: "date", + color: '#a0a', + showValue: true + }, { + label: "План. Момент на роторе", + units: 'кН·м', + xAccessorName: "rotorTorqueSp", + yAccessorName: "date", + color: '#a0a', + footer: 'SP', + dash + }, { + label: "Момент на роторе х.х.", units: 'кН·м', xAccessorName: "rotorTorqueIdle", yAccessorName: "date", - color: '#a0a' + color: '#a0a', + footer: 'IDLE', + dash + }, { + label: "rotorTorqueLimitMax", + units: 'кН·м', + xAccessorName: "rotorTorqueLimitMax", + yAccessorName: "date", + color: '#a0a', + footer: true, + dash }, - linesOther: [ - { - label: "rotorTorqueLimitMax", - units: 'кН·м', - xAccessorName: "rotorTorqueLimitMax", - yAccessorName: "date", - color: '#a0a' - }, - ], -} +] const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup] const timePeriodCollection = [ - {value: '60', label: '1 минута'}, - {value: '300', label: '5 минут'}, - {value: '600', label: '10 минут'}, - {value: '1800', label: '30 минут'}, - {value: '3600', label: '1 час'}, - {value: '21600', label: '6 часов'}, - {value: '43200', label: '12 часов'}, - {value: '86400', label: '24 часа'} + { value: '60', label: '1 минута' }, + { value: '300', label: '5 минут' }, + { value: '600', label: '10 минут' }, + { value: '1800', label: '30 минут' }, + { value: '3600', label: '1 час' }, + { value: '21600', label: '6 часов' }, + { value: '43200', label: '12 часов' }, + { value: '86400', label: '24 часа' } ] const defaultChartInterval = '600' @@ -159,7 +243,7 @@ const isSpinEnabled = (dataSpin) => { return lastData?.state > 0 && lastData?.state !== 6 } -const getIndexOfDrillingBy = (dataSaub)=>{ +const getIndexOfDrillingBy = (dataSaub) => { const order = { 0: -1, 1: 1, // скорость @@ -167,11 +251,11 @@ const getIndexOfDrillingBy = (dataSaub)=>{ 3: 3, // нагрузка 4: 5, // момент } - const idFeedRegulator = getLast(dataSaub)?.idFeedRegulator??0 - return order[idFeedRegulator]??-1 + const idFeedRegulator = getLast(dataSaub)?.idFeedRegulator ?? 0 + return order[idFeedRegulator] ?? -1 } -export default function TelemetryView({idWell}) { +export default function TelemetryView({ idWell }) { const [dataSaub, setDataSaub] = useState([]) const [dataSpin, setDataSpin] = useState([]) const [chartInterval, setChartInterval] = useState(defaultChartInterval) @@ -208,7 +292,7 @@ export default function TelemetryView({idWell}) { }, setShowLoader, `Не удалось получить данные по скважине "${idWell}"`, - ) + ) const unsubscribeSaub = Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${idWell}`, handleDataSaub) const unsubscribeSpin = Subscribe('hubs/telemetry', 'ReceiveDataSpin', `well_${idWell}`, handleDataSpin) return () => { @@ -218,39 +302,40 @@ export default function TelemetryView({idWell}) { }, [idWell, chartInterval]) return ( - - + + - -
+ +
Интервал: 
-   - TorqueMaster - SpinMaster -

MSE

- +   + TorqueMaster + SpinMaster +

MSE

+ - - + + {paramsGroups.map((group, index) => - - + + headerHeight={'60px'} + showBorder={getIndexOfDrillingBy(dataSaub) === index} /> )} - + ) diff --git a/src/styles/display.css b/src/styles/display.css index 066507b..35168b7 100644 --- a/src/styles/display.css +++ b/src/styles/display.css @@ -10,6 +10,21 @@ display: flex; } +.display_chart_label { + font-size: 18px; + font-weight: bold; + height: 20px; + padding: 0 4px; +} + +.display_chart_values { + position: absolute; + top: 20px; + left: 50px; + font-size: 18px; + font-weight: bold; +} + .display_label{ font-size: 16px; color: rgb(70, 70, 70);