Слияние с веткой smbo

package.json

@@ -14,9 +14,11 @@
     "chartjs-plugin-datalabels": "^2.0.0-rc.1",
     "chartjs-plugin-zoom": "^1.1.1",
     "craco-less": "^1.17.1",
+    "immutability-helper": "^3.1.1",
     "moment": "^2.29.1",
     "pigeon-maps": "^0.19.7",
     "react": "^17.0.2",
+    "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/components/Documents.jsx

@@ -13,8 +13,8 @@ const pageSize = 12
 const {RangePicker} = DatePicker;
 
 
-export default function Documents({selectedFileCategory}) {
+export default function Documents({idWell, selectedFileCategory}) {
-  let {id} = useParams()
+  // let {id} = useParams()
 
   const [page, setPage] = useState(1)
   const [range, setRange] = useState([])
@@ -32,7 +32,7 @@ export default function Documents({selectedFileCategory}) {
       try {
         setLoader(true)
 
-        await fetch(`/api/files/${id}/${row.id}`, {
+        await fetch(`/api/files/${idWell}/${row.id}`, {
           headers: {
             Authorization: 'Bearer ' + localStorage['token']
           }
@@ -101,7 +101,7 @@ export default function Documents({selectedFileCategory}) {
         }
 
         await FileService.getFilesInfo(
-            `${id}`,
+            `${idWell}`,
             (page - 1) * pageSize,
             pageSize,
             selectedFileCategory,
@@ -126,12 +126,12 @@ export default function Documents({selectedFileCategory}) {
             }
         )
       } catch (ex) {
-        notify(`Не удалось загрузить файлы по скважине "${id}"`, 'error')
+        notify(`Не удалось загрузить файлы по скважине "${idWell}"`, 'error')
         console.log(ex)
       }
     }
     GetDocuments()
-  }, [id, range, page, selectedFileCategory, isTableUpdating])
+  }, [idWell, range, page, selectedFileCategory, isTableUpdating])
 
   return (
     <div>

src/components/MessageFilter.jsx

@@ -0,0 +1,35 @@
+import React, { useMemo, useState } from "react";
+
+export default function MessageFilter() {
+  return (
+    <div className="App">
+      <List words={["apple", "potato"]} />
+    </div>
+  )
+}
+
+function List({ words }) {
+  const [searchString, setSearchString] = useState("")
+
+  function handleChange(e) {
+    setSearchString(e.target.value)
+  }
+
+  const filteredWords = useMemo(() => {
+    if (!searchString) {
+      return words
+    }
+    return words.filter((w) => w.includes(searchString))
+  }, [searchString, words])
+
+  return (
+    <>
+      <input type="text" onChange={handleChange} />
+      <ul>
+        {filteredWords.map((word, i) => (
+          <li key={i}>{word}</li>
+        ))}
+      </ul>
+    </>
+  )
+}

src/components/SludgeDiagram.jsx

@@ -0,0 +1,350 @@
+import { useState } from 'react';
+import {Table, Input, Form, Popconfirm, Typography } from 'antd'
+
+const originData = [
+  {
+    key: '1', probeNumber: '', probeExtractionDepth: '', sandstone: '', siltstone: '', argillit: '', brokenArgillit: '', coal: '', sand: '', clay: '',
+    camstone: '', cement: '', summary: '', drillingMud: '', sludge: '', maxSum: '', methan: '', ethan: '', propan: '', butan: '', pentan: ''
+  }
+]
+
+const EditableCell = ({
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  ...restProps
+}) => {
+  return (
+    <td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
+      <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
+        {editing ? (
+          <Form.Item
+            name={dataIndex}
+            style={{ margin: 0 }}
+            rules={[
+              {
+                required: true,
+                message: '',
+                pattern: /(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$/
+              },
+            ]}
+          >
+            <Input size="small" />
+          </Form.Item>
+        ) : (
+          children
+        )}
+      </div>
+    </td>
+  );
+};
+
+export function SludgeDiagram() {
+  const [form] = Form.useForm();
+  const [data, setData] = useState(originData);
+  const [editingKey, setEditingKey] = useState('');
+
+  const isEditing = (row) => row.key === editingKey;
+
+  const columns = [
+    {
+        title: 'N пробы',
+        key: 'probeNumber',
+        dataIndex: 'probeNumber',
+        align: 'center',
+        className: 'yellow-background',
+        editable: true
+    },
+    {
+        title: 'Глубина отбора пробы',
+        key: 'probeExtractionDepth',
+        dataIndex: 'probeExtractionDepth',
+        align: 'center',
+        className: 'yellow-background',
+        editable: true
+    },
+    {
+      title: 'Литология',
+      key: 'lithology',
+      dataIndex: 'lithology',
+      align: 'center',
+      className: 'yellow-background',
+      editable: true,
+      children: [
+        {
+          title: 'Песчаник (%)',
+          key: 'sandstone',
+          dataIndex: 'sandstone',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Алевролит (%)',
+          key: 'siltstone',
+          dataIndex: 'siltstone',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Аргиллит (%)',
+          key: 'argillit',
+          dataIndex: 'argillit',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Аргиллит бит. (%)',
+          key: 'brokenArgillit',
+          dataIndex: 'verticalDepth',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Уголь (%)',
+          key: 'coal',
+          dataIndex: 'coal',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Песок (%)',
+          key: 'sand',
+          dataIndex: 'sand',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Глина (%)',
+          key: 'clay',
+          dataIndex: 'clay',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Известняк (%)',
+          key: 'camstone',
+          dataIndex: 'camstone',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Цемент (%)',
+          key: 'cement',
+          dataIndex: 'cement',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        }
+      ]
+    },
+    
+    {
+      title: 'Краткое описание',
+      key: 'summary',
+      dataIndex: 'summary',
+      align: 'center',
+      className: 'yellow-background',
+      editable: true
+    },
+    {
+      title: 'ЛБА бурового раствора',
+      key: 'drillingMud',
+      dataIndex: 'drillingMud',
+      align: 'center',
+      className: 'lightgray-background',
+      editable: true
+    },
+    {
+      title: 'ЛБА (шлама)',
+      key: 'sludge',
+      dataIndex: 'sludge',
+      align: 'center',
+      className: 'lightorange-background',
+      editable: true
+    },
+    {
+      title: 'Газопоказания',
+      key: 'gasIndications',
+      dataIndex: 'gasIndications',
+      align: 'center',
+      className: 'yellow-background',
+      children: [
+        {
+          title: 'Сумма УВ мах. (абс%)',
+          key: 'maxSum',
+          dataIndex: 'maxSum',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С1 метан (отн%)',
+          key: 'methane',
+          dataIndex: 'depthPlanFactDifference',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С2 этан (отн%)',
+          key: 'ethan',
+          dataIndex: 'ethan',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С3 пропан (отн%)',
+          key: 'propane',
+          dataIndex: 'propane',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С4 бутан (отн%)',
+          key: 'butane',
+          dataIndex: 'butane',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С5 пентан (отн%)',
+          key: 'pentane',
+          dataIndex: 'pentane',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        }
+      ]
+    },
+    {
+      title: 'Мех. скорость',
+      key: 'mechanicalSpeed',
+      dataIndex: 'mechanicalSpeed',
+      align: 'center',
+      className: 'yellow-background',
+      editable: true
+    },
+    {
+      title: 'Предварительное заключение о насыщении по ГК',
+      key: 'preliminaryConclusion',
+      dataIndex: 'preliminaryConclusion',
+      align: 'center',
+      className: 'lightorange-background',
+      editable: true
+    },
+    {
+      title: 'Действие',
+      dataIndex: 'action',
+      align: 'center',
+      width: 150,
+      className: 'small-font',
+      render: (_, row) => {
+        const editable = isEditing(row);
+        return editable ? (
+          <span>
+            <a
+              href="javascript:;"
+              onClick={() => save(row.key)}
+              style={{ marginRight: 8 }}
+            >
+              Сохранить
+            </a>
+            <Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
+              <a>Отменить</a>
+            </Popconfirm>
+          </span>
+        ) : (
+          <Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
+            Редактировать
+          </Typography.Link>
+        );
+      },
+    }
+  ];
+
+  const mapColumns = (col) => {
+    if(col.children)
+      col.children = col.children.map(mapColumns)
+
+    if (!col.editable) {
+      return col;
+    }
+
+    return {
+      ...col,
+      onCell: (row) => ({
+        row,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: isEditing(row)
+      }),
+    };
+  }
+
+  const mergedColumns = columns.map(mapColumns);
+  
+  const edit = (row) => {
+    form.setFieldsValue({
+      ...row
+    });
+    setEditingKey(row.key);
+  };
+  
+  const cancel = () => {
+    setEditingKey('');
+  };
+  
+  const save = async (key) => {
+    try {
+      const row = await form.validateFields();
+      const newData = [...data];
+      const index = newData.findIndex((item) => key === item.key);
+  
+      if (index > -1) {
+        const item = newData[index];
+        newData.splice(index, 1, { ...item, ...row });
+        setData(newData);
+        setEditingKey('');
+      } else {
+        newData.push(row);
+        setData(newData);
+        setEditingKey('');
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+
+  return (<>
+    <Form form={form} component={false}>
+      <Table
+        components={{
+          body: {
+            cell: EditableCell,
+          },
+        }}
+        columns={mergedColumns}
+        dataSource={data}
+        size={'small'}
+        bordered={true}
+        pagination={false}
+      />
+    </Form>
+  </>
+  )
+}

src/components/SmboPlate.jsx

@@ -0,0 +1,65 @@
+import {Modal} from 'antd'
+import '../styles/smbo.css'
+
+import {useState} from "react";
+
+export const SquareIndicator = ({state}) =>{
+  let bgColor = "#AAA"
+  switch (state){
+    case 1:
+      bgColor = "#1B1"
+      break;
+    case 2:
+      bgColor = "#DD1"
+      break;
+    case 3:
+      bgColor = "#D11"
+      break;
+  }
+  return (<svg width="32" height="32" version="1.1" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
+    <rect x=".25" y=".25" width="12" height="12"
+          fill={bgColor}
+          stroke="#ececec" strokeLinejoin="round" strokeWidth=".51"/>
+  </svg>)
+}
+
+export default function SmboPlate({title, state, operatingTime, units, children, captionValue}){
+  const [isModalVisible, setIsModalVisible] = useState(false)
+
+
+  const openModal = () => {
+    setIsModalVisible(!!children)
+  }
+
+  const closeModal = () => {
+    setIsModalVisible(false)
+  }
+
+  const plates_smbo_equip = (
+    <div className="plate_container" onClick={openModal}>
+      <div className="plate_title">{title}</div>
+      <div className="plate_state"><SquareIndicator state={state}/></div>
+
+      <div className="plate_param_title">наработка: {captionValue}</div>
+      <div className="plate_param_value">{operatingTime}</div>
+      <div className="plate_param_units">{units??'ч'}</div>
+    </div>
+  )
+
+  return(<>
+    {plates_smbo_equip}
+
+    <Modal
+      title={title}
+      centered
+      visible={isModalVisible}
+      onOk={closeModal}
+      onCancel={closeModal}
+      width={800}
+    >
+      <div>
+        {children}
+      </div>
+    </Modal>
+  </>)
+}

src/components/modalWindows/EquipmentDetails.jsx

@@ -0,0 +1,37 @@
+import {Row, Col} from 'antd'
+import '../../styles/equipment_details.css'
+import Documents from '../Documents'
+
+export default function EquipmentDetails({id, equipmentTimers, equipmentSensors}) {
+  let stateOfEquipmentDetails = equipmentTimers.map(timer => {
+    return(
+      <p key={timer.label}>{timer.label}: <span className="right-text"><b>{timer.value} {timer.unit}</b></span></p>
+    )
+  })
+
+  let indicatorsOfEquipmentDetail = equipmentSensors.map(sensor => {
+    return(
+      <p key={sensor.label}>{sensor.label}: <span className="right-text"><b>{sensor.value} {sensor.unit}</b></span></p>
+    )
+  })
+
+  return (<>
+    <Row Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} align="middle">
+      <Col span={12}>
+        Тест 1
+      </Col>
+      <Col span={12}>
+        {stateOfEquipmentDetails}
+      </Col>
+    </Row>
+    <br/>
+    <Row Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} align="middle">
+      <Col span={12}>
+        <Documents idWell={id}/>
+      </Col>
+      <Col span={12}>
+        {indicatorsOfEquipmentDetail}
+      </Col>
+    </Row>
+  </>)
+}

src/concept/dragNDrop/Draggable.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {useDraggable} from '@dnd-kit/core'
+import {CSS} from '@dnd-kit/utilities'
+
+export function Draggable(props) {
+  const {attributes, listeners, setNodeRef, transform} = useDraggable({
+    id: 'draggable',
+  })
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  }
+
+  return (
+    <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
+      {props.children}
+    </button>
+  );
+}

src/concept/dragNDrop/Droppable.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {useDroppable} from '@dnd-kit/core';
+
+export function Droppable(props) {
+  const {isOver, setNodeRef} = useDroppable({
+    id: 'droppable',
+  });
+  const style = {
+    color: isOver ? 'green' : undefined,
+    width: "100px",
+    height: "100px",
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      {props.children}
+    </div>
+  );
+}

src/pages/Messages.jsx

@@ -1,6 +1,6 @@
 import {Table, Select, DatePicker, ConfigProvider, Input} from 'antd';
 import {MessageService} from '../services/api'
-import React, {useState, useEffect, useMemo} from 'react'
+import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
 import LoaderPortal from '../components/LoaderPortal'
 import '../styles/message.css'
@@ -53,7 +53,6 @@ const filterOptions = [
   {label: 'Информация', value: 3},
 ]
 
-
 // Данные для таблицы
 export default function Messages() {
   let {id} = useParams()
@@ -79,7 +78,7 @@ export default function Messages() {
     }
     setSearchString(message)
   }
-  
+
   useEffect(() => {
     const GetMessages = async () => {
       setLoader(true)

src/pages/Smbo.jsx

@@ -0,0 +1,616 @@
+import SmboPlate from '../components/SmboPlate'
+import '../styles/smbo.css'
+import EquipmentDetails from '../components/modalWindows/EquipmentDetails'
+import ActiveMessagesOnline from "../components/ActiveMessagesOnline"
+// import RigPlan from "../images/smbo/RigPlan2.png"
+
+const platesData = [
+  {
+    id: 1,
+    title: 'Теплогенератор',
+    placeHolderId: 1,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c1 r1'
+  },
+  // {
+  //   id: 2,
+  //   title: 'Емкости бурового раствора',
+  //   placeHolderId: 2,
+  //   state: 1,
+  //   equipmentTimers: [
+  //     {label: 'Полная наработка', value: 1, unit: 'ч'},
+  //     {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+  //     {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+  //     {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+  //     {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+  //     {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+  //   ],
+  //   equipmentSensors: [
+  //     {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+  //     {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+  //     {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+  //     {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+  //     {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+  //     {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+  //     {label: 'Состояние ПЧ1', value: 1, unit: ''},
+  //     {label: 'Состояние ПЧ2', value: 1, unit: ''},
+  //   ],
+  //   captionValue: 'У-У-У-у-у-у',
+  //   custom: 'Я не понял про это',
+  //   className: 'c2 r1'
+  // },
+  {
+    id: 3,
+    title: 'Подпорные насосы',
+    placeHolderId: 3,
+    state: 2,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c3 r1'
+  },
+  {
+    id: 4,
+    title: 'Буровой насос №1',
+    placeHolderId: 4,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c4 r1'
+  },
+  {
+    id: 5,
+    title: 'Буровой насос №2',
+    placeHolderId: 5,
+    state: 0,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c5 r1'
+  },
+  {
+    id: 6,
+    title: 'Талевый канат',
+    placeHolderId: 6,
+    state: 2,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c6 r1'
+  },
+  {
+    id: 7,
+    title: 'Станция управления ВСП',
+    placeHolderId: 7,
+    state: 3,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c1 r2'
+  },
+  {
+    id: 8,
+    title: 'Компрессорный блок',
+    placeHolderId: 8,
+    state: 3,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c6 r2'
+  },
+  {
+    id: 9,
+    title: 'Лебедка буровая',
+    placeHolderId: 9,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c1 r3'
+  },
+  {
+    id: 10,
+    title: 'Блок сопротивлений и КТУ',
+    placeHolderId: 10,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c6 r3'
+  },
+  {
+    id: 11,
+    title: 'Вспомогательная лебедка',
+    placeHolderId: 11,
+    state: 0,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c1 r4'
+  },
+  {
+    id: 12,
+    title: 'Блок НКУ',
+    placeHolderId: 12,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c6 r4'
+  },
+  {
+    id: 13,
+    title: 'Гидрорасцепитель',
+    placeHolderId: 13,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c1 r5'
+  },
+  {
+    id: 14,
+    title: 'Блок КРУ',
+    placeHolderId: 14,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c6 r5'
+  },
+  {
+    id: 15,
+    title: 'Привод ВСП',
+    placeHolderId: 15,
+    state: 2,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c1 r6'
+  },
+  {
+    id: 16,
+    title: 'Теплогенератор',
+    placeHolderId: 16,
+    state: 3,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'А вот тут, совсем не У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c6 r6'
+  },
+  {
+    id: 17,
+    title: 'Теплогенератор',
+    placeHolderId: 17,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c1 r7'
+  },
+  {
+    id: 18,
+    title: 'Теплогенератор',
+    placeHolderId: 18,
+    state: 0,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'наработка',
+    custom: 'Я не понял про это',
+    className: 'c6 r7'
+  },
+  {
+    id: 19,
+    title: 'Теплогенератор',
+    placeHolderId: 19,
+    state: 0,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c1 r8'
+  },
+  {
+    id: 20,
+    title: 'Теплогенератор',
+    placeHolderId: 20,
+    state: 1,
+    equipmentTimers: [
+      {label: 'Полная наработка', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
+      {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
+      {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
+    ],
+    equipmentSensors: [
+      {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
+      {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
+      {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
+      {label: 'Уровень масла в баке', value: 1, unit: 'м'},
+      {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
+      {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
+      {label: 'Состояние ПЧ1', value: 1, unit: ''},
+      {label: 'Состояние ПЧ2', value: 1, unit: ''},
+    ],
+    captionValue: 'У-У-У-у-у-у',
+    custom: 'Я не понял про это',
+    className: 'c6 r8'
+  },
+]
+
+const placeholderIdDictionary = {
+  1: {gridRowStart: 8, gridColumnStart: 1},
+  2: {gridRowStart: 7, gridColumnStart: 1},
+  3: {gridRowStart: 6, gridColumnStart: 1},
+  4: {gridRowStart: 5, gridColumnStart: 1},
+  5: {gridRowStart: 4, gridColumnStart: 1},
+  6: {gridRowStart: 3, gridColumnStart: 1},
+  7: {gridRowStart: 2, gridColumnStart: 1},
+  8: {gridRowStart: 1, gridColumnStart: 1},
+  9: {gridRowStart: 1, gridColumnStart: 2},
+  10: {gridRowStart: 1, gridColumnStart: 3},
+  11: {gridRowStart: 1, gridColumnStart: 4},
+  12: {gridRowStart: 1, gridColumnStart: 5},
+  13: {gridRowStart: 1, gridColumnStart: 6},
+  14: {gridRowStart: 2, gridColumnStart: 6},
+  15: {gridRowStart: 3, gridColumnStart: 6},
+  16: {gridRowStart: 4, gridColumnStart: 6},
+  17: {gridRowStart: 5, gridColumnStart: 6},
+  18: {gridRowStart: 6, gridColumnStart: 6},
+  19: {gridRowStart: 7, gridColumnStart: 6},
+  20: {gridRowStart: 8, gridColumnStart: 6},
+}
+
+const plates = []
+
+for (let i = 1; i < 21; i++) {
+  const item = platesData.filter(item => item.placeHolderId === i)[0]
+  const plate = item ? (
+    <div key={i} style={placeholderIdDictionary[i]} className="pointer">
+      <SmboPlate
+        title={item.title}
+        state={item.state}
+        operatingTime={item.placeHolderId}
+        captionValue={item.captionValue}
+      >
+        <EquipmentDetails
+          id={item.id}
+          title={item.title}
+          placeHolderId={item.placeHolderId}
+          equipmentTimers={item.equipmentTimers}
+          equipmentSensors={item.equipmentSensors}
+          state={item.state}
+          captionValue={item.captionValue}
+        />
+      </SmboPlate>
+    </div>
+  ) : (
+    <div className="empty_place" style={placeholderIdDictionary[i]} key={i}>{i}</div>
+  )
+  plates.push(plate)
+}
+
+export default function Smbo() {
+
+  return (<>
+    <div className="smbo_container">
+      {plates}
+      {/*<div className="c2 ce5 r2 re7 center">*/}
+      {/*  <img src={RigPlan} alt="План"/>*/}
+      {/*</div>*/}
+      <div className="c2 r8 ce6 center">
+        <ActiveMessagesOnline/>
+      </div>
+
+    </div>
+  </>)
+}

src/pages/Well.jsx

@@ -9,6 +9,7 @@ import WellAnalysis from "../pages/WellAnalysis";
 import TelemetryView from "../pages/TelemetryView";
 import MenuDocuments from "../components/MenuDocuments";
 import WellStat from "./WellStat"
+import Smbo from "./Smbo"
 
 const { Content } = Layout
 
@@ -77,6 +78,9 @@ export default function Well() {
               <Link to={{pathname: `${rootPath}/documents/lastData`}}>Последние данные</Link>
             </Menu.Item>
           </SubMenu>
+        <Menu.Item key="8" icon={<FolderOutlined/>}>
+          <Link to={{pathname: `${rootPath}/smbo`}}>СМБО</Link>
+        </Menu.Item>
       </Menu>
 
       <Layout>
@@ -106,6 +110,9 @@ export default function Well() {
             <Route path="/well/:id/documents">
               <MenuDocuments/>
             </Route>
+            <Route path="/well/:id/smbo">
+              <Smbo/>
+            </Route>
             <Route path="/">
               <Redirect to={{pathname: `${rootPath}/telemetry`}}/>
             </Route>

src/styles/equipment_details.css

@@ -0,0 +1,3 @@
+span.right-text {
+    float: right;
+}

src/styles/smbo.css

@@ -0,0 +1,123 @@
+.smbo_container{
+    display: grid;
+    column-gap: 4px;
+    row-gap: 4px;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows:  repeat(9, 1fr);
+    justify-items: stretch;
+    align-items: stretch;
+}
+
+.smbo_rig_plan{
+    grid-column-start: 2;
+    grid-row-start: 2;
+}
+
+.plate_container{
+    background-color: #00000010;
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows:  auto;
+    padding: 6px;
+    margin: 4px;
+    height: 100%;
+    width: 100%;
+}
+
+.plate_title{
+    grid-column: 1 / span 2;
+    grid-row: 1 / 1;
+    font-weight: bold;
+}
+
+.plate_state{
+    grid-column: 3 / span 1;
+    grid-row: 1 / span 1;
+}
+
+.plate_param{
+    grid-row: 2 / span 1;
+}
+
+.plate_param_title{
+    grid-column: 1 / span 1;
+}
+
+.plate_param_value{
+    grid-column: 2 / span 1;
+    font-weight: bold;
+    place-self: start end;
+    margin-right: 4px;
+}
+
+.plate_param_units{
+    grid-column: 3 / span 1;
+}
+
+.c1{  grid-column-start: 1; }
+.c2{  grid-column-start: 2; }
+.c3{  grid-column-start: 3; }
+.c4{  grid-column-start: 4; }
+.c5{  grid-column-start: 5; }
+.c6{  grid-column-start: 6; }
+.c7{  grid-column-start: 7; }
+.c8{  grid-column-start: 8; }
+
+.r1{  grid-row-start: 1; }
+.r2{  grid-row-start: 2; }
+.r3{  grid-row-start: 3; }
+.r4{  grid-row-start: 4; }
+.r5{  grid-row-start: 5; }
+.r6{  grid-row-start: 6; }
+.r7{  grid-row-start: 7; }
+.r8{  grid-row-start: 8; }
+
+.ce1{  grid-column-end: 1; }
+.ce2{  grid-column-end: 2; }
+.ce3{  grid-column-end: 3; }
+.ce4{  grid-column-end: 4; }
+.ce5{  grid-column-end: 5; }
+.ce6{  grid-column-end: 6; }
+.ce7{  grid-column-end: 7; }
+.ce8{  grid-column-end: 8; }
+
+.re1{  grid-row-end: 1; }
+.re2{  grid-row-end: 2; }
+.re3{  grid-row-end: 3; }
+.re4{  grid-row-end: 4; }
+.re5{  grid-row-end: 5; }
+.re6{  grid-row-end: 6; }
+.re7{  grid-row-end: 7; }
+.re8{  grid-row-end: 8; }
+
+.cspan-4{ grid-column-end: 4 start;}
+
+.rspan-6{ grid-row-end: 6 start;}
+
+.rspan-7{ grid-row-end: 7 start;}
+
+.center{
+    place-self: center stretch;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.container__example {
+    display: flex;
+}
+
+.block__example {
+    width: 250px;
+    height: 120px;
+}
+
+.empty_place {
+    background-color: #505050;
+    text-align: center;
+    color: silver;
+    font-size: 75px;
+    margin-top: 5px;
+    align-items: center;
+}