Улучшен рендер страницы мониторинга

src/pages/Telemetry/TelemetryView/cursorRender.jsx

@@ -0,0 +1,44 @@
+import { BarChartOutlined, LineChartOutlined, DotChartOutlined, AreaChartOutlined, BorderOuterOutlined } from '@ant-design/icons'
+import { Grid, GridItem } from '@components/Grid'
+import { Fragment } from 'react'
+
+export const cursorRender = (group, data) => {
+    const d = data.length > 0 ? data[0] : {}
+
+    if (group.charts.length <= 0) return <></>
+    const firstChart = group.charts[0]
+    const y = firstChart.y(d)
+    const yValue = firstChart.yAxis.format?.(y) ?? `${(+y).toFixed(2)} ${firstChart.yAxis.unit ?? ''}`
+    const yFormat = (chart) => {
+        const v = chart.x(d)
+        return chart.xAxis.format?.(v) ?? `${(+v)?.toFixed(2)} ${chart.xAxis.unit ?? ''}`
+    }
+
+    return (
+        <Grid>
+            <GridItem row={1} col={1} colSpan={4}>{yValue}</GridItem>
+            {group.charts.map((chart, i) => {
+                let Icon
+                switch (chart.type) {
+                    case 'needle': Icon = BarChartOutlined; break
+                    case 'line': Icon = LineChartOutlined; break
+                    case 'point': Icon = DotChartOutlined; break
+                    case 'area': Icon = AreaChartOutlined; break
+                    case 'rect_area': Icon = BorderOuterOutlined; break
+                }
+                
+                const d = data[0]
+
+                return (
+                    <Fragment key={chart.key}>
+                        <GridItem row={i+2} col={1} style={{ padding: '4px 0' }}><Icon style={{ color: chart.color }} /></GridItem>
+                        <GridItem row={i+2} col={2}>{chart.shortLabel || chart.label}</GridItem>
+                        <GridItem row={i+2} col={3} style={{ paddingRight: 0 }}>{yFormat(chart)}</GridItem>
+                    </Fragment>
+                )
+            })}
+        </Grid>
+    )
+}
+
+export default cursorRender

src/pages/Telemetry/TelemetryView/index.jsx

@@ -18,12 +18,13 @@ import {
   WellService
 } from '@api'
 
-import { CustomColumn } from './CustomColumn'
 import ActiveMessagesOnline from './ActiveMessagesOnline'
+import WirelineRunOut from './WirelineRunOut'
+import { CustomColumn } from './CustomColumn'
 import { ModeDisplay } from './ModeDisplay'
 import { UserOfWell } from './UserOfWells'
+import cursorRender from './cursorRender'
 import { Setpoints } from './Setpoints'
-import WirelineRunOut from './WirelineRunOut'
 
 import MomentStabPicEnabled from '@images/DempherOn.png'
 import MomentStabPicDisabled from '@images/DempherOff.png'
@@ -42,9 +43,10 @@ const yAxis = {
 
 const dash = [7, 3]
 
-const makeDataset = (label, color, key, unit, other) => ({
+const makeDataset = (label, shortLabel, color, key, unit, other) => ({
   key,
   label,
+  shortLabel,
   color,
   yAxis,
   xAxis: {
@@ -58,32 +60,33 @@ const makeDataset = (label, color, key, unit, other) => ({
 
 export const chartGroups = [
   [
-      makeDataset('Высота блока', '#333', 'blockPosition', 'м'),
-      makeDataset('Глубина скважины', '#333', 'wellDepth', 'м', { dash }),
-      makeDataset('Расход', '#077', 'flow', 'л/с'),
+    makeDataset("Высота блока", "Высота ТБ","#303030", "blockPosition", "м"),
+    makeDataset("Глубина скважины", "Глубина скв","#7789A1", "wellDepth", "м", { dash }),
+    makeDataset("Расход", "Расход","#007070", "flow", "л/с"),
+    makeDataset("Положение долота", "Долото","#B39D59", "bitPosition", "м"),
   ], [
-      makeDataset('Скорость блока', '#0a0', 'blockSpeed', 'м/ч'),
-      makeDataset('Скорость заданная', '#0a0', 'blockSpeedSp', 'м/ч', { dash }),
+    makeDataset("Скорость блока", "Скорость ТБ","#59B359", "blockSpeed", "м/ч"),
+    makeDataset("Скорость заданная", "Скор зад-я","#95B359", "blockSpeedSp", "м/ч", { dash }),
   ], [
-      makeDataset('Давление', '#c00', 'pressure', 'атм'),
-      makeDataset('Давление заданное', '#c00', 'pressureSp', 'атм'),
-      makeDataset('Давление ХХ', '#c00', 'pressureIdle', 'атм', { dash }),
-      makeDataset('Перепад давления максимальный', '#c00', 'pressureDeltaLimitMax', 'атм', { dash }),
+    makeDataset("Давление", "Давл","#FF0000", "pressure", "атм"),
+    makeDataset("Давление заданное", "Давл зад-е","#CC0000", "pressureSp", "атм"),
+    makeDataset("Давление ХХ", "Давл ХХ","#CC4429", "pressureIdle", "атм", { dash }),
+    makeDataset("Перепад давления максимальный", "ΔР макс","#B34A36", "pressureDeltaLimitMax", "атм", { dash }),
   ], [
-      makeDataset('Осевая нагрузка', '#00a', 'axialLoad', 'т'),
-      makeDataset('Осевая нагрузка заданная', '#00a', 'axialLoadSp', 'т', { dash }),
-      makeDataset('Осевая нагрузка максимальная', '#00a', 'axialLoadLimitMax', 'т', { dash }),
+    makeDataset("Осевая нагрузка", "Нагр","#0000CC", "axialLoad", "т"),
+    makeDataset("Осевая нагрузка заданная", "Нагр зад-я","#3D6DCC", "axialLoadSp", "т", { dash }),
+    makeDataset("Осевая нагрузка максимальная", "Нагр макс","#3D3DCC", "axialLoadLimitMax", "т", { dash }),
   ], [
-      makeDataset('Вес на крюке', '#0aa', 'hookWeight', 'т'),
-      makeDataset('Вес инструмента ХХ', '#0aa', 'hookWeightIdle', 'т', { dash }),
-      makeDataset('Вес инструмента минимальный', '#0aa', 'hookWeightLimitMin', 'т', { dash }),
-      makeDataset('Вес инструмента максимальный', '#0aa', 'hookWeightLimitMax', 'т', { dash }),
-      makeDataset('Обороты ротора', '#0aa', 'rotorSpeed', 'об/мин'),
+    makeDataset("Вес на крюке", "Вес на крюке","#00B3B3", "hookWeight", "т"),
+    makeDataset("Вес инструмента ХХ", "Вес инст ХХ","#29CCB1", "hookWeightIdle", "т", { dash }),
+    makeDataset("Вес инструмента минимальный", "Вес инст мин","#47A1B3", "hookWeightLimitMin", "т", { dash }),
+    makeDataset("Вес инструмента максимальный", "Вес инст мах","#2D7280", "hookWeightLimitMax", "т", { dash }),
+    makeDataset("Обороты ротора", "Об ротора","#11B32F", "rotorSpeed", "об/мин"),
   ], [
-      makeDataset('Момент на роторе', '#a0a', 'rotorTorque', 'кН·м'),
-      makeDataset('План. Момент на роторе', '#a0a', 'rotorTorqueSp', 'кН·м', { dash }),
-      makeDataset('Момент на роторе х.х.', '#a0a', 'rotorTorqueIdle', 'кН·м', { dash }),
-      makeDataset('Момент максимальный', '#a0a', 'rotorTorqueLimitMax', 'кН·м', { dash }),
+    makeDataset("Момент на роторе", "Момент","#990099", "rotorTorque", "кН·м"),
+    makeDataset("План. Момент на роторе", "Момент зад-й","#9629CC", "rotorTorqueSp", "кН·м", { dash }),
+    makeDataset("Момент на роторе х.х.", "Момень ХХ","#CC2996", "rotorTorqueIdle", "кН·м", { dash }),
+    makeDataset("Момент максимальный", "Момент макс","#FF00FF", "rotorTorqueLimitMax", "кН·м", { dash }),
   ]
 ]
 
@@ -112,6 +115,8 @@ export const normalizeData = (data) => data?.map(item => ({
   blockSpeed: Math.abs(item.blockSpeed)
 })) ?? []
 
+const dateSorter = makeDateSorter('date')
+
 const TelemetryView = memo(() => {
   const [dataSaub, setDataSaub] = useState([])
   const [dataSpin, setDataSpin] = useState([])
@@ -127,12 +132,15 @@ const TelemetryView = memo(() => {
   const handleDataSaub = useCallback((data) => {
     if (data) {
       const dataSaub = normalizeData(data)
-      dataSaub.sort(makeDateSorter('date'))
-      setDataSaub(dataSaub)
+      setDataSaub((prev) => {
+        const out = [...prev, ...dataSaub]
+        out.sort(dateSorter)
+        return out
+      })
     }
   }, [])
 
-  const handleDataSpin = useCallback((data) => data && setDataSpin(data), [])
+  const handleDataSpin = useCallback((data) => data && setDataSpin((prev) => [...prev, ...data]), [])
 
   useEffect(() => {
     const unsubscribe = Subscribe(
@@ -247,7 +255,10 @@ const TelemetryView = memo(() => {
             }}
             plugins={{
               menu: { enabled: false },
-              cursor: { width: 180 },
+              cursor: {
+                width: 200,
+                render: cursorRender,
+              },
             }}
             height={'70vh'}
           />