diff --git a/src/models/map/layout.js b/src/models/map/layout.js
index 1d2fbf1..73a95b9 100644
--- a/src/models/map/layout.js
+++ b/src/models/map/layout.js
@@ -146,11 +146,11 @@ export default function calcLayout(view, rightStack, hidePanels) {
     }
     else if (view === 306) {
       left = [
-        { key: '管线', style: { height: '30rem', flexGrow: 1 } },
-        { key: '数量及里程分布', style: { height: '40rem', flexGrow: 1 } },
-        { key: '管网监测数据', style: { height: '40rem', flexGrow: 1 } },
+        { key: '管线', style: { height: '16rem', flexGrow: 1 } },
+                { key: '漏损排行榜', style: { height: '20rem', flexGrow: 1 } },
+        // { key: '管网监测数据', style: { height: '40rem', flexGrow: 1 } },
       ];
-      leftFullHeight = true;
+      // leftFullHeight = true;
     }
     else if (view === 307) {
       left = [
@@ -361,10 +361,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
     }
       else if (view === 306) {
       right = [
-        { key: '漏损排行榜', style: { height: '40%', flexGrow: 1 } },
-        { key: '最小流量', style: { height: '60%', flexGrow: 1 } },
+        { key: '数量及里程分布', style: { height: '30rem', flexGrow: 1 } },
+        { key: '管网监测数据', style: { height: '20rem', flexGrow: 1 } },
+
+        // { key: '最小流量', style: { height: '60%', flexGrow: 1 } },
       ];
-      rightFullHeight = true;
+      // rightFullHeight = true;
     }else if(view === 307) {
         right = [
        { key: '预案库管理', style: { height: '47rem' } },
diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/Shuizhijc.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/Shuizhijc.js
new file mode 100644
index 0000000..ad80c08
--- /dev/null
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/Shuizhijc.js
@@ -0,0 +1,291 @@
+import { Grid, withStyles, TableCell } from '@material-ui/core';
+import React from 'react';
+import useRequest from '../../../../utils/useRequest';
+import { skInfo } from '../../../../models/_/search';
+import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
+import { Person } from '@material-ui/icons';
+import PanelBox from '../../components/PanelBox';
+import { makeStyles } from '@material-ui/core/styles';
+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 { DatePicker } from 'antd';
+import moment from 'moment';
+import ReactECharts from 'echarts-for-react';
+
+
+const { RangePicker } = DatePicker;
+const useStyles = makeStyles({
+  tableContainer: {
+    background: '#182d42', // 设置表格容器的背景颜色
+  },
+  item: {
+    '& .MuiGrid-item': {
+      '& [class*="makeStyles-title"]': {
+        color: '#fff',
+        backgroundColor: '#104175',
+      },
+    },
+  },
+});
+const DpTableCell = withStyles({
+  head: {
+    backgroundColor: '#104175',
+    color: '#fff',
+    fontSize: '1rem',
+    padding: '0.5rem 0.3rem !important',
+  },
+  body: {
+    color: '#fff',
+    fontSize: '0.9rem',
+    padding: '0.7rem 0.3rem !important',
+    borderBottom: 'none',
+    position: "relative"
+  },
+})(TableCell);
+function SkInfo() {
+  const classes = useStyles();
+ const data = [
+    { time: '06-07 12:00', turbidity: 28.5, ammoniaNitrogen: 0.085, ph: 7.2, totalPhosphorus: 0.075 },
+    { time: '06-07 14:00', turbidity: 29.8, ammoniaNitrogen: 0.092, ph: 7.4, totalPhosphorus: 0.082 },
+    { time: '06-07 16:00', turbidity: 30.2, ammoniaNitrogen: 0.088, ph: 7.1, totalPhosphorus: 0.078 },
+    { time: '06-07 18:00', turbidity: 31.5, ammoniaNitrogen: 0.095, ph: 6.9, totalPhosphorus: 0.085 },
+    { time: '06-07 20:00', turbidity: 30.8, ammoniaNitrogen: 0.089, ph: 7.3, totalPhosphorus: 0.079 },
+    { time: '06-07 22:00', turbidity: 29.5, ammoniaNitrogen: 0.087, ph: 7.5, totalPhosphorus: 0.073 },
+    { time: '06-08 00:00', turbidity: 28.9, ammoniaNitrogen: 0.083, ph: 7.2, totalPhosphorus: 0.071 },
+    { time: '06-08 02:00', turbidity: 27.8, ammoniaNitrogen: 0.078, ph: 7.0, totalPhosphorus: 0.068 },
+    { time: '06-08 04:00', turbidity: 28.2, ammoniaNitrogen: 0.082, ph: 7.1, totalPhosphorus: 0.072 },
+    { time: '06-08 06:00', turbidity: 29.1, ammoniaNitrogen: 0.086, ph: 7.3, totalPhosphorus: 0.076 },
+    { time: '06-08 08:00', turbidity: 30.5, ammoniaNitrogen: 0.091, ph: 7.4, totalPhosphorus: 0.081 },
+    { time: '06-08 10:00', turbidity: 31.2, ammoniaNitrogen: 0.093, ph: 7.2, totalPhosphorus: 0.083 },
+    { time: '06-08 12:00', turbidity: 30.1, ammoniaNitrogen: 0.088, ph: 7.3, totalPhosphorus: 0.077 }
+  ];
+const option = {
+
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['浊度', '氨氮', 'PH', '总磷'],
+      textStyle: {
+        color: '#fff'
+      },
+      top: 30
+    },
+    grid: {
+      left: '3%',
+      right: '15%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: data.map(item => item.time),
+      axisLabel: {
+        color: '#fff',
+        interval: 2,
+        rotate: 0
+      }
+    },
+    yAxis: [
+      {
+        name: 'PH',
+        type: 'value',
+        position: 'left',
+        min: 6,
+        max: 9,
+        interval: 1,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#675bba'
+          }
+        },
+        axisLabel: {
+          color: '#fff'
+        }
+      },
+      {
+        name: '浊度(NTU)',
+        type: 'value',
+        position: 'right',
+        offset: 40,
+        min: 0,
+        max: 32,
+        interval: 8,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#5470c6'
+          }
+        },
+        axisLabel: {
+          color: '#fff'
+        }
+      },
+      {
+        name: '氨氮(mg/L)',
+        type: 'value',
+        position: 'right',
+        offset: 100,
+        min: 0,
+        max: 0.1,
+        interval: 0.025,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#91cc75'
+          }
+        },
+        axisLabel: {
+          color: '#fff'
+        }
+      },
+      {
+        name: '总磷(mg/L)',
+        type: 'value',
+        position: 'right',
+        offset: 165,
+        min: 0,
+        max: 0.1,
+        interval: 0.025,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fac858'
+          }
+        },
+        axisLabel: {
+          color: '#fff'
+        }
+      }
+    ],
+    series: [
+      {
+        name: 'PH',
+        type: 'line',
+        yAxisIndex: 0,
+        data: data.map(item => item.ph),
+        smooth: true,
+        lineStyle: {
+          color: '#675bba'
+        },
+        itemStyle: {
+          color: '#675bba'
+        }
+      },
+      {
+        name: '浊度',
+        type: 'line',
+        yAxisIndex: 1,
+        data: data.map(item => item.turbidity),
+        smooth: true,
+        lineStyle: {
+          color: '#5470c6'
+        },
+        itemStyle: {
+          color: '#5470c6'
+        }
+      },
+      {
+        name: '氨氮',
+        type: 'line',
+        yAxisIndex: 2,
+        data: data.map(item => item.ammoniaNitrogen),
+        smooth: true,
+        lineStyle: {
+          color: '#91cc75'
+        },
+        itemStyle: {
+          color: '#91cc75'
+        }
+      },
+      {
+        name: '总磷',
+        type: 'line',
+        yAxisIndex: 3,
+        data: data.map(item => item.totalPhosphorus),
+        smooth: true,
+        lineStyle: {
+          color: '#fac858'
+        },
+        itemStyle: {
+          color: '#fac858'
+        }
+      }
+    ]
+  };
+  return (
+    <div style={{ display: 'flex' }}>
+      <div style={{ width: 600 }}>
+        <div className='toolbar' style={{ marginBottom: '10px' }}>
+          <div className='tm' style={{ position: "relative", zIndex: 999999, width: '60%' }}>
+            <RangePicker
+              width="50%"
+              className='time-picker'
+              style={{
+                flex: 1,
+                background: "transparent",
+                border: "none",
+                color: "#fff",
+              }}
+              allowClear
+              format="YYYY-MM-DD HH:mm"
+              showTime={{
+                format: 'HH:mm',
+              }}
+              value={[moment('2025-06-07 12:00:00'), moment('2025-06-07 12:00:00')]}
+            />
+          </div>
+          <button className='search'>查询</button>
+        </div>
+        <TableContainer style={{ height: '49vh' }} className={classes.tableContainer}>
+          <Table size="small" stickyHeader>
+            <TableHead>
+              <TableRow style={{ padding: '30px 0' }}>
+                <DpTableCell align="center">时间</DpTableCell>
+                <DpTableCell align="center">浊度(NTU)</DpTableCell>
+                <DpTableCell align="center">氨氮(gml/L)</DpTableCell>
+                <DpTableCell align="center">PH值</DpTableCell>
+                <DpTableCell align="center">总磷(gml/L)</DpTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.map((row) => (
+                <DpTableRow key={row.stcd}>
+                  <DpTableCell align="center">
+                    <div className="table-ellipsis cursor-pointer" onClick={() => { }}>{row.time}</div>
+                  </DpTableCell>
+                  <DpTableCell align="center">{row.turbidity}</DpTableCell>
+                  <DpTableCell align="center">{row.ammoniaNitrogen}</DpTableCell>
+                  <DpTableCell align="center">{row.ph}</DpTableCell>
+                  <DpTableCell align="center">{row.totalPhosphorus}</DpTableCell>
+                </DpTableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </div>
+      <div style={{ height: '500px', width: '100%', flex: 1 }}>
+        <ReactECharts
+          option={option}
+          style={{ height: '100%' }}
+          opts={{ renderer: 'canvas' }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default SkInfo;
diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.js
new file mode 100644
index 0000000..7dde867
--- /dev/null
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.js
@@ -0,0 +1,58 @@
+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 { AppBar, Tab, Tabs } from '@material-ui/core';
+import DrpSearch from '../../components/DrpSearch';
+import DpTabs from '../../../../layouts/mui/DpTabs';
+import DpTab from '../../../../layouts/mui/DpTab';
+import RzSearch from '../../components/RzSearch';
+import SkImgSearch from '../../components/SkImgSearch';
+import DpAppBar from '../../../../layouts/mui/DpAppBar';
+import ShuiyuandiInfo from '../../components/ShuiyuandiInfo';
+import SkPlan from '../../components/SkInfo/SkPlan';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
+import ZrrPlan from './zrrPlan'
+import Shuizhijc from './Shuizhijc'
+import Jianceflow from './jianceflow'
+import Spjk from './spjk'
+import './index.less'
+function SkDlg({ record, onClose }) {
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+      <DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
+        <DpAppBar position="sticky">
+          <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
+            <DpTab label="基础信息" />
+            <DpTab label="运行数据" />
+            <DpTab label="报警记录" />
+            <DpTab label="漏损情况" />
+          </DpTabs>
+          <DpCloseButton onClick={onClose} />
+        </DpAppBar>
+        <div style={{ padding: '2rem', height: '50rem' }}>
+          {value === 0 && <ShuiyuandiInfo record={record} />}
+          {value === 1 && <Shuizhijc record={record} />}
+          {value === 2 && <Jianceflow record={record} />}
+          {value === 3 && <Spjk record={record} />}
+        </div>
+
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default React.memo(SkDlg);
diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.less b/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.less
new file mode 100644
index 0000000..d3fe0ef
--- /dev/null
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.less
@@ -0,0 +1,124 @@
+
+
+    .toolbar{
+        display: flex;
+        .tm{
+            width: 40%;
+            display: flex;
+            justify-content: center;
+            font-size: 14px;
+            font-weight: 400;
+            border-radius: 2px;
+            color: #fff;
+            background: linear-gradient(270deg,rgba(65,76,217,.4),rgba(58,85,218,.2) 14%,rgba(54,90,218,0) 49%,rgba(51,94,218,.2) 86%,rgba(44,102,219,.4));
+            border: 1px solid #0e4e93;
+
+            .MuiInput-underline:before{
+                border: 0px;
+            }
+            .time-picker{
+                .ant-picker-input > input{
+                    color: #fff;
+                }
+                .ant-picker-separator{
+                    color: #fff;
+                }
+                
+            }
+        }
+        .time-type {
+            margin-left: 10rem;
+            display: flex;
+            cursor: pointer;
+            background-color: #393e45;
+            border-radius: 5%;
+            padding: 0.01% !important;
+            border: 1px solid #585e64;
+            div {
+              width: 80px;
+              border-radius: 5%;
+              text-align: center;
+              border: 1px solid #585e64;
+              padding: 4px 0;
+            }
+        
+            .active {
+              color: #5FB7FF;
+            //   background: #F0F7FF;
+              border: 1px solid #5FB7FF;
+            }
+          }
+        .search{
+            margin-left: 1.5rem;
+            border: 1px solid #0e4e93;
+   
+            background: url(../../../../assets/btn44.png) no-repeat 100% center;
+            color: #fff;
+            padding: 0 1rem;
+            border-radius: 2px;
+            cursor: pointer;
+        }
+    }
+  
+    .echartBox{
+        width: 60%;
+        .echart1{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .foot{
+        flex: 1;
+        margin-top: 15px;
+        .split-line{
+            width: 100%;
+            border: 1px dashed rgba(16, 102, 141);
+            opacity: .36;
+            margin-bottom: 15px;
+        }
+        .MuiGrid-container{
+            background-color: #182d42 !important;
+        }
+    }
+    
+
+.ant-picker-panel-container{
+    background-color: rgba(36, 46, 92,1) !important;
+   
+}
+.ant-picker-header,.ant-picker-body{
+    color: #fff !important;
+    border-color: #242e5c;
+}
+.ant-picker-content th{
+    color: #fff !important;
+}
+.ant-picker-cell,
+.ant-picker-header-super-prev-btn,
+.ant-picker-header-prev-btn,
+.ant-picker-header-next-btn,
+.ant-picker-header-super-next-btn
+{
+    color: #fff !important;
+}
+.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
+    // background: transparent !important;
+    color: #000;
+}
+.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
+.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
+.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
+{
+    background-color:transparent !important;
+}
+.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
+    background-color: #1890ff !important;
+}
+.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
+    // background-color:transparent !important;
+    color: #000 !important;
+}
+.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
+{
+    color: #fff !important;
+}
\ No newline at end of file
diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/jianceflow.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/jianceflow.js
new file mode 100644
index 0000000..2b6749d
--- /dev/null
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/jianceflow.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import ReactECharts from 'echarts-for-react';
+
+const WaterLevelChart = () => {
+  const generateData = () => {
+    const data = [];
+    const startTime = new Date('2023-06-08T00:00:00');
+    const endTime = new Date('2023-06-08T14:00:00');
+    let currentTime = new Date(startTime);
+
+    while (currentTime <= endTime) {
+      const timeString = currentTime.toLocaleString('zh-CN', { 
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+      // 生成一个接近500的固定值
+      data.push({
+        time: timeString,
+        value: 495
+      });
+
+      currentTime.setHours(currentTime.getHours() + 1);
+    }
+    return data;
+  };
+
+  const data = generateData();
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: data.map(item => item.time),
+      axisLine: {
+        lineStyle: {
+          color: '#999'
+        }
+      },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 12
+      },
+      splitLine: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '水位(m)',
+      nameTextStyle: {
+        color: '#fff'
+      },
+      min: 0,
+      max: 500,
+      interval: 100,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#999'
+        }
+      },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 12
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#DDD'
+        }
+      }
+    },
+    series: [
+      {
+        name: '水位',
+        type: 'line',
+        data: data.map(item => item.value),
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: '#409EFF',
+          width: 2
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(64,158,255,0.2)'
+            }, {
+              offset: 1,
+              color: 'rgba(64,158,255,0)'
+            }]
+          }
+        }
+      }
+    ]
+  };
+
+  return <ReactECharts option={option} style={{ height: '550px' }} />;
+};
+
+export default WaterLevelChart;
\ No newline at end of file
diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/spjk.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/spjk.js
new file mode 100644
index 0000000..8b82a51
--- /dev/null
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/spjk.js
@@ -0,0 +1,85 @@
+import { Grid, withStyles, TableCell, Box,
+  Button,
+  ButtonGroup, } from '@material-ui/core';
+import React,{useState} from 'react';
+import useRequest from '../../../../utils/useRequest';
+import { skInfo } from '../../../../models/_/search';
+import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
+import { Person } from '@material-ui/icons';
+import PanelBox from '../../components/PanelBox';
+import { makeStyles } from '@material-ui/core/styles';
+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 { DatePicker } from 'antd';
+import moment from 'moment';
+import ReactECharts from 'echarts-for-react';
+
+
+const { RangePicker } = DatePicker;
+const useStyles = makeStyles((theme)=>({
+  tableContainer: {
+    background: '#182d42', // 设置表格容器的背景颜色
+  },
+  item: {
+    '& .MuiGrid-item': {
+      '& [class*="makeStyles-title"]': {
+        color: '#fff',
+        backgroundColor: '#104175',
+      },
+    },
+  },
+   searchRow: {
+    display: 'flex',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+     flexWrap: 'wrap',
+    marginBottom:10
+  },
+     buttonGroup: {
+    '& .MuiButton-root': {
+      color: '#fff',
+      borderColor: 'rgba(255, 255, 255, 0.3)',
+      '&.active': {
+        backgroundColor: '#2196f3',
+        borderColor: '#2196f3'
+      }
+    }
+  },
+}));
+
+function SkInfo() {
+  const classes = useStyles();
+   const [activeType, setActiveType] = useState('daily');
+    const [visible, setVisible] = useState(false)
+    const handleTypeChange = (type) => {
+      setActiveType(type);
+    };
+  return (
+    <div>
+      <Box className={classes.searchRow}>
+               <ButtonGroup className={classes.buttonGroup}>
+                 <Button 
+                   className={activeType === 'daily' ? 'active' : ''}
+                   onClick={() => handleTypeChange('daily')}
+                 >
+                  视频1
+                 </Button>
+                 <Button 
+                   className={activeType === 'flood' ? 'active' : ''}
+                   onClick={() => handleTypeChange('flood')}
+                 >
+                   视频2
+                 </Button>
+               </ButtonGroup>
+      </Box>
+      <img src={`${process.env.PUBLIC_URL}/assets/sksp.jpg`} alt="" style={{width:'96%',height:600}}/>
+    </div>
+  )
+}
+
+export default SkInfo;
diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/zrrPlan.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/zrrPlan.js
new file mode 100644
index 0000000..1a23af1
--- /dev/null
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/zrrPlan.js
@@ -0,0 +1,56 @@
+import { Grid } from '@material-ui/core';
+import React from 'react';
+import useRequest from '../../../../utils/useRequest';
+import { skInfo } from '../../../../models/_/search';
+import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
+import { Person } from '@material-ui/icons';
+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';
+
+
+function SkInfo() {
+  
+  const data = [
+    { name:'行政责任人', dm:'郑家豪', hfsw:'龟山镇人民政府', hfll:'组织委员', tm:'05-29 14:00' },
+    { name:'巡查责任人', dm:'熊中良', hfsw:'花桥河村', hfll:'书记', tm:'05-29 14:30' },
+    { name:'技术责任人', dm:'余健', hfsw:'农业农村服务中心', hfll:'副主任', tm:'05-29 15:00' },
+  ]
+  
+  return (
+    <div>
+      <TableContainer style={{ height: '100%' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow style={{padding:'30px 0'}}>
+              <DpTableCell style={{ maxWidth: '30%',padding:'15px' }} align="left">责任人</DpTableCell>
+              <DpTableCell align="center">姓名</DpTableCell>
+              <DpTableCell align="center">单位</DpTableCell>
+              <DpTableCell align="center">职务</DpTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data.map((row) => (
+              <DpTableRow key={row.stcd}>
+                <DpTableCell component="th" scope="row">
+                  <div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
+                </DpTableCell>
+                <DpTableCell align="center">{row.dm}</DpTableCell>
+                <DpTableCell align="center">{row.hfsw}</DpTableCell>
+                <DpTableCell align="center">{row.hfll}</DpTableCell>
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  )
+}
+
+export default SkInfo;
diff --git a/src/views/Home/InfoDlg/index.js b/src/views/Home/InfoDlg/index.js
index b0d1f90..ac51029 100644
--- a/src/views/Home/InfoDlg/index.js
+++ b/src/views/Home/InfoDlg/index.js
@@ -44,6 +44,7 @@ import WyWarnDlg from './WyWarnDlg';
 import ShuiChangDlg from './ShuiChangDlg';
 import ShuiyuandiDlg from './ShuiyuandiDlg';
 import ShuiBengDlg from './ShuiBengDlg'
+import ShuichangguanwangDlg from './ShuichangguanwangDlg';
 
 function InfoDlg() {
   const infoDlg = useSelector(getInfoDlg);
@@ -144,6 +145,8 @@ function InfoDlg() {
     return <ShuiyuandiDlg record={properties} onClose={handleClose} />
   }else if (layerId === 'ShuiBengLayer') {
     return <ShuiBengDlg record={properties} onClose={handleClose} />
+  }else if (layerId === 'GwLayer') {
+    return <ShuichangguanwangDlg record={properties} onClose={handleClose} />
   }
   
 
diff --git a/src/views/Home/components/ActionDock/index.js b/src/views/Home/components/ActionDock/index.js
index 39e7f5a..30ed2cf 100644
--- a/src/views/Home/components/ActionDock/index.js
+++ b/src/views/Home/components/ActionDock/index.js
@@ -35,7 +35,7 @@ const VIEWS = [
       { id: 303, title: '水厂运行', img: '/assets/menu/水库管理.png' },
       { id: 306, title: '管网健康诊断', img: '/assets/menu/水利设施.png' },
       { id: 307, title: '应急指挥调度', img: '/assets/menu/病险水库.png' },
-      { id: 305, title: '决策支持与报表', img: '/assets/menu/辅助决策.png' },
+      // { id: 305, title: '决策支持与报表', img: '/assets/menu/辅助决策.png' },
     ]
   },
   {
diff --git a/src/views/Home/panels/Gwjc/index.js b/src/views/Home/panels/Gwjc/index.js
index 55e45ed..7bafb04 100644
--- a/src/views/Home/panels/Gwjc/index.js
+++ b/src/views/Home/panels/Gwjc/index.js
@@ -18,14 +18,77 @@ import Setting from './Setting';
 import { InfoPopNames } from '../../InfoPops';
 import config from '../../../../config';
 import moment from 'moment';
+import { makeStyles } from '@material-ui/core/styles';
 import showData from './constant'
-function rzRender(rz, base) {
-  return (
-    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
-      {typeof base === 'number' ? base.toFixed(2) : ''}
-    </DpTableCell>
-  );
-}
+const useStyles = makeStyles((theme) => ({
+  root: {
+    color: '#fff',
+    '& .MuiTypography-root': {
+      color: '#fff'
+    },
+    '& .MuiCheckbox-root': {
+      color: '#fff',
+      '&.Mui-checked': {
+        color: '#409eff'
+      }
+    },
+    '& .MuiButtonGroup-root': {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(3)
+    }
+  },
+  typeSection: {
+    marginBottom: theme.spacing(2)
+  },
+  timeButton: {
+    color: '#fff',
+    borderColor: 'rgba(255,255,255,0.3)',
+    '&.MuiButton-contained': {
+      backgroundColor: '#409eff',
+      color: '#fff',
+      '&:hover': {
+        backgroundColor: '#409eff'
+      }
+    },
+    '&:hover': {
+      backgroundColor: 'rgba(255,255,255,0.1)'
+    }
+  },
+  table: {
+    '& .MuiTableCell-root': {
+      color: '#fff',
+      borderColor: 'rgba(255,255,255,0.1)'
+    }
+  },
+  expandButton: {
+    color: '#fff'
+  },
+  stationRow: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: 'rgba(255,255,255,0.05)'
+    },
+    '&:hover': {
+      backgroundColor: 'rgba(255,255,255,0.1)'
+    }
+  },
+  warningRow: {
+    '&.baoguan': {
+      backgroundColor: 'rgba(255, 0, 0,0.4)'
+    },
+    '&.press': {
+      backgroundColor: 'rgba(255, 255, 0,0.4)'
+    },
+    '&.loushun': {
+      backgroundColor: 'rgba(255, 192, 0,0.4)'
+    }
+  },
+  expandedRow: {
+    '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
+    '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
+    '&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
+    '&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
+  }
+}));
 
 function HDReal({ style }) {
   const dispatch = useDispatch();
@@ -35,48 +98,32 @@ function HDReal({ style }) {
   // let { data } = useRequest(HDRealPromise.get, t);
   const [setting, showSetting] = useState(false);
 
-  // const showData = useMemo(() => {
-  //   if (!data) {
-  //     return [];
-  //   }
-  //   let ret = [];
-  //   data.forEach(o => {
-  //     if (!tableRzFilter[o.type]) {
-  //       return;
-  //     }
-  //     o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
-  //     o.kd = (Math.random() * 100).toFixed(2);
-  //     o.ll = (Math.random() * 100).toFixed(1);
-  //     ret.push(o);
-  //   });
-  //   return ret;
-  // }, [data, tableRzFilter]);
-  const randomMinutes = Math.floor(Math.random() * 60) + 1;
-  const format = 'YYYY-MM-DD HH:mm';
+  const classes = useStyles();
+
 
   const showData = [
     {
-      stnm: '监测点1',
-      press: '0.91',
-      flow: 200,
-      hg: 90,
+      type: '爆管',
+      location: '',
+      types:'baoguan',
+      warnTm:'2025-06-06 15:38:00',
       "lgtd": 114.891667,
       "lttd": 31.346944,
-
     },
     {
-      stnm: '监测点2',
-      press: '0.52',
-      flow: 200,
-      hg: 90,
+      type: '压力异常',
+      location: '',
+      types:'press',
+      warnTm:'2025-06-06 15:38:00',
       "lgtd": 114.908889,
       "lttd": 31.334167,
 
-    }, {
-      stnm: '监测点3',
-      press: '0.52',
-      flow: 200,
-      hg: 20,
+    },
+    {
+       type: '漏损',
+      types:'loushun',
+      location: '',
+      warnTm:'2025-06-06 15:38:00',
       "lgtd": 115.024444,
       "lttd": 31.232222,
 
@@ -84,15 +131,16 @@ function HDReal({ style }) {
   ]
 
   const flyTo = (record) => {
-    const { lgtd, lttd } = record;
-    if (lgtd && lttd) {
-      dispatch.runtime.setFeaturePop({ type: 'shuichang', properties: record, coordinates: [lgtd, lttd] });
-      dispatch.runtime.setCameraTarget({
-        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
-        zoom: config.poiPositionZoom.hd,
-        pitch: config.poiPitch,
-      });
-    }
+     dispatch.runtime.setInfoDlg({ layerId: 'GwLayer', properties: record })
+    // const { lgtd, lttd } = record;
+    // if (lgtd && lttd) {
+    //   dispatch.runtime.setFeaturePop({ type: 'shuichang', properties: record, coordinates: [lgtd, lttd] });
+    //   dispatch.runtime.setCameraTarget({
+    //     center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+    //     zoom: config.poiPositionZoom.hd,
+    //     pitch: config.poiPitch,
+    //   });
+    // }
   }
 
   const toggleStType = (type) => {
@@ -109,47 +157,39 @@ function HDReal({ style }) {
   return (
     <PanelBox
       style={style}
-      title="管网监测数据"
+      title="报警列表"
       color="green"
-      // tabs={
-      //   <span className="button-group">
-      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
-      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
-      //   </span>
-      // }
-      extra={
-        <>
-          {/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
-          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
-        </>
-      }
     >
       <TableContainer style={{ height: '100%' }}>
         <Table size="small" stickyHeader>
           <TableHead>
             <TableRow>
-              <DpTableCell style={{ width: '20%' }} align="center">监测点</DpTableCell>
-              <DpTableCell style={{ width: '30%' }} align="center">压力(Mpa)</DpTableCell>
-              <DpTableCell align="center" style={{ width: '20%' }}>流量(m³/h)</DpTableCell>
-              <DpTableCell align="center" style={{ width: '30%' }}>水质合格率(%)</DpTableCell>
+              <DpTableCell style={{ width: '20%' }} align="center">序号</DpTableCell>
+              <DpTableCell style={{ width: '30%' }} align="center">报警类型</DpTableCell>
+              <DpTableCell align="center" style={{ width: '20%' }}>所在位置</DpTableCell>
+              <DpTableCell align="center" style={{ width: '30%' }}>报警时间</DpTableCell>
               {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
             </TableRow>
           </TableHead>
           <TableBody>
-            {showData.map((row) => (
-              <DpTableRow key={row.id} onClick={() => flyTo(row)}>
+            {showData.map((row,i) => (
+              <DpTableRow key={row.id} onClick={() => flyTo(row)} className={`${classes.warningRow} ${row.types}`}>
+                <DpTableCell align="center">{i+1}</DpTableCell>
+                
                 <DpTableCell align="center">
                   <div
                     className="table-ellipsis cursor-pointer"
-                  >{row.stnm}</div>
+                  >{row.type}</div>
                 </DpTableCell>
                 <DpTableCell align="center">
                   <div
-                    className="table-ellipsis cursor-pointer"
-                    style={{ color: row.press > 0.8 ? 'orange' : '' }}>{row.press}</div>
+                    className="table-ellipsis cursor-pointer">{row.location}</div>
                 </DpTableCell>
-                <DpTableCell align="center">{row.flow}</DpTableCell>
-                <DpTableCell align="center"><div style={{ color: row.hg < 80 ? 'orange' : '' }}>{row.hg}</div></DpTableCell>
+                <DpTableCell align="center">
+                  <div
+                    className="table-ellipsis cursor-pointer">{row.warnTm}</div>
+                  </DpTableCell>
+                {/* <DpTableCell align="center"><div style={{ color: row.hg < 80 ? 'orange' : '' }}>{row.hg}</div></DpTableCell> */}
                 {/* {rzRender(row.rz, row.grz)}
                 {rzRender(row.rz, row.wrz)} */}
               </DpTableRow>
diff --git a/src/views/Home/panels/Gwsllc/index.js b/src/views/Home/panels/Gwsllc/index.js
index 6f3e416..8f76a02 100644
--- a/src/views/Home/panels/Gwsllc/index.js
+++ b/src/views/Home/panels/Gwsllc/index.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState,useEffect } from 'react';
 import useRequest from '../../../../utils/useRequest';
 import PanelBox from '../../components/PanelBox';
 
@@ -37,44 +37,9 @@ function HDReal({ style }) {
   // let { data } = useRequest(HDRealPromise.get, t);
   const [setting, showSetting] = useState(false);
 
-  // const showData = useMemo(() => {
-  //   if (!data) {
-  //     return [];
-  //   }
-  //   let ret = [];
-  //   data.forEach(o => {
-  //     if (!tableRzFilter[o.type]) {
-  //       return;
-  //     }
-  //     o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
-  //     o.kd = (Math.random() * 100).toFixed(2);
-  //     o.ll = (Math.random() * 100).toFixed(1);
-  //     ret.push(o);
-  //   });
-  //   return ret;
-  // }, [data, tableRzFilter]);
-  const randomMinutes = Math.floor(Math.random() * 60) + 1;
-  const format = 'YYYY-MM-DD HH:mm';
+
  
-  const showData = [
-    {
-      stnm: '监测点1',
-      press: '0.52',
-      flow: 200,
-      hg:90
-    },
-     {
-      stnm: '监测点2',
-      press: '0.52',
-      flow: 200,
-      hg:90
-    },{
-      stnm: '监测点3',
-      press: '0.52',
-      flow: 200,
-      hg:90
-    }
-  ]
+
 
   const flyTo = (record) => {
       dispatch.map.setLayerVisible({'TrsqLayer':true})
@@ -88,15 +53,66 @@ function HDReal({ style }) {
       });
     }
   }
-
+  const [type, setType] = useState('sc')
   const toggleStType = (type) => {
-    const visible = !tableRzFilter[type];
-    dispatch.realview.setTableRzFilter({ [type]: visible });
+        setType(type)
   }
 
-  const toggleAutoRefresh = () => {
-    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
-  }
+  const scCharts = [
+    {
+      name: '浮桥河水厂',
+      count:18
+    },
+     {
+      name: '三河口水厂',
+      count:10
+    },
+     {
+      name: '刘集水厂',
+      count:5
+    },
+     {
+      name: '杉林河水厂',
+      count:7
+    },
+     {
+      name: '群英水厂',
+      count:8
+    }
+  ]
+  const xzCharts = [
+    {
+      name: "福田镇",
+      count:13
+    },
+    {
+      name: "龙池桥镇",
+      count:10
+    },
+    {
+      name: "木子店镇",
+      count:16
+    },
+    {
+      name: "宋埠镇",
+      count:12
+    },
+    {
+      name: "黄土岗镇",
+      count:4
+    },
+    {
+      name: "铁门岗镇",
+      count:8
+    }
+  ]
+
+   const [list, setList] = useState([])
+    useEffect(() => {
+      const newArr = type == 'sc' ? scCharts :xzCharts;
+      setList(newArr)
+    }, [type])
+  
 const option = {
     tooltip: {
       trigger: 'axis',
@@ -120,7 +136,7 @@ const option = {
     },
     xAxis: {
       type: 'category',
-      data: ['福田镇', '龙池桥镇', '木子店镇', '宋埠镇', '黄土岗镇', '铁门岗镇', '乘马岗镇', '白果镇', '张家畈镇', '顺河镇'],
+      data: list.map(item => item.name),
       axisLine: {
         lineStyle: {
           color: '#fff'
@@ -155,23 +171,23 @@ const option = {
     },
     series: [
       {
-        name: '数量分布',
+        name: type == 'sc' ?'水厂':'乡镇',
         type: 'bar',
-        data: [2050, 2250, 1300, 2100, 1950, 1100, 2150, 2400, 1950, 2100],
+        data: list.map(item => item.count),
         itemStyle: {
           color: '#36a4eb'
         },
         barWidth: '20%'
       },
-      {
-        name: '里程分布',
-        type: 'bar',
-        data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
-        itemStyle: {
-          color: '#4b5cc4'
-        },
-        barWidth: '20%'
-      }
+      // {
+      //   name: '里程分布',
+      //   type: 'bar',
+      //   data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
+      //   itemStyle: {
+      //     color: '#4b5cc4'
+      //   },
+      //   barWidth: '20%'
+      // }
     ]
   };
 
@@ -179,13 +195,13 @@ const option = {
   return (
     <PanelBox
       style={style}
-      title="数量及里程分布"
+      title="爆管统计"
       color="green"
-      extra={
-        <>
-          {/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
-          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
-        </>
+       tabs={
+        <span className="button-group">
+          <span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
+          <span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
+        </span>
       }
     >
        <ReactECharts
diff --git a/src/views/Home/panels/Gx/OverallContent.js b/src/views/Home/panels/Gx/OverallContent.js
index 3bcf2c0..9a80b37 100644
--- a/src/views/Home/panels/Gx/OverallContent.js
+++ b/src/views/Home/panels/Gx/OverallContent.js
@@ -116,23 +116,23 @@ export default function OverallContent({ data }) {
 
   return (
     <div className={classes.root}>
-      <div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'center',columnGap:20,alignItems:'center'}}>
-        <div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
-          <div className="value" style={{ color: '#5ecd45' }}>14700<span style={{fontSize:14}}>根</span></div>
-          <div className="key" style={{ color: '#fff', fontSize: 16 }}>总数量</div>
+      <div className={classes.grid} style={{flexWrap:'wrap',columnGap:20,alignItems:'center'}}>
+        <div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="value" style={{ color: '#5ecd45' }}>1200<span style={{fontSize:14}}>公里</span></div>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>总长度</div>
         </div>
-        <div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
-          <div className="value" style={{ color: '#5ecd45' }}>12875<span style={{fontSize:14}}>千米</span></div>
-          <div className="key" style={{ color: '#fff', fontSize: 16 }}>总里程</div>
+        <div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="value" style={{ color: '#5ecd45' }}>300<span style={{fontSize:14}}>平方公里</span></div>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>覆盖区域面积</div>
         </div>
-        {/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
-          <div className="value" style={{ cursor: 'pointer', color: '#5ecd45' }}>9876<span style={{fontSize:14}}>m³</span></div>
-          <div className="key" style={{ color: '#fff', fontSize: 16 }}>累计用水量</div>
+        <div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="value" style={{ cursor: 'pointer', color: 'red' }}>10<span style={{fontSize:14}}>个</span></div>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>流量监测点</div>
+        </div>
+        <div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="value" style={{ color: 'red' }}>9<span style={{fontSize:14}}>个</span></div>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>压力监测点</div>
         </div>
-        <div style={{ padding:"15px 30px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
-          <div className="value" style={{ color: '#5ecd45' }}>85.6<span style={{fontSize:14}}>%</span></div>
-          <div className="key" style={{ color: '#fff', fontSize: 16 }}>渠系利用率</div>
-        </div> */}
       </div>
     </div>
   )
diff --git a/src/views/Home/panels/Gx/index.js b/src/views/Home/panels/Gx/index.js
index 13b2421..129c597 100644
--- a/src/views/Home/panels/Gx/index.js
+++ b/src/views/Home/panels/Gx/index.js
@@ -11,7 +11,7 @@ export default function Overall({ style }) {
   return (
     <PanelBox
       style={style}
-      title="管线"
+      title="管网资产"
       color="green"
     >
       <OverallContent data={data} />
diff --git a/src/views/Home/panels/lsphb/index.js b/src/views/Home/panels/lsphb/index.js
index f31e128..1b7d2b8 100644
--- a/src/views/Home/panels/lsphb/index.js
+++ b/src/views/Home/panels/lsphb/index.js
@@ -38,35 +38,11 @@ function HDReal({ style }) {
   // let { data } = useRequest(HDRealPromise.get, t);
   const [setting, showSetting] = useState(false);
 
-  // const showData = useMemo(() => {
-  //   if (!data) {
-  //     return [];
-  //   }
-  //   let ret = [];
-  //   data.forEach(o => {
-  //     if (!tableRzFilter[o.type]) {
-  //       return;
-  //     }
-  //     o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
-  //     o.kd = (Math.random() * 100).toFixed(2);
-  //     o.ll = (Math.random() * 100).toFixed(1);
-  //     ret.push(o);
-  //   });
-  //   return ret;
-  // }, [data, tableRzFilter]);
-
-  const showData = Array(1).fill(0).map((o, i) => ({
-    date: '2025-05-26',
-    event: '侵占河道',
-    type: '侵占河道',
-    status: '待处理',
-    place: '浮桥河灌区'
-  }))
 
   const flyTo = (record) => {
     const { lgtd, lttd } = record;
     if (lgtd && lttd) {
-      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+      // dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
       dispatch.runtime.setCameraTarget({
         center: [lgtd, lttd + config.poiPositionOffsetY.hd],
         zoom: config.poiPositionZoom.hd,
@@ -77,20 +53,137 @@ function HDReal({ style }) {
 
 
   const data = [
-    { name: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
-    { name: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
-    { name: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
-    { name: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
-    { name: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
-    { name: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
-    { name: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
-    { name: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
-    { name: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
+    { stnm: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
+    { stnm: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
+    { stnm: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
+    { stnm: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
+    { stnm: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
+    { stnm: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
+    { stnm: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
+    { stnm: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
+    { stnm: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
     { name: '顺河镇区', leakage: '749.3', supply: '4490.1', rate: 16.7 }
   ];
+   const scData =  [
+  {
+        "stcd": "61612610",
+        "type": "sk",
+        "hasRz": true,
+        "stnm": "三河口水厂",
+        "adcd": "421181109000",
+    "wscd": null,
+                 rate:32.95,
+        "importancy": 0,
+        "lgtd": 115.166667,
+        "lttd": 31.333333,
+        "elev": 0,
+        "damel": 156.8,
+        "dsflz": 154.99,
+        "fsltdz": 149,
+        "ddz": 124,
+        "zcxsw": 149,
+        "drpTm": "2025-06-03T02:00:00.000Z",
+        "today": 0,
+        "h1": 0,
+        "h3": 0,
+        "h6": 0,
+        "h12": 0,
+        "h24": 0,
+        "h48": 12.5,
+        "drpState": 1,
+        "rz": 141.45,
+        "w": 77.8,
+        "a_fsltdz": -7.550000000000011,
+        "rzTm": "2025-06-03T01:00:00.000Z",
+        "rzWarning": 0,
+        "rzState": 1,
+        "aRz": -7.55
+    },
+ {
+        "stcd": "7CS000231",
+        "type": "sk",
+        "hasRz": true,
+   "stnm": "刘集水厂",
+          rate:31.04,
+        "adcd": "421181100000",
+        "wscd": null,
+        "importancy": 0,
+        "lgtd": 115.048056,
+        "lttd": 31.335556,
+        "elev": 0,
+        "damel": 79.6,
+        "dsflz": 78.65,
+        "fsltdz": 72.05,
+        "ddz": 69.55,
+        "zcxsw": 72.05,
+        "drpTm": "2023-11-20T01:00:00.000Z",
+        "today": 0,
+        "h1": 0,
+        "h3": 0,
+        "h6": 0,
+        "h12": 0,
+        "h24": 0,
+        "h48": 0,
+        "drpState": 2,
+        "rz": 76.49,
+        "w": 0.049,
+        "a_fsltdz": 4.439999999999998,
+        "rzTm": "2025-04-11T06:00:00.000Z",
+        "rzWarning": 1,
+        "rzState": 2,
+        "pic": [
+            {
+                "stcd": "7CS000231",
+                "tm": "2023-11-20T01:04:18.000Z",
+                "url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000231/20231120090418.jpg"
+            },
+            {
+                "stcd": "7CS000231",
+                "tm": "2023-11-20T01:07:54.000Z",
+                "url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000232/20231120090754.jpg"
+            }
+        ],
+        "aRz": 4.44
+    },
+ {
+        "stcd": "716460001",
+        "type": "sk",
+        "hasRz": true,
+   "stnm": "杉林河水厂",
+         rate:31.95,
+        "adcd": "421181107000",
+   "wscd": null,
+         percent:42.14,
+        "importancy": 0,
+        "lgtd": 115.433056,
+        "lttd": 31.304444,
+        "elev": 0,
+        "damel": 236.2,
+        "dsflz": 233.92,
+        "fsltdz": 231,
+        "ddz": 204,
+        "zcxsw": 231,
+        "drpTm": "2025-04-11T05:00:00.000Z",
+        "today": 0,
+        "h1": 0,
+        "h3": 0,
+        "h6": 0,
+        "h12": 0,
+        "h24": 0,
+        "h48": 0,
+        "drpState": 2,
+        "rz": 224.31,
+        "w": 0,
+        "a_fsltdz": -6.689999999999998,
+        "rzTm": "2025-04-11T05:00:00.000Z",
+        "rzWarning": 0,
+        "rzState": 2,
+        "aRz": -6.69
+    },
+  ]
+  const [type, setType] = useState('sc')
   const toggleStType = (type) => {
-    const visible = !tableRzFilter[type];
-    dispatch.realview.setTableRzFilter({ [type]: visible });
+    setType(type)
   }
   const [params, setParams] = useState({ tm: [] })
   const toggleAutoRefresh = () => {
@@ -119,17 +212,25 @@ function HDReal({ style }) {
     setParams(options)
 
   }, [])
+
+  const [list, setList] = useState([])
+  useEffect(() => {
+    const newArr = type == 'sc' ? scData :type == 'xz' ? data:[];
+    setList(newArr)
+  }, [type])
+  
   return (
     <PanelBox
       style={style}
       title="漏损排行榜"
       color="green"
-      // tabs={
-      //   <span className="button-group">
-      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
-      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
-      //   </span>
-      // }
+      tabs={
+        <span className="button-group">
+          <span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
+          <span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
+          <span className={clsx({ active: type == 'dma'})} onClick={() => toggleStType('dma')}>DMA分区</span>
+        </span>
+      }
       extra={
         <>
           {/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
@@ -161,22 +262,24 @@ function HDReal({ style }) {
         <Table size="small" stickyHeader>
           <TableHead>
             <TableRow >
-              <DpTableCell style={{ width: '30%' }} align="center">DMA分区名称</DpTableCell>
-              <DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
-              <DpTableCell align="center" style={{ width: '25%' }}>供水量(m³)</DpTableCell>
-              <DpTableCell align="center" style={{ width: '20%' }}>漏损率(%)</DpTableCell>
+              <DpTableCell style={{ width: '20%' }} align="center">序号</DpTableCell>
+              <DpTableCell style={{ width: '50%' }} align="center">名称</DpTableCell>
+              {/* <DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
+              <DpTableCell align="center" style={{ width: '25%' }}>供水量(m³)</DpTableCell> */}
+              <DpTableCell align="center" style={{ width: '30%' }}>漏损率(%)</DpTableCell>
             </TableRow>
           </TableHead>
           <TableBody>
-            {data.map((row) => (
+            {list.map((row,i) => (
               <DpTableRow key={row.id} onClick={() => flyTo(row)}>
                 <DpTableCell align="center">
                   <div
                     className="table-ellipsis cursor-pointer"
-                  >{row.name}</div>
+                  >{i+1}</div>
                 </DpTableCell>
-                <DpTableCell align="center">{row.leakage}</DpTableCell>
-                <DpTableCell align="center">{row.supply}</DpTableCell>
+                <DpTableCell align="center">{row.stnm}</DpTableCell>
+                {/* <DpTableCell align="center">{row.leakage}</DpTableCell>
+                <DpTableCell align="center">{row.supply}</DpTableCell> */}
                 <DpTableCell align="center">{row.rate}</DpTableCell>
                 {/* {rzRender(row.rz, row.grz)}
                 {rzRender(row.rz, row.wrz)} */}