diff --git a/src/views/TestLine/createData.js b/src/views/TestLine/createData.js index 0e2fc99..fedf418 100644 --- a/src/views/TestLine/createData.js +++ b/src/views/TestLine/createData.js @@ -1,21 +1,170 @@ -import moment from "moment"; -export default function data(type) { - const now = moment(); // 获取当前时间 - const startOfDay = now.clone().startOf('day'); // 获取今天的凌晨 +import { Button, Form, Input, Popconfirm, Table } from 'antd'; +import React, { useContext, useEffect, useRef, useState } from 'react'; +const EditableContext = React.createContext(null); +const EditableRow = ({ index, ...props }) => { + const [form] = Form.useForm(); + return ( +
+ + + +
+ ); +}; +const EditableCell = ({ + title, + editable, + children, + dataIndex, + record, + handleSave, + ...restProps +}) => { + const [editing, setEditing] = useState(true); + const inputRef = useRef(null); + const form = useContext(EditableContext); + // useEffect(() => { + // if (editing) { + // inputRef.current?.focus(); + // } + // }, [editing]); + const toggleEdit = (title) => { + if (title == '雨量') { + // setEditing(!editing); + if (record[dataIndex]) { + form.setFieldsValue({ + [dataIndex]: record[dataIndex], + }); - // 初始化数组,第一个元素是今天的凌晨 - let timeArray = [startOfDay]; + } + }; - // 生成接下来的时间点并添加到数组中,间隔为两个小时,且不超过当前时间 - let nextTime = startOfDay.clone().add(1, 'hours'); - while (nextTime <= now) { - timeArray.push(nextTime.format('MM-DD HH:mm')); - nextTime = nextTime.clone().add(1, 'hours'); + } + const save = async () => { + try { + const values = await form.validateFields(); + toggleEdit(title); + handleSave({ + ...record, + ...values, + }); + } catch (errInfo) { + console.log('Save failed:', errInfo); } + }; + let childNode = children; + if (editable) { + childNode = editing ? ( + + + + ) : ( +
+ {children} +
+ ); + } + return toggleEdit(title)}>{childNode}; +}; +const App = ({ count, tableData, setEditData }) => { + const [dataSource, setDataSource] = useState([]); + const defaultColumns = [ + { + title: '预见期', + dataIndex: 'tm', + width: '30%', + }, + { + title: '雨量', + dataIndex: 'drp', + width: '30%', + editable: true, + align: 'center' + }, + { + title: '水位', + dataIndex: 'rz', + width: '20%', + }, + ]; + const handleAdd = () => { + const newArr = Array(count).fill(0).map((item, i) => ({ + key: (i + 1).toString(), + tm: `${i + 1}小时`, + drp: '', + rz: '', + })) - console.log(timeArray); - let result; - + setDataSource([...newArr]); + setEditData([...newArr]) + }; + const handleSave = (row) => { + const newData = [...dataSource]; + const index = newData.findIndex((item) => row.key === item.key); + const item = newData[index]; + newData.splice(index, 1, { + ...item, + ...row, + }); + console.log('newData', newData); + setDataSource(newData); + setEditData(newData) + }; + const components = { + body: { + row: EditableRow, + cell: EditableCell, + }, + }; + const columns = defaultColumns.map((col) => { + if (!col.editable) { + return col; + } + return { + ...col, + onCell: (record) => ({ + record, + editable: col.editable, + dataIndex: col.dataIndex, + title: col.title, + handleSave, + }), + }; + }); - return result -} \ No newline at end of file + useEffect(() => { + if (count) { + handleAdd(count) + } + }, [count]) + useEffect(() => { + if (tableData.length > 0) { + setDataSource(tableData) + setEditData(tableData) + } + }, [tableData]) + return ( +
+ 'editable-row'} + bordered + dataSource={dataSource} + columns={columns} + scroll={{ x: 200, y: 'calc( 100vh - 400px )' }} + pagination={false} + /> + + ); +}; +export default App; \ No newline at end of file diff --git a/src/views/TestLine/drpOption.js b/src/views/TestLine/drpOption.js index 0432788..20b954b 100644 --- a/src/views/TestLine/drpOption.js +++ b/src/views/TestLine/drpOption.js @@ -1,5 +1,5 @@ import * as echarts from 'echarts'; -import moment from 'moment'; +import moment, { min } from 'moment'; export default function drpOption(time = '', tabArr) { @@ -1208,6 +1208,12 @@ export default function drpOption(time = '', tabArr) { 0 ]; const h1DrpData = tabArr.find(item => item.tm == '1小时'); + const minRz = Math.floor(Math.min(...tabArr.map(item => item.rz),...deadWaterData)) + const maxRz = Math.ceil(Math.max(...tabArr.map(item => item.rz),...deadWaterData)) + const mindrp = Math.floor(Math.min(...tabArr.map(item => item.drp),...deadRainData)) + const maxdrp = Math.ceil(Math.max(...tabArr.map(item => item.drp),...deadRainData)) + console.log(minRz,maxRz); + const upDeadWaterData = deadWaterData.map((item, i) => ({ time: i + 1, value: item @@ -1221,18 +1227,24 @@ export default function drpOption(time = '', tabArr) { const ydata = JSON.parse(JSON.stringify(upDeadrainData)); if (time == "1h") { data.push( - { time: 601, value: h1DrpData?.rz, predict: true }) + { time: 601, value: h1DrpData?.rz, predict: true }, + ...Array(30).fill(0).map((item, i) => ({ + time: i + 1 + 601, + value: '', + predict: true + })) + ) ydata.push({ time: 601, value: h1DrpData?.drp, predict: true }) } else if (time == "3h") { const wData = [ - { time: "12-24 16:00", value: 420, predict: true }, - { time: "12-24 17:00", value: 450, predict: true }, - { time: "12-24 18:00", value: 480, predict: true }, + { time: 603, value: 420, predict: true }, + { time: 604, value: 450, predict: true }, + { time: 605, value: 480, predict: true }, ] const rData = [ - { time: "12-24 16:00", value: tabArr.find(item => item.tm == '1小时')?.drp, predict: true }, - { time: "12-24 17:00", value: tabArr.find(item => item.tm == '2小时')?.drp, predict: true }, - { time: "12-24 18:00", value: tabArr.find(item => item.tm == '3小时')?.drp, predict: true }, + { time: 603, value: tabArr.find(item => item.tm == '1小时')?.drp, predict: true }, + { time: 604, value: tabArr.find(item => item.tm == '2小时')?.drp, predict: true }, + { time: 605, value: tabArr.find(item => item.tm == '3小时')?.drp, predict: true }, ] data.push(...wData) ydata.push(...rData) @@ -1374,7 +1386,7 @@ export default function drpOption(time = '', tabArr) { // 如果是折线图,此处需要追加实际数据的最后一组数据,如果是柱状图,则不需要。 data2.unshift(splitLineData1); - console.log("splitLineData",splitLineData); + // console.log("splitLineData",splitLineData); data4.unshift(splitLineData2); @@ -1407,6 +1419,8 @@ export default function drpOption(time = '', tabArr) { { type: "value", name: '水位', + min: minRz, + max:maxRz, splitLine: { show: true, }, @@ -1422,6 +1436,8 @@ export default function drpOption(time = '', tabArr) { { type: "value", name: '雨量', + min: mindrp, + max:maxdrp, splitLine: { show: true, }, @@ -1493,14 +1509,14 @@ export default function drpOption(time = '', tabArr) { // 下面半截绿色的线 { xAxis: 599, - yAxis: 0, + yAxis: minRz, lineStyle: { color: "rgba(46, 224, 85, 1)", }, }, { xAxis: 599, - yAxis: 89, + yAxis: splitLineData[1], }, ], ], diff --git a/src/views/TestLine/index.js b/src/views/TestLine/index.js index 3db359e..8f1ba52 100644 --- a/src/views/TestLine/index.js +++ b/src/views/TestLine/index.js @@ -5,6 +5,7 @@ import ReactEcharts from 'echarts-for-react'; import './index.less' import drpOption from './drpOption.js' import { httppost2 } from '../../utils/request'; +import TestApp from './createData.js' const TableE = ({count,setEditData,tableData}) => { const EditableCell = ({ @@ -18,6 +19,7 @@ const TableE = ({count,setEditData,tableData}) => { ...restProps }) => { const inputNode = ; + return (
{editing ? ( @@ -39,7 +41,7 @@ const TableE = ({count,setEditData,tableData}) => { const [editingKey, setEditingKey] = useState(''); const [details, setDetails] = useState([]) const isEditing = (record) => { - return record.key === editingKey; + return editingKey.includes(record.key); } const columns = [ { @@ -135,8 +137,6 @@ const TableE = ({count,setEditData,tableData}) => { ...col, onCell: (record) => ({ record, - inputType: col.dataIndex === 'age' ? 'number' : - col.dataIndex === 'sex' ? 'select' : "text", dataIndex: col.dataIndex, title: col.title, editing: isEditing(record), @@ -154,7 +154,7 @@ const TableE = ({count,setEditData,tableData}) => { form1.setFieldsValue(newArr[0]) setDetails([...newArr]); setEditData([...newArr]); - setEditingKey(newArr[0].key); + setEditingKey(newArr.map(item => item.key)); }; useEffect(() => { @@ -167,7 +167,7 @@ const TableE = ({count,setEditData,tableData}) => { <>
({ drp: '', rz: item, tm: '1小时' })) + const newArr = res.data?.water_predicts.map(item => ({ drp: '', rz: item?.toFixed(2), tm: '1小时' })) setTableData(newArr) setTableForm({...tableForm,tabArr:newArr}) } @@ -1476,11 +1476,11 @@ export default function TestLine() { return } try { - setTableForm({ tabArr: editData, time: type.time }) const newTabl = editData.map(item => ({ ...item, rz: rowObj[item.tm], })) + setTableForm({ tabArr: newTabl, time: type.time }) setTableData(newTabl) } catch (errInfo) { @@ -1508,7 +1508,8 @@ export default function TestLine() {
- + {/* */} +
diff --git a/src/views/TestLine/toolbar.js b/src/views/TestLine/toolbar.js index 5cc89c0..a4e47ea 100644 --- a/src/views/TestLine/toolbar.js +++ b/src/views/TestLine/toolbar.js @@ -75,6 +75,9 @@ const ToolBar = ({ setSearchVal, setType, save, form1 }) => { } if ('code' in val) { setSearchVal(o) + // setType({ time: "1h" }) + // form.setFieldValue('time','1h') + // form1.resetFields() } } useEffect(() => { @@ -84,6 +87,7 @@ const ToolBar = ({ setSearchVal, setType, save, form1 }) => { } form.setFieldsValue(params) setSearchVal(params) + setType({ time: "1h" }) }, [])