Merge branch 'master' of http://10.0.41.100:3000/lishenfeng/tsg-web

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(() => {

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: <span style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px'}}>{data?.[0]?.tm||''}</span>,
+    },
+    [data.length - 1]: {
+      style: { color: '#333' },
+      label: <div style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px', marginLeft: "-32px"}}>{data?.[data?.length-1]?.tm||""}</div>,
+    }
+  };
+
+
+  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?
+        <div className='SliderPlayerBox'>
+          <div className='SliderPlayerBox_playbtn' onClick={()=>setPlayer(!player)}>
+            { player?<PauseCircleOutlined style={{color: "#007AFF", fontSize: "25px"}}/>:<PlayCircleOutlined style={{color: "#007AFF", fontSize: "25px"}}/> }
+          </div>
+          <div className='SliderPlayerBox_slider'>
+            <Slider 
+              disabled={player}
+              min={0}
+              max={data.length-1}
+              value={index}
+              marks={marks}
+              tooltip={{ 
+                open:true,
+                formatter:(value) => data[value].tm
+               }} 
+              onChange={(val) => setIndex(val)}
+            />
+          </div>
+        </div>:null
+      }
+    </>
+  )
+}
+
+export default Page

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;
+    }
+}

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 (
-    <div className='homePage' style={{ display: !showPanels ? 'none' : 'block' }}>
+    <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>
   )
 }

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;

src/views/Home/index.tsx

@@ -91,7 +91,7 @@ const HomePage = () => {
 
           {/*四预-洪水预演*/}
           {pathname === '/mgr/sy/hsyy' ? (
-            <Hsyy showPanels={showPanels}/>
+            <Hsyy showPanels={showPanels} mode={mode}/>
           ) : null}