From dac6470dd80c9d74950c3b95ecb9f150a386eb1f Mon Sep 17 00:00:00 2001 From: goodmice Date: Mon, 18 Jul 2022 18:04:40 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=20?= =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=B4=D0=B5=D1=80=20=D1=81=D1=82=D1=80=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D1=86=D1=8B=20=D0=BC=D0=BE=D0=BD=D0=B8=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Telemetry/TelemetryView/cursorRender.jsx | 44 ++++++++++++ src/pages/Telemetry/TelemetryView/index.jsx | 67 +++++++++++-------- 2 files changed, 83 insertions(+), 28 deletions(-) create mode 100644 src/pages/Telemetry/TelemetryView/cursorRender.jsx diff --git a/src/pages/Telemetry/TelemetryView/cursorRender.jsx b/src/pages/Telemetry/TelemetryView/cursorRender.jsx new file mode 100644 index 0000000..c6cd306 --- /dev/null +++ b/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 ( + + {yValue} + {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 ( + + + {chart.shortLabel || chart.label} + {yFormat(chart)} + + ) + })} + + ) +} + +export default cursorRender diff --git a/src/pages/Telemetry/TelemetryView/index.jsx b/src/pages/Telemetry/TelemetryView/index.jsx index 55bec19..5459fec 100755 --- a/src/pages/Telemetry/TelemetryView/index.jsx +++ b/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'} />