forked from ddrilling/asb_cloud_front
Удалена старая страница мониторинга
This commit is contained in:
goodmice
parent
f17d39318c
commit
5a6931cb43
@ -1,238 +0,0 @@
|
|||||||
import {useState, useEffect} from 'react'
|
|
||||||
import {Row, Col, Select} from 'antd'
|
|
||||||
|
|
||||||
import {Column} from './Column'
|
|
||||||
import {CustomColumn} from './CustomColumn'
|
|
||||||
import ActiveMessagesOnline from './ActiveMessagesOnline'
|
|
||||||
import {ModeDisplay} from "./ModeDisplay"
|
|
||||||
import {UserOfWell} from './UserOfWells'
|
|
||||||
|
|
||||||
import LoaderPortal from '../../components/LoaderPortal'
|
|
||||||
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"
|
|
||||||
import SpinPicEnabled from "../../images/SpinEnabled.png"
|
|
||||||
import SpinPicDisabled from "../../images/SpinDisabled.png"
|
|
||||||
|
|
||||||
import '../../styles/message.css'
|
|
||||||
|
|
||||||
const {Option} = Select
|
|
||||||
|
|
||||||
const dash = [7, 3]
|
|
||||||
|
|
||||||
const blockHeightGroup = {
|
|
||||||
label: "Высота блока",
|
|
||||||
yDisplay: false,
|
|
||||||
linePv: {label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333'},
|
|
||||||
lineOther: {
|
|
||||||
label: "wellDepth",
|
|
||||||
units: 'м',
|
|
||||||
xAccessorName: "wellDepth",
|
|
||||||
yAccessorName: "date",
|
|
||||||
color: '#333',
|
|
||||||
showLine: false,
|
|
||||||
xConstValue: 30
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
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: {
|
|
||||||
label: "hookWeightIdle",
|
|
||||||
units: 'т',
|
|
||||||
xAccessorName: "hookWeightIdle",
|
|
||||||
yAccessorName: "date",
|
|
||||||
color: '#0aa',
|
|
||||||
dash
|
|
||||||
},
|
|
||||||
linesOther: [
|
|
||||||
{
|
|
||||||
label: "hookWeightLimitMin",
|
|
||||||
units: 'т',
|
|
||||||
xAccessorName: "hookWeightLimitMin",
|
|
||||||
yAccessorName: "date",
|
|
||||||
color: '#0aa'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "hookWeightLimitMax",
|
|
||||||
units: 'т',
|
|
||||||
xAccessorName: "hookWeightLimitMax",
|
|
||||||
yAccessorName: "date",
|
|
||||||
color: '#0aa'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
||||||
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",
|
|
||||||
units: 'кН·м',
|
|
||||||
xAccessorName: "rotorTorqueIdle",
|
|
||||||
yAccessorName: "date",
|
|
||||||
color: '#a0a'
|
|
||||||
},
|
|
||||||
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 часа'}
|
|
||||||
]
|
|
||||||
|
|
||||||
const defaultChartInterval = '600'
|
|
||||||
|
|
||||||
const getLast = (data) =>
|
|
||||||
Array.isArray(data) ? data.slice(-1)[0] : data
|
|
||||||
|
|
||||||
const isMseEnabled = (dataSaub) => {
|
|
||||||
const lastData = getLast(dataSaub)
|
|
||||||
return (lastData?.mseState && 2) > 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const isTorqueStabEnabled = (dataSpin) => {
|
|
||||||
const lastData = getLast(dataSpin)
|
|
||||||
return lastData?.state === 7
|
|
||||||
}
|
|
||||||
|
|
||||||
const isSpinEnabled = (dataSpin) => {
|
|
||||||
const lastData = getLast(dataSpin)
|
|
||||||
return lastData?.state > 0 && lastData?.state !== 6
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TelemetryView({idWell}) {
|
|
||||||
const [dataSaub, setDataSaub] = useState([])
|
|
||||||
const [dataSpin, setDataSpin] = useState([])
|
|
||||||
const [chartInterval, setChartInterval] = useState(defaultChartInterval)
|
|
||||||
const [showLoader, setShowLoader] = useState(false)
|
|
||||||
|
|
||||||
const options = timePeriodCollection.map((line) => <Option key={line.value}>{line.label}</Option>)
|
|
||||||
|
|
||||||
const handleDataSaub = (data) => {
|
|
||||||
if (data) {
|
|
||||||
setDataSaub(data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDataSpin = (data) => {
|
|
||||||
if (data) {
|
|
||||||
setDataSpin(data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
invokeWebApiWrapperAsync(
|
|
||||||
async () => {
|
|
||||||
const dataSaub = await TelemetryDataSaubService.getData(idWell, null, chartInterval)
|
|
||||||
const dataSpin = await TelemetryDataSpinService.getData(idWell, null, chartInterval)
|
|
||||||
handleDataSaub(dataSaub)
|
|
||||||
handleDataSpin(dataSpin)
|
|
||||||
},
|
|
||||||
setShowLoader,
|
|
||||||
`Не удалось получить данные по скважине "${idWell}"`,
|
|
||||||
)
|
|
||||||
const unsubscribeSaub = Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${idWell}`, handleDataSaub)
|
|
||||||
const unsubscribeSpin = Subscribe('hubs/telemetry', 'ReceiveDataSpin', `well_${idWell}`, handleDataSpin)
|
|
||||||
return () => {
|
|
||||||
unsubscribeSaub()
|
|
||||||
unsubscribeSpin()
|
|
||||||
}
|
|
||||||
}, [idWell, chartInterval])
|
|
||||||
|
|
||||||
const colSpan = 24 / (paramsGroups.length)
|
|
||||||
|
|
||||||
return (<LoaderPortal show={showLoader}>
|
|
||||||
<Row style={{marginBottom: '1rem'}}>
|
|
||||||
<Col>
|
|
||||||
<ModeDisplay data={dataSaub}/>
|
|
||||||
</Col>
|
|
||||||
<span style={{flexGrow: 0.1}}> </span>
|
|
||||||
<Col>
|
|
||||||
Интервал:
|
|
||||||
<Select defaultValue={defaultChartInterval} onChange={setChartInterval}>
|
|
||||||
{options}
|
|
||||||
</Select>
|
|
||||||
</Col>
|
|
||||||
<span style={{flexGrow: 1}}> </span>
|
|
||||||
<img src={isTorqueStabEnabled(dataSpin) ? MomentStabPicEnabled : MomentStabPicDisabled} style={{marginRight: "15px"}} alt="TorqueMaster"/>
|
|
||||||
<img src={isSpinEnabled(dataSpin) ? SpinPicEnabled : SpinPicDisabled} style={{marginRight: "15px"}} alt="SpinMaster"/>
|
|
||||||
<h2 style={{marginBottom: 0, marginRight: "15px",fontWeight: "bold", color: isMseEnabled(dataSaub) ? "green" : "lightgrey"}}>MSE</h2>
|
|
||||||
<Col>
|
|
||||||
<UserOfWell data={dataSaub}/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col span={3}>
|
|
||||||
<CustomColumn data={dataSaub}/>
|
|
||||||
</Col>
|
|
||||||
<Col span={24 - 3}>
|
|
||||||
<Row>
|
|
||||||
{paramsGroups.map((group, index) =>
|
|
||||||
<Col span={colSpan} className='border_small' key={group.label}>
|
|
||||||
<Column data={dataSaub} lineGroup={group} interval={chartInterval}
|
|
||||||
showBorder={dataSaub[dataSaub.length - 1]?.drillingBy === index}/>
|
|
||||||
</Col>)}
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<ActiveMessagesOnline idWell={idWell}/>
|
|
||||||
</LoaderPortal>)
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user