mcfxkh-Web/src/views/Home/panels/Shuikugh/index.js

import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';

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';
import { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import { Empty } from 'antd'
import TableYj from './tableYj';
import { Select, MenuItem } from '@material-ui/core/index'

// import showData from './constant'
function rzRender(rz, base) {
  return (
    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
      {typeof base === 'number' ? base.toFixed(2) : ''}
    </DpTableCell>
  );
}

function HDReal({ style }) {
  const dispatch = useDispatch();
  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
  const num = useSelector(s => s.runtime.duibifxNum)

  const yyRes = useSelector(s => s.runtime.yyObj);
  const [setting, showSetting] = useState(false);
  const [dimension, setDimension] = useState('ft');


  const data = [

    {
      "guid": "42118120003",
      "code": "",
      "name": "浮桥河水库",
      "resRegCode": "42000020030-A4",
      "adName": "白果镇",
      "engScal": "大（2）型",
      "place": "湖北省-黄冈市-麻城市-白果镇",
      "lon": "115.068090",
      "lat": "31.026170",
      'username': '熊杰',
      taskType: '除草除杂',
      tm: '2025-06-02 17:38:00',
      status: '已处理'
    },
    {
      "guid": "42118120003",
      "code": "",
      "name": "浮桥河水库",
      "resRegCode": "42000020030-A4",
      "adName": "白果镇",
      "engScal": "大（2）型",
      "place": "湖北省-黄冈市-麻城市-白果镇",
      "lon": "115.068090",
      "lat": "31.026170",
      'username': '白斌',
      taskType: '除草除杂',
      tm: '2025-06-02 17:09:11',
      status: '已处理'
    },
    {
      "guid": "42118120003",
      "code": "",
      "name": "明山水库",
      "resRegCode": "42000020030-A4",
      "adName": "白果镇",
      "engScal": "大（2）型",
      "place": "湖北省-黄冈市-麻城市-白果镇",
      "lon": "115.068090",
      "lat": "31.026170",
      'username': '余静',
      taskType: '危险提示',
      tm: '2025-06-02 16:10:00',
      status: '已处理'
    },
    {
      "guid": "42118120003",
      "code": "",
      "name": "永红水库",
      "resRegCode": "42000020030-A4",
      "adName": "白果镇",
      "engScal": "大（2）型",
      "place": "湖北省-黄冈市-麻城市-白果镇",
      "lon": "115.068090",
      "lat": "31.026170",
      'username': '周真',
      taskType: '设备养护',
      tm: '2025-06-02 15:00:49',
      status: '待处理'
    },
    {
      "guid": "42118120003",
      "code": "",
      "name": "永丰水库",
      "resRegCode": "42000020030-A4",
      "adName": "白果镇",
      "engScal": "大（2）型",
      "place": "湖北省-黄冈市-麻城市-白果镇",
      "lon": "115.068090",
      "lat": "31.026170",
      'username': '陈发',
      taskType: '除草除杂',
      tm: '2025-06-02 14:43:49',
      status: '已处理'
    },
  ]


  const [list, setList] = useState(data)
  const onChange = (event) => {
    const value = event.target.value;
    setDimension(value);
    const newData = data.filter(item => item.taskType == value);
    if (newData.length) {
      setList(newData);
    } else {
      setList(data)
    }
  }
   const flyTo = () => {
    dispatch?.runtime.setInfoDlg({ layerId: 'ShuikuyanghuLayer', properties: {} })
  }
  return (
    <PanelBox
      style={style}
      title="水库管护"
      color="green"
      extra={
        <>
          <div style={{ height: '30px', overflow: 'hidden' }}>
            <Select
              labelId="analysis-select-label"
              value={dimension}
              label="请选择管护类型"
              onChange={onChange}
            >
              <MenuItem value="ft">请选择管护类型</MenuItem>
              <MenuItem value="除草除杂">除草除杂</MenuItem>
              <MenuItem value="设备养护">设备养护</MenuItem>
              <MenuItem value="危险提示">危险提示</MenuItem>
            </Select>
          </div>
        </>
      }
    >
      <TableContainer style={{ height: '200px', overflow: 'auto' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ width: '30%' }} align="center">水库名称</DpTableCell>
              <DpTableCell style={{ width: '20%' }} align="center">管护类型</DpTableCell>
              <DpTableCell style={{ width: '25%' }} align="center">内容</DpTableCell>
              <DpTableCell style={{ width: '25%' }} align="center">上报时间</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {list.map((row, index) => (
              <DpTableRow key={row.stcd} onClick={flyTo}>
                <DpTableCell align="center">
                  <div
                    className="table-ellipsis cursor-pointer"
                  >{row.name}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.taskType}</DpTableCell>
                <DpTableCell align="center">一切正常</DpTableCell>
                <DpTableCell align="center"> <div
                  className="table-ellipsis cursor-pointer"
                >{row.tm}</div></DpTableCell>
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
    </PanelBox>
  )
}

export default HDReal;