Добавлен шаблон компонента EquipmentDetail. Перенесена вкладка SMBO из демо-ветки

src/components/SmboPlate.jsx

@@ -0,0 +1,61 @@
+import {Modal} from 'antd'
+import '../styles/smbo.css'
+
+import {useState} from "react";
+
+export const SqueareIndicator = ({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}){
+  const [isModalVisible, setIsModalVisible] = useState(false)
+
+
+  const openModal = () => {
+    setIsModalVisible(!!children)
+  }
+
+  const closeModal = () => {
+    setIsModalVisible(false)
+  }
+
+  return(<><div className="plate_container" onClick={openModal}>
+    <div className="plate_title">{title}</div>
+    <div className="plate_state"><SqueareIndicator state={state}/></div>
+
+    <div className="plate_param_title">наработка:</div>
+    <div className="plate_param_value">{operatingTime}</div>
+    <div className="plate_param_units">{units??'ч'}</div>
+
+  </div>
+
+    <Modal
+      title={title}
+      centered
+      visible={isModalVisible}
+      onOk={closeModal}
+      onCancel={closeModal}
+      width={800}
+    >
+      <div>
+        {children}
+      </div>
+    </Modal>
+  </>)
+}

src/components/modalWindows/EquipmentDetails.jsx

@@ -0,0 +1,61 @@
+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 = [
+  {label: 'Состояние', unit: ''},
+  {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>
+    )
+  })
+
+  let indicatorsOfEquipmentDetail = collectionOfLinesForIndicators.map(item => {
+    return(
+      <p key={item.label}>{item.label}: <span className="right-text"><b>{item.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/>
+      </Col>
+      <Col span={12}>
+        {indicatorsOfEquipmentDetail}
+      </Col>
+    </Row>
+  </>)
+}

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,83 @@
+.smbo_container{
+    display: grid;
+    column-gap: 4px;
+    row-gap: 4px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows:  1fr 1fr 1fr 1fr 1fr 1fr 1fr 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; }
+
+.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;
+}