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

合并代码

lsf-dev
秦子超 2025-05-21 09:26:14 +08:00
parent 8804446160 72d0944fff
commit 1909009b74
10 changed files with 323 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 645 KiB

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

@ -147,6 +147,7 @@ const map = {
setView(id) {
let layerVisible = {};
const map = window.__mapref
if (id === 0 || id === 1 || id ==501 || id == 504 || id == 507) {
layerVisible = {
RealDrpLayer: true,
@ -223,11 +224,48 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 201) {
layerVisible = {
RealDrpLayer: true,
RealHDLayer: true,
RealSkLayer: false,
BxSkLayer: false,
FzdxLayer: false,
WataLayer: false,
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 202) {
layerVisible = {
RealDrpLayer: false,
RealHDLayer: true,
RealSkLayer: true,
BxSkLayer: false,
FzdxLayer: false,
WataLayer: false,
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
}
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined })
dispatch.map.setRaw({ layerVisible, view: id });
dispatch.runtime.setFeaturePop(null);
if(id===201){
map.setLayoutProperty('热力图', 'visibility', 'visible');
}else{
map.setLayoutProperty('热力图', 'visibility', 'none');
}
}
})
};

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

@ -49,7 +49,27 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '天气' },
{ key: '病险水库综述', style: { flexShink: 0 } },
];
}else if (view === 501) {
}
else if (view === 201) {
left = [
{ key: '天气' },
{ key: '实时雨情', style: { height: '20rem', flexGrow: 1 } },
];
leftFullHeight = true;
} else if (view === 202) {
left = [
{ key: '天气' },
{ key: '河道实时水情', style: { height: '20rem', flexGrow: 1 } },
{ key: '水库监测', style: { height: '30rem', flexGrow: 1 } },
];
// leftFullHeight = true;
} else if (view === 203) {
left = [
{ key: '天气' },
{ key: '安全监测', style: { height: '20rem', flexGrow: 1 } },
];
leftFullHeight = true;
} else if (view === 501) {
left = [
{ key: '雨量监测',style: { height: '8rem', flexGrow: 1 } },
{ key: '水情监测', style: { height: '8rem', flexGrow: 1 } },
@ -57,19 +77,18 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '流量监测',style: { height: '8rem', flexGrow: 1 } },
];
leftFullHeight = true;
}else if (view === 504) {
} else if (view === 504) {
left = [
{ key: '降雨预报', style: { height: '40%', flexGrow: 1 } },
{ key: '预警信息管理', style: { height: '40%', flexGrow: 1 } },
];
leftFullHeight = true;
}else if (view === 507) {
} else if (view === 507) {
left = [
{ key: '工程巡查', style: { height: '20%', flexGrow: 1 } },
{ key: '本月巡查记录', style: { height: '40%', flexGrow: 1 } },
{ key: '待处理巡查问题清单', style: { height: '40%', flexGrow: 1 } },
];
leftFullHeight = true;
]
}
if (rightEx) {
@ -132,25 +151,37 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '警报' },
{ key: '病险水库' },
];
}else if (view === 501) {
right = [
{ key: '水质监测',style: { height: '20rem', flexGrow: 1 } },
{ key: '土壤墒情监测', style: { height: '20rem', flexGrow: 1 } },
{ key: '视频监控', style: { height: '20rem', flexGrow: 1 } },
];
}else if (view === 504) {
right = [
{ key: '降雨预警', style: { height: '40%', flexGrow: 1 } },
{ key: '预警信息管理', style: { height: '40%', flexGrow: 1 } },
];
}else if (view === 507) {
right = [
{ key: '工程维护', style: { height: '20%', flexGrow: 1 } },
{ key: '本月工程维护', style: { height: '40%', flexGrow: 1 } },
{ key: '待处理维护问题清单', style: { height: '40%', flexGrow: 1 } },
} else if (view === 201) {
right = [
{ key: '警报' },
];
} else if (view === 202) {
right = [
{ key: '警报' },
];
} else if (view === 203) {
right = [
{ key: '警报' },
];
} else if (view === 501) {
right = [
{ key: '水质监测',style: { height: '20rem', flexGrow: 1 } },
{ key: '土壤墒情监测', style: { height: '20rem', flexGrow: 1 } },
{ key: '视频监控', style: { height: '20rem', flexGrow: 1 } },
];
} else if (view === 504) {
right = [
{ key: '降雨预警', style: { height: '40%', flexGrow: 1 } },
{ key: '预警信息管理', style: { height: '40%', flexGrow: 1 } },
];
} else if (view === 507) {
right = [
{ key: '工程维护', style: { height: '20%', flexGrow: 1 } },
{ key: '本月工程维护', style: { height: '40%', flexGrow: 1 } },
{ key: '待处理维护问题清单', style: { height: '40%', flexGrow: 1 } },
];
rightFullHeight = true;
}
}
}
}

11
src/views/Home/MapCtrl/mapstyle/base.js
View File

@ -10,6 +10,17 @@ export default {
'fill-color': '#38467f',
}
},
heatmap: {
'id': '热力图',
'type': 'raster',
'source': 'heatmapImg',
'layout': {
'visibility':'none'
},
'paint': {
'raster-opacity': 1,
}
},
water: {
'id': '水系',
'type': 'fill',

1
src/views/Home/MapCtrl/mapstyle/layermgr.js
View File

@ -92,6 +92,7 @@ class LayerMgr {
terrain: this.layerMap.TerrainLayer.getTerrain(),
layers: [
base.background,
base.heatmap,
this.layerMap.TerrainLayer.getStyle(0),
this.layerMap.TerrainLayer.getStyle(1),

15
src/views/Home/MapCtrl/mapstyle/sources.js
View File

@ -40,6 +40,21 @@ const sources = {
'minzoom': 1,
'maxzoom': 18,
},
//热力图
"heatmapImg": {
'type': 'image',
'url': `${hash}/assets/bg.png`,
'coordinates': [
// 图片覆盖地图的四至点
[114.6710271999999929, 31.6068084090000987], // 左上
[115.4557823634995805, 31.6068084090000987], // 右上
[115.4907823634995805, 30.8713739500000008], // 右下
[114.7460271999999929, 30.8613739500000008], // 左下
],
},
"县界": {
"data": `${hash}/mapbox/geojson/县界.geojson`,
"type": "geojson"

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

@ -33,6 +33,7 @@ import WarnRespOverall from './panels/WarnResp/Overall';
import WarnResp from './panels/WarnResp';
import BxSk from './panels/BxSk';
import BxskOverall from './panels/BxSkOverall';
import Aqjc from './panels/Aqjc'
export default function PanelIndex({ name, style, ...params }) {
@ -96,16 +97,18 @@ export default function PanelIndex({ name, style, ...params }) {
return <LlWatch style={style} />
} else if (name == '土壤墒情监测') {
return <TrWatch style={style}/>
}else if (name == '视频监控') {
} else if (name == '视频监控') {
return <SpVideo style={style}/>
}else if (name === '预警信息管理') {
} else if (name === '预警信息管理') {
return <WarnInfoMange style={style} />
}else if (name === '降雨预报') {
} else if (name === '降雨预报') {
return <GqWeatherForcast style={style} />
}else if (name === '降雨预警') {
} else if (name === '降雨预警') {
return <JyWarn style={style} />
}else if (name === '工程巡查') {
} else if (name === '工程巡查') {
return <JyWarn style={style} />
} else if (name === '安全监测') {
return <Aqjc style={style} />
}
return (
<PanelBox style={style} title={name} color="red">

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

@ -15,6 +15,12 @@ const VIEWS = [
{ id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
] },
{ id: 200, title: '水库', img: '/assets/menu/实时数据.png',children:[
{ id: 201, title: '雨情监测', img: '/assets/menu/降雨中心.png' },
{ id: 202, title: '水情监测', img: '/assets/menu/水利设施.png' },
{ id: 203, title: '安全监测', img: '/assets/menu/降雨中心.png' },
{ id: 204, title: '视频监测', img: '/assets/menu/辅助决策.png' },
{ id: 205, title: '防汛调度', img: '/assets/menu/辅助决策.png' },
{ id: 206, title: '水库管理', img: '/assets/menu/病险水库.png' },
// 雨情监测
// 水情监测
// 安全监测

67
src/views/Home/panels/Aqjc/Setting.js Normal file
View File

@ -0,0 +1,67 @@
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: '2rem' }}>
<Typography variant="subtitle2">地图实时雨量显示雨量时段</Typography>
<Select
style={{ fontSize: '1.2rem' }}
fullWidth
value={layerSetting.drplabel}
onChange={(event) => dispath.map.setLayerSetting({ drplabel: event.target.value })}
>
<MenuItem value="h1">小时雨量</MenuItem>
<MenuItem value="h3">3小时雨量</MenuItem>
<MenuItem value="h6">6小时雨量</MenuItem>
<MenuItem value="h12">12小时雨量</MenuItem>
<MenuItem value="h24">24小时雨量</MenuItem>
<MenuItem value="h48">48小时雨量</MenuItem>
</Select>
</div>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示实时雨量图层</Typography>
<Switch
checked={!!layerVisible.RealDrpLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealDrpLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

124
src/views/Home/panels/Aqjc/index.js Normal file
View File

@ -0,0 +1,124 @@
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 { DrpRealPromise } from '../../../../models/_/real';
import useRefresh from '../../../../utils/useRefresh';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import { TableSortLabel } from '@material-ui/core';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
function DrpReal({ style }) {
const dispatch = useDispatch();
const [tab,setTab] = useState('1')
const tableDrpFilter = useSelector(s => s.realview.tableDrpFilter);
const tableDrpSorter = useSelector(s => s.realview.tableDrpSorter);
const drpAutoRefresh = useSelector(s => s.realview.drpAutoRefresh);
const t = useRefresh(drpAutoRefresh ? 20 * 1000 : 0);
const { data } = useRequest(DrpRealPromise.get, t);
const [setting, showSetting] = useState(false);
const showData = useMemo(() => {
if (!data) {
return [];
}
let ret = [];
data.forEach(o => {
if (!tableDrpFilter[o.type]) {
return;
}
ret.push(o);
})
if (tableDrpSorter) {
ret = ret.sort((a, b) => b[tableDrpSorter] - a[tableDrpSorter]);
}
return ret;
}, [data, tableDrpFilter, tableDrpSorter]);
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.drp],
zoom: config.poiPositionZoom.drp,
pitch: config.poiPitch,
bearing: 0
});
}
}
const toggleStType = (type) => {
const visible = !tableDrpFilter[type];
dispatch.realview.setTableDrpFilter({ [type]: visible });
}
const toggleAutoRefresh = () => {
dispatch.realview.setDrpAutoRefresh(!drpAutoRefresh);
}
const setSort = (type) => {
if (type === tableDrpSorter) {
dispatch.realview.setTableDrpSorter(null);
} else {
dispatch.realview.setTableDrpSorter(type);
}
}
return (
<PanelBox
style={style}
title="安全监测"
color="green"
tabs={
<span className="button-group">
<span className={clsx({ active: tab==='1' })} onClick={() => setTab('1')}>变形监测</span>
<span className={clsx({ active: tab==='2' })} onClick={() => setTab('2')}>渗压监测</span>
<span className={clsx({ active: tab==='3' })} onClick={() => setTab('3')}>渗流监测</span>
<span className={clsx({ active: tab==='4' })} onClick={() => setTab('4')}>白蚁监测</span>
</span>
}
>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ maxWidth: '20%' }} align="center">序号</DpTableCell>
<DpTableCell style={{ maxWidth: '20%' }} align="center">水库名称</DpTableCell>
<DpTableCell style={{ maxWidth: '20%' }} align="center">行政区</DpTableCell>
<DpTableCell style={{ maxWidth: '20%' }} align="center">测点</DpTableCell>
<DpTableCell style={{ maxWidth: '20%' }} align="center">垂直位移</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{showData.map((row,index) => (
<DpTableRow key={row.stcd}>
<DpTableCell align="center">{index}</DpTableCell>
<DpTableCell align="center">{renderDrp(row, 'h1')}</DpTableCell>
<DpTableCell align="center">{renderDrp(row, 'h3')}</DpTableCell>
<DpTableCell align="center">{renderDrp(row, 'h6')}</DpTableCell>
<DpTableCell align="center">{renderDrp(row, 'h24')}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default DrpReal;