16 changed files with 32 additions and 1083 deletions
--- a/public/data/json/czml1.json
+++ b/public/data/json/czml1.json
--- a/public/data/json/czml2.json
+++ b/public/data/json/czml2.json
--- a/src/views/Home/MapCtrl/M3D/layers/czmlLayer3D.js
+++ b/src/views/Home/MapCtrl/M3D/layers/czmlLayer3D.js
@ -1,15 +0,0 @@
-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; // 暂停动画
-}
--- a/src/views/Home/components/Business/SiYu/components/FloodPreview/count.js
+++ b/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>km²</span></div>
+                    <div className='forecast-section-countItem-num'>{1.18||0}<span style={{fontSize:"14px"}}>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>个</span></div>
+                        <div className='forecast-section-countItem-num'>{2||0}<span style={{fontSize:"14px"}}>个</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>人</span></div>
+                        <div className='forecast-section-countItem-num'>{217||0}<span style={{fontSize:"14px"}}>人</span></div>
                        <div className='forecast-section-countItem-text'>受灾人口</div>
                    </div>
                </div>
--- a/src/views/Home/components/Business/SiYu/components/FloodPreview/index.js
+++ b/src/views/Home/components/Business/SiYu/components/FloodPreview/index.js
@ -1,6 +1,5 @@
 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'
@ -10,11 +9,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()
    },[])
@ -71,6 +70,9 @@ const FloodPreview = ({setPlanData}) => {
        setData(data||{})
    };

+
+
+    console.log(radio);
    return (
        <div className="flood-preview-section">
            <div className="section-title">
@ -84,29 +86,19 @@ const FloodPreview = ({setPlanData}) => {
                    options={options}
                    value={planId}
                    allowClear={false}
-                    onChange={(e)=>{
-                        setPlanId(e)
-                        setRadio(1)
-                        setPlanData(null)
-                    }}
+                    onChange={(e)=>setPlanId(e)}
                />
            </div>
-            <div className='flood-preview-section-radio' onClick={()=>{
-                    setRadio(2)
-                    setPlanData(null)
-                }}>
-                <Radio checked={radio===2}/>
+            <div className='flood-preview-section-radio'>
+                <Radio checked={radio===2} onClick={()=>setRadio(2)}/>
                24小时降雨400mm（50年一遇）
            </div>
-            <div className='flood-preview-section-radio' onClick={()=>{
-                    setRadio(3)
-                    setPlanData(null)
-                }}>
-                <Radio checked={radio===3}/>
+            <div className='flood-preview-section-radio'>
+                <Radio checked={radio===3} onClick={()=>setRadio(3)}/>
                24小时降雨500mm（100年一遇）
            </div>

-            <div className="section-title marginTop10">
+            <div className="section-title" style={{marginTop:'10px'}}>
                <img src={arrowIcon} alt="arrow" className="arrow-icon" />
                <span>淹没受灾统计</span>
            </div>
@ -115,10 +107,7 @@ 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>
--- a/src/views/Home/components/Business/SiYu/components/FloodPreview/index.less
+++ b/src/views/Home/components/Business/SiYu/components/FloodPreview/index.less
@ -1,11 +1,8 @@
 .flood-preview-section{
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
    .section-title {
        display: flex;
        align-items: center;
-        margin-bottom: 5px;
+        margin-bottom: 10px;
        
        .arrow-icon {
          width: 20px;
@ -20,9 +17,6 @@
          text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
        }
    }
-    .marginTop10{
-        margin-top: 10px;
-    }

    .flood-preview-section-radio{
        cursor: pointer;
@ -40,7 +34,7 @@

        .forecast-section-countBox {
            width: 33%;
-            height: 60px;
+            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
@ -63,9 +57,6 @@
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
-                    span{
-                        font-size: 14px;
-                    }
                }
                .forecast-section-countItem-text{
                    font-size: 13px;
@ -82,8 +73,7 @@
        align-items: center;
        justify-content: center;
        width: 100%;
-        margin-top: 5px;
-        height: 50px;
+        margin-top: 20px;
    }
    .uav-button {
        width: 70%;
--- a/src/views/Home/components/Business/SiYu/components/ForecastSection/charts.js
+++ b/src/views/Home/components/Business/SiYu/components/ForecastSection/charts.js
@ -19,18 +19,18 @@ const Page = ({data=[]}) => {
          },
          grid: [
            {
-              top: '25%',
+              top: '20%',
              left: '12%',
              right: '10%',
              width: '80%',
-              height: '25%'
+              height: '32%'
            },
            {
-              bottom: '8%',
+              bottom: '5%',
              left: '12%',
              right: '10%',
              width: '80%',
-              height: '30%'
+              height: '32%'
            }
          ],
          legend: {
@ -265,11 +265,12 @@ const Page = ({data=[]}) => {


    return (
-        <div className='forecast-section-chart'>
-            { 
+        <div style={{width:'100%',height:'400px',paddingTop:'10px',overflowY:'auto'}}>
+            {
                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>
--- a/src/views/Home/components/Business/SiYu/components/ForecastSection/count.js
+++ b/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>mm</span></div>
+                    <div className='forecast-section-countItem-num'>{data.ycSumFlood}<span style={{fontSize:"14px"}}>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>m</span></div>
+                        <div className='forecast-section-countItem-num'>{data.ycMaxSwH}<span style={{fontSize:"14px"}}>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>m³/s</span></div>
+                        <div className='forecast-section-countItem-num'>{data.ycMaxRkQ}<span style={{fontSize:"14px"}}>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>m³/s</span></div>
+                        <div className='forecast-section-countItem-num'>{data.ycMaxCkQ}<span style={{fontSize:"14px"}}>m³/s</span></div>
                        <div className='forecast-section-countItem-text'>最大出库流量</div>
                    </div>
                </div>
--- a/src/views/Home/components/Business/SiYu/components/ForecastSection/index.js
+++ b/src/views/Home/components/Business/SiYu/components/ForecastSection/index.js
@ -3,9 +3,11 @@ 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() 
    },[])
--- a/src/views/Home/components/Business/SiYu/components/ForecastSection/index.less
+++ b/src/views/Home/components/Business/SiYu/components/ForecastSection/index.less
@ -1,6 +1,5 @@
 .forecast-section{
    width: 100%;
-    height: 100%;
    .forecast-section-time{
        font-size: 14px;
        color: #ffffff;
@ -17,7 +16,7 @@

        .forecast-section-countBox {
            width: 25%;
-            height: 60px;
+            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
@ -40,9 +39,6 @@
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
-                    span{
-                        font-size: 14px;
-                    }
                }
                .forecast-section-countItem-text{
                    font-size: 13px;
@ -52,17 +48,4 @@
            }
        }
    }
-
-    .forecast-section-chart{
-        width: 100%;
-        height: 100%;
-        padding-top: 10px;
-        overflow-y: auto;
-        overflow-x: hidden;
-
-        .echarts-for-react {
-            width:  100%;
-            height: 330px!important;    
-        }
-    }
 }
--- a/src/views/Home/components/Business/SiYu/components/Player/index.js
+++ b/src/views/Home/components/Business/SiYu/components/Player/index.js
@ -1,101 +0,0 @@
-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
--- a/src/views/Home/components/Business/SiYu/components/Player/index.less
+++ b/src/views/Home/components/Business/SiYu/components/Player/index.less
@ -1,21 +0,0 @@
-.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;
-    }
-}
--- a/src/views/Home/components/Business/SiYu/components/Player/playerBtn.js
+++ b/src/views/Home/components/Business/SiYu/components/Player/playerBtn.js
@ -1,81 +0,0 @@
-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
--- a/src/views/Home/components/Business/SiYu/index.js
+++ b/src/views/Home/components/Business/SiYu/index.js
@ -10,7 +10,6 @@ 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';


@ -65,8 +64,6 @@ const SiYu = () => {
        </CommonCard>
      </div>

-      { planData!==null?<Player planData={planData}/>:null}
-
      <div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
        {
          planData?
--- a/src/views/Home/components/Business/SiYu/index.less
+++ b/src/views/Home/components/Business/SiYu/index.less
@ -7,10 +7,7 @@

   .left {
    .card-1 { flex: 5; }
-    .card-2 { 
-      flex: 4;
-      min-height: 0;
-    }
+    .card-2 { flex: 3; }
  }

  .right {
@ -55,13 +52,4 @@
    .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;
-  }
 }
--- a/src/views/Home/mapToolBox/index.js
+++ b/src/views/Home/mapToolBox/index.js
@ -82,7 +82,7 @@ export default function Btn() {
    }

    return (
-        <div className="mapToolBox" style={{right: showPanels?'23.5%':'10px'}}>
+        <div className="mapToolBox" style={{right: showPanels?'445px':'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'}`} />