lishenfeng
/
tsg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改淹没数据

qzc-dev
秦子超 2025-10-27 17:55:38 +08:00
parent 226a66d719
commit fdfa09e909
6 changed files with 140 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Home/MapCtrl/Map3D/Map3D.js
View File

@ -356,7 +356,7 @@ export default class Map3D extends BaseMap {
// demo.getDem(viewer) //地形图
// this.demo.getCzml2(viewer) //demo
// demo.getWater(viewer)//水面
this.demo.getWater3(viewer)
// this.demo.getWater3(viewer)
// demo.getTool(viewer)//工具
// await this.demo.getWater2(viewer,[

6
src/views/Home/hsyy/Player/index.js
View File

@ -10,11 +10,11 @@ const Page = ({ data, setClock }) => {
const marks = {
[0]: {
style: { color: '#333' },
label: <span style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px'}}>{data?.[0]?.tm||''}</span>,
label: <span style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px'}}>{data?.[0]?.tm2||''}</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>,
label: <div style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px', marginLeft: "-32px"}}>{data?.[data?.length-1]?.tm2||""}</div>,
}
};
@ -67,7 +67,7 @@ const Page = ({ data, setClock }) => {
marks={marks}
tooltip={{
open:true,
formatter:(value) => data[value].tm
formatter:(value) => data[value].tm2
}}
onChange={(val) => setIndex(val)}
/>

76
src/views/Home/hsyy/index.js
View File

@ -11,42 +11,54 @@ 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:'测试' },
{ 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 = ({ 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([])
const [ playerData, setPlayerData ] = useState([])
//将预报方案的时间,按照records的长度平均分配，tm是cesium时间tm2是展示时间
useEffect(()=>{
setTimeout(() => {
setTestData(records)
}, 2000);
},[])
const startTime = ctx?.data?.tms?.startTime
const endTime = ctx?.data?.tms?.endTime
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([])
}
},[ctx])
useEffect(() => {
dispatch.map.setLayerVisible({
@ -105,18 +117,18 @@ const Page = ({ showPanels, mode }) => {
});
}
}, [mapObj,ctx])
useEffect(()=>{
if(clock!==null && mapObj?._cesiumWidget && testData?.length>0){
const tm = testData[clock].tm
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,testData])
},[clock,mapObj,playerData])
@ -130,7 +142,7 @@ const Page = ({ showPanels, mode }) => {
{
ctx.mode==='淹没统计' && mode==='3d'?
<div className='homePage_playerBox' style={!showPanels?{left:'50%'}:{}}>
<Player data={testData} setClock={setClock}/>
{ playerData.length>0 && <Player data={playerData} ctx={ctx} setClock={setClock}/> }
</div>:null
}
</div>

3
src/views/Home/hsyy/information/index.js
View File

@ -35,7 +35,8 @@ const Page = ({project,onCancel,setCtx}) => {
ycMaxCkQ:data.ycMaxCkQ,
ycSumFlood:data.ycSumFlood,
},
czmlPath : project.czmlPath
czmlPath : project.czmlPath,
ymtj: project.ymtj
})
})()
},[])

79
src/views/Home/hsyy/ybfa.js
View File

@ -50,7 +50,84 @@ const Page = ({ setCtx }) => {
const getData = async()=>{
const data = await getTableData()
setData([data[0],data[1]])
const data1 = {
...data[0],
ymtj:{
count:{
xhl:2.98,//泄洪量
zgymss:0.8,//最高淹没水深
ymls:48,//淹没历时
szmj:1.18,//受灾面积
szcz:2,//受灾村庄
szrk:217,//受灾人口
},
czList:[
{
cznm:'檀树岗村',
rk:98,
sd:0.3,
tm:'2024-06-21 18:00:00',
},
{
cznm:'程维德村',
rk:99,
sd:0.5,
tm:'2024-06-21 18:20:00',
}
],
qsydwList:[
{
dw:'七里坪镇檀树中学',
rk:20,
sd:0.5,
tm:'2024-06-21 18:00:00'
}
]
}
}
const data2 = {
...data[1],
ymtj:{
count:{
xhl:4.56,//泄洪量
zgymss:0.8,//最高淹没水深
ymls:49,//淹没历时
szmj:2.88,//受灾面积
szcz:3,//受灾村庄
szrk:219,//受灾人口
},
czList:[
{
cznm:'檀树岗村',
rk:96,
sd:0.3,
tm:'2024-11-13 18:00:00',
},
{
cznm:'程维德村',
rk:99,
sd:0.5,
tm:'2024-11-13 18:20:00',
},
{
cznm:'戴世英村',
rk:12,
sd:0.8,
tm:'2024-11-13 18:50:00',
},
],
qsydwList:[
{
dw:'七里坪镇檀树中学',
rk:20,
sd:0.5,
tm:'2024-06-21 18:00:00'
}
]
}
}
setData([data1,data2])
}

54
src/views/Home/hsyy/ymtj.js
View File

@ -12,49 +12,19 @@ const { RangePicker } = DatePicker
const Page = ({ ctx, setCtx }) => {
const dispatch = useDispatch();
let mapObj = useSelector(s => s.map.map)
const [data1,setData1] = useState([
{
cz:'檀树岗村',
rk:28,
sd:0.3,
sj:'2025-08-04 18:00:00',
},
{
cz:'程维德村',
rk:6,
sd:0.5,
sj:'2025-08-04 18:20:00',
},
{
cz:'戴世英村',
rk:6,
sd:0.8,
sj:'2025-08-04 18:50:00',
},
])
const [data2,setData2] = useState([
{
dwmc:'七里坪镇檀树中学',
rk:10,
sd:0.5,
sj:'2025-08-04 18:00:00',
}
])
const columns = [
{ title: '受灾村庄', key: 'cz', dataIndex: 'cz', align:"center"},
{ title: '受灾村庄', key: 'cznm', dataIndex: 'cznm', align:"center"},
{ title: '受灾人口(人)', key: 'rk', dataIndex: 'rk', width:'80px', align:"center"},
{ title: '最高淹没深度(m)', key: 'sd', dataIndex: 'sd', width:'100px', align:"center"},
{ title: '洪峰时间', key: 'sj', dataIndex: 'sj', align:"center"},
{ title: '洪峰时间', key: 'tm', dataIndex: 'tm', align:"center"},
];
const columns2 = [
{ title: '单位名称', key: 'dwmc', dataIndex: 'dwmc', align:"center"},
{ title: '单位名称', key: 'dw', dataIndex: 'dw', align:"center"},
{ title: '影响人口(人)', key: 'rk', dataIndex: 'rk', width:'80px', align:"center"},
{ title: '最高淹没深度(m)', key: 'sd', dataIndex: 'sd', width:'100px', align:"center"},
{ title: '洪峰时间', key: 'sj', dataIndex: 'sj', align:"center"},
{ title: '洪峰时间', key: 'tm', dataIndex: 'tm', align:"center"},
];
@ -79,32 +49,32 @@ const Page = ({ ctx, setCtx }) => {
<div className='ymtjBox'>
<div className='ymtjBoxItem'>
<img width={40} src={`${process.env.PUBLIC_URL}/assets/hsyy/xhl.png`} alt=""/>
<div className='text1' style={{color:'#3B81FA'}}>2.98<div className='dw'>万m³</div></div>
<div className='text1' style={{color:'#3B81FA'}}>{ctx?.data?.ymtj?.count?.xhl}<div className='dw'>万m³</div></div>
<div className='text2'>泄洪量</div>
</div>
<div className='ymtjBoxItem'>
<img width={40} src={`${process.env.PUBLIC_URL}/assets/hsyy/ymss.png`} alt=""/>
<div className='text1' style={{color:'#38B63E'}}>0.8<div className='dw'>m</div></div>
<div className='text1' style={{color:'#38B63E'}}>{ctx?.data?.ymtj?.count?.zgymss}<div className='dw'>m</div></div>
<div className='text2'>最高淹没水深</div>
</div>
<div className='ymtjBoxItem'>
<img width={40} src={`${process.env.PUBLIC_URL}/assets/hsyy/ymls.png`} alt=""/>
<div className='text1' style={{color:'#D0A807'}}>25<div className='dw'>h</div></div>
<div className='text1' style={{color:'#D0A807'}}>{ctx?.data?.ymtj?.count?.ymls}<div className='dw'>h</div></div>
<div className='text2'>淹没历时</div>
</div>
<div className='ymtjBoxItem'>
<img width={40} src={`${process.env.PUBLIC_URL}/assets/hsyy/szmj.png`} alt=""/>
<div className='text1' style={{color:'#2999D4'}}>1.18<div className='dw'>km²</div></div>
<div className='text1' style={{color:'#2999D4'}}>{ctx?.data?.ymtj?.count?.szmj}<div className='dw'>km²</div></div>
<div className='text2'>受灾面积</div>
</div>
<div className='ymtjBoxItem'>
<img width={40} src={`${process.env.PUBLIC_URL}/assets/hsyy/szcz.png`} alt=""/>
<div className='text1' style={{color:'#2999D4'}}>3<div className='dw'>个</div></div>
<div className='text1' style={{color:'#2999D4'}}>{ctx?.data?.ymtj?.count?.szcz}<div className='dw'>个</div></div>
<div className='text2'>受灾村庄</div>
</div>
<div className='ymtjBoxItem'>
<img width={40} src={`${process.env.PUBLIC_URL}/assets/hsyy/szrk.png`} alt=""/>
<div className='text1' style={{color:'#2999D4'}}>40<div className='dw'>人</div></div>
<div className='text1' style={{color:'#2999D4'}}>{ctx?.data?.ymtj?.count?.szrk}<div className='dw'>人</div></div>
<div className='text2'>受灾人口</div>
</div>
</div>
@ -117,7 +87,7 @@ const Page = ({ ctx, setCtx }) => {
sticky
columns={columns}
pagination={false}
dataSource={data1}
dataSource={ctx?.data?.ymtj?.czList}
scroll={{ y: "500px"}}
/>
<div className='homePage_head2'>
@ -129,7 +99,7 @@ const Page = ({ ctx, setCtx }) => {
sticky
columns={columns2}
pagination={false}
dataSource={data2}
dataSource={ctx?.data?.ymtj?.qsydwList}
scroll={{ y: "500px"}}
/>
</div>