diff --git a/public/assets/bg.png b/public/assets/bg.png new file mode 100644 index 0000000..794fa27 Binary files /dev/null and b/public/assets/bg.png differ diff --git a/src/models/map/index.js b/src/models/map/index.js index 0f5a757..e3fecf0 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -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'); + } } }) }; diff --git a/src/models/map/layout.js b/src/models/map/layout.js index 4141b37..82e9d3e 100644 --- a/src/models/map/layout.js +++ b/src/models/map/layout.js @@ -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; - } + } } } diff --git a/src/views/Home/MapCtrl/mapstyle/base.js b/src/views/Home/MapCtrl/mapstyle/base.js index bfc3a4e..ffa9485 100644 --- a/src/views/Home/MapCtrl/mapstyle/base.js +++ b/src/views/Home/MapCtrl/mapstyle/base.js @@ -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', diff --git a/src/views/Home/MapCtrl/mapstyle/layermgr.js b/src/views/Home/MapCtrl/mapstyle/layermgr.js index ba1a55e..dac6a55 100644 --- a/src/views/Home/MapCtrl/mapstyle/layermgr.js +++ b/src/views/Home/MapCtrl/mapstyle/layermgr.js @@ -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), diff --git a/src/views/Home/MapCtrl/mapstyle/sources.js b/src/views/Home/MapCtrl/mapstyle/sources.js index e0e5df4..44434e7 100644 --- a/src/views/Home/MapCtrl/mapstyle/sources.js +++ b/src/views/Home/MapCtrl/mapstyle/sources.js @@ -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" diff --git a/src/views/Home/PanelIndex.js b/src/views/Home/PanelIndex.js index 5de898f..e5e91e7 100644 --- a/src/views/Home/PanelIndex.js +++ b/src/views/Home/PanelIndex.js @@ -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 } else if (name == '土壤墒情监测') { return - }else if (name == '视频监控') { + } else if (name == '视频监控') { return - }else if (name === '预警信息管理') { + } else if (name === '预警信息管理') { return - }else if (name === '降雨预报') { + } else if (name === '降雨预报') { return - }else if (name === '降雨预警') { + } else if (name === '降雨预警') { return - }else if (name === '工程巡查') { + } else if (name === '工程巡查') { return + } else if (name === '安全监测') { + return } return ( diff --git a/src/views/Home/components/ActionDock/index.js b/src/views/Home/components/ActionDock/index.js index c37e011..c9a068d 100644 --- a/src/views/Home/components/ActionDock/index.js +++ b/src/views/Home/components/ActionDock/index.js @@ -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' }, // 雨情监测 // 水情监测 // 安全监测 diff --git a/src/views/Home/panels/Aqjc/Setting.js b/src/views/Home/panels/Aqjc/Setting.js new file mode 100644 index 0000000..a3055ef --- /dev/null +++ b/src/views/Home/panels/Aqjc/Setting.js @@ -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 ( + +
+ + 实时雨量显示设置 + +
+ +
+ 地图实时雨量显示雨量时段 + +
+
+ 显示实时雨量图层 + dispath.map.setLayerVisible({ RealDrpLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +export default Setting; diff --git a/src/views/Home/panels/Aqjc/index.js b/src/views/Home/panels/Aqjc/index.js new file mode 100644 index 0000000..fcb0ad5 --- /dev/null +++ b/src/views/Home/panels/Aqjc/index.js @@ -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 ( + + setTab('1')}>变形监测 + setTab('2')}>渗压监测 + setTab('3')}>渗流监测 + setTab('4')}>白蚁监测 + + } + > + + + + + 序号 + 水库名称 + 行政区 + 测点 + 垂直位移 + + + + {showData.map((row,index) => ( + + {index} + {renderDrp(row, 'h1')} + {renderDrp(row, 'h3')} + {renderDrp(row, 'h6')} + {renderDrp(row, 'h24')} + + ))} + +
+ + { + setting && showSetting(false)} /> + } + + ) +} + +export default DrpReal;