lishenfeng
/
mcfxkh-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 水质功能开发

lsf-dev
李神峰 2025-05-26 21:26:20 +08:00
parent 5f6ef70695
commit 7773488800
30 changed files with 542 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/pie.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/shuiz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/assets/sl.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
public/assets/yy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/assets/yytc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 MiB

BIN
src/assets/yy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

6
src/models/map/index.js
View File

@ -345,6 +345,12 @@ const map = {
// dispatch.map.setLayerSetting({dom: true});
map.setLayoutProperty('热力图', 'visibility', 'none');
}
if (id != 504) {
dispatch.runtime.setYyfa({})
}
}
})
};

27
src/models/map/layout.js
View File

@ -107,20 +107,6 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '预警信息管理', style: { height: '40%', flexGrow: 1 } },
];
leftFullHeight = true;
} else if (view === 507) {
left = [
{ key: '工程巡查', style: { height: '20%', flexGrow: 1 } },
{ key: '本月巡查记录', style: { height: '40%', flexGrow: 1 } },
{ key: '待处理巡查问题清单', style: { height: '40%', flexGrow: 1 } },
]
leftFullHeight = true;
}else if (view === 506) {
left = [
{ key: '水政统计', style: { height: '30%', flexGrow: 1 } },
{ key: '区域统计', style: { height: '35%', flexGrow: 1 } },
{ key: '本月水政巡查问题统计', style: { height: '35%', flexGrow: 1 } },
]
leftFullHeight = true;
}else if (view === 505) {
left = [
{ key: '灌区统计', style: { height: '30%', flexGrow: 1 } },
@ -238,9 +224,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
// rightFullHeight = true;
} else if (view === 507) {
right = [
{ key: '维护统计', style: { height: '20%', flexGrow: 1 } },
{ key: '本月工程维护', style: { height: '40%', flexGrow: 1 } },
{ key: '待处理维护问题清单', style: { height: '40%', flexGrow: 1 } },
{ key: '维护统计', style: { height: '30%', flexGrow: 1 } },
{ key: '本月工程维护', style: { height: '35%', flexGrow: 1 } },
{ key: '待处理维护问题清单', style: { height: '35%', flexGrow: 1 } },
];
rightFullHeight = true;
}else if (view === 505) {
@ -257,6 +243,13 @@ export default function calcLayout(view, rightStack, hidePanels) {
// { key: '渠道分配比例', style: { height: '35%', flexGrow: 1 } },
]
rightFullHeight = true;
}else if (view === 506) {
right = [
{ key: '水政统计', style: { height: '30%', flexGrow: 1 } },
{ key: '区域统计', style: { height: '35%', flexGrow: 1 } },
{ key: '本月水政巡查问题统计', style: { height: '35%', flexGrow: 1 } },
]
rightFullHeight = true;
}
}
}

2
src/views/Home/InfoDlg/LayersDlg/index.js
View File

@ -76,7 +76,7 @@ function LayersDlg({ onClose }) {
>
<div className="boxhead"></div>
<DpAppBar position="sticky">
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1 }}>图层显示设置</Typography>
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1,color:'#fff' }}>图层显示设置</Typography>
<DpCloseButton onClick={onClose} />
</DpAppBar>

16
src/views/Home/index.js
View File

@ -17,12 +17,22 @@ export default function Demo1() {
const layout = useSelector(getLayout);
const hp = useSelector(hidePanels);
console.log("hp",hp);
const yyRes = useSelector(s => s.runtime.yyObj);
return (
<div className="demo1">
<div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
<div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
<MapCtrl />
</div>
</div>
{
yyRes.yy &&
<>
<img src={`${process.env.PUBLIC_URL}/assets/yytc.png`} alt="" style={{ zIndex: 0.1, position: 'absolute' }} />
<img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute',bottom:100,left:'28%' }} />
</>
}
<div className="bottom">
<ActionDock />
</div>

16
src/views/Home/panels/GqWatch/constatData.js
View File

@ -12,7 +12,7 @@
"wagaCode": "HP0074208020000170",
"adCode": "420802102000000",
"adCode_dictText": "漳河镇",
"lgtd": 112.075597 -2.9619,
"lgtd": 112.075597 +2.9619,
"updserInvst": null,
"engGrad": null,
"runStat": "1",
@ -38,7 +38,7 @@
"engManCode": "ENG100051",
"chidCount": null,
"whthInWat_dictText": "是",
"lttd": 30.961122 - 0.2002,
"lttd": 30.961122 +0.2002,
"whthInWat": "1",
"hasImg": false,
"stfl": 131,
@ -73,7 +73,7 @@
"wagaCode": "HP0074208020000185",
"adCode": "420802102000000",
"adCode_dictText": "漳河镇",
"lgtd": 112.078158 -2.9619,
"lgtd": 112.078158 +2.9619,
"updserInvst": null,
"engGrad": null,
"runStat": "1",
@ -135,7 +135,7 @@
"wagaCode": "HP007420804000188X",
"adCode": "420804004213000",
"adCode_dictText": "车桥村",
"lgtd": 112.118889 -2.9619,
"lgtd": 112.118889 +2.9619,
"updserInvst": 20,
"engGrad": "2",
"runStat": "1",
@ -161,7 +161,7 @@
"engManCode": "ENG100037",
"chidCount": null,
"whthInWat_dictText": "否",
"lttd": 30.974167 - 0.2002,
"lttd": 30.974167 +0.2002,
"whthInWat": "2",
"hasImg": false,
"stfl": 5,
@ -195,7 +195,7 @@ const bzData = [
"engManCode": "ENG200038",
"wasuRang": "生态用水",
"wainWasoType": null,
"lttd": 30.97131 - 0.2002,
"lttd": 30.97131 +0.2002,
"updserRsn": null,
"updDate": "2023-03-21",
"pustCode": "HP0104208040001543",
@ -206,7 +206,7 @@ const bzData = [
"stfl": 0.1,
"adCode": "420804004000000",
"adCode_dictText": "双喜街道办事处",
"lgtd": 112.18575 -2.9619,
"lgtd": 112.18575 +2.9619,
"actIrrA": null,
"updserInvst": null,
"engGrad": null,
@ -252,7 +252,7 @@ const bzData = [
"stfl": 0.1,
"adCode": "420804001003000",
"adCode_dictText": "白石坡社区",
"lgtd": 112.19441 -2.9619,
"lgtd": 112.19441 +2.9619,
"actIrrA": null,
"updserInvst": null,
"engGrad": null,

10
src/views/Home/panels/GqWatch/index.js
View File

@ -35,7 +35,8 @@ function HDReal({ style }) {
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
const flyTo = (record,type) => {
const flyTo = (record, type) => {
toggleStType(type)
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
@ -49,6 +50,13 @@ function HDReal({ style }) {
const [type, setType] = useState('sz')
const toggleStType = (type) => {
if (type == 'sz') {
dispatch.map.setLayerVisible({'ShuiZhaLayer':true})
dispatch.map.setLayerVisible({'BzLayer':false})
} else {
dispatch.map.setLayerVisible({'ShuiZhaLayer':false})
dispatch.map.setLayerVisible({'BzLayer':true})
}
setType(type)
}

4
src/views/Home/panels/GqWeatherForcast/WF.js
View File

@ -49,10 +49,14 @@ function WF() {
}, [contourSetting]);
const genWeatherContour24H = () => {
dispatch.runtime.setYyfa({})
dispatch.shyjview.showWeather24h();
}
const genWeatherContourRadar = () => {
dispatch.runtime.setYyfa({})
dispatch.shyjview.showWeatherRadar();
}

2
src/views/Home/panels/GqWeatherForcast/index.js
View File

@ -15,7 +15,7 @@ export default function WeatherForcast({ style }) {
return (
<PanelBox
style={style}
title="天气预报"
title="天气预报1"
color="orange"
extra={
<i className="ionicons close cursor-pointer" onClick={closeLayer}></i>

116
src/views/Home/panels/Gqdd/index.js
View File

@ -17,21 +17,15 @@ import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import { styled } from '@material-ui/styles';
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
const [checked, setChecked] = React.useState(false);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
@ -54,15 +48,15 @@ function HDReal({ style }) {
const obj = {
0: '东干渠',
1: '西干渠',
2:'邓家河干渠'
2: '邓家河干渠'
}
const showData = Array(10).fill(0).map((o,i) => ({
const showData = Array(10).fill(0).map((o, i) => ({
id: `#${i + 1}`,
type:obj[i % 2],
type: obj[i % 2],
status: '--',
kd: (Math.random() * 100).toFixed(2),
ll:(Math.random() * 100).toFixed(1)
ll: (Math.random() * 100).toFixed(1)
}))
const flyTo = (record) => {
@ -86,29 +80,29 @@ function HDReal({ style }) {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const renderStatus = (row) => {
let bz = '运行'
switch (row.status) {
case 0:
bz = '停止'
break;
case 1:
bz = '运行'
break;
case 2:
bz = '故障'
break;
case 3:
bz = '维护中'
break;
case 4:
bz = '待机'
break;
default:
break;
}
return bz
const CustomSwitch = styled(Switch)({
'& .MuiSwitch-switchBase': {
color: '#fff',
'&.Mui-checked': {
color: '#1890ff',
'& + .MuiSwitch-track': {
backgroundColor: '#1890ff',
opacity: 0.5,
},
},
},
'& .MuiSwitch-track': {
backgroundColor: 'rgba(255, 255, 255, 0.3)',
},
});
const StyledFormControlLabel = styled(FormControlLabel)({
'& .MuiFormControlLabel-label': {
color: '#fff'
}
});
const [dimension, setDimension] =useState('fqh');
return (
<PanelBox
@ -128,7 +122,7 @@ function HDReal({ style }) {
</>
}
>
<TableContainer style={{ height: '100%' }}>
<TableContainer style={{ height: '100%', position: 'relative' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
@ -142,13 +136,13 @@ function HDReal({ style }) {
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell component="th" scope="row">
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
>{row.type}</div>
</DpTableCell>
<DpTableCell align="center">
{row.kd}
{row.kd}
</DpTableCell>
<DpTableCell align="center">{row.ll}</DpTableCell>
<DpTableCell align="center">{row.status}</DpTableCell>
@ -158,10 +152,54 @@ function HDReal({ style }) {
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
<div style={{ position: 'absolute',color:'#fff',top:70,left:-280,display:'flex',alignItems:'center' }}>
<StyledFormControlLabel
control={
<CustomSwitch
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
}
label="多灌区模式"
/>
{checked &&<div style={{marginTop:"-15px"}}>
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
<InputLabel id="analysis-select-label"></InputLabel>
<Select
labelId="analysis-select-label"
value={dimension}
label=""
onChange={(event) => {
const value = event.target.value;
setDimension(value);
}}
sx={{
color: '#fff',
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(255, 255, 255, 0.3)',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(255, 255, 255, 0.6)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: '#fff',
}
}}
>
<MenuItem value="fqh">浮桥河灌区</MenuItem>
<MenuItem value="shk">三河口水库灌区</MenuItem>
<MenuItem value="qjs">群建水库灌区</MenuItem>
<MenuItem value="dsb">大石板灌区</MenuItem>
</Select>
</FormControl>
</div>}
</div>
</PanelBox>
)
}

18
src/views/Home/panels/LlWatch/constant.js
View File

@ -18,7 +18,7 @@ const data =[
"chan": "1",
"accq": 120057496
},
"lttd": 31.240848 -0.2002,
"lttd": 31.240848 +0.2002,
"sttp": "QQ",
"irrCode": "D00001300",
"sort": 6001,
@ -28,7 +28,7 @@ const data =[
"stcd": "4211221029",
"stnm": "口泉测流站",
"addvcd_dictText": "荆门市",
"lgtd": 111.826413 - 2.9619,
"lgtd": 111.826413 +2.9619,
"irrCode_dictText": "水库枢纽",
"bsnm": "漳河流域"
},
@ -60,7 +60,7 @@ const data =[
"stcd": "4211221030",
"stnm": "苍坪测流站",
"addvcd_dictText": "荆门市",
"lgtd": 111.866217 -2.9619,
"lgtd": 111.866217 +2.9619,
"irrCode_dictText": "水库枢纽",
"bsnm": "漳河流域"
},
@ -82,7 +82,7 @@ const data =[
"chan": "1",
"accq": 377902272
},
"lttd": 30.959561 - 0.2002,
"lttd": 30.959561 +0.2002,
"sttp": "QQ",
"irrCode": "D00000290",
"sort": 6030,
@ -92,7 +92,7 @@ const data =[
"stcd": "4208820100",
"stnm": "渠首时差法流量站",
"addvcd_dictText": "荆门市",
"lgtd": 112.077549 -2.9619,
"lgtd": 112.077549 +2.9619,
"irrCode_dictText": "总干渠",
"bsnm": "漳河流域"
},
@ -114,7 +114,7 @@ const data =[
"chan": "0",
"accq": null
},
"lttd": 30.946457 -0.2002,
"lttd": 30.946457 +0.2002,
"sttp": "QQ",
"irrCode": "D00000300",
"sort": 6031,
@ -124,7 +124,7 @@ const data =[
"stcd": "4211223302",
"stnm": "二干进口流量",
"addvcd_dictText": "荆门市",
"lgtd": 112.07475 -2.9619,
"lgtd": 112.07475 +2.9619,
"irrCode_dictText": "二干渠",
"bsnm": "漳河流域"
},
@ -147,7 +147,7 @@ const data =[
"chan": "1",
"accq": 151531776
},
"lttd": 30.964597 - 0.2002,
"lttd": 30.964597 +0.2002,
"sttp": "QQ",
"irrCode": "D00000020,D00000290",
"sort": 6032,
@ -157,7 +157,7 @@ const data =[
"stcd": "4208820200",
"stnm": "三干渠进口时差法",
"addvcd_dictText": "荆门市",
"lgtd": 112.190279 -2.9619,
"lgtd": 112.190279 +2.9619,
"irrCode_dictText": "三干渠,总干渠",
"bsnm": "漳河流域"
}]

29
src/views/Home/panels/LlWatch/index.js
View File

@ -66,34 +66,35 @@ function HDReal({ style }) {
type: '工业',
time: '2025-05-26 10:00',
stcd: 42000002,
stnm: '热电厂',
stnm: '汉通闸流量站',
water:30,
flow: 0.222,
"lttd": 30.959561,
"lgtd": 112.077549,
"lttd": 30.973775 + 0.2002,
"lgtd": 112.17597 +2.9619,
},
{ water:12,
type: '工业',
stcd: 42000001,
time: '2025-05-26 10:00',
stnm: '福繕泪耀玻璃',
stnm: '福耀玻璃',
flow: 0.355,
"lttd": 30.959561,
"lgtd": 112.077549,
"lttd": 30.93926+0.2002,
"lgtd": 112.191703+ 2.9619,
}, {
water:21,
type: '工业',
time: '2025-05-26 10:00',
stnm: '格林美',
flow: 0.09,
"lttd": 30.959561,
"lgtd": 112.077549,
"lttd": 30.953887 + 0.2002,
"lgtd": 112.190551 + 2.9619,
stcd: 42000005
}
]
const flyTo = (record,type) => {
const flyTo = (record, type) => {
toggleStType(type == '渠道流量站' ?'qd':'sb')
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
@ -107,9 +108,15 @@ function HDReal({ style }) {
const [type, setType] = useState('sb')
const toggleStType = (type) => {
const toggleStType = (type) => {
if (type == 'sb') {
dispatch.map.setLayerVisible({'SbLayer':true})
dispatch.map.setLayerVisible({'QdLayer':false})
} else {
dispatch.map.setLayerVisible({'SbLayer':false})
dispatch.map.setLayerVisible({'QdLayer':true})
}
setType(type)
}
const toggleAutoRefresh = () => {

2
src/views/Home/panels/SzSta/index.js
View File

@ -11,7 +11,7 @@ export default function Overall({ style }) {
return (
<PanelBox
style={style}
title="区域分类统计"
title="数据统计"
color="green"
>
<OverallContent data={data} />

5
src/views/Home/panels/SzWatch/index.js
View File

@ -53,14 +53,15 @@ function HDReal({ style }) {
// }, [data, tableRzFilter]);
const showData = Array(1).fill(0).map((o, i) => ({
"lgtd": 112.071,
"lttd": 30.9641,
"lgtd": 112.071 +2.9619,
"lttd": 30.9641 +0.2002,
"tm": "2025-03-21 08",
"doxLevelStr": "Ⅰ类",
stnm:'水质站'
}))
const flyTo = (record) => {
dispatch.map.setLayerVisible({'ShuizhiLayer':true})
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: '水质站', properties: record, coordinates: [lgtd, lttd] });

121
src/views/Home/panels/Szqytj/index.js
View File

@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react';
import React, { useMemo, useState,useEffect } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
@ -17,7 +17,10 @@ import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less'
const { RangePicker } = DatePicker;
function rzRender(rz, base) {
return (
@ -52,11 +55,12 @@ function HDReal({ style }) {
// return ret;
// }, [data, tableRzFilter]);
const showData = Array(10).fill(0).map((o,i) => ({
id:`#${i + 1}`,
cl: (Math.random() * 100).toFixed(0),
kd: (Math.random() * 100).toFixed(0),
ll:(Math.random() * 100).toFixed(0)
const showData = Array(1).fill(0).map((o,i) => ({
date: '2025-05-26',
event: '侵占河道',
type: '侵占河道',
status: '待处理',
place:'浮桥河灌区'
}))
const flyTo = (record) => {
@ -75,39 +79,37 @@ function HDReal({ style }) {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const [params, setParams] = useState({ tm: [] })
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const renderStatus = (row) => {
let bz = '运行'
switch (row.status) {
case 0:
bz = '停止'
break;
case 1:
bz = '运行'
break;
case 2:
bz = '故障'
break;
case 3:
bz = '维护中'
break;
case 4:
bz = '待机'
break;
default:
break;
}
return bz
}
const searchTm = (e) => {
setParams({
...params,
stm: e[0].format("YYYY-MM-DD HH:mm"),
etm: e[1].format("YYYY-MM-DD HH:mm"),
tm:e,
})
};
useEffect(() => {
let options = "";
options = {
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
tm: [
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
],
}
setParams(options)
}, [])
return (
<PanelBox
style={style}
title="水政巡查"
title="水政事件"
color="green"
// tabs={
// <span className="button-group">
@ -122,33 +124,50 @@ function HDReal({ style }) {
</>
}
>
<TableContainer style={{ height: '100%' }}>
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
<RangePicker
// width="100%"
className='time-picker'
style={{
flex:1,
background: "transparent",
border: "none",
color: "#fff",
}}
onChange={searchTm}
allowClear
format="YYYY-MM-DD HH:mm"
showTime={{
format: 'HH:mm',
}}
value={params.tm}
getPopupContainer={trigger => trigger.parentElement}
/>
</div>
<img src={`${process.env.PUBLIC_URL}/assets/shuiz.png`} alt="" style={{ width: 421, height: '50%' }} />
<TableContainer style={{ height: '30%',marginTop:'10px' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '10%' }} align="left">区域</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="left">巡查次数</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>事件数量</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>处理中</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
<TableRow >
<DpTableCell style={{ width: '20%' }} align="center">日期</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">事件名称</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>事件类型</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>所在灌区</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>待处理</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell component="th" scope="row">
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.id}</div>
>{row.date}</div>
</DpTableCell>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
// onClick={() => flyTo(row)}
>{row.kd}</div>
</DpTableCell>
<DpTableCell align="center">{row.ll}</DpTableCell>
<DpTableCell align="center">{row.cl}</DpTableCell>
<DpTableCell align="center">{row.event}</DpTableCell>
<DpTableCell align="center">{row.type}</DpTableCell>
<DpTableCell align="center">{row.place}</DpTableCell>
<DpTableCell align="center">{row.status}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>

90
src/views/Home/panels/Szqytj/index.less Normal file
View File

@ -0,0 +1,90 @@
.tm{
width: 40%;
display: flex;
justify-content: center;
font-size: 14px;
font-weight: 400;
border-radius: 2px;
color: #fff;
background: linear-gradient(270deg,rgba(65,76,217,.4),rgba(58,85,218,.2) 14%,rgba(54,90,218,0) 49%,rgba(51,94,218,.2) 86%,rgba(44,102,219,.4));
border: 1px solid #0e4e93;
.MuiInput-underline:before{
border: 0px;
}
.time-picker{
.ant-picker-input > input{
color: #fff;
}
.ant-picker-separator{
color: #fff;
}
}
}
.time-type {
margin-left: 10rem;
display: flex;
cursor: pointer;
background-color: #393e45;
border-radius: 5%;
padding: 0.01% !important;
border: 1px solid #585e64;
div {
width: 80px;
border-radius: 5%;
text-align: center;
border: 1px solid #585e64;
padding: 4px 0;
}
.active {
color: #5FB7FF;
// background: #F0F7FF;
border: 1px solid #5FB7FF;
}
}
.ant-picker-panel-container{
background-color: rgba(36, 46, 92,1) !important;
}
.ant-picker-header,.ant-picker-body{
color: #fff !important;
border-color: #242e5c;
}
.ant-picker-content th{
color: #fff !important;
}
.ant-picker-cell,
.ant-picker-header-super-prev-btn,
.ant-picker-header-prev-btn,
.ant-picker-header-next-btn,
.ant-picker-header-super-next-btn
{
color: #fff !important;
}
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
// background: transparent !important;
color: #000;
}
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
{
background-color:transparent !important;
}
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
background-color: #1890ff !important;
}
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
// background-color:transparent !important;
color: #000 !important;
}
.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
{
color: #fff !important;
}

101
src/views/Home/panels/Szwtqytj/index.js
View File

@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react';
import React, { useMemo, useState,useEffect } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
@ -18,6 +18,8 @@ import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
function rzRender(rz, base) {
return (
@ -53,14 +55,12 @@ function HDReal({ style }) {
// }, [data, tableRzFilter]);
const randomMinutes = Math.floor(Math.random() * 60) + 1;
const format = 'YYYY-MM-DD HH:mm';
const showData = Array(10).fill(0).map((o,i) => ({
id: `#${i + 1}`,
time: moment()
.subtract(i * 60 + randomMinutes, 'minutes')
.format(format),
cl: "--",
kd: (Math.random() * 100).toFixed(0),
ll:(Math.random() * 100).toFixed(0)
const showData = Array(1).fill(0).map((o,i) => ({
date: '2025-05-26',
event: '东干渠巡查',
type: '2',
status: '已完成',
place:'1'
}))
const flyTo = (record) => {
@ -83,11 +83,35 @@ function HDReal({ style }) {
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const [params, setParams] = useState({ tm: [] })
const searchTm = (e) => {
setParams({
...params,
stm: e[0].format("YYYY-MM-DD HH:mm"),
etm: e[1].format("YYYY-MM-DD HH:mm"),
tm:e,
})
};
useEffect(() => {
let options = "";
options = {
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
tm: [
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
],
}
setParams(options)
}, [])
return (
<PanelBox
style={style}
title="本月水政巡查问题统计"
title="水政巡查"
color="green"
// tabs={
// <span className="button-group">
@ -102,37 +126,50 @@ function HDReal({ style }) {
</>
}
>
<TableContainer style={{ height: '100%' }}>
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
<RangePicker
// width="100%"
className='time-picker'
style={{
flex:1,
background: "transparent",
border: "none",
color: "#fff",
}}
onChange={searchTm}
allowClear
format="YYYY-MM-DD HH:mm"
showTime={{
format: 'HH:mm',
}}
value={params.tm}
getPopupContainer={trigger => trigger.parentElement}
/>
</div>
<img src={`${process.env.PUBLIC_URL}/assets/pie.png`} alt="" style={{ width: 421, height: '50%' }} />
<TableContainer style={{ height: '50%',marginTop:'10px' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '35%' }} align="left">日期</DpTableCell>
<DpTableCell style={{ width: '12%' }} align="left">管理单位</DpTableCell>
<DpTableCell align="center" style={{ width: '12%' }}>问题类型</DpTableCell>
<DpTableCell align="center" style={{ width: '12%' }}>处理状态</DpTableCell>
<DpTableCell align="center" style={{ width: '12%' }}>问题描述</DpTableCell>
<DpTableCell align="center" style={{ width: '12%' }}>操作</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
<TableRow >
<DpTableCell style={{ width: '20%' }} align="center">日期</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">巡检名称</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>发现问题数</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>未处理问题数</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>执行状态</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell component="th" scope="row">
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.time}</div>
>{row.date}</div>
</DpTableCell>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
// onClick={() => flyTo(row)}
>{row.cl}</div>
</DpTableCell>
<DpTableCell align="center">{row.cl}</DpTableCell>
<DpTableCell align="center">{row.cl}</DpTableCell>
<DpTableCell align="center">{row.cl}</DpTableCell>
<DpTableCell align="center">{row.cl}</DpTableCell>
<DpTableCell align="center">{row.event}</DpTableCell>
<DpTableCell align="center">{row.type}</DpTableCell>
<DpTableCell align="center">{row.place}</DpTableCell>
<DpTableCell align="center">{row.status}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>

16
src/views/Home/panels/TrWatch/constant.js
View File

@ -24,7 +24,7 @@ const data = [
"vtavslm": null,
"slmAvg": 24.5
},
"lttd": 30.8456 -0.2002,
"lttd": 30.8456 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
@ -34,7 +34,7 @@ const data = [
"stcd": "ZH201417",
"stnm": "马山二组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2321 -2.9619,
"lgtd": 112.2321 +2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
@ -63,7 +63,7 @@ const data = [
"vtavslm": null,
"slmAvg": 13.7
},
"lttd": 30.8446 -0.2002,
"lttd": 30.8446 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
@ -73,7 +73,7 @@ const data = [
"stcd": "ZH201421",
"stnm": "槐桥四组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.203 -2.9619,
"lgtd": 112.203 +2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
@ -101,7 +101,7 @@ const data = [
"vtavslm": null,
"slmAvg": 14.5
},
"lttd": 30.8866 -0.2002,
"lttd": 30.8866 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
@ -111,7 +111,7 @@ const data = [
"stcd": "ZH201418",
"stnm": "双碑一组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2006 -2.9619,
"lgtd": 112.2006 +2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
@ -140,7 +140,7 @@ const data = [
"vtavslm": null,
"slmAvg": 33.4
},
"lttd": 30.904191 -0.2002,
"lttd": 30.904191 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
@ -149,7 +149,7 @@ const data = [
"stcd": "4211221031",
"stnm": "试验站墒情",
"addvcd_dictText": "荆门市",
"lgtd": 112.087806 -2.9619,
"lgtd": 112.087806 +2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
}

1
src/views/Home/panels/TrWatch/index.js
View File

@ -105,6 +105,7 @@ function HDReal({ style }) {
// }))
const flyTo = (record) => {
dispatch.map.setLayerVisible({'TrsqLayer':true})
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: '墒情站', properties: record, coordinates: [lgtd, lttd] });

35
src/views/Home/panels/WhSta/OverallContent.js
View File

@ -116,24 +116,35 @@ export default function OverallContent({ data }) {
return (
<div className={classes.root}>
<div className={classes.grid}>
<div style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div className="value" style={{color:'#5ecd45'}}>2</div>
<div className="key" style={{color:'#fff',fontSize:16}}>本月维护</div>
<div className={classes.grid} style={{flexWrap:'wrap'}}>
<div style={{padding:10, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div className="value" style={{color:'#5ecd45'}}>35</div>
<div className="key" style={{color:'#fff',fontSize:16}}>累计巡查次数</div>
</div>
<div style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div className="value" style={{color:'#5ecd45'}}>5</div>
<div className="key" style={{color:'#fff',fontSize:16}}>本年维护</div>
<div style={{padding:10, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div className="value" style={{color:'#5ecd45'}}>35</div>
<div className="key" style={{color:'#fff',fontSize:16}}>累计维护次数</div>
</div>
<div style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div style={{padding:10, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div className="value" style={{color:'#5ecd45'}}>35</div>
<div className="key" style={{color:'#fff',fontSize:16}}>累计问题次数</div>
</div>
<div style={{padding:10, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div
className="value"
style={{ cursor: 'pointer',color:'#ba292a' }}
// onClick={() => showRecord(h24?.max)}
style={{ cursor: 'pointer',color:'#5ecd45' }}
>
1
15
</div>
<div className="key" style={{color:'#fff',fontSize:16}}>未处理异常</div>
<div className="key" style={{color:'#fff',fontSize:16}}>本月巡查次数</div>
</div>
<div style={{padding:10, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div className="value" style={{color:'#5ecd45'}}>15</div>
<div className="key" style={{color:'#fff',fontSize:16}}>本月维护次数</div>
</div>
<div style={{padding:10, background: "linear-gradient(to bottom, #001529, #003366)"}}>
<div className="value" style={{color:'#5ecd45'}}>15</div>
<div className="key" style={{color:'#fff',fontSize:16}}>本月问题次数</div>
</div>
</div>
</div>

2
src/views/Home/panels/WhSta/index.js
View File

@ -11,7 +11,7 @@ export default function Overall({ style }) {
return (
<PanelBox
style={style}
title="维护统计"
title="巡查维护统计"
color="green"
>
<OverallContent data={data} />

94
src/views/Home/panels/Whjl/index.js
View File

@ -46,10 +46,9 @@ function HDReal({ style }) {
});
}
}
const [type, setType] = useState('xc')
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
setType(type)
}
const randomMinutes = Math.floor(Math.random() * 60) + 1;
const format = 'YYYY-MM-DD HH:mm';
@ -69,13 +68,23 @@ const givenNames = [
const givenName = givenNames[Math.floor(Math.random() * givenNames.length)];
return familyName + givenName;
};
const showData = Array(2).fill(0).map((o, i) => ({
const showData = Array(1).fill(0).map((o, i) => ({
id:i + 1,
time: moment()
.subtract(i * 60 + randomMinutes, 'minutes')
.format(format),
status:0,
name:generateRandomName()
time: '2025-5-26',
name: '渠首闸巡查',
fxwt:1,
wfxwt: 1,
status:'未完成',
}))
const wData = Array(1).fill(0).map((o, i) => ({
id:i + 1,
time: '2025-5-26',
name: '渠首闸维护',
obj:'渠首闸',
fxwt:1,
wfxwt: 1,
status:'未完成',
}))
const toggleAutoRefresh = () => {
@ -87,14 +96,14 @@ const showData = Array(2).fill(0).map((o, i) => ({
return (
<PanelBox
style={style}
title="本月维护记录"
title="统计分析"
color="green"
// tabs={
// <span className="button-group">
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
// </span>
// }
tabs={
<span className="button-group">
<span className={clsx({ active: type=='xc' })} onClick={() => toggleStType('xc')}>巡查</span>
<span className={clsx({ active: type=='wh' })} onClick={() => toggleStType('wh')}>维护</span>
</span>
}
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
@ -102,13 +111,16 @@ const showData = Array(2).fill(0).map((o, i) => ({
</>
}
>
<TableContainer style={{ height: '100%' }}>
{
type == 'xc' ?<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '50%' }} align="left">维护完成日期</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="left">维护人</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>异常项次</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">日期</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">巡查名称</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>发现问题数</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>未发现问题数</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>执行状态</DpTableCell>
{/* <DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell> */}
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
@ -127,6 +139,47 @@ const showData = Array(2).fill(0).map((o, i) => ({
// onClick={() => flyTo(row)}
>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.fxwt}</DpTableCell>
<DpTableCell align="center">{row.wfxwt}</DpTableCell>
<DpTableCell align="center">{row.status}</DpTableCell>
{/* <DpTableCell align="center">{row.time}</DpTableCell> */}
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer> :
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '25%' }} align="center">日期</DpTableCell>
<DpTableCell style={{ width: '25%' }} align="center">维护名称</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>维护对象</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>执行状态</DpTableCell>
{/* <DpTableCell align="center" style={{ width: '20%' }}>执行状态</DpTableCell> */}
{/* <DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell> */}
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{wData.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
>{row.time}</div>
</DpTableCell>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
// onClick={() => flyTo(row)}
>{row.name}</div>
</DpTableCell>
{/* <DpTableCell align="center">{row.fxwt}</DpTableCell>
<DpTableCell align="center">{row.wfxwt}</DpTableCell> */}
<DpTableCell align="center">{row.obj}</DpTableCell>
<DpTableCell align="center">{row.status}</DpTableCell>
{/* <DpTableCell align="center">{row.time}</DpTableCell> */}
{/* {rzRender(row.rz, row.grz)}
@ -136,6 +189,7 @@ const showData = Array(2).fill(0).map((o, i) => ({
</TableBody>
</Table>
</TableContainer>
}
{
setting && <Setting onClose={() => showSetting(false)} />
}

2
src/views/Home/panels/Whwtqd/index.js
View File

@ -88,7 +88,7 @@ const showData = Array(30).fill(0).map((o, i) => ({
return (
<PanelBox
style={style}
title="待处理维护清单"
title="待处理问题清单"
color="green"
// tabs={
// <span className="button-group">

9
src/views/Home/panels/YaRes/index.js
View File

@ -18,6 +18,7 @@ import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import {Empty} from 'antd'
// import showData from './constant'
function rzRender(rz, base) {
return (
@ -31,6 +32,7 @@ function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
const yyRes = useSelector(s => s.runtime.yyObj);
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
@ -128,7 +130,9 @@ function HDReal({ style }) {
</>
}
>
<TableContainer style={{ height: '100%' }}>
{
yyRes.yy ? <>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
@ -212,6 +216,9 @@ function HDReal({ style }) {
</Table>
</TableContainer>
</> :
<Empty description={<span style={{color:"#fff"}}>暂无数据</span>}/>
}
{
setting && <Setting onClose={() => showSetting(false)} />
}

47
src/views/Home/panels/Yyfa/index.js
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import React,{useState} from 'react';
import React,{useState,useEffect} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { hdyjUnclose } from '../../../../models/_/hdyj';
import { OverallPromise } from '../../../../models/_/real';
@ -16,12 +16,15 @@ import ShYj from './ShYj';
import { styled } from '@material-ui/styles';
import { RadioGroup, FormControlLabel, Radio, FormControl, FormLabel } from '@material-ui/core/index';
import { backgroundColor } from 'echarts/lib/theme/dark';
import { Description } from '@material-ui/icons';
import DescriptionItem from '../../components/DescrptionItem';
import { log } from '@craco/craco/lib/logger';
export default function Warn({ style }) {
const [value, setValue] = React.useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const dispatch = useDispatch();
const res = useSelector(s=>s.runtime.yyObj)
const [value, setValue] = React.useState(res.yy ?? '');
const [yyValue, setYyValue] = React.useState(false);
const StyledFormControlLabel = styled(FormControlLabel)({
display: 'flex',
// justifyContent: 'space-around',
@ -36,14 +39,25 @@ const [value, setValue] = React.useState('');
color: '#fff',
padding: '4px'
}
});
});
const fayy = () => {
setYyValue(true)
if (value) {
dispatch.runtime.setYyfa({yy:value})
}
}
useEffect(() => {
setValue(res.yy)
}, [res])
return (
<PanelBox
style={style}
style={{...style,position:'relative'}}
title="预演方案"
color="green"
tabs={
<span style={{marginLeft:'70%', cursor:'pointer',color:'#0066e4',padding:'4px 6px', border:'1px solid #175898'}}>方案预演</span>
<span style={{marginLeft:'70%', cursor:'pointer',color:'#0066e4',padding:'4px 6px', border:'1px solid #175898'}} onClick={fayy}>方案预演</span>
}
>
<div >
@ -57,7 +71,20 @@ const [value, setValue] = React.useState('');
<StyledFormControlLabel value="2025003" control={<Radio />} label="2025003预案" style={{color:"#fff"}}/>
</RadioGroup>
</FormControl>
</div>
{res.yy && <div style={{ color: "#fff", position: 'absolute', top: 100, left: '-450px' }}>
<div style={{ background: '#020c2b',padding:'5px 10px',opacity:1 }}>
<div style={{color:'#c5d02c',fontSize:20}}>最大淹没范围</div>
<div style={{display:'flex',columnGap:10}}>
<span>淹没耕地:1824.8(公顷)</span>
<span>淹没面积:48.9(平方公里)</span>
</div>
<span>淹没人口:3.211(万人)</span>
</div>
<div>
<img src={`${process.env.PUBLIC_URL}/assets/sl.jpg`} alt="" style={{ width: 421}} />
</div>
</div>}
</div>
</PanelBox>
)
}