tsg-web/src/views/gxsl/gsnlfx/KrLine.js

import React,{useEffect,useMemo,useState} from 'react'
import { Button, DatePicker, Table } from 'antd';
import { createCrudService } from '../../../components/crud/_';
import usePageTable from '../../../components/crud/usePageTable2';
import moment from 'moment';
import apiurl from '../../../service/apiurl';
import {reservoirmonitor} from '../../../service/sssq'
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption';
const {RangePicker} = DatePicker;
export default function KrLine({ record }) {
    const tm = [
        moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
        moment().add(1, 'hour').set({ minute: 0, second: 0 }),
    ];
    const stm = moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:ss");
    const etm = moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:ss");
    const columns = [
        {title: '时间', key: '', dataIndex: '', align: 'center',render:(rec)=>moment(rec.tm).format('MM-DD HH:mm')},
        {
          title: '水位(m)', key: 'rz', dataIndex: 'rz', align: 'center',
          render: (rec) => <span>{rec ? rec.toFixed(2) :  "-"}</span>},
        {
          title: '库容(万m³)', key: 'w', dataIndex: 'w', align: 'center',
          render: (rec) => <span>{rec ??"-"}</span>,
        },
    ];
    const [data, setData] = useState([]);
    const [params, setParams] = useState({})
    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sssq.reservoirmonitor1).find_noCode);
    const option = useMemo(() => {
        return drpOption({data});
      }, [data])
    const searchTm = (e) => {
        setParams({
          ...params,
          stm: e[0].format("YYYY-MM-DD HH:mm:ss"),
          etm: e[1].format("YYYY-MM-DD HH:mm:ss"),
          tm:e,
        })
    };
    
    const doSearch = () => {
        search({ search: params })
        getData(params)
      }
    
    
      const getData = async (params) => {
        setData(await reservoirmonitor(params));
      }
    useEffect(() => {
        const params = {
            search: {
                stm,
                etm
            }
        }
        if (record?.stcd) {
            search(params)
            getData({stcd:record.stcd,...params.search})
            setParams({tm,stcd:record.stcd}) 
        }
      }, [record])
  return (
      <div>
            <div className="top-toobar" style={{marginBottom:20,width:"100%"}}>
            <RangePicker showTime allowClear style={{width: "330px"}}
                         onChange={searchTm}
                         format="YYYY-MM-DD HH:mm"
                         value={params.tm}
            />
            <Button type="primary" onClick={doSearch} style={{marginLeft: "10px"}}>查询</Button>
            <Button  onClick={()=>setParams({...params,tm,stm,etm})} style={{marginLeft: "10px"}}>重置</Button>
          </div>
          <div style={{width:"100%"}}>
              
              <Table
                  columns={columns}
                  rowKey="inx"
                  {...tableProps}
                  scroll={{ y: "calc( 100vh - 700px )" }}
                  style={{height:"calc( 100vh - 650px )"}}
              />
              <div className="top-right" style={{height:"40vh",marginTop:40}}>
              {
            data.length > 0 ?
              <ReactEcharts
                option={option}
                style={{width: "100%", height: '100%'}}
              /> : <div style={{textAlign: "center", margin: "10%"}}>
                <img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
              </div>
          }
        </div>
           </div>
            
    </div>
  )
}