tsg-web/src/views/Home/hsyy/index.js

import React, { useEffect, useState, useRef } from 'react'
import { useLocation } from 'react-router'
import { useDispatch, useSelector } from 'react-redux'
import { Collapse, DatePicker, Input, Modal, message } from 'antd';
import './index.less'
import Ybfa from './ybfa'
import Ymtj from './ymtj'
import Player from './Player'
import Demo3D from '../../Home/MapCtrl/Map3D/demo'
import moment from 'moment';
const { Cesium } = window;

const records = [
  { tm:'2000-01-01 04:00:00', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:01', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:02', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:03', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:04', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:05', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:06', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:07', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:08', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:09', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:10', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:11', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:12', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:13', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:14', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:15', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:16', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:17', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:18', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:19', data:[], text:'测试' },
  { tm:'2000-01-01 04:00:20', data:[], text:'测试' },
]


const Page = ({ showPanels, mode }) => {
  const dispatch = useDispatch();
  let mapObj = useSelector(s => s.map.map)
  const [ map, setMap ] = useState(null)
  const [ ctx, setCtx ] = useState({mode:'预报方案',data:{}})
  const [ clock, setClock ] = useState(null)
  const [ testData, setTestData ] = useState([])
  useEffect(()=>{
    setTimeout(() => {
      setTestData(records) 
    }, 2000);
  },[])
  
  useEffect(() => { 
    dispatch.map.setLayerVisible({
      RealDrpLayer: true,
      PicStLayer: true,
      ShuiKuLayer: true,
      GongShuiLayer: true,
      AZDLayer: true,
      QSYDWLayer: true,
      YHJMHLayer: true
    });
    const { mode } = ctx
    //当前map对象是cesium
    if(!mapObj?._cesiumWidget){
      return
    }

    if(mode==='淹没统计'){
      mapObj.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(114.786546000,31.496518000,1500),
        orientation: {
          heading: Cesium.Math.toRadians(-90),
          pitch: Cesium.Math.toRadians(-35.0),
          roll: 0.0
        }
      });

      const demo = new Demo3D()    
      demo.getCzml2(mapObj)
    }else{
      mapObj.dataSources._dataSources.forEach(dataSource => {
          if (dataSource.name === 'CZML1111') { // 确保你知道你想要移除的数据源名称
            mapObj.dataSources.remove(dataSource);
          }
      });
    
      mapObj.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(114.771546000,31.497518000,650),
        orientation: {
          heading: Cesium.Math.toRadians(-90),
          pitch: Cesium.Math.toRadians(-45.0),
          roll: 0.0
        }
      });
    }

    return ()=>{
      dispatch.map.setLayerVisible({
        RealDrpLayer: false,
        PicStLayer: false,
        ShuiKuLayer: false,
        GongShuiLayer: false,
        AZDLayer: false,
        QSYDWLayer: false,
        YHJMHLayer: false
      });
    }
  }, [mapObj,ctx])


  useEffect(()=>{
    if(clock!==null && mapObj?._cesiumWidget && testData?.length>0){
      const tm = testData[clock].tm
      if(tm){
        const str = `${moment(tm).format('YYYY-MM-DD')}T${moment(tm).format('HH:mm:ss')}Z`
        mapObj.clock.currentTime = Cesium.JulianDate.fromIso8601(str);
      }
    }
    if(clock===null){return}
  },[clock,mapObj,testData])

  


  return (
    <div className='homePage'>
      <div className='homePage_rightBox' style={{ display: !showPanels ? 'none' : 'block', padding: '0px' }}>
        { ctx.mode==='预报方案'?<Ybfa setCtx={setCtx}/>:null }
        { ctx.mode==='淹没统计'?<Ymtj setCtx={setCtx} ctx={ctx}/>:null}
      </div>
      {
        ctx.mode==='淹没统计' && mode==='3d'?
        <div className='homePage_playerBox' style={!showPanels?{left:'50%'}:{}}>
          <Player data={testData} setClock={setClock}/>
        </div>:null
      }
    </div>
  )
}

export default Page