fix(): 图标优化
parent
01204ca96d
commit
79d8a0d0a1
|
|
@ -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 (
|
||||
<Form form={form} component={false}>
|
||||
<EditableContext.Provider value={form}>
|
||||
<tr {...props} />
|
||||
</EditableContext.Provider>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
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 ? (
|
||||
<Form.Item
|
||||
style={{
|
||||
margin: 0,
|
||||
}}
|
||||
name={dataIndex}
|
||||
>
|
||||
<Input ref={inputRef} onPressEnter={save} onBlur={save} />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<div
|
||||
className="editable-cell-value-wrap"
|
||||
style={{
|
||||
paddingRight: 24,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <td {...restProps} onClick={() => toggleEdit(title)}>{childNode}</td>;
|
||||
};
|
||||
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
|
||||
}
|
||||
useEffect(() => {
|
||||
if (count) {
|
||||
handleAdd(count)
|
||||
}
|
||||
}, [count])
|
||||
useEffect(() => {
|
||||
if (tableData.length > 0) {
|
||||
setDataSource(tableData)
|
||||
setEditData(tableData)
|
||||
}
|
||||
}, [tableData])
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
components={components}
|
||||
rowClassName={() => 'editable-row'}
|
||||
bordered
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
scroll={{ x: 200, y: 'calc( 100vh - 400px )' }}
|
||||
pagination={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
|
|
@ -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],
|
||||
},
|
||||
],
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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 = <InputNumber style={{ textAlign: "center", flex: 1 }} />;
|
||||
|
||||
return (
|
||||
<td {...restProps}>
|
||||
{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}) => {
|
|||
<>
|
||||
<Form form={form1} component={false}>
|
||||
<Table
|
||||
rowKey="index"
|
||||
rowKey="key"
|
||||
components={{
|
||||
body: {
|
||||
// row: EditableRow,
|
||||
|
|
@ -1409,7 +1409,7 @@ export default function TestLine() {
|
|||
}
|
||||
)
|
||||
if (res.code == 0) {
|
||||
const newArr = res.data?.water_predicts.map(item => ({ 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() {
|
|||
</div>
|
||||
<div style={{ width: 430, marginRight: 30 }}>
|
||||
<Button type="primary" onClick={save} style={{float:'right',marginBottom:10}}>生成</Button>
|
||||
<TableE count={tmCount} setEditData={setEditData} tableData={tableData} />
|
||||
{/* <TableE count={tmCount} setEditData={setEditData} tableData={tableData} /> */}
|
||||
<TestApp count={tmCount} tableData={tableData} setEditData={setEditData}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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" })
|
||||
}, [])
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue