diff --git a/src/views/Home/MapCtrl/Map3D/demo.js b/src/views/Home/MapCtrl/Map3D/demo.js index 359e81f52..6d5f9723f 100644 --- a/src/views/Home/MapCtrl/Map3D/demo.js +++ b/src/views/Home/MapCtrl/Map3D/demo.js @@ -1316,7 +1316,7 @@ export default class LayerMgr { // ]; viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)); - // viewer.clock.shouldAnimate = false; // 暂停动画 + viewer.clock.shouldAnimate = false; // 暂停动画 // var specificTime = Cesium.JulianDate.fromIso8601('2000-01-01T04:00:04Z'); // setTimeout(() => { diff --git a/src/views/Home/hsyy/Player/index.js b/src/views/Home/hsyy/Player/index.js new file mode 100644 index 000000000..f1c978e15 --- /dev/null +++ b/src/views/Home/hsyy/Player/index.js @@ -0,0 +1,81 @@ +import React, { useEffect, useState, useRef } from 'react' +import { PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons'; +import {Slider} from 'antd'; +import './index.less' + + +const Page = ({ data, setClock }) => { + const [player,setPlayer] = useState(false) + const [index,setIndex] = useState(0) + const marks = { + [0]: { + style: { color: '#333' }, + label: {data?.[0]?.tm||''}, + }, + [data.length - 1]: { + style: { color: '#333' }, + label:
{data?.[data?.length-1]?.tm||""}
, + } + }; + + + useEffect(()=>{ + setIndex(0) + setPlayer(false) + },[data]) + + + useEffect(() => { + if (player) { + let num = index; + const h = setInterval(() => { + num = num + 1; + if (num >= data.length) { + num = 0; + } + setIndex(num); + }, 1100); + + return () => { + clearInterval(h); + } + } + }, [player, index]); + + + useEffect(()=>{ + if(index!==null){ + setClock(index) + } + },[index]) + + + return ( + <> + { + data.length>0? +
+
setPlayer(!player)}> + { player?: } +
+
+ data[value].tm + }} + onChange={(val) => setIndex(val)} + /> +
+
:null + } + + ) +} + +export default Page diff --git a/src/views/Home/hsyy/Player/index.less b/src/views/Home/hsyy/Player/index.less new file mode 100644 index 000000000..60da5e5b6 --- /dev/null +++ b/src/views/Home/hsyy/Player/index.less @@ -0,0 +1,21 @@ +.SliderPlayerBox{ + padding: 0px 20px; + background: #ffffff; + border-radius: 10px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + .SliderPlayerBox_playbtn{ + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + margin: -2px 15px 0 20px; + } + .SliderPlayerBox_slider{ + padding: 16px 37px 0px 0px; + width: 600px; + } +} \ No newline at end of file diff --git a/src/views/Home/hsyy/index.js b/src/views/Home/hsyy/index.js index 38a8a18e0..828ad051b 100644 --- a/src/views/Home/hsyy/index.js +++ b/src/views/Home/hsyy/index.js @@ -5,16 +5,47 @@ 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 }) => { + +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(() => { @@ -45,9 +76,6 @@ const Page = ({ showPanels }) => { const demo = new Demo3D() demo.getCzml2(mapObj) - // setTimeout(() => { - // mapObj.clock.currentTime = Cesium.JulianDate.fromIso8601('2000-01-01T04:00:03Z'); - // }, 2000); }else{ mapObj.dataSources._dataSources.forEach(dataSource => { if (dataSource.name === 'CZML1111') { // 确保你知道你想要移除的数据源名称 @@ -64,26 +92,6 @@ const Page = ({ showPanels }) => { } }); } - - - - - // demo.getCzml2(mapObj)//demo - // const tm = { - // "dayNumber": 2460957, - // "secondsOfDay": 75115.485 - // } - // debugger - // setTimeout(() => { - // mapObj.clock.currentTime = tm; - // }, 10000); - // this.demo.getDem(viewer) //地形图 - // this.demo.getGltf(viewer) //模型 - // this.demo.getWater(viewer)//简单淹没分析 - // this.demo.getWater2(viewer) - // this.demo.getRlt2(viewer) - // this.demo.getRlt3(viewer) //热力图 - // this.demo.getCzml(viewer) //czml模型 return ()=>{ dispatch.map.setLayerVisible({ @@ -98,15 +106,33 @@ const Page = ({ showPanels }) => { } }, [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 ( -
+
{ ctx.mode==='预报方案'?:null } { ctx.mode==='淹没统计'?:null}
+ { + ctx.mode==='淹没统计' && mode==='3d'? +
+ +
:null + }
) } diff --git a/src/views/Home/hsyy/index.less b/src/views/Home/hsyy/index.less index 11d921206..265d9d766 100644 --- a/src/views/Home/hsyy/index.less +++ b/src/views/Home/hsyy/index.less @@ -366,6 +366,15 @@ } } + .homePage_playerBox{ + + position: absolute; + left: calc( 50% - 195px ); + top: calc( 100vh - 200px ); + transform: translate(-50%,0); + z-index: 9; + } + .homePage_bztBox{ position: absolute; diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index 16585bf3e..fba02721b 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -91,7 +91,7 @@ const HomePage = () => { {/*四预-洪水预演*/} {pathname === '/mgr/sy/hsyy' ? ( - + ) : null}