Merge branch 'lsf-dev'

地图洪水预演
修改预演样式
2026-02-25 17:56:57 +08:00 · 2026-02-24 15:04:58 +08:00 · 2026-02-24 10:07:43 +08:00 · 2026-02-08 16:55:23 +08:00 · 2026-02-08 16:54:54 +08:00
16 changed files with 1083 additions and 32 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
@ -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; // 暂停动画
+}
--- 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 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>
--- a/src/views/Home/components/Business/SiYu/components/FloodPreview/index.js
+++ b/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'>
-                <Radio checked={radio===2} onClick={()=>setRadio(2)}/>
+            <div className='flood-preview-section-radio' onClick={()=>{
+                    setRadio(2)
+                    setPlanData(null)
+                }}>
+                <Radio checked={radio===2}/>
                24小时降雨400mm（50年一遇）
            </div>
-            <div className='flood-preview-section-radio'>
-                <Radio checked={radio===3} onClick={()=>setRadio(3)}/>
+            <div className='flood-preview-section-radio' onClick={()=>{
+                    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>
--- a/src/views/Home/components/Business/SiYu/components/FloodPreview/index.less
+++ b/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%;
--- 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: '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>
--- 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 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>
--- a/src/views/Home/components/Business/SiYu/components/ForecastSection/index.js
+++ b/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() 
    },[])
--- a/src/views/Home/components/Business/SiYu/components/ForecastSection/index.less
+++ b/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;    
+        }
+    }
 }
--- a/src/views/Home/components/Business/SiYu/components/Player/index.js
+++ b/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
--- a/src/views/Home/components/Business/SiYu/components/Player/index.less
+++ b/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;
+    }
+}
--- a/src/views/Home/components/Business/SiYu/components/Player/playerBtn.js
+++ b/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
--- a/src/views/Home/components/Business/SiYu/index.js
+++ b/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?
--- a/src/views/Home/components/Business/SiYu/index.less
+++ b/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;
+  }
 }
--- 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?'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'}`} />
Author	SHA1	Message	Date
李神峰	048c9e2faf	Merge branch 'lsf-dev'	2026-02-25 17:56:57 +08:00
秦子超	de8bd19e77	地图洪水预演	2026-02-24 15:04:58 +08:00
秦子超	7cfb666f82	修改预演样式	2026-02-24 10:07:43 +08:00
秦子超	60d3bad25f	:wq Merge branch 'qzc-dev'	2026-02-08 16:55:23 +08:00
秦子超	36475743c9	修改样式	2026-02-08 16:54:54 +08:00