Добавлены сообщения в СМБО и поставлены вниз

src/pages/Smbo.jsx

@@ -1,9 +1,9 @@
 import SmboPlate from '../components/SmboPlate'
 import '../styles/smbo.css'
-import RigPlan from '../images/RigPlan2.png'
+import RigPlan from '../images/smbo/RigPlan2.png'
-import HoistDummy from '../images/hoist_LBU_1200.png'
+import HoistDummy from '../images/smbo/hoist_LBU_1200.png'
-import TopDriveDummy from '../images/TopDrive_Dummy.png'
 import EquipmentDetails from '../components/modalWindows/EquipmentDetails'
+import ActiveMessagesOnline from "../components/ActiveMessagesOnline";
 
 export default function Smbo() {
   return (
@@ -14,16 +14,20 @@ export default function Smbo() {
       <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="c6 r1 pointer"><SmboPlate title="Талевый канат" state={1} operatingTime={1900} units='т·км'/>
+      </div>
 
-      <div className="c1 r2 pointer"><SmboPlate title="Станция управления ВСП" state={1} operatingTime={75}>
+      <div className="c1 r2 pointer">
+        <SmboPlate title="Станция управления ВСП" state={1} operatingTime={75}>
           <EquipmentDetails/>
-      </SmboPlate></div>
+        </SmboPlate>
-      <div className="c2 r2 c rspan-7 cspan-4 center"><img src={RigPlan} width="1200"/></div>
+      </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}
+      <div className="c1 r3 pointer"><SmboPlate title="Лебедка буровая" state={1} operatingTime={301}><img
-                                                                                                   width="700"/></SmboPlate>
+        src={HoistDummy}
+        width="700"/></SmboPlate>
       </div>
       <div className="c6 r3 pointer"><SmboPlate title="Блок сопротивлений и КТУ" state={1} operatingTime={23}/></div>
 
@@ -39,8 +43,12 @@ export default function Smbo() {
       <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="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

@@ -2,8 +2,8 @@
     display: grid;
     column-gap: 4px;
     row-gap: 4px;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows:  1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows:  repeat(8, 1fr);
     justify-items: stretch;
     align-items: stretch;
 }
@@ -72,6 +72,24 @@
 .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;}
@@ -81,3 +99,7 @@
 .center{
     place-self: center stretch;
 }
+
+.pointer {
+    cursor: pointer;
+}