From 37ac8a14bcba668c23f496de187dcb12cc0d6f14 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Mon, 14 Mar 2022 10:35:47 +0500
Subject: [PATCH 01/21] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8F=20=D1=81=D1=82=D0=BE=D0=BB=D0=B1=D1=86=D0=BE?=
 =?UTF-8?q?=D0=B2=20=D0=BF=D0=BE=20=D1=81=D0=BE=D0=B4=D0=B5=D1=80=D0=B6?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=BE=D0=BC=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Analytics/Statistics.jsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/pages/Analytics/Statistics.jsx b/src/pages/Analytics/Statistics.jsx
index 329d919..f52a77e 100644
--- a/src/pages/Analytics/Statistics.jsx
+++ b/src/pages/Analytics/Statistics.jsx
@@ -90,21 +90,30 @@ export const Statistics = memo(({ idWell }) => {
         async () => {
             const types = await WellOperationService.getSectionTypes(idWell)
             setSectionTypes(Object.entries(types))
+        },
+        setIsPageLoading,
+        `Не удалось получить типы секции`,
+        `Получение списка возможных секций`,
+    ), [idWell])
+
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => {
+            const filteredSections = avgData?.length > 0 ? sectionTypes.filter(([id, _]) => avgData.some((row) => `section_${id}` in row)) : sectionTypes
+
             setAvgColumns([
                 ...defaultColumns,
-                ...Object.entries(types).map(([id, name]) => makeSectionColumn(name, `section_${id}`)),
+                ...filteredSections.map(([id, name]) => makeSectionColumn(name, `section_${id}`)),
             ])
             setCmpColumns([
                 ...defaultColumns,
-                ...Object.entries(types).map(([id, name]) => makeSectionColumn(name, `section_${id}`, {
+                ...filteredSections.map(([id, name]) => makeSectionColumn(name, `section_${id}`, {
                     speedRender: cmpSpeedRender(`section_${id}`)
                 }))
             ])
         },
         setIsPageLoading,
-        `Не удалось получить типы секции`,
-        `Получение списка возможных секций`,
-    ), [idWell, cmpSpeedRender])
+        'Не удалось установить необходимые столбцы'
+    ), [sectionTypes, avgData, cmpSpeedRender])
 
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {

From d6c4261d26ae382c44398b5d72ed2be5e63fcbf1 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Mon, 14 Mar 2022 10:48:36 +0500
Subject: [PATCH 02/21] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=81=D0=BE=D1=80=D1=82=D0=B8=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BA=D0=B0=20=D0=BF=D0=BE=20=D1=81=D1=82=D0=BE?=
 =?UTF-8?q?=D0=BB=D0=B1=D1=86=D0=B0=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Analytics/Statistics.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/pages/Analytics/Statistics.jsx b/src/pages/Analytics/Statistics.jsx
index f52a77e..764e7ee 100644
--- a/src/pages/Analytics/Statistics.jsx
+++ b/src/pages/Analytics/Statistics.jsx
@@ -4,7 +4,7 @@ import { Fragment, memo, useCallback, useEffect, useState } from 'react'
 import LoaderPortal from '@components/LoaderPortal'
 import { WellSelector } from '@components/WellSelector'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { makeGroupColumn, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
+import { makeColumn, makeGroupColumn, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
 import { OperationStatService, WellOperationService } from '@api'
 import { arrayOrDefault } from '@utils'
 
@@ -18,10 +18,17 @@ const { Cell, Row } = Summary
 const numericRender = makeNumericRender()
 const speedNumericRender = (section) => numericRender(section?.speed)
 
+const makeSectionSorter = (key, name) => (a, b) => (a?.[key]?.[name] ?? 0) - (b?.[key]?.[name] ?? 0)
 export const makeSectionColumn = (title, key, { speedRender } = {}) => makeGroupColumn(title, [
-    makeNumericColumn('Проходка', key, null, null, (section => numericRender(section?.depth)), 100),
-    makeNumericColumn('Время', key, null, null, (section => numericRender(section?.time)), 100),
-    makeNumericColumn((<>V<sub>рейсовая</sub></>), key, null, null, speedRender ?? speedNumericRender, 100),
+    makeNumericColumn('Проходка', key, null, null, (section => numericRender(section?.depth)), 100, {
+        sorter: makeSectionSorter(key, 'depth'),
+    }),
+    makeNumericColumn('Время', key, null, null, (section => numericRender(section?.time)), 100, {
+        sorter: makeSectionSorter(key, 'time'),
+    }),
+    makeNumericColumn((<>V<sub>рейсовая</sub></>), key, null, null, speedRender ?? speedNumericRender, 100, {
+        sorter: makeSectionSorter(key, 'speed'),
+    }),
 ])
 
 export const defaultColumns = [

From f4a3c0f293ebea47e0f99cf26c8f216a304a740d Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Wed, 16 Mar 2022 16:10:28 +0500
Subject: [PATCH 03/21] =?UTF-8?q?=D0=90=D1=80=D0=B3=D1=83=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D1=8B=20=D1=81=D0=B5=D0=BB=D0=B5=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B0=20=D0=B4=D0=B0=D1=82=D1=8B=20=D0=B8=D0=B7=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=20=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=8F=D0=B7=D0=B0=D1=82=D0=B5=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/DatePickerWrapper.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/DatePickerWrapper.tsx b/src/components/Table/DatePickerWrapper.tsx
index 76b195b..a453fbc 100644
--- a/src/components/Table/DatePickerWrapper.tsx
+++ b/src/components/Table/DatePickerWrapper.tsx
@@ -6,8 +6,8 @@ import moment, { Moment } from 'moment'
 import { defaultFormat } from '@utils'
 
 export type DatePickerWrapperProps = PickerDateProps<Moment> & {
-    value: Moment,
-    onChange: (date: Moment | null) => any
+    value?: Moment,
+    onChange?: (date: Moment | null) => any
     isUTC?: boolean
 }
 
@@ -17,7 +17,7 @@ export const DatePickerWrapper = memo<DatePickerWrapperProps>(({ value, onChange
     allowClear={false}
     format={defaultFormat}
     defaultValue={moment()}
-    onChange={(date) => onChange(date)}
+    onChange={(date) => onChange?.(date)}
     value={isUTC ? moment.utc(value).local() : moment(value)}
     {...other}
   />

From 4bacf7f9e12a351959030fe081eeabc9e118cc7f Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Wed, 16 Mar 2022 16:12:02 +0500
Subject: [PATCH 04/21] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=20=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D1=8C=20=D0=B2=D0=BD=D0=B5=D1=88?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B9=20onCell=20=D0=B2=20EditableTable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/EditableTable.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Table/EditableTable.jsx b/src/components/Table/EditableTable.jsx
index ff2378d..e93a36d 100644
--- a/src/components/Table/EditableTable.jsx
+++ b/src/components/Table/EditableTable.jsx
@@ -188,6 +188,7 @@ export const EditableTable = memo(({
     return {
       ...col,
       onCell: (record) => ({
+        ...col.onCell?.(record),
         editing: isEditing(record),
         record,
         dataIndex: col.dataIndex ?? col.key,

From 7c5af125086cfa6e3ca6c5b0f655b73252c3a1f8 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Thu, 17 Mar 2022 06:39:59 +0500
Subject: [PATCH 05/21] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=84=D0=B0=D0=B1=D1=80=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BA=D0=B8=20=D0=B4=D0=B0?=
 =?UTF-8?q?=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/Columns/date.tsx | 25 +++++++++++++++++++++++++
 src/components/Table/Columns/index.ts |  1 +
 src/components/Table/index.tsx        |  1 +
 3 files changed, 27 insertions(+)
 create mode 100644 src/components/Table/Columns/date.tsx

diff --git a/src/components/Table/Columns/date.tsx b/src/components/Table/Columns/date.tsx
new file mode 100644
index 0000000..c388cf6
--- /dev/null
+++ b/src/components/Table/Columns/date.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from 'react'
+
+import { formatDate } from '@utils'
+
+import makeColumn, { columnPropsOther } from '.'
+import { DatePickerWrapper, makeDateSorter } from '..'
+
+export const makeDateColumn = (
+    title: ReactNode,
+    key: string,
+    utc?: boolean,
+    format?: string,
+    other?: columnPropsOther
+) => makeColumn(title, key, {
+    ...other,
+    render: (date) => (
+        <div className={'text-align-r-container'}>
+            <span>{formatDate(date, utc, format) ?? '-'}</span>
+        </div>
+    ),
+    sorter: makeDateSorter(key),
+    input: <DatePickerWrapper />,
+})
+
+export default makeDateColumn
diff --git a/src/components/Table/Columns/index.ts b/src/components/Table/Columns/index.ts
index fd0b327..babb1fd 100644
--- a/src/components/Table/Columns/index.ts
+++ b/src/components/Table/Columns/index.ts
@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 import { Rule } from 'antd/lib/form'
 import { ColumnProps } from 'antd/lib/table'
 
+export { makeDateColumn } from './date'
 export {
     RegExpIsFloat,
     makeNumericRender,
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 095c825..2e1fc8e 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -6,6 +6,7 @@ export {
     RegExpIsFloat,
     timezoneOptions,
     TimezoneSelect,
+    makeDateColumn,
     makeGroupColumn,
     makeColumn,
     makeColumnsPlanFact,

From 2384f65999647a1a2f1023e8519dd244b513f686 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Thu, 17 Mar 2022 06:41:51 +0500
Subject: [PATCH 06/21] =?UTF-8?q?=D0=92=20WellOperationsEditor=20=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=BE?=
 =?UTF-8?q?=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81=D1=82=D1=8C=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=B5=D0=B9=20=D1=87=D0=B5=D1=80=D0=B5=D0=B7?=
 =?UTF-8?q?=20GET=20=D0=B0=D1=80=D0=B3=D1=83=D0=BC=D0=B5=D0=BD=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WellOperations/WellOperationsEditor.jsx   | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/pages/WellOperations/WellOperationsEditor.jsx b/src/pages/WellOperations/WellOperationsEditor.jsx
index 1266d49..4f0a6a9 100644
--- a/src/pages/WellOperations/WellOperationsEditor.jsx
+++ b/src/pages/WellOperations/WellOperationsEditor.jsx
@@ -1,21 +1,21 @@
 import moment from 'moment'
 import { Input } from 'antd'
-import { useState, useEffect, memo } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useState, useEffect, memo, useMemo, useCallback } from 'react'
 
 import {
   EditableTable,
-  DatePickerWrapper,
   makeColumn,
-  makeDateSorter,
   makeNumericColumnOptions,
   makeSelectColumn,
   makeActionHandler,
+  makeDateColumn,
 } from '@components/Table'
-import { WellOperationService} from '@api'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { hasPermission } from '@utils/permissions'
-import { formatDate } from '@utils'
+import { arrayOrDefault } from '@utils'
+import { WellOperationService } from '@api'
 
 const { TextArea } = Input
 
@@ -25,7 +25,7 @@ const defaultColumns = [
   makeSelectColumn('Конструкция секции', 'idWellSectionType', [], undefined, {
     editable: true,
     width: 160,
-    formItemRules: [({ getFieldValue }) => ({
+    formItemRules: [() => ({
       validator(_, value) {
         if (value?.length > 0)
           return Promise.resolve()
@@ -37,43 +37,41 @@ const defaultColumns = [
   makeColumn('Доп. инфо', 'categoryInfo', { editable: true, width: 300, input: <TextArea/> }),
   makeColumn('Глубина забоя на начало, м', 'depthStart', makeNumericColumnOptions(2, 'depthStart')),
   makeColumn('Глубина забоя при завершении, м', 'depthEnd', makeNumericColumnOptions(2, 'depthEnd')),
-  makeColumn('Время начала', 'dateStart', {
+  makeDateColumn('Время начала', 'dateStart', undefined, undefined, {
     editable: true,
     width: 200,
-    input: <DatePickerWrapper/>,
     initialValue: moment().format(),
-    sorter: makeDateSorter('dateStart'),
-    render: (_, record) => (
-      <div className={'text-align-r-container'}>
-        <span>{formatDate(record.dateStart)}</span>
-      </div>
-    )
   }),
   makeColumn('Часы', 'durationHours', makeNumericColumnOptions(2, 'durationHours')),
   makeColumn('Комментарий', 'comment', { editable: true, input: <TextArea/> }),
 ]
 
 export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
-  const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
+  const [pageNumAndPageSize, setPageNumAndPageSize] = useState({ current: 1, pageSize: basePageSize })
   const [paginationTotal, setPaginationTotal] = useState(0)
   const [operations, setOperations] = useState([])
   const [showLoader, setShowLoader] = useState(false)
   const [columns, setColumns] = useState(defaultColumns)
 
+  const location = useLocation()
+  const selectedIds = useMemo(() => {
+    const query = new URLSearchParams(location.search)
+    return arrayOrDefault(query.get('selectedId')?.split(',')?.map(parseInt))
+  }, [location])
+
   useEffect(() => invokeWebApiWrapperAsync(
     async () => {
-      let categories = await WellOperationService.getCategories(idWell) ?? []
+      let categories = arrayOrDefault(await WellOperationService.getCategories(idWell))
       categories = categories.map((item) => ({ value: item.id, label: item.name }))
 
-      let sectionTypes = await WellOperationService.getSectionTypes(idWell) ?? []
-      sectionTypes = Object.keys(sectionTypes).map((key) => ({ value: parseInt(key), label: sectionTypes[key] }))
+      let sectionTypes = await WellOperationService.getSectionTypes(idWell) ?? {}
+      sectionTypes = Object.entries(sectionTypes).map(([id, label]) => ({ value: parseInt(id), label }))
 
-      setColumns(preColumns => {
-        const newColumns = [...preColumns]
-        newColumns[0] = makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, undefined, { editable: true, width: 160 })
-        newColumns[1] = makeSelectColumn('Операция', 'idCategory', categories, undefined, { editable: true, width: 200 })
-        return newColumns
-      })
+      setColumns(preColumns => [
+        makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, undefined, { editable: true, width: 160 }),
+        makeSelectColumn('Операция', 'idCategory', categories, undefined, { editable: true, width: 200 }),
+        ...preColumns.slice(2),
+      ])
     },
     setShowLoader,
     'Не удалось загрузить список операций по скважине',
@@ -107,6 +105,11 @@ export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
     idWell
   }
 
+  const onRow = useCallback((record) => {
+    if (selectedIds?.includes(record.id))
+      return { style: { background: '#BF0000A0' } }
+  }, [selectedIds])
+
   const recordParser = (record) => ({
     ...record,
     idType,
@@ -133,6 +136,7 @@ export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
           onChange: (page, pageSize) => setPageNumAndPageSize({ current: page, pageSize })
         }}
         tableName={'well_operationse_editor'}
+        onRow={onRow}
       />
     </LoaderPortal>
   )

From b6880b9b5ad52060d06ba2b19fbf945b266b4352 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Thu, 17 Mar 2022 06:42:15 +0500
Subject: [PATCH 07/21] =?UTF-8?q?=D0=B2=D0=BE=D0=B7=D0=B2=D1=80=D0=B0?=
 =?UTF-8?q?=D1=89=D0=B0=D0=B5=D0=BC=D0=BE=D0=B5=20=D0=B7=D0=BD=D0=B0=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20fractionalSum=20=D0=BF=D1=80=D0=B8?=
 =?UTF-8?q?=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B5=20=D0=B8=D0=B7=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B5=D0=BD=D0=BE=20=D0=BD=D0=B0=20null?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/datetime.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts
index ff39581..4efcb56 100644
--- a/src/utils/datetime.ts
+++ b/src/utils/datetime.ts
@@ -45,8 +45,8 @@ export const calcDuration = (start: unknown, end: unknown) => {
     return (+new Date(end) - +new Date(start)) * timeInS.millisecond / timeInS.day
 }
 
-export const fractionalSum = (date: unknown, value: number, type: keyof typeof timeInS): RawDate => {
-    if (!isRawDate(date) || !timeInS[type] || isNaN(value ?? NaN)) return NaN
+export const fractionalSum = (date: unknown, value: number, type: keyof typeof timeInS): RawDate | null => {
+    if (!isRawDate(date) || !timeInS[type] || isNaN(value ?? NaN)) return null
     const d = new Date(date)
     d.setMilliseconds(d.getMilliseconds() + value * timeInS[type] * 1000)
     return d

From b15a3b43635ce77b908519786769f5075ad2f1ea Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Thu, 17 Mar 2022 06:42:43 +0500
Subject: [PATCH 08/21] =?UTF-8?q?=D0=98=D1=81=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D1=91=D0=BD=20=D0=B8=D0=BC=D0=BF=D0=BE=D1=80=D1=82=20=D0=BB?=
 =?UTF-8?q?=D0=B8=D1=88=D0=BD=D0=B8=D1=85=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Analytics/Statistics.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Analytics/Statistics.jsx b/src/pages/Analytics/Statistics.jsx
index 764e7ee..3aabb59 100644
--- a/src/pages/Analytics/Statistics.jsx
+++ b/src/pages/Analytics/Statistics.jsx
@@ -4,7 +4,7 @@ import { Fragment, memo, useCallback, useEffect, useState } from 'react'
 import LoaderPortal from '@components/LoaderPortal'
 import { WellSelector } from '@components/WellSelector'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { makeColumn, makeGroupColumn, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
+import { makeGroupColumn, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
 import { OperationStatService, WellOperationService } from '@api'
 import { arrayOrDefault } from '@utils'
 

From a55d0c9b42f2ee654f9e7cc6e0d52f4588ace32d Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Thu, 17 Mar 2022 06:43:06 +0500
Subject: [PATCH 09/21] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B1=D0=BE=D1=82=D0=B0=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B0=20TVD=20=D0=B8=20=D0=BC=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B4=20getOperations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WellOperations/Tvd.jsx | 237 +++++++++++++++++++++++++------
 src/styles/tvd.less              |  65 +++++++++
 src/utils/functions.tsx          |  31 ++--
 3 files changed, 282 insertions(+), 51 deletions(-)
 create mode 100644 src/styles/tvd.less

diff --git a/src/pages/WellOperations/Tvd.jsx b/src/pages/WellOperations/Tvd.jsx
index 0f6f5e4..49279e4 100644
--- a/src/pages/WellOperations/Tvd.jsx
+++ b/src/pages/WellOperations/Tvd.jsx
@@ -1,5 +1,7 @@
-import { Switch } from 'antd'
-import { memo, useState, useRef, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
+import { memo, useState, useRef, useEffect, useCallback } from 'react'
+import { Switch, Button, InputNumber, Descriptions } from 'antd'
+import { DoubleLeftOutlined, DoubleRightOutlined, FilterOutlined } from '@ant-design/icons'
 
 import {
 	Chart,
@@ -16,9 +18,27 @@ import ChartDataLabels from 'chartjs-plugin-datalabels'
 
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
+import { makeDateColumn, makeNumericColumn, makeTextColumn, Table } from '@components/Table'
+import { formatDate, fractionalSum } from '@utils/datetime'
 import { getOperations } from '@utils/functions'
 
-Chart.register(TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels, zoomPlugin)
+import '@styles/index.css'
+import '@styles/tvd.less'
+
+const { Item } = Descriptions
+
+Chart.register(
+  TimeScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  Legend,
+  ChartDataLabels,
+  zoomPlugin
+)
+
+const numericRender = (value) => Number.isFinite(value) ? (+value).toFixed(2) : '-'
 
 const scaleTypes = {
   day: {
@@ -51,10 +71,11 @@ const scaleTypes = {
 
 const defaultOptions = {
   responsive: true,
-  aspectRatio: 2.6,
+  maintainAspectRatio: false,
+  aspectRatio: false,
   interaction: {
     intersect: false,
-    mode: 'index',
+    mode: 'nearest',
   },
   scales: {
     x: scaleTypes.day,
@@ -89,14 +110,29 @@ const defaultOptions = {
     },
     tooltip: {
       enabled: true,
-      callbacks: {
-        label: (tooltipItem) => tooltipItem.yLabel,
-      },
       position: 'nearest',
+      callbacks: {
+        title: (items) => [
+          `Дата: ${formatDate(items[0].raw?.date) ?? '-'}`,
+          `День с начала бурения: ${parseInt(items[0].raw?.day)}`,
+        ],
+        afterTitle: (items) => `Глубина: ${numericRender(items[0].raw?.depth)}`,
+        label: (item) => [
+          item.raw.wellSectionTypeName + ': ' + item.raw.categoryName,
+          `Длительность (ч): ${item.raw.nptHours}`
+        ],
+      },
     },
-  }
+  },
 }
 
+const nptTableColumns = [
+  makeTextColumn('Конструкция секции', 'wellSectionTypeName'),
+  makeNumericColumn('Глубина', 'depth'),
+  makeDateColumn('Дата начала', 'date'),
+  makeNumericColumn('Длительность (ч)', 'durationHours'),
+]
+
 const makeDataset = (data, label, color, borderWidth = 1.5, borderDash) => ({
   label,
   data,
@@ -106,38 +142,101 @@ const makeDataset = (data, label, color, borderWidth = 1.5, borderDash) => ({
   borderDash,
 })
 
+const calcEndDate = (saubData) => {
+  if (!Array.isArray(saubData) || saubData.length <= 0) return [null, null]
+  const lastElm = saubData.at(-1)
+  return [saubData[0]?.date, fractionalSum(lastElm?.date, lastElm?.nptHours, 'hour')]
+}
+
+const printDate = (date) => formatDate(date) ?? '-'
+
 export const Tvd = memo(({ idWell, title }) => {
-  const [operations, setOperations] = useState([])
+  const [operations, setOperations] = useState({})
   const [isLoading, setIsLoading] = useState(false)
+  const [isTableLoading, setIsTableLoading] = useState(false)
   const [xLabel, setXLabel] = useState('day')
 	const [chart, setChart] = useState()
+  const [npt, setNPT] = useState([])
+  const [filteredNPT, setFilteredNPT] = useState([])
+  const [filterValue, setFilterValue] = useState(null)
+  const [tableVisible, setTableVisible] = useState(true)
+  const [additionalData, setAdditionalData] = useState({})
 
   const chartRef = useRef(null)
+  const history = useHistory()
 
-  useEffect(() => {
-    invokeWebApiWrapperAsync(
-      async () => {
-        const operations = await getOperations(idWell)
-        setOperations(operations)
-      },
-      setIsLoading,
-      `Не удалось загрузить операции по скважине "${idWell}"`,
-      'Получение списка опервций по скважине'
-    )
-  }, [idWell])
+  const onPointClick = useCallback((e) => {
+    const points = e?.chart?.tooltip?.dataPoints
+    if (!points || !(points.length > 0)) return
+
+    const datasetId = points.find((p) => p.datasetIndex !== 1)?.datasetIndex
+    if (typeof datasetId === 'undefined') return
+
+    const datasetName = datasetId === 2 ? 'plan' : 'fact'
+    const ids = points.filter((p) => p?.raw?.id).map((p) => p.raw.id)
+    const url = `/well/${idWell}/operations/${datasetName}/?selectedId=${ids.join(',')}`
+    history.push(url)
+  }, [idWell, history])
+
+  useEffect(() => invokeWebApiWrapperAsync(
+    async () => {
+      const operations = await getOperations(idWell)
+      setNPT(operations.fact.filter((row) => row.isNPT) ?? [])
+      setOperations(operations)
+
+      const [factStartDate, factEndDate] = calcEndDate(operations.fact)
+      const [planStartDate, planEndDate] = calcEndDate(operations.plan)
+      const [predictStartDate, predictEndDate] = calcEndDate(operations.predict)
+
+      const last = predictEndDate ?? factEndDate
+      setAdditionalData({
+        lag: (+new Date(last) - +new Date(planEndDate)) / 86400_000,
+        endDate: last,
+        factStartDate,
+        factEndDate,
+        planStartDate,
+        planEndDate,
+        predictStartDate,
+        predictEndDate,
+      })
+    },
+    setIsLoading,
+    `Не удалось загрузить операции по скважине "${idWell}"`,
+    'Получение списка опервций по скважине'
+  ), [idWell])
+
+  useEffect(() => invokeWebApiWrapperAsync(
+    async () => setFilteredNPT(npt.filter((row) => !filterValue || row.durationHours >= filterValue)),
+    setIsTableLoading,
+    'Не удалось отфильтровать НПВ по времени'
+  ), [npt, filterValue])
 
 	useEffect(() => {
+    const npt = []
+    operations?.fact?.forEach((row) => {
+      if (row?.isNPT !== false) return
+      const nptH = +(row.nptHours ?? 0)
+      npt.push({
+        ...row,
+        day: row.day - nptH / 24,
+        date: fractionalSum(row.date, -nptH, 'hour'),
+      })
+    })
+
+
     const data = {
       datasets: [
-        makeDataset(operations?.fact, 'Факт', '#0A0'),
+        makeDataset(operations?.fact, 'Факт', '#0A0', 3),
         makeDataset(operations?.predict, 'Прогноз', 'purple', 1, [7, 3]),
-        makeDataset(operations?.plan, 'План', '#C004', 4),
+        makeDataset(operations?.plan, 'План', '#F00', 3),
+        makeDataset(npt, 'Факт без НПВ', '#00F', 3)
       ]
     }
 
 		if (chartRef.current && !chart) {
 			const thisOptions = {}
 			Object.assign(thisOptions, defaultOptions)
+      thisOptions.onClick = onPointClick
       thisOptions.scales.x = scaleTypes[xLabel]
       thisOptions.parsing.xAxisKey = xLabel
 
@@ -155,27 +254,85 @@ export const Tvd = memo(({ idWell, title }) => {
       chart.options.scales.x = scaleTypes[xLabel]
       chart.options.parsing.xAxisKey = xLabel
       chart.update()
+      // Обнуление ширины необходимо для уменьшения размена при resize после появления элементов
+      chart.canvas.parentNode.style.width = '0'
+      chart.resize()
     }
-	}, [chart, operations, xLabel])
+	}, [chart, operations, xLabel, onPointClick])
+
+  const toogleTable = useCallback(() => {
+    setOperations((pre) => ({ ...pre }))
+    setTableVisible((pre) => !pre)
+  }, [])
 
   return (
-    <div className={'container'}>
-      <div>
-        {title || (
-          <h2 className={'mt-20px'}>График Глубина-день</h2>
-        )}
-        <LoaderPortal show={isLoading}>
-          <canvas ref={chartRef} />
-          <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-            <Switch
-              checkedChildren={'Дата'}
-              unCheckedChildren={'Дни со старта'}
-              loading={isLoading}
-              onChange={(checked) => setXLabel(checked ? 'date' : 'day')}
-            />
-          </div>
-        </LoaderPortal>
+    <div className={'container tvd-page'}>
+      <div className={'tvd-top'}>
+        <h2>{title || 'График Глубина-день'}</h2>
+        <div>
+          <Switch
+            checkedChildren={'Дата'}
+            unCheckedChildren={'Дни со старта'}
+            loading={isLoading}
+            onChange={(checked) => setXLabel(checked ? 'date' : 'day')}
+            style={{ marginRight: '20px' }}
+          />
+          <Button
+            icon={tableVisible ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
+            onClick={toogleTable}
+          />
+        </div>
       </div>
+      <LoaderPortal show={isLoading} style={{ flex: '1'}}>
+        <div className={'tvd-main'}>
+          <div className={'tvd-left'}>
+            <div className={'tvd-tr-table'} onMouseEnter={(e) => console.log(e)}>
+              <Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
+                <Item label={'Дата'}>{printDate(additionalData.endDate)}</Item>
+                <Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
+              </Descriptions>
+            </div>
+            <canvas ref={chartRef} />
+            <div className={'tvd-bl-table'} style={{ bottom: xLabel === 'day' ? '35px' : '85px' }}>
+              <Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
+                <Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
+                <Item label={'Начало цикла (план)'}>{printDate(additionalData.planStartDate)}</Item>
+                <Item label={'Начало цикла (факт)'}>{printDate(additionalData.factStartDate)}</Item>
+                <Item label={'Окончание цикла (план)'}>{printDate(additionalData.planEndDate)}</Item>
+                <Item label={'Окончание цикла (факт)'}>{printDate(additionalData.factEndDate)}</Item>
+              </Descriptions>
+            </div>
+          </div>
+          {tableVisible && (
+            <div className={'tvd-right'}>
+              <div className={'tvd-npt-filter'}>
+                <FilterOutlined />
+                <span>Фильтр время НПВ &ge;</span>
+                <InputNumber
+                  step={0.5}
+                  max={10000}
+                  min={0}
+                  defaultValue={0}
+                  onChange={(value) => setFilterValue(value ?? 0)}
+                  value={filterValue}
+                />
+                <span>ч.</span>
+              </div>
+              <LoaderPortal show={isTableLoading}>
+                <Table
+                  bordered
+                  size={'small'}
+                  dataSource={filteredNPT}
+                  columns={nptTableColumns}
+                  pagination={false}
+                  tableName={'tvd_npt'}
+                  scroll={{ y: '60vh', scrollToFirstRowOnChange: true }}
+                />
+              </LoaderPortal>
+            </div>
+          )}
+        </div>
+      </LoaderPortal>
     </div>
   )
 })
diff --git a/src/styles/tvd.less b/src/styles/tvd.less
new file mode 100644
index 0000000..52676ff
--- /dev/null
+++ b/src/styles/tvd.less
@@ -0,0 +1,65 @@
+.tvd-page {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+
+    .tvd-top {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        margin-top: 20px;
+    }
+
+    .tvd-main {
+        height: 100%;
+        display: flex;
+        overflow: hidden;
+        align-items: stretch;
+        flex-flow: row nowrap;
+
+        .tvd-left {
+            position: relative;
+            flex: 2;
+
+            > div {
+                position: absolute;
+                //pointer-events: none;
+                transition: all .25s ease-out;
+                opacity: 1;
+
+                &:hover {
+                    opacity: 0;
+                }
+
+                &.tvd-tr-table {
+                    right: 15px;
+                    top: 38px;
+                }
+
+                &.tvd-bl-table {
+                    bottom: 35px;
+                    left: 50px;
+                }
+            }
+
+        }
+
+        .tvd-right {
+            flex: 1;
+            display: flex;
+            align-items: flex-end;
+            padding-left: 10px;
+            flex-direction: column;
+            justify-content: stretch;
+
+            .tvd-npt-filter {
+                margin-bottom: 10px;
+
+                span {
+                    margin: 0 10px;
+                }
+            }
+        }
+    }
+}
diff --git a/src/utils/functions.tsx b/src/utils/functions.tsx
index 453eb07..a6751d2 100644
--- a/src/utils/functions.tsx
+++ b/src/utils/functions.tsx
@@ -7,28 +7,37 @@ export const getPrecision = (number: number) => Number.isFinite(number) ? number
 
 export type KeyType = number | string
 
-export type SaubData = {
-  key?: number
-  depth?: number
-  date?: string
-  day?: number
+export const nwtIdCategory = 1043
+
+export type SaubData = WellOperationDto & {
+  isNPT?: boolean // Относится ли операция к НПВ
+  key?: number // ID операции
+  depth?: number // Глубина
+  date?: string // Дата
+  nptHours?: number // Колличество часов НПВ с начала бурения до текущего момента
 }
 
 export const getOperations = async (idWell: number): Promise<{
-  operations?: WellOperationDtoPlanFactPredictBase[],
-  plan?: SaubData[]
-  fact?: SaubData[]
-  predict?: SaubData[]
+  operations: WellOperationDtoPlanFactPredictBase[],
+  plan: SaubData[]
+  fact: SaubData[]
+  predict: SaubData[]
 }> => {
   const ops = await OperationStatService.getTvd(idWell)
 
-  if (!ops) return {}
+  if (!ops) return {
+    operations: [],
+    plan: [],
+    fact: [],
+    predict: [],
+  }
 
   const convert = (operation?: WellOperationDto): SaubData => ({
+    ...operation,
     key: operation?.id,
     depth: operation?.depthStart,
     date: operation?.dateStart,
-    day: operation?.day,
+    isNPT: operation?.idCategory === nwtIdCategory,
   })
 
   const planData = ops

From d1998ec2f690f42f20fac5092e9266c68ff6a66b Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Thu, 17 Mar 2022 18:05:50 +0500
Subject: [PATCH 10/21] =?UTF-8?q?=D0=9D=D0=B0=20=D0=93=D0=93=D0=94=20?=
 =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BA?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20=D1=8D=D0=BA=D1=81=D0=BF=D0=BE?=
 =?UTF-8?q?=D1=80=D1=82=D0=B0,=20IEB=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BA=D0=BE=D0=BB=D0=B1=D0=B5?=
 =?UTF-8?q?=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WellOperations/ImportExportBar.jsx |  4 ++--
 src/pages/WellOperations/Tvd.jsx             | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/pages/WellOperations/ImportExportBar.jsx b/src/pages/WellOperations/ImportExportBar.jsx
index 34fe7d8..4e44ff7 100644
--- a/src/pages/WellOperations/ImportExportBar.jsx
+++ b/src/pages/WellOperations/ImportExportBar.jsx
@@ -12,8 +12,8 @@ const style = { margin: 4 }
 export const ImportExportBar = memo(({ idWell, onImported, disabled }) => {
   const [isImportModalVisible, setIsImportModalVisible] = useState(false)
 
-  const downloadTemplate = async () => download(`/api/well/${idWell}/wellOperations/template`)
-  const downloadExport = async () => download(`/api/well/${idWell}/wellOperations/export`)
+  const downloadTemplate = async () => await download(`/api/well/${idWell}/wellOperations/template`)
+  const downloadExport = async () => await download(`/api/well/${idWell}/wellOperations/export`)
 
   const onDone = () => {
     setIsImportModalVisible(false)
diff --git a/src/pages/WellOperations/Tvd.jsx b/src/pages/WellOperations/Tvd.jsx
index 49279e4..ae54cb8 100644
--- a/src/pages/WellOperations/Tvd.jsx
+++ b/src/pages/WellOperations/Tvd.jsx
@@ -1,7 +1,7 @@
 import { useHistory } from 'react-router-dom'
 import { memo, useState, useRef, useEffect, useCallback } from 'react'
 import { Switch, Button, InputNumber, Descriptions } from 'antd'
-import { DoubleLeftOutlined, DoubleRightOutlined, FilterOutlined } from '@ant-design/icons'
+import { DoubleLeftOutlined, DoubleRightOutlined, ExportOutlined, FilterOutlined } from '@ant-design/icons'
 
 import {
 	Chart,
@@ -17,7 +17,7 @@ import zoomPlugin from 'chartjs-plugin-zoom'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { invokeWebApiWrapperAsync } from '@components/factory'
+import { download, invokeWebApiWrapperAsync } from '@components/factory'
 import { makeDateColumn, makeNumericColumn, makeTextColumn, Table } from '@components/Table'
 import { formatDate, fractionalSum } from '@utils/datetime'
 import { getOperations } from '@utils/functions'
@@ -154,6 +154,7 @@ export const Tvd = memo(({ idWell, title }) => {
   const [operations, setOperations] = useState({})
   const [isLoading, setIsLoading] = useState(false)
   const [isTableLoading, setIsTableLoading] = useState(false)
+  const [isFileExporting, setIsFileExporting] = useState(false)
   const [xLabel, setXLabel] = useState('day')
 	const [chart, setChart] = useState()
   const [npt, setNPT] = useState([])
@@ -265,6 +266,14 @@ export const Tvd = memo(({ idWell, title }) => {
     setTableVisible((pre) => !pre)
   }, [])
 
+  const onExport = useCallback(() => invokeWebApiWrapperAsync(
+    async () => {
+      await download(`/api/well/${idWell}/wellOperations/scheduleReport`)
+    },
+    setIsFileExporting,
+    'Не удалось загрузить файл'
+  ), [idWell])
+
   return (
     <div className={'container tvd-page'}>
       <div className={'tvd-top'}>
@@ -277,6 +286,12 @@ export const Tvd = memo(({ idWell, title }) => {
             onChange={(checked) => setXLabel(checked ? 'date' : 'day')}
             style={{ marginRight: '20px' }}
           />
+          <Button
+            icon={<ExportOutlined />}
+            loading={isFileExporting}
+            onClick={onExport}
+            style={{ marginRight: '5px' }}
+          >Экспорт</Button>
           <Button
             icon={tableVisible ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
             onClick={toogleTable}

From 94bc8df3e3e8f491f60f667ad0ddd5d078e8e2da Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Fri, 18 Mar 2022 13:03:41 +0500
Subject: [PATCH 11/21] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D1=91?=
 =?UTF-8?q?=D0=BD=20=D1=81=D1=82=D0=B0=D0=BD=D0=B4=D0=B0=D1=80=D1=82=20?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=82=D1=8B=20=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82?=
 =?UTF-8?q?=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/datetime.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts
index 4efcb56..74090a8 100644
--- a/src/utils/datetime.ts
+++ b/src/utils/datetime.ts
@@ -4,7 +4,7 @@ import { SimpleTimezoneDto } from '@api'
 
 export type RawDate = number | string | Date
 
-export const defaultFormat: string = 'YYYY.MM.DD HH:mm'
+export const defaultFormat: string = 'DD.MM.YYYY HH:mm'
 
 export enum timeInS {
     millisecond = 0.001,

From 98f20a4ef8c8d7e3febe313cd6f9bde0e9b7456a Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Fri, 18 Mar 2022 13:03:58 +0500
Subject: [PATCH 12/21] =?UTF-8?q?Tvd=20=D0=B8=20=D1=82=D0=B0=D0=B1=D0=BB?=
 =?UTF-8?q?=D0=B8=D1=86=D0=B0=20=D0=9D=D0=9F=D0=92=20=D1=82=D0=B5=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D1=8C=201:1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/tvd.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/tvd.less b/src/styles/tvd.less
index 52676ff..2b51e90 100644
--- a/src/styles/tvd.less
+++ b/src/styles/tvd.less
@@ -20,7 +20,7 @@
 
         .tvd-left {
             position: relative;
-            flex: 2;
+            flex: 1;
 
             > div {
                 position: absolute;
@@ -56,7 +56,7 @@
             .tvd-npt-filter {
                 margin-bottom: 10px;
 
-                span {
+                > span {
                     margin: 0 10px;
                 }
             }

From 1f5cc759be726846abe89f64adf4fa98c59dcb95 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Fri, 18 Mar 2022 14:31:50 +0500
Subject: [PATCH 13/21] =?UTF-8?q?Tvd=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B5=D1=81=D0=B5=D0=BD=D0=B0=20=D0=B2=20=D0=BE=D1=82=D0=B4?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=D0=BD=D1=83=D1=8E=20=D0=B4=D0=B8=D1=80=D0=B5?=
 =?UTF-8?q?=D0=BA=D1=82=D0=BE=D1=80=D0=B8=D1=8E=20=D0=B8=20=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D1=84=D0=B0=D0=B9=D0=BB=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WellOperations/Tvd.jsx              | 355 ------------------
 .../WellOperations/Tvd/AdditionalTables.jsx   |  67 ++++
 .../WellOperations/Tvd/NetGraphExport.jsx     |  29 ++
 src/pages/WellOperations/Tvd/NptTable.jsx     |  66 ++++
 src/pages/WellOperations/Tvd/index.jsx        | 226 +++++++++++
 5 files changed, 388 insertions(+), 355 deletions(-)
 delete mode 100644 src/pages/WellOperations/Tvd.jsx
 create mode 100644 src/pages/WellOperations/Tvd/AdditionalTables.jsx
 create mode 100644 src/pages/WellOperations/Tvd/NetGraphExport.jsx
 create mode 100644 src/pages/WellOperations/Tvd/NptTable.jsx
 create mode 100644 src/pages/WellOperations/Tvd/index.jsx

diff --git a/src/pages/WellOperations/Tvd.jsx b/src/pages/WellOperations/Tvd.jsx
deleted file mode 100644
index ae54cb8..0000000
--- a/src/pages/WellOperations/Tvd.jsx
+++ /dev/null
@@ -1,355 +0,0 @@
-import { useHistory } from 'react-router-dom'
-import { memo, useState, useRef, useEffect, useCallback } from 'react'
-import { Switch, Button, InputNumber, Descriptions } from 'antd'
-import { DoubleLeftOutlined, DoubleRightOutlined, ExportOutlined, FilterOutlined } from '@ant-design/icons'
-
-import {
-	Chart,
-	TimeScale,
-	LinearScale,
-	Legend,
-	LineController,
-	PointElement,
-	LineElement
-} from 'chart.js'
-import 'chartjs-adapter-moment'
-import zoomPlugin from 'chartjs-plugin-zoom'
-import ChartDataLabels from 'chartjs-plugin-datalabels'
-
-import LoaderPortal from '@components/LoaderPortal'
-import { download, invokeWebApiWrapperAsync } from '@components/factory'
-import { makeDateColumn, makeNumericColumn, makeTextColumn, Table } from '@components/Table'
-import { formatDate, fractionalSum } from '@utils/datetime'
-import { getOperations } from '@utils/functions'
-
-import '@styles/index.css'
-import '@styles/tvd.less'
-
-const { Item } = Descriptions
-
-Chart.register(
-  TimeScale,
-  LinearScale,
-  LineController,
-  LineElement,
-  PointElement,
-  Legend,
-  ChartDataLabels,
-  zoomPlugin
-)
-
-const numericRender = (value) => Number.isFinite(value) ? (+value).toFixed(2) : '-'
-
-const scaleTypes = {
-  day: {
-    min: 0,
-    type: 'linear',
-    display: true,
-    title: { display: false, text: '' },
-    ticks: { stepSize: 1 }
-  },
-  date: {
-    display: true,
-    title: { display: true },
-    type: 'time',
-    time: {
-      unit: 'hour',
-      displayFormats: { 'hour': 'MM.DD'  }
-    },
-    grid: { drawTicks: true },
-    ticks: {
-      stepSize: 3,
-      major: { enabled: true },
-      z: 1,
-      display: true,
-      textStrokeColor: '#fff',
-      textStrokeWidth: 2,
-      color: '#000',
-    }
-  }
-}
-
-const defaultOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  aspectRatio: false,
-  interaction: {
-    intersect: false,
-    mode: 'nearest',
-  },
-  scales: {
-    x: scaleTypes.day,
-    y: {
-      type: 'linear',
-      position: 'top',
-      reverse: true,
-      display: true,
-      title: {
-        display: false,
-        text: '',
-      }
-    }
-  },
-  parsing: {
-    xAxisKey: 'day',
-    yAxisKey: 'depth',
-  },
-  elements: {
-    point: {
-      radius: 1.7,
-      //backgroundColor:'#aaa',
-      //pointStyle:'triangle',
-    },
-  },
-  plugins: {
-    legend: {
-      display: true,
-    },
-    datalabels: {
-      display: false,
-    },
-    tooltip: {
-      enabled: true,
-      position: 'nearest',
-      callbacks: {
-        title: (items) => [
-          `Дата: ${formatDate(items[0].raw?.date) ?? '-'}`,
-          `День с начала бурения: ${parseInt(items[0].raw?.day)}`,
-        ],
-        afterTitle: (items) => `Глубина: ${numericRender(items[0].raw?.depth)}`,
-        label: (item) => [
-          item.raw.wellSectionTypeName + ': ' + item.raw.categoryName,
-          `Длительность (ч): ${item.raw.nptHours}`
-        ],
-      },
-    },
-  },
-}
-
-const nptTableColumns = [
-  makeTextColumn('Конструкция секции', 'wellSectionTypeName'),
-  makeNumericColumn('Глубина', 'depth'),
-  makeDateColumn('Дата начала', 'date'),
-  makeNumericColumn('Длительность (ч)', 'durationHours'),
-]
-
-const makeDataset = (data, label, color, borderWidth = 1.5, borderDash) => ({
-  label,
-  data,
-  backgroundColor: color,
-  borderColor: color,
-  borderWidth,
-  borderDash,
-})
-
-const calcEndDate = (saubData) => {
-  if (!Array.isArray(saubData) || saubData.length <= 0) return [null, null]
-  const lastElm = saubData.at(-1)
-  return [saubData[0]?.date, fractionalSum(lastElm?.date, lastElm?.nptHours, 'hour')]
-}
-
-const printDate = (date) => formatDate(date) ?? '-'
-
-export const Tvd = memo(({ idWell, title }) => {
-  const [operations, setOperations] = useState({})
-  const [isLoading, setIsLoading] = useState(false)
-  const [isTableLoading, setIsTableLoading] = useState(false)
-  const [isFileExporting, setIsFileExporting] = useState(false)
-  const [xLabel, setXLabel] = useState('day')
-	const [chart, setChart] = useState()
-  const [npt, setNPT] = useState([])
-  const [filteredNPT, setFilteredNPT] = useState([])
-  const [filterValue, setFilterValue] = useState(null)
-  const [tableVisible, setTableVisible] = useState(true)
-  const [additionalData, setAdditionalData] = useState({})
-
-  const chartRef = useRef(null)
-  const history = useHistory()
-
-  const onPointClick = useCallback((e) => {
-    const points = e?.chart?.tooltip?.dataPoints
-    if (!points || !(points.length > 0)) return
-
-    const datasetId = points.find((p) => p.datasetIndex !== 1)?.datasetIndex
-    if (typeof datasetId === 'undefined') return
-
-    const datasetName = datasetId === 2 ? 'plan' : 'fact'
-    const ids = points.filter((p) => p?.raw?.id).map((p) => p.raw.id)
-    const url = `/well/${idWell}/operations/${datasetName}/?selectedId=${ids.join(',')}`
-    history.push(url)
-  }, [idWell, history])
-
-  useEffect(() => invokeWebApiWrapperAsync(
-    async () => {
-      const operations = await getOperations(idWell)
-      setNPT(operations.fact.filter((row) => row.isNPT) ?? [])
-      setOperations(operations)
-
-      const [factStartDate, factEndDate] = calcEndDate(operations.fact)
-      const [planStartDate, planEndDate] = calcEndDate(operations.plan)
-      const [predictStartDate, predictEndDate] = calcEndDate(operations.predict)
-
-      const last = predictEndDate ?? factEndDate
-      setAdditionalData({
-        lag: (+new Date(last) - +new Date(planEndDate)) / 86400_000,
-        endDate: last,
-        factStartDate,
-        factEndDate,
-        planStartDate,
-        planEndDate,
-        predictStartDate,
-        predictEndDate,
-      })
-    },
-    setIsLoading,
-    `Не удалось загрузить операции по скважине "${idWell}"`,
-    'Получение списка опервций по скважине'
-  ), [idWell])
-
-  useEffect(() => invokeWebApiWrapperAsync(
-    async () => setFilteredNPT(npt.filter((row) => !filterValue || row.durationHours >= filterValue)),
-    setIsTableLoading,
-    'Не удалось отфильтровать НПВ по времени'
-  ), [npt, filterValue])
-
-	useEffect(() => {
-    const npt = []
-    operations?.fact?.forEach((row) => {
-      if (row?.isNPT !== false) return
-      const nptH = +(row.nptHours ?? 0)
-      npt.push({
-        ...row,
-        day: row.day - nptH / 24,
-        date: fractionalSum(row.date, -nptH, 'hour'),
-      })
-    })
-
-
-    const data = {
-      datasets: [
-        makeDataset(operations?.fact, 'Факт', '#0A0', 3),
-        makeDataset(operations?.predict, 'Прогноз', 'purple', 1, [7, 3]),
-        makeDataset(operations?.plan, 'План', '#F00', 3),
-        makeDataset(npt, 'Факт без НПВ', '#00F', 3)
-      ]
-    }
-
-		if (chartRef.current && !chart) {
-			const thisOptions = {}
-			Object.assign(thisOptions, defaultOptions)
-      thisOptions.onClick = onPointClick
-      thisOptions.scales.x = scaleTypes[xLabel]
-      thisOptions.parsing.xAxisKey = xLabel
-
-			const newChart = new Chart(chartRef.current, {
-				type: 'line',
-				plugins: [ChartDataLabels],
-				options: thisOptions,
-				data: data
-			})
-			setChart(newChart)
-
-			return () => chart?.destroy()
-		} else {
-      chart.data = data
-      chart.options.scales.x = scaleTypes[xLabel]
-      chart.options.parsing.xAxisKey = xLabel
-      chart.update()
-      // Обнуление ширины необходимо для уменьшения размена при resize после появления элементов
-      chart.canvas.parentNode.style.width = '0'
-      chart.resize()
-    }
-	}, [chart, operations, xLabel, onPointClick])
-
-  const toogleTable = useCallback(() => {
-    setOperations((pre) => ({ ...pre }))
-    setTableVisible((pre) => !pre)
-  }, [])
-
-  const onExport = useCallback(() => invokeWebApiWrapperAsync(
-    async () => {
-      await download(`/api/well/${idWell}/wellOperations/scheduleReport`)
-    },
-    setIsFileExporting,
-    'Не удалось загрузить файл'
-  ), [idWell])
-
-  return (
-    <div className={'container tvd-page'}>
-      <div className={'tvd-top'}>
-        <h2>{title || 'График Глубина-день'}</h2>
-        <div>
-          <Switch
-            checkedChildren={'Дата'}
-            unCheckedChildren={'Дни со старта'}
-            loading={isLoading}
-            onChange={(checked) => setXLabel(checked ? 'date' : 'day')}
-            style={{ marginRight: '20px' }}
-          />
-          <Button
-            icon={<ExportOutlined />}
-            loading={isFileExporting}
-            onClick={onExport}
-            style={{ marginRight: '5px' }}
-          >Экспорт</Button>
-          <Button
-            icon={tableVisible ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
-            onClick={toogleTable}
-          />
-        </div>
-      </div>
-      <LoaderPortal show={isLoading} style={{ flex: '1'}}>
-        <div className={'tvd-main'}>
-          <div className={'tvd-left'}>
-            <div className={'tvd-tr-table'} onMouseEnter={(e) => console.log(e)}>
-              <Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
-                <Item label={'Дата'}>{printDate(additionalData.endDate)}</Item>
-                <Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
-              </Descriptions>
-            </div>
-            <canvas ref={chartRef} />
-            <div className={'tvd-bl-table'} style={{ bottom: xLabel === 'day' ? '35px' : '85px' }}>
-              <Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
-                <Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
-                <Item label={'Начало цикла (план)'}>{printDate(additionalData.planStartDate)}</Item>
-                <Item label={'Начало цикла (факт)'}>{printDate(additionalData.factStartDate)}</Item>
-                <Item label={'Окончание цикла (план)'}>{printDate(additionalData.planEndDate)}</Item>
-                <Item label={'Окончание цикла (факт)'}>{printDate(additionalData.factEndDate)}</Item>
-              </Descriptions>
-            </div>
-          </div>
-          {tableVisible && (
-            <div className={'tvd-right'}>
-              <div className={'tvd-npt-filter'}>
-                <FilterOutlined />
-                <span>Фильтр время НПВ &ge;</span>
-                <InputNumber
-                  step={0.5}
-                  max={10000}
-                  min={0}
-                  defaultValue={0}
-                  onChange={(value) => setFilterValue(value ?? 0)}
-                  value={filterValue}
-                />
-                <span>ч.</span>
-              </div>
-              <LoaderPortal show={isTableLoading}>
-                <Table
-                  bordered
-                  size={'small'}
-                  dataSource={filteredNPT}
-                  columns={nptTableColumns}
-                  pagination={false}
-                  tableName={'tvd_npt'}
-                  scroll={{ y: '60vh', scrollToFirstRowOnChange: true }}
-                />
-              </LoaderPortal>
-            </div>
-          )}
-        </div>
-      </LoaderPortal>
-    </div>
-  )
-})
-
-export default Tvd
diff --git a/src/pages/WellOperations/Tvd/AdditionalTables.jsx b/src/pages/WellOperations/Tvd/AdditionalTables.jsx
new file mode 100644
index 0000000..1889b63
--- /dev/null
+++ b/src/pages/WellOperations/Tvd/AdditionalTables.jsx
@@ -0,0 +1,67 @@
+import { Descriptions } from 'antd'
+import { memo, useEffect, useState } from 'react'
+
+import { makeNumericRender } from '@components/Table'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import { formatDate, fractionalSum } from '@utils/datetime'
+
+import '@styles/tvd.less'
+
+const { Item } = Descriptions
+
+const calcEndDate = (saubData) => {
+    if (!Array.isArray(saubData) || saubData.length <= 0) return [null, null]
+    const lastElm = saubData.at(-1)
+    return [saubData[0]?.date, fractionalSum(lastElm?.date, lastElm?.nptHours, 'hour')]
+}
+
+const numericRender = makeNumericRender(2)
+const printDate = (date) => formatDate(date) ?? '-'
+
+export const AdditionalTables = memo(({ operations, xLabel, setIsLoading }) => {
+    const [additionalData, setAdditionalData] = useState({})
+
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => {
+            const [factStartDate, factEndDate] = calcEndDate(operations.fact)
+            const [planStartDate, planEndDate] = calcEndDate(operations.plan)
+            const [predictStartDate, predictEndDate] = calcEndDate(operations.predict)
+
+            const last = predictEndDate ?? factEndDate
+            setAdditionalData({
+                lag: (+new Date(last) - +new Date(planEndDate)) / 86400_000,
+                endDate: last,
+                factStartDate,
+                factEndDate,
+                planStartDate,
+                planEndDate,
+                predictStartDate,
+                predictEndDate,
+            })
+        },
+        setIsLoading,
+        'Не удалось высчитать дополнительные данные'
+    ), [operations, setIsLoading])
+
+    return (
+        <>
+            <div className={'tvd-tr-table'}>
+                <Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
+                    <Item label={'Дата завершения'}>{printDate(additionalData.endDate)}</Item>
+                    <Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
+                </Descriptions>
+            </div>
+            <div className={'tvd-bl-table'} style={{ bottom: xLabel === 'day' ? '35px' : '85px' }}>
+                <Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
+                    <Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
+                    <Item label={'Начало цикла (план)'}>{printDate(additionalData.planStartDate)}</Item>
+                    <Item label={'Начало цикла (факт)'}>{printDate(additionalData.factStartDate)}</Item>
+                    <Item label={'Окончание цикла (план)'}>{printDate(additionalData.planEndDate)}</Item>
+                    <Item label={'Окончание цикла (факт)'}>{printDate(additionalData.factEndDate)}</Item>
+                </Descriptions>
+            </div>
+        </>
+    )
+})
+
+export default AdditionalTables
diff --git a/src/pages/WellOperations/Tvd/NetGraphExport.jsx b/src/pages/WellOperations/Tvd/NetGraphExport.jsx
new file mode 100644
index 0000000..72a5d72
--- /dev/null
+++ b/src/pages/WellOperations/Tvd/NetGraphExport.jsx
@@ -0,0 +1,29 @@
+import { memo, useCallback, useState } from 'react'
+import { ExportOutlined } from '@ant-design/icons'
+import { Button } from 'antd'
+
+import { download, invokeWebApiWrapperAsync } from '@components/factory'
+
+export const NetGraphExport = memo(({ idWell, ...other }) => {
+    const [isFileExporting, setIsFileExporting] = useState(false)
+
+    const onExport = useCallback(() => invokeWebApiWrapperAsync(
+        async () => await download(`/api/well/${idWell}/wellOperations/scheduleReport`),
+        setIsFileExporting,
+        'Не удалось загрузить файл'
+    ), [idWell])
+
+    return (
+        <Button
+            icon={<ExportOutlined />}
+            loading={isFileExporting}
+            onClick={onExport}
+            style={{ marginRight: '5px' }}
+            {...other}
+        >
+            Сетевой график
+        </Button>
+    )
+})
+
+export default NetGraphExport
diff --git a/src/pages/WellOperations/Tvd/NptTable.jsx b/src/pages/WellOperations/Tvd/NptTable.jsx
new file mode 100644
index 0000000..e6187e0
--- /dev/null
+++ b/src/pages/WellOperations/Tvd/NptTable.jsx
@@ -0,0 +1,66 @@
+import { memo, useEffect, useState } from 'react'
+import { InputNumber } from 'antd'
+import { FilterOutlined } from '@ant-design/icons'
+
+import LoaderPortal from '@components/LoaderPortal'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import { makeDateColumn, makeNumericColumn, makeTextColumn, Table } from '@components/Table'
+
+export const columns = [
+    makeTextColumn('Конструкция секции', 'wellSectionTypeName', null, null, null, { width: 140 }),
+    makeNumericColumn('Глубина', 'depth', null, null, null, 80),
+    makeDateColumn('Дата начала', 'date', false, undefined, { width: 90 }),
+    makeNumericColumn('Длительность (ч)', 'durationHours', null, null, null, 120),
+    makeTextColumn('Доп. инфо', 'categoryInfo', null, null, null),
+    makeTextColumn('Комментарий', 'comment'),
+]
+
+export const NptTable = memo(({ operations }) => {
+    const [filterValue, setFilterValue] = useState(0)
+    const [npt, setNPT] = useState([])
+    const [filteredNPT, setFilteredNPT] = useState([])
+    const [isTableLoading, setIsTableLoading] = useState(false)
+
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => setNPT(operations?.filter((row) => row?.isNPT) ?? []),
+        setIsTableLoading,
+        'Не удалось получить список НПВ'
+    ), [operations])
+
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => setFilteredNPT(npt.filter((row) => !filterValue || row.durationHours >= filterValue)),
+        setIsTableLoading,
+        'Не удалось отфильтровать НПВ по времени'
+    ), [npt, filterValue])
+
+    return (
+        <div className={'tvd-right'}>
+            <div className={'tvd-npt-filter'}>
+            <FilterOutlined />
+            <span>Фильтр время НПВ &ge;</span>
+            <InputNumber
+                step={0.5}
+                max={10000}
+                min={0}
+                defaultValue={0}
+                onChange={(value) => setFilterValue(value ?? 0)}
+                value={filterValue}
+            />
+            <span>ч.</span>
+            </div>
+            <LoaderPortal show={isTableLoading}>
+                <Table
+                    bordered
+                    size={'small'}
+                    dataSource={filteredNPT}
+                    columns={columns}
+                    pagination={false}
+                    tableName={'tvd_npt'}
+                    scroll={{ y: '60vh', scrollToFirstRowOnChange: true }}
+                />
+            </LoaderPortal>
+        </div>
+    )
+})
+
+export default NptTable
diff --git a/src/pages/WellOperations/Tvd/index.jsx b/src/pages/WellOperations/Tvd/index.jsx
new file mode 100644
index 0000000..e0e2784
--- /dev/null
+++ b/src/pages/WellOperations/Tvd/index.jsx
@@ -0,0 +1,226 @@
+import { useHistory } from 'react-router-dom'
+import { memo, useState, useRef, useEffect, useCallback } from 'react'
+import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons'
+import { Switch, Button } from 'antd'
+
+import {
+	Chart,
+	TimeScale,
+	LinearScale,
+	Legend,
+	LineController,
+	PointElement,
+	LineElement
+} from 'chart.js'
+import 'chartjs-adapter-moment'
+import zoomPlugin from 'chartjs-plugin-zoom'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+
+import LoaderPortal from '@components/LoaderPortal'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import { formatDate, fractionalSum } from '@utils/datetime'
+import { getOperations } from '@utils/functions'
+
+import NptTable from './NptTable'
+import NetGraphExport from './NetGraphExport'
+import AdditionalTables from './AdditionalTables'
+
+import '@styles/index.css'
+import '@styles/tvd.less'
+
+Chart.register(
+  TimeScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  Legend,
+  ChartDataLabels,
+  zoomPlugin
+)
+
+const numericRender = (value) => Number.isFinite(value) ? (+value).toFixed(2) : '-'
+
+const scaleTypes = {
+    day: {
+        min: 0,
+        type: 'linear',
+        display: true,
+        title: { display: false, text: '' },
+        ticks: { stepSize: 1 }
+    },
+    date: {
+        display: true,
+        title: { display: true },
+        type: 'time',
+        time: { unit: 'day', displayFormats: { day: 'DD.MM.YYYY' } },
+        grid: { drawTicks: true },
+        ticks: {
+            stepSize: 3,
+            major: { enabled: true },
+            z: 1,
+            display: true,
+            textStrokeColor: '#fff',
+            textStrokeWidth: 2,
+            color: '#000',
+        }
+    }
+}
+
+const defaultOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: false,
+    interaction: { intersect: false, mode: 'point' },
+    scales: {
+        x: scaleTypes.day,
+        y: {
+            type: 'linear',
+            position: 'top',
+            reverse: true,
+            display: true,
+            title: { display: false, text: '' }
+        }
+    },
+    parsing: { xAxisKey: 'day', yAxisKey: 'depth' },
+    elements: { point: { radius: 1.7 } },
+    plugins: {
+        legend: { display: true },
+        datalabels: { display: false },
+        tooltip: {
+            enabled: true,
+            position: 'nearest',
+            callbacks: {
+                title: (items) => [
+                    `Дата: ${formatDate(items[0].raw?.date) ?? '-'}`,
+                    `День с начала бурения: ${parseInt(items[0].raw?.day)}`,
+                ],
+                afterTitle: (items) => `Глубина: ${numericRender(items[0].raw?.depth)}`,
+                label: (item) => [
+                    item.raw.wellSectionTypeName + ': ' + item.raw.categoryName,
+                    `Длительность (ч): ${item.raw.nptHours}`
+                ],
+            },
+        },
+    },
+}
+
+const makeDataset = (data, label, color, borderWidth = 1.5, borderDash) => ({
+    label,
+    data,
+    backgroundColor: color,
+    borderColor: color,
+    borderWidth,
+    borderDash,
+})
+
+export const Tvd = memo(({ idWell, title }) => {
+    const [chart, setChart] = useState()
+    const [xLabel, setXLabel] = useState('day')
+    const [operations, setOperations] = useState({})
+    const [tableVisible, setTableVisible] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+
+    const chartRef = useRef(null)
+    const history = useHistory()
+
+    const onPointClick = useCallback((e) => {
+        const points = e?.chart?.tooltip?.dataPoints
+        if (!points || !(points.length > 0)) return
+
+        const datasetId = points.find((p) => p.datasetIndex !== 1)?.datasetIndex
+        if (typeof datasetId === 'undefined') return
+
+        const datasetName = datasetId === 2 ? 'plan' : 'fact'
+        const ids = points.filter((p) => p?.raw?.id).map((p) => p.raw.id).join(',')
+        history.push(`/well/${idWell}/operations/${datasetName}/?selectedId=${ids}`)
+    }, [idWell, history])
+
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => setOperations(await getOperations(idWell)),
+        setIsLoading,
+        `Не удалось загрузить операции по скважине "${idWell}"`,
+        'Получение списка опервций по скважине'
+    ), [idWell])
+
+	useEffect(() => {
+        const withoutNpt = []
+        operations?.fact?.forEach((row) => {
+            if (row?.isNPT !== false) return
+            const nptH = +(row.nptHours ?? 0)
+            withoutNpt.push({
+                ...row,
+                day: row.day - nptH / 24,
+                date: fractionalSum(row.date, -nptH, 'hour'),
+            })
+        })
+
+        const data = { datasets: [
+            makeDataset(operations?.fact, 'Факт', '#0A0', 3),
+            makeDataset(operations?.predict, 'Прогноз', 'purple', 1, [7, 3]),
+            makeDataset(operations?.plan, 'План', '#F00', 3),
+            makeDataset(withoutNpt, 'Факт без НПВ', '#00F', 3)
+        ]}
+
+		if (chartRef.current && !chart) {
+			const thisOptions = {}
+			Object.assign(thisOptions, defaultOptions)
+            thisOptions.onClick = onPointClick
+            thisOptions.scales.x = scaleTypes[xLabel]
+            thisOptions.parsing.xAxisKey = xLabel
+
+			const newChart = new Chart(chartRef.current, {
+				type: 'line',
+				plugins: [ChartDataLabels],
+				options: thisOptions,
+				data: data
+			})
+			setChart(newChart)
+
+			return () => chart?.destroy()
+		} else {
+            chart.data = data
+            chart.options.scales.x = scaleTypes[xLabel]
+            chart.options.parsing.xAxisKey = xLabel
+            chart.update()
+            // Обнуление ширины необходимо для уменьшения размена при resize после появления элементов
+            chart.canvas.parentNode.style.width = '0'
+            chart.resize()
+        }
+	}, [chart, operations, xLabel, onPointClick])
+
+    const toogleTable = useCallback(() => {
+        setOperations(pre => ({ ...pre }))
+        setTableVisible(v => !v)
+    }, [])
+
+    return (
+        <div className={'container tvd-page'}>
+            <div className={'tvd-top'}>
+                <h2>{title || 'График Глубина-день'}</h2>
+                <div>
+                    <Switch
+                        checkedChildren={'Дата'}
+                        unCheckedChildren={'Дни со старта'}
+                        loading={isLoading}
+                        onChange={(checked) => setXLabel(checked ? 'date' : 'day')}
+                        style={{ marginRight: '20px' }}
+                    />
+                    <NetGraphExport idWell={idWell} />
+                    <Button icon={tableVisible ? <DoubleRightOutlined /> : <DoubleLeftOutlined />} onClick={toogleTable}>НПВ</Button>
+                </div>
+            </div>
+            <LoaderPortal show={isLoading} style={{ flex: 1 }}>
+                <div className={'tvd-main'}>
+                    <div className={'tvd-left'}>
+                        <AdditionalTables operations={operations} xLabel={xLabel} setIsLoading={setIsLoading} />
+                        <canvas ref={chartRef} />
+                    </div>
+                    {tableVisible && <NptTable operations={operations?.fact} />}
+                </div>
+            </LoaderPortal>
+        </div>
+    )
+})
+
+export default Tvd

From ba8845450009baf63b5c0a4e2551f24e2144252f Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Fri, 18 Mar 2022 14:32:57 +0500
Subject: [PATCH 14/21] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D1=81=D1=82=D0=BE=D0=BB=D1=8C=D1=86=D1=8B?=
 =?UTF-8?q?=20=D1=81=20=D0=BD=D0=B0=D1=80=D0=B0=D1=81=D1=82=D0=B0=D1=8E?=
 =?UTF-8?q?=D1=89=D0=B8=D0=BC=20=D1=82=D0=B0=D0=B9=D0=BC=D0=B8=D0=BD=D0=B3?=
 =?UTF-8?q?=D0=BE=D0=BC=20=D0=BD=D0=B0=20=D0=BF=D0=BB=D0=B0=D0=BD=20=D0=B8?=
 =?UTF-8?q?=20=D1=84=D0=B0=D0=BA=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/Columns/select.tsx       |  4 +-
 src/pages/WellOperations/Tvd/NptTable.jsx     |  2 +
 .../WellOperations/WellOperationsEditor.jsx   | 58 +++++++++++++++----
 src/pages/WellOperations/index.jsx            |  2 +-
 4 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/components/Table/Columns/select.tsx b/src/components/Table/Columns/select.tsx
index 85c8e5a..393d6a8 100644
--- a/src/components/Table/Columns/select.tsx
+++ b/src/components/Table/Columns/select.tsx
@@ -14,8 +14,8 @@ export const makeSelectColumn = <T extends unknown = string>(
     ...other,
     input: <Select options={options} {...selectOther}/>,
     render: (value) => {
-    const item = options?.find(option => option?.value === value)
-    return other?.render?.(item?.value) ?? item?.label ?? defaultValue ?? value ?? '--'
+        const item = options?.find(option => option?.value === value)
+        return other?.render?.(item?.value) ?? item?.label ?? defaultValue ?? value ?? '--'
     }
 })
 
diff --git a/src/pages/WellOperations/Tvd/NptTable.jsx b/src/pages/WellOperations/Tvd/NptTable.jsx
index e6187e0..4a5cd63 100644
--- a/src/pages/WellOperations/Tvd/NptTable.jsx
+++ b/src/pages/WellOperations/Tvd/NptTable.jsx
@@ -6,6 +6,8 @@ import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { makeDateColumn, makeNumericColumn, makeTextColumn, Table } from '@components/Table'
 
+import '@styles/tvd.less'
+
 export const columns = [
     makeTextColumn('Конструкция секции', 'wellSectionTypeName', null, null, null, { width: 140 }),
     makeNumericColumn('Глубина', 'depth', null, null, null, 80),
diff --git a/src/pages/WellOperations/WellOperationsEditor.jsx b/src/pages/WellOperations/WellOperationsEditor.jsx
index 4f0a6a9..7aebbea 100644
--- a/src/pages/WellOperations/WellOperationsEditor.jsx
+++ b/src/pages/WellOperations/WellOperationsEditor.jsx
@@ -10,6 +10,10 @@ import {
   makeSelectColumn,
   makeActionHandler,
   makeDateColumn,
+  makeNumericColumn,
+  makeNumericRender,
+  makeNumericSorter,
+  makeTextColumn,
 } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
@@ -20,6 +24,8 @@ import { WellOperationService } from '@api'
 const { TextArea } = Input
 
 const basePageSize = 160
+const dayRender = makeNumericRender(2)
+const dayWithoutNptRender = (_, row) => dayRender((row.day ?? 0) - (row.nptHours ?? 0) / 24)
 
 const defaultColumns = [
   makeSelectColumn('Конструкция секции', 'idWellSectionType', [], undefined, {
@@ -34,19 +40,20 @@ const defaultColumns = [
     })],
   }),
   makeSelectColumn('Операция', 'idCategory', [], undefined, { editable: true, width: 200 }),
-  makeColumn('Доп. инфо', 'categoryInfo', { editable: true, width: 300, input: <TextArea/> }),
+  makeTextColumn('Доп. инфо', 'categoryInfo', null, null, null, { editable: true, width: 300, input: <TextArea/> }),
   makeColumn('Глубина забоя на начало, м', 'depthStart', makeNumericColumnOptions(2, 'depthStart')),
   makeColumn('Глубина забоя при завершении, м', 'depthEnd', makeNumericColumnOptions(2, 'depthEnd')),
   makeDateColumn('Время начала', 'dateStart', undefined, undefined, {
     editable: true,
-    width: 200,
+    width: 170,
     initialValue: moment().format(),
   }),
-  makeColumn('Часы', 'durationHours', makeNumericColumnOptions(2, 'durationHours')),
-  makeColumn('Комментарий', 'comment', { editable: true, input: <TextArea/> }),
+  makeNumericColumn('День', 'day', null, null, dayRender, 80),
+  makeColumn('Часы', 'durationHours', { ...makeNumericColumnOptions(2, 'durationHours'), width: 70 }),
+  makeTextColumn('Комментарий', 'comment', null, null, null, { editable: true, input: <TextArea/> }),
 ]
 
-export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
+export const WellOperationsEditor = memo(({ idWell, idType, showNpt, ...other }) => {
   const [pageNumAndPageSize, setPageNumAndPageSize] = useState({ current: 1, pageSize: basePageSize })
   const [paginationTotal, setPaginationTotal] = useState(0)
   const [operations, setOperations] = useState([])
@@ -59,6 +66,10 @@ export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
     return arrayOrDefault(query.get('selectedId')?.split(',')?.map(parseInt))
   }, [location])
 
+  // useEffect(() => {
+  //   setColumns((preColumns) => preColumns.find(()))
+  // }, [showNpt])
+
   useEffect(() => invokeWebApiWrapperAsync(
     async () => {
       let categories = arrayOrDefault(await WellOperationService.getCategories(idWell))
@@ -68,8 +79,16 @@ export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
       sectionTypes = Object.entries(sectionTypes).map(([id, label]) => ({ value: parseInt(id), label }))
 
       setColumns(preColumns => [
-        makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, undefined, { editable: true, width: 160 }),
-        makeSelectColumn('Операция', 'idCategory', categories, undefined, { editable: true, width: 200 }),
+        makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, undefined, {
+          editable: true,
+          width: 160,
+          sorter: makeNumericSorter('idWellSectionType'),
+        }),
+        makeSelectColumn('Операция', 'idCategory', categories, undefined, {
+          editable: true,
+          width: 200,
+          sorter: makeNumericSorter('idCategory'),
+        }),
         ...preColumns.slice(2),
       ])
     },
@@ -78,7 +97,26 @@ export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
     'Получение списка операций по скважине'
   ), [idWell])
 
-  const updateOperations = () => invokeWebApiWrapperAsync(
+  useEffect(() => invokeWebApiWrapperAsync(
+    async() => {
+      setColumns((preColumns) => {
+        if (!!preColumns.find((col) => col.key === 'dayWithoutNpt') === showNpt)
+          return preColumns
+        const newColumns = preColumns.slice(0, 7)
+        if (showNpt)
+          newColumns.push(
+            makeNumericColumn('День без НПВ', 'dayWithoutNpt', null, null, dayWithoutNptRender, 80),
+            ...preColumns.slice(7)
+          )
+        else newColumns.push(...preColumns.slice(8))
+        return newColumns
+      })
+    },
+    setShowLoader,
+    'Не удалось добавить стоблец "День без НПВ"'
+  ), [showNpt])
+
+  const updateOperations = useCallback(() => invokeWebApiWrapperAsync(
     async () => {
       const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
       const take = pageNumAndPageSize.pageSize
@@ -93,9 +131,9 @@ export const WellOperationsEditor = memo(({ idWell, idType, ...other }) => {
     setShowLoader,
     'Не удалось загрузить список операций по скважине',
     'Получение списка операций по скважине'
-  )
+  ), [idWell, idType, pageNumAndPageSize])
 
-  useEffect(updateOperations, [idWell, idType, pageNumAndPageSize])
+  useEffect(updateOperations, [updateOperations])
 
   const handlerProps = {
     service: WellOperationService,
diff --git a/src/pages/WellOperations/index.jsx b/src/pages/WellOperations/index.jsx
index 5da927e..cedad37 100644
--- a/src/pages/WellOperations/index.jsx
+++ b/src/pages/WellOperations/index.jsx
@@ -59,7 +59,7 @@ export const WellOperations = memo(({ idWell }) => {
               <WellOperationsEditor idWell={idWell} idType={0} tableName={'well_operations_plan'}/>
             </PrivateRoute>
             <PrivateRoute path={`${rootPath}/fact`}>
-              <WellOperationsEditor idWell={idWell} idType={1} tableName={'well_operations_fact'}/>
+              <WellOperationsEditor idWell={idWell} idType={1} showNpt tableName={'well_operations_fact'}/>
             </PrivateRoute>
             <PrivateRoute path={`${rootPath}/drillProcessFlow`}>
               <DrillProcessFlow idWell={idWell} />

From d98e2234686b54ebe9a81b4302e93251dae43837 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Fri, 18 Mar 2022 17:37:05 +0500
Subject: [PATCH 15/21] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D1=8B?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D1=83=20=D0=B0=D0=B4=D0=BC=D0=B8=D0=BD=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AdminPanel/ClusterController.jsx    | 38 ++++++++++----
 src/pages/AdminPanel/CompanyController.jsx    | 32 +++++++++---
 .../AdminPanel/CompanyTypeController.jsx      | 30 ++++++++---
 src/pages/AdminPanel/DepositController.jsx    | 40 +++++++++++----
 src/pages/AdminPanel/PermissionController.jsx | 33 +++++++++---
 src/pages/AdminPanel/RoleController.jsx       | 34 +++++++++----
 src/pages/AdminPanel/TelemetryController.jsx  | 41 ++++++++++++---
 .../AdminPanel/UserController/RoleTag.jsx     | 16 +++---
 src/pages/AdminPanel/UserController/index.jsx | 50 +++++++------------
 src/pages/AdminPanel/VisitLog.jsx             | 31 +++++++++---
 src/pages/AdminPanel/WellController/index.jsx | 44 +++++++++++-----
 src/pages/WellOperations/Tvd/NptTable.jsx     |  4 +-
 12 files changed, 269 insertions(+), 124 deletions(-)

diff --git a/src/pages/AdminPanel/ClusterController.jsx b/src/pages/AdminPanel/ClusterController.jsx
index d513d9d..dc8117d 100644
--- a/src/pages/AdminPanel/ClusterController.jsx
+++ b/src/pages/AdminPanel/ClusterController.jsx
@@ -1,4 +1,5 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Input } from 'antd'
 
 import {
     EditableTable,
@@ -9,7 +10,6 @@ import {
     defaultPagination,
     makeTimezoneColumn
 } from '@components/Table'
-import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { AdminClusterService, AdminDepositService } from '@api'
 import { arrayOrDefault } from '@utils'
@@ -21,9 +21,11 @@ import { coordsFixed } from './DepositController'
 export const ClusterController = memo(() => {
     const [deposits, setDeposits] = useState([])
     const [clusters, setClusters] = useState([])
+    const [filteredClusters, setFilteredClusters] = useState([])
     const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
 
-    const clusterColumns = [
+    const clusterColumns = useMemo(() => [
         makeSelectColumn('Месторождение', 'idDeposit', deposits, '--', {
             width: 200,
             editable: true,
@@ -38,7 +40,7 @@ export const ClusterController = memo(() => {
         makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFixed }),
         makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFixed }),
         makeTimezoneColumn('Зона', 'timezone', null, true, { width: 150 }),
-    ]
+    ], [deposits])
 
     const updateTable = useCallback(() => invokeWebApiWrapperAsync(
         async () => {
@@ -63,27 +65,43 @@ export const ClusterController = memo(() => {
 
     useEffect(updateTable, [updateTable])
 
-    const handlerProps = {
+    useEffect(() => {
+        setFilteredClusters(clusters.filter((cluster) => cluster && (!searchValue || [
+            cluster.caption ?? '',
+            cluster.latitude?.toString ?? '',
+            cluster.longitude?.toString() ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
+    }, [clusters, searchValue])
+
+    const handlerProps = useMemo(() => ({
         service: AdminClusterService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
         onComplete: updateTable,
-    }
+    }), [updateTable])
 
     return (
-        <LoaderPortal show={showLoader}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <EditableTable
-                size={'small'}
                 bordered
-                dataSource={clusters}
+                size={'small'}
+                loading={showLoader}
                 columns={clusterColumns}
+                dataSource={filteredClusters}
                 pagination={defaultPagination}
                 onRowAdd={hasPermission('AdminCluster.edit') && makeActionHandler('insert', handlerProps, null, 'Добавление куста')}
                 onRowEdit={hasPermission('AdminCluster.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование куста')}
                 onRowDelete={hasPermission('AdminCluster.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление куста')}
                 tableName={'admin_cluster_controller'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/AdminPanel/CompanyController.jsx b/src/pages/AdminPanel/CompanyController.jsx
index 9973496..c2c5923 100644
--- a/src/pages/AdminPanel/CompanyController.jsx
+++ b/src/pages/AdminPanel/CompanyController.jsx
@@ -1,4 +1,5 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Input } from 'antd'
 
 import {
     EditableTable,
@@ -8,7 +9,6 @@ import {
     makeSelectColumn,
     defaultPagination
 } from '@components/Table'
-import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { AdminCompanyService, AdminCompanyTypeService } from '@api'
 import { arrayOrDefault } from '@utils'
@@ -19,7 +19,9 @@ import { hasPermission } from '@utils/permissions'
 export const CompanyController = memo(() => {
     const [columns, setColumns] = useState([])
     const [companies, setCompanies] = useState([])
+    const [filteredCompanies, setFilteredCompanies] = useState([])
     const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
 
     const updateTable = useCallback(async () => {
         const companies = await AdminCompanyService.getAll()
@@ -53,7 +55,13 @@ export const CompanyController = memo(() => {
         'Получение списка типов команд'
     ), [updateTable])
 
-    const handlerProps = {
+    useEffect(() => {
+        setFilteredCompanies(companies.filter((company) => company && (!searchValue ||
+            company.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
+        )))
+    }, [companies, searchValue])
+
+    const handlerProps = useMemo(() => ({
         service: AdminCompanyService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
@@ -63,22 +71,30 @@ export const CompanyController = memo(() => {
             `Не удалось обновить список компаний`,
             'Получение списка компаний'
         ),
-    }
+    }), [updateTable])
 
     return (
-        <LoaderPortal show={showLoader}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <EditableTable
-                size={'small'}
                 bordered
+                size={'small'}
                 columns={columns}
-                dataSource={companies}
+                loading={showLoader}
+                dataSource={filteredCompanies}
                 pagination={defaultPagination}
                 onRowAdd={hasPermission('AdminCompany.edit') && makeActionHandler('insert', handlerProps, null, 'Добавлениее компаний')}
                 onRowEdit={hasPermission('AdminCompany.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование команий')}
                 onRowDelete={hasPermission('AdminCompany.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление компаний')}
                 tableName={'admin_company_controller'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/AdminPanel/CompanyTypeController.jsx b/src/pages/AdminPanel/CompanyTypeController.jsx
index af55a6a..7e117f6 100644
--- a/src/pages/AdminPanel/CompanyTypeController.jsx
+++ b/src/pages/AdminPanel/CompanyTypeController.jsx
@@ -1,4 +1,5 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Input } from 'antd'
 
 import {
     EditableTable,
@@ -7,7 +8,6 @@ import {
     makeStringSorter,
     defaultPagination
 } from '@components/Table'
-import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { AdminCompanyTypeService } from '@api'
 import { arrayOrDefault } from '@utils'
@@ -25,7 +25,9 @@ const columns = [
 
 export const CompanyTypeController = memo(() => {
     const [companyTypes, setCompanyTypes] = useState([])
+    const [filteredCompanyTypes, setFilteredCompanyTypes] = useState([])
     const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
 
     const updateTable = useCallback(() => invokeWebApiWrapperAsync(
         async() => {
@@ -39,27 +41,41 @@ export const CompanyTypeController = memo(() => {
 
     useEffect(updateTable, [updateTable])
 
-    const handlerProps = {
+    useEffect(() => {
+        setFilteredCompanyTypes(companyTypes.filter((companyType) => companyType && (!searchValue ||
+            companyType.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
+        )))
+    }, [companyTypes, searchValue])
+
+    const handlerProps = useMemo(() => ({
         service: AdminCompanyTypeService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
         onComplete: updateTable,
-    }
+    }), [updateTable])
 
     return (
-        <LoaderPortal show={showLoader}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <EditableTable
                 bordered
                 size={'small'}
                 columns={columns}
-                dataSource={companyTypes}
+                loading={showLoader}
                 pagination={defaultPagination}
+                dataSource={filteredCompanyTypes}
                 onRowAdd={hasPermission('AdminCompanyType.edit') && makeActionHandler('insert', handlerProps, null, 'Добавление типа компаний')}
                 onRowEdit={hasPermission('AdminCompanyType.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование типа компаний')}
                 onRowDelete={hasPermission('AdminCompanyType.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление типа компаний')}
                 tableName={'admin_company_type_controller'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/AdminPanel/DepositController.jsx b/src/pages/AdminPanel/DepositController.jsx
index d033753..30e9209 100644
--- a/src/pages/AdminPanel/DepositController.jsx
+++ b/src/pages/AdminPanel/DepositController.jsx
@@ -1,12 +1,12 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Input } from 'antd'
 
-import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { EditableTable, makeColumn, makeActionHandler, defaultPagination, makeTimezoneColumn } from '@components/Table'
-import { AdminDepositService } from '@api'
-import { arrayOrDefault } from '@utils'
-import { min1 } from '@utils/validationRules'
 import { hasPermission } from '@utils/permissions'
+import { min1 } from '@utils/validationRules'
+import { arrayOrDefault } from '@utils'
+import { AdminDepositService } from '@api'
 
 export const coordsFixed = (coords) => coords && isFinite(coords) ? (+coords).toPrecision(10) : '-'
 
@@ -19,7 +19,9 @@ const depositColumns = [
 
 export const DepositController = memo(() => {
     const [deposits, setDeposits] = useState([])
+    const [filteredDeposits, setFilteredDeposits] = useState([])
     const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
 
     const updateTable = useCallback(() => invokeWebApiWrapperAsync(
         async() => {
@@ -33,27 +35,43 @@ export const DepositController = memo(() => {
 
     useEffect(updateTable, [updateTable])
 
-    const handlerProps = {
+    useEffect(() => {
+        setFilteredDeposits(deposits.filter((deposit) => deposit && (!searchValue || [
+            deposit.caption ?? '',
+            deposit.latitude?.toString() ?? '',
+            deposit.longitude?.toString() ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
+    }, [deposits, searchValue])
+
+    const handlerProps = useMemo(() => ({
         service: AdminDepositService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
         onComplete: updateTable,
-    }
+    }), [updateTable])
 
     return (
-        <LoaderPortal show={showLoader}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <EditableTable
-                size={'small'}
                 bordered
-                dataSource={deposits}
+                size={'small'}
+                loading={showLoader}
                 columns={depositColumns}
+                dataSource={filteredDeposits}
                 pagination={defaultPagination}
                 onRowAdd={hasPermission('AdminDeposit.edit') && makeActionHandler('insert', handlerProps, null, 'Добавление месторождения')}
                 onRowEdit={hasPermission('AdminDeposit.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование месторождения')}
                 onRowDelete={hasPermission('AdminDeposit.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление месторождения')}
                 tableName={'admin_deposit_controller'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/AdminPanel/PermissionController.jsx b/src/pages/AdminPanel/PermissionController.jsx
index a094e60..d555995 100644
--- a/src/pages/AdminPanel/PermissionController.jsx
+++ b/src/pages/AdminPanel/PermissionController.jsx
@@ -1,4 +1,5 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Input } from 'antd'
 
 import {
     EditableTable,
@@ -6,7 +7,6 @@ import {
     makeColumn,
     makeStringSorter
 } from '@components/Table'
-import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { AdminPermissionService } from '@api'
 import { arrayOrDefault } from '@utils'
@@ -27,8 +27,10 @@ const columns = [
 ]
 
 export const PermissionController = memo(() => {
-    const [showLoader, setShowLoader] = useState(false)
     const [permissions, setPermissions] = useState([])
+    const [filteredPermissions, setFilteredPermissions] = useState([])
+    const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
 
     const updateTable = useCallback(async () => invokeWebApiWrapperAsync(
         async () => {
@@ -42,27 +44,42 @@ export const PermissionController = memo(() => {
 
     useEffect(() => updateTable(), [updateTable])
 
-    const handlerProps = {
+    useEffect(() => {
+        setFilteredPermissions(permissions.filter((permission) => permission && (!searchValue || [
+            permission.name ?? '',
+            permission.description ?? '',
+        ].join(' ').includes(searchValue.toLowerCase()))))
+    }, [permissions, searchValue])
+
+    const handlerProps = useMemo(() => ({
         service: AdminPermissionService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
         onComplete: updateTable
-    }
+    }), [updateTable])
 
     return (
-        <LoaderPortal show={showLoader}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <EditableTable
                 bordered
                 size={'small'}
                 columns={columns}
-                dataSource={permissions}
+                loading={showLoader}
+                dataSource={filteredPermissions}
                 pagination={{ showSizeChanger: true }}
                 onRowAdd={hasPermission('AdminPermission.edit') && makeActionHandler('insert', handlerProps, null, 'Добавление права')}
                 onRowEdit={hasPermission('AdminPermission.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование права')}
                 onRowDelete={hasPermission('AdminPermission.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление права')}
                 tableName={'admin_permission_controller'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/AdminPanel/RoleController.jsx b/src/pages/AdminPanel/RoleController.jsx
index 63e2d5b..13fd47d 100644
--- a/src/pages/AdminPanel/RoleController.jsx
+++ b/src/pages/AdminPanel/RoleController.jsx
@@ -1,9 +1,9 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Input } from 'antd'
 
-import LoaderPortal from '@components/LoaderPortal'
 import { PermissionView, RoleView } from '@components/views'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { EditableTable, makeActionHandler, makeColumn, makeTagColumn } from '@components/Table'
+import { EditableTable, makeActionHandler, makeTagColumn, makeTextColumn } from '@components/Table'
 import { AdminPermissionService, AdminUserRoleService } from '@api'
 import { arrayOrDefault } from '@utils'
 import { min1 } from '@utils/validationRules'
@@ -12,7 +12,9 @@ import { hasPermission } from '@utils/permissions'
 export const RoleController = memo(() => {
     const [permissions, setPermissions] = useState([])
     const [roles, setRoles] = useState([])
+    const [filteredRoles, setFilteredRoles] = useState([])
     const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
     const [columns, setColumns] = useState([])
 
     const loadRoles = useCallback(async () => {
@@ -22,7 +24,7 @@ export const RoleController = memo(() => {
 
     useEffect(() => {
         setColumns([
-            makeColumn('Название', 'caption', { width: 100, editable: true, formItemRules: min1 }),
+            makeTextColumn('Название', 'caption', null, null, null, { width: 100, editable: true, formItemRules: min1 }),
             makeTagColumn('Включённые роли', 'roles', roles, 'id', 'caption', {
                 width: 400,
                 editable: true,
@@ -47,7 +49,13 @@ export const RoleController = memo(() => {
         'Получение списка ролей'
     ), [loadRoles])
 
-    const handlerProps = {
+    useEffect(() => {
+        setFilteredRoles(roles.filter((role) => role && (!searchValue ||
+            role.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
+        )))
+    }, [roles, searchValue])
+
+    const handlerProps = useMemo(() => ({
         service: AdminUserRoleService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
@@ -57,21 +65,29 @@ export const RoleController = memo(() => {
             `Не удалось загрузить список ролей`,
             'Получение списка ролей'
         )
-    }
+    }), [loadRoles])
 
     return (
-        <LoaderPortal show={showLoader}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <EditableTable
                 bordered
                 size={'small'}
                 columns={columns}
-                dataSource={roles}
+                loading={showLoader}
+                dataSource={filteredRoles}
                 onRowAdd={hasPermission('AdminUserRole.edit') && makeActionHandler('insert', handlerProps, null, 'Добавление роли')}
                 onRowEdit={hasPermission('AdminUserRole.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование роли')}
                 onRowDelete={hasPermission('AdminUserRole.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление роли')}
                 tableName={'admin_role_controller'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/AdminPanel/TelemetryController.jsx b/src/pages/AdminPanel/TelemetryController.jsx
index 7621ce9..23283be 100644
--- a/src/pages/AdminPanel/TelemetryController.jsx
+++ b/src/pages/AdminPanel/TelemetryController.jsx
@@ -1,4 +1,5 @@
 import { memo, useEffect, useState } from 'react'
+import { Input } from 'antd'
 
 import {
     defaultPagination,
@@ -8,7 +9,6 @@ import {
     makeTextColumn,
     Table
 } from '@components/Table'
-import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { AdminTelemetryService } from '@api'
 import { arrayOrDefault } from '@utils'
@@ -31,7 +31,10 @@ const columns = [
 
 export const TelemetryController = memo(() => {
     const [telemetryData, setTelemetryData] = useState([])
-    const [isLoading, setIsLoading] = useState(false)
+    const [filteredTelemetryData, setFilteredTelemetryData] = useState([])
+    const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
+
 
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
@@ -43,22 +46,46 @@ export const TelemetryController = memo(() => {
                 realWell: telemetry?.well?.caption,
             })))
         },
-        setIsLoading,
+        setShowLoader,
         `Не удалось загрузить список телеметрии скважин`,
         'Полученик списка телеметрии скважин'
     ), [])
 
+    useEffect(() => {
+        setFilteredTelemetryData(telemetryData.filter((telemetry) => telemetry && (!searchValue || [
+            telemetry.remoteUid ?? '',
+            telemetry.realWell ?? '',
+            telemetry.drillingStartDate ?? '',
+            telemetry.well ?? '',
+            telemetry.cluster ?? '',
+            telemetry.deposit ?? '',
+            telemetry.customer ?? '',
+            telemetry.comment ?? '',
+            telemetry.hmiVersion ?? '',
+            telemetry.saubPlcVersion ?? '',
+            telemetry.spinPlcVersion ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
+    }, [telemetryData, searchValue])
+
     return (
-        <LoaderPortal show={isLoading}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <Table
-                size={'small'}
                 bordered
+                size={'small'}
                 columns={columns}
-                dataSource={telemetryData}
+                loading={showLoader}
                 pagination={defaultPagination}
+                dataSource={filteredTelemetryData}
                 tableName={'admin_telemetry_controller'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/AdminPanel/UserController/RoleTag.jsx b/src/pages/AdminPanel/UserController/RoleTag.jsx
index c67aa26..a88c7ce 100644
--- a/src/pages/AdminPanel/UserController/RoleTag.jsx
+++ b/src/pages/AdminPanel/UserController/RoleTag.jsx
@@ -1,16 +1,12 @@
 import { Select } from 'antd'
-import { memo, useEffect, useState } from 'react'
+import { memo, useMemo } from 'react'
 
 export const RoleTag = memo(({ roles, value, onChange }) => {
-    const [options, setOptions] = useState([])
-
-    useEffect(() => {
-        setOptions(roles.map((elm) => ({
-            key: Date.now(),
-            value: `${elm.caption}`,
-            label: elm.caption
-        })))
-    }, [roles])
+    const options = useMemo(() => roles.map((elm) => ({
+        key: Date.now(),
+        value: `${elm.caption}`,
+        label: elm.caption
+    })), [roles])
 
     return (
         <Select
diff --git a/src/pages/AdminPanel/UserController/index.jsx b/src/pages/AdminPanel/UserController/index.jsx
index c0ea90d..528973b 100644
--- a/src/pages/AdminPanel/UserController/index.jsx
+++ b/src/pages/AdminPanel/UserController/index.jsx
@@ -5,12 +5,11 @@ import { BehaviorSubject, debounceTime, distinctUntilChanged, filter, map } from
 
 import {
     EditableTable,
-    makeColumn,
     makeSelectColumn,
     makeActionHandler,
-    makeStringSorter,
     makeNumericSorter,
-    defaultPagination
+    defaultPagination,
+    makeTextColumn
 } from '@components/Table'
 import { RoleView } from '@components/views'
 import LoaderPortal from '@components/LoaderPortal'
@@ -38,7 +37,7 @@ export const UserController = memo(() => {
 
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
-            const filteredUsers = users.filter((user) => user && [
+            const filteredUsers = users.filter((user) =>  user && (!searchValue || [
                 user.login ?? '',
                 user.name ?? '',
                 user.surname ?? '',
@@ -47,7 +46,7 @@ export const UserController = memo(() => {
                 user.phone ?? '',
                 user.position ?? '',
                 user.company?.caption ?? '',
-            ].join(' ').toLowerCase().includes(searchValue))
+            ].join(' ').toLowerCase().includes(searchValue.toLowerCase())))
             setFilteredUsers(filteredUsers)
         },
         setIsSearching,
@@ -106,8 +105,14 @@ export const UserController = memo(() => {
             const filters = makeTextFilters(users, ['surname', 'name', 'patronymic', 'email'])
             const roleFilters = [{ text: 'Без роли', value: null }, ...roles.map((role) => ({ text: role.caption, value: role.caption }))]
 
+            const rolesRender = (item) => item?.map((elm) => (
+                <Tag key={elm} color={'blue'}>
+                    <RoleView role={roles.find((role) => role.caption === elm)} />
+                </Tag>
+            )) ?? '-'
+
             setColumns([
-                makeColumn('Логин', 'login', {
+                makeTextColumn('Логин', 'login', null, null, null, {
                     editable: true,
                     formItemRules: [
                         { required: true },
@@ -121,59 +126,40 @@ export const UserController = memo(() => {
                         // })
                         // TODO: Для проверки уникальности логина необходимо исключить из выборки логин выбранного пользователя
                     ],
-                    sorter: makeStringSorter('login'),
                 }),
-                makeColumn('Фамилия', 'surname', {
+                makeTextColumn('Фамилия', 'surname', filters.surname, null, null, {
                     editable: true,
                     formItemRules: [{ required: true }, ...nameRules],
-                    sorter: makeStringSorter('surname'),
-                    filters: filters.surname,
                     filterSearch: true,
                     onFilter: makeTextOnFilter('surname'),
                 }),
-                makeColumn('Имя', 'name', {
+                makeTextColumn('Имя', 'name', filters.name, null, null, {
                     editable: true,
                     formItemRules: nameRules,
-                    sorter: makeStringSorter('name'),
-                    filters: filters.name,
                     filterSearch: true,
                     onFilter: makeTextOnFilter('name'),
                 }),
-                makeColumn('Отчество', 'patronymic', {
+                makeTextColumn('Отчество', 'patronymic', filters.partonymic, null, null, {
                     editable: true,
                     formItemRules: nameRules,
-                    sorter: makeStringSorter('patronymic'),
-                    filters: filters.patronymic,
                     filterSearch: true,
                     onFilter: makeTextOnFilter('patronymic'),
                 }),
-                makeColumn('E-mail', 'email', {
+                makeTextColumn('E-mail', 'email', filters.email, null, null, {
                     editable: true,
                     formItemRules: [{ required: true }, ...emailRules],
-                    sorter: makeStringSorter('email'),
-                    filters: filters.email,
                     filterSearch: true,
                     onFilter: makeTextOnFilter('email'),
                 }),
-                makeColumn('Номер телефона', 'phone', {
+                makeTextColumn('Номер телефона', 'phone', null, null, null, {
                     editable: true,
                     formItemRules: phoneRules,
-                    sorter: makeStringSorter('phone'),
                 }),
-                makeColumn('Должность', 'position', {
-                    editable: true,
-                    sorter: makeStringSorter('position'),
-                }),
-                makeColumn('Роли', 'roleNames', {
+                makeTextColumn('Должность', 'position', null, null, null, { editable: true }),
+                makeTextColumn('Роли', 'roleNames', roleFilters, null, rolesRender, {
                     editable: true,
                     input: <RoleTag roles={roles} />,
-                    filters: roleFilters,
                     onFilter: makeArrayOnFilter('roleNames'),
-                    render: (item) => item?.map((elm) => (
-                        <Tag key={elm} color={'blue'}>
-                            <RoleView role={roles.find((role) => role.caption === elm)} />
-                        </Tag>
-                    )) ?? '-'
                 }),
                 makeSelectColumn('Компания', 'idCompany', companies, '--', {
                     editable: true,
diff --git a/src/pages/AdminPanel/VisitLog.jsx b/src/pages/AdminPanel/VisitLog.jsx
index 093e528..7c01bbe 100644
--- a/src/pages/AdminPanel/VisitLog.jsx
+++ b/src/pages/AdminPanel/VisitLog.jsx
@@ -1,6 +1,6 @@
 import { memo, useEffect, useState } from 'react'
+import { Input } from 'antd'
 
-import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { defaultPagination, makeColumn, makeDateSorter, makeStringSorter, Table } from '@components/Table'
 import { RequestTrackerService } from '@api'
@@ -19,7 +19,9 @@ const columns = [
 
 export const VisitLog = memo(() => {
     const [logData, setLogData] = useState([])
-    const [isLoading, setIsLoading] = useState(false)
+    const [filteredLogData, setFilteredLogData] = useState([])
+    const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
 
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
@@ -27,23 +29,38 @@ export const VisitLog = memo(() => {
             logData.forEach((log) => log.key = `${log.login}${log.ip}`)
             setLogData(logData)
         },
-        setIsLoading,
+        setShowLoader,
         `Не удалось загрузить список последних посещений пользователей`,
         'Получение списка последних посещений'
     ), [])
 
+    useEffect(() => {
+        setFilteredLogData(logData.filter((data) => data && (!searchValue || [
+            data.login ?? '',
+            data.ip ?? '',
+            data.lastDate ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
+    }, [logData, searchValue])
 
     return (
-        <LoaderPortal show={isLoading}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <Table
-                size={'small'}
                 bordered
+                size={'small'}
                 columns={columns}
-                dataSource={logData}
+                loading={showLoader}
+                dataSource={filteredLogData}
                 pagination={defaultPagination}
                 tableName={'visit_log'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/AdminPanel/WellController/index.jsx b/src/pages/AdminPanel/WellController/index.jsx
index 97eda0c..852a232 100644
--- a/src/pages/AdminPanel/WellController/index.jsx
+++ b/src/pages/AdminPanel/WellController/index.jsx
@@ -1,6 +1,6 @@
-import { Button } from 'antd'
+import { Button, Input } from 'antd'
 import { CopyOutlined } from '@ant-design/icons'
-import { memo, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 
 import {
     AdminClusterService,
@@ -19,7 +19,6 @@ import {
     defaultPagination,
     makeTimezoneColumn,
 } from '@components/Table'
-import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { TelemetryView, CompanyView } from '@components/views'
 import { hasPermission } from '@utils/permissions'
@@ -43,9 +42,12 @@ const recordParser = (record) => ({
 export const WellController = memo(() => {
     const [columns, setColumns] = useState([])
     const [wells, setWells] = useState([])
+    const [filteredWells, setFilteredWells] = useState([])
     const [showLoader, setShowLoader] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
 
-    const updateTable = async () => invokeWebApiWrapperAsync(
+
+    const updateTable = useCallback(async () => invokeWebApiWrapperAsync(
         async () => {
             const wells = await AdminWellService.getAll()
             setWells(arrayOrDefault(wells))
@@ -53,11 +55,11 @@ export const WellController = memo(() => {
         setShowLoader,
         `Не удалось загрузить список скважин`,
         'Получение списка скважин'
-    )
+    ), [])
 
-    const duplicateWell = (well) => {
+    const duplicateWell = useCallback((well) => {
         // TODO: Метод дубликации скважины
-    }
+    }, [])
 
     const addititonalButtons = memo((record, editingKey) => (
         <Button
@@ -112,22 +114,38 @@ export const WellController = memo(() => {
         setShowLoader,
         `Не удалось загрузить список кустов`,
         'Получение списка кустов'
-    ), [])
+    ), [updateTable])
 
-    const handlerProps = {
+    useEffect(() => {
+        setFilteredWells(wells.filter((well) => well && (!searchValue || [
+            well.caption ?? '',
+            well.latitude?.toString() ?? '',
+            well.longitude?.toString() ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
+    }, [wells, searchValue])
+
+    const handlerProps = useMemo(() => ({
         service: AdminWellService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
         onComplete: updateTable
-    }
+    }), [updateTable])
 
     return (
-        <LoaderPortal show={showLoader}>
+        <>
+            <Input.Search
+                style={{ margin: '15px 0' }}
+                placeholder={'Введите текст для поиска...'}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                loading={showLoader}
+            />
             <EditableTable
                 size={'small'}
                 bordered
                 columns={columns}
-                dataSource={wells}
+                loading={showLoader}
+                dataSource={filteredWells}
                 pagination={defaultPagination}
                 onRowAdd={hasPermission('AdminWell.edit') && makeActionHandler('insert', handlerProps, recordParser, 'Добавление скважины')}
                 onRowEdit={hasPermission('AdminWell.edit') && makeActionHandler('update', handlerProps, recordParser, 'Редактирование скважины')}
@@ -136,7 +154,7 @@ export const WellController = memo(() => {
                 buttonsWidth={95}
                 tableName={'admin_well_controller'}
             />
-        </LoaderPortal>
+        </>
     )
 })
 
diff --git a/src/pages/WellOperations/Tvd/NptTable.jsx b/src/pages/WellOperations/Tvd/NptTable.jsx
index 4a5cd63..12f39bf 100644
--- a/src/pages/WellOperations/Tvd/NptTable.jsx
+++ b/src/pages/WellOperations/Tvd/NptTable.jsx
@@ -4,7 +4,7 @@ import { FilterOutlined } from '@ant-design/icons'
 
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { makeDateColumn, makeNumericColumn, makeTextColumn, Table } from '@components/Table'
+import { makeDateColumn, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
 
 import '@styles/tvd.less'
 
@@ -12,7 +12,7 @@ export const columns = [
     makeTextColumn('Конструкция секции', 'wellSectionTypeName', null, null, null, { width: 140 }),
     makeNumericColumn('Глубина', 'depth', null, null, null, 80),
     makeDateColumn('Дата начала', 'date', false, undefined, { width: 90 }),
-    makeNumericColumn('Длительность (ч)', 'durationHours', null, null, null, 120),
+    makeNumericColumn('Длительность (ч)', 'durationHours', null, null, makeNumericRender(2), 120),
     makeTextColumn('Доп. инфо', 'categoryInfo', null, null, null),
     makeTextColumn('Комментарий', 'comment'),
 ]

From 777fbb63d1f751db05b3d54faa83abfe7e3e8775 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Fri, 18 Mar 2022 19:40:52 +0500
Subject: [PATCH 16/21] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BC=D0=B5=D0=BC=D0=BE=D0=B8=D0=B7=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AdminPanel/ClusterController.jsx    | 18 +++--
 src/pages/AdminPanel/CompanyController.jsx    | 13 ++--
 .../AdminPanel/CompanyTypeController.jsx      | 13 ++--
 src/pages/AdminPanel/DepositController.jsx    | 18 +++--
 src/pages/AdminPanel/PermissionController.jsx | 16 ++---
 src/pages/AdminPanel/RoleController.jsx       | 46 ++++++------
 src/pages/AdminPanel/TelemetryController.jsx  | 36 +++++-----
 src/pages/AdminPanel/UserController/index.jsx |  8 +--
 src/pages/AdminPanel/VisitLog.jsx             | 20 +++---
 src/pages/AdminPanel/WellController/index.jsx | 20 +++---
 .../WellCompositeSections.jsx                 | 42 ++++++-----
 src/pages/Analytics/index.jsx                 |  4 +-
 src/pages/Archive/ArchiveColumn.jsx           | 25 +++----
 src/pages/Archive/ArchiveDisplay.jsx          | 14 ++--
 src/pages/Archive/index.jsx                   | 15 ++--
 src/pages/Cluster/ClusterWells.jsx            |  6 +-
 src/pages/Cluster/WellOperationsTable.jsx     | 23 +++---
 src/pages/Cluster/index.jsx                   |  6 +-
 src/pages/Documents/DocumentsTemplate.jsx     | 70 +++++++------------
 src/pages/Documents/index.jsx                 |  4 +-
 src/pages/DrillingProgram/CategoryEditor.jsx  |  6 +-
 src/pages/DrillingProgram/CategoryRender.jsx  |  4 +-
 src/pages/DrillingProgram/index.jsx           | 18 ++---
 src/pages/Login.jsx                           |  3 +-
 src/pages/Measure/InclinometryTable.jsx       | 13 ++--
 src/pages/Measure/MeasureTable.jsx            | 29 ++++----
 src/pages/Messages.jsx                        |  8 +--
 src/pages/Report/index.jsx                    | 10 +--
 src/pages/Well.jsx                            |  4 +-
 src/pages/WellOperations/WellDrillParams.jsx  |  8 +--
 .../WellOperations/WellOperationsEditor.jsx   |  4 +-
 31 files changed, 231 insertions(+), 293 deletions(-)

diff --git a/src/pages/AdminPanel/ClusterController.jsx b/src/pages/AdminPanel/ClusterController.jsx
index dc8117d..0da72f5 100644
--- a/src/pages/AdminPanel/ClusterController.jsx
+++ b/src/pages/AdminPanel/ClusterController.jsx
@@ -21,10 +21,16 @@ import { coordsFixed } from './DepositController'
 export const ClusterController = memo(() => {
     const [deposits, setDeposits] = useState([])
     const [clusters, setClusters] = useState([])
-    const [filteredClusters, setFilteredClusters] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const filteredClusters = useMemo(() => clusters.filter((cluster) => cluster && (!searchValue || [
+            cluster.caption ?? '',
+            cluster.latitude?.toString ?? '',
+            cluster.longitude?.toString() ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))
+    ), [clusters, searchValue])
+
     const clusterColumns = useMemo(() => [
         makeSelectColumn('Месторождение', 'idDeposit', deposits, '--', {
             width: 200,
@@ -65,14 +71,6 @@ export const ClusterController = memo(() => {
 
     useEffect(updateTable, [updateTable])
 
-    useEffect(() => {
-        setFilteredClusters(clusters.filter((cluster) => cluster && (!searchValue || [
-            cluster.caption ?? '',
-            cluster.latitude?.toString ?? '',
-            cluster.longitude?.toString() ?? '',
-        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
-    }, [clusters, searchValue])
-
     const handlerProps = useMemo(() => ({
         service: AdminClusterService,
         setLoader: setShowLoader,
@@ -84,7 +82,7 @@ export const ClusterController = memo(() => {
         <>
             <Input.Search
                 style={{ margin: '15px 0' }}
-                placeholder={'Введите текст для поиска...'}
+                placeholder={'Введите текст для поиска (по полям: Название, Долгота, Широта)...'}
                 onChange={(e) => setSearchValue(e.target.value)}
                 value={searchValue}
                 loading={showLoader}
diff --git a/src/pages/AdminPanel/CompanyController.jsx b/src/pages/AdminPanel/CompanyController.jsx
index c2c5923..836ab11 100644
--- a/src/pages/AdminPanel/CompanyController.jsx
+++ b/src/pages/AdminPanel/CompanyController.jsx
@@ -19,10 +19,13 @@ import { hasPermission } from '@utils/permissions'
 export const CompanyController = memo(() => {
     const [columns, setColumns] = useState([])
     const [companies, setCompanies] = useState([])
-    const [filteredCompanies, setFilteredCompanies] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const filteredCompanies = useMemo(() => companies.filter((company) => company && (!searchValue ||
+        company.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
+    )), [companies, searchValue])
+
     const updateTable = useCallback(async () => {
         const companies = await AdminCompanyService.getAll()
         setCompanies(arrayOrDefault(companies))
@@ -55,12 +58,6 @@ export const CompanyController = memo(() => {
         'Получение списка типов команд'
     ), [updateTable])
 
-    useEffect(() => {
-        setFilteredCompanies(companies.filter((company) => company && (!searchValue ||
-            company.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
-        )))
-    }, [companies, searchValue])
-
     const handlerProps = useMemo(() => ({
         service: AdminCompanyService,
         setLoader: setShowLoader,
@@ -77,7 +74,7 @@ export const CompanyController = memo(() => {
         <>
             <Input.Search
                 style={{ margin: '15px 0' }}
-                placeholder={'Введите текст для поиска...'}
+                placeholder={'Введите текст для поиска (по полю Название)...'}
                 onChange={(e) => setSearchValue(e.target.value)}
                 value={searchValue}
                 loading={showLoader}
diff --git a/src/pages/AdminPanel/CompanyTypeController.jsx b/src/pages/AdminPanel/CompanyTypeController.jsx
index 7e117f6..0fa804d 100644
--- a/src/pages/AdminPanel/CompanyTypeController.jsx
+++ b/src/pages/AdminPanel/CompanyTypeController.jsx
@@ -25,10 +25,13 @@ const columns = [
 
 export const CompanyTypeController = memo(() => {
     const [companyTypes, setCompanyTypes] = useState([])
-    const [filteredCompanyTypes, setFilteredCompanyTypes] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const filteredCompanyTypes = useMemo(() => companyTypes.filter((companyType) => companyType && (!searchValue ||
+        companyType.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
+    )), [companyTypes, searchValue])
+
     const updateTable = useCallback(() => invokeWebApiWrapperAsync(
         async() => {
             const companyTypes = await AdminCompanyTypeService.getAll()
@@ -41,12 +44,6 @@ export const CompanyTypeController = memo(() => {
 
     useEffect(updateTable, [updateTable])
 
-    useEffect(() => {
-        setFilteredCompanyTypes(companyTypes.filter((companyType) => companyType && (!searchValue ||
-            companyType.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
-        )))
-    }, [companyTypes, searchValue])
-
     const handlerProps = useMemo(() => ({
         service: AdminCompanyTypeService,
         setLoader: setShowLoader,
@@ -58,7 +55,7 @@ export const CompanyTypeController = memo(() => {
         <>
             <Input.Search
                 style={{ margin: '15px 0' }}
-                placeholder={'Введите текст для поиска...'}
+                placeholder={'Введите текст для поиска (по полю Название)...'}
                 onChange={(e) => setSearchValue(e.target.value)}
                 value={searchValue}
                 loading={showLoader}
diff --git a/src/pages/AdminPanel/DepositController.jsx b/src/pages/AdminPanel/DepositController.jsx
index 30e9209..9a1b5e1 100644
--- a/src/pages/AdminPanel/DepositController.jsx
+++ b/src/pages/AdminPanel/DepositController.jsx
@@ -19,10 +19,16 @@ const depositColumns = [
 
 export const DepositController = memo(() => {
     const [deposits, setDeposits] = useState([])
-    const [filteredDeposits, setFilteredDeposits] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const filteredDeposits = useMemo(() => deposits.filter((deposit) => deposit && (!searchValue || [
+            deposit.caption ?? '',
+            deposit.latitude?.toString() ?? '',
+            deposit.longitude?.toString() ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))
+    ), [deposits, searchValue])
+
     const updateTable = useCallback(() => invokeWebApiWrapperAsync(
         async() => {
             const deposits = await AdminDepositService.getAll()
@@ -35,14 +41,6 @@ export const DepositController = memo(() => {
 
     useEffect(updateTable, [updateTable])
 
-    useEffect(() => {
-        setFilteredDeposits(deposits.filter((deposit) => deposit && (!searchValue || [
-            deposit.caption ?? '',
-            deposit.latitude?.toString() ?? '',
-            deposit.longitude?.toString() ?? '',
-        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
-    }, [deposits, searchValue])
-
     const handlerProps = useMemo(() => ({
         service: AdminDepositService,
         setLoader: setShowLoader,
@@ -54,7 +52,7 @@ export const DepositController = memo(() => {
         <>
             <Input.Search
                 style={{ margin: '15px 0' }}
-                placeholder={'Введите текст для поиска...'}
+                placeholder={'Введите текст для поиска (по полям: Название, Долгота, Широта)...'}
                 onChange={(e) => setSearchValue(e.target.value)}
                 value={searchValue}
                 loading={showLoader}
diff --git a/src/pages/AdminPanel/PermissionController.jsx b/src/pages/AdminPanel/PermissionController.jsx
index d555995..8f1ecba 100644
--- a/src/pages/AdminPanel/PermissionController.jsx
+++ b/src/pages/AdminPanel/PermissionController.jsx
@@ -28,10 +28,15 @@ const columns = [
 
 export const PermissionController = memo(() => {
     const [permissions, setPermissions] = useState([])
-    const [filteredPermissions, setFilteredPermissions] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const filteredPermissions = useMemo(() => permissions.filter((permission) => permission && (!searchValue || [
+            permission.name ?? '',
+            permission.description ?? '',
+        ].join(' ').includes(searchValue.toLowerCase()))
+    ), [permissions, searchValue])
+
     const updateTable = useCallback(async () => invokeWebApiWrapperAsync(
         async () => {
             const permission = await AdminPermissionService.getAll()
@@ -44,13 +49,6 @@ export const PermissionController = memo(() => {
 
     useEffect(() => updateTable(), [updateTable])
 
-    useEffect(() => {
-        setFilteredPermissions(permissions.filter((permission) => permission && (!searchValue || [
-            permission.name ?? '',
-            permission.description ?? '',
-        ].join(' ').includes(searchValue.toLowerCase()))))
-    }, [permissions, searchValue])
-
     const handlerProps = useMemo(() => ({
         service: AdminPermissionService,
         setLoader: setShowLoader,
@@ -62,7 +60,7 @@ export const PermissionController = memo(() => {
         <>
             <Input.Search
                 style={{ margin: '15px 0' }}
-                placeholder={'Введите текст для поиска...'}
+                placeholder={'Введите текст для поиска (по полям: Название, Описание)...'}
                 onChange={(e) => setSearchValue(e.target.value)}
                 value={searchValue}
                 loading={showLoader}
diff --git a/src/pages/AdminPanel/RoleController.jsx b/src/pages/AdminPanel/RoleController.jsx
index 13fd47d..102cf65 100644
--- a/src/pages/AdminPanel/RoleController.jsx
+++ b/src/pages/AdminPanel/RoleController.jsx
@@ -12,32 +12,32 @@ import { hasPermission } from '@utils/permissions'
 export const RoleController = memo(() => {
     const [permissions, setPermissions] = useState([])
     const [roles, setRoles] = useState([])
-    const [filteredRoles, setFilteredRoles] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
-    const [columns, setColumns] = useState([])
+
+    const filteredRoles = useMemo(() => roles.filter((role) => role && (!searchValue ||
+        role.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
+    )), [roles, searchValue])
+
+    const columns = useMemo(() => [
+        makeTextColumn('Название', 'caption', null, null, null, { width: 100, editable: true, formItemRules: min1 }),
+        makeTagColumn('Включённые роли', 'roles', roles, 'id', 'caption', {
+            width: 400,
+            editable: true,
+            render: (role) => <RoleView role={role} />
+        }, { allowClear: true }),
+        makeTagColumn('Разрешения', 'permissions', permissions, 'id', 'name', {
+            width: 600,
+            editable: true,
+            render: (permission) => <PermissionView info={permission} />,
+        }),
+    ], [roles, permissions])
 
     const loadRoles = useCallback(async () => {
         const roles = await AdminUserRoleService.getAll()
         setRoles(arrayOrDefault(roles))
     }, [])
 
-    useEffect(() => {
-        setColumns([
-            makeTextColumn('Название', 'caption', null, null, null, { width: 100, editable: true, formItemRules: min1 }),
-            makeTagColumn('Включённые роли', 'roles', roles, 'id', 'caption', {
-                width: 400,
-                editable: true,
-                render: (role) => <RoleView role={role} />
-            }, { allowClear: true }),
-            makeTagColumn('Разрешения', 'permissions', permissions, 'id', 'name', {
-                width: 600,
-                editable: true,
-                render: (permission) => <PermissionView info={permission} />,
-            }),
-        ])
-    }, [roles, permissions])
-
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
             const permissions = await AdminPermissionService.getAll()
@@ -49,12 +49,6 @@ export const RoleController = memo(() => {
         'Получение списка ролей'
     ), [loadRoles])
 
-    useEffect(() => {
-        setFilteredRoles(roles.filter((role) => role && (!searchValue ||
-            role.caption?.toLowerCase()?.includes(searchValue.toLowerCase())
-        )))
-    }, [roles, searchValue])
-
     const handlerProps = useMemo(() => ({
         service: AdminUserRoleService,
         setLoader: setShowLoader,
@@ -63,7 +57,7 @@ export const RoleController = memo(() => {
             loadRoles,
             setShowLoader,
             `Не удалось загрузить список ролей`,
-            'Получение списка ролей'
+            'Получение списка ролей',
         )
     }), [loadRoles])
 
@@ -71,7 +65,7 @@ export const RoleController = memo(() => {
         <>
             <Input.Search
                 style={{ margin: '15px 0' }}
-                placeholder={'Введите текст для поиска...'}
+                placeholder={'Введите текст для поиска (по полю Название)...'}
                 onChange={(e) => setSearchValue(e.target.value)}
                 value={searchValue}
                 loading={showLoader}
diff --git a/src/pages/AdminPanel/TelemetryController.jsx b/src/pages/AdminPanel/TelemetryController.jsx
index 23283be..716d6e7 100644
--- a/src/pages/AdminPanel/TelemetryController.jsx
+++ b/src/pages/AdminPanel/TelemetryController.jsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import { Input } from 'antd'
 
 import {
@@ -31,10 +31,24 @@ const columns = [
 
 export const TelemetryController = memo(() => {
     const [telemetryData, setTelemetryData] = useState([])
-    const [filteredTelemetryData, setFilteredTelemetryData] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const filteredTelemetryData = useMemo(() => telemetryData.filter((telemetry) => telemetry && (!searchValue || [
+            telemetry.id?.toString() ?? '',
+            telemetry.remoteUid ?? '',
+            telemetry.realWell ?? '',
+            telemetry.drillingStartDate ?? '',
+            telemetry.well ?? '',
+            telemetry.cluster ?? '',
+            telemetry.deposit ?? '',
+            telemetry.customer ?? '',
+            telemetry.comment ?? '',
+            telemetry.hmiVersion ?? '',
+            telemetry.saubPlcVersion ?? '',
+            telemetry.spinPlcVersion ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))
+    ), [telemetryData, searchValue])
 
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
@@ -51,27 +65,11 @@ export const TelemetryController = memo(() => {
         'Полученик списка телеметрии скважин'
     ), [])
 
-    useEffect(() => {
-        setFilteredTelemetryData(telemetryData.filter((telemetry) => telemetry && (!searchValue || [
-            telemetry.remoteUid ?? '',
-            telemetry.realWell ?? '',
-            telemetry.drillingStartDate ?? '',
-            telemetry.well ?? '',
-            telemetry.cluster ?? '',
-            telemetry.deposit ?? '',
-            telemetry.customer ?? '',
-            telemetry.comment ?? '',
-            telemetry.hmiVersion ?? '',
-            telemetry.saubPlcVersion ?? '',
-            telemetry.spinPlcVersion ?? '',
-        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
-    }, [telemetryData, searchValue])
-
     return (
         <>
             <Input.Search
                 style={{ margin: '15px 0' }}
-                placeholder={'Введите текст для поиска...'}
+                placeholder={'Введите текст для поиска (по всем полям)...'}
                 onChange={(e) => setSearchValue(e.target.value)}
                 value={searchValue}
                 loading={showLoader}
diff --git a/src/pages/AdminPanel/UserController/index.jsx b/src/pages/AdminPanel/UserController/index.jsx
index 528973b..2152cd4 100644
--- a/src/pages/AdminPanel/UserController/index.jsx
+++ b/src/pages/AdminPanel/UserController/index.jsx
@@ -1,6 +1,6 @@
 import { Button, Input, Tag } from 'antd'
 import { UserSwitchOutlined } from '@ant-design/icons'
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { BehaviorSubject, debounceTime, distinctUntilChanged, filter, map } from 'rxjs'
 
 import {
@@ -172,12 +172,12 @@ export const UserController = memo(() => {
         'Получение списка компаний'
     ), [])
 
-    const handlerProps = {
+    const handlerProps = useMemo(() => ({
         service: AdminUserService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
         onComplete: updateTable,
-    }
+    }), [updateTable])
 
     const onSearchTextChange = useCallback((e) => subject?.next(e?.target?.value), [subject])
 
@@ -186,7 +186,7 @@ export const UserController = memo(() => {
             <LoaderPortal show={showLoader}>
                 <Input.Search
                     allowClear
-                    placeholder={'Поиск пользователей'}
+                    placeholder={'Введите текст для поиска (по всем полям за исключением ролей)...'}
                     onChange={onSearchTextChange}
                     style={{ marginBottom: '15px' }}
                     loading={isSearching}
diff --git a/src/pages/AdminPanel/VisitLog.jsx b/src/pages/AdminPanel/VisitLog.jsx
index 7c01bbe..6a0d31a 100644
--- a/src/pages/AdminPanel/VisitLog.jsx
+++ b/src/pages/AdminPanel/VisitLog.jsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import { Input } from 'antd'
 
 import { invokeWebApiWrapperAsync } from '@components/factory'
@@ -12,17 +12,23 @@ const columns = [
     makeColumn('Логин', 'login', { sorter: makeStringSorter('login') }),
     makeColumn('IP', 'ip', { sorter: makeStringSorter('ip') }),
     makeColumn('Дата посещения', 'lastDate', {
-        render: (date) => formatDate(date, false, 'DD MMM YYYY, HH:mm:ss'),
+        render: (date) => formatDate(date, false),
         sorter: makeDateSorter('lastDate'),
     }),
 ]
 
 export const VisitLog = memo(() => {
     const [logData, setLogData] = useState([])
-    const [filteredLogData, setFilteredLogData] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const filteredLogData = useMemo(() => logData.filter((data) => data && (!searchValue || [
+            data.login ?? '',
+            data.ip ?? '',
+            data.lastDate ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))
+    ), [logData, searchValue])
+
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
             const logData = arrayOrDefault(await RequestTrackerService.getUsersStat(logRecordCount))
@@ -34,14 +40,6 @@ export const VisitLog = memo(() => {
         'Получение списка последних посещений'
     ), [])
 
-    useEffect(() => {
-        setFilteredLogData(logData.filter((data) => data && (!searchValue || [
-            data.login ?? '',
-            data.ip ?? '',
-            data.lastDate ?? '',
-        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
-    }, [logData, searchValue])
-
     return (
         <>
             <Input.Search
diff --git a/src/pages/AdminPanel/WellController/index.jsx b/src/pages/AdminPanel/WellController/index.jsx
index 852a232..5b94148 100644
--- a/src/pages/AdminPanel/WellController/index.jsx
+++ b/src/pages/AdminPanel/WellController/index.jsx
@@ -42,10 +42,16 @@ const recordParser = (record) => ({
 export const WellController = memo(() => {
     const [columns, setColumns] = useState([])
     const [wells, setWells] = useState([])
-    const [filteredWells, setFilteredWells] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const filteredWells = useMemo(() => wells.filter((well) => well && (!searchValue || [
+            well.caption ?? '',
+            well.latitude?.toString() ?? '',
+            well.longitude?.toString() ?? '',
+        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))
+    ), [wells, searchValue])
+
 
     const updateTable = useCallback(async () => invokeWebApiWrapperAsync(
         async () => {
@@ -116,14 +122,6 @@ export const WellController = memo(() => {
         'Получение списка кустов'
     ), [updateTable])
 
-    useEffect(() => {
-        setFilteredWells(wells.filter((well) => well && (!searchValue || [
-            well.caption ?? '',
-            well.latitude?.toString() ?? '',
-            well.longitude?.toString() ?? '',
-        ].join(' ').toLowerCase().includes(searchValue.toLowerCase()))))
-    }, [wells, searchValue])
-
     const handlerProps = useMemo(() => ({
         service: AdminWellService,
         setLoader: setShowLoader,
@@ -135,14 +133,14 @@ export const WellController = memo(() => {
         <>
             <Input.Search
                 style={{ margin: '15px 0' }}
-                placeholder={'Введите текст для поиска...'}
+                placeholder={'Введите текст для поиска (по полям: Название, Долгота, Широта)...'}
                 onChange={(e) => setSearchValue(e.target.value)}
                 value={searchValue}
                 loading={showLoader}
             />
             <EditableTable
-                size={'small'}
                 bordered
+                size={'small'}
                 columns={columns}
                 loading={showLoader}
                 dataSource={filteredWells}
diff --git a/src/pages/Analytics/WellCompositeEditor/WellCompositeSections.jsx b/src/pages/Analytics/WellCompositeEditor/WellCompositeSections.jsx
index 1004f4c..6276ecf 100644
--- a/src/pages/Analytics/WellCompositeEditor/WellCompositeSections.jsx
+++ b/src/pages/Analytics/WellCompositeEditor/WellCompositeSections.jsx
@@ -1,5 +1,5 @@
 import { Link, useLocation } from 'react-router-dom'
-import { useState, useEffect, memo, useCallback } from 'react'
+import { useState, useEffect, memo, useCallback, useMemo } from 'react'
 import { LineChartOutlined, ProfileOutlined } from '@ant-design/icons'
 import { Table, Tag, Button, Badge, Divider, Modal, Row, Col, Popconfirm } from 'antd'
 
@@ -29,9 +29,7 @@ const filtersSectionsType = []
 const DAY_IN_MS = 1000 * 60 * 60 * 24
 
 export const WellCompositeSections = memo(({ idWell, statsWells, selectedSections }) => {
-  const [rows, setRows] = useState([])
   const [params, setParams] = useState([])
-  const [paramsColumns, setParamsColumns] = useState([])
   const [selectedWells, setSelectedWells] = useState([])
   const [wellOperations, setWellOperations] = useState([])
   const [selectedWellsKeys, setSelectedWellsKeys] = useState([])
@@ -44,21 +42,9 @@ export const WellCompositeSections = memo(({ idWell, statsWells, selectedSection
 
   const location = useLocation()
 
-  useEffect(() => (async() => setParamsColumns(await getColumns(idWell)))(), [idWell])
+  const paramsColumns = useMemo(async() => await getColumns(idWell), [idWell])
 
-  useEffect(() => {
-    if (isOpsModalVisible || selectedWellId <= 0) return
-    invokeWebApiWrapperAsync(
-      async () => {
-        const { operations } = await getOperations(selectedWellId)
-        setWellOperations(operations)
-      },
-      setShowLoader,
-      `Не удалось загрузить операции по скважине "${selectedWellId}"`,
-    )
-  }, [selectedWellId, isOpsModalVisible])
-
-  useEffect(() => {
+  const rows = useMemo(() => {
     const rows = []
     statsWells?.forEach((well) => {
       well.sections?.forEach((section) => {
@@ -113,9 +99,21 @@ export const WellCompositeSections = memo(({ idWell, statsWells, selectedSection
       'nonProductiveTimeFact',
     ])
 
-    setRows(rows)
+    return rows
   }, [statsWells])
 
+  useEffect(() => {
+    if (isOpsModalVisible || selectedWellId <= 0) return
+    invokeWebApiWrapperAsync(
+      async () => {
+        const { operations } = await getOperations(selectedWellId)
+        setWellOperations(operations)
+      },
+      setShowLoader,
+      `Не удалось загрузить операции по скважине "${selectedWellId}"`,
+    )
+  }, [selectedWellId, isOpsModalVisible])
+
   useEffect(() => {
     const selected = rows.filter((row) => selectedSections.some(section => (
       section.idWellSrc === row.id && section.idWellSectionType === row.sectionId
@@ -125,7 +123,7 @@ export const WellCompositeSections = memo(({ idWell, statsWells, selectedSection
     setSelectedWellsKeys(selected.map((row) => row.key))
   }, [rows, selectedSections])
 
-  const columns = [
+  const columns = useMemo(() => [
     makeTextColumn('скв №', 'caption', null, null,
       (text, item) => <Link to={{ pathname: `/well/${item?.id}`, state: { from: location.pathname }}}>{text ?? '-'}</Link>
     ),
@@ -171,9 +169,9 @@ export const WellCompositeSections = memo(({ idWell, statsWells, selectedSection
         </Tag>
       )) ?? '-',
     },
-  ]
+  ], [location.pathname])
 
-  const rowSelection = hasPermission('WellOperation.edit') && {
+  const rowSelection = useMemo(() => hasPermission('WellOperation.edit') && {
     selectedRowKeys: selectedWellsKeys,
     onChange: (keys, items) => invokeWebApiWrapperAsync(
       async () => {
@@ -187,7 +185,7 @@ export const WellCompositeSections = memo(({ idWell, statsWells, selectedSection
       `Не удалось сохранить изменения выбранных секций для композитной скважины "${idWell}"`,
       'Изменение выбранных секций скважины'
     )
-  }
+  }, [idWell, selectedWellsKeys])
 
   const onParamButtonClick = useCallback(() => invokeWebApiWrapperAsync(
     async () => {
diff --git a/src/pages/Analytics/index.jsx b/src/pages/Analytics/index.jsx
index 6e18f36..bac5683 100644
--- a/src/pages/Analytics/index.jsx
+++ b/src/pages/Analytics/index.jsx
@@ -1,4 +1,4 @@
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { Layout, Menu } from 'antd'
 import { Switch, useParams } from 'react-router-dom'
 
@@ -9,7 +9,7 @@ import Statistics from './Statistics'
 
 export const Analytics = memo(({ idWell }) => {
     const { tab } = useParams()
-    const rootPath = `/well/${idWell}/analytics`
+    const rootPath = useMemo(() => `/well/${idWell}/analytics`, [idWell])
 
     return (
         <Layout>
diff --git a/src/pages/Archive/ArchiveColumn.jsx b/src/pages/Archive/ArchiveColumn.jsx
index 5e211e1..6f7ebfb 100644
--- a/src/pages/Archive/ArchiveColumn.jsx
+++ b/src/pages/Archive/ArchiveColumn.jsx
@@ -1,21 +1,14 @@
-import { useEffect, useState } from 'react'
+import { memo, useMemo } from 'react'
 
 import { Grid, GridItem } from '@components/Grid'
 import { Column } from '@components/charts/Column'
 
-export const ArchiveColumn = ({ lineGroup, data, interval, style, headerHeight, yStart }) => {
-  const [lineGroupWithoutShapes, setLineGroupWithoutShapes] = useState([])
-  const [pv, setPV] = useState([])
-
-  useEffect(() => {
-    const lgws = lineGroup.filter(cfg => !cfg.isShape)
-    setLineGroupWithoutShapes(lgws)
-    setPV(lgws.filter(line => line.showLabels).map(line => ({
-      color: line.color,
-      label: line.label
-    })))
-  }, [lineGroup])
-
+export const ArchiveColumn = memo(({ lineGroup, data, interval, style, headerHeight, yStart }) => {
+  const lgws = useMemo(() => lineGroup.filter(cfg => !cfg.isShape), [lineGroup])
+  const pv = useMemo(() => lgws.filter(line => line.showLabels).map(line => ({
+    color: line.color,
+    label: line.label
+  })), [lgws])
 
   return (
     <div style={style}>
@@ -26,13 +19,13 @@ export const ArchiveColumn = ({ lineGroup, data, interval, style, headerHeight,
       </Grid>
       <Column
         data={data}
-        lineGroup={lineGroupWithoutShapes}
+        lineGroup={lgws}
         interval={interval}
         yDisplay={false}
         yStart={yStart}
       />
     </div>
   )
-}
+})
 
 export default ArchiveColumn
diff --git a/src/pages/Archive/ArchiveDisplay.jsx b/src/pages/Archive/ArchiveDisplay.jsx
index 3b9cef3..c4bae7e 100644
--- a/src/pages/Archive/ArchiveDisplay.jsx
+++ b/src/pages/Archive/ArchiveDisplay.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { memo, useMemo } from 'react'
 
 import { Grid, GridItem } from '@components/Grid'
 
@@ -41,13 +41,9 @@ export const cutData = (data, beginDate, endDate) => {
     return data
 }
 
-export const ArchiveDisplay = ({data, startDate, interval, onWheel}) => {
-    const [chartData, setChartData] = useState([])
-
-    useEffect(() => {
-        const endDate = new Date(+startDate + interval)
-        setChartData(cutData(data, startDate, endDate))
-    }, [data, startDate, interval])
+export const ArchiveDisplay = memo(({data, startDate, interval, onWheel}) => {
+    const endDate = useMemo(() => new Date(+startDate + interval), [startDate, interval])
+    const chartData = useMemo(() => cutData(data, startDate, endDate), [data, startDate, endDate])
 
     return (
         <Grid onWheel={onWheel}>
@@ -65,6 +61,6 @@ export const ArchiveDisplay = ({data, startDate, interval, onWheel}) => {
             ))}
         </Grid>
     )
-}
+})
 
 export default ArchiveDisplay
diff --git a/src/pages/Archive/index.jsx b/src/pages/Archive/index.jsx
index f15ec85..7ee7375 100644
--- a/src/pages/Archive/index.jsx
+++ b/src/pages/Archive/index.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useState, useEffect, memo } from 'react'
+import { useState, useEffect, memo, useCallback } from 'react'
 
 import { Flex } from '@components/Grid'
 import LoaderPortal from '@components/LoaderPortal'
@@ -69,7 +69,7 @@ export const Archive = memo(({ idWell }) => {
     const [showLoader, setShowLoader] = useState(false)
     const [loaded, setLoaded] = useState(null)
 
-    const onGraphWheel = (e) => {
+    const onGraphWheel = useCallback((e) => {
         if (loaded && dateLimit.from && dateLimit.to) {
             setStartDate((prevStartDate) => {
                 const offset = e.deltaY * chartInterval * WHEEL_SENSITIVITY
@@ -79,14 +79,15 @@ export const Archive = memo(({ idWell }) => {
                 return new Date(Math.max(firstPossibleDate, Math.min(nextStartDate, lastPossibleDate)))
             })
         }
-    }
+    }, [loaded, dateLimit, chartInterval])
 
-    const isDateDisabled = (date) => {
+    const isDateDisabled = useCallback((date) => {
         if (!date) return false
         const dt = new Date(date).setHours(0, 0, 0, 0)
         return dt < dateLimit.from || dt > +dateLimit.to - chartInterval
-    }
-    const isDateTimeDisabled = (date) => ({
+    }, [dateLimit])
+
+    const isDateTimeDisabled = useCallback((date) => ({
         disabledHours: () => range(0, 24).filter(h => {
             if (!date) return false
             const dt = +new Date(date).setHours(h)
@@ -102,7 +103,7 @@ export const Archive = memo(({ idWell }) => {
             const dt = +new Date(date).setSeconds(s)
             return dt < dateLimit.from || dt > +dateLimit.to - chartInterval
         })
-    })
+    }), [dateLimit])
 
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
diff --git a/src/pages/Cluster/ClusterWells.jsx b/src/pages/Cluster/ClusterWells.jsx
index 224b44d..f919f2f 100644
--- a/src/pages/Cluster/ClusterWells.jsx
+++ b/src/pages/Cluster/ClusterWells.jsx
@@ -1,5 +1,5 @@
 import { Link, useLocation } from 'react-router-dom'
-import { useState, useEffect, memo } from 'react'
+import { useState, useEffect, memo, useMemo } from 'react'
 import { Tag, Button, Modal } from 'antd'
 import { LineChartOutlined, ProfileOutlined } from '@ant-design/icons'
 
@@ -108,7 +108,7 @@ export const ClusterWells = memo(({ statsWells }) => {
     setTableData(data)
   }, [statsWells])
 
-  const columns = [
+  const columns = useMemo(() => [
     makeTextColumn('скв №', 'caption', null, null,
       (_, item) => (
         <Link to={{ pathname: `/well/${item.id}`, state: { from: location.pathname }}} style={{display: 'flex', alignItems: 'center'}}>
@@ -159,7 +159,7 @@ export const ClusterWells = memo(({ statsWells }) => {
         </Tag>
       )) ?? '-',
     },
-  ]
+  ], [location.pathname])
 
   return (
     <>
diff --git a/src/pages/Cluster/WellOperationsTable.jsx b/src/pages/Cluster/WellOperationsTable.jsx
index d23f8ae..b7f1692 100644
--- a/src/pages/Cluster/WellOperationsTable.jsx
+++ b/src/pages/Cluster/WellOperationsTable.jsx
@@ -1,18 +1,19 @@
+import { memo, useMemo } from 'react'
 import { Table } from 'antd'
 
 import { makeTextColumn, makeNumericColumnPlanFact } from '@components/Table'
 import { getPrecision } from '@utils/functions'
 
-export const WellOperationsTable = ({ wellOperations }) => {
-    const columns = [
-        makeTextColumn('Конструкция секции','sectionType'),
-        makeTextColumn('Операция','operationName'),
-        makeNumericColumnPlanFact('Глубина забоя', 'depth', null, null, getPrecision),
-        makeNumericColumnPlanFact('Часы', 'durationHours', null, null, getPrecision),
-        makeNumericColumnPlanFact('Комментарий', 'comment', null, null, (text) => text ?? '-')
-    ]
+const columns = [
+    makeTextColumn('Конструкция секции', 'sectionType'),
+    makeTextColumn('Операция', 'operationName'),
+    makeNumericColumnPlanFact('Глубина забоя', 'depth', null, null, getPrecision),
+    makeNumericColumnPlanFact('Часы', 'durationHours', null, null, getPrecision),
+    makeNumericColumnPlanFact('Комментарий', 'comment', null, null, (text) => text ?? '-')
+]
 
-    const operations = wellOperations?.map(el => ({
+export const WellOperationsTable = memo(({ wellOperations }) => {
+    const operations = useMemo(() => wellOperations?.map(el => ({
         key: el.plan?.id ?? el.fact.id,
         sectionType: el.plan?.wellSectionTypeName ?? el.fact?.wellSectionTypeName,
         operationName: `${el.plan?.categoryName ?? el.fact?.categoryName ?? ''} ${' '}
@@ -23,7 +24,7 @@ export const WellOperationsTable = ({ wellOperations }) => {
         durationHoursFact: el.fact?.durationHours,
         commentPlan: el.plan?.comment ?? '-',
         commentFact: el.fact?.comment ?? '-'
-    }))
+    })), [wellOperations])
 
     return (
         <Table
@@ -36,6 +37,6 @@ export const WellOperationsTable = ({ wellOperations }) => {
             tableName={'well_operations'}
         />
     )
-}
+})
 
 export default WellOperationsTable
diff --git a/src/pages/Cluster/index.jsx b/src/pages/Cluster/index.jsx
index 0b334b9..99e060f 100644
--- a/src/pages/Cluster/index.jsx
+++ b/src/pages/Cluster/index.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, memo } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { arrayOrDefault } from '@utils'
@@ -8,7 +8,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
 
 import ClusterWells from './ClusterWells'
 
-export const Cluster = () => {
+export const Cluster = memo(() => {
   const { idCluster } = useParams()
   const [data, setData] = useState([])
   const [showLoader, setShowLoader] = useState(false)
@@ -28,6 +28,6 @@ export const Cluster = () => {
       <ClusterWells statsWells={data} />
     </LoaderPortal>
   )
-}
+})
 
 export default Cluster
diff --git a/src/pages/Documents/DocumentsTemplate.jsx b/src/pages/Documents/DocumentsTemplate.jsx
index d25ee42..f786551 100644
--- a/src/pages/Documents/DocumentsTemplate.jsx
+++ b/src/pages/Documents/DocumentsTemplate.jsx
@@ -1,14 +1,13 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo, useCallback } from 'react'
 import { DatePicker, Button, Input } from 'antd'
 
 import { FileService } from '@api'
-import { hasPermission } from '@utils/permissions'
 import LoaderPortal from '@components/LoaderPortal'
 import { UploadForm } from '@components/UploadForm'
 import { CompanyView, UserView } from  '@components/views'
-import { EditableTable, makePaginationObject } from '@components/Table'
+import { EditableTable, makeColumn, makeDateColumn, makeNumericColumn, makePaginationObject } from '@components/Table'
 import { invokeWebApiWrapperAsync, downloadFile, formatBytes } from '@components/factory'
-import { formatDate } from '@utils'
+import { hasPermission } from '@utils/permissions'
 
 const pageSize = 12
 const { RangePicker } = DatePicker
@@ -24,26 +23,11 @@ const columns = [
         {name}
       </Button>
     ),
-  }, {
-    title: 'Дата загрузки',
-    key: 'uploadDate',
-    dataIndex: 'uploadDate',
-    render: item => formatDate(item, false, 'DD MMM YYYY, HH:mm:ss'),
-  }, {
-    title: 'Размер',
-    key: 'size',
-    dataIndex: 'size',
-    render: item => formatBytes(item)
-  }, {
-    title: 'Автор',
-    key: 'author',
-    dataIndex: 'author',
-    render: item => <UserView user={item}/>
-  }, {
-    title: 'Компания',
-    key: 'company',
-    render: (_, record) => <CompanyView company={record?.author?.company}/>
-  }
+  },
+  makeDateColumn('Дата загрузки', 'uploadDate'),
+  makeNumericColumn('Размер', 'size', null, null, formatBytes),
+  makeColumn('Автор', 'author', { render: item => <UserView user={item}/> }),
+  makeColumn('Компания', 'company', { render: (_, record) => <CompanyView company={record?.author?.company}/> })
 ]
 
 export const DocumentsTemplate = ({ idCategory, idWell, accept, headerChild, customColumns, beforeTable, onChange, tableName }) => {
@@ -55,21 +39,13 @@ export const DocumentsTemplate = ({ idCategory, idWell, accept, headerChild, cus
   const [files, setFiles] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
-  const uploadUrl = `/api/well/${idWell}/files/?idCategory=${idCategory}`
+  const uploadUrl = useMemo(() => `/api/well/${idWell}/files/?idCategory=${idCategory}`, [idWell, idCategory])
 
-  const handleUploadComplete = () => update()
+  const mergedColumns = useMemo(() => [...columns, ...(customColumns ?? [])], [customColumns])
+  const companies = useMemo(() => [...new Set(files.map(file => file.company))].filter(company => company), [files])
+  const filenames = useMemo(() => [...new Set(files.map(file => file.name))].filter(name => name), [files])
 
-  const handleFileDelete = async (file) => {
-    await FileService.delete(idWell, file.id)
-    update()
-  }
-
-  const hanleCompanySearch = (value, _) => setFilterCompanyName(value)
-  const hanleFileNameSearch = (value, _) => setFilterFileName(value)
-
-  const mergedColumns = [...columns, ...(customColumns ?? [])]
-
-  const update = () => {
+  const update = useCallback(() => {
     let begin = null
     let end = null
     if (filterDataRange?.length > 1) {
@@ -101,13 +77,15 @@ export const DocumentsTemplate = ({ idCategory, idWell, accept, headerChild, cus
       `Не удалось загрузить файлы по скважине "${idWell}"`,
       'Загрузка файла по скважине'
     )
-  }
+  }, [filterCompanyName, filterDataRange, filterFileName, idCategory, idWell, page])
 
-  useEffect(update, [idWell, idCategory, page, filterDataRange, filterCompanyName, filterFileName])
+  useEffect(update, [update])
   useEffect(() => onChange?.(files), [files, onChange])
 
-  const companies = [...new Set(files.map(file => file.company))].filter(company => company)
-  const filenames = [...new Set(files.map(file => file.name))].filter(name => name)
+  const handleFileDelete = useMemo(() => hasPermission(`File.edit${idCategory}`) && (async (file) => {
+    await FileService.delete(idWell, file.id)
+    update()
+  }), [idWell, idCategory, update])
 
   return (
     <LoaderPortal show={showLoader}>
@@ -124,7 +102,7 @@ export const DocumentsTemplate = ({ idCategory, idWell, accept, headerChild, cus
           <Search
             list={'listCompanies'}
             placeholder={'Фильтр по компании'}
-            onSearch={hanleCompanySearch}
+            onSearch={setFilterCompanyName}
           />
           <datalist id={'listCompanies'}>
             {companies.map((company) => (
@@ -138,7 +116,7 @@ export const DocumentsTemplate = ({ idCategory, idWell, accept, headerChild, cus
           <Search
             list={'listFileNames'}
             placeholder={'Фильтр по имени файла'}
-            onSearch={hanleFileNameSearch}
+            onSearch={setFilterFileName}
           />
           <datalist id={'listFileNames'}>
             {filenames.map((name) => (
@@ -154,7 +132,7 @@ export const DocumentsTemplate = ({ idCategory, idWell, accept, headerChild, cus
               url={uploadUrl}
               accept={accept}
               onUploadStart={() => setShowLoader(true)}
-              onUploadComplete={handleUploadComplete}
+              onUploadComplete={update}
             />
           </div>
         )}
@@ -169,9 +147,9 @@ export const DocumentsTemplate = ({ idCategory, idWell, accept, headerChild, cus
         pagination={{
           ...pagination,
           showSizeChanger: false,
-          onChange: (page) => setPage(page),
+          onChange: setPage,
         }}
-        onRowDelete={hasPermission(`File.edit${idCategory}`) && handleFileDelete}
+        onRowDelete={handleFileDelete}
         rowKey={(record) => record.id}
         tableName={tableName ?? `file_${idCategory}`}
       />
diff --git a/src/pages/Documents/index.jsx b/src/pages/Documents/index.jsx
index 1d79c0e..5452d63 100644
--- a/src/pages/Documents/index.jsx
+++ b/src/pages/Documents/index.jsx
@@ -1,5 +1,5 @@
 import { join } from 'path'
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { Layout, Menu } from 'antd'
 import { FolderOutlined } from '@ant-design/icons'
 import { Switch, useParams } from 'react-router-dom'
@@ -25,7 +25,7 @@ export const documentCategories = [
 
 export const MenuDocuments = memo(({ idWell }) => {
   const { category } = useParams()
-  const root = `/well/${idWell}/document`
+  const root = useMemo(() => `/well/${idWell}/document`, [idWell])
 
   return (
     <>
diff --git a/src/pages/DrillingProgram/CategoryEditor.jsx b/src/pages/DrillingProgram/CategoryEditor.jsx
index 15300a5..a9fedec 100644
--- a/src/pages/DrillingProgram/CategoryEditor.jsx
+++ b/src/pages/DrillingProgram/CategoryEditor.jsx
@@ -1,5 +1,5 @@
 import { Input, Modal, Radio } from 'antd'
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { BehaviorSubject, debounceTime, distinctUntilChanged, filter, map } from 'rxjs'
 
 import { UserView } from '@components/views'
@@ -113,7 +113,7 @@ export const CategoryEditor = memo(({ idWell, visible, category, onClosed }) =>
         `Изменение статуса пользователя`
     ), [users, idWell, category.idFileCategory])
 
-    const userColumns = [
+    const userColumns = useMemo(() => [
         makeColumn('Пользователь', 'user', {
             sorter: (a, b) => (a?.user?.surname && b?.user?.surname) ? a.user.surname.localeCompare(b.user.surname) : 0,
             render: (user) => <UserView user={user} />,
@@ -129,7 +129,7 @@ export const CategoryEditor = memo(({ idWell, visible, category, onClosed }) =>
                 />
             ),
         })
-    ]
+    ], [changeUserStatus])
 
     const onSearchTextChange = useCallback((e) => subject?.next(e?.target?.value), [subject])
 
diff --git a/src/pages/DrillingProgram/CategoryRender.jsx b/src/pages/DrillingProgram/CategoryRender.jsx
index 7a00050..3213c07 100644
--- a/src/pages/DrillingProgram/CategoryRender.jsx
+++ b/src/pages/DrillingProgram/CategoryRender.jsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react'
+import { memo, useCallback, useMemo, useState } from 'react'
 import { Button, Input, Popconfirm, Form } from 'antd'
 import {
     DeleteOutlined,
@@ -44,7 +44,7 @@ export const CategoryRender = memo(({ idWell, partData, onUpdate, onEdit, onHist
         file // Информация о файле
     } = partData ?? {}
 
-    const uploadUrl = `/api/well/${idWell}/drillingProgram/part/${idFileCategory}`
+    const uploadUrl = useMemo(() => `/api/well/${idWell}/drillingProgram/part/${idFileCategory}`, [idWell, idFileCategory])
 
     const [isUploading, setIsUploading] = useState(false)
     const [isDeleting, setIsDeleting] = useState(false)
diff --git a/src/pages/DrillingProgram/index.jsx b/src/pages/DrillingProgram/index.jsx
index 2e78b81..303d240 100644
--- a/src/pages/DrillingProgram/index.jsx
+++ b/src/pages/DrillingProgram/index.jsx
@@ -8,7 +8,7 @@ import {
   ReloadOutlined,
   WarningOutlined,
 } from '@ant-design/icons'
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 
 import LoaderPortal from '@components/LoaderPortal'
 import { downloadFile, formatBytes, invokeWebApiWrapperAsync } from '@components/factory'
@@ -52,11 +52,11 @@ export const DrillingProgram = memo(({ idWell }) => {
     parts,
     program,
     error,
-  } = data
+  } = useMemo(() => data, [data])
 
-  const stateId = idState ?? idStateUnknown
-  const state = stateString[stateId]
-  const StateIcon = state.icon
+  const stateId = useMemo(() => idState ?? idStateUnknown, [idState])
+  const state = useMemo(() => stateString[stateId], [stateId])
+  const StateIcon = useMemo(() => state.icon, [state?.icon])
 
   const updateData = useCallback(async () => await invokeWebApiWrapperAsync(
     async () => {
@@ -76,15 +76,15 @@ export const DrillingProgram = memo(({ idWell }) => {
 
   useEffect(() => updateData(), [updateData])
 
-  const onCategoryEdit = (catId) => {
+  const onCategoryEdit = useCallback((catId) => {
     setSelectedCategory(catId)
     setEditorVisible(!!catId)
-  }
+  }, [])
 
-  const onCategoryHistory = (catId) => {
+  const onCategoryHistory = useCallback((catId) => {
     setSelectedCategory(catId)
     setHistoryVisible(!!catId)
-  }
+  }, [])
 
   const onEditorClosed = useCallback(() => {
     setEditorVisible(false)
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 9015588..ff53576 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -13,9 +13,10 @@ import '@styles/index.css'
 import Logo from '@images/Logo'
 
 export const Login = memo(() => {
+  const [showLoader, setShowLoader] = useState(false)
+
   const history = useHistory()
   const location = useLocation()
-  const [showLoader, setShowLoader] = useState(false)
 
   const handleLogin = useCallback((formData) => invokeWebApiWrapperAsync(
     async () => {
diff --git a/src/pages/Measure/InclinometryTable.jsx b/src/pages/Measure/InclinometryTable.jsx
index 7772cfc..18d1660 100644
--- a/src/pages/Measure/InclinometryTable.jsx
+++ b/src/pages/Measure/InclinometryTable.jsx
@@ -1,5 +1,5 @@
 import { Modal } from 'antd'
-import { memo, useEffect, useState } from 'react'
+import { memo, useMemo } from 'react'
 
 import { Table } from '@components/Table'
 import { formatDate } from '@utils'
@@ -18,21 +18,18 @@ const dateColumn = {
 }
 
 export const InclinometryTable = memo(({ group, visible, onClose }) => {
-    const [tableColumns, setTableColumns] = useState([])
-    const [tableData, setTableData] = useState([])
-
-    useEffect(() => setTableColumns([
+    const tableColumns = useMemo(() => [
         dateColumn,
         ...(group?.columns?.map((column) => ({
             ...column,
             title: v(column.title)
         })) ?? [])
-    ]), [group?.columns])
+    ], [group?.columns])
 
-    useEffect(() => setTableData(group?.values?.map(row => ({
+    const tableData = useMemo(() => group?.values?.map(row => ({
         date: row.timestamp,
         ...row.data
-    }))), [group?.values])
+    })), [group?.values])
 
     return !group?.columns ? null : (
         <Modal
diff --git a/src/pages/Measure/MeasureTable.jsx b/src/pages/Measure/MeasureTable.jsx
index 6a056cd..25e7fd5 100644
--- a/src/pages/Measure/MeasureTable.jsx
+++ b/src/pages/Measure/MeasureTable.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, memo } from 'react'
+import { useState, useEffect, memo, useMemo, useCallback } from 'react'
 import { Button, Form, Input, Popconfirm, Timeline } from 'antd'
 import {
   CheckSquareOutlined,
@@ -23,23 +23,20 @@ import '@styles/measure.css'
 const createEditingColumns = (cols, renderDelegate) =>
   cols.map(col => ({ render: renderDelegate, ...col }))
 
+const disabled = !hasPermission('Measure.edit')
+
 export const MeasureTable = memo(({ idWell, group, updateMeasuresFunc, additionalButtons }) => {
   const [showLoader, setShowLoader] = useState(false)
   const [displayedValues, setDisplayedValues] = useState({})
   const [editingColumns, setEditingColumns] = useState(group.columns)
   const [isTableEditing, setIsTableEditing] = useState(false)
   const [editingActionName, setEditingActionName] = useState('')
-  const [data, setData] = useState([])
 
   const [measuresForm] = Form.useForm()
 
-  useEffect(() => {
-    let data = [group.defaultValue]
-    if (group?.values?.length > 0)
-      data = group.values
-    setData(data)
-    setDisplayedValues(data.at(-1))
-  }, [group.defaultValue, group.values])
+  const data = useMemo(() => group?.values?.length > 0 ? group.values : [group?.defaultValue], [group?.defaultValue, group?.values])
+
+  useEffect(() => setDisplayedValues(data.at(-1)), [data])
 
   useEffect(() => {
     const switchableColumns = createEditingColumns(
@@ -64,17 +61,15 @@ export const MeasureTable = memo(({ idWell, group, updateMeasuresFunc, additiona
     `Не удалось удалить запись ${displayedValues.id} для скважины "${idWell}"`,
     'Удаление записи для скважины'
   )
+  const editingDisabled = useMemo(() => disabled || !!displayedValues?.isDefaultData, [displayedValues?.isDefaultData])
+  const deleteDisabled = useMemo(() => !hasPermission('Measure.delete') || !!displayedValues?.isDefaultData, [displayedValues?.isDefaultData])
 
-  const disabled = !hasPermission('Measure.edit')
-  const editingDisabled = disabled || !!displayedValues?.isDefaultData
-  const deleteDisabled = !hasPermission('Measure.delete') || !!displayedValues?.isDefaultData
-
-  const editTable = (action) => {
+  const editTable = useCallback((action) => {
     setEditingActionName(action)
     setIsTableEditing(true)
-  }
+  }, [])
 
-  const handleSubmitMeasuresForm = async (formData) => await invokeWebApiWrapperAsync(
+  const handleSubmitMeasuresForm = useCallback(async (formData) => await invokeWebApiWrapperAsync(
     async () => {
       measuresForm.validateFields()
 
@@ -99,7 +94,7 @@ export const MeasureTable = memo(({ idWell, group, updateMeasuresFunc, additiona
     setShowLoader,
     `Не удалось добавить/изменить запись для скаважины "${idWell}"`,
     'Добавление/изменение записи по скважине'
-  )
+  ), [displayedValues?.id, displayedValues?.timestamp, editingActionName, group.idCategory, idWell, measuresForm, updateMeasuresFunc])
 
   return (
     <>
diff --git a/src/pages/Messages.jsx b/src/pages/Messages.jsx
index e4bd773..2500ada 100644
--- a/src/pages/Messages.jsx
+++ b/src/pages/Messages.jsx
@@ -1,5 +1,5 @@
 import moment from 'moment'
-import { useState, useEffect, memo } from 'react'
+import { useState, useEffect, memo, useCallback } from 'react'
 import { Table, Select, DatePicker, Input } from 'antd'
 
 import { MessageService } from '@api'
@@ -65,6 +65,8 @@ const filterOptions = [
   { value: 3, label: 'Информация' },
 ]
 
+const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)
+
 // Данные для таблицы
 export const Messages = memo(({ idWell }) => {
   const [messages, setMessages] = useState([])
@@ -75,9 +77,7 @@ export const Messages = memo(({ idWell }) => {
   const [searchString, setSearchString] = useState('')
   const [showLoader, setShowLoader] = useState(false)
 
-  const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)
-
-  const onChangeSearchString = (message) => setSearchString(message.length > 2 ? message : '')
+  const onChangeSearchString = useCallback((message) => setSearchString(message.length > 2 ? message : ''), [])
 
   useEffect(() => invokeWebApiWrapperAsync(
     async () => {
diff --git a/src/pages/Report/index.jsx b/src/pages/Report/index.jsx
index 3fb7917..ce8a0d4 100644
--- a/src/pages/Report/index.jsx
+++ b/src/pages/Report/index.jsx
@@ -1,6 +1,6 @@
 import 'moment/locale/ru'
 import moment from 'moment'
-import { useState, useEffect, memo } from 'react'
+import { useState, useEffect, memo, useCallback } from 'react'
 import { Radio, Button, Select, notification } from 'antd'
 
 import { ReportService } from '@api'
@@ -43,7 +43,7 @@ export const Report = memo(({ idWell }) => {
   const [pagesCount, setPagesCount] = useState(0)
   const [showLoader, setShowLoader] = useState(false)
 
-  const handleReportCreation = async () => await invokeWebApiWrapperAsync(
+  const handleReportCreation = useCallback(async () => await invokeWebApiWrapperAsync(
     async () => {
       const taskId = await ReportService.createReport(
         idWell,
@@ -81,9 +81,11 @@ export const Report = memo(({ idWell }) => {
     ${filterDateRange[0].format(dateTimeFormat)} по
     ${filterDateRange[1].format(dateTimeFormat)}`,
     'Создание отчёта по скважине'
-  )
+  ), [filterDateRange, format, idWell, step])
 
-  const disabledDate = (current) => !current.isBetween(aviableDateRange[0], aviableDateRange[1], 'seconds', '[]')
+  const disabledDate = useCallback((current) =>
+    !current.isBetween(aviableDateRange[0], aviableDateRange[1], 'seconds', '[]')
+  , [aviableDateRange])
 
   useEffect(() => invokeWebApiWrapperAsync(
     async () => {
diff --git a/src/pages/Well.jsx b/src/pages/Well.jsx
index fe1e40b..5df9768 100644
--- a/src/pages/Well.jsx
+++ b/src/pages/Well.jsx
@@ -1,4 +1,4 @@
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import {
   FolderOutlined,
   FundViewOutlined,
@@ -30,7 +30,7 @@ const { Content } = Layout
 
 export const Well = memo(() => {
   const { idWell, tab } = useParams()
-  const rootPath = `/well/${idWell}`
+  const rootPath = useMemo(() => `/well/${idWell}`, [idWell])
 
   return (
     <Layout>
diff --git a/src/pages/WellOperations/WellDrillParams.jsx b/src/pages/WellOperations/WellDrillParams.jsx
index 87c8407..8db51b6 100644
--- a/src/pages/WellOperations/WellDrillParams.jsx
+++ b/src/pages/WellOperations/WellDrillParams.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, memo } from 'react'
+import { useState, useEffect, useCallback, memo, useMemo } from 'react'
 
 import {
     EditableTable,
@@ -54,15 +54,15 @@ export const WellDrillParams = memo(({ idWell }) => {
         await updateParams()
     })(), [idWell, updateParams])
 
-    const handlerProps = {
+    const handlerProps = useMemo(() => ({
         service: DrillParamsService,
         setLoader: setShowLoader,
         errorMsg: `Не удалось выполнить операцию`,
         onComplete: updateParams,
         idWell
-    }
+    }), [idWell, updateParams])
 
-    const recordParser = (record) => ({ ...record, idWell })
+    const recordParser = useCallback((record) => ({ ...record, idWell }), [idWell])
 
     return (
         <LoaderPortal show={showLoader}>
diff --git a/src/pages/WellOperations/WellOperationsEditor.jsx b/src/pages/WellOperations/WellOperationsEditor.jsx
index 7aebbea..9ea77c4 100644
--- a/src/pages/WellOperations/WellOperationsEditor.jsx
+++ b/src/pages/WellOperations/WellOperationsEditor.jsx
@@ -135,13 +135,13 @@ export const WellOperationsEditor = memo(({ idWell, idType, showNpt, ...other })
 
   useEffect(updateOperations, [updateOperations])
 
-  const handlerProps = {
+  const handlerProps = useMemo(() => ({
     service: WellOperationService,
     setLoader: setShowLoader,
     errorMsg: `Не удалось выполнить операцию`,
     onComplete: updateOperations,
     idWell
-  }
+  }), [idWell, updateOperations])
 
   const onRow = useCallback((record) => {
     if (selectedIds?.includes(record.id))

From c2eac25470f3d3f2d28b37f263b8f9d5e83432f5 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Wed, 23 Mar 2022 14:28:08 +0500
Subject: [PATCH 17/21] =?UTF-8?q?=D0=9A=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D1=8B-=D1=81=D0=B5=D0=BB=D0=B5=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80=D1=8B=20=D1=81=D0=B3=D1=80=D1=83=D0=BF=D0=B8=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D1=8B=20=D0=B2=20=D0=BE=D0=B4=D0=BD?=
 =?UTF-8?q?=D1=83=20=D0=B4=D0=B8=D1=80=D0=B5=D0=BA=D1=82=D0=BE=D1=80=D0=B8?=
 =?UTF-8?q?=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout/LayoutPortal.tsx        |  2 +-
 .../{ => selectors}/PeriodPicker.tsx          |  0
 src/components/{ => selectors}/Poprompt.tsx   |  0
 src/components/selectors/TelemetrySelect.tsx  | 34 +++++++++++++++++++
 .../{ => selectors}/WellSelector.jsx          |  0
 .../{ => selectors}/WellTreeSelector.tsx      |  6 ++--
 .../WellController/TelemetrySelect.jsx        | 23 -------------
 src/pages/AdminPanel/WellController/index.jsx |  4 +--
 src/pages/Analytics/Statistics.jsx            |  2 +-
 .../Analytics/WellCompositeEditor/index.jsx   |  2 +-
 src/pages/Archive/index.jsx                   |  2 +-
 src/pages/DrillingProgram/CategoryAdder.jsx   |  2 +-
 src/pages/DrillingProgram/CategoryRender.jsx  |  2 +-
 src/pages/TelemetryView/SetpointSender.jsx    |  2 +-
 src/pages/TelemetryView/index.jsx             |  2 +-
 src/styles/admin.css                          | 12 -------
 src/styles/charts.less                        |  8 +++++
 src/styles/components/telemetry_select.less   | 11 ++++++
 18 files changed, 65 insertions(+), 49 deletions(-)
 rename src/components/{ => selectors}/PeriodPicker.tsx (100%)
 rename src/components/{ => selectors}/Poprompt.tsx (100%)
 create mode 100644 src/components/selectors/TelemetrySelect.tsx
 rename src/components/{ => selectors}/WellSelector.jsx (100%)
 rename src/components/{ => selectors}/WellTreeSelector.tsx (96%)
 delete mode 100644 src/pages/AdminPanel/WellController/TelemetrySelect.jsx
 delete mode 100644 src/styles/admin.css
 create mode 100644 src/styles/charts.less
 create mode 100644 src/styles/components/telemetry_select.less

diff --git a/src/components/Layout/LayoutPortal.tsx b/src/components/Layout/LayoutPortal.tsx
index 438acf9..15de833 100644
--- a/src/components/Layout/LayoutPortal.tsx
+++ b/src/components/Layout/LayoutPortal.tsx
@@ -2,7 +2,7 @@ import { memo, ReactNode } from 'react'
 import { Layout, LayoutProps } from 'antd'
 
 import PageHeader from '@components/PageHeader'
-import WellTreeSelector from '@components/WellTreeSelector'
+import WellTreeSelector from '@components/selectors/WellTreeSelector'
 
 export type LayoutPortalProps = LayoutProps & {
   title?: ReactNode
diff --git a/src/components/PeriodPicker.tsx b/src/components/selectors/PeriodPicker.tsx
similarity index 100%
rename from src/components/PeriodPicker.tsx
rename to src/components/selectors/PeriodPicker.tsx
diff --git a/src/components/Poprompt.tsx b/src/components/selectors/Poprompt.tsx
similarity index 100%
rename from src/components/Poprompt.tsx
rename to src/components/selectors/Poprompt.tsx
diff --git a/src/components/selectors/TelemetrySelect.tsx b/src/components/selectors/TelemetrySelect.tsx
new file mode 100644
index 0000000..0e8dd4e
--- /dev/null
+++ b/src/components/selectors/TelemetrySelect.tsx
@@ -0,0 +1,34 @@
+import { Select, SelectProps } from 'antd'
+import { memo } from 'react'
+
+import { getTelemetryLabel } from '@components/views'
+import { TelemetryDto } from '@api'
+
+import '@styles/components/telemetry_select.less'
+
+export type TelemetrySelectProps = SelectProps & {
+    telemetry?: TelemetryDto[],
+    value?: TelemetryDto ,
+    onChange?: (value?: TelemetryDto) => void,
+}
+
+export const TelemetrySelect = memo<TelemetrySelectProps>(({ telemetry, value, onChange, ...other }) => (
+    <Select
+        allowClear
+        value={value?.id}
+        onChange={(id) => onChange?.(telemetry?.find((row) => row.id === id))}
+        className={'telemetry_select'}
+        dropdownClassName={'telemetry_select'}
+        {...other}
+    >
+        {telemetry?.map((row, i) => (
+            <Select.Option key={i} value={row.id}>
+                <span className={row?.info?.well ? 'telemetry_used' : 'telemetry_unused'}>
+                    {getTelemetryLabel(row)}
+                </span>
+            </Select.Option>
+        ))}
+    </Select>
+))
+
+export default TelemetrySelect
diff --git a/src/components/WellSelector.jsx b/src/components/selectors/WellSelector.jsx
similarity index 100%
rename from src/components/WellSelector.jsx
rename to src/components/selectors/WellSelector.jsx
diff --git a/src/components/WellTreeSelector.tsx b/src/components/selectors/WellTreeSelector.tsx
similarity index 96%
rename from src/components/WellTreeSelector.tsx
rename to src/components/selectors/WellTreeSelector.tsx
index 15f96f2..f354d07 100644
--- a/src/components/WellTreeSelector.tsx
+++ b/src/components/selectors/WellTreeSelector.tsx
@@ -7,9 +7,9 @@ import { RawValueType } from 'rc-tree-select/lib/TreeSelect'
 import { LabelInValueType } from 'rc-select/lib/Select'
 
 import { isRawDate } from '@utils'
-import LoaderPortal from './LoaderPortal'
-import { WellIcon, WellIconState } from './icons'
-import { invokeWebApiWrapperAsync } from './factory'
+import LoaderPortal from '@components/LoaderPortal'
+import { WellIcon, WellIconState } from '@components/icons'
+import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DepositService, DepositDto } from '@api'
 
 import { ReactComponent as DepositIcon } from '@images/DepositIcon.svg'
diff --git a/src/pages/AdminPanel/WellController/TelemetrySelect.jsx b/src/pages/AdminPanel/WellController/TelemetrySelect.jsx
deleted file mode 100644
index f33484e..0000000
--- a/src/pages/AdminPanel/WellController/TelemetrySelect.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { memo } from 'react'
-import { Select } from 'antd'
-
-import { getTelemetryLabel } from '@components/views'
-
-export const TelemetrySelect = memo(({ telemetry, value, onChange }) => (
-    <Select
-        allowClear
-        value={value?.id}
-        onChange={(id) => onChange?.(telemetry.find((row) => row.id === id))}
-        dropdownClassName={'telemetry_select'}
-    >
-        {telemetry.map((row, i) => (
-            <Select.Option key={i} value={row.id}>
-                <span className={row?.info?.well ? 'telemetry_used' : 'telemetry_unused'}>
-                    {getTelemetryLabel(row)}
-                </span>
-            </Select.Option>
-        ))}
-    </Select>
-))
-
-export default TelemetrySelect
diff --git a/src/pages/AdminPanel/WellController/index.jsx b/src/pages/AdminPanel/WellController/index.jsx
index 5b94148..5edd559 100644
--- a/src/pages/AdminPanel/WellController/index.jsx
+++ b/src/pages/AdminPanel/WellController/index.jsx
@@ -21,13 +21,11 @@ import {
 } from '@components/Table'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { TelemetryView, CompanyView } from '@components/views'
+import TelemetrySelect from '@components/selectors/TelemetrySelect'
 import { hasPermission } from '@utils/permissions'
 import { arrayOrDefault } from '@utils'
 
 import { coordsFixed } from '../DepositController'
-import TelemetrySelect from './TelemetrySelect'
-
-import '@styles/admin.css'
 
 const wellTypes = [
     { value: 1, label: 'Наклонно-направленная' },
diff --git a/src/pages/Analytics/Statistics.jsx b/src/pages/Analytics/Statistics.jsx
index 3aabb59..c0ad71d 100644
--- a/src/pages/Analytics/Statistics.jsx
+++ b/src/pages/Analytics/Statistics.jsx
@@ -2,8 +2,8 @@ import { Table as RawTable, Typography } from 'antd'
 import { Fragment, memo, useCallback, useEffect, useState } from 'react'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { WellSelector } from '@components/WellSelector'
 import { invokeWebApiWrapperAsync } from '@components/factory'
+import { WellSelector } from '@components/selectors/WellSelector'
 import { makeGroupColumn, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
 import { OperationStatService, WellOperationService } from '@api'
 import { arrayOrDefault } from '@utils'
diff --git a/src/pages/Analytics/WellCompositeEditor/index.jsx b/src/pages/Analytics/WellCompositeEditor/index.jsx
index 4a56869..cd2de0d 100644
--- a/src/pages/Analytics/WellCompositeEditor/index.jsx
+++ b/src/pages/Analytics/WellCompositeEditor/index.jsx
@@ -8,7 +8,7 @@ import {
 } from '@api'
 import { arrayOrDefault } from '@utils'
 import LoaderPortal from '@components/LoaderPortal'
-import WellSelector from '@components/WellSelector'
+import WellSelector from '@components/selectors/WellSelector'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { PrivateDefaultRoute, PrivateMenuItemLink, PrivateRoute } from '@components/Private'
 
diff --git a/src/pages/Archive/index.jsx b/src/pages/Archive/index.jsx
index 7ee7375..f969709 100644
--- a/src/pages/Archive/index.jsx
+++ b/src/pages/Archive/index.jsx
@@ -5,7 +5,7 @@ import { Flex } from '@components/Grid'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DatePickerWrapper, makeDateSorter } from '@components/Table'
-import { PeriodPicker, defaultPeriod } from '@components/PeriodPicker'
+import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
 import { TelemetryDataSaubService } from '@api'
 
 import { normalizeData } from '@pages/TelemetryView'
diff --git a/src/pages/DrillingProgram/CategoryAdder.jsx b/src/pages/DrillingProgram/CategoryAdder.jsx
index 390f8f9..dd45dad 100644
--- a/src/pages/DrillingProgram/CategoryAdder.jsx
+++ b/src/pages/DrillingProgram/CategoryAdder.jsx
@@ -2,7 +2,7 @@ import { Form, Select } from 'antd'
 import { FileAddOutlined } from '@ant-design/icons'
 import { memo, useCallback, useEffect, useState } from 'react'
 
-import Poprompt from '@components/Poprompt'
+import Poprompt from '@components/selectors/Poprompt'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DrillingProgramService } from '@api'
 
diff --git a/src/pages/DrillingProgram/CategoryRender.jsx b/src/pages/DrillingProgram/CategoryRender.jsx
index 3213c07..50316be 100644
--- a/src/pages/DrillingProgram/CategoryRender.jsx
+++ b/src/pages/DrillingProgram/CategoryRender.jsx
@@ -6,11 +6,11 @@ import {
     TableOutlined,
 } from '@ant-design/icons'
 
-import Poprompt from '@components/Poprompt'
 import { UserView } from '@components/views'
 import UploadForm from '@components/UploadForm'
 import DownloadLink from '@components/DownloadLink'
 import LoaderPortal from '@components/LoaderPortal'
+import Poprompt from '@components/selectors/Poprompt'
 import { formatBytes, invokeWebApiWrapperAsync, notify } from '@components/factory'
 import { DrillingProgramService } from '@api'
 import { formatDate } from '@utils'
diff --git a/src/pages/TelemetryView/SetpointSender.jsx b/src/pages/TelemetryView/SetpointSender.jsx
index 367191f..27bceae 100644
--- a/src/pages/TelemetryView/SetpointSender.jsx
+++ b/src/pages/TelemetryView/SetpointSender.jsx
@@ -6,7 +6,7 @@ import { Grid, GridItem } from '@components/Grid'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { makeNumericRender, EditableTable } from '@components/Table'
-import { PeriodPicker, defaultPeriod } from '@components/PeriodPicker'
+import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
 
 export const SetpointSender = ({ idWell, onClose, visible, setpointNames }) => {
     const [expirePeriod, setExpirePeriod] = useState(defaultPeriod)
diff --git a/src/pages/TelemetryView/index.jsx b/src/pages/TelemetryView/index.jsx
index b998289..3a9f28e 100644
--- a/src/pages/TelemetryView/index.jsx
+++ b/src/pages/TelemetryView/index.jsx
@@ -12,7 +12,7 @@ import { makeDateSorter } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { Grid, GridItem, Flex } from '@components/Grid'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { PeriodPicker, defaultPeriod } from '@components/PeriodPicker'
+import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
 import { hasPermission } from '@utils/permissions'
 import { Subscribe } from '@services/signalr'
 
diff --git a/src/styles/admin.css b/src/styles/admin.css
deleted file mode 100644
index d2f6af7..0000000
--- a/src/styles/admin.css
+++ /dev/null
@@ -1,12 +0,0 @@
-
-.telemetry_select {
-    min-width: 300px !important;
-}
-
-.telemetry_select .telemetry_used {
-    color: black;
-}
-
-.telemetry_select .telemetry_unused {
-    color: gray;
-}
diff --git a/src/styles/charts.less b/src/styles/charts.less
new file mode 100644
index 0000000..5fc5377
--- /dev/null
+++ b/src/styles/charts.less
@@ -0,0 +1,8 @@
+.d3-chart {
+    > .d3-chart-tooltip {
+        position: absolute;
+        background: #AAAAAAC0;
+        padding: 5px;
+        border-radius: 5px;
+    }
+}
diff --git a/src/styles/components/telemetry_select.less b/src/styles/components/telemetry_select.less
new file mode 100644
index 0000000..405ba6e
--- /dev/null
+++ b/src/styles/components/telemetry_select.less
@@ -0,0 +1,11 @@
+.telemetry_select {
+    min-width: 300px !important;
+
+    & .telemetry_used {
+        color: black;
+    }
+
+    & .telemetry_unused {
+        color: gray;
+    }
+}

From befac57c303945e2b6f235fc830ebc489db7f482 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Wed, 23 Mar 2022 14:30:48 +0500
Subject: [PATCH 18/21] =?UTF-8?q?=D0=92=20=D1=82=D0=B5=D0=BB=D0=B5=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=82=D1=80=D0=B8=D1=8E=20=D0=B0=D0=B4=D0=BC=D0=B8=D0=BD?=
 =?UTF-8?q?-=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B0=20=D0=BE=D0=B1=D1=8A=D0=B5=D0=B4=D0=B8?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F,=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=86=D0=B5=20=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=B5=D1=80=D0=B5=D1=85?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B0=20=D0=BA=20=D0=BE=D0=B1=D1=8A=D0=B5=D0=B4?=
 =?UTF-8?q?=D0=B8=D0=BD=D0=B5=D0=BD=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/views/TelemetryView.tsx        |   2 +-
 .../AdminPanel/Telemetry/TelemetryMerger.jsx  | 136 ++++++++++++++++++
 .../TelemetryViewer.jsx}                      |  67 ++++++---
 src/pages/AdminPanel/Telemetry/index.jsx      |  42 ++++++
 src/pages/AdminPanel/index.jsx                |  30 ++--
 src/utils/permissions.ts                      |   5 +-
 6 files changed, 247 insertions(+), 35 deletions(-)
 create mode 100644 src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx
 rename src/pages/AdminPanel/{TelemetryController.jsx => Telemetry/TelemetryViewer.jsx} (51%)
 create mode 100644 src/pages/AdminPanel/Telemetry/index.jsx

diff --git a/src/components/views/TelemetryView.tsx b/src/components/views/TelemetryView.tsx
index 30401ff..702ebd2 100644
--- a/src/components/views/TelemetryView.tsx
+++ b/src/components/views/TelemetryView.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from 'antd'
 import { TelemetryDto, TelemetryInfoDto } from '@api'
 import { Grid, GridItem } from '@components/Grid'
 
-const lables: Record<string, string> = {
+export const lables: Record<string, string> = {
     timeZoneId: 'Временная зона',
     timeZoneOffsetTotalHours: 'Сдвиг временной зоны',
     drillingStartDate: 'Начало бурения',
diff --git a/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx b/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx
new file mode 100644
index 0000000..67761e8
--- /dev/null
+++ b/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx
@@ -0,0 +1,136 @@
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { PullRequestOutlined } from '@ant-design/icons'
+import { Button, Descriptions, Popconfirm } from 'antd'
+
+import { Grid, GridItem } from '@components/Grid'
+import LoaderPortal from '@components/LoaderPortal'
+import { lables } from '@components/views/TelemetryView'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import TelemetrySelect from '@components/selectors/TelemetrySelect'
+import { AdminTelemetryService } from '@api'
+import { arrayOrDefault } from '@utils'
+
+const { Item } = Descriptions
+
+export const TelemetryInfo = memo(({ info, danger, ...other }) => (
+    <Descriptions
+        bordered
+        column={1}
+        size={'small'}
+        style={{ background: 'white' }}
+        className={'telemetry_merger_info'}
+        {...other}
+    >
+        {Object.keys({ ...lables, ...info }).map(key => (
+            <Item
+                key={key}
+                label={lables[key] ?? key}
+                style={{ color: danger === true || danger?.includes(key) ? 'red' : 'black' }}
+            >{info?.[key] ?? '-'}</Item>
+        ))}
+    </Descriptions>
+))
+
+export const TelemetryMerger = memo(() => {
+    const [primary, setPrimary] = useState(null)
+    const [secondary, setSecondary] = useState(null)
+    const [telemetry, setTelemetry] = useState([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [isMerging, setIsMerging] = useState(false)
+
+    const location = useLocation()
+
+    const danger = useMemo(() => [
+        primary?.info?.well !== secondary?.info?.well && 'well',
+        primary?.info?.cluster !== secondary?.info?.cluster && 'cluster',
+        primary?.info?.deposit !== secondary?.info?.deposit && 'deposit',
+    ], [primary, secondary])
+
+    const updateTelemetry = useCallback(async () => await invokeWebApiWrapperAsync(
+        async () => {
+            const telemetry = arrayOrDefault(await AdminTelemetryService.getAll())
+            setTelemetry(telemetry)
+        },
+        setIsLoading,
+        'Не удалось загрузить список телеметрий',
+        'Получение списка телеметрий',
+    ), [])
+
+    const mergeTelemetry = useCallback(() => invokeWebApiWrapperAsync(
+        async () => {
+            await new Promise(res => setTimeout(res, 1000))
+            /// await AdminTelemetryService.mergeTelemetries(secondary.id, primary.id)
+            await updateTelemetry()
+        },
+        setIsMerging,
+        'Не удалось объединить телеметрии',
+        'Объединение телеметрий',
+    ), [primary, secondary])
+
+    useEffect(() => updateTelemetry(), [])
+
+    useEffect(() => {
+        const query = new URLSearchParams(location.search)
+        const primaryId = parseInt(query.get('primary') ?? null)
+        const secondaryId = parseInt(query.get('secondary') ?? null)
+        const primary = isNaN(primaryId) ? null : telemetry.find((t) => t.id === primaryId)
+        const secondary = isNaN(secondaryId) ? null : telemetry.find((t) => t.id === secondaryId)
+        console.log([primary, secondary])
+        setPrimary(primary)
+        setSecondary(secondary)
+    }, [location, telemetry])
+
+    return (
+        <LoaderPortal show={isLoading}>
+            <div className={'description'} style={{ marginTop: '15px' }}>{
+                ///TODO: Добавить описание
+            }</div>
+            <Grid>
+                <GridItem col={1} row={1}>Результирующая телеметрия</GridItem>
+                <GridItem col={2} row={1}>Исходная телеметрия</GridItem>
+                <GridItem col={1} row={2}>
+                    <TelemetrySelect
+                        value={primary}
+                        disabled={isMerging}
+                        telemetry={telemetry}
+                        onChange={setPrimary}
+                        style={{ width: '100%', marginRight: '15px' }}
+                    />
+                </GridItem>
+                <GridItem col={2} row={2}>
+                    <TelemetrySelect
+                        value={secondary}
+                        disabled={isMerging}
+                        telemetry={telemetry}
+                        onChange={setSecondary}
+                        style={{ width: '100%' }}
+                    />
+                </GridItem>
+                <GridItem col={3} row={2}>
+                    <Popconfirm
+                        disabled={isMerging || !primary || !secondary}
+                        title={'Исходная телеметрия будет удалена после объединения. Вы уверены?'}
+                        okText={'Объединить'}
+                        onConfirm={mergeTelemetry}
+                    >
+                        <Button
+                            type={'primary'}
+                            icon={<PullRequestOutlined />}
+                            disabled={!primary || !secondary}
+                            loading={isMerging}
+                        >Объединить</Button>
+                    </Popconfirm>
+                </GridItem>
+                <GridItem col={1} row={3}>
+                    <TelemetryInfo info={primary?.info} danger={danger} />
+                </GridItem>
+                <GridItem col={2} row={3}>
+                    <TelemetryInfo info={secondary?.info} danger={danger} />
+                </GridItem>
+            </Grid>
+        </LoaderPortal>
+    )
+})
+
+export default TelemetryMerger
diff --git a/src/pages/AdminPanel/TelemetryController.jsx b/src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx
similarity index 51%
rename from src/pages/AdminPanel/TelemetryController.jsx
rename to src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx
index 716d6e7..2441e82 100644
--- a/src/pages/AdminPanel/TelemetryController.jsx
+++ b/src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx
@@ -1,39 +1,70 @@
-import { memo, useEffect, useMemo, useState } from 'react'
-import { Input } from 'antd'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { PullRequestOutlined } from '@ant-design/icons'
+import { Button, Input } from 'antd'
 
 import {
     defaultPagination,
+    makeColumn,
     makeDateSorter,
     makeNumericColumn,
     makeNumericRender,
     makeTextColumn,
     Table
 } from '@components/Table'
+import Poprompt from '@components/selectors/Poprompt'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { AdminTelemetryService } from '@api'
 import { arrayOrDefault } from '@utils'
-
-const columns = [
-    makeNumericColumn('ID', 'id', null, null, makeNumericRender(0)),
-    makeTextColumn('UID', 'remoteUid'),
-    makeTextColumn('Назначена на скважину', 'realWell'),
-    makeTextColumn('Дата начала бурения', 'drillingStartDate', null, makeDateSorter('drillingStartDate')),
-    makeTextColumn('Часовой пояс', 'timeZoneId'),
-    makeTextColumn('Скважина', 'well'),
-    makeTextColumn('Куст', 'cluster'),
-    makeTextColumn('Месторождение', 'deposit'),
-    makeTextColumn('Заказчик', 'customer'),
-    makeTextColumn('Комментарий', 'comment'),
-    makeTextColumn('Версия HMI', 'hmiVersion'),
-    makeTextColumn('Версия САУБ', 'saubPlcVersion'),
-    makeTextColumn('Версия Спин Мастер', 'spinPlcVersion'),
-]
+import { useHistory } from 'react-router-dom'
 
 export const TelemetryController = memo(() => {
     const [telemetryData, setTelemetryData] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
+    const history = useHistory()
+
+    const toMerger = useCallback((type, id) => () => history.push(`/admin/telemetry/merger/?${type}=${id}`), [history])
+
+    const mergeRender = useCallback((value, record) => (
+        <Poprompt
+            placement={'topLeft'}
+            buttonProps={{
+                icon: <PullRequestOutlined />,
+                size: 'small',
+                danger: !!value,
+            }}
+            footer={(
+                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                    <Button onClick={toMerger('primary', record.id)}>Основная</Button>
+                    <Button onClick={toMerger('secondary', record.id)} style={{ marginLeft: '8px' }}>Сливаемая</Button>
+                </div>
+            )}
+        >
+            <p>Вы собираетесь использовать данную телеметрию для слияния</p>
+            {record.well && (
+                <p style={{ color: 'red' }}>Внимание! Телеметрии назначена скважина!</p>
+            )}
+        </Poprompt>
+    ), [toMerger])
+
+    const columns = useMemo(() => [
+        makeColumn('', 'hasParent', { render: mergeRender }),
+        makeNumericColumn('ID', 'id', null, null, makeNumericRender(0)),
+        makeTextColumn('UID', 'remoteUid'),
+        makeTextColumn('Назначена на скважину', 'realWell'),
+        makeTextColumn('Дата начала бурения', 'drillingStartDate', null, makeDateSorter('drillingStartDate')),
+        makeTextColumn('Часовой пояс', 'timeZoneId'),
+        makeTextColumn('Скважина', 'well'),
+        makeTextColumn('Куст', 'cluster'),
+        makeTextColumn('Месторождение', 'deposit'),
+        makeTextColumn('Заказчик', 'customer'),
+        makeTextColumn('Комментарий', 'comment'),
+        makeTextColumn('Версия HMI', 'hmiVersion'),
+        makeTextColumn('Версия САУБ', 'saubPlcVersion'),
+        makeTextColumn('Версия Спин Мастер', 'spinPlcVersion'),
+    ], [mergeRender])
+
     const filteredTelemetryData = useMemo(() => telemetryData.filter((telemetry) => telemetry && (!searchValue || [
             telemetry.id?.toString() ?? '',
             telemetry.remoteUid ?? '',
diff --git a/src/pages/AdminPanel/Telemetry/index.jsx b/src/pages/AdminPanel/Telemetry/index.jsx
new file mode 100644
index 0000000..0db46d6
--- /dev/null
+++ b/src/pages/AdminPanel/Telemetry/index.jsx
@@ -0,0 +1,42 @@
+import { Layout, Menu } from 'antd'
+import { lazy, memo, Suspense } from 'react'
+import { Switch, useParams } from 'react-router-dom'
+
+import { PrivateMenuItem, PrivateRoute, PrivateDefaultRoute } from '@components/Private'
+
+import { SuspenseFallback } from '@pages/SuspenseFallback'
+
+const TelemetryViewer = lazy(() => import('./TelemetryViewer'))
+const TelemetryMerger = lazy(() => import('./TelemetryMerger'))
+
+const rootPath = '/admin/telemetry'
+
+export const Telemetry = memo(() => {
+    const { tab } = useParams()
+
+    return (
+        <Layout>
+            <Menu mode={'horizontal'} selectable={true} selectedKeys={[tab]}>
+                <PrivateMenuItem.Link root={rootPath} key={'viewer'} path={'viewer'} title={'Просмотр'} />
+                <PrivateMenuItem.Link root={rootPath} key={'merger'} path={'merger'} title={'Объединение'} />
+            </Menu>
+
+            <Layout>
+                <Layout.Content className={'site-layout-background'}>
+                    <Suspense fallback={<SuspenseFallback />}>
+                        <Switch>
+                            <PrivateRoute path={`${rootPath}/viewer`} component={TelemetryViewer} />
+                            <PrivateRoute path={`${rootPath}/merger`} component={TelemetryMerger} />
+                            <PrivateDefaultRoute urls={[
+                                `${rootPath}/viewer`,
+                                `${rootPath}/merger`,
+                            ]}/>
+                        </Switch>
+                    </Suspense>
+                </Layout.Content>
+            </Layout>
+        </Layout>
+    )
+})
+
+export default Telemetry
diff --git a/src/pages/AdminPanel/index.jsx b/src/pages/AdminPanel/index.jsx
index 5a64775..6be3a32 100644
--- a/src/pages/AdminPanel/index.jsx
+++ b/src/pages/AdminPanel/index.jsx
@@ -1,5 +1,5 @@
 import { Layout, Menu } from 'antd'
-import { lazy, Suspense } from 'react'
+import { lazy, memo, Suspense } from 'react'
 import { Switch, useParams } from 'react-router-dom'
 
 import { PrivateMenuItem, PrivateRoute, PrivateDefaultRoute } from '@components/Private'
@@ -14,12 +14,12 @@ const        WellController = lazy(() => import(       './WellController'))
 const        RoleController = lazy(() => import(       './RoleController'))
 const CompanyTypeController = lazy(() => import('./CompanyTypeController'))
 const  PermissionController = lazy(() => import( './PermissionController'))
-const   TelemetryController = lazy(() => import(  './TelemetryController'))
+const      TelemetrySection = lazy(() => import(            './Telemetry'))
 const              VisitLog = lazy(() => import(             './VisitLog'))
 
 const rootPath = '/admin'
 
-export const AdminPanel = () => {
+export const AdminPanel = memo(() => {
     const { tab } = useParams()
 
     return (
@@ -33,7 +33,7 @@ export const AdminPanel = () => {
                 <PrivateMenuItem.Link root={rootPath} key={'company_type'} path={'company_type'} title={'Типы компаний'   } />
                 <PrivateMenuItem.Link root={rootPath} key={'role'        } path={'role'        } title={'Роли'            } />
                 <PrivateMenuItem.Link root={rootPath} key={'permission'  } path={'permission'  } title={'Разрешения'      } />
-                <PrivateMenuItem.Link root={rootPath} key={'telemetry'   } path={'telemetry'   } title={'Телеметрии'      } />
+                <PrivateMenuItem.Link root={rootPath} key={'telemetry'   } path={'telemetry'   } title={'Телеметрия'      } />
                 <PrivateMenuItem.Link root={rootPath} key={'visit_log'   } path={'visit_log'   } title={'Журнал посещений'} />
             </Menu>
 
@@ -41,16 +41,16 @@ export const AdminPanel = () => {
                 <Layout.Content className={'site-layout-background'}>
                     <Suspense fallback={<SuspenseFallback />}>
                         <Switch>
-                            <PrivateRoute path={`${rootPath}/deposit`     } component={    DepositController} />
-                            <PrivateRoute path={`${rootPath}/cluster`     } component={    ClusterController} />
-                            <PrivateRoute path={`${rootPath}/well`        } component={       WellController} />
-                            <PrivateRoute path={`${rootPath}/user`        } component={       UserController} />
-                            <PrivateRoute path={`${rootPath}/company`     } component={    CompanyController} />
-                            <PrivateRoute path={`${rootPath}/company_type`} component={CompanyTypeController} />
-                            <PrivateRoute path={`${rootPath}/role`        } component={       RoleController} />
-                            <PrivateRoute path={`${rootPath}/permission`  } component={ PermissionController} />
-                            <PrivateRoute path={`${rootPath}/telemetry`   } component={  TelemetryController} />
-                            <PrivateRoute path={`${rootPath}/visit_log`   } component={VisitLog} />
+                            <PrivateRoute path={`${rootPath}/deposit`        } component={    DepositController} />
+                            <PrivateRoute path={`${rootPath}/cluster`        } component={    ClusterController} />
+                            <PrivateRoute path={`${rootPath}/well`           } component={       WellController} />
+                            <PrivateRoute path={`${rootPath}/user`           } component={       UserController} />
+                            <PrivateRoute path={`${rootPath}/company`        } component={    CompanyController} />
+                            <PrivateRoute path={`${rootPath}/company_type`   } component={CompanyTypeController} />
+                            <PrivateRoute path={`${rootPath}/role`           } component={       RoleController} />
+                            <PrivateRoute path={`${rootPath}/permission`     } component={ PermissionController} />
+                            <PrivateRoute path={`${rootPath}/telemetry/:tab?`} component={TelemetrySection} />
+                            <PrivateRoute path={`${rootPath}/visit_log`      } component={VisitLog} />
                             <PrivateDefaultRoute urls={[
                                 `${rootPath}/deposit`,
                                 `${rootPath}/cluster`,
@@ -69,6 +69,6 @@ export const AdminPanel = () => {
             </Layout>
         </Layout>
     )
-}
+})
 
 export default AdminPanel
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index 8521992..c44a9a7 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -78,7 +78,10 @@ export const requirements: PermissionRecord = {
         permission: ['AdminPermission.get'],
         role: ['AdminUserRole.get', 'AdminPermission.get'],
         visit_log: ['RequerstTracker.get'],
-        telemetry: ['AdminTelemetry.get'],
+        telemetry: {
+            merger: ['AdminTelemetry.get'],
+            viewer: ['AdminTelemetry.get'],
+        },
     },
     deposit: ['Deposit.get', 'Cluster.get'],
     cluster: {

From cacacd174940b1d155789d4ef6ab1b1af7ba473f Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Mon, 28 Mar 2022 11:19:25 +0500
Subject: [PATCH 19/21] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D1=81=20=D0=B8=D1=81=D1=87=D0=B5=D0=B7=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=D0=BC=20=D1=81=D1=82=D0=BE=D0=BB=D0=B1?=
 =?UTF-8?q?=D1=86=D0=B0=20"=D0=A7=D0=B0=D1=81=D1=8B"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WellOperations/WellOperationsEditor.jsx   | 65 ++++++-------------
 1 file changed, 19 insertions(+), 46 deletions(-)

diff --git a/src/pages/WellOperations/WellOperationsEditor.jsx b/src/pages/WellOperations/WellOperationsEditor.jsx
index 9ea77c4..49da840 100644
--- a/src/pages/WellOperations/WellOperationsEditor.jsx
+++ b/src/pages/WellOperations/WellOperationsEditor.jsx
@@ -27,8 +27,9 @@ const basePageSize = 160
 const dayRender = makeNumericRender(2)
 const dayWithoutNptRender = (_, row) => dayRender((row.day ?? 0) - (row.nptHours ?? 0) / 24)
 
-const defaultColumns = [
-  makeSelectColumn('Конструкция секции', 'idWellSectionType', [], undefined, {
+const generateColumns = (showNpt = false, categories = [], sectionTypes = []) => [
+  makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, undefined, {
+    sorter: makeNumericSorter('idWellSectionType'),
     editable: true,
     width: 160,
     formItemRules: [() => ({
@@ -39,7 +40,11 @@ const defaultColumns = [
       }
     })],
   }),
-  makeSelectColumn('Операция', 'idCategory', [], undefined, { editable: true, width: 200 }),
+  makeSelectColumn('Операция', 'idCategory', categories, undefined, {
+    sorter: makeNumericSorter('idCategory'),
+    editable: true,
+    width: 200,
+  }),
   makeTextColumn('Доп. инфо', 'categoryInfo', null, null, null, { editable: true, width: 300, input: <TextArea/> }),
   makeColumn('Глубина забоя на начало, м', 'depthStart', makeNumericColumnOptions(2, 'depthStart')),
   makeColumn('Глубина забоя при завершении, м', 'depthEnd', makeNumericColumnOptions(2, 'depthEnd')),
@@ -49,16 +54,21 @@ const defaultColumns = [
     initialValue: moment().format(),
   }),
   makeNumericColumn('День', 'day', null, null, dayRender, 80),
+  showNpt && makeNumericColumn('День без НПВ', 'dayWithoutNpt', null, null, dayWithoutNptRender, 80),
   makeColumn('Часы', 'durationHours', { ...makeNumericColumnOptions(2, 'durationHours'), width: 70 }),
   makeTextColumn('Комментарий', 'comment', null, null, null, { editable: true, input: <TextArea/> }),
-]
+].filter(Boolean)
 
 export const WellOperationsEditor = memo(({ idWell, idType, showNpt, ...other }) => {
   const [pageNumAndPageSize, setPageNumAndPageSize] = useState({ current: 1, pageSize: basePageSize })
   const [paginationTotal, setPaginationTotal] = useState(0)
   const [operations, setOperations] = useState([])
   const [showLoader, setShowLoader] = useState(false)
-  const [columns, setColumns] = useState(defaultColumns)
+
+  const [categories, setCategories] = useState([])
+  const [sectionTypes, setSectionTypes] = useState([])
+
+  const columns = useMemo(() => generateColumns(showNpt, categories, sectionTypes), [showNpt, categories, sectionTypes])
 
   const location = useLocation()
   const selectedIds = useMemo(() => {
@@ -66,56 +76,19 @@ export const WellOperationsEditor = memo(({ idWell, idType, showNpt, ...other })
     return arrayOrDefault(query.get('selectedId')?.split(',')?.map(parseInt))
   }, [location])
 
-  // useEffect(() => {
-  //   setColumns((preColumns) => preColumns.find(()))
-  // }, [showNpt])
-
   useEffect(() => invokeWebApiWrapperAsync(
     async () => {
-      let categories = arrayOrDefault(await WellOperationService.getCategories(idWell))
-      categories = categories.map((item) => ({ value: item.id, label: item.name }))
+      const categories = arrayOrDefault(await WellOperationService.getCategories(idWell))
+      setCategories(categories.map((item) => ({ value: item.id, label: item.name })))
 
-      let sectionTypes = await WellOperationService.getSectionTypes(idWell) ?? {}
-      sectionTypes = Object.entries(sectionTypes).map(([id, label]) => ({ value: parseInt(id), label }))
-
-      setColumns(preColumns => [
-        makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, undefined, {
-          editable: true,
-          width: 160,
-          sorter: makeNumericSorter('idWellSectionType'),
-        }),
-        makeSelectColumn('Операция', 'idCategory', categories, undefined, {
-          editable: true,
-          width: 200,
-          sorter: makeNumericSorter('idCategory'),
-        }),
-        ...preColumns.slice(2),
-      ])
+      const sectionTypes = Object.entries(await WellOperationService.getSectionTypes(idWell) ?? {})
+      setSectionTypes(sectionTypes.map(([id, label]) => ({ value: parseInt(id), label })))
     },
     setShowLoader,
     'Не удалось загрузить список операций по скважине',
     'Получение списка операций по скважине'
   ), [idWell])
 
-  useEffect(() => invokeWebApiWrapperAsync(
-    async() => {
-      setColumns((preColumns) => {
-        if (!!preColumns.find((col) => col.key === 'dayWithoutNpt') === showNpt)
-          return preColumns
-        const newColumns = preColumns.slice(0, 7)
-        if (showNpt)
-          newColumns.push(
-            makeNumericColumn('День без НПВ', 'dayWithoutNpt', null, null, dayWithoutNptRender, 80),
-            ...preColumns.slice(7)
-          )
-        else newColumns.push(...preColumns.slice(8))
-        return newColumns
-      })
-    },
-    setShowLoader,
-    'Не удалось добавить стоблец "День без НПВ"'
-  ), [showNpt])
-
   const updateOperations = useCallback(() => invokeWebApiWrapperAsync(
     async () => {
       const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0

From 20c589692ce431f26e62ef0698778bf5e3b632cb Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Mon, 28 Mar 2022 11:53:40 +0500
Subject: [PATCH 20/21] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D1=81=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B9=20=D0=BD=D0=B0=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B9=20=D1=82=D0=B5=D0=BB=D0=B5=D0=BC=D0=B5=D1=82=D1=80?=
 =?UTF-8?q?=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx | 4 ++--
 src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx b/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx
index 67761e8..31991d9 100644
--- a/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx
+++ b/src/pages/AdminPanel/Telemetry/TelemetryMerger.jsx
@@ -66,9 +66,9 @@ export const TelemetryMerger = memo(() => {
         setIsMerging,
         'Не удалось объединить телеметрии',
         'Объединение телеметрий',
-    ), [primary, secondary])
+    ), [updateTelemetry])
 
-    useEffect(() => updateTelemetry(), [])
+    useEffect(() => updateTelemetry(), [updateTelemetry])
 
     useEffect(() => {
         const query = new URLSearchParams(location.search)
diff --git a/src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx b/src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx
index 2441e82..b02c122 100644
--- a/src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx
+++ b/src/pages/AdminPanel/Telemetry/TelemetryViewer.jsx
@@ -42,7 +42,7 @@ export const TelemetryController = memo(() => {
             )}
         >
             <p>Вы собираетесь использовать данную телеметрию для слияния</p>
-            {record.well && (
+            {record.realWell && (
                 <p style={{ color: 'red' }}>Внимание! Телеметрии назначена скважина!</p>
             )}
         </Poprompt>

From db870d8586daeec0f9127853de07826a8032d4da Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Mon, 28 Mar 2022 12:04:58 +0500
Subject: [PATCH 21/21] =?UTF-8?q?=D0=9D=D0=B5=D0=B2=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B4=D0=BD=D1=8B=D0=B9=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0?=
 =?UTF-8?q?=D1=82=D0=BE=D1=80=20=D1=83=D0=B1=D1=80=D0=B0=D0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WellOperations/WellOperationsEditor.jsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/pages/WellOperations/WellOperationsEditor.jsx b/src/pages/WellOperations/WellOperationsEditor.jsx
index 49da840..033a6f0 100644
--- a/src/pages/WellOperations/WellOperationsEditor.jsx
+++ b/src/pages/WellOperations/WellOperationsEditor.jsx
@@ -32,13 +32,6 @@ const generateColumns = (showNpt = false, categories = [], sectionTypes = []) =>
     sorter: makeNumericSorter('idWellSectionType'),
     editable: true,
     width: 160,
-    formItemRules: [() => ({
-      validator(_, value) {
-        if (value?.length > 0)
-          return Promise.resolve()
-        return Promise.reject('Это обязательное поле!')
-      }
-    })],
   }),
   makeSelectColumn('Операция', 'idCategory', categories, undefined, {
     sorter: makeNumericSorter('idCategory'),