水库主题页面

src/models/map/index.js

@@ -254,6 +254,67 @@ const map = {
         Object.keys(DCPJ_TYPES).forEach(key => {
           layerVisible['Dcpj_' + key + 'Layer'] = false;
         });
+      } else if (id === 203) {
+        layerVisible = {
+          RealDrpLayer: false,
+          RealHDLayer: false,
+          RealSkLayer: true,
+          BxSkLayer: true,
+          FzdxLayer: false,
+          WataLayer: false,
+          AdcdLayer: true,
+          RoadLayer: true,
+          RivlLayer: true,
+        };
+        Object.keys(DCPJ_TYPES).forEach(key => {
+          layerVisible['Dcpj_' + key + 'Layer'] = false;
+        });
+      } else if (id === 204) {
+        layerVisible = {
+          RealDrpLayer: false,
+          RealHDLayer: false,
+          RealSkLayer: false,
+          BxSkLayer: false,
+          PicStLayer: true,
+          FzdxLayer: false,
+          WataLayer: false,
+          AdcdLayer: true,
+          RoadLayer: true,
+          RivlLayer: true,
+        };
+        Object.keys(DCPJ_TYPES).forEach(key => {
+          layerVisible['Dcpj_' + key + 'Layer'] = false;
+        });
+      } else if (id === 205) {
+        layerVisible = {
+          RealDrpLayer: false,
+          RealHDLayer: false,
+          RealSkLayer: true,
+          BxSkLayer: false,
+          FzdxLayer: true,
+          WataLayer: false,
+          AdcdLayer: true,
+          RoadLayer: true,
+          RivlLayer: true,
+        };
+        Object.keys(DCPJ_TYPES).forEach(key => {
+          layerVisible['Dcpj_' + key + 'Layer'] = false;
+        });
+      } else if (id === 206) {
+        layerVisible = {
+          RealDrpLayer: false,
+          RealHDLayer: false,
+          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 })
@@ -261,7 +322,7 @@ const map = {
       dispatch.runtime.setFeaturePop(null);
 
 
-      if(id===201){
+      if(id===201||id===205){
         map.setLayoutProperty('热力图', 'visibility', 'visible');
       }else{
         map.setLayoutProperty('热力图', 'visibility', 'none');

src/models/map/layout.js

@@ -69,6 +69,24 @@ export default function calcLayout(view, rightStack, hidePanels) {
         { key: '安全监测', style: { height: '20rem', flexGrow: 1 } },
       ];
       leftFullHeight = true;
+    } else if (view === 204) {
+      left = [
+        { key: '天气' },
+        { key: '视频监测', style: { height: '40rem', flexGrow: 1 } },
+      ];
+      // leftFullHeight = true;
+    } else if (view === 205) {
+      left = [
+        { key: '天气' },
+        { key: '水库监测', style: { height: '40rem', flexGrow: 1 } },
+      ];
+      leftFullHeight = true;
+    } else if (view === 206) {
+      left = [
+        { key: '天气' },
+        { key: '水库管理', style: { height: '40rem', flexGrow: 1 } },
+      ];
+      leftFullHeight = true;
     } else if (view === 501) {
       left = [
         { key: '雨量监测',style: { height: '8rem', flexGrow: 1 } },
@@ -163,6 +181,20 @@ export default function calcLayout(view, rightStack, hidePanels) {
         right = [
           { key: '警报' },
         ];
+      } else if (view === 204) {
+        right = [
+          { key: '警报' },
+        ];
+      } else if (view === 205) {
+        right = [
+          { key: '警报' },
+          { key: '防汛调度', style: { height: '20rem', flexGrow: 1 } },
+          { key: '预警', style: { height: '20rem', flexGrow: 1 } },
+        ];
+      } else if (view === 206) {
+        right = [
+          { key: '警报' },
+        ];
       } else if (view === 501) {
         right = [
           { key: '水质监测',style: { height: '20rem', flexGrow: 1 } },

src/views/Home/PanelIndex.js

@@ -34,6 +34,9 @@ import WarnResp from './panels/WarnResp';
 import BxSk from './panels/BxSk';
 import BxskOverall from './panels/BxSkOverall';
 import Aqjc from './panels/Aqjc'
+import Spjc from './panels/Spjc'
+import Skgl from './panels/Skgl'
+import Fxdd from './panels/Fxdd'
 
 
 export default function PanelIndex({ name, style, ...params }) {
@@ -109,6 +112,12 @@ export default function PanelIndex({ name, style, ...params }) {
     return <JyWarn style={style} />
   } else if (name === '安全监测') {
     return <Aqjc style={style} />
+  } else if (name === '视频监测') {
+    return <Spjc style={style} />
+  } else if (name === '水库管理') {
+    return <Skgl style={style} />
+  } else if (name === '防汛调度') {
+    return <Fxdd style={style} />
   }
   return (
     <PanelBox style={style} title={name} color="red">

src/views/Home/components/ActionDock/index.js

@@ -18,15 +18,9 @@ const VIEWS = [
     { 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: 204, title: '视频监控', img: '/assets/menu/辅助决策.png' },
     { id: 205, title: '防汛调度', img: '/assets/menu/辅助决策.png' },
     { id: 206, title: '水库管理', img: '/assets/menu/病险水库.png' },
-    // 雨情监测
-    // 水情监测
-    // 安全监测
-    // 视频监控
-    // 防汛调度
-    // 水库管理
   ] },
   { id: 300, title: '水厂', img: '/assets/menu/实时数据.png',children:[
     // 供水态势

src/views/Home/panels/Fxdd/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 (
+    <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;

src/views/Home/panels/Skgl/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 (
+    <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;

src/views/Home/panels/Spjc/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 (
+    <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;

src/views/Home/panels/Spjc/index.js

@@ -0,0 +1,213 @@
+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 clsx from 'clsx';
+import { renderDrp } from '../../../../utils/renutils';
+
+const data = [
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181105000",
+      "town_nm": "阎家河镇",
+      "res_cd": "42118140028",
+      "res_nm": "红心水库",
+      "res_lon": 115.18962,
+      "res_lat": 31.23425,
+      "video_guid": "00032e3e6d984f0eb32c807e5769ec3a",
+      "video_name": "红心水库坝脚球机",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181001000",
+      "town_nm": "龙池办事处",
+      "res_cd": "42118150152",
+      "res_nm": "戴家冲水库",
+      "res_lon": 115.0241,
+      "res_lat": 31.23237,
+      "video_guid": "0037a5cb2caf44e49c012e3fdfa01238",
+      "video_name": "戴家冲水库_坝顶_枪机_龙池",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181101000",
+      "town_nm": "宋埠镇",
+      "res_cd": "42118140008",
+      "res_nm": "管山水库",
+      "res_lon": 114.78397,
+      "res_lat": 31.19451,
+      "video_guid": "0243e9726e244b728618741f248e0577",
+      "video_name": "管山水库坝脚球机",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181100000",
+      "town_nm": "中馆驿镇",
+      "res_cd": "42118140005",
+      "res_nm": "响鼓墩水库",
+      "res_lon": 114.91971,
+      "res_lat": 31.17985,
+      "video_guid": "024eaf5578464d9192559ad2288ba764",
+      "video_name": "响鼓墩水库",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181112000",
+      "town_nm": "福田河镇",
+      "res_cd": "42118150147",
+      "res_nm": "张家河水库",
+      "res_lon": 115.17869,
+      "res_lat": 31.48587,
+      "video_guid": "02d77364354a4f8982ad3d949e0d32ab",
+      "video_name": "张家河水库_坝脚_球机",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181114000",
+      "town_nm": "顺河镇",
+      "res_cd": "42118150048",
+      "res_nm": "孙家榜水库",
+      "res_lon": 114.91758,
+      "res_lat": 31.26933,
+      "video_guid": "03059577c270432bb7338e7f714b9a01",
+      "video_name": "孙家塝水库",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181110000",
+      "town_nm": "三河口镇",
+      "res_cd": "42118150145",
+      "res_nm": "袁家冲水库",
+      "res_lon": 115.28076,
+      "res_lat": 31.28639,
+      "video_guid": "031ac395df964414a17f9dc996e13d57",
+      "video_name": "袁家冲水库视频站",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181003000",
+      "town_nm": "南湖办事处",
+      "res_cd": "42118140003",
+      "res_nm": "毛家冲水库",
+      "res_lon": 114.98531,
+      "res_lat": 31.20469,
+      "video_guid": "036b290ac8e547a79f5835754e02772c",
+      "video_name": "毛家冲水库溢洪道",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181102000",
+      "town_nm": "歧亭镇",
+      "res_cd": "42118150224",
+      "res_nm": "兴隆寺水库",
+      "res_lon": 114.69534,
+      "res_lat": 31.01031,
+      "video_guid": "0385335df9c64c1f8972cf3ed17b4854",
+      "video_name": "兴隆寺水库_坝脚_球机",
+      "online": "1",
+      "sys_resource": 2
+  },
+  {
+      "city_cd": "421100000000",
+      "city_nm": "黄冈市",
+      "county_cd": "421181000000",
+      "county_nm": "麻城市",
+      "town_cd": "421181100000",
+      "town_nm": "中馆驿镇",
+      "res_cd": "42118150094",
+      "res_nm": "西冲水库",
+      "res_lon": 114.94118,
+      "res_lat": 31.06765,
+      "video_guid": "046336873b8a4eefbc321bd2e6e4359c",
+      "video_name": "西冲水库",
+      "online": "1",
+      "sys_resource": 2
+  },
+]
+
+function DrpReal({ style }) {
+  const [tab,setTab] = useState('1')
+
+  return (
+    <PanelBox
+      style={style}
+      title="视频监测"
+      color="green"
+    >
+      <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>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data.map((row,index) => (
+              <DpTableRow key={row.stcd}>
+                <DpTableCell align="center">{index+1}</DpTableCell>
+                <DpTableCell align="center">{row.res_nm}</DpTableCell>
+                <DpTableCell align="center">{row.town_nm}</DpTableCell>
+                <DpTableCell align="center">{row.online==='1'?'在线':'离线'}</DpTableCell>
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </PanelBox>
+  )
+}
+
+export default DrpReal;