From dd46525c89019b7794e33ce0c7f186f56fce2860 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 27 May 2021 13:46:46 +0500 Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=BE=20=D0=BE=D0=BF=D0=BE=D0=B2=D0=B5=D1=89=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BE=D0=B1=20=D0=BE=D1=88=D0=B8=D0=B1?= =?UTF-8?q?=D0=BA=D0=B5=20=D0=B2=20TelemetryView.=20=D0=98=D1=81=D0=BF?= =?UTF-8?q?=D0=B0=D1=80=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8?= =?UTF-8?q?=D0=BB=D0=B8.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ChartTimeOnlineFooter.jsx | 2 +- src/components/Well.jsx | 2 +- src/pages/Main.jsx | 2 +- src/pages/TelemetryView.jsx | 166 ++++++++++++++--------- src/styles/App.less | 4 +- 5 files changed, 107 insertions(+), 69 deletions(-) diff --git a/src/components/ChartTimeOnlineFooter.jsx b/src/components/ChartTimeOnlineFooter.jsx index 481e09c..674caeb 100644 --- a/src/components/ChartTimeOnlineFooter.jsx +++ b/src/components/ChartTimeOnlineFooter.jsx @@ -32,7 +32,7 @@ export const ChartTimeOnlineFooter = (props) =>{ if(popContent) spField = -
+
{spField}
diff --git a/src/components/Well.jsx b/src/components/Well.jsx index 9ee08b2..ee45576 100644 --- a/src/components/Well.jsx +++ b/src/components/Well.jsx @@ -41,7 +41,7 @@ export default function Well() { - + diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx index 4eee5bd..946c51d 100644 --- a/src/pages/Main.jsx +++ b/src/pages/Main.jsx @@ -13,7 +13,7 @@ export default function Main() { - + diff --git a/src/pages/TelemetryView.jsx b/src/pages/TelemetryView.jsx index 2134664..0ca2da4 100644 --- a/src/pages/TelemetryView.jsx +++ b/src/pages/TelemetryView.jsx @@ -1,83 +1,120 @@ -import { useState, useEffect } from 'react' -import { useParams } from 'react-router-dom' +import {useState, useEffect} from 'react' +import {useParams} from 'react-router-dom' import {Row, Col, Select, Table} from 'antd' -import { ChartTimeOnline } from '../components/charts/ChartTimeOnline' +import {ChartTimeOnline} from '../components/charts/ChartTimeOnline' import Loader from '../components/Loader' -import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter' -import { CustomColumn } from '../components/CustomColumn' -import { UserOfWells } from '../components/UserOfWells' -import { ModeDisplay } from '../components/ModeDisplay' -import { Display } from '../components/Display' +import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter' +import {CustomColumn} from '../components/CustomColumn' +import {UserOfWells} from '../components/UserOfWells' +import {ModeDisplay} from '../components/ModeDisplay' +import {Display} from '../components/Display' import notify from '../components/Notification' import moment from 'moment' -import { Subscribe } from '../services/signalr' -import { DataService, MessageService } from '../services/api' +import {Subscribe} from '../services/signalr' +import {DataService, MessageService} from '../services/api' import '../styles/message.css' import Notification from "../components/Notification"; -const { Option } = Select +const {Option} = Select const dash = [7, 3] const blockHeightGroup = { label: "Высота блока", yDisplay: false, - linePv: { label: "blockHeight", units: 'м', xAccessorName: "blockHeight", yAccessorName: "date", color: '#333' }, + linePv: {label: "blockHeight", units: 'м', xAccessorName: "blockHeight", yAccessorName: "date", color: '#333'}, } 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' }, + 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' }, + 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: "мекс. перепад", units: 'атм', xAccessorName: "pressureDeltaLimitMax", yAccessorName: "date", color: '#c00' }, + { + label: "мекс. перепад", + units: 'атм', + xAccessorName: "pressureDeltaLimitMax", + yAccessorName: "date", + color: '#c00' + }, ], } 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 }, + 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' }, + {label: "axialLoadLimitMax", units: 'т', xAccessorName: "axialLoadLimitMax", yAccessorName: "date", color: '#00a'}, ], } const hookWeightGroup = { label: "Ввес на крюке", yDisplay: false, - linePv: { label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa' }, - lineIdle: { label: "hookWeightIdle", units: 'т', xAccessorName: "hookWeightIdle", yAccessorName: "date", color: '#0aa', dash }, + linePv: {label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa'}, + lineIdle: { + label: "hookWeightIdle", + units: 'т', + xAccessorName: "hookWeightIdle", + yAccessorName: "date", + color: '#0aa', + dash + }, linesOther: [ - { label: "hookWeightLimitMin", units: 'т', xAccessorName: "hookWeightLimitMin", yAccessorName: "date", color: '#0aa' }, - { label: "hookWeightLimitMax", units: 'т', xAccessorName: "hookWeightLimitMax", yAccessorName: "date", color: '#0aa' }, + { + label: "hookWeightLimitMin", + units: 'т', + xAccessorName: "hookWeightLimitMin", + yAccessorName: "date", + color: '#0aa' + }, + { + label: "hookWeightLimitMax", + units: 'т', + xAccessorName: "hookWeightLimitMax", + yAccessorName: "date", + color: '#0aa' + }, ], } 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: "rotorTorqueIdle", yAccessorName: "date", color: '#a0a' }, + 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: "rotorTorqueIdle", + yAccessorName: "date", + color: '#a0a' + }, linesOther: [ - { label: "rotorTorqueLimitMax", units: 'кН·м', xAccessorName: "rotorTorqueLimitMax", yAccessorName: "date", color: '#a0a' }, + { + label: "rotorTorqueLimitMax", + units: 'кН·м', + xAccessorName: "rotorTorqueLimitMax", + yAccessorName: "date", + color: '#a0a' + }, ], } const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup] -export const Column = ({ lineGroup, data, interval }) => { +export const Column = ({lineGroup, data, interval}) => { let lines = [lineGroup.linePv] if (lineGroup.lineSp) @@ -101,7 +138,7 @@ export const Column = ({ lineGroup, data, interval }) => { data={data} yDisplay={lineGroup.yDisplay} lines={lines} - interval={interval} /> + interval={interval}/> @@ -110,9 +147,9 @@ export const Column = ({ lineGroup, data, interval }) => { // Словарь категорий для строк таблицы const categoryDictionary = { - 1: { title: 'Авария' }, - 2: { title: 'Предупреждение' }, - 3: { title: 'Информация' }, + 1: {title: 'Авария'}, + 2: {title: 'Предупреждение'}, + 3: {title: 'Информация'}, } // Конфигурация таблицы @@ -144,7 +181,7 @@ const columns = [ ]; export default function TelemetryView(props) { - let { id } = useParams() + let {id} = useParams() const [saubData, setSaubData] = useState([]) const [chartInterval, setChartInterval] = useState(600) const [messages, setMessages] = useState([]) @@ -164,20 +201,19 @@ export default function TelemetryView(props) { } useEffect(() => { - try { - DataService.getData(id) - .then(handleReceiveDataSaub) - } catch (ex) { - Notification(`Не удалось загрузить данные по скважине ${id}`, 'error') - } + DataService.getData(id) + .then(handleReceiveDataSaub) + .catch((ex) => { + Notification(`Не удалось загрузить данные по скважине "${id}"`, 'error') + console.log(ex) + }) - try { - MessageService.getMessage(id) - .then(handleReceiveMessages) - } catch (ex) { - Notification(`Не удалось загрузить сообщения по скважине ${id}`, 'error') - console.log(ex) - } + MessageService.getMessage(id) + .then(handleReceiveMessages) + .catch((ex) => { + Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error') + console.log(ex) + }) let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub) let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages) @@ -190,11 +226,11 @@ export default function TelemetryView(props) { const colSpan = 24 / (paramsGroups.length) return (
- + - + -   +   Интервал:  -   +   - - + + {paramsGroups.map(group => - + )} `event_message_${record.categoryId} event_message`} - className={'message_table'} - size={'small'} - pagination={false} - rowKey={(record) => record.id} - /> - {loader && } + showHeader={false} + columns={columns} + dataSource={messages} + rowClassName={(record) => `event_message_${record.categoryId} event_message`} + className={'message_table'} + size={'small'} + pagination={false} + rowKey={(record) => record.id} + /> + {loader && } ) } \ No newline at end of file diff --git a/src/styles/App.less b/src/styles/App.less index 7a305d0..2e6a83b 100644 --- a/src/styles/App.less +++ b/src/styles/App.less @@ -61,6 +61,7 @@ html { .sheet{ padding: 5px 24px; min-height: 280px; + margin: 0 15px; } .site-layout-background { @@ -117,7 +118,8 @@ html { flex: auto; } -.menu_title { +.menu_title, +.chart-footer { display: flex; }