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>)
|
||||
})
|
||||
<ValueDisplay value={data?.[line.xAccessorName]}/>
|
||||
</div>
|
||||
))
|
||||
|
||||
if(popContent)
|
||||
spField = <Popover content={popContent}>
|
||||
<div className="chart-footer">
|
||||
<ControlOutlined className='display_label'/>
|
||||
{spField}
|
||||
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>
|
||||
else
|
||||
spField = <div style={{display:"flex"}}>
|
||||
{spField}
|
||||
) : (
|
||||
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
|
||||
</div>
|
||||
|
||||
return(<div>
|
||||
{spField}
|
||||
<div style={{display:"flex"}}>
|
||||
)}
|
||||
<div style={{display: 'flex'}}>
|
||||
<span className='display_label'>х.х.</span>
|
||||
<ValueDisplay value={idle}/>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>{idleValues}</div>
|
||||
</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}/>
|
||||
</div>
|
||||
<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={lineGroup.yDisplay}
|
||||
lines={lines}
|
||||
interval={interval}/>
|
||||
<ChartTimeOnlineFooter
|
||||
data={dataLast}
|
||||
{...lineGroup} />
|
||||
</div>)
|
||||
yDisplay={false}
|
||||
lines={lineGroup}
|
||||
interval={interval}
|
||||
/>
|
||||
</div>
|
||||
<ChartTimeOnlineFooter data={dataLast} lineGroup={lineGroup} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -24,107 +24,191 @@ const {Option} = Select
|
||||
|
||||
const dash = [7, 3]
|
||||
|
||||
const blockHeightGroup = {
|
||||
const blockHeightGroup = [
|
||||
{
|
||||
label: "Высота блока",
|
||||
yDisplay: false,
|
||||
linePv: {label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333'},
|
||||
lineOther: {
|
||||
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: "Скорость блока",
|
||||
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: [
|
||||
const blockSpeedGroup = [
|
||||
{
|
||||
label: "мекс. перепад",
|
||||
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'
|
||||
},
|
||||
],
|
||||
color: '#c00',
|
||||
footer: true,
|
||||
dash
|
||||
}
|
||||
]
|
||||
|
||||
const axialLoadGroup = {
|
||||
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'},
|
||||
],
|
||||
}
|
||||
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 hookWeightGroup = {
|
||||
const hookWeightGroup = [
|
||||
{
|
||||
label: "Вес на крюке",
|
||||
yDisplay: false,
|
||||
linePv: {label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa'},
|
||||
lineIdle: {
|
||||
units: 'т',
|
||||
xAccessorName: "hookWeight",
|
||||
yAccessorName: "date",
|
||||
color: '#0aa',
|
||||
showValue: true
|
||||
}, {
|
||||
label: "hookWeightIdle",
|
||||
units: 'т',
|
||||
xAccessorName: "hookWeightIdle",
|
||||
yAccessorName: "date",
|
||||
color: '#0aa',
|
||||
footer: 'IDLE',
|
||||
dash
|
||||
},
|
||||
linesOther: [
|
||||
{
|
||||
}, {
|
||||
label: "hookWeightLimitMin",
|
||||
units: 'т',
|
||||
xAccessorName: "hookWeightLimitMin",
|
||||
yAccessorName: "date",
|
||||
color: '#0aa'
|
||||
},
|
||||
{
|
||||
color: '#0aa',
|
||||
footer: true,
|
||||
dash
|
||||
}, {
|
||||
label: "hookWeightLimitMax",
|
||||
units: 'т',
|
||||
xAccessorName: "hookWeightLimitMax",
|
||||
yAccessorName: "date",
|
||||
color: '#0aa'
|
||||
color: '#0aa',
|
||||
footer: true,
|
||||
dash
|
||||
},
|
||||
],
|
||||
{
|
||||
label: 'Обороты ротора',
|
||||
units: 'об/мин',
|
||||
xAccessorName: 'rotorSpeed',
|
||||
yAccessorName: 'date',
|
||||
color: '#aa0',
|
||||
showValue: true
|
||||
}
|
||||
]
|
||||
|
||||
const rotorTorqueGroup = {
|
||||
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: "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'
|
||||
},
|
||||
linesOther: [
|
||||
{
|
||||
color: '#a0a',
|
||||
footer: 'IDLE',
|
||||
dash
|
||||
}, {
|
||||
label: "rotorTorqueLimitMax",
|
||||
units: 'кН·м',
|
||||
xAccessorName: "rotorTorqueLimitMax",
|
||||
yAccessorName: "date",
|
||||
color: '#a0a'
|
||||
color: '#a0a',
|
||||
footer: true,
|
||||
dash
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
|
||||
const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup]
|
||||
|
||||
@ -239,12 +323,13 @@ export default function TelemetryView({idWell}) {
|
||||
<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' }}
|
||||
data={dataSaub}
|
||||
lineGroup={group}
|
||||
interval={chartInterval}
|
||||
headerHeight={'60px'}
|
||||
showBorder={getIndexOfDrillingBy(dataSaub) === index} />
|
||||
</GridItem>
|
||||
)}
|
||||
|
||||
@ -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