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

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) =>{  
+export const ChartTimeOnlineFooter = ({ data, lineGroup }) => {
-  const { data,
+  const getFooterData = (name) => {
-    lineIdle,
+    const dataIdx = data && lineGroup?.find(line => line?.footer === name)?.xAccessorName
-    lineSp,
+    return (<ValueDisplay value={data?.[dataIdx]}/>)
-    linesOther} = props
+  }
 
-  let sp = null
+  let spValues = getFooterData('SP')
-  let idle = null
+  const idleValues = getFooterData('IDLE')
 
-  if(data && lineSp)
+  const popContent = lineGroup?.filter(line => line.footer === true).map(line => (
-    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 (
     <div key={line.label}>
       {line.label}
-      <ValueDisplay value={val}/>
+      <ValueDisplay value={data?.[line.xAccessorName]}/>
-    </div>)
+    </div>
-  })
+  ))
 
-  if(popContent)
+  return(
-    spField = <Popover content={popContent}>
+    <div>
-      <div className="chart-footer">
+      {popContent?.length > 0 ? (
-        <ControlOutlined className='display_label'/>
+        <Popover content={popContent}>
-        {spField}
+          <div className={'chart-footer'}>
+            <ControlOutlined className={'display_label'}/>
+            <div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
           </div>
         </Popover>
-  else
+      ) : (
-    spField = <div style={{display:"flex"}}>
+        <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-        {spField}
+          <div style={{display: 'flex', flexDirection: 'column'}}>{spValues}</div>
         </div>
-
+      )}
-  return(<div>
+      <div style={{display: 'flex'}}>
-    {spField}
-    <div style={{display:"flex"}}>
         <span className='display_label'>х.х.</span>
-      <ValueDisplay value={idle}/>
+        <div style={{display: 'flex', flexDirection: 'column'}}>{idleValues}</div>
       </div>
-  </div>)
+    </div>
+  )
 }

src/pages/TelemetryView/Column.jsx

@@ -1,45 +1,43 @@
-import {Display} from "../../components/Display";
+import {Grid, GridItem} from '../../components/Grid';
-import {ChartTimeOnline} from "./ChartTimeOnline";
+import {ChartTimeOnline} from './ChartTimeOnline';
-import {ChartTimeOnlineFooter} from "./ChartTimeOnlineFooter";
+import {ChartTimeOnlineFooter} from './ChartTimeOnlineFooter';
 
-export const Column = ({lineGroup, data, interval, showBorder, style}) => {
+const stroke = (sz='1px', c='white') => ({ textShadow: `-${sz} -${sz} 0 ${c}, ${sz} -${sz} 0 ${c}, -${sz} ${sz} 0 ${c}, ${sz} ${sz} 0 ${c}` })
-  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)
 
+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 = lineGroup.filter(line => line.showValue).map(line => ({
-      pv = dataLast[lineGroup.linePv?.xAccessorName]
+      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" : ""}}>
+      <Grid style={{height: headerHeight, boxShadow: showBorder ? 'inset 0px 0px 0px 3px black' : ''}}>
-        <Display
+        {pv?.map((v, idx) => (
-          label={lineGroup.label}
+          <GridItem className={'display_chart_label'} key={idx} row={idx} col={1} style={{color: v.color}}>{v.label}</GridItem>
-          value={pv}
+        ))}
-          suffix={lineGroup.linePv?.units} isArrowVisible={false}/>
+      </Grid>
-      </div>
+      <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}
+          yDisplay={false}
-        lines={lines}
+          lines={lineGroup}
-        interval={interval}/>
+          interval={interval}
-      <ChartTimeOnlineFooter
+        />
-        data={dataLast}
+      </div>
-        {...lineGroup} />
+      <ChartTimeOnlineFooter data={dataLast} lineGroup={lineGroup} />
-    </div>)
+    </div>
+  )
 }

src/pages/TelemetryView/index.jsx

@@ -24,107 +24,191 @@ const {Option} = Select
 
 const dash = [7, 3]
 
-const blockHeightGroup = {
+const blockHeightGroup = [
+  {
     label: "Высота блока",
-  yDisplay: false,
+    units: 'м',
-  linePv: {label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333'},
+    xAccessorName: "blockPosition",
-  lineOther: {
+    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 = {
+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: "мекс. перепад",
+    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,
+    units: 'т',
-  linePv: {label: "axialLoad", units: 'т', xAccessorName: "axialLoad", yAccessorName: "date", color: '#00a'},
+    xAccessorName: "axialLoad",
-  lineSp: {label: "axialLoadSp", units: 'т', xAccessorName: "axialLoadSp", yAccessorName: "date", color: '#00a', dash},
+    yAccessorName: "date",
-  linesOther: [
+    color: '#00a',
-    {label: "axialLoadLimitMax", units: 'т', xAccessorName: "axialLoadLimitMax", 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,
+    units: 'т',
-  linePv: {label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa'},
+    xAccessorName: "hookWeight",
-  lineIdle: {
+    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,
+    units: 'кН·м',
-  linePv: {label: "rotorTorque", units: 'кН·м', xAccessorName: "rotorTorque", yAccessorName: "date", color: '#a0a'},
+    xAccessorName: "rotorTorque",
-  lineSp: {label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a'},
+    yAccessorName: "date",
-  lineIdle: {
+    color: '#a0a',
-    label: "rotorTorqueIdle",
+    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',
-  linesOther: [
+    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>
       )}

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);