Плитки для смбо. Другая логика расставления + Стили для пустых мест

src/components/CementFluid.jsx

@@ -23,7 +23,7 @@ const EditableCell = ({
                         index,
                         children,
                         ...restProps
-}) => {
+                      }) => {
   return (
     <td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
       <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
@@ -35,7 +35,7 @@ const EditableCell = ({
               {
                 required: true,
                 message: '',
-                pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
+                pattern: /(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$/
               },
             ]}
           >
@@ -292,7 +292,7 @@ export function CementFluid() {
         return editable ? (
           <span>
             <a
-              href="javascript:;"
+              href="javascript:"
               onClick={() => save(row.key)}
               style={{ marginRight: 8 }}
             >

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

@@ -30,7 +30,7 @@ const EditableCell = ({
               {
                 required: true,
                 message: '',
-                pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
+                pattern: /(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$/
               },
             ]}
           >

src/components/SludgeDiagram.jsx

@@ -4,7 +4,7 @@ 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: '', sludge: '', maxSum: '', methan: '', ethan: '', propan: '', butan: '', pentan: ''
+    camstone: '', cement: '', summary: '', drillingMud: '', sludge: '', maxSum: '', methan: '', ethan: '', propan: '', butan: '', pentan: ''
   }
 ]
 
@@ -29,7 +29,7 @@ const EditableCell = ({
               {
                 required: true,
                 message: '',
-                pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
+                pattern: /(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$/
               },
             ]}
           >

src/pages/Messages.jsx

@@ -5,6 +5,7 @@ import {useParams} from 'react-router-dom'
 import LoaderPortal from '../components/LoaderPortal'
 import '../styles/message.css'
 import notify from '../components/notify'
+import MessageFilter from "../components/MessageFilter";
 import locale from "antd/lib/locale/ru_RU";
 import moment from 'moment'
 
@@ -133,6 +134,7 @@ export default function Messages() {
             onChange={onChangeRange}
           />
         </ConfigProvider>
+        <MessageFilter/>
       </div>
       <LoaderPortal show={loader}>
         <Table

src/pages/Smbo.jsx

@@ -1,7 +1,8 @@
-import SmboPlate, {SquareIndicator} from '../components/SmboPlate'
+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 = [
   {
@@ -31,33 +32,33 @@ const platesData = [
     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: 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: 'Подпорные насосы',
@@ -547,58 +548,65 @@ const platesData = [
 ]
 
 const placeholderIdDictionary = {
-  1: {row: 8, col: 1},
-  2: {row: 7, col: 1},
-  3: {row: 6, col: 1},
-  4: {row: 5, col: 1},
-  5: {row: 4, col: 1},
-  6: {row: 3, col: 1},
-  7: {row: 2, col: 1},
-  8: {row: 1, col: 1},
-  9: {row: 1, col: 2},
-  10: {row: 1, col: 3},
-  11: {row: 1, col: 4},
-  12: {row: 1, col: 5},
-  13: {row: 1, col: 6},
-  14: {row: 2, col: 6},
-  15: {row: 3, col: 6},
-  16: {row: 4, col: 6},
-  17: {row: 5, col: 6},
-  18: {row: 6, col: 6},
-  19: {row: 7, col: 6},
-  20: {row: 8, col: 6},
+  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 makeStyleByPlaceHolderId = (placeholderId) => {
-  const placeholder = placeholderIdDictionary[placeholderId]
-  return {
-    gridColumnStart: placeholder.col,
-    gridRowStart: placeholder.row
-  }
-}
+const plates = []
 
-const SmboPlates = platesData.map((items,) => (
-    <div style={makeStyleByPlaceHolderId(items.placeHolderId)} className="pointer">
-      <SmboPlate title={items.title} state={items.state} operatingTime={items.placeHolderId}
-                 captionValue={items.captionValue}>
+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={items.id}
-          title={items.title}
-          placeHolderId={items.placeHolderId}
-          equipmentTimers={items.equipmentTimers}
-          equipmentSensors={items.equipmentSensors}
-          state={items.state}
-          captionValue={items.captionValue}/>
+          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">
-      {SmboPlates}
+      {plates}
+      {/*<div className="c2 ce5 r2 re7 center">*/}
+      {/*  <img src={RigPlan} alt="План"/>*/}
+      {/*</div>*/}
       <div className="c2 r8 ce6 center">
         <ActiveMessagesOnline/>
       </div>

src/styles/smbo.css

@@ -112,3 +112,12 @@
     width: 250px;
     height: 120px;
 }
+
+.empty_place {
+    background-color: #505050;
+    text-align: center;
+    color: silver;
+    font-size: 75px;
+    margin-top: 5px;
+    align-items: center;
+}