From f038e5e36e04fce45dd2eef8b739a5ec755eca21 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Sat, 24 Sep 2022 11:37:42 +0500
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20=D0=BC=D0=BE=D0=BD=D0=B8=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Telemetry/TelemetryView/index.jsx | 21 ++++++++++++---------
 src/styles/monitoring.less                  | 17 +++++++++++++++++
 2 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 src/styles/monitoring.less

diff --git a/src/pages/Telemetry/TelemetryView/index.jsx b/src/pages/Telemetry/TelemetryView/index.jsx
index f6f49a0..ca1bae7 100755
--- a/src/pages/Telemetry/TelemetryView/index.jsx
+++ b/src/pages/Telemetry/TelemetryView/index.jsx
@@ -6,7 +6,7 @@ import { useWell } from '@asb/context'
 import { makeDateSorter } from '@components/Table'
 import { D3MonitoringCharts } from '@components/d3/monitoring'
 import LoaderPortal from '@components/LoaderPortal'
-import { Grid, GridItem, Flex } from '@components/Grid'
+import { Grid, GridItem } from '@components/Grid'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
 import { formatDate, hasPermission, wrapPrivateComponent } from '@utils'
@@ -31,6 +31,7 @@ import MomentStabPicDisabled from '@images/DempherOff.png'
 import SpinPicEnabled from '@images/SpinEnabled.png'
 import SpinPicDisabled from '@images/SpinDisabled.png'
 
+import '@styles/monitoring.less'
 import '@styles/message.css'
 
 const { Option } = Select
@@ -253,14 +254,14 @@ const TelemetryView = memo(() => {
     <LoaderPortal show={showLoader}>
       <Grid style={{ gridTemplateColumns: 'auto repeat(6, 1fr)' }}>
         <GridItem col={'1'} row={'1'} colSpan={'8'} style={{ marginBottom: '0.5rem' }}>
-          <Flex>
+          <div className={'page-top'}>
             <ModeDisplay data={dataSaub} />
-            <div style={{ marginLeft: '1rem' }}>
+            <div>
               Интервал:&nbsp;
               <PeriodPicker onChange={setChartInterval} />
             </div>
             <Button onClick={() => chartMethods?.setSettingsVisible(true)}>Настроить графики</Button>
-            <div style={{ marginLeft: '1rem' }}>
+            <div>
               Статус:&nbsp;
               <Select value={well.idState ?? 0} onChange={onStatusChanged} disabled={!hasPermission('Well.edit')}>
                 <Option value={0} disabled hidden>Неизвестно</Option>
@@ -268,14 +269,16 @@ const TelemetryView = memo(() => {
                 <Option value={2}>Завершено</Option>
               </Select>
             </div>
-            <Setpoints style={{ marginLeft: '1rem' }} />
+            <Setpoints />
             <span style={{ flexGrow: 20 }}>&nbsp;</span>
             <WirelineRunOut />
-            <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>
+            <div className={'icons'}>
+              <img src={isTorqueStabEnabled(dataSpin) ? MomentStabPicEnabled : MomentStabPicDisabled} alt={'TorqueMaster'} />
+              <img src={isSpinEnabled(dataSpin) ? SpinPicEnabled : SpinPicDisabled} alt={'SpinMaster'} />
+              <h2 style={{ marginBottom: 0, fontWeight: 'bold', color: isMseEnabled(dataSaub) ? 'green' : 'lightgrey' }}>MSE</h2>
+            </div>
             <UserOfWell data={dataSaub} />
-          </Flex>
+          </div>
         </GridItem>
         <GridItem col={'1'} row={'2'} rowSpan={'3'} style={{ minWidth: '260px', width: '0.142fr' }}>
           <CustomColumn data={dataSaub} />
diff --git a/src/styles/monitoring.less b/src/styles/monitoring.less
new file mode 100644
index 0000000..9a3cb0e
--- /dev/null
+++ b/src/styles/monitoring.less
@@ -0,0 +1,17 @@
+.page-top {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -5px;
+
+    & > * {
+        margin: 5px;
+    }
+
+    & > .icons {
+        display: flex;
+
+        & > * {
+            margin-left: 15px;
+        }
+    }
+}