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

2021-08-06 17:46:50 +05:00 · 2021-08-06 17:46:50 +05:00 · 7cf3197ac1
commit 7cf3197ac1
parent 18a39f0aee
5 changed files with 93 additions and 67 deletions
--- a/src/components/Documents.jsx
+++ b/src/components/Documents.jsx
@ -13,8 +13,8 @@ const pageSize = 12
 const {RangePicker} = DatePicker;


-export default function Documents({selectedFileCategory}) {
-  let {id} = useParams()
+export default function Documents({idWell, selectedFileCategory}) {
+  // 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>
--- a/src/components/SmboPlate.jsx
+++ b/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}
--- a/src/components/modalWindows/EquipmentDetails.jsx
+++ b/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}
--- a/src/pages/Smbo.jsx
+++ b/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) => (
-  <div className={items.className}>
-    <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>
-  </div>
+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},
+}
+
+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 (<>
--- a/src/styles/smbo.css
+++ b/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; }