mcfxkh-Web/src/views/Home/panels/JbqkRight/page3.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 { parseGeoJSON } from "../../../../utils/tools";
import { SkRealPromise } from "../../../../models/_/real";
import CollapsePage from './collapsePage'
import { useDispatch } from 'react-redux';
import CountPage from './countPage'


function Page({jbqkKey}) {
    const [skType,setSkType] = useState('')
    const [skData,setSkData] = useState([])
    const dispatch = useDispatch()
    

    

    const flyTo = (row)=>{
        const { lgtd, lttd } = row;
        if (lgtd && lttd) {
        // dispatch.runtime.setFeaturePop({ type: 'adcd', properties: row, coordinates: [row.lgtd, row.lttd] });
        dispatch.runtime.setCameraTarget({
            center: [lgtd, lttd],//+0.003
            zoom: 15,
            pitch: 50,
            bearing: 0
        }); 
        } 
    }
 
    useEffect(()=>{
        getSkData()
        return ()=>{
          const map = window.__mapref;
          const layer = map.getLayer('临时水库')
          if(layer){
              map.removeLayer('临时水库');
              map.removeSource('临时水库');
          }
        }
    },[])

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

    const setSkLayer = (data=[])=>{
      const map = window.__mapref;
      const layer = map.getLayer('临时水库')
      if(layer){
        map.removeLayer('临时水库');
        map.removeSource('临时水库');
      }
      if(data.length===0){return}
      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': '水库', // 从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('临时水库').setData(parseGeoJSON(data))
    }


    return (
        <>
            <CountPage/>
            <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px'}}>
                <img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={18} height={18} alt=""/>
                {/* <div style={{width:'10px',height:'10px',borderRadius:'10px',background:'#8b4513',border:'2px solid #000000'}}></div> */}
                <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{'水库总数'}</div>
                <div style={{margin:'0 1rem -0.1rem 1rem'}}>{300}座</div>
                <img src={`${process.env.PUBLIC_URL}/assets/icon/${skType===1?'收起':'展开'}.png`} style={{cursor:'pointer'}} width={20} alt="" onClick={()=>{
                    setSkType(skType!==1?1:'')
                }}/>
            </div>
            <Collapse in={skType===1}  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">类型</DpTableCell>
                    </TableRow>
                  </TableHead>
                  {
                    skData.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" >{tableRow.name}</DpTableCell>
                        <DpTableCell align="center" >{tableRow.w}</DpTableCell>
                      </DpTableRow>
                    </TableBody>
                    )
                  }
                </Table>
              </TableContainer>
            </Collapse>
            <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px'}}>
                <img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={18} height={18} alt=""/>
                {/* <div style={{width:'10px',height:'10px',borderRadius:'10px',background:'#8b4513',border:'2px solid #000000'}}></div> */}
                <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{'总库容'}</div>
                <div style={{margin:'0 1rem -0.1rem 1rem'}}>{23275.4}万m³</div>
            </div>
            <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px'}}>
                <img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={18} height={18} alt=""/>
                {/* <div style={{width:'10px',height:'10px',borderRadius:'10px',background:'#8b4513',border:'2px solid #000000'}}></div> */}
                <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{'浮桥河水库'}</div>
                <div style={{margin:'0 1rem -0.1rem 1rem'}}>县内最大水库</div>
            </div>
        </>
    )
}

export default Page;