洪水预演
parent
1f96ef565c
commit
d8598b4127
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="18px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -325 -30 )">
|
||||
<path d="M 18.7901234592014 17.2500000073242 C 21.3086419704861 4.95 9.20987654079861 4.35000001464844 9.20987654079861 4.34999999267578 L 9.20987654079861 1.60000000488281 C 8.96296295572917 0.45 8.02469136284722 1.15000000488281 8.02469136284722 1.15000000488281 L 1.50617282986111 6.80000000976563 C 0.0740740668402778 7.80000000732422 1.40740740017361 8.55 1.40740740017361 8.55 L 7.82716050347222 14.1499999951172 C 9.11111111111111 15.1000000048828 9.2098765625 13.6499999853516 9.20987654079861 13.6500000073242 L 9.20987654079861 11.0999999926758 C 15.7283950520833 9.05000000976563 18.39506171875 17.2500000073242 18.39506171875 17.2500000073242 C 18.6419753038194 17.7000000073242 18.7901234375 17.2500000073242 18.7901234592014 17.2500000073242 Z " fill-rule="nonzero" fill="#2c2c2c" stroke="none" transform="matrix(1 0 0 1 325 30 )" />
|
||||
</g>
|
||||
</svg>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -242,7 +242,7 @@ export default class Map3D extends BaseMap {
|
|||
this.demo.getQxsy(viewer) //倾斜摄影
|
||||
// this.demo.getDem(viewer) //地形图
|
||||
this.demo.getWxyx(viewer) //卫星影像
|
||||
this.demo.getCzml2(viewer) //demo
|
||||
// this.demo.getCzml2(viewer) //demo
|
||||
// this.demo.getGltf(viewer) //模型
|
||||
// this.demo.getWater(viewer)//简单淹没分析
|
||||
// this.demo.getWater2(viewer)
|
||||
|
|
@ -261,7 +261,7 @@ export default class Map3D extends BaseMap {
|
|||
|
||||
viewer.camera.setView({
|
||||
// destination: Cesium.Cartesian3.fromDegrees(...config.homeCenter3D),
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.770546000,31.496518000,500),
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.771646000,31.496518000,500),
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(-90),
|
||||
pitch: Cesium.Math.toRadians(-35.0),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -51,6 +51,7 @@ export default class LayerMgr3D extends LayerMgr {
|
|||
*/
|
||||
addAppLayers(dispatch, visible, setting, otherParams) {
|
||||
visible = visible || {};
|
||||
dispatch.map.setMap(this.viewer);
|
||||
// this.addLayer(new BouaLayer3D({ visible: visible[BouaLayer3D.LayerName], setting, dispatch }));
|
||||
|
||||
// if(visible[RainLayer3D.LayerName]){
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ function GongShuiMarker({ data, dispatch, setting, zoom, distSq }) {
|
|||
}
|
||||
|
||||
useEffect(() => {
|
||||
const width = 20;
|
||||
const width = 12;
|
||||
|
||||
const placeholder = document.getElementById(`marker_gongshui_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -124,11 +124,11 @@ export default function Btn({showPanels,setShowPanels}) {
|
|||
{/* <div className="lf" title="地图展示图层控制" onClick={showLayers}>
|
||||
<DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
|
||||
</div> */}
|
||||
<div className='mapToolBoxTuCeng' style={{left:open?'-185px':'5px'}}>
|
||||
{/* <div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black'}} onClick={btn3d}>
|
||||
<div className='mapToolBoxTuCeng' style={{left:open?'-225px':'5px'}}>
|
||||
<div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black'}} onClick={btn3d}>
|
||||
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/3dMap.jpg`} alt=""/>
|
||||
3D图
|
||||
</div> */}
|
||||
</div>
|
||||
<div className='mapToolBoxTuCengItem' style={{color:(!!layerVisible["SatelliteImage"]&&mode!=='3d')?'#1677ff':'black',cursor:mode==='3d'?'no-drop':'pointer'}} onClick={yxtBtn}>
|
||||
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/yingxiangtu.png`} alt=""/>
|
||||
影像图
|
||||
|
|
|
|||
|
|
@ -4,21 +4,105 @@ import { useDispatch, useSelector } from 'react-redux'
|
|||
import { Collapse, DatePicker, Input, Modal, message } from 'antd';
|
||||
import './index.less'
|
||||
import Ybfa from './ybfa'
|
||||
import Ymtj from './ymtj'
|
||||
import Demo3D from '../../Home/MapCtrl/Map3D/demo'
|
||||
const { Cesium } = window;
|
||||
|
||||
|
||||
const Page = ({ showPanels }) => {
|
||||
const dispatch = useDispatch();
|
||||
let mapObj = useSelector(s => s.map.map)
|
||||
const [ map, setMap ] = useState(null)
|
||||
const [ ctx, setCtx ] = useState({mode:'预报方案',data:{}})
|
||||
useEffect(()=>{
|
||||
},[])
|
||||
|
||||
useEffect(() => {
|
||||
dispatch.map.setLayerVisible({
|
||||
RealDrpLayer: true,
|
||||
PicStLayer: true,
|
||||
ShuiKuLayer: true,
|
||||
GongShuiLayer: true,
|
||||
AZDLayer: true,
|
||||
QSYDWLayer: true,
|
||||
YHJMHLayer: true
|
||||
});
|
||||
const { mode } = ctx
|
||||
//当前map对象是cesium
|
||||
if(!mapObj?._cesiumWidget){
|
||||
return
|
||||
}
|
||||
|
||||
if(mode==='淹没统计'){
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
const demo = new Demo3D()
|
||||
demo.getCzml2(mapObj)
|
||||
}else{
|
||||
mapObj.dataSources._dataSources.forEach(dataSource => {
|
||||
if (dataSource.name === 'CZML1111') { // 确保你知道你想要移除的数据源名称
|
||||
mapObj.dataSources.remove(dataSource);
|
||||
}
|
||||
});
|
||||
|
||||
mapObj.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.771546000,31.497518000,650),
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(-90),
|
||||
pitch: Cesium.Math.toRadians(-45.0),
|
||||
roll: 0.0
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// demo.getCzml2(mapObj)//demo
|
||||
// const tm = {
|
||||
// "dayNumber": 2460957,
|
||||
// "secondsOfDay": 75115.485
|
||||
// }
|
||||
// debugger
|
||||
// setTimeout(() => {
|
||||
// mapObj.clock.currentTime = tm;
|
||||
// }, 10000);
|
||||
// this.demo.getDem(viewer) //地形图
|
||||
// this.demo.getGltf(viewer) //模型
|
||||
// this.demo.getWater(viewer)//简单淹没分析
|
||||
// this.demo.getWater2(viewer)
|
||||
// this.demo.getRlt2(viewer)
|
||||
// this.demo.getRlt3(viewer) //热力图
|
||||
// this.demo.getCzml(viewer) //czml模型
|
||||
|
||||
return ()=>{
|
||||
dispatch.map.setLayerVisible({
|
||||
RealDrpLayer: false,
|
||||
PicStLayer: false,
|
||||
ShuiKuLayer: false,
|
||||
GongShuiLayer: false,
|
||||
AZDLayer: false,
|
||||
QSYDWLayer: false,
|
||||
YHJMHLayer: false
|
||||
});
|
||||
}
|
||||
}, [mapObj,ctx])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className='homePage' style={{ display: !showPanels ? 'none' : 'block' }}>
|
||||
<div className='homePage_rightBox' style={{ display: !showPanels ? 'none' : 'block', padding: '0px' }}>
|
||||
<Ybfa />
|
||||
{ ctx.mode==='预报方案'?<Ybfa setCtx={setCtx}/>:null }
|
||||
{ ctx.mode==='淹没统计'?<Ymtj setCtx={setCtx} ctx={ctx}/>:null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -396,7 +396,7 @@
|
|||
padding: 8px;
|
||||
|
||||
|
||||
|
||||
|
||||
.hsyylistBox{
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -441,4 +441,48 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ymtjBox{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
|
||||
|
||||
.ymtjBoxItem{
|
||||
background-color: #eee;
|
||||
border-radius: 5px;
|
||||
width: 108px;
|
||||
margin: 5px;
|
||||
padding: 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.text1{
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
height: 30px;
|
||||
.dw{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.text2{
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.hsyyScrollBox{
|
||||
height: 68vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Form, Input, Button, Table, Radio, Tabs } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
import './index.less'
|
||||
import { httpget2, httppost2 } from '../../../../utils/request';
|
||||
import apiurl from '../../../../service/apiurl';
|
||||
|
||||
const Page = ({data}) => {
|
||||
const [tab,setTab] = useState('1')
|
||||
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '降雨量(mm)', key: 'drp', dataIndex: 'drp', align:"center", width:100,render:(v,row)=>{
|
||||
const val = v===null?'-':Number(v).toFixed(2)
|
||||
return <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>{val}{row.ispreDrp==='1'?<div style={{marginLeft:'5px',width:'20px',height:'20px',borderRadius:"10px",border:'1px solid rgb(245, 154, 35)',color:'rgb(245, 154, 35)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'12px'}}>预</div>:null}</div>
|
||||
}},
|
||||
{ title: '实测水位(m)', key: 'realSwHValue', dataIndex: 'realSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报水位(m)', key: 'ycSwHValue', dataIndex: 'ycSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '入库流量(m³/s)', key: 'realRkQValue', dataIndex: 'realRkQValue', width:120, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报入库流量(m³/s)', key: 'ycRkQValue', dataIndex: 'ycRkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '实际出库流量(m³/s)', key: 'realCkQValue', dataIndex: 'realCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报出库流量(m³/s)', key: 'ycCkQValue', dataIndex: 'ycCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar'>
|
||||
预见期(小时)：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastPeriod}</span>
|
||||
预热期(天)：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastWarm}</span>
|
||||
预报时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastTime}</span>
|
||||
开始时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.startTime}</span>
|
||||
结束时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.endTime}</span>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_tab'>
|
||||
<Radio.Group onChange={(e)=>{setTab(e.target.value)}} defaultValue="1">
|
||||
<Radio.Button value="1">数据图</Radio.Button>
|
||||
<Radio.Button value="2">数据表</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar2'>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最高调洪水位(m):<span>{data?.tms?.ycMaxSwH?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大入库流量(m³/s):<span>{data?.tms?.ycMaxRkQ?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大下泄流量(m³/s):<span>{data?.tms?.ycMaxCkQ?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报洪水总量(万m³):<span>{data?.tms?.ycSumFlood?.toFixed(2)}</span></div>
|
||||
</div>
|
||||
<div className='fxdd_hsybjs_content_item2_content'>
|
||||
{
|
||||
tab==='1'?
|
||||
<ReactEcharts option={drpOption(data)} style={{width: "1500px", height: '600px'}}/>
|
||||
:null //<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||||
}
|
||||
{
|
||||
tab==='2'?
|
||||
<div className="colorTable" style={{padding:"10px 30px",height:'600px'}}>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={data.data}
|
||||
scroll={{ y: "540px"}}
|
||||
/>
|
||||
</div>:null
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -4,38 +4,16 @@ import {CloseOutlined} from '@ant-design/icons';
|
|||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
import moment from 'moment';
|
||||
import './index.less'
|
||||
import ModalForm1 from './table1'
|
||||
import { httpget2, httppost2 } from '../../../../utils/request';
|
||||
import apiurl from '../../../../service/apiurl';
|
||||
import Fack from './fack'
|
||||
import Tjpz from './tjpz'
|
||||
|
||||
const Page = ({projectId,onCancel,show}) => {
|
||||
const Page = ({projectId,onCancel,setCtx}) => {
|
||||
const [data,setData] = useState({data:[],tms:{}})
|
||||
const [tab,setTab] = useState('1')
|
||||
const [tabs, setTabsChange] = useState(0)
|
||||
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '降雨量(mm)', key: 'drp', dataIndex: 'drp', align:"center", width:100,render:(v,row)=>{
|
||||
const val = v===null?'-':Number(v).toFixed(2)
|
||||
return <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>{val}{row.ispreDrp==='1'?<div style={{marginLeft:'5px',width:'20px',height:'20px',borderRadius:"10px",border:'1px solid rgb(245, 154, 35)',color:'rgb(245, 154, 35)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'12px'}}>预</div>:null}</div>
|
||||
}},
|
||||
{ title: '实测水位(m)', key: 'realSwHValue', dataIndex: 'realSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报水位(m)', key: 'ycSwHValue', dataIndex: 'ycSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '入库流量(m³/s)', key: 'realRkQValue', dataIndex: 'realRkQValue', width:120, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报入库流量(m³/s)', key: 'ycRkQValue', dataIndex: 'ycRkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '实际出库流量(m³/s)', key: 'realCkQValue', dataIndex: 'realCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报出库流量(m³/s)', key: 'ycCkQValue', dataIndex: 'ycCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
|
||||
const columns2 = [
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", render:v=>v.slice(0, 16)},
|
||||
{ title: '流量', key: 'realSwHValue', dataIndex: 'realSwHValue', align:"center",render:(v)=><Input style={{width:"200px"}} defaultValue={v}></Input>},
|
||||
];
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
(async()=>{
|
||||
const {code , data} = await httpget2(apiurl.fxdd_xyt.hsyb.ybfagl.getData+'?projectId='+projectId)
|
||||
|
|
@ -61,7 +39,7 @@ const Page = ({projectId,onCancel,show}) => {
|
|||
<div className='normalModalStyle homeModal2' style={{paddingBottom:'20px'}}>
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
预报成果详情
|
||||
方案配置
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={onCancel} style={{color:"#333"}}/>
|
||||
</div>
|
||||
|
|
@ -70,76 +48,11 @@ const Page = ({projectId,onCancel,show}) => {
|
|||
onChange={(e) => setTabsChange(e)}
|
||||
activeKey={tabs}
|
||||
style={{paddingLeft:'20px'}}
|
||||
items={[
|
||||
{label: '方案查看',key: 0},
|
||||
{label: '条件配置',key: 1},
|
||||
]}
|
||||
items={[{label: '方案查看',key: 0},{label: '条件配置',key: 1},]}
|
||||
>
|
||||
</Tabs>
|
||||
{
|
||||
tabs===0?<>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar'>
|
||||
预见期(小时)：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastPeriod}</span>
|
||||
预热期(天)：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastWarm}</span>
|
||||
预报时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastTime}</span>
|
||||
开始时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.startTime}</span>
|
||||
结束时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.endTime}</span>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_tab'>
|
||||
<Radio.Group onChange={(e)=>{setTab(e.target.value)}} defaultValue="1">
|
||||
<Radio.Button value="1">数据图</Radio.Button>
|
||||
<Radio.Button value="2">数据表</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar2'>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最高调洪水位(m):<span>{data?.tms?.ycMaxSwH?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大入库流量(m³/s):<span>{data?.tms?.ycMaxRkQ?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大下泄流量(m³/s):<span>{data?.tms?.ycMaxCkQ?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报洪水总量(万m³):<span>{data?.tms?.ycSumFlood?.toFixed(2)}</span></div>
|
||||
</div>
|
||||
<div className='fxdd_hsybjs_content_item2_content'>
|
||||
{
|
||||
tab==='1'?
|
||||
<ReactEcharts option={drpOption(data)} style={{width: "1500px", height: '600px'}}/>
|
||||
:null //<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||||
}
|
||||
{
|
||||
tab==='2'?
|
||||
<div className="colorTable" style={{padding:"10px 30px",height:'600px'}}>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={data.data}
|
||||
scroll={{ y: "540px"}}
|
||||
/>
|
||||
</div>:null
|
||||
}
|
||||
</div>
|
||||
</>:null
|
||||
}
|
||||
{
|
||||
tabs===1?<>
|
||||
<div className="colorTable" style={{padding:"10px 30px",height:'600px'}}>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns2}
|
||||
pagination={false}
|
||||
dataSource={data.data}
|
||||
scroll={{ y: "500px"}}
|
||||
/>
|
||||
<div style={{padding:'15px',textAlign:'right'}}>
|
||||
<Button type="primary" onClick={()=>show('aaaa')}>加载方案</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>:null
|
||||
}
|
||||
|
||||
{ tabs===0?<Fack data={data}/>:null }
|
||||
{ tabs===1?<Tjpz data={data} setCtx={setCtx} onCancel={onCancel}/>:null }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
import React, { useEffect, useState, useRef, useMemo } from 'react';
|
||||
import { Form, Input, Button, Table, Radio } from 'antd';
|
||||
import { EyeOutlined } from '@ant-design/icons';
|
||||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
import moment from 'moment';
|
||||
import './index.less'
|
||||
|
||||
|
||||
const Page = ({record}) => {
|
||||
const columns = useMemo(()=>{
|
||||
if(record.type==='产流计算'){
|
||||
return [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '面雨量P(mm)', key: 'drp', dataIndex: 'drp', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '土壤含水量Pa(mm)', key: 'pa', dataIndex: 'pa', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '径流深R(mm)', key: 'r', dataIndex: 'r', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
}else if(record.type==='汇流计算'){
|
||||
return [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '预测入库流量', key: 'ycRkQValue', dataIndex: 'ycRkQValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
}else{
|
||||
return [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '预测出库流量', key: 'ycCkQValue', dataIndex: 'ycCkQValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
}
|
||||
},[record])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="colorTable" style={{padding:"0px 0px"}}>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={record.list}
|
||||
scroll={{ y: "650px"}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Form, Input, Button, Table, Radio, Tabs } from 'antd';
|
||||
// import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||||
|
||||
const Page = ({data, setCtx, onCancel}) => {
|
||||
const columns2 = [
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", render:v=>v.slice(0, 16)},
|
||||
{ title: '流量', key: 'realSwHValue', dataIndex: 'realSwHValue', align:"center",render:(v)=><Input style={{width:"200px"}} defaultValue={v}></Input>},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="colorTable" style={{padding:"10px 30px",height:'600px'}}>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns2}
|
||||
pagination={false}
|
||||
dataSource={data.data}
|
||||
scroll={{ y: "500px"}}
|
||||
/>
|
||||
<div style={{padding:'15px',textAlign:'right'}}>
|
||||
<Button type="primary" onClick={()=>{
|
||||
onCancel()
|
||||
setCtx({mode:'淹没统计',data:data})
|
||||
}}>加载方案</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import {httppost2, httpget, httpget2,httpget3} from "../../../utils/request";
|
||||
import {message} from 'antd';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
|
||||
|
||||
//实时水情-河道水情列表
|
||||
export async function getTableData() {
|
||||
const params = {
|
||||
"pageSo": {
|
||||
"pageSize": 99999,
|
||||
"pageNumber": 1
|
||||
},
|
||||
"orderField": "chtm",
|
||||
"isAsc": false
|
||||
}
|
||||
const {data, code, msg} = await httppost2(apiurl.fxdd_xyt.hsyb.ybfagl.page,params) || {};
|
||||
if (code !== 200) {
|
||||
message.error(msg || '请求失败');
|
||||
}
|
||||
return data?.records||[];
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,25 +1,45 @@
|
|||
import React, { useEffect, useState, useRef } from 'react'
|
||||
import React, { useEffect, useState, useRef, useMemo } from 'react'
|
||||
import { useLocation } from 'react-router'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import {Form, Input, DatePicker, Popover, Collapse , Button, message, Table, Col, Modal} from 'antd';
|
||||
import { createCrudService } from '../../../components/crud/_';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import ModalForm from './information';
|
||||
import { httppost2 } from '../../../utils/request';
|
||||
import { getTableData } from './service';
|
||||
import moment from 'moment';
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker
|
||||
|
||||
|
||||
const Page = ({ showPanels }) => {
|
||||
const Page = ({ setCtx }) => {
|
||||
const dispatch = useDispatch();
|
||||
let mapObj = useSelector(s => s.map.map)
|
||||
const [index,setIndex] = useState(0)
|
||||
const [data,setData] = useState([])
|
||||
const [projectId, setProjectId] = useState('')
|
||||
const [open, setOpen] = useState(false)
|
||||
const [mode,setMode] = useState(0)
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const [tms,setTms] = useState([])
|
||||
const listData = useMemo(()=>{
|
||||
let list = [...data]
|
||||
if(name){
|
||||
list = list.filter((i)=>i.name.indexOf(name)>-1)
|
||||
}
|
||||
if(tms&&tms.length>0){
|
||||
list = list.filter((i)=>{
|
||||
const stm = moment(tms[0])
|
||||
const etm = moment(tms[1])
|
||||
const tm = moment(i.updateTm)
|
||||
if(tm.isAfter(stm)&&etm.isAfter(tm)){
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
return list
|
||||
},[data,name,tms])
|
||||
|
||||
|
||||
|
||||
|
|
@ -29,127 +49,73 @@ const Page = ({ showPanels }) => {
|
|||
}, [])
|
||||
|
||||
const getData = async()=>{
|
||||
const { code, data } = await httppost2(apiurl.fxdd_xyt.hsyb.ybfagl.page, {
|
||||
"pageSo": {
|
||||
"pageSize": 99999,
|
||||
"pageNumber": 1
|
||||
},
|
||||
"orderField": "chtm",
|
||||
"isAsc": false
|
||||
});
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
setData(data?.records||[])
|
||||
const data = await getTableData()
|
||||
setData(data)
|
||||
}
|
||||
|
||||
const show = (data)=>{
|
||||
|
||||
const openModal = (item)=>{
|
||||
setOpen(true)
|
||||
setProjectId(item.id)
|
||||
}
|
||||
const closeModal = ()=>{
|
||||
setOpen(false)
|
||||
setMode(1)
|
||||
setProjectId(null)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='hsyyBox'>
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
预报方案
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
</div>
|
||||
</div>
|
||||
<Form className='toolbarBox'>
|
||||
<Form.Item label="预报方案名称" name='name' style={{ margin: '0 0 0 5px' }}>
|
||||
<Input style={{width:'90%',height:'28px',lineHeight:'28px'}} value={'222'} onChange={(e)=>setName(e.nativeEvent.target.value)}/>
|
||||
</Form.Item>
|
||||
<Form.Item label='方案制作时间' name='tm' style={{ margin: '0 0 4px 5px' }}>
|
||||
<RangePicker
|
||||
style={{ width: '90%',height:'28px',lineHeight:'28px' }}
|
||||
onChange={(v)=>setTms(v)}
|
||||
value={tms}
|
||||
format='YYYY-MM-DD HH:mm'
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div className='hsyyScrollBox'>
|
||||
{
|
||||
mode===0?<>
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
预报方案
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
</div>
|
||||
</div>
|
||||
<Form className='toolbarBox'>
|
||||
<Form.Item label="队伍名称" name='name' style={{ margin: '0 0 0 5px' }}>
|
||||
<Input style={{width:'90%',height:'28px',lineHeight:'28px'}} />
|
||||
</Form.Item>
|
||||
<Form.Item label='时段选择' name='tm' style={{ margin: '0 0 4px 5px' }}>
|
||||
<RangePicker
|
||||
style={{ width: '90%',height:'28px',lineHeight:'28px' }}
|
||||
// onChange={(v)=>setTms(v)}
|
||||
// value={tms}
|
||||
format='YYYY-MM-DD HH:mm'
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{
|
||||
data?.map((item,listIndex)=>(
|
||||
<>
|
||||
<div
|
||||
style={{height:listIndex===index?'200px':'45px',cursor:'pointer'}}
|
||||
className='hsyylistBox'
|
||||
onClick={()=>setIndex(listIndex)}
|
||||
>
|
||||
<div className='hsyylistBoxTitle'>{(listIndex+1)+'.'+item.name}{
|
||||
listIndex===index?
|
||||
<span onClick={()=>{
|
||||
setOpen(true)
|
||||
setProjectId(item.id)
|
||||
}}>方案配置</span>:
|
||||
<span style={{color:'#8FAFC4',borderColor:'#8FAFC4'}}>方案配置</span>
|
||||
}</div>
|
||||
<div className='hsyylistBoxLabel'>预报时段：<div className='hsyylistBoxValue'>{item.startTm}至{item.endTm}</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最高调洪水位(m)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大入库流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大下泄流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报洪水总量(万m³)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>方案制作时间：<div className='hsyylistBoxValue'>{item.updateTm}</div></div>
|
||||
</div>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</>:null
|
||||
}
|
||||
|
||||
{
|
||||
mode===1?<>
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
卸洪结果
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }} onClick={()=>{
|
||||
setProjectId(null)
|
||||
setMode(0)
|
||||
}}>
|
||||
返回
|
||||
</div>
|
||||
</div>
|
||||
<div className='hsyylistBox' >
|
||||
<div className='hsyylistBoxLabel'>预报时段：<div className='hsyylistBoxValue'>{}至{}</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最高调洪水位(m)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大入库流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大下泄流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报洪水总量(万m³)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>方案制作时间：<div className='hsyylistBoxValue'>{}</div></div>
|
||||
</div>
|
||||
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
水位
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
出入库流量
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
</div>
|
||||
</div>
|
||||
</>:null
|
||||
listData?.map((item,listIndex)=>(
|
||||
<>
|
||||
<div
|
||||
style={{height:listIndex===index?'200px':'45px',cursor:'pointer'}}
|
||||
className='hsyylistBox'
|
||||
onClick={()=>setIndex(listIndex)}
|
||||
>
|
||||
<div className='hsyylistBoxTitle'>{(listIndex+1)+'.'+item.name}{
|
||||
listIndex===index?
|
||||
<span onClick={()=>openModal(item)}>方案配置</span>:
|
||||
<span style={{color:'#8FAFC4',borderColor:'#8FAFC4'}}>方案配置</span>
|
||||
}</div>
|
||||
<div className='hsyylistBoxLabel'>预报时段：<div className='hsyylistBoxValue'>{item.startTm}至{item.endTm}</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最高调洪水位(m)：<div className='hsyylistBoxValue'>{item.ycMaxSwH||'-'}</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大入库流量(m³/s)：<div className='hsyylistBoxValue'>{item.ycMaxRkQ||'-'}</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大下泄流量(m³/s)：<div className='hsyylistBoxValue'>{item.ycMaxCkQ||'-'}</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报洪水总量(万m³)：<div className='hsyylistBoxValue'>{item.ycSumFlood||'-'}</div></div>
|
||||
<div className='hsyylistBoxLabel'>方案制作时间：<div className='hsyylistBoxValue'>{item.updateTm}</div></div>
|
||||
</div>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal width={1500} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={open} onCancel={()=>setOpen(false)} destroyOnClose={true}>
|
||||
<ModalForm projectId={projectId} onCancel={()=>setOpen(false)} show={show}/>
|
||||
<Modal width={1500} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={open} onCancel={closeModal} destroyOnClose={true}>
|
||||
<ModalForm projectId={projectId} onCancel={closeModal} setCtx={setCtx}/>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
import React, { useEffect, useState, useRef } from 'react'
|
||||
import { useLocation } from 'react-router'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import {Form, Input, DatePicker, Popover, Collapse , Button, message, Table, Col, Modal} from 'antd';
|
||||
import { RollbackOutlined, ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import ModalForm from './information';
|
||||
import { httppost2 } from '../../../utils/request';
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker
|
||||
|
||||
|
||||
const Page = ({ ctx, setCtx }) => {
|
||||
const dispatch = useDispatch();
|
||||
let mapObj = useSelector(s => s.map.map)
|
||||
const [data1,setData1] = useState([
|
||||
{
|
||||
cz:'檀树岗村',
|
||||
rk:10,
|
||||
sd:15,
|
||||
sj:'2025-08-04 18:00:00',
|
||||
},
|
||||
{
|
||||
cz:'檀树岗村',
|
||||
rk:10,
|
||||
sd:15,
|
||||
sj:20,
|
||||
},
|
||||
{
|
||||
cz:'檀树岗村',
|
||||
rk:10,
|
||||
sd:15,
|
||||
sj:20,
|
||||
},
|
||||
])
|
||||
const [data2,setData2] = useState([
|
||||
{
|
||||
dwmc:'七里坪镇檀树中学',
|
||||
rk:10,
|
||||
sd:15,
|
||||
sj:20,
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
const columns = [
|
||||
{ title: '受灾村庄', key: 'cz', dataIndex: 'cz', 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"},
|
||||
];
|
||||
const columns2 = [
|
||||
{ title: '单位名称', key: 'dwmc', dataIndex: 'dwmc', 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"},
|
||||
];
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const getData = async()=>{
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='hsyyBox'>
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />淹没统计</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }} onClick={()=>setCtx({mode:'预报方案',data:{}})}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/back.svg`} alt="" style={{cursor:'pointer',marginRight:'10px'}}/>
|
||||
</div>
|
||||
</div>
|
||||
<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='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'}}>2.8<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='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'>千m³</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='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'}}>4<div className='dw'>人</div></div>
|
||||
<div className='text2'>受灾人口</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />村庄影响情况</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}></div>
|
||||
</div>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={data1}
|
||||
scroll={{ y: "500px"}}
|
||||
/>
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />企事业单位影响情况</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}></div>
|
||||
</div>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns2}
|
||||
pagination={false}
|
||||
dataSource={data2}
|
||||
scroll={{ y: "500px"}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
Loading…
Reference in New Issue