* Добавлен селектор категорий определяемых операций

* Добавлено отображение сообщения при отсутсвии данных для графика

src/pages/Telemetry/Operations/index.jsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { InputNumber } from 'antd'
+import { Empty, InputNumber, Select } from 'antd'
 import moment from 'moment'
 
 import { useIdWell } from '@asb/context'
@@ -22,9 +22,11 @@ const Operations = memo(() => {
     const [dateRange, setDateRange] = useState([])
     const [yDomain, setYDomain] = useState(20)
     const [dates, setDates] = useState()
-    const [data, setData] = useState({ operations: [], stats: [] })
+    const [data, setData] = useState({})
     const [drillers, setDrillers] = useState([])
     const [drillersLoader, setDrillersLoader] = useState(false)
+    const [selectedCategory, setSelectedCategory] = useState(14)
+    const [categories, setCategories] = useState()
 
     const idWell = useIdWell()
 
@@ -51,13 +53,13 @@ const Operations = memo(() => {
     const updateData = useCallback(async () => invokeWebApiWrapperAsync(
         async () => {
             if (!dates) return
-            const data = await DetectedOperationService.get(idWell, undefined, dates[0].toISOString(), dates[1].toISOString())
+            const data = await DetectedOperationService.get(idWell, selectedCategory, dates[0].toISOString(), dates[1].toISOString())
             setData(data)
         },
         setIsLoading,
         'Не удалось загрузить список определённых операций',
         'Получение списка определённых операций',
-    ), [idWell, dates])
+    ), [idWell, dates, selectedCategory])
 
     useEffect(() => {
         if (permissions.driller.get)
@@ -67,6 +69,9 @@ const Operations = memo(() => {
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {
+                const categories = arrayOrDefault(await DetectedOperationService.getCategories(idWell))
+                setCategories(categories.map(({ id, name }) => ({ value: id, label: name })))
+
                 const dates = await TelemetryDataSaubService.getDataDatesRange(idWell)
                 if (dates) {
                     const dt = [moment(dates.from), moment(dates.to)]
@@ -87,6 +92,13 @@ const Operations = memo(() => {
     return (
         <div className={'container detected-operations-page'}>
             <div className={'page-top'}>
+                <Select
+                    allowClear={false}
+                    options={categories}
+                    style={{ marginRight: '10px' }}
+                    onChange={(v) => setSelectedCategory(v)}
+                    value={selectedCategory}
+                />
                 <DateRangeWrapper
                     value={dates}
                     onChange={setDates}
@@ -117,7 +129,13 @@ const Operations = memo(() => {
             </div>
             <LoaderPortal show={isLoading}>
                 <div className={'page-main'}>
-                    <OperationsChart data={data.operations} height={'50vh'} yDomain={yDomain} />
+                    {data.operations ? (
+                        <OperationsChart data={data.operations} height={'50vh'} yDomain={yDomain} />
+                    ) : (
+                        <div style={{ display: 'flex', height: '50vh', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
+                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                        </div>
+                    )}
                     <OperationsTable data={data.stats} height={'20vh'} />
                 </div>
             </LoaderPortal>
@@ -127,7 +145,7 @@ const Operations = memo(() => {
 
 export default wrapPrivateComponent(Operations, {
     requirements: [
-        // 'DetectedOperation.get',
+        'DetectedOperation.get',
         'TelemetryDataSaub.get',
     ],
     title: 'Операции',