ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Animate PidId border and icons: MSE, Spin, TorqueStab.

Browse Source 
Refactor TelemetryView Replace antd.Grid to own html5Grid.
Fix RigMnemo bit animation.
This commit is contained in:
Фролов 2021-09-30 11:42:23 +05:00
parent 1898507352
commit f0e16032e0
10 changed files with 414 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
doc/MSE_and_torqueStab_info.txt
View File

@ -1,7 +1,7 @@
Вопрос Олегу: Какой бит и в каком регистре (или значение регистра) контроллера спинмастера сигнализирует что система спинмастер активана/работает?
# Вопрос Олегу: Какой бит и в каком регистре (или значение регистра) контроллера спинмастера сигнализирует что система спинмастер активана/работает?
Ответ: Такого бита нет, но можно понять если etap %MW1600: INT; не равен 6 и не равен 0 тогда система в работе
Вопрос Олегу: Какой бит и в каком регистре (или значение регистра) контроллера спинмастера сигнализирует что система стабилизации крутящего момента активна/работает?
# Вопрос Олегу: Какой бит и в каком регистре (или значение регистра) контроллера спинмастера сигнализирует что система стабилизации крутящего момента активна/работает?
Ответ: Такого бита по сути тоже нет но можно понять что
когда stik_sleep %MX2802.01: BOOL; =true
и

2
package.json
View File

@ -32,7 +32,7 @@
"react_test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://192.168.1.58:5000",
"proxy": "http://192.168.1.70:5000",
"eslintConfig": {
"extends": [
"react-app",

19
src/components/Grid.jsx
View File

@ -1,18 +1,18 @@
export const Grid = ({children, ...other}) => {
export const Grid = ({children, style, ...other}) => {
const gridContainerStyle = {
display: 'grid',
margin: '8px',
justifyItems: 'stretch',
alignItems: 'stretch',
...other,
...style,
}
return <div style={gridContainerStyle}>
return <div style={gridContainerStyle} {...other}>
{children}
</div>
}
export const GridItem = ({children, row, col, rowSpan, colSpan, ...other}) => {
export const GridItem = ({children, row, col, rowSpan, colSpan, style, ...other}) => {
const localRow = +row
const localCol = +col
const localColSpan = colSpan ? colSpan - 1 : 0
@ -23,10 +23,17 @@ export const GridItem = ({children, row, col, rowSpan, colSpan, ...other}) => {
gridRowStart: localRow,
gridRowEnd: localRow + localRowSpan,
padding: '4px',
...other,
...style,
}
return <div style={gridItemStyle}>
return <div style={gridItemStyle} {...other}>
{children}
</div>
}
export const Flex = ({children, style, ...other}) =>
<div
style={{display:'flex', ...style}}
{...other}>
{children}
</div>

4
src/pages/TelemetryView/ActiveMessagesOnline.jsx
View File

@ -34,8 +34,8 @@ const columns = [
{
title: 'Категория',
dataIndex: 'categoryId',
render: (_, item) => categoryDictionary[item.categoryId].title,
style: (_, item) => categoryDictionary[item.categoryId].style,
render: (_, item) => categoryDictionary[item.categoryId]?.title,
style: (_, item) => categoryDictionary[item.categoryId]?.style,
sorter: (a, b) => a.categoryId - b.categoryId,
sortDirections: ['descend', 'ascend'],
},

6
src/pages/TelemetryView/Column.jsx
View File

@ -2,7 +2,7 @@ import {Display} from "../../components/Display";
import {ChartTimeOnline} from "./ChartTimeOnline";
import {ChartTimeOnlineFooter} from "./ChartTimeOnlineFooter";
export const Column = ({lineGroup, data, interval, showBorder}) => {
export const Column = ({lineGroup, data, interval, showBorder, style}) => {
let lines = [lineGroup.linePv]
if (lineGroup.lineSp)
@ -26,7 +26,7 @@ export const Column = ({lineGroup, data, interval, showBorder}) => {
}
return (
<>
<div style={style}>
<div style={{boxShadow: showBorder ? "inset 0px 0px 0px 3px black" : ""}}>
<Display
label={lineGroup.label}
@ -41,5 +41,5 @@ export const Column = ({lineGroup, data, interval, showBorder}) => {
<ChartTimeOnlineFooter
data={dataLast}
{...lineGroup} />
</>)
</div>)
}

6
src/pages/TelemetryView/CustomColumn.jsx
View File

@ -28,7 +28,9 @@ export const CustomColumn = ({data}) => {
format = {param.format}
/>)}
<RigMnemo
blockPosition={dataLast?.blockPosition??0}
bitPosition={dataLast?.bitDepth??3200}/>
blockPosition={dataLast?.blockPosition??Number.NaN}
bitPosition={dataLast?.bitDepth??Number.NaN}
wellDepth={dataLast?.wellDepth??Number.NaN}
/>
</>)
}

61
src/pages/TelemetryView/RigMnemo.jsx
View File

@ -39,35 +39,54 @@ const styleBlock = {
fill: "#ffdd55",
};
const stylePump1 = {
...styleBase,
fill: "#5fd35f",
};
// const stylePump1 = {
// ...styleBase,
// fill: "#5fd35f",
// };
const stylePump2 = {
...styleBase,
fill: "#b3b3b3",
};
// const stylePump2 = {
// ...styleBase,
// fill: "#b3b3b3",
// };
export default function RigMnemo({
blockPosition,
bitPosition,
wellDepth
}) {
let blockPositionY = 0
let bitPositionY = 0
let blockPositionLocal = +blockPosition
blockPositionLocal = blockPositionLocal ? blockPositionLocal : 0
const blockTranslate = `translate(-75, ${-35 + (50 * (30 - blockPositionLocal) / 30)})`
const isBlockVisible = blockPosition != null && Number.isFinite(blockPosition)
const isBitVisible = wellDepth && bitPosition != null && Number.isFinite(bitPosition) && Number.isFinite(wellDepth)
//let bitPositionLocal = +bitPosition
//bitPositionLocal = bitPositionLocal ? bitPositionLocal : 0
//const bitTranslate = `translate(0, ${-41 + 41 * (3426 - bitPosition)/(3426 - 3200)})`
const bitTranslate = `translate(0, 0)`
if (isBlockVisible)
blockPositionY = -35 + (50 * (30 - +blockPosition) / 30)
if (isBitVisible) {
const bitPositionLocal = +bitPosition
const wellDepthLocal = +wellDepth
const altitude = 8
//-75 + 75*bitPositionProc
const bitPositionProc = (bitPositionLocal)/(wellDepthLocal)
if (bitPositionLocal < altitude)
bitPositionY = -75 + 16 * bitPositionLocal/altitude
else
bitPositionY = -59 + 59 * bitPositionLocal / wellDepthLocal
if( wellDepthLocal > 20 && (wellDepthLocal - bitPositionLocal) > 2 && bitPositionProc > 0.96)
bitPositionY = -2
}
const blockTranslate = `translate(-75, ${blockPositionY})`
const bitTranslate = `translate(0, ${bitPositionY})`
return (
<svg
width="400"
width="170"
height="540"
viewBox="20 0 105.83333 145.52084"
viewBox="20 0 40 145"
version="1.1"
id="svg8"
>
@ -125,6 +144,7 @@ export default function RigMnemo({
<g id="Well" style={styleWell}>
<path d="M 33.072916,97.895832 H 39.6875 V 142.875 h -6.614584 z" />
</g>
{isBitVisible &&
<g id="Bit"
transform={bitTranslate}>
<path
@ -136,6 +156,8 @@ export default function RigMnemo({
d="m 34.395833,138.90625 v -3.96875 h 3.96875 v 3.96875 z"
/>
</g>
}
{isBlockVisible &&
<g id="Block"
transform={blockTranslate}
style={styleBlock}
@ -144,7 +166,8 @@ export default function RigMnemo({
<path d="m 111.38958,45.772916 c 0,0 0.17047,0.398584 0.26459,0.529167 0.0941,0.130583 0.22384,0.166227 0.26458,0.264583 0.0407,0.09836 0.0328,0.390283 0,0.529167 -0.0328,0.138884 -0.10568,0.166378 -0.26458,0.264584 -0.1589,0.09821 -0.37027,0.09821 -0.52917,0 -0.1589,-0.09821 -0.23179,-0.1257 -0.26458,-0.264584 -0.0328,-0.138884 0,-0.529167 0,-0.529167 0,0 0.10568,0.430961 0.26458,0.529167 0.1589,0.09821 0.40444,0.124726 0.52917,0 0.12472,-0.124725 0.0576,-0.39007 0,-0.529167 -0.0576,-0.139097 -0.17047,-0.133999 -0.26459,-0.264583 -0.0941,-0.130584 -0.26458,-0.529167 -0.26458,-0.529167 z" />
<path d="m 110.33125,47.360416 v 2.38125 l 0.79375,10e-7 v 0.529166 h -0.26458 V 50.8 l 1.32291,-10e-7 v -0.529166 h -0.26458 v -0.529167 l 0.79375,10e-7 v -2.38125 z" />
</g>
<g id="Pump1" transform="translate(-0.79375,2.6066667e-4)">
}
{/* <g id="Pump1" transform="translate(-0.79375,2.6066667e-4)">
<circle
style={stylePump1}
id="PumpCircle"
@ -179,7 +202,7 @@ export default function RigMnemo({
d="m 48.948828,78.052995 v 5.292056 h 0.13086 l 5.158984,-2.6e-4 v -5.292057 z m 0.263672,0.263672 4.7625,-2.61e-4 v 4.762761 l -4.7625,2.6e-4 z"
id="PumpSquare"
/>
</g>
</g> */}
</svg>
);
}

2
src/pages/TelemetryView/UserOfWells.jsx
View File

@ -1,6 +1,6 @@
import { Display } from '../../components/Display'
export const UserOfWells = ({ data }) => {
export const UserOfWell = ({ data }) => {
const dataLast = data[data.length - 1]
return <Display className='border_small display_flex_container user_card'

121
src/pages/TelemetryView/index.jsx
View File

@ -1,15 +1,16 @@
import {useState, useEffect} from 'react'
import {Row, Col, Select} from 'antd'
import {Select} from 'antd'
import {Column} from './Column'
import {CustomColumn} from './CustomColumn'
import ActiveMessagesOnline from './ActiveMessagesOnline'
import {ModeDisplay} from "./ModeDisplay"
import {UserOfWells} from './UserOfWells'
import {UserOfWell} from './UserOfWells'
import LoaderPortal from '../../components/LoaderPortal'
import {Grid, GridItem, Flex} from '../../components/Grid'
import {Subscribe} from '../../services/signalr'
import {DataService} from '../../services/api'
import {TelemetryDataSaubService, TelemetryDataSpinService} from '../../services/api'
import {invokeWebApiWrapperAsync} from '../../components/factory'
import MomentStabPicEnabled from "../../images/DempherOn.png"
@ -140,67 +141,109 @@ const timePeriodCollection = [
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
}
const getIndexOfDrillingBy = (dataSaub)=>{
const order = {
0: -1,
1: 1, // скорость
2: 2, // давление
3: 3, // нагрузка
4: 5, // момент
}
const idFeedRegulator = getLast(dataSaub)?.idFeedRegulator??0
return order[idFeedRegulator]??-1
}
export default function TelemetryView({idWell}) {
const [saubData, setSaubData] = useState([])
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 handleReceiveDataSaub = (data) => {
const handleDataSaub = (data) => {
if (data) {
setSaubData(data)
setDataSaub(data)
}
}
const handleDataSpin = (data) => {
if (data) {
setDataSpin(data)
}
}
useEffect(() => {
invokeWebApiWrapperAsync(
async () => {
const data = await DataService.getData(idWell, null, chartInterval)
handleReceiveDataSaub(data)
const dataSaub = await TelemetryDataSaubService.getData(idWell, null, chartInterval)
const dataSpin = await TelemetryDataSpinService.getData(idWell, null, chartInterval)
handleDataSaub(dataSaub)
handleDataSpin(dataSpin)
},
setShowLoader,
`Не удалось получить данные по скважине "${idWell}"`,
)
return Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${idWell}`, handleReceiveDataSaub)
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={saubData}/>
</Col>
<span style={{flexGrow: 0.1}}>&nbsp;</span>
<Col>
<Grid style={{gridTemplateColumns: 'auto repeat(6, 1fr)'}}>
<GridItem col='1' row='1' colSpan='8' style={{marginBottom: '0.5rem'}}>
<Flex>
<ModeDisplay data={dataSaub}/>
<div style={{marginLeft: '1rem'}}>
Интервал:&nbsp;
<Select defaultValue={defaultChartInterval} onChange={setChartInterval}>
{options}
</Select>
</Col>
<span style={{flexGrow: 1}}>&nbsp;</span>
<img src={saubData[saubData.length - 1]?.isMomentStabEnabled ? MomentStabPicEnabled : MomentStabPicDisabled} style={{marginRight: "15px"}} alt="TorqueMaster"/>
<img src={saubData[saubData.length - 1]?.isSpinEnabled ? SpinPicEnabled : SpinPicDisabled} style={{marginRight: "15px"}} alt="SpinMaster"/>
<h2 style={{marginBottom: 0, marginRight: "15px",fontWeight: "bold", color: saubData[saubData.length - 1]?.mseEnabled === 24968 ? "green" : "lightgrey"}}>MSE</h2>
<Col>
<UserOfWells data={saubData}/>
</Col>
</Row>
<Row>
<Col span={3}>
<CustomColumn data={saubData}/>
</Col>
<Col span={24 - 3}>
<Row>
</div>
<span style={{flexGrow: 20}}>&nbsp;</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>
<UserOfWell data={dataSaub}/>
</Flex>
</GridItem>
<GridItem col='1' row='2' rowSpan='3' style={{minWidth:'260px', width:'0.142fr'}}>
<CustomColumn data={dataSaub}/>
</GridItem>
{paramsGroups.map((group, index) =>
<Col span={colSpan} className='border_small' key={group.label}>
<Column data={saubData} lineGroup={group} interval={chartInterval}
showBorder={saubData[saubData.length - 1]?.drillingBy === index}/>
</Col>)}
</Row>
</Col>
</Row>
<GridItem col={2 + index} row='2' className='border_small' key={group.label}>
<Column
style={{width:'13vw'}}
data={dataSaub}
lineGroup={group}
interval={chartInterval}
showBorder={getIndexOfDrillingBy(dataSaub) === index}/>
</GridItem>)}
<GridItem col='2' row='3' colSpan='7'>
<ActiveMessagesOnline idWell={idWell}/>
</GridItem>
</Grid>
</LoaderPortal>)
}

238
src/pages/TelemetryView/index_backup.jsx Normal file
View File

@ -0,0 +1,238 @@
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}}>&nbsp;</span>
<Col>
Интервал:&nbsp;
<Select defaultValue={defaultChartInterval} onChange={setChartInterval}>
{options}
</Select>
</Col>
<span style={{flexGrow: 1}}>&nbsp;</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>)
}