forked from ddrilling/asb_cloud_front
Merge remote-tracking branch 'origin/dev' into feature/add-zoom-for-d3chart
This commit is contained in:
commit
f896a22f1d
15
.vscode/settings.json
vendored
15
.vscode/settings.json
vendored
@ -1,6 +1,17 @@
|
||||
{
|
||||
"cSpell.words": [
|
||||
"день"
|
||||
"день",
|
||||
"спиннера",
|
||||
"Saub",
|
||||
"КНБК",
|
||||
"САУБ",
|
||||
"antd",
|
||||
"Poprompt",
|
||||
"saub",
|
||||
"setpoint",
|
||||
"Setpoints",
|
||||
"usehooks"
|
||||
],
|
||||
"liveServer.settings.port": 5501
|
||||
"liveServer.settings.port": 5501,
|
||||
"cSpell.language": "en,ru"
|
||||
}
|
||||
170
CODE_STANDART.md
Normal file
170
CODE_STANDART.md
Normal file
@ -0,0 +1,170 @@
|
||||
## 1. Общие положения
|
||||
1. Все несамостоятельные компоненты должны быть написаны на TypeScript. Для самостоятельных компонентов (использующихся как страницы) (далее страницы) допускается использование JavaScript для ускорения написания;
|
||||
|
||||
### 1.1. Файловая структура проекта
|
||||
1. Компоненты должны распределяться по директориям в соответствии со своим назначением:
|
||||
* `src/context` - Для контекстов приложения;
|
||||
* `src/components` - Для несамостоятельных компонентов, применяющихся многократно;
|
||||
* `src/pages` - Для страниц и компонентов, использующихся исключительно в единственном экземпляре;
|
||||
* `src/images` - Для компонентов-изображений.
|
||||
2. Если страница описывается 1 файлом она должна именоваться в соответствии с содержимым, в ином случае должна быть создана директория с соответствующим названием, внутри которой будут находиться файлы страницы. Основной файл в таком случае должен быть переименован в `index.jsx`;
|
||||
3. Файлы именуются в соответствии с таблицей:
|
||||
| Тип содержимого файла | Расширение | Стиль именования |
|
||||
|--------------------------------------|------------|--------------------------|
|
||||
| Компонент или страница | jsx/tsx | **PascalCase** |
|
||||
| Файл стилей | css/less | **snake_case** |
|
||||
| Вспомогательные методы или константы | js/ts | **snake_case** |
|
||||
| Описательные документы | md | **SCREAMING_SNAKE_CASE** |
|
||||
|
||||
### 1.2. Стилизация кода
|
||||
1. Все строки должны по возможности описываться одинарными кавычками или при необходимости обратными:
|
||||
```js
|
||||
const name = 'world'
|
||||
const msg = 'Hello, \'' + name + '\'!'
|
||||
const toPrint = `Message: ${msg}`
|
||||
```
|
||||
2. Все переменные по возможности должны инициализироваться как `const`, применение `var` не допускается;
|
||||
3. Переменные именуются в соответствии с таблицей:
|
||||
| Тип переменной | Стиль именования |
|
||||
|-------------------|--------------------------|
|
||||
| Метод, переменная | **camelCase** |
|
||||
| Константы | **SCREAMING_SNAKE_CASE** |
|
||||
| Компонент | **PascalCase** |
|
||||
|
||||
### 1.3. Импортирование / Экспортирование
|
||||
1. Импортированные файлы (в том числе lazy import) необходимо указывать в самом верху документа в следующем порядке с разделением пустой строкой:
|
||||
1. Внешние зависимости (`react`, `antd`, `webpack` и т.д.);
|
||||
2. Локальные компоненты по порядку:
|
||||
1. Контексты (`@asb/context`);
|
||||
2. Компоненты (`@components/Table`);
|
||||
3. Вспомогательные методы (`@utils`);
|
||||
4. Сервисы API (`@api`).
|
||||
3. Изображения и компоненты-изображения (`@images`);
|
||||
4. Стили (`@styles`);
|
||||
5. Lazy import (`const page = React.lazy(() => import('./page'))`).
|
||||
2. При импорте локальных файлов стоит пользоваться alias'ами:
|
||||
| Путь | Alias |
|
||||
|------------------|--------------|
|
||||
| src/components | @components |
|
||||
| src/context | @asb/context |
|
||||
| src/images | @images |
|
||||
| src/pages | @pages |
|
||||
| src/services/api | @api |
|
||||
| src/styles | @styles |
|
||||
| src/utils | @utils |
|
||||
3. По возможности импортировать из пакетов и файлов только использующиеся сущности:
|
||||
```tsx
|
||||
// вместо
|
||||
import React from 'react'
|
||||
const page: React.ReactNode = React.lazy(() => import (...))
|
||||
|
||||
// стоит использовать
|
||||
import { lazy, ReactNode } from 'react'
|
||||
const page: ReactNode = lazy(() => import (...))
|
||||
```
|
||||
|
||||
## 2. JS
|
||||
1. Методы, константы и переменные документируются в соответствии с `JSDoc`;
|
||||
2. При документации страниц необходимо указать её название, краткое описание и описание получаемых параметров:
|
||||
```jsx
|
||||
import { memo } from 'react'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
|
||||
/**
|
||||
* Тестовая страница
|
||||
*
|
||||
* @description Данная страница не имеет смысла и просто выводит переданное название и контент
|
||||
* @param title - Название страницы
|
||||
* @param content - Контент страницы
|
||||
* @param loading - Отображать ли оверлей загрузки над блоком страницы
|
||||
*/
|
||||
export const TestPage = memo(({ title, content, loading }) => (
|
||||
<LoaderPortal show={loading}>
|
||||
<div className={'dd-test-page'}>
|
||||
<div className={'dd-test-page-title'}>{title}</div>
|
||||
<div className={'dd-test-page-content'}>{content}</div>
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
))
|
||||
|
||||
export default TestPage
|
||||
```
|
||||
|
||||
## 3. TS
|
||||
1. Методы, константы и переменные документируются в соответствии с `TSDoc`;
|
||||
2. При документации компонентов необходимо указать их название, краткое описание, а также описать параметры в типе:
|
||||
```tsx
|
||||
import { memo } from 'react'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
|
||||
export type TestPageProps = {
|
||||
/** Название страницы */
|
||||
title: ReactNode
|
||||
/** Контент страницы */
|
||||
content: ReactNode
|
||||
/** Отображать ли оверлей загрузки над блоком страницы */
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Тестовая страница
|
||||
*
|
||||
* @description Данная страница не имеет смысла и просто выводит переданное название и контент
|
||||
*/
|
||||
export const TestPage = memo<TestPageProps>(({ title, content, loading }) => (
|
||||
<LoaderPortal show={loading}>
|
||||
<div className={'dd-test-page'}>
|
||||
<div className={'dd-test-page-title'}>{title}</div>
|
||||
<div className={'dd-test-page-content'}>{content}</div>
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
))
|
||||
|
||||
export default TestPage
|
||||
```
|
||||
3. Использование `any` в типах допустимо только, если значение используется только в параметрах компонентов, обозначенных типом `any`. Если метод предполагает работу с разными типами значений стоит описать его как обобщённый.
|
||||
|
||||
|
||||
## 4. JSX/TSX
|
||||
|
||||
### 4.1. Стилизация кода
|
||||
1. Все указываемые к компоненту параметры должны быть обёрнуты в фигурные скобки, кроме параметров флагов со значением `true`:
|
||||
```jsx
|
||||
<Button disabled title={'Hello, world!'} type={'ghost'}>Click me!</Button>
|
||||
```
|
||||
2. Если описание параметров компонента не укладывается в ширину в 120 строк стоит перенести их в соответствии с шаблоном:
|
||||
```jsx
|
||||
<Button
|
||||
disabled
|
||||
title={'Hello, world!'}
|
||||
type={'ghost'}
|
||||
>
|
||||
Click me!
|
||||
</Button>
|
||||
```
|
||||
3. Если JSX код передаётся как значение стоит обернуть его в круглые скобки:
|
||||
```jsx
|
||||
const a = (
|
||||
<Button disabled title={'Hello, world!'} type={'ghost'}>Click me!</Button>
|
||||
)
|
||||
```
|
||||
|
||||
### 4.2. Логика поведения
|
||||
1. Не допускается создание значений ссылочных типов в области рендера. Они должны быть вынесены в переменные или константы;
|
||||
2. Не допускается создание переменных в функциональных компонентов без использования хуков `useMemo`/`useCallback`/`useState`;
|
||||
3. Если переменные или методы не имеют зависимостей и не вызывают методы, доступные исключительно внутри компонента, они должны быть вынесены выше кода компонента.
|
||||
|
||||
|
||||
## 5. LESS
|
||||
1. Использование id должно быть сведено к минимуму;
|
||||
2. Все классы именуются с префиксом компании "`dd-`";
|
||||
3. Слова в классах разделяются тире ("`-`");
|
||||
4. Файлы именуются в соответствии с компонентом, к которому относятся;
|
||||
5. В одном файле описываются стили либо к конкретному компоненту, либо к странице;
|
||||
6. Файл со стилями должен подключаться не более чем к одному компоненту (странице);
|
||||
7. Файлы поделены на директории виду компонента, к которому применяются стили:
|
||||
* `styles/components` - для компонентов, не использующихся самостоятельно;
|
||||
* `styles/pages` - для компонентов, использующихся как страница;
|
||||
* `styles/widgets` - для компонентов, применяющихся как виджеты в дашбордах.
|
||||
18
README.md
18
README.md
@ -7,7 +7,7 @@
|
||||
|
||||
Установка выполняется одной командой:
|
||||
```bash
|
||||
npm i
|
||||
npm ci
|
||||
```
|
||||
|
||||
## 2. Автогенерация сервисов
|
||||
@ -19,12 +19,12 @@ npm i
|
||||
|
||||
Если сервер запущен на текущей машине достаточно написать:
|
||||
```bash
|
||||
npm run update_openapi
|
||||
npm run oul
|
||||
```
|
||||
|
||||
Для получения сервисов с основного сервера:
|
||||
```bash
|
||||
npm run update_openapi_server
|
||||
npm run oug_dev
|
||||
```
|
||||
|
||||
или же ручной вариант:
|
||||
@ -36,12 +36,12 @@ npx openapi -i http://{IP_ADDRESS}:{PORT}/swagger/v1/swagger.json -o src/service
|
||||
|
||||
На данный момент имеются следующие IP-адреса:
|
||||
|
||||
| IP-адрес | Описание |
|
||||
|:-|:-|
|
||||
| 127.0.0.1:5000 | Локальный адрес вашей машины (привязан к `update_openapi`) |
|
||||
| 192.168.1.113:5000 | Локальный адрес development-сервера (привязан к `update_openapi_server`) |
|
||||
| 46.146.209.148:89 | Внешний адрес development-сервера |
|
||||
| cloud.digitaldrilling.ru | Внешний адрес production-сервера |
|
||||
| IP-адрес | Команда | Описание |
|
||||
|:-------------------------|:--------|:------------------------------------|
|
||||
| 127.0.0.1:5000 | oul | Локальный адрес вашей машины |
|
||||
| 192.168.1.113:5000 | oud | Локальный адрес development-сервера |
|
||||
| 46.146.209.148:89 | oug_dev | Внешний адрес development-сервера |
|
||||
| cloud.digitaldrilling.ru | oug | Внешний адрес production-сервера |
|
||||
|
||||
## 3. Компиляция production-версии приложения
|
||||
После выполнения вышеописанных пунктов приложение готово к компиляции.
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@ -17,8 +17,7 @@
|
||||
"react-dom": "^18.1.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"rxjs": "^7.5.5",
|
||||
"usehooks-ts": "^2.6.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
"usehooks-ts": "^2.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.18.2",
|
||||
@ -14786,11 +14785,6 @@
|
||||
"minimalistic-assert": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/web-vitals": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
|
||||
"integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
|
||||
},
|
||||
"node_modules/webidl-conversions": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
|
||||
@ -26492,11 +26486,6 @@
|
||||
"minimalistic-assert": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"web-vitals": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
|
||||
"integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
|
||||
},
|
||||
"webidl-conversions": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
|
||||
|
||||
55
src/App.tsx
55
src/App.tsx
@ -1,17 +1,15 @@
|
||||
import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom'
|
||||
import { lazy, memo, Suspense } from 'react'
|
||||
import locale from 'antd/lib/locale/ru_RU'
|
||||
import { ConfigProvider } from 'antd'
|
||||
|
||||
import { RootPathContext } from '@asb/context'
|
||||
import { UserOutlet } from '@components/outlets'
|
||||
import LayoutPortal from '@components/LayoutPortal'
|
||||
import SuspenseFallback from '@components/SuspenseFallback'
|
||||
import { getUser, NoAccessComponent } from '@utils'
|
||||
import { OpenAPI } from '@api'
|
||||
import { NoAccessComponent } from '@utils'
|
||||
|
||||
import '@styles/include/antd_theme.less'
|
||||
import '@styles/App.less'
|
||||
import '@styles/pages/App.less'
|
||||
|
||||
const UserOutlet = lazy(() => import('@components/outlets/UserOutlet'))
|
||||
const DepositsOutlet = lazy(() => import('@components/outlets/DepositsOutlet'))
|
||||
const LayoutPortal = lazy(() => import('@components/LayoutPortal'))
|
||||
|
||||
const Login = lazy(() => import('@pages/public/Login'))
|
||||
const Register = lazy(() => import('@pages/public/Register'))
|
||||
@ -22,28 +20,23 @@ const Deposit = lazy(() => import('@pages/Deposit'))
|
||||
const Cluster = lazy(() => import('@pages/Cluster'))
|
||||
const Well = lazy(() => import('@pages/Well'))
|
||||
|
||||
// OpenAPI.BASE = 'http://localhost:3000'
|
||||
// TODO: Удалить взятие из 'token' в следующем релизе, вставлено для совместимости
|
||||
OpenAPI.TOKEN = async () => getUser().token || localStorage.getItem('token') || ''
|
||||
OpenAPI.HEADERS = { 'Content-Type': 'application/json' }
|
||||
|
||||
export const App = memo(() => (
|
||||
<ConfigProvider locale={locale}>
|
||||
<RootPathContext.Provider value={''}>
|
||||
<Suspense fallback={<SuspenseFallback style={{ minHeight: '100vh' }} />}>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route index element={<Navigate to={'deposit'} replace />} />
|
||||
<Route path={'*'} element={<NoAccessComponent />} />
|
||||
<RootPathContext.Provider value={''}>
|
||||
<Suspense fallback={<SuspenseFallback style={{ minHeight: '100vh' }} />}>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route index element={<Navigate to={'deposit'} replace />} />
|
||||
<Route path={'*'} element={<NoAccessComponent />} />
|
||||
|
||||
{/* Public pages */}
|
||||
<Route path={'/login'} element={<Login />} />
|
||||
<Route path={'/register'} element={<Register />} />
|
||||
{/* Public pages */}
|
||||
<Route path={'/login'} element={<Login />} />
|
||||
<Route path={'/register'} element={<Register />} />
|
||||
|
||||
{/* User pages */}
|
||||
<Route element={<UserOutlet />}>
|
||||
<Route path={'/file_download/:idFile/*'} element={<FileDownload />} />
|
||||
{/* User pages */}
|
||||
<Route element={<UserOutlet />}>
|
||||
<Route path={'/file_download/:idFile/*'} element={<FileDownload />} />
|
||||
|
||||
<Route element={<DepositsOutlet />}>
|
||||
<Route element={<LayoutPortal />}>
|
||||
{/* Admin pages */}
|
||||
<Route path={'/admin/*'} element={<AdminPanel />} />
|
||||
@ -54,11 +47,11 @@ export const App = memo(() => (
|
||||
<Route path={'/well/:idWell/*'} element={<Well />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
</Suspense>
|
||||
</RootPathContext.Provider>
|
||||
</ConfigProvider>
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
</Suspense>
|
||||
</RootPathContext.Provider>
|
||||
))
|
||||
|
||||
export default App
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { cloneElement, memo, useCallback, useMemo, useState } from 'react'
|
||||
import { Button, ButtonProps } from 'antd'
|
||||
import { Button, ButtonProps, Tooltip } from 'antd'
|
||||
import { CopyOutlined } from '@ant-design/icons'
|
||||
|
||||
import { invokeWebApiWrapperAsync, notify } from './factory'
|
||||
@ -43,11 +43,9 @@ export type CopyUrlButtonProps = Omit<CopyUrlProps, 'children'> & ButtonProps
|
||||
export const CopyUrlButton = memo<CopyUrlButtonProps>(({ sendLoading, hideUnsupported, onCopy, ...other }) => {
|
||||
return (
|
||||
<CopyUrl sendLoading={sendLoading} hideUnsupported={hideUnsupported} onCopy={onCopy}>
|
||||
<Button
|
||||
icon={<CopyOutlined />}
|
||||
title={'Скопировать URL в буфер обмена'}
|
||||
{...other}
|
||||
/>
|
||||
<Tooltip title={'Скопировать URL в буфер обмена'}>
|
||||
<Button icon={<CopyOutlined />} {...other} />
|
||||
</Tooltip>
|
||||
</CopyUrl>
|
||||
)
|
||||
})
|
||||
|
||||
@ -1,101 +0,0 @@
|
||||
import moment from 'moment'
|
||||
import { useState, useEffect, memo, ReactNode } from 'react'
|
||||
import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons'
|
||||
|
||||
import '@styles/display.less'
|
||||
|
||||
export const formatNumber = (value?: unknown, format?: number) =>
|
||||
Number.isInteger(format) && Number.isFinite(value)
|
||||
? Number(value).toFixed(format)
|
||||
: Number(value).toPrecision(4)
|
||||
|
||||
const iconStyle = { color:'#0008' }
|
||||
const displayValueStyle = { display: 'flex', flexGrow: 1 }
|
||||
|
||||
export type ValueDisplayProps = {
|
||||
prefix?: ReactNode
|
||||
suffix?: ReactNode
|
||||
format?: number | string | ((arg: string) => ReactNode)
|
||||
isArrowVisible?: boolean
|
||||
enumeration?: Record<string, string>
|
||||
value: string
|
||||
}
|
||||
|
||||
export type DisplayProps = ValueDisplayProps & {
|
||||
className?: string
|
||||
label?: ReactNode
|
||||
}
|
||||
|
||||
export const ValueDisplay = memo<ValueDisplayProps>(({ prefix, value, suffix, isArrowVisible, format, enumeration }) => {
|
||||
const [val, setVal] = useState<ReactNode>('---')
|
||||
const [arrowState, setArrowState] = useState({
|
||||
preVal: NaN,
|
||||
preTimestamp: Date.now(),
|
||||
direction: 0,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setVal((preVal) => {
|
||||
if ((value ?? '-') === '-' || value === '--') return '---'
|
||||
if (typeof format === 'function') return format(enumeration?.[value] ?? value)
|
||||
if (enumeration?.[value]) return enumeration[value]
|
||||
|
||||
if (Number.isFinite(+value)) {
|
||||
if (isArrowVisible && (arrowState.preTimestamp + 1000 < Date.now())) {
|
||||
let direction = 0
|
||||
if (+value > arrowState.preVal)
|
||||
direction = 1
|
||||
if (+value < arrowState.preVal)
|
||||
direction = -1
|
||||
|
||||
setArrowState({
|
||||
preVal: +value,
|
||||
preTimestamp: Date.now(),
|
||||
direction: direction,
|
||||
})
|
||||
}
|
||||
|
||||
return formatNumber(value, Number(format))
|
||||
}
|
||||
|
||||
if (value.length > 4) {
|
||||
const valueDate = moment(value)
|
||||
if (valueDate.isValid())
|
||||
return valueDate.format(String(format))
|
||||
}
|
||||
|
||||
return value
|
||||
})
|
||||
},[value, isArrowVisible, arrowState, format, enumeration])
|
||||
|
||||
let arrow = null
|
||||
if(isArrowVisible)
|
||||
switch (arrowState.direction){
|
||||
case 0:
|
||||
arrow = <CaretRightOutlined style={iconStyle}/>
|
||||
break
|
||||
case 1:
|
||||
arrow = <CaretUpOutlined style={iconStyle}/>
|
||||
break
|
||||
case -1:
|
||||
arrow = <CaretDownOutlined style={iconStyle}/>
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
return(
|
||||
<span className={'display_value'}>
|
||||
{prefix} {val} {suffix}{arrow}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
|
||||
export const Display = memo<DisplayProps>(({ className, label, ...other })=> (
|
||||
<div className={className}>
|
||||
<div className={'display_label'}>{label}</div>
|
||||
<div style={displayValueStyle}>
|
||||
<ValueDisplay {...other}/>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
@ -5,13 +5,13 @@ import { AutoComplete } from 'antd'
|
||||
import { join } from 'path'
|
||||
|
||||
import { useWell } from '@asb/context'
|
||||
import { makeItem, PrivateWellMenuItem } from './PrivateWellMenu'
|
||||
import { makeItem, PrivateMenuItem } from './PrivateMenu'
|
||||
import { hasPermission, isURLAvailable } from '@utils'
|
||||
|
||||
import { menuItems as adminMenuItems } from '@pages/AdminPanel/AdminNavigationMenu'
|
||||
import { menuItems as wellMenuItems } from '@pages/Well/NavigationMenu'
|
||||
import { menuItems as wellMenuItems } from '@pages/Well/WellNavigationMenu'
|
||||
|
||||
import '@styles/fast_run_menu.less'
|
||||
import '@styles/components/fast_run_menu.less'
|
||||
|
||||
const transliterationTable = {
|
||||
'q': 'й', 'w': 'ц', 'e': 'у', 'r': 'к', 't': 'е', 'y': 'н', 'u': 'г', 'i': 'ш', 'o': 'щ', 'p': 'з', '[': 'х', ']': 'ъ', '{': 'х', '}': 'ъ',
|
||||
@ -29,7 +29,7 @@ const transliterateToEn = (text: string) => Object.entries(transliterationTable)
|
||||
const applyVars = (route: string, vars?: object): string => !vars ? route :
|
||||
Object.entries(vars).reduce((out, [key, value]) => out.replaceAll(`{${key}}`, value), route)
|
||||
|
||||
const makeOptions = (items: PrivateWellMenuItem[], vars?: object): OptionType[] => {
|
||||
const makeOptions = (items: PrivateMenuItem[], vars?: object): OptionType[] => {
|
||||
const out: OptionType[] = []
|
||||
items.forEach((item) => {
|
||||
if (!hasPermission(item.permissions)) return
|
||||
@ -78,7 +78,7 @@ export const FastRunMenu = memo(() => {
|
||||
]
|
||||
|
||||
if (isURLAvailable('/admin'))
|
||||
menus.push(makeItem('Панель администратора', '/admin', [], undefined, adminMenuItems as PrivateWellMenuItem[]))
|
||||
menus.push(makeItem('Панель администратора', '/admin', [], undefined, adminMenuItems as PrivateMenuItem[]))
|
||||
|
||||
if (well.id)
|
||||
menus.push(
|
||||
|
||||
@ -22,7 +22,7 @@ export const Grid = memo<ComponentProps>(({ children, style, ...other }) => (
|
||||
</div>
|
||||
))
|
||||
|
||||
export const GridItem = memo<GridItemProps>(({ children, row, col, rowSpan, colSpan, style, ...other }) => {
|
||||
export const GridItem = memo<GridItemProps>(({ children, row, col, rowSpan, colSpan, style, className, ...other }) => {
|
||||
const localRow = +row
|
||||
const localCol = +col
|
||||
const localColSpan = colSpan ? colSpan - 1 : 0
|
||||
@ -32,12 +32,11 @@ export const GridItem = memo<GridItemProps>(({ children, row, col, rowSpan, colS
|
||||
gridColumnEnd: localCol + localColSpan,
|
||||
gridRowStart: localRow,
|
||||
gridRowEnd: localRow + localRowSpan,
|
||||
padding: '4px',
|
||||
...style,
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={gridItemStyle} {...other}>
|
||||
<div className={`asb-grid-item ${className || ''}`} style={gridItemStyle} {...other}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Breadcrumb, Layout, LayoutProps, Menu, SiderProps } from 'antd'
|
||||
import { Key, memo, ReactNode, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { ItemType } from 'antd/lib/menu/hooks/useItems'
|
||||
import { Link, Outlet } from 'react-router-dom'
|
||||
import { Link, Outlet, useLocation } from 'react-router-dom'
|
||||
import {
|
||||
ApartmentOutlined,
|
||||
CodeOutlined,
|
||||
@ -18,7 +18,7 @@ import SuspenseFallback from './SuspenseFallback'
|
||||
|
||||
import Logo from '@images/Logo'
|
||||
|
||||
import '@styles/layout.less'
|
||||
import '@styles/components/layout.less'
|
||||
|
||||
const { Content, Sider } = Layout
|
||||
|
||||
@ -31,7 +31,7 @@ export type LayoutPortalProps = Omit<LayoutProps, 'children'> & {
|
||||
siderProps?: SiderProps & { userMenuProps?: UserMenuProps }
|
||||
isAdmin?: boolean
|
||||
fallback?: JSX.Element
|
||||
breadcrumb?: boolean | JSX.Element
|
||||
breadcrumb?: boolean | ((path: string) => JSX.Element)
|
||||
topRightBlock?: JSX.Element
|
||||
}
|
||||
|
||||
@ -49,6 +49,7 @@ const _LayoutPortal = memo(() => {
|
||||
const [userMenuOpen, setUserMenuOpen] = useState<boolean>(false)
|
||||
const [currentWell, setCurrentWell] = useState<string>('')
|
||||
const [props, setProps] = useState<LayoutPortalProps>(defaultProps)
|
||||
const location = useLocation()
|
||||
|
||||
const { isAdmin, title, sheet, showSelector, selectorProps, sider, siderProps, fallback, breadcrumb, topRightBlock, ...other } = useMemo(() => props, [props])
|
||||
|
||||
@ -66,6 +67,8 @@ const _LayoutPortal = memo(() => {
|
||||
makeItem('Профиль', 'profile', <UserOutlined/>, null, () => setUserMenuOpen((prev) => !prev)),
|
||||
].filter(Boolean) as ItemType[], [isAdmin, currentWell])
|
||||
|
||||
const breadcrumbItems = useMemo(() => typeof breadcrumb === 'function' && breadcrumb(location.pathname), [breadcrumb, location.pathname])
|
||||
|
||||
return (
|
||||
<Layout className={`page-layout ${isAdmin ? 'page-layout-admin' : ''}`}>
|
||||
{(sider || siderProps) && (
|
||||
@ -114,7 +117,7 @@ const _LayoutPortal = memo(() => {
|
||||
<a style={{ userSelect: 'none' }} onClick={() => setWellsTreeOpen((prev) => !prev)}>{currentWell}</a>
|
||||
</Breadcrumb.Item>
|
||||
)}
|
||||
{breadcrumb !== true && breadcrumb}
|
||||
{breadcrumbItems}
|
||||
</Breadcrumb>
|
||||
)}
|
||||
{topRightBlock}
|
||||
|
||||
@ -3,14 +3,22 @@ import { HTMLAttributes } from 'react'
|
||||
import { Loader } from '@components/icons'
|
||||
|
||||
type LoaderPortalProps = HTMLAttributes<HTMLDivElement> & {
|
||||
/** Показать ли загрузку */
|
||||
show?: boolean,
|
||||
/** Затемнять ли дочерний блок */
|
||||
fade?: boolean,
|
||||
/** Параметры спиннера */
|
||||
spinnerProps?: HTMLAttributes<HTMLDivElement>,
|
||||
/** Заполнять ли контент на 100% */
|
||||
fillContent?: boolean
|
||||
}
|
||||
|
||||
export const LoaderPortal: React.FC<LoaderPortalProps> = ({ className = '', show, fade = true, children, spinnerProps, ...other }) => (
|
||||
/**
|
||||
* @description Добавляет оверлей загрузки над обёрнутым блоком
|
||||
*/
|
||||
export const LoaderPortal: React.FC<LoaderPortalProps> = ({ className = '', show, fade = true, children, spinnerProps, fillContent, ...other }) => (
|
||||
<div className={`loader-container ${className}`} {...other}>
|
||||
<div className={'loader-content'}>{children}</div>
|
||||
<div className={`loader-content${fillContent ? ' loader-content-fill' : ''}`}>{children}</div>
|
||||
{show && fade && <div className={'loader-fade'}/>}
|
||||
{show && <div className={'loader-overlay'}><Loader {...spinnerProps} /></div>}
|
||||
</div>
|
||||
|
||||
@ -2,16 +2,16 @@ import { Breadcrumb, BreadcrumbItemProps } from 'antd'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { join } from 'path'
|
||||
|
||||
import { PrivateWellMenuItem } from '@components/PrivateWellMenu'
|
||||
import { PrivateMenuItem } from '@components/PrivateMenu'
|
||||
import { FunctionalValue, getFunctionalValue, } from '@utils'
|
||||
|
||||
export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: string[], root: string = '/') => {
|
||||
export const makeBreadcrumbItems = (items: PrivateMenuItem[], pathParts: string[], root: string = '/') => {
|
||||
const out = []
|
||||
const parts = [...pathParts]
|
||||
let route = root
|
||||
let arr: PrivateWellMenuItem[] | undefined = items
|
||||
let arr: PrivateMenuItem[] | undefined = items
|
||||
while (arr && parts.length > 0) {
|
||||
const child: PrivateWellMenuItem | undefined = arr.find(elm => elm.route.toLowerCase() === parts[0].toLowerCase())
|
||||
const child: PrivateMenuItem | undefined = arr.find(elm => elm.route.toLowerCase() === parts[0].toLowerCase())
|
||||
if (!child) break
|
||||
route = join(route, child.route)
|
||||
out.push({ ...child, route })
|
||||
@ -21,13 +21,12 @@ export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: str
|
||||
return out
|
||||
}
|
||||
|
||||
export const makeMenuBreadcrumbItems = (
|
||||
menuItems: PrivateWellMenuItem[],
|
||||
path: string,
|
||||
export const makeMenuBreadcrumbItemsRender = (
|
||||
menuItems: PrivateMenuItem[],
|
||||
pathRoot: RegExp = /^\//,
|
||||
itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>,
|
||||
itemRender?: (item: PrivateWellMenuItem) => JSX.Element,
|
||||
) => {
|
||||
itemsProps?: FunctionalValue<(item: PrivateMenuItem) => BreadcrumbItemProps>,
|
||||
itemRender?: (item: PrivateMenuItem) => JSX.Element,
|
||||
) => (path: string) => {
|
||||
const getItemProps = getFunctionalValue(itemsProps)
|
||||
|
||||
const rootPart = pathRoot.exec(path)
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { ItemType } from 'antd/lib/menu/hooks/useItems'
|
||||
import { Menu, MenuProps } from 'antd'
|
||||
import { memo, ReactNode, useMemo } from 'react'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { join } from 'path'
|
||||
import { Menu, MenuProps } from 'antd'
|
||||
|
||||
import { hasPermission, Permission } from '@utils'
|
||||
|
||||
export type PrivateWellMenuItem = {
|
||||
export type PrivateMenuItem = {
|
||||
title: string
|
||||
route: string
|
||||
permissions: Permission | Permission[]
|
||||
icon?: ReactNode
|
||||
visible?: boolean
|
||||
children?: PrivateWellMenuItem[]
|
||||
children?: PrivateMenuItem[]
|
||||
}
|
||||
|
||||
const makeItems = (items: PrivateWellMenuItem[], parentRoute: string, pathParser?: (path: string, parent: string) => string): ItemType[] => {
|
||||
const makeItems = (items: PrivateMenuItem[], parentRoute: string, pathParser?: (path: string, parent: string) => string): ItemType[] => {
|
||||
return items.map((item) => {
|
||||
if (item.visible === false || !(item.visible === true || hasPermission(item.permissions))) return null
|
||||
|
||||
@ -43,11 +43,11 @@ const makeItems = (items: PrivateWellMenuItem[], parentRoute: string, pathParser
|
||||
}).filter(Boolean)
|
||||
}
|
||||
|
||||
const makeItemList = (items: PrivateWellMenuItem[], rootPath: string, wellId?: number): ItemType[] => {
|
||||
const makeItemList = (items: PrivateMenuItem[], rootPath: string, variables: Record<string, number | string>): ItemType[] => {
|
||||
const parser = (path: string, parent: string) => {
|
||||
if (!path.startsWith('/'))
|
||||
path = join(parent, path)
|
||||
return path.replace(/\{wellId\}/, String(wellId))
|
||||
return Object.entries(variables).reduce((out, [key, value]) => out.replaceAll(`{${key}}`, String(value)), path)
|
||||
}
|
||||
|
||||
return makeItems(items, rootPath, parser)
|
||||
@ -58,9 +58,9 @@ export const makeItem = (
|
||||
route: string,
|
||||
permissions: Permission | Permission[],
|
||||
icon?: ReactNode,
|
||||
children?: PrivateWellMenuItem[],
|
||||
children?: PrivateMenuItem[],
|
||||
visible?: boolean
|
||||
): PrivateWellMenuItem => ({
|
||||
): PrivateMenuItem => ({
|
||||
title,
|
||||
route,
|
||||
icon,
|
||||
@ -69,16 +69,16 @@ export const makeItem = (
|
||||
visible,
|
||||
})
|
||||
|
||||
export type PrivateWellMenuProps = Omit<MenuProps, 'items'> & {
|
||||
idWell?: number
|
||||
items: PrivateWellMenuItem[]
|
||||
export type PrivateMenuProps = Omit<MenuProps, 'items'> & {
|
||||
variables?: Record<string, number | string>
|
||||
items: PrivateMenuItem[]
|
||||
rootPath?: string
|
||||
}
|
||||
|
||||
export const PrivateWellMenu = memo<PrivateWellMenuProps>(({ idWell, items, rootPath = '/', ...other }) => {
|
||||
export const PrivateMenu = memo<PrivateMenuProps>(({ variables, items, rootPath = '/', ...other }) => {
|
||||
const location = useLocation()
|
||||
|
||||
const menuItems = useMemo(() => makeItemList(items, rootPath, idWell), [items, rootPath, idWell])
|
||||
const menuItems = useMemo(() => makeItemList(items, rootPath, variables || {}), [items, rootPath, variables])
|
||||
|
||||
const tabKeys = useMemo(() => {
|
||||
const out = []
|
||||
@ -1,26 +1,53 @@
|
||||
import { ReactNode } from 'react'
|
||||
import { Key, ReactNode } from 'react'
|
||||
|
||||
import { formatDate } from '@utils'
|
||||
|
||||
import makeColumn, { columnPropsOther } from '.'
|
||||
import { DatePickerWrapper, makeDateSorter } from '..'
|
||||
import { makeColumn, ColumnProps, SorterMethod } from '.'
|
||||
import { DatePickerWrapper, getObjectByDeepKey } from '..'
|
||||
import { DatePickerWrapperProps } from '../DatePickerWrapper'
|
||||
import { formatDate, isRawDate } from '@utils'
|
||||
|
||||
export const makeDateColumn = (
|
||||
/**
|
||||
* Фабрика методов сортировки столбцов для данных типа **Дата**
|
||||
* @param key Ключ столбца
|
||||
* @returns Метод сортировки
|
||||
*/
|
||||
export const makeDateSorter = <T extends unknown>(key: Key): SorterMethod<T> => (a, b) => {
|
||||
const vA = a ? getObjectByDeepKey(key, a) : null
|
||||
const vB = b ? getObjectByDeepKey(key, b) : null
|
||||
|
||||
if (!isRawDate(vA) || !isRawDate(vB)) return 0
|
||||
if (!isRawDate(vA)) return 1
|
||||
if (!isRawDate(vB)) return -1
|
||||
|
||||
return (new Date(vA)).getTime() - (new Date(vB)).getTime()
|
||||
}
|
||||
|
||||
/**
|
||||
* Фабрика объектов-столбцов для компонента `Table` для работы с данными типа **Дата**
|
||||
*
|
||||
* @param title Название столбца
|
||||
* @param key Ключ столбца
|
||||
* @param utc Конвертировать ли дату в UTC
|
||||
* @param format Формат отображения даты
|
||||
* @param other Дополнительные опции столбца
|
||||
* @param pickerOther Опции компонента селектора даты
|
||||
* @returns Объект-столбец для работы с данными типа **Дата**
|
||||
*/
|
||||
export const makeDateColumn = <T extends unknown>(
|
||||
title: ReactNode,
|
||||
key: string,
|
||||
utc?: boolean,
|
||||
format?: string,
|
||||
other?: columnPropsOther,
|
||||
other?: ColumnProps<T>,
|
||||
pickerOther?: DatePickerWrapperProps,
|
||||
) => makeColumn(title, key, {
|
||||
) => makeColumn<T>(title, key, {
|
||||
editable: true,
|
||||
...other,
|
||||
render: (date) => (
|
||||
<div className={'text-align-r-container'}>
|
||||
<span>{formatDate(date, utc, format) ?? '-'}</span>
|
||||
</div>
|
||||
),
|
||||
sorter: makeDateSorter(key),
|
||||
sorter: makeDateSorter<T>(key),
|
||||
input: <DatePickerWrapper {...pickerOther} />,
|
||||
})
|
||||
|
||||
|
||||
@ -1,21 +1,27 @@
|
||||
import { ReactNode } from 'react'
|
||||
import { Key, ReactNode } from 'react'
|
||||
import { Rule } from 'antd/lib/form'
|
||||
import { ColumnProps } from 'antd/lib/table'
|
||||
import { ColumnType } from 'antd/lib/table'
|
||||
import { RenderedCell } from 'rc-table/lib/interface'
|
||||
|
||||
import { DataSet } from '../Table'
|
||||
import { OmitExtends } from '@utils/types'
|
||||
|
||||
export * from './date'
|
||||
export * from './time'
|
||||
export * from './numeric'
|
||||
export * from './plan_fact'
|
||||
export * from './select'
|
||||
export * from './tag'
|
||||
export * from './text'
|
||||
export * from './timezone'
|
||||
|
||||
export type DataType<T = any> = Record<string, T>
|
||||
export type RenderMethod<T = any> = (value: T, dataset?: DataType<T>, index?: number) => ReactNode
|
||||
export type SorterMethod<T = any> = (a?: DataType<T> | null, b?: DataType<T> | null) => number
|
||||
export type RenderMethod<T = any, DT = DataSet<T>> = (value: T | undefined, dataset: DT, index: number) => ReactNode | RenderedCell<T> | undefined
|
||||
export type SorterMethod<T = any, DT = DataSet<T> | null | undefined> = (a: DT, b: DT) => number
|
||||
export type FilterMethod<T = any, DT = DataSet<T>> = (value: string | number | T | undefined, record: DT) => boolean
|
||||
|
||||
export type columnPropsOther<T = any> = ColumnProps<DataType<T>> & {
|
||||
export type FilterGenerator<T, DT = DataSet<T>> = (key: Key) => FilterMethod<T, DT>
|
||||
|
||||
export type ColumnProps<T = any> = OmitExtends<{
|
||||
// редактируемая колонка
|
||||
editable?: boolean
|
||||
// react компонента редактора
|
||||
@ -29,13 +35,16 @@ export type columnPropsOther<T = any> = ColumnProps<DataType<T>> & {
|
||||
// дефолтное значение при добавлении новой строки
|
||||
initialValue?: string | number
|
||||
|
||||
onFilter?: FilterMethod<T>
|
||||
sorter?: SorterMethod<T>
|
||||
render?: RenderMethod<T>
|
||||
}
|
||||
}, ColumnType<DataSet<T>>>
|
||||
|
||||
export const makeColumn = (title: ReactNode, key: string, other?: columnPropsOther) => ({
|
||||
export const makeColumn = <T = any>(title: ReactNode, key: Key, other?: ColumnProps<T>) => ({
|
||||
title: title,
|
||||
key: key,
|
||||
dataIndex: key,
|
||||
render: (value: T) => value,
|
||||
...other,
|
||||
})
|
||||
|
||||
|
||||
@ -1,20 +1,25 @@
|
||||
import { InputNumber } from 'antd'
|
||||
import { ReactNode } from 'react'
|
||||
import { Key, ReactNode } from 'react'
|
||||
|
||||
import { makeNumericSorter } from '../sorters'
|
||||
import makeColumn, { columnPropsOther, DataType, makeGroupColumn, RenderMethod } from '.'
|
||||
import { ColumnFilterItem, CompareFn } from 'antd/lib/table/interface'
|
||||
import makeColumn, { ColumnProps, FilterGenerator, makeGroupColumn, RenderMethod, SorterMethod } from '.'
|
||||
import { getObjectByDeepKey } from '../Table'
|
||||
|
||||
export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
|
||||
|
||||
type FilterMethod<T> = (value: string | number | boolean, record: DataType<T>) => boolean
|
||||
export const makeNumericSorter = <T extends number = number>(key: Key): SorterMethod<T> => (a, b) => {
|
||||
if (!a && !b) return 0
|
||||
if (!a) return 1
|
||||
if (!b) return -1
|
||||
|
||||
export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMethod<T> => (value: T) => {
|
||||
let val = '-'
|
||||
if ((value ?? null) !== null && Number.isFinite(+value)) {
|
||||
return Number(getObjectByDeepKey(key, a)) - Number(getObjectByDeepKey(key, b))
|
||||
}
|
||||
|
||||
export const makeNumericRender = <T extends unknown>(fixed?: number, defaultValue: string = '-', precision: number = 5): RenderMethod<T> => (value) => {
|
||||
let val = defaultValue
|
||||
if (value !== undefined && value !== null && Number.isFinite(+value)) {
|
||||
val = (fixed ?? null) !== null
|
||||
? (+value).toFixed(fixed)
|
||||
: (+value).toPrecision(5)
|
||||
: (+value).toPrecision(precision)
|
||||
}
|
||||
|
||||
return (
|
||||
@ -24,7 +29,7 @@ export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMeth
|
||||
)
|
||||
}
|
||||
|
||||
export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number, sorterKey?: string): columnPropsOther<T> => ({
|
||||
export const makeNumericColumnOptions = <T extends number>(fixed?: number, sorterKey?: string): ColumnProps<T> => ({
|
||||
editable: true,
|
||||
initialValue: 0,
|
||||
width: 100,
|
||||
@ -37,61 +42,99 @@ export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number
|
||||
render: makeNumericRender<T>(fixed),
|
||||
})
|
||||
|
||||
export const makeNumericColumn = <T extends unknown = any>(
|
||||
export const makeNumericColumn = <T extends number>(
|
||||
title: ReactNode,
|
||||
key: string,
|
||||
filters?: ColumnFilterItem[],
|
||||
filterDelegate?: (key: string | number) => FilterMethod<T>,
|
||||
key: Key,
|
||||
renderDelegate?: RenderMethod<T>,
|
||||
filterDelegate?: FilterGenerator<T>,
|
||||
width?: string | number,
|
||||
other?: columnPropsOther,
|
||||
other?: ColumnProps<T>,
|
||||
) => makeColumn(title, key, {
|
||||
filters,
|
||||
editable: true,
|
||||
onFilter: filterDelegate ? filterDelegate(key) : undefined,
|
||||
sorter: makeNumericSorter(key),
|
||||
width,
|
||||
input: <InputNumber style={{ width: '100%' }}/>,
|
||||
render: renderDelegate ?? makeNumericRender<T>(2),
|
||||
input: <InputNumber style={{ width: '100%' }} defaultValue={0} />,
|
||||
render: renderDelegate || makeNumericRender<T>(2),
|
||||
align: 'right',
|
||||
...other
|
||||
})
|
||||
|
||||
export const makeNumericColumnPlanFact = <T extends unknown = any>(
|
||||
export const makeNumericColumnPlanFact = <T extends number>(
|
||||
title: ReactNode,
|
||||
key: string,
|
||||
filters?: ColumnFilterItem[],
|
||||
filterDelegate?: (key: string | number) => FilterMethod<T>,
|
||||
key: Key,
|
||||
renderDelegate?: RenderMethod<T>,
|
||||
width?: string | number
|
||||
filterDelegate?: FilterGenerator<T>,
|
||||
width?: string | number,
|
||||
other?: ColumnProps<T>,
|
||||
) => {
|
||||
return {
|
||||
title,
|
||||
children: [
|
||||
makeNumericColumn<T>('План', `${key}.plan`, renderDelegate, filterDelegate, width, other),
|
||||
makeNumericColumn<T>('Факт', `${key}.fact`, renderDelegate, filterDelegate, width, other),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Для значений типа план/факт появилась модель `PlanFactDto`, использование 2 полей с суффиксами неактуально
|
||||
* @param title Заголовок столбца
|
||||
* @param key Ключ столбца
|
||||
* @param filters Список значений для фильтрации
|
||||
* @param filterDelegate Метод фильтрации
|
||||
* @param renderDelegate Render-метод отображения ячейки
|
||||
* @param width Ширина столбца
|
||||
* @param other Дополнительные опции
|
||||
* @returns Объект-столбец для таблицы
|
||||
*/
|
||||
export const makeNumericColumnPlanFactOld = <T extends number>(
|
||||
title: ReactNode,
|
||||
key: Key,
|
||||
renderDelegate?: RenderMethod<T>,
|
||||
filterDelegate?: FilterGenerator<T>,
|
||||
width?: string | number,
|
||||
other?: ColumnProps<T>,
|
||||
) => makeGroupColumn(title, [
|
||||
makeNumericColumn<T>('п', key + 'Plan', filters, filterDelegate, renderDelegate, width),
|
||||
makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width),
|
||||
makeNumericColumn<T>('План', key + 'Plan', renderDelegate, filterDelegate, width, other),
|
||||
makeNumericColumn<T>('Факт', key + 'Fact', renderDelegate, filterDelegate, width, other),
|
||||
])
|
||||
|
||||
export const makeNumericStartEnd = <T extends unknown = any>(
|
||||
export const makeNumericStartEnd = <T extends number>(
|
||||
title: ReactNode,
|
||||
key: string,
|
||||
key: Key,
|
||||
fixed: number,
|
||||
filters?: ColumnFilterItem[],
|
||||
filterDelegate?: (key: string | number) => FilterMethod<T>,
|
||||
renderDelegate?: RenderMethod<T>,
|
||||
filterDelegate?: FilterGenerator<T>,
|
||||
width?: string | number,
|
||||
) => makeGroupColumn(title, [
|
||||
makeNumericColumn<T>('старт', key + 'Start', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Start')),
|
||||
makeNumericColumn<T>('конец', key + 'End', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'End'))
|
||||
makeNumericColumn<T>('старт', key + 'Start', renderDelegate, filterDelegate, width, makeNumericColumnOptions(fixed, key + 'Start')),
|
||||
makeNumericColumn<T>('конец', key + 'End', renderDelegate, filterDelegate, width, makeNumericColumnOptions(fixed, key + 'End'))
|
||||
])
|
||||
|
||||
export const makeNumericMinMax = <T extends unknown = any>(
|
||||
export const makeNumericMinMax = <T extends number>(
|
||||
title: ReactNode,
|
||||
key: string,
|
||||
key: Key,
|
||||
fixed: number,
|
||||
filters?: ColumnFilterItem[],
|
||||
filterDelegate?: (key: string | number) => FilterMethod<T>,
|
||||
renderDelegate?: RenderMethod<T>,
|
||||
filterDelegate?: FilterGenerator<T>,
|
||||
width?: string | number,
|
||||
) => makeGroupColumn(title, [
|
||||
makeNumericColumn<T>('мин', key + 'Min', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Min')),
|
||||
makeNumericColumn<T>('макс', key + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Max')),
|
||||
makeNumericColumn<T>('мин', key + 'Min', renderDelegate, filterDelegate, width, makeNumericColumnOptions(fixed, key + 'Min')),
|
||||
makeNumericColumn<T>('макс', key + 'Max', renderDelegate, filterDelegate, width, makeNumericColumnOptions(fixed, key + 'Max')),
|
||||
])
|
||||
|
||||
export const makeNumericAvgRange = <T extends number>(
|
||||
title: ReactNode,
|
||||
key: Key,
|
||||
fixed: number,
|
||||
renderDelegate?: RenderMethod<T>,
|
||||
filterDelegate?: FilterGenerator<T>,
|
||||
width?: string | number,
|
||||
) => makeGroupColumn(title, [
|
||||
makeNumericColumn<T>('мин', `${key}.min`, renderDelegate, filterDelegate, width, makeNumericColumnOptions(fixed, `${key}.min`)),
|
||||
makeNumericColumn<T>('сред', `${key}.avg`, renderDelegate, filterDelegate, width, makeNumericColumnOptions(fixed, `${key}.avg`)),
|
||||
makeNumericColumn<T>('макс', `${key}.max`, renderDelegate, filterDelegate, width, makeNumericColumnOptions(fixed, `${key}.max`)),
|
||||
])
|
||||
|
||||
export default makeNumericColumn
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
import { columnPropsOther, makeColumn } from '.'
|
||||
|
||||
export const makeColumnsPlanFact = (
|
||||
title: string | ReactNode,
|
||||
key: string | string[],
|
||||
columsOther?: columnPropsOther | [columnPropsOther, columnPropsOther],
|
||||
gruopOther?: any
|
||||
) => {
|
||||
let keyPlanLocal: string
|
||||
let keyFactLocal: string
|
||||
|
||||
if (key instanceof Array) {
|
||||
keyPlanLocal = key[0]
|
||||
keyFactLocal = key[1]
|
||||
} else {
|
||||
keyPlanLocal = key + 'Plan'
|
||||
keyFactLocal = key + 'Fact'
|
||||
}
|
||||
|
||||
let columsOtherLocal : any[2]
|
||||
if (columsOther instanceof Array)
|
||||
columsOtherLocal = [columsOther[0], columsOther[1]]
|
||||
else
|
||||
columsOtherLocal = [columsOther, columsOther]
|
||||
|
||||
return {
|
||||
title: title,
|
||||
...gruopOther,
|
||||
children: [
|
||||
makeColumn('план', keyPlanLocal, columsOtherLocal[0]),
|
||||
makeColumn('факт', keyFactLocal, columsOtherLocal[1]),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default makeColumnsPlanFact
|
||||
@ -1,21 +1,31 @@
|
||||
import { Select, SelectProps } from 'antd'
|
||||
import { DefaultOptionType, SelectValue } from 'antd/lib/select'
|
||||
import { Key, ReactNode, useMemo } from 'react'
|
||||
|
||||
import { columnPropsOther, makeColumn } from '.'
|
||||
import { ColumnProps, makeColumn } from '.'
|
||||
|
||||
export const makeSelectColumn = <T extends unknown = string>(
|
||||
title: string,
|
||||
dataIndex: string,
|
||||
options: DefaultOptionType[],
|
||||
const findOption = <T extends DefaultOptionType>(value: any, options: T[] | undefined) =>
|
||||
options?.find((option) => String(option?.value) === String(value))
|
||||
|
||||
const SelectWrapper = ({ value, options, ...other }: SelectProps) => {
|
||||
const selectValue = useMemo(() => findOption(value, options)?.label, [value, options])
|
||||
return <Select value={selectValue} options={options} {...other} />
|
||||
}
|
||||
|
||||
export const makeSelectColumn = <T extends DefaultOptionType>(
|
||||
title: ReactNode,
|
||||
key: Key,
|
||||
options: T[],
|
||||
defaultValue?: T,
|
||||
other?: columnPropsOther,
|
||||
other?: ColumnProps<T>,
|
||||
selectOther?: SelectProps<SelectValue>
|
||||
) => makeColumn(title, dataIndex, {
|
||||
) => makeColumn(title, key, {
|
||||
editable: true,
|
||||
...other,
|
||||
input: <Select options={options} {...selectOther}/>,
|
||||
render: (value) => {
|
||||
const item = options?.find(option => String(option?.value) === String(value))
|
||||
return other?.render?.(item?.value) ?? item?.label ?? defaultValue ?? value ?? '--'
|
||||
input: <SelectWrapper options={options} {...selectOther}/>,
|
||||
render: (value, dataset, index) => {
|
||||
const item = findOption(value, options)
|
||||
return other?.render?.(item, dataset, index) ?? item?.label ?? defaultValue?.label ?? value?.label ?? '--'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import { Select, SelectProps, Tag } from 'antd'
|
||||
|
||||
import type { OmitExtends } from '@utils/types'
|
||||
|
||||
import { columnPropsOther, DataType, makeColumn } from '.'
|
||||
import { ColumnProps, DataType, makeColumn } from '.'
|
||||
|
||||
export type TagInputProps<T extends DataType> = OmitExtends<{
|
||||
options: T[],
|
||||
@ -59,14 +59,15 @@ export const makeTagColumn = <T extends DataType>(
|
||||
options: T[],
|
||||
value_key: keyof DataType,
|
||||
label_key: keyof DataType,
|
||||
other?: columnPropsOther,
|
||||
other?: ColumnProps,
|
||||
tagOther?: TagInputProps<T>
|
||||
) => {
|
||||
const InputComponent = makeTagInput<T>(value_key, label_key)
|
||||
|
||||
return makeColumn(title, dataIndex, {
|
||||
editable: true,
|
||||
...other,
|
||||
render: (item?: T[]) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm) ?? elm[label_key]}</Tag>) ?? '-',
|
||||
render: (item: T[] | undefined, dataset, index) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm, dataset, index) ?? elm[label_key]}</Tag>) ?? '-',
|
||||
input: <InputComponent {...tagOther} options={options} />,
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,8 +1,32 @@
|
||||
import { Tooltip } from 'antd'
|
||||
import { ColumnFilterItem } from 'antd/lib/table/interface'
|
||||
import { ReactNode } from 'react'
|
||||
import { Key, ReactNode } from 'react'
|
||||
|
||||
import makeColumn, { columnPropsOther, DataType, RenderMethod, SorterMethod } from '.'
|
||||
import { makeStringSorter } from '../sorters'
|
||||
import { ColumnProps, makeColumn, DataType, RenderMethod, SorterMethod } from '.'
|
||||
import { getObjectByDeepKey } from '../Table'
|
||||
|
||||
export const makeStringSorter = <T extends string>(key: Key): SorterMethod<T> => (a, b) => {
|
||||
const vA = a ? getObjectByDeepKey(key, a) : null
|
||||
const vB = b ? getObjectByDeepKey(key, b) : null
|
||||
|
||||
if (!vA && !vB) return 0
|
||||
if (!vA) return 1
|
||||
if (!vB) return -1
|
||||
|
||||
return String(vA).localeCompare(String(vB))
|
||||
}
|
||||
|
||||
export const makeTextRender = <T extends string>(def = '---', stringCutter?: (text: string) => string) => (value: T) => {
|
||||
if (!value) return def
|
||||
if (stringCutter) {
|
||||
return (
|
||||
<Tooltip title={value}>
|
||||
{stringCutter(value)}
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
export const makeFilterTextMatch = <T extends unknown>(key: keyof DataType<T>) =>
|
||||
(filterValue: T, dataItem: DataType<T>) => dataItem[key] === filterValue
|
||||
@ -13,12 +37,13 @@ export const makeTextColumn = <T extends unknown = any>(
|
||||
filters?: ColumnFilterItem[],
|
||||
sorter?: SorterMethod<T>,
|
||||
render?: RenderMethod<T>,
|
||||
other?: columnPropsOther
|
||||
other?: ColumnProps
|
||||
) => makeColumn(title, key, {
|
||||
editable: true,
|
||||
filters,
|
||||
onFilter: filters ? makeFilterTextMatch(key) : undefined,
|
||||
sorter: sorter ?? makeStringSorter(key),
|
||||
render: render,
|
||||
sorter: sorter || makeStringSorter(key),
|
||||
render: render || makeTextRender(),
|
||||
...other
|
||||
})
|
||||
|
||||
|
||||
@ -1,25 +1,37 @@
|
||||
import { ReactNode } from 'react'
|
||||
import { Key, ReactNode } from 'react'
|
||||
|
||||
import { formatTime } from '@utils'
|
||||
import { makeColumn, ColumnProps, SorterMethod } from '.'
|
||||
import { TimePickerWrapper, TimePickerWrapperProps, getObjectByDeepKey } from '..'
|
||||
import { formatTime, timeToMoment } from '@utils'
|
||||
import { TimeDto } from '@api'
|
||||
|
||||
import { makeColumn, columnPropsOther } from '.'
|
||||
import { makeTimeSorter, TimePickerWrapper, TimePickerWrapperProps } from '..'
|
||||
export const makeTimeSorter = <T extends TimeDto>(key: Key): SorterMethod<T> => (a, b) => {
|
||||
const vA = a ? getObjectByDeepKey(key, a) : null
|
||||
const vB = b? getObjectByDeepKey(key, b) : null
|
||||
|
||||
export const makeTimeColumn = (
|
||||
if (!vA && !vB) return 0
|
||||
if (!vA) return 1
|
||||
if (!vB) return -1
|
||||
|
||||
return timeToMoment(vA).diff(timeToMoment(vB))
|
||||
}
|
||||
|
||||
export const makeTimeColumn = <T extends TimeDto>(
|
||||
title: ReactNode,
|
||||
key: string,
|
||||
utc?: boolean,
|
||||
format?: string,
|
||||
other?: columnPropsOther,
|
||||
other?: ColumnProps,
|
||||
pickerOther?: TimePickerWrapperProps,
|
||||
) => makeColumn(title, key, {
|
||||
) => makeColumn<T>(title, key, {
|
||||
editable: true,
|
||||
...other,
|
||||
render: (time) => (
|
||||
<div className={'text-align-r-container'}>
|
||||
<span>{formatTime(time, utc, format) ?? '-'}</span>
|
||||
</div>
|
||||
),
|
||||
sorter: makeTimeSorter(key),
|
||||
sorter: makeTimeSorter<T>(key),
|
||||
input: <TimePickerWrapper isUTC={utc} {...pickerOther} />,
|
||||
})
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
|
||||
import { Key, memo, ReactNode, useCallback, useEffect, useState } from 'react'
|
||||
import { Select, SelectProps } from 'antd'
|
||||
|
||||
import { findTimezoneId, rawTimezones, TimezoneId } from '@utils'
|
||||
import type { OmitExtends } from '@utils/types'
|
||||
import { SimpleTimezoneDto } from '@api'
|
||||
|
||||
import { columnPropsOther, makeColumn } from '.'
|
||||
import { ColumnProps, makeColumn } from '.'
|
||||
|
||||
const makeTimezoneLabel = (id?: string | null, hours?: number) =>
|
||||
`UTC${hours && hours > 0 ? '+':''}${hours ? ('0' + hours).slice(-2) : '~??'} :: ${id ?? 'Неизвестно'}`
|
||||
@ -18,7 +18,7 @@ export const timezoneOptions = Object
|
||||
value: id,
|
||||
}))
|
||||
|
||||
export const makeTimezoneRenderer = () => (timezone?: SimpleTimezoneDto) => {
|
||||
export const makeTimezoneRender = () => (timezone?: SimpleTimezoneDto) => {
|
||||
if (!timezone) return 'UTC~?? :: Неизвестно'
|
||||
const { hours, timezoneId } = timezone
|
||||
return makeTimezoneLabel(timezoneId, hours)
|
||||
@ -46,17 +46,17 @@ export const TimezoneSelect = memo<TimezoneSelectProps>(({ onChange, value, defa
|
||||
return (<Select {...other} onChange={onValueChanged} value={id} defaultValue={defaultTimezone} />)
|
||||
})
|
||||
|
||||
export const makeTimezoneColumn = (
|
||||
export const makeTimezoneColumn = <T extends SimpleTimezoneDto>(
|
||||
title: ReactNode = 'Зона',
|
||||
key: string = 'timezone',
|
||||
defaultValue?: SimpleTimezoneDto,
|
||||
key: Key = 'timezone',
|
||||
defaultValue?: T,
|
||||
allowClear: boolean = true,
|
||||
other?: columnPropsOther,
|
||||
other?: ColumnProps<T>,
|
||||
selectOther?: TimezoneSelectProps
|
||||
) => makeColumn(title, key, {
|
||||
width: 100,
|
||||
editable: true,
|
||||
render: makeTimezoneRenderer(),
|
||||
render: makeTimezoneRender(),
|
||||
input: (
|
||||
<TimezoneSelect
|
||||
key={key}
|
||||
|
||||
@ -6,8 +6,11 @@ import moment, { Moment } from 'moment'
|
||||
import { defaultFormat } from '@utils'
|
||||
|
||||
export type DatePickerWrapperProps = PickerDateProps<Moment> & {
|
||||
/** Значение селектора */
|
||||
value?: Moment,
|
||||
/** Метод вызывается при изменений даты */
|
||||
onChange?: (date: Moment | null) => any
|
||||
/** Конвертировать ли значение в UTC */
|
||||
isUTC?: boolean
|
||||
}
|
||||
|
||||
|
||||
@ -9,31 +9,41 @@ import { defaultFormat } from '@utils'
|
||||
const { RangePicker } = DatePicker
|
||||
|
||||
export type DateRangeWrapperProps = RangePickerSharedProps<Moment> & {
|
||||
value?: RangeValue<Moment>,
|
||||
/** Значение селектора в виде массива из 2 элементов (от, до) */
|
||||
value?: RangeValue<Moment>
|
||||
/** Конвертировать ли значения в UTC */
|
||||
isUTC?: boolean
|
||||
/** Разрешить сброс значения селектора */
|
||||
allowClear?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Подготавливает значения к передаче в селектор
|
||||
*
|
||||
* @param value Массиз из 2 дат
|
||||
* @param isUTC Конвертировать ли значения в UTC
|
||||
* @returns Подготовленные даты
|
||||
*/
|
||||
const normalizeDates = (value?: RangeValue<Moment>, isUTC?: boolean): RangeValue<Moment> => {
|
||||
if (!value) return [null, null]
|
||||
return [
|
||||
value[0] ? (isUTC ? moment.utc(value[0]).local() : moment(value[0])) : null,
|
||||
value[1] ? (isUTC ? moment.utc(value[1]).local() : moment(value[1])) : null,
|
||||
]
|
||||
if (!value) return [null, null]
|
||||
return [
|
||||
value[0] ? (isUTC ? moment.utc(value[0]).local() : moment(value[0])) : null,
|
||||
value[1] ? (isUTC ? moment.utc(value[1]).local() : moment(value[1])) : null,
|
||||
]
|
||||
}
|
||||
|
||||
export const DateRangeWrapper = memo<DateRangeWrapperProps>(({ value, isUTC, allowClear = false, ...other }) => (
|
||||
<RangePicker
|
||||
showTime
|
||||
allowClear={allowClear}
|
||||
format={defaultFormat}
|
||||
defaultValue={[
|
||||
moment().subtract(1, 'days').startOf('day'),
|
||||
moment().startOf('day'),
|
||||
]}
|
||||
value={normalizeDates(value)}
|
||||
{...other}
|
||||
/>
|
||||
export const DateRangeWrapper = memo<DateRangeWrapperProps>(({ value, isUTC, allowClear, ...other }) => (
|
||||
<RangePicker
|
||||
showTime
|
||||
allowClear={allowClear}
|
||||
format={defaultFormat}
|
||||
defaultValue={[
|
||||
moment().subtract(1, 'days').startOf('day'),
|
||||
moment().startOf('day'),
|
||||
]}
|
||||
value={normalizeDates(value, isUTC)}
|
||||
{...other}
|
||||
/>
|
||||
))
|
||||
|
||||
export default DateRangeWrapper
|
||||
|
||||
@ -1,44 +1,54 @@
|
||||
import { memo, ReactNode } from 'react'
|
||||
import { Key, memo, ReactNode, useMemo } from 'react'
|
||||
import { Rule } from 'rc-field-form/lib/interface'
|
||||
import { Form, Input } from 'antd'
|
||||
import { NamePath, Rule } from 'rc-field-form/lib/interface'
|
||||
|
||||
type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
|
||||
editing?: boolean
|
||||
dataIndex?: NamePath
|
||||
input?: ReactNode
|
||||
isRequired?: boolean
|
||||
title: string
|
||||
formItemClass?: string
|
||||
formItemRules?: Rule[]
|
||||
children: ReactNode
|
||||
initialValue: any
|
||||
export type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
|
||||
editing?: boolean
|
||||
dataIndex?: Key
|
||||
input?: ReactNode
|
||||
isRequired?: boolean
|
||||
formItemClass?: string
|
||||
formItemRules?: Rule[]
|
||||
children: ReactNode
|
||||
initialValue: any
|
||||
}
|
||||
|
||||
const itemStyle = { margin: 0 }
|
||||
|
||||
export const EditableCell = memo<EditableCellProps>(({
|
||||
editing,
|
||||
dataIndex,
|
||||
input,
|
||||
isRequired,
|
||||
formItemClass,
|
||||
formItemRules,
|
||||
children,
|
||||
initialValue,
|
||||
...other
|
||||
}) => (
|
||||
<td style={editing ? { padding: 0 } : undefined} {...other}>
|
||||
{!editing ? children : (
|
||||
<Form.Item
|
||||
name={dataIndex}
|
||||
style={{ margin: 0 }}
|
||||
className={formItemClass}
|
||||
rules={formItemRules ?? [{
|
||||
required: isRequired,
|
||||
message: `Это обязательное поле!`,
|
||||
}]}
|
||||
initialValue={initialValue}
|
||||
>
|
||||
{input ?? <Input/>}
|
||||
</Form.Item>
|
||||
)}
|
||||
</td>
|
||||
))
|
||||
editing,
|
||||
dataIndex,
|
||||
input,
|
||||
isRequired,
|
||||
formItemClass,
|
||||
formItemRules,
|
||||
children,
|
||||
initialValue,
|
||||
...other
|
||||
}) => {
|
||||
const rules = useMemo(() => formItemRules || [{
|
||||
required: isRequired,
|
||||
message: `Это обязательное поле!`,
|
||||
}], [formItemRules, isRequired])
|
||||
|
||||
const name = useMemo(() => dataIndex ? String(dataIndex).split('.') : undefined, [dataIndex])
|
||||
const tdStyle = useMemo(() => editing ? { padding: 0 } : undefined, [editing])
|
||||
|
||||
const edititngItem = useMemo(() => (
|
||||
<Form.Item
|
||||
name={name}
|
||||
style={itemStyle}
|
||||
className={formItemClass}
|
||||
rules={rules}
|
||||
initialValue={initialValue}
|
||||
>
|
||||
{input ?? <Input />}
|
||||
</Form.Item>
|
||||
), [name, rules, formItemClass, initialValue, input])
|
||||
|
||||
return (
|
||||
<td style={tdStyle} {...other}>
|
||||
{editing ? edititngItem : children}
|
||||
</td>
|
||||
)
|
||||
})
|
||||
|
||||
@ -221,9 +221,7 @@ export const EditableTable = memo(({
|
||||
|
||||
const mergedColumns = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
|
||||
|
||||
useEffect(() => {
|
||||
setData(tryAddKeys(dataSource))
|
||||
}, [dataSource])
|
||||
useEffect(() => setData(tryAddKeys(dataSource)), [dataSource])
|
||||
|
||||
return (
|
||||
<Form form={form}>
|
||||
|
||||
@ -1,37 +1,96 @@
|
||||
import { memo, useCallback, useEffect, useState } from 'react'
|
||||
import { Key, memo, useCallback, useEffect, useState } from 'react'
|
||||
import { ColumnGroupType, ColumnType } from 'antd/lib/table'
|
||||
import { Table as RawTable, TableProps } from 'antd'
|
||||
import { Table as RawTable, TableProps as RawTableProps } from 'antd'
|
||||
|
||||
import { RenderMethod } from './Columns'
|
||||
import { tryAddKeys } from './EditableTable'
|
||||
import TableSettingsChanger from './TableSettingsChanger'
|
||||
import type { OmitExtends } from '@utils/types'
|
||||
import { applyTableSettings, getTableSettings, setTableSettings, TableColumnSettings, TableSettings } from '@utils'
|
||||
|
||||
import TableSettingsChanger from './TableSettingsChanger'
|
||||
import { tryAddKeys } from './EditableTable'
|
||||
|
||||
import '@styles/index.css'
|
||||
|
||||
export type BaseTableColumn<T> = ColumnGroupType<T> | ColumnType<T>
|
||||
export type TableColumns<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>[]
|
||||
export type TableColumn<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>
|
||||
export type TableColumns<T> = TableColumn<T>[]
|
||||
|
||||
export type TableContainer<T> = TableProps<T> & {
|
||||
columns: TableColumns<T>
|
||||
export type TableProps<T> = RawTableProps<T> & {
|
||||
/** Массив колонок таблицы с настройками (описаны в `TableColumnSettings`) */
|
||||
columns: TableColumn<T>[]
|
||||
/** Название таблицы для сохранения настроек */
|
||||
tableName?: string
|
||||
/** Отображать ли кнопку настроек */
|
||||
showSettingsChanger?: boolean
|
||||
}
|
||||
|
||||
const _Table = <T extends object>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) => {
|
||||
const [newColumns, setNewColumns] = useState<TableColumns<T>>([])
|
||||
export interface DataSet<T, D = any> {
|
||||
[k: Key]: DataSet<T, D> | T | D
|
||||
}
|
||||
|
||||
/**
|
||||
* Получить значение из объекта по составному ключу
|
||||
*
|
||||
* Составной ключ имеет вид: `<поле 1>[.<поле 2>...]`
|
||||
*
|
||||
* @param key Составной ключ
|
||||
* @param data Объект из которого будет полученно значение
|
||||
* @returns Значение, найденное по ключу, либо `undefined`
|
||||
*/
|
||||
export const getObjectByDeepKey = <T,>(key: Key | undefined, data: DataSet<T>): T | undefined => {
|
||||
if (!key) return undefined
|
||||
const parts = String(key).split('.')
|
||||
let out = data
|
||||
for (let i = 0; i < parts.length && out; i++) {
|
||||
const key = parts[i]
|
||||
if (!(key in out)) return undefined // Если ключ не найдем, считаем значение null
|
||||
out = out[key] as DataSet<T> // Углубляемся внутрь объекта
|
||||
}
|
||||
return out as T
|
||||
}
|
||||
|
||||
/**
|
||||
* Фабрика обёрток render-функций ячеек с поддержкой составных ключей
|
||||
* @param key Составной ключ
|
||||
* @param render Стандартная render-функция
|
||||
* @returns Обёрнутая render-функция
|
||||
*/
|
||||
export const makeColumnRenderWrapper = <T extends DataSet<any>>(key: Key | undefined, render: RenderMethod<T, T> | undefined): RenderMethod<T, T> =>
|
||||
(_: any, dataset: T, index: number) => {
|
||||
const renderFunc: RenderMethod<T, T> = typeof render === 'function' ? render : (record) => String(record)
|
||||
return renderFunc(getObjectByDeepKey<T>(key, dataset), dataset, index)
|
||||
}
|
||||
|
||||
/**
|
||||
* Применяет необходимые обёртки ко всем столбцам таблицы
|
||||
* @param columns Исходные столбцы
|
||||
* @returns Обёрнутые столбцы
|
||||
*/
|
||||
const applyColumnWrappers = <T extends DataSet<any>>(columns: TableColumns<T>): TableColumns<T> => columns.map((column) => {
|
||||
if ('children' in column) {
|
||||
return {
|
||||
...column,
|
||||
children: applyColumnWrappers(column.children),
|
||||
}
|
||||
}
|
||||
return {
|
||||
...column,
|
||||
render: makeColumnRenderWrapper<T>(column.key, column.render),
|
||||
}
|
||||
})
|
||||
|
||||
function _Table<T extends DataSet<any>>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableProps<T>) {
|
||||
const [newColumns, setNewColumns] = useState<TableColumn<T>[]>([])
|
||||
const [settings, setSettings] = useState<TableSettings>({})
|
||||
|
||||
const onSettingsChanged = useCallback((settings?: TableSettings | null) => {
|
||||
if (tableName)
|
||||
setTableSettings(tableName, settings)
|
||||
setSettings(settings ?? {})
|
||||
setSettings(settings || {})
|
||||
}, [tableName])
|
||||
|
||||
useEffect(() => setSettings(tableName ? getTableSettings(tableName) : {}), [tableName])
|
||||
useEffect(() => setNewColumns(() => {
|
||||
const newColumns = applyTableSettings(columns, settings)
|
||||
const newColumns = applyTableSettings(applyColumnWrappers(columns), settings)
|
||||
if (tableName && showSettingsChanger) {
|
||||
const oldTitle = newColumns[0].title
|
||||
newColumns[0].title = (props) => (
|
||||
@ -53,6 +112,13 @@ const _Table = <T extends object>({ columns, dataSource, tableName, showSettings
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Обёртка над компонентом таблицы AntD
|
||||
*
|
||||
* Особенности:
|
||||
* * Поддержка составных ключей столбцов
|
||||
* * Работа с настройками столбцов таблицы
|
||||
*/
|
||||
export const Table = memo(_Table) as typeof _Table
|
||||
|
||||
export default Table
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { memo, useCallback, useEffect, useState } from 'react'
|
||||
import { ColumnsType } from 'antd/lib/table'
|
||||
import { Button, Modal, Switch, Table } from 'antd'
|
||||
import { Button, Modal, Switch } from 'antd'
|
||||
import { SettingOutlined } from '@ant-design/icons'
|
||||
|
||||
import { TableColumnSettings, makeTableSettings, mergeTableSettings, TableSettings } from '@utils'
|
||||
import { TableColumns } from './Table'
|
||||
import { makeColumn } from '.'
|
||||
import { Table, TableColumns } from './Table'
|
||||
import { makeColumn, makeTextColumn } from '.'
|
||||
|
||||
const parseSettings = <T extends object>(columns?: TableColumns<T>, settings?: TableSettings | null): TableColumnSettings[] => {
|
||||
const newSettings = mergeTableSettings(makeTableSettings(columns ?? []), settings ?? {})
|
||||
@ -46,8 +46,8 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
|
||||
|
||||
useEffect(() => {
|
||||
setTableColumns([
|
||||
makeColumn('Название', 'title'),
|
||||
makeColumn(null, 'visible', {
|
||||
makeTextColumn<string>('Название', 'title'),
|
||||
makeColumn<any>(null, 'visible', {
|
||||
title: () => (
|
||||
<>
|
||||
Показать
|
||||
@ -56,7 +56,7 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
render: (visible: boolean, _?: TableColumnSettings, index: number = NaN) => (
|
||||
render: (visible, _, index = NaN) => (
|
||||
<Switch
|
||||
checked={visible}
|
||||
checkedChildren={'Отображён'}
|
||||
|
||||
@ -6,8 +6,11 @@ import { defaultTimeFormat, momentToTime, timeToMoment } from '@utils'
|
||||
import { TimeDto } from '@api'
|
||||
|
||||
export type TimePickerWrapperProps = Omit<Omit<TimePickerProps, 'value'>, 'onChange'> & {
|
||||
/** Текущее значение */
|
||||
value?: TimeDto,
|
||||
/** Метод вызывается при изменений времени */
|
||||
onChange?: (date: TimeDto | null) => any
|
||||
/** Конвертировать ли время в UTC */
|
||||
isUTC?: boolean
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
export * from './sorters'
|
||||
export * from './EditableTable'
|
||||
export * from './DatePickerWrapper'
|
||||
export * from './TimePickerWrapper'
|
||||
@ -18,6 +17,13 @@ export type PaginationContainer<T> = {
|
||||
items?: T[] | null
|
||||
}
|
||||
|
||||
/**
|
||||
* Генерирует объект пагинации для компонента `Table` из данных от сервисов
|
||||
*
|
||||
* @param сontainer данные от сервиса
|
||||
* @param other Дополнительные поля (передаются в объект напрямую в приоритете)
|
||||
* @returns Объект пагинации
|
||||
*/
|
||||
export const makePaginationObject = <T, M extends object>(сontainer: PaginationContainer<T>, other: M) => ({
|
||||
...other,
|
||||
pageSize: сontainer.take,
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
import { timeToMoment } from '@utils'
|
||||
import { isRawDate } from '@utils'
|
||||
import { TimeDto } from '@api'
|
||||
|
||||
import { DataType } from './Columns'
|
||||
import { CompareFn } from 'antd/lib/table/interface'
|
||||
|
||||
export const makeNumericSorter = <T extends unknown>(key: keyof DataType<T>): CompareFn<DataType<T>> =>
|
||||
(a: DataType<T>, b: DataType<T>) => Number(a[key]) - Number(b[key])
|
||||
|
||||
export const makeNumericObjSorter = (key: [string, string]) =>
|
||||
(a: DataType, b: DataType) => Number(a[key[0]][key[1]]) - Number(b[key[0]][key[1]])
|
||||
|
||||
export const makeStringSorter = <T extends unknown>(key: keyof DataType<T>) => (a?: DataType<T> | null, b?: DataType<T> | null) => {
|
||||
if (!a && !b) return 0
|
||||
if (!a) return 1
|
||||
if (!b) return -1
|
||||
|
||||
return String(a[key]).localeCompare(String(b[key]))
|
||||
}
|
||||
|
||||
export const makeDateSorter = <T extends unknown>(key: keyof DataType<T>) => (a: DataType<T>, b: DataType<T>) => {
|
||||
const adate = a[key]
|
||||
const bdate = b[key]
|
||||
if (!isRawDate(adate) || !isRawDate(bdate))
|
||||
throw new Error('Date column contains not date formatted string(s)')
|
||||
|
||||
const date = new Date(adate)
|
||||
|
||||
return date.getTime() - new Date(bdate).getTime()
|
||||
}
|
||||
|
||||
export const makeTimeSorter = <T extends TimeDto>(key: keyof DataType<T>) => (a: DataType<T>, b: DataType<T>) => {
|
||||
const elma = a[key]
|
||||
const elmb = b[key]
|
||||
|
||||
if (!elma && !elmb) return 0
|
||||
if (!elma) return 1
|
||||
if (!elmb) return -1
|
||||
|
||||
return timeToMoment(elma).diff(timeToMoment(elmb))
|
||||
}
|
||||
@ -10,7 +10,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { isURLAvailable, removeUser } from '@utils'
|
||||
import { AuthService } from '@api'
|
||||
|
||||
import '@styles/user_menu.less'
|
||||
import '@styles/components/user_menu.less'
|
||||
|
||||
export type UserMenuProps = DrawerProps & {
|
||||
isAdmin?: boolean
|
||||
|
||||
@ -36,7 +36,7 @@ import type {
|
||||
ChartTicks
|
||||
} from './types'
|
||||
|
||||
import '@styles/d3.less'
|
||||
import '@styles/components/d3.less'
|
||||
|
||||
const defaultOffsets: ChartOffset = {
|
||||
top: 10,
|
||||
|
||||
@ -4,10 +4,10 @@ import { Property } from 'csstype'
|
||||
import * as d3 from 'd3'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { usePartialProps } from '@utils'
|
||||
import { ChartOffset } from './types'
|
||||
|
||||
import '@styles/d3.less'
|
||||
import { usePartialProps } from '@asb/utils'
|
||||
import '@styles/components/d3.less'
|
||||
|
||||
export type PercentChartDataType = {
|
||||
name: string
|
||||
|
||||
@ -3,7 +3,7 @@ import * as d3 from 'd3'
|
||||
|
||||
import { ChartOffset } from './types'
|
||||
|
||||
import '@styles/d3.less'
|
||||
import '@styles/components/d3.less'
|
||||
|
||||
export type D3MouseState = {
|
||||
/** Позиция мыши по оси X */
|
||||
|
||||
@ -9,9 +9,9 @@ import { getChartIcon, isDev, usePartialProps } from '@utils'
|
||||
import { BaseDataType } from '../types'
|
||||
import { ChartGroup, ChartSizes } from './D3MonitoringCharts'
|
||||
|
||||
import '@styles/d3.less'
|
||||
import '@styles/components/d3.less'
|
||||
|
||||
type D3GroupRenderFunction<DataType extends BaseDataType> = (group: ChartGroup<DataType>, data: DataType[]) => ReactNode
|
||||
type D3GroupRenderFunction<DataType extends BaseDataType> = (group: ChartGroup<DataType>, data: DataType[], flowData: DataType[] | undefined) => ReactNode
|
||||
|
||||
export type D3HorizontalCursorSettings<DataType extends BaseDataType> = {
|
||||
width?: number
|
||||
@ -27,6 +27,7 @@ export type D3HorizontalCursorSettings<DataType extends BaseDataType> = {
|
||||
export type D3HorizontalCursorProps<DataType extends BaseDataType> = D3HorizontalCursorSettings<DataType> & {
|
||||
groups: ChartGroup<DataType>[]
|
||||
data: DataType[]
|
||||
flowData: DataType[] | undefined
|
||||
sizes: ChartSizes
|
||||
yAxis?: d3.ScaleTime<number, number>
|
||||
spaceBetweenGroups?: number
|
||||
@ -38,7 +39,7 @@ const defaultLineStyle: SVGProps<SVGLineElement> = {
|
||||
|
||||
const offsetY = 5
|
||||
|
||||
const makeDefaultRender = <DataType extends BaseDataType>(): D3GroupRenderFunction<DataType> => (group, data) => (
|
||||
const makeDefaultRender = <DataType extends BaseDataType>(): D3GroupRenderFunction<DataType> => (group, data, flowData) => (
|
||||
<>
|
||||
{data.length > 0 ? group.charts.map((chart) => {
|
||||
const xFormat = (d: number | Date) => chart.xAxis.format?.(d) ?? `${(+d).toFixed(2)} ${chart.xAxis.unit ?? ''}`
|
||||
@ -74,6 +75,7 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
|
||||
lineStyle: _lineStyle,
|
||||
|
||||
data,
|
||||
flowData,
|
||||
groups,
|
||||
sizes,
|
||||
yAxis,
|
||||
@ -167,7 +169,7 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
|
||||
return (date >= currentDate - limitInS) && (date <= currentDate + limitInS)
|
||||
})
|
||||
|
||||
const bodies = groups.map((group) => render(group, chartData))
|
||||
const bodies = groups.map((group) => render(group, chartData, flowData))
|
||||
|
||||
setTooltipBodies(bodies)
|
||||
}, [groups, data, yAxis, lineY, fixed, mouseState.visible])
|
||||
@ -190,7 +192,7 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
|
||||
>
|
||||
<div className={'tooltip-wrapper'}>
|
||||
<div className={`adaptive-tooltip tooltip ${position} ${className}`}
|
||||
style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
|
||||
style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
|
||||
>
|
||||
<div className={'tooltip-content'}>
|
||||
{tooltipBodies[i]}
|
||||
|
||||
@ -35,13 +35,14 @@ const roundTo = (v: number, to: number = 50) => {
|
||||
return (v > 0 ? Math.ceil : Math.round)(v / to) * to
|
||||
}
|
||||
|
||||
const getNear = (n: number) => {
|
||||
let k = 0
|
||||
for (let c = Math.abs(n); c >= 1; c /= 10) k++
|
||||
return Math.pow(10, k) * Math.sign(n)
|
||||
}
|
||||
|
||||
const calculateDomain = (mm: MinMax): Required<MinMax> => {
|
||||
let round = Math.abs((mm.max ?? 0) - (mm.min ?? 0))
|
||||
if (round < 10) round = 10
|
||||
else if (round < 100) round = roundTo(round, 10)
|
||||
else if (round < 1000) round = roundTo(round, 100)
|
||||
else if (round < 10000) round = roundTo(round, 1000)
|
||||
else round = 0
|
||||
const round = getNear(Math.abs((mm.max ?? 0) - (mm.min ?? 0))) || 10
|
||||
let min = roundTo(mm.min ?? 0, round)
|
||||
let max = roundTo(mm.max ?? round, round)
|
||||
if (round && Math.abs(min - max) < round) {
|
||||
@ -73,8 +74,8 @@ export type ChartGroup<DataType extends BaseDataType> = {
|
||||
}
|
||||
|
||||
const defaultOffsets: ChartOffset = {
|
||||
top: 10,
|
||||
bottom: 10,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 100,
|
||||
right: 20,
|
||||
}
|
||||
@ -115,6 +116,8 @@ export type D3MonitoringChartsProps<DataType extends BaseDataType> = Omit<React.
|
||||
loading?: boolean
|
||||
/** Массив отображаемых данных */
|
||||
data?: DataType[]
|
||||
/** Массив данных для прямоугольников */
|
||||
flowData?: DataType[]
|
||||
/** Отступы графика от края SVG */
|
||||
offset?: Partial<ChartOffset>
|
||||
/** Цвет фона в формате CSS-значения */
|
||||
@ -180,6 +183,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
loading = false,
|
||||
datasetGroups,
|
||||
data,
|
||||
flowData,
|
||||
plugins,
|
||||
offset: _offset,
|
||||
yAxis: _yAxisConfig,
|
||||
@ -193,6 +197,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
methods,
|
||||
|
||||
className = '',
|
||||
style,
|
||||
...other
|
||||
}: D3MonitoringChartsProps<DataType>) => {
|
||||
const [datasets, setDatasets, resetDatasets] = useUserSettings(chartName, datasetGroups)
|
||||
@ -241,11 +246,11 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
if (!data) return
|
||||
|
||||
const yAxis = d3.scaleTime()
|
||||
.domain([yDomain?.min ?? 0, yDomain?.max ?? 0])
|
||||
.domain([yDomain?.min || 0, yDomain?.max || 0])
|
||||
.range([0, sizes.chartsHeight])
|
||||
|
||||
return yAxis
|
||||
}, [groups, data, yDomain, sizes.chartsHeight])
|
||||
}, [groups, data, yDomain, sizes])
|
||||
|
||||
const chartDomains = useMemo(() => groups.map((group) => {
|
||||
const out: [string | number, ChartDomain][] = group.charts.map((chart) => {
|
||||
@ -462,7 +467,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
groups.forEach((group, i) => {
|
||||
group()
|
||||
.attr('transform', `translate(${sizes.groupLeft(group.key)}, 0)`)
|
||||
.attr('clip-path', `url(#chart-clip)`)
|
||||
.attr('clip-path', `url(#chart-group-clip)`)
|
||||
|
||||
group.charts.forEach((chart) => {
|
||||
chart()
|
||||
@ -491,7 +496,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
chartData = renderArea<DataType>(xAxis, yAxis, chart, chartData)
|
||||
break
|
||||
case 'rect_area':
|
||||
renderRectArea<DataType>(xAxis, yAxis, chart)
|
||||
renderRectArea<DataType>(xAxis, yAxis, chart, flowData)
|
||||
break
|
||||
default:
|
||||
break
|
||||
@ -505,7 +510,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
chart.afterDraw?.(chart)
|
||||
})
|
||||
})
|
||||
}, [data, groups, height, offset, sizes, chartDomains])
|
||||
}, [data, flowData, groups, height, offset, sizes, chartDomains, yAxis])
|
||||
|
||||
return (
|
||||
<LoaderPortal
|
||||
@ -513,6 +518,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
style={{
|
||||
width: givenWidth,
|
||||
height: givenHeight,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -528,7 +534,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
>
|
||||
<svg ref={setSvgRef} width={'100%'} height={'100%'}>
|
||||
<defs>
|
||||
<clipPath id={`chart-clip`}>
|
||||
<clipPath id={`chart-group-clip`}>
|
||||
{/* Сдвиг во все стороны на 1 px чтобы линии на краях было видно */}
|
||||
<rect x={-1} y={-1} width={sizes.groupWidth + 2} height={sizes.chartsHeight + 2} />
|
||||
</clipPath>
|
||||
@ -569,6 +575,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
|
||||
sizes={sizes}
|
||||
spaceBetweenGroups={spaceBetweenGroups}
|
||||
data={data}
|
||||
flowData={flowData}
|
||||
height={height}
|
||||
/>
|
||||
</D3MouseZone>
|
||||
|
||||
@ -92,6 +92,15 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
|
||||
const [ref, setRef] = useState<SVGGElement | null>(null)
|
||||
const [selected, setSelected] = useState<LimitChartData & { x: number, y: number, visible: boolean }>()
|
||||
|
||||
const selectedRegulator = useMemo(() => {
|
||||
if (!selected) return null
|
||||
const out = regulators[selected.id] || {
|
||||
label: `ID = ${selected.id}`,
|
||||
color: 'black',
|
||||
}
|
||||
return out
|
||||
}, [selected, regulators])
|
||||
|
||||
const data = useMemo(() => calcualteData(chartData), [chartData])
|
||||
|
||||
useEffect(() => {
|
||||
@ -105,7 +114,7 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
|
||||
.attr('width', width)
|
||||
.attr('height', (d) => Math.max(yAxis(d.dateEnd) - yAxis(d.dateStart), 1))
|
||||
.attr('y', (d) => yAxis(d.dateStart))
|
||||
.attr('fill', (d) => regulators[d.id].color)
|
||||
.attr('fill', (d) => regulators[d.id]?.color || 'black')
|
||||
.on('mouseover', (_, d) => {
|
||||
const y = yAxis(d.dateStart) - tooltipHeight
|
||||
setSelected({ ...d, y, x: -tooltipWidth - 10, visible: true })
|
||||
@ -130,14 +139,24 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
|
||||
|
||||
return (
|
||||
<g transform={`translate(${left}, ${top})`} stroke={'#333'} strokeWidth={1} fill={'none'}>
|
||||
<g ref={setRef} >
|
||||
<g className={'bars'} strokeWidth={0} />
|
||||
<defs>
|
||||
<clipPath id={`chart-limit-clip`}>
|
||||
{/* Сдвиг во все стороны на 1 px чтобы линии на краях было видно */}
|
||||
<rect x={0} y={0} width={width} height={height} />
|
||||
</clipPath>
|
||||
<clipPath id={`chart-limit-fill-clip`}>
|
||||
<rect x={-zoneWidth} y={0} width={zoneWidth} height={height} />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g ref={setRef}>
|
||||
<g className={'bars'} strokeWidth={0} clipPath={`url(#chart-limit-clip)`} />
|
||||
{selected && (
|
||||
<g
|
||||
style={opacityStyle}
|
||||
pointerEvents={'none'}
|
||||
strokeOpacity={0.4}
|
||||
stroke={regulators[selected.id].color}
|
||||
stroke={selectedRegulator?.color}
|
||||
clipPath={`url(#chart-limit-fill-clip)`}
|
||||
>
|
||||
<line x1={-zoneWidth} x2={0} y1={zoneY1} y2={zoneY1} />
|
||||
<line x1={-zoneWidth} x2={0} y1={zoneY2} y2={zoneY2} />
|
||||
@ -148,7 +167,7 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
|
||||
y={zoneY1}
|
||||
width={zoneWidth}
|
||||
height={zoneY2 - zoneY1}
|
||||
fill={regulators[selected.id].color}
|
||||
fill={selectedRegulator?.color}
|
||||
/>
|
||||
</g>
|
||||
)}
|
||||
@ -158,7 +177,7 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
|
||||
<foreignObject width={tooltipWidth} height={tooltipHeight} x={selected.x} y={selected.y} pointerEvents={'none'}>
|
||||
<div className={'tooltip bottom'} style={tooltipStyle}>
|
||||
<span>Ограничивающий параметр</span>
|
||||
<span>{regulators[selected.id].label}</span>
|
||||
<span>{selectedRegulator?.label}</span>
|
||||
<Grid style={{ margin: 0, padding: 0 }}>
|
||||
<GridItem row={1} col={1}>Начало:</GridItem>
|
||||
<GridItem row={1} col={2}>{formatDate(selected.dateStart)}</GridItem>
|
||||
|
||||
@ -6,7 +6,7 @@ import { usePartialProps } from '@utils'
|
||||
|
||||
import { wrapPlugin } from './base'
|
||||
|
||||
import '@styles/d3.less'
|
||||
import '@styles/components/d3.less'
|
||||
|
||||
export type D3CursorSettings = {
|
||||
/** Параметры стиля линии */
|
||||
|
||||
@ -8,7 +8,7 @@ import { BaseDataType, ChartRegistry } from '@components/d3/types'
|
||||
import { D3MouseState, useD3MouseZone } from '@components/d3/D3MouseZone'
|
||||
import { getTouchedElements, wrapPlugin } from './base'
|
||||
|
||||
import '@styles/d3.less'
|
||||
import '@styles/components/d3.less'
|
||||
|
||||
export type D3TooltipPosition = 'bottom' | 'top' | 'left' | 'right' | 'none'
|
||||
|
||||
|
||||
@ -6,7 +6,8 @@ import { appendTransition } from './base'
|
||||
export const renderRectArea = <DataType extends BaseDataType>(
|
||||
xAxis: (value: d3.NumberValue) => number,
|
||||
yAxis: (value: d3.NumberValue) => number,
|
||||
chart: ChartRegistry<DataType>
|
||||
chart: ChartRegistry<DataType>,
|
||||
data: DataType[] | undefined,
|
||||
) => {
|
||||
if (
|
||||
chart.type !== 'rect_area' ||
|
||||
@ -14,16 +15,18 @@ export const renderRectArea = <DataType extends BaseDataType>(
|
||||
!chart.maxXAccessor ||
|
||||
!chart.minYAccessor ||
|
||||
!chart.maxYAccessor ||
|
||||
!chart.data
|
||||
!data
|
||||
) return
|
||||
|
||||
const data = chart.data
|
||||
const xMin = getByAccessor(chart.minXAccessor)
|
||||
const xMax = getByAccessor(chart.maxXAccessor)
|
||||
const yMin = getByAccessor(chart.minYAccessor)
|
||||
const yMax = getByAccessor(chart.maxYAccessor)
|
||||
|
||||
chart().attr('fill', 'currentColor')
|
||||
chart()
|
||||
.attr('fill', 'currentColor')
|
||||
.attr('fill-opacity', '0.15')
|
||||
.attr('stroke-opacity', '0.3')
|
||||
|
||||
const rects = chart().selectAll<SVGRectElement, null>('rect').data(data)
|
||||
|
||||
@ -31,8 +34,8 @@ export const renderRectArea = <DataType extends BaseDataType>(
|
||||
rects.enter().append('rect')
|
||||
|
||||
appendTransition(chart().selectAll<SVGRectElement, Record<string, any>>('rect'), chart)
|
||||
.attr('x1', (d) => xAxis(xMin(d)))
|
||||
.attr('x2', (d) => xAxis(xMax(d)))
|
||||
.attr('y1', (d) => yAxis(yMin(d)))
|
||||
.attr('y2', (d) => yAxis(yMax(d)))
|
||||
.attr('x', (d) => xAxis(xMin(d)))
|
||||
.attr('y', (d) => yAxis(yMin(d)))
|
||||
.attr('width', (d) => xAxis(xMax(d)) - xAxis(xMin(d)))
|
||||
.attr('height', (d) => yAxis(yMax(d)) - yAxis(yMin(d)))
|
||||
}
|
||||
|
||||
35
src/components/outlets/DepositsOutlet.tsx
Normal file
35
src/components/outlets/DepositsOutlet.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
|
||||
import { DepositListContext } from '@asb/context'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { DepositDto, DepositService } from '@api'
|
||||
import { arrayOrDefault } from '@utils'
|
||||
|
||||
export const DepositsOutlet = memo(() => {
|
||||
const [deposits, setDeposits] = useState<DepositDto[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const deposits = await DepositService.getDeposits()
|
||||
setDeposits(arrayOrDefault(deposits))
|
||||
},
|
||||
setIsLoading,
|
||||
`Не удалось загрузить список кустов`,
|
||||
{ actionName: 'Получить список кустов' }
|
||||
)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<DepositListContext.Provider value={deposits}>
|
||||
<LoaderPortal show={isLoading}>
|
||||
<Outlet />
|
||||
</LoaderPortal>
|
||||
</DepositListContext.Provider>
|
||||
)
|
||||
})
|
||||
|
||||
export default DepositsOutlet
|
||||
@ -1 +1,2 @@
|
||||
export * from './DepositsOutlet'
|
||||
export * from './UserOutlet'
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import { Tag, TreeSelect } from 'antd'
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
|
||||
import { useDepositList } from '@asb/context'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { hasPermission } from '@utils'
|
||||
import { DepositService } from '@api'
|
||||
|
||||
export const getTreeData = async () => {
|
||||
const deposits = await DepositService.getDeposits()
|
||||
export const getTreeData = async (deposits) => {
|
||||
const wellsTree = deposits.map((deposit, dIdx) => ({
|
||||
title: deposit.caption,
|
||||
key: `0-${dIdx}`,
|
||||
@ -40,10 +39,12 @@ export const WellSelector = memo(({ value, onChange, treeData, treeLabels, ...ot
|
||||
const [wellsTree, setWellsTree] = useState([])
|
||||
const [wellLabels, setWellLabels] = useState([])
|
||||
|
||||
const deposits = useDepositList()
|
||||
|
||||
useEffect(() => {
|
||||
invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const wellsTree = treeData ?? await getTreeData()
|
||||
const wellsTree = treeData ?? await getTreeData(deposits)
|
||||
const labels = treeLabels ?? getTreeLabels(wellsTree)
|
||||
setWellsTree(wellsTree)
|
||||
setWellLabels(labels)
|
||||
@ -52,12 +53,13 @@ export const WellSelector = memo(({ value, onChange, treeData, treeLabels, ...ot
|
||||
'Не удалось загрузить список скважин',
|
||||
{ actionName: 'Получение списка скважин' }
|
||||
)
|
||||
}, [treeData, treeLabels])
|
||||
}, [deposits, treeData, treeLabels])
|
||||
|
||||
return (
|
||||
<TreeSelect
|
||||
multiple
|
||||
treeCheckable
|
||||
maxTagCount={'responsive'}
|
||||
showCheckedStrategy={TreeSelect.SHOW_CHILD}
|
||||
treeDefaultExpandAll
|
||||
treeData={wellsTree}
|
||||
|
||||
@ -1,41 +1,50 @@
|
||||
import { Button, Drawer, Skeleton, Tree, TreeDataNode, TreeProps, Typography } from 'antd'
|
||||
import { useState, useEffect, useCallback, memo, Key } from 'react'
|
||||
import { Drawer, Tree, TreeDataNode, TreeProps } from 'antd'
|
||||
import { useState, useEffect, useCallback, memo, Key, useMemo } from 'react'
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
|
||||
import { useDepositList } from '@asb/context'
|
||||
import { WellIcon, WellIconState } from '@components/icons'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { DepositService, DepositDto, WellDto } from '@api'
|
||||
import { DepositDto, WellDto } from '@api'
|
||||
import { isRawDate } from '@utils'
|
||||
|
||||
import { ReactComponent as DepositIcon } from '@images/DepositIcon.svg'
|
||||
import { ReactComponent as ClusterIcon } from '@images/ClusterIcon.svg'
|
||||
|
||||
import '@styles/wellTreeSelect.css'
|
||||
import '@styles/components/well_tree_select.css'
|
||||
|
||||
/**
|
||||
* Для поиска в URL текущего раздела по шаблону `/{type}/{id}`
|
||||
*
|
||||
* Если найдено совпадение может вернуть 1 или 2 группы соответственно
|
||||
*/
|
||||
const URL_REGEX = /^\/([^\/?#]+)(?:\/([^\/?#]+))?/
|
||||
|
||||
export const getWellState = (idState?: number): WellIconState => idState === 1 ? 'active' : 'unknown'
|
||||
export const checkIsWellOnline = (lastTelemetryDate: unknown): boolean =>
|
||||
isRawDate(lastTelemetryDate) && (Date.now() - +new Date(lastTelemetryDate) < 600_000)
|
||||
|
||||
const getKeyByUrl = (url?: string): [Key | null, string | null] => {
|
||||
const result = url?.match(/^\/([^\/]+)\/([^\/?]+)/) // pattern "/:type/:id"
|
||||
if (!result) return [null, null]
|
||||
return [result[0], result[1]]
|
||||
const getKeyByUrl = (url?: string): [Key | null, string | null, number | null] => {
|
||||
const result = url?.match(URL_REGEX) // pattern "/:type/:id"
|
||||
if (!result) return [null, null, null]
|
||||
return [result[0], result[1], result[2] && result[2] !== 'null' ? Number(result[2]) : null]
|
||||
}
|
||||
|
||||
const getLabel = (wellsTree: TreeDataNode[], value?: string): string | undefined => {
|
||||
const [url, type] = getKeyByUrl(value)
|
||||
const [url, type, key] = getKeyByUrl(value)
|
||||
if (!url) return
|
||||
let deposit: TreeDataNode | undefined
|
||||
let cluster: TreeDataNode | undefined
|
||||
let well: TreeDataNode | undefined
|
||||
switch (type) {
|
||||
case 'deposit':
|
||||
if (key === null) return 'Месторождение не выбрано'
|
||||
deposit = wellsTree.find((deposit) => deposit.key === url)
|
||||
if (deposit)
|
||||
return `${deposit.title}`
|
||||
return 'Ошибка! Месторождение не найдено!'
|
||||
|
||||
case 'cluster':
|
||||
if (key === null) return 'Куст не выбран'
|
||||
deposit = wellsTree.find((deposit) => (
|
||||
cluster = deposit.children?.find((cluster: TreeDataNode) => cluster.key === url)
|
||||
))
|
||||
@ -44,6 +53,7 @@ const getLabel = (wellsTree: TreeDataNode[], value?: string): string | undefined
|
||||
return 'Ошибка! Куст не найден!'
|
||||
|
||||
case 'well':
|
||||
if (key === null) return 'Скважина не выбрана'
|
||||
deposit = wellsTree.find((deposit) => (
|
||||
cluster = deposit.children?.find((cluster: TreeDataNode) => (
|
||||
well = cluster.children?.find((well: TreeDataNode) => well.key === url)
|
||||
@ -91,62 +101,44 @@ const getExpandKeys = (treeData: TreeDataNode[], depositKeys?: Key[] | boolean):
|
||||
return out
|
||||
}
|
||||
|
||||
const makeWellsTreeData = (deposits: DepositDto[]): TreeDataNode[] => deposits.map(deposit =>({
|
||||
title: deposit.caption,
|
||||
key: `/deposit/${deposit.id}`,
|
||||
value: `/deposit/${deposit.id}`,
|
||||
icon: <DepositIcon width={24} height={24}/>,
|
||||
children: deposit.clusters?.map(cluster => {
|
||||
const wells = cluster.wells ? cluster.wells.slice() : []
|
||||
wells.sort(sortWellsByActive)
|
||||
|
||||
return {
|
||||
title: cluster.caption,
|
||||
key: `/cluster/${cluster.id}`,
|
||||
value: `/cluster/${cluster.id}`,
|
||||
icon: <ClusterIcon width={24} height={24}/>,
|
||||
children: wells.map(well => ({
|
||||
title: well.caption,
|
||||
key: `/well/${well.id}`,
|
||||
value: `/well/${well.id}`,
|
||||
icon: <WellIcon
|
||||
width={24}
|
||||
height={24}
|
||||
state={getWellState(well.idState)}
|
||||
online={checkIsWellOnline(well.lastTelemetryDate)}
|
||||
/>
|
||||
})),
|
||||
}
|
||||
}),
|
||||
}))
|
||||
|
||||
export const WellTreeSelector = memo<WellTreeSelectorProps>(({ expand, current, onChange, onClose, open, ...other }) => {
|
||||
const [wellsTree, setWellsTree] = useState<TreeDataNode[]>([])
|
||||
const [showLoader, setShowLoader] = useState<boolean>(false)
|
||||
const [expanded, setExpanded] = useState<Key[]>([])
|
||||
const [selected, setSelected] = useState<Key[]>([])
|
||||
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const deposits = useDepositList()
|
||||
|
||||
useEffect(() => {
|
||||
if (current) setSelected([current])
|
||||
}, [current])
|
||||
|
||||
useEffect(() => {
|
||||
setExpanded((prev) => expand ? getExpandKeys(wellsTree, expand) : prev)
|
||||
}, [wellsTree, expand])
|
||||
|
||||
useEffect(() => {
|
||||
invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const deposits: Array<DepositDto> = await DepositService.getDeposits()
|
||||
const wellsTree: TreeDataNode[] = deposits.map(deposit =>({
|
||||
title: deposit.caption,
|
||||
key: `/deposit/${deposit.id}`,
|
||||
value: `/deposit/${deposit.id}`,
|
||||
icon: <DepositIcon width={24} height={24}/>,
|
||||
children: deposit.clusters?.map(cluster => {
|
||||
const wells = cluster.wells ? cluster.wells.slice() : []
|
||||
wells.sort(sortWellsByActive)
|
||||
|
||||
return {
|
||||
title: cluster.caption,
|
||||
key: `/cluster/${cluster.id}`,
|
||||
value: `/cluster/${cluster.id}`,
|
||||
icon: <ClusterIcon width={24} height={24}/>,
|
||||
children: wells.map(well => ({
|
||||
title: well.caption,
|
||||
key: `/well/${well.id}`,
|
||||
value: `/well/${well.id}`,
|
||||
icon: <WellIcon
|
||||
width={24}
|
||||
height={24}
|
||||
state={getWellState(well.idState)}
|
||||
online={checkIsWellOnline(well.lastTelemetryDate)}
|
||||
/>
|
||||
})),
|
||||
}
|
||||
}),
|
||||
}))
|
||||
setWellsTree(wellsTree)
|
||||
},
|
||||
setShowLoader,
|
||||
`Не удалось загрузить список скважин`,
|
||||
{ actionName: 'Получить список скважин' }
|
||||
)
|
||||
}, [])
|
||||
const wellsTree = useMemo(() => makeWellsTreeData(deposits), [deposits])
|
||||
|
||||
const onValueChange = useCallback((value?: string): void => {
|
||||
const key = getKeyByUrl(value)[0]
|
||||
@ -155,8 +147,8 @@ export const WellTreeSelector = memo<WellTreeSelectorProps>(({ expand, current,
|
||||
}, [wellsTree])
|
||||
|
||||
const onSelect = useCallback((value: Key[]): void => {
|
||||
const newRoot = /\/(\w+)\/\d+/.exec(String(value))
|
||||
const oldRoot = /\/(\w+)(?:\/\d+)?/.exec(location.pathname)
|
||||
const newRoot = URL_REGEX.exec(String(value))
|
||||
const oldRoot = URL_REGEX.exec(location.pathname)
|
||||
if (!newRoot || !oldRoot) return
|
||||
|
||||
let newPath = newRoot[0]
|
||||
@ -169,21 +161,27 @@ export const WellTreeSelector = memo<WellTreeSelectorProps>(({ expand, current,
|
||||
navigate(newPath, { state: { from: location.pathname }})
|
||||
}, [navigate, location])
|
||||
|
||||
useEffect(() => onValueChange(location.pathname), [onValueChange, location])
|
||||
useEffect(() => {
|
||||
if (current) setSelected([current])
|
||||
}, [current])
|
||||
|
||||
useEffect(() => {
|
||||
setExpanded((prev) => expand ? getExpandKeys(wellsTree, expand) : prev)
|
||||
}, [wellsTree, expand])
|
||||
|
||||
useEffect(() => onValueChange(location.pathname), [onValueChange, location.pathname])
|
||||
|
||||
return (
|
||||
<Drawer open={open} mask={false} onClose={onClose} title={'Список скважин'}>
|
||||
<Skeleton active loading={showLoader}>
|
||||
<Tree
|
||||
{...other}
|
||||
showIcon
|
||||
selectedKeys={selected}
|
||||
treeData={wellsTree}
|
||||
onSelect={onSelect}
|
||||
onExpand={setExpanded}
|
||||
expandedKeys={expanded}
|
||||
/>
|
||||
</Skeleton>
|
||||
<Tree
|
||||
{...other}
|
||||
showIcon
|
||||
selectedKeys={selected}
|
||||
treeData={wellsTree}
|
||||
onSelect={onSelect}
|
||||
onExpand={setExpanded}
|
||||
expandedKeys={expanded}
|
||||
/>
|
||||
</Drawer>
|
||||
)
|
||||
})
|
||||
|
||||
@ -9,6 +9,7 @@ export type CompanyViewProps = {
|
||||
company?: CompanyDto
|
||||
}
|
||||
|
||||
/** Компонент для отображения информации о компании */
|
||||
export const CompanyView = memo<CompanyViewProps>(({ company }) => company ? (
|
||||
<Tooltip title={
|
||||
<Grid style={{ columnGap: '8px' }}>
|
||||
|
||||
@ -8,6 +8,7 @@ export type PermissionViewProps = {
|
||||
info?: PermissionDto
|
||||
}
|
||||
|
||||
/** Компонент для отображения информации о разрешении */
|
||||
export const PermissionView = memo<PermissionViewProps>(({ info }) => info ? (
|
||||
<Tooltip overlayInnerStyle={{ width: '400px' }} title={
|
||||
<Grid>
|
||||
|
||||
@ -9,6 +9,7 @@ export type RoleViewProps = {
|
||||
role?: UserRoleDto
|
||||
}
|
||||
|
||||
/** Компонент для отображения информации о роли */
|
||||
export const RoleView = memo<RoleViewProps>(({ role }) => {
|
||||
if (!role) return ( <Tooltip title={'нет данных'}>-</Tooltip> )
|
||||
|
||||
|
||||
@ -19,6 +19,12 @@ export const lables: Record<string, string> = {
|
||||
spinPlcVersion: 'Версия Спин Мастер',
|
||||
}
|
||||
|
||||
/**
|
||||
* Строит название для телеметрии
|
||||
*
|
||||
* @param telemetry Объект телеметрии
|
||||
* @returns Название
|
||||
*/
|
||||
export const getTelemetryLabel = (telemetry?: TelemetryDto) =>
|
||||
`${telemetry?.id ?? '-'} / ${telemetry?.info?.deposit ?? '-'} / ${telemetry?.info?.cluster ?? '-'} / ${telemetry?.info?.well ?? '-'}`
|
||||
|
||||
@ -26,6 +32,7 @@ export type TelemetryViewProps = {
|
||||
telemetry?: TelemetryDto
|
||||
}
|
||||
|
||||
/** Компонент для отображения информации о телеметрии */
|
||||
export const TelemetryView = memo<TelemetryViewProps>(({ telemetry }) => telemetry?.info ? (
|
||||
<Tooltip
|
||||
overlayInnerStyle={{ width: '400px' }}
|
||||
|
||||
@ -10,6 +10,7 @@ export type UserViewProps = HTMLProps<HTMLSpanElement> & {
|
||||
user?: UserDto
|
||||
}
|
||||
|
||||
/** Компонент для отображения информации о пользователе */
|
||||
export const UserView = memo<UserViewProps>(({ user, ...other }) =>
|
||||
user ? (
|
||||
<Tooltip
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { memo } from 'react'
|
||||
import { DetailedHTMLProps, HTMLAttributes, memo } from 'react'
|
||||
import { Tooltip, TooltipProps } from 'antd'
|
||||
|
||||
import { Grid, GridItem } from '@components/Grid'
|
||||
@ -15,9 +15,19 @@ const wellState: Record<number, { enum: WellIconState, label: string }> = {
|
||||
|
||||
export type WellViewProps = TooltipProps & {
|
||||
well?: WellDto
|
||||
iconProps?: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
|
||||
labelProps?: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
|
||||
}
|
||||
|
||||
export const WellView = memo<WellViewProps>(({ well, ...other }) => well ? (
|
||||
/**
|
||||
* Получить название скважины
|
||||
* @param well Объект с данными скважины
|
||||
* @returns Название скважины
|
||||
*/
|
||||
export const getWellTitle = (well: WellDto) => `${well.deposit || '-'} / ${well.cluster || '-'} / ${well.caption || '-'}`
|
||||
|
||||
/** Компонент для отображения информации о скважине */
|
||||
export const WellView = memo<WellViewProps>(({ well, iconProps, labelProps, ...other }) => well ? (
|
||||
<Tooltip {...other} title={(
|
||||
<Grid style={{ columnGap: '8px' }}>
|
||||
<GridItem row={1} col={1}>Название:</GridItem>
|
||||
@ -47,10 +57,12 @@ export const WellView = memo<WellViewProps>(({ well, ...other }) => well ? (
|
||||
<GridItem row={8} col={2}>{well.id ?? '---'}</GridItem>
|
||||
</Grid>
|
||||
)}>
|
||||
<span role={'img'} style={{ marginRight: 8, lineHeight: 0, verticalAlign: '-0.25em' }}>
|
||||
<span role={'img'} style={{ marginRight: 8, lineHeight: 0, verticalAlign: '-0.25em' }} {...iconProps}>
|
||||
<WellIcon state={wellState[well.idState || 0].enum} width={'1em'} height={'1em'} />
|
||||
</span>
|
||||
{well.caption}
|
||||
<span {...labelProps}>
|
||||
{getWellTitle(well)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip title={'нет скважины'}>-</Tooltip>
|
||||
|
||||
@ -21,6 +21,7 @@ export type WirelineViewProps = TooltipProps & {
|
||||
buttonProps?: ButtonProps
|
||||
}
|
||||
|
||||
/** Компонент для отображения информации о талевом канате */
|
||||
export const WirelineView = memo<WirelineViewProps>(({ wireline, buttonProps, ...other }) => (
|
||||
<Tooltip
|
||||
{...other}
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
import { createContext, useContext, useEffect } from 'react'
|
||||
|
||||
import { LayoutPortalProps } from '@components/LayoutPortal'
|
||||
import { UserTokenDto, WellDto } from '@api'
|
||||
|
||||
/** Контекст текущей скважины */
|
||||
export const WellContext = createContext<[WellDto, (well: WellDto) => void]>([{}, () => {}])
|
||||
/** Контекст текущего корневого пути */
|
||||
export const RootPathContext = createContext<string>('/')
|
||||
/** Контекст текущего пользователя */
|
||||
export const UserContext = createContext<UserTokenDto>({})
|
||||
/** Контекст метода редактирования параметров заголовка и меню */
|
||||
export const LayoutPropsContext = createContext<(props: LayoutPortalProps) => void>(() => {})
|
||||
/** Контекст для блока справа от крошек на страницах скважин и админки */
|
||||
export const TopRightBlockContext = createContext<(block: JSX.Element) => void>(() => {})
|
||||
|
||||
/**
|
||||
* Получить текущую скважину
|
||||
*
|
||||
* @returns Текущая скважина, либо `null`
|
||||
*/
|
||||
export const useWell = () => useContext(WellContext)
|
||||
|
||||
/**
|
||||
* Получить текущий корневой путь
|
||||
*
|
||||
* @returns Текущий корневой путь
|
||||
*/
|
||||
export const useRootPath = () => useContext(RootPathContext)
|
||||
|
||||
/**
|
||||
* Получить текущего пользователя
|
||||
*
|
||||
* @returns Текущий пользователь, либо `null`
|
||||
*/
|
||||
export const useUser = () => useContext(UserContext)
|
||||
|
||||
export const useTopRightBlock = () => useContext(TopRightBlockContext)
|
||||
|
||||
/**
|
||||
* Получить метод задания параметров заголовка и меню
|
||||
*
|
||||
* @returns Получить метод задания параметров заголовка и меню
|
||||
*/
|
||||
export const useLayoutProps = (props?: LayoutPortalProps) => {
|
||||
const setLayoutProps = useContext(LayoutPropsContext)
|
||||
|
||||
useEffect(() => {
|
||||
if (props) setLayoutProps(props)
|
||||
}, [setLayoutProps, props])
|
||||
|
||||
return setLayoutProps
|
||||
}
|
||||
23
src/context/deposit.ts
Normal file
23
src/context/deposit.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { createContext, useContext } from 'react'
|
||||
|
||||
import { DepositDto } from '@api'
|
||||
|
||||
/** Контекст текущего месторождения */
|
||||
export const DepositContext = createContext<DepositDto | null>(null)
|
||||
|
||||
/**
|
||||
* Получить текущее месторождение
|
||||
*
|
||||
* @returns Текущее месторождение, либо `null`
|
||||
*/
|
||||
export const useDeposit = () => useContext(DepositContext)
|
||||
|
||||
/** Контекст со списком месторождений */
|
||||
export const DepositListContext = createContext<DepositDto[]>([])
|
||||
|
||||
/**
|
||||
* Получить список скважин
|
||||
*
|
||||
* @returns Список скважин
|
||||
*/
|
||||
export const useDepositList = () => useContext(DepositListContext)
|
||||
5
src/context/index.ts
Normal file
5
src/context/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export * from './deposit'
|
||||
export * from './layout_props'
|
||||
export * from './root_path'
|
||||
export * from './user'
|
||||
export * from './well'
|
||||
31
src/context/layout_props.ts
Normal file
31
src/context/layout_props.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { createContext, useContext, useEffect } from 'react'
|
||||
|
||||
import { LayoutPortalProps } from '@components/LayoutPortal'
|
||||
|
||||
/** Контекст метода редактирования параметров заголовка и меню */
|
||||
export const LayoutPropsContext = createContext<(props: LayoutPortalProps) => void>(() => {})
|
||||
|
||||
/**
|
||||
* Получить метод задания параметров заголовка и меню
|
||||
*
|
||||
* @returns Получить метод задания параметров заголовка и меню
|
||||
*/
|
||||
export const useLayoutProps = (props?: LayoutPortalProps) => {
|
||||
const setLayoutProps = useContext(LayoutPropsContext)
|
||||
|
||||
useEffect(() => {
|
||||
if (props) setLayoutProps(props)
|
||||
}, [setLayoutProps, props])
|
||||
|
||||
return setLayoutProps
|
||||
}
|
||||
|
||||
/** Контекст для блока справа от крошек на страницах скважин и админки */
|
||||
export const TopRightBlockContext = createContext<(block: JSX.Element) => void>(() => {})
|
||||
|
||||
/**
|
||||
* Получить метод задания элементов справа от крошек
|
||||
*
|
||||
* @returns Метод задания элементов справа от крошек
|
||||
*/
|
||||
export const useTopRightBlock = () => useContext(TopRightBlockContext)
|
||||
11
src/context/root_path.ts
Normal file
11
src/context/root_path.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { createContext, useContext } from 'react'
|
||||
|
||||
/** Контекст текущего корневого пути */
|
||||
export const RootPathContext = createContext<string>('/')
|
||||
|
||||
/**
|
||||
* Получить текущий корневой путь
|
||||
*
|
||||
* @returns Текущий корневой путь
|
||||
*/
|
||||
export const useRootPath = () => useContext(RootPathContext)
|
||||
13
src/context/user.ts
Normal file
13
src/context/user.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { createContext, useContext } from 'react'
|
||||
|
||||
import { UserTokenDto } from '@api'
|
||||
|
||||
/** Контекст текущего пользователя */
|
||||
export const UserContext = createContext<UserTokenDto>({})
|
||||
|
||||
/**
|
||||
* Получить текущего пользователя
|
||||
*
|
||||
* @returns Текущий пользователь, либо `null`
|
||||
*/
|
||||
export const useUser = () => useContext(UserContext)
|
||||
13
src/context/well.ts
Normal file
13
src/context/well.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { createContext, useContext } from 'react'
|
||||
|
||||
import { WellDto } from '@api'
|
||||
|
||||
/** Контекст текущей скважины */
|
||||
export const WellContext = createContext<[WellDto, (well: WellDto) => void]>([{}, () => {}])
|
||||
|
||||
/**
|
||||
* Получить текущую скважину
|
||||
*
|
||||
* @returns Текущая скважина, либо пустой объект
|
||||
*/
|
||||
export const useWell = () => useContext(WellContext)
|
||||
40
src/images/AsbLogo.svg
Normal file
40
src/images/AsbLogo.svg
Normal file
@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 1800 8000 4000" version="1.1" alt="АСБ" fill="#2d2242">
|
||||
<defs>
|
||||
<clipPath id="logo-clip-path-id0">
|
||||
<path d="m 5189,716 c 587,0 1063,476 1063,1063 0,587 -476,1063 -1063,1063 -588,0 -1064,-476 -1064,-1063 0,-587 476,-1063 1064,-1063 z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g transform="translate(-982.80503,2106.4728)">
|
||||
<g fill="#e31e24">
|
||||
<path d="M 1756,3564 H 1018 L 3236,2 3848,3 4452,0 4400,184 C 4637,66 4905,0 5189,0 5751,0 6253,261 6579,669 l -233,810 C 6213,964 5745,584 5189,584 c -528,0 -975,341 -1134,815 l -30,108 c -20,87 -31,178 -31,272 0,660 535,1195 1195,1195 318,0 607,-125 821,-327 l -220,764 c -185,88 -388,147 -601,147 -636,0 -1194,-334 -1508,-836 l -239,842 h -702 l 187,-595 H 2146 Z M 3082,2443 3703,446 2463,2444 Z" />
|
||||
<path d="m 7725,3574 c -534.9685,-1.0406 -1176.3914,-0.3681 -1863.0925,-0.3084 L 6882,2 l 1790,1 -136,559 -1176,9 -121,462 h 836 c 570,93 953,697 950,1254 -3,656 -585,1291 -1300,1287 z m -995,-606 c 333,0 665,0 998,2 381,2 691,-335 693,-686 1,-291 -206,-632 -510,-673 h -824 z"/>
|
||||
</g>
|
||||
<path d="m 5347,1437 h -242 v -122 h 242 z" />
|
||||
<path d="m 5455,1555 h -463 v -86 h 463 z" />
|
||||
<path d="m 5597,2523 h -737 l 167,-936 h 392 z" />
|
||||
<path d="m 5246,2523 h -46 v -788 h 46 z" />
|
||||
<g fill="#fefefe">
|
||||
<path d="m 5166,1737 -105,93 28,-154 z" />
|
||||
<path d="m 5288,1737 105,93 -28,-154 z" />
|
||||
<path d="m 5224,1696 61,-42 h -113 z" />
|
||||
<path d="m 5143,2007 -124,55 20,-110 z" />
|
||||
<path d="m 5310,2007 125,55 -20,-110 z" />
|
||||
<path d="m 5091,1894 138,68 136,-68 -136,-111 z" />
|
||||
<path d="m 5052,2132 180,119 180,-121 -183,-87 z" />
|
||||
<path d="m 5163,2297 -214,148 47,-261 z" />
|
||||
<path d="m 5292,2297 213,148 -47,-261 z" />
|
||||
<path d="m 5226,2337 271,186 h -539 z" />
|
||||
</g>
|
||||
<g clip-path="url(#logo-clip-path-id0)">
|
||||
<g fill="9d9e9e">
|
||||
<path d="m 5136,177 c -688,66 -1152,378 -1415,911 l 1475,-196 783,591 z" />
|
||||
<path d="M 6684,1229 C 6401,599 5957,260 5367,182 l 659,1333 -308,931 z" />
|
||||
</g>
|
||||
<path d="m 6189,3044 c 509,-466 692,-994 581,-1579 l -1059,1044 -981,-1 z" />
|
||||
<path d="m 4267,3105 c 598,345 1157,360 1681,78 L 4633,2488 4337,1552 Z" />
|
||||
<path d="m 3626,1346 c -142,676 17,1212 447,1622 l 253,-1466 798,-571 z" />
|
||||
</g>
|
||||
<path fill="none" d="m 5189,716 c 587,0 1063,476 1063,1063 0,587 -476,1063 -1063,1063 -588,0 -1064,-476 -1064,-1063 0,-587 476,-1063 1064,-1063 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
33
src/images/Logo.svg
Normal file
33
src/images/Logo.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg version="1.1" viewBox="0 0 896 282" fill="#f3f6e8" className="logo" overflow="visible">
|
||||
<g className="logo-icon">
|
||||
<path fill="#9e1937" d="m126 32.2h-92.5c-2.58 0-4.67-2.09-4.67-4.67s2.09-4.67 4.67-4.67h92.5c2.58 0 4.67 2.09 4.67 4.67s-2.09 4.67-4.67 4.67" />
|
||||
<path d="m30.5 274h98.3l-36.1-194h-26.2zm104 9.33h-110c-1.39 0-2.7-0.617-3.59-1.68-0.887-1.07-1.25-2.47-0.999-3.83l37.8-203c0.41-2.21 2.34-3.82 4.59-3.82h34c2.25 0 4.18 1.6 4.59 3.82l37.8 203c0.253 1.36-0.112 2.77-0.999 3.83-0.887 1.07-2.2 1.68-3.59 1.68" />
|
||||
<path d="m113 10.3h-66.9c-2.58 0-4.67-2.09-4.67-4.67 0-2.58 2.09-4.67 4.67-4.67h66.9c2.58 0 4.67 2.09 4.67 4.67 0 2.58-2.09 4.67-4.67 4.67" />
|
||||
<path d="m155 262c-2.17 0-4.12-1.53-4.57-3.74l-41.1-203h-58.8l-39.9 197h85.9l-44.2-33.2c-1.61-1.21-2.26-3.3-1.62-5.21 0.635-1.91 2.42-3.19 4.43-3.19h37.1l-34.6-28.7c-1.51-1.26-2.08-3.33-1.41-5.17 0.668-1.85 2.42-3.08 4.39-3.08h27.8l-25.3-25.5c-1.33-1.34-1.72-3.34-1-5.08 0.725-1.74 2.42-2.87 4.31-2.87h18.3l-16.8-19c-1.22-1.37-1.51-3.33-0.759-5.01 0.754-1.67 2.42-2.75 4.25-2.75h17.6c2.58 0 4.67 2.09 4.67 4.67s-2.09 4.67-4.67 4.67h-7.23l16.8 19c1.22 1.38 1.51 3.34 0.759 5.01-0.754 1.67-2.42 2.75-4.25 2.75h-17.4l25.3 25.5c1.33 1.34 1.72 3.34 1 5.08-0.724 1.74-2.42 2.87-4.31 2.87h-26.1l34.6 28.7c1.51 1.26 2.08 3.33 1.41 5.17-0.668 1.85-2.42 3.08-4.39 3.08h-36.1l44.2 33.2c1.61 1.21 2.26 3.3 1.62 5.21-0.635 1.91-2.42 3.19-4.43 3.19h-106c-1.4 0-2.73-0.629-3.61-1.71-0.886-1.09-1.24-2.51-0.961-3.88l41.8-206c0.441-2.18 2.35-3.74 4.57-3.74h66.5c2.22 0 4.13 1.56 4.57 3.74l41.8 206c0.512 2.53-1.12 4.99-3.65 5.5-0.312 0.0625-0.624 0.0948-0.932 0.0948" />
|
||||
</g>
|
||||
|
||||
<g className="logo-label">
|
||||
<path fill="#9e1937" d="m316 140c2.76-2.67 5.01-1.71 5.01 2.13v30.3c0 3.84-3.14 6.98-6.98 6.98h-2.38c-3.84 0-6.98-3.14-6.98-6.98v-14.5c0-3.84 2.26-9.16 5.01-11.8l6.31-6.09" />
|
||||
<path d="m647 159c0 3.84-3.14 6.98-6.97 6.98h-3.84c-3.84 0-6.97-3.14-6.97-6.98v-118c0-3.84 3.14-6.98 6.97-6.98h3.84c3.84 0 6.97 3.14 6.97 6.98v118" />
|
||||
<path d="m707 144c0 3.84 3.14 6.97 6.98 6.97h52.7c3.84 0 6.98 3.14 6.98 6.97v1.84c0 3.84-3.14 6.98-6.98 6.98h-70.4c-3.84 0-6.97-3.14-6.97-6.98v-118c0-3.84 3.14-6.98 6.97-6.98h3.84c3.84 0 6.97 3.14 6.97 6.98v102" />
|
||||
<path d="m827 144c0 3.84 3.14 6.97 6.97 6.97h52.7c3.84 0 6.98 3.14 6.98 6.97v1.84c0 3.84-3.14 6.98-6.98 6.98h-70.4c-3.84 0-6.98-3.14-6.98-6.98v-118c0-3.84 3.14-6.98 6.98-6.98h3.84c3.84 0 6.98 3.14 6.98 6.98v102" />
|
||||
<path d="m279 101c0 33.2-15.2 49.9-39.4 49.9h-19.3c-3.84 0-6.97-3.14-6.97-6.97v-87.3c0-3.84 3.14-6.98 6.97-6.98h20.5c23 0 38.1 18.1 38.1 51.4zm18.3 1.09c0-29.6-12.9-67.7-56.1-67.7h-38.7c-3.84 0-6.98 3.14-6.98 6.98v118c0 3.84 3.14 6.98 6.98 6.98h39.4c34.3 0 55.4-26.1 55.4-64.1" />
|
||||
<path d="m432 101c0 33.2-15.2 49.9-39.4 49.9h-19.3c-3.84 0-6.97-3.14-6.97-6.97v-87.3c0-3.84 3.14-6.98 6.97-6.98h20.5c23 0 38.1 18.1 38.1 51.4zm18.3 1.09c0-29.6-12.9-67.7-56.1-67.7h-38.7c-3.84 0-6.98 3.14-6.98 6.98v118c0 3.84 3.14 6.98 6.98 6.98h39.4c34.3 0 55.4-26.1 55.4-64.1" />
|
||||
<path d="m539 94.6h-33c-3.84 0-6.98-3.14-6.98-6.98v-30.9c0-3.84 3.14-6.98 6.98-6.98h36.3c8.89 0 23.6 1.63 23.6 22 0 19.4-13.8 22.9-26.9 22.9zm26.9 6.9c8.35-4.9 18.3-12.2 18.3-31.6 0-27.8-21.8-35.4-43.4-35.4h-52.6c-3.84 0-6.98 3.14-6.98 6.98v118c0 3.84 3.14 6.97 6.98 6.97h3.84c3.84 0 6.97-3.14 6.97-6.97v-42.5c0-3.84 3.14-6.98 6.98-6.98h34.9c21.4 0 23.6 12.5 23.6 23.4 0.308 6.29 0 16.5 0 23.9s3.76 9.1 8.94 9.1h8.85v-40.1c0-18.5-10.3-20.7-16.3-24.7" />
|
||||
<path d="m220 256c-0.964 0-1.77-0.809-1.77-1.77v-2.85h-17.7c-0.962 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.807-1.77 1.77-1.77h2.62c0.962 0 1.77 0.809 1.77 1.77v19.4h9.25v-19.4c0-0.965 0.807-1.77 1.77-1.77h2.62c0.964 0 1.77 0.809 1.77 1.77v19.4h1.89c0.962 0 1.77 0.807 1.77 1.77v6.86c0 0.962-0.809 1.77-1.77 1.77h-2.23" />
|
||||
<path d="m267 251c-0.964 0-1.77-0.806-1.77-1.77v-15l-11.2 15.6c-0.463 0.694-1.2 1.12-2.01 1.12h-2.39c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.807-1.77 1.77-1.77h2.62c0.962 0 1.77 0.809 1.77 1.77v15l11.2-15.6c0.463-0.691 1.19-1.12 2-1.12h2.39c0.964 0 1.77 0.809 1.77 1.77v23.4c0 0.965-0.809 1.77-1.77 1.77h-2.62" />
|
||||
<path d="m319 238c0-2.54-1.39-4.78-5.51-4.89v9.78c4.04-0.076 5.51-1.73 5.51-4.89zm-17.1 0c0 3.12 1.66 4.81 5.43 4.89v-9.78c-3.93 0.115-5.43 2.27-5.43 4.89zm11.6 12.4c0 0.965-0.807 1.77-1.77 1.77h-2.62c-0.962 0-1.77-0.809-1.77-1.77v-1.85c-7.2-0.0758-12-3.82-12-10.6 0-6.66 4.89-10.4 12-10.6v-1.08c0-0.965 0.812-1.77 1.77-1.77h2.62c0.964 0 1.77 0.809 1.77 1.77v1.08c7.01 0.158 12.1 3.97 12.1 10.6 0 6.7-4.89 10.5-12.1 10.6v1.85" />
|
||||
<path d="m356 236c0.886 0.115 1.92 0.194 2.81 0.194 1.62 0 3.62-0.694 3.62-3.31 0-2.39-1.54-3.12-3.74-3.12-0.807 0-1.42 0.0393-2.69 0.0788zm13-3.08c0 4.81-3.74 9.05-9.98 9.05-0.576 0-2.04 0-3-0.115v7.4c0 0.965-0.809 1.77-1.77 1.77h-2.62c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-1 0.807-1.81 1.77-1.81 2.04-0.0393 4.97-0.0758 6.47-0.0758 8.2 0 10.9 4.28 10.9 8.94" />
|
||||
<path d="m405 246c5.12 0 7.78-3.62 7.78-8.17 0-4.93-3.43-8.16-7.78-8.16-4.47 0-7.78 3.24-7.78 8.16 0 4.62 3.47 8.17 7.78 8.17zm0-22.1c8.2 0 14.3 5.35 14.3 13.9 0 8.17-6.13 13.9-14.3 13.9-8.21 0-14.3-5.35-14.3-13.9 0-7.82 5.74-13.9 14.3-13.9" />
|
||||
<path d="m450 246c0.423 0.115 0.923 0.232 2.08 0.232 2.39 0 3.58-1.04 3.58-2.85 0-1.7-1.27-2.43-3.27-2.43h-2.39zm2.04-10.4c1.58 0 2.85-0.654 2.85-2.62 0-1.62-1.46-2.43-2.96-2.43-0.77 0-1.23 0.0768-1.93 0.156v4.89zm5.93 1.93c1.96 0.771 3.85 2.73 3.85 6.2 0 5.66-4.39 8.32-10.2 8.32-1.85 0-4.2-0.0364-5.97-0.113-0.925-0.0393-1.77-0.923-1.77-1.85v-23.3c0-0.964 0.809-1.81 1.77-1.85 1.81-0.0759 4.32-0.155 6.39-0.155 6.43 0 9.05 2.97 9.05 6.7 0 2.81-1.08 4.7-3.08 6.05" />
|
||||
<path d="m500 246c5.12 0 7.78-3.62 7.78-8.17 0-4.93-3.43-8.16-7.78-8.16-4.47 0-7.78 3.24-7.78 8.16 0 4.62 3.47 8.17 7.78 8.17zm0-22.1c8.2 0 14.3 5.35 14.3 13.9 0 8.17-6.13 13.9-14.3 13.9-8.21 0-14.3-5.35-14.3-13.9 0-7.82 5.74-13.9 14.3-13.9" />
|
||||
<path d="m555 250c0 0.965-0.807 1.77-1.77 1.77h-12.8c-0.962 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.809-1.77 1.77-1.77h12.4c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.96-0.809 1.77-1.77 1.77h-8.05v4.74h6.89c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.965-0.809 1.77-1.77 1.77h-6.89v4.89h8.43c0.964 0 1.77 0.807 1.77 1.77v2.23" />
|
||||
<path d="m613 246c1 0.116 1.62 0.192 2.31 0.192 2.54 0 3.35-1.27 3.35-2.78 0-1.58-0.849-3-3.08-3-0.77 0-1.66 0.077-2.58 0.232zm3.08-11.4c5.2 0 8.74 3.24 8.74 8.32 0 5.62-3.74 9.01-10.5 9.01-2.39 0-4.28-0.0758-5.74-0.153-1-0.0393-1.77-0.846-1.77-1.85v-23.4c0-0.965 0.809-1.77 1.77-1.77h12.7c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.96-0.809 1.77-1.77 1.77h-8.32v4.28c0.733-0.157 2.23-0.233 3.08-0.233" />
|
||||
<path d="m661 238 4.93-11.9c0.347-0.771 1.08-1.27 1.89-1.27h2.2c1.04 0 1.73 0.733 1.73 1.66 0 0.268-0.076 0.538-0.192 0.807l-7.93 18.1c-1.81 4.12-4.16 6.39-7.9 6.39-1.04 0-2.12-0.191-3.16-0.654-0.541-0.268-0.886-0.733-0.886-1.42 0-0.233 0.037-0.502 0.153-0.809l0.733-1.89c0.347-0.923 0.925-1.2 1.62-1.2 0.231 0 0.463 0.0393 0.694 0.0759 0.502 0.118 0.846 0.118 1 0.118 0.809 0 1.46-0.31 1.81-1.08l0.347-0.809-9.98-16.6c-0.192-0.35-0.268-0.697-0.268-1.04 0-0.889 0.615-1.66 1.69-1.66h2.58c0.807 0 1.62 0.462 2.04 1.19l6.89 12" />
|
||||
<path d="m702 236c0.886 0.115 1.92 0.194 2.81 0.194 1.62 0 3.62-0.694 3.62-3.31 0-2.39-1.54-3.12-3.74-3.12-0.807 0-1.42 0.0393-2.69 0.0788zm13-3.08c0 4.81-3.74 9.05-9.98 9.05-0.578 0-2.04 0-3-0.115v7.4c0 0.965-0.809 1.77-1.77 1.77h-2.62c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-1 0.807-1.81 1.77-1.81 2.04-0.0393 4.97-0.0758 6.47-0.0758 8.2 0 10.9 4.28 10.9 8.94" />
|
||||
<path d="m756 250c0 0.965-0.807 1.77-1.77 1.77h-12.8c-0.962 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.809-1.77 1.77-1.77h12.4c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.96-0.809 1.77-1.77 1.77h-8.05v4.74h6.89c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.965-0.809 1.77-1.77 1.77h-6.89v4.89h8.43c0.964 0 1.77 0.807 1.77 1.77v2.23" />
|
||||
<path d="m803 250c0 0.965-0.809 1.77-1.77 1.77h-2.62c-0.964 0-1.77-0.806-1.77-1.77v-9.09h-9.82v9.09c0 0.965-0.812 1.77-1.77 1.77h-2.62c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.807-1.77 1.77-1.77h2.62c0.962 0 1.77 0.809 1.77 1.77v8.55h9.82v-8.55c0-0.965 0.807-1.77 1.77-1.77h2.62c0.964 0 1.77 0.809 1.77 1.77v23.4" />
|
||||
<path d="m849 251c-0.962 0-1.77-0.806-1.77-1.77v-15l-11.2 15.6c-0.463 0.694-1.19 1.12-2 1.12h-2.39c-0.962 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.809-1.77 1.77-1.77h2.62c0.962 0 1.77 0.809 1.77 1.77v15l11.2-15.6c0.463-0.691 1.2-1.12 2-1.12h2.39c0.962 0 1.77 0.809 1.77 1.77v23.4c0 0.965-0.809 1.77-1.77 1.77h-2.62" />
|
||||
<path d="m896 250c0 0.965-0.809 1.77-1.77 1.77h-12.8c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.807-1.77 1.77-1.77h12.4c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.96-0.809 1.77-1.77 1.77h-8.05v4.74h6.89c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.965-0.809 1.77-1.77 1.77h-6.89v4.89h8.43c0.962 0 1.77 0.807 1.77 1.77v2.23" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
@ -1,44 +1,14 @@
|
||||
import { memo } from 'react'
|
||||
|
||||
import { ReactComponent as RawLogo } from './Logo.svg'
|
||||
|
||||
export type LogoProps = React.SVGProps<SVGSVGElement> & {
|
||||
size?: number
|
||||
onlyIcon?: boolean
|
||||
}
|
||||
|
||||
export const Logo = memo<LogoProps>(({ size = 170, onlyIcon, ...props }) => (
|
||||
<svg version={'1.1'} viewBox={`0 0 896 282`} fill={'#f3f6e8'} className={'logo'} style={{ width: size, height: 282/896*size, overflow: 'visible' }} {...props}>
|
||||
<g className={'logo-icon'}>
|
||||
<path fill={'#9e1937'} d={'m126 32.2h-92.5c-2.58 0-4.67-2.09-4.67-4.67s2.09-4.67 4.67-4.67h92.5c2.58 0 4.67 2.09 4.67 4.67s-2.09 4.67-4.67 4.67'} />
|
||||
<path d={'m30.5 274h98.3l-36.1-194h-26.2zm104 9.33h-110c-1.39 0-2.7-0.617-3.59-1.68-0.887-1.07-1.25-2.47-0.999-3.83l37.8-203c0.41-2.21 2.34-3.82 4.59-3.82h34c2.25 0 4.18 1.6 4.59 3.82l37.8 203c0.253 1.36-0.112 2.77-0.999 3.83-0.887 1.07-2.2 1.68-3.59 1.68'} />
|
||||
<path d={'m113 10.3h-66.9c-2.58 0-4.67-2.09-4.67-4.67 0-2.58 2.09-4.67 4.67-4.67h66.9c2.58 0 4.67 2.09 4.67 4.67 0 2.58-2.09 4.67-4.67 4.67'} />
|
||||
<path d={'m155 262c-2.17 0-4.12-1.53-4.57-3.74l-41.1-203h-58.8l-39.9 197h85.9l-44.2-33.2c-1.61-1.21-2.26-3.3-1.62-5.21 0.635-1.91 2.42-3.19 4.43-3.19h37.1l-34.6-28.7c-1.51-1.26-2.08-3.33-1.41-5.17 0.668-1.85 2.42-3.08 4.39-3.08h27.8l-25.3-25.5c-1.33-1.34-1.72-3.34-1-5.08 0.725-1.74 2.42-2.87 4.31-2.87h18.3l-16.8-19c-1.22-1.37-1.51-3.33-0.759-5.01 0.754-1.67 2.42-2.75 4.25-2.75h17.6c2.58 0 4.67 2.09 4.67 4.67s-2.09 4.67-4.67 4.67h-7.23l16.8 19c1.22 1.38 1.51 3.34 0.759 5.01-0.754 1.67-2.42 2.75-4.25 2.75h-17.4l25.3 25.5c1.33 1.34 1.72 3.34 1 5.08-0.724 1.74-2.42 2.87-4.31 2.87h-26.1l34.6 28.7c1.51 1.26 2.08 3.33 1.41 5.17-0.668 1.85-2.42 3.08-4.39 3.08h-36.1l44.2 33.2c1.61 1.21 2.26 3.3 1.62 5.21-0.635 1.91-2.42 3.19-4.43 3.19h-106c-1.4 0-2.73-0.629-3.61-1.71-0.886-1.09-1.24-2.51-0.961-3.88l41.8-206c0.441-2.18 2.35-3.74 4.57-3.74h66.5c2.22 0 4.13 1.56 4.57 3.74l41.8 206c0.512 2.53-1.12 4.99-3.65 5.5-0.312 0.0625-0.624 0.0948-0.932 0.0948'} />
|
||||
</g>
|
||||
|
||||
<g className={'logo-label'}>
|
||||
<path fill={'#9e1937'} d={'m316 140c2.76-2.67 5.01-1.71 5.01 2.13v30.3c0 3.84-3.14 6.98-6.98 6.98h-2.38c-3.84 0-6.98-3.14-6.98-6.98v-14.5c0-3.84 2.26-9.16 5.01-11.8l6.31-6.09'} />
|
||||
<path d={'m647 159c0 3.84-3.14 6.98-6.97 6.98h-3.84c-3.84 0-6.97-3.14-6.97-6.98v-118c0-3.84 3.14-6.98 6.97-6.98h3.84c3.84 0 6.97 3.14 6.97 6.98v118'} />
|
||||
<path d={'m707 144c0 3.84 3.14 6.97 6.98 6.97h52.7c3.84 0 6.98 3.14 6.98 6.97v1.84c0 3.84-3.14 6.98-6.98 6.98h-70.4c-3.84 0-6.97-3.14-6.97-6.98v-118c0-3.84 3.14-6.98 6.97-6.98h3.84c3.84 0 6.97 3.14 6.97 6.98v102'} />
|
||||
<path d={'m827 144c0 3.84 3.14 6.97 6.97 6.97h52.7c3.84 0 6.98 3.14 6.98 6.97v1.84c0 3.84-3.14 6.98-6.98 6.98h-70.4c-3.84 0-6.98-3.14-6.98-6.98v-118c0-3.84 3.14-6.98 6.98-6.98h3.84c3.84 0 6.98 3.14 6.98 6.98v102'} />
|
||||
<path d={'m279 101c0 33.2-15.2 49.9-39.4 49.9h-19.3c-3.84 0-6.97-3.14-6.97-6.97v-87.3c0-3.84 3.14-6.98 6.97-6.98h20.5c23 0 38.1 18.1 38.1 51.4zm18.3 1.09c0-29.6-12.9-67.7-56.1-67.7h-38.7c-3.84 0-6.98 3.14-6.98 6.98v118c0 3.84 3.14 6.98 6.98 6.98h39.4c34.3 0 55.4-26.1 55.4-64.1'} />
|
||||
<path d={'m432 101c0 33.2-15.2 49.9-39.4 49.9h-19.3c-3.84 0-6.97-3.14-6.97-6.97v-87.3c0-3.84 3.14-6.98 6.97-6.98h20.5c23 0 38.1 18.1 38.1 51.4zm18.3 1.09c0-29.6-12.9-67.7-56.1-67.7h-38.7c-3.84 0-6.98 3.14-6.98 6.98v118c0 3.84 3.14 6.98 6.98 6.98h39.4c34.3 0 55.4-26.1 55.4-64.1'} />
|
||||
<path d={'m539 94.6h-33c-3.84 0-6.98-3.14-6.98-6.98v-30.9c0-3.84 3.14-6.98 6.98-6.98h36.3c8.89 0 23.6 1.63 23.6 22 0 19.4-13.8 22.9-26.9 22.9zm26.9 6.9c8.35-4.9 18.3-12.2 18.3-31.6 0-27.8-21.8-35.4-43.4-35.4h-52.6c-3.84 0-6.98 3.14-6.98 6.98v118c0 3.84 3.14 6.97 6.98 6.97h3.84c3.84 0 6.97-3.14 6.97-6.97v-42.5c0-3.84 3.14-6.98 6.98-6.98h34.9c21.4 0 23.6 12.5 23.6 23.4 0.308 6.29 0 16.5 0 23.9s3.76 9.1 8.94 9.1h8.85v-40.1c0-18.5-10.3-20.7-16.3-24.7'} />
|
||||
<path d={'m220 256c-0.964 0-1.77-0.809-1.77-1.77v-2.85h-17.7c-0.962 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.807-1.77 1.77-1.77h2.62c0.962 0 1.77 0.809 1.77 1.77v19.4h9.25v-19.4c0-0.965 0.807-1.77 1.77-1.77h2.62c0.964 0 1.77 0.809 1.77 1.77v19.4h1.89c0.962 0 1.77 0.807 1.77 1.77v6.86c0 0.962-0.809 1.77-1.77 1.77h-2.23'} />
|
||||
<path d={'m267 251c-0.964 0-1.77-0.806-1.77-1.77v-15l-11.2 15.6c-0.463 0.694-1.2 1.12-2.01 1.12h-2.39c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.807-1.77 1.77-1.77h2.62c0.962 0 1.77 0.809 1.77 1.77v15l11.2-15.6c0.463-0.691 1.19-1.12 2-1.12h2.39c0.964 0 1.77 0.809 1.77 1.77v23.4c0 0.965-0.809 1.77-1.77 1.77h-2.62'} />
|
||||
<path d={'m319 238c0-2.54-1.39-4.78-5.51-4.89v9.78c4.04-0.076 5.51-1.73 5.51-4.89zm-17.1 0c0 3.12 1.66 4.81 5.43 4.89v-9.78c-3.93 0.115-5.43 2.27-5.43 4.89zm11.6 12.4c0 0.965-0.807 1.77-1.77 1.77h-2.62c-0.962 0-1.77-0.809-1.77-1.77v-1.85c-7.2-0.0758-12-3.82-12-10.6 0-6.66 4.89-10.4 12-10.6v-1.08c0-0.965 0.812-1.77 1.77-1.77h2.62c0.964 0 1.77 0.809 1.77 1.77v1.08c7.01 0.158 12.1 3.97 12.1 10.6 0 6.7-4.89 10.5-12.1 10.6v1.85'} />
|
||||
<path d={'m356 236c0.886 0.115 1.92 0.194 2.81 0.194 1.62 0 3.62-0.694 3.62-3.31 0-2.39-1.54-3.12-3.74-3.12-0.807 0-1.42 0.0393-2.69 0.0788zm13-3.08c0 4.81-3.74 9.05-9.98 9.05-0.576 0-2.04 0-3-0.115v7.4c0 0.965-0.809 1.77-1.77 1.77h-2.62c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-1 0.807-1.81 1.77-1.81 2.04-0.0393 4.97-0.0758 6.47-0.0758 8.2 0 10.9 4.28 10.9 8.94'} />
|
||||
<path d={'m405 246c5.12 0 7.78-3.62 7.78-8.17 0-4.93-3.43-8.16-7.78-8.16-4.47 0-7.78 3.24-7.78 8.16 0 4.62 3.47 8.17 7.78 8.17zm0-22.1c8.2 0 14.3 5.35 14.3 13.9 0 8.17-6.13 13.9-14.3 13.9-8.21 0-14.3-5.35-14.3-13.9 0-7.82 5.74-13.9 14.3-13.9'} />
|
||||
<path d={'m450 246c0.423 0.115 0.923 0.232 2.08 0.232 2.39 0 3.58-1.04 3.58-2.85 0-1.7-1.27-2.43-3.27-2.43h-2.39zm2.04-10.4c1.58 0 2.85-0.654 2.85-2.62 0-1.62-1.46-2.43-2.96-2.43-0.77 0-1.23 0.0768-1.93 0.156v4.89zm5.93 1.93c1.96 0.771 3.85 2.73 3.85 6.2 0 5.66-4.39 8.32-10.2 8.32-1.85 0-4.2-0.0364-5.97-0.113-0.925-0.0393-1.77-0.923-1.77-1.85v-23.3c0-0.964 0.809-1.81 1.77-1.85 1.81-0.0759 4.32-0.155 6.39-0.155 6.43 0 9.05 2.97 9.05 6.7 0 2.81-1.08 4.7-3.08 6.05'} />
|
||||
<path d={'m500 246c5.12 0 7.78-3.62 7.78-8.17 0-4.93-3.43-8.16-7.78-8.16-4.47 0-7.78 3.24-7.78 8.16 0 4.62 3.47 8.17 7.78 8.17zm0-22.1c8.2 0 14.3 5.35 14.3 13.9 0 8.17-6.13 13.9-14.3 13.9-8.21 0-14.3-5.35-14.3-13.9 0-7.82 5.74-13.9 14.3-13.9'} />
|
||||
<path d={'m555 250c0 0.965-0.807 1.77-1.77 1.77h-12.8c-0.962 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.809-1.77 1.77-1.77h12.4c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.96-0.809 1.77-1.77 1.77h-8.05v4.74h6.89c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.965-0.809 1.77-1.77 1.77h-6.89v4.89h8.43c0.964 0 1.77 0.807 1.77 1.77v2.23'} />
|
||||
<path d={'m613 246c1 0.116 1.62 0.192 2.31 0.192 2.54 0 3.35-1.27 3.35-2.78 0-1.58-0.849-3-3.08-3-0.77 0-1.66 0.077-2.58 0.232zm3.08-11.4c5.2 0 8.74 3.24 8.74 8.32 0 5.62-3.74 9.01-10.5 9.01-2.39 0-4.28-0.0758-5.74-0.153-1-0.0393-1.77-0.846-1.77-1.85v-23.4c0-0.965 0.809-1.77 1.77-1.77h12.7c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.96-0.809 1.77-1.77 1.77h-8.32v4.28c0.733-0.157 2.23-0.233 3.08-0.233'} />
|
||||
<path d={'m661 238 4.93-11.9c0.347-0.771 1.08-1.27 1.89-1.27h2.2c1.04 0 1.73 0.733 1.73 1.66 0 0.268-0.076 0.538-0.192 0.807l-7.93 18.1c-1.81 4.12-4.16 6.39-7.9 6.39-1.04 0-2.12-0.191-3.16-0.654-0.541-0.268-0.886-0.733-0.886-1.42 0-0.233 0.037-0.502 0.153-0.809l0.733-1.89c0.347-0.923 0.925-1.2 1.62-1.2 0.231 0 0.463 0.0393 0.694 0.0759 0.502 0.118 0.846 0.118 1 0.118 0.809 0 1.46-0.31 1.81-1.08l0.347-0.809-9.98-16.6c-0.192-0.35-0.268-0.697-0.268-1.04 0-0.889 0.615-1.66 1.69-1.66h2.58c0.807 0 1.62 0.462 2.04 1.19l6.89 12'} />
|
||||
<path d={'m702 236c0.886 0.115 1.92 0.194 2.81 0.194 1.62 0 3.62-0.694 3.62-3.31 0-2.39-1.54-3.12-3.74-3.12-0.807 0-1.42 0.0393-2.69 0.0788zm13-3.08c0 4.81-3.74 9.05-9.98 9.05-0.578 0-2.04 0-3-0.115v7.4c0 0.965-0.809 1.77-1.77 1.77h-2.62c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-1 0.807-1.81 1.77-1.81 2.04-0.0393 4.97-0.0758 6.47-0.0758 8.2 0 10.9 4.28 10.9 8.94'} />
|
||||
<path d={'m756 250c0 0.965-0.807 1.77-1.77 1.77h-12.8c-0.962 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.809-1.77 1.77-1.77h12.4c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.96-0.809 1.77-1.77 1.77h-8.05v4.74h6.89c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.965-0.809 1.77-1.77 1.77h-6.89v4.89h8.43c0.964 0 1.77 0.807 1.77 1.77v2.23'} />
|
||||
<path d={'m803 250c0 0.965-0.809 1.77-1.77 1.77h-2.62c-0.964 0-1.77-0.806-1.77-1.77v-9.09h-9.82v9.09c0 0.965-0.812 1.77-1.77 1.77h-2.62c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.807-1.77 1.77-1.77h2.62c0.962 0 1.77 0.809 1.77 1.77v8.55h9.82v-8.55c0-0.965 0.807-1.77 1.77-1.77h2.62c0.964 0 1.77 0.809 1.77 1.77v23.4'} />
|
||||
<path d={'m849 251c-0.962 0-1.77-0.806-1.77-1.77v-15l-11.2 15.6c-0.463 0.694-1.19 1.12-2 1.12h-2.39c-0.962 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.809-1.77 1.77-1.77h2.62c0.962 0 1.77 0.809 1.77 1.77v15l11.2-15.6c0.463-0.691 1.2-1.12 2-1.12h2.39c0.962 0 1.77 0.809 1.77 1.77v23.4c0 0.965-0.809 1.77-1.77 1.77h-2.62'} />
|
||||
<path d={'m896 250c0 0.965-0.809 1.77-1.77 1.77h-12.8c-0.964 0-1.77-0.806-1.77-1.77v-23.4c0-0.965 0.807-1.77 1.77-1.77h12.4c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.96-0.809 1.77-1.77 1.77h-8.05v4.74h6.89c0.962 0 1.77 0.809 1.77 1.77v2.23c0 0.965-0.809 1.77-1.77 1.77h-6.89v4.89h8.43c0.962 0 1.77 0.807 1.77 1.77v2.23'} />
|
||||
</g>
|
||||
</svg>
|
||||
<RawLogo style={{ width: size, height: 282/896*size }} {...props} />
|
||||
))
|
||||
|
||||
export default Logo
|
||||
|
||||
@ -1,15 +1,28 @@
|
||||
import React from 'react'
|
||||
import locale from 'antd/lib/locale/ru_RU'
|
||||
import { ConfigProvider } from 'antd'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import React from 'react'
|
||||
|
||||
import { getUser } from '@utils'
|
||||
import { OpenAPI } from '@api'
|
||||
|
||||
import App from './App'
|
||||
|
||||
import '@styles/include/antd_theme.less'
|
||||
import '@styles/index.css'
|
||||
|
||||
// OpenAPI.BASE = 'http://localhost:3000'
|
||||
// TODO: Удалить взятие из 'token' в следующем релизе, вставлено для совместимости
|
||||
OpenAPI.TOKEN = async () => getUser().token || localStorage.getItem('token') || ''
|
||||
OpenAPI.HEADERS = { 'Content-Type': 'application/json' }
|
||||
|
||||
const container = document.getElementById('root') ?? document.body
|
||||
const root = createRoot(container)
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<ConfigProvider locale={locale}>
|
||||
<App />
|
||||
</ConfigProvider>
|
||||
</React.StrictMode>
|
||||
)
|
||||
|
||||
@ -12,7 +12,7 @@ import {
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons'
|
||||
|
||||
import { makeItem, PrivateWellMenu } from '@components/PrivateWellMenu'
|
||||
import { makeItem, PrivateMenu } from '@components/PrivateMenu'
|
||||
import { isDev } from '@utils'
|
||||
|
||||
export const menuItems = [
|
||||
@ -33,7 +33,7 @@ export const menuItems = [
|
||||
].filter(Boolean)
|
||||
|
||||
export const AdminNavigationMenu = memo((props) => (
|
||||
<PrivateWellMenu
|
||||
<PrivateMenu
|
||||
{...props}
|
||||
items={menuItems}
|
||||
rootPath={'/admin'}
|
||||
|
||||
@ -3,11 +3,12 @@ import { Input } from 'antd'
|
||||
|
||||
import {
|
||||
EditableTable,
|
||||
makeColumn,
|
||||
makeSelectColumn,
|
||||
makeStringSorter,
|
||||
defaultPagination,
|
||||
makeTimezoneColumn
|
||||
makeTimezoneColumn,
|
||||
makeNumericColumn,
|
||||
makeTextColumn
|
||||
} from '@components/Table'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { AdminClusterService, AdminDepositService } from '@api'
|
||||
@ -30,17 +31,11 @@ const ClusterController = memo(() => {
|
||||
const clusterColumns = useMemo(() => [
|
||||
makeSelectColumn('Месторождение', 'idDeposit', deposits, '--', {
|
||||
width: 200,
|
||||
editable: true,
|
||||
sorter: makeStringSorter('idDeposit')
|
||||
}),
|
||||
makeColumn('Название', 'caption', {
|
||||
width: 200,
|
||||
editable: true,
|
||||
sorter: makeStringSorter('caption'),
|
||||
formItemRules: min1,
|
||||
}),
|
||||
makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFormat }),
|
||||
makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFormat }),
|
||||
makeTextColumn('Название', 'caption', undefined, undefined, undefined, { width: 200, formItemRules: min1 }),
|
||||
makeNumericColumn('Широта', 'latitude', coordsFormat, undefined, 150),
|
||||
makeNumericColumn('Долгота', 'longitude', coordsFormat, undefined, 150),
|
||||
makeTimezoneColumn('Зона', 'timezone', null, true, { width: 150 }),
|
||||
], [deposits])
|
||||
|
||||
|
||||
@ -3,10 +3,9 @@ import { Input } from 'antd'
|
||||
|
||||
import {
|
||||
EditableTable,
|
||||
makeColumn,
|
||||
makeStringSorter,
|
||||
makeSelectColumn,
|
||||
defaultPagination
|
||||
defaultPagination,
|
||||
makeTextColumn
|
||||
} from '@components/Table'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { AdminCompanyService, AdminCompanyTypeService } from '@api'
|
||||
@ -37,16 +36,8 @@ const CompanyController = memo(() => {
|
||||
}))
|
||||
|
||||
setColumns([
|
||||
makeColumn('Название', 'caption', {
|
||||
width: 200,
|
||||
editable: true,
|
||||
sorter: makeStringSorter('caption'),
|
||||
formItemRules: min1,
|
||||
}),
|
||||
makeSelectColumn('Тип компании', 'idCompanyType', companyTypes, null, {
|
||||
width: 200,
|
||||
editable: true
|
||||
}),
|
||||
makeTextColumn('Название', 'caption', undefined, undefined, undefined, { width: 200, formItemRules: min1 }),
|
||||
makeSelectColumn('Тип компании', 'idCompanyType', companyTypes, null, { width: 200 }),
|
||||
])
|
||||
|
||||
await updateTable()
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Input } from 'antd'
|
||||
|
||||
import { EditableTable, makeColumn, makeStringSorter, defaultPagination } from '@components/Table'
|
||||
import { EditableTable, defaultPagination, makeTextColumn } from '@components/Table'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { arrayOrDefault, withPermissions } from '@utils'
|
||||
import { min1 } from '@utils/validationRules'
|
||||
import { AdminCompanyTypeService } from '@api'
|
||||
|
||||
const columns = [
|
||||
makeColumn('Название', 'caption', {
|
||||
width: 200,
|
||||
editable: true,
|
||||
sorter: makeStringSorter('caption'),
|
||||
formItemRules: min1,
|
||||
}),
|
||||
makeTextColumn('Название', 'caption', undefined, undefined, undefined, { width: 200, formItemRules: min1 }),
|
||||
]
|
||||
|
||||
const CompanyTypeController = memo(() => {
|
||||
|
||||
@ -2,15 +2,15 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Input } from 'antd'
|
||||
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { EditableTable, makeColumn, defaultPagination, makeTimezoneColumn } from '@components/Table'
|
||||
import { EditableTable, defaultPagination, makeTimezoneColumn, makeTextColumn, makeNumericColumn } from '@components/Table'
|
||||
import { arrayOrDefault, coordsFormat, withPermissions } from '@utils'
|
||||
import { min1 } from '@utils/validationRules'
|
||||
import { AdminDepositService } from '@api'
|
||||
|
||||
const depositColumns = [
|
||||
makeColumn('Название', 'caption', { width: 200, editable: true, formItemRules: min1 }),
|
||||
makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFormat }),
|
||||
makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFormat }),
|
||||
makeTextColumn('Название', 'caption', undefined, undefined, undefined, { width: 200, formItemRules: min1 }),
|
||||
makeNumericColumn('Широта', 'latitude', coordsFormat, undefined, 150),
|
||||
makeNumericColumn('Долгота', 'longitude', coordsFormat, undefined, 150),
|
||||
makeTimezoneColumn('Зона', 'timezone', null, true, { width: 150 }),
|
||||
]
|
||||
|
||||
|
||||
@ -1,23 +1,15 @@
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Input } from 'antd'
|
||||
|
||||
import { EditableTable, makeColumn, makeStringSorter } from '@components/Table'
|
||||
import { EditableTable, makeTextColumn } from '@components/Table'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { arrayOrDefault, withPermissions } from '@utils'
|
||||
import { min1 } from '@utils/validationRules'
|
||||
import { AdminPermissionService } from '@api'
|
||||
|
||||
const columns = [
|
||||
makeColumn('Название', 'name', {
|
||||
editable: true,
|
||||
sorter: makeStringSorter('name'),
|
||||
isRequired: true,
|
||||
formItemRules: min1,
|
||||
}),
|
||||
makeColumn('Описание', 'description', {
|
||||
editable: true,
|
||||
sorter: makeStringSorter('description'),
|
||||
}),
|
||||
makeTextColumn('Название', 'name', undefined, undefined, undefined, { isRequired: true, formItemRules: min1 }),
|
||||
makeTextColumn('Описание', 'description'),
|
||||
]
|
||||
|
||||
const PermissionController = memo(() => {
|
||||
|
||||
@ -19,15 +19,13 @@ const RoleController = memo(() => {
|
||||
)), [roles, searchValue])
|
||||
|
||||
const columns = useMemo(() => [
|
||||
makeTextColumn('Название', 'caption', null, null, null, { width: 100, editable: true, formItemRules: min1 }),
|
||||
makeTextColumn('Название', 'caption', null, null, null, { width: 100, 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])
|
||||
|
||||
@ -50,7 +50,7 @@ const TelemetryController = memo(() => {
|
||||
|
||||
const columns = useMemo(() => [
|
||||
makeColumn('', 'hasParent', { render: mergeRender }),
|
||||
makeNumericColumn('ID', 'id', null, null, makeNumericRender(0)),
|
||||
makeNumericColumn('ID', 'id', makeNumericRender(0)),
|
||||
makeTextColumn('UID', 'remoteUid'),
|
||||
makeTextColumn('Назначена на скважину', 'realWell'),
|
||||
makeDateColumn('Дата начала бурения', 'drillingStartDate'),
|
||||
|
||||
@ -115,7 +115,6 @@ const UserController = memo(() => {
|
||||
|
||||
setColumns([
|
||||
makeTextColumn('Логин', 'login', null, null, null, {
|
||||
editable: true,
|
||||
formItemRules: [
|
||||
{ required: true },
|
||||
...createLoginRules,
|
||||
@ -130,41 +129,34 @@ const UserController = memo(() => {
|
||||
],
|
||||
}),
|
||||
makeTextColumn('Фамилия', 'surname', filters.surname, null, null, {
|
||||
editable: true,
|
||||
formItemRules: [{ required: true }, ...nameRules],
|
||||
filterSearch: true,
|
||||
onFilter: makeTextOnFilter('surname'),
|
||||
}),
|
||||
makeTextColumn('Имя', 'name', filters.name, null, null, {
|
||||
editable: true,
|
||||
formItemRules: nameRules,
|
||||
filterSearch: true,
|
||||
onFilter: makeTextOnFilter('name'),
|
||||
}),
|
||||
makeTextColumn('Отчество', 'patronymic', filters.partonymic, null, null, {
|
||||
editable: true,
|
||||
formItemRules: nameRules,
|
||||
filterSearch: true,
|
||||
onFilter: makeTextOnFilter('patronymic'),
|
||||
}),
|
||||
makeTextColumn('E-mail', 'email', filters.email, null, null, {
|
||||
editable: true,
|
||||
formItemRules: [{ required: true }, ...emailRules],
|
||||
filterSearch: true,
|
||||
onFilter: makeTextOnFilter('email'),
|
||||
}),
|
||||
makeTextColumn('Номер телефона', 'phone', null, null, null, {
|
||||
editable: true,
|
||||
formItemRules: phoneRules,
|
||||
}),
|
||||
makeTextColumn('Должность', 'position', null, null, null, { editable: true }),
|
||||
makeTextColumn('Должность', 'position', null, null, null),
|
||||
makeTextColumn('Роли', 'roleNames', roleFilters, null, rolesRender, {
|
||||
editable: true,
|
||||
input: <RoleTag roles={roles} />,
|
||||
onFilter: makeArrayOnFilter('roleNames'),
|
||||
}),
|
||||
makeSelectColumn('Компания', 'idCompany', companies, '--', {
|
||||
editable: true,
|
||||
sorter: makeNumericSorter('idCompany'),
|
||||
})
|
||||
])
|
||||
|
||||
@ -12,11 +12,12 @@ import {
|
||||
EditableTable,
|
||||
makeColumn,
|
||||
makeSelectColumn,
|
||||
makeStringSorter,
|
||||
makeNumericSorter,
|
||||
makeTagColumn,
|
||||
defaultPagination,
|
||||
makeTimezoneColumn,
|
||||
makeTextColumn,
|
||||
makeNumericColumn,
|
||||
} from '@components/Table'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { TelemetryView, CompanyView } from '@components/views'
|
||||
@ -81,23 +82,11 @@ const WellController = memo(() => {
|
||||
}))
|
||||
|
||||
setColumns([
|
||||
makeSelectColumn('Куст', 'idCluster', clusters, '--', {
|
||||
width: '5rem',
|
||||
editable: true,
|
||||
sorter: makeNumericSorter('idCluster'),
|
||||
}),
|
||||
makeColumn('Название', 'caption', {
|
||||
width: '5rem',
|
||||
editable: true,
|
||||
sorter: makeStringSorter('caption'),
|
||||
}),
|
||||
makeSelectColumn('Тип', 'idWellType', wellTypes, '--', {
|
||||
width: 150,
|
||||
editable: true,
|
||||
sorter: makeNumericSorter('idWellType'),
|
||||
}),
|
||||
makeColumn('Широта', 'latitude', { width: 150, editable: true, render: coordsFormat }),
|
||||
makeColumn('Долгота', 'longitude', { width: 150, editable: true, render: coordsFormat }),
|
||||
makeSelectColumn('Куст', 'idCluster', clusters, '--', { width: '5rem', sorter: makeNumericSorter('idCluster') }),
|
||||
makeTextColumn('Название', 'caption', undefined, undefined, undefined, { width: '5rem' }),
|
||||
makeSelectColumn('Тип', 'idWellType', wellTypes, '--', { width: 150, sorter: makeNumericSorter('idWellType') }),
|
||||
makeNumericColumn('Широта', 'latitude', coordsFormat, undefined, 150),
|
||||
makeNumericColumn('Долгота', 'longitude', coordsFormat, undefined, 150),
|
||||
makeColumn('Телеметрия', 'telemetry', {
|
||||
editable: true,
|
||||
render: (telemetry) => <TelemetryView telemetry={telemetry} />,
|
||||
@ -105,7 +94,6 @@ const WellController = memo(() => {
|
||||
}, ),
|
||||
makeTimezoneColumn('Зона', 'timezone', null, true, { width: 170 }),
|
||||
makeTagColumn('Компании', 'companies', companies, 'id', 'caption', {
|
||||
editable: true,
|
||||
render: (company) => <CompanyView company={company} />,
|
||||
}),
|
||||
])
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
|
||||
import { Navigate, Route, Routes } from 'react-router-dom'
|
||||
import { lazy, memo, useEffect, useMemo } from 'react'
|
||||
|
||||
import { RootPathContext, useLayoutProps, useRootPath } from '@asb/context'
|
||||
import { FastRunMenu } from '@components/FastRunMenu'
|
||||
import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
|
||||
import { makeMenuBreadcrumbItemsRender } from '@components/MenuBreadcrumb'
|
||||
import { NoAccessComponent, withPermissions } from '@utils'
|
||||
|
||||
import { AdminNavigationMenu, menuItems } from './AdminNavigationMenu'
|
||||
@ -21,21 +21,18 @@ const TelemetryViewer = lazy(() => import('./Telemetry/TelemetryViewer'))
|
||||
const TelemetryMerger = lazy(() => import('./Telemetry/TelemetryMerger'))
|
||||
const VisitLog = lazy(() => import('./VisitLog'))
|
||||
|
||||
const layoutProps = {
|
||||
sider: <AdminNavigationMenu />,
|
||||
title: 'Администраторская панель',
|
||||
isAdmin: true,
|
||||
breadcrumb: makeMenuBreadcrumbItemsRender(menuItems, /^\/admin\//),
|
||||
}
|
||||
|
||||
const AdminPanel = memo(() => {
|
||||
const location = useLocation()
|
||||
const root = useRootPath()
|
||||
const rootPath = useMemo(() => `${root}/admin`, [root])
|
||||
|
||||
const setLayoutProps = useLayoutProps()
|
||||
|
||||
useEffect(() => {
|
||||
setLayoutProps({
|
||||
sider: <AdminNavigationMenu />,
|
||||
title: 'Администраторская панель',
|
||||
isAdmin: true,
|
||||
breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/admin\//),
|
||||
})
|
||||
}, [location.pathname])
|
||||
useLayoutProps(layoutProps)
|
||||
|
||||
return (
|
||||
<RootPathContext.Provider value={rootPath}>
|
||||
|
||||
@ -7,11 +7,11 @@ import {
|
||||
makeTextColumn,
|
||||
makeGroupColumn,
|
||||
makeColumn,
|
||||
makeDateSorter,
|
||||
makeNumericColumnPlanFact,
|
||||
makeNumericColumnPlanFactOld,
|
||||
Table,
|
||||
makeNumericRender,
|
||||
makeNumericColumn,
|
||||
makeDateColumn,
|
||||
} from '@components/Table'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import PointerIcon from '@components/icons/PointerIcon'
|
||||
@ -39,7 +39,6 @@ const filtersWellsType = []
|
||||
const DAY_IN_MS = 86_400_000
|
||||
const ONLINE_DEADTIME = 600_000
|
||||
|
||||
const getDate = (str) => isRawDate(str) ? new Date(str).toLocaleString() : '-'
|
||||
const numericRender = makeNumericRender(1)
|
||||
|
||||
const ClusterWells = memo(({ statsWells }) => {
|
||||
@ -118,7 +117,10 @@ const ClusterWells = memo(({ statsWells }) => {
|
||||
const columns = useMemo(() => [
|
||||
makeTextColumn('скв №', 'caption', null, null,
|
||||
(_, item) => (
|
||||
<Link to={{ pathname: `/well/${item.id}`, state: { from: location.pathname }}} style={{display: 'flex', alignItems: 'center'}}>
|
||||
<Link
|
||||
to={{ pathname: `/well/${item.id}`, state: { from: location.pathname }}}
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<PointerIcon
|
||||
state={item.idState === 1 ? 'active' : 'unknown'}
|
||||
width={32}
|
||||
@ -131,13 +133,13 @@ const ClusterWells = memo(({ statsWells }) => {
|
||||
),
|
||||
makeTextColumn('Тип скв.', 'wellType', filtersWellsType, null, (text) => text ?? '-'),
|
||||
makeGroupColumn('Фактические сроки', [
|
||||
makeColumn('начало', 'factStart', { sorter: makeDateSorter('factStart'), render: getDate }),
|
||||
makeColumn('окончание', 'factEnd', { sorter: makeDateSorter('factEnd'), render: getDate }),
|
||||
makeDateColumn('начало', 'factStart'),
|
||||
makeDateColumn('окончание', 'factEnd'),
|
||||
]),
|
||||
makeNumericColumnPlanFact('Продолжительность, сут', 'period', filtersMinMax, makeFilterMinMaxFunction, numericRender),
|
||||
makeNumericColumnPlanFact('МСП, м/ч', 'rateOfPenetration', filtersMinMax, makeFilterMinMaxFunction, numericRender),
|
||||
makeNumericColumnPlanFact('Рейсовая скорость, м/ч', 'routeSpeed', filtersMinMax, makeFilterMinMaxFunction, numericRender),
|
||||
makeNumericColumn('НПВ, ч', 'notProductiveTimeFact', filtersMinMax, makeFilterMinMaxFunction, numericRender),
|
||||
makeNumericColumnPlanFactOld('Продолжительность, сут', 'period', numericRender, makeFilterMinMaxFunction, { filters: filtersMinMax }),
|
||||
makeNumericColumnPlanFactOld('МСП, м/ч', 'rateOfPenetration', numericRender, makeFilterMinMaxFunction, { filters: filtersMinMax }),
|
||||
makeNumericColumnPlanFactOld('Рейсовая скорость, м/ч', 'routeSpeed', numericRender, makeFilterMinMaxFunction, { filters: filtersMinMax }),
|
||||
makeNumericColumn('НПВ, ч', 'notProductiveTimeFact', numericRender, makeFilterMinMaxFunction, { filters: filtersMinMax }),
|
||||
makeColumn('TVD', 'tvd', { align: 'center', render: (_, value) => (
|
||||
<Button onClick={() => {
|
||||
setSelectedWell(value)
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import { memo, useMemo } from 'react'
|
||||
import { Table } from 'antd'
|
||||
|
||||
import { makeTextColumn, makeNumericColumnPlanFact } from '@components/Table'
|
||||
import { Table, makeTextColumn, makeNumericColumnPlanFactOld } from '@components/Table'
|
||||
import { getPrecision } from '@utils/functions'
|
||||
|
||||
const columns = [
|
||||
makeTextColumn('Конструкция секции', 'sectionType'),
|
||||
makeTextColumn('Операция', 'operationName'),
|
||||
makeNumericColumnPlanFact('Глубина забоя', 'depth', null, null, (number) => getPrecision(number)),
|
||||
makeNumericColumnPlanFact('Часы', 'durationHours', null, null, (number) => getPrecision(number)),
|
||||
makeNumericColumnPlanFact('Комментарий', 'comment', null, null, (text) => text ?? '-')
|
||||
makeNumericColumnPlanFactOld('Глубина забоя', 'depth', (number) => getPrecision(number)),
|
||||
makeNumericColumnPlanFactOld('Часы', 'durationHours', (number) => getPrecision(number)),
|
||||
makeNumericColumnPlanFactOld('Комментарий', 'comment', (text) => text ?? '-'),
|
||||
]
|
||||
|
||||
export const WellOperationsTable = memo(({ wellOperations }) => {
|
||||
|
||||
@ -1,120 +0,0 @@
|
||||
import { useState, useEffect, memo, useMemo } from 'react'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { Map, Overlay } from 'pigeon-maps'
|
||||
import { Popover, Badge } from 'antd'
|
||||
|
||||
import { useLayoutProps } from '@asb/context'
|
||||
import { PointerIcon } from '@components/icons'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { FastRunMenu } from '@components/FastRunMenu'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { arrayOrDefault, limitValue, withPermissions } from '@utils'
|
||||
import { DepositService } from '@api'
|
||||
|
||||
import '@styles/index.css'
|
||||
|
||||
const defaultViewParams = { center: [60.81226, 70.0562], zoom: 5 }
|
||||
|
||||
const zoomLimit = limitValue(5, 15)
|
||||
|
||||
const calcViewParams = (clusters) => {
|
||||
if ((clusters?.length ?? 0) <= 0)
|
||||
return defaultViewParams
|
||||
|
||||
const center = clusters.reduce((sum, cluster) => {
|
||||
sum[0] += (cluster.latitude / clusters.length)
|
||||
sum[1] += (cluster.longitude / clusters.length)
|
||||
return sum
|
||||
}, [0, 0])
|
||||
|
||||
const maxDeg = clusters.reduce((max, cluster) => {
|
||||
const dLatitude = Math.abs(center[0] - cluster.latitude)
|
||||
const dLongitude = Math.abs(center[1] - cluster.longitude)
|
||||
const d = dLatitude > dLongitude ? dLatitude : dLongitude
|
||||
return d > max ? d : max
|
||||
}, 0)
|
||||
|
||||
// zoom max = 20 (too close)
|
||||
// zoom min = 1 (mega far)
|
||||
// 4 - full Russia (161.6 deg)
|
||||
// 13.5 - Khanty-Mansiysk
|
||||
const zoom = zoomLimit(5 + 5 / (maxDeg + 0.5))
|
||||
|
||||
return { center, zoom }
|
||||
}
|
||||
|
||||
const Deposit = memo(() => {
|
||||
const [depositsData, setDepositsData] = useState([])
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
const [viewParams, setViewParams] = useState(defaultViewParams)
|
||||
|
||||
const setLayoutProps = useLayoutProps()
|
||||
|
||||
const location = useLocation()
|
||||
|
||||
const selectorProps = useMemo(() => {
|
||||
const hasId = location.pathname.length > '/deposit/'.length
|
||||
|
||||
return {
|
||||
expand: hasId ? [location.pathname] : true,
|
||||
current: hasId ? location.pathname : undefined,
|
||||
}
|
||||
}, [location.pathname])
|
||||
|
||||
useEffect(() => setLayoutProps({
|
||||
sheet: false,
|
||||
showSelector: true,
|
||||
selectorProps,
|
||||
title: 'Месторождение',
|
||||
}), [setLayoutProps, selectorProps])
|
||||
|
||||
useEffect(() => {
|
||||
invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const deposits = await DepositService.getDeposits()
|
||||
setDepositsData(arrayOrDefault(deposits))
|
||||
setViewParams(calcViewParams(deposits))
|
||||
},
|
||||
setShowLoader,
|
||||
`Не удалось загрузить список кустов`,
|
||||
{ actionName: 'Получить список кустов' }
|
||||
)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<FastRunMenu />
|
||||
<LoaderPortal show={showLoader}>
|
||||
<div className={'h-100vh'} style={{ overflow: 'hidden' }}>
|
||||
<Map {...viewParams}>
|
||||
{depositsData.map(deposit => (
|
||||
<Overlay
|
||||
width={32}
|
||||
anchor={[deposit.latitude, deposit.longitude]}
|
||||
key={`${deposit.latitude} ${deposit.longitude}`}
|
||||
>
|
||||
<Popover content={
|
||||
<div>
|
||||
{deposit.clusters.map(cluster => (
|
||||
<Link key={cluster.id} to={{ pathname: `/cluster/${cluster.id}`, state: { from: location.pathname }}}>
|
||||
<div>{cluster.caption}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
} trigger={['click']} title={deposit.caption}>
|
||||
<div style={{cursor: 'pointer'}}>
|
||||
<Badge count={deposit.clusters.length}>
|
||||
<PointerIcon state={'active'} width={48} height={59} />
|
||||
</Badge>
|
||||
</div>
|
||||
</Popover>
|
||||
</Overlay>
|
||||
))}
|
||||
</Map>
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export default withPermissions(Deposit, ['Cluster.get'])
|
||||
25
src/pages/Deposit/DepositNavigationMenu.jsx
Normal file
25
src/pages/Deposit/DepositNavigationMenu.jsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { memo } from 'react'
|
||||
import {
|
||||
FundOutlined,
|
||||
HeatMapOutlined,
|
||||
} from '@ant-design/icons'
|
||||
|
||||
import { makeItem, PrivateMenu } from '@components/PrivateMenu'
|
||||
|
||||
export const menuItems = [
|
||||
makeItem('Карта', 'map', [], <HeatMapOutlined />),
|
||||
makeItem('Наработка АКБ', 'statistics_adw', [], <FundOutlined />),
|
||||
]
|
||||
|
||||
export const DepositNavigationMenu = memo((props) => (
|
||||
<PrivateMenu
|
||||
{...props}
|
||||
items={menuItems}
|
||||
rootPath={'/deposit/{idDeposit}'}
|
||||
mode={'inline'}
|
||||
theme={'dark'}
|
||||
style={{ backgroundColor: 'transparent' }}
|
||||
/>
|
||||
))
|
||||
|
||||
export default DepositNavigationMenu
|
||||
93
src/pages/Deposit/Map.jsx
Normal file
93
src/pages/Deposit/Map.jsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { memo, useMemo, useCallback } from 'react'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { Map as PigeonMap, Overlay } from 'pigeon-maps'
|
||||
import { Popover, Badge } from 'antd'
|
||||
|
||||
import { useDepositList } from '@asb/context'
|
||||
import { PointerIcon } from '@components/icons'
|
||||
import { limitValue, withPermissions } from '@utils'
|
||||
|
||||
import '@styles/index.css'
|
||||
|
||||
const zoomLimit = limitValue(5, 15)
|
||||
|
||||
const calcViewParams = (clusters) => {
|
||||
if ((clusters?.length ?? 0) <= 0)
|
||||
return { center: [60.81226, 70.0562], zoom: 5 }
|
||||
|
||||
const center = clusters.reduce((sum, cluster) => {
|
||||
sum[0] += cluster.latitude
|
||||
sum[1] += cluster.longitude
|
||||
return sum
|
||||
}, [0, 0]).map((elm) => elm / clusters.length)
|
||||
|
||||
const maxDeg = clusters.reduce((max, cluster) => {
|
||||
const dLatitude = Math.abs(center[0] - cluster.latitude)
|
||||
const dLongitude = Math.abs(center[1] - cluster.longitude)
|
||||
return Math.max(Math.max(dLatitude, dLongitude), max)
|
||||
}, 0)
|
||||
|
||||
// zoom max = 20 (too close)
|
||||
// zoom min = 1 (mega far)
|
||||
// 4 - full Russia (161.6 deg)
|
||||
// 13.5 - Khanty-Mansiysk
|
||||
const zoom = zoomLimit(5 + 5 / (maxDeg + 0.5))
|
||||
|
||||
return { center, zoom }
|
||||
}
|
||||
|
||||
const Map = memo(() => {
|
||||
const deposits = useDepositList()
|
||||
const location = useLocation()
|
||||
|
||||
const makeDepositLinks = useCallback((clusters) => (
|
||||
<div>
|
||||
{clusters.map(cluster => (
|
||||
<Link
|
||||
key={cluster.id}
|
||||
to={{
|
||||
pathname: `/cluster/${cluster.id}`,
|
||||
state: { from: location.pathname }
|
||||
}}
|
||||
>
|
||||
<div>{cluster.caption}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
), [location.pathname])
|
||||
|
||||
const viewParams = useMemo(() => calcViewParams(deposits), [deposits])
|
||||
|
||||
return (
|
||||
<div className={'deposit-page'}>
|
||||
<PigeonMap {...viewParams}>
|
||||
{deposits.map(deposit => {
|
||||
const anchor = [deposit.latitude, deposit.longitude]
|
||||
const links = makeDepositLinks(deposit.clusters)
|
||||
|
||||
return (
|
||||
<Overlay width={32} anchor={anchor} key={anchor.join(' ')}>
|
||||
<Popover
|
||||
content={links}
|
||||
trigger={['click']}
|
||||
title={(
|
||||
<Link to={{ pathname: `/deposit/${deposit.id}` }}>
|
||||
{deposit.caption}
|
||||
</Link>
|
||||
)}
|
||||
>
|
||||
<div className={'pointer'}>
|
||||
<Badge count={deposit.clusters.length}>
|
||||
<PointerIcon state={'active'} width={48} height={59} />
|
||||
</Badge>
|
||||
</div>
|
||||
</Popover>
|
||||
</Overlay>
|
||||
)
|
||||
})}
|
||||
</PigeonMap>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default withPermissions(Map, ['Cluster.get'])
|
||||
127
src/pages/Deposit/StatisticsADW.jsx
Normal file
127
src/pages/Deposit/StatisticsADW.jsx
Normal file
@ -0,0 +1,127 @@
|
||||
import { CheckOutlined, StopOutlined, QuestionCircleOutlined, WarningOutlined } from '@ant-design/icons'
|
||||
import { memo, useEffect, useMemo, useState } from 'react'
|
||||
import { Card, Empty, Popover } from 'antd'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { getWellTitle, WellView } from '@components/views'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { DateRangeWrapper, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
|
||||
import { arrayOrDefault, withPermissions } from '@utils'
|
||||
import { SubsystemOperationTimeService } from '@api'
|
||||
|
||||
import '@styles/pages/statistics_adw.less'
|
||||
|
||||
const numericRender = makeNumericRender(2)
|
||||
|
||||
const columns = [
|
||||
makeTextColumn('Подсистема', 'subsystemName', undefined, undefined, (value, row) => value || row.key),
|
||||
makeNumericColumn('Проходка, м', 'sumDepthInterval'),
|
||||
makeNumericColumn('Время работы, ч', 'usedTimeHours'),
|
||||
makeNumericColumn('Кол-во запусков', 'operationCount'),
|
||||
makeNumericColumn('Коэф. использования, %', 'kUsage', (value) => numericRender(value * 100)),
|
||||
]
|
||||
|
||||
const getSubsystemState = (subsystem) => {
|
||||
if (!subsystem || typeof subsystem.kUsage !== 'number') return null
|
||||
if (subsystem.kUsage <= 0.2) return 'error'
|
||||
if (subsystem.kUsage <= 0.7) return 'warn'
|
||||
return 'ok'
|
||||
}
|
||||
|
||||
const getSubsystemIcon = (state) => {
|
||||
switch (state) {
|
||||
case 'ok': return <CheckOutlined />
|
||||
case 'warn': return <WarningOutlined />
|
||||
case 'error': return <StopOutlined />
|
||||
default: return <QuestionCircleOutlined />
|
||||
}
|
||||
}
|
||||
|
||||
const getCardState = (subsystems) => {
|
||||
if (subsystems.length <= 0) return null
|
||||
const states = subsystems.map(getSubsystemState)
|
||||
if (states.some((state) => state === 'error')) return 'error'
|
||||
if (states.some((state) => state === 'warn')) return 'warn'
|
||||
return 'ok'
|
||||
}
|
||||
|
||||
const generateSubsystem = (subsystem) => {
|
||||
const state = getSubsystemState(subsystem)
|
||||
|
||||
return (
|
||||
<div className={`subsystem-status status-${state}`}>
|
||||
{getSubsystemIcon(state)}
|
||||
<span key={subsystem.key}>{subsystem.subsystemName || subsystem.key}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const onRow = (record) => ({ className: `status-${getSubsystemState(record)}` })
|
||||
const objectToArray = (obj) => Object.entries(obj).filter(([_, v]) => v).map(([key, v]) => ({ key, ...v }))
|
||||
|
||||
const GeneralSubsystemStatistics = memo(() => {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [dates, setDates] = useState([null, null])
|
||||
const [data, setData] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const data = await SubsystemOperationTimeService.getStatByWell(dates?.[0]?.toISOString(), dates?.[1]?.toISOString())
|
||||
const out = arrayOrDefault(data).map(({ well, ...ss }) => ({ well, subsystems: objectToArray(ss) }))
|
||||
setData(out)
|
||||
},
|
||||
setIsLoading,
|
||||
'Не удалось загрузить статистику наработки подсистем',
|
||||
{ actionName: 'Загрузка статистики наработки подсистем' },
|
||||
)
|
||||
}, [dates])
|
||||
|
||||
const cards = useMemo(() => data.map((row) => {
|
||||
const state = getCardState(row.subsystems)
|
||||
|
||||
const card = (
|
||||
<Card className={`subsystem-card status-${state}`} key={row.well.id} title={getWellTitle(row.well)}>
|
||||
<div className={'subsystem-card-body'}>
|
||||
{state ? row.subsystems.map((ss) => generateSubsystem(ss)) : <Empty />}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
|
||||
if (!state) return card
|
||||
|
||||
return (
|
||||
<Popover
|
||||
title={(
|
||||
<>
|
||||
<span style={{ paddingRight: 15 }}>Детальная информация по скважине</span>
|
||||
<WellView well={row.well} />
|
||||
</>
|
||||
)}
|
||||
content={(
|
||||
<Table
|
||||
size={'small'}
|
||||
pagination={false}
|
||||
dataSource={row.subsystems}
|
||||
columns={columns}
|
||||
onRow={onRow}
|
||||
/>
|
||||
)}
|
||||
>{card}</Popover>
|
||||
)
|
||||
}), [data])
|
||||
|
||||
return (
|
||||
<LoaderPortal show={isLoading} style={{ flex: 1 }}>
|
||||
<div className={'statistics-adw-page'}>
|
||||
<div className={'filter-block'}>
|
||||
<span>Диапазон дат:</span>
|
||||
<DateRangeWrapper allowClear onChange={setDates} value={dates} />
|
||||
</div>
|
||||
<div className={'well-cards'}>{cards}</div>
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
)
|
||||
})
|
||||
|
||||
export default withPermissions(GeneralSubsystemStatistics, [])
|
||||
75
src/pages/Deposit/index.jsx
Normal file
75
src/pages/Deposit/index.jsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { Navigate, Route, Routes, useParams } from 'react-router-dom'
|
||||
import { lazy, memo, useEffect, useMemo } from 'react'
|
||||
|
||||
import { DepositContext, RootPathContext, useDepositList, useLayoutProps, useRootPath } from '@asb/context'
|
||||
import FastRunMenu from '@components/FastRunMenu'
|
||||
import { makeMenuBreadcrumbItemsRender } from '@components/MenuBreadcrumb'
|
||||
import { NoAccessComponent, withPermissions } from '@utils'
|
||||
|
||||
import { DepositNavigationMenu, menuItems } from './DepositNavigationMenu'
|
||||
|
||||
const Map = lazy(() => import('./Map'))
|
||||
const StatisticsADW = lazy(() => import('./StatisticsADW'))
|
||||
|
||||
const breadcrumb = makeMenuBreadcrumbItemsRender(menuItems, /^\/deposit\/[^\/#?]+\//)
|
||||
|
||||
const Deposit = memo(() => {
|
||||
const { '*': param } = useParams()
|
||||
|
||||
const setLayoutProps = useLayoutProps()
|
||||
const deposits = useDepositList()
|
||||
|
||||
const root = useRootPath()
|
||||
const rootPath = useMemo(() => `${root}/deposit`, [root])
|
||||
|
||||
const [idDeposit, isMap] = useMemo(() => {
|
||||
const result = /^([^\/#?]+)(:?\/([^\/#?]+))?/.exec(param)
|
||||
if (!result) return [null, false]
|
||||
console.log(result)
|
||||
return [
|
||||
result[1] !== 'null' ? Number(result[1]) : null,
|
||||
result[3] === 'map',
|
||||
]
|
||||
}, [param])
|
||||
|
||||
const deposit = useMemo(() => deposits.find((deposit) => deposit.id === idDeposit) || null, [deposits, idDeposit])
|
||||
|
||||
useEffect(() => {
|
||||
const key = idDeposit ? `/deposit/${idDeposit}` : null
|
||||
|
||||
const selectorProps = {
|
||||
expand: key ? [key] : true,
|
||||
current: key || undefined,
|
||||
}
|
||||
|
||||
setLayoutProps({
|
||||
breadcrumb: !isMap && breadcrumb,
|
||||
sheet: !isMap,
|
||||
sider: <DepositNavigationMenu variables={{ idDeposit: idDeposit }} />,
|
||||
showSelector: isMap,
|
||||
selectorProps,
|
||||
title: 'Месторождение',
|
||||
})
|
||||
}, [setLayoutProps, idDeposit, isMap])
|
||||
|
||||
return (
|
||||
<RootPathContext.Provider value={rootPath}>
|
||||
<DepositContext.Provider value={deposit}>
|
||||
<FastRunMenu />
|
||||
<Routes>
|
||||
<Route index element={<Navigate to={'null/'} />} />
|
||||
|
||||
<Route path={':idDeposit'}>
|
||||
<Route index element={<Navigate to={'map'} replace />} />
|
||||
<Route path={'*'} element={<NoAccessComponent />} />
|
||||
|
||||
<Route path={'map'} element={<Map />} />
|
||||
<Route path={'statistics_adw'} element={<StatisticsADW />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</DepositContext.Provider>
|
||||
</RootPathContext.Provider>
|
||||
)
|
||||
})
|
||||
|
||||
export default withPermissions(Deposit, [])
|
||||
@ -10,7 +10,7 @@ import { OperationStatService, WellOperationService } from '@api'
|
||||
import { arrayOrDefault, withPermissions } from '@utils'
|
||||
|
||||
import '@styles/index.css'
|
||||
import '@styles/statistics.less'
|
||||
import '@styles/pages/statistics.less'
|
||||
|
||||
const { Text } = Typography
|
||||
const { Summary } = RawTable
|
||||
@ -21,13 +21,13 @@ 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, (section => numericRender(section?.depth)), undefined, 100, {
|
||||
sorter: makeSectionSorter(key, 'depth'),
|
||||
}),
|
||||
makeNumericColumn('Время', key, null, null, (section => numericRender(section?.time)), 100, {
|
||||
makeNumericColumn('Время', key, (section => numericRender(section?.time)), undefined, 100, {
|
||||
sorter: makeSectionSorter(key, 'time'),
|
||||
}),
|
||||
makeNumericColumn((<>V<sub>рейсовая</sub></>), key, null, null, speedRender ?? speedNumericRender, 100, {
|
||||
makeNumericColumn((<>V<sub>рейсовая</sub></>), key, speedRender ?? speedNumericRender, undefined, 100, {
|
||||
sorter: makeSectionSorter(key, 'speed'),
|
||||
}),
|
||||
])
|
||||
@ -37,7 +37,7 @@ export const defaultColumns = [
|
||||
makeTextColumn('Скважина', 'caption', null, null, null, { fixed: 'left', width: 100 }),
|
||||
]
|
||||
|
||||
const scrollSettings = { scrollToFirstRowOnChange: true, x: 100, y: 200 }
|
||||
const scrollSettings = { scrollToFirstRowOnChange: true, x: 100, y: '25vh' }
|
||||
const summaryColSpan = 1 /// TODO: Когда добавится куст изменить на 2
|
||||
|
||||
const getWellData = async (wellsList) => {
|
||||
|
||||
@ -1,146 +0,0 @@
|
||||
import { memo, useCallback, useEffect, useState } from 'react'
|
||||
import { Button, Modal, Popconfirm } from 'antd'
|
||||
|
||||
import { useWell } from '@asb/context'
|
||||
import { makeColumn, makeGroupColumn, makeNumericRender, makeSelectColumn, Table } from '@components/Table'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { DrillParamsService, WellOperationService } from '@api'
|
||||
|
||||
const getDeepValue = (data, key) => {
|
||||
if (!key || key.trim() === '') return null
|
||||
const keys = key.split('.')
|
||||
let out = data
|
||||
while (keys.length > 0) {
|
||||
if (!(keys[0] in out)) return null
|
||||
out = out[keys[0]]
|
||||
keys.splice(0, 1)
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
const makeNumericSorter = (keys) => (a, b) => getDeepValue(a, keys) - getDeepValue(b, keys)
|
||||
|
||||
const numericRender = makeNumericRender(1)
|
||||
const makeNumericColumn = (title, dataIndex, render, other) => makeColumn(title, dataIndex, {
|
||||
sorter: makeNumericSorter(dataIndex),
|
||||
render: (_, record, index) => {
|
||||
const func = render ?? ((value) => <>{value}</>)
|
||||
const item = getDeepValue(record, dataIndex)
|
||||
return func(item, record, index)
|
||||
},
|
||||
align: 'right',
|
||||
...other,
|
||||
})
|
||||
|
||||
const makeAvgRender = (dataIndex) => (avg, record) => {
|
||||
const max = record[dataIndex]?.max
|
||||
const fillW = (max - avg) / max * 100
|
||||
return (
|
||||
<div className={'avg-column'}>
|
||||
<div className={'avg-fill'} style={{ width: `${fillW}%` }} />
|
||||
<div className={'avg-value'}>
|
||||
{numericRender(avg)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const makeNumericAvgRange = (title, dataIndex, defaultRender = false) => makeGroupColumn(title, [
|
||||
makeNumericColumn('мин', `${dataIndex}.min`),
|
||||
makeNumericColumn('сред', `${dataIndex}.avg`, defaultRender ? undefined : makeAvgRender(dataIndex)),
|
||||
makeNumericColumn('макс', `${dataIndex}.max`),
|
||||
])
|
||||
|
||||
export const getColumns = async (idWell) => {
|
||||
let sectionTypes = await WellOperationService.getSectionTypes(idWell)
|
||||
sectionTypes = Object.entries(sectionTypes).map(([id, value]) => ({
|
||||
label: value,
|
||||
value: id,
|
||||
}))
|
||||
|
||||
return [
|
||||
makeSelectColumn('Конструкция секции','idWellSectionType', sectionTypes, null, {
|
||||
width: 160,
|
||||
sorter: makeNumericSorter('idWellSectionType'),
|
||||
}),
|
||||
makeNumericAvgRange('Нагрузка, т', 'axialLoad'),
|
||||
makeNumericAvgRange('Давление, атм', 'pressure'),
|
||||
makeNumericAvgRange('Момент на ВСП, кН·м', 'rotorTorque', true),
|
||||
makeNumericAvgRange('Обороты на ВСП, об/мин', 'rotorSpeed'),
|
||||
makeNumericAvgRange('Расход, л/с', 'flow'),
|
||||
]
|
||||
}
|
||||
|
||||
export const NewParamsTable = memo(({ selectedWellsKeys }) => {
|
||||
const [params, setParams] = useState([])
|
||||
const [paramsColumns, setParamsColumns] = useState([])
|
||||
const [showParamsLoader, setShowParamsLoader] = useState(false)
|
||||
const [isParamsModalVisible, setIsParamsModalVisible] = useState(false)
|
||||
|
||||
const [well] = useWell()
|
||||
|
||||
useEffect(() => {
|
||||
invokeWebApiWrapperAsync(async () => setParamsColumns(await getColumns(well.id)))
|
||||
}, [well])
|
||||
|
||||
const onParamButtonClick = useCallback(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
setIsParamsModalVisible(true)
|
||||
const params = await DrillParamsService.getCompositeAll(well.id)
|
||||
setParams(params)
|
||||
},
|
||||
setShowParamsLoader,
|
||||
`Не удалось загрузить список режимов`,
|
||||
{ actionName: 'Получение списка режимов скважины', well }
|
||||
), [well])
|
||||
|
||||
const onParamsAddClick = useCallback(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
await DrillParamsService.save(well.id, params)
|
||||
setIsParamsModalVisible(false)
|
||||
},
|
||||
setShowParamsLoader,
|
||||
`Не удалось добавить режимы в список`,
|
||||
{ actionName: 'Добавление режима скважины', well }
|
||||
), [well, params])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
size={'large'}
|
||||
disabled={selectedWellsKeys.length <= 0}
|
||||
onClick={onParamButtonClick}
|
||||
>
|
||||
Заполнить режимы текущей скважины
|
||||
</Button>
|
||||
<Modal
|
||||
title={'Заполнить режимы текущей скважины'}
|
||||
centered
|
||||
open={isParamsModalVisible}
|
||||
onCancel={() => setIsParamsModalVisible(false)}
|
||||
width={1700}
|
||||
footer={(
|
||||
<Popconfirm title={'Заменить существующие режимы выбранными?'} onConfirm={onParamsAddClick}>
|
||||
<Button
|
||||
size={'large'}
|
||||
disabled={params.length <= 0}
|
||||
>Сохранить</Button>
|
||||
</Popconfirm>
|
||||
)}
|
||||
>
|
||||
<LoaderPortal show={showParamsLoader}>
|
||||
<Table
|
||||
bordered
|
||||
size={'small'}
|
||||
columns={paramsColumns}
|
||||
dataSource={params}
|
||||
pagination={false}
|
||||
/>
|
||||
</LoaderPortal>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export default NewParamsTable
|
||||
@ -1,12 +1,13 @@
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { useState, useEffect, memo, useMemo, lazy, Suspense } from 'react'
|
||||
import { LineChartOutlined, ProfileOutlined, TeamOutlined } from '@ant-design/icons'
|
||||
import { Table, Button, Badge, Divider, Modal, Row, Col } from 'antd'
|
||||
import { Button, Badge, Divider, Modal } from 'antd'
|
||||
|
||||
import { useWell } from '@asb/context'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import SuspenseFallback from '@components/SuspenseFallback'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { makeTextColumn, makeNumericColumnPlanFact, makeNumericColumn } from '@components/Table'
|
||||
import { Table, makeTextColumn, makeNumericColumnPlanFactOld, makeNumericColumn } from '@components/Table'
|
||||
import { WellCompositeService } from '@api'
|
||||
import {
|
||||
hasPermission,
|
||||
@ -16,8 +17,6 @@ import {
|
||||
getOperations
|
||||
} from '@utils'
|
||||
|
||||
import NewParamsTable from './NewParamsTable'
|
||||
import SuspenseFallback from '@asb/components/SuspenseFallback'
|
||||
|
||||
const Tvd = lazy(() => import('@pages/Well/WellOperations/Tvd'))
|
||||
const CompaniesTable = lazy(() => import('@pages/Cluster/CompaniesTable'))
|
||||
@ -146,15 +145,15 @@ const WellCompositeSections = memo(({ statsWells, selectedSections }) => {
|
||||
makeTextColumn('скв №', 'caption', null, null,
|
||||
(text, item) => <Link to={{ pathname: `/well/${item?.id}`, state: { from: location.pathname }}}>{text ?? '-'}</Link>
|
||||
),
|
||||
makeTextColumn('Секция', 'sectionType', filtersSectionsType, sortBySectionId, (text) => text ?? '-'),
|
||||
makeNumericColumnPlanFact('Глубина, м', 'sectionWellDepth', filtersMinMax, makeFilterMinMaxFunction),
|
||||
makeNumericColumnPlanFact('Продолжительность, ч', 'sectionBuildDays', filtersMinMax, makeFilterMinMaxFunction),
|
||||
makeNumericColumnPlanFact('МСП, м/ч', 'sectionRateOfPenetration', filtersMinMax, makeFilterMinMaxFunction),
|
||||
makeNumericColumnPlanFact('Рейсовая скорость, м/ч', 'sectionRouteSpeed', filtersMinMax, makeFilterMinMaxFunction),
|
||||
makeNumericColumnPlanFact('Спуск КНБК, м/ч', 'sectionBhaDownSpeed', filtersMinMax, makeFilterMinMaxFunction),
|
||||
makeNumericColumnPlanFact('Подъем КНБК, м/ч', 'sectionBhaUpSpeed', filtersMinMax, makeFilterMinMaxFunction),
|
||||
makeNumericColumnPlanFact('Скорость спуска ОК, м/ч', 'sectionCasingDownSpeed', filtersMinMax, makeFilterMinMaxFunction),
|
||||
makeNumericColumn('НПВ, ч', 'nonProductiveHours', filtersMinMax, makeFilterMinMaxFunction, null, '80px'),
|
||||
makeTextColumn('Секция', 'sectionType', filtersSectionsType, sortBySectionId, (text) => text ?? '-', { width: 100 }),
|
||||
makeNumericColumnPlanFactOld('Глубина, м', 'sectionWellDepth', undefined, makeFilterMinMaxFunction, undefined, { filters: filtersMinMax }),
|
||||
makeNumericColumnPlanFactOld('Продолжительность, ч', 'sectionBuildDays', undefined, makeFilterMinMaxFunction, undefined, { filters: filtersMinMax }),
|
||||
makeNumericColumnPlanFactOld('МСП, м/ч', 'sectionRateOfPenetration', undefined, makeFilterMinMaxFunction, undefined, { filters: filtersMinMax }),
|
||||
makeNumericColumnPlanFactOld('Рейсовая скорость, м/ч', 'sectionRouteSpeed', undefined, makeFilterMinMaxFunction, undefined, { filters: filtersMinMax }),
|
||||
makeNumericColumnPlanFactOld('Спуск КНБК, м/ч', 'sectionBhaDownSpeed', undefined, makeFilterMinMaxFunction, undefined, { filters: filtersMinMax }),
|
||||
makeNumericColumnPlanFactOld('Подъем КНБК, м/ч', 'sectionBhaUpSpeed', undefined, makeFilterMinMaxFunction, undefined, { filters: filtersMinMax }),
|
||||
makeNumericColumnPlanFactOld('Скорость спуска ОК, м/ч', 'sectionCasingDownSpeed', undefined, makeFilterMinMaxFunction, undefined, { filters: filtersMinMax }),
|
||||
makeNumericColumn('НПВ, ч', 'nonProductiveHours', undefined, makeFilterMinMaxFunction, '80px', { filters: filtersMinMax }),
|
||||
{
|
||||
title: 'TVD',
|
||||
render: (value) => (
|
||||
@ -200,11 +199,11 @@ const WellCompositeSections = memo(({ statsWells, selectedSections }) => {
|
||||
dataSource={rows}
|
||||
size={'small'}
|
||||
bordered
|
||||
scroll={{ x: true, y: 620 }}
|
||||
scroll={{ x: true, y: '30vh' }}
|
||||
rowSelection={rowSelection}
|
||||
pagination={false}
|
||||
/>
|
||||
<Divider />
|
||||
<Divider style={{ marginTop: 0 }} />
|
||||
<Badge.Ribbon text={'комбинированная скважина'} color={'gray'}>
|
||||
<h3>Выбранные секции</h3>
|
||||
</Badge.Ribbon>
|
||||
@ -214,12 +213,9 @@ const WellCompositeSections = memo(({ statsWells, selectedSections }) => {
|
||||
rowSelection={rowSelection}
|
||||
size={'small'}
|
||||
bordered
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true, y: '30vh' }}
|
||||
pagination={false}
|
||||
/>
|
||||
<Row justify={'end'} style={{ margin: '1rem 0' }}>
|
||||
<Col><NewParamsTable selectedWellsKeys={selectedWellsKeys} /></Col>
|
||||
</Row>
|
||||
|
||||
<Modal
|
||||
title={'TVD'}
|
||||
|
||||
@ -12,7 +12,7 @@ import { OperationStatService, WellCompositeService } from '@api'
|
||||
|
||||
import WellCompositeSections from './WellCompositeSections'
|
||||
|
||||
import '@styles/well_composite.less'
|
||||
import '@styles/pages/well_composite.less'
|
||||
|
||||
const ClusterWells = lazy(() => import('@pages/Cluster/ClusterWells'))
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ export const DocumentsTemplate = ({ idCategory, well: givenWell, mimeTypes, head
|
||||
),
|
||||
},
|
||||
makeDateColumn('Дата загрузки', 'uploadDate'),
|
||||
makeNumericColumn('Размер', 'size', null, null, (value) => formatBytes(value)),
|
||||
makeNumericColumn('Размер', 'size', (value) => formatBytes(value)),
|
||||
makeColumn('Автор', 'author', { render: item => <UserView user={item}/> }),
|
||||
makeColumn('Компания', 'company', { render: (_, record) => <CompanyView company={record?.author?.company}/> }),
|
||||
...(customColumns ?? [])
|
||||
|
||||
@ -8,7 +8,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { DrillingProgramService } from '@api'
|
||||
|
||||
|
||||
import '@styles/drilling_program.less'
|
||||
import '@styles/pages/drilling_program.less'
|
||||
|
||||
const catSelectorRules = [{
|
||||
required: true,
|
||||
|
||||
@ -12,7 +12,7 @@ import { FileService } from '@api'
|
||||
|
||||
import MarksCard from './MarksCard'
|
||||
|
||||
import '@styles/drilling_program.less'
|
||||
import '@styles/pages/drilling_program.less'
|
||||
|
||||
const { RangePicker } = DatePicker
|
||||
const { Search } = Input
|
||||
@ -74,7 +74,7 @@ export const CategoryHistory = ({ idCategory, visible, onClose }) => {
|
||||
const [begin, end] = range?.length > 1 ? [range[0].toISOString(), range[1].toISOString()] : [null, null]
|
||||
const skip = (page - 1) * pageSize
|
||||
|
||||
const paginatedHistory = await FileService.getFilesInfo(well.caption, idCategory, companyName, fileName, begin, end, false, skip, pageSize)
|
||||
const paginatedHistory = await FileService.getFilesInfo(well.id, idCategory, companyName, fileName, begin, end, false, skip, pageSize)
|
||||
setTotal(paginatedHistory?.count ?? 0)
|
||||
setData(arrayOrDefault(paginatedHistory?.items))
|
||||
},
|
||||
|
||||
@ -18,7 +18,7 @@ import { formatDate, MimeTypes } from '@utils'
|
||||
|
||||
import MarksCard from './MarksCard'
|
||||
|
||||
import '@styles/drilling_program.less'
|
||||
import '@styles/pages/drilling_program.less'
|
||||
|
||||
const CommentPrompt = memo(({ isRequired = true, ...props }) => (
|
||||
<Poprompt
|
||||
|
||||
@ -21,7 +21,7 @@ import CategoryRender from './CategoryRender'
|
||||
import CategoryEditor from './CategoryEditor'
|
||||
import CategoryHistory from './CategoryHistory'
|
||||
|
||||
import '@styles/drilling_program.less'
|
||||
import '@styles/pages/drilling_program.less'
|
||||
|
||||
const ID_STATE = {
|
||||
NotInitialized: 0,
|
||||
|
||||
@ -18,7 +18,7 @@ import { MeasureService } from '@api'
|
||||
import { View } from './View'
|
||||
|
||||
import '@styles/index.css'
|
||||
import '@styles/measure.css'
|
||||
import '@styles/pages/measure.css'
|
||||
|
||||
const createEditingColumns = (cols, renderDelegate) =>
|
||||
cols.map(col => col.map(col => ({ render: renderDelegate, ...col })))
|
||||
|
||||
@ -4,13 +4,13 @@ import { Empty, Form } from 'antd'
|
||||
import { Grid, GridItem } from '@components/Grid'
|
||||
|
||||
import '@styles/index.css'
|
||||
import '@styles/measure.css'
|
||||
import '@styles/pages/measure.css'
|
||||
|
||||
export const View = memo(({ columns, item }) => !item || !columns?.length ? (
|
||||
<Empty key={'empty'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
) : (
|
||||
<Grid>
|
||||
{columns.map((cols, i) => {
|
||||
{columns.flatMap((cols, i) => {
|
||||
const columnPosition = 1 + i * 2
|
||||
return cols.map((column, j) => (
|
||||
<Fragment key={column.key}>
|
||||
@ -46,6 +46,6 @@ export const View = memo(({ columns, item }) => !item || !columns?.length ? (
|
||||
</GridItem>
|
||||
</Fragment>
|
||||
))
|
||||
}).flat()}
|
||||
})}
|
||||
</Grid>
|
||||
))
|
||||
|
||||
@ -2,7 +2,7 @@ import { Input } from 'antd'
|
||||
|
||||
import { RegExpIsFloat } from '@components/Table'
|
||||
|
||||
import '@styles/measure.css'
|
||||
import '@styles/pages/measure.css'
|
||||
|
||||
export const v = (text) => (
|
||||
<div className={'v-div'}>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { DatePicker, Descriptions, Form, Input, InputNumber, Modal, Table, Tabs } from 'antd'
|
||||
import { DatePicker, Descriptions, Form, Input, InputNumber, Modal, Table as RawTable, Tabs } from 'antd'
|
||||
import { memo, useCallback, useEffect, useState } from 'react'
|
||||
import moment from 'moment'
|
||||
|
||||
import { useWell } from '@asb/context'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { makeColumn, makeGroupColumn } from '@components/Table'
|
||||
import { Table, makeColumn, makeGroupColumn } from '@components/Table'
|
||||
import { DailyReportService } from '@api'
|
||||
|
||||
const { Item: RawItem } = Form
|
||||
const { Summary } = Table
|
||||
const { Summary } = RawTable
|
||||
const { TabPane } = Tabs
|
||||
|
||||
const Item = memo(({ style, ...other }) => <RawItem style={{ margin: 0, ...style }} {...other} />)
|
||||
|
||||
@ -1,268 +0,0 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useState, useEffect, memo, useCallback, useMemo } from 'react'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import { Select } from 'antd'
|
||||
|
||||
import { useWell } from '@asb/context'
|
||||
import { Flex } from '@components/Grid'
|
||||
import { D3MonitoringCharts } from '@components/d3/monitoring'
|
||||
import { CopyUrlButton } from '@components/CopyUrl'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { DatePickerWrapper, makeDateSorter } from '@components/Table'
|
||||
import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
|
||||
import { formatDate, range, withPermissions } from '@utils'
|
||||
import { TelemetryDataSaubService } from '@api'
|
||||
|
||||
import { makeChartGroups, normalizeData, yAxis } from '../TelemetryView'
|
||||
import cursorRender from '../TelemetryView/cursorRender'
|
||||
|
||||
const DATA_COUNT = 2048 // Колличество точек на подгрузку графика
|
||||
const ADDITIVE_PAGES = 2 // Дополнительные данные для графиков
|
||||
const LOADING_TRIGGER = 0.5
|
||||
|
||||
const scrollOptions = [
|
||||
{ label: '10%', value: 0.1 },
|
||||
{ label: '15%', value: 0.15 },
|
||||
{ label: '25%', value: 0.25 },
|
||||
]
|
||||
|
||||
const getLoadingInterval = (loaded, startDate, interval) => {
|
||||
// Если данные загружены и дата не заходит за тригер дозагрузка не требуется
|
||||
if (
|
||||
loaded &&
|
||||
+startDate - interval * LOADING_TRIGGER > loaded.start &&
|
||||
+startDate + interval * (LOADING_TRIGGER + 1) < loaded.end
|
||||
)
|
||||
return { loadingStartDate: startDate, newLoaded: loaded, loadingInterval: 0 }
|
||||
|
||||
let loadingStartDate = +startDate - interval * ADDITIVE_PAGES
|
||||
let loadingEndDate = +startDate + interval * (ADDITIVE_PAGES + 1)
|
||||
|
||||
const newLoaded = {
|
||||
start: loadingStartDate,
|
||||
end: loadingEndDate
|
||||
}
|
||||
|
||||
if (loaded) {
|
||||
if (loadingStartDate >= loaded.start)
|
||||
loadingStartDate = loaded.end
|
||||
if (loadingEndDate <= loaded.end)
|
||||
loadingEndDate = loaded.start
|
||||
newLoaded.start = Math.min(loaded.start, loadingStartDate)
|
||||
newLoaded.end = Math.max(loaded.end, loadingEndDate)
|
||||
}
|
||||
|
||||
const loadingInterval = Math.trunc((loadingEndDate - loadingStartDate) / 1000)
|
||||
|
||||
return {
|
||||
loadingStartDate: new Date(loadingStartDate),
|
||||
newLoaded: {
|
||||
start: new Date(newLoaded.start),
|
||||
end: new Date(newLoaded.end)
|
||||
},
|
||||
loadingInterval
|
||||
}
|
||||
}
|
||||
|
||||
const interpolationSearch = (data, begin, end, accessor) => {
|
||||
const fy = (i) => new Date(data[i]?.[accessor] ?? 0)
|
||||
const fx = (y, b, e) => Math.round(b + (y - fy(b)) * (e - b) / (fy(e) - fy(b)))
|
||||
const findIdx = (val, startIdx, c) => {
|
||||
let x = startIdx
|
||||
let endIdx = data.length - 1
|
||||
if(val < fy(startIdx))
|
||||
return startIdx
|
||||
if(val > fy(endIdx))
|
||||
return endIdx
|
||||
for(let i = 0; i < c; i++){
|
||||
x = fx(val, startIdx, endIdx)
|
||||
if(fy(x) < val)
|
||||
startIdx = x
|
||||
else
|
||||
endIdx = x
|
||||
if ((startIdx === endIdx)||(fy(startIdx) === fy(endIdx)))
|
||||
return x
|
||||
}
|
||||
return x
|
||||
}
|
||||
let x0 = findIdx(begin, 0, 100)
|
||||
let x1 = findIdx(end, x0, 100)
|
||||
return { start: x0, end: x1, count: x1 - x0 }
|
||||
}
|
||||
|
||||
export const cutData = (data, beginDate, endDate) => {
|
||||
if (data?.length > 0) {
|
||||
let { start, end } = interpolationSearch(data, beginDate, endDate, 'date')
|
||||
if (start > 0) start--
|
||||
if (end + 1 < end.length) end++
|
||||
return data.slice(start, end)
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
const chartGroups = makeChartGroups([])
|
||||
|
||||
const Archive = memo(() => {
|
||||
const [dataSaub, setDataSaub] = useState([])
|
||||
const [dateLimit, setDateLimit] = useState({ from: 0, to: new Date() })
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
const [loaded, setLoaded] = useState(null)
|
||||
|
||||
const [well] = useWell()
|
||||
const [search, setSearchParams] = useSearchParams()
|
||||
|
||||
const getInitialRange = useCallback(() => parseInt(search.get('range') ?? defaultPeriod) * 1000, [search])
|
||||
|
||||
const [scrollPercent, setScrollPercent] = useState(0.15)
|
||||
const [chartInterval, setChartInterval] = useState(getInitialRange)
|
||||
const getInitialDate = useCallback(() => new Date(search.get('start') ?? (Date.now() - chartInterval)), [search, chartInterval])
|
||||
const [startDate, setStartDate] = useState(getInitialDate)
|
||||
|
||||
const onGraphWheel = useCallback((e) => {
|
||||
if (loaded && dateLimit.from && dateLimit.to) {
|
||||
setStartDate((prevStartDate) => {
|
||||
const offset = e.deltaY / 100 * chartInterval * scrollPercent
|
||||
const nextStartDate = +prevStartDate + offset
|
||||
const firstPossibleDate = Math.max(loaded.start, dateLimit.from)
|
||||
const lastPossibleDate = Math.min(dateLimit.to, (loaded.end ?? Date.now())) - chartInterval
|
||||
return new Date(Math.max(firstPossibleDate, Math.min(nextStartDate, lastPossibleDate)))
|
||||
})
|
||||
}
|
||||
}, [loaded, dateLimit, chartInterval, scrollPercent])
|
||||
|
||||
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
|
||||
}, [dateLimit, chartInterval])
|
||||
|
||||
const isDateTimeDisabled = useCallback((date) => ({
|
||||
disabledHours: () => range(24).filter(h => {
|
||||
if (!date) return false
|
||||
const dt = +new Date(date).setHours(h)
|
||||
return dt < dateLimit.from || dt > +dateLimit.to - chartInterval
|
||||
}),
|
||||
disabledMinutes: () => range(60).filter(m => {
|
||||
if (!date) return false
|
||||
const dt = +new Date(date).setMinutes(m)
|
||||
return dt < dateLimit.from || dt > +dateLimit.to - chartInterval
|
||||
}),
|
||||
disabledSeconds: () => range(60).filter(s => {
|
||||
if (!date) return false
|
||||
const dt = +new Date(date).setSeconds(s)
|
||||
return dt < dateLimit.from || dt > +dateLimit.to - chartInterval
|
||||
})
|
||||
}), [dateLimit, chartInterval])
|
||||
|
||||
useEffect(() => {
|
||||
const params = {}
|
||||
if (startDate)
|
||||
params.start = startDate.toISOString()
|
||||
if (chartInterval)
|
||||
params.range = chartInterval / 1000
|
||||
setSearchParams(params)
|
||||
}, [startDate, chartInterval])
|
||||
|
||||
useEffect(() => {
|
||||
invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
let dates = await TelemetryDataSaubService.getDataDatesRange(well.id)
|
||||
dates = {
|
||||
from: new Date(dates?.from ?? 0),
|
||||
to: new Date(dates?.to ?? 0)
|
||||
}
|
||||
setDateLimit(dates)
|
||||
},
|
||||
setShowLoader,
|
||||
`Не удалось загрузить диапозон телеметрии`,
|
||||
{ actionName: 'Загрузка диапозона телеметрии', well }
|
||||
)
|
||||
}, [well])
|
||||
|
||||
useEffect(() => {
|
||||
setStartDate((prev) => new Date(Math.max(dateLimit.from, Math.min(+prev, +dateLimit.to - chartInterval))))
|
||||
}, [chartInterval, dateLimit])
|
||||
|
||||
useEffect(() => {
|
||||
if (showLoader) return
|
||||
const { loadingStartDate, loadingInterval, newLoaded } = getLoadingInterval(loaded, startDate, chartInterval)
|
||||
if (loadingInterval <= 0) return
|
||||
invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const data = await TelemetryDataSaubService.getData(well.id, loadingStartDate.toISOString(), loadingInterval, DATA_COUNT)
|
||||
|
||||
const loadedStartDate = new Date(Math.max(+newLoaded.start, +startDate - chartInterval * ADDITIVE_PAGES))
|
||||
const loadedEndDate = new Date(Math.min(+newLoaded.end, +startDate + chartInterval * (ADDITIVE_PAGES + 1)))
|
||||
setLoaded({ start: loadedStartDate, end: loadedEndDate })
|
||||
|
||||
if (data) {
|
||||
data.forEach(elm => elm.date = new Date(elm.date))
|
||||
setDataSaub((prevDataSaub) => {
|
||||
const newData = [...prevDataSaub, ...normalizeData(data)]
|
||||
newData.sort(makeDateSorter('date'))
|
||||
return cutData(newData, loadedStartDate, loadedEndDate)
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
setShowLoader,
|
||||
`Не удалось загрузить данные c ${formatDate(startDate)} по ${formatDate(+startDate + chartInterval)}`,
|
||||
{ actionName: 'Загрузка телеметрий в диапозоне', well }
|
||||
)
|
||||
}, [well, chartInterval, loaded, startDate])
|
||||
|
||||
const onRangeChange = useCallback((value) => {
|
||||
setChartInterval(value * 1000)
|
||||
setDataSaub([])
|
||||
setLoaded(null)
|
||||
}, [])
|
||||
|
||||
const domain = useMemo(() => ({ min: startDate, max: new Date(+startDate + chartInterval)}), [startDate, chartInterval])
|
||||
const chartData = useMemo(() => cutData(dataSaub, domain.min, domain.max), [dataSaub, domain])
|
||||
|
||||
return (
|
||||
<LoaderPortal show={showLoader}>
|
||||
<Flex style={{margin: '8px 8px 0'}}>
|
||||
<div>
|
||||
Начальная дата:
|
||||
<DatePickerWrapper
|
||||
value={startDate}
|
||||
disabledDate={isDateDisabled}
|
||||
disabledTime={isDateTimeDisabled}
|
||||
onChange={(startDate) => setStartDate(new Date(startDate))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginLeft: '1rem' }}>
|
||||
Период:
|
||||
<PeriodPicker value={chartInterval / 1000} onChange={onRangeChange} />
|
||||
</div>
|
||||
<div style={{ marginLeft: '1rem' }}>
|
||||
Прокрутка:
|
||||
<Select options={scrollOptions} value={scrollPercent} onChange={setScrollPercent} />
|
||||
</div>
|
||||
<CopyUrlButton style={{ marginLeft: '1rem' }} />
|
||||
</Flex>
|
||||
<D3MonitoringCharts
|
||||
datasetGroups={chartGroups}
|
||||
data={chartData}
|
||||
yDomain={domain}
|
||||
yAxis={yAxis}
|
||||
yTicks={{
|
||||
visible: true,
|
||||
format: (d) => formatDate(d)
|
||||
}}
|
||||
plugins={{
|
||||
menu: { enabled: false },
|
||||
cursor: {
|
||||
render: cursorRender,
|
||||
}
|
||||
}}
|
||||
height={'76vh'}
|
||||
onWheel={onGraphWheel}
|
||||
/>
|
||||
</LoaderPortal>
|
||||
)
|
||||
})
|
||||
|
||||
export default withPermissions(Archive, ['TelemetryDataSaub.get'])
|
||||
@ -22,7 +22,7 @@ import {
|
||||
import AddGroupWindow from './AddGroupWindow'
|
||||
import AddWidgetWindow, { makeWidgetFromWits } from './AddWidgetWindow'
|
||||
|
||||
import '@styles/dashboard_nnb.less'
|
||||
import '@styles/pages/dashboard_nnb.less'
|
||||
|
||||
const getWitsInfo = async () => {
|
||||
// TODO: Добавить expire с принудительным обновлением
|
||||
|
||||
@ -11,8 +11,8 @@ import { makeColumn, makeDateColumn, makeNumericColumn, makeNumericSorter, makeT
|
||||
import { withPermissions } from '@utils'
|
||||
import { MessageService } from '@api'
|
||||
|
||||
import '@styles/filter.less'
|
||||
import '@styles/message.less'
|
||||
import '@styles/components/filter.less'
|
||||
import '@styles/pages/message.less'
|
||||
|
||||
const pageSize = 26
|
||||
const { Search } = Input
|
||||
@ -28,19 +28,19 @@ const categoryDictionary = {
|
||||
|
||||
// Конфигурация таблицы
|
||||
export const makeMessageColumns = (idWell) => [
|
||||
makeDateColumn('Дата', 'date', undefined, undefined, { width: '10rem' }),
|
||||
makeNumericColumn('Глубина, м', 'wellDepth', null, null, (depth, item) => (
|
||||
makeDateColumn('Дата', 'date', undefined, undefined, { width: '120px' }),
|
||||
makeNumericColumn('Глубина, м', 'wellDepth', (depth, item) => (
|
||||
<Tooltip title={'Нажмите для перехода в архив'}>
|
||||
<Link
|
||||
style={{ color: 'inherit'}}
|
||||
to={`/well/${idWell}/telemetry/archive?range=1800&start=${moment(item?.date).subtract(3, 'minute').local().toISOString()}`}
|
||||
to={`/well/${idWell}/telemetry/monitoring?range=1800&start=${moment(item?.date).subtract(3, 'minute').local().toISOString()}`}
|
||||
>
|
||||
<LinkOutlined />
|
||||
|
||||
{depth.toFixed(2)}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
), '7rem'),
|
||||
), undefined, '7rem'),
|
||||
makeColumn('Категория', 'categoryId', {
|
||||
width: '8rem',
|
||||
render: (_, item) => categoryDictionary[item.categoryId].title,
|
||||
@ -50,7 +50,7 @@ export const makeMessageColumns = (idWell) => [
|
||||
ellipsis: true,
|
||||
}),
|
||||
makeColumn('Сообщение', 'message', { onFilter: (value, record) => record.name.indexOf(value) === 0 }),
|
||||
makeTextColumn('Пользователь', 'user', null, null, null, { width: '10rem' }),
|
||||
makeTextColumn('Пользователь', 'user', null, null, null, { width: '120px' }),
|
||||
]
|
||||
|
||||
const filterOptions = [
|
||||
|
||||
@ -10,8 +10,8 @@ import { DateRangeWrapper, makeColumn, makeNumericColumn, makeNumericRender, mak
|
||||
import { arrayOrDefault, range, withPermissions } from '@utils'
|
||||
import { SubsystemOperationTimeService } from '@api'
|
||||
|
||||
import '@styles/filter.less'
|
||||
import '@styles/operation_time.less'
|
||||
import '@styles/components/filter.less'
|
||||
import '@styles/pages/operation_time.less'
|
||||
|
||||
const subsystemColors = [
|
||||
'#1abc9c', '#16a085', '#2ecc71', '#27ae60',
|
||||
@ -26,10 +26,10 @@ const tableColumns = [
|
||||
<div className={'table_color'} style={{ backgroundColor }} />
|
||||
)}),
|
||||
makeTextColumn('Подсистема', 'subsystemName'),
|
||||
makeNumericColumn('Использование, %', 'kUsage', undefined, undefined, val => (+val * 100).toFixed(2), 200),
|
||||
makeNumericColumn('Проходка, м', 'sumDepthInterval', undefined, undefined, undefined, 200),
|
||||
makeNumericColumn('Время работы, ч', 'usedTimeHours', undefined, undefined, undefined, 200),
|
||||
makeNumericColumn('Кол-во запусков', 'operationCount', undefined, undefined, makeNumericRender(0), 200),
|
||||
makeNumericColumn('Использование, %', 'kUsage', val => (+val * 100).toFixed(2), undefined, 200),
|
||||
makeNumericColumn('Проходка, м', 'sumDepthInterval', undefined, undefined, 200),
|
||||
makeNumericColumn('Время работы, ч', 'usedTimeHours', undefined, undefined, 200),
|
||||
makeNumericColumn('Кол-во запусков', 'operationCount', makeNumericRender(0), undefined, 200),
|
||||
]
|
||||
|
||||
// Выбор доступен только до текущей даты
|
||||
|
||||
@ -5,14 +5,13 @@ import { EditableTable, makeTextColumn } from '@components/Table'
|
||||
import { DrillerService } from '@api'
|
||||
|
||||
const columnOptions = {
|
||||
editable: true,
|
||||
formItemRules: [{ message: 'Обязательное поле!', required: true }]
|
||||
}
|
||||
|
||||
const columns = [
|
||||
makeTextColumn('Фамилия', 'surname', undefined, undefined, undefined, columnOptions),
|
||||
makeTextColumn('Имя', 'name', undefined, undefined, undefined, columnOptions),
|
||||
makeTextColumn('Отчество', 'patronymic', undefined, undefined, undefined, { editable: true }),
|
||||
makeTextColumn('Отчество', 'patronymic'),
|
||||
]
|
||||
|
||||
const rowClassName = (record) => record.has ? 'driller_list_active' : ''
|
||||
|
||||
@ -14,7 +14,6 @@ import { arrayOrDefault } from '@utils'
|
||||
import { ScheduleService } from '@api'
|
||||
|
||||
const columnOptions = {
|
||||
editable: true,
|
||||
formItemRules: [{ message: 'Обязательное поле!', required: true }]
|
||||
}
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user