mcfxkh-Web/src/views/Home/InfoDlg/WyWarnDlg/index.js

import React from 'react';
import DpTab from '../../../../layouts/mui/DpTab';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
function HDStDlg({ record, onClose }) {
  const [value, setValue] = React.useState(0);

  return (
    <Dialog
      open={true}
      onClose={onClose}
      maxWidth="xl"
      style={{ borderRadius: 0 }}
      PaperComponent={DpPaperComponent}
      BackdropComponent={DpBackgroundDrop}
    >
      <div className="boxhead"></div>
      <DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden',height:'40rem' }}>
        <DpAppBar position="sticky">
          <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
            <DpTab label="变形告警" />
          </DpTabs>
          <DpCloseButton onClick={onClose} />
        </DpAppBar>

         <TableContainer style={{ height: '80%',padding:10 }}>
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <DpTableCell  align="center">序号</DpTableCell>
                <DpTableCell  align="center">水库名称</DpTableCell>
                <DpTableCell  align="center">预警时间</DpTableCell>
                <DpTableCell  align="center">测点编号</DpTableCell>
                <DpTableCell  align="center">预警级别</DpTableCell>
                <DpTableCell  align="center">监测值</DpTableCell>
                <DpTableCell  align="center">阈值</DpTableCell>
                <DpTableCell  align="center">校验规则描述</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
                <DpTableRow >
                  <DpTableCell  align="center">
                    <div className="table-ellipsis cursor-pointer" >1</div>
                  </DpTableCell>
                  <DpTableCell align="center">浮桥河水库</DpTableCell>
                  <DpTableCell align="center">2025-5-20 10:00:00</DpTableCell>
                  <DpTableCell align="center">GN1</DpTableCell>
                  <DpTableCell align="center">红色</DpTableCell>
                  <DpTableCell align="center">-120mm</DpTableCell>
                  <DpTableCell align="center">100mm</DpTableCell>
                  <DpTableCell align="center"></DpTableCell>
                  
                </DpTableRow>
            </TableBody>
          </Table>
      </TableContainer>
      </DialogContent>
      <div className="boxfoot"></div>
    </Dialog>
  )
}

export default React.memo(HDStDlg);