Исправлено оповещение об ошибке в TelemetryView. Испарвлены стили.

2021-05-27 13:46:46 +05:00 · 2021-05-27 13:46:46 +05:00 · dd46525c89
commit dd46525c89
parent 6f12d57805
5 changed files with 107 additions and 69 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 className="menu_title">
+      <div className="chart-footer">
        <ControlOutlined className='display_label'/>
        {spField}
      </div>
--- a/src/components/Well.jsx
+++ b/src/components/Well.jsx
@ -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/>
--- a/src/pages/Main.jsx
+++ b/src/pages/Main.jsx
@ -13,7 +13,7 @@ export default function Main() {
    <Content>
      <PageHeader/>
      <Layout>
-        <Content className="site-layout-background sheet well_menu">
+        <Content className="site-layout-background sheet">
          <Switch>
            <Route path="/well/:id/">
              <Well/>
--- 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}/>
      <ChartTimeOnlineFooter
        data={dataLast}
        {...lineGroup} />
@ -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 (<div>
-    <Row style={{ marginBottom: '1rem' }}>
+    <Row style={{marginBottom: '1rem'}}>
      <Col>
-        <ModeDisplay data={saubData} />
+        <ModeDisplay data={saubData}/>
      </Col>
-      <span style={{ flexGrow: 0.1 }}>&nbsp;</span>
+      <span style={{flexGrow: 0.1}}>&nbsp;</span>
      <Col>
        Интервал:&nbsp;
        <Select defaultValue="600" onChange={setChartInterval}>
@ -205,34 +241,34 @@ export default function TelemetryView(props) {
          <Option value='86400'>1 день</Option>
        </Select>
      </Col>
-      <span style={{ flexGrow: 1 }}>&nbsp;</span>
+      <span style={{flexGrow: 1}}>&nbsp;</span>
      <Col>
        <UserOfWells data={saubData}/>
      </Col>
    </Row>
    <Row>
-      <Col span={2} >
-        <CustomColumn data={saubData} />
+      <Col span={2}>
+        <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>
    </Row>
    <Table
-       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 && <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 && <Loader/>}
  </div>)
 }
--- 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;
 }