diff --git a/public/assets/loushun.png b/public/assets/loushun.png new file mode 100644 index 0000000..a70e044 Binary files /dev/null and b/public/assets/loushun.png differ diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/Bjjl.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/Bjjl.js new file mode 100644 index 0000000..79dab50 --- /dev/null +++ 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 ( +
+ + + + + + 序号 + 报警类型 + 所在位置 + 报警时间 + 状态 + 处置情况 + + + + {data.map((row,i) => ( + + +
{ }}>{i+ 1}
+ + {row.type} + {row.location} + {row.tm} + {row.status} + setVisible(true)}>查看 + + ))} + +
+ + setVisible(false)} + > +
+ ) +} + +export default SkInfo; diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/index.js index 7dde867..71607f0 100644 --- 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 }) {
{value === 0 && } {value === 1 && } - {value === 2 && } - {value === 3 && } + {value === 2 && } + {value === 3 && }
diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/loushun.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/loushun.js new file mode 100644 index 0000000..08f1bc0 --- /dev/null +++ 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 ( +
+
+
+
+ +
+ +
+ + + + + 序号 + 漏水量（m³） + 供水量（m³） + 漏损率（%） + + + + {[].map((row,i) => ( + + +
{ }}>{i+ 1}
+ + {row.turbidity} + {row.chlorine} + {row.ph} + + ))} + +
+ +
+
+ +
+
+ ) +} + +export default SkInfo; diff --git a/src/views/Home/InfoDlg/ShuichangguanwangDlg/view.js b/src/views/Home/InfoDlg/ShuichangguanwangDlg/view.js new file mode 100644 index 0000000..d9af6aa --- /dev/null +++ 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 ( + +
+ + + setValue(v)}> + + + + +
+ +
+ +
+ + ) +} + +export default React.memo(HDStDlg);