Добавлены оповещения сплывающими окнами. Изменены некоторые стили

2021-05-27 12:53:42 +05:00 · 2021-05-27 12:53:42 +05:00 · 6f12d57805
commit 6f12d57805
parent fa45a27a4c
18 changed files with 263 additions and 212 deletions
--- a/src/components/ChartTimeOnlineFooter.jsx
+++ b/src/components/ChartTimeOnlineFooter.jsx
@ -32,7 +32,7 @@ export const ChartTimeOnlineFooter = (props) =>{

  if(popContent)
    spField = <Popover content={popContent}>
-      <div style={{display:"flex"}}>
+      <div className="menu_title">
        <ControlOutlined className='display_label'/>
        {spField}
      </div>
--- a/src/components/ModeDisplay.jsx
+++ b/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>)
 }
--- a/src/components/Notification.jsx
+++ b/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,
+    })
+
+}
--- a/src/components/Well.jsx
+++ b/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>
--- a/src/components/WellTreeSelector.jsx
+++ b/src/components/WellTreeSelector.jsx
@ -44,7 +44,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) {
--- a/src/pages/Analysis.jsx
+++ b/src/pages/Analysis.jsx
@ -1,3 +1,7 @@
-export default function Analysis(props){
-    return(<h2>Анализ</h2>)
-  }
+export default function Analysis(props) {
+  return (
+    <div className="menu_title">
+      <h2>Анализ</h2>
+    </div>
+  )
+}
--- a/src/pages/Archive.jsx
+++ b/src/pages/Archive.jsx
@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import {useState, useEffect} from 'react'
 import {
  Button,
  DatePicker,
@ -7,19 +7,19 @@ import {
  Row,
  Col,
 } from 'antd'
-import { useParams } from 'react-router-dom'
-import { Subscribe } from '../services/signalr'
-import { DataService } from '../services/api'
+import {useParams} from 'react-router-dom'
+import {Subscribe} from '../services/signalr'
+import {DataService} from '../services/api'
 import 'moment/locale/ru'
 import locale from 'antd/lib/locale/ru_RU'
-import { ChartTimeArchive } from '../components/charts/ChartTimeArchive'
-import { Display } from '../components/Display'
-import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter'
-import { UserOfWells } from '../components/UserOfWells'
+import {ChartTimeArchive} from '../components/charts/ChartTimeArchive'
+import {Display} from '../components/Display'
+import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
+import {UserOfWells} from '../components/UserOfWells'


-const { RangePicker } = DatePicker;
-const { Option } = Select;
+const {RangePicker} = DatePicker;
+const {Option} = Select;

 // Выбор периода времени
 const PeriodOfTime = () => {
@ -29,7 +29,7 @@ const PeriodOfTime = () => {
    <ConfigProvider locale={locale}>
      <RangePicker
        showTime
-        style={{ margin: '5px 5px', }}
+        style={{margin: '5px 5px',}}
      />
    </ConfigProvider>
  )
@ -38,40 +38,41 @@ const PeriodOfTime = () => {
 // Выбор "перьев" для графиков - перенести в шапку графика
 const SelectDataCharts = () => {
  const linesCollection = [
-    { label: "Глубина забоя", xAccessorName: "wellDepth", color: '#a0a' },
-    { label: "Положение инструмента", xAccessorName: "bitDepth", color: '#a0a' },
-    { label: "Высота талевого блока", xAccessorName: "blockPosition", color: '#a0a' },
-    { label: "Талевый блок. Мин положение", xAccessorName: "blockPositionMin", color: '#a0a' },
-    { label: "Талевый блок. Макс положение", xAccessorName: "blockPositionMax", color: '#a0a' },
-    { label: "Скорость талевого блока", xAccessorName: "blockSpeed", color: '#a0a' },
-    { label: "Скорости талевого блока. Задание", xAccessorName: "blockSpeedSp", color: '#a0a' },
-    { label: "Талевый блок. Задание скорости для роторного бурения", xAccessorName: "blockSpeedSpRotor", color: '#a0a' },
-    { label: "Талевый блок. Задание скорости для режима слайда", xAccessorName: "blockSpeedSpSlide", color: '#a0a' },
-    { label: "Талевый блок. Задание скорости для проработки", xAccessorName: "blockSpeedSpDevelop", color: '#a0a' },
-    { label: "Давление", xAccessorName: "pressure", color: '#a0a' },
-    { label: "Давление. Холостой ход", xAccessorName: "pressureIdle", color: '#a0a' },
-    { label: "Давление. Задание", xAccessorName: "pressureSp", color: '#a0a' },
-    { label: "Давление. Задание для роторного бурения", xAccessorName: "pressureSpRotor", color: '#a0a' },
-    { label: "Давление. Задание для режима слайда", xAccessorName: "pressureSpSlide", color: '#a0a' },
-    { label: "Давление. Задание для проработки", xAccessorName: "pressureSpDevelop", color: '#a0a' },
-    { label: "Давление дифф. Аварийное макс.", xAccessorName: "pressureDeltaLimitMax", color: '#a0a' },
-    { label: "Осевая нагрузка", xAccessorName: "axialLoad", color: '#a0a' },
-    { label: "Осевая нагрузка. Задание", xAccessorName: "axialLoadSp", color: '#a0a' },
-    { label: "Осевая нагрузка. Аварийная макс.", xAccessorName: "axialLoadLimitMax", color: '#a0a' },
-    { label: "Вес на крюке", xAccessorName: "hookWeight", color: '#a0a' },
-    { label: "Вес на крюке. Холостой ход", xAccessorName: "hookWeightIdle", color: '#a0a' },
-    { label: "Вес на крюке. Посадка", xAccessorName: "hookWeightLimitMin", color: '#a0a' },
-    { label: "Вес на крюке. Затяжка", xAccessorName: "hookWeightLimitMax", color: '#a0a' },
-    { label: "Момент на роторе", xAccessorName: "rotorTorque", color: '#a0a' },
-    { label: "Момент на роторе. Холостой ход", xAccessorName: "rotorTorqueIdle", color: '#a0a' },
-    { label: "Момент на роторе. Задание", xAccessorName: "rotorTorqueSp", color: '#a0a' },
-    { label: "Момент на роторе. Аварийный макс.", xAccessorName: "rotorTorqueLimitMax", color: '#a0a' },
-    { label: "Обороты ротора", xAccessorName: "rotorSpeed", color: '#a0a' },
-    { label: "Расход", xAccessorName: "flow", color: '#a0a' },
-    { label: "Расход. Холостой ход", xAccessorName: "flowIdle", color: '#a0a' },
-    { label: "Расход. Аварийный макс.", xAccessorName: "flowDeltaLimitMax", color: '#a0a' },
+    {label: "Глубина забоя", xAccessorName: "wellDepth", color: '#a0a'},
+    {label: "Положение инструмента", xAccessorName: "bitDepth", color: '#a0a'},
+    {label: "Высота талевого блока", xAccessorName: "blockPosition", color: '#a0a'},
+    {label: "Талевый блок. Мин положение", xAccessorName: "blockPositionMin", color: '#a0a'},
+    {label: "Талевый блок. Макс положение", xAccessorName: "blockPositionMax", color: '#a0a'},
+    {label: "Скорость талевого блока", xAccessorName: "blockSpeed", color: '#a0a'},
+    {label: "Скорости талевого блока. Задание", xAccessorName: "blockSpeedSp", color: '#a0a'},
+    {label: "Талевый блок. Задание скорости для роторного бурения", xAccessorName: "blockSpeedSpRotor", color: '#a0a'},
+    {label: "Талевый блок. Задание скорости для режима слайда", xAccessorName: "blockSpeedSpSlide", color: '#a0a'},
+    {label: "Талевый блок. Задание скорости для проработки", xAccessorName: "blockSpeedSpDevelop", color: '#a0a'},
+    {label: "Давление", xAccessorName: "pressure", color: '#a0a'},
+    {label: "Давление. Холостой ход", xAccessorName: "pressureIdle", color: '#a0a'},
+    {label: "Давление. Задание", xAccessorName: "pressureSp", color: '#a0a'},
+    {label: "Давление. Задание для роторного бурения", xAccessorName: "pressureSpRotor", color: '#a0a'},
+    {label: "Давление. Задание для режима слайда", xAccessorName: "pressureSpSlide", color: '#a0a'},
+    {label: "Давление. Задание для проработки", xAccessorName: "pressureSpDevelop", color: '#a0a'},
+    {label: "Давление дифф. Аварийное макс.", xAccessorName: "pressureDeltaLimitMax", color: '#a0a'},
+    {label: "Осевая нагрузка", xAccessorName: "axialLoad", color: '#a0a'},
+    {label: "Осевая нагрузка. Задание", xAccessorName: "axialLoadSp", color: '#a0a'},
+    {label: "Осевая нагрузка. Аварийная макс.", xAccessorName: "axialLoadLimitMax", color: '#a0a'},
+    {label: "Вес на крюке", xAccessorName: "hookWeight", color: '#a0a'},
+    {label: "Вес на крюке. Холостой ход", xAccessorName: "hookWeightIdle", color: '#a0a'},
+    {label: "Вес на крюке. Посадка", xAccessorName: "hookWeightLimitMin", color: '#a0a'},
+    {label: "Вес на крюке. Затяжка", xAccessorName: "hookWeightLimitMax", color: '#a0a'},
+    {label: "Момент на роторе", xAccessorName: "rotorTorque", color: '#a0a'},
+    {label: "Момент на роторе. Холостой ход", xAccessorName: "rotorTorqueIdle", color: '#a0a'},
+    {label: "Момент на роторе. Задание", xAccessorName: "rotorTorqueSp", color: '#a0a'},
+    {label: "Момент на роторе. Аварийный макс.", xAccessorName: "rotorTorqueLimitMax", color: '#a0a'},
+    {label: "Обороты ротора", xAccessorName: "rotorSpeed", color: '#a0a'},
+    {label: "Расход", xAccessorName: "flow", color: '#a0a'},
+    {label: "Расход. Холостой ход", xAccessorName: "flowIdle", color: '#a0a'},
+    {label: "Расход. Аварийный макс.", xAccessorName: "flowDeltaLimitMax", color: '#a0a'},
  ]
  const children = linesCollection.map((line) => (<Option key={line.xAccessorName}>{line.label}</Option>))
+
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
@ -80,7 +81,7 @@ const SelectDataCharts = () => {
    <Select
      mode="multiple"
      allowClear
-      style={{ width: '50%' }}
+      style={{width: '50%'}}
      placeholder="Выберите значения"
      defaultValue={["wellDepth"]}
      onChange={handleChange}
@ -90,7 +91,7 @@ const SelectDataCharts = () => {
  )
 }

-const Column = ({ lineGroup, data, interval }) => {
+const Column = ({lineGroup, data, interval}) => {
  let lines = [lineGroup.linePv]

  if (lineGroup.lineSp)
@ -108,12 +109,12 @@ const Column = ({ lineGroup, data, interval }) => {
      <Display
        label={lineGroup.label}
        value={pv}
-        suffix={lineGroup.linePv?.units} />
+        suffix={lineGroup.linePv?.units}/>
      <ChartTimeArchive
        data={data}
        yDisplay={lineGroup.yDisplay}
        lines={lines}
-        interval={interval} />
+        interval={interval}/>
      <ChartTimeOnlineFooter
        data={dataLast}
        {...lineGroup} />
@ -123,7 +124,7 @@ const Column = ({ lineGroup, data, interval }) => {
 const paramsGroups = []

 export default function Archive(props) {
-  let { id } = useParams();
+  let {id} = useParams();
  const [saubData, setSaubData] = useState([])
  const [chartInterval, setChartInterval] = useState(600)

@ -146,23 +147,20 @@ export default function Archive(props) {

  const colSpan = 24 / (paramsGroups.length)

-  return (<>
-    <div style={{ display: 'flex' }}>
+  return (<div className="content-sheet">
+    <div className="menu_title">
      <h2>Архив</h2>
-      <span style={{ flexGrow: 10 }}></span>
-      <UserOfWells data={saubData} />
+      <span style={{flexGrow: 10}}></span>
+      <UserOfWells data={saubData}/>
    </div>
-    <hr />
+    <hr/>
+    <div className="content-sheet">
      <Button type="primary" style={{
        borderRadius: '5px',
        font: 'bold',
        textAlign: 'center',
        margin: '5px 5px',
      }}>Добавить график</Button>
-    <PeriodOfTime />
-    <SelectDataCharts />
-    <Row style={{ marginBottom: '1rem' }}>
-      <Col>
      Интервал:&nbsp;
      <Select defaultValue="600" onChange={setChartInterval}>
        <Option value='600'>10 минут</Option>
@ -171,17 +169,18 @@ export default function Archive(props) {
        <Option value='21600'>6 час</Option>
        <Option value='86400'>1 день</Option>
      </Select>
-      </Col>
-    </Row>
+      <SelectDataCharts/>
+      <PeriodOfTime/>
      <Row>
        <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>
      </Row>
-  </>)
+    </div>
+  </div>)
 }
--- a/src/pages/Files.jsx
+++ b/src/pages/Files.jsx
@ -1,3 +1,7 @@
 export default function Files(props) {
-  return (<h2>Файлы</h2>)
+  return (
+    <div className="menu_title">
+      <h2>Файлы</h2>
+    </div>
+  )
 }
--- a/src/pages/Header.jsx
+++ b/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>
--- a/src/pages/Main.jsx
+++ b/src/pages/Main.jsx
@ -1,20 +1,19 @@
-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";
+import Notification from "../components/Notification";

-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"
-                 style={{ marginTop: '0',
-                          paddingTop: '0'}}>
+        <Content className="site-layout-background sheet well_menu">
          <Switch>
            <Route path="/well/:id/">
              <Well/>
@ -29,5 +28,5 @@ export default function Main(){
        </Content>
      </Layout>
    </Content>
-  );
+  )
 }
--- a/src/pages/Messages.jsx
+++ b/src/pages/Messages.jsx
@ -1,18 +1,19 @@
-import {  Table } from 'antd';
-import { MessageService } from '../services/api'
-import { useState, useEffect } from 'react'
-import { useParams } from 'react-router-dom'
-import { Subscribe } from '../services/signalr'
+import {Table} from 'antd';
+import {MessageService} from '../services/api'
+import {useState, useEffect} from 'react'
+import {useParams} from 'react-router-dom'
+import {Subscribe} from '../services/signalr'
 import Loader from '../components/Loader'
 import moment from 'moment';
 import '../styles/message.css'
+import Notification from '../components/Notification'


 // Словарь категорий для строк таблицы
 const categoryDictionary = {
-  1: {title:'Авария'},
-  2: {title:'Предупреждение'},
-  3: {title:'Информация'},
+  1: {title: 'Авария'},
+  2: {title: 'Предупреждение'},
+  3: {title: 'Информация'},
 }

 // Конфигурация таблицы
@ -48,8 +49,8 @@ const columns = [
 ];

 // Данные для таблицы
-export default function Messages(props) {
-  let { id } = useParams()
+export default function Messages() {
+  let {id} = useParams()
  const [messages, setMessages] = useState([])
  const [loader] = useState(false)

@ -62,7 +63,11 @@ 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()
@ -72,16 +77,16 @@ export default function Messages(props) {
  return (
    <>
      <h2>Сообщения</h2>
-    <hr />
+      <hr/>
      <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: 28}}
        rowKey={(record) => record.id}
      />
-    {loader && <Loader />}
+      {loader && <Loader/>}
    </>
  )
 }
--- a/src/pages/Report.jsx
+++ b/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={{
-        display: 'flex',
-        alignItems: 'center',
-        padding: '20px',
-        borderRadius: '5px'
-      }}>Получить рапорт</Button>
+      <Button type="primary" className="submit_button">
+        Получить рапорт
+      </Button>
    </div>
    
  </>
--- a/src/pages/TelemetryView.jsx
+++ b/src/pages/TelemetryView.jsx
@ -1,20 +1,19 @@
-import { useState, useEffect } from 'react';
-import { Row, Col, Select, } from 'antd'
+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 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 notify from '../components/Notification'
 import moment from 'moment'
-import { Table } from 'antd';
-import { MessageService } from '../services/api'
-import Loader from '../components/Loader'
-
-import { useParams } from 'react-router-dom'
 import { Subscribe } from '../services/signalr'
-import { DataService } from '../services/api'
-import '../styles/message_telemetry.css'
+import { DataService, MessageService } from '../services/api'
+import '../styles/message.css'
+import Notification from "../components/Notification";

 const { Option } = Select

@ -165,13 +164,20 @@ export default function TelemetryView(props) {
  }

  useEffect(() => {
+    try {
      DataService.getData(id)
        .then(handleReceiveDataSaub)
-      .catch(error => console.error(error))
+    } catch (ex) {
+      Notification(`Не удалось загрузить данные по скважине ${id}`, 'error')
+    }

+    try {
      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)
@ -184,11 +190,11 @@ export default function TelemetryView(props) {
  const colSpan = 24 / (paramsGroups.length)

  return (<div>
-    {/* <div>Well id: {id}; points count: {saubData.length}</div> */}
    <Row style={{ marginBottom: '1rem' }}>
      <Col>
        <ModeDisplay data={saubData} />
      </Col>
+      <span style={{ flexGrow: 0.1 }}>&nbsp;</span>
      <Col>
        Интервал:&nbsp;
        <Select defaultValue="600" onChange={setChartInterval}>
@ -199,7 +205,7 @@ 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>
@ -221,7 +227,8 @@ 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}
--- a/src/services/signalr/index.ts
+++ b/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;
--- a/src/styles/App.less
+++ b/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;
-  justify-content: baseline;
+  text-align: start;
+  justify-content: start;
+  margin-left: 100px;
 }

 .header button{
@ -53,9 +59,8 @@
 }

 .sheet{
-  padding: 24px;
-  margin: 8px;
-  min-height: 280;
+  padding: 5px 24px;
+  min-height: 280px;
 }

 .site-layout-background {
@ -71,14 +76,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 +112,29 @@
 .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 {
+  display: flex;
+}
+
+.submit_button {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-radius: 5px;
+}
+
+.well_menu {
+  margin-top: 0;
+  padding-top: 0;
+  height: 100%;
+  border-right: 0;
+}
+
+tr.table_row_size {
+  height: 10px;
+}
--- a/src/styles/archive_style.css
+++ b/src/styles/archive_style.css
@ -0,0 +1,3 @@
+.content-sheet {
+    display: inline-flex;
+}
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -1,3 +1,7 @@
+::-webkit-scrollbar {
+  width: 0;
+}
+
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
--- a/src/styles/message.css
+++ b/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:hover {
+.event_message_3 {
  color: #c0c0c0;
  background: #505060;
-  height: 1px;
 }

 td.ant-table-column-sort {