CF2-40: Changed 'Last Data' tables

src/components/CementFluid.jsx

@@ -1,106 +1,201 @@
-let date = new Date().toLocaleString()
+import {Table} from 'antd'
+
+const columns = [
+  {
+      title: <b>Наименование</b>,
+      key: 'name',
+      dataIndex: 'name',
+      align: 'center',
+      render: (item) => <b>{item}</b>
+  },
+  {
+      title: <b>Температура, °C</b>,
+      key: 'temperature',
+      dataIndex: 'temperature',
+      align: 'center'
+  },
+  {
+    title: <b>Плотность, г/см³</b>,
+    key: 'density',
+    dataIndex: 'density',
+    align: 'center'
+  },
+  {
+    title: <b>Усл. вязкость, сек</b>,
+    key: 'conditionalViscosity',
+    dataIndex: 'conditionalViscosity',
+    align: 'center'
+  },
+  {
+    title: <b>R300</b>,
+    key: 'r300',
+    dataIndex: 'R300',
+    align: 'center'
+  },
+  {
+    title: <b>R600</b>,
+    key: 'r600',
+    dataIndex: 'R600',
+    align: 'center'
+  },
+  {
+    title: <b>R3/R6</b>,
+    key: 'r3r6',
+    dataIndex: 'r3/R6',
+    align: 'center'
+  },
+  {
+    title: <b>ДНС, дПа</b>,
+    key: 'dnsDpa',
+    dataIndex: 'dnsDpa',
+    align: 'center'
+  },
+  {
+    title: <b>Пластич. вязкость, сПз</b>,
+    key: 'plasticViscocity',
+    dataIndex: 'plasticViscocity',
+    align: 'center'
+  },
+  {
+    title: <b>СНС, дПа</b>,
+    key: 'snsDpa',
+    dataIndex: 'snsDpa',
+    align: 'center'
+  },
+  {
+    title: <b>R3/R6 49С</b>,
+    key: 'r3r649С',
+    dataIndex: 'r3/R649С',
+    align: 'center'
+  },
+  {
+    title: <b>ДНС 49С, дПа</b>,
+    key: 'dns49Cdpa',
+    dataIndex: 'dns49Cdpa',
+    align: 'center'
+  },
+  {
+    title: <b>Пластич. вязкость 49С, сПз</b>,
+    key: 'plasticViscocity49c',
+    dataIndex: 'plasticViscocity49c',
+    align: 'center'
+  },
+  {
+    title: <b>СНС 49С, дПа</b>,
+    key: 'sns49Cdpa',
+    dataIndex: 'sns49Cdpa',
+    align: 'center'
+  },
+  {
+    title: <b>МВТ, кг/м³</b>,
+    key: 'mbt',
+    dataIndex: 'mbt',
+    align: 'center'
+  },
+  {
+    title: <b>Песок, %</b>,
+    key: 'sand',
+    dataIndex: 'sand',
+    align: 'center'
+  },
+  {
+    title: <b>Фильтрация, см³/30мин</b>,
+    key: 'filter',
+    dataIndex: 'filter',
+    align: 'center'
+  },
+  {
+    title: <b>Корка, мм</b>,
+    key: 'crust',
+    dataIndex: 'crust',
+    align: 'center'
+  },
+  {
+    title: <b>КТК</b>,
+    key: 'ktk',
+    dataIndex: 'ktk',
+    align: 'center'
+  },
+  {
+    title: <b>pH</b>,
+    key: 'ph',
+    dataIndex: 'ph',
+    align: 'center'
+  },
+  {
+    title: <b>Жесткость, мг/л</b>,
+    key: 'hardness',
+    dataIndex: 'hardness',
+    align: 'center'
+  },
+  {
+    title: <b>Хлориды, мг/л</b>,
+    key: 'chlorides',
+    dataIndex: 'chlorides',
+    align: 'center'
+  },
+  {
+    title: <b>Pf</b>,
+    key: 'pf',
+    dataIndex: 'pf',
+    align: 'center'
+  },
+  {
+    title: <b>Mf</b>,
+    key: 'mf',
+    dataIndex: 'mf',
+    align: 'center'
+  },
+  {
+    title: <b>Pm</b>,
+    key: 'pm',
+    dataIndex: 'pm',
+    align: 'center'
+  },
+  {
+    title: <b>Твердая фаза раствора, %</b>,
+    key: 'fluidSolidPhase',
+    dataIndex: 'fluidSolidPhase',
+    align: 'center'
+  },
+  {
+    title: <b>Смазка, %</b>,
+    key: 'grease',
+    dataIndex: 'grease',
+    align: 'center'
+  },
+  {
+    title: <b>Карбонат кальция, кг/м³</b>,
+    key: 'calciumCarbonate',
+    dataIndex: 'calciumCarbonate',
+    align: 'center'
+  }
+];
+
+const data = [
+  {
+    key: '1', name: 'План', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
+    snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
+    hardness: '', chlorides: '', pf: '', mf: '', pm: '', fluidSolidPhase: '', grease: '', calciumCarbonate: ''
+  },
+  {
+    key: '2', name: 'Факт', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
+    snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
+    hardness: '', chlorides: '', pf: '', mf: '', pm: '', fluidSolidPhase: '', grease: '', calciumCarbonate: ''
+  }
+];
 
 export function CementFluid() {
   return (<>
-    <table>
+    <Table
-      <thead style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "800px", fontWeight: "800", textAlign: "center"}}>
+        columns={columns}
-      <tr>
+        dataSource={data}
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>
+        size={'small'}
-          <b>Наименование</b></td>
+        bordered={true}
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Температура, °C</td>
+        pagination={false}
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Плотность, г/см³</td>
+    />
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Усл. вязкость, сек</td>
+    <div>&nbsp;</div>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>R300</td>
+    <p style={{textAlign: "right"}}><b>{new Date().toLocaleDateString()}</b></p>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>R600</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>R3/R6</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>ДНС, дПа</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Пластич. вязкость, сПз</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>СНС, дПа</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>R3/R6 49С</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>ДНС 49С, дПа</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Пластич. вязкость 49С, сПз</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>СНС 49С, дПа</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>МВТ, кг/м³</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Песок, %</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Фильтрация, см³/30мин</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Корка, мм</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>КТК</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>рН</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Жесткость, мг/л</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Хлориды, мг/л</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Pf</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Mf</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Pm</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Твердая фаза раствора, %</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Смазка, %</td>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Карбонат кальция, кг/м³</td>
-      </tr>
-      </thead>
-      <tbody style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>
-      <tr>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}><b>План</b></td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-      </tr>
-      <tr>
-        <td style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800"}}><b>Факт</b></td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-        <td  style={{borderTop:"1px solid", borderLeft: "1px solid", borderRight: "1px solid", borderBottom: "1px solid", width: "66px", fontWeight: "400", textAlign: "center"}}>&nbsp;</td>
-      </tr>
-      </tbody>
-    </table>
-      <div>&nbsp;</div>
-    <p style={{textAlign: "right"}}><b>{date}</b></p>
     </>
   )
 }

src/components/Nnb.jsx

@@ -0,0 +1,122 @@
+import {Table} from 'antd'
+
+const columns = [
+  {
+      title: 'Глубина по стволу, м',
+      key: 'depth',
+      dataIndex: 'depth',
+      align: 'center',
+  },
+  {
+      title: 'Зенитный угол, град',
+      key: 'zenithAngle',
+      dataIndex: 'zenithAngle',
+      align: 'center'
+  },
+  {
+    title: 'Азимут магнитный, град',
+    key: 'magneticAzimuth',
+    dataIndex: 'magneticAzimuth',
+    align: 'center'
+  },
+  {
+    title: 'Азимут истинный, град',
+    key: 'trueAzimuth',
+    dataIndex: 'trueAzimuth',
+    align: 'center'
+  },
+  {
+    title: 'Азимут дирекц., град',
+    key: 'directAzimuth',
+    dataIndex: 'directAzimuth',
+    align: 'center'
+  },
+  {
+    title: 'Глубина по вертикали, м',
+    key: 'verticalDepth',
+    dataIndex: 'verticalDepth',
+    align: 'center'
+  },
+  {
+    title: 'Абсолютная отметка, м',
+    key: 'absoluteMark',
+    dataIndex: 'absoluteMark',
+    align: 'center'
+  },
+  {
+    title: 'Лок. смещение к северу, м',
+    key: 'localNorthOffset',
+    dataIndex: 'localNorthOffset',
+    align: 'center'
+  },
+  {
+    title: 'Лок. смещение к востоку, м',
+    key: 'localEastOffset',
+    dataIndex: 'localEastOffset',
+    align: 'center'
+  },
+  {
+    title: 'Отклонение от устья, м',
+    key: 'outFallOffset',
+    dataIndex: 'outFallOffset',
+    align: 'center'
+  },
+  {
+    title: 'Азимут смещения, град',
+    key: 'offsetAzimuth',
+    dataIndex: 'offsetAzimuth',
+    align: 'center'
+  },
+  {
+    title: 'Пространст. интенсивность, град/10 м',
+    key: 'areaIntensity',
+    dataIndex: 'areaIntensity',
+    align: 'center'
+  },
+  {
+    title: 'Угол установки отклон., град',
+    key: 'offsetStopAngle',
+    dataIndex: 'offsetStopAngle',
+    align: 'center'
+  },
+  {
+    title: 'Интенсив. по зениту, град/10 м',
+    key: 'zenithIntensity',
+    dataIndex: 'zenithIntensity',
+    align: 'center'
+  },
+  {
+    title: 'Комментарий',
+    key: 'comment',
+    dataIndex: 'comment',
+    align: 'center'
+  },
+  {
+    title: 'Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)',
+    key: 'depthPlanFactDifference',
+    dataIndex: 'depthPlanFactDifference',
+    align: 'center'
+  },
+  {
+    title: 'Расстояние в пространстве между ХХХ (план) и ХХХ (факт)',
+    key: 'distancePlanFactDifference',
+    dataIndex: 'distancePlanFactDifference',
+    align: 'center'
+  }
+];
+
+const data = []
+
+export function Nnb() {
+  return (<>
+    <Table
+      columns={columns}
+      dataSource={data}
+      size={'small'}
+      bordered={true}
+      pagination={false}
+    />
+    <div>&nbsp;</div>
+    <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
+  </>)
+}

src/components/NnbTable.jsx

@@ -1,250 +0,0 @@
-let date = new Date().toLocaleString()
-
-export function NnbTable() {
-  return (<>
-    <table cellspacing="0" border="0">
-      <colGroup span="18" width="79"></colGroup>
-      <tr>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "2px solid #000000",
-          borderRight: "1px solid #000000"
-        }} height="91" align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma"
-                                                                                                  size="2">Глубина по
-          стволу, м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Зенитный
-          угол, град</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Азимут
-          магнитный, град</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Азимут
-          истинный, град</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Азимут
-          дирекц., град</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Глубина по
-          вертикали, м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Абсолютная
-          отметка, м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Лок.
-          смещение к северу, м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Лок.
-          смещение к востоку, м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Отклонение
-          от устья, м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Азимут
-          смещения, град</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Отклонение
-          от устья, м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,000"><font face="Tahoma" size="2">Пространст.
-          интенсивность, град/10 м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Угол
-          установки отклон., град</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;0,00"><font face="Tahoma" size="2">Интенсив.
-          по зениту, град/10 м</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9" sdnum="1049;0;@"><font face="Tahoma"
-                                                                                   size="2">Комментарий</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9"><font face="Tahoma" size="2">Разница вертикальных глубин
-          между ХХХ (план) и ХХХ (факт)</font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "2px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "2px solid #000000"
-        }} align="center" valign="middle" bgcolor="#E2F0D9"><font face="Tahoma" size="2">Расстояние в пространстве между
-          ХХХ (план) и ХХХ (факт)</font></td>
-      </tr>
-      <tr>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} height="25" align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="bottom"><font face="Arial Cyr"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle" sdnum="1049;0;0,00"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "2px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="middle"><font size="2" color="#000000"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="bottom"><font face="Tahoma" size="2"><br/></font></td>
-        <td style={{
-          borderTop: "1px solid #000000",
-          borderBottom: "1px solid #000000",
-          borderLeft: "1px solid #000000",
-          borderRight: "1px solid #000000"
-        }} align="center" valign="bottom"><font face="Tahoma" size="2"><br/></font></td>
-      </tr>
-    </table>
-    <div>&nbsp;</div>
-    <p style={{textAlign: "right"}}><b>{date}</b></p>
-  </>)
-}

src/components/Sludge.jsx

@@ -1,383 +0,0 @@
-let date = new Date().toLocaleString()
-
-export function Sludge() {
-  return (<>
-      <table cellspacing="0" border="0">
-        <colGroup span="22" width="85"></colGroup>
-        <tr>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "2px solid #000000",
-            borderRight: "2px double #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="3" height="130" align="center" valign="middle" bgcolor="#FFFF99"><b><font face="Tahoma"
-                                                                                                size="2">N пробы</font></b>
-          </td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "2px solid #000000",
-            borderRight: "2px double #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="3" align="center" valign="middle" bgcolor="#FFFF99"><b><font face="Tahoma" size="2">Глубина
-            отбора пробы</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "2px solid #000000",
-            borderRight: "2px double #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} colSpan="9" align="center" valign="middle" bgcolor="#FFFF99"><b><font face="Tahoma"
-                                                                                   size="2">Литология</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "2px solid #000000",
-            borderRight: "2px double #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="3" align="center" valign="middle" bgcolor="#FFFF99"><b><font face="Tahoma" size="2">Краткое
-            описание</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "2px solid #000000",
-            borderRight: "2px double #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="3" align="center" valign="middle" bgcolor="#AFABAB"><b><font face="Tahoma" size="2">ЛБА
-            бурового раствора </font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "2px double #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="3" align="center" valign="middle" bgcolor="#FFCC99"><b><font face="Tahoma" size="2">ЛБА
-            (шлама)</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderBottom: "2px solid #000000",
-            borderLeft: "2px solid #000000",
-            borderRight: "2px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} colSpan="6" align="center" valign="bottom" bgcolor="#FFFF99" sdnum="1049;0;0,000"><b><font face="Tahoma"
-                                                                                                        size="2">Газопоказания</font></b>
-          </td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "2px solid #000000",
-            borderRight: "2px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="3" align="center" valign="middle" bgcolor="#FFFF99" sdnum="1049;0;0,000"><b><font face="Tahoma"
-                                                                                                        size="2">Мех.
-            скорость</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "2px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="3" align="center" valign="middle" bgcolor="#FFCC99" sdnum="1049;0;0,00"><b><font
-            face="Tahoma" size="2">Предварительное заключение о насыщении по ГК</font></b></td>
-        </tr>
-        <tr>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "2px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Песчаник
-            (%) </font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Алевролит
-            (%)</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Аргиллит
-            (%)</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Аргиллит
-            бит. (%)</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Уголь
-            (%)</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Песок
-            (%)</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Глина
-            (%)</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Известняк
-            (%)</font></b></td>
-          <td style={{
-            borderTop: "2px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "2px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF"><b><font face="Tahoma" size="2">Цемент
-            (%)</font></b></td>
-          <td style={{
-            borderLeft: "2px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF" sdnum="1049;0;0,000"><b><font face="Tahoma"
-                                                                                                        size="2">Сумма
-            УВ мах. (абс%) </font></b></td>
-          <td style={{
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF" sdnum="1049;0;0,000"><b><font face="Tahoma"
-                                                                                                        size="2">С1
-            метан (отн%)</font></b></td>
-          <td style={{
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF" sdnum="1049;0;0,000"><b><font face="Tahoma"
-                                                                                                        size="2">С2 этан
-            (отн%)</font></b></td>
-          <td style={{borderRight: "1px solid #000000", fontSize: "14", fontFamily: "Tahoma, sans-serif"}} rowSpan="2"
-              align="center" valign="middle" bgcolor="#CCCCFF" sdnum="1049;0;0,000"><b><font face="Tahoma" size="2">С3
-            пропан (отн%)</font></b></td>
-          <td style={{
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} rowSpan="2" align="center" valign="middle" bgcolor="#CCCCFF" sdnum="1049;0;0,000"><b><font face="Tahoma"
-                                                                                                        size="2">С4
-            бутан (отн%)</font></b></td>
-          <td style={{borderLeft: "1px solid #000000", fontSize: "14", fontFamily: "Tahoma, sans-serif"}} rowSpan="2"
-              align="center" valign="middle" bgcolor="#CCCCFF" sdnum="1049;0;0,000"><b><font face="Tahoma" size="2">С5
-            пентан (отн%)</font></b></td>
-        </tr>
-        <tr>
-        </tr>
-        <tr>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} height="40" align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-          <td style={{
-            borderTop: "1px solid #000000",
-            borderBottom: "1px solid #000000",
-            borderLeft: "1px solid #000000",
-            borderRight: "1px solid #000000",
-            fontSize: "14",
-            fontFamily: "Tahoma, sans-serif"
-          }} align="left" valign="bottom"><font size="2" color="#000000"><br/></font></td>
-        </tr>
-      </table>
-      <div>&nbsp;</div>
-      <p style={{textAlign: "right"}}><b>{date}</b></p>
-    </>
-  )
-}

src/components/SludgeDiagram.jsx

@@ -0,0 +1,194 @@
+import {Table} from 'antd'
+
+const columns = [
+  {
+      title: 'N пробы',
+      key: 'probeNumber',
+      dataIndex: 'probeNumber',
+      align: 'center',
+      className: 'yellow-background'
+  },
+  {
+      title: 'Глубина отбора пробы',
+      key: 'probeExtractionDepth',
+      dataIndex: 'probeExtractionDepth',
+      align: 'center',
+      className: 'yellow-background'
+  },
+  {
+    title: 'Литология',
+    key: 'lithology',
+    dataIndex: 'lithology',
+    align: 'center',
+    className: 'yellow-background',
+    children: [
+      {
+        title: 'Песчаник (%)',
+        key: 'sandstone',
+        dataIndex: 'sandstone',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'Алевролит (%)',
+        key: 'siltstone',
+        dataIndex: 'siltstone',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'Аргиллит (%)',
+        key: 'argillit',
+        dataIndex: 'argillit',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'Аргиллит бит. (%)',
+        key: 'brokenArgillit',
+        dataIndex: 'verticalDepth',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'Уголь (%)',
+        key: 'coal',
+        dataIndex: 'coal',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'Песок (%)',
+        key: 'sand',
+        dataIndex: 'sand',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'Глина (%)',
+        key: 'clay',
+        dataIndex: 'clay',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'Известняк (%)',
+        key: 'camstone',
+        dataIndex: 'camstone',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'Цемент (%)',
+        key: 'cement',
+        dataIndex: 'cement',
+        align: 'center',
+        className: 'lightpurple-background'
+      }
+    ]
+  },
+  
+  {
+    title: 'Краткое описание',
+    key: 'summary',
+    dataIndex: 'summary',
+    align: 'center',
+    className: 'yellow-background'
+  },
+  {
+    title: 'ЛБА бурового раствора',
+    key: 'drillingMud',
+    dataIndex: 'drillingMud',
+    align: 'center',
+    className: 'lightgray-background'
+  },
+  {
+    title: 'ЛБА (шлама)',
+    key: 'sludge',
+    dataIndex: 'sludge',
+    align: 'center',
+    className: 'lightorange-background'
+  },
+  {
+    title: 'Газопоказания',
+    key: 'gasIndications',
+    dataIndex: 'gasIndications',
+    align: 'center',
+    className: 'yellow-background',
+    children: [
+      {
+        title: 'Сумма УВ мах. (абс%)',
+        key: 'maxSum',
+        dataIndex: 'maxSum',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'С1 метан (отн%)',
+        key: 'methane',
+        dataIndex: 'depthPlanFactDifference',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'С2 этан (отн%)',
+        key: 'ethan',
+        dataIndex: 'ethan',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'С3 пропан (отн%)',
+        key: 'propane',
+        dataIndex: 'propane',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'С4 бутан (отн%)',
+        key: 'butane',
+        dataIndex: 'butane',
+        align: 'center',
+        className: 'lightpurple-background'
+      },
+      {
+        title: 'С5 пентан (отн%)',
+        key: 'pentane',
+        dataIndex: 'pentane',
+        align: 'center',
+        className: 'lightpurple-background'
+      }
+    ]
+  },
+  {
+    title: 'Мех. скорость',
+    key: 'mechanicalSpeed',
+    dataIndex: 'mechanicalSpeed',
+    align: 'center',
+    className: 'yellow-background'
+  },
+  {
+    title: 'Предварительное заключение о насыщении по ГК',
+    key: 'preliminaryConclusion',
+    dataIndex: 'preliminaryConclusion',
+    align: 'center',
+    className: 'lightorange-background'
+  }
+];
+
+const data = []
+
+export function SludgeDiagram() {
+  return (<>
+    <Table
+      columns={columns}
+      dataSource={data}
+      size={'small'}
+      bordered={true}
+      pagination={false}
+    />
+    <div>&nbsp;</div>
+    <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
+  </>
+  )
+}

src/pages/LastData.jsx

@@ -1,13 +1,13 @@
 import {Button, Modal, Checkbox } from "antd";
 import {CementFluid} from "../components/CementFluid";
 import {useState} from "react";
-import {Sludge} from "../components/Sludge";
+import {SludgeDiagram} from "../components/SludgeDiagram";
-import {NnbTable} from "../components/NnbTable"
+import {Nnb} from "../components/Nnb"
 import Disposition from "../components/Disposition";
 
 
 export default function LastData() {
-  const [tableVisible, setTableVisible] = useState(false)
+  const [tableVisible, setCementTableVisible] = useState(false)
   const [tableSludgeVisible, setTableSludgeVisible] = useState(false)
   const [tableNNBVisible, setTableNNBVisible] = useState(false)
   const [dispositionVisible, setDispositionVisible] = useState(false)
@@ -15,16 +15,16 @@ export default function LastData() {
   return (
     <>
       <div>&nbsp;</div>
-      <Button type="primary" onClick={() => setTableVisible(true)}>
+      <Button type="primary" onClick={() => setCementTableVisible(true)}>
         Последний замер бурового раствора
       </Button>
       <Modal
         title='Последние показатели бурового раствора'
         centered
         visible={tableVisible}
-        onOk={() => setTableVisible(false)}
+        onOk={() => setCementTableVisible(false)}
-        onCancel={() => setTableVisible(false)}
+        onCancel={() => setCementTableVisible(false)}
-        width={1800}
+        width={2000}
         okText='Ок'
         cancelText='Отмена'
       >
@@ -39,11 +39,11 @@ export default function LastData() {
         visible={tableSludgeVisible}
         onOk={() => setTableSludgeVisible(false)}
         onCancel={() => setTableSludgeVisible(false)}
-        width={1600}
+        width={2000}
         okText='Ок'
         cancelText='Отмена'
       >
-        <Sludge/>
+        <SludgeDiagram/>
       </Modal>
       <Button type="primary" onClick={() => setTableNNBVisible(true)} style={{marginLeft: "5px"}}>
         ННБ
@@ -54,11 +54,11 @@ export default function LastData() {
         visible={tableNNBVisible}
         onOk={() => setTableNNBVisible(false)}
         onCancel={() => setTableNNBVisible(false)}
-        width={1400}
+        width={2000}
         okText='Ок'
         cancelText='Отмена'
       >
-        <NnbTable/>
+        <Nnb/>
       </Modal>
       <Button type="primary" onClick={() => setDispositionVisible(true)} style={{marginLeft: "5px"}}>
         Распоряжение

src/pages/Well.jsx

@@ -48,7 +48,7 @@ export default function Well() {
         </Menu.Item>
         <SubMenu
             key="documentsSub"
-            title={<span className="linkDocuments">Документы</span>}
+            title={<Link to={{pathname: `${rootPath}/documents/fluidService`}} className="linkDocuments">Документы</Link>}
             icon={<FolderOutlined/>}
             selectable={true}
           >

src/styles/App.less

@@ -65,6 +65,22 @@ html {
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
+.yellow-background {
+  background-color: #FFFF99 !important;
+}
+
+.lightgray-background {
+  background-color: #AFABAB !important;
+}
+
+.lightpurple-background {
+  background-color: #CCCCFF !important;
+}
+
+.lightorange-background {
+  background-color: #FFCC99 !important;
+}
+
 .sheet{
   padding: 5px 24px;
   min-height: 280px;