Merge ArchiveVie branch

package.json

@@ -11,7 +11,7 @@
     "antd": "^4.15.0",
     "chart.js": "^3.0.2",
     "chartjs-adapter-date-fns": "^1.1.0-beta.1",
-    "chartjs-plugin-datalabels": "^2.0.0-beta.1",
+    "chartjs-plugin-datalabels": "^2.0.0-rc.1",
     "craco-less": "^1.17.1",
     "date-fns": "^2.20.0",
     "moment": "^2.29.1",

src/components/ChartTimeOnlineFooter.jsx

@@ -32,7 +32,7 @@ export const ChartTimeOnlineFooter = (props) =>{
 
   if(popContent)
     spField = <Popover content={popContent}>
-      <div style={{display:"flex"}}>
+      <div className="chart-footer">
         <ControlOutlined className='display_label'/>
         {spField}
       </div>

src/components/Display.jsx

@@ -1,11 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons'
 
 export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
   const [oldVal, setOldVal] = useState(NaN)
   const [val, setVal] = useState('---')
-
+  const arrowRef = useRef(null);
-  let arrow = null
 
   useEffect(()=>{
     if(value)
@@ -14,16 +13,16 @@ export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
         if (isArrowVisible)
         {
           if (value > oldVal)
-            arrow = <CaretUpOutlined style={{color:"red"}} />
+            arrowRef.current = (<CaretUpOutlined style={{color:"red"}} />)
           else if (value < oldVal)
-            arrow = <CaretDownOutlined style={{color:"red"}} />
+            arrowRef.current = (<CaretDownOutlined style={{color:"red"}} />)
           setOldVal(value)
         }
       } else
       setVal(value)
   },[value])
 
-  return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
+  return(<span className='display_value'>{prefix} {val} {suffix}{arrowRef.current}</span>)
 }
 
 export const Display = (props)=>{

src/components/ModeDisplay.jsx

@@ -20,8 +20,8 @@ export const ModeDisplay = (props)=>{
       value = modeNames[index] ?? index
   }
 
-  return(<>
+  return(<div className="display_header">
     <span className="display_label">Режим:</span>
     <span className="display_value">{value}</span>
-  </>)
+  </div>)
 }

src/components/Notification.jsx

@@ -0,0 +1,24 @@
+import { notification } from 'antd';
+
+const typeDictionary = {
+  'error': 'Ошибка',
+  'warning': 'Предупрежение',
+  'info': 'Информация'
+
+}
+/**
+ * Вызов оповещений всплывающим окошком.
+ * @param body string или ReactNode
+ * @param type для параметра типа. Допустимые значение 'error', 'warning', 'info'
+ */
+export default function Notification(body, type='info'){
+
+    notification.info({
+      description: body,
+      message: typeDictionary[type],
+      type,
+      placement: "bottomRight",
+      duration: 10,
+    })
+
+}

src/components/Well.jsx

@@ -18,7 +18,7 @@ export default function Well() {
       <Menu
         mode="horizontal"
         selectable={false}
-        style={{height: '100%', borderRight: 0}}
+        className="well_menu"
       >
         <Menu.Item key="1" icon={<FundViewOutlined/>}>
           <Link to='telemetry'>Мониторинг</Link>
@@ -41,7 +41,7 @@ export default function Well() {
       </Menu>
 
       <Layout>
-        <Content className="site-layout-background sheet">
+        <Content className="site-layout-background">
           <Switch>
             <Route path="/well/:id/file">
               <Files/>

src/components/WellTreeSelector.jsx

@@ -46,7 +46,6 @@ export default function WellTreeSelector(props) {
     try {
       let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
       let wellsTree = groupBy(newWells, 'deposit', 'cluster', 'caption')
-      // setWells( newWells )
       setWellsTree(wellsTree)
     }
     catch (e) {

src/components/charts/ChartTimeArchive.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState} from 'react';
+import {ChartTimeBase, ChartTimeData,  ChartTimeDataParams} from './ChartTimeBase'
+
+const GetRandomColor = () => "#" + Math.floor(Math.random()*16777215).toString(16)
+
+
+function GetOrCreateDatasetByLineConfig(data: ChartTimeData, lineConfig: LineConfig) {
+  let dataset = data?.datasets.find(d => d.label === lineConfig.label)
+  if (!dataset) {
+    let color = lineConfig.borderColor
+      ?? lineConfig.backgroundColor
+      ?? lineConfig.color
+      ?? GetRandomColor()
+
+    dataset = {
+      label: lineConfig.label,
+      data: [],
+      backgroundColor: lineConfig.backgroundColor ?? color,
+      borderColor: lineConfig.borderColor ?? color,
+      borderWidth: lineConfig.borderWidth ?? 1,
+      borderDash: lineConfig.dash ?? [],
+    }
+    data.datasets.push(dataset);
+  }
+  return dataset
+}
+
+export type LineConfig = {
+  type?: string
+  label: string
+  units?: string
+  xAccessorName: string
+  yAccessorName: string
+  color?: string
+  borderColor?: string
+  backgroundColor?: string
+  borderWidth?: number
+  dash?: number[]
+  labels?: any[]
+}
+
+export type ChartTimeProps = {
+  label?: string,
+  yDisplay: Boolean,
+  lines: LineConfig[],
+  data: any[],
+  interval: number,
+}
+
+export const ChartTimeArchive: React.FC<ChartTimeProps> = (props) => {
+  const [dataParams, setDataParams] = useState<ChartTimeDataParams>({ data: { datasets: [] }, yStart: new Date(), })
+
+  useEffect(() => {
+    if ((!props?.lines)
+      || (!props?.data)
+      || (props.lines.length === 0)
+      || (props.data.length === 0))
+      return
+
+    setDataParams((preDataParams) => {
+      props.lines.forEach(lineCfg => {
+        let dataset = GetOrCreateDatasetByLineConfig(preDataParams.data, lineCfg)
+        let points = props.data.map(dataItem => {
+          return {
+            x: dataItem[lineCfg.xAccessorName],
+            label:0,
+            y: new Date(dataItem[lineCfg.yAccessorName])
+          }
+        })
+        dataset.data = points;
+      });
+
+      preDataParams.yStart = new Date()
+      preDataParams.yStart.setSeconds(preDataParams.yStart.getSeconds() - props.interval)
+      preDataParams.yInterval = props.interval
+      preDataParams.displayLabels = props.yDisplay
+      return preDataParams
+    })
+
+  }, [props.data, props.lines, props.interval, props.yDisplay])
+
+  return (<ChartTimeBase dataParams={dataParams} />)
+}

src/components/charts/ChartTimeBase.tsx

@@ -11,8 +11,9 @@ import {
   ChartTypeRegistry, 
   ChartOptions} from 'chart.js'
 import 'chartjs-adapter-date-fns';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
-Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
+Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels );
 
 const defaultOptions = {
   //maintainAspectRatio: false,
@@ -63,15 +64,11 @@ const defaultOptions = {
       hoverRadius:5,
     },
   },
-  plugins:{
-    legend:{
-      display: false,
-    }
-  }
 }
 
 export type ChartTimeData = ChartData<keyof ChartTypeRegistry, {
   x: number;
+  label: number;
   y: Date;
 }[], unknown>
 
@@ -84,7 +81,8 @@ export type ChartTimeDataParams = {
 
 export type ChartTimeBaseProps = {
   dataParams: ChartTimeDataParams,
-  options?: ChartOptions<keyof ChartTypeRegistry>,
+  // TODO: Create good type for options
+  options?: ChartOptions<keyof ChartTypeRegistry> | any,
 }
 
 const timeUnitByInterval = (intervalSec:number):String =>{
@@ -111,6 +109,7 @@ export const ChartTimeBase: React.FC<ChartTimeBaseProps> = ({options, dataParams
 
       let newChart = new Chart(chartRef.current, {
         type: 'line',      
+        plugins: [ChartDataLabels],
         options: thisOptions,
         data: dataParams.data
       })

src/components/charts/ChartTimeOnline.tsx

@@ -19,6 +19,7 @@ function GetOrCreateDatasetByLineConfig  (data: ChartTimeData, lineConfig: LineC
       borderColor: lineConfig.borderColor ?? color,
       borderWidth: lineConfig.borderWidth ?? 1,
       borderDash: lineConfig.dash ?? [],
+      showLine: lineConfig.showLine,
     }
     data.datasets.push(dataset);
   }
@@ -37,6 +38,8 @@ export type LineConfig = {
   borderWidth?: number
   dash?:number[]
   labels?: any[]
+  showLine: boolean
+  xConstValue?: number|null
 }
 
 export type ChartTimeProps = {
@@ -64,7 +67,8 @@ export const ChartTimeOnline: React.FC<ChartTimeProps> = (props) => {
       props.lines.forEach(lineCfg => {
         let dataset = GetOrCreateDatasetByLineConfig(preDataParams.data, lineCfg)      
         let points = props.data.map(dataItem => {return{
-          x: dataItem[lineCfg.xAccessorName],
+          x: lineCfg.xConstValue ?? dataItem[lineCfg.xAccessorName],
+          label: dataItem[lineCfg.xAccessorName],
           y: new Date(dataItem[lineCfg.yAccessorName])}
         })
         //dataset.data = [ ...dataset.data, ...points,].slice(-1024)      
@@ -85,6 +89,31 @@ export const ChartTimeOnline: React.FC<ChartTimeProps> = (props) => {
 
   }, [ props.data, props.lines, props.interval, props.yDisplay])
 
-  return(<ChartTimeBase dataParams = {dataParams} />)
+  const chartPluginsOptions = {
+    plugins:{
+      legend:{
+        display: false,
+      },
+      datalabels: {
+        backgroundColor: 'transparent',
+        borderRadius: 4,
+        color: '#000B',
+        display: function(context:any) {
+          return context.dataset.label === 'wellDepth'
+            ? 'auto'
+            : false
+        },
+        formatter: function(value: any, context: any) {
+          return `${value.y.toLocaleTimeString()} ${value.label.toPrecision(4)}`
+        },
+        padding: 6,
+        align: 'left',
+        anchor: 'center',
+        clip: true
+      }
+    }
+  }
+
+  return(<ChartTimeBase dataParams = {dataParams} options = { chartPluginsOptions }  />)
 }
 

src/pages/Analysis.jsx

@@ -1,3 +1,11 @@
-export default function Analysis(props){
+// import {UserOfWells} from "../components/UserOfWells";
-    return(<h2>Анализ</h2>)
+
-  }
+export default function Analysis(props) {
+  return (
+    <div className="menu_title">
+      <h2>Анализ</h2>
+      {/*<UserOfWells data={saubData}/>*/}
+      <hr/>
+    </div>
+  )
+}

src/pages/Files.jsx

@@ -1,3 +1,7 @@
 export default function Files(props) {
-  return (<h2>Файлы</h2>)
+  return (
+    <div className="menu-title">
+      <h2>Файлы</h2>
+    </div>
+  )
 }

src/pages/Header.jsx

@@ -1,6 +1,5 @@
-import { useState } from 'react';
 import { Layout, Button } from 'antd'
-import { UserOutlined, MenuOutlined } from '@ant-design/icons'
+import { UserOutlined } from '@ant-design/icons'
 import logo from '../images/logo_32.png'
 import { Link } from "react-router-dom"
 import WellTreeSelector from '../components/WellTreeSelector'
@@ -8,7 +7,6 @@ import WellTreeSelector from '../components/WellTreeSelector'
 const { Header } = Layout
 
 export default function PageHeader(props){
-  const [sidebarVisible, setSidebarVisible] = useState(true)
   const login = localStorage['login']
 
   let handleLogout = () => {
@@ -19,7 +17,6 @@ export default function PageHeader(props){
     return(
         <Layout>
             <Header className="header">
-                <Button icon={<MenuOutlined />} onClick={()=>setSidebarVisible(!sidebarVisible)}/>
                 <img src={logo} alt="АСБ" className="logo"/>
                 <WellTreeSelector />
                 <h1 className="title">Мониторинг</h1>

src/pages/Main.jsx

@@ -1,20 +1,18 @@
-import { Layout, } from 'antd'
+import {Layout} from 'antd'
 import Wells from './Wells'
 import PageHeader from './Header'
 import Well from "../components/Well";
 import {Redirect, Route, Switch} from "react-router-dom";
 
-const { Content } = Layout
+const {Content} = Layout
 
-export default function Main(){
+export default function Main() {
 
-  return(
+  return (
     <Content>
-      <PageHeader />
+      <PageHeader/>
       <Layout>
-        <Content className="site-layout-background sheet"
+        <Content className="site-layout-background sheet">
-                 style={{ marginTop: '0',
-                          paddingTop: '0'}}>
           <Switch>
             <Route path="/well/:id/">
               <Well/>
@@ -29,5 +27,5 @@ export default function Main(){
         </Content>
       </Layout>
     </Content>
-  );
+  )
 }

src/pages/Messages.jsx

@@ -1,18 +1,22 @@
-import {  Table } from 'antd';
+import {Button, Table, Select} from 'antd';
-import { MessageService } from '../services/api'
+import {MessageService} from '../services/api'
-import { useState, useEffect } from 'react'
+import {useState, useEffect} from 'react'
-import { useParams } from 'react-router-dom'
+import {useParams} from 'react-router-dom'
-import { Subscribe } from '../services/signalr'
+import {Subscribe} from '../services/signalr'
 import Loader from '../components/Loader'
-import moment from 'moment';
+import moment from 'moment'
 import '../styles/message.css'
+import Notification from '../components/Notification'
+
+const {Option} = Select
+
 
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
-  1: {title:'Авария'},
+  1: {title: 'Авария'},
-  2: {title:'Предупреждение'},
+  2: {title: 'Предупреждение'},
-  3: {title:'Информация'},
+  3: {title: 'Информация'},
 }
 
 // Конфигурация таблицы
@@ -22,8 +26,6 @@ const columns = [
     key: 'date',
     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: 'Категория',
@@ -31,14 +33,16 @@ const columns = [
     dataIndex: 'categoryId',
     render: (_, item) => categoryDictionary[item.categoryId].title,
     style: (_, item) => categoryDictionary[item.categoryId].style,
-    sorter: (a, b) => a.categoryId - b.categoryId,
+    filters: [
-    sortDirections: ['descend', 'ascend'],
+      {text: 'Авария', value: '1'},
+      {text: 'Предупреждение', value: '2'},
+      {text: 'Информация', value: '3'},
+    ]
   },
   {
     title: 'Сообщение',
     key: 'message',
     dataIndex: 'message',
-    onFilter: (value, record) => record.name.indexOf(value) === 0,
   },
   {
     title: 'Пользователь',
@@ -47,12 +51,22 @@ const columns = [
   },
 ];
 
+// Опции для фильра
+
 // Данные для таблицы
-export default function Messages(props) {
+export default function Messages() {
-  let { id } = useParams()
+  let {id} = useParams()
   const [messages, setMessages] = useState([])
   const [loader] = useState(false)
 
+  const filterOptions = [
+    {label: 'Авария', value: 1},
+    {label: 'Предупреждение', value: 2},
+    {label: 'Информация', value: 3},
+  ]
+
+  const children = filterOptions.map((line) => (<Option key={line.value}>{line.label}</Option>))
+
   const handleReceiveMessages = (messages) => {
     if (messages) {
       setMessages(messages.items)
@@ -62,28 +76,51 @@ export default function Messages(props) {
   useEffect(() => {
     MessageService.getMessage(id)
       .then(handleReceiveMessages)
-      .catch(error => console.error(error))
+      .catch((ex) => {
+        Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
+        console.log(ex)
+      })
+
     let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
     return () => {
       unSubscribeMessagesHub()
     }
-  }, [id]);
+  }, [id])
 
   return (
     <>
       <h2>Сообщения</h2>
-    <hr />
+      <hr/>
+      <h3>Фильтр сообщений</h3>
+      <Select
+        mode="multiple"
+        allowClear
+        placeholder="Фильтр сообщений"
+        className="filter-selector"
+        // onChange={messagesFilter}
+      >
+        {children}
+      </Select>
+      <Button
+        type="primary"
+        className="submit-button"
+      >
+        Применть
+      </Button>
+      <Button
+        className="submit-button"
+      >
+        Обновить
+      </Button>
       <Table
         columns={columns}
         dataSource={messages}
-      rowClassName={(record) => `event_message_${record.categoryId}`}
+        rowClassName={(record) => `event_message_${record.categoryId} event_message`}
         size={'small'}
-      pagination={{ pageSize: 10 }}
+        pagination={{pageSize: 26}}
         rowKey={(record) => record.id}
       />
-    {loader && <Loader />}
+      {loader && <Loader/>}
     </>
   )
 }
-
-// TODO Стили для отсортированных страниц

src/pages/Report.jsx

@@ -1,4 +1,4 @@
-import React from "react";  // , { useState } 
+import React from "react";
 import {
   DatePicker,
   Radio,
@@ -37,8 +37,6 @@ const PeriodOfTime = () => {
   function disabledDate(current) {
     return current && current < moment().subtract(3, 'days');  // Наверно, не надо)
   }
-  // const [startDate, setStartDate] = useState(new Date());
-  
 
   return (
     <ConfigProvider locale={locale}
@@ -97,12 +95,9 @@ export default function Report(props) {
     <p>*Предполагаемое колличество страниц</p>
     <hr />
     <div>
-      <Button type="primary" style={{
+      <Button type="primary" className="submit_button">
-        display: 'flex',
+        Получить рапорт
-        alignItems: 'center',
+      </Button>
-        padding: '20px',
-        borderRadius: '5px'
-      }}>Получить рапорт</Button>
     </div>
     
   </>

src/pages/TelemetryView.jsx

@@ -1,89 +1,128 @@
-import { useState, useEffect } from 'react';
+import {useState, useEffect} from 'react'
-import { Row, Col, Select, } from 'antd'
+import {useParams} from 'react-router-dom'
-import { ChartTimeOnline } from '../components/charts/ChartTimeOnline'
+import {Row, Col, Select, Table} from 'antd'
-import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter'
+import {ChartTimeOnline} from '../components/charts/ChartTimeOnline'
-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 { Table } from 'antd';
-import { MessageService } from '../services/api'
 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 moment from 'moment'
+import {Subscribe} from '../services/signalr'
+import {DataService, MessageService} from '../services/api'
+import '../styles/message.css'
+import Notification from "../components/Notification";
 
-import { useParams } from 'react-router-dom'
+const {Option} = Select
-import { Subscribe } from '../services/signalr'
-import { DataService } from '../services/api'
-import '../styles/message_telemetry.css'
-
-const { Option } = Select
 
 const dash = [7, 3]
 
 const blockHeightGroup = {
   label: "Высота блока",
   yDisplay: false,
-  linePv: { label: "blockHeight", units: 'м', xAccessorName: "blockHeight", yAccessorName: "date", color: '#333' },
+  linePv: { label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333' },
+  lineOther: { label: "wellDepth", units: 'м', xAccessorName: "wellDepth", yAccessorName: "date", color: '#333', showLine: false, xConstValue:30 },
 }
 
 const blockSpeedGroup = {
   label: "Скорость блока",
   yDisplay: false,
-  linePv: { label: "blockSpeed", units: 'м/ч', xAccessorName: "blockSpeed", yAccessorName: "date", color: '#0a0' },
+  linePv: {label: "blockSpeed", units: 'м/ч', xAccessorName: "blockSpeed", yAccessorName: "date", color: '#0a0'},
-  lineSp: { label: "blockSpeedSp", units: 'м/ч', xAccessorName: "blockSpeedSp", 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' },
+  linePv: {label: "pressure", units: 'атм', xAccessorName: "pressure", yAccessorName: "date", color: '#c00'},
-  lineSp: { label: "pressureSp", units: 'атм', xAccessorName: "pressureSp", yAccessorName: "date", color: '#c00' },
+  lineSp: {label: "pressureSp", units: 'атм', xAccessorName: "pressureSp", yAccessorName: "date", color: '#c00'},
-  lineIdle: { label: "pressureIdle", units: 'атм', xAccessorName: "pressureIdle", 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' },
+  linePv: {label: "axialLoad", units: 'т', xAccessorName: "axialLoad", yAccessorName: "date", color: '#00a'},
-  lineSp: { label: "axialLoadSp", units: 'т', xAccessorName: "axialLoadSp", yAccessorName: "date", color: '#00a', dash },
+  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' },
+  linePv: {label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa'},
-  lineIdle: { label: "hookWeightIdle", units: 'т', xAccessorName: "hookWeightIdle", yAccessorName: "date", color: '#0aa', dash },
+  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' },
+  linePv: {label: "rotorTorque", units: 'кН·м', xAccessorName: "rotorTorque", yAccessorName: "date", color: '#a0a'},
-  lineSp: { label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a' },
+  lineSp: {label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a'},
-  lineIdle: { label: "rotorTorqueIdle", units: 'кН·м', xAccessorName: "rotorTorqueIdle", 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)
     lines.push(lineGroup.lineSp)
 
+  if (lineGroup.lineOther)
+    lines.push(lineGroup.lineOther)
+
   let dataLast = null
   let pv = null
   if (data?.length > 0) {
@@ -102,7 +141,7 @@ export const Column = ({ lineGroup, data, interval }) => {
         data={data}
         yDisplay={lineGroup.yDisplay}
         lines={lines}
-        interval={interval} />
+        interval={interval}/>
       <ChartTimeOnlineFooter
         data={dataLast}
         {...lineGroup} />
@@ -111,9 +150,9 @@ export const Column = ({ lineGroup, data, interval }) => {
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
-  1: { title: 'Авария' },
+  1: {title: 'Авария'},
-  2: { title: 'Предупреждение' },
+  2: {title: 'Предупреждение'},
-  3: { title: 'Информация' },
+  3: {title: 'Информация'},
 }
 
 // Конфигурация таблицы
@@ -145,7 +184,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([])
@@ -167,11 +206,17 @@ export default function TelemetryView(props) {
   useEffect(() => {
     DataService.getData(id)
       .then(handleReceiveDataSaub)
-      .catch(error => console.error(error))
+      .catch((ex) => {
+        Notification(`Не удалось загрузить данные по скважине "${id}"`, 'error')
+        console.log(ex)
+      })
 
     MessageService.getMessage(id)
       .then(handleReceiveMessages)
-      .catch(error => console.error(error))
+      .catch((ex) => {
+        Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
+        console.log(ex)
+      })
 
     let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
     let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
@@ -181,14 +226,20 @@ export default function TelemetryView(props) {
     }
   }, [id]);
 
+  useEffect(() => {
+    DataService.getData(id, null, chartInterval)
+      .then(handleReceiveDataSaub)
+      .catch(error => console.error(error))
+  }, [chartInterval]);
+
   const colSpan = 24 / (paramsGroups.length)
 
   return (<div>
-    {/* <div>Well id: {id}; points count: {saubData.length}</div> */}
+    <Row style={{marginBottom: '1rem'}}>
-    <Row style={{ marginBottom: '1rem' }}>
       <Col>
-        <ModeDisplay data={saubData} />
+        <ModeDisplay data={saubData}/>
       </Col>
+      <span style={{flexGrow: 0.1}}>&nbsp;</span>
       <Col>
         Интервал:&nbsp;
         <Select defaultValue="600" onChange={setChartInterval}>
@@ -199,20 +250,20 @@ export default function TelemetryView(props) {
           <Option value='86400'>1 день</Option>
         </Select>
       </Col>
-      <span style={{ flexGrow: 1 }}></span>
+      <span style={{flexGrow: 1}}>&nbsp;</span>
       <Col>
         <UserOfWells data={saubData}/>
       </Col>
     </Row>
     <Row>
-      <Col span={2} >
+      <Col span={2}>
-        <CustomColumn data={saubData} />
+        <CustomColumn data={saubData}/>
       </Col>
       <Col span={24 - 2}>
         <Row>
           {paramsGroups.map(group =>
             <Col span={colSpan} className='border_small' key={group.label}>
-              <Column data={saubData} lineGroup={group} interval={chartInterval} />
+              <Column data={saubData} lineGroup={group} interval={chartInterval}/>
             </Col>)}
         </Row>
       </Col>
@@ -221,11 +272,12 @@ export default function TelemetryView(props) {
       showHeader={false}
       columns={columns}
       dataSource={messages}
-       rowClassName={(record) => `event_message_${record.categoryId}`}
+      rowClassName={(record) => `event_message_${record.categoryId} event_message`}
+      className={'message_table'}
       size={'small'}
       pagination={false}
       rowKey={(record) => record.id}
     />
-    {loader && <Loader />}
+    {loader && <Loader/>}
   </div>)
 }

src/services/signalr/index.ts

@@ -5,7 +5,7 @@ import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
 
 const ConnectionOptions = { 
   accessTokenFactory: () => localStorage['token'],
-  //transport:1,
+  transport:1,
 }
 
 const Connection = new HubConnectionBuilder()
@@ -15,16 +15,6 @@ const Connection = new HubConnectionBuilder()
 
 let connectionPromise: Promise<void>
 
-// const GetConnectionAsync = async () => {
-//   try {
-//     await Connection.start();
-//     console.log(Connection.state);
-//   } catch (err) {
-//     console.log(err);
-//   }
-// }
-
-
 const GetConnectionAsync = async () => {
     if (Connection.state === HubConnectionState.Disconnected)
       connectionPromise = Connection.start()
@@ -35,32 +25,6 @@ const GetConnectionAsync = async () => {
     return Connection
   }
 
-
-// const GetConnectionAsync = async () => {
-//   if (Connection.state === HubConnectionState.Disconnected)
-//     connectionPromise = Connection.start()
-
-//   if (Connection.state !== HubConnectionState.Connected)
-//     await connectionPromise
-
-//   return Connection
-// }
-
-// const GetConnectionAsync = async ()=>{
-//   if(Connection.state === HubConnectionState.Disconnected)
-//     await Connection.start()
-
-//   if(Connection.state === HubConnectionState.Connecting)
-//     await Connection.onreconnected
-
-//   // if(Connection.state === HubConnectionState.Disconnecting)
-//   //   await Connection.onclose
-
-//   // if(Connection.state === HubConnectionState.Connected)
-//     console.log(Connection.state)
-//     return Connection
-// }
-
 type handlerFunction = (...args: any[]) => void;
 
 type cleanFunction = (...args: any[]) => void;

src/styles/App.less

@@ -11,6 +11,11 @@
 
 #root, .app{min-height:100%;}
 
+html {
+  display: flex;
+  height: 100%;
+}
+
 .login_page{
   position: absolute;
   height:100%;
@@ -28,7 +33,7 @@
 .header {
   display: flex;
   align-items: center;
-  padding: 4px 24px;
+  //padding: 4px 24px;
 }
 
 .header .logo {
@@ -36,14 +41,15 @@
   border-radius: 32px;
   padding: 8px 24px;
   margin: 8px 10px;
-  box-shadow: #fff 2px;
+  box-shadow: 0 0 2px #fff;
 }
 
 .header .title{
   flex-grow: 1;
   color: #fff;
-  text-align: center;
+  text-align: start;
-  justify-content: baseline;
+  justify-content: start;
+  margin-left: 100px;
 }
 
 .header button{
@@ -53,9 +59,9 @@
 }
 
 .sheet{
-  padding: 24px;
+  padding: 5px 24px;
-  margin: 8px;
+  min-height: 280px;
-  min-height: 280;
+  margin: 0 15px;
 }
 
 .site-layout-background {
@@ -71,14 +77,26 @@
   flex-wrap: wrap;
   flex: auto;
 }
+.display_header {
+  font-size: 16px;
+  flex-grow: 1;
+  display: flex;
+}
 
 .display_label{
   font-size: 16px;
   color: rgb(70, 70, 70);
   text-align: left;
-  justify-content: baseline;
+  justify-content: center;
   margin: 1px 1rem 1px 1rem;
   flex: auto;
+  align-items: baseline;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  height: 30px;
 }
 
 .display_value{
@@ -95,7 +113,35 @@
 .display_small_value{
   color: rgb(50, 50, 50);
   text-align: right;
-  justify-content: baseline;
+  justify-content: center;
   margin: 1px 1rem 1px 1rem;
   flex: auto;
 }
+
+.menu-title,
+.chart-footer {
+  display: flex;
+}
+
+.submit-button {
+  border-radius: 5px;
+  font-weight: bold;
+  text-align: center;
+  margin: 0 5px 5px 0;
+}
+
+.well_menu {
+  margin-top: 0;
+  padding-top: 0;
+  height: 100%;
+  border-right: 0;
+}
+
+tr.table_row_size {
+  height: 10px;
+}
+
+.filter-selector {
+  width: 50%;
+  margin-right: 5px;
+}

src/styles/archive_style.css

@@ -0,0 +1,3 @@
+.content-sheet {
+    display: inline-flex;
+}

src/styles/index.css

@@ -1,3 +1,7 @@
+::-webkit-scrollbar {
+  width: 0;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/styles/message.css

@@ -1,5 +1,15 @@
-.event_message {
+/*.ant-table.ant-table-small .ant-table-tbody > tr > td {*/
+/*  padding: 0;*/
+/*}*/
+
+/*.ant-table-tbody > tr > td {*/
+/*  border-bottom: 0.5px;*/
+/*}*/
+
+.event_message > td {
   font-size: 14px;
+  padding: 1px !important;
+  border-bottom: 1px !important;
 }
 
 .event_message_off {
@@ -22,11 +32,9 @@
   background: gold;
 }
 
-.event_message_3,
+.event_message_3 {
-.event_message_3:hover {
   color: #c0c0c0;
   background: #505060;
-  height: 1px;
 }
 
 td.ant-table-column-sort {