feat(): 添加管网弹框
parent
bf89f762c1
commit
54a923f2e3
|
|
@ -146,11 +146,11 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
}
|
}
|
||||||
else if (view === 306) {
|
else if (view === 306) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '管线', style: { height: '30rem', flexGrow: 1 } },
|
{ key: '管线', style: { height: '16rem', flexGrow: 1 } },
|
||||||
{ key: '数量及里程分布', style: { height: '40rem', flexGrow: 1 } },
|
{ key: '漏损排行榜', style: { height: '20rem', flexGrow: 1 } },
|
||||||
{ key: '管网监测数据', style: { height: '40rem', flexGrow: 1 } },
|
// { key: '管网监测数据', style: { height: '40rem', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
leftFullHeight = true;
|
// leftFullHeight = true;
|
||||||
}
|
}
|
||||||
else if (view === 307) {
|
else if (view === 307) {
|
||||||
left = [
|
left = [
|
||||||
|
|
@ -361,10 +361,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
}
|
}
|
||||||
else if (view === 306) {
|
else if (view === 306) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '漏损排行榜', style: { height: '40%', flexGrow: 1 } },
|
{ key: '数量及里程分布', style: { height: '30rem', flexGrow: 1 } },
|
||||||
{ key: '最小流量', style: { height: '60%', flexGrow: 1 } },
|
{ key: '管网监测数据', style: { height: '20rem', flexGrow: 1 } },
|
||||||
|
|
||||||
|
// { key: '最小流量', style: { height: '60%', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
rightFullHeight = true;
|
// rightFullHeight = true;
|
||||||
}else if(view === 307) {
|
}else if(view === 307) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '预案库管理', style: { height: '47rem' } },
|
{ key: '预案库管理', style: { height: '47rem' } },
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -44,6 +44,7 @@ import WyWarnDlg from './WyWarnDlg';
|
||||||
import ShuiChangDlg from './ShuiChangDlg';
|
import ShuiChangDlg from './ShuiChangDlg';
|
||||||
import ShuiyuandiDlg from './ShuiyuandiDlg';
|
import ShuiyuandiDlg from './ShuiyuandiDlg';
|
||||||
import ShuiBengDlg from './ShuiBengDlg'
|
import ShuiBengDlg from './ShuiBengDlg'
|
||||||
|
import ShuichangguanwangDlg from './ShuichangguanwangDlg';
|
||||||
|
|
||||||
function InfoDlg() {
|
function InfoDlg() {
|
||||||
const infoDlg = useSelector(getInfoDlg);
|
const infoDlg = useSelector(getInfoDlg);
|
||||||
|
|
@ -144,6 +145,8 @@ function InfoDlg() {
|
||||||
return <ShuiyuandiDlg record={properties} onClose={handleClose} />
|
return <ShuiyuandiDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'ShuiBengLayer') {
|
}else if (layerId === 'ShuiBengLayer') {
|
||||||
return <ShuiBengDlg record={properties} onClose={handleClose} />
|
return <ShuiBengDlg record={properties} onClose={handleClose} />
|
||||||
|
}else if (layerId === 'GwLayer') {
|
||||||
|
return <ShuichangguanwangDlg record={properties} onClose={handleClose} />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@ const VIEWS = [
|
||||||
{ id: 303, title: '水厂运行', img: '/assets/menu/水库管理.png' },
|
{ id: 303, title: '水厂运行', img: '/assets/menu/水库管理.png' },
|
||||||
{ id: 306, title: '管网健康诊断', img: '/assets/menu/水利设施.png' },
|
{ id: 306, title: '管网健康诊断', img: '/assets/menu/水利设施.png' },
|
||||||
{ id: 307, 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' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -18,14 +18,77 @@ import Setting from './Setting';
|
||||||
import { InfoPopNames } from '../../InfoPops';
|
import { InfoPopNames } from '../../InfoPops';
|
||||||
import config from '../../../../config';
|
import config from '../../../../config';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
import showData from './constant'
|
import showData from './constant'
|
||||||
function rzRender(rz, base) {
|
const useStyles = makeStyles((theme) => ({
|
||||||
return (
|
root: {
|
||||||
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
|
color: '#fff',
|
||||||
{typeof base === 'number' ? base.toFixed(2) : ''}
|
'& .MuiTypography-root': {
|
||||||
</DpTableCell>
|
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 }) {
|
function HDReal({ style }) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
@ -35,48 +98,32 @@ function HDReal({ style }) {
|
||||||
// let { data } = useRequest(HDRealPromise.get, t);
|
// let { data } = useRequest(HDRealPromise.get, t);
|
||||||
const [setting, showSetting] = useState(false);
|
const [setting, showSetting] = useState(false);
|
||||||
|
|
||||||
// const showData = useMemo(() => {
|
const classes = useStyles();
|
||||||
// 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 = [
|
const showData = [
|
||||||
{
|
{
|
||||||
stnm: '监测点1',
|
type: '爆管',
|
||||||
press: '0.91',
|
location: '',
|
||||||
flow: 200,
|
types:'baoguan',
|
||||||
hg: 90,
|
warnTm:'2025-06-06 15:38:00',
|
||||||
"lgtd": 114.891667,
|
"lgtd": 114.891667,
|
||||||
"lttd": 31.346944,
|
"lttd": 31.346944,
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
stnm: '监测点2',
|
type: '压力异常',
|
||||||
press: '0.52',
|
location: '',
|
||||||
flow: 200,
|
types:'press',
|
||||||
hg: 90,
|
warnTm:'2025-06-06 15:38:00',
|
||||||
"lgtd": 114.908889,
|
"lgtd": 114.908889,
|
||||||
"lttd": 31.334167,
|
"lttd": 31.334167,
|
||||||
|
|
||||||
}, {
|
},
|
||||||
stnm: '监测点3',
|
{
|
||||||
press: '0.52',
|
type: '漏损',
|
||||||
flow: 200,
|
types:'loushun',
|
||||||
hg: 20,
|
location: '',
|
||||||
|
warnTm:'2025-06-06 15:38:00',
|
||||||
"lgtd": 115.024444,
|
"lgtd": 115.024444,
|
||||||
"lttd": 31.232222,
|
"lttd": 31.232222,
|
||||||
|
|
||||||
|
|
@ -84,15 +131,16 @@ function HDReal({ style }) {
|
||||||
]
|
]
|
||||||
|
|
||||||
const flyTo = (record) => {
|
const flyTo = (record) => {
|
||||||
const { lgtd, lttd } = record;
|
dispatch.runtime.setInfoDlg({ layerId: 'GwLayer', properties: record })
|
||||||
if (lgtd && lttd) {
|
// const { lgtd, lttd } = record;
|
||||||
dispatch.runtime.setFeaturePop({ type: 'shuichang', properties: record, coordinates: [lgtd, lttd] });
|
// if (lgtd && lttd) {
|
||||||
dispatch.runtime.setCameraTarget({
|
// dispatch.runtime.setFeaturePop({ type: 'shuichang', properties: record, coordinates: [lgtd, lttd] });
|
||||||
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
// dispatch.runtime.setCameraTarget({
|
||||||
zoom: config.poiPositionZoom.hd,
|
// center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||||||
pitch: config.poiPitch,
|
// zoom: config.poiPositionZoom.hd,
|
||||||
});
|
// pitch: config.poiPitch,
|
||||||
}
|
// });
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleStType = (type) => {
|
const toggleStType = (type) => {
|
||||||
|
|
@ -109,47 +157,39 @@ function HDReal({ style }) {
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="管网监测数据"
|
title="报警列表"
|
||||||
color="green"
|
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%' }}>
|
<TableContainer style={{ height: '100%' }}>
|
||||||
<Table size="small" stickyHeader>
|
<Table size="small" stickyHeader>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<DpTableCell style={{ width: '20%' }} align="center">监测点</DpTableCell>
|
<DpTableCell style={{ width: '20%' }} align="center">序号</DpTableCell>
|
||||||
<DpTableCell style={{ width: '30%' }} align="center">压力(Mpa)</DpTableCell>
|
<DpTableCell style={{ width: '30%' }} align="center">报警类型</DpTableCell>
|
||||||
<DpTableCell align="center" style={{ width: '20%' }}>流量(m³/h)</DpTableCell>
|
<DpTableCell align="center" style={{ width: '20%' }}>所在位置</DpTableCell>
|
||||||
<DpTableCell align="center" style={{ width: '30%' }}>水质合格率(%)</DpTableCell>
|
<DpTableCell align="center" style={{ width: '30%' }}>报警时间</DpTableCell>
|
||||||
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{showData.map((row) => (
|
{showData.map((row,i) => (
|
||||||
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
<DpTableRow key={row.id} onClick={() => flyTo(row)} className={`${classes.warningRow} ${row.types}`}>
|
||||||
|
<DpTableCell align="center">{i+1}</DpTableCell>
|
||||||
|
|
||||||
<DpTableCell align="center">
|
<DpTableCell align="center">
|
||||||
<div
|
<div
|
||||||
className="table-ellipsis cursor-pointer"
|
className="table-ellipsis cursor-pointer"
|
||||||
>{row.stnm}</div>
|
>{row.type}</div>
|
||||||
</DpTableCell>
|
</DpTableCell>
|
||||||
<DpTableCell align="center">
|
<DpTableCell align="center">
|
||||||
<div
|
<div
|
||||||
className="table-ellipsis cursor-pointer"
|
className="table-ellipsis cursor-pointer">{row.location}</div>
|
||||||
style={{ color: row.press > 0.8 ? 'orange' : '' }}>{row.press}</div>
|
|
||||||
</DpTableCell>
|
</DpTableCell>
|
||||||
<DpTableCell align="center">{row.flow}</DpTableCell>
|
<DpTableCell align="center">
|
||||||
<DpTableCell align="center"><div style={{ color: row.hg < 80 ? 'orange' : '' }}>{row.hg}</div></DpTableCell>
|
<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.grz)}
|
||||||
{rzRender(row.rz, row.wrz)} */}
|
{rzRender(row.rz, row.wrz)} */}
|
||||||
</DpTableRow>
|
</DpTableRow>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useMemo, useState } from 'react';
|
import React, { useMemo, useState,useEffect } from 'react';
|
||||||
import useRequest from '../../../../utils/useRequest';
|
import useRequest from '../../../../utils/useRequest';
|
||||||
import PanelBox from '../../components/PanelBox';
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
|
||||||
|
|
@ -37,44 +37,9 @@ function HDReal({ style }) {
|
||||||
// let { data } = useRequest(HDRealPromise.get, t);
|
// let { data } = useRequest(HDRealPromise.get, t);
|
||||||
const [setting, showSetting] = useState(false);
|
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) => {
|
const flyTo = (record) => {
|
||||||
dispatch.map.setLayerVisible({'TrsqLayer':true})
|
dispatch.map.setLayerVisible({'TrsqLayer':true})
|
||||||
|
|
@ -88,15 +53,66 @@ function HDReal({ style }) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const [type, setType] = useState('sc')
|
||||||
const toggleStType = (type) => {
|
const toggleStType = (type) => {
|
||||||
const visible = !tableRzFilter[type];
|
setType(type)
|
||||||
dispatch.realview.setTableRzFilter({ [type]: visible });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleAutoRefresh = () => {
|
const scCharts = [
|
||||||
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
{
|
||||||
|
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 = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
|
@ -120,7 +136,7 @@ const option = {
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['福田镇', '龙池桥镇', '木子店镇', '宋埠镇', '黄土岗镇', '铁门岗镇', '乘马岗镇', '白果镇', '张家畈镇', '顺河镇'],
|
data: list.map(item => item.name),
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
|
|
@ -155,23 +171,23 @@ const option = {
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '数量分布',
|
name: type == 'sc' ?'水厂':'乡镇',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [2050, 2250, 1300, 2100, 1950, 1100, 2150, 2400, 1950, 2100],
|
data: list.map(item => item.count),
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#36a4eb'
|
color: '#36a4eb'
|
||||||
},
|
},
|
||||||
barWidth: '20%'
|
barWidth: '20%'
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: '里程分布',
|
// name: '里程分布',
|
||||||
type: 'bar',
|
// type: 'bar',
|
||||||
data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
|
// data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
color: '#4b5cc4'
|
// color: '#4b5cc4'
|
||||||
},
|
// },
|
||||||
barWidth: '20%'
|
// barWidth: '20%'
|
||||||
}
|
// }
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -179,13 +195,13 @@ const option = {
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="数量及里程分布"
|
title="爆管统计"
|
||||||
color="green"
|
color="green"
|
||||||
extra={
|
tabs={
|
||||||
<>
|
<span className="button-group">
|
||||||
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||||
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
<span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
|
||||||
</>
|
</span>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<ReactECharts
|
<ReactECharts
|
||||||
|
|
|
||||||
|
|
@ -116,23 +116,23 @@ export default function OverallContent({ data }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.root}>
|
<div className={classes.root}>
|
||||||
<div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'center',columnGap:20,alignItems:'center'}}>
|
<div className={classes.grid} style={{flexWrap:'wrap',columnGap:20,alignItems:'center'}}>
|
||||||
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
<div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||||
<div className="value" style={{ color: '#5ecd45' }}>14700<span style={{fontSize:14}}>根</span></div>
|
<div className="value" style={{ color: '#5ecd45' }}>1200<span style={{fontSize:14}}>公里</span></div>
|
||||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总数量</div>
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总长度</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
<div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||||
<div className="value" style={{ color: '#5ecd45' }}>12875<span style={{fontSize:14}}>千米</span></div>
|
<div className="value" style={{ color: '#5ecd45' }}>300<span style={{fontSize:14}}>平方公里</span></div>
|
||||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总里程</div>
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>覆盖区域面积</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
<div style={{ padding: "5px 0px",width:162, 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="value" style={{ cursor: 'pointer', color: 'red' }}>10<span style={{fontSize:14}}>个</span></div>
|
||||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>累计用水量</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>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ export default function Overall({ style }) {
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="管线"
|
title="管网资产"
|
||||||
color="green"
|
color="green"
|
||||||
>
|
>
|
||||||
<OverallContent data={data} />
|
<OverallContent data={data} />
|
||||||
|
|
|
||||||
|
|
@ -38,35 +38,11 @@ function HDReal({ style }) {
|
||||||
// let { data } = useRequest(HDRealPromise.get, t);
|
// let { data } = useRequest(HDRealPromise.get, t);
|
||||||
const [setting, showSetting] = useState(false);
|
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 flyTo = (record) => {
|
||||||
const { lgtd, lttd } = record;
|
const { lgtd, lttd } = record;
|
||||||
if (lgtd && lttd) {
|
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({
|
dispatch.runtime.setCameraTarget({
|
||||||
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||||||
zoom: config.poiPositionZoom.hd,
|
zoom: config.poiPositionZoom.hd,
|
||||||
|
|
@ -77,20 +53,137 @@ function HDReal({ style }) {
|
||||||
|
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ name: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
|
{ stnm: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
|
||||||
{ name: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
|
{ stnm: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
|
||||||
{ name: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
|
{ stnm: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
|
||||||
{ name: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
|
{ stnm: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
|
||||||
{ name: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
|
{ stnm: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
|
||||||
{ name: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
|
{ stnm: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
|
||||||
{ name: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
|
{ stnm: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
|
||||||
{ name: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
|
{ stnm: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
|
||||||
{ name: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
|
{ stnm: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
|
||||||
{ name: '顺河镇区', leakage: '749.3', supply: '4490.1', 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 toggleStType = (type) => {
|
||||||
const visible = !tableRzFilter[type];
|
setType(type)
|
||||||
dispatch.realview.setTableRzFilter({ [type]: visible });
|
|
||||||
}
|
}
|
||||||
const [params, setParams] = useState({ tm: [] })
|
const [params, setParams] = useState({ tm: [] })
|
||||||
const toggleAutoRefresh = () => {
|
const toggleAutoRefresh = () => {
|
||||||
|
|
@ -119,17 +212,25 @@ function HDReal({ style }) {
|
||||||
setParams(options)
|
setParams(options)
|
||||||
|
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
const [list, setList] = useState([])
|
||||||
|
useEffect(() => {
|
||||||
|
const newArr = type == 'sc' ? scData :type == 'xz' ? data:[];
|
||||||
|
setList(newArr)
|
||||||
|
}, [type])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="漏损排行榜"
|
title="漏损排行榜"
|
||||||
color="green"
|
color="green"
|
||||||
// tabs={
|
tabs={
|
||||||
// <span className="button-group">
|
<span className="button-group">
|
||||||
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
|
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||||
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
|
<span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
|
||||||
// </span>
|
<span className={clsx({ active: type == 'dma'})} onClick={() => toggleStType('dma')}>DMA分区</span>
|
||||||
// }
|
</span>
|
||||||
|
}
|
||||||
extra={
|
extra={
|
||||||
<>
|
<>
|
||||||
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
{/* <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>
|
<Table size="small" stickyHeader>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow >
|
<TableRow >
|
||||||
<DpTableCell style={{ width: '30%' }} align="center">DMA分区名称</DpTableCell>
|
<DpTableCell style={{ width: '20%' }} align="center">序号</DpTableCell>
|
||||||
<DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
|
<DpTableCell style={{ width: '50%' }} align="center">名称</DpTableCell>
|
||||||
<DpTableCell align="center" style={{ width: '25%' }}>供水量(m³)</DpTableCell>
|
{/* <DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
|
||||||
<DpTableCell align="center" style={{ width: '20%' }}>漏损率(%)</DpTableCell>
|
<DpTableCell align="center" style={{ width: '25%' }}>供水量(m³)</DpTableCell> */}
|
||||||
|
<DpTableCell align="center" style={{ width: '30%' }}>漏损率(%)</DpTableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{data.map((row) => (
|
{list.map((row,i) => (
|
||||||
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
||||||
<DpTableCell align="center">
|
<DpTableCell align="center">
|
||||||
<div
|
<div
|
||||||
className="table-ellipsis cursor-pointer"
|
className="table-ellipsis cursor-pointer"
|
||||||
>{row.name}</div>
|
>{i+1}</div>
|
||||||
</DpTableCell>
|
</DpTableCell>
|
||||||
<DpTableCell align="center">{row.leakage}</DpTableCell>
|
<DpTableCell align="center">{row.stnm}</DpTableCell>
|
||||||
<DpTableCell align="center">{row.supply}</DpTableCell>
|
{/* <DpTableCell align="center">{row.leakage}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.supply}</DpTableCell> */}
|
||||||
<DpTableCell align="center">{row.rate}</DpTableCell>
|
<DpTableCell align="center">{row.rate}</DpTableCell>
|
||||||
{/* {rzRender(row.rz, row.grz)}
|
{/* {rzRender(row.rz, row.grz)}
|
||||||
{rzRender(row.rz, row.wrz)} */}
|
{rzRender(row.rz, row.wrz)} */}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue