Добавлена сноска "Талевый канат" на страницу мониторинга

src/components/views/WirelineView.tsx

@@ -0,0 +1,50 @@
+import { Fragment, memo } from 'react'
+import { Button, ButtonProps, Tooltip, TooltipProps } from 'antd'
+
+import { TelemetryWirelineRunOutDto } from '@api'
+import { Grid, GridItem } from '../Grid'
+import { formatDate } from '@utils'
+
+const lables: Record<keyof TelemetryWirelineRunOutDto, string | {
+    label?: string,
+    formatter?: (v: any) => any,
+}> = {
+    dateTime: { label: 'Данные актуальны на', formatter: formatDate },
+    hauling: 'Наработка талевого каната с момента перетяжки каната, т*км',
+    haulingWarnSp: 'Наработка талевого каната до сигнализации о необходимости перетяжки, т*км',
+    replace: 'Наработка талевого каната с момента замены каната, т*км',
+    replaceWarnSp: 'Наработка талевого каната до сигнализации о необходимости замены, т*км',
+}
+
+export type WirelineViewProps = TooltipProps & {
+    wireline?: TelemetryWirelineRunOutDto
+    buttonProps?: ButtonProps
+}
+
+export const WirelineView = memo<WirelineViewProps>(({ wireline, buttonProps, ...other }) => (
+    <Tooltip
+        {...other}
+        title={wireline ? (
+            <Grid>
+                {(Object.keys(wireline) as Array<keyof TelemetryWirelineRunOutDto>).map((key, i) => {
+                    const label = lables[key]
+                    return typeof label === 'string' ? (
+                        <Fragment key={i}>
+                            <GridItem row={i+1} col={1}>{label}:</GridItem>
+                            <GridItem row={i+1} col={2}>{wireline[key]}</GridItem>
+                        </Fragment>
+                    ) : (
+                        <Fragment key={i}>
+                            <GridItem row={i+1} col={1}>{label?.label ?? key}:</GridItem>
+                            <GridItem row={i+1} col={2}>{label?.formatter?.(wireline?.[key]) ?? wireline?.[key]}</GridItem>
+                        </Fragment>
+                    )
+                })}
+            </Grid>
+        ) : 'Нет данных'}
+    >
+        <Button type={'link'} {...buttonProps}>Талевый канат</Button>
+    </Tooltip>
+))
+
+export default WirelineView

src/components/views/index.ts

@@ -3,9 +3,11 @@ export type { TelemetryViewProps } from './TelemetryView'
 export type { CompanyViewProps } from './CompanyView'
 export type { RoleViewProps } from './RoleView'
 export type { UserViewProps } from './UserView'
+export type { WirelineViewProps } from './WirelineView'
 
 export { PermissionView } from './PermissionView'
 export { TelemetryView, getTelemetryLabel } from './TelemetryView'
 export { CompanyView } from './CompanyView'
 export { RoleView } from './RoleView'
-export { UserView } from './UserView'
+export { UserView } from './UserView'
+export { WirelineView } from './WirelineView'

src/pages/Telemetry/TelemetryView/WirelineRunOut.jsx

@@ -0,0 +1,35 @@
+import { memo, useCallback, useEffect, useState } from 'react'
+
+import { TelemetryWirelineRunOutService } from '@api'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import { WirelineView } from '@components/views'
+
+export const WirelineRunOut = memo(({ idWell }) => {
+    const [twro, setTwro] = useState({})
+    const [isLoading, setIsLoading] = useState(false)
+
+    const update = useCallback(() => invokeWebApiWrapperAsync(
+        async () => {
+            const twro = await TelemetryWirelineRunOutService.getData(idWell)
+            setTwro(twro)
+        },
+        setIsLoading,
+        'Не удалось получить данные по талевому канату'
+    ), [idWell])
+
+    const onTooltipVisibleChanged = useCallback((visible) => {
+        if (visible) update()
+    }, [update])
+    
+    useEffect(update, [update])
+
+    return (
+        <WirelineView
+            wireline={twro}
+            onVisibleChange={onTooltipVisibleChanged}
+            buttonProps={{ loading: isLoading }}
+        />
+    )
+})
+
+export default WirelineRunOut

src/pages/Telemetry/TelemetryView/index.jsx

@@ -29,6 +29,7 @@ import SpinPicEnabled from '@images/SpinEnabled.png'
 import SpinPicDisabled from '@images/SpinDisabled.png'
 
 import '@styles/message.css'
+import WirelineRunOut from './WirelineRunOut'
 
 const { Option } = Select
 
@@ -393,6 +394,7 @@ export default function TelemetryView({ idWell }) {
             </div>
             <Setpoints idWell={idWell} style={{ marginLeft: '1rem' }} />
             <span style={{ flexGrow: 20 }}>&nbsp;</span>
+            <WirelineRunOut idWell={idWell} />
             <img src={isTorqueStabEnabled(dataSpin) ? MomentStabPicEnabled : MomentStabPicDisabled} style={{ marginRight: '15px' }} alt={'TorqueMaster'} />
             <img src={isSpinEnabled(dataSpin) ? SpinPicEnabled : SpinPicDisabled} style={{ marginRight: '15px' }} alt={'SpinMaster'} />
             <h2 style={{ marginBottom: 0, marginRight: '15px', fontWeight: 'bold', color: isMseEnabled(dataSaub) ? 'green' : 'lightgrey' }}>MSE</h2>