From fa78376c2ada021bc87495467ca461a1874c76a6 Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Tue, 5 Oct 2021 14:57:56 +0500 Subject: [PATCH] CF2-49: Fixed Measures appearence. Added switch values by history. --- src/pages/Measure/MeasureTable2.jsx | 110 +++++++++++----------------- src/pages/Measure/View.jsx | 18 ++--- src/pages/Measure/index.jsx | 48 ++++++------ src/styles/index.css | 12 +++ src/styles/measure.css | 25 +------ 5 files changed, 91 insertions(+), 122 deletions(-) diff --git a/src/pages/Measure/MeasureTable2.jsx b/src/pages/Measure/MeasureTable2.jsx index f543a2d..5c6a04a 100644 --- a/src/pages/Measure/MeasureTable2.jsx +++ b/src/pages/Measure/MeasureTable2.jsx @@ -1,83 +1,59 @@ -import { useState, useEffect } from 'react' -import { Button, Modal, Timeline } from 'antd' +import { useState, useEffect } from "react" +import { Button, Timeline } from 'antd' import moment from 'moment' -import { HourglassOutlined } from '@ant-design/icons' -import LoaderPortal from '../../components/LoaderPortal' -import { invokeWebApiWrapperAsync } from '../../components/factory' -import { MeasureService } from '../../services/api' -import { Editor } from './Editor' -import TimelineItem from 'antd/lib/timeline/TimelineItem' +import { ClockCircleOutlined } from '@ant-design/icons' import { View } from './View' +import '../../styles/index.css' import '../../styles/measure.css' const format='YYYY.MM.DD HH:mm' -export const MeasureTable2 = ({idWell, idCategory, title, columns, currentValues}) => { - const [showLoader, setShowLoader] = useState(false) - const [showEditor, setShowEditor] = useState(false) - const [history, setHistory] = useState([]) +export const MeasureTable2 = ({title, columns, values}) => { + var defaultDisplay = values && values.length > 1 + ? values[values.length-1] + : [] - const updateHistory = () => invokeWebApiWrapperAsync(async()=>{ - const data = await MeasureService.getHisory(idWell, idCategory) - const story = data?.map( i=> ({ - id: i.id, - idWell: i.idWell, - idCategory: i.idCategory, - timestamp: moment.utc(i.timestamp).local().format(format), - ...i.data})) - setHistory(story??[]) - } - , setShowLoader - , `Не удалось загрузить последние данные по скважине ${idWell}`) + const [displayedValues, setDisplayedValues] = useState([]); - useEffect(updateHistory, [idWell, idCategory]) - - const lastHistoryIndex = history.length + useEffect(() => { + setDisplayedValues(defaultDisplay) + }, [defaultDisplay]) return <> - -   -

{title}

-   -
-
- - {history.map((item, index)=> - setShowEditor(true)} - value={item} - > -

{item.timestamp}

- )} +   +

{title}

+   +
+
+
+ + + +
+
+ + {values.map((item, index) => + setDisplayedValues(values.find(el => el.id === item.id))} + dot={index === values.length - 1 + ? + : null} + value={moment.utc(item.timestamp).local().format(format)} + > + {moment.utc(item.timestamp).local().format(format)} + + )}
-
- -
- setShowEditor(false)} - onCancel={() => setShowEditor(false)} - width="95%" - footer={null} - > - + - - +
+
} \ No newline at end of file diff --git a/src/pages/Measure/View.jsx b/src/pages/Measure/View.jsx index 7c19ec3..0c12887 100644 --- a/src/pages/Measure/View.jsx +++ b/src/pages/Measure/View.jsx @@ -12,23 +12,23 @@ export const View = ({columns, item}) => { return <> {column.title} {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]} diff --git a/src/pages/Measure/index.jsx b/src/pages/Measure/index.jsx index 129b78d..39a0a68 100644 --- a/src/pages/Measure/index.jsx +++ b/src/pages/Measure/index.jsx @@ -9,23 +9,27 @@ import LoaderPortal from '../../components/LoaderPortal' //import { MeasureTable } from './MeasureTable' import { MeasureTable2 } from './MeasureTable2' -const format='YYYY.MM.DD HH:mm' - export default function Measure({idWell}){ const [showLoader, setShowLoader] = useState(false) - const [currentFluidValues, setCurrentFluidValues] = useState([]) - const [currentMudValues, setCurrentMudValues] = useState([]) - const [currentNnbValues, setCurrentNnbValues] = useState([]) + const [fluidValues, setFluidValues] = useState([]) + const [mudValues, setMudValues] = useState([]) + const [nnbValues, setNnbValues] = useState([]) const updateCurrentValues = () => invokeWebApiWrapperAsync(async()=>{ - const data = await MeasureService.getAllLast(idWell) + // const data = await MeasureService.getAllLast(idWell) - const fluidValues = data?.find(value => value.idCategory === 1) - setCurrentFluidValues(fluidValues ?? []) - const mudValues = data?.find(value => value.idCategory === 2) - setCurrentMudValues(mudValues ?? []) - const nnbValues = data?.find(value => value.idCategory === 3) - setCurrentNnbValues(nnbValues ?? []) + // const fluids = data?.filter(value => value.idCategory === 1) + // setFluidValues(fluids ?? []) + // const muds = data?.filter(value => value.idCategory === 2) + // setMudValues(muds ?? []) + // const nnbs = data?.filter(value => value.idCategory === 3) + // setNnbValues(nnbs ?? []) + const fluids = await MeasureService.getHisory(idWell, 1) + setFluidValues(fluids ?? []) + const muds = await MeasureService.getHisory(idWell, 2) + setMudValues(muds ?? []) + const nnbs = await MeasureService.getHisory(idWell, 3) + setNnbValues(nnbs ?? []) } ,setShowLoader ,`Не удалось загрузить последние данные по скважине ${idWell}`) @@ -35,25 +39,19 @@ export default function Measure({idWell}){ return <> - + diff --git a/src/styles/index.css b/src/styles/index.css index bf9acb7..b9c1613 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -11,6 +11,10 @@ body { display: flex; } +.fd-column { + flex-direction: column; +} + .d-inline { display: inline; } @@ -27,6 +31,10 @@ body { width: 100% } +.mt-8px { + margin-top: 8px; +} + .mt-20px { margin-top: 20px; } @@ -39,6 +47,10 @@ body { margin-left: 5px; } +.ml-10px { + margin-left: 10px; +} + .ml-30px { margin-left: 30px; } diff --git a/src/styles/measure.css b/src/styles/measure.css index 77824cc..433e713 100644 --- a/src/styles/measure.css +++ b/src/styles/measure.css @@ -1,32 +1,15 @@ .measure-dates { - width: 15%; overflow-y: scroll; } -.measure-button { - display: flex; - margin-top: 8px; - width: 95%; - height: 30px; - border: 1px solid black; - border-radius: 5px; -} - .measure-button:hover { cursor: pointer; } -.last-measure-button { - display: flex; +.mt-8px { margin-top: 8px; - background-color: #DCDCDC; - width: 95%; - height: 30px; - border: 1px solid black; - border-radius: 5px; } -.last-measure-button:hover { - cursor: pointer; - background-color: #D3D3D3; -} \ No newline at end of file +.ml-10px { + margin-left: 10px; +}