asb_cloud_front/src/pages/Archive.jsx

import { useState, useEffect } from 'react'
import {
  Button,
  DatePicker,
  ConfigProvider,
  Select,
  Row,
  Col,
} from 'antd'
import { useParams } from 'react-router-dom'
import { Subscribe } from '../services/signalr'
import { DataService } from '../services/api'
import 'moment/locale/ru'
import locale from 'antd/lib/locale/ru_RU'
import { ChartTimeArchive } from '../components/charts/ChartTimeArchive'
import { Display } from '../components/Display'
import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter'
import { UserOfWells } from '../components/UserOfWells'


const { RangePicker } = DatePicker;
const { Option } = Select;

// Выбор периода времени
const PeriodOfTime = () => {
  // const [startDate, setStartDate] = useState(new Date());

  return (
    <ConfigProvider locale={locale}>
      <RangePicker
        showTime
        style={{ margin: '5px 5px', }}
      />
    </ConfigProvider>
  )
}

// Выбор "перьев" для графиков - перенести в шапку графика
const SelectDataCharts = () => {
  const linesCollection = [
    { label: "Глубина забоя", xAccessorName: "wellDepth", color: '#a0a' },
    { label: "Положение инструмента", xAccessorName: "bitDepth", color: '#a0a' },
    { label: "Высота талевого блока", xAccessorName: "blockPosition", color: '#a0a' },
    { label: "Талевый блок. Мин положение", xAccessorName: "blockPositionMin", color: '#a0a' },
    { label: "Талевый блок. Макс положение", xAccessorName: "blockPositionMax", color: '#a0a' },
    { label: "Скорость талевого блока", xAccessorName: "blockSpeed", color: '#a0a' },
    { label: "Скорости талевого блока. Задание", xAccessorName: "blockSpeedSp", color: '#a0a' },
    { label: "Талевый блок. Задание скорости для роторного бурения", xAccessorName: "blockSpeedSpRotor", color: '#a0a' },
    { label: "Талевый блок. Задание скорости для режима слайда", xAccessorName: "blockSpeedSpSlide", color: '#a0a' },
    { label: "Талевый блок. Задание скорости для проработки", xAccessorName: "blockSpeedSpDevelop", color: '#a0a' },
    { label: "Давление", xAccessorName: "pressure", color: '#a0a' },
    { label: "Давление. Холостой ход", xAccessorName: "pressureIdle", color: '#a0a' },
    { label: "Давление. Задание", xAccessorName: "pressureSp", color: '#a0a' },
    { label: "Давление. Задание для роторного бурения", xAccessorName: "pressureSpRotor", color: '#a0a' },
    { label: "Давление. Задание для режима слайда", xAccessorName: "pressureSpSlide", color: '#a0a' },
    { label: "Давление. Задание для проработки", xAccessorName: "pressureSpDevelop", color: '#a0a' },
    { label: "Давление дифф. Аварийное макс.", xAccessorName: "pressureDeltaLimitMax", color: '#a0a' },
    { label: "Осевая нагрузка", xAccessorName: "axialLoad", color: '#a0a' },
    { label: "Осевая нагрузка. Задание", xAccessorName: "axialLoadSp", color: '#a0a' },
    { label: "Осевая нагрузка. Аварийная макс.", xAccessorName: "axialLoadLimitMax", color: '#a0a' },
    { label: "Вес на крюке", xAccessorName: "hookWeight", color: '#a0a' },
    { label: "Вес на крюке. Холостой ход", xAccessorName: "hookWeightIdle", color: '#a0a' },
    { label: "Вес на крюке. Посадка", xAccessorName: "hookWeightLimitMin", color: '#a0a' },
    { label: "Вес на крюке. Затяжка", xAccessorName: "hookWeightLimitMax", color: '#a0a' },
    { label: "Момент на роторе", xAccessorName: "rotorTorque", color: '#a0a' },
    { label: "Момент на роторе. Холостой ход", xAccessorName: "rotorTorqueIdle", color: '#a0a' },
    { label: "Момент на роторе. Задание", xAccessorName: "rotorTorqueSp", color: '#a0a' },
    { label: "Момент на роторе. Аварийный макс.", xAccessorName: "rotorTorqueLimitMax", color: '#a0a' },
    { label: "Обороты ротора", xAccessorName: "rotorSpeed", color: '#a0a' },
    { label: "Расход", xAccessorName: "flow", color: '#a0a' },
    { label: "Расход. Холостой ход", xAccessorName: "flowIdle", color: '#a0a' },
    { label: "Расход. Аварийный макс.", xAccessorName: "flowDeltaLimitMax", color: '#a0a' },
  ]
  const children = linesCollection.map((line) => (<Option key={line.xAccessorName}>{line.label}</Option>))
  function handleChange(value) {
    console.log(`selected ${value}`);
  }

  return (
    <Select
      mode="multiple"
      allowClear
      style={{ width: '50%' }}
      placeholder="Выберите значения"
      defaultValue={["wellDepth"]}
      onChange={handleChange}
    >
      {children}
    </Select>
  )
}

const Column = ({ lineGroup, data, interval }) => {
  let lines = [lineGroup.linePv]

  if (lineGroup.lineSp)
    lines.push(lineGroup.lineSp)

  let dataLast = null
  let pv = null
  if (data?.length > 0) {
    dataLast = data[data.length - 1];
    if (lineGroup.linePv)
      pv = dataLast[lineGroup.linePv?.xAccessorName]
  }
  return (
    <>
      <Display
        label={lineGroup.label}
        value={pv}
        suffix={lineGroup.linePv?.units} />
      <ChartTimeArchive
        data={data}
        yDisplay={lineGroup.yDisplay}
        lines={lines}
        interval={interval} />
      <ChartTimeOnlineFooter
        data={dataLast}
        {...lineGroup} />
    </>)
}

const paramsGroups = []

export default function Archive(props) {
  let { id } = useParams();
  const [saubData, setSaubData] = useState([])
  const [chartInterval, setChartInterval] = useState(600)

  const handleReceiveDataSaub = (data) => {
    if (data) {
      setSaubData(data)
    }
  }

  useEffect(() => {
    DataService.getData(id)
      .then(handleReceiveDataSaub)
      .catch(error => console.error(error))

    let unSubscribeMessages = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
    return () => {
      unSubscribeMessages()
    }
  }, [id]);

  const colSpan = 24 / (paramsGroups.length)

  return (<>
    <div style={{ display: 'flex' }}>
      <h2>Архив</h2>
      <span style={{ flexGrow: 10 }}></span>
      <UserOfWells data={saubData} />
    </div>
    <hr />
    <Button type="primary" style={{
      borderRadius: '5px',
      font: 'bold',
      textAlign: 'center',
      margin: '5px 5px',
    }}>Добавить график</Button>
    <PeriodOfTime />
    <SelectDataCharts />
    <Row style={{ marginBottom: '1rem' }}>
      <Col>
        Интервал:&nbsp;
        <Select defaultValue="600" onChange={setChartInterval}>
          <Option value='600'>10 минут</Option>
          <Option value='1800'>30 минут</Option>
          <Option value='3600'>1 час</Option>
          <Option value='21600'>6 час</Option>
          <Option value='86400'>1 день</Option>
        </Select>
      </Col>
    </Row>
    <Row>
      <Col span={24 - 2}>
        <Row>
          {paramsGroups.map(group =>
            <Col span={colSpan} className='border_small' key={group.label}>
              <Column data={saubData} lineGroup={group} interval={chartInterval} />
            </Col>)}
        </Row>
      </Col>
    </Row>
  </>)
}