mcfxkh-Web/src/views/Home/InfoDlg/GqbzDlg/jcsj.js

import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
import { DatePicker, Empty } from 'antd';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import DpTableRow from '../../../../layouts/mui/DpTableRow';

import React, { useEffect, useState, useMemo } from 'react';
// import './index.less'
// import { hdData, detailHdData } from './constance';
const { RangePicker } = DatePicker;
const useStyles = makeStyles({
  tableContainer: {
    background: '#182d42', // 设置表格容器的背景颜色
  },
  item: {
    '& .MuiGrid-item': {
      '& [class*="makeStyles-title"]': {
        color: '#fff',
        backgroundColor: '#104175',
      },
    },
  },
});
const DpTableCell = withStyles({
  head: {
    backgroundColor: '#104175',
    color: '#fff',
    fontSize: '1rem',
    padding: '0.5rem 0.3rem !important',
  },
  body: {
    color: '#fff',
    fontSize: '0.9rem',
    padding: '0.7rem 0.3rem !important',
    borderBottom: 'none',
    position: "relative"
  },
})(TableCell);

function DrpStAround({ record }) {
  const classes = useStyles();
  //今天日历数
  const days = moment().diff(moment().startOf('year'), 'days') + 1
  const [data, setData] = useState([]);
  const [initialDateRange, setInitialDateRange] = useState({})
  const [detail, setDetail] = useState({});
  const [params, setParams] = useState({ tm: [] })
  const searchTm = (e) => {
    setParams({
      ...params,
      stm: e[0].format("YYYY-MM-DD HH:mm"),
      etm: e[1].format("YYYY-MM-DD HH:mm"),
      tm: e,
    })
  };

  const doSearch = () => {
    getData(params)
  }
  const getData = async (params) => {
    setData([])
    // setDetail(detailHdData)
    // setData(await monitor(params));
    // setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
  }
  useEffect(() => {
    let options = "";
    options = {
      stcd: record.stcd,
      source: record.source,
      etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
      stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
      tm: [
        moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
        moment().add(1, 'hour').set({ minute: 0, second: 0 }),
      ],
    }

    setParams(options)
    getData(options)

  }, [record])
  return (
    <div className='infoDlg_jcsj' style={{ width: '100%' }}>
      <div className='toolbar'>
        <div className='tm' style={{ position: "relative", zIndex: 999999 }}>
          <RangePicker
            width="100%"
            className='time-picker'
            style={{
              flex: 1,
              background: "transparent",
              border: "none",
              color: "#fff",
            }}
            onChange={searchTm}
            allowClear
            format="YYYY-MM-DD HH:mm"
            showTime={{
              format: 'HH:mm',
            }}
            value={params.tm}
            getPopupContainer={trigger => trigger.parentElement}
          />
        </div>
        <button onClick={doSearch} className='search'>查询</button>
      </div>
      <div className='content' style={{ height: "49vh" }}>
        <div className='list' style={{ width: '100%' }}>
          <TableContainer
            locale={{ emptyText: '暂无数据' }}
            style={{ height: '100%' }}
            className={classes.tableContainer}
          >
            <Table size="small" stickyHeader>
              <TableHead>
                <TableRow>
                  <DpTableCell align="center" style={{ width: '17%' }}>时间</DpTableCell>
                  <DpTableCell align="center" style={{ width: '16%' }}>站上水位(m)</DpTableCell>
                  <DpTableCell align="center" style={{ width: '16%' }}>站下水位(m)</DpTableCell>
                  <DpTableCell align="center" style={{ width: '17%' }}>抽水流量(m³)</DpTableCell>
                  <DpTableCell align="center" style={{ width: '17%' }}>开机台数(台)</DpTableCell>
                  <DpTableCell align="center" style={{ width: '17%' }}>开机功率(KW)</DpTableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {
                  data.length > 0 ? data.map((row) => (
                    <DpTableRow key={row.stnm}>
                      <DpTableCell align="center"><div className="ellipsis">{moment(row.tm).format('MM-DD HH:mm')}</div></DpTableCell>
                      <DpTableCell align="center">{row.drp ?? "-"}</DpTableCell>
                      <DpTableCell align="center">{row.z ? row.z.toFixed(2) : "-"}</DpTableCell>
                      {/* <DpTableCell align="center">{row.q?? "-"}</DpTableCell> */}
                      <DpTableCell align="center">{row.tq ?? "-"}</DpTableCell>
                    </DpTableRow>
                  )) :
                   
                      <Empty style={{ position: 'absolute', top: '300px', left: '550px' }} description={false}/>
                  
                }
              </TableBody>
            </Table>
          </TableContainer>
        </div>

      </div>

    </div>
  )
}

export default DrpStAround