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 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'){
      return (skData.filter(o=>o.w>0.375 && o.w<=100)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w))
    }
    if(skType==='4'){
      return (skData.filter(o=>o.w>=0 && o.w<=0.375)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w))
    }
    return []
  },[skData,skType,sort])

  const skTypeObj = [
    {type:'1',name:'大型水库',num1:3,num2:7.9316},//8.735
    {type:'2',name:'中型水库',num1:7,num2:1.627},
    {type:'3',name:'小(1)型水库',num1:43,num2:1.627},
    {type:'4',name:'小(2)型水库',num1:207,num2:8.735},
  ]

  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],
        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': '水库', // 从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"
    >
      <CountPage/>
      {
        skTypeObj.map((item)=>
          (<>
            <CollapsePage type={item.type} name={item.name} num1={item.num1} num2={item.num2} skType={skType} setSkType={setSkType}/>
            <Collapse in={skType===item.type}  timeout="auto" unmountOnExit>
              <TableContainer style={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
                <Table size="small" stickyHeader>
                  <TableHead>
                    <TableRow>
                        <DpTableCell style={{ minWidth: '1rem' }} align="left">序号</DpTableCell>
                        <DpTableCell style={{ minWidth: '5rem' }} align="center">水库名称</DpTableCell>
                        <DpTableCell style={{ minWidth: '8rem' }} align="center">类型</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="center" >{tableRow.w}</DpTableCell>
                      </DpTableRow>
                    </TableBody>
                    )
                  }
                </Table>
              </TableContainer>
            </Collapse>
          </>)
        )
      }
    </PanelBox>
  )
} 
 
export default DrpReal;