feat(): 山洪预警增加数据

2025-06-03 19:31:36 +08:00 · 2025-06-03 19:31:36 +08:00 · 376caeeeed
parent e8fa779576
commit 376caeeeed
7 changed files with 213 additions and 41 deletions
--- a/src/models/map/index.js
+++ b/src/models/map/index.js
@ -211,9 +211,9 @@ const map = {
        });
      } else if (id === 6) {
        layerVisible = {
-          RealDrpLayer: false,
-          RealHDLayer: false,
-          RealSkLayer: false,
+          RealDrpLayer: true,
+          RealHDLayer: true,
+          RealSkLayer: true,
          BxSkLayer: true,
          FzdxLayer: false,
          WataLayer: false,
--- a/src/views/Home/panels/Drpfx/index.js
+++ b/src/views/Home/panels/Drpfx/index.js
@ -73,6 +73,15 @@ const useStyles = makeStyles((theme) => ({
      backgroundColor: 'rgba(255,255,255,0.1)'
    }
  },
+    warningRow: {
+    '&.pink': { backgroundColor: 'rgba(255,192,203,0.5)' },
+    '&.purple': { backgroundColor: 'rgba(147,112,219,0.5)' },
+      '&.blue': { backgroundColor: 'rgba(135,206,235,0.5)' },
+      '&.blue1': { backgroundColor: 'rgba(135,206,235,0.4)' },
+      '&.blue2': { backgroundColor: 'rgba(135,206,235,0.3)' },
+    '&.green': { backgroundColor: 'rgba(144,238,144,0.5)' }
+  },
+
  expandedRow: {
    '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
    '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
@ -103,8 +112,8 @@ export default function Overall({ style }) {
    { id: 'history', name: '历史极值站点', count: 0, color: 'pink' },
    { id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
    { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
-    { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue' },
-    { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue' },
+    { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
+    { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
    { id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
  ];

@ -178,7 +187,10 @@ export default function Overall({ style }) {
            <TableBody>
              {stations.map((station) => (
                <React.Fragment key={station.id}>
-                  <TableRow className={classes.stationRow}>
+                  <TableRow
+                    // className={classes.stationRow}
+                    className={`${classes.warningRow} ${station.color}`}
+                  >
                    <TableCell>
                      <Box display="flex" alignItems="center">
                        <IconButton
--- a/src/views/Home/panels/FzjcLayers/index.js
+++ b/src/views/Home/panels/FzjcLayers/index.js
@ -244,10 +244,10 @@ function FzjcLayers({ style }) {
        <FormControlLabel value="xz" control={<Radio />} label="行政村" />
      </RadioGroup>
    </StyledFormControl>
-            <CustomTextField
+            {/* <CustomTextField
            label="预案查询"
            style={{width:'150px'}}
-      onChange={(e) => console.log(e.target.value)}/>
+      onChange={(e) => console.log(e.target.value)}/> */}
        </div>
            {
        type == 'sh' ?
--- a/src/views/Home/panels/HdWarning/index.js
+++ b/src/views/Home/panels/HdWarning/index.js
@ -75,10 +75,10 @@ const useStyles = makeStyles((theme) => ({
  },
    warningRow: {
    '&.pink': {
-      backgroundColor: '#fed4db'
+      backgroundColor: 'rgba(254, 212, 219,0.5)'
    },
    '&.purple': {
-      backgroundColor: '#fceccf'
+      backgroundColor: 'rgba(252, 236, 207,0.5)'
    }
  },
  expandedRow: {
--- a/src/views/Home/panels/ShWarning/index.js
+++ b/src/views/Home/panels/ShWarning/index.js
@ -42,10 +42,10 @@ const useStyles = makeStyles((theme) => ({
  },
  warningRow: {
    '&.immediate': {
-      backgroundColor: '#d32f2f'
+      backgroundColor: 'rgba(211, 47, 47,0.5)'
    },
    '&.prepare': {
-      backgroundColor: '#ed6c02'
+      backgroundColor: 'rgba(237, 108, 2,0.5)'
    }
  },
  expandIcon: {
@ -103,7 +103,7 @@ export default function Overall({ style }) {
    {
      type: 'immediate',
      label: '立即转移',
-      count: 0,
+      count: 3,
      details: [] // 这里可以添加详细信息的数组
    },
    {
@ -146,6 +146,24 @@ export default function Overall({ style }) {

  }, [])

+  const zyData = [
+    {
+      adnm: '石桥湾村',
+      tm: '2025-05-22 12:03:00',
+      status: '关闭预警'
+    },
+    {
+      adnm: '凉亭村',
+      tm: '2025-05-22 12:03:00',
+      status: '关闭预警'
+    },
+    {
+      adnm: '古城村',
+      tm: '2025-05-22 12:03:00',
+      status: '关闭预警'
+    }
+  ]
+
  return (
    <PanelBox
      style={style}
@ -216,7 +234,25 @@ export default function Overall({ style }) {
                      <Collapse in={expanded[row.type]} timeout="auto" unmountOnExit>
                        <Box className={classes.expandedContent}>
                          {/* 这里可以添加展开后显示的详细内容 */}
-                          <Typography>暂无详细信息</Typography>
+                          {/* <Typography>暂无详细信息</Typography> */}
+                          {
+                            row.type == 'immediate' ? zyData.map(item => (
+                              <TableRow>
+                                <TableCell style={{ width: '30%' }}><div
+                                  className="table-ellipsis cursor-pointer"
+                                >{item.adnm}</div></TableCell>
+                                <TableCell style={{ width: '40%' }}><div
+                                  className="table-ellipsis cursor-pointer"
+                                >{item.tm}</div></TableCell>
+                                <TableCell style={{ width: '30%' }}><div
+                                  className="table-ellipsis cursor-pointer"
+                                >{item.status}</div></TableCell>
+                              </TableRow>
+                            ))
+
+                              :
+                              <Typography>暂无详细信息</Typography>
+                          }
                        </Box>
                      </Collapse>
                    </TableCell>
@ -229,15 +265,15 @@ export default function Overall({ style }) {

        <Box className={classes.statsSection}>
          <Typography variant="h6" className={classes.statsTitle}>
-            预警统计: 共 0 条
+            预警统计: 共 3 条
          </Typography>
          <Box className={classes.warningStats}>
            {warningData.map((stat) => (
              <Box key={stat.type} className={classes.statItem}>
                <div style={{ display: 'flex' }}>
                  <div>
-                  <WarningIcon className={`${classes.warningIcon} ${stat.type}`} />
-                  <Typography>{stat.label}</Typography>
+                    <WarningIcon className={`${classes.warningIcon} ${stat.type}`} />
+                    <Typography>{stat.label}</Typography>
                  </div>
                  <Typography variant="h6" style={{ color: '#fff' }}>{stat.count}</Typography>
                </div>
--- a/src/views/Home/panels/Shksh/index.js
+++ b/src/views/Home/panels/Shksh/index.js
@ -25,11 +25,28 @@ function HDReal({ style, onSelect }) {
      id: '420981',
      name: '麻城市',
      children: [
-        { id: '420981001', name: '龙池桥街道',lgtd:115.02073188,lttd:31.18672346,count:2 },
-        { id: '420981002', name: '木子店镇',lgtd:115.36181316,lttd:31.1908325,count:2},
-        { id: '420981003', name: '黄土岗镇',lgtd:115.07167872,lttd:31.37496863,count:2 },
-        { id: '420981004', name: '宋埠镇',lgtd:114.8003577,lttd:31.07316308,count:2 },
-        { id: '420981005', name: '南湖街道',lgtd:114.99464754,lttd:31.16857964,count:2},
+        {
+          id: '420981001', name: '龙池桥街道',
+          children: [{ id: '4209810011', name: '园林社区居民委员会山洪灾害防御预案', lgtd: 115.02073188, lttd: 31.18672346 },
+            { id: '4209810012', name: '城西社区居民委员会山洪灾害防御预案', lgtd: 115.02073188, lttd: 31.18672346 }
+          ]
+         },
+        {
+          id: '420981002', name: '木子店镇',
+          children:[{id: '4209810021', name: '木子店镇山洪灾害防御预案', lgtd: 115.36181316, lttd: 31.1908325}]
+        },
+        {
+          id: '420981003', name: '黄土岗镇',
+          children:[{id: '4209810031', name: '黄土岗镇山洪灾害防御预案', lgtd: 115.07167872, lttd: 31.3749686}]
+        },
+        {
+          id: '420981004', name: '宋埠镇',
+          children:[],
+        },
+        {
+          id: '420981005', name: '南湖街道',
+          children:[],
+        },
      ],
    },
  ];
@ -78,6 +95,25 @@ const useStyles = makeStyles({
    opacity: 0.8
  }
 });
+  const flattenArray = (data) => {
+  const result = [];
+  
+  const flatten = (item) => {
+    // 保存当前节点信息
+    const { children, ...rest } = item;
+    result.push(rest);
+    
+    // 递归处理子节点
+    if (children && children.length > 0) {
+      children.forEach(child => flatten(child));
+    }
+  };
+  
+  // 处理根节点
+  data.forEach(item => flatten(item));
+  
+  return result;
+};
 
  const classes = useStyles();
  const renderTree = (nodes) => {
@ -85,7 +121,7 @@ const useStyles = makeStyles({
    <Box className={classes.labelRoot}>
      <FolderIcon className={classes.labelIcon} />
      <Box className={classes.labelText}>{nodes.name}</Box>
-          <Box className={classes.numberText}>{!nodes.children ? `(${nodes.count})`:''}</Box>
+          {/* <Box className={classes.numberText}>{!nodes.children ? `(${nodes.count})`:''}</Box> */}
    </Box>
    );
    return (
@ -132,7 +168,8 @@ const useStyles = makeStyles({
  const [tableData, setTableData] = useState([])
  const handleNodeSelect = (event, nodeId) => {
    setTableData(dataObj[nodeId])
-    const row = machengData[0].children.find(item => item.id == nodeId)
+    const flatData = flattenArray(machengData);
+    const row = flatData.find(item => item.id == nodeId)
    dispatch.runtime.setShksh(row)
    flyTo(row)
  };
@ -176,13 +213,12 @@ const useStyles = makeStyles({
      >
        {renderTree(machengData[0])}
      </TreeView>
-        <div style={{ color: "#fff",marginBottom:20}}>预案列表</div>
+        {/* <div style={{ color: "#fff",marginBottom:20}}>预案列表</div>
         <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ width: '100%' }} align="left">预案名称</DpTableCell>
-              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
            </TableRow>
          </TableHead>
          <TableBody>
@ -198,7 +234,7 @@ const useStyles = makeStyles({
            ))}
          </TableBody>
        </Table>
-      </TableContainer>
+      </TableContainer> */}
      </div>
    </PanelBox>
  )
--- a/src/views/Home/panels/SkWarning/index.js
+++ b/src/views/Home/panels/SkWarning/index.js
@ -4,6 +4,8 @@ import useRequest from '../../../../utils/useRequest';
 import PanelBox from '../../components/PanelBox';
 import OverallContent from './OverallContent';
 import { makeStyles } from '@material-ui/core/styles';
+import { InfoPopNames } from '../../InfoPops';
+
 import {
  Box,
  Typography,
@ -20,6 +22,9 @@ import {
  IconButton,
  Collapse
 } from '@material-ui/core';
+import { useDispatch, useSelector } from 'react-redux';
+import config from '../../../../config';
+
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
 const useStyles = makeStyles((theme) => ({
@ -73,6 +78,17 @@ const useStyles = makeStyles((theme) => ({
      backgroundColor: 'rgba(255,255,255,0.1)'
    }
  },
+  warningRow: {
+    '&.pink': {
+      backgroundColor: 'rgba(255,192,203,0.8)'
+    },
+    '&.purple': {
+      backgroundColor: 'rgba(252, 236, 207,0.8)'
+    },
+    '&.blue': {
+      backgroundColor: 'rgba(252, 236, 207,0.5)'
+    }
+  },
  expandedRow: {
    '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
    '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
@ -81,6 +97,7 @@ const useStyles = makeStyles((theme) => ({
  }
 }));
 export default function Overall({ style }) {
+    const dispatch = useDispatch();

  const classes = useStyles();
  const [types, setTypes] = useState({
@ -102,7 +119,7 @@ export default function Overall({ style }) {
  const stations = [
    { id: 'history', name: '超校核洪水位', count: 0, color: 'pink' },
    { id: '100year', name: '超设计洪水位', count: 0, color: 'purple' },
-    { id: '50year', name: '超汛限水位', count: 0, color: 'blue' },
+    { id: 'cxx', name: '超汛限水位', count: 1, color: 'blue' },
  ];

  const toggleExpand = (id) => {
@ -112,6 +129,62 @@ export default function Overall({ style }) {
    }));
  };

+  const skData = [{
+            "stcd": "716113701",
+            "type": "sk",
+            "hasRz": true,
+            "stnm": "永红水库",
+            "adcd": "421181105000",
+            "wscd": null,
+            "importancy": 0,
+            "lgtd": 115.120278,
+            "lttd": 31.183611,
+            "elev": 0,
+            "damel": 131.99,
+            "dsflz": 130.56,
+            "fsltdz": 129.9,
+            "ddz": 113.5,
+            "zcxsw": 129.9,
+            "drpTm": "2025-04-11T06:00:00.000Z",
+            "today": 0,
+            "h1": 0,
+            "h3": 0,
+            "h6": 0,
+            "h12": 0,
+            "h24": 0,
+            "h48": 0,
+            "drpState": 2,
+            "rz": 119.15,
+            "w": 0.444,
+            "a_fsltdz": -10.75,
+            "rzTm": "2025-04-11T06:00:00.000Z",
+            "rzWarning": 0,
+            "rzState": 2,
+            "pic": [
+                {
+                    "stcd": "716113701",
+                    "tm": "2023-11-16T11:19:00.000Z",
+                    "url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113701/20231116191900.jpg"
+                },
+                {
+                    "stcd": "716113701",
+                    "tm": "2023-11-16T09:05:00.000Z",
+                    "url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113702/20231116170500.jpg"
+                }
+            ]
+  },]
+  const flyTo = () => {
+    const { lgtd, lttd } = skData[0];
+    if (lgtd && lttd) {
+      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: skData[0], coordinates: [lgtd, lttd] });
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        zoom: config.poiPositionZoom.hd,
+        pitch: config.poiPitch,
+      });
+    }
+  }
+
  return (
    <PanelBox
      style={style}
@ -119,7 +192,7 @@ export default function Overall({ style }) {
      color="green"
    >
      <Box className={classes.root}>
-        <Box className={classes.typeSection}>
+        {/* <Box className={classes.typeSection}>
          <Typography component="span">类型：</Typography>
          <FormControlLabel
            control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />}
@ -129,23 +202,24 @@ export default function Overall({ style }) {
            control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />}
            label="水库"
          />
-        </Box>
-  
+        </Box> */}
+

        <TableContainer>
          <Table className={classes.table}>
            <TableHead>
              <TableRow>
-                <TableCell style={{ width: '50%' }}>站名</TableCell>
-                <TableCell style={{ width: '20%' }}>水位(mm)</TableCell>
+                <TableCell style={{ width: '40%' }}>站名</TableCell>
+                <TableCell style={{ width: '14%' }}>水位(mm)</TableCell>
                <TableCell style={{ width: '15%' }}>所属政区</TableCell>
                <TableCell style={{ width: '15%' }}>所属流域</TableCell>
+                <TableCell style={{ width: '16%' }}>预案</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {stations.map((station) => (
                <React.Fragment key={station.id}>
-                  <TableRow className={classes.stationRow}>
+                  <TableRow className={`${classes.warningRow} ${station.color}`}>
                    <TableCell>
                      <Box display="flex" alignItems="center">
                        <IconButton
@ -161,18 +235,32 @@ export default function Overall({ style }) {
                    <TableCell></TableCell>
                    <TableCell></TableCell>
                    <TableCell></TableCell>
+                    <TableCell></TableCell>
                  </TableRow>
                  <TableRow>
-                    <TableCell colSpan={4} style={{ padding: 0 }}>
+                    <TableCell colSpan={5} style={{ padding: 0 }}>
                      <Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
                        <Box className={`${classes.expandedRow} ${station.color}`}>
                          {/* 展开的详细内容可以在这里添加 */}
-                          {/* <TableRow>
-                            <TableCell style={{ width: '25%' }}>站名</TableCell>
-                            <TableCell style={{ width: '20%' }}>水位(m)</TableCell>
-                            <TableCell style={{ width: '25%' }}>所属政区</TableCell>
-                            <TableCell style={{ width: '30%' }}>所属流域</TableCell>
-                          </TableRow> */}
+                          {
+                            station.id == "cxx" && <TableRow onClick={() => flyTo()}>
+                              <TableCell style={{ width: '20%' }}><div
+                                className="table-ellipsis cursor-pointer"
+                              >永红水库</div></TableCell>
+                              <TableCell style={{ width: '20%' }}>119.15(0.24)</TableCell>
+                              <TableCell style={{ width: '20%' }}><div
+                                className="table-ellipsis cursor-pointer"
+                              >阎家河镇</div></TableCell>
+                              <TableCell style={{ width: '20%' }}>阎家河</TableCell>
+                              <TableCell style={{ width: '20%' }}><a
+                                className="table-ellipsis cursor-pointer"
+                                onClick={() => {
+                                dispatch?.runtime.setInfoDlg({ layerId: 'PdfLayer', properties: {planName:'麻城市山洪灾害防御预案'} })
+                                }}
+                              >麻城市山洪灾害防御预案</a></TableCell>
+                            </TableRow>
+                          }
+
                        </Box>
                      </Collapse>
                    </TableCell>