Страница СМБО. Изменена логика плиток.

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/SmboPlate.jsx

@@ -3,7 +3,7 @@ import '../styles/smbo.css'
 
 import {useState} from "react";
 
-export const SqueareIndicator = ({state}) =>{
+export const SquareIndicator = ({state}) =>{
   let bgColor = "#AAA"
   switch (state){
     case 1:
@@ -23,7 +23,11 @@ export const SqueareIndicator = ({state}) =>{
   </svg>)
 }
 
-export default function SmboPlate({title, state, operatingTime, units, children}){
+const platesData = [
+  {id: '1', title: 'equipToolName', placeHolderId: '', state: '', units: 'ч', value: SquareIndicator, captionValue: 'Подпись', custom: 'Я не понял про это'}
+]
+
+export default function SmboPlate({title, state, operatingTime, units, children, captionValue}){
   const [isModalVisible, setIsModalVisible] = useState(false)
 
 
@@ -35,15 +39,19 @@ export default function SmboPlate({title, state, operatingTime, units, children}
     setIsModalVisible(false)
   }
 
-  return(<><div className="plate_container" onClick={openModal}>
+  const plates_smbo_equip = platesData.map((items) => (
+    <div className="plate_container" onClick={openModal}>
       <div className="plate_title">{title}</div>
-    <div className="plate_state"><SqueareIndicator state={state}/></div>
+      <div className="plate_state"><SquareIndicator state={state}/></div>
 
-    <div className="plate_param_title">наработка:</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}

src/components/modalWindows/EquipmentDetails.jsx

@@ -1,41 +1,17 @@
 import {Row, Col} from 'antd'
-import {InboxOutlined} from '@ant-design/icons'
-import {useState} from "react"
-import {useParams} from 'react-router-dom'
 import '../../styles/equipment_details.css'
 import Documents from '../Documents'
 
-const collectionOfLinesForStates = [
+export default function EquipmentDetails({equipmentTimers, equipmentSensors}) {
-  {label: 'Состояние', unit: ''},
+  let stateOfEquipmentDetails = equipmentTimers.map(timer => {
-  {label: 'Полная наработка', unit: 'ч'},
-  {label: 'Наработка после ТО1', unit: 'ч'},
-  {label: 'Наработка после ТО1', unit: 'ч'},
-  {label: 'Наработка вне р/р', unit: 'ч'},
-  {label: 'Периодичность ТО1', unit: 'ч'},
-  {label: 'Периодичность ТО2', unit: 'ч'},
-]
-
-const collectionOfLinesForIndicators = [
-  {label: 'Скорость вращения', unit: 'Об/мин'},
-  {label: 'Крутящий момент', unit: 'кН*м'},
-  {label: 'Общий уровень вибрации', unit: 'мм/с'},
-  {label: 'Уровень масла в баке', unit: 'м'},
-  {label: 'Т верхнего подшипника', unit: '°C'},
-  {label: 'Т нижнего подшипника', unit: '°C'},
-  {label: 'Состояние ПЧ1', unit: ''},
-  {label: 'Состояние ПЧ2', unit: ''},
-]
-
-export default function EquipmentDetails() {
-  let stateOfEquipmentDetails = collectionOfLinesForStates.map(item => {
     return(
-      <p key={item.label}>{item.label}: <span className="right-text"><b>{item.unit}</b></span></p>
+      <p key={timer.label}>{timer.label}: <span className="right-text"><b>{timer.value} {timer.unit}</b></span></p>
     )
   })
 
-  let indicatorsOfEquipmentDetail = collectionOfLinesForIndicators.map(item => {
+  let indicatorsOfEquipmentDetail = equipmentSensors.map(sensor => {
     return(
-      <p key={item.label}>{item.label}: <span className="right-text"><b>{item.unit}</b></span></p>
+      <p key={sensor.label}>{sensor.label}: <span className="right-text"><b>{sensor.value} {sensor.unit}</b></span></p>
     )
   })
 

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/Smbo.jsx

@@ -1,56 +1,556 @@
-import SmboPlate from '../components/SmboPlate'
+import SmboPlate, {SquareIndicator} from '../components/SmboPlate'
 import '../styles/smbo.css'
-import RigPlan from '../images/smbo/RigPlan2.png'
-import HoistDummy from '../images/smbo/hoist_LBU_1200.png'
 import EquipmentDetails from '../components/modalWindows/EquipmentDetails'
-import ActiveMessagesOnline from "../components/ActiveMessagesOnline";
+import ActiveMessagesOnline from "../components/ActiveMessagesOnline"
+
+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: 'Я не понял про это'
+  },
+  {
+    id: '2',
+    title: 'Емкости бурового раствора',
+    placeHolderId: '2',
+    state: 1,
+    // dc
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+  {
+    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: 'Я не понял про это'
+  },
+]
+
+const SmboPlates = platesData.map((items) => (
+    <SmboPlate title={items.title} state={items.state} operatingTime={items.placeHolderId}>
+      <EquipmentDetails
+        id={items.id}
+        title={items.title}
+        placeHolderId={items.placeHolderId}
+        equipmentTimers={items.equipmentTimers}
+        equipmentSensors={items.equipmentSensors}
+        state={items.state}
+        captionValue={items.captionValue}/>
+    </SmboPlate>
+  )
+)
+
 
 export default function Smbo() {
-  return (
+
+  return (<>
     <div className="smbo_container">
-
+      {SmboPlates}
-      <div className="c1 r1 pointer"><SmboPlate title="Теплогенератор" state={1} operatingTime={2301}/></div>
+      <div className="c2 r5 ce6 center">
-      <div className="c2 r1 pointer"><SmboPlate title="Емкости бурового раствора" state={1} operatingTime={2564}/></div>
-      <div className="c3 r1 pointer"><SmboPlate title="Подпорные насосы" state={1} operatingTime={1054}/></div>
-      <div className="c4 r1 pointer"><SmboPlate title="Буровой насос №1" state={1} operatingTime={1589}/></div>
-      <div className="c5 r1 pointer"><SmboPlate title="Буровой насос №2" state={0} operatingTime={1203}/></div>
-      <div className="c6 r1 pointer"><SmboPlate title="Талевый канат" state={1} operatingTime={1900} units='т·км'/>
-      </div>
-
-      <div className="c1 r2 pointer">
-        <SmboPlate title="Станция управления ВСП" state={1} operatingTime={75}>
-          <EquipmentDetails/>
-        </SmboPlate>
-      </div>
-      <div className="c2 r2 c rspan-7 cspan-4 center"><img src={RigPlan} width="1200" alt={RigPlan}/></div>
-      <div className="c6 r2 pointer"><SmboPlate title="Компрессорный блок" state={1} operatingTime={1161}/></div>
-
-      <div className="c1 r3 pointer"><SmboPlate title="Лебедка буровая" state={1} operatingTime={301}><img
-        src={HoistDummy}
-        width="700"/></SmboPlate>
-      </div>
-      <div className="c6 r3 pointer"><SmboPlate title="Блок сопротивлений и КТУ" state={1} operatingTime={23}/></div>
-
-      <div className="c1 r4 pointer"><SmboPlate title="Вспомогательная лебедка" state={0} operatingTime={41}/></div>
-      <div className="c6 r4 pointer"><SmboPlate title="Блок НКУ" state={3} operatingTime={1596}/></div>
-
-      <div className="c1 r5 pointer"><SmboPlate title="Гидрорасцепитель" state={1} operatingTime={6}/></div>
-      <div className="c6 r5 pointer"><SmboPlate title="Блок КРУ" state={0} operatingTime={1955}/></div>
-
-      <div className="c1 r6 pointer"><SmboPlate title="Привод ВСП" state={2} operatingTime={75}/></div>
-      <div className="c6 r6 pointer"><SmboPlate title="ДЭС / ДВС" state={1} operatingTime={7481}/></div>
-
-      <div className="c1 r7 pointer"><SmboPlate title="Буровой ключ" state={1} operatingTime={17}/></div>
-      <div className="c6 r7 pointer"><SmboPlate title="РВД" state={1} operatingTime={3005}/></div>
-
-      <div className="c1 r8 pointer"><SmboPlate title="Сито-гидро- циклонная установка" state={0} operatingTime={1589}/>
-      </div>
-      <div className="c6 r8 pointer"><SmboPlate title="Дефектоскоп" state={1} operatingTime={603}/></div>
-      <div className="c2 r8 ce6 center">
         <ActiveMessagesOnline/>
       </div>
 
-
     </div>
-  )
+  </>)
 }

src/styles/smbo.css

@@ -3,7 +3,7 @@
     column-gap: 4px;
     row-gap: 4px;
     grid-template-columns: repeat(6, 1fr);
-    grid-template-rows:  repeat(8, 1fr);
+    grid-template-rows:  repeat(9, 1fr);
     justify-items: stretch;
     align-items: stretch;
 }
@@ -62,6 +62,7 @@
 .c6{  grid-column-start: 6; }
 .c7{  grid-column-start: 7; }
 .c8{  grid-column-start: 8; }
+.c8{  grid-column-start: 8; }
 
 .r1{  grid-row-start: 1; }
 .r2{  grid-row-start: 2; }
@@ -103,3 +104,12 @@
 .pointer {
     cursor: pointer;
 }
+
+.container__example {
+    display: flex;
+}
+
+.block__example {
+    width: 250px;
+    height: 120px;
+}