Расставил плитки в арку

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

@@ -23,10 +23,6 @@ export const SquareIndicator = ({state}) =>{
   </svg>)
 }
 
-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)
 
@@ -39,7 +35,7 @@ export default function SmboPlate({title, state, operatingTime, units, children,
     setIsModalVisible(false)
   }
 
-  const plates_smbo_equip = platesData.map((items) => (
+  const plates_smbo_equip = (
     <div className="plate_container" onClick={openModal}>
       <div className="plate_title">{title}</div>
       <div className="plate_state"><SquareIndicator state={state}/></div>
@@ -48,7 +44,7 @@ export default function SmboPlate({title, state, operatingTime, units, children,
       <div className="plate_param_value">{operatingTime}</div>
       <div className="plate_param_units">{units??'ч'}</div>
     </div>
-  ))
+  )
 
   return(<>
     {plates_smbo_equip}

src/components/modalWindows/EquipmentDetails.jsx

@@ -2,7 +2,7 @@ import {Row, Col} from 'antd'
 import '../../styles/equipment_details.css'
 import Documents from '../Documents'
 
-export default function EquipmentDetails({equipmentTimers, equipmentSensors}) {
+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>
@@ -27,7 +27,7 @@ export default function EquipmentDetails({equipmentTimers, equipmentSensors}) {
     <br/>
     <Row Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} align="middle">
       <Col span={12}>
-        <Documents/>
+        <Documents idWell={id}/>
       </Col>
       <Col span={12}>
         {indicatorsOfEquipmentDetail}

src/pages/Smbo.jsx

@@ -7,7 +7,7 @@ const platesData = [
   {
     id: 1,
     title: 'Теплогенератор',
-    placeHolderId: '1',
+    placeHolderId: 1,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -34,7 +34,7 @@ const platesData = [
   {
     id: 2,
     title: 'Емкости бурового раствора',
-    placeHolderId: '2',
+    placeHolderId: 2,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -61,7 +61,7 @@ const platesData = [
   {
     id: 3,
     title: 'Подпорные насосы',
-    placeHolderId: '3',
+    placeHolderId: 3,
     state: 2,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -86,9 +86,9 @@ const platesData = [
     className: 'c3 r1'
   },
   {
-    id: '4',
+    id: 4,
     title: 'Буровой насос №1',
-    placeHolderId: '4',
+    placeHolderId: 4,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -113,9 +113,9 @@ const platesData = [
     className: 'c4 r1'
   },
   {
-    id: '5',
+    id: 5,
     title: 'Буровой насос №2',
-    placeHolderId: '5',
+    placeHolderId: 5,
     state: 0,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -140,9 +140,9 @@ const platesData = [
     className: 'c5 r1'
   },
   {
-    id: '6',
+    id: 6,
     title: 'Талевый канат',
-    placeHolderId: '6',
+    placeHolderId: 6,
     state: 2,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -167,9 +167,9 @@ const platesData = [
     className: 'c6 r1'
   },
   {
-    id: '7',
+    id: 7,
     title: 'Станция управления ВСП',
-    placeHolderId: '7',
+    placeHolderId: 7,
     state: 3,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -194,9 +194,9 @@ const platesData = [
     className: 'c1 r2'
   },
   {
-    id: '8',
+    id: 8,
     title: 'Компрессорный блок',
-    placeHolderId: '8',
+    placeHolderId: 8,
     state: 3,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -221,9 +221,9 @@ const platesData = [
     className: 'c6 r2'
   },
   {
-    id: '9',
+    id: 9,
     title: 'Лебедка буровая',
-    placeHolderId: '9',
+    placeHolderId: 9,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -248,9 +248,9 @@ const platesData = [
     className: 'c1 r3'
   },
   {
-    id: '10',
+    id: 10,
     title: 'Блок сопротивлений и КТУ',
-    placeHolderId: '10',
+    placeHolderId: 10,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -275,9 +275,9 @@ const platesData = [
     className: 'c6 r3'
   },
   {
-    id: '11',
+    id: 11,
     title: 'Вспомогательная лебедка',
-    placeHolderId: '11',
+    placeHolderId: 11,
     state: 0,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -302,9 +302,9 @@ const platesData = [
     className: 'c1 r4'
   },
   {
-    id: '12',
+    id: 12,
     title: 'Блок НКУ',
-    placeHolderId: '12',
+    placeHolderId: 12,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -329,9 +329,9 @@ const platesData = [
     className: 'c6 r4'
   },
   {
-    id: '13',
+    id: 13,
     title: 'Гидрорасцепитель',
-    placeHolderId: '13',
+    placeHolderId: 13,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -356,9 +356,9 @@ const platesData = [
     className: 'c1 r5'
   },
   {
-    id: '14',
+    id: 14,
     title: 'Блок КРУ',
-    placeHolderId: '14',
+    placeHolderId: 14,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -383,9 +383,9 @@ const platesData = [
     className: 'c6 r5'
   },
   {
-    id: '15',
+    id: 15,
     title: 'Привод ВСП',
-    placeHolderId: '15',
+    placeHolderId: 15,
     state: 2,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -410,9 +410,9 @@ const platesData = [
     className: 'c1 r6'
   },
   {
-    id: '16',
+    id: 16,
     title: 'Теплогенератор',
-    placeHolderId: '16',
+    placeHolderId: 16,
     state: 3,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -432,14 +432,14 @@ const platesData = [
       {label: 'Состояние ПЧ1', value: 1, unit: ''},
       {label: 'Состояние ПЧ2', value: 1, unit: ''},
     ],
-    captionValue: 'У-У-У-у-у-у',
+    captionValue: 'А вот тут, совсем не У-У-У-у-у-у',
     custom: 'Я не понял про это',
     className: 'c6 r6'
   },
   {
-    id: '17',
+    id: 17,
     title: 'Теплогенератор',
-    placeHolderId: '17',
+    placeHolderId: 17,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -464,9 +464,9 @@ const platesData = [
     className: 'c1 r7'
   },
   {
-    id: '18',
+    id: 18,
     title: 'Теплогенератор',
-    placeHolderId: '18',
+    placeHolderId: 18,
     state: 0,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -491,9 +491,9 @@ const platesData = [
     className: 'c6 r7'
   },
   {
-    id: '19',
+    id: 19,
     title: 'Теплогенератор',
-    placeHolderId: '19',
+    placeHolderId: 19,
     state: 0,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -518,9 +518,9 @@ const platesData = [
     className: 'c1 r8'
   },
   {
-    id: '20',
+    id: 20,
     title: 'Теплогенератор',
-    placeHolderId: '20',
+    placeHolderId: 20,
     state: 1,
     equipmentTimers: [
       {label: 'Полная наработка', value: 1, unit: 'ч'},
@@ -546,23 +546,54 @@ const platesData = [
   },
 ]
 
-const SmboPlates = platesData.map((items) => (
+const placeholderIdDictionary = {
-  <div className={items.className}>
+  1: {row: 8, col: 1},
-    <SmboPlate title={items.title} state={items.state} operatingTime={items.placeHolderId}>
+  2: {row: 7, col: 1},
-      <EquipmentDetails
+  3: {row: 6, col: 1},
-        id={items.id}
+  4: {row: 5, col: 1},
-        title={items.title}
+  5: {row: 4, col: 1},
-        placeHolderId={items.placeHolderId}
+  6: {row: 3, col: 1},
-        equipmentTimers={items.equipmentTimers}
+  7: {row: 2, col: 1},
-        equipmentSensors={items.equipmentSensors}
+  8: {row: 1, col: 1},
-        state={items.state}
+  9: {row: 1, col: 2},
-        captionValue={items.captionValue}/>
+  10: {row: 1, col: 3},
-    </SmboPlate>
+  11: {row: 1, col: 4},
-  </div>
+  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},
+}
+
+const makeStyleByPlaceHolderId = (placeholderId) => {
+  const placeholder = placeholderIdDictionary[placeholderId]
+  return {
+    gridColumnStart: placeholder.col,
+    gridRowStart: placeholder.row
+  }
+}
+
+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}>
+        <EquipmentDetails
+          id={items.id}
+          title={items.title}
+          placeHolderId={items.placeHolderId}
+          equipmentTimers={items.equipmentTimers}
+          equipmentSensors={items.equipmentSensors}
+          state={items.state}
+          captionValue={items.captionValue}/>
+      </SmboPlate>
+    </div>
   )
 )
 
-
 export default function Smbo() {
 
   return (<>

src/styles/smbo.css

@@ -62,7 +62,6 @@
 .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; }