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

feat(): 重新修改灌区

lsf-dev
李神峰 2025-05-26 16:37:17 +08:00
parent 3516030b2e
commit 228eb618b0
78 changed files with 73727 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -16,6 +16,7 @@
"@rematch/core": "1.4.0",
"@rematch/persist": "1.1.6",
"@turf/turf": "5.1.6",
"antd": "4.17.2",
"clone": "2.1.2",
"clsx": "1.1.1",
"craco-less": "1.17.0",

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

9
src/index.js
View File

@ -10,15 +10,16 @@ import storage from 'localforage';
import { getPersistor } from '@rematch/persist';
import { PersistGate } from 'redux-persist/lib/integration/react';
import 'moment/locale/zh-cn';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import ScrollReset from './components/ScrollReset';
import routes from './routes';
import * as models from './models';
import moment from 'moment';
import './index.less';
import './views/demo.less';
import DataPreload from './components/DataPreload';
moment.locale('zh-cn');
const persistConfig = {
key: 'root',
storage,
@ -38,8 +39,10 @@ function App() {
<PersistGate persistor={persistor}>
<DataPreload>
<HashRouter>
<ConfigProvider locale={zhCN}>
<ScrollReset />
{renderRoutes(routes)}
</ConfigProvider>
</HashRouter>
</DataPreload>
</PersistGate>

1
src/index.less
View File

@ -1,4 +1,5 @@
// reset
@import '~antd/dist/antd.less';
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img{
border: medium none;
margin: 0;

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

@ -96,10 +96,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
];
} else if (view === 501) {
left = [
{ key: '雨量监测',style: { height: '8rem', flexGrow: 1 } },
{ key: '水情监测', style: { height: '8rem', flexGrow: 1 } },
{ key: '工情监控', style: { height: '8rem', flexGrow: 1 } },
{ key: '流量监测',style: { height: '8rem', flexGrow: 1 } },
{ key: '雨量监测',style: { height: '33%', flexGrow: 1 } },
{ key: '水情监测', style: { height: '33%', flexGrow: 1 } },
{ key: '工情监控', style: { height: '34%', flexGrow: 1 } },
];
leftFullHeight = true;
} else if (view === 504) {
@ -129,13 +128,6 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '渠道分配比例', style: { height: '35%', flexGrow: 1 } },
]
leftFullHeight = true;
}else if (view === 503) {
left = [
{ key: '水资源调度', style: { height: '100%', flexGrow: 1 } },
// { key: '月用水趋势', style: { height: '35%', flexGrow: 1 } },
// { key: '渠道分配比例', style: { height: '35%', flexGrow: 1 } },
]
leftFullHeight = true;
}
if (rightEx) {
@ -233,15 +225,17 @@ export default function calcLayout(view, rightStack, hidePanels) {
];
} else if (view === 501) {
right = [
{ key: '水质监测',style: { height: '20rem', flexGrow: 1 } },
{ key: '土壤墒情监测', style: { height: '20rem', flexGrow: 1 } },
{ key: '视频监控', style: { height: '20rem', flexGrow: 1 } },
{ key: '水质监测',style: { height: '33%', flexGrow: 1 } },
{ key: '土壤墒情监测', style: { height: '33%', flexGrow: 1 } },
{ key: '流量监测', style: { height: '34%', flexGrow: 1 } },
];
rightFullHeight = true
} else if (view === 504) {
right = [
{ key: '预演方案', style: { height: '100%', flexGrow: 1 } },
{ key: '预演方案', style: { height: '30%', flexGrow: 1 } },
{ key: '预演结果', style: { height: '70%', flexGrow: 1 } },
];
rightFullHeight = true;
// rightFullHeight = true;
} else if (view === 507) {
right = [
{ key: '维护统计', style: { height: '20%', flexGrow: 1 } },
@ -256,6 +250,13 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '灌区对比分析', style: { height: '40%', flexGrow: 1 } },
]
rightFullHeight = true;
}else if (view === 503) {
right = [
{ key: '水资源调度', style: { height: '100%', flexGrow: 1 } },
// { key: '月用水趋势', style: { height: '35%', flexGrow: 1 } },
// { key: '渠道分配比例', style: { height: '35%', flexGrow: 1 } },
]
rightFullHeight = true;
}
}
}

117
src/views/Home/InfoDlg/GqbzDlg/descstyle.js Normal file
View File

@ -0,0 +1,117 @@
import { makeStyles } from '@material-ui/core'
import bg from '../../../../assets/bg.png'
const useDescStyles = makeStyles({
root: { flex: 'auto' },
tabBox: { width: '2rem' },
tabs1: {
backgroundColor: '#122e47',
fontWeight: 'bold',
overflow: 'hidden',
marginBottom: '0.6rem',
color: '#E2EDFF'
},
tabIndicator: {
backgroundColor: 'transparent'
},
active: {
border: '1px solid #02a6b5'
},
title: {
width: '16%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
value: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
wordBreak: 'break-all'
},
title1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
height: '2.5rem'
},
cont: {
display: 'flex'
},
tabList: {
width: '100%'
},
tableCont: {
height: '100%',
width: '99.6%',
border: '1px solid rgb(33, 53, 77)'
},
tablebg: {
backgroundColor: 'transparent',
border: '1px solid rgb(33, 53, 77)'
},
emit: {
border: '1px solid rgb(33, 53, 77)'
},
title2: {
width: '83.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
tit: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
backgroundColor: 'rgba(33,53,77,0.2)'
// color: '#bbb'
},
value1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
tabIndicator: {
backgroundColor: 'transparent'
},
selectedTab: {
color: '#3CCBFF',
fontWeight: '500',
backgroundImage: `url(${bg})`,
backgroundSize: 'cover', // 设置背景图像的尺寸
backgroundPosition: 'center center' // 设置背景图像的位置
},
})
export default useDescStyles

49
src/views/Home/InfoDlg/GqbzDlg/index.js Normal file
View File

@ -0,0 +1,49 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpTab from '../../../../layouts/mui/DpTab';
import RzSearch from '../../components/RzSearch';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import DrpSearch from '../../components/DrpSearch';
import DrpStAround from '../../components/DrpStAround';
import GqJcsj from './jcsj';
import Gqbzjbxx from './jbxx';
import Gqspxx from './spxx';
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
<DpAppBar position="sticky">
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
<DpTab label="基本信息" />
<DpTab label="监测数据" />
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<div style={{ padding: '2rem', minHeight: '50rem',maxHeight: '60rem' }}>
{value === 0 && <Gqbzjbxx record={record} />}
{value === 1 && <GqJcsj record={record} />}
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

93
src/views/Home/InfoDlg/GqbzDlg/jbxx.js Normal file
View File

@ -0,0 +1,93 @@
import React, { useEffect, useState } from 'react'
import { Grid } from '@material-ui/core'
import useDescStyle from './descstyle'
function Jbxx ({ record }) {
const classes = useDescStyle()
return (
<>
<div style={{ fontSize: '0.9rem', marginLeft: '1rem' }}>
<Grid container className={classes.cont}>
<Grid item className={classes.tit}>
工程编号
</Grid>
<Grid item className={classes.value}>
{record?.pustCode}
</Grid>
<Grid item className={classes.tit}>
泵站规模
</Grid>
<Grid item className={classes.value}>
{record?.insFlow??'--'}
</Grid>
<Grid item className={classes.tit}>
行政区划
</Grid>
<Grid item className={classes.value} style={{}}>
{record?.adCode_dictText}
</Grid>
<Grid item className={classes.tit}>
管理单位
</Grid>
<Grid item className={classes.value}>
{record?.engManCode_dictText}
</Grid>
<Grid item className={classes.tit}>
所在渠道
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
桩号
</Grid>
<Grid item className={classes.value}>
{record?.bnch}
</Grid>
<Grid item className={classes.tit}>
装机流量
</Grid>
<Grid item className={classes.value}>
{record?.insFlow??'--'}m³/s
</Grid>
<Grid item className={classes.tit}>
装机功率
</Grid>
<Grid item className={classes.value}>
{record?.insFlow??'--'}KW
</Grid>
<Grid item className={classes.tit}>
设计扬程
</Grid>
<Grid item className={classes.value}>
{record?.desHead}m
</Grid>
<Grid item className={classes.tit}>
设计流量
</Grid>
<Grid item className={classes.value}>
{record?.dsfl}m³/s
</Grid>
<Grid item className={classes.tit}>
进口高程
</Grid>
<Grid item className={classes.value}>
{record?.actIrrA??'--'}m
</Grid>
<Grid item className={classes.tit}>
设计灌溉面积
</Grid>
<Grid item className={classes.value}>
{record?.actIrrA??'--'}亩
</Grid>
</Grid>
</div>
<div className='boxfoot'></div>
</>
)
}
export default React.memo(Jbxx)

152
src/views/Home/InfoDlg/GqbzDlg/jcsj.js Normal file
View File

@ -0,0 +1,152 @@
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
import { DatePicker, Empty } from 'antd';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import React, { useEffect, useState, useMemo } from 'react';
// import './index.less'
// import { hdData, detailHdData } from './constance';
const { RangePicker } = DatePicker;
const useStyles = makeStyles({
tableContainer: {
background: '#182d42', // 设置表格容器的背景颜色
},
item: {
'& .MuiGrid-item': {
'& [class*="makeStyles-title"]': {
color: '#fff',
backgroundColor: '#104175',
},
},
},
});
const DpTableCell = withStyles({
head: {
backgroundColor: '#104175',
color: '#fff',
fontSize: '1rem',
padding: '0.5rem 0.3rem !important',
},
body: {
color: '#fff',
fontSize: '0.9rem',
padding: '0.7rem 0.3rem !important',
borderBottom: 'none',
position: "relative"
},
})(TableCell);
function DrpStAround({ record }) {
const classes = useStyles();
//今天日历数
const days = moment().diff(moment().startOf('year'), 'days') + 1
const [data, setData] = useState([]);
const [initialDateRange, setInitialDateRange] = useState({})
const [detail, setDetail] = useState({});
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,
})
};
const doSearch = () => {
getData(params)
}
const getData = async (params) => {
setData([])
// setDetail(detailHdData)
// setData(await monitor(params));
// setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
}
useEffect(() => {
let options = "";
options = {
stcd: record.stcd,
source: record.source,
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)
getData(options)
}, [record])
return (
<div className='infoDlg_jcsj' style={{ width: '100%' }}>
<div className='toolbar'>
<div className='tm' style={{ position: "relative", zIndex: 999999 }}>
<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>
<button onClick={doSearch} className='search'>查询</button>
</div>
<div className='content' style={{ height: "49vh" }}>
<div className='list' style={{ width: '100%' }}>
<TableContainer
locale={{ emptyText: '暂无数据' }}
style={{ height: '100%' }}
className={classes.tableContainer}
>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell align="center" style={{ width: '17%' }}>时间</DpTableCell>
<DpTableCell align="center" style={{ width: '16%' }}>站上水位(m)</DpTableCell>
<DpTableCell align="center" style={{ width: '16%' }}>站下水位(m)</DpTableCell>
<DpTableCell align="center" style={{ width: '17%' }}>抽水流量(m³)</DpTableCell>
<DpTableCell align="center" style={{ width: '17%' }}>开机台数(台)</DpTableCell>
<DpTableCell align="center" style={{ width: '17%' }}>开机功率(KW)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{
data.length > 0 ? data.map((row) => (
<DpTableRow key={row.stnm}>
<DpTableCell align="center"><div className="ellipsis">{moment(row.tm).format('MM-DD HH:mm')}</div></DpTableCell>
<DpTableCell align="center">{row.drp ?? "-"}</DpTableCell>
<DpTableCell align="center">{row.z ? row.z.toFixed(2) : "-"}</DpTableCell>
{/* <DpTableCell align="center">{row.q?? "-"}</DpTableCell> */}
<DpTableCell align="center">{row.tq ?? "-"}</DpTableCell>
</DpTableRow>
)) :
<Empty style={{ position: 'absolute', top: '300px', left: '550px' }} description={false}/>
}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
</div>
)
}
export default DrpStAround

88
src/views/Home/InfoDlg/GqbzDlg/spxx.js Normal file
View File

@ -0,0 +1,88 @@
import React,{useState} from 'react'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'
import Box from '@material-ui/core/Box'
import clsx from 'clsx'
import useDescStyle from './descstyle'
export default function Spxx() {
const classes = useDescStyle()
const [value, setValue] = useState(0)
function a11yProps (index) {
return {
id: `vertical-tab-${index}`,
'aria-controls': `vertical-tabpanel-${index}`
}
}
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<div
style={{
padding: '2rem',
display: 'flex',
height:'30rem',
flexGrow: 1
}}
>
<Box
sx={{
display: 'flex',
flexGrow: 1
}}
>
<Tabs
orientation='vertical'
variant='scrollable'
value={value}
onChange={handleChange}
aria-label='Vertical tabs example'
sx={{ borderRight: 1, borderColor: 'divider' }}
TabIndicatorProps={{
className: classes.tabIndicator
}}
>
<Tab
className={clsx(
classes.tabs1,
value == 0 && classes.selectedTab
)}
label='二干渠进水闸前视频1'
disableRipple
{...a11yProps(0)}
/>
<Tab
className={clsx(
classes.tabs1,
value == 1 && classes.selectedTab
)}
label='二干渠进水闸后视频'
disableRipple
{...a11yProps(1)}
/>
<Tab
className={clsx(
classes.tabs1,
value == 2 && classes.selectedTab
)}
label='二干渠进水闸前视频2'
disableRipple
{...a11yProps(2)}
/>
<Tab
className={clsx(
classes.tabs1,
value == 3 && classes.selectedTab
)}
label='二干渠进水闸室内'
disableRipple
{...a11yProps(3)}
/>
</Tabs>
</Box>
</div>
)
}

104
src/views/Home/InfoDlg/GqzzDlg/descstyle.js Normal file
View File

@ -0,0 +1,104 @@
import { makeStyles } from '@material-ui/core'
const useDescStyles = makeStyles({
root: { flex: 'auto' },
tabBox: { width: '2rem' },
tabs1: {
backgroundColor: '#122e47',
fontWeight: 'bold',
overflow: 'hidden',
marginBottom: '0.6rem',
color: '#E2EDFF'
},
tabIndicator: {
backgroundColor: 'transparent'
},
active: {
border: '1px solid #02a6b5'
},
title: {
width: '16%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
value: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
wordBreak: 'break-all'
},
title1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
height: '2.5rem'
},
cont: {
display: 'flex'
},
tabList: {
width: '100%'
},
tableCont: {
height: '100%',
width: '99.6%',
border: '1px solid rgb(33, 53, 77)'
},
tablebg: {
backgroundColor: 'transparent',
border: '1px solid rgb(33, 53, 77)'
},
emit: {
border: '1px solid rgb(33, 53, 77)'
},
title2: {
width: '83.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
tit: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
backgroundColor: 'rgba(33,53,77,0.2)'
// color: '#bbb'
},
value1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
}
})
export default useDescStyles

54
src/views/Home/InfoDlg/GqzzDlg/index.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpTab from '../../../../layouts/mui/DpTab';
import RzSearch from '../../components/RzSearch';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import DrpSearch from '../../components/DrpSearch';
import DrpStAround from '../../components/DrpStAround';
import GqJcsj from '../../components/Hdjcsj'
import GqJbxx from './jbxx';
import Gqspxx from '../GqbzDlg/spxx'
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
<DpAppBar position="sticky">
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
<DpTab label="监测数据" />
<DpTab label="基本信息" />
<DpTab label="视频信息" />
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
{value === 0 && <GqJcsj record={record} />}
{value === 1 && <GqJbxx record={record} />}
{value === 2 && <Gqspxx record={record} />}
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

98
src/views/Home/InfoDlg/GqzzDlg/jbxx.js Normal file
View File

@ -0,0 +1,98 @@
import React, { useEffect, useState } from 'react'
import { Grid } from '@material-ui/core'
import useDescStyle from './descstyle'
function Jbxx ({ record }) {
const classes = useDescStyle()
return (
<>
<div style={{ fontSize: '0.9rem', marginLeft: '1rem' }}>
<Grid container className={classes.cont}>
<Grid item className={classes.tit}>
灌区名称
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
水闸类型
</Grid>
<Grid item className={classes.value}>
{record?.wagaType_dictText??'--'}
</Grid>
<Grid item className={classes.tit}>
行政区划
</Grid>
<Grid item className={classes.value} style={{}}>
{record?.adCode_dictText}
</Grid>
<Grid item className={classes.tit}>
管理单位
</Grid>
<Grid item className={classes.value}>
{record?.engManCode_dictText}
</Grid>
<Grid item className={classes.tit}>
渠道名称
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
桩号
</Grid>
<Grid item className={classes.value}>
{record?.bnch}
</Grid>
<Grid item className={classes.tit}>
动力类型
</Grid>
<Grid item className={classes.value}>
{record?.pwrTp_dictText??'--'}
</Grid>
<Grid item className={classes.tit}>
闸门孔数
</Grid>
<Grid item className={classes.value}>
{record?.whthInWat??'--'}
</Grid>
<Grid item className={classes.tit}>
闸门尺寸
</Grid>
<Grid item className={classes.value}>
3*2.8m*m
</Grid>
<Grid item className={classes.tit}>
设计流量
</Grid>
<Grid item className={classes.value}>
{record?.dsfl}m³/s
</Grid>
<Grid item className={classes.tit}>
进口高程
</Grid>
<Grid item className={classes.value}>
{record?.actIrrA??'--'}m
</Grid>
<Grid item className={classes.tit}>
实达流量
</Grid>
<Grid item className={classes.value}>
{record?.stfl??'--'}
</Grid>
<Grid item className={classes.tit}>
运行状态
</Grid>
<Grid item className={classes.value}>
{record?.runStat_dictText??'--'}
</Grid>
</Grid>
</div>
<div className='boxfoot'></div>
</>
)
}
export default React.memo(Jbxx)

104
src/views/Home/InfoDlg/LlqdDlg/descstyle.js Normal file
View File

@ -0,0 +1,104 @@
import { makeStyles } from '@material-ui/core'
const useDescStyles = makeStyles({
root: { flex: 'auto' },
tabBox: { width: '2rem' },
tabs1: {
backgroundColor: '#122e47',
fontWeight: 'bold',
overflow: 'hidden',
marginBottom: '0.6rem',
color: '#E2EDFF'
},
tabIndicator: {
backgroundColor: 'transparent'
},
active: {
border: '1px solid #02a6b5'
},
title: {
width: '16%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
value: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
wordBreak: 'break-all'
},
title1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
height: '2.5rem'
},
cont: {
display: 'flex'
},
tabList: {
width: '100%'
},
tableCont: {
height: '100%',
width: '99.6%',
border: '1px solid rgb(33, 53, 77)'
},
tablebg: {
backgroundColor: 'transparent',
border: '1px solid rgb(33, 53, 77)'
},
emit: {
border: '1px solid rgb(33, 53, 77)'
},
title2: {
width: '83.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
tit: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
backgroundColor: 'rgba(33,53,77,0.2)'
// color: '#bbb'
},
value1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
}
})
export default useDescStyles

49
src/views/Home/InfoDlg/LlqdDlg/index.js Normal file
View File

@ -0,0 +1,49 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpTab from '../../../../layouts/mui/DpTab';
import RzSearch from '../../components/RzSearch';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import DrpSearch from '../../components/DrpSearch';
import DrpStAround from '../../components/DrpStAround';
import LlqdJcsj from '../../components/Llqdjcsj'
import GqJbxx from './jbxx';
import Gqspxx from '../GqbzDlg/spxx'
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpAppBar position="sticky" style={{ justifyContent: "space-between",alignItems:'center' }}>
<span style={{marginLeft:10,fontSize:20}}>
{record.stnm}
</span>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
<LlqdJcsj record={record} />
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

98
src/views/Home/InfoDlg/LlqdDlg/jbxx.js Normal file
View File

@ -0,0 +1,98 @@
import React, { useEffect, useState } from 'react'
import { Grid } from '@material-ui/core'
import useDescStyle from './descstyle'
function Jbxx ({ record }) {
const classes = useDescStyle()
return (
<>
<div style={{ fontSize: '0.9rem', marginLeft: '1rem' }}>
<Grid container className={classes.cont}>
<Grid item className={classes.tit}>
灌区名称
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
水闸类型
</Grid>
<Grid item className={classes.value}>
{record?.wagaType_dictText??'--'}
</Grid>
<Grid item className={classes.tit}>
行政区划
</Grid>
<Grid item className={classes.value} style={{}}>
{record?.adCode_dictText}
</Grid>
<Grid item className={classes.tit}>
管理单位
</Grid>
<Grid item className={classes.value}>
{record?.engManCode_dictText}
</Grid>
<Grid item className={classes.tit}>
渠道名称
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
桩号
</Grid>
<Grid item className={classes.value}>
{record?.bnch}
</Grid>
<Grid item className={classes.tit}>
动力类型
</Grid>
<Grid item className={classes.value}>
{record?.pwrTp_dictText??'--'}
</Grid>
<Grid item className={classes.tit}>
闸门孔数
</Grid>
<Grid item className={classes.value}>
{record?.whthInWat??'--'}
</Grid>
<Grid item className={classes.tit}>
闸门尺寸
</Grid>
<Grid item className={classes.value}>
3*2.8m*m
</Grid>
<Grid item className={classes.tit}>
设计流量
</Grid>
<Grid item className={classes.value}>
{record?.dsfl}m³/s
</Grid>
<Grid item className={classes.tit}>
进口高程
</Grid>
<Grid item className={classes.value}>
{record?.actIrrA??'--'}m
</Grid>
<Grid item className={classes.tit}>
实达流量
</Grid>
<Grid item className={classes.value}>
{record?.stfl??'--'}
</Grid>
<Grid item className={classes.tit}>
运行状态
</Grid>
<Grid item className={classes.value}>
{record?.runStat_dictText??'--'}
</Grid>
</Grid>
</div>
<div className='boxfoot'></div>
</>
)
}
export default React.memo(Jbxx)

104
src/views/Home/InfoDlg/LlsbDlg/descstyle.js Normal file
View File

@ -0,0 +1,104 @@
import { makeStyles } from '@material-ui/core'
const useDescStyles = makeStyles({
root: { flex: 'auto' },
tabBox: { width: '2rem' },
tabs1: {
backgroundColor: '#122e47',
fontWeight: 'bold',
overflow: 'hidden',
marginBottom: '0.6rem',
color: '#E2EDFF'
},
tabIndicator: {
backgroundColor: 'transparent'
},
active: {
border: '1px solid #02a6b5'
},
title: {
width: '16%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
value: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
wordBreak: 'break-all'
},
title1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
height: '2.5rem'
},
cont: {
display: 'flex'
},
tabList: {
width: '100%'
},
tableCont: {
height: '100%',
width: '99.6%',
border: '1px solid rgb(33, 53, 77)'
},
tablebg: {
backgroundColor: 'transparent',
border: '1px solid rgb(33, 53, 77)'
},
emit: {
border: '1px solid rgb(33, 53, 77)'
},
title2: {
width: '83.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
tit: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
backgroundColor: 'rgba(33,53,77,0.2)'
// color: '#bbb'
},
value1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
}
})
export default useDescStyles

49
src/views/Home/InfoDlg/LlsbDlg/index.js Normal file
View File

@ -0,0 +1,49 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpTab from '../../../../layouts/mui/DpTab';
import RzSearch from '../../components/RzSearch';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import DrpSearch from '../../components/DrpSearch';
import DrpStAround from '../../components/DrpStAround';
import LlsbJcsj from '../../components/Llsbjcsj'
import GqJbxx from './jbxx';
import Gqspxx from '../GqbzDlg/spxx'
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpAppBar position="sticky" style={{ justifyContent: "space-between",alignItems:'center' }}>
<span style={{marginLeft:10,fontSize:20}}>
{record.stnm}
</span>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
<LlsbJcsj record={record} />
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

98
src/views/Home/InfoDlg/LlsbDlg/jbxx.js Normal file
View File

@ -0,0 +1,98 @@
import React, { useEffect, useState } from 'react'
import { Grid } from '@material-ui/core'
import useDescStyle from './descstyle'
function Jbxx ({ record }) {
const classes = useDescStyle()
return (
<>
<div style={{ fontSize: '0.9rem', marginLeft: '1rem' }}>
<Grid container className={classes.cont}>
<Grid item className={classes.tit}>
灌区名称
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
水闸类型
</Grid>
<Grid item className={classes.value}>
{record?.wagaType_dictText??'--'}
</Grid>
<Grid item className={classes.tit}>
行政区划
</Grid>
<Grid item className={classes.value} style={{}}>
{record?.adCode_dictText}
</Grid>
<Grid item className={classes.tit}>
管理单位
</Grid>
<Grid item className={classes.value}>
{record?.engManCode_dictText}
</Grid>
<Grid item className={classes.tit}>
渠道名称
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
桩号
</Grid>
<Grid item className={classes.value}>
{record?.bnch}
</Grid>
<Grid item className={classes.tit}>
动力类型
</Grid>
<Grid item className={classes.value}>
{record?.pwrTp_dictText??'--'}
</Grid>
<Grid item className={classes.tit}>
闸门孔数
</Grid>
<Grid item className={classes.value}>
{record?.whthInWat??'--'}
</Grid>
<Grid item className={classes.tit}>
闸门尺寸
</Grid>
<Grid item className={classes.value}>
3*2.8m*m
</Grid>
<Grid item className={classes.tit}>
设计流量
</Grid>
<Grid item className={classes.value}>
{record?.dsfl}m³/s
</Grid>
<Grid item className={classes.tit}>
进口高程
</Grid>
<Grid item className={classes.value}>
{record?.actIrrA??'--'}m
</Grid>
<Grid item className={classes.tit}>
实达流量
</Grid>
<Grid item className={classes.value}>
{record?.stfl??'--'}
</Grid>
<Grid item className={classes.tit}>
运行状态
</Grid>
<Grid item className={classes.value}>
{record?.runStat_dictText??'--'}
</Grid>
</Grid>
</div>
<div className='boxfoot'></div>
</>
)
}
export default React.memo(Jbxx)

104
src/views/Home/InfoDlg/SqDlg/descstyle.js Normal file
View File

@ -0,0 +1,104 @@
import { makeStyles } from '@material-ui/core'
const useDescStyles = makeStyles({
root: { flex: 'auto' },
tabBox: { width: '2rem' },
tabs1: {
backgroundColor: '#122e47',
fontWeight: 'bold',
overflow: 'hidden',
marginBottom: '0.6rem',
color: '#E2EDFF'
},
tabIndicator: {
backgroundColor: 'transparent'
},
active: {
border: '1px solid #02a6b5'
},
title: {
width: '16%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
value: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
wordBreak: 'break-all'
},
title1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
height: '2.5rem'
},
cont: {
display: 'flex'
},
tabList: {
width: '100%'
},
tableCont: {
height: '100%',
width: '99.6%',
border: '1px solid rgb(33, 53, 77)'
},
tablebg: {
backgroundColor: 'transparent',
border: '1px solid rgb(33, 53, 77)'
},
emit: {
border: '1px solid rgb(33, 53, 77)'
},
title2: {
width: '83.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
},
tit: {
width: '50%',
display: 'flex',
alignItems: 'center',
padding: '1rem 0.5rem',
textAlign: 'left',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
borderTop: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
backgroundColor: 'rgba(33,53,77,0.2)'
// color: '#bbb'
},
value1: {
width: '99.6%',
display: 'flex',
alignItems: 'center',
padding: '0.2rem 0.5rem',
textAlign: 'left',
border: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word'
}
})
export default useDescStyles

48
src/views/Home/InfoDlg/SqDlg/index.js Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpTab from '../../../../layouts/mui/DpTab';
import RzSearch from '../../components/RzSearch';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import DrpSearch from '../../components/DrpSearch';
import DrpStAround from '../../components/DrpStAround';
import SqJcsj from '../../components/Sqjcsj'
import GqJbxx from './jbxx';
import Gqspxx from '../GqbzDlg/spxx'
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpAppBar position="sticky" style={{ justifyContent: "space-between",alignItems:'center' }}>
<span style={{marginLeft:10,fontSize:20}}>
{record.stnm}
</span>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
<SqJcsj record={record} />
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

98
src/views/Home/InfoDlg/SqDlg/jbxx.js Normal file
View File

@ -0,0 +1,98 @@
import React, { useEffect, useState } from 'react'
import { Grid } from '@material-ui/core'
import useDescStyle from './descstyle'
function Jbxx ({ record }) {
const classes = useDescStyle()
return (
<>
<div style={{ fontSize: '0.9rem', marginLeft: '1rem' }}>
<Grid container className={classes.cont}>
<Grid item className={classes.tit}>
灌区名称
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
水闸类型
</Grid>
<Grid item className={classes.value}>
{record?.wagaType_dictText??'--'}
</Grid>
<Grid item className={classes.tit}>
行政区划
</Grid>
<Grid item className={classes.value} style={{}}>
{record?.adCode_dictText}
</Grid>
<Grid item className={classes.tit}>
管理单位
</Grid>
<Grid item className={classes.value}>
{record?.engManCode_dictText}
</Grid>
<Grid item className={classes.tit}>
渠道名称
</Grid>
<Grid item className={classes.value}>
{record?.chanCode_dictText}
</Grid>
<Grid item className={classes.tit}>
桩号
</Grid>
<Grid item className={classes.value}>
{record?.bnch}
</Grid>
<Grid item className={classes.tit}>
动力类型
</Grid>
<Grid item className={classes.value}>
{record?.pwrTp_dictText??'--'}
</Grid>
<Grid item className={classes.tit}>
闸门孔数
</Grid>
<Grid item className={classes.value}>
{record?.whthInWat??'--'}
</Grid>
<Grid item className={classes.tit}>
闸门尺寸
</Grid>
<Grid item className={classes.value}>
3*2.8m*m
</Grid>
<Grid item className={classes.tit}>
设计流量
</Grid>
<Grid item className={classes.value}>
{record?.dsfl}m³/s
</Grid>
<Grid item className={classes.tit}>
进口高程
</Grid>
<Grid item className={classes.value}>
{record?.actIrrA??'--'}m
</Grid>
<Grid item className={classes.tit}>
实达流量
</Grid>
<Grid item className={classes.value}>
{record?.stfl??'--'}
</Grid>
<Grid item className={classes.tit}>
运行状态
</Grid>
<Grid item className={classes.value}>
{record?.runStat_dictText??'--'}
</Grid>
</Grid>
</div>
<div className='boxfoot'></div>
</>
)
}
export default React.memo(Jbxx)

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

@ -21,6 +21,11 @@ import WarnRespInfoDlg from './StartWarnResp/WarnRespInfoDlg';
import StWarnRecord from './StWarnRecord';
import WarnRespPlanViewDlg from './WarnRespPlanViewDlg';
import ThreeDlg from './Three';
import GqzzDlg from './GqzzDlg';
import GqbzDlg from './GqbzDlg';
import SqDlg from './SqDlg';
import LlqdDlg from './LlqdDlg';
import LlsbDlg from './LlsbDlg';
function InfoDlg() {
const infoDlg = useSelector(getInfoDlg);
@ -73,8 +78,19 @@ function InfoDlg() {
return <PumpDlg record={properties} onClose={handleClose} />
} else if (layerId === 'Three') {
return <ThreeDlg record={properties} onClose={handleClose} />
}else if (layerId === 'GqzzLayer') {
return <GqzzDlg record={properties} onClose={handleClose} />
}else if (layerId === 'GqbzLayer') {
return <GqbzDlg record={properties} onClose={handleClose} />
}else if (layerId === 'sqLayer') {
return <SqDlg record={properties} onClose={handleClose} />
}else if (layerId === 'llqdLayer') {
return <LlqdDlg record={properties} onClose={handleClose} />
}else if (layerId === 'llsbLayer') {
return <LlsbDlg record={properties} onClose={handleClose} />
}
return null;
}

223
src/views/Home/InfoPops/GqBzPop/HDChart.js Normal file
View File

@ -0,0 +1,223 @@
import React, { useEffect, useMemo, useState } from 'react'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { makeStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { rzSearch } from '../../../../models/_/search';
const useStyles = makeStyles({
grid: {
color: '#fff',
padding: '1rem',
},
realdrpgrid: {
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
margin: '0.5rem 0'
}
})
function HDChart({ record }) {
const classes = useStyles();
const [data, setData] = useState([]);
const tm = [moment().add(-24, 'hour'), moment()];
const resultTm = normalizeSearchTmRange(tm, 'h');
useEffect(() => {
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
setData(data || []);
});
}, [])
const option = useMemo(() => {
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
let sorted = data.map(o => o.z);
const markLine = [];
const { sfz, wrz, grz } = record;
if (sfz) {
sorted.push(sfz);
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
}
if (wrz) {
sorted.push(wrz);
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
}
if (grz) {
sorted.push(grz);
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
}
sorted = sorted.sort();
let minVal = sorted[0] || 0;
let maxVal = sorted[sorted.length - 1] || 0;
let dz = 0.5;
maxVal = Math.ceil(maxVal / dz) * dz;
minVal = Math.floor(minVal / dz) * dz;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
grid: {
x: markLine.length > 0 ? 64 : 24,
y: 24,
x2: 38,
y2: 42,
borderWidth: 0
},
calculable: true,
xAxis: [
{
type: 'time',
splitLine: {
show: false
},
axisLabel: {
color: '#bbb',
fontSize: 9,
textShadowBlur: 4,
textShadowColor: '#6ab',
// formatter: val => val.substr('2020-10-14 '.length, 2)
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
}
}
],
yAxis: [
{
type: 'value',
position: 'right',
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dashed'
}
},
axisLabel: {
color: '#bbb',
fontSize: 10,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minVal,
max: maxVal
}
],
series: [
{
name: '水位',
type: 'line',
showSymbol: false,
label: {
show: false,
},
data: serialData,
lineStyle: {
normal: {
width: 1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(3, 194, 236, 0.3)'
}, {
offset: 0.8,
color: 'rgba(3, 194, 236, 0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#03C2EC'
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
]
},
markLine: {
silent: true,
symbol: 'none',
label: {
position: 'start',
formatter: (p) => p?.name + ' ' + p?.value,
},
data: markLine
}
}
]
};
}, [data]);
const rtm = record.rzTm || record.tm;
return (
<>
<ReactEcharts
option={option}
style={{ height: '15rem', width: '30rem' }}
/>
<div className={classes.grid}>
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
<div className={classes.realdrpgrid}>
<div className="item">
<Typography variant="caption">水位</Typography>
<Typography variant="h5">{renderHDRz(record)}</Typography>
</div>
<div className="item">
<Typography variant="caption">设防水位</Typography>
<Typography variant="h5">{record.sfz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">警戒水位</Typography>
<Typography variant="h5">{record.wrz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">保证水位</Typography>
<Typography variant="h5">{record.grz || '--'}</Typography>
</div>
</div>
</div>
</>
)
}
export default React.memo(HDChart);

45
src/views/Home/InfoPops/GqBzPop/index.js Normal file
View File

@ -0,0 +1,45 @@
import React from 'react'
import { makeStyles } from '@material-ui/core';
import HDChart from './HDChart';
import { Grid } from '@material-ui/core';
import useDescStyle from '../_/descstyle';
function RealHDTip({ record, dispatch }) {
const classes = useDescStyle();
const viewInfo = () => {
dispatch?.runtime.setInfoDlg({ layerId: 'GqbzLayer', properties: record })
}
return (
<>
<div className="boxhead"></div>
<div className="featuretip-title">
<div className="name">{record.pustName}</div>
<div className="extra cursor-pointer" onClick={viewInfo}>详细</div>
</div>
<div style={{ width: '25rem' }} className='f_14'>
<Grid container>
<Grid item className={classes.title}>站点编号:</Grid>
<Grid item className={classes.value}>{record.pustCode}</Grid>
<Grid item className={classes.title}>设计流量:</Grid>
<Grid item className={classes.value}>{record.updserRsn?? '--'}m³/s</Grid>
<Grid item className={classes.title}>设计扬程:</Grid>
<Grid item className={classes.value}>{record.updserRsn?? '--'}m</Grid>
<Grid item className={classes.title}>机组台数:</Grid>
<Grid item className={classes.value}>{record.pumpSetNum}台</Grid>
<Grid item className={classes.title}>设计装机总容量:</Grid>
<Grid item className={classes.value}>{record.totInsCap}kw</Grid>
<Grid item className={classes.title}>管理单位:</Grid>
<Grid item className={classes.value}>{record.engManCode_dictText}</Grid>
</Grid>
</div>
<div className="boxfoot"></div>
</>
)
}
export default React.memo(RealHDTip);

223
src/views/Home/InfoPops/GqZzPop/HDChart.js Normal file
View File

@ -0,0 +1,223 @@
import React, { useEffect, useMemo, useState } from 'react'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { makeStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { rzSearch } from '../../../../models/_/search';
const useStyles = makeStyles({
grid: {
color: '#fff',
padding: '1rem',
},
realdrpgrid: {
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
margin: '0.5rem 0'
}
})
function HDChart({ record }) {
const classes = useStyles();
const [data, setData] = useState([]);
const tm = [moment().add(-24, 'hour'), moment()];
const resultTm = normalizeSearchTmRange(tm, 'h');
useEffect(() => {
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
setData(data || []);
});
}, [])
const option = useMemo(() => {
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
let sorted = data.map(o => o.z);
const markLine = [];
const { sfz, wrz, grz } = record;
if (sfz) {
sorted.push(sfz);
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
}
if (wrz) {
sorted.push(wrz);
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
}
if (grz) {
sorted.push(grz);
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
}
sorted = sorted.sort();
let minVal = sorted[0] || 0;
let maxVal = sorted[sorted.length - 1] || 0;
let dz = 0.5;
maxVal = Math.ceil(maxVal / dz) * dz;
minVal = Math.floor(minVal / dz) * dz;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
grid: {
x: markLine.length > 0 ? 64 : 24,
y: 24,
x2: 38,
y2: 42,
borderWidth: 0
},
calculable: true,
xAxis: [
{
type: 'time',
splitLine: {
show: false
},
axisLabel: {
color: '#bbb',
fontSize: 9,
textShadowBlur: 4,
textShadowColor: '#6ab',
// formatter: val => val.substr('2020-10-14 '.length, 2)
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
}
}
],
yAxis: [
{
type: 'value',
position: 'right',
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dashed'
}
},
axisLabel: {
color: '#bbb',
fontSize: 10,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minVal,
max: maxVal
}
],
series: [
{
name: '水位',
type: 'line',
showSymbol: false,
label: {
show: false,
},
data: serialData,
lineStyle: {
normal: {
width: 1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(3, 194, 236, 0.3)'
}, {
offset: 0.8,
color: 'rgba(3, 194, 236, 0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#03C2EC'
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
]
},
markLine: {
silent: true,
symbol: 'none',
label: {
position: 'start',
formatter: (p) => p?.name + ' ' + p?.value,
},
data: markLine
}
}
]
};
}, [data]);
const rtm = record.rzTm || record.tm;
return (
<>
<ReactEcharts
option={option}
style={{ height: '15rem', width: '30rem' }}
/>
<div className={classes.grid}>
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
<div className={classes.realdrpgrid}>
<div className="item">
<Typography variant="caption">水位</Typography>
<Typography variant="h5">{renderHDRz(record)}</Typography>
</div>
<div className="item">
<Typography variant="caption">设防水位</Typography>
<Typography variant="h5">{record.sfz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">警戒水位</Typography>
<Typography variant="h5">{record.wrz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">保证水位</Typography>
<Typography variant="h5">{record.grz || '--'}</Typography>
</div>
</div>
</div>
</>
)
}
export default React.memo(HDChart);

43
src/views/Home/InfoPops/GqZzPop/index.js Normal file
View File

@ -0,0 +1,43 @@
import React from 'react'
import { makeStyles } from '@material-ui/core';
import HDChart from './HDChart';
import { Grid } from '@material-ui/core';
import useDescStyle from '../_/descstyle';
function RealHDTip({ record, dispatch }) {
const classes = useDescStyle();
const viewInfo = () => {
dispatch?.runtime.setInfoDlg({ layerId: 'GqzzLayer', properties: record })
}
return (
<>
<div className="boxhead"></div>
<div className="featuretip-title">
<div className="name">{record.wagaName}</div>
<div className="extra cursor-pointer" onClick={viewInfo}>详细</div>
</div>
<div style={{ width: '25rem' }} className='f_14'>
<Grid container>
<Grid item className={classes.title}>工情编号:</Grid>
<Grid item className={classes.value}>{record.wagaCode}</Grid>
<Grid item className={classes.title}>闸门类别:</Grid>
<Grid item className={classes.value}>{record.wagaType_dictText}</Grid>
<Grid item className={classes.title}>闸门孔数:</Grid>
<Grid item className={classes.value}>{record.gaorNum}孔</Grid>
<Grid item className={classes.title}>设计流量:</Grid>
<Grid item className={classes.value}>{record.dsfl}m³/s</Grid>
<Grid item className={classes.title}>时间:</Grid>
<Grid item className={classes.value}>{record.updDate}</Grid>
</Grid>
</div>
<div className="boxfoot"></div>
</>
)
}
export default React.memo(RealHDTip);

223
src/views/Home/InfoPops/LlqdPop/HDChart.js Normal file
View File

@ -0,0 +1,223 @@
import React, { useEffect, useMemo, useState } from 'react'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { makeStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { rzSearch } from '../../../../models/_/search';
const useStyles = makeStyles({
grid: {
color: '#fff',
padding: '1rem',
},
realdrpgrid: {
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
margin: '0.5rem 0'
}
})
function HDChart({ record }) {
const classes = useStyles();
const [data, setData] = useState([]);
const tm = [moment().add(-24, 'hour'), moment()];
const resultTm = normalizeSearchTmRange(tm, 'h');
useEffect(() => {
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
setData(data || []);
});
}, [])
const option = useMemo(() => {
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
let sorted = data.map(o => o.z);
const markLine = [];
const { sfz, wrz, grz } = record;
if (sfz) {
sorted.push(sfz);
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
}
if (wrz) {
sorted.push(wrz);
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
}
if (grz) {
sorted.push(grz);
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
}
sorted = sorted.sort();
let minVal = sorted[0] || 0;
let maxVal = sorted[sorted.length - 1] || 0;
let dz = 0.5;
maxVal = Math.ceil(maxVal / dz) * dz;
minVal = Math.floor(minVal / dz) * dz;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
grid: {
x: markLine.length > 0 ? 64 : 24,
y: 24,
x2: 38,
y2: 42,
borderWidth: 0
},
calculable: true,
xAxis: [
{
type: 'time',
splitLine: {
show: false
},
axisLabel: {
color: '#bbb',
fontSize: 9,
textShadowBlur: 4,
textShadowColor: '#6ab',
// formatter: val => val.substr('2020-10-14 '.length, 2)
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
}
}
],
yAxis: [
{
type: 'value',
position: 'right',
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dashed'
}
},
axisLabel: {
color: '#bbb',
fontSize: 10,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minVal,
max: maxVal
}
],
series: [
{
name: '水位',
type: 'line',
showSymbol: false,
label: {
show: false,
},
data: serialData,
lineStyle: {
normal: {
width: 1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(3, 194, 236, 0.3)'
}, {
offset: 0.8,
color: 'rgba(3, 194, 236, 0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#03C2EC'
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
]
},
markLine: {
silent: true,
symbol: 'none',
label: {
position: 'start',
formatter: (p) => p?.name + ' ' + p?.value,
},
data: markLine
}
}
]
};
}, [data]);
const rtm = record.rzTm || record.tm;
return (
<>
<ReactEcharts
option={option}
style={{ height: '15rem', width: '30rem' }}
/>
<div className={classes.grid}>
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
<div className={classes.realdrpgrid}>
<div className="item">
<Typography variant="caption">水位</Typography>
<Typography variant="h5">{renderHDRz(record)}</Typography>
</div>
<div className="item">
<Typography variant="caption">设防水位</Typography>
<Typography variant="h5">{record.sfz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">警戒水位</Typography>
<Typography variant="h5">{record.wrz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">保证水位</Typography>
<Typography variant="h5">{record.grz || '--'}</Typography>
</div>
</div>
</div>
</>
)
}
export default React.memo(HDChart);

41
src/views/Home/InfoPops/LlqdPop/index.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react'
import { makeStyles } from '@material-ui/core';
import HDChart from './HDChart';
import { Grid } from '@material-ui/core';
import useDescStyle from '../_/descstyle';
function RealHDTip({ record, dispatch }) {
const classes = useDescStyle();
const viewInfo = () => {
dispatch?.runtime.setInfoDlg({ layerId: 'llqdLayer', properties: record })
}
return (
<>
<div className="boxhead"></div>
<div className="featuretip-title">
<div className="name">{record.stnm}</div>
<div className="extra cursor-pointer" onClick={viewInfo}>详细</div>
</div>
<div style={{ width: '25rem' }} className='f_14'>
<Grid container>
<Grid item className={classes.title}>站点编号:</Grid>
<Grid item className={classes.value}>{record.mvalue.stcd}</Grid>
<Grid item className={classes.title}>所在地区:</Grid>
<Grid item className={classes.value}>麻城市</Grid>
<Grid item className={classes.title}>时间:</Grid>
<Grid item className={classes.value}>{record.mvalue.tm}</Grid>
<Grid item className={classes.title}>流量:</Grid>
<Grid item className={classes.value}>{record.mvalue.hq}m³/s</Grid>
</Grid>
</div>
<div className="boxfoot"></div>
</>
)
}
export default React.memo(RealHDTip);

223
src/views/Home/InfoPops/LlsbPop/HDChart.js Normal file
View File

@ -0,0 +1,223 @@
import React, { useEffect, useMemo, useState } from 'react'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { makeStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { rzSearch } from '../../../../models/_/search';
const useStyles = makeStyles({
grid: {
color: '#fff',
padding: '1rem',
},
realdrpgrid: {
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
margin: '0.5rem 0'
}
})
function HDChart({ record }) {
const classes = useStyles();
const [data, setData] = useState([]);
const tm = [moment().add(-24, 'hour'), moment()];
const resultTm = normalizeSearchTmRange(tm, 'h');
useEffect(() => {
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
setData(data || []);
});
}, [])
const option = useMemo(() => {
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
let sorted = data.map(o => o.z);
const markLine = [];
const { sfz, wrz, grz } = record;
if (sfz) {
sorted.push(sfz);
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
}
if (wrz) {
sorted.push(wrz);
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
}
if (grz) {
sorted.push(grz);
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
}
sorted = sorted.sort();
let minVal = sorted[0] || 0;
let maxVal = sorted[sorted.length - 1] || 0;
let dz = 0.5;
maxVal = Math.ceil(maxVal / dz) * dz;
minVal = Math.floor(minVal / dz) * dz;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
grid: {
x: markLine.length > 0 ? 64 : 24,
y: 24,
x2: 38,
y2: 42,
borderWidth: 0
},
calculable: true,
xAxis: [
{
type: 'time',
splitLine: {
show: false
},
axisLabel: {
color: '#bbb',
fontSize: 9,
textShadowBlur: 4,
textShadowColor: '#6ab',
// formatter: val => val.substr('2020-10-14 '.length, 2)
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
}
}
],
yAxis: [
{
type: 'value',
position: 'right',
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dashed'
}
},
axisLabel: {
color: '#bbb',
fontSize: 10,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minVal,
max: maxVal
}
],
series: [
{
name: '水位',
type: 'line',
showSymbol: false,
label: {
show: false,
},
data: serialData,
lineStyle: {
normal: {
width: 1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(3, 194, 236, 0.3)'
}, {
offset: 0.8,
color: 'rgba(3, 194, 236, 0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#03C2EC'
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
]
},
markLine: {
silent: true,
symbol: 'none',
label: {
position: 'start',
formatter: (p) => p?.name + ' ' + p?.value,
},
data: markLine
}
}
]
};
}, [data]);
const rtm = record.rzTm || record.tm;
return (
<>
<ReactEcharts
option={option}
style={{ height: '15rem', width: '30rem' }}
/>
<div className={classes.grid}>
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
<div className={classes.realdrpgrid}>
<div className="item">
<Typography variant="caption">水位</Typography>
<Typography variant="h5">{renderHDRz(record)}</Typography>
</div>
<div className="item">
<Typography variant="caption">设防水位</Typography>
<Typography variant="h5">{record.sfz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">警戒水位</Typography>
<Typography variant="h5">{record.wrz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">保证水位</Typography>
<Typography variant="h5">{record.grz || '--'}</Typography>
</div>
</div>
</div>
</>
)
}
export default React.memo(HDChart);

43
src/views/Home/InfoPops/LlsbPop/index.js Normal file
View File

@ -0,0 +1,43 @@
import React from 'react'
import { makeStyles } from '@material-ui/core';
import HDChart from './HDChart';
import { Grid } from '@material-ui/core';
import useDescStyle from '../_/descstyle';
function RealHDTip({ record, dispatch }) {
const classes = useDescStyle();
const viewInfo = () => {
dispatch?.runtime.setInfoDlg({ layerId: 'llsbLayer', properties: record })
}
return (
<>
<div className="boxhead"></div>
<div className="featuretip-title">
<div className="name">{record.stnm}</div>
<div className="extra cursor-pointer" onClick={viewInfo}>详细</div>
</div>
<div style={{ width: '25rem' }} className='f_14'>
<Grid container>
<Grid item className={classes.title}>站点编号:</Grid>
<Grid item className={classes.value}>{record.stcd}</Grid>
<Grid item className={classes.title}>所在地区:</Grid>
<Grid item className={classes.value}>麻城市</Grid>
<Grid item className={classes.title}>时间:</Grid>
<Grid item className={classes.value}>{record.time}</Grid>
<Grid item className={classes.title}>流量:</Grid>
<Grid item className={classes.value}>{record.flow}m³/s</Grid>
<Grid item className={classes.title}>水量:</Grid>
<Grid item className={classes.value}>{record.water}m³</Grid>
</Grid>
</div>
<div className="boxfoot"></div>
</>
)
}
export default React.memo(RealHDTip);

223
src/views/Home/InfoPops/SqPop/HDChart.js Normal file
View File

@ -0,0 +1,223 @@
import React, { useEffect, useMemo, useState } from 'react'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { makeStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { rzSearch } from '../../../../models/_/search';
const useStyles = makeStyles({
grid: {
color: '#fff',
padding: '1rem',
},
realdrpgrid: {
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
margin: '0.5rem 0'
}
})
function HDChart({ record }) {
const classes = useStyles();
const [data, setData] = useState([]);
const tm = [moment().add(-24, 'hour'), moment()];
const resultTm = normalizeSearchTmRange(tm, 'h');
useEffect(() => {
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
setData(data || []);
});
}, [])
const option = useMemo(() => {
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
let sorted = data.map(o => o.z);
const markLine = [];
const { sfz, wrz, grz } = record;
if (sfz) {
sorted.push(sfz);
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
}
if (wrz) {
sorted.push(wrz);
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
}
if (grz) {
sorted.push(grz);
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
}
sorted = sorted.sort();
let minVal = sorted[0] || 0;
let maxVal = sorted[sorted.length - 1] || 0;
let dz = 0.5;
maxVal = Math.ceil(maxVal / dz) * dz;
minVal = Math.floor(minVal / dz) * dz;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
grid: {
x: markLine.length > 0 ? 64 : 24,
y: 24,
x2: 38,
y2: 42,
borderWidth: 0
},
calculable: true,
xAxis: [
{
type: 'time',
splitLine: {
show: false
},
axisLabel: {
color: '#bbb',
fontSize: 9,
textShadowBlur: 4,
textShadowColor: '#6ab',
// formatter: val => val.substr('2020-10-14 '.length, 2)
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
}
}
],
yAxis: [
{
type: 'value',
position: 'right',
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dashed'
}
},
axisLabel: {
color: '#bbb',
fontSize: 10,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minVal,
max: maxVal
}
],
series: [
{
name: '水位',
type: 'line',
showSymbol: false,
label: {
show: false,
},
data: serialData,
lineStyle: {
normal: {
width: 1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(3, 194, 236, 0.3)'
}, {
offset: 0.8,
color: 'rgba(3, 194, 236, 0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#03C2EC'
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
]
},
markLine: {
silent: true,
symbol: 'none',
label: {
position: 'start',
formatter: (p) => p?.name + ' ' + p?.value,
},
data: markLine
}
}
]
};
}, [data]);
const rtm = record.rzTm || record.tm;
return (
<>
<ReactEcharts
option={option}
style={{ height: '15rem', width: '30rem' }}
/>
<div className={classes.grid}>
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
<div className={classes.realdrpgrid}>
<div className="item">
<Typography variant="caption">水位</Typography>
<Typography variant="h5">{renderHDRz(record)}</Typography>
</div>
<div className="item">
<Typography variant="caption">设防水位</Typography>
<Typography variant="h5">{record.sfz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">警戒水位</Typography>
<Typography variant="h5">{record.wrz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">保证水位</Typography>
<Typography variant="h5">{record.grz || '--'}</Typography>
</div>
</div>
</div>
</>
)
}
export default React.memo(HDChart);

42
src/views/Home/InfoPops/SqPop/index.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react'
import { makeStyles } from '@material-ui/core';
import HDChart from './HDChart';
import { Grid } from '@material-ui/core';
import useDescStyle from '../_/descstyle';
function RealHDTip({ record, dispatch }) {
const classes = useDescStyle();
const viewInfo = () => {
dispatch?.runtime.setInfoDlg({ layerId: 'sqLayer', properties: record })
}
return (
<>
<div className="boxhead"></div>
<div className="featuretip-title">
<div className="name">{record.stnm}</div>
<div className="extra cursor-pointer" onClick={viewInfo}>详细</div>
</div>
<div style={{ width: '25rem' }} className='f_14'>
<Grid container>
<Grid item className={classes.title}>站点编号:</Grid>
<Grid item className={classes.value}>{record.mvalue.stcd}</Grid>
<Grid item className={classes.title}>所在地区:</Grid>
<Grid item className={classes.value}>麻城市</Grid>
<Grid item className={classes.title}>时间:</Grid>
<Grid item className={classes.value}>{record.mvalue.tm}</Grid>
<Grid item className={classes.title}>平均含水量:</Grid>
<Grid item className={classes.value}>{record.mvalue.slmAvg}%</Grid>
</Grid>
</div>
<div className="boxfoot"></div>
</>
)
}
export default React.memo(RealHDTip);

223
src/views/Home/InfoPops/SzPop/HDChart.js Normal file
View File

@ -0,0 +1,223 @@
import React, { useEffect, useMemo, useState } from 'react'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { makeStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { rzSearch } from '../../../../models/_/search';
const useStyles = makeStyles({
grid: {
color: '#fff',
padding: '1rem',
},
realdrpgrid: {
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
margin: '0.5rem 0'
}
})
function HDChart({ record }) {
const classes = useStyles();
const [data, setData] = useState([]);
const tm = [moment().add(-24, 'hour'), moment()];
const resultTm = normalizeSearchTmRange(tm, 'h');
useEffect(() => {
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
setData(data || []);
});
}, [])
const option = useMemo(() => {
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
let sorted = data.map(o => o.z);
const markLine = [];
const { sfz, wrz, grz } = record;
if (sfz) {
sorted.push(sfz);
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
}
if (wrz) {
sorted.push(wrz);
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
}
if (grz) {
sorted.push(grz);
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
}
sorted = sorted.sort();
let minVal = sorted[0] || 0;
let maxVal = sorted[sorted.length - 1] || 0;
let dz = 0.5;
maxVal = Math.ceil(maxVal / dz) * dz;
minVal = Math.floor(minVal / dz) * dz;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
grid: {
x: markLine.length > 0 ? 64 : 24,
y: 24,
x2: 38,
y2: 42,
borderWidth: 0
},
calculable: true,
xAxis: [
{
type: 'time',
splitLine: {
show: false
},
axisLabel: {
color: '#bbb',
fontSize: 9,
textShadowBlur: 4,
textShadowColor: '#6ab',
// formatter: val => val.substr('2020-10-14 '.length, 2)
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
}
}
],
yAxis: [
{
type: 'value',
position: 'right',
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dashed'
}
},
axisLabel: {
color: '#bbb',
fontSize: 10,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minVal,
max: maxVal
}
],
series: [
{
name: '水位',
type: 'line',
showSymbol: false,
label: {
show: false,
},
data: serialData,
lineStyle: {
normal: {
width: 1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(3, 194, 236, 0.3)'
}, {
offset: 0.8,
color: 'rgba(3, 194, 236, 0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#03C2EC'
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
]
},
markLine: {
silent: true,
symbol: 'none',
label: {
position: 'start',
formatter: (p) => p?.name + ' ' + p?.value,
},
data: markLine
}
}
]
};
}, [data]);
const rtm = record.rzTm || record.tm;
return (
<>
<ReactEcharts
option={option}
style={{ height: '15rem', width: '30rem' }}
/>
<div className={classes.grid}>
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
<div className={classes.realdrpgrid}>
<div className="item">
<Typography variant="caption">水位</Typography>
<Typography variant="h5">{renderHDRz(record)}</Typography>
</div>
<div className="item">
<Typography variant="caption">设防水位</Typography>
<Typography variant="h5">{record.sfz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">警戒水位</Typography>
<Typography variant="h5">{record.wrz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">保证水位</Typography>
<Typography variant="h5">{record.grz || '--'}</Typography>
</div>
</div>
</div>
</>
)
}
export default React.memo(HDChart);

31
src/views/Home/InfoPops/SzPop/index.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react'
import { makeStyles } from '@material-ui/core';
import HDChart from './HDChart';
import { Grid } from '@material-ui/core';
import useDescStyle from '../_/descstyle';
import SzPop from './jcsj'
function RealHDTip({ record, dispatch }) {
const classes = useDescStyle();
const viewInfo = () => {
dispatch?.runtime.setInfoDlg({ layerId: 'GqbzLayer', properties: record })
}
return (
<>
<div className="boxhead"></div>
<div className="featuretip-title">
<div className="name">{record.stnm}</div>
</div>
<div style={{ width: '50rem',height:'20rem',marginTop:20 }} className='f_14'>
<SzPop />
</div>
<div className="boxfoot"></div>
</>
)
}
export default React.memo(RealHDTip);

151
src/views/Home/InfoPops/SzPop/jcsj.js Normal file
View File

@ -0,0 +1,151 @@
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
import { DatePicker, Empty } from 'antd';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import React, { useEffect, useState, useMemo } from 'react';
// import './index.less'
// import { hdData, detailHdData } from './constance';
const { RangePicker } = DatePicker;
const useStyles = makeStyles({
tableContainer: {
background: '#182d42', // 设置表格容器的背景颜色
},
item: {
'& .MuiGrid-item': {
'& [class*="makeStyles-title"]': {
color: '#fff',
backgroundColor: '#104175',
},
},
},
});
const DpTableCell = withStyles({
head: {
backgroundColor: '#104175',
color: '#fff',
fontSize: '1rem',
padding: '0.5rem 0.3rem !important',
},
body: {
color: '#fff',
fontSize: '0.9rem',
padding: '0.7rem 0.3rem !important',
borderBottom: 'none',
position: "relative"
},
})(TableCell);
function DrpStAround({ record }) {
const classes = useStyles();
//今天日历数
const days = moment().diff(moment().startOf('year'), 'days') + 1
const [data, setData] = useState([]);
const [initialDateRange, setInitialDateRange] = useState({})
const [detail, setDetail] = useState({});
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,
})
};
const doSearch = () => {
getData(params)
}
const getData = async (params) => {
setData([])
// setDetail(detailHdData)
// setData(await monitor(params));
// setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
}
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)
getData(options)
}, [record])
return (
<div className='infoDlg_jcsj' style={{ width: '100%',padding:'10px' }}>
<div className='toolbar'>
<div className='tm' style={{ position: "relative", zIndex: 999999 }}>
<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>
<button onClick={doSearch} className='search'>查询</button>
<button onClick={doSearch} className='search'>导出</button>
</div>
<div className='content' style={{ height: "49vh",position:'relative', }}>
<div className='list' style={{ width: '100%' }}>
<TableContainer
locale={{ emptyText: '暂无数据' }}
style={{ height: '100%' }}
className={classes.tableContainer}
>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell align="center" style={{ width: '17%' }}>时间</DpTableCell>
<DpTableCell align="center" style={{ width: '16%' }}>水温(℃)</DpTableCell>
<DpTableCell align="center" style={{ width: '16%' }}>PH</DpTableCell>
<DpTableCell align="center" style={{ width: '17%' }}>溶解氧(mg/L)</DpTableCell>
<DpTableCell align="center" style={{ width: '17%' }}>浊度(NTU)</DpTableCell>
<DpTableCell align="center" style={{ width: '17%' }}>水质类别</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{
data.length > 0 ? data.map((row) => (
<DpTableRow key={row.stnm}>
<DpTableCell align="center"><div className="ellipsis">{moment(row.tm).format('MM-DD HH:mm')}</div></DpTableCell>
<DpTableCell align="center">{row.drp ?? "-"}</DpTableCell>
<DpTableCell align="center">{row.z ? row.z.toFixed(2) : "-"}</DpTableCell>
{/* <DpTableCell align="center">{row.q?? "-"}</DpTableCell> */}
<DpTableCell align="center">{row.tq ?? "-"}</DpTableCell>
</DpTableRow>
)) :
<Empty style={{ position: 'absolute', top: '100px', left: '300px' }} description={false}/>
}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
</div>
)
}
export default DrpStAround

19
src/views/Home/InfoPops/index.js
View File

@ -20,7 +20,12 @@ import WataUPop from './DcpjPop/WataUPop';
import AdcdPop from './AdcdPop';
import PicStPop from './PicStPop';
import TransferPop from './DcpjPop/TransferPop';
import GqZzPop from './GqZzPop';
import GqBzPop from './GqBzPop';
import SzPop from './SzPop'
import SqPop from './SqPop';
import LlqdPop from './LlqdPop';
import LlsbPop from './LlsbPop';
export const InfoPopNames = {
RealSkPop: 'RealSkPop',
RealHDPop: 'RealHDPop',
@ -72,6 +77,18 @@ export const InfoPops = ({ type, properties, dispatch }) => {
return <WataUPop record={properties} dispatch={dispatch} />
} else if (type === 'adcd') {
return <AdcdPop record={properties} dispatch={dispatch} />
}else if (type === 'sz') {
return <GqZzPop record={properties} dispatch={dispatch} />
}else if (type === 'bz') {
return <GqBzPop record={properties} dispatch={dispatch} />
}else if (type === '水质站') {
return <SzPop record={properties} dispatch={dispatch} />
}else if (type === '墒情站') {
return <SqPop record={properties} dispatch={dispatch} />
}else if (type === '渠道流量站') {
return <LlqdPop record={properties} dispatch={dispatch} />
}else if (type === '流量水表站') {
return <LlsbPop record={properties} dispatch={dispatch} />
}
return null;

4
src/views/Home/PanelIndex.js
View File

@ -60,7 +60,7 @@ import Gsfgl from './panels/Gsfgl'
import Rgsl from './panels/Rgsl'
import Dbfx from './panels/Dbfx'
import Gsjk from './panels/Gsjk'
import YaRes from './panels/YaRes'
export default function PanelIndex({ name, style, ...params }) {
if (name === '天气') {
return (
@ -174,6 +174,8 @@ export default function PanelIndex({ name, style, ...params }) {
return <Szzdd style={style} />
}else if (name == '预演方案') {
return <Yyfa style={style} />
}else if (name == '预演结果') {
return <YaRes style={style} />
} else if (name === '供水态势') {
return <Gsts style={style} />
} else if (name === '供水覆盖率') {

4
src/views/Home/components/ActionDock/index.js
View File

@ -83,7 +83,7 @@ export default function ActionDock({ }) {
<div className="dp-actiondock">
{
viewKey?
<BootstrapTooltip key={999} title={<Typography variant="h6">返回</Typography>}>
<BootstrapTooltip key={999} title={<Typography variant="h6"><span style={{color:'#fff'}}>返回</span></Typography>}>
<div className="dock-item" onClick={() => {
// dispatch.map.setView(o.id) 这里不知道用哪个，等问好在弄
setViewKey(null)
@ -97,7 +97,7 @@ export default function ActionDock({ }) {
}
{
viewItem.map(o => (
<BootstrapTooltip key={o.id} title={<Typography variant="h6">{o.title}</Typography>}>
<BootstrapTooltip key={o.id} title={<Typography variant="h6"><span style={{color:'#fff'}}>{o.title}</span></Typography>}>
<div className="dock-item" onClick={() => {
if(o.children){
//一级菜单

41
src/views/Home/components/DescrptionItem2/index.js Normal file
View File

@ -0,0 +1,41 @@
import { Grid, makeStyles } from '@material-ui/core';
import React from 'react';
const useStyles = makeStyles({
title: {
backgroundColor: 'rgba(33, 53, 77, 0.2)',
padding: '0.8rem 1rem',
color: '#bbb',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
},
value: {
color: '#ddd',
padding: '0.8rem 1rem',
borderBottom: '1px solid rgb(33, 53, 77)',
borderLeft: '1px solid rgb(33, 53, 77)',
overflowWrap: 'break-word',
}
});
export default function DescriptionItem({ label, children, span, labelWidth, myWidth, isRight }) {
const classes = useStyles();
labelWidth = labelWidth || 2;
span = span || 1;
return (
<>
<Grid item style={{width:myWidth}}>
<Grid className={classes.title} item style={isRight?{borderRight: '1px solid rgb(33, 53, 77)'}:{backgroundColor:"#104175",color:"#fff"}}>
{label}
</Grid>
<Grid className={classes.value} item style={isRight?{borderRight: '1px solid rgb(33, 53, 77)'}:{}}>
{children}
</Grid>
</Grid>
</>
)
}

16709
src/views/Home/components/Hdjcsj/constance.js Normal file
View File

File diff suppressed because it is too large Load Diff

217
src/views/Home/components/Hdjcsj/drpOption.js Normal file
View File

@ -0,0 +1,217 @@
export default function drpOption({ data, wrz, grz }) {
console.log("data",wrz);
const maxVal = Math.max(...data.map(obj => obj.drp))
const maxSw = Math.max(...data.map(obj => obj.beforeWl),...data.map(obj => obj.afterWl))
const minSw = Math.min(...data.map(obj => obj.beforeWl),...data.map(obj => obj.afterWl))
const maxLl = Math.max(...data.map(obj => obj.flow))
const minLl = Math.min(...data.map(obj => obj.flow))
return {
tooltip: {
trigger: 'axis',
},
grid: [
{
top: "15%",
left: "10%",
right: "8%",
width: '80%',
height: '35%'
},
{
bottom: "5.5%",
left: "10%",
right: "8%",
width: '80%',
height: '35%'
},
],
legend: {
// 显示图例
show: true,
textStyle: {
color: '#fff',
},
// 图例的位置
data: ['闸前水位', '闸后水位', "过闸流量"],
},
xAxis: [
{
gridIndex: 0,
type: 'category',
data: data.map(o => o.tm).reverse(),
splitLine: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 12,
show:false,
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 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: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
inverse: false,
gridIndex: 0,
type: 'value',
position: 'left',
name: "闸开度",
nameTextStyle: {
color: '#fff'
},
nameLocation: "start",
axisLabel: {
color: '#fff',
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
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: '#07a6ff',
width: 0.25,
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: minLl,
max: maxLl
}
],
series: [
{
xAxisIndex: 1,
yAxisIndex: 1,
name: '闸前水位',
type: 'line',
symbol: 'none',
color: "#0AE0B5",
label: {
show: false,
},
data: data.map(o => o.beforeWl),
},
{
xAxisIndex: 1,
yAxisIndex: 1,
name: '闸后水位',
type: 'line',
symbol: 'none',
color: "#007AFD",
label: {
show: false,
},
data: data.map(o => o.afterWl),
},
{
xAxisIndex: 1,
yAxisIndex: 2,
name: '过闸流量',
type: 'line',
color: "#007AFD",
symbol: 'none',
showSymbol: false,
label: {
show: false,
},
data: data.map(o => o.flow),
}
]
};
}

182
src/views/Home/components/Hdjcsj/index.js Normal file
View File

@ -0,0 +1,182 @@
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
import { DatePicker } from 'antd';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import DescriptionItem from '../DescrptionItem2';
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption';
import { DateTimePicker } from '@material-ui/pickers';
import React, { useEffect, useState,useMemo } from 'react';
import './index.less'
import { hdData, detailHdData, zzData } from './constance';
const { RangePicker } = DatePicker;
const useStyles = makeStyles({
tableContainer: {
background: '#182d42', // 设置表格容器的背景颜色
},
item: {
'& .MuiGrid-item': {
'& [class*="makeStyles-title"]': {
color: '#fff',
backgroundColor: '#104175',
},
},
},
});
const DpTableCell = withStyles({
head: {
backgroundColor: '#104175',
color: '#fff',
fontSize: '1rem',
padding: '0.5rem 0.3rem !important',
},
body: {
color: '#fff',
fontSize: '0.9rem',
padding: '0.7rem 0.3rem !important',
borderBottom: 'none',
position: "relative"
},
})(TableCell);
function DrpStAround({ record }) {
const classes = useStyles();
//今天日历数
const days=moment().diff(moment().startOf('year'),'days')+1
const [data, setData] = useState([]);
const [initialDateRange , setInitialDateRange] = useState({})
const [detail, setDetail] = useState({});
const [params, setParams] = useState({ tm: [] })
const option = useMemo(() => {
return drpOption({data,wrz:record.wrz,grz:record.grz});
}, [data])
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,
})
};
const doSearch = () => {
getData(params)
}
const getData = async (params) => {
setData(zzData)
setDetail(detailHdData)
// setData(await monitor(params));
// setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
}
useEffect(() => {
let options = "";
options = {
stcd: record.stcd,
source: record.source,
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)
getData(options)
}, [record])
return (
<div className='infoDlg_jcsj'>
<div className='toolbar'>
<div className='tm' style={{position:"relative",zIndex:999999}}>
<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>
<button onClick={doSearch} className='search'>查询</button>
</div>
<div className='content' style={{height:"49vh"}}>
<div className='list'>
<TableContainer style={{ height: '100%' }} className={classes.tableContainer}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell align="center" style={{ width: '20%' }}>时间</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>闸前水位（m）</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>闸后水位（m）</DpTableCell>
{/* <DpTableCell align="center" style={{ width: '20%' }}>实测流量(m³/s)</DpTableCell> */}
<DpTableCell align="center" style={{ width: '20%' }}>过闸流量(m³/s)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{
data.map((row) => (
<DpTableRow key={row.stnm}>
<DpTableCell align="center"><div className="ellipsis">{moment(row.tm).format('MM-DD HH')}</div></DpTableCell>
<DpTableCell align="center">{row.beforeWl?? "-"}</DpTableCell>
<DpTableCell align="center">{row.afterWl?? "-"}</DpTableCell>
{/* <DpTableCell align="center">{row.q?? "-"}</DpTableCell> */}
<DpTableCell align="center">{row.flow?? "-"}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
<div className='echartBox'>
<div className='echart1'>
<ReactEcharts
option={option}
style={{ height: '100%' }}
/>
</div>
</div>
</div>
<div className='foot'>
{/* <div className='split-line'></div> */}
<Grid container size="small"
// className={classes.item}
>
<DescriptionItem label="近3日闸前水位变幅(m)" myWidth={'20%'}>-0.08</DescriptionItem>
<DescriptionItem label="近3日闸后水位变幅(m)" myWidth={'20%'}>0</DescriptionItem>
<DescriptionItem label="24h前后平均水位差(m)" myWidth={'20%'}>8.77</DescriptionItem>
<DescriptionItem label="24h过水量(m²)" myWidth={'20%'}>443196</DescriptionItem>
<DescriptionItem label="本年开闸天数" myWidth={'20%'}>0/143</DescriptionItem>
{/* <DescriptionItem label="近1h雨量(mm)" myWidth={'13%'}>{detail?.h1||0}</DescriptionItem>
<DescriptionItem label="近3h雨量(mm)" myWidth={'13%'}>{detail?.h3||0}</DescriptionItem>
<DescriptionItem label="近6h雨量(mm)" myWidth={'13%'}>{detail?.h6||0}</DescriptionItem>
<DescriptionItem label="近12h雨量(mm)" myWidth={'13%'}>{detail?.h12||0}</DescriptionItem>
<DescriptionItem label="近24h雨量(mm)" myWidth={'13%'}>{detail?.h24||0}</DescriptionItem>
<DescriptionItem label="本年降雨天数" myWidth={'18%'}><span style={{color:"#E69224"}}>{detail?.yearDrpDay}</span>/{days}</DescriptionItem>
<DescriptionItem label="24h水位变幅(m)" myWidth={'17%'}>{detail.rzDiff > 0 ? "+" :"" }{detail.rzDiff?detail.rzDiff.toFixed(2) : 0}</DescriptionItem>
<DescriptionItem label="近48h雨量(mm)" myWidth={'13%'}>{detail?.h48||0}</DescriptionItem>
<DescriptionItem label="今日雨量(mm)" myWidth={'13%'}>{detail.today || 0}</DescriptionItem>
<DescriptionItem label="昨日雨量(mm)" myWidth={'13%'}>{detail?.yesterdayDrp || 0}</DescriptionItem>
<DescriptionItem label="本月雨量(mm)" myWidth={'13%'}>{detail?.monthDrp || 0}</DescriptionItem>
<DescriptionItem label="本年雨量(mm)" myWidth={'13%'}>{detail?.yearDrp || 0}</DescriptionItem>
<DescriptionItem label="本年最大日雨量(mm)" myWidth={'18%'}>{detail.maxDrp||0}({moment(detail.maxDrpTime).format('MM-DD')})</DescriptionItem>
<DescriptionItem label="本年最高水位(m)" myWidth={'17%'}>{detail.maxRz ? detail.maxRz.toFixed(2) :0}</DescriptionItem> */}
</Grid>
</div>
</div>
)
}
export default DrpStAround

138
src/views/Home/components/Hdjcsj/index.less Normal file
View File

@ -0,0 +1,138 @@
.infoDlg_jcsj{
display: flex;
flex-direction: column;
height: 100%;
.toolbar{
display: flex;
.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;
}
}
.search{
margin-left: 1.5rem;
border: 1px solid #0e4e93;
background: url(../../../../assets/btn44.png) no-repeat 100% center;
color: #fff;
padding: 0 1rem;
border-radius: 2px;
cursor: pointer;
}
}
.content{
height: 40vh;
margin-top: 1vh;
display: flex;
.list{
width: 40%;
}
.echart{
flex: 1;
}
}
.echartBox{
width: 60%;
.echart1{
width: 100%;
height: 100%;
}
}
.foot{
flex: 1;
margin-top: 15px;
.split-line{
width: 100%;
border: 1px dashed rgba(16, 102, 141);
opacity: .36;
margin-bottom: 15px;
}
.MuiGrid-container{
background-color: #182d42 !important;
}
}
}
.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;
}

16709
src/views/Home/components/Llqdjcsj/constance.js Normal file
View File

File diff suppressed because it is too large Load Diff

210
src/views/Home/components/Llqdjcsj/drpOption.js Normal file
View File

@ -0,0 +1,210 @@
export default function drpOption({ data, wrz, grz }) {
debugger
console.log("data",wrz);
const maxVal = Math.max(...data.map(obj => obj.drp))
const maxSw = Math.max(...data.map(obj => obj.deep))
const minSw = Math.min(...data.map(obj => obj.deep))
const maxLl = Math.max(...data.map(obj => obj.flow))
const minLl = Math.min(...data.map(obj => obj.flow))
return {
tooltip: {
trigger: 'axis',
},
grid: [
{
top: "15%",
left: "10%",
right: "8%",
width: '80%',
height: '80%'
},
],
legend: {
// 显示图例
show: true,
textStyle: {
color: '#fff',
},
// 图例的位置
data: ['流量', '累计水量', "水深"],
},
xAxis: [
// {
// gridIndex: 0,
// type: 'category',
// data: data.map(o => o.tm).reverse(),
// splitLine: {
// show: false
// },
// axisLabel: {
// color: '#fff',
// fontSize: 12,
// show:false,
// },
// axisLine: {
// lineStyle: {
// color: '#07a6ff',
// width: 0.5,
// }
// },
// axisTick: {
// show: false,
// },
// },
{
gridIndex: 0,
type: 'category',
data: data.map(o => o.tm),
inverse: true,
splitLine: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
// {
// inverse: false,
// gridIndex: 0,
// type: 'value',
// position: 'left',
// name: "",
// nameTextStyle: {
// color: '#fff'
// },
// nameLocation: "start",
// axisLabel: {
// color: '#fff',
// fontSize: 12,
// },
// splitLine: {
// show: true,
// lineStyle: {
// color: '#07a6ff',
// width: 0.25,
// type: 'dotted'
// }
// },
// axisLine: {
// show: false
// },
// axisTick: {
// show: false,
// },
// min: 0,
// max: maxVal
// },
{
gridIndex: 0,
type: 'value',
position: 'left',
name: "水位(m)",
nameTextStyle: {
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minSw,
max: maxSw
},
{
gridIndex: 0,
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: minLl,
max: maxLl
}
],
series: [
{
xAxisIndex: 0,
yAxisIndex: 1,
name: '流量',
type: 'line',
symbol: 'none',
color: "#0AE0B5",
label: {
show: false,
},
data: data.map(o => o.flow),
},
{
xAxisIndex: 0,
yAxisIndex: 1,
name: '累计水量',
type: 'line',
symbol: 'none',
color: "red",
label: {
show: false,
},
data: data.map(o => o.tWater),
},
{
xAxisIndex: 0,
yAxisIndex: 1,
name: '水深',
type: 'line',
color: "#007AFD",
symbol: 'none',
showSymbol: false,
label: {
show: false,
},
data: data.map(o => o.deep),
}
]
};
}

173
src/views/Home/components/Llqdjcsj/index.js Normal file
View File

@ -0,0 +1,173 @@
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
import { DatePicker,Empty } from 'antd';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import DescriptionItem from '../DescrptionItem2';
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption';
import { DateTimePicker } from '@material-ui/pickers';
import React, { useEffect, useState,useMemo } from 'react';
import './index.less'
import { hdData, detailHdData, zzData } from './constance';
const { RangePicker } = DatePicker;
const useStyles = makeStyles({
tableContainer: {
background: '#182d42', // 设置表格容器的背景颜色
},
item: {
'& .MuiGrid-item': {
'& [class*="makeStyles-title"]': {
color: '#fff',
backgroundColor: '#104175',
},
},
},
});
const DpTableCell = withStyles({
head: {
backgroundColor: '#104175',
color: '#fff',
fontSize: '1rem',
padding: '0.5rem 0.3rem !important',
},
body: {
color: '#fff',
fontSize: '0.9rem',
padding: '0.7rem 0.3rem !important',
borderBottom: 'none',
position: "relative"
},
})(TableCell);
function DrpStAround({ record }) {
const classes = useStyles();
//今天日历数
const days=moment().diff(moment().startOf('year'),'days')+1
const [data, setData] = useState([]);
const [initialDateRange , setInitialDateRange] = useState({})
const [detail, setDetail] = useState({});
const [params, setParams] = useState({ tm: [] })
const option = useMemo(() => {
return drpOption({data,wrz:record.wrz,grz:record.grz});
}, [data])
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,
})
};
const doSearch = () => {
getData(params)
}
const getData = async (params) => {
const rep = Array(50).fill(0).map((item,i) => ({
deep: 0,
flow: 0,
tWater: 0,
tm:moment().clone().subtract(i, 'hours').format('MM-DD HH:mm')
}))
setData(rep)
setDetail(detailHdData)
// setData(await monitor(params));
// setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
}
useEffect(() => {
let options = "";
options = {
stcd: record.stcd,
source: record.source,
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)
getData(options)
}, [record])
return (
<div className='infoDlg_jcsj'>
<div className='toolbar'>
<div className='tm' style={{position:"relative",zIndex:999999}}>
<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>
<button onClick={doSearch} className='search'>查询</button>
</div>
<div className='content' style={{height:"49vh",position:'relative'}}>
<div className='list'>
<TableContainer style={{ height: '100%' }} className={classes.tableContainer}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell align="center" style={{ width: '25%' }}>时间</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>水深(m)</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>流量(%)</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>累计水量(m³)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{
data.length > 0 ? data.map((row) => (
<DpTableRow key={row.stnm}>
<DpTableCell align="center"><div className="ellipsis">{moment(row.tm).format('MM-DD HH')}</div></DpTableCell>
<DpTableCell align="center">{row.deep?? "-"}</DpTableCell>
<DpTableCell align="center">{row.flow?? "-"}</DpTableCell>
{/* <DpTableCell align="center">{row.q?? "-"}</DpTableCell> */}
<DpTableCell align="center">{row.tWater?? "-"}</DpTableCell>
</DpTableRow>
)) :
<Empty style={{ position: 'absolute', top: '150px', left: '130px' }} description={false}/>
}
</TableBody>
</Table>
</TableContainer>
</div>
<div className='echartBox'>
{data.length > 0 ? <div className='echart1'>
<ReactEcharts
option={option}
style={{ height: '100%' }}
/>
</div>:<Empty style={{marginTop:'20%'}} description={false}/>}
</div>
</div>
<div className='foot'>
{/* <div className='split-line'></div> */}
<Grid container size="small"
// className={classes.item}
>
<DescriptionItem label="历史最大流量(m³/s)" myWidth={'25%'}>1.161</DescriptionItem>
<DescriptionItem label="上月累计水量(m³)" myWidth={'25%'}>27892</DescriptionItem>
<DescriptionItem label="本月累计水量(m³)" myWidth={'25%'}>0</DescriptionItem>
<DescriptionItem label="今日累计水量(m³)" myWidth={'25%'}>0</DescriptionItem>
</Grid>
</div>
</div>
)
}
export default DrpStAround

138
src/views/Home/components/Llqdjcsj/index.less Normal file
View File

@ -0,0 +1,138 @@
.infoDlg_jcsj{
display: flex;
flex-direction: column;
height: 100%;
.toolbar{
display: flex;
.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;
}
}
.search{
margin-left: 1.5rem;
border: 1px solid #0e4e93;
background: url(../../../../assets/btn44.png) no-repeat 100% center;
color: #fff;
padding: 0 1rem;
border-radius: 2px;
cursor: pointer;
}
}
.content{
height: 40vh;
margin-top: 1vh;
display: flex;
.list{
width: 40%;
}
.echart{
flex: 1;
}
}
.echartBox{
width: 60%;
.echart1{
width: 100%;
height: 100%;
}
}
.foot{
flex: 1;
margin-top: 15px;
.split-line{
width: 100%;
border: 1px dashed rgba(16, 102, 141);
opacity: .36;
margin-bottom: 15px;
}
.MuiGrid-container{
background-color: #182d42 !important;
}
}
}
.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;
}

16709
src/views/Home/components/Llsbjcsj/constance.js Normal file
View File

File diff suppressed because it is too large Load Diff

208
src/views/Home/components/Llsbjcsj/drpOption.js Normal file
View File

@ -0,0 +1,208 @@
export default function drpOption({ data, current }) {
const maxVal = Math.max(...data.map(obj => obj.drp))
const maxSw = Math.max(...data.map(obj => current == 0 ? obj.water :obj.flow))
const minSw = Math.min(...data.map(obj => current == 0 ? obj.water :obj.flow))
const maxLl = Math.max(...data.map(obj => obj.flow))
const minLl = Math.min(...data.map(obj => obj.flow))
return {
tooltip: {
trigger: 'axis',
},
grid: [
{
top: "15%",
left: "10%",
right: "8%",
width: '80%',
height: '80%'
},
],
legend: {
// 显示图例
show: true,
textStyle: {
color: '#fff',
},
// 图例的位置
},
xAxis: [
// {
// gridIndex: 0,
// type: 'category',
// data: data.map(o => o.tm).reverse(),
// splitLine: {
// show: false
// },
// axisLabel: {
// color: '#fff',
// fontSize: 12,
// show:false,
// },
// axisLine: {
// lineStyle: {
// color: '#07a6ff',
// width: 0.5,
// }
// },
// axisTick: {
// show: false,
// },
// },
{
gridIndex: 0,
type: 'category',
data: data.map(o => o.tm),
inverse: true,
splitLine: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
// {
// inverse: false,
// gridIndex: 0,
// type: 'value',
// position: 'left',
// name: "",
// nameTextStyle: {
// color: '#fff'
// },
// nameLocation: "start",
// axisLabel: {
// color: '#fff',
// fontSize: 12,
// },
// splitLine: {
// show: true,
// lineStyle: {
// color: '#07a6ff',
// width: 0.25,
// type: 'dotted'
// }
// },
// axisLine: {
// show: false
// },
// axisTick: {
// show: false,
// },
// min: 0,
// max: maxVal
// },
{
gridIndex: 0,
type: 'value',
position: 'left',
name: current == 0 ?"水量(m³)":"流量(m³/s)",
nameTextStyle: {
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minSw,
max: maxSw
},
// {
// gridIndex: 0,
// 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: minLl,
// max: maxLl
// }
],
series: [
{
xAxisIndex: 0,
yAxisIndex: 0,
name: current == 0?'1#水量':'1#流量',
type: 'line',
symbol: 'none',
color: "#0AE0B5",
label: {
show: false,
},
data: data.map(o => current == 0 ? o.water :o.flow),
},
// {
// xAxisIndex: 0,
// yAxisIndex: 1,
// name: '累计水量',
// type: 'line',
// symbol: 'none',
// color: "red",
// label: {
// show: false,
// },
// data: data.map(o => o.tWater),
// },
// {
// xAxisIndex: 0,
// yAxisIndex: 1,
// name: '水深',
// type: 'line',
// color: "#007AFD",
// symbol: 'none',
// showSymbol: false,
// label: {
// show: false,
// },
// data: data.map(o => o.deep),
// }
]
};
}

187
src/views/Home/components/Llsbjcsj/index.js Normal file
View File

@ -0,0 +1,187 @@
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
import { DatePicker,Empty } from 'antd';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import DescriptionItem from '../DescrptionItem2';
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption';
import clsx from "clsx";
import { DateTimePicker } from '@material-ui/pickers';
import React, { useEffect, useState,useMemo } from 'react';
import './index.less'
import { hdData, detailHdData, zzData } from './constance';
const { RangePicker } = DatePicker;
const useStyles = makeStyles({
tableContainer: {
background: '#182d42', // 设置表格容器的背景颜色
},
item: {
'& .MuiGrid-item': {
'& [class*="makeStyles-title"]': {
color: '#fff',
backgroundColor: '#104175',
},
},
},
});
const DpTableCell = withStyles({
head: {
backgroundColor: '#104175',
color: '#fff',
fontSize: '1rem',
padding: '0.5rem 0.3rem !important',
},
body: {
color: '#fff',
fontSize: '0.9rem',
padding: '0.7rem 0.3rem !important',
borderBottom: 'none',
position: "relative"
},
})(TableCell);
function DrpStAround({ record }) {
const classes = useStyles();
//今天日历数
const days=moment().diff(moment().startOf('year'),'days')+1
const [data, setData] = useState([]);
const [initialDateRange , setInitialDateRange] = useState({})
const [detail, setDetail] = useState({});
const [params, setParams] = useState({ tm: [] })
const [current, setCurrent] = useState(0);
const option = useMemo(() => {
return drpOption({data,current});
}, [data, current])
const totalW = useMemo(() => {
const sum = data.reduce((total, cur) => total += cur.water, 0)
return sum
},[data])
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,
})
};
const doSearch = () => {
getData(params)
}
const getData = async (params) => {
const rep = Array(50).fill(0).map((item,i) => ({
water: Math.floor(Math.random() * 100),
flow:(Math.random() / 10).toFixed(3),
tm:moment().clone().subtract(i, 'hours').format('MM-DD HH:mm')
}))
setData(rep)
setDetail(detailHdData)
// setData(await monitor(params));
// setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
}
useEffect(() => {
let options = "";
options = {
stcd: record.stcd,
source: record.source,
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)
getData(options)
}, [record])
return (
<div className='infoDlg_jcsj'>
<div className='toolbar'>
<div className='tm' style={{position:"relative",zIndex:999999}}>
<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>
<button onClick={doSearch} className='search'>查询</button>
<div className="time-type">
{
['水量', '流量'].map((item, index) => (
<div className={clsx({active: index === current})} onClick={() => setCurrent(index)}>{item}</div>
))
}
</div>
</div>
<div className='content' style={{height:"49vh",position:'relative'}}>
<div className='list'>
<TableContainer style={{ height: '100%' }} className={classes.tableContainer}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell align="center" style={{ width: '50%' }}>时间</DpTableCell>
<DpTableCell align="center" style={{ width: '50%' }}>{current == 0 ?"1#水量(m³)":"1#流量(m³/s)"}</DpTableCell>
{/* <DpTableCell align="center" style={{ width: '25%' }}>流量(%)</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>累计水量(m³)</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{
data.length > 0 ? data.map((row) => (
<DpTableRow key={row.stnm}>
<DpTableCell align="center"><div className="ellipsis">{row.tm}</div></DpTableCell>
<DpTableCell align="center">{current == 0?row.water:row.flow}</DpTableCell>
</DpTableRow>
)) :
<Empty style={{ position: 'absolute', top: '150px', left: '130px' }} description={false}/>
}
</TableBody>
</Table>
</TableContainer>
</div>
<div className='echartBox' style={{ position: 'relative' }}>
{current == 0 ?<div style={{ position: 'absolute', right: 10 }}>总水量：{totalW}m³</div>:''}
{data.length > 0 ? <div className='echart1'>
<ReactEcharts
option={option}
style={{ height: '100%' }}
/>
</div>:<Empty style={{marginTop:'20%'}} description={false}/>}
</div>
</div>
<div className='foot'>
{/* <div className='split-line'></div> */}
<Grid container size="small"
// className={classes.item}
>
<DescriptionItem label="本年总供水量(万m³)" myWidth={'20%'}>7.55</DescriptionItem>
<DescriptionItem label="上月供水总量(万m³)" myWidth={'20%'}>1.278</DescriptionItem>
<DescriptionItem label="本月总供水量(万m³)" myWidth={'20%'}>1.237</DescriptionItem>
<DescriptionItem label="近10日总共水量(万m³)" myWidth={'20%'}>0.417</DescriptionItem>
<DescriptionItem label="本年最大月供水量(万m³)" myWidth={'20%'}>2.249<span style={{color:"#e7b254"}}>(03月)</span></DescriptionItem>
</Grid>
</div>
</div>
)
}
export default DrpStAround

138
src/views/Home/components/Llsbjcsj/index.less Normal file
View File

@ -0,0 +1,138 @@
.infoDlg_jcsj{
display: flex;
flex-direction: column;
height: 100%;
.toolbar{
display: flex;
.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;
}
}
.search{
margin-left: 1.5rem;
border: 1px solid #0e4e93;
background: url(../../../../assets/btn44.png) no-repeat 100% center;
color: #fff;
padding: 0 1rem;
border-radius: 2px;
cursor: pointer;
}
}
.content{
height: 40vh;
margin-top: 1vh;
display: flex;
.list{
width: 40%;
}
.echart{
flex: 1;
}
}
.echartBox{
width: 60%;
.echart1{
width: 100%;
height: 100%;
}
}
.foot{
flex: 1;
margin-top: 15px;
.split-line{
width: 100%;
border: 1px dashed rgba(16, 102, 141);
opacity: .36;
margin-bottom: 15px;
}
.MuiGrid-container{
background-color: #182d42 !important;
}
}
}
.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;
}

16709
src/views/Home/components/Sqjcsj/constance.js Normal file
View File

File diff suppressed because it is too large Load Diff

217
src/views/Home/components/Sqjcsj/drpOption.js Normal file
View File

@ -0,0 +1,217 @@
export default function drpOption({ data, wrz, grz }) {
console.log("data",wrz);
const maxVal = Math.max(...data.map(obj => obj.drp))
const maxSw = Math.max(...data.map(obj => obj.beforeWl),...data.map(obj => obj.afterWl))
const minSw = Math.min(...data.map(obj => obj.beforeWl),...data.map(obj => obj.afterWl))
const maxLl = Math.max(...data.map(obj => obj.flow))
const minLl = Math.min(...data.map(obj => obj.flow))
return {
tooltip: {
trigger: 'axis',
},
grid: [
{
top: "15%",
left: "10%",
right: "8%",
width: '80%',
height: '35%'
},
{
bottom: "5.5%",
left: "10%",
right: "8%",
width: '80%',
height: '35%'
},
],
legend: {
// 显示图例
show: true,
textStyle: {
color: '#fff',
},
// 图例的位置
data: ['10厘米', '20厘米', "40厘米",'平均'],
},
xAxis: [
{
gridIndex: 0,
type: 'category',
data: data.map(o => o.tm).reverse(),
splitLine: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 12,
show:false,
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 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: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
inverse: false,
gridIndex: 0,
type: 'value',
position: 'left',
name: "闸开度",
nameTextStyle: {
color: '#fff'
},
nameLocation: "start",
axisLabel: {
color: '#fff',
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
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: '#07a6ff',
width: 0.25,
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: minLl,
max: maxLl
}
],
series: [
{
xAxisIndex: 1,
yAxisIndex: 1,
name: '10厘米',
type: 'line',
symbol: 'none',
color: "#0AE0B5",
label: {
show: false,
},
data: data.map(o => o.beforeWl),
},
{
xAxisIndex: 1,
yAxisIndex: 1,
name: '20厘米',
type: 'line',
symbol: 'none',
color: "#007AFD",
label: {
show: false,
},
data: data.map(o => o.afterWl),
},
{
xAxisIndex: 1,
yAxisIndex: 2,
name: '40厘米',
type: 'line',
color: "#007AFD",
symbol: 'none',
showSymbol: false,
label: {
show: false,
},
data: data.map(o => o.flow),
}
]
};
}

184
src/views/Home/components/Sqjcsj/index.js Normal file
View File

@ -0,0 +1,184 @@
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
import { DatePicker,Empty } from 'antd';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import DescriptionItem from '../DescrptionItem2';
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption';
import { DateTimePicker } from '@material-ui/pickers';
import React, { useEffect, useState,useMemo } from 'react';
import './index.less'
import { hdData, detailHdData, zzData } from './constance';
const { RangePicker } = DatePicker;
const useStyles = makeStyles({
tableContainer: {
background: '#182d42', // 设置表格容器的背景颜色
},
item: {
'& .MuiGrid-item': {
'& [class*="makeStyles-title"]': {
color: '#fff',
backgroundColor: '#104175',
},
},
},
});
const DpTableCell = withStyles({
head: {
backgroundColor: '#104175',
color: '#fff',
fontSize: '1rem',
padding: '0.5rem 0.3rem !important',
},
body: {
color: '#fff',
fontSize: '0.9rem',
padding: '0.7rem 0.3rem !important',
borderBottom: 'none',
position: "relative"
},
})(TableCell);
function DrpStAround({ record }) {
const classes = useStyles();
//今天日历数
const days=moment().diff(moment().startOf('year'),'days')+1
const [data, setData] = useState([]);
const [initialDateRange , setInitialDateRange] = useState({})
const [detail, setDetail] = useState({});
const [params, setParams] = useState({ tm: [] })
const option = useMemo(() => {
return drpOption({data,wrz:record.wrz,grz:record.grz});
}, [data])
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,
})
};
const doSearch = () => {
getData(params)
}
const getData = async (params) => {
// setData(zzData)
setDetail(detailHdData)
// setData(await monitor(params));
// setDetail(await getDetail({stcd:record.stcd,source:record.source,type:1}))
}
useEffect(() => {
let options = "";
options = {
stcd: record.stcd,
source: record.source,
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)
getData(options)
}, [record])
return (
<div className='infoDlg_jcsj'>
<div className='toolbar'>
<div className='tm' style={{position:"relative",zIndex:999999}}>
<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>
<button onClick={doSearch} className='search'>查询</button>
</div>
<div className='content' style={{height:"49vh",position:'relative'}}>
<div className='list'>
<TableContainer style={{ height: '100%' }} className={classes.tableContainer}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell align="center" style={{ width: '20%' }}>时间</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>10厘米土壤含水量(%)</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>20厘米土壤含水量(%)</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>40厘米土壤含水量(%)</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>垂线平均含水量(%)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{
data.length > 0 ? data.map((row) => (
<DpTableRow key={row.stnm}>
<DpTableCell align="center"><div className="ellipsis">{moment(row.tm).format('MM-DD HH')}</div></DpTableCell>
<DpTableCell align="center">{row.beforeWl?? "-"}</DpTableCell>
<DpTableCell align="center">{row.afterWl?? "-"}</DpTableCell>
{/* <DpTableCell align="center">{row.q?? "-"}</DpTableCell> */}
<DpTableCell align="center">{row.flow?? "-"}</DpTableCell>
</DpTableRow>
)) :
<Empty style={{ position: 'absolute', top: '150px', left: '130px' }} description={false}/>
}
</TableBody>
</Table>
</TableContainer>
</div>
<div className='echartBox'>
{data.length > 0 ? <div className='echart1'>
<ReactEcharts
option={option}
style={{ height: '100%' }}
/>
</div>:<Empty style={{marginTop:'20%'}} description={false}/>}
</div>
</div>
<div className='foot'>
{/* <div className='split-line'></div> */}
<Grid container size="small"
// className={classes.item}
>
<DescriptionItem label="30日最大平均含水量(%)" myWidth={'20%'}></DescriptionItem>
<DescriptionItem label="上月初平均含水量(%)" myWidth={'20%'}></DescriptionItem>
<DescriptionItem label="本月初平均含水量(%)" myWidth={'20%'}></DescriptionItem>
<DescriptionItem label="本月平均含水量变幅(%)" myWidth={'20%'}></DescriptionItem>
<DescriptionItem label="10日平均含水量变幅(%)" myWidth={'20%'}></DescriptionItem>
{/* <DescriptionItem label="近1h雨量(mm)" myWidth={'13%'}>{detail?.h1||0}</DescriptionItem>
<DescriptionItem label="近3h雨量(mm)" myWidth={'13%'}>{detail?.h3||0}</DescriptionItem>
<DescriptionItem label="近6h雨量(mm)" myWidth={'13%'}>{detail?.h6||0}</DescriptionItem>
<DescriptionItem label="近12h雨量(mm)" myWidth={'13%'}>{detail?.h12||0}</DescriptionItem>
<DescriptionItem label="近24h雨量(mm)" myWidth={'13%'}>{detail?.h24||0}</DescriptionItem>
<DescriptionItem label="本年降雨天数" myWidth={'18%'}><span style={{color:"#E69224"}}>{detail?.yearDrpDay}</span>/{days}</DescriptionItem>
<DescriptionItem label="24h水位变幅(m)" myWidth={'17%'}>{detail.rzDiff > 0 ? "+" :"" }{detail.rzDiff?detail.rzDiff.toFixed(2) : 0}</DescriptionItem>
<DescriptionItem label="近48h雨量(mm)" myWidth={'13%'}>{detail?.h48||0}</DescriptionItem>
<DescriptionItem label="今日雨量(mm)" myWidth={'13%'}>{detail.today || 0}</DescriptionItem>
<DescriptionItem label="昨日雨量(mm)" myWidth={'13%'}>{detail?.yesterdayDrp || 0}</DescriptionItem>
<DescriptionItem label="本月雨量(mm)" myWidth={'13%'}>{detail?.monthDrp || 0}</DescriptionItem>
<DescriptionItem label="本年雨量(mm)" myWidth={'13%'}>{detail?.yearDrp || 0}</DescriptionItem>
<DescriptionItem label="本年最大日雨量(mm)" myWidth={'18%'}>{detail.maxDrp||0}({moment(detail.maxDrpTime).format('MM-DD')})</DescriptionItem>
<DescriptionItem label="本年最高水位(m)" myWidth={'17%'}>{detail.maxRz ? detail.maxRz.toFixed(2) :0}</DescriptionItem> */}
</Grid>
</div>
</div>
)
}
export default DrpStAround

138
src/views/Home/components/Sqjcsj/index.less Normal file
View File

@ -0,0 +1,138 @@
.infoDlg_jcsj{
display: flex;
flex-direction: column;
height: 100%;
.toolbar{
display: flex;
.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;
}
}
.search{
margin-left: 1.5rem;
border: 1px solid #0e4e93;
background: url(../../../../assets/btn44.png) no-repeat 100% center;
color: #fff;
padding: 0 1rem;
border-radius: 2px;
cursor: pointer;
}
}
.content{
height: 40vh;
margin-top: 1vh;
display: flex;
.list{
width: 40%;
}
.echart{
flex: 1;
}
}
.echartBox{
width: 60%;
.echart1{
width: 100%;
height: 100%;
}
}
.foot{
flex: 1;
margin-top: 15px;
.split-line{
width: 100%;
border: 1px dashed rgba(16, 102, 141);
opacity: .36;
margin-bottom: 15px;
}
.MuiGrid-container{
background-color: #182d42 !important;
}
}
}
.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;
}

12
src/views/Home/panels/GqSta/OverallContent.js
View File

@ -116,23 +116,23 @@ export default function OverallContent({ data }) {
return (
<div className={classes.root}>
<div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'center',columnGap:40,alignItems:'center'}}>
<div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'center',columnGap:10,alignItems:'center'}}>
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>1234<span style={{fontSize:14}}>m³</span></div>
<div className="value" style={{ color: '#5ecd45' }}>1.12<span style={{fontSize:14}}>亿m³</span><span style={{ color: '#ce010e',fontSize:14,marginLeft:10 }}>同比↑15%</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>当日总引水量</div>
</div>
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>98.55<span style={{fontSize:14}}>%</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>设备在线率</div>
<div className="value" style={{ color: '#5ecd45' }}>92<span style={{fontSize:14}}>%</span><span style={{ color: '#ce010e',fontSize:14,marginLeft:10 }}>异常设备3台</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>量测设备在线率</div>
</div>
<div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
{/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ cursor: 'pointer', color: '#5ecd45' }}>9876<span style={{fontSize:14}}>m³</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>累计用水量</div>
</div>
<div style={{ padding:"15px 30px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>85.6<span style={{fontSize:14}}>%</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>渠系利用率</div>
</div>
</div> */}
</div>
</div>
)

328
src/views/Home/panels/GqWatch/constatData.js Normal file
View File

@ -0,0 +1,328 @@
const showData = [
{
"mvalue": null,
"wainWasoType": null,
"updserRsn": null,
"gtctrTp": null,
"updDate": "2025-01-07",
"chanCode": "420802001350",
"engStat": null,
"desTotInsCap": null,
"gateSize": "3*3*2，4*4*2",
"wagaCode": "HP0074208020000170",
"adCode": "420802102000000",
"adCode_dictText": "漳河镇",
"lgtd": 112.075597 -2.9619,
"updserInvst": null,
"engGrad": null,
"runStat": "1",
"irrCode_dictText": "水库枢纽",
"flow": null,
"bnch": "0+000",
"startLat": null,
"engScal": null,
"chanCode_dictText": "总干渠",
"lockDisc": null,
"wagaUse": null,
"engManCode_dictText": "副坝管理所",
"irrCode": "D00001300",
"sort": 1001,
"stcd": "4262630017",
"dsfl": 121,
"admDep": null,
"startDate": null,
"note": "年久失修，需配套更新",
"inEle": 110,
"pwrTp": "2",
"updserDate": null,
"engManCode": "ENG100051",
"chidCount": null,
"whthInWat_dictText": "是",
"lttd": 30.961122 - 0.2002,
"whthInWat": "1",
"hasImg": false,
"stfl": 131,
"endLat": null,
"wagaType": "6",
"endLong": null,
"gtctrTlmtCd": null,
"outEle": 110,
"pwrTp_dictText": "电动",
"wagaName": "渠首闸",
"wagaType_dictText": "进水闸",
"hdgrTp": "7",
"compDate": null,
"startLong": null,
"gaorNum": 8,
"runStat_dictText": "在用良好",
"gateTp": "平板钢闸门",
"hdgrTp_dictText": "7",
"insPow": null,
"collDate": "2022-09-15"
},
{
"mvalue": null,
"wainWasoType": null,
"updserRsn": "换启闭机",
"gtctrTp": null,
"updDate": "2023-08-31",
"chanCode": "420802001350",
"engStat": null,
"desTotInsCap": null,
"gateSize": "3*2.8",
"wagaCode": "HP0074208020000185",
"adCode": "420802102000000",
"adCode_dictText": "漳河镇",
"lgtd": 112.078158 -2.9619,
"updserInvst": null,
"engGrad": null,
"runStat": "1",
"irrCode_dictText": "总干渠",
"flow": null,
"bnch": "0+920",
"startLat": null,
"engScal": null,
"chanCode_dictText": "总干渠",
"lockDisc": null,
"wagaUse": null,
"engManCode_dictText": "烟墩管理段",
"irrCode": "D00000290",
"sort": 1002,
"stcd": "0000000004",
"dsfl": 50,
"admDep": null,
"startDate": null,
"note": null,
"inEle": 108,
"pwrTp": "2",
"updserDate": "2014-01-01",
"engManCode": "ENG100035",
"chidCount": 1,
"whthInWat_dictText": "是",
"lttd": 30.953845 -0.2002,
"whthInWat": "1",
"hasImg": true,
"stfl": 32,
"endLat": null,
"wagaType": "1",
"endLong": null,
"gtctrTlmtCd": null,
"outEle": 108,
"pwrTp_dictText": "电动",
"wagaName": "二干渠进水闸",
"wagaType_dictText": "分水闸",
"hdgrTp": "2",
"compDate": "1966-01-01",
"startLong": null,
"gaorNum": 1,
"runStat_dictText": "在用良好",
"gateTp": "平板",
"hdgrTp_dictText": "螺杆式",
"insPow": null,
"collDate": "2022-09-15"
},
{
"mvalue": null,
"wainWasoType": null,
"engGrad_dictText": "Ⅱ",
"updserRsn": "闸门漏水严重",
"gtctrTp": null,
"updDate": "2023-03-22",
"chanCode": "420802001350",
"engStat": null,
"desTotInsCap": null,
"gateSize": "5.6*3",
"wagaCode": "HP007420804000188X",
"adCode": "420804004213000",
"adCode_dictText": "车桥村",
"lgtd": 112.118889 -2.9619,
"updserInvst": 20,
"engGrad": "2",
"runStat": "1",
"irrCode_dictText": "总干渠",
"flow": null,
"bnch": "7+670",
"startLat": null,
"engScal": "2",
"chanCode_dictText": "总干渠",
"lockDisc": null,
"wagaUse": null,
"engManCode_dictText": "车桥管理段",
"irrCode": "D00000290",
"sort": 1003,
"stcd": "4263630188",
"dsfl": 140,
"admDep": null,
"startDate": null,
"note": null,
"inEle": 109.33,
"pwrTp": "3",
"updserDate": "2010-01-01",
"engManCode": "ENG100037",
"chidCount": null,
"whthInWat_dictText": "否",
"lttd": 30.974167 - 0.2002,
"whthInWat": "2",
"hasImg": false,
"stfl": 5,
"endLat": null,
"wagaType": "2",
"endLong": null,
"gtctrTlmtCd": null,
"outEle": 99.5,
"pwrTp_dictText": "手电两用",
"wagaName": "车桥泄洪闸",
"wagaType_dictText": "泄洪闸",
"hdgrTp": "2",
"compDate": "1963-06-01",
"startLong": null,
"gaorNum": 4,
"runStat_dictText": "在用良好",
"gateTp": null,
"hdgrTp_dictText": "螺杆式",
"insPow": null,
"collDate": "2022-09-15"
},
]
const bzData = [
{
"note": null,
"inEle": null,
"mainBuildGrad": null,
"pustType": null,
"updserDate": null,
"engManCode": "ENG200038",
"wasuRang": "生态用水",
"wainWasoType": null,
"lttd": 30.97131 - 0.2002,
"updserRsn": null,
"updDate": "2023-03-21",
"pustCode": "HP0104208040001543",
"chanCode": "420802001350",
"engStat": null,
"startRunDate": null,
"pustName": "生态取水点1",
"stfl": 0.1,
"adCode": "420804004000000",
"adCode_dictText": "双喜街道办事处",
"lgtd": 112.18575 -2.9619,
"actIrrA": null,
"updserInvst": null,
"engGrad": null,
"irrCode_dictText": "总干渠",
"engTask": null,
"bnch": "16+870",
"engScal": null,
"pumpSetNum": 2,
"insFlow": null,
"chanCode_dictText": "总干渠",
"desIrrA": null,
"engManCode_dictText": "村(镇)",
"pumpNum": null,
"irrCode": "D00000290",
"sort": 101,
"desHead": 15,
"compDate": "2013-11-01",
"totInsCap": 8,
"serCod": "正常",
"dsfl": 0.1,
"insPow": null,
"admDep": null,
"startDate": null,
"collDate": "2022-08-23"
},
{
"note": null,
"inEle": null,
"mainBuildGrad": null,
"pustType": null,
"updserDate": null,
"engManCode": "ENG200038",
"wasuRang": "生态用水",
"wainWasoType": null,
"lttd": 30.96613 -0.2002,
"updserRsn": null,
"updDate": "2023-03-21",
"pustCode": "HP0104208040001558",
"chanCode": "420802001350",
"engStat": null,
"startRunDate": null,
"pustName": "生态取水点2",
"stfl": 0.1,
"adCode": "420804001003000",
"adCode_dictText": "白石坡社区",
"lgtd": 112.19441 -2.9619,
"actIrrA": null,
"updserInvst": null,
"engGrad": null,
"irrCode_dictText": "总干渠",
"engTask": null,
"bnch": "18+000",
"engScal": null,
"pumpSetNum": 3,
"insFlow": null,
"chanCode_dictText": "总干渠",
"desIrrA": null,
"engManCode_dictText": "村(镇)",
"pumpNum": null,
"irrCode": "D00000290",
"sort": 102,
"desHead": 15,
"compDate": "2009-08-01",
"totInsCap": 22.5,
"serCod": "正常",
"dsfl": 0.1,
"insPow": null,
"admDep": null,
"startDate": null,
"collDate": "2022-08-23"
},
{
"note": "年久失修",
"inEle": null,
"mainBuildGrad": null,
"pustType": null,
"updserDate": null,
"engManCode": "ENG200038",
"wasuRang": "车桥三组",
"wainWasoType": null,
"lttd": 30.972222 -0.2002,
"updserRsn": null,
"updDate": "2023-03-21",
"pustCode": "HP0104208040001467",
"chanCode": "420802001350",
"engStat": null,
"startRunDate": null,
"pustName": "车桥泵站1 ",
"stfl": 0.1,
"adCode": "420804004213000",
"adCode_dictText": "车桥村",
"lgtd": 112.121667 - 2.9619,
"actIrrA": 40,
"updserInvst": null,
"engGrad": null,
"irrCode_dictText": "总干渠",
"engTask": null,
"bnch": "8+155",
"engScal": null,
"pumpSetNum": 1,
"insFlow": null,
"chanCode_dictText": "总干渠",
"desIrrA": null,
"engManCode_dictText": "村(镇)",
"pumpNum": null,
"irrCode": "D00000290",
"sort": 103,
"desHead": 8,
"compDate": "1982-07-01",
"totInsCap": 4,
"serCod": "异常",
"dsfl": 0.1,
"insPow": null,
"admDep": null,
"startDate": null,
"collDate": "2022-08-23"
},
]
export { showData,bzData }

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

@ -17,7 +17,7 @@ import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import { showData,bzData} from './constatData'
function rzRender(rz, base) {
return (
@ -31,38 +31,14 @@ 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 t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const showData = Array(10).fill(0).map((o,i) => ({
id:`#${i + 1}`,
status: Math.floor(Math.random() * (4 - 0 + 1)) + 0,
kd: (Math.random() * 100).toFixed(2),
ll:(Math.random() * 100).toFixed(1)
}))
const flyTo = (record) => {
const flyTo = (record,type) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
@ -70,51 +46,27 @@ function HDReal({ style }) {
});
}
}
const [type, setType] = useState('sz')
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
setType(type)
}
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
}
return (
<PanelBox
style={style}
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 == 'sz' })} onClick={() => toggleStType('sz')}>水闸</span>
<span className={clsx({ active: type == 'bz' })} onClick={() => toggleStType('bz')}>泵站</span>
</span>
}
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
@ -122,43 +74,62 @@ function HDReal({ style }) {
</>
}
>
{
type == 'sz' ?
<TableContainer style={{ height: '100%' }}>
<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%' }}>过闸流量(m³/s)</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>泵站运行状态</DpTableCell>
<DpTableCell style={{ width: '40%' }} align="center">水闸名称</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">类型</DpTableCell>
<DpTableCell align="center" style={{ width: '40%' }}>所在灌区</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
>{row.id}</div>
<DpTableRow key={row.id} onClick={() => flyTo(row,'sz')}>
<DpTableCell align="center">
{row.wagaName}
</DpTableCell>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
// onClick={() => flyTo(row)}
>{row.kd}</div>
<DpTableCell align="center">
{row.wagaType_dictText}
</DpTableCell>
<DpTableCell align="center">{row.ll}</DpTableCell>
<DpTableCell align="center">{renderStatus(row)}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
<DpTableCell align="center">{row.irrCode_dictText}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
:
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '40%' }} align="center">泵站名称</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">工程类别</DpTableCell>
<DpTableCell align="center" style={{ width: '40%' }}>所在灌区</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{bzData.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row,'bz')}>
<DpTableCell align="center">
{row.pustName}
</DpTableCell>
<DpTableCell align="center">
{row.pustType}
</DpTableCell>
<DpTableCell align="center">{row.irrCode_dictText}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
{/* {
setting && <Setting onClose={() => showSetting(false)} />
} */}
</PanelBox>
)
}

6
src/views/Home/panels/Gqbl/OverallContent.js
View File

@ -47,13 +47,13 @@ export default function OverallContent({ data }) {
// ],
data: [{
value: 1,
name: '东部灌区'
name: '东干渠'
},{
value: 3,
name: '西部灌区'
name: '西干渠'
},{
value: 8,
name: '南部灌区'
name: '邓家河干渠'
}],
label: {
normal: {

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

@ -11,7 +11,7 @@ export default function Overall({ style }) {
return (
<PanelBox
style={style}
title="渠道分配比例"
title="干渠分配比例"
color="green"
>
<OverallContent data={data} />

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

@ -51,10 +51,15 @@ function HDReal({ style }) {
// });
// return ret;
// }, [data, tableRzFilter]);
const obj = {
0: '东干渠',
1: '西干渠',
2:'邓家河干渠'
}
const showData = Array(10).fill(0).map((o,i) => ({
id: `#${i + 1}`,
type:`灌区${Math.floor(Math.random() * (5 - 1 + 1)) + 1}`,
type:obj[i % 2],
status: '--',
kd: (Math.random() * 100).toFixed(2),
ll:(Math.random() * 100).toFixed(1)
@ -108,7 +113,7 @@ function HDReal({ style }) {
return (
<PanelBox
style={style}
title="实时调度方案"
title="调度监控"
color="green"
// tabs={
// <span className="button-group">

2
src/views/Home/panels/Gqyqs/OverallContent.js
View File

@ -91,7 +91,7 @@ export default function OverallContent({ data }) {
type: 'value',
min: 0,
// max: 140,
name: '月用水(%)',
name: '万(m³)',
nameTextStyle: {
fontSize: 14,
color: '#ffffff', // 文字颜色

36
src/views/Home/panels/HDWatch/index.js
View File

@ -48,6 +48,7 @@ function HDReal({ style }) {
});
return ret;
}, [data, tableRzFilter]);
console.log("showData",showData);
const flyTo = (record) => {
const { lgtd, lttd } = record;
@ -60,10 +61,11 @@ function HDReal({ style }) {
});
}
}
const [type, setType] = useState('hd')
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
setType(type)
// const visible = !tableRzFilter[type];
// dispatch.realview.setTableRzFilter({ [type]: visible });
}
const toggleAutoRefresh = () => {
@ -77,8 +79,8 @@ function HDReal({ style }) {
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 className={clsx({ active: type == 'hd' })} onClick={() => toggleStType('hd')}>河道</span>
<span className={clsx({ active: type == 'qd'})} onClick={() => toggleStType('qd')}>渠道</span>
</span>
}
extra={
@ -88,7 +90,8 @@ function HDReal({ style }) {
</>
}
>
<TableContainer style={{ height: '100%' }}>
{
type == 'hd' ?<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
@ -111,10 +114,27 @@ function HDReal({ style }) {
))}
</TableBody>
</Table>
</TableContainer> :<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ maxWidth: '30%' }} align="left">名称</DpTableCell>
<DpTableCell align="right">水位</DpTableCell>
<DpTableCell align="right">保证水位</DpTableCell>
<DpTableCell align="right">警戒水位</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
{/* {
setting && <Setting onClose={() => showSetting(false)} />
} */}
</PanelBox>
)
}

164
src/views/Home/panels/LlWatch/constant.js Normal file
View File

@ -0,0 +1,164 @@
const data =[
{
"addvcd": "420800000000000",
"moditime": "2022-10-01 21:00:00",
"comments": "水资源多孔闸门控制系统",
"src": "zhzj",
"esstym": "",
"mvalue": {
"formatTm": null,
"formatHq": "0.000",
"vol": 0,
"formatAccq": null,
"stcd": "4211221029",
"rz": 1.129,
"tm": "2025-05-26 11:00",
"hq": 0,
"fr": null,
"chan": "1",
"accq": 120057496
},
"lttd": 31.240848 -0.2002,
"sttp": "QQ",
"irrCode": "D00001300",
"sort": 6001,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "4211221029",
"stnm": "口泉测流站",
"addvcd_dictText": "荆门市",
"lgtd": 111.826413 - 2.9619,
"irrCode_dictText": "水库枢纽",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-10-26 21:00:00",
"comments": "水资源多孔闸门控制系统",
"src": "zhzj",
"mvalue": {
"formatTm": null,
"formatHq": "0.000",
"vol": 0,
"formatAccq": null,
"stcd": "4211221030",
"rz": 0.869,
"tm": "2025-05-26 11:00",
"hq": 0,
"fr": null,
"chan": "1",
"accq": 159077248
},
"lttd": 31.249561,
"sttp": "QQ",
"irrCode": "D00001300",
"sort": 6002,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "4211221030",
"stnm": "苍坪测流站",
"addvcd_dictText": "荆门市",
"lgtd": 111.866217 -2.9619,
"irrCode_dictText": "水库枢纽",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-06-26 21:00:00",
"comments": "水资源多孔闸门控制系统",
"src": "zhzj",
"mvalue": {
"formatTm": null,
"formatHq": "3.838",
"vol": 11104,
"formatAccq": null,
"stcd": "4208820100",
"rz": 2.331,
"tm": "2025-05-26 11:00",
"hq": 3.838,
"fr": null,
"chan": "1",
"accq": 377902272
},
"lttd": 30.959561 - 0.2002,
"sttp": "QQ",
"irrCode": "D00000290",
"sort": 6030,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 110.042,
"stcd": "4208820100",
"stnm": "渠首时差法流量站",
"addvcd_dictText": "荆门市",
"lgtd": 112.077549 -2.9619,
"irrCode_dictText": "总干渠",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"comments": "水资源多孔闸门控制系统",
"src": "zhzj",
"mvalue": {
"formatTm": null,
"formatHq": "0.000",
"vol": 0,
"formatAccq": null,
"stcd": "4211223302",
"rz": 0,
"tm": "2025-05-26 11:00",
"hq": 0,
"fr": null,
"chan": "0",
"accq": null
},
"lttd": 30.946457 -0.2002,
"sttp": "QQ",
"irrCode": "D00000300",
"sort": 6031,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "4211223302",
"stnm": "二干进口流量",
"addvcd_dictText": "荆门市",
"lgtd": 112.07475 -2.9619,
"irrCode_dictText": "二干渠",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2023-04-04 17:06:30",
"comments": "水资源多孔闸门控制系统,2023-04-25楚禹公司提供高程,2023-05-23楚禹重新调整了高程",
"src": "zhzj",
"esstym": "",
"mvalue": {
"formatTm": null,
"formatHq": "0.000",
"vol": 0,
"formatAccq": null,
"stcd": "4208820200",
"rz": 1.464,
"tm": "2025-05-26 11:00",
"hq": 0,
"fr": null,
"chan": "1",
"accq": 151531776
},
"lttd": 30.964597 - 0.2002,
"sttp": "QQ",
"irrCode": "D00000020,D00000290",
"sort": 6032,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 108.487,
"stcd": "4208820200",
"stnm": "三干渠进口时差法",
"addvcd_dictText": "荆门市",
"lgtd": 112.190279 -2.9619,
"irrCode_dictText": "三干渠,总干渠",
"bsnm": "漳河流域"
}]
export default data;

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

@ -18,7 +18,7 @@ import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import showData from './constant'
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
@ -53,19 +53,50 @@ 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),
kd: (Math.random() * 1).toFixed(2),
ll:(Math.random() * 1).toFixed(1)
}))
// const showData = Array(10).fill(0).map((o,i) => ({
// id:i + 1,
// time: moment()
// .subtract(i * 60 + randomMinutes, 'minutes')
// .format(format),
// kd: (Math.random() * 1).toFixed(2),
// ll:(Math.random() * 1).toFixed(1)
// }))
const sbData = [
{
type: '工业',
time: '2025-05-26 10:00',
stcd: 42000002,
stnm: '热电厂',
water:30,
flow: 0.222,
"lttd": 30.959561,
"lgtd": 112.077549,
const flyTo = (record) => {
},
{ water:12,
type: '工业',
stcd: 42000001,
time: '2025-05-26 10:00',
stnm: '福繕泪耀玻璃',
flow: 0.355,
"lttd": 30.959561,
"lgtd": 112.077549,
}, {
water:21,
type: '工业',
time: '2025-05-26 10:00',
stnm: '格林美',
flow: 0.09,
"lttd": 30.959561,
"lgtd": 112.077549,
stcd: 42000005
}
]
const flyTo = (record,type) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
@ -74,50 +105,30 @@ function HDReal({ style }) {
}
}
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const [type, setType] = useState('sb')
const toggleStType = (type) => {
setType(type)
}
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
}
return (
<PanelBox
style={style}
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 == 'sb' })} onClick={() => toggleStType('sb')}>水表</span>
<span className={clsx({ active: type == 'qd' })} onClick={() => toggleStType('qd')}>渠道</span>
</span>
}
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
@ -125,33 +136,68 @@ function HDReal({ style }) {
</>
}
>
<TableContainer style={{ height: '100%' }}>
{
type == 'qd' ?
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '10%' }} align="left">序号</DpTableCell>
<DpTableCell style={{ width: '40%' }} align="left">数据时间</DpTableCell>
<DpTableCell style={{ width: '30%' }} align="center">站点名称</DpTableCell>
<DpTableCell style={{ width: '30%' }} align="center">时间</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>水深(m)</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>流量(m³/s)</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>水量(m³)</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id}>
<DpTableRow key={row.id} onClick={() => flyTo(row,'渠道流量站')}>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
>{row.id}</div>
>{row.stnm}</div>
</DpTableCell>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
// onClick={() => flyTo(row)}
>{row.time}</div>
>{row.mvalue.tm}</div>
</DpTableCell>
<DpTableCell align="center">{row.ll}</DpTableCell>
<DpTableCell align="center">{row.kd}</DpTableCell>
<DpTableCell align="center">{row.mvalue.rz??'--'}</DpTableCell>
<DpTableCell align="center">{row.mvalue.formatHq??"--"}</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: '30%' }} align="center">站点名称</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>类型</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">时间</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>流量(m³/s)</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{sbData.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row,'流量水表站')}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
// onClick={() => flyTo(row)}
>{row.type}</div>
</DpTableCell>
<DpTableCell align="center">{row.time}</DpTableCell>
<DpTableCell align="center">{row.flow}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
@ -159,6 +205,7 @@ function HDReal({ style }) {
</TableBody>
</Table>
</TableContainer>
}
{
setting && <Setting onClose={() => showSetting(false)} />
}

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

@ -31,7 +31,7 @@ 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 t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
@ -51,63 +51,19 @@ function HDReal({ style }) {
// });
// return ret;
// }, [data, tableRzFilter]);
const randomMinutes = Math.floor(Math.random() * 60) + 1;
const format = 'YYYY-MM-DD HH:mm';
const SOIL_STATIONS = [
{
id: 1,
name: '宋埠镇站',
location: {
lat: 31.1725,
lng: 115.0139
}
},
{
id: 2,
name: '乘马岗镇站',
location: {
lat: 31.2503,
lng: 115.1242
}
},
{
id: 3,
name: '白果镇站',
location: {
lat: 31.0958,
lng: 115.2417
}
},
{
id: 4,
name: '福田河站',
location: {
lat: 31.1847,
lng: 115.1536
}
},
{
id: 5,
name: '黄土岗镇站',
location: {
lat: 31.2158,
lng: 115.0825
}
}
];
const showData = Array(10).fill(0).map((o, i) => ({
stnm:SOIL_STATIONS[i%2]?.name,
id:i + 1,
time: moment()
.subtract(i * 60 + randomMinutes, 'minutes')
.format(format),
sd: (Math.random() * 100).toFixed(2),
const showData = Array(1).fill(0).map((o, i) => ({
"lgtd": 112.071,
"lttd": 30.9641,
"tm": "2025-03-21 08",
"doxLevelStr": "Ⅰ类",
stnm:'水质站'
}))
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setFeaturePop({ type: '水质站', properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
@ -132,12 +88,6 @@ function HDReal({ style }) {
style={style}
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>
// }
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
@ -145,7 +95,32 @@ function HDReal({ style }) {
</>
}
>
<img src={process.env.PUBLIC_URL + '/assets/sz.png'} alt="" style={{width:'100%',height:'97%'}}/>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow >
<DpTableCell style={{ width: '40%' }} align="center">站点名称</DpTableCell>
<DpTableCell style={{ width: '30%' }} align="center">时间</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>水质类别</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="center">{row.tm}</DpTableCell>
<DpTableCell align="center">{row.doxLevelStr}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PanelBox>
)
}

67
src/views/Home/panels/Szzdd/index.js
View File

@ -2,6 +2,7 @@ import React,{useState} from 'react'
import PanelBox from '../../components/PanelBox';
import MiniSinglePie from './MiniSinglePie'
import clsx from 'clsx';
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core/index';
export default function GQ({ style }) {
const v1 = 20;
@ -11,7 +12,8 @@ export default function GQ({ style }) {
const v3 = 650;
const v4 = 800;
const r2 = (v3 * 100 / v4).toFixed(1);
const [selected, setSelected] = useState(1)
const [selected, setSelected] = useState(1)
const [dimension, setDimension] =useState('waterUsage');
return (
<PanelBox
style={style}
@ -21,40 +23,49 @@ export default function GQ({ style }) {
<span className="button-group">
<span className={clsx({active:selected == 1})} onClick={() => setSelected(1)}>供蓄水</span>
<span className={clsx({active:selected == 2})} onClick={() => setSelected(2)}>蓄水</span>
<span className={clsx({active:selected == 3})} onClick={() => setSelected(3)}>警情</span>
</span>
}
extra={
<i className="ionicons gear"></i>
}
>
<div style={{ display: 'flex', height: '100%' }}>
<div style={{ width: '50%', padding: '0.5rem', display: 'flex', flexDirection: 'column', color: '#ccc', fontSize: '1rem', lineHeight: 1.2 }}>
<div style={{ flexGrow: 1 }}>
<MiniSinglePie name="开机率" value={r} color="#b6e8d9" />
<div style={{ width: '100%', height: '100%' }}>
<div style={{
display: 'flex',
justifyContent: 'flex-end',
marginTop: '10px',
paddingRight: '20px'
}}>
<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="waterUsage">浮桥河灌区</MenuItem>
</Select>
</FormControl>
</div>
<div style={{ display: 'flex', alignItems: 'baseline' }}>
<div style={{ width: '50%', textAlign: 'right' }}>排涝泵站数</div>
<div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v1}</div>
</div>
<div style={{ display: 'flex', alignItems: 'baseline' }}>
<div style={{ width: '50%', textAlign: 'right' }}>泵站数</div>
<div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v2}</div>
</div>
</div>
<div style={{ width: '50%', padding: '0.5rem', display: 'flex', flexDirection: 'column', color: '#ccc', fontSize: '1rem', lineHeight: 1.2 }}>
<div style={{ flexGrow: 1 }}>
<MiniSinglePie name="开机功率" value={r2} color="#fab7b7" />
</div>
<div style={{ display: 'flex', alignItems: 'baseline' }}>
<div style={{ width: '50%', textAlign: 'right' }}>开机功率</div>
<div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v3}kw</div>
</div>
<div style={{ display: 'flex', alignItems: 'baseline' }}>
<div style={{ width: '50%', textAlign: 'right' }}>总功率</div>
<div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v4}kw</div>
</div>
</div>
</div>
<img src={`${process.env.PUBLIC_URL}/assets/${selected == 1 ? 'useW':selected == 2 ?'xs':'warning'}.png`} alt="" style={{width:421,height:'100%'}}/>
</div>
</PanelBox>
)
}

157
src/views/Home/panels/TrWatch/constant.js Normal file
View File

@ -0,0 +1,157 @@
const data = [
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"comments": "漳河遥测",
"src": "zhzj",
"esstym": "",
"mvalue": {
"slmmmt": null,
"slm60": 0,
"exkey": "@",
"slm80": 0,
"hitrsn": null,
"crpty": null,
"crpgrwprd": null,
"srlslm": null,
"stcd": "ZH201417",
"slm10": 24,
"slm20": 5.3,
"slm30": 44.3,
"slm40": 44.3,
"tm": "2024-08-03 05:00",
"slm100": 0,
"vtavslm": null,
"slmAvg": 24.5
},
"lttd": 30.8456 -0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201417",
"stnm": "马山二组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2321 -2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"comments": "漳河遥测",
"src": "zhzj",
"esstym": "",
"mvalue": {
"slmmmt": null,
"slm60": 0,
"exkey": "@",
"slm80": 0,
"hitrsn": null,
"crpty": null,
"crpgrwprd": null,
"srlslm": null,
"stcd": "ZH201421",
"slm10": 12.1,
"slm20": 16.2,
"slm30": 12.8,
"slm40": 12.8,
"tm": "2024-08-15 08:00",
"slm100": 0,
"vtavslm": null,
"slmAvg": 13.7
},
"lttd": 30.8446 -0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201421",
"stnm": "槐桥四组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.203 -2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"src": "zhzj",
"esstym": "",
"mvalue": {
"slmmmt": null,
"slm60": 0,
"exkey": "@",
"slm80": 0,
"hitrsn": null,
"crpty": null,
"crpgrwprd": null,
"srlslm": null,
"stcd": "ZH201418",
"slm10": 16.5,
"slm20": 12.5,
"slm30": 0,
"slm40": 0,
"tm": "2024-09-19 11:00",
"slm100": 0,
"vtavslm": null,
"slmAvg": 14.5
},
"lttd": 30.8866 -0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201418",
"stnm": "双碑一组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2006 -2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"comments": "水资源多孔闸门控制系统",
"src": "zhzj",
"esstym": "",
"mvalue": {
"slmmmt": null,
"slm60": null,
"exkey": "@",
"slm80": null,
"hitrsn": null,
"crpty": null,
"crpgrwprd": null,
"srlslm": null,
"stcd": "4211221031",
"slm10": 31,
"slm20": 42.6,
"slm30": null,
"slm40": 26.6,
"tm": "2025-05-26 09:00",
"slm100": null,
"vtavslm": null,
"slmAvg": 33.4
},
"lttd": 30.904191 -0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"stcd": "4211221031",
"stnm": "试验站墒情",
"addvcd_dictText": "荆门市",
"lgtd": 112.087806 -2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
}
]
export default data;

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

@ -18,7 +18,7 @@ import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import showData from './constant'
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
@ -95,19 +95,19 @@ function HDReal({ style }) {
}
}
];
const showData = Array(10).fill(0).map((o, i) => ({
stnm:SOIL_STATIONS[i%2]?.name,
id:i + 1,
time: moment()
.subtract(i * 60 + randomMinutes, 'minutes')
.format(format),
sd: (Math.random() * 100).toFixed(2),
}))
// const showData = Array(10).fill(0).map((o, i) => ({
// stnm:SOIL_STATIONS[i%2]?.name,
// id:i + 1,
// time: moment()
// .subtract(i * 60 + randomMinutes, 'minutes')
// .format(format),
// sd: (Math.random() * 100).toFixed(2),
// }))
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setFeaturePop({ type: '墒情站', properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
@ -125,29 +125,7 @@ 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
}
return (
<PanelBox
@ -171,29 +149,28 @@ function HDReal({ style }) {
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '10%' }} align="left">序号</DpTableCell>
<DpTableCell style={{ width: '30%' }} align="left">站点</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>湿度</DpTableCell>
<DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">站点名称</DpTableCell>
<DpTableCell style={{ width: '30%' }} align="center">所在罐区</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>时间</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>含水量(%)</DpTableCell>
{/* <DpTableCell align="right">警戒水位</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>
</DpTableCell>
<DpTableCell component="th" scope="row">
<div
className="table-ellipsis cursor-pointer"
// onClick={() => flyTo(row)}
>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="center">{row.sd}</DpTableCell>
<DpTableCell align="center">{row.time}</DpTableCell>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>实验站</div>
</DpTableCell>
<DpTableCell align="center">{row.mvalue.tm}</DpTableCell>
<DpTableCell align="center">{row.mvalue.slmAvg}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>

51
src/views/Home/panels/YaRes/Setting.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

157
src/views/Home/panels/YaRes/constant.js Normal file
View File

@ -0,0 +1,157 @@
const data = [
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"comments": "漳河遥测",
"src": "zhzj",
"esstym": "",
"mvalue": {
"slmmmt": null,
"slm60": 0,
"exkey": "@",
"slm80": 0,
"hitrsn": null,
"crpty": null,
"crpgrwprd": null,
"srlslm": null,
"stcd": "ZH201417",
"slm10": 24,
"slm20": 5.3,
"slm30": 44.3,
"slm40": 44.3,
"tm": "2024-08-03 05:00",
"slm100": 0,
"vtavslm": null,
"slmAvg": 24.5
},
"lttd": 30.8456,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201417",
"stnm": "马山二组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2321,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"comments": "漳河遥测",
"src": "zhzj",
"esstym": "",
"mvalue": {
"slmmmt": null,
"slm60": 0,
"exkey": "@",
"slm80": 0,
"hitrsn": null,
"crpty": null,
"crpgrwprd": null,
"srlslm": null,
"stcd": "ZH201421",
"slm10": 12.1,
"slm20": 16.2,
"slm30": 12.8,
"slm40": 12.8,
"tm": "2024-08-15 08:00",
"slm100": 0,
"vtavslm": null,
"slmAvg": 13.7
},
"lttd": 30.8446,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201421",
"stnm": "槐桥四组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.203,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"src": "zhzj",
"esstym": "",
"mvalue": {
"slmmmt": null,
"slm60": 0,
"exkey": "@",
"slm80": 0,
"hitrsn": null,
"crpty": null,
"crpgrwprd": null,
"srlslm": null,
"stcd": "ZH201418",
"slm10": 16.5,
"slm20": 12.5,
"slm30": 0,
"slm40": 0,
"tm": "2024-09-19 11:00",
"slm100": 0,
"vtavslm": null,
"slmAvg": 14.5
},
"lttd": 30.8866,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201418",
"stnm": "双碑一组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2006,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-05-01 21:00:00",
"comments": "水资源多孔闸门控制系统",
"src": "zhzj",
"esstym": "",
"mvalue": {
"slmmmt": null,
"slm60": null,
"exkey": "@",
"slm80": null,
"hitrsn": null,
"crpty": null,
"crpgrwprd": null,
"srlslm": null,
"stcd": "4211221031",
"slm10": 31,
"slm20": 42.6,
"slm30": null,
"slm40": 26.6,
"tm": "2025-05-26 09:00",
"slm100": null,
"vtavslm": null,
"slmAvg": 33.4
},
"lttd": 30.904191,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"stcd": "4211221031",
"stnm": "试验站墒情",
"addvcd_dictText": "荆门市",
"lgtd": 112.087806,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
}
]
export default data;

222
src/views/Home/panels/YaRes/index.js Normal file
View File

@ -0,0 +1,222 @@
import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
// import showData from './constant'
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
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);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const randomMinutes = Math.floor(Math.random() * 60) + 1;
const format = 'YYYY-MM-DD HH:mm';
const showData = [
{
stnm: '尼尔基坝上',
rz: '215.74',
maxF: '7170',
cxTime: '08-17 08时',
ffTime:'08-23 20时'
},
{
stnm: '同盟',
rz: '170.30',
maxF: '10300',
cxTime: '08-20 20时',
ffTime:'08-20 20时'
}
]
const resData = [
{
stnm: '福田河镇',
area:"200",
rz: '215.74',
maxF: '7170',
cxTime: '08-17 08时',
ffTime:'08-23 20时'
},
{
stnm: '顺河镇',
area: '300',
maxF: '10300',
cxTime: '08-20 20时',
ffTime:'08-20 20时'
}
]
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: '墒情站', properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
return (
<PanelBox
style={style}
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>
// }
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<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>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.rz}</div>
</DpTableCell>
<DpTableCell align="center">{row.maxF}</DpTableCell>
<DpTableCell align="center">{row.cxTime}</DpTableCell>
<DpTableCell align="center">{row.ffTime}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
<div className='foot-content' style={{display:'flex',justifyContent:'space-around',color:"#fff",marginTop:30,marginBottom:20}}>
<div className='fxdj' style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
<div style={{color:'#41cbf1',fontSize:24}}>风险等级</div>
<div style={{color:'#41cbf1',fontSize:20,marginTop:10}}>一般</div>
</div>
<div className='ymyx' style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
<div style={{color:'#41cbf1',fontSize:24}}>淹没影响</div>
<div style={{display:'flex',justifyContent:'space-around',columnGap:10}}>
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
<div style={{color:'#41cbf1',fontSize:20}}>2个</div>
<div style={{fontSize:16}}>淹没乡镇数</div>
</div>
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
<div style={{color:'#41cbf1',fontSize:20}}>0.5km2</div>
<div style={{fontSize:16}}>淹没总面积</div>
</div>
</div>
</div>
</div>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '50%' }} align="center">乡镇名称</DpTableCell>
<DpTableCell style={{ width: '50%' }} align="center">影响面积/m2</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{resData.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.area}</div>
</DpTableCell>
{/* <DpTableCell align="center">{row.maxF}</DpTableCell>
<DpTableCell align="center">{row.cxTime}</DpTableCell>
<DpTableCell align="center">{row.ffTime}</DpTableCell> */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;

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

@ -13,29 +13,51 @@ import ARzSk from './ARzSk';
import Hdyj from './Hdyj';
import Shqx from './Shqx';
import ShYj from './ShYj';
import { styled } from '@material-ui/styles';
import { RadioGroup, FormControlLabel, Radio, FormControl, FormLabel } from '@material-ui/core/index';
export default function Warn({ style }) {
const t = useRefresh(60 * 1000);
const dispatch = useDispatch();
const warnType = useSelector(s => s.overallview.warnType);
const [yyfaObj, setYyfaObj] = useState({})
const { data: shyjData } = useRequest(RealShWarnListPromise.get, t);
const { data: bxData } = useRequest(OverallPromise.get, t);
const { data: hdyj } = useRequest(hdyjUnclose, t);
const { data: shqx } = useRequest(ShqxYjhisLatest.get, t);
const [value, setValue] = React.useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const StyledFormControlLabel = styled(FormControlLabel)({
display: 'flex',
// justifyContent: 'space-around',
width: '100%',
margin: '4px 0',
padding: '4px 0',
'.MuiFormControlLabel-label': {
color: '#fff',
order: -1 // 让文字在前面
},
'.MuiRadio-root': {
color: '#fff',
padding: '4px'
}
});
return (
<PanelBox
style={style}
title="预演方案"
color="green"
tabs={
<span style={{marginLeft:'70%', cursor:'pointer',color:'#0066e4',padding:'4px 6px', border:'1px solid #175898'}}>方案预演</span>
}
>
{warnType === 'sh' ? <ShYj data={shyjData} setYyfaObj={setYyfaObj} /> : null}
{warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null}
{warnType === 'hd' ? <Hdyj data={hdyj} /> : null}
{warnType === 'qx' ? <Shqx data={shqx} /> : null}
{/* {yyfaObj.show && <YyfaDetail} */}
<div >
<FormControl fullWidth>
<RadioGroup
value={value}
onChange={(e) => setValue(e.target.value)}
>
<StyledFormControlLabel value="2025001" control={<Radio />} label="2025001预案" style={{color:"#fff"}}/>
<StyledFormControlLabel value="2025002" control={<Radio />} label="2025002预案" style={{color:"#fff"}}/>
<StyledFormControlLabel value="2025003" control={<Radio />} label="2025003预案" style={{color:"#fff"}}/>
</RadioGroup>
</FormControl>
</div>
</PanelBox>
)
}