mcfxkh-Web/src/views/Home/panels/SzWatch/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 { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import { styled } from '@material-ui/styles';

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 CustomSwitch = styled(Switch)({
      '& .MuiSwitch-switchBase': {
        color: '#fff',
        '&.Mui-checked': {
          color: '#1890ff',
          '& + .MuiSwitch-track': {
            backgroundColor: '#1890ff',
            opacity: 0.5,
          },
        },
      },
      '& .MuiSwitch-track': {
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
      },
    });
    
    const StyledFormControlLabel = styled(FormControlLabel)({
      '& .MuiFormControlLabel-label': {
        color: '#fff'
      }
    });
    const [dimension, setDimension] = useState('fqh');
      const [checked, setChecked] = React.useState(false);
  // 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) => ({
    "lgtd": 112.071 +2.9619,
    "lttd": 30.9641 +0.2002,
    "tm": "2025-03-21 08",
    "doxLevelStr": "Ⅰ类",
     stnm:'麻城水站'
  }))

  const flyTo = (record) => {
      dispatch.map.setLayerVisible({'ShuizhiLayer':true})
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: '水质站', properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
        zoom: config.poiPositionZoom.hd,
        pitch: config.poiPitch,
      });
    }
  }

  const toggleStType = (type) => {
    const visible = !tableRzFilter[type];
    dispatch.realview.setTableRzFilter({ [type]: visible });
  }

  const toggleAutoRefresh = () => {
    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
  }

const switchChange = (e) => {
    const val = e.target.checked
    setChecked(val)
    if (val) {
      dispatch.runtime.setCameraTarget({
        center: [114.81944, 31.12068],
        zoom: 13,
        pitch: 60,
      });
    } else {
    dispatch.runtime.setHome();

    }
  }

  return (
    <PanelBox
      style={style}
      title="水质监测"
      color="green"
      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> */}
        </>
      }
    >
        <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow >
              <DpTableCell style={{ width: '40%' }} align="center">站点名称</DpTableCell>
              <DpTableCell style={{ width: '30%' }} align="center">时间</DpTableCell>
              <DpTableCell align="center" style={{ width: '30%' }}>水质类别</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {showData.map((row) => (
              <DpTableRow key={row.id} onClick={() => flyTo(row)}>
                <DpTableCell align="center">
                  <div
                    className="table-ellipsis cursor-pointer"
                  >{row.stnm}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.tm}</DpTableCell>
                <DpTableCell align="center">{row.doxLevelStr}</DpTableCell>
                {/* {rzRender(row.rz, row.grz)}
                {rzRender(row.rz, row.wrz)} */}
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <div style={{ position: 'absolute', color: '#fff', top: 70, left: -280, display: 'flex', alignItems: 'center' }}>
      
              <StyledFormControlLabel
                control={
                  <CustomSwitch
                    checked={checked}
                    onChange={switchChange}
                  />
                }
                label="多灌区模式"
              />
              {checked && <div style={{ marginTop: "-15px" }}>
                <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="fqh">浮桥河灌区</MenuItem>
                    <MenuItem value="shk">三河口水库灌区</MenuItem>
                    <MenuItem value="qjs">群建水库灌区</MenuItem>
                    <MenuItem value="dsb">大石板灌区</MenuItem>
                  </Select>
                </FormControl>
              </div>}
            </div>
    </PanelBox>
  )
}

export default HDReal;