ykzz-web/src/views/TestLine/index.js

1520 lines
29 KiB
JavaScript
Raw Normal View History

2024-12-25 13:48:51 +08:00
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import { Table, Card, Modal, Form, Input, Button, Row, Col, Typography, message, Tabs, Image, InputNumber } from 'antd';
import ToolBar from './toolbar'
import ReactEcharts from 'echarts-for-react';
import './index.less'
import drpOption from './drpOption.js'
2024-12-26 09:11:53 +08:00
import { httppost2 } from '../../utils/request';
2024-12-25 13:48:51 +08:00
const TableE = ({count,setEditData,tableData}) => {
const EditableCell = ({
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
}) => {
2024-12-26 09:11:53 +08:00
const inputNode = <InputNumber style={{ textAlign: "center", flex: 1 }} />;
2024-12-25 13:48:51 +08:00
return (
<td {...restProps}>
{editing ? (
<Form.Item
name={dataIndex}
wrapperCol={[24]}
style={{
margin: 0,
}}
>
{inputNode}
</Form.Item>
) : (
children
)}
</td>
);
};
const [editingKey, setEditingKey] = useState('');
const [details, setDetails] = useState([])
const isEditing = (record) => {
return record.key === editingKey;
}
const columns = [
{
title: '预见期',
dataIndex: 'tm',
width: '30%',
},
{
title: '雨量',
dataIndex: 'drp',
width: '30%',
editable: true,
align:'center'
},
{
title: '水位',
dataIndex: 'rz',
width: '20%',
},
{
title: '操作', key: 'operation', width: "20%", fixed: 'right',align: 'center',
render: (_, record) => {
const editable = isEditing(record);
return editable ? (
<span>
<Typography.Link
onClick={() => save(record.key)}
style={{
marginRight: 8,
}}
>
完成
</Typography.Link>
</span>
) : (
<div style={{display:"flex",justifyContent:"center",columnGap:10}}>
<Typography.Link disabled={editingKey !== ''} onClick={() => edit1(record)}>
编辑
</Typography.Link>
</div>
);
},
},
]
const [form1] = Form.useForm()
const edit1 = (record) => {
form1.setFieldsValue({
drp: '',
...record,
});
setEditingKey(record.key);
};
const save = async (key) => {
try {
const row = await form1.validateFields();
const newData = [...details];
const index = newData.findIndex((item) => key === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
setDetails(newData);
setEditData(newData);
setEditingKey('');
} else {
newData.push(row);
setDetails(newData);
setEditData(newData);
setEditingKey('');
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
};
useEffect(() => {
if (tableData.length > 0) {
setDetails(tableData)
}
}, [tableData])
const mergedColumns = columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record) => ({
record,
inputType: col.dataIndex === 'age' ? 'number' :
col.dataIndex === 'sex' ? 'select' : "text",
dataIndex: col.dataIndex,
title: col.title,
editing: isEditing(record),
}),
};
});
const handleAddRow = (count) => {
const newArr = Array(count).fill(0).map((item, i) => ({
key: (i + 1).toString(),
tm: `${i + 1}小时`,
drp: '',
rz: '',
}))
form1.setFieldsValue(newArr[0])
setDetails([...newArr]);
setEditData([...newArr]);
setEditingKey(newArr[0].key);
};
useEffect(() => {
if (count) {
handleAddRow(count)
}
}, [count])
return (
<>
<Form form={form1} component={false}>
<Table
rowKey="index"
components={{
body: {
// row: EditableRow,
cell: EditableCell,
},
}}
columns={mergedColumns}
dataSource={details}
scroll={{ x: 200,y: 'calc( 100vh - 400px )'}}
pagination={false}
/>
</Form>
</>
)
}
export default function TestLine() {
const [form] = Form.useForm()
2024-12-26 09:11:53 +08:00
const [searchVal, setSearchVal] = useState(false)
2024-12-25 13:48:51 +08:00
const [editData, setEditData] = useState([])
const [type, setType] = useState({})
const [tmCount, setTmCount] = useState('')
2024-12-26 09:11:53 +08:00
const [tableForm, setTableForm] = useState({})
const [tableData, setTableData] = useState([])
const options = useMemo(() => {
return drpOption(tableForm.time || '1h',tableForm.tabArr || [])
}, [tableForm])
const getPrejectRain = async(name) => {
try {
const res = await httppost2('http://202.103.169.18:10100/api/v1/bot/water_infer',
{
"name": name,
"waters": [
88.25,
88.25,
88.25,
88.26,
88.28,
88.28,
88.29,
88.29,
88.25,
88.29,
88.29,
88.29,
88.29,
88.29,
88.29,
88.29,
88.29,
88.29,
88.29,
88.28,
88.28,
88.28,
88.28,
88.28,
88.28,
88.28,
88.28,
88.28,
88.3,
88.3,
88.31,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.32,
88.33,
88.34,
88.36,
88.37,
88.38,
88.39,
88.4,
88.4,
88.4,
88.4,
88.4,
88.4,
88.4,
88.4,
88.4,
88.41,
88.42,
88.43,
88.44,
88.45,
88.46,
88.46,
88.47,
88.47,
88.48,
88.48,
88.48,
88.48,
88.49,
88.5,
88.51,
88.52,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.53,
88.54,
88.55,
88.57,
88.58,
88.59,
88.61,
88.62,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.63,
88.64,
88.65,
88.66,
88.67,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.68,
88.67,
88.67,
88.67,
88.67,
88.68,
88.69,
88.7,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.7,
88.7,
88.7,
88.7,
88.7,
88.7,
88.7,
88.7,
88.71,
88.71,
88.72,
88.72,
88.72,
88.72,
88.72,
88.72,
88.72,
88.72,
88.72,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.71,
88.78,
88.78,
88.78,
88.78,
88.78,
88.78,
88.78,
88.78,
88.78,
88.77,
88.77,
88.77,
88.77,
88.77,
88.77,
88.77,
88.77,
88.77,
88.78,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.8,
88.81,
88.82,
88.82,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.83,
88.84,
88.86,
88.87,
88.89,
88.89,
88.9,
88.9,
88.9,
88.9,
88.9,
88.9,
88.9,
88.92,
88.94,
88.95,
88.96,
88.97,
88.96,
88.97,
88.97,
88.97,
88.98,
88.99,
89,
89,
89.02,
89.02,
89.03,
89.03,
89.03,
89.03,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.03,
89.04,
89.05,
89.05,
89.06,
89.06,
89.06,
89.06,
89.06,
89.06,
89.05,
89.05,
89.04,
89.03,
89.03,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.02,
89.01,
89.01,
89,
89,
88.99,
88.98,
88.97,
88.97,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.97,
88.98,
88.99,
89,
89,
89.01,
89.01,
89.01,
89.01,
89.01,
89.01,
89.01,
89.01,
89.01,
89.02,
89.03,
89.05,
89.05,
89.06,
89.06,
89.08,
89.08,
89.09,
89.1,
89.12,
89.12,
89.13,
89.13,
89.14,
89.14,
89.15,
89.15,
89.16,
89.17,
89.18,
89.18,
89.2,
89.2,
89.2,
89.19,
89.18,
89.16,
89.14,
89.14,
89.14,
89.14,
89.13,
89.12,
89.11,
89.09,
89.08,
89.06,
89.05,
89.03,
89.01,
89,
88.98,
88.98,
88.97,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.96,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.94,
88.93,
88.93,
88.92,
88.93,
88.94,
88.95,
88.96,
88.97,
88.97,
88.98,
88.98,
88.99,
88.99,
88.99,
88.99,
89,
89,
89,
89,
89,
89,
89,
89,
89.01,
89.01,
89.01,
89.01,
89.01,
89.02,
89.01,
89.01,
89.01,
89.01,
89.01,
89,
89,
89,
89,
89,
88.99,
88.98,
88.98,
88.98,
88.98,
88.98,
88.98,
88.98,
88.97,
88.97,
88.96,
88.96,
88.96,
88.96,
88.95,
88.95,
88.95,
88.95,
88.95,
88.95,
88.96,
88.96,
88.97,
88.97,
88.98,
88.98,
88.99,
89,
89,
89,
89,
89,
89,
89,
89,
89,
88.99,
88.99,
88.98,
88.98,
88.98,
88.98,
88.98,
88.97,
88.97,
88.97,
88.97,
88.96,
88.96,
88.96,
88.95,
88.95,
88.94,
88.94,
88.94,
88.94,
88.93,
88.93,
88.93,
88.93,
88.93,
88.93,
88.92,
88.92,
88.92,
88.92,
88.92,
88.92,
88.92,
88.92,
88.92
],
"rains": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
2,
0.5,
0,
0.5,
2,
2.5,
1.5,
0,
0.5,
0.5,
1,
0.5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
0,
1.5,
0.5,
0,
1.5,
1.5,
0,
0,
0,
0,
2,
0.5,
1,
2,
0.5,
1.5,
0,
0.5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
2,
0,
2,
0.5,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
0.5,
0,
0.5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
0,
3,
1.5,
2,
4,
2.5,
3,
1,
1,
1,
1,
0,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
0.5,
0,
0,
0,
0.5,
0,
0.5,
0,
0,
0.5,
0,
0.5,
0,
0.5,
0,
0,
0.5,
0,
1,
0.5,
1.5,
1.5,
1.5,
1,
0.5,
0,
0,
0,
0.5,
0,
0,
0,
0,
0,
0,
0.5,
0,
0,
0,
0,
0.5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.5,
0.5,
0.5,
0,
0.5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
}
)
if (res.code == 0) {
const newArr = res.data?.water_predicts.map(item => ({ drp: '', rz: item, tm: '1小时' }))
setTableData(newArr)
setTableForm({...tableForm,tabArr:newArr})
}
} catch (error) {
console.log(error);
}
}
useEffect(() => {
if (searchVal) {
getPrejectRain(searchVal.code)
}
}, [searchVal])
2024-12-25 13:48:51 +08:00
useEffect(() => {
let count;
if (type?.time) {
count = type.time == '1h' ? 1 :
type.time == '3h' ? 3 :
type.time == '6h' ? 6 :
type.time == '12h' ? 12 :
type.time == '24h' ? 24 : '';
setTmCount(count)
} else {
count = 1
setTmCount('')
}
}, [type])
2024-12-26 09:11:53 +08:00
2024-12-25 13:48:51 +08:00
const rowObj = {
"1小时": 420,
"2小时": 450,
"3小时": 480,
"4小时": 510,
"5小时": 540,
"6小时": 480,
"7小时": 420,
"8小时": 450,
"9小时": 480,
"10小时": 510,
"11小时": 540,
"12小时": 480,
"13小时": 420,
"14小时": 450,
"15小时": 480,
"16小时": 510,
"17小时": 540,
"18小时": 480,
"19小时": 420,
"20小时": 450,
"21小时": 480,
"22小时": 510,
"23小时": 540,
"24小时": 480,
}
const save = async () => {
2024-12-26 09:11:53 +08:00
const all = editData.some(item => !item.drp)
if (all) {
message.error("所有雨量不能为空")
return
}
2024-12-25 13:48:51 +08:00
try {
setTableForm({ tabArr: editData, time: type.time })
const newTabl = editData.map(item => ({
...item,
rz: rowObj[item.tm],
}))
setTableData(newTabl)
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
};
return (
<>
<div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
setType={setType}
save={save}
form1={form}
/>
</Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0", height: 'calc( 100vh - 400px )' }}>
<div style={{ display: 'flex', columnGap: 20 }}>
2024-12-26 09:11:53 +08:00
<div style={{ flex: 1,height: 'calc( 100vh - 400px )',padding:10 }}>
2024-12-25 13:48:51 +08:00
<ReactEcharts option={options} style={{ width: "100%", height: '100%' }} notMerge={true} />
</div>
2024-12-26 09:11:53 +08:00
<div style={{ width: 430, marginRight: 30 }}>
<Button type="primary" onClick={save} style={{float:'right',marginBottom:10}}>生成</Button>
<TableE count={tmCount} setEditData={setEditData} tableData={tableData} />
2024-12-25 13:48:51 +08:00
</div>
</div>
</div>
</div>
</div>
</>
)
}