Столбцы страницы мониторинга переработы

2021-10-19 12:47:21 +05:00 · 2021-10-19 12:47:21 +05:00 · 2f9efe938c
commit 2f9efe938c
parent 7f650b0041
4 changed files with 285 additions and 198 deletions
--- 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
+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>
+  )
 }
--- 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 (
    <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>
+  )
 }
--- 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 = {
+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]

 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' }}>
            Интервал:&nbsp;
            <Select defaultValue={defaultChartInterval} onChange={setChartInterval}>
              {options}
            </Select>
          </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}/>
+          <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 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>)
--- 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);