From 54a923f2e33224ea1cf62a6bf3d7de2643897c83 Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Mon, 9 Jun 2025 15:44:06 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E6=B7=BB=E5=8A=A0=E7=AE=A1=E7=BD=91?= =?UTF-8?q?=E5=BC=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/models/map/layout.js | 16 +- .../InfoDlg/ShuichangguanwangDlg/Shuizhijc.js | 291 ++++++++++++++++++ .../InfoDlg/ShuichangguanwangDlg/index.js | 58 ++++ .../InfoDlg/ShuichangguanwangDlg/index.less | 124 ++++++++ .../ShuichangguanwangDlg/jianceflow.js | 122 ++++++++ .../Home/InfoDlg/ShuichangguanwangDlg/spjk.js | 85 +++++ .../InfoDlg/ShuichangguanwangDlg/zrrPlan.js | 56 ++++ src/views/Home/InfoDlg/index.js | 3 + src/views/Home/components/ActionDock/index.js | 2 +- src/views/Home/panels/Gwjc/index.js | 184 ++++++----- src/views/Home/panels/Gwsllc/index.js | 140 +++++---- src/views/Home/panels/Gx/OverallContent.js | 28 +- src/views/Home/panels/Gx/index.js | 2 +- src/views/Home/panels/lsphb/index.js | 203 +++++++++--- 14 files changed, 1107 insertions(+), 207 deletions(-) create mode 100644 src/views/Home/InfoDlg/ShuichangguanwangDlg/Shuizhijc.js create mode 100644 src/views/Home/InfoDlg/ShuichangguanwangDlg/index.js create mode 100644 src/views/Home/InfoDlg/ShuichangguanwangDlg/index.less create mode 100644 src/views/Home/InfoDlg/ShuichangguanwangDlg/jianceflow.js create mode 100644 src/views/Home/InfoDlg/ShuichangguanwangDlg/spjk.js create mode 100644 src/views/Home/InfoDlg/ShuichangguanwangDlg/zrrPlan.js 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 ( +
+
+
+
+ +
+ +
+ + + + + 时间 + 浊度(NTU) + 氨氮(gml/L) + PH值 + 总磷(gml/L) + + + + {data.map((row) => ( + + +
{ }}>{row.time}
+ + {row.turbidity} + {row.ammoniaNitrogen} + {row.ph} + {row.totalPhosphorus} + + ))} + +
+ +
+
+ +
+
+ ) +} + +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 ( + +
+ + + setValue(v)}> + + + + + + + +
+ {value === 0 && } + {value === 1 && } + {value === 2 && } + {value === 3 && } +
+ + +
+ + ) +} + +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 ; +}; + +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 ( +
+ + + + + + + +
+ ) +} + +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 ( +
+ + + + + 责任人 + 姓名 + 单位 + 职务 + + + + {data.map((row) => ( + + +
{}}>{row.name}
+ + {row.dm} + {row.hfsw} + {row.hfll} + + ))} + +
+ +
+ ) +} + +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 }else if (layerId === 'ShuiBengLayer') { return + }else if (layerId === 'GwLayer') { + return } 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 ( - = base ? 'red' : '#fff' }}> - {typeof base === 'number' ? base.toFixed(2) : ''} - - ); -} +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 ( - // toggleStType('sh')}>山洪 - // toggleStType('sw')}>水文 - // - // } - extra={ - <> - {/* */} - {/* showSetting(true)}> */} - - } > - 监测点 - 压力(Mpa) - 流量(m³/h) - 水质合格率(%) + 序号 + 报警类型 + 所在位置 + 报警时间 {/* 警戒水位 */} - {showData.map((row) => ( - flyTo(row)}> + {showData.map((row,i) => ( + flyTo(row)} className={`${classes.warningRow} ${row.types}`}> + {i+1} +
{row.stnm}
+ >{row.type}
0.8 ? 'orange' : '' }}>{row.press}
+ className="table-ellipsis cursor-pointer">{row.location} - {row.flow} -
{row.hg}
 + +
{row.warnTm}
+ + {/*
{row.hg}
 */} {/* {rzRender(row.rz, row.grz)} {rzRender(row.rz, row.wrz)} */} 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 ( - {/* */} - {/* showSetting(true)}> */} - + tabs={ + + toggleStType('sc')}>水厂 + toggleStType('xz')}>乡镇 + } > -
-
-
14700根
-
总数量
+
+
+
1200公里
+
总长度
-
-
12875千米
-
总里程
+
+
300平方公里
+
覆盖区域面积
- {/*
-
9876m³
-
累计用水量
+
+
10个
+
流量监测点
+
+
+
9个
+
压力监测点
-
-
85.6%
-
渠系利用率
-
*/}
) 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 ( 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 ( - // toggleStType('sh')}>山洪 - // toggleStType('sw')}>水文 - // - // } + tabs={ + + toggleStType('sc')}>水厂 + toggleStType('xz')}>乡镇 + toggleStType('dma')}>DMA分区 + + } extra={ <> {/* */} @@ -161,22 +262,24 @@ function HDReal({ style }) {
- DMA分区名称 - 漏水量(㎡) - 供水量(m³) - 漏损率(%) + 序号 + 名称 + {/* 漏水量(㎡) + 供水量(m³) */} + 漏损率(%) - {data.map((row) => ( + {list.map((row,i) => ( flyTo(row)}>
{row.name}
+ >{i+1} - {row.leakage} - {row.supply} + {row.stnm} + {/* {row.leakage} + {row.supply} */} {row.rate} {/* {rzRender(row.rz, row.grz)} {rzRender(row.rz, row.wrz)} */}