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

import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import { useDispatch, useSelector } from 'react-redux';
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 clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;

const data1 = [
  {
      "res_cd": "42118140035",
      "res_lon": 115.14137,
      "res_lat": 31.55095,
      "cd": "01",
      "cd_nm": "GN1",
      "res_reg_cd": "42118140006-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "大堰口水库",
      "de_value": -4.2885,
      "dn_value": -13.5384,
      "du_value": 132.4892,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.0981,
      "max_dn": -2.3255,
      "max_du": 132.4892,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140035",
      "res_lon": 115.14137,
      "res_lat": 31.55095,
      "cd": "03",
      "cd_nm": "GN3",
      "res_reg_cd": "42118140006-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "大堰口水库",
      "de_value": -10.73,
      "dn_value": -9.8975,
      "du_value": 121.3495,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.0981,
      "max_dn": -2.3255,
      "max_du": 132.4892,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140035",
      "res_lon": 115.14137,
      "res_lat": 31.55095,
      "cd": "02",
      "cd_nm": "GN2",
      "res_reg_cd": "42118140006-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "大堰口水库",
      "de_value": 1.0981,
      "dn_value": -7.0736,
      "du_value": 75.4661,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.0981,
      "max_dn": -2.3255,
      "max_du": 132.4892,
      "dt": "2025-05-20",
      "is_has_data": "y"
  }
]


function DrpReal({ style }) {
  const [tab,setTab] = useState('1')
  const dispatch = useDispatch();
  const [params, setParams] = useState({ tm: [
    moment().add(-7, 'days'),
    moment(),
  ] })

  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,
    })
  };


  return (
    <PanelBox
      style={style}
      title="水厂总览"
      color="green"
      extra={
        <>
          <div className='tm' style={{ color: "#fff", width: "90%",marginLeft:"1rem" }}>
            <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>
        </>
      }  
    >
      <img  src='/assets/jinshuigongshui.jpg' style={{width:'19.5rem', marginLeft:'3.5rem',marginTop:'0.5rem',marginBlock:'0.5rem'}}/>
      <TableContainer style={{ height: '10rem' }}>
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <DpTableCell style={{ minWidth: '8rem' }} align="center">水厂名称</DpTableCell>
                <DpTableCell style={{ minWidth: '3rem' }} align="center">进水量</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align="center">供水量</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data1.map((row,index) => (
                <DpTableRow key={row.stcd}>
                  <DpTableCell component="th" scope="row">
                    <div className="table-ellipsis cursor-pointer" onClick={() => {
                      const { res_lon:lgtd, res_lat:lttd } = row;
                      if (lgtd && lttd) {
                        dispatch.runtime.setCameraTarget({
                          center: [lgtd, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.res_nm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{row.cd_nm}</DpTableCell>
                  <DpTableCell align="center">{row.du_value}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>
        
       
      </TableContainer>
    </PanelBox>
  )
}

export default DrpReal;