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

import React, { useEffect, useMemo, useState } from 'react';
import { Switch, Collapse, Table, TableContainer, TableBody, TableHead, TableRow, TableSortLabel } from '@material-ui/core/index'
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import PanelBox from '../../components/PanelBox';
import { parseGeoJSON } from "../../../../utils/tools";
import { SkRealPromise } from "../../../../models/_/real";
import { useDispatch, useSelector } from 'react-redux';
import CountPage from './countPage'
import CollapsePage from './collapsePage'



function DrpReal({ style }) {
  const [dimension, setDimension] = useState('ft');
  const [skData, setSkData] = useState([])
  const [skType, setSkType] = useState('')
  const [sort, setSort] = useState(true)
  const [sort1, setSort1] = useState(true)
  const dispatch = useDispatch();
  const tableData = useMemo(() => {
    if (skType === '1') {
      return (skData.filter(o => o.w > 10000) || []).sort((a, b) => sort ? (b.w - a.w) : (a.w - b.w))
    }
    if (skType === '2') {
      return (skData.filter(o => o.w > 100 && o.w <= 10000) || []).sort((a, b) => sort ? (b.w - a.w) : (a.w - b.w))
    }
    if (skType === '3') {
      const filterSkData = skData.filter(o => o.w > 0.375 && o.w <= 100) || [];
      const newFilterData = filterSkData.map(item => ({ ...item, xs: (item.w * 0.6).toFixed(2) }))
      return newFilterData.sort((a, b) => sort ? (b.w - a.w) : (a.w - b.w))
    }
    if (skType === '4') {
      const filterSkData = skData.filter(o => o.w >= 0 && o.w <= 0.375) || [];
      const newFilterData = filterSkData.map(item => ({ ...item, xs: (item.w * 0.6).toFixed(2) }))
      return newFilterData.sort((a, b) => sort ? (b.w - a.w) : (a.w - b.w))
    }
    return []
  }, [skData, skType, sort, sort1])

  const skTypeObj = [
    { type: '1', name: '大型水库', num1: 3, num2: 7.93,num3:8.73,icon:'大型水库.png' },//8.735
    { type: '2', name: '中型水库', num1: 7, num2: 0.51,num3:1.62,icon:'中.png' },
    { type: '3', name: '小(1)型水库', num1: 44, num2: 31.54,num3:52.61 ,icon:'小1.png'},
    { type: '4', name: '小(2)型水库', num1: 207, num2: 10.11,num3:16.91 ,icon:'小1.png'},
  ]

  useEffect(() => {
    getSkData()

    // return ()=>{
    //   const map = window.__mapref;
    //   const layer = map.getLayer('临时水库tz')
    //   if(layer){
    //       map.removeLayer('临时水库tz');
    //       map.removeSource('临时水库tz');
    //   }
    // }
  }, [])

  const getSkData = async () => {
    const data = await SkRealPromise.get();
    setSkData(data)
  }

  const flyTo = (row) => {
    const { lgtd, lttd } = row;
    if (lgtd && lttd) {
      // dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: row, coordinates: [row.lgtd, row.lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + 0.005],
        zoom: 15,
        pitch: 50,
        bearing: 0
      });
    }
  }

  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': [
          'case',
          ['==', ['get', 'rzWarning'], 1], '水库-超汛限',
          '水库'
        ], // 从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))
  }

  const getBxx = (a,b)=>{
    if(typeof a === 'number' && typeof b === 'number' ){
      return (a-b).toFixed(2)
    }else{
      return '-'
    }
  }

  return (
    <PanelBox
      style={style}
      title="水库总览"
      color="green"
    >
      <CountPage />
      {
        skTypeObj.map((item) =>
        (<>
          <CollapsePage type={item.type} name={item.name} num1={item.num1} num2={`${item.num3}`} skType={skType} setSkType={setSkType} icon={item.icon} />
          <Collapse in={skType === item.type} timeout="auto" unmountOnExit>
            <TableContainer style={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
              <Table size="small" stickyHeader>
                <TableHead>
                  <TableRow>
                    <DpTableCell style={{ minWidth: '3rem' }} align="left">序号</DpTableCell>
                    <DpTableCell style={{ minWidth: '8rem' }} align="center">水库名称</DpTableCell>
                    {/* <DpTableCell style={{ minWidth: '8rem' }} align="center">类型</DpTableCell> */}
                    <DpTableCell style={{ minWidth: '6rem' }} align="center">
                      {/* <TableSortLabel
                            onClick={() => setSort1(!sort1)}
                            active={true}
                            direction={sort1?'desc':'asc'}>
                            {'蓄水量(万m³)'}
                          </TableSortLabel> */}
                      当前水位 (m)
                    </DpTableCell>
                    <DpTableCell style={{ minWidth: '8rem' }} align="center">
                      <TableSortLabel
                        onClick={() => setSort(!sort)}
                        active={true}
                        direction={sort ? 'desc' : 'asc'}>
                        {'库容(万m³)'}
                      </TableSortLabel>
                    </DpTableCell>
                  </TableRow>
                </TableHead>
                {
                  tableData.map((tableRow, index) =>
                    <TableBody>
                      <DpTableRow key={tableRow.stcd}>
                        <DpTableCell align="center" >{index + 1}</DpTableCell>
                        <DpTableCell align="center" >
                          <div className="table-ellipsis cursor-pointer" onClick={() => {
                            flyTo(tableRow)
                            setSkLayer([tableRow])
                          }}>
                            {tableRow.stnm}
                          </div>
                        </DpTableCell>
                        {/* <DpTableCell align="center" >{item.name}</DpTableCell> */}
                        <DpTableCell align="right" >{`${tableRow.rz} (${getBxx(tableRow.rz,tableRow.fsltdz)})`}</DpTableCell>
                        <DpTableCell align="center" >{tableRow.w}</DpTableCell>
                      </DpTableRow>
                    </TableBody>
                  )
                }
              </Table>
            </TableContainer>
          </Collapse>
        </>)
        )
      }
    </PanelBox>
  )
}

export default DrpReal;