qzc修改
parent
5d749075fa
commit
e011258c34
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
|
|
@ -328,7 +328,7 @@ const map = {
|
|||
RoadLayer: true,
|
||||
RivlLayer: true,
|
||||
ShuichangLayer:true,
|
||||
ShuiyuandiLayer:true,
|
||||
ShuiyuandiLayer:false,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
|
|
@ -344,7 +344,7 @@ const map = {
|
|||
AdcdLayer: true,
|
||||
RoadLayer: true,
|
||||
RivlLayer: true,
|
||||
// ShuichangLayer:true,
|
||||
ShuichangLayer:true,
|
||||
ShuizhiLayer:true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
|
|
|
|||
|
|
@ -93,14 +93,14 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
left = [
|
||||
{ key: '天气' },
|
||||
{ key: '供水数据概览',style: { height: '15.5rem'} },
|
||||
{ key: '水厂生产情况',style: { height: '15rem', flexGrow: 1 } },
|
||||
{ key: '供水监管',style: { height: '16rem'} },
|
||||
{ key: '供水监管',style: { height: '16.5rem'} },
|
||||
{ key: '供水态势',style: { height: '16rem'} },
|
||||
];
|
||||
} else if (view === 302) {
|
||||
left = [
|
||||
{ key: '天气' },
|
||||
{ key: '水厂水质监测',style: { height: '16rem'} },
|
||||
{ key: '报警分析',style: { height: '16rem'} },
|
||||
{ key: '进水监测',style: { height: '13rem'} },
|
||||
{ key: '出水监测',style: { height: '16rem'} },
|
||||
];
|
||||
} else if (view === 303) {
|
||||
left = [
|
||||
|
|
@ -250,7 +250,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
} else if (view === 205) {
|
||||
right = [
|
||||
{ key: '预演方案', style: { height: '30%', flexGrow: 1 } },
|
||||
{ key: '预演结果', style: { height: '70%', flexGrow: 1 } },
|
||||
{ key: '防汛预演结果', style: { height: '70%', flexGrow: 1 } },
|
||||
];
|
||||
} else if (view === 206) {
|
||||
right = [
|
||||
|
|
@ -259,12 +259,15 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
} else if (view === 301) {
|
||||
right = [
|
||||
{ key: '警报' },
|
||||
{ key: '水厂生产情况',style: { height: '15rem', flexGrow: 1 } },
|
||||
{ key: '对比分析', style: { height: '19rem' } },
|
||||
{ key: '报警统计',style: { height: '37rem',flexGrow: 1 } },
|
||||
{ key: '报警统计',style: { height: '19rem',flexGrow: 1 } },
|
||||
];
|
||||
} else if (view === 302) {
|
||||
right = [
|
||||
{ key: '警报' },
|
||||
{ key: '水厂水质监测',style: { height: '16rem'} },
|
||||
{ key: '报警分析',style: { height: '18rem'} },
|
||||
];
|
||||
} else if (view === 303) {
|
||||
right = [
|
||||
|
|
|
|||
|
|
@ -21,18 +21,15 @@ function HDStDlg({ record, onClose }) {
|
|||
BackdropComponent={DpBackgroundDrop}
|
||||
>
|
||||
<div className="boxhead"></div>
|
||||
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden',height:'80rem' }}>
|
||||
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden' }}>
|
||||
<DpAppBar position="sticky">
|
||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||
<DpTab label="文件预览" />
|
||||
{/* <DpTab label="基本信息" />
|
||||
<DpTab label="视频信息" /> */}
|
||||
|
||||
<DpTab label="报警列表" />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
<iframe src={`${process.env.PUBLIC_URL}/assets/${record.planName}.pdf`} width="100%" height="100%"></iframe>
|
||||
|
||||
<img src='/assets/报警列表.jpg' style={{width:'100%', height:'33rem',marginTop:'0rem'}}/>
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -104,6 +104,8 @@ function InfoDlg() {
|
|||
return <ByjcDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'PdfLayer') {
|
||||
return <PdfDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'BjLayer') {
|
||||
return <PdfDlg record={properties} onClose={handleClose} />
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import React from 'react'
|
||||
import { makeStyles } from '@material-ui/core';
|
||||
import { Grid } from '@material-ui/core';
|
||||
import useDescStyle from '../_/descstyle';
|
||||
|
||||
|
||||
|
||||
|
||||
function ScStPop({ record, dispatch, view }) {
|
||||
const classes = useDescStyle();
|
||||
|
||||
const viewInfo = () => {
|
||||
dispatch?.runtime.setInfoDlg({ layerId: 'llsbLayer', properties: record })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="boxhead"></div>
|
||||
<div className="featuretip-title">
|
||||
<div className="name">{view===301?'基本信息':'生产指标总览'}</div>
|
||||
{/* <div className="extra cursor-pointer" onClick={viewInfo}>详细</div> */}
|
||||
</div>
|
||||
<div style={{ width: '25rem' }} className='f_14'>
|
||||
{
|
||||
view==='301'?
|
||||
<Grid container>
|
||||
<Grid item className={classes.title}>水厂名称:</Grid>
|
||||
<Grid item className={classes.value}>{record.stnm.replace("水库", "水厂")}</Grid>
|
||||
<Grid item className={classes.title}>管理单位:</Grid>
|
||||
<Grid item className={classes.value}>用水协会</Grid>
|
||||
<Grid item className={classes.title}>水厂规模:</Grid>
|
||||
<Grid item className={classes.value}>200吨</Grid>
|
||||
<Grid item className={classes.title}>取水水源:</Grid>
|
||||
<Grid item className={classes.value}>二仙岩水源地</Grid>
|
||||
<Grid item className={classes.title}>负责人:</Grid>
|
||||
<Grid item className={classes.value}>秦思益</Grid>
|
||||
<Grid item className={classes.title}>联系电话:</Grid>
|
||||
<Grid item className={classes.value}>15928192211</Grid>
|
||||
<Grid item className={classes.title}>行政村:</Grid>
|
||||
<Grid item className={classes.value}>凉桥村（974人）</Grid>
|
||||
</Grid>:
|
||||
<Grid container>
|
||||
<Grid item className={classes.title}>今日供水总量:</Grid>
|
||||
<Grid item className={classes.value}>1293.21</Grid>
|
||||
<Grid item className={classes.title}>昨日供水总量:</Grid>
|
||||
<Grid item className={classes.value}>1038.53</Grid>
|
||||
<Grid item className={classes.title}>本月供水总量:</Grid>
|
||||
<Grid item className={classes.value}>37671.45</Grid>
|
||||
<Grid item className={classes.title}>上月供水总量:</Grid>
|
||||
<Grid item className={classes.value}>39201.86</Grid>
|
||||
</Grid>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="boxfoot"></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ScStPop);
|
||||
|
|
@ -28,6 +28,7 @@ import LlqdPop from './LlqdPop';
|
|||
import LlsbPop from './LlsbPop';
|
||||
import ScjcPop from './ScJcPop';
|
||||
import RealQDPop from './RealQDPop'
|
||||
import ScStPop from './ScStPop'
|
||||
export const InfoPopNames = {
|
||||
RealSkPop: 'RealSkPop',
|
||||
RealHDPop: 'RealHDPop',
|
||||
|
|
@ -35,8 +36,8 @@ export const InfoPopNames = {
|
|||
PicStPop: 'PicStPop',
|
||||
};
|
||||
|
||||
export const InfoPops = ({ type, properties, dispatch }) => {
|
||||
console.log(type, properties);
|
||||
export const InfoPops = ({ type, properties, dispatch, view }) => {
|
||||
console.log(type, properties, view);
|
||||
if (type === InfoPopNames.RealDrpPop) {
|
||||
return <RealDrpPop record={properties} dispatch={dispatch} />
|
||||
} else if (type === InfoPopNames.RealHDPop) {
|
||||
|
|
@ -96,7 +97,9 @@ export const InfoPops = ({ type, properties, dispatch }) => {
|
|||
return <LlsbPop record={properties} dispatch={dispatch} />
|
||||
}else if (type === '监测站') {
|
||||
return <ScjcPop record={properties} dispatch={dispatch} />
|
||||
}
|
||||
}else if (type === 'ScStPop') {
|
||||
return <ScStPop record={properties} dispatch={dispatch} view={view} />
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ const mapboxgl = window.mapboxgl;
|
|||
function PopupItem({ mapCtrl, type, properties, coordinates, offsetPop }) {
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const view = useSelector(s => s.map.view);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapCtrl || !type || !properties || !coordinates) {
|
||||
|
|
@ -26,7 +27,7 @@ function PopupItem({ mapCtrl, type, properties, coordinates, offsetPop }) {
|
|||
const p = new mapboxgl.Popup(params);
|
||||
const popupNode = document.createElement('div');
|
||||
|
||||
ReactDOM.render(<InfoPops type={type} properties={properties} dispatch={dispatch} />, popupNode);
|
||||
ReactDOM.render(<InfoPops type={type} properties={properties} dispatch={dispatch} view={view}/>, popupNode);
|
||||
p.setLngLat(coordinates).setDOMContent(popupNode).addTo(mapCtrl);
|
||||
|
||||
if (offsetPop) {
|
||||
|
|
|
|||
|
|
@ -1152,11 +1152,11 @@ export default class ShuichangLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: InfoPopNames.PicStPop,
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: 'ScStPop',
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ import Rgsl from './panels/Rgsl'
|
|||
import Dbfx from './panels/Dbfx'
|
||||
import Gsjk from './panels/Gsjk'
|
||||
import YaRes from './panels/YaRes'
|
||||
import YaRes2 from './panels/YaRes2'
|
||||
import Yakgl from './panels/Yakgl'
|
||||
import Gwjc from './panels/Gwjc'
|
||||
import Gx from './panels/Gx'
|
||||
|
|
@ -84,6 +85,9 @@ import Yhfx from './panels/Yhfx'
|
|||
import Bjtj from './panels/Bjtj'
|
||||
import Szzddgxs from './panels/Szzddgxs'
|
||||
import Szzddjq from './panels/Szzddjq'
|
||||
import Jsjc from './panels/Jsjc'
|
||||
import Csjc from './panels/Csjc'
|
||||
|
||||
|
||||
export default function PanelIndex({ name, style, ...params }) {
|
||||
if (name === '天气') {
|
||||
|
|
@ -204,6 +208,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
return <Yyfa style={style} />
|
||||
}else if (name == '预演结果') {
|
||||
return <YaRes style={style} />
|
||||
}else if (name == '防汛预演结果') {
|
||||
return <YaRes2 style={style} />
|
||||
} else if (name === '供水态势') {
|
||||
return <Gsts style={style} />
|
||||
} else if (name === '供水覆盖率') {
|
||||
|
|
@ -256,6 +262,10 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
return <Bjtj style={style} />
|
||||
} else if (name === '警情') {
|
||||
return <Szzddjq style={style} />
|
||||
} else if (name === '进水监测') {
|
||||
return <Jsjc style={style} />
|
||||
} else if (name === '出水监测') {
|
||||
return <Csjc style={style} />
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,24 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import AreaDrpChart from './chart';
|
||||
|
||||
|
||||
function DrpReal({ style }) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="报警分析"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
<div style={{cursor:'pointer',color:'#3c88f7'}} onClick={()=>dispatch?.runtime.setInfoDlg({ layerId: 'BjLayer', properties: {} })}>更多</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<img src='/assets/报警分析.jpg' style={{width:'26rem', height:'12rem',marginLeft:'0.3rem',marginTop:'1rem'}}/>
|
||||
<img src='/assets/报警分析.jpg' style={{width:'26.5rem', height:'13.5rem',marginLeft:'0rem',marginTop:'1rem'}}/>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,10 +17,9 @@ const palleteLen = pallete.length;
|
|||
|
||||
|
||||
const AreaDrpChart = () => {
|
||||
const x = ['宋埠镇','歧亭镇','白果镇','夫子河镇','阎家河镇']
|
||||
const y1 = [212, 0, 0, 0,0]
|
||||
const y2 = [212, 0, 0, 0,0]
|
||||
const y3 = [0, 0, 0, 0,0]
|
||||
const x = ['清泉水厂','南湖水厂','东郊水厂','西山水厂']
|
||||
const y1 = [11.2, 12.4, 23.6, 12.2,32.1]
|
||||
const y2 = [23, 12, 4, 23,8]
|
||||
|
||||
|
||||
|
||||
|
|
@ -39,11 +38,11 @@ const AreaDrpChart = () => {
|
|||
grid: {
|
||||
top: 42,
|
||||
left: 50,
|
||||
right: 0,
|
||||
right: 25,
|
||||
bottom: 27,
|
||||
},
|
||||
legend: {
|
||||
data: ['报警总数', '已解除','未解除'],
|
||||
data: ['水质异常','管网漏损'],
|
||||
top: '8',
|
||||
left: 'center',
|
||||
itemWidth: 11,//11,
|
||||
|
|
@ -88,7 +87,7 @@ const AreaDrpChart = () => {
|
|||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '个',
|
||||
name: '异常数量',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
|
|
@ -117,31 +116,47 @@ const AreaDrpChart = () => {
|
|||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: '漏损率(%)',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
padding: [0, 0, 0, -30],//[0, 0, 0, -30]//控制y轴标题位置
|
||||
},
|
||||
nameGap: 17,
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 11,//11
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 50,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '报警总数',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
data: y1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3860d0'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: '已解除',
|
||||
yAxisIndex: 0,
|
||||
name: '水质异常',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
data: y2,
|
||||
|
|
@ -158,14 +173,16 @@ const AreaDrpChart = () => {
|
|||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},{
|
||||
name: '未解除',
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '管网漏损',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
data: y3,
|
||||
data: y1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f5c75f'
|
||||
color: '#3860d0'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
|
|
@ -183,7 +200,7 @@ const AreaDrpChart = () => {
|
|||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '10rem', width: '100%' }}
|
||||
style={{ height: '15rem', width: '95%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@ function DrpReal({ style }) {
|
|||
color="green"
|
||||
>
|
||||
<AreaDrpChart data={[]} />
|
||||
<TableContainer style={{ height: '22rem' }}>
|
||||
{/* <TableContainer style={{ height: '22rem' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
|
|
@ -341,7 +341,7 @@ function DrpReal({ style }) {
|
|||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</TableContainer> */}
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
function DrpReal({ style }) {
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="出水监测"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
<img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||
<img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div style={{color:"#ffffff",padding:'1rem'}}>
|
||||
<div style={{display:'flex',marginBottom:'15px'}}>
|
||||
<div style={{width:'9rem',textAlign:'center'}}></div>
|
||||
<div style={{width:'6rem',textAlign:'center'}}>瞬时流量</div>
|
||||
<div style={{width:'9rem',textAlign:'center'}}>今日进水量</div>
|
||||
</div>
|
||||
<div style={{display:'flex',marginBottom:'10px'}}>
|
||||
<div style={{width:'8.5rem',textAlign:'left'}}>出水凉桥村:</div>
|
||||
<div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>7.01</span>m³/h</div>
|
||||
<div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"22px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>92.74</span>m³</div>
|
||||
</div>
|
||||
<div style={{display:'flex',marginBottom:'10px'}}>
|
||||
<div style={{width:'8.5rem',textAlign:'left'}}>出厂水浊度:</div>
|
||||
<div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>0.18</span>NTU</div>
|
||||
</div>
|
||||
<div style={{display:'flex',marginBottom:'10px'}}>
|
||||
<div style={{width:'8.5rem',textAlign:'left'}}>出厂水余氯:</div>
|
||||
<div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>0.25</span>mg/L</div>
|
||||
</div>
|
||||
<div style={{display:'flex',marginBottom:'10px'}}>
|
||||
<div style={{width:'8.5rem',textAlign:'left'}}>出厂水PH:</div>
|
||||
<div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>9.64</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
@ -6,10 +6,15 @@ function DrpReal({ style }) {
|
|||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="供水态势"
|
||||
title="取水监管"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
<img src='/assets/镇切换.jpg' style={{width:'150px', height:'20px',marginRight:'5px'}}/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<img src='/assets/gongshui.jpg' style={{width:'429.81px', height:'212px',marginLeft:'1px'}}/>
|
||||
<img src='/assets/取水监管.jpg' style={{width:'429.81px', height:'182px',marginLeft:'1px',marginTop:'10px'}}/>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
function DrpReal({ style }) {
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="进水监测"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
<img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||
<img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div style={{color:"#ffffff",padding:'1rem'}}>
|
||||
<div style={{display:'flex',marginBottom:'20px'}}>
|
||||
<div style={{width:'9rem',textAlign:'center'}}></div>
|
||||
<div style={{width:'6rem',textAlign:'center'}}>瞬时流量</div>
|
||||
<div style={{width:'9rem',textAlign:'center'}}>今日进水量</div>
|
||||
</div>
|
||||
<div style={{display:'flex',marginBottom:'20px'}}>
|
||||
<div style={{width:'8.5rem',textAlign:'left'}}>进水凉桥村:</div>
|
||||
<div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>6.37</span>m³/h</div>
|
||||
<div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"22px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>89.23</span>m³</div>
|
||||
</div>
|
||||
<div style={{display:'flex',marginBottom:'10px'}}>
|
||||
<div style={{width:'8.5rem',textAlign:'left'}}>原水浊度:</div>
|
||||
<div style={{width:'6rem',textAlign:'center',display:'flex',lineHeight:'24px', marginLeft:"24px"}}><span style={{color:'#86fabd',fontSize:'22px',marginRight:'5px'}}>231.28</span>NTU</div>
|
||||
</div>
|
||||
</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
@ -10,8 +10,13 @@ function DrpReal({ style }) {
|
|||
style={style}
|
||||
title="水厂生产情况"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
<img src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<AreaDrpChart data={[]} />
|
||||
<AreaDrpChart data={[]} />
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,15 +6,16 @@ function DrpReal({ style }) {
|
|||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="水质监测"
|
||||
title="水质监测"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
<img src='/assets/镇切换.jpg' style={{width:'150px', height:'20px',marginRight:'5px'}}/>
|
||||
<img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||
<img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<img src='/assets/水厂水质监测.jpg' style={{width:'26rem', height:'12rem',marginLeft:'0.3rem',marginTop:'1rem'}}/>
|
||||
<img src='/assets/水厂水质监测.jpg' style={{width:'26.5rem', height:'12rem',marginLeft:'0rem',marginTop:'1rem'}}/>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
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 {Empty} from 'antd'
|
||||
// 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 yyRes = useSelector(s => s.runtime.yyObj);
|
||||
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
|
||||
const [show,setShow] = useState(false)
|
||||
// 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> */}
|
||||
</>
|
||||
}
|
||||
>
|
||||
{
|
||||
yyRes.yy ? <>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<div style={{color:'#ffffff',padding:'5px',background:'#313f65',width:"7rem",textAlign:"center",margin:'5px',borderRadius:'3px',fontSize:'14px'}}>水库洪水演进</div>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ width: '20%' }} align="center">水库名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4rem' }} align="center">最大入库流量(m³/s)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>总入库水量(万m³)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ minWidth: '4rem' }}>最大出库流量(m³/s)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<DpTableRow onClick={() => {
|
||||
setShow(true)
|
||||
}}>
|
||||
<DpTableCell align="center">
|
||||
<div className="table-ellipsis cursor-pointer">明山水库</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div>12.32</div>
|
||||
<div>(03-23 14:32)</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">17.98</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div>12.32</div>
|
||||
<div>(03-23 14:32)</div>
|
||||
</DpTableCell>
|
||||
</DpTableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
</TableContainer>
|
||||
<div style={{color:'#ffffff',padding:'5px',background:'#313f65',width:"7rem",textAlign:"center",margin:'5px',marginBottom:"10px",borderRadius:'3px',fontSize:'14px'}}>水库洪水演进</div>
|
||||
<div style={{borderBottom:'1px solid rgba(36, 136, 223, 0.6)'}}></div>
|
||||
<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:20}}>风险等级</div>
|
||||
<div style={{color:'#41cbf1',fontSize:16,marginTop:10}}>一般</div>
|
||||
</div>
|
||||
<div className='ymyx' style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||
<div style={{color:'#41cbf1',fontSize:20}}>淹没影响</div>
|
||||
<div style={{display:'flex',justifyContent:'space-around',columnGap:10}}>
|
||||
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||
<div style={{color:'#41cbf1',fontSize:16}}>2个</div>
|
||||
<div style={{fontSize:14}}>淹没乡镇数</div>
|
||||
</div>
|
||||
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||
<div style={{color:'#41cbf1',fontSize:16}}>500k㎡</div>
|
||||
<div style={{fontSize:14}}>淹没总面积</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">乡镇名称</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">影响户数</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">影响人口</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">影响面积/K㎡</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">221</DpTableCell>
|
||||
<DpTableCell align="center">640</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
>{row.area}</div>
|
||||
</DpTableCell>
|
||||
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
</TableContainer>
|
||||
</> :
|
||||
<Empty description={<span style={{color:"#fff"}}>暂无数据</span>}/>
|
||||
}
|
||||
{
|
||||
setting && <Setting onClose={() => showSetting(false)} />
|
||||
}
|
||||
{
|
||||
show?
|
||||
<div style={{position:'absolute',top:'-45px',left:'-380px', width:'364px', height:'220px',padding:'10px',background:'rgb(2, 12, 43)'}}>
|
||||
<img width={'100%'} height={'100%'} src='/assets/ce.png' />
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default HDReal;
|
||||
Loading…
Reference in New Issue