forked from ddrilling/asb_cloud_front
Плитки для смбо. Другая логика расставления + Стили для пустых мест
This commit is contained in:
Alexey
parent
7cf3197ac1
commit
c2514f917c
@ -15,15 +15,15 @@ const originData = [
|
||||
];
|
||||
|
||||
const EditableCell = ({
|
||||
editing,
|
||||
dataIndex,
|
||||
title,
|
||||
inputType,
|
||||
record,
|
||||
index,
|
||||
children,
|
||||
...restProps
|
||||
}) => {
|
||||
editing,
|
||||
dataIndex,
|
||||
title,
|
||||
inputType,
|
||||
record,
|
||||
index,
|
||||
children,
|
||||
...restProps
|
||||
}) => {
|
||||
return (
|
||||
<td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
|
||||
<div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
|
||||
@ -35,7 +35,7 @@ const EditableCell = ({
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
|
||||
pattern: /(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$/
|
||||
},
|
||||
]}
|
||||
>
|
||||
@ -59,19 +59,19 @@ export function CementFluid() {
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Наименование',
|
||||
key: 'name',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
className: 'small-font'
|
||||
title: 'Наименование',
|
||||
key: 'name',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
className: 'small-font'
|
||||
},
|
||||
{
|
||||
title: 'Температура, °C',
|
||||
key: 'temperature',
|
||||
dataIndex: 'temperature',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
title: 'Температура, °C',
|
||||
key: 'temperature',
|
||||
dataIndex: 'temperature',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Плотность, г/см³',
|
||||
@ -292,7 +292,7 @@ export function CementFluid() {
|
||||
return editable ? (
|
||||
<span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
href="javascript:"
|
||||
onClick={() => save(row.key)}
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
@ -343,7 +343,7 @@ export function CementFluid() {
|
||||
const row = await form.validateFields();
|
||||
const newData = [...data];
|
||||
const index = newData.findIndex((item) => key === item.key);
|
||||
|
||||
|
||||
if (index > -1) {
|
||||
const item = newData[index];
|
||||
newData.splice(index, 1, { ...item, ...row });
|
||||
@ -360,20 +360,20 @@ export function CementFluid() {
|
||||
};
|
||||
|
||||
return (<>
|
||||
<Form form={form} component={false}>
|
||||
<Table
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
columns={mergedColumns}
|
||||
dataSource={data}
|
||||
size={'small'}
|
||||
bordered={true}
|
||||
pagination={false}
|
||||
/>
|
||||
</Form>
|
||||
</>
|
||||
<Form form={form} component={false}>
|
||||
<Table
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
columns={mergedColumns}
|
||||
dataSource={data}
|
||||
size={'small'}
|
||||
bordered={true}
|
||||
pagination={false}
|
||||
/>
|
||||
</Form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
35
src/components/MessageFilter.jsx
Normal file
35
src/components/MessageFilter.jsx
Normal file
@ -0,0 +1,35 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
|
||||
export default function MessageFilter() {
|
||||
return (
|
||||
<div className="App">
|
||||
<List words={["apple", "potato"]} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function List({ words }) {
|
||||
const [searchString, setSearchString] = useState("")
|
||||
|
||||
function handleChange(e) {
|
||||
setSearchString(e.target.value)
|
||||
}
|
||||
|
||||
const filteredWords = useMemo(() => {
|
||||
if (!searchString) {
|
||||
return words
|
||||
}
|
||||
return words.filter((w) => w.includes(searchString))
|
||||
}, [searchString, words])
|
||||
|
||||
return (
|
||||
<>
|
||||
<input type="text" onChange={handleChange} />
|
||||
<ul>
|
||||
{filteredWords.map((word, i) => (
|
||||
<li key={i}>{word}</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -30,7 +30,7 @@ const EditableCell = ({
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
|
||||
pattern: /(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$/
|
||||
},
|
||||
]}
|
||||
>
|
||||
|
||||
@ -4,7 +4,7 @@ import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
||||
const originData = [
|
||||
{
|
||||
key: '1', probeNumber: '', probeExtractionDepth: '', sandstone: '', siltstone: '', argillit: '', brokenArgillit: '', coal: '', sand: '', clay: '',
|
||||
camstone: '', cement: '', summary: '', drillingMud: '', sludge: '', sludge: '', maxSum: '', methan: '', ethan: '', propan: '', butan: '', pentan: ''
|
||||
camstone: '', cement: '', summary: '', drillingMud: '', sludge: '', maxSum: '', methan: '', ethan: '', propan: '', butan: '', pentan: ''
|
||||
}
|
||||
]
|
||||
|
||||
@ -29,7 +29,7 @@ const EditableCell = ({
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
|
||||
pattern: /(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$/
|
||||
},
|
||||
]}
|
||||
>
|
||||
|
||||
@ -5,6 +5,7 @@ import {useParams} from 'react-router-dom'
|
||||
import LoaderPortal from '../components/LoaderPortal'
|
||||
import '../styles/message.css'
|
||||
import notify from '../components/notify'
|
||||
import MessageFilter from "../components/MessageFilter";
|
||||
import locale from "antd/lib/locale/ru_RU";
|
||||
import moment from 'moment'
|
||||
|
||||
@ -133,6 +134,7 @@ export default function Messages() {
|
||||
onChange={onChangeRange}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
<MessageFilter/>
|
||||
</div>
|
||||
<LoaderPortal show={loader}>
|
||||
<Table
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import SmboPlate, {SquareIndicator} from '../components/SmboPlate'
|
||||
import SmboPlate from '../components/SmboPlate'
|
||||
import '../styles/smbo.css'
|
||||
import EquipmentDetails from '../components/modalWindows/EquipmentDetails'
|
||||
import ActiveMessagesOnline from "../components/ActiveMessagesOnline"
|
||||
// import RigPlan from "../images/smbo/RigPlan2.png"
|
||||
|
||||
const platesData = [
|
||||
{
|
||||
@ -31,33 +32,33 @@ const platesData = [
|
||||
custom: 'Я не понял про это',
|
||||
className: 'c1 r1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Емкости бурового раствора',
|
||||
placeHolderId: 2,
|
||||
state: 1,
|
||||
equipmentTimers: [
|
||||
{label: 'Полная наработка', value: 1, unit: 'ч'},
|
||||
{label: 'Наработка после ТО1', value: 1, unit: 'ч'},
|
||||
{label: 'Наработка после ТО1', value: 1, unit: 'ч'},
|
||||
{label: 'Наработка вне р/р', value: 1, unit: 'ч'},
|
||||
{label: 'Периодичность ТО1', value: 1, unit: 'ч'},
|
||||
{label: 'Периодичность ТО2', value: 1, unit: 'ч'},
|
||||
],
|
||||
equipmentSensors: [
|
||||
{label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
|
||||
{label: 'Крутящий момент', value: 1, unit: 'кН*м'},
|
||||
{label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
|
||||
{label: 'Уровень масла в баке', value: 1, unit: 'м'},
|
||||
{label: 'Т верхнего подшипника', value: 1, unit: '°C'},
|
||||
{label: 'Т нижнего подшипника', value: 1, unit: '°C'},
|
||||
{label: 'Состояние ПЧ1', value: 1, unit: ''},
|
||||
{label: 'Состояние ПЧ2', value: 1, unit: ''},
|
||||
],
|
||||
captionValue: 'У-У-У-у-у-у',
|
||||
custom: 'Я не понял про это',
|
||||
className: 'c2 r1'
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// title: 'Емкости бурового раствора',
|
||||
// placeHolderId: 2,
|
||||
// state: 1,
|
||||
// equipmentTimers: [
|
||||
// {label: 'Полная наработка', value: 1, unit: 'ч'},
|
||||
// {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
|
||||
// {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
|
||||
// {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
|
||||
// {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
|
||||
// {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
|
||||
// ],
|
||||
// equipmentSensors: [
|
||||
// {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
|
||||
// {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
|
||||
// {label: 'Общий уровень вибрации', value: 1, unit: 'мм/с'},
|
||||
// {label: 'Уровень масла в баке', value: 1, unit: 'м'},
|
||||
// {label: 'Т верхнего подшипника', value: 1, unit: '°C'},
|
||||
// {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
|
||||
// {label: 'Состояние ПЧ1', value: 1, unit: ''},
|
||||
// {label: 'Состояние ПЧ2', value: 1, unit: ''},
|
||||
// ],
|
||||
// captionValue: 'У-У-У-у-у-у',
|
||||
// custom: 'Я не понял про это',
|
||||
// className: 'c2 r1'
|
||||
// },
|
||||
{
|
||||
id: 3,
|
||||
title: 'Подпорные насосы',
|
||||
@ -547,58 +548,65 @@ const platesData = [
|
||||
]
|
||||
|
||||
const placeholderIdDictionary = {
|
||||
1: {row: 8, col: 1},
|
||||
2: {row: 7, col: 1},
|
||||
3: {row: 6, col: 1},
|
||||
4: {row: 5, col: 1},
|
||||
5: {row: 4, col: 1},
|
||||
6: {row: 3, col: 1},
|
||||
7: {row: 2, col: 1},
|
||||
8: {row: 1, col: 1},
|
||||
9: {row: 1, col: 2},
|
||||
10: {row: 1, col: 3},
|
||||
11: {row: 1, col: 4},
|
||||
12: {row: 1, col: 5},
|
||||
13: {row: 1, col: 6},
|
||||
14: {row: 2, col: 6},
|
||||
15: {row: 3, col: 6},
|
||||
16: {row: 4, col: 6},
|
||||
17: {row: 5, col: 6},
|
||||
18: {row: 6, col: 6},
|
||||
19: {row: 7, col: 6},
|
||||
20: {row: 8, col: 6},
|
||||
1: {gridRowStart: 8, gridColumnStart: 1},
|
||||
2: {gridRowStart: 7, gridColumnStart: 1},
|
||||
3: {gridRowStart: 6, gridColumnStart: 1},
|
||||
4: {gridRowStart: 5, gridColumnStart: 1},
|
||||
5: {gridRowStart: 4, gridColumnStart: 1},
|
||||
6: {gridRowStart: 3, gridColumnStart: 1},
|
||||
7: {gridRowStart: 2, gridColumnStart: 1},
|
||||
8: {gridRowStart: 1, gridColumnStart: 1},
|
||||
9: {gridRowStart: 1, gridColumnStart: 2},
|
||||
10: {gridRowStart: 1, gridColumnStart: 3},
|
||||
11: {gridRowStart: 1, gridColumnStart: 4},
|
||||
12: {gridRowStart: 1, gridColumnStart: 5},
|
||||
13: {gridRowStart: 1, gridColumnStart: 6},
|
||||
14: {gridRowStart: 2, gridColumnStart: 6},
|
||||
15: {gridRowStart: 3, gridColumnStart: 6},
|
||||
16: {gridRowStart: 4, gridColumnStart: 6},
|
||||
17: {gridRowStart: 5, gridColumnStart: 6},
|
||||
18: {gridRowStart: 6, gridColumnStart: 6},
|
||||
19: {gridRowStart: 7, gridColumnStart: 6},
|
||||
20: {gridRowStart: 8, gridColumnStart: 6},
|
||||
}
|
||||
|
||||
const makeStyleByPlaceHolderId = (placeholderId) => {
|
||||
const placeholder = placeholderIdDictionary[placeholderId]
|
||||
return {
|
||||
gridColumnStart: placeholder.col,
|
||||
gridRowStart: placeholder.row
|
||||
}
|
||||
}
|
||||
const plates = []
|
||||
|
||||
const SmboPlates = platesData.map((items,) => (
|
||||
<div style={makeStyleByPlaceHolderId(items.placeHolderId)} className="pointer">
|
||||
<SmboPlate title={items.title} state={items.state} operatingTime={items.placeHolderId}
|
||||
captionValue={items.captionValue}>
|
||||
for (let i = 1; i < 21; i++) {
|
||||
const item = platesData.filter(item => item.placeHolderId === i)[0]
|
||||
const plate = item ? (
|
||||
<div key={i} style={placeholderIdDictionary[i]} className="pointer">
|
||||
<SmboPlate
|
||||
title={item.title}
|
||||
state={item.state}
|
||||
operatingTime={item.placeHolderId}
|
||||
captionValue={item.captionValue}
|
||||
>
|
||||
<EquipmentDetails
|
||||
id={items.id}
|
||||
title={items.title}
|
||||
placeHolderId={items.placeHolderId}
|
||||
equipmentTimers={items.equipmentTimers}
|
||||
equipmentSensors={items.equipmentSensors}
|
||||
state={items.state}
|
||||
captionValue={items.captionValue}/>
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
placeHolderId={item.placeHolderId}
|
||||
equipmentTimers={item.equipmentTimers}
|
||||
equipmentSensors={item.equipmentSensors}
|
||||
state={item.state}
|
||||
captionValue={item.captionValue}
|
||||
/>
|
||||
</SmboPlate>
|
||||
</div>
|
||||
) : (
|
||||
<div className="empty_place" style={placeholderIdDictionary[i]} key={i}>{i}</div>
|
||||
)
|
||||
)
|
||||
plates.push(plate)
|
||||
}
|
||||
|
||||
export default function Smbo() {
|
||||
|
||||
return (<>
|
||||
<div className="smbo_container">
|
||||
{SmboPlates}
|
||||
{plates}
|
||||
{/*<div className="c2 ce5 r2 re7 center">*/}
|
||||
{/* <img src={RigPlan} alt="План"/>*/}
|
||||
{/*</div>*/}
|
||||
<div className="c2 r8 ce6 center">
|
||||
<ActiveMessagesOnline/>
|
||||
</div>
|
||||
|
||||
@ -111,4 +111,13 @@
|
||||
.block__example {
|
||||
width: 250px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.empty_place {
|
||||
background-color: #505050;
|
||||
text-align: center;
|
||||
color: silver;
|
||||
font-size: 75px;
|
||||
margin-top: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user