From dbfaadaf78ca2e90a541be7ea94418b3d7a5b1b0 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 28 Jul 2021 17:29:20 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=20=D1=81=D1=82=D1=80=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=86=D1=8B=20TelemetryView=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=81=D0=BD=D1=8B=20=D1=81=D0=BE=D0=BE=D0=B1=D1=89?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B8=20=D0=BA=D0=BE=D0=BB=D0=BE?= =?UTF-8?q?=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ActiveMessagesOnline.jsx | 83 +++++++++++++++++ src/components/Column.jsx | 45 +++++++++ src/pages/TelemetryView.jsx | 116 ++---------------------- 3 files changed, 134 insertions(+), 110 deletions(-) create mode 100644 src/components/ActiveMessagesOnline.jsx create mode 100644 src/components/Column.jsx diff --git a/src/components/ActiveMessagesOnline.jsx b/src/components/ActiveMessagesOnline.jsx new file mode 100644 index 0000000..fb7a818 --- /dev/null +++ b/src/components/ActiveMessagesOnline.jsx @@ -0,0 +1,83 @@ +import {useState, useEffect} from 'react' +import {MessageService} from '../services/api' +import {Subscribe} from '../services/signalr' +import moment from 'moment' +import notify from "../components/notify" +import '../styles/message.css' +import {Table} from "antd"; +import LoaderPortal from "./LoaderPortal" + +// Словарь категорий для строк таблицы +const categoryDictionary = { + 1: {title: 'Важное'}, + 2: {title: 'Предупреждение'}, + 3: {title: 'Информация'}, +} + +// Конфигурация таблицы +const columns = [ + { + title: 'Дата', + dataIndex: 'date', + render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'), + sorter: (a, b) => new Date(b.date) - new Date(a.date), + sortDirections: ['descend', 'ascend'], + }, + { + title: 'Категория', + dataIndex: 'categoryId', + render: (_, item) => categoryDictionary[item.categoryId].title, + style: (_, item) => categoryDictionary[item.categoryId].style, + sorter: (a, b) => a.categoryId - b.categoryId, + sortDirections: ['descend', 'ascend'], + }, + { + title: 'Сообщение', + dataIndex: 'message', + onFilter: (value, record) => record.name.indexOf(value) === 0, + }, + { + title: 'Пользователь', + dataIndex: 'user', + }, +]; + +export default function ActiveMessagesOnline({idWell}) { + const [messages, setMessages] = useState([]) + const [loader, setLoader] = useState(false) + + const handleReceiveMessages = (messages) => { + if (messages) { + setMessages(messages.items.splice(0, 4)) + } + } + + useEffect(() => { + setLoader(true) + let promiseMessages = MessageService.getMessage(idWell) + .then(handleReceiveMessages) + .catch((ex) => { + notify(`Не удалось загрузить сообщения по скважине "${idWell}"`, 'error') + console.log(ex) + }) + + Promise.all([promiseMessages]).then(()=>setLoader(false)) + let unSubscribeMessagesHub = Subscribe('hubs/telemetry','ReceiveMessages', `well_${idWell}`, handleReceiveMessages) + return () => { + unSubscribeMessagesHub() + } + }, [idWell]) + + return ( + `event_message_${record.categoryId} event_message`} + className={'message_table'} + size={'small'} + pagination={false} + rowKey={(record) => record.id} + /> + ) +} \ No newline at end of file diff --git a/src/components/Column.jsx b/src/components/Column.jsx new file mode 100644 index 0000000..19e5af3 --- /dev/null +++ b/src/components/Column.jsx @@ -0,0 +1,45 @@ +import {Display} from "./Display"; +import {ChartTimeOnline} from "./charts/ChartTimeOnline"; +import {ChartTimeOnlineFooter} from "./ChartTimeOnlineFooter"; + +export const Column = ({lineGroup, data, interval, showBorder}) => { + 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) + + let dataLast = null + let pv = null + if (data?.length > 0) { + dataLast = data[data.length - 1]; + if (lineGroup.linePv) + pv = dataLast[lineGroup.linePv?.xAccessorName] + } + + return ( + <> +
+ +
+ + + ) +} \ No newline at end of file diff --git a/src/pages/TelemetryView.jsx b/src/pages/TelemetryView.jsx index e53d613..4423bd5 100644 --- a/src/pages/TelemetryView.jsx +++ b/src/pages/TelemetryView.jsx @@ -1,18 +1,16 @@ 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 LoaderPortal from '../components/LoaderPortal' -import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter' +import { Column } from '../components/Column' import {CustomColumn} from '../components/CustomColumn' import {UserOfWells} from '../components/UserOfWells' -import {ModeDisplay} from '../components/ModeDisplay' -import {Display} from '../components/Display' -import moment from 'moment' import {Subscribe} from '../services/signalr' -import {DataService, MessageService} from '../services/api' +import {DataService} from '../services/api' import '../styles/message.css' import notify from "../components/notify" +import {ModeDisplay} from "../components/ModeDisplay" +import ActiveMessagesOnline from '../components/ActiveMessagesOnline' const {Option} = Select @@ -114,83 +112,6 @@ const rotorTorqueGroup = { const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup] -export const Column = ({lineGroup, data, interval, showBorder}) => { - 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) - - let dataLast = null - let pv = null - if (data?.length > 0) { - dataLast = data[data.length - 1]; - if (lineGroup.linePv) - pv = dataLast[lineGroup.linePv?.xAccessorName] - } - - return ( - <> -
- -
- - - ) -} - -// Словарь категорий для строк таблицы -const categoryDictionary = { - 1: {title: 'Важное'}, - 2: {title: 'Предупреждение'}, - 3: {title: 'Информация'}, -} - -// Конфигурация таблицы -const columns = [ - { - title: 'Дата', - dataIndex: 'date', - render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'), - sorter: (a, b) => new Date(b.date) - new Date(a.date), - sortDirections: ['descend', 'ascend'], - }, - { - title: 'Категория', - dataIndex: 'categoryId', - render: (_, item) => categoryDictionary[item.categoryId].title, - style: (_, item) => categoryDictionary[item.categoryId].style, - sorter: (a, b) => a.categoryId - b.categoryId, - sortDirections: ['descend', 'ascend'], - }, - { - title: 'Сообщение', - dataIndex: 'message', - onFilter: (value, record) => record.name.indexOf(value) === 0, - }, - { - title: 'Пользователь', - dataIndex: 'user', - }, -]; - const timePeriodCollection = [ {value: '60', label: '1 минута'}, {value: '300', label: '5 минут'}, @@ -208,7 +129,6 @@ export default function TelemetryView(props) { let {id} = useParams() const [saubData, setSaubData] = useState([]) const [chartInterval, setChartInterval] = useState(defaultChartInterval) - const [messages, setMessages] = useState([]) const [loader, setLoader] = useState(false) @@ -220,12 +140,6 @@ export default function TelemetryView(props) { } } - const handleReceiveMessages = (messages) => { - if (messages) { - setMessages(messages.items.splice(0, 4)) - } - } - useEffect(() => { setLoader(true) let promiseData = DataService.getData(id) @@ -235,20 +149,11 @@ export default function TelemetryView(props) { console.log(ex) }) - let promiseMessages = MessageService.getMessage(id) - .then(handleReceiveMessages) - .catch((ex) => { - notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error') - console.log(ex) - }) - - Promise.all([promiseData, promiseMessages]).then(()=>setLoader(false)) + Promise.all([promiseData]).then(()=>setLoader(false)) let unSubscribeDataSaubHub = Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub) - let unSubscribeMessagesHub = Subscribe('hubs/telemetry','ReceiveMessages', `well_${id}`, handleReceiveMessages) return () => { unSubscribeDataSaubHub() - unSubscribeMessagesHub() } }, [id]); @@ -292,15 +197,6 @@ export default function TelemetryView(props) { -
`event_message_${record.categoryId} event_message`} - className={'message_table'} - size={'small'} - pagination={false} - rowKey={(record) => record.id} - /> + ) } \ No newline at end of file