ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Плитки для смбо. Другая логика расставления + Стили для пустых мест

Browse Source
This commit is contained in:
Alexey 2021-08-09 11:49:26 +05:00
parent 7cf3197ac1
commit c2514f917c
7 changed files with 163 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/CementFluid.jsx
View File

@ -15,15 +15,15 @@ const originData = [
]; ];
const EditableCell = ({ const EditableCell = ({
editing, editing,
dataIndex, dataIndex,
title, title,
inputType, inputType,
record, record,
index, index,
children, children,
...restProps ...restProps
}) => { }) => {
return ( return (
<td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}> <td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
<div style={{width: '100%', display: 'flex', justifyContent: 'center'}}> <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
@ -35,7 +35,7 @@ const EditableCell = ({
{ {
required: true, required: true,
message: '', 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 = [ const columns = [
{ {
title: 'Наименование', title: 'Наименование',
key: 'name', key: 'name',
dataIndex: 'name', dataIndex: 'name',
align: 'center', align: 'center',
className: 'small-font' className: 'small-font'
}, },
{ {
title: 'Температура, °C', title: 'Температура, °C',
key: 'temperature', key: 'temperature',
dataIndex: 'temperature', dataIndex: 'temperature',
align: 'center', align: 'center',
className: 'small-font', className: 'small-font',
editable: true editable: true
}, },
{ {
title: 'Плотность, г/см³', title: 'Плотность, г/см³',
@ -292,7 +292,7 @@ export function CementFluid() {
return editable ? ( return editable ? (
<span> <span>
<a <a
href="javascript:;" href="javascript:"
onClick={() => save(row.key)} onClick={() => save(row.key)}
style={{ marginRight: 8 }} style={{ marginRight: 8 }}
> >
@ -343,7 +343,7 @@ export function CementFluid() {
const row = await form.validateFields(); const row = await form.validateFields();
const newData = [...data]; const newData = [...data];
const index = newData.findIndex((item) => key === item.key); const index = newData.findIndex((item) => key === item.key);
if (index > -1) { if (index > -1) {
const item = newData[index]; const item = newData[index];
newData.splice(index, 1, { ...item, ...row }); newData.splice(index, 1, { ...item, ...row });
@ -360,20 +360,20 @@ export function CementFluid() {
}; };
return (<> return (<>
<Form form={form} component={false}> <Form form={form} component={false}>
<Table <Table
components={{ components={{
body: { body: {
cell: EditableCell, cell: EditableCell,
}, },
}} }}
columns={mergedColumns} columns={mergedColumns}
dataSource={data} dataSource={data}
size={'small'} size={'small'}
bordered={true} bordered={true}
pagination={false} pagination={false}
/> />
</Form> </Form>
</> </>
) )
} }

35
src/components/MessageFilter.jsx Normal file
View 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>
</>
)
}

2
src/components/Nnb.jsx
View File

@ -30,7 +30,7 @@ const EditableCell = ({
{ {
required: true, required: true,
message: '', 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
src/components/SludgeDiagram.jsx
View File

@ -4,7 +4,7 @@ import {Table, Input, Form, Popconfirm, Typography } from 'antd'
const originData = [ const originData = [
{ {
key: '1', probeNumber: '', probeExtractionDepth: '', sandstone: '', siltstone: '', argillit: '', brokenArgillit: '', coal: '', sand: '', clay: '', 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, required: true,
message: '', 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$/
}, },
]} ]}
> >

2
src/pages/Messages.jsx
View File

@ -5,6 +5,7 @@ import {useParams} from 'react-router-dom'
import LoaderPortal from '../components/LoaderPortal' import LoaderPortal from '../components/LoaderPortal'
import '../styles/message.css' import '../styles/message.css'
import notify from '../components/notify' import notify from '../components/notify'
import MessageFilter from "../components/MessageFilter";
import locale from "antd/lib/locale/ru_RU"; import locale from "antd/lib/locale/ru_RU";
import moment from 'moment' import moment from 'moment'
@ -133,6 +134,7 @@ export default function Messages() {
onChange={onChangeRange} onChange={onChangeRange}
/> />
</ConfigProvider> </ConfigProvider>
<MessageFilter/>
</div> </div>
<LoaderPortal show={loader}> <LoaderPortal show={loader}>
<Table <Table

144
src/pages/Smbo.jsx
View File

@ -1,7 +1,8 @@
import SmboPlate, {SquareIndicator} from '../components/SmboPlate' import SmboPlate from '../components/SmboPlate'
import '../styles/smbo.css' import '../styles/smbo.css'
import EquipmentDetails from '../components/modalWindows/EquipmentDetails' import EquipmentDetails from '../components/modalWindows/EquipmentDetails'
import ActiveMessagesOnline from "../components/ActiveMessagesOnline" import ActiveMessagesOnline from "../components/ActiveMessagesOnline"
// import RigPlan from "../images/smbo/RigPlan2.png"
const platesData = [ const platesData = [
{ {
@ -31,33 +32,33 @@ const platesData = [
custom: 'Я не понял про это', custom: 'Я не понял про это',
className: 'c1 r1' className: 'c1 r1'
}, },
{ // {
id: 2, // id: 2,
title: 'Емкости бурового раствора', // title: 'Емкости бурового раствора',
placeHolderId: 2, // placeHolderId: 2,
state: 1, // state: 1,
equipmentTimers: [ // equipmentTimers: [
{label: 'Полная наработка', value: 1, unit: 'ч'}, // {label: 'Полная наработка', value: 1, unit: 'ч'},
{label: 'Наработка после ТО1', value: 1, unit: 'ч'}, // {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
{label: 'Наработка после ТО1', value: 1, unit: 'ч'}, // {label: 'Наработка после ТО1', value: 1, unit: 'ч'},
{label: 'Наработка вне р/р', value: 1, unit: 'ч'}, // {label: 'Наработка вне р/р', value: 1, unit: 'ч'},
{label: 'Периодичность ТО1', value: 1, unit: 'ч'}, // {label: 'Периодичность ТО1', value: 1, unit: 'ч'},
{label: 'Периодичность ТО2', value: 1, unit: 'ч'}, // {label: 'Периодичность ТО2', value: 1, unit: 'ч'},
], // ],
equipmentSensors: [ // equipmentSensors: [
{label: 'Скорость вращения', value: 1, unit: 'Об/мин'}, // {label: 'Скорость вращения', value: 1, unit: 'Об/мин'},
{label: 'Крутящий момент', value: 1, unit: 'кН*м'}, // {label: 'Крутящий момент', value: 1, unit: 'кН*м'},
{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: 'Т нижнего подшипника', value: 1, unit: '°C'}, // {label: 'Т нижнего подшипника', value: 1, unit: '°C'},
{label: 'Состояние ПЧ1', value: 1, unit: ''}, // {label: 'Состояние ПЧ1', value: 1, unit: ''},
{label: 'Состояние ПЧ2', value: 1, unit: ''}, // {label: 'Состояние ПЧ2', value: 1, unit: ''},
], // ],
captionValue: 'У-У-У-у-у-у', // captionValue: 'У-У-У-у-у-у',
custom: 'Я не понял про это', // custom: 'Я не понял про это',
className: 'c2 r1' // className: 'c2 r1'
}, // },
{ {
id: 3, id: 3,
title: 'Подпорные насосы', title: 'Подпорные насосы',
@ -547,58 +548,65 @@ const platesData = [
] ]
const placeholderIdDictionary = { const placeholderIdDictionary = {
1: {row: 8, col: 1}, 1: {gridRowStart: 8, gridColumnStart: 1},
2: {row: 7, col: 1}, 2: {gridRowStart: 7, gridColumnStart: 1},
3: {row: 6, col: 1}, 3: {gridRowStart: 6, gridColumnStart: 1},
4: {row: 5, col: 1}, 4: {gridRowStart: 5, gridColumnStart: 1},
5: {row: 4, col: 1}, 5: {gridRowStart: 4, gridColumnStart: 1},
6: {row: 3, col: 1}, 6: {gridRowStart: 3, gridColumnStart: 1},
7: {row: 2, col: 1}, 7: {gridRowStart: 2, gridColumnStart: 1},
8: {row: 1, col: 1}, 8: {gridRowStart: 1, gridColumnStart: 1},
9: {row: 1, col: 2}, 9: {gridRowStart: 1, gridColumnStart: 2},
10: {row: 1, col: 3}, 10: {gridRowStart: 1, gridColumnStart: 3},
11: {row: 1, col: 4}, 11: {gridRowStart: 1, gridColumnStart: 4},
12: {row: 1, col: 5}, 12: {gridRowStart: 1, gridColumnStart: 5},
13: {row: 1, col: 6}, 13: {gridRowStart: 1, gridColumnStart: 6},
14: {row: 2, col: 6}, 14: {gridRowStart: 2, gridColumnStart: 6},
15: {row: 3, col: 6}, 15: {gridRowStart: 3, gridColumnStart: 6},
16: {row: 4, col: 6}, 16: {gridRowStart: 4, gridColumnStart: 6},
17: {row: 5, col: 6}, 17: {gridRowStart: 5, gridColumnStart: 6},
18: {row: 6, col: 6}, 18: {gridRowStart: 6, gridColumnStart: 6},
19: {row: 7, col: 6}, 19: {gridRowStart: 7, gridColumnStart: 6},
20: {row: 8, col: 6}, 20: {gridRowStart: 8, gridColumnStart: 6},
} }
const makeStyleByPlaceHolderId = (placeholderId) => { const plates = []
const placeholder = placeholderIdDictionary[placeholderId]
return {
gridColumnStart: placeholder.col,
gridRowStart: placeholder.row
}
}
const SmboPlates = platesData.map((items,) => ( for (let i = 1; i < 21; i++) {
<div style={makeStyleByPlaceHolderId(items.placeHolderId)} className="pointer"> const item = platesData.filter(item => item.placeHolderId === i)[0]
<SmboPlate title={items.title} state={items.state} operatingTime={items.placeHolderId} const plate = item ? (
captionValue={items.captionValue}> <div key={i} style={placeholderIdDictionary[i]} className="pointer">
<SmboPlate
title={item.title}
state={item.state}
operatingTime={item.placeHolderId}
captionValue={item.captionValue}
>
<EquipmentDetails <EquipmentDetails
id={items.id} id={item.id}
title={items.title} title={item.title}
placeHolderId={items.placeHolderId} placeHolderId={item.placeHolderId}
equipmentTimers={items.equipmentTimers} equipmentTimers={item.equipmentTimers}
equipmentSensors={items.equipmentSensors} equipmentSensors={item.equipmentSensors}
state={items.state} state={item.state}
captionValue={items.captionValue}/> captionValue={item.captionValue}
/>
</SmboPlate> </SmboPlate>
</div> </div>
) : (
<div className="empty_place" style={placeholderIdDictionary[i]} key={i}>{i}</div>
) )
) plates.push(plate)
}
export default function Smbo() { export default function Smbo() {
return (<> return (<>
<div className="smbo_container"> <div className="smbo_container">
{SmboPlates} {plates}
{/*<div className="c2 ce5 r2 re7 center">*/}
{/* <img src={RigPlan} alt="План"/>*/}
{/*</div>*/}
<div className="c2 r8 ce6 center"> <div className="c2 r8 ce6 center">
<ActiveMessagesOnline/> <ActiveMessagesOnline/>
</div> </div>

9
src/styles/smbo.css
View File

@ -111,4 +111,13 @@
.block__example { .block__example {
width: 250px; width: 250px;
height: 120px; height: 120px;
}
.empty_place {
background-color: #505050;
text-align: center;
color: silver;
font-size: 75px;
margin-top: 5px;
align-items: center;
} }