修改预报页面
parent
4deb965975
commit
c2153b2d0b
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
|
|
@ -444,3 +444,12 @@ input:-webkit-autofill:active {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//修改Radio全局样式
|
||||||
|
.ant-radio-wrapper{
|
||||||
|
.ant-radio{
|
||||||
|
.ant-radio-inner{
|
||||||
|
background: transparent!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -28,8 +28,8 @@ function initState() {
|
||||||
QSYDWLayer:false,//企事业单位
|
QSYDWLayer:false,//企事业单位
|
||||||
YHJMHLayer:false,//沿河居民户
|
YHJMHLayer:false,//沿河居民户
|
||||||
|
|
||||||
ShuiKuLayer: true,//水库
|
ShuiKuLayer: false,//水库
|
||||||
ShuiDianZhanLayer: true,//水电站
|
ShuiDianZhanLayer: false,//水电站
|
||||||
},
|
},
|
||||||
layerSetting: {
|
layerSetting: {
|
||||||
HLLayer:'B',//A矢量图样式，B卫星图样式
|
HLLayer:'B',//A矢量图样式，B卫星图样式
|
||||||
|
|
|
||||||
|
|
@ -178,6 +178,15 @@ const apiurl = {
|
||||||
ya: {
|
ya: {
|
||||||
rota: service + '/screen/plan/rota',
|
rota: service + '/screen/plan/rota',
|
||||||
document:service + '/screen/plan/doc'
|
document:service + '/screen/plan/doc'
|
||||||
|
},
|
||||||
|
hsyb:{
|
||||||
|
//预报方案管理
|
||||||
|
ybfagl: {
|
||||||
|
page: service + "/forecastProject/page",
|
||||||
|
getData: service + "/forecastProject/getForecastProjectResults",
|
||||||
|
del: service + "/forecastProject/del/",
|
||||||
|
export: service + '/forecastProject/export'
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
sg: {
|
sg: {
|
||||||
|
|
@ -196,6 +205,17 @@ const apiurl = {
|
||||||
wxyh:{
|
wxyh:{
|
||||||
info:service + '/screen/mfr/get/',
|
info:service + '/screen/mfr/get/',
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
gcaqjc:{
|
||||||
|
gcaqyj:{
|
||||||
|
yjgzpz: {
|
||||||
|
page: service + '/osmoticWarnRule/page',
|
||||||
|
save: service + '/osmoticWarnRule/insert',
|
||||||
|
edit: service + "/osmoticWarnRule/update",
|
||||||
|
delete: service + "/osmoticWarnRule/del",
|
||||||
|
list: service + "/osmoticPressDevice/list"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -109,6 +109,83 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dp-popup-tip {
|
.dp-popup-tip {
|
||||||
border: 10px solid transparent;
|
border: 10px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.home_modal{
|
||||||
|
.ant-modal-content{
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.normalModalStyle{
|
||||||
|
width: 100%;
|
||||||
|
// min-height: 600px;
|
||||||
|
background-color: #fff;
|
||||||
|
.ant-card-body{
|
||||||
|
|
||||||
|
.ant-table-thead{
|
||||||
|
.ant-table-cell{
|
||||||
|
background-color: #e2edfd !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.normalModalStyle_title{
|
||||||
|
height: 40px;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border-radius: 10px 10px 0 0 ;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #007afd;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.normalModalStyle_title_icon{
|
||||||
|
margin: 0 10px 0 15px;
|
||||||
|
width: 5px;
|
||||||
|
height: 16px;
|
||||||
|
background: #3477f5;
|
||||||
|
}
|
||||||
|
.normalModalStyle_title_cancel{
|
||||||
|
margin-right: 15px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.homeModal2{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.homeModal2_content{
|
||||||
|
height: 504px;
|
||||||
|
display: flex;
|
||||||
|
padding: 5px 20px 20px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.homeModal1{
|
||||||
|
// .ant-radio-button-wrapper:not(:first-child)::before{
|
||||||
|
// background-color: red;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.homeModal1_content{
|
||||||
|
height: 504px;
|
||||||
|
display: flex;
|
||||||
|
padding: 5px 20px 20px 20px;
|
||||||
|
.homeModal1_content_lf{
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.homeModal1_content_rf{
|
||||||
|
width: 60%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
|
||||||
|
const Page = ({data={}}) => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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-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-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-text'>受灾人口</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Page
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Radio, message } from 'antd';
|
||||||
|
import arrowIcon from '@/assets/images/card/arrow.png';
|
||||||
|
import NormalSelect from '../../../../../../../components/Form/NormalSelect'
|
||||||
|
import './index.less'
|
||||||
|
import Count from './count'
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget, httppost } from '@/utils/request';
|
||||||
|
|
||||||
|
|
||||||
|
const FloodPreview = ({setPlanData}) => {
|
||||||
|
const [ options, setOptions ] = useState([])
|
||||||
|
const [ radio, setRadio ] = useState(1)
|
||||||
|
const [ planId, setPlanId ] = useState(null)
|
||||||
|
const [ data, setData ] = useState({})
|
||||||
|
console.log(data);
|
||||||
|
useEffect(()=>{
|
||||||
|
getPlan()
|
||||||
|
},[])
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
if(radio===1 && planId){
|
||||||
|
getData(planId)
|
||||||
|
}else{
|
||||||
|
setData({})
|
||||||
|
}
|
||||||
|
},[planId,radio])
|
||||||
|
|
||||||
|
// 获取预报数据
|
||||||
|
const getPlan = async () => {
|
||||||
|
const { code, data, description} = await httppost(apiurl.sy.hsyb.ybfagl.page,{
|
||||||
|
"pageSo": {
|
||||||
|
"pageSize": 999,
|
||||||
|
"pageNumber": 1
|
||||||
|
},
|
||||||
|
"orderField": "chtm",
|
||||||
|
"isAsc": false
|
||||||
|
})
|
||||||
|
|
||||||
|
if(code===400 && description){
|
||||||
|
message.error(description)
|
||||||
|
setOptions([])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(code!==200){
|
||||||
|
message.error('请求失败')
|
||||||
|
setOptions([])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const list = data?.records?.map(o=>({
|
||||||
|
...o,
|
||||||
|
label: o.name,
|
||||||
|
value: o.id
|
||||||
|
}))
|
||||||
|
setPlanId(list?.[0]?.value||null)
|
||||||
|
setOptions(list||[])
|
||||||
|
};
|
||||||
|
const getData = async (projectId) => {
|
||||||
|
const { code, data, description} = await httpget(apiurl.sy.hsyb.ybfagl.getData,{projectId})
|
||||||
|
if(code===400 && description){
|
||||||
|
message.error(description)
|
||||||
|
setData({})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(code!==200){
|
||||||
|
message.error('请求失败')
|
||||||
|
setData({})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setData(data||{})
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
console.log(radio);
|
||||||
|
return (
|
||||||
|
<div className="flood-preview-section">
|
||||||
|
<div className="section-title">
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span>选择预报方案</span>
|
||||||
|
</div>
|
||||||
|
<div className='flood-preview-section-radio'>
|
||||||
|
<Radio checked={radio===1} onClick={()=>setRadio(1)}/>
|
||||||
|
<NormalSelect
|
||||||
|
style={{ width: '300px' }}
|
||||||
|
options={options}
|
||||||
|
value={planId}
|
||||||
|
allowClear={false}
|
||||||
|
onChange={(e)=>setPlanId(e)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='flood-preview-section-radio'>
|
||||||
|
<Radio checked={radio===2} onClick={()=>setRadio(2)}/>
|
||||||
|
24小时降雨400mm（50年一遇）
|
||||||
|
</div>
|
||||||
|
<div className='flood-preview-section-radio'>
|
||||||
|
<Radio checked={radio===3} onClick={()=>setRadio(3)}/>
|
||||||
|
24小时降雨500mm（100年一遇）
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="section-title" style={{marginTop:'10px'}}>
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span>淹没受灾统计</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Count data={data}/>
|
||||||
|
<div className='flood-preview-section-btn'>
|
||||||
|
<div className="uav-button" onClick={() => {
|
||||||
|
if(data.id){
|
||||||
|
setPlanData(data)
|
||||||
|
}
|
||||||
|
}}>洪水预演</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FloodPreview;
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,281 @@
|
||||||
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
|
import { Empty } from 'antd';
|
||||||
|
import ReactEcharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
|
||||||
|
const Page = ({data=[]}) => {
|
||||||
|
const option = useMemo(()=>{
|
||||||
|
const getVal = (val)=>{
|
||||||
|
if(val===null||val===undefined){
|
||||||
|
return '-'
|
||||||
|
}else{
|
||||||
|
return Number(val).toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
grid: [
|
||||||
|
{
|
||||||
|
top: '20%',
|
||||||
|
left: '12%',
|
||||||
|
right: '10%',
|
||||||
|
width: '80%',
|
||||||
|
height: '32%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bottom: '5%',
|
||||||
|
left: '12%',
|
||||||
|
right: '10%',
|
||||||
|
width: '80%',
|
||||||
|
height: '32%'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
// 显示图例
|
||||||
|
show: true,
|
||||||
|
textStyle: { color: '#fff' },
|
||||||
|
// 图例的位置
|
||||||
|
// data: ['汛限水位', '设计水位', '校核水位', "降雨量", "水位", "库容"],
|
||||||
|
// data: ['校核水位', '设计水位', '汛限水位', '降雨量', '水位', '库容']
|
||||||
|
data: ['降雨量', '预报水位', '预报入库流量', '预报出库流量', '汛限水位', '设计洪水位']
|
||||||
|
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
gridIndex: 0,
|
||||||
|
type: 'category',
|
||||||
|
data: data.map(o => o.tm),
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12,
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.5)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 1,
|
||||||
|
type: 'category',
|
||||||
|
data: data.map(o => o.tm),
|
||||||
|
inverse: true,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12,
|
||||||
|
formatter: val => val.substr('2020-'.length, 11)
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.5)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
inverse: true,
|
||||||
|
gridIndex: 0,
|
||||||
|
type: 'value',
|
||||||
|
position: 'left',
|
||||||
|
name: '降雨量(mm)',
|
||||||
|
nameLocation: 'start',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.5)',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
// max: maxVal
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 1,
|
||||||
|
type: 'value',
|
||||||
|
position: 'left',
|
||||||
|
name: '水位(m)',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.5)',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
// min: minSw,
|
||||||
|
// max: maxSw
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 1,
|
||||||
|
type: 'value',
|
||||||
|
position: 'right',
|
||||||
|
name: '流量(m³/s)',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.25,
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
// min: minKr,
|
||||||
|
// max: maxKr
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
xAxisIndex: 0,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
name: '降雨量',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '50%',
|
||||||
|
data: data.map((v) => getVal(v.drp)),
|
||||||
|
itemStyle: {
|
||||||
|
color: '#007AFD',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
name: '预报水位',
|
||||||
|
type: 'line',
|
||||||
|
color: '#4b85f0',
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
},
|
||||||
|
data: data.map(o => getVal(o.ycSwHValue)),
|
||||||
|
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||||
|
smooth: 0.5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
name: '预报入库流量',
|
||||||
|
type: 'line',
|
||||||
|
color: "#82b87e",
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed"
|
||||||
|
},
|
||||||
|
data: data.map(o => getVal(o.ycRkQValue)),
|
||||||
|
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||||
|
smooth: 0.5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
name: '预报出库流量',
|
||||||
|
type: 'line',
|
||||||
|
color: "#e5625c",
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed"
|
||||||
|
},
|
||||||
|
data: data.map(o => getVal(o.ycCkQValue)),
|
||||||
|
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||||
|
smooth: 0.5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
name: '汛限水位',
|
||||||
|
type: 'line',
|
||||||
|
color: "#f2ca6b",
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed"
|
||||||
|
},
|
||||||
|
data: data.map(o => getVal(o.flLowLimLev)),
|
||||||
|
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||||
|
smooth: 0.5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
name: '设计洪水位',
|
||||||
|
type: 'line',
|
||||||
|
color: '#D9001B',
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
},
|
||||||
|
data: data.map(o => 0),
|
||||||
|
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},[data])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Page
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
|
||||||
|
const Page = ({data={}}) => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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-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-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-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-text'>最大出库流量</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Page
|
||||||
|
|
@ -0,0 +1,983 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
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()
|
||||||
|
},[])
|
||||||
|
|
||||||
|
// 获取预报数据
|
||||||
|
const getData = async () => {
|
||||||
|
// const { code, data, description} = await httpget('未对接接口')
|
||||||
|
const { code, data, description} = {
|
||||||
|
"code": 200,
|
||||||
|
"description": "请求成功",
|
||||||
|
"data": {
|
||||||
|
"pageSo": null,
|
||||||
|
"orderField": null,
|
||||||
|
"isAsc": null,
|
||||||
|
"id": "2013796371344191489",
|
||||||
|
"name": "洪水预报2025110611方案",
|
||||||
|
"type": "2",
|
||||||
|
"forecastTm": "2025-11-06 11:00:00",
|
||||||
|
"projectTm": "2026-01-21 10:00:00",
|
||||||
|
"startTm": "2025-11-05 11:00:00",
|
||||||
|
"endTm": "2025-11-07 11:00:00",
|
||||||
|
"userId": "59_admin",
|
||||||
|
"forecastPeriod": 24,
|
||||||
|
"forecastWarm": 1,
|
||||||
|
"chtm": "2026-01-21 10:10:44",
|
||||||
|
"updateTm": "2026-01-21 10:10:44",
|
||||||
|
"timeInterval": null,
|
||||||
|
"taskId": null,
|
||||||
|
"voList": [
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 12:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 13:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 14:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 15:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 16:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 17:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.34,
|
||||||
|
"swHDValue": 0,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 18:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 19:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 20:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 21:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 22:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.34,
|
||||||
|
"swHDValue": 0,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-05 23:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.34,
|
||||||
|
"swHDValue": 0,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 00:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 01:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 02:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.34,
|
||||||
|
"swHDValue": 0,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 03:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 04:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.34,
|
||||||
|
"swHDValue": 0,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 05:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 06:00:00",
|
||||||
|
"ycRkQValue": 0,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.02,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 07:00:00",
|
||||||
|
"ycRkQValue": 0.01,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 08:00:00",
|
||||||
|
"ycRkQValue": 0.03,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.57,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 09:00:00",
|
||||||
|
"ycRkQValue": 0.04,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.02,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 10:00:00",
|
||||||
|
"ycRkQValue": 0.05,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.02,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 11:00:00",
|
||||||
|
"ycRkQValue": 0.08,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 12:00:00",
|
||||||
|
"ycRkQValue": 0.1,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.02,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 13:00:00",
|
||||||
|
"ycRkQValue": 0.12,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.02,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 14:00:00",
|
||||||
|
"ycRkQValue": 0.15,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 1,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.04,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 15:00:00",
|
||||||
|
"ycRkQValue": 0.19,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.02,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 16:00:00",
|
||||||
|
"ycRkQValue": 0.24,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.02,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 17:00:00",
|
||||||
|
"ycRkQValue": 0.25,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.02,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 18:00:00",
|
||||||
|
"ycRkQValue": 0.28,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 1,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.05,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 19:00:00",
|
||||||
|
"ycRkQValue": 0.33,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.03,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 20:00:00",
|
||||||
|
"ycRkQValue": 0.36,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.03,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 21:00:00",
|
||||||
|
"ycRkQValue": 0.38,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.35,
|
||||||
|
"swHDValue": -0.01,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.03,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 22:00:00",
|
||||||
|
"ycRkQValue": 0.41,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-06 23:00:00",
|
||||||
|
"ycRkQValue": 0.4,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.03,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 00:00:00",
|
||||||
|
"ycRkQValue": 0.38,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.03,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 01:00:00",
|
||||||
|
"ycRkQValue": 0.36,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 1,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.05,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 02:00:00",
|
||||||
|
"ycRkQValue": 0.38,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.37,
|
||||||
|
"swHDValue": -0.03,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.03,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 03:00:00",
|
||||||
|
"ycRkQValue": 0.4,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 1.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.1,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 04:00:00",
|
||||||
|
"ycRkQValue": 0.47,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 1.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.1,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 05:00:00",
|
||||||
|
"ycRkQValue": 0.55,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 06:00:00",
|
||||||
|
"ycRkQValue": 0.61,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.37,
|
||||||
|
"swHDValue": -0.03,
|
||||||
|
"drp": 1,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.06,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 07:00:00",
|
||||||
|
"ycRkQValue": 0.65,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.36,
|
||||||
|
"swHDValue": -0.02,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.03,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 08:00:00",
|
||||||
|
"ycRkQValue": 0.68,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.37,
|
||||||
|
"swHDValue": -0.03,
|
||||||
|
"drp": 1.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.11,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 11.47,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 09:00:00",
|
||||||
|
"ycRkQValue": 0.76,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.37,
|
||||||
|
"swHDValue": -0.03,
|
||||||
|
"drp": 0.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.78,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 25.62,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 10:00:00",
|
||||||
|
"ycRkQValue": 1.35,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.38,
|
||||||
|
"swHDValue": -0.04,
|
||||||
|
"drp": 1.5,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0.18,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 25.62,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tm": "2025-11-07 11:00:00",
|
||||||
|
"ycRkQValue": 2.03,
|
||||||
|
"realRkQValue": null,
|
||||||
|
"ycCkQValue": 0,
|
||||||
|
"realCkQValue": 0,
|
||||||
|
"ycSwHValue": 107.34,
|
||||||
|
"realSwHValue": 107.38,
|
||||||
|
"swHDValue": -0.04,
|
||||||
|
"drp": 0,
|
||||||
|
"ispreDrp": "0",
|
||||||
|
"r": 0,
|
||||||
|
"flLowLimLev": 109,
|
||||||
|
"currentYdgdyjz": 0.1,
|
||||||
|
"pa": 25.62,
|
||||||
|
"nowCap": null,
|
||||||
|
"psum": 0,
|
||||||
|
"rsum": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"ycMaxSwH": 107.34,
|
||||||
|
"ycMaxRkQ": 2.03,
|
||||||
|
"ycMaxCkQ": 0,
|
||||||
|
"ycSumFlood": 4.3344
|
||||||
|
},
|
||||||
|
"success": true
|
||||||
|
}
|
||||||
|
|
||||||
|
if(code===400 && description){
|
||||||
|
message.error(description)
|
||||||
|
setData({})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(code!==200){
|
||||||
|
message.error('请求失败')
|
||||||
|
setData({})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setData(data||{})
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="forecast-section">
|
||||||
|
<div className='forecast-section-time'>预报时段（24小时）：07-28 08:00 至 07-29 08:00</div>
|
||||||
|
<Count data={data}/>
|
||||||
|
<MyCharts data={data.voList}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ForecastSection;
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,48 @@
|
||||||
|
|
||||||
|
const Page = ({data={}}) => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="forecast-section-count">
|
||||||
|
<div className="forecast-section-countBox">
|
||||||
|
<div className='forecast-section-countItem'>
|
||||||
|
<div className='forecast-section-countItem-num'>{104.17}<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'>{0.8}<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'>{17}<span style={{fontSize:"14px"}}>h</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'>{1.18}<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}<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}<span style={{fontSize:"14px"}}>人</span></div>
|
||||||
|
<div className='forecast-section-countItem-text'>受灾人口</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Page
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Table, 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'
|
||||||
|
import Count from './count'
|
||||||
|
import apiurl from '@/service/apiurl';
|
||||||
|
import { httpget, httppost } from '@/utils/request';
|
||||||
|
|
||||||
|
|
||||||
|
const PlanPreview = ({setPlanData}) => {
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
const [ radio, setRadio ] = useState(1)
|
||||||
|
const [ planId, setPlanId ] = useState(null)
|
||||||
|
const [ data, setData ] = useState({})
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ title: '受灾村庄', key: 'cznm', dataIndex: 'cznm', align:"center"},
|
||||||
|
{ title: '受灾人口(人)', key: 'rk', dataIndex: 'rk', align:"center"},
|
||||||
|
{ title: '最高淹没深度(m)', key: 'sd', dataIndex: 'sd', align:"center"},
|
||||||
|
];
|
||||||
|
const data1 = [
|
||||||
|
{ cznm:'芳秀畈村', rk:98, sd:0.3 },
|
||||||
|
{ cznm:'芳秀畈村', rk:119, sd:0.5 },
|
||||||
|
]
|
||||||
|
const columns2 = [
|
||||||
|
{ title: '单位名称', key: 'dw', dataIndex: 'dw', align:"center"},
|
||||||
|
{ title: '影响人口(人)', key: 'rk', dataIndex: 'rk', align:"center"},
|
||||||
|
{ title: '最高淹没深度(m)', key: 'sd', dataIndex: 'sd', align:"center"},
|
||||||
|
];
|
||||||
|
const data2 = [
|
||||||
|
{ dw:'中学', rk:98, sd:0.3 },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="plan-preview-section">
|
||||||
|
<div className="section-title">
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon" />
|
||||||
|
<span>淹没统计</span>
|
||||||
|
</div>
|
||||||
|
<Count data={data}/>
|
||||||
|
<div className="section-title" style={{marginTop:'10px'}}>
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon"/>
|
||||||
|
<span>村庄影响情况</span>
|
||||||
|
</div>
|
||||||
|
<Table rowKey="id"
|
||||||
|
sticky
|
||||||
|
columns={columns}
|
||||||
|
pagination={false}
|
||||||
|
dataSource={data1}
|
||||||
|
scroll={{ y: "500px"}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="section-title" style={{marginTop:'10px'}}>
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon"/>
|
||||||
|
<span>企事业单位影响情况</span>
|
||||||
|
</div>
|
||||||
|
<Table rowKey="id"
|
||||||
|
sticky
|
||||||
|
columns={columns2}
|
||||||
|
pagination={false}
|
||||||
|
dataSource={data2}
|
||||||
|
scroll={{ y: "500px"}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="section-title" style={{marginTop:'10px'}}>
|
||||||
|
<img src={arrowIcon} alt="arrow" className="arrow-icon"/>
|
||||||
|
<span>切换视角</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='plan-preview-section-view'>
|
||||||
|
<img
|
||||||
|
src={`${process.env.PUBLIC_URL}/assets/images/view1.png`}
|
||||||
|
className='plan-preview-section-viewItem'
|
||||||
|
onClick={()=>{
|
||||||
|
dispatch.runtime.setCameraTarget({
|
||||||
|
center: [114.15437134051429, 29.744689445729758],
|
||||||
|
zoom: 18,
|
||||||
|
pitch: 60
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={`${process.env.PUBLIC_URL}/assets/images/view2.png`}
|
||||||
|
className='plan-preview-section-viewItem'
|
||||||
|
onClick={()=>{
|
||||||
|
dispatch.runtime.setCameraTarget({
|
||||||
|
center: [114.15437134051429, 29.704689445729758],
|
||||||
|
zoom: 14,
|
||||||
|
pitch: 60
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='plan-preview-section-view'>
|
||||||
|
<div className='plan-preview-section-viewItem2'>水库视角</div>
|
||||||
|
<div className='plan-preview-section-viewItem2'>下游视角</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PlanPreview;
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,9 @@ import WarningSection from './components/WarningSection';
|
||||||
import WaterRainSection from './components/WaterRainSection';
|
import WaterRainSection from './components/WaterRainSection';
|
||||||
import PlanSection from './components/PlanSection';
|
import PlanSection from './components/PlanSection';
|
||||||
import AllWeatherModal from '../SiQuan/components/ModalComponents/AllWeatherModal';
|
import AllWeatherModal from '../SiQuan/components/ModalComponents/AllWeatherModal';
|
||||||
|
import ForecastSection from './components/ForecastSection';
|
||||||
|
import FloodPreview from './components/FloodPreview';
|
||||||
|
import PlanPreview from './components/PlanPreview'
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -36,6 +39,7 @@ const SiYu = () => {
|
||||||
const [warningType, setWarningType] = useState('monitor');
|
const [warningType, setWarningType] = useState('monitor');
|
||||||
const [modalVisible, setModalVisible] = useState(false);
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
const [activeTab, setActiveTab] = useState('rain');
|
const [activeTab, setActiveTab] = useState('rain');
|
||||||
|
const [planData, setPlanData] = useState(null)
|
||||||
|
|
||||||
const tabsAllWeather = [
|
const tabsAllWeather = [
|
||||||
{ label: '雨情监测', value: 'rain' },
|
{ label: '雨情监测', value: 'rain' },
|
||||||
|
|
@ -53,14 +57,32 @@ const SiYu = () => {
|
||||||
<div className="siyu-view">
|
<div className="siyu-view">
|
||||||
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
<div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
|
||||||
<CommonCard title="预报" className="panel-card card-1">
|
<CommonCard title="预报" className="panel-card card-1">
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<ForecastSection/>
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
<CommonCard title="预演" className="panel-card card-2">
|
<CommonCard title="预演" className="panel-card card-2">
|
||||||
<div className="placeholder-content">内容填充区域</div>
|
<FloodPreview setPlanData={setPlanData}/>
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
<div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
|
||||||
|
{
|
||||||
|
planData?
|
||||||
|
<>
|
||||||
|
<CommonCard
|
||||||
|
title="洪水预演"
|
||||||
|
className="panel-card card-1"
|
||||||
|
headerExtra={
|
||||||
|
<img
|
||||||
|
src={`${process.env.PUBLIC_URL}/assets/images/return.png`}
|
||||||
|
style={{width:'16px',height:'16px',margin:"8px 9px 0 0", cursor:'pointer'}}
|
||||||
|
onClick={()=>setPlanData(null)}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<PlanPreview planData={planData}/>
|
||||||
|
</CommonCard>
|
||||||
|
</>:
|
||||||
|
<>
|
||||||
<CommonCard
|
<CommonCard
|
||||||
title="预警"
|
title="预警"
|
||||||
className="panel-card card-1"
|
className="panel-card card-1"
|
||||||
|
|
@ -79,6 +101,8 @@ const SiYu = () => {
|
||||||
<CommonCard title="预案" className="panel-card card-3">
|
<CommonCard title="预案" className="panel-card card-3">
|
||||||
<PlanSection />
|
<PlanSection />
|
||||||
</CommonCard>
|
</CommonCard>
|
||||||
|
</>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<CommonModal
|
<CommonModal
|
||||||
|
|
|
||||||
|
|
@ -26,11 +26,11 @@ export default function Btn() {
|
||||||
const layerVisibleChanged = (event)=>{
|
const layerVisibleChanged = (event)=>{
|
||||||
const vo = { [event.target.name]: event.target.checked };
|
const vo = { [event.target.name]: event.target.checked };
|
||||||
if(event.target.checked && (event.target.name==='SYLayer' || event.target.name==='SLLayer' || event.target.name==='WYLayer')){
|
if(event.target.checked && (event.target.name==='SYLayer' || event.target.name==='SLLayer' || event.target.name==='WYLayer')){
|
||||||
dispatch.runtime.setCameraTarget({
|
// dispatch.runtime.setCameraTarget({
|
||||||
center: [114.15437134051429, 29.744689445729758],
|
// center: [114.15437134051429, 29.744689445729758],
|
||||||
zoom: 18,
|
// zoom: 18,
|
||||||
pitch: 60
|
// pitch: 60
|
||||||
})
|
// })
|
||||||
}
|
}
|
||||||
dispatch.map.setLayerVisible(vo);
|
dispatch.map.setLayerVisible(vo);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue