Merge branch 'lsf-dev'

Merge branch 'qzc-dev'

src/views/Home/MapCtrl/M3D/layers/czmlLayer3D.js

@@ -0,0 +1,15 @@
+const { Cesium } = window;
+
+export async function getCzml(viewer, path) {
+    viewer.dataSources._dataSources.forEach(dataSource => {
+        if (dataSource.name === 'CZML1111') { // 确保你知道你想要移除的数据源名称
+          viewer.dataSources.remove(dataSource);
+        }
+    });
+    const { czml } = await fetch(path)
+    .then(resp => resp.json())
+    .then(data => data)
+    .catch(() => []);
+    viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
+    viewer.clock.shouldAnimate = false; // 暂停动画
+}

src/views/Home/components/Business/SiYu/components/FloodPreview/count.js

@@ -7,19 +7,19 @@ const Page = ({data={}}) => {
             <div className="forecast-section-count">
                 <div className="forecast-section-countBox">
                     <div className='forecast-section-countItem'>
-                    <div className='forecast-section-countItem-num'>{1.18||0}<span style={{fontSize:"14px"}}>km²</span></div>
+                    <div className='forecast-section-countItem-num'>{1.18||0}<span>km²</span></div>
                         <div className='forecast-section-countItem-text'>受灾面积</div>
                     </div>
                 </div>
                 <div className="forecast-section-countBox">
                     <div className='forecast-section-countItem'>
-                        <div className='forecast-section-countItem-num'>{2||0}<span style={{fontSize:"14px"}}>个</span></div>
+                        <div className='forecast-section-countItem-num'>{2||0}<span>个</span></div>
                         <div className='forecast-section-countItem-text'>受灾村庄</div>
                     </div>
                 </div>
                 <div className="forecast-section-countBox">
                     <div className='forecast-section-countItem'>
-                        <div className='forecast-section-countItem-num'>{217||0}<span style={{fontSize:"14px"}}>人</span></div>
+                        <div className='forecast-section-countItem-num'>{217||0}<span>人</span></div>
                         <div className='forecast-section-countItem-text'>受灾人口</div>
                     </div>
                 </div>

src/views/Home/components/Business/SiYu/components/FloodPreview/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Radio, message } from 'antd';
+import { useDispatch, useSelector } from 'react-redux'
 import arrowIcon from '@/assets/images/card/arrow.png';
 import NormalSelect from '../../../../../../../components/Form/NormalSelect'
 import './index.less'
@@ -9,11 +10,11 @@ import { httpget, httppost } from '@/utils/request';
 
 
 const FloodPreview = ({setPlanData}) => {
+    const dispatch = useDispatch();
     const [ options, setOptions ] = useState([])
     const [ radio, setRadio ] = useState(1)
     const [ planId, setPlanId ] = useState(null) 
     const [ data, setData ] = useState({})
-    console.log(data);
     useEffect(()=>{
         getPlan()
     },[])
@@ -70,9 +71,6 @@ const FloodPreview = ({setPlanData}) => {
         setData(data||{})
     };
 
-
-
-    console.log(radio);
     return (
         <div className="flood-preview-section">
             <div className="section-title">
@@ -86,19 +84,29 @@ const FloodPreview = ({setPlanData}) => {
                     options={options}
                     value={planId}
                     allowClear={false}
-                    onChange={(e)=>setPlanId(e)}
+                    onChange={(e)=>{
+                        setPlanId(e)
+                        setRadio(1)
+                        setPlanData(null)
+                    }}
                 />
             </div>
-            <div className='flood-preview-section-radio'>
+            <div className='flood-preview-section-radio' onClick={()=>{
-                <Radio checked={radio===2} onClick={()=>setRadio(2)}/>
+                    setRadio(2)
+                    setPlanData(null)
+                }}>
+                <Radio checked={radio===2}/>
                 24小时降雨400mm（50年一遇）
             </div>
-            <div className='flood-preview-section-radio'>
+            <div className='flood-preview-section-radio' onClick={()=>{
-                <Radio checked={radio===3} onClick={()=>setRadio(3)}/>
+                    setRadio(3)
+                    setPlanData(null)
+                }}>
+                <Radio checked={radio===3}/>
                 24小时降雨500mm（100年一遇）
             </div>
 
-            <div className="section-title" style={{marginTop:'10px'}}>
+            <div className="section-title marginTop10">
                 <img src={arrowIcon} alt="arrow" className="arrow-icon" />
                 <span>淹没受灾统计</span>
             </div>
@@ -107,7 +115,10 @@ const FloodPreview = ({setPlanData}) => {
             <div className='flood-preview-section-btn'>
                 <div className="uav-button" onClick={() => {
                     if(data.id){
+                        data.czmlPath = `${process.env.PUBLIC_URL}/data/json/czml1.json`
                         setPlanData(data)
+                        dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
+                        dispatch.map.setMode('3d');
                     }
                 }}>洪水预演</div>
             </div>

src/views/Home/components/Business/SiYu/components/FloodPreview/index.less

@@ -1,8 +1,11 @@
 .flood-preview-section{
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
     .section-title {
         display: flex;
         align-items: center;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
         
         .arrow-icon {
           width: 20px;
@@ -17,6 +20,9 @@
           text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
         }
     }
+    .marginTop10{
+        margin-top: 10px;
+    }
 
     .flood-preview-section-radio{
         cursor: pointer;
@@ -34,7 +40,7 @@
 
         .forecast-section-countBox {
             width: 33%;
-            height: 65px;
+            height: 60px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -57,6 +63,9 @@
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     text-align: center;
+                    span{
+                        font-size: 14px;
+                    }
                 }
                 .forecast-section-countItem-text{
                     font-size: 13px;
@@ -73,7 +82,8 @@
         align-items: center;
         justify-content: center;
         width: 100%;
-        margin-top: 20px;
+        margin-top: 5px;
+        height: 50px;
     }
     .uav-button {
         width: 70%;

src/views/Home/components/Business/SiYu/components/ForecastSection/charts.js

@@ -19,18 +19,18 @@ const Page = ({data=[]}) => {
           },
           grid: [
             {
-              top: '20%',
+              top: '25%',
               left: '12%',
               right: '10%',
               width: '80%',
-              height: '32%'
+              height: '25%'
             },
             {
-              bottom: '5%',
+              bottom: '8%',
               left: '12%',
               right: '10%',
               width: '80%',
-              height: '32%'
+              height: '30%'
             }
           ],
           legend: {
@@ -265,12 +265,11 @@ const Page = ({data=[]}) => {
 
 
     return (
-        <div style={{width:'100%',height:'400px',paddingTop:'10px',overflowY:'auto'}}>
+        <div className='forecast-section-chart'>
             { 
                 option ?
                 <ReactEcharts
                     option={option}
-                    style={{width: "100%", height: "100%"}}
                 /> : <div style={{width:'100%',height: 'calc(100% - 50px)',display:'flex',alignItems:'center',justifyContent:'center'}}>
                     <Empty description={"暂无数据"}/>
                 </div>

src/views/Home/components/Business/SiYu/components/ForecastSection/count.js

@@ -7,25 +7,25 @@ const Page = ({data={}}) => {
             <div className="forecast-section-count">
                 <div className="forecast-section-countBox">
                     <div className='forecast-section-countItem'>
-                    <div className='forecast-section-countItem-num'>{data.ycSumFlood}<span style={{fontSize:"14px"}}>mm</span></div>
+                    <div className='forecast-section-countItem-num'>{data.ycSumFlood}<span>mm</span></div>
                         <div className='forecast-section-countItem-text'>预报面雨量</div>
                     </div>
                 </div>
                 <div className="forecast-section-countBox">
                     <div className='forecast-section-countItem'>
-                        <div className='forecast-section-countItem-num'>{data.ycMaxSwH}<span style={{fontSize:"14px"}}>m</span></div>
+                        <div className='forecast-section-countItem-num'>{data.ycMaxSwH}<span>m</span></div>
                         <div className='forecast-section-countItem-text'>最高水位</div>
                     </div>
                 </div>
                 <div className="forecast-section-countBox">
                     <div className='forecast-section-countItem'>
-                        <div className='forecast-section-countItem-num'>{data.ycMaxRkQ}<span style={{fontSize:"14px"}}>m³/s</span></div>
+                        <div className='forecast-section-countItem-num'>{data.ycMaxRkQ}<span>m³/s</span></div>
                         <div className='forecast-section-countItem-text'>最大入库流量</div>
                     </div>
                 </div>
                 <div className="forecast-section-countBox">
                     <div className='forecast-section-countItem'>
-                        <div className='forecast-section-countItem-num'>{data.ycMaxCkQ}<span style={{fontSize:"14px"}}>m³/s</span></div>
+                        <div className='forecast-section-countItem-num'>{data.ycMaxCkQ}<span>m³/s</span></div>
                         <div className='forecast-section-countItem-text'>最大出库流量</div>
                     </div>
                 </div>

src/views/Home/components/Business/SiYu/components/ForecastSection/index.js

@@ -3,11 +3,9 @@ import { Table, message } from 'antd';
 import MyCharts from './charts'
 import Count from './count'
 import './index.less'
-import { httpget, httppost } from '@/utils/request';
 
 const ForecastSection = () => {
     const [data, setData] = useState({})
-    console.log(data);
     useEffect(()=>{
         getData() 
     },[])

src/views/Home/components/Business/SiYu/components/ForecastSection/index.less

@@ -1,5 +1,6 @@
 .forecast-section{
     width: 100%;
+    height: 100%;
     .forecast-section-time{
         font-size: 14px;
         color: #ffffff;
@@ -16,7 +17,7 @@
 
         .forecast-section-countBox {
             width: 25%;
-            height: 65px;
+            height: 60px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -39,6 +40,9 @@
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     text-align: center;
+                    span{
+                        font-size: 14px;
+                    }
                 }
                 .forecast-section-countItem-text{
                     font-size: 13px;
@@ -48,4 +52,17 @@
             }
         }
     }
+
+    .forecast-section-chart{
+        width: 100%;
+        height: 100%;
+        padding-top: 10px;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .echarts-for-react {
+            width:  100%;
+            height: 330px!important;    
+        }
+    }
 }

src/views/Home/components/Business/SiYu/components/Player/index.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import moment from 'moment';
+import Player from './playerBtn'
+import { getCzml } from '../../../../../MapCtrl/M3D/layers/czmlLayer3D'
+const { Cesium } = window;
+
+const records = [
+  { tm:'2000-01-01 04:00:00', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:01', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:02', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:03', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:04', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:05', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:06', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:07', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:08', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:09', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:10', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:11', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:12', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:13', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:14', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:15', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:16', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:17', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:18', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:19', data:[], text:'测试', tm2:null, },
+  { tm:'2000-01-01 04:00:20', data:[], text:'测试', tm2:null, },
+]
+
+const Page = ({planData}) => {
+  const dispatch = useDispatch();
+  let mapObj = useSelector(s => s.map.map)
+  const [ clock, setClock ] = useState(null)
+  const [ playerData, setPlayerData ] = useState([])
+
+
+
+  //将预报方案的时间,按照records的长度平均分配，tm是cesium时间tm2是展示时间
+  useEffect(()=>{
+    const startTime = planData?.startTm
+    const endTime = planData?.endTm
+    if( startTime && endTime ){
+      const start = new Date(startTime.replace(' ', 'T'));
+      const end = new Date(endTime.replace(' ', 'T'));
+      const interval = (end - start) / (records.length - 1);
+      const list = records.map((item, index) => ({
+        ...item,
+        tm2: moment(new Date(start.getTime() + interval * index)).format('YYYY-MM-DD HH:mm:ss')
+      }));
+      setPlayerData(list)
+    }else{
+      setPlayerData([])
+    }
+  },[planData])
+
+  useEffect(()=>{
+    //当前map对象是cesium
+    if(!mapObj?._cesiumWidget){
+      return
+    }
+    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
+      }
+    });
+    getCzml(mapObj,planData.czmlPath)
+
+    return ()=>{
+      mapObj.dataSources._dataSources.forEach(dataSource => {
+        if (dataSource.name === 'CZML1111') { // 确保你知道你想要移除的数据源名称
+          mapObj.dataSources.remove(dataSource);
+        }
+    });
+    }
+  },[mapObj, planData])
+
+  useEffect(()=>{
+    if(clock!==null && mapObj?._cesiumWidget && playerData?.length>0){
+      const tm = playerData[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,playerData])
+
+  
+  return (
+    <div className='siyu-view-player'>
+      { playerData.length>0 && <Player data={playerData} setClock={setClock}/> }
+    </div>
+  )
+}
+
+export default Page

src/views/Home/components/Business/SiYu/components/Player/index.less

@@ -0,0 +1,21 @@
+.SliderPlayerBox{
+    padding: 0px 20px;
+    background: rgba(40, 53, 59, 0.7);
+    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/components/Business/SiYu/components/Player/playerBtn.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: '#fff' },
+      label: <span style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px'}}>{data?.[0]?.tm2||''}</span>,
+    },
+    [data.length - 1]: {
+      style: { color: '#fff' },
+      label: <div style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px', marginLeft: "-32px"}}>{data?.[data?.length-1]?.tm2||""}</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].tm2
+               }} 
+              onChange={(val) => setIndex(val)}
+            />
+          </div>
+        </div>:null
+      }
+    </>
+  )
+}
+
+export default Page

src/views/Home/components/Business/SiYu/index.js

@@ -10,6 +10,7 @@ import AllWeatherModal from '../SiQuan/components/ModalComponents/AllWeatherModa
 import ForecastSection from './components/ForecastSection';
 import FloodPreview from './components/FloodPreview';
 import PlanPreview from './components/PlanPreview'
+import Player from './components/Player'
 import './index.less';
 
 
@@ -64,6 +65,8 @@ const SiYu = () => {
         </CommonCard>
       </div>
 
+      { planData!==null?<Player planData={planData}/>:null}
+
       <div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
         {
           planData?

src/views/Home/components/Business/SiYu/index.less

@@ -7,7 +7,10 @@
 
    .left {
     .card-1 { flex: 5; }
-    .card-2 { flex: 3; }
+    .card-2 { 
+      flex: 4;
+      min-height: 0;
+    }
   }
 
   .right {
@@ -52,4 +55,13 @@
     .card-2 { flex: 1; }
     .card-3 { flex: 1; }
   }
+
+  .siyu-view-player{
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 20;
+    pointer-events: auto;
+  }
 }

src/views/Home/mapToolBox/index.js

@@ -82,7 +82,7 @@ export default function Btn() {
     }
 
     return (
-        <div className="mapToolBox" style={{right: showPanels?'445px':'10px'}}>
+        <div className="mapToolBox" style={{right: showPanels?'23.5%':'10px'}}>
             <div className='mapToolBtn'>
                 <div title={`${showPanels?'收起':'展开'}功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
                     <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${showPanels?'shouqi.png':'zhankai.png'}`} />