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

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

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';


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;
      }
      ret.push(o);
    });
    return ret.slice(-7).reverse();
  }, [data, tableRzFilter]);

  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 toggleStType = (type) => {
    const visible = !tableRzFilter[type];
    dispatch.realview.setTableRzFilter({ [type]: visible });
  }

  const toggleAutoRefresh = () => {
    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
  }
   const setLayer = (data = [], type) => {
      const map = window.__mapref;
      const layer = map.getLayer('关联站点')
      if (layer) {
        map.removeLayer('关联站点');
        map.removeSource('关联站点');
      }
      if (data.length === 0) { return }
     if (type === 'hd') {
         map.addLayer({
        'id': '关联站点',//+new Date().getTime(),
        'type': 'symbol',
        'source': {
          'type': 'geojson',
          'data': {
            'type': 'FeatureCollection',
            'features': [],
          },
        },
        'layout': {
          'icon-allow-overlap': true,
          'text-allow-overlap': true,
          'icon-image': '水位站',
          'icon-size': [
            'interpolate', ['linear'], ['zoom'],
            10, 0.5,
            14, 1,
          ],
          'text-size': [
            'interpolate', ['linear'], ['zoom'],
            10, 10,
            14, 16,
          ],
        },
        'paint': {
          'text-color': [
            'case',
            ['!=', ['get', 'state'], 1], '#888',
            ['==', ['get', 'warning'], 3], '#f00',
            ['==', ['get', 'warning'], 2], 'yellow',
            ['==', ['get', 'warning'], 1], 'yellow',
            '#0f0'
          ],
          'text-halo-color': '#062040',
          'text-halo-width': 1
        },
        'visibility': 'visible',
      });
      }
  
      map.getSource('关联站点').setData(parseGeoJSON(data))
    }

  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> */}
        </>
      }
    >
      <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ maxWidth: '30%' }} align="left">名称</DpTableCell>
              <DpTableCell align="right">水位</DpTableCell>
              <DpTableCell align="right">保证水位(m)</DpTableCell>
              <DpTableCell align="right">警戒水位(m)</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {showData.map((row) => (
              <DpTableRow key={row.stcd} onClick={() => { flyTo(row); setLayer([row],'hd')}}>
                <DpTableCell component="th" scope="row">
                  <div className="table-ellipsis cursor-pointer">{row.stnm}</div>
                </DpTableCell>
                <DpTableCell align="right">{renderHDRz(row)}{row.stnm == '浮桥河'? '↑':""}</DpTableCell>
                {rzRender(row.rz, row.rz+5.5)}
                {rzRender(row.rz, row.rz+4)}
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
    </PanelBox>
  )
}

export default HDReal;