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

import React, { useMemo, useState, useEffect } 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 { DatePicker } from 'antd';
import moment from 'moment';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'

import './index.less'
const { RangePicker } = DatePicker;

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 t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
  // let { data } = useRequest(HDRealPromise.get, t);
  const [setting, showSetting] = useState(false);

  // const showData = useMemo(() => {
  //   if (!data) {
  //     return [];
  //   }
  //   let ret = [];
  //   data.forEach(o => {
  //     if (!tableRzFilter[o.type]) {
  //       return;
  //     }
  //     o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
  //     o.kd = (Math.random() * 100).toFixed(2);
  //     o.ll = (Math.random() * 100).toFixed(1);
  //     ret.push(o);
  //   });
  //   return ret;
  // }, [data, tableRzFilter]);

  const showData = Array(1).fill(0).map((o, i) => ({
    date: '2025-05-26',
    event: '侵占河道',
    type: '侵占河道',
    status: '待处理',
    place: '浮桥河灌区'
  }))

  const flyTo = (record) => {
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
        zoom: config.poiPositionZoom.hd,
        pitch: config.poiPitch,
      });
    }
  }


  const data = [
    { key: '0', date: '合计', supply: '15402.15', lastMonth: '14725.78' },
    { key: '1', date: '2025-05-01', supply: '643.91', lastMonth: '446.78', waterp: '水厂1' },
    { key: '2', date: '2025-05-02', supply: '654.94', lastMonth: '527.03', waterp: '水厂2' },
    { key: '3', date: '2025-05-03', supply: '674.31', lastMonth: '528.33', waterp: '水厂3' },
    { key: '4', date: '2025-05-04', supply: '619.43', lastMonth: '448.18', waterp: '水厂4' },
    { key: '5', date: '2025-05-05', supply: '537.5', lastMonth: '483.9', waterp: '水厂5' }
  ];
  const toggleStType = (type) => {
    const visible = !tableRzFilter[type];
    dispatch.realview.setTableRzFilter({ [type]: visible });
  }
  const [params, setParams] = useState({ tm: [] })
  const toggleAutoRefresh = () => {
    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
  }
const [dimension, setDimension] =useState('ft');

  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,
    })
  };
  useEffect(() => {
    let options = "";
    options = {
      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)

  }, [])
  return (
    <PanelBox
      style={style}
      title="供水量统计"
      color="green"
      // tabs={
      //   <span className="button-group">
      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
      //   </span>
      // }
      extra={
        <>
          {/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
        </>
      }
    >
      <div style={{display:'flex',columnGap:10}}>
        <div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "60%", margin: '10px' }}>
          <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>
        <div style={{marginBottom:10}}>
          <FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
        <InputLabel id="analysis-select-label"></InputLabel>
        <Select
          labelId="analysis-select-label"
          value={dimension}
          label=""
          onChange={(event) => {
            const value = event.target.value;
            setDimension(value);
          }}
          sx={{
            color: '#fff',
            '.MuiOutlinedInput-notchedOutline': {
              borderColor: 'rgba(255, 255, 255, 0.3)',
            },
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: 'rgba(255, 255, 255, 0.6)',
            },
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: '#fff',
            }
          }}
        >
          <MenuItem value="ft">福田镇</MenuItem>
          <MenuItem value="lc">龙池桥镇</MenuItem>
          <MenuItem value="mz">木子店镇</MenuItem>
          <MenuItem value="sb">宋埠镇</MenuItem>
          <MenuItem value="htg">黄土岗镇</MenuItem>
          <MenuItem value="tmg">铁门岗镇</MenuItem>
        </Select>
          </FormControl>
        </div>
      </div>
      <TableContainer style={{ height: '80%', marginTop: '10px' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow >
              <DpTableCell style={{ width: '25%' }} align="center">日期</DpTableCell>
              <DpTableCell style={{ width: '25%' }} align="center">水厂</DpTableCell>
              <DpTableCell style={{ width: '25%' }} align="center">供水量(m³)</DpTableCell>
              <DpTableCell align="center" style={{ width: '25%' }}>上月对比(m³)</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((row) => (
              <DpTableRow key={row.id}>
                <DpTableCell align="center">
                  <div
                    className="table-ellipsis cursor-pointer"
                  >{row.date}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.waterp}</DpTableCell>
                <DpTableCell align="center">{row.supply}</DpTableCell>
                <DpTableCell align="center">{row.lastMonth}</DpTableCell>
                {/* {rzRender(row.rz, row.grz)}
                {rzRender(row.rz, row.wrz)} */}
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
    </PanelBox>
  )
}

export default HDReal;