feat(): 添加管网弹框
parent
bf89f762c1
commit
54a923f2e3
|
|
@ -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' } },
|
||||
|
|
|
|||
|
|
@ -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 ShuiyuandiDlg from './ShuiyuandiDlg';
|
||||
import ShuiBengDlg from './ShuiBengDlg'
|
||||
import ShuichangguanwangDlg from './ShuichangguanwangDlg';
|
||||
|
||||
function InfoDlg() {
|
||||
const infoDlg = useSelector(getInfoDlg);
|
||||
|
|
@ -144,6 +145,8 @@ function InfoDlg() {
|
|||
return <ShuiyuandiDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'ShuiBengLayer') {
|
||||
return <ShuiBengDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'GwLayer') {
|
||||
return <ShuichangguanwangDlg record={properties} onClose={handleClose} />
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -18,14 +18,77 @@ import Setting from './Setting';
|
|||
import { InfoPopNames } from '../../InfoPops';
|
||||
import config from '../../../../config';
|
||||
import moment from 'moment';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import showData from './constant'
|
||||
function rzRender(rz, base) {
|
||||
return (
|
||||
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
|
||||
{typeof base === 'number' ? base.toFixed(2) : ''}
|
||||
</DpTableCell>
|
||||
);
|
||||
}
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
color: '#fff',
|
||||
'& .MuiTypography-root': {
|
||||
color: '#fff'
|
||||
},
|
||||
'& .MuiCheckbox-root': {
|
||||
color: '#fff',
|
||||
'&.Mui-checked': {
|
||||
color: '#409eff'
|
||||
}
|
||||
},
|
||||
'& .MuiButtonGroup-root': {
|
||||
marginTop: theme.spacing(2),
|
||||
marginBottom: theme.spacing(3)
|
||||
}
|
||||
},
|
||||
typeSection: {
|
||||
marginBottom: theme.spacing(2)
|
||||
},
|
||||
timeButton: {
|
||||
color: '#fff',
|
||||
borderColor: 'rgba(255,255,255,0.3)',
|
||||
'&.MuiButton-contained': {
|
||||
backgroundColor: '#409eff',
|
||||
color: '#fff',
|
||||
'&:hover': {
|
||||
backgroundColor: '#409eff'
|
||||
}
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255,255,255,0.1)'
|
||||
}
|
||||
},
|
||||
table: {
|
||||
'& .MuiTableCell-root': {
|
||||
color: '#fff',
|
||||
borderColor: 'rgba(255,255,255,0.1)'
|
||||
}
|
||||
},
|
||||
expandButton: {
|
||||
color: '#fff'
|
||||
},
|
||||
stationRow: {
|
||||
'&:nth-of-type(odd)': {
|
||||
backgroundColor: 'rgba(255,255,255,0.05)'
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255,255,255,0.1)'
|
||||
}
|
||||
},
|
||||
warningRow: {
|
||||
'&.baoguan': {
|
||||
backgroundColor: 'rgba(255, 0, 0,0.4)'
|
||||
},
|
||||
'&.press': {
|
||||
backgroundColor: 'rgba(255, 255, 0,0.4)'
|
||||
},
|
||||
'&.loushun': {
|
||||
backgroundColor: 'rgba(255, 192, 0,0.4)'
|
||||
}
|
||||
},
|
||||
expandedRow: {
|
||||
'&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
|
||||
'&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
|
||||
'&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
|
||||
'&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
|
||||
}
|
||||
}));
|
||||
|
||||
function HDReal({ style }) {
|
||||
const dispatch = useDispatch();
|
||||
|
|
@ -35,48 +98,32 @@ function HDReal({ style }) {
|
|||
// let { data } = useRequest(HDRealPromise.get, t);
|
||||
const [setting, showSetting] = useState(false);
|
||||
|
||||
// const showData = useMemo(() => {
|
||||
// if (!data) {
|
||||
// return [];
|
||||
// }
|
||||
// let ret = [];
|
||||
// data.forEach(o => {
|
||||
// if (!tableRzFilter[o.type]) {
|
||||
// return;
|
||||
// }
|
||||
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
|
||||
// o.kd = (Math.random() * 100).toFixed(2);
|
||||
// o.ll = (Math.random() * 100).toFixed(1);
|
||||
// ret.push(o);
|
||||
// });
|
||||
// return ret;
|
||||
// }, [data, tableRzFilter]);
|
||||
const randomMinutes = Math.floor(Math.random() * 60) + 1;
|
||||
const format = 'YYYY-MM-DD HH:mm';
|
||||
const classes = useStyles();
|
||||
|
||||
|
||||
const showData = [
|
||||
{
|
||||
stnm: '监测点1',
|
||||
press: '0.91',
|
||||
flow: 200,
|
||||
hg: 90,
|
||||
type: '爆管',
|
||||
location: '',
|
||||
types:'baoguan',
|
||||
warnTm:'2025-06-06 15:38:00',
|
||||
"lgtd": 114.891667,
|
||||
"lttd": 31.346944,
|
||||
|
||||
},
|
||||
{
|
||||
stnm: '监测点2',
|
||||
press: '0.52',
|
||||
flow: 200,
|
||||
hg: 90,
|
||||
type: '压力异常',
|
||||
location: '',
|
||||
types:'press',
|
||||
warnTm:'2025-06-06 15:38:00',
|
||||
"lgtd": 114.908889,
|
||||
"lttd": 31.334167,
|
||||
|
||||
}, {
|
||||
stnm: '监测点3',
|
||||
press: '0.52',
|
||||
flow: 200,
|
||||
hg: 20,
|
||||
},
|
||||
{
|
||||
type: '漏损',
|
||||
types:'loushun',
|
||||
location: '',
|
||||
warnTm:'2025-06-06 15:38:00',
|
||||
"lgtd": 115.024444,
|
||||
"lttd": 31.232222,
|
||||
|
||||
|
|
@ -84,15 +131,16 @@ function HDReal({ style }) {
|
|||
]
|
||||
|
||||
const flyTo = (record) => {
|
||||
const { lgtd, lttd } = record;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.runtime.setFeaturePop({ type: 'shuichang', properties: record, coordinates: [lgtd, lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||||
zoom: config.poiPositionZoom.hd,
|
||||
pitch: config.poiPitch,
|
||||
});
|
||||
}
|
||||
dispatch.runtime.setInfoDlg({ layerId: 'GwLayer', properties: record })
|
||||
// const { lgtd, lttd } = record;
|
||||
// if (lgtd && lttd) {
|
||||
// dispatch.runtime.setFeaturePop({ type: 'shuichang', properties: record, coordinates: [lgtd, lttd] });
|
||||
// dispatch.runtime.setCameraTarget({
|
||||
// center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||||
// zoom: config.poiPositionZoom.hd,
|
||||
// pitch: config.poiPitch,
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
const toggleStType = (type) => {
|
||||
|
|
@ -109,47 +157,39 @@ function HDReal({ style }) {
|
|||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="管网监测数据"
|
||||
title="报警列表"
|
||||
color="green"
|
||||
// tabs={
|
||||
// <span className="button-group">
|
||||
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
|
||||
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
|
||||
// </span>
|
||||
// }
|
||||
extra={
|
||||
<>
|
||||
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
||||
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ width: '20%' }} align="center">监测点</DpTableCell>
|
||||
<DpTableCell style={{ width: '30%' }} align="center">压力(Mpa)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>流量(m³/h)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '30%' }}>水质合格率(%)</DpTableCell>
|
||||
<DpTableCell style={{ width: '20%' }} align="center">序号</DpTableCell>
|
||||
<DpTableCell style={{ width: '30%' }} align="center">报警类型</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>所在位置</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '30%' }}>报警时间</DpTableCell>
|
||||
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{showData.map((row) => (
|
||||
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
||||
{showData.map((row,i) => (
|
||||
<DpTableRow key={row.id} onClick={() => flyTo(row)} className={`${classes.warningRow} ${row.types}`}>
|
||||
<DpTableCell align="center">{i+1}</DpTableCell>
|
||||
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
>{row.stnm}</div>
|
||||
>{row.type}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
style={{ color: row.press > 0.8 ? 'orange' : '' }}>{row.press}</div>
|
||||
className="table-ellipsis cursor-pointer">{row.location}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.flow}</DpTableCell>
|
||||
<DpTableCell align="center"><div style={{ color: row.hg < 80 ? 'orange' : '' }}>{row.hg}</div></DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer">{row.warnTm}</div>
|
||||
</DpTableCell>
|
||||
{/* <DpTableCell align="center"><div style={{ color: row.hg < 80 ? 'orange' : '' }}>{row.hg}</div></DpTableCell> */}
|
||||
{/* {rzRender(row.rz, row.grz)}
|
||||
{rzRender(row.rz, row.wrz)} */}
|
||||
</DpTableRow>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import React, { useMemo, useState,useEffect } from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
|
|
@ -37,44 +37,9 @@ function HDReal({ style }) {
|
|||
// let { data } = useRequest(HDRealPromise.get, t);
|
||||
const [setting, showSetting] = useState(false);
|
||||
|
||||
// const showData = useMemo(() => {
|
||||
// if (!data) {
|
||||
// return [];
|
||||
// }
|
||||
// let ret = [];
|
||||
// data.forEach(o => {
|
||||
// if (!tableRzFilter[o.type]) {
|
||||
// return;
|
||||
// }
|
||||
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
|
||||
// o.kd = (Math.random() * 100).toFixed(2);
|
||||
// o.ll = (Math.random() * 100).toFixed(1);
|
||||
// ret.push(o);
|
||||
// });
|
||||
// return ret;
|
||||
// }, [data, tableRzFilter]);
|
||||
const randomMinutes = Math.floor(Math.random() * 60) + 1;
|
||||
const format = 'YYYY-MM-DD HH:mm';
|
||||
|
||||
|
||||
const showData = [
|
||||
{
|
||||
stnm: '监测点1',
|
||||
press: '0.52',
|
||||
flow: 200,
|
||||
hg:90
|
||||
},
|
||||
{
|
||||
stnm: '监测点2',
|
||||
press: '0.52',
|
||||
flow: 200,
|
||||
hg:90
|
||||
},{
|
||||
stnm: '监测点3',
|
||||
press: '0.52',
|
||||
flow: 200,
|
||||
hg:90
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const flyTo = (record) => {
|
||||
dispatch.map.setLayerVisible({'TrsqLayer':true})
|
||||
|
|
@ -88,15 +53,66 @@ function HDReal({ style }) {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
const [type, setType] = useState('sc')
|
||||
const toggleStType = (type) => {
|
||||
const visible = !tableRzFilter[type];
|
||||
dispatch.realview.setTableRzFilter({ [type]: visible });
|
||||
setType(type)
|
||||
}
|
||||
|
||||
const toggleAutoRefresh = () => {
|
||||
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
||||
}
|
||||
const scCharts = [
|
||||
{
|
||||
name: '浮桥河水厂',
|
||||
count:18
|
||||
},
|
||||
{
|
||||
name: '三河口水厂',
|
||||
count:10
|
||||
},
|
||||
{
|
||||
name: '刘集水厂',
|
||||
count:5
|
||||
},
|
||||
{
|
||||
name: '杉林河水厂',
|
||||
count:7
|
||||
},
|
||||
{
|
||||
name: '群英水厂',
|
||||
count:8
|
||||
}
|
||||
]
|
||||
const xzCharts = [
|
||||
{
|
||||
name: "福田镇",
|
||||
count:13
|
||||
},
|
||||
{
|
||||
name: "龙池桥镇",
|
||||
count:10
|
||||
},
|
||||
{
|
||||
name: "木子店镇",
|
||||
count:16
|
||||
},
|
||||
{
|
||||
name: "宋埠镇",
|
||||
count:12
|
||||
},
|
||||
{
|
||||
name: "黄土岗镇",
|
||||
count:4
|
||||
},
|
||||
{
|
||||
name: "铁门岗镇",
|
||||
count:8
|
||||
}
|
||||
]
|
||||
|
||||
const [list, setList] = useState([])
|
||||
useEffect(() => {
|
||||
const newArr = type == 'sc' ? scCharts :xzCharts;
|
||||
setList(newArr)
|
||||
}, [type])
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -120,7 +136,7 @@ const option = {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['福田镇', '龙池桥镇', '木子店镇', '宋埠镇', '黄土岗镇', '铁门岗镇', '乘马岗镇', '白果镇', '张家畈镇', '顺河镇'],
|
||||
data: list.map(item => item.name),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
|
|
@ -155,23 +171,23 @@ const option = {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: '数量分布',
|
||||
name: type == 'sc' ?'水厂':'乡镇',
|
||||
type: 'bar',
|
||||
data: [2050, 2250, 1300, 2100, 1950, 1100, 2150, 2400, 1950, 2100],
|
||||
data: list.map(item => item.count),
|
||||
itemStyle: {
|
||||
color: '#36a4eb'
|
||||
},
|
||||
barWidth: '20%'
|
||||
},
|
||||
{
|
||||
name: '里程分布',
|
||||
type: 'bar',
|
||||
data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
|
||||
itemStyle: {
|
||||
color: '#4b5cc4'
|
||||
},
|
||||
barWidth: '20%'
|
||||
}
|
||||
// {
|
||||
// name: '里程分布',
|
||||
// type: 'bar',
|
||||
// data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
|
||||
// itemStyle: {
|
||||
// color: '#4b5cc4'
|
||||
// },
|
||||
// barWidth: '20%'
|
||||
// }
|
||||
]
|
||||
};
|
||||
|
||||
|
|
@ -179,13 +195,13 @@ const option = {
|
|||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="数量及里程分布"
|
||||
title="爆管统计"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
||||
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
||||
</>
|
||||
tabs={
|
||||
<span className="button-group">
|
||||
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||
<span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<ReactECharts
|
||||
|
|
|
|||
|
|
@ -116,23 +116,23 @@ export default function OverallContent({ data }) {
|
|||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'center',columnGap:20,alignItems:'center'}}>
|
||||
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ color: '#5ecd45' }}>14700<span style={{fontSize:14}}>根</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总数量</div>
|
||||
<div className={classes.grid} style={{flexWrap:'wrap',columnGap:20,alignItems:'center'}}>
|
||||
<div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ color: '#5ecd45' }}>1200<span style={{fontSize:14}}>公里</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总长度</div>
|
||||
</div>
|
||||
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ color: '#5ecd45' }}>12875<span style={{fontSize:14}}>千米</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总里程</div>
|
||||
<div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ color: '#5ecd45' }}>300<span style={{fontSize:14}}>平方公里</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>覆盖区域面积</div>
|
||||
</div>
|
||||
{/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ cursor: 'pointer', color: '#5ecd45' }}>9876<span style={{fontSize:14}}>m³</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>累计用水量</div>
|
||||
<div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ cursor: 'pointer', color: 'red' }}>10<span style={{fontSize:14}}>个</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>流量监测点</div>
|
||||
</div>
|
||||
<div style={{ padding: "5px 0px",width:162, background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ color: 'red' }}>9<span style={{fontSize:14}}>个</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>压力监测点</div>
|
||||
</div>
|
||||
<div style={{ padding:"15px 30px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||
<div className="value" style={{ color: '#5ecd45' }}>85.6<span style={{fontSize:14}}>%</span></div>
|
||||
<div className="key" style={{ color: '#fff', fontSize: 16 }}>渠系利用率</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default function Overall({ style }) {
|
|||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="管线"
|
||||
title="管网资产"
|
||||
color="green"
|
||||
>
|
||||
<OverallContent data={data} />
|
||||
|
|
|
|||
|
|
@ -38,35 +38,11 @@ function HDReal({ style }) {
|
|||
// let { data } = useRequest(HDRealPromise.get, t);
|
||||
const [setting, showSetting] = useState(false);
|
||||
|
||||
// const showData = useMemo(() => {
|
||||
// if (!data) {
|
||||
// return [];
|
||||
// }
|
||||
// let ret = [];
|
||||
// data.forEach(o => {
|
||||
// if (!tableRzFilter[o.type]) {
|
||||
// return;
|
||||
// }
|
||||
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
|
||||
// o.kd = (Math.random() * 100).toFixed(2);
|
||||
// o.ll = (Math.random() * 100).toFixed(1);
|
||||
// ret.push(o);
|
||||
// });
|
||||
// return ret;
|
||||
// }, [data, tableRzFilter]);
|
||||
|
||||
const showData = Array(1).fill(0).map((o, i) => ({
|
||||
date: '2025-05-26',
|
||||
event: '侵占河道',
|
||||
type: '侵占河道',
|
||||
status: '待处理',
|
||||
place: '浮桥河灌区'
|
||||
}))
|
||||
|
||||
const flyTo = (record) => {
|
||||
const { lgtd, lttd } = record;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
|
||||
// dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||||
zoom: config.poiPositionZoom.hd,
|
||||
|
|
@ -77,20 +53,137 @@ function HDReal({ style }) {
|
|||
|
||||
|
||||
const data = [
|
||||
{ name: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
|
||||
{ name: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
|
||||
{ name: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
|
||||
{ name: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
|
||||
{ name: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
|
||||
{ name: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
|
||||
{ name: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
|
||||
{ name: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
|
||||
{ name: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
|
||||
{ stnm: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
|
||||
{ stnm: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
|
||||
{ stnm: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
|
||||
{ stnm: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
|
||||
{ stnm: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
|
||||
{ stnm: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
|
||||
{ stnm: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
|
||||
{ stnm: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
|
||||
{ stnm: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
|
||||
{ name: '顺河镇区', leakage: '749.3', supply: '4490.1', rate: 16.7 }
|
||||
];
|
||||
const scData = [
|
||||
{
|
||||
"stcd": "61612610",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "三河口水厂",
|
||||
"adcd": "421181109000",
|
||||
"wscd": null,
|
||||
rate:32.95,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.166667,
|
||||
"lttd": 31.333333,
|
||||
"elev": 0,
|
||||
"damel": 156.8,
|
||||
"dsflz": 154.99,
|
||||
"fsltdz": 149,
|
||||
"ddz": 124,
|
||||
"zcxsw": 149,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 12.5,
|
||||
"drpState": 1,
|
||||
"rz": 141.45,
|
||||
"w": 77.8,
|
||||
"a_fsltdz": -7.550000000000011,
|
||||
"rzTm": "2025-06-03T01:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -7.55
|
||||
},
|
||||
{
|
||||
"stcd": "7CS000231",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "刘集水厂",
|
||||
rate:31.04,
|
||||
"adcd": "421181100000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.048056,
|
||||
"lttd": 31.335556,
|
||||
"elev": 0,
|
||||
"damel": 79.6,
|
||||
"dsflz": 78.65,
|
||||
"fsltdz": 72.05,
|
||||
"ddz": 69.55,
|
||||
"zcxsw": 72.05,
|
||||
"drpTm": "2023-11-20T01:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 76.49,
|
||||
"w": 0.049,
|
||||
"a_fsltdz": 4.439999999999998,
|
||||
"rzTm": "2025-04-11T06:00:00.000Z",
|
||||
"rzWarning": 1,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "7CS000231",
|
||||
"tm": "2023-11-20T01:04:18.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000231/20231120090418.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "7CS000231",
|
||||
"tm": "2023-11-20T01:07:54.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000232/20231120090754.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": 4.44
|
||||
},
|
||||
{
|
||||
"stcd": "716460001",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "杉林河水厂",
|
||||
rate:31.95,
|
||||
"adcd": "421181107000",
|
||||
"wscd": null,
|
||||
percent:42.14,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.433056,
|
||||
"lttd": 31.304444,
|
||||
"elev": 0,
|
||||
"damel": 236.2,
|
||||
"dsflz": 233.92,
|
||||
"fsltdz": 231,
|
||||
"ddz": 204,
|
||||
"zcxsw": 231,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 224.31,
|
||||
"w": 0,
|
||||
"a_fsltdz": -6.689999999999998,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"aRz": -6.69
|
||||
},
|
||||
]
|
||||
const [type, setType] = useState('sc')
|
||||
const toggleStType = (type) => {
|
||||
const visible = !tableRzFilter[type];
|
||||
dispatch.realview.setTableRzFilter({ [type]: visible });
|
||||
setType(type)
|
||||
}
|
||||
const [params, setParams] = useState({ tm: [] })
|
||||
const toggleAutoRefresh = () => {
|
||||
|
|
@ -119,17 +212,25 @@ function HDReal({ style }) {
|
|||
setParams(options)
|
||||
|
||||
}, [])
|
||||
|
||||
const [list, setList] = useState([])
|
||||
useEffect(() => {
|
||||
const newArr = type == 'sc' ? scData :type == 'xz' ? data:[];
|
||||
setList(newArr)
|
||||
}, [type])
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="漏损排行榜"
|
||||
color="green"
|
||||
// tabs={
|
||||
// <span className="button-group">
|
||||
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
|
||||
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
|
||||
// </span>
|
||||
// }
|
||||
tabs={
|
||||
<span className="button-group">
|
||||
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||
<span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
|
||||
<span className={clsx({ active: type == 'dma'})} onClick={() => toggleStType('dma')}>DMA分区</span>
|
||||
</span>
|
||||
}
|
||||
extra={
|
||||
<>
|
||||
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
||||
|
|
@ -161,22 +262,24 @@ function HDReal({ style }) {
|
|||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow >
|
||||
<DpTableCell style={{ width: '30%' }} align="center">DMA分区名称</DpTableCell>
|
||||
<DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '25%' }}>供水量(m³)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>漏损率(%)</DpTableCell>
|
||||
<DpTableCell style={{ width: '20%' }} align="center">序号</DpTableCell>
|
||||
<DpTableCell style={{ width: '50%' }} align="center">名称</DpTableCell>
|
||||
{/* <DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '25%' }}>供水量(m³)</DpTableCell> */}
|
||||
<DpTableCell align="center" style={{ width: '30%' }}>漏损率(%)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
{list.map((row,i) => (
|
||||
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
>{row.name}</div>
|
||||
>{i+1}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.leakage}</DpTableCell>
|
||||
<DpTableCell align="center">{row.supply}</DpTableCell>
|
||||
<DpTableCell align="center">{row.stnm}</DpTableCell>
|
||||
{/* <DpTableCell align="center">{row.leakage}</DpTableCell>
|
||||
<DpTableCell align="center">{row.supply}</DpTableCell> */}
|
||||
<DpTableCell align="center">{row.rate}</DpTableCell>
|
||||
{/* {rzRender(row.rz, row.grz)}
|
||||
{rzRender(row.rz, row.wrz)} */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue