feat(): 水厂报警列表开发

2025-06-09 16:24:57 +08:00 · 2025-06-09 16:24:57 +08:00 · 0be79dd7c3
parent 54a923f2e3
commit 0be79dd7c3
5 changed files with 382 additions and 3 deletions
--- a/public/assets/loushun.png
+++ b/public/assets/loushun.png
--- a/src/views/Home/InfoDlg/ShuichangguanwangDlg/Bjjl.js
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/Bjjl.js
@ -0,0 +1,114 @@
+import { Grid, withStyles, TableCell } 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';
+import ModalView from './view'
+
+
+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 = [
+    {
+      type: '爆管',
+      location: '龙池桥街道',
+      tm: '2025-06-06 15:38:00',
+      status:'已解除'
+    },
+     {
+      type: '压力异常',
+      location: '夫子河监测点',
+      tm: '2025-06-06 15:38:00',
+      status:'未解除'
+   },
+     {
+      type: '漏损',
+      location: '南湖街道',
+      tm: '2025-06-06 15:38:00',
+      status:'已解除'
+   }
+  ];
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div style={{ display: 'flex' }}>
+    
+        <TableContainer style={{ height: '49vh' }} className={classes.tableContainer}>
+          <Table size="small" stickyHeader>
+            <TableHead>
+              <TableRow style={{ padding: '30px 0' }}>
+                <DpTableCell align="center">序号</DpTableCell>
+                <DpTableCell align="center">报警类型</DpTableCell>
+                <DpTableCell align="center">所在位置</DpTableCell>
+                <DpTableCell align="center">报警时间</DpTableCell>
+                <DpTableCell align="center">状态</DpTableCell>
+                <DpTableCell align="center">处置情况</DpTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.map((row,i) => (
+                <DpTableRow key={row.stcd}>
+                  <DpTableCell align="center">
+                    <div className="table-ellipsis cursor-pointer" onClick={() => { }}>{i+ 1}</div>
+                  </DpTableCell>
+                  <DpTableCell align="center">{row.type}</DpTableCell>
+                  <DpTableCell align="center">{row.location}</DpTableCell>
+                  <DpTableCell align="center">{row.tm}</DpTableCell>
+                  <DpTableCell align="center">{row.status}</DpTableCell>
+                  <DpTableCell align="center" onClick={() => setVisible(true)}>查看</DpTableCell>
+                </DpTableRow>
+              ))}
+            </TableBody>
+          </Table>
+      </TableContainer>
+      <ModalView
+              open={visible}
+              onClose={() => setVisible(false)}
+            ></ModalView>
+      </div>
+  )
+}
+
+export default SkInfo;
--- a/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.js
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.js
@ -15,9 +15,13 @@ 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 Shuizhijc from './loushun'
 import Jianceflow from './jianceflow'
 import Spjk from './spjk'
+
+
+
+import Bjjl from './Bjjl'
 import './index.less'
 function SkDlg({ record, onClose }) {
  const [value, setValue] = React.useState(0);
@ -45,8 +49,8 @@ function SkDlg({ record, onClose }) {
        <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} />}
+          {value === 2 && <Bjjl record={record} />}
+          {value === 3 && <Shuizhijc record={record} />}
        </div>

      </DialogContent>
--- a/src/views/Home/InfoDlg/ShuichangguanwangDlg/loushun.js
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/loushun.js
@ -0,0 +1,221 @@
+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-08 12:00', turbidity: 0.3, chlorine: 0.5, ph: 7.2 },
+    { time: '06-08 11:00', turbidity: 0.2, chlorine: 0.4, ph: 7.1 },
+    { time: '06-08 10:00', turbidity: 0.4, chlorine: 0.6, ph: 7.3 },
+    { time: '06-08 09:00', turbidity: 0.3, chlorine: 0.5, ph: 7.2 },
+    { time: '06-08 08:00', turbidity: 0.2, chlorine: 0.4, ph: 7.0 },
+    { time: '06-08 07:00', turbidity: 0.4, chlorine: 0.5, ph: 7.4 },
+    { time: '06-08 06:00', turbidity: 0.3, chlorine: 0.6, ph: 7.2 },
+    { time: '06-08 05:00', turbidity: 0.2, chlorine: 0.5, ph: 7.1 },
+    { time: '06-08 04:00', turbidity: 0.3, chlorine: 0.4, ph: 7.3 },
+    { time: '06-08 03:00', turbidity: 0.4, chlorine: 0.5, ph: 7.2 },
+    { time: '06-08 02:00', turbidity: 0.3, chlorine: 0.6, ph: 7.1 },
+    { time: '06-08 01:00', turbidity: 0.2, chlorine: 0.5, ph: 7.3 },
+    { time: '06-08 00:00', turbidity: 0.3, chlorine: 0.4, ph: 7.2 },
+    { time: '06-07 23:00', turbidity: 0.4, chlorine: 0.5, ph: 7.1 },
+    { time: '06-07 22:00', turbidity: 0.3, chlorine: 0.6, ph: 7.3 },
+    { time: '06-07 21:00', turbidity: 0.2, chlorine: 0.5, ph: 7.2 },
+    { time: '06-07 20:00', turbidity: 0.3, chlorine: 0.4, ph: 7.1 },
+    { time: '06-07 19:00', turbidity: 0.4, chlorine: 0.5, ph: 7.3 },
+    { time: '06-07 18:00', turbidity: 0.3, chlorine: 0.6, ph: 7.2 },
+    { time: '06-07 17:00', turbidity: 0.2, chlorine: 0.5, ph: 7.1 },
+    { time: '06-07 16:00', turbidity: 0.3, chlorine: 0.4, ph: 7.3 },
+    { time: '06-07 15:00', turbidity: 0.4, chlorine: 0.5, ph: 7.2 },
+    { time: '06-07 14:00', turbidity: 0.3, chlorine: 0.6, ph: 7.1 },
+    { time: '06-07 13:00', turbidity: 0.2, chlorine: 0.5, ph: 7.3 },
+    { time: '06-07 12:00', turbidity: 0.3, chlorine: 0.4, ph: 7.2 }
+  ];
+const option = {
+
+    tooltip: {
+      trigger: 'axis'
+    },
+    grid: {
+      top: '15%',
+      left: '3%',
+      right: '8%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['04-20', '04-21', '04-22', '04-23', '04-24', '04-25', '04-26'],
+      axisLine: {
+        lineStyle: {
+          color: '#fff'
+        }
+      },
+      axisLabel: {
+        color: '#fff'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '流量m³/h',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(255,255,255,0.2)'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#fff'
+        }
+      },
+      axisLabel: {
+        color: '#fff'
+      }
+    },
+    series: [
+      {
+        name: '夜间流量',
+        type: 'line',
+        smooth: true,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(0,255,255,0.3)'
+            }, {
+              offset: 1,
+              color: 'rgba(0,255,255,0)'
+            }]
+          }
+        },
+        lineStyle: {
+          color: '#00ffff'
+        },
+        data: [180, 205, 135, 150, 180, 120, 190],
+        markLine: {
+          silent: true,
+          lineStyle: {
+            color: '#ffd700',
+            type: 'dashed'
+          },
+          data: [{
+            yAxis: 180,
+            name: '安全流量上限'
+          }]
+        }
+      }
+    ]
+  };
+  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-04-20 12:00:00'), moment('2025-04-26 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">漏水量（m³）</DpTableCell>
+                <DpTableCell align="center">供水量（m³）</DpTableCell>
+                <DpTableCell align="center">漏损率（%）</DpTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {[].map((row,i) => (
+                <DpTableRow key={row.stcd}>
+                  <DpTableCell align="center">
+                    <div className="table-ellipsis cursor-pointer" onClick={() => { }}>{i+ 1}</div>
+                  </DpTableCell>
+                  <DpTableCell align="center">{row.turbidity}</DpTableCell>
+                  <DpTableCell align="center">{row.chlorine}</DpTableCell>
+                  <DpTableCell align="center">{row.ph}</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;
--- a/src/views/Home/InfoDlg/ShuichangguanwangDlg/view.js
+++ b/src/views/Home/InfoDlg/ShuichangguanwangDlg/view.js
@ -0,0 +1,40 @@
+import React from 'react';
+import DpTab from '../../../../layouts/mui/DpTab';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import DpTabs from '../../../../layouts/mui/DpTabs';
+import DpAppBar from '../../../../layouts/mui/DpAppBar';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
+
+function HDStDlg({ record, onClose,open }) {
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+      <DialogContent style={{ padding: 0, width: '70rem', overflowX: 'hidden',height:'50rem' }}>
+        <DpAppBar position="sticky">
+          <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
+            <DpTab label="任务信息" />
+          </DpTabs>
+          <DpCloseButton onClick={onClose} />
+        </DpAppBar>
+        <div style={{padding:10}}>
+        <img src={`${process.env.PUBLIC_URL}/assets/loushun.png`} style={{width:'100%'}}></img>
+       </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default React.memo(HDStDlg);