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

import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import { Table, Card, Modal, Form, Spin, Button, Row, Col, Typography, message, Tabs, Image, InputNumber, Descriptions } from 'antd';
import ToolBar from './toolbar'
import ReactEcharts from 'echarts-for-react';
import './index.less'
import drpOption from './drpOption.js'
import { httppost2 } from '../../utils/request';
import TestApp from './createData.js'
import { getAllHydroBatches, responseData } from './watersTools'
import apiurl from '../../service/apiurl';
import moment from 'moment';
export default function TestLine() {
  const obj = {
    'hjw': '60906600',
    'sxs': '60917600',
    'szl': '60918000',
    "wpc": 'ZH201606',
    'cq':'61013270'
  }
  const [searchVal, setSearchVal] = useState(false)
  const [historyData, setHistoryData] = useState([])
  const [predictData, setPredictData] = useState([])
  const [tableList, setTableList] = useState([])
  const [loading, setLoading] = useState(false)
  const options = useMemo(() => {
    if (searchVal.code) {
      return drpOption(predictData, historyData,searchVal.code)
    }
  }, [predictData, historyData,searchVal])

  //  const options = useMemo(() => {
  //   return drpOption(tableList)
  // }, [tableList])


  // 测试
  const columns = [
    {
      title: '预测时间点',
      dataIndex: 'tm',
      key: 'tm',
      width: 175,
      align: 'center',
      fixed:'left'
    },
    {
      title: '实际雨量(mm)',
      dataIndex: 'rain',
      key: 'rain',
      width: 100,
      align: 'center'
    },
    {
      title: '实际水位(m)',
      dataIndex: 'water',
      key: 'water',
      width: 100,
      align: 'center'
    },
    {
      title: '预测水位(m)',
      dataIndex: 'predict',
      key: 'predict',
      width: 100,
      align: 'center'
    },
    {
      title: '差值(m)',
      dataIndex: 'cz',
      key: 'cz',
      width: 90,
      align: 'center',
      render: (v, r) => <span>{(r.predict && r.water) ? Math.abs((r.predict - r.water)).toFixed(2) : ''}</span>
    },
  ]
  const getHistoryData = async (params) => {
    setLoading(true)
    params.stcd = obj[params.code];
    try {
      const result = await httppost2(apiurl.test.find, params);
      if (result.code == 200) {
        const responseData = result.data.map(item => ({ ...item, tm: moment(item.tm).format('YYYY-MM-DD HH:00:00') }))
        if (!responseData.length) {
          setHistoryData(responseData)
          return
        }
        setHistoryData(responseData)
        const allBatches = getAllHydroBatches(responseData);
        const res = await processPredictions(allBatches, params.code)
        if (res.length > 0) {
          setLoading(false)
          setPredictData(res.map(item => ({...item,predict:item.predict.toFixed(2)})))
          const tableData = res.map(item => {
            const obj = responseData.find(it => it.tm == item.tm)
            return {
              ...item,
              predict: item.predict ? item.predict.toFixed(2) : '',
              water: obj.waters,
              rain:obj.rains
            }
          })
          setTableList(tableData)
        }
      }
    } catch (error) {
      console.log(error);
    }
  }
  /**
 * 处理预测结果
 * @param {Array} batches - 批次数据
 * @param {Array} predictions - 预测结果数组
 * @returns {Array} - 返回处理后的预测结果
 */ const processPredictions = async (batches, name) => {
    const results = [];

    for (const batch of batches) {
      const prediction = await httppost2('http://202.96.165.23:10100/api/v1/bot/water_infer', {
        rains: batch.rains,
        waters: batch.waters,
        name
      });
      results.push({
        predict: prediction?.data?.water_predicts[0],  // 预测水位
        tm: batch.lastTm     // 对应的时间点
      });
    }

    return results;
  };

  const findMinMaxRain = (arr) => {

    if (arr.length === 0) {
      return { min: null, max: null }; // 如果数组为空，返回 null
    }
  
    let min = arr[0]; // 初始化最小值为第一个元素
    let max = arr[0]; // 初始化最大值为第一个元素
  
    for (let i = 1; i < arr.length; i++) {
      if (arr[i].diff < min.diff) {
        min = arr[i]; // 更新最小值
      }
      if (arr[i].diff > max.diff) {
        max = arr[i]; // 更新最大值
      }
    }
  
    return { min, max };
  }
  const summaryVal = useMemo(() => {
    if (tableList.length > 0) {
      const sum = tableList.reduce((total, cur) => total + Math.abs((cur.predict - cur.water)), 0); 
      const newArr = JSON.parse(JSON.stringify(tableList));
      const resultMaxOrMin = findMinMaxRain(newArr.map(item=> ({...item,diff:Math.abs((item.predict - item.water)).toFixed(2)})))
      return {
        avergVal: (sum / tableList.length).toFixed(2),
        maxVal: resultMaxOrMin?.max,
        minVal: resultMaxOrMin?.min,
      };
    } else {
      return {}
    }
  },[tableList])
  useEffect(() => {
    if (searchVal) {
      getHistoryData(searchVal)
    }
  }, [searchVal])


  return (
    <>
      <div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
        <div className='lf' style={{ width: "100%", overflowY: "auto" }}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
            />
          </Card>
          {
            historyData.length ? !loading ?
              <div className="ant-card-body" style={{ padding: "20px 0 0 0"}}>

                <div style={{ display: 'flex', }}>
                  <div style={{ flex: 1, height: 'calc( 100vh - 400px )', padding: 10 }}>
                    <ReactEcharts option={options} style={{ width: "100%", height: '100%' }} notMerge={true} />
                  </div>
                  <div style={{ width: 600, marginRight: 30 }}>
                    <Table
                      columns={columns}
                      dataSource={tableList}
                      rowKey='tm'
                      pagination={true}
                      scroll={{ x: 600, y: 'calc(100vh - 300px)' }}
                      summary={() => {
                        return (
                          <>
                            <Table.Summary.Row>
                              <Table.Summary.Cell index={12} align='center' colSpan={1} >差值最大值时间点</Table.Summary.Cell>
                              <Table.Summary.Cell index={1} align='center' colSpan={2}>{summaryVal?.maxVal?.tm}</Table.Summary.Cell>
                              <Table.Summary.Cell index={2} align='center' colSpan={1}>差值最大值</Table.Summary.Cell>
                              <Table.Summary.Cell index={3} align='center' colSpan={1}>{summaryVal?.maxVal?.diff}</Table.Summary.Cell>
                            </Table.Summary.Row>
                            {/* <Table.Summary.Row>
                              <Table.Summary.Cell index={4} align='center' colSpan={1} >差值最小值时间点</Table.Summary.Cell>
                              <Table.Summary.Cell index={5} align='center' colSpan={2}>{summaryVal?.minVal?.tm}</Table.Summary.Cell>
                              <Table.Summary.Cell index={6} align='center' colSpan={1}>差值最小值</Table.Summary.Cell>
                              <Table.Summary.Cell index={7} align='center' colSpan={1}>{summaryVal?.minVal?.diff}</Table.Summary.Cell>
                            </Table.Summary.Row> */}
                            <Table.Summary.Row>
                              <Table.Summary.Cell index={4} align='center' colSpan={1} >差值平均值</Table.Summary.Cell>
                              <Table.Summary.Cell index={5} align='center' colSpan={4}>{summaryVal?.avergVal}</Table.Summary.Cell>
                            </Table.Summary.Row>
                          </>
                        
                        )
                      }}
                    />
                  </div>
                </div>
              </div> : <div style={{ width: '100%', height: 'calc(100vh - 60px)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}><Spin size="large" /></div> :
              <div style={{ width: '100%', height: 'calc(100vh - 60px)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <img alt='' src={`${process.env.PUBLIC_URL}/assets/noData.png`} /></div>}
             
          
          {/* {!loading?
            <div className="ant-card-body" style={{ padding: "20px 0 0 0", height: 'calc( 100vh - 400px )' }}>

              <div style={{ display: 'flex', }}>
                <div style={{ flex: 1, height: 'calc( 100vh - 400px )', padding: 10 }}>
                  <ReactEcharts option={options} style={{ width: "100%", height: '100%' }} notMerge={true} />
                </div>
                <div style={{ width: 600, marginRight: 30 }}>
                  <Table
                    columns={columns}
                    dataSource={tableList}
                    rowKey='tm'
                    pagination={true}
                    scroll={{x:600,y:'calc(100vh - 300px)'}}
                    summary={() => {
                      return (
                        <>
                        <Table.Summary.Row>
                          <Table.Summary.Cell index={12} align='center'colSpan={1} >差值最大值时间点</Table.Summary.Cell>
                          <Table.Summary.Cell index={1} align='center' colSpan={2}>{summaryVal?.maxVal?.tm}</Table.Summary.Cell>
                          <Table.Summary.Cell index={2} align='center' colSpan={1}>差值最大值</Table.Summary.Cell>
                          <Table.Summary.Cell index={3} align='center' colSpan={1}>{summaryVal?.maxVal?.diff}</Table.Summary.Cell>
                          </Table.Summary.Row>
                          <Table.Summary.Row>
                          <Table.Summary.Cell index={4} align='center'colSpan={1} >差值最小值时间点</Table.Summary.Cell>
                          <Table.Summary.Cell index={5} align='center' colSpan={2}>{summaryVal?.minVal?.tm}</Table.Summary.Cell>
                          <Table.Summary.Cell index={6} align='center' colSpan={1}>差值最小值</Table.Summary.Cell>
                          <Table.Summary.Cell index={7} align='center' colSpan={1}>{summaryVal?.minVal?.diff}</Table.Summary.Cell>
                          </Table.Summary.Row>
                          <Table.Summary.Row>
                          <Table.Summary.Cell index={4} align='center'colSpan={1} >差值平均值</Table.Summary.Cell>
                            <Table.Summary.Cell index={5} align='center' colSpan={4}>{summaryVal?.avergVal}</Table.Summary.Cell>
                        </Table.Summary.Row>
                        </>
                        
                      )
                    }}
                  />
                </div>
              </div>
            </div> : <div style={{ width: '100%', height: 'calc(100vh - 60px)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}><Spin size="large" /></div>
          } */}
          
        </div>
      </div>
    </>
  )
}