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

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

import HighlightOff from '@material-ui/icons/HighlightOff';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
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 { SkRealPromise } from '../../../../models/_/real';
import Setting from './Setting';
import appconsts from '../../../../models/appconsts';
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';

import SkPicReal from '../../../Mgr/xqjs/SkPicReal';

const useStyles = makeStyles((theme) => ({
  modal: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: "80%",
    marginLeft: "10%",
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: '1px solid rgba(41, 182, 246, 0.4)',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
    width: "100%",
  },
}));


function SkReal({ style }) {
  const dispatch = useDispatch();
  const skAutoRefresh = useSelector(s => s.realview.skAutoRefresh);
  const t = useRefresh(skAutoRefresh ? 60 * 1000 : 0);
  let { data } = useRequest(SkRealPromise.get, t);
  const sortedData = useMemo(() => (data || []).sort((a, b) => (b.aRz - a.aRz), [data]));
  const [setting, showSetting] = useState(false);
  const tableSkDrpField = useSelector(s => s.realview.tableSkDrpField);

  data = data || [];

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

  const toggleAutoRefresh = () => {
    dispatch.realview.setSkAutoRefresh(!skAutoRefresh);
  }

  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };
const setSkLayer = (data = []) => {
      const map = window.__mapref;
      const layer = map.getLayer('临时水库tz')
      if (layer) {
        map.removeLayer('临时水库tz');
        map.removeSource('临时水库tz');
      }
      if (data.length === 0) { return }
      map.addLayer({
        'id': '临时水库tz',//+new Date().getTime(),
        'type': 'symbol',
        'source': {
          'type': 'geojson',
          'data': {
            'type': 'FeatureCollection',
            'features': [],
          },
        },
        'layout': {
          // 'icon-allow-overlap': true,
          // 'text-allow-overlap': true,
          'icon-image': '水库', // 从properties中动态读取icon字段
          'icon-size': [
            'interpolate', ['linear'], ['zoom'],
            10, 0.8,
            14, 0.8,
          ],
          'text-size': [
            'interpolate', ['linear'], ['zoom'],
            5, 10,
            14, 14,
          ],
          'text-font': ['Roboto Black'],
          'text-field': [
            'step',
            ['zoom'],
            '',
            8, ['get', 'stnm']
          ],
          'text-anchor': 'top',
          'text-offset': [0, 1],
        },
        'paint': {
          'text-color': '#fff'
        },
        'visibility': 'visible',
      });
      map.getSource('临时水库tz').setData(parseGeoJSON(data))
    }
  return (
    <PanelBox
      style={style}
      title="水库监测"
      color="green"
      extra={
        <>
          {/* <i style={{ marginRight: '0.5rem', color: skAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
          {/* <i style={{ marginRight: '0.5rem' }} className="ionicons image cursor-pointer" onClick={handleOpen}></i> */}
          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
        </>
      }
    >
      <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ minWidth: '6rem' }} align="left">名称</DpTableCell>
              <DpTableCell style={{ minWidth: '8rem' }} align="center">{appconsts.drpTtype[tableSkDrpField]}降雨(mm)</DpTableCell>
              <DpTableCell style={{ minWidth: '3rem' }} align="right">水位(m)</DpTableCell>
              <DpTableCell style={{ minWidth: '6rem' }} align="right">超汛限(m)</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {[...sortedData.filter(o=>o.rzState===1)].map((row) => (
              <DpTableRow key={row.stcd} onClick={() => { flyTo(row); setSkLayer([row]) }}>
                <DpTableCell component="th" scope="row">
                  <div className="table-ellipsis cursor-pointer" >{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div>
                </DpTableCell>
                <DpTableCell align="center">{row['h24']}</DpTableCell>
                <DpTableCell align="right">{row?.rz}</DpTableCell>
                <DpTableCell align="right">{renderSkArz(row)}</DpTableCell>
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }

      {/*水库图片弹窗*/}
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <div className={classes.paper}>
            <HighlightOff style={{ color: "#fff", position: "absolute", right: "1rem", fontSize: "2rem", cursor: "pointer" }} onClick={handleClose} />
            <SkPicReal />
          </div>
        </Fade>
      </Modal>
    </PanelBox>
  )
}

export default React.memo(SkReal);