fix(): 图标优化

src/views/TestLine/createData.js

@@ -1,21 +1,170 @@
-import moment from "moment";
+import { Button, Form, Input, Popconfirm, Table } from 'antd';
-export default function data(type) {
+import React, { useContext, useEffect, useRef, useState } from 'react';
-    const now = moment(); // 获取当前时间
+const EditableContext = React.createContext(null);
-    const startOfDay = now.clone().startOf('day'); // 获取今天的凌晨
+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');
+  const save = async () => {
-    while (nextTime <= now) {
+    try {
-        timeArray.push(nextTime.format('MM-DD HH:mm'));
+      const values = await form.validateFields();
-        nextTime = nextTime.clone().add(1, 'hours');
+      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);
+    setDataSource([...newArr]);
-    let result;
+    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;

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: 603, value: 420, predict: true },
-            { time: "12-24 17:00", value: 450, predict: true },
+            { time: 604, value: 450, predict: true },
-            { time: "12-24 18:00", value: 480, 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: 603, 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: 604, 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: 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],
                             },
                         ],
                     ],

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 = <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>

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" })
   }, [])