新增水库主体面板

2025-05-21 09:17:19 +08:00 · 2025-05-21 09:17:19 +08:00 · 72d0944fff
parent 3313025a52
commit 72d0944fff
10 changed files with 296 additions and 0 deletions
--- a/public/assets/bg.png
+++ b/public/assets/bg.png
--- 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) {
        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');
+      }
    }
  })
 };
--- a/src/models/map/layout.js
+++ b/src/models/map/layout.js
@ -50,6 +50,25 @@ export default function calcLayout(view, rightStack, hidePanels) {
        { key: '天气' },
        { key: '病险水库综述', style: { flexShink: 0 } },
      ];
+    } 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;
    }

    if (rightEx) {
@ -112,6 +131,18 @@ export default function calcLayout(view, rightStack, hidePanels) {
          { key: '警报' },
          { key: '病险水库' },
        ];
+      } else if (view === 201) {
+        right = [
+          { key: '警报' },
+        ];
+      } else if (view === 202) {
+        right = [
+          { key: '警报' },
+        ];
+      } else if (view === 203) {
+        right = [
+          { key: '警报' },
+        ];
      }
    }
  }
--- 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',
--- 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),

--- 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"
--- a/src/views/Home/PanelIndex.js
+++ b/src/views/Home/PanelIndex.js
@ -24,6 +24,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 }) {
@ -77,6 +78,8 @@ export default function PanelIndex({ name, style, ...params }) {
    return <BxSk style={style} />
  } else if (name === '病险水库综述') {
    return <BxskOverall style={style} />
+  } else if (name === '安全监测') {
+    return <Aqjc style={style} />
  }
  return (
    <PanelBox style={style} title={name} color="red">
--- 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' },
    // 雨情监测
    // 水情监测
    // 安全监测
--- a/src/views/Home/panels/Aqjc/Setting.js
+++ 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 (
+    <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;
--- a/src/views/Home/panels/Aqjc/index.js
+++ 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 (
+    <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;