forked from ddrilling/asb_cloud_front
Столбцы страницы мониторинга переработы
This commit is contained in:
goodmice
parent
7f650b0041
commit
2f9efe938c
@ -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
|
||||
export const ChartTimeOnlineFooter = ({ data, lineGroup }) => {
|
||||
const getFooterData = (name) => {
|
||||
const dataIdx = data && lineGroup?.find(line => line?.footer === name)?.xAccessorName
|
||||
return (<ValueDisplay value={data?.[dataIdx]}/>)
|
||||
}
|
||||
|
||||
let sp = null
|
||||
let idle = null
|
||||
let spValues = getFooterData('SP')
|
||||
const idleValues = getFooterData('IDLE')
|
||||
|
||||
if(data && lineSp)
|
||||
sp = data[lineSp.xAccessorName]
|
||||
|
||||
if(data && lineIdle)
|
||||
idle = data[lineIdle.xAccessorName]
|
||||
|
||||
let spField = <ValueDisplay value={sp}/>
|
||||
|
||||
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 => (
|
||||
<div key={line.label}>
|
||||
{line.label}
|
||||
<ValueDisplay value={val}/>
|
||||
</div>)
|
||||
})
|
||||
|
||||
if(popContent)
|
||||
spField = <Popover content={popContent}>
|
||||
<div className="chart-footer">
|
||||
<ControlOutlined className='display_label'/>
|
||||
{spField}
|
||||
</div>
|
||||
</Popover>
|
||||
else
|
||||
spField = <div style={{display:"flex"}}>
|
||||
{spField}
|
||||
</div>
|
||||
|
||||
return(<div>
|
||||
{spField}
|
||||
<div style={{display:"flex"}}>
|
||||
<span className='display_label'>х.х.</span>
|
||||
<ValueDisplay value={idle}/>
|
||||
<ValueDisplay value={data?.[line.xAccessorName]}/>
|
||||
</div>
|
||||
</div>)
|
||||
))
|
||||
|
||||
return(
|
||||
<div>
|
||||
{popContent?.length > 0 ? (
|
||||
<Popover content={popContent}>
|
||||
<div className={'chart-footer'}>
|
||||
<ControlOutlined className={'display_label'}/>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
|
||||
</div>
|
||||
</Popover>
|
||||
) : (
|
||||
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
|
||||
</div>
|
||||
)}
|
||||
<div style={{display: 'flex'}}>
|
||||
<span className='display_label'>х.х.</span>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>{idleValues}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -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 (
|
||||
<div style={style}>
|
||||
<div style={{boxShadow: showBorder ? "inset 0px 0px 0px 3px black" : ""}}>
|
||||
<Display
|
||||
label={lineGroup.label}
|
||||
value={pv}
|
||||
suffix={lineGroup.linePv?.units} isArrowVisible={false}/>
|
||||
<Grid style={{height: headerHeight, boxShadow: showBorder ? 'inset 0px 0px 0px 3px black' : ''}}>
|
||||
{pv?.map((v, idx) => (
|
||||
<GridItem className={'display_chart_label'} key={idx} row={idx} col={1} style={{color: v.color}}>{v.label}</GridItem>
|
||||
))}
|
||||
</Grid>
|
||||
<div style={{position: 'relative'}}>
|
||||
<Grid className={'display_chart_values'}>
|
||||
{pv?.map((v, idx) => (
|
||||
<GridItem key={idx} col={1} row={idx} style={{...stroke(), color: v.color, padding: '0 4px'}}>{v.value.toFixed(2)} {v.unit}</GridItem>
|
||||
))}
|
||||
</Grid>
|
||||
<ChartTimeOnline
|
||||
data={data}
|
||||
yDisplay={false}
|
||||
lines={lineGroup}
|
||||
interval={interval}
|
||||
/>
|
||||
</div>
|
||||
<ChartTimeOnline
|
||||
data={data}
|
||||
yDisplay={lineGroup.yDisplay}
|
||||
lines={lines}
|
||||
interval={interval}/>
|
||||
<ChartTimeOnlineFooter
|
||||
data={dataLast}
|
||||
{...lineGroup} />
|
||||
</div>)
|
||||
<ChartTimeOnlineFooter data={dataLast} lineGroup={lineGroup} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -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)
|
||||
@ -218,39 +302,40 @@ export default function TelemetryView({idWell}) {
|
||||
}, [idWell, chartInterval])
|
||||
|
||||
return (<LoaderPortal show={showLoader}>
|
||||
<Grid style={{gridTemplateColumns: 'auto repeat(6, 1fr)'}}>
|
||||
<GridItem col='1' row='1' colSpan='8' style={{marginBottom: '0.5rem'}}>
|
||||
<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'}}>
|
||||
<ModeDisplay data={dataSaub} />
|
||||
<div style={{ marginLeft: '1rem' }}>
|
||||
Интервал:
|
||||
<Select defaultValue={defaultChartInterval} onChange={setChartInterval}>
|
||||
{options}
|
||||
</Select>
|
||||
</div>
|
||||
<span style={{flexGrow: 20}}> </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}/>
|
||||
<span style={{ flexGrow: 20 }}> </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 col='1' row='2' rowSpan='3' style={{ minWidth: '260px', width: '0.142fr' }}>
|
||||
<CustomColumn data={dataSaub} />
|
||||
</GridItem>
|
||||
{paramsGroups.map((group, index) =>
|
||||
<GridItem col={2 + index} row='2' className='border_small' key={group.label}>
|
||||
<GridItem col={2 + index} row='2' className='border_small' key={`${group.label}${index}`}>
|
||||
<Column
|
||||
style={{width:'13vw'}}
|
||||
style={{ width: '13vw' }}
|
||||
data={dataSaub}
|
||||
lineGroup={group}
|
||||
interval={chartInterval}
|
||||
showBorder={getIndexOfDrillingBy(dataSaub) === index}/>
|
||||
headerHeight={'60px'}
|
||||
showBorder={getIndexOfDrillingBy(dataSaub) === index} />
|
||||
</GridItem>
|
||||
)}
|
||||
|
||||
<GridItem col='2' row='3' colSpan='7'>
|
||||
<ActiveMessagesOnline idWell={idWell}/>
|
||||
<ActiveMessagesOnline idWell={idWell} />
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</LoaderPortal>)
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user