asb_cloud_front/src/components/SludgeDiagram.jsx

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>
  </>
  )
}