CF2-33: Переделаны таблицы Документов

src/components/CementFluid.jsx

@@ -0,0 +1,106 @@
+let date = new Date().toLocaleString()
+
+export function CementFluid() {
+  return (<>
+    <table>
+      <thead style={{borderTop:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "800px", fontWeight: "800", 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:"2px solid", borderLeft: "2px solid", borderRight: "2px solid", borderBottom: "2px solid", width: "66px", fontWeight: "800", textAlign: "center"}}>Температура, °C</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"}}>R300</td>
+        <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/Disposition.jsx

@@ -0,0 +1,19 @@
+let date = new Date().toLocaleString()
+
+
+export default function Disposition() {
+  return (
+    <>
+      <h1 style={{textAlign: "center"}}>Распоряжение</h1>
+
+      <p style={{textAlign: "justify"}}>
+        Текст
+      </p>
+
+      <p style={{textAlign: "right"}}><i>Ф.И.О.</i></p>
+      <p style={{textAlign: "right"}}><i>Должность</i></p>
+      <p style={{textAlign: "right"}}><i>Компания</i></p>
+      <p style={{textAlign: "right"}}><b>{date}</b></p>
+    </>
+  )
+}

src/components/Documents.jsx

@@ -0,0 +1,170 @@
+import {Table, DatePicker, Form, Button, Upload, ConfigProvider} from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import MenuDocuments from "./MenuDocuments";
+import {useState, useEffect} from "react";
+import {useParams} from 'react-router-dom'
+import notify from './notify'
+import LoaderPortal from './LoaderPortal'
+import locale from "antd/lib/locale/ru_RU";
+import moment from 'moment'
+
+const pageSize = 26
+const {RangePicker} = DatePicker;
+
+const columns = [
+  {
+      title: 'Документ',
+      key: 'document',
+      dataIndex: 'name',
+  },
+  {
+      title: 'Дата загрузки',
+      key: 'uploadDate',
+      dataIndex: 'uploadDate',
+      render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
+  },
+  {
+      title: 'Ф.И.О.',
+      key: 'name',
+      dataIndex: 'name',
+  }
+];
+
+export default function Documents() {
+  let {id} = useParams()
+
+  const [page, setPage] = useState(1)
+  const [range, setRange] = useState([])
+  const [pagination, setPagination] = useState(null)
+  const [files, setFiles] = useState([])
+
+  const [loader, setLoader] = useState(false)
+
+  const submitFileFormProps = {
+    //action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+    onChange({ file, fileList }) {
+      if (file.status !== 'uploading') {
+        console.log(file, fileList);
+      }
+    }
+  }
+
+  const onChangeRange = (range) => {
+    setRange(range)
+  }
+
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  }
+
+  const onFinishFailed = (errorInfo) => {
+    console.log('Failed:', errorInfo);
+  }
+
+  const fileList = []
+
+  useEffect(() => {
+    const GetDocuments = async () => {
+      setLoader(true)
+
+      try {
+        let begin = null
+        let end = null
+        if (range?.length > 1) {
+          begin = range[0].toISOString()
+          end = range[1].toISOString()
+        }
+        // await AnalyticsService.getOperationsByWell(
+        //     `${id}`,
+        //     (page-1) * pageSize,
+        //     pageSize,
+        //     begin,
+        //     end).then((paginatedFiles) => {
+        //         setFiles(paginatedFiles?.items.map(f => {
+        //             return {
+        //                 key: f.id,
+        //                 begin: f.date,
+        //                 ...f
+        //             }
+        //         }))
+
+        //         setPagination({
+        //             total: paginatedFiles?.count,
+        //             current: Math.floor(paginatedFiles?.skip / pageSize),
+        //         })
+        //     }
+        //)
+      } catch (ex) {
+        notify(`Не удалось загрузить файлы по скважине "${id}"`, 'error')
+        console.log(ex)
+      }
+      setLoader(false)
+    }
+    GetDocuments()
+  }, [id, range])
+
+  return (
+    <div>
+      <MenuDocuments/>
+      <div className='filter-group'>
+        <h3 className='filter-group-heading'>Фильтр документов:</h3>
+        <ConfigProvider locale={locale}>
+            <RangePicker
+                showTime
+                onChange={onChangeRange}
+            />
+        </ConfigProvider>
+      </div>
+      <LoaderPortal show={loader}></LoaderPortal>
+      <div>&nbsp;</div>
+      <Form
+        name="DocumentsUploadForm"
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+      >
+        <div style={{display: 'flex'}}>
+          <Form.Item
+            name="fileInput"
+            rules={[{ required: true, message: 'Выберите файл' }]}
+          >
+            {/* <input type="file"
+                  onChange={(e) => {
+                    setFile(e.target.value)
+                    files.push(e.target.value)
+                    localStorage.setItem(e.target.value, file)
+                    setFiles(files)
+                    console.log(e.target.value)
+                  }
+            }/> */}
+            <Upload {...submitFileFormProps}>
+              <Button icon={<UploadOutlined />}>Загрузить файл</Button>
+            </Upload>
+          </Form.Item>
+          <Form.Item>
+            <Button 
+              type="primary" 
+              htmlType="submit"
+              disabled={fileList.length === 0}
+              style={{marginLeft: '10px'}}
+            >
+              Отправить
+            </Button>
+        </Form.Item>
+      </div>
+      </Form>
+      <div>&nbsp;</div>
+      <Table
+        columns={columns}
+        dataSource={files}
+        size={'small'}
+        pagination={{
+          pageSize: pageSize,
+          showSizeChanger: false,
+          total: pagination?.total,
+          current: page,
+          onChange: (page) => setPage(page)
+        }}
+        rowKey={(record) => record.id}
+      />
+    </div>);
+}

src/components/MenuDocuments.jsx

@@ -0,0 +1,40 @@
+import {Menu} from "antd";
+import {FolderOutlined} from "@ant-design/icons";
+import {Link} from "react-router-dom";
+
+
+export default function MenuDocuments() {
+  return(
+  <>
+    <Menu
+      mode="horizontal"
+      selectable={true}
+      className="well_menu"
+    >
+      <Menu.Item key="1" icon={<FolderOutlined/>}>
+        <Link to='fluidService'>Растворный сервис</Link>
+      </Menu.Item>
+      <Menu.Item key="2" icon={<FolderOutlined/>}>
+        <Link to='cementing'>Цементирование</Link>
+      </Menu.Item>
+      <Menu.Item key="3" icon={<FolderOutlined/>}>
+        <Link to='nnb'>ННБ</Link>
+      </Menu.Item>
+      <Menu.Item key="4" icon={<FolderOutlined/>}>
+        <Link to='gti'>ГТИ</Link>
+      </Menu.Item>
+      <Menu.Item key="5" icon={<FolderOutlined/>}>
+        <Link to='documentsForWell'>Документы по скважине</Link>
+      </Menu.Item>
+      <Menu.Item key="6" icon={<FolderOutlined/>}>
+        <Link to='supervisor'>Супервайзер</Link>
+      </Menu.Item>
+      <Menu.Item key="7" icon={<FolderOutlined/>}>
+        <Link to='master'>Мастер</Link>
+      </Menu.Item>
+      <Menu.Item key="8" icon={<FolderOutlined/>}>
+        <Link to='lastData'>Последние данные</Link>
+      </Menu.Item>
+    </Menu>
+  </>)
+}

src/components/NnbTable.jsx

@@ -0,0 +1,250 @@
+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

@@ -0,0 +1,383 @@
+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/pages/Cementing.jsx

@@ -0,0 +1,8 @@
+import Documents from "../components/Documents"
+
+export default function Cementing() {
+
+    return(
+        <Documents />
+    )
+}

src/pages/DocumentForWell.jsx

@@ -0,0 +1,8 @@
+import Documents from "../components/Documents"
+
+export default function DocumentsForWell() {
+
+    return(
+        <Documents />
+    )
+}

src/pages/FluidService.jsx

@@ -0,0 +1,8 @@
+import Documents from "../components/Documents"
+
+export default function FluidService() {
+
+    return(
+        <Documents />
+    )
+}

src/pages/Gti.jsx

@@ -0,0 +1,8 @@
+import Documents from "../components/Documents"
+
+export default function Gti() {
+
+    return(
+        <Documents />
+    )
+}

src/pages/LastData.jsx

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

src/pages/Master.jsx

@@ -0,0 +1,8 @@
+import Documents from "../components/Documents"
+
+export default function Master() {
+
+    return(
+        <Documents />
+    )
+}

src/pages/Messages.jsx

@@ -110,7 +110,7 @@ export default function Messages() {
     <>
 
       <div className='filter-group'>
-        <h3 className='filter-group__heading'>Фильтр сообщений</h3>
+        <h3 className='filter-group-heading'>Фильтр сообщений</h3>
         <Select
           mode="multiple"
           allowClear

src/pages/Nnb.jsx

@@ -0,0 +1,8 @@
+import Documents from "../components/Documents"
+
+export default function Nnb() {
+
+    return(
+        <Documents />
+    )
+}

src/pages/Supervisor.jsx

@@ -0,0 +1,8 @@
+import Documents from "../components/Documents"
+
+export default function Supervisor() {
+
+    return(
+        <Documents />
+    )
+}

src/pages/Well.jsx

@@ -7,6 +7,14 @@ import Messages from "../pages/Messages";
 import Report from "../pages/Report";
 import Analysis from "../pages/Analysis";
 import WellAnalysis from "../pages/WellAnalysis";
+import FluidService from "../components/Documents";
+import Cementing from "../pages/Cementing";
+import Nnb from "../pages/Nnb";
+import Gti from "../pages/Gti";
+import DocumentForWell from "../pages/DocumentForWell";
+import Supervisor from "../pages/Supervisor";
+import Master from "../pages/Master";
+import LastData from '../pages/LastData'
 import TelemetryView from "../pages/TelemetryView";
 
 const { Content } = Layout
@@ -14,6 +22,8 @@ const { Content } = Layout
 export default function Well() {
   let { id } = useParams()
 
+  const {SubMenu} = Menu
+
   return (<>
     <Layout>
       <Menu
@@ -42,6 +52,37 @@ export default function Well() {
         <Menu.Item key="7" icon={<FolderOutlined/>}>
           <Link to='archive'>Архив</Link>
         </Menu.Item>
+        <SubMenu
+            key="documentsSub"
+            title={<Link to='fluidService' className="linkDocuments">Документы</Link>}
+            icon={<FolderOutlined/>}
+            selectable={true}
+          >
+            <Menu.Item key="documentsSub1" icon={<FolderOutlined/>}>
+              <Link to='fluidService'>Растворный сервис</Link>
+            </Menu.Item>
+            <Menu.Item key="documentsSub1.1" icon={<FolderOutlined/>}>
+              <Link to='cementing'>Цементирование</Link>
+            </Menu.Item>
+            <Menu.Item key="documentsSub1.2" icon={<FolderOutlined/>}>
+              <Link to='nnb'>ННБ</Link>
+            </Menu.Item>
+            <Menu.Item key="documentsSub1.3" icon={<FolderOutlined/>}>
+              <Link to='gti'>ГТИ</Link>
+            </Menu.Item>
+            <Menu.Item key="documentsSub1.4" icon={<FolderOutlined/>}>
+              <Link to='documentsForWell'>Документы по скважине</Link>
+            </Menu.Item>
+            <Menu.Item key="documentsSub1.5" icon={<FolderOutlined/>}>
+              <Link to='supervisor'>Супервайзер</Link>
+            </Menu.Item>
+            <Menu.Item key="documentsSub1.6" icon={<FolderOutlined/>}>
+              <Link to='master'>Мастер</Link>
+            </Menu.Item>
+            <Menu.Item key="documentsSub1.7" icon={<FolderOutlined/>}>
+              <Link to='lastData'>Последние данные</Link>
+            </Menu.Item>
+          </SubMenu>
       </Menu>
 
       <Layout>
@@ -68,6 +109,33 @@ export default function Well() {
             <Route path="/well/:id/telemetry">
               <TelemetryView/>
             </Route>
+            <Route path="/well/:id/fluidService">
+              <FluidService/>
+            </Route>
+            <Route path="/well/:id/cementing">
+              <Cementing/>
+            </Route>
+            <Route path="/well/:id/nnb">
+              <Nnb/>
+            </Route>
+            <Route path="/well/:id/gti">
+              <Gti/>
+            </Route>
+            <Route path="/well/:id/documentsForWell">
+              <DocumentForWell/>
+            </Route>
+            <Route path="/well/:id/supervisor">
+              <Supervisor/>
+            </Route>
+            <Route path="/well/:id/master">
+              <Master/>
+            </Route>
+            <Route path="/well/:id/lastData">
+              <LastData/>
+            </Route>
+            <Route path="/well/:id/documents">
+              <FluidService/>
+            </Route>
             <Route path="/">
               <Redirect to={{pathname: `/well/${id}/telemetry`}}/>
             </Route>

src/pages/WellAnalysis.jsx

@@ -122,7 +122,7 @@ export default function WellAnalysis() {
 
     return(<>
         <div className='filter-group'>
-            <h3 className='filter-group__heading'>Фильтр операций</h3>
+            <h3 className='filter-group-heading'>Фильтр операций</h3>
                 <Select
                     mode="multiple"
                     allowClear

src/services/signalr/index.ts

@@ -14,12 +14,12 @@ type ConnectionsDict = {
 
 const Connections: ConnectionsDict = {
   'hubs/telemetry': new HubConnectionBuilder()
-  .withUrl(`http://192.168.1.70:5000/hubs/telemetry`, ConnectionOptions)
+  .withUrl(`http://localhost:5000/hubs/telemetry`, ConnectionOptions)
   .withAutomaticReconnect()
   .build(),
 
   'hubs/reports': new HubConnectionBuilder()
-  .withUrl(`http://192.168.1.70:5000/hubs/reports`, ConnectionOptions)
+  .withUrl(`http://localhost:5000/hubs/reports`, ConnectionOptions)
   .withAutomaticReconnect()
   .build()
 }

src/styles/index.css

@@ -48,3 +48,11 @@ code {
     monospace;
 }
 
+.linkDocuments {
+  color: #000;
+}
+
+.linkDocuments:hover {
+  color: #c32828;
+}
+

src/styles/message.css

@@ -33,7 +33,7 @@
   margin: 0 0 5px 0;
 }
 
-.filter-group__heading {
+.filter-group-heading {
   margin: 5px auto;
   align-items: center;
 }