Добавлено отображение даты в столбце мониторинга

src/components/Display.tsx

@@ -1,8 +1,8 @@
 import moment from 'moment'
-import { useState, useEffect, memo, ReactNode } from 'react'
+import { useState, useEffect, memo, ReactNode, useCallback } from 'react'
 import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons'
 
-import '@styles/display.css'
+import '@styles/display.less'
 
 export const formatNumber = (value?: unknown, format?: number) =>
   Number.isInteger(format) && Number.isFinite(value)
@@ -15,7 +15,7 @@ const displayValueStyle = { display: 'flex', flexGrow: 1 }
 export type ValueDisplayProps = {
   prefix?: ReactNode
   suffix?: ReactNode
-  format?: number | string
+  format?: number | string | ((arg: any) => any)
   isArrowVisible?: boolean
   enumeration?: Record<string, string>
   value: string
@@ -34,6 +34,8 @@ export const ValueDisplay = memo<ValueDisplayProps>(({ prefix, value, suffix, is
     direction: 0,
   })
 
+  const fmt = useCallback((arg) => typeof format === 'function' ? format(arg) : format, [format])
+
   useEffect(() => {
     setVal((preVal) => {
       if ((value ?? '-') === '-' || value === '--') return '---'
@@ -54,18 +56,18 @@ export const ValueDisplay = memo<ValueDisplayProps>(({ prefix, value, suffix, is
           })
         }
 
-        return formatNumber(value, Number(format))
+        return formatNumber(value, Number(fmt(value)))
       }
 
       if (value.length > 4) {
         const valueDate = moment(value)
         if (valueDate.isValid())
-          return valueDate.format(String(format))
+          return valueDate.format(String(fmt(value)))
       }
 
       return value
     })
-  },[value, isArrowVisible, arrowState, format, enumeration])
+  },[value, isArrowVisible, arrowState, fmt, enumeration])
 
   let arrow = null
   if(isArrowVisible)

src/pages/Telemetry/TelemetryView/CustomColumn.jsx

@@ -1,16 +1,19 @@
+import moment from 'moment'
 import { memo } from 'react'
 
 import { Display } from '@components/Display'
 
 import RigMnemo from './RigMnemo'
 
+const getTimeFormat = (date) => moment(date).isSame(new Date(), 'day') ? 'HH:mm:ss' : 'DD.MM.YYYY HH:mm:ss'
+
 const params = [
   { label: 'Рот., об/мин', accessorName: 'rotorSpeed', isArrowVisible: true },
   { label: 'Долото, м', accessorName: 'bitDepth', isArrowVisible: true, format: 2 },
   { label: 'Забой, м', accessorName: 'wellDepth', isArrowVisible: true, format: 2 },
   { label: 'Расход, м³/ч', accessorName: 'flow', isArrowVisible: true },
   { label: 'Расход х.х., м³/ч', accessorName: 'flowIdle', isArrowVisible: true },
-  { label: 'Время', accessorName: 'date', format: 'HH:mm:ss' },
+  { label: 'Время', accessorName: 'date', format: getTimeFormat },
   { label: 'MSE, %', accessorName: 'mse', format: 2 },
 ]
 

src/styles/display.css

@@ -1,75 +0,0 @@
-
-.display_flex_container{
-  display: flex;
-  flex-wrap: wrap;
-  flex: auto;
-}
-.display_header {
-  font-size: 16px;
-  flex-grow: 1;
-  display: flex;
-}
-
-.display_chart_label {
-  font-size: 16px;
-  font-weight: bold;
-  padding: 0 4px;
-}
-
-.display_chart_values {
-  position: absolute;
-  top: 20px;
-  left: 50px;
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.monitoring_value {
-  position: relative;
-  z-index: 0;
-}
-
-.monitoring_value:before {
-  position: absolute;
-  z-index: -1;
-  left: 4px;
-  top: 0;
-  -webkit-text-stroke: 4px white;
-  content: attr(data-before);
-}
-
-
-.display_label{
-  font-size: 16px;
-  color: rgb(70, 70, 70);
-  text-align: left;
-  justify-content: center;
-  margin: 1px 1rem 1px 1rem;
-  flex: auto;
-  align-items: baseline;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  height: 30px;
-}
-
-.display_value{
-  font-size: 18px;
-  font-weight: bold;
-  color: rgb(50, 50, 50);
-  text-align: right;
-  justify-content: flex-end;
-  align-items:baseline;
-  margin: 1px 1rem;  
-  flex: auto;
-}
-
-.display_small_value{
-  color: rgb(50, 50, 50);
-  text-align: right;
-  justify-content: center;
-  margin: 1px 1rem 1px 1rem;
-  flex: auto;
-}

src/styles/display.less

@@ -0,0 +1,74 @@
+
+.display_flex_container{
+    display: flex;
+    flex-wrap: wrap;
+    flex: auto;
+}
+.display_header {
+    font-size: 16px;
+    flex-grow: 1;
+    display: flex;
+}
+
+.display_chart_label {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0 4px;
+}
+
+.display_chart_values {
+    position: absolute;
+    top: 20px;
+    left: 50px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.monitoring_value {
+    position: relative;
+    z-index: 0;
+
+    &:before {
+        position: absolute;
+        z-index: -1;
+        left: 4px;
+        top: 0;
+        -webkit-text-stroke: 4px white;
+        content: attr(data-before);
+    }
+}
+
+.display_label{
+    font-size: 16px;
+    color: rgb(70, 70, 70);
+    text-align: left;
+    justify-content: center;
+    margin: 1px 0 1px 1rem;
+    flex: auto;
+    align-items: baseline;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    height: 30px;
+}
+
+.display_value{
+    font-size: 18px;
+    font-weight: bold;
+    color: rgb(50, 50, 50);
+    text-align: right;
+    justify-content: flex-end;
+    align-items:baseline;
+    margin: 1px 1rem;  
+    flex: auto;
+}
+
+.display_small_value{
+    color: rgb(50, 50, 50);
+    text-align: right;
+    justify-content: center;
+    margin: 1px 1rem 1px 1rem;
+    flex: auto;
+}