Add Measure Editor

2021-08-30 16:40:56 +05:00 · 2021-08-30 16:40:56 +05:00 · 30b5ac8eb3
commit 30b5ac8eb3
parent 7a7a4663c5
8 changed files with 236 additions and 162 deletions
--- a/src/pages/Measure/Editor.jsx
+++ b/src/pages/Measure/Editor.jsx
@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react'
+import moment from 'moment'
+import { EditableTable, DatePickerWrapper } from '../../components/Table'
+import LoaderPortal from '../../components/LoaderPortal'
+import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { MeasureService } from '../../services/api'
+
+const format='YYYY.MM.DD HH:mm'
+
+const columnTimestamp = {
+  editable: true,
+  title: 'Время',
+  key:'timestamp',
+  dataindex:'timestamp',
+  input: <DatePickerWrapper/>,
+  width:'12em',
+  render: (text, record, idx) => record['timestamp'],
+}
+
+export const Editor = ({idWell, idCategory, columns, onUpdate}) => {
+  const [showLoader, setShowLoader] = useState(false)
+  const [history, setHistory] = useState([])
+
+  const update = () => 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
+  , "не удалось загрузить")
+
+  useEffect(update, [idWell, idCategory])
+
+  const onAdd = async (row) => {
+    const {id, idCategory: _idCategory, idWell : _idWell, timestamp, key, ...data} = row
+    const measure = {
+      id:0,
+      idWell: idWell,
+      idCategory: idCategory,
+      timestamp: timestamp?? moment(),
+      data,
+    }
+    await MeasureService.insert(idWell, measure)    
+    if(onUpdate)
+      onUpdate()
+    else
+      update()
+  }
+
+  const onEdit = async (row) => {
+    if(!row?.id)
+      return
+    const {id, idCategory: _idCategory, idWell : _idWell, timestamp, ...data} = row
+    const measure = {
+      id: id,
+      idWell: idWell,
+      idCategory: idCategory,
+      timestamp: timestamp?? moment(),
+      data,
+    }
+    await MeasureService.update(idWell, measure)
+    if(onUpdate)
+      onUpdate()
+    else
+      update()
+  }
+
+  const onDelete = async (row) => {
+    if(!row?.id)
+      return
+    await MeasureService.markAsDelete(idWell, row.id)
+    if(onUpdate)
+      onUpdate()
+    else
+      update()
+  }
+
+  return <LoaderPortal show={showLoader}>
+    <EditableTable
+      bordered
+      dataSource = {history}
+      columns = {[columnTimestamp,...columns]}
+      onRowAdd = {onAdd}
+      onRowEdit = {onEdit}
+      onRowDelete = {onDelete}
+      size = 'small'
+      scroll={{ x: 400, y: 600 }}
+    />
+  </LoaderPortal>
+}
--- a/src/pages/Measure/MeasureTable.jsx
+++ b/src/pages/Measure/MeasureTable.jsx
@ -1,27 +1,54 @@
 import { useState, useEffect } from 'react'
-import { Table } from 'antd'
+import { Table, Button, Modal } from 'antd'
+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'

 export const MeasureTable = ({idWell, idCategory, title, columns}) => {
  const [showLoader, setShowLoader] = useState(false)
-  const [lastData, setLastData] = useState([])
+  const [showEditor, setShowEditor] = useState(false)
+  const [lastData, setLastData] = useState({})

-  useEffect(()=>invokeWebApiWrapperAsync(async()=>{
+  const update = ()=>invokeWebApiWrapperAsync(async()=>{
    const data = await MeasureService.getLast(idWell, idCategory)
    setLastData(data)
  }
  , setShowLoader
  , "не удалось загрузить")
-  , [idWell, idCategory])
+
+  useEffect(update, [idWell, idCategory])
+
+  const timestamp = lastData ? new Date(lastData?.timestamp).toLocaleString() : '-'

  return <LoaderPortal show={showLoader}>
    <h3>{title}</h3>
-    <span>дата: {lastData?.timestamp}</span>
+    <span>Дата: {timestamp}</span>
+    &nbsp;
+    <Button 
+      onClick={() => setShowEditor(true)}
+      icon={<HourglassOutlined/>}>История</Button>  
    <Table
+      style={{marginTop:16}}
+      bordered
      dataSource = {[lastData?.data]}
      columns = {columns}
-    />
+      scroll={{ x: 400, y: 600 }}/>
+    <Modal
+        title={title}
+        centered
+        visible={showEditor}
+        onOk={() => setShowEditor(false)}
+        onCancel={() => setShowEditor(false)}
+        width="95%"
+        footer={null}
+        >
+      <Editor
+        idWell={idWell}
+        idCategory={idCategory} 
+        columns = {columns}
+        onUpdate={update}/>
+    </Modal>
  </LoaderPortal>
 }
--- a/src/pages/Measure/_old_LastData.__
+++ b/src/pages/Measure/_old_LastData.__
@ -1,68 +0,0 @@
-import {Button, Modal } from "antd";
-import {DrillingFluid} from "../../components/modalWindows/DrillingFluid";
-import {useState} from "react";
-import {SludgeDiagram} from "../../components/modalWindows/MudDiagram";
-import {Nnb} from "../../components/modalWindows/Nnb"
-
-export default function LastData(/*{idWell}*/) {
-
-  const [tableVisible, setCementTableVisible] = useState(false)
-  const [tableSludgeVisible, setTableSludgeVisible] = useState(false)
-  const [tableNNBVisible, setTableNNBVisible] = useState(false)
-
-  return (
-    <>
-      <div>&nbsp;</div>
-      <Button type="primary" onClick={() => setCementTableVisible(true)}>
-        Последний замер бурового раствора
-      </Button>
-      <Modal
-        title='Последние показатели бурового раствора'
-        centered
-        visible={tableVisible}
-        onCancel={() => setCementTableVisible(false)}
-        width={2000}
-        footer={[
-          <Button key="back" onClick={() => setCementTableVisible(false)}>
-            Закрыть
-          </Button>
-        ]}
-      >
-        <DrillingFluid/>
-      </Modal>
-      <Button type="primary" onClick={() => setTableSludgeVisible(true)} style={{marginLeft: "5px"}}>
-        Шламограмма
-      </Button>
-      <Modal
-        title='Шламограмма'
-        centered
-        visible={tableSludgeVisible}
-        onCancel={() => setTableSludgeVisible(false)}
-        width={2000}
-        footer={[
-          <Button key="back" onClick={() => setTableSludgeVisible(false)}>
-            Закрыть
-          </Button>
-        ]}
-      >
-        <SludgeDiagram/>
-      </Modal>
-      <Button type="primary" onClick={() => setTableNNBVisible(true)} style={{marginLeft: "5px"}}>
-        ННБ
-      </Button>
-      <Modal
-        title='ННБ'
-        centered
-        visible={tableNNBVisible}
-        onCancel={() => setTableNNBVisible(false)}
-        width={2000}
-        footer={[
-          <Button key="back" onClick={() => setTableNNBVisible(false)}>
-            Закрыть
-          </Button>
-        ]}
-      >
-        <Nnb/>
-      </Modal>
-    </>)
-}
--- a/src/pages/Measure/columnsCommon.js
+++ b/src/pages/Measure/columnsCommon.js
@ -0,0 +1,31 @@
+import {RegExpIsFloat} from '../../components/Table'
+import {Input} from 'antd'
+
+const {TextArea} = Input
+
+export const v = (text) => <div 
+  style={{
+    writingMode:'vertical-rl',
+    textOrientation: 'mixed',
+    verticalAlign: 'top',
+  }}>
+  {text}
+</div>
+
+export const numericColumnOptions = {
+  editable: true,
+  initialValue: 0,
+  width:'5em',
+  formItemRules: [
+    {
+      required: true,
+      message: `Введите число`,
+      pattern: RegExpIsFloat,
+    },
+  ],
+};
+
+export const textColumnOptions = {
+  editable:true, 
+  input:<TextArea/>, 
+  width:'20em'}
--- a/src/pages/Measure/columnsDrillingFluid.js
+++ b/src/pages/Measure/columnsDrillingFluid.js
@ -1,44 +1,33 @@
 import { makeColumn } from "../../components/Table";
+import {v, numericColumnOptions, textColumnOptions} from './columnsCommon'

 export const columnsDrillingFluid = [
-  makeColumn("Наименование", "name"),
-  makeColumn("Температура, °C", "temperature"),
-  makeColumn("Плотность, г/см³", "density"),
-  makeColumn("Усл. вязкость, сек", "conditionalViscosity"),
-  makeColumn("R300", "r300"),
-  makeColumn("R600", "r600"),
-  makeColumn("R3/R6", "r3r6"),
-  makeColumn("ДНС, дПа", "dnsDpa"),
-  makeColumn("Пластич. вязкость, сПз", "plasticViscocity"),
-  makeColumn("СНС, дПа", "snsDpa"),
-  makeColumn("R3/R6 49С", "r3r649С"),
-  makeColumn("ДНС 49С, дПа", "dns49Cdpa"),
-  makeColumn("Пластич. вязкость 49С, сПз", "plasticViscocity49c"),
-  makeColumn("СНС 49С, дПа", "sns49Cdpa"),
-  makeColumn("МВТ, кг/м³", "mbt"),
-  makeColumn("Песок, %", "sand"),
-  makeColumn("Фильтрация, см³/30мин", "filtering"),
-  makeColumn("Корка, мм", "crust"),
-  makeColumn("KTK", "ktk"),
-  makeColumn("pH", "ph"),
-  makeColumn("Жесткость, мг/л", "hardness"),
-  makeColumn("Хлориды, мг/л", "chlorides"),
-  makeColumn("PF", "pf", {
-    render: (text) => (
-      <span style={{ marginLeft: "12px", marginRight: "12px" }}>{text}</span>
-    ),
-  }),
-  makeColumn("Mf", "mf", {
-    render: (text) => (
-      <span style={{ marginLeft: "12px", marginRight: "12px" }}>{text}</span>
-    ),
-  }),
-  makeColumn("Pm", "pm", {
-    render: (text) => (
-      <span style={{ marginLeft: "12px", marginRight: "12px" }}>{text}</span>
-    ),
-  }),
-  makeColumn("Твердая фаза раствора, %", "fluidSolidPhase"),
-  makeColumn("Смазка, %", "grease"),
-  makeColumn("Карбонат кальция, кг/м³", "calciumCarbonate"),
+  makeColumn("Наименование", "name", textColumnOptions),
+  makeColumn(v("Температура, °C"), "temperature",numericColumnOptions),
+  makeColumn(v("Плотность, г/см³"), "density",numericColumnOptions),
+  makeColumn(v("Усл. вязкость, сек"), "conditionalViscosity",numericColumnOptions),
+  makeColumn(v("R300"), "r300",numericColumnOptions),
+  makeColumn(v("R600"), "r600",numericColumnOptions),
+  makeColumn(v("R3/R6"), "r3r6",numericColumnOptions),
+  makeColumn(v("ДНС, дПа"), "dnsDpa",numericColumnOptions),
+  makeColumn(v("Пластич. вязкость, сПз"), "plasticViscocity",numericColumnOptions),
+  makeColumn(v("СНС, дПа"), "snsDpa",numericColumnOptions),
+  makeColumn(v("R3/R6 49С"), "r3r649С",numericColumnOptions),
+  makeColumn(v("ДНС 49С, дПа"), "dns49Cdpa",numericColumnOptions),
+  makeColumn(v("Пластич. вязкость 49С, сПз"), "plasticViscocity49c",numericColumnOptions),
+  makeColumn(v("СНС 49С, дПа"), "sns49Cdpa",numericColumnOptions),
+  makeColumn(v("МВТ, кг/м³"), "mbt",numericColumnOptions),
+  makeColumn(v("Песок, %"), "sand",numericColumnOptions),
+  makeColumn(v("Фильтрация, см³/30мин"), "filtering",numericColumnOptions),
+  makeColumn(v("Корка, мм"), "crust",numericColumnOptions),
+  makeColumn(v("KTK"), "ktk",numericColumnOptions),
+  makeColumn(v("pH"), "ph",numericColumnOptions),
+  makeColumn(v("Жесткость, мг/л"), "hardness",numericColumnOptions),
+  makeColumn(v("Хлориды, мг/л"), "chlorides",numericColumnOptions),
+  makeColumn(v("PF"), "pf",numericColumnOptions),
+  makeColumn(v("Mf"), "mf",numericColumnOptions),
+  makeColumn(v("Pm"), "pm",numericColumnOptions),
+  makeColumn(v("Твердая фаза раствора, %"), "fluidSolidPhase",numericColumnOptions),
+  makeColumn(v("Смазка, %"), "grease",numericColumnOptions),
+  makeColumn(v("Карбонат кальция, кг/м³"), "calciumCarbonate",numericColumnOptions),
 ];
--- a/src/pages/Measure/columnsMudDiagram.js
+++ b/src/pages/Measure/columnsMudDiagram.js
@ -1,40 +1,39 @@
 import {makeColumn} from '../../components/Table'
+import {v, numericColumnOptions, textColumnOptions} from './columnsCommon'

 export const columnsMudDiagram = [
-  makeColumn('N пробы', 'probeNumber', { className: 'yellow-background'}),
-  makeColumn('Глубина отбора пробы', 'probeExtractionDepth', { className: 'yellow-background'}),
+  makeColumn(v('N пробы'), 'probeNumber', numericColumnOptions),
+  makeColumn(v('Глубина отбора пробы'), 'probeExtractionDepth', numericColumnOptions),
  {
    title: 'Литология',
    key: 'lithology',
    children: [
-      makeColumn('Песчаник (%)', 'sandstone', { className: 'lightpurple-background'}),
-      makeColumn('Алевролит (%)', 'siltstone', { className: 'lightpurple-background'}),
-      makeColumn('Аргиллит (%)', 'argillit', { className: 'lightpurple-background'}),
-      makeColumn('Аргиллит бит. (%)', 'brokenArgillit', { className: 'lightpurple-background'}),
-      makeColumn('Уголь (%)', 'coal', { className: 'lightpurple-background'}),
-      makeColumn('Песок (%)', 'sand', { className: 'lightpurple-background'}),
-      makeColumn('Глина (%)', 'clay', { className: 'lightpurple-background'}),
-      makeColumn('Известняк (%)', 'camstone', { className: 'lightpurple-background'}),
-      makeColumn('Цемент (%)', 'cement', { className: 'lightpurple-background'})
+      makeColumn(v('Песчаник (%)'), 'sandstone', numericColumnOptions),
+      makeColumn(v('Алевролит (%)'), 'siltstone', numericColumnOptions),
+      makeColumn(v('Аргиллит (%)'), 'argillit', numericColumnOptions),
+      makeColumn(v('Аргиллит бит. (%)'), 'brokenArgillit', numericColumnOptions),
+      makeColumn(v('Уголь (%)'), 'coal', numericColumnOptions),
+      makeColumn(v('Песок (%)'), 'sand', numericColumnOptions),
+      makeColumn(v('Глина (%)'), 'clay', numericColumnOptions),
+      makeColumn(v('Известняк (%)'), 'camstone', numericColumnOptions),
+      makeColumn(v('Цемент (%)'), 'cement', numericColumnOptions),
    ]
  },
-  makeColumn('Краткое описание', 'summary', { className: 'yellow-background'}),
-  makeColumn('ЛБА бурового раствора', 'drillingMud', { className: 'lightgray-background'}),
-  makeColumn('ЛБА (шлама)', 'sludge', { className: 'lightorange-background'}),
+  makeColumn('Краткое описание', 'summary', textColumnOptions),
+  makeColumn(v('ЛБА бурового раствора'), 'drillingMud', numericColumnOptions),
+  makeColumn(v('ЛБА (шлама)'), 'sludge', numericColumnOptions),
  {
    title: 'Газопоказания',
    key: 'gasIndications',
-    align: 'center',
-    className: 'yellow-background',
    children: [
-      makeColumn('Сумма УВ мах. (абс%)', 'maxSum', { className: 'lightpurple-background'}),
-      makeColumn('С1 метан (отн%)', 'methane', { className: 'lightpurple-background'}),
-      makeColumn('С2 этан (отн%)', 'ethane', { className: 'lightpurple-background'}),
-      makeColumn('С3 пропан (отн%)', 'propane', { className: 'lightpurple-background'}),
-      makeColumn('С4 бутан (отн%)', 'butane', { className: 'lightpurple-background'}),
-      makeColumn('С5 пентан (отн%)', 'pentane', { className: 'lightpurple-background'})
+      makeColumn(v('Сумма УВ мах. (абс%)'), 'maxSum', numericColumnOptions),
+      makeColumn(v('С1 метан (отн%)'), 'methane', numericColumnOptions),
+      makeColumn(v('С2 этан (отн%)'), 'ethane', numericColumnOptions),
+      makeColumn(v('С3 пропан (отн%)'), 'propane', numericColumnOptions),
+      makeColumn(v('С4 бутан (отн%)'), 'butane', numericColumnOptions),
+      makeColumn(v('С5 пентан (отн%)'), 'pentane', numericColumnOptions),
    ]
  },
-  makeColumn('Мех. скорость', 'mechanicalSpeed', { className: 'yellow-background'}),
-  makeColumn('Предварительное заключение о насыщении по ГК', 'preliminaryConclusion', { className: 'lightorange-background'}),
-];
+  makeColumn(v('Мех. скорость'), 'mechanicalSpeed', numericColumnOptions),
+  makeColumn('Предварительное заключение о насыщении по ГК', 'preliminaryConclusion', textColumnOptions),
+]
--- a/src/pages/Measure/columnsNnb.js
+++ b/src/pages/Measure/columnsNnb.js
@ -1,21 +1,22 @@
 import { makeColumn } from '../../components/Table'
+import {v, numericColumnOptions, textColumnOptions} from './columnsCommon'

 export const columnsNnb = [
-  makeColumn('Глубина по стволу, м', 'depth'),
-  makeColumn('Зенитный угол, град', 'zenithAngle'),
-  makeColumn('Азимут магнитный, град', 'magneticAzimuth'),
-  makeColumn('Азимут истинный, град', 'trueAzimuth'),
-  makeColumn('Азимут дирекц., град', 'directAzimuth'),
-  makeColumn('Глубина по вертикали, м', 'verticalDepth'),
-  makeColumn('Абсолютная отметка, м', 'absoluteMark'),
-  makeColumn('Лок. смещение к северу, м', 'localNorthOffset'),
-  makeColumn('Лок. смещение к востоку, м', 'localEastOffset'),
-  makeColumn('Отклонение от устья, м', 'outFallOffset'),
-  makeColumn('Азимут смещения, град', 'offsetAzimuth'),
-  makeColumn('Пространст. интенсивность, град/10 м', 'areaIntensity'),
-  makeColumn('Угол установки отклон., град', 'offsetStopAngle'),
-  makeColumn('Интенсив. по зениту, град/10 м', 'zenithIntensity'),
-  makeColumn('Комментарий', 'comment'),
-  makeColumn('Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)', 'depthPlanFactDifference'),
-  makeColumn('Расстояние в пространстве между ХХХ (план) и ХХХ (факт)', 'distancePlanFactDifference'),
+  makeColumn('Глубина по стволу, м', 'depth', textColumnOptions),
+  makeColumn(v('Зенитный угол, град'), 'zenithAngle', numericColumnOptions),
+  makeColumn(v('Азимут магнитный, град'), 'magneticAzimuth', numericColumnOptions),
+  makeColumn(v('Азимут истинный, град'), 'trueAzimuth', numericColumnOptions),
+  makeColumn(v('Азимут дирекц., град'), 'directAzimuth', numericColumnOptions),
+  makeColumn(v('Глубина по вертикали, м'), 'verticalDepth', numericColumnOptions),
+  makeColumn(v('Абсолютная отметка, м'), 'absoluteMark', numericColumnOptions),
+  makeColumn(v('Лок. смещение к северу, м'), 'localNorthOffset', numericColumnOptions),
+  makeColumn(v('Лок. смещение к востоку, м'), 'localEastOffset', numericColumnOptions),
+  makeColumn(v('Отклонение от устья, м'), 'outFallOffset', numericColumnOptions),
+  makeColumn(v('Азимут смещения, град'), 'offsetAzimuth', numericColumnOptions),
+  makeColumn(v('Пространст. интенсивность, град/10 м'), 'areaIntensity', numericColumnOptions),
+  makeColumn(v('Угол установки отклон., град'), 'offsetStopAngle', numericColumnOptions),
+  makeColumn(v('Интенсив. по зениту, град/10 м'), 'zenithIntensity', numericColumnOptions),
+  makeColumn(v('Комментарий'), 'comment', numericColumnOptions),
+  makeColumn(v('Разница вертикальных глубин\nмежду планом и фактом'), 'depthPlanFactDifference', numericColumnOptions),
+  makeColumn(v('Расстояние в пространстве\nмежду планом и фактом'), 'distancePlanFactDifference', numericColumnOptions),
 ];
--- a/src/pages/Measure/index.jsx
+++ b/src/pages/Measure/index.jsx
@ -1,6 +1,6 @@
 import { columnsMudDiagram} from './columnsMudDiagram'
-// import { columnsDrillingFluid} from './columnsDrillingFluid'
-// import { columnsNnb } from './columnsNnb'
+import { columnsDrillingFluid} from './columnsDrillingFluid'
+import { columnsNnb } from './columnsNnb'
 import { MeasureTable } from './MeasureTable'

 export default function Measure({idWell}){
@ -9,16 +9,16 @@ export default function Measure({idWell}){
      idWell={idWell}
      idCategory={1} 
      title='Замер бурового раствора'
-      columns={columnsMudDiagram}/>
-    {/* <MeasureTable 
+      columns={columnsDrillingFluid}/>
+    <MeasureTable 
      idWell={idWell}
      idCategory={2} 
      title='Шлабограмма'
-      columns={columnsDrillingFluid}/>
+      columns={columnsMudDiagram}/>
    <MeasureTable 
      idWell={idWell}
      idCategory={3} 
      title='ННБ'
-      columns={columnsNnb}/> */}
+      columns={columnsNnb}/>
  </>
 }