diff --git a/src/pages/Telemetry/Messages.jsx b/src/pages/Telemetry/Messages.jsx index ff49edc..777808d 100755 --- a/src/pages/Telemetry/Messages.jsx +++ b/src/pages/Telemetry/Messages.jsx @@ -1,22 +1,21 @@ -import { Table, Select, DatePicker, Input } from 'antd' -import { useState, useEffect, memo, useCallback } from 'react' -import { useNavigate } from 'react-router-dom' +import { Select, DatePicker, Input, Tooltip } from 'antd' +import { useState, useEffect, memo, useCallback, useMemo } from 'react' +import { Link } from 'react-router-dom' import moment from 'moment' import { useIdWell } from '@asb/context' import LoaderPortal from '@components/LoaderPortal' import { invokeWebApiWrapperAsync } from '@components/factory' -import { makeColumn, makeDateColumn, makeNumericSorter } from '@components/Table' +import { makeColumn, makeDateColumn, makeNumericColumn, makeNumericSorter, makeTextColumn, Table } from '@components/Table' import { wrapPrivateComponent } from '@utils' import { MessageService } from '@api' - import '@styles/message.css' -const { Option } = Select const pageSize = 26 -const { RangePicker } = DatePicker const { Search } = Input +const { Option } = Select +const { RangePicker } = DatePicker // Словарь категорий для строк таблицы const categoryDictionary = { @@ -26,11 +25,17 @@ const categoryDictionary = { } // Конфигурация таблицы -export const columns = [ +export const makeMessageColumns = (idWell) => [ makeDateColumn('Дата', 'date', undefined, undefined, { width: '10rem' }), - makeColumn('Глубина', 'wellDepth', { width: '10rem', render: depth => {depth.toFixed(2)} м. }), + makeNumericColumn('Глубина, м', 'wellDepth', null, null, (depth, item) => ( + + + {depth.toFixed(2)} + + + ), '7rem'), makeColumn('Категория', 'categoryId', { - width: '10rem', + width: '8rem', render: (_, item) => categoryDictionary[item.categoryId].title, style: (_, item) => categoryDictionary[item.categoryId]?.style, sorter: makeNumericSorter('categoryId'), @@ -38,7 +43,7 @@ export const columns = [ ellipsis: true, }), makeColumn('Сообщение', 'message', { onFilter: (value, record) => record.name.indexOf(value) === 0 }), - makeColumn('Пользователь', 'user', { width: '10rem' }), + makeTextColumn('Пользователь', 'user', null, null, null, { width: '10rem' }), ] const filterOptions = [ @@ -60,10 +65,11 @@ const Messages = memo(() => { const [showLoader, setShowLoader] = useState(false) const idWell = useIdWell() - const navigate = useNavigate() const onChangeSearchString = useCallback((message) => setSearchString(message.length > 2 ? message : ''), []) + const columns = useMemo(() => makeMessageColumns(idWell), [idWell]) + useEffect(() => { invokeWebApiWrapperAsync( async () => { @@ -89,10 +95,6 @@ const Messages = memo(() => { ) }, [idWell, page, categories, range, searchString]) - const onMessageRow = useCallback((record) => ({ - onClick: () => navigate(`/well/${idWell}/telemetry/archive?range=1800&start=${moment(record?.date).subtract(3, 'minute').local().toISOString()}`) - }), [idWell, navigate]) - return ( <>
@@ -128,7 +130,6 @@ const Messages = memo(() => { }} rowKey={(record) => record.id} tableName={'messages'} - onRow={onMessageRow} /> diff --git a/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx b/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx index 4537ea7..ce329e2 100755 --- a/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx +++ b/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx @@ -1,5 +1,5 @@ import { Table } from 'antd' -import { useState, useEffect, useCallback, memo } from 'react' +import { useState, useEffect, useCallback, memo, useMemo } from 'react' import { useIdWell } from '@asb/context' import LoaderPortal from '@components/LoaderPortal' @@ -7,7 +7,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory' import { Subscribe } from '@services/signalr' import { MessageService } from '@api' -import { columns } from '../Messages' +import { makeMessageColumns } from '../Messages' import '@styles/message.css' @@ -19,8 +19,10 @@ export const ActiveMessagesOnline = memo(() => { const handleReceiveMessages = useCallback((messages) => { if (messages) - setMessages(messages.items.splice(0, 4)) + setMessages(messages.items.splice(0, 4)) }, []) + + const columns = useMemo(() => makeMessageColumns(idWell), [idWell]) useEffect(() => { invokeWebApiWrapperAsync( diff --git a/src/styles/message.css b/src/styles/message.css index cd0e395..39f99d6 100755 --- a/src/styles/message.css +++ b/src/styles/message.css @@ -40,5 +40,9 @@ td.ant-table-column-sort { color: black; - background-color: rgb(221, 247, 221); + background-color: #fafafa; +} + +.ant-table-tbody > tr > td.ant-table-cell-row-hover { + color: black; }