Compare commits
3 Commits
8ed184216c
...
bf30757e24
| Author | SHA1 | Date |
|---|---|---|
 秦子超
|
bf30757e24 | |
 李神峰
|
12d1fe5f04 | |
|
李神峰
|
9e0bb97345 |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -394,7 +394,15 @@
|
||||||
"水厂": {
|
"水厂": {
|
||||||
"width": 32,
|
"width": 32,
|
||||||
"height": 32,
|
"height": 32,
|
||||||
"x": 0,
|
"x": -3,
|
||||||
|
"y": 315,
|
||||||
|
"pixelRatio": 0.6,
|
||||||
|
"visible": true
|
||||||
|
},
|
||||||
|
"水厂q": {
|
||||||
|
"width": 32,
|
||||||
|
"height": 32,
|
||||||
|
"x": 28,
|
||||||
"y": 315,
|
"y": 315,
|
||||||
"pixelRatio": 0.6,
|
"pixelRatio": 0.6,
|
||||||
"visible": true
|
"visible": true
|
||||||
|
|
@ -406,5 +414,13 @@
|
||||||
"y": 0,
|
"y": 0,
|
||||||
"pixelRatio": 0.6,
|
"pixelRatio": 0.6,
|
||||||
"visible": true
|
"visible": true
|
||||||
|
} ,
|
||||||
|
"水源地q": {
|
||||||
|
"width": 32,
|
||||||
|
"height": 32,
|
||||||
|
"x": 59,
|
||||||
|
"y": 315,
|
||||||
|
"pixelRatio": 0.6,
|
||||||
|
"visible": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 47 KiB |
|
|
@ -413,7 +413,11 @@ const map = {
|
||||||
RoadLayer: true,
|
RoadLayer: true,
|
||||||
RivlLayer: true,
|
RivlLayer: true,
|
||||||
ShuichangLayer:true,
|
ShuichangLayer:true,
|
||||||
|
ShuichangQLayer: true,
|
||||||
|
ShuiyuandiQLayer:true,
|
||||||
ShuizhiLayer:true,
|
ShuizhiLayer:true,
|
||||||
|
ShuiyuandiLayer: true,
|
||||||
|
|
||||||
};
|
};
|
||||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||||
|
|
@ -449,6 +453,21 @@ const map = {
|
||||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||||
});
|
});
|
||||||
|
}else if ( id === 307) {
|
||||||
|
layerVisible = {
|
||||||
|
RealDrpLayer: false,
|
||||||
|
RealHDLayer: true,
|
||||||
|
RealSkLayer: true,
|
||||||
|
BxSkLayer: false,
|
||||||
|
FzdxLayer: false,
|
||||||
|
WataLayer: false,
|
||||||
|
AdcdLayer: true,
|
||||||
|
RoadLayer: true,
|
||||||
|
RivlLayer: true,
|
||||||
|
};
|
||||||
|
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||||
|
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||||
|
});
|
||||||
} else if (id == 501) {
|
} else if (id == 501) {
|
||||||
layerVisible = {
|
layerVisible = {
|
||||||
RealDrpLayer: true,
|
RealDrpLayer: true,
|
||||||
|
|
|
||||||
|
|
@ -125,8 +125,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
} else if (view === 302) {
|
} else if (view === 302) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '天气' },
|
{ key: '天气' },
|
||||||
{ key: '进水监测',style: { height: '13rem'} },
|
{ key: '水厂水质监测',style: { height: '16rem'} },
|
||||||
{ key: '出水监测',style: { height: '16rem'} },
|
{ key: '报警分析',style: { height: '28rem'} },
|
||||||
];
|
];
|
||||||
} else if (view === 303) {
|
} else if (view === 303) {
|
||||||
left = [
|
left = [
|
||||||
|
|
@ -154,7 +154,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
}
|
}
|
||||||
else if (view === 307) {
|
else if (view === 307) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '预案库管理', style: { height: '50rem' } },
|
{ key: '应急事件', style: { height: '20rem'} },
|
||||||
|
{ key: '应急指挥调度', style: { height: '30rem'} },
|
||||||
];
|
];
|
||||||
// leftFullHeight = true;
|
// leftFullHeight = true;
|
||||||
}else if (view === 501) {
|
}else if (view === 501) {
|
||||||
|
|
@ -337,8 +338,10 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
} else if (view === 302) {
|
} else if (view === 302) {
|
||||||
right = [
|
right = [
|
||||||
// { key: '警报' },
|
// { key: '警报' },
|
||||||
{ key: '水厂水质监测',style: { height: '16rem'} },
|
{ key: '预警列表',style: { height: '20rem'} },
|
||||||
{ key: '报警分析',style: { height: '18rem'} },
|
// { key: '进水监测',style: { height: '13rem'} },
|
||||||
|
// { key: '出水监测',style: { height: '16rem'} },
|
||||||
|
|
||||||
];
|
];
|
||||||
} else if (view === 303) {
|
} else if (view === 303) {
|
||||||
right = [
|
right = [
|
||||||
|
|
@ -363,8 +366,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
];
|
];
|
||||||
rightFullHeight = true;
|
rightFullHeight = true;
|
||||||
}else if(view === 307) {
|
}else if(view === 307) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '应急指挥调度', style: { height: '40rem'} },
|
{ key: '预案库管理', style: { height: '47rem' } },
|
||||||
];
|
];
|
||||||
// rightFullHeight = true;
|
// rightFullHeight = true;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||||
import DrpSearch from '../../components/DrpSearch';
|
import DrpSearch from '../../components/DrpSearch';
|
||||||
import DrpStAround from '../../components/DrpStAround';
|
import DrpStAround from '../../components/DrpStAround';
|
||||||
import ZrrPlan from './zrrPlan'
|
import ZrrPlan from './zrrPlan'
|
||||||
|
import Sjjg from '../../components/Sksjjg';
|
||||||
|
|
||||||
|
|
||||||
function HDStDlg({ record, onClose }) {
|
function HDStDlg({ record, onClose }) {
|
||||||
|
|
@ -34,6 +35,7 @@ function HDStDlg({ record, onClose }) {
|
||||||
<DpTab label="雨量查询" />
|
<DpTab label="雨量查询" />
|
||||||
<DpTab label="周边雨量站" />
|
<DpTab label="周边雨量站" />
|
||||||
<DpTab label="责任人" />
|
<DpTab label="责任人" />
|
||||||
|
{record.events && <DpTab label="事件经过" />}
|
||||||
</DpTabs>
|
</DpTabs>
|
||||||
<DpCloseButton onClick={onClose} />
|
<DpCloseButton onClick={onClose} />
|
||||||
</DpAppBar>
|
</DpAppBar>
|
||||||
|
|
@ -42,6 +44,8 @@ function HDStDlg({ record, onClose }) {
|
||||||
{value === 1 && <DrpSearch record={record} />}
|
{value === 1 && <DrpSearch record={record} />}
|
||||||
{value === 2 && <DrpStAround record={record} />}
|
{value === 2 && <DrpStAround record={record} />}
|
||||||
{value === 3 && <ZrrPlan />}
|
{value === 3 && <ZrrPlan />}
|
||||||
|
{value === 4 && <Sjjg record={record} />}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,280 @@
|
||||||
|
import { Grid, withStyles, TableCell } from '@material-ui/core';
|
||||||
|
import React from 'react';
|
||||||
|
import useRequest from '../../../../utils/useRequest';
|
||||||
|
import { skInfo } from '../../../../models/_/search';
|
||||||
|
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||||
|
import { Person } from '@material-ui/icons';
|
||||||
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
import Table from '@material-ui/core/Table';
|
||||||
|
import TableContainer from '@material-ui/core/TableContainer';
|
||||||
|
import TableBody from '@material-ui/core/TableBody';
|
||||||
|
import TableHead from '@material-ui/core/TableHead';
|
||||||
|
import TableRow from '@material-ui/core/TableRow';
|
||||||
|
// import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||||
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||||
|
import { DatePicker } from 'antd';
|
||||||
|
import moment from 'moment';
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
tableContainer: {
|
||||||
|
background: '#182d42', // 设置表格容器的背景颜色
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
'& .MuiGrid-item': {
|
||||||
|
'& [class*="makeStyles-title"]': {
|
||||||
|
color: '#fff',
|
||||||
|
backgroundColor: '#104175',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const DpTableCell = withStyles({
|
||||||
|
head: {
|
||||||
|
backgroundColor: '#104175',
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: '1rem',
|
||||||
|
padding: '0.5rem 0.3rem !important',
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
padding: '0.7rem 0.3rem !important',
|
||||||
|
borderBottom: 'none',
|
||||||
|
position: "relative"
|
||||||
|
},
|
||||||
|
})(TableCell);
|
||||||
|
function SkInfo() {
|
||||||
|
const classes = useStyles();
|
||||||
|
const data = [
|
||||||
|
{ time: '06-08 12:00', turbidity: 0.3, chlorine: 0.5, ph: 7.2 },
|
||||||
|
{ time: '06-08 11:00', turbidity: 0.2, chlorine: 0.4, ph: 7.1 },
|
||||||
|
{ time: '06-08 10:00', turbidity: 0.4, chlorine: 0.6, ph: 7.3 },
|
||||||
|
{ time: '06-08 09:00', turbidity: 0.3, chlorine: 0.5, ph: 7.2 },
|
||||||
|
{ time: '06-08 08:00', turbidity: 0.2, chlorine: 0.4, ph: 7.0 },
|
||||||
|
{ time: '06-08 07:00', turbidity: 0.4, chlorine: 0.5, ph: 7.4 },
|
||||||
|
{ time: '06-08 06:00', turbidity: 0.3, chlorine: 0.6, ph: 7.2 },
|
||||||
|
{ time: '06-08 05:00', turbidity: 0.2, chlorine: 0.5, ph: 7.1 },
|
||||||
|
{ time: '06-08 04:00', turbidity: 0.3, chlorine: 0.4, ph: 7.3 },
|
||||||
|
{ time: '06-08 03:00', turbidity: 0.4, chlorine: 0.5, ph: 7.2 },
|
||||||
|
{ time: '06-08 02:00', turbidity: 0.3, chlorine: 0.6, ph: 7.1 },
|
||||||
|
{ time: '06-08 01:00', turbidity: 0.2, chlorine: 0.5, ph: 7.3 },
|
||||||
|
{ time: '06-08 00:00', turbidity: 0.3, chlorine: 0.4, ph: 7.2 },
|
||||||
|
{ time: '06-07 23:00', turbidity: 0.4, chlorine: 0.5, ph: 7.1 },
|
||||||
|
{ time: '06-07 22:00', turbidity: 0.3, chlorine: 0.6, ph: 7.3 },
|
||||||
|
{ time: '06-07 21:00', turbidity: 0.2, chlorine: 0.5, ph: 7.2 },
|
||||||
|
{ time: '06-07 20:00', turbidity: 0.3, chlorine: 0.4, ph: 7.1 },
|
||||||
|
{ time: '06-07 19:00', turbidity: 0.4, chlorine: 0.5, ph: 7.3 },
|
||||||
|
{ time: '06-07 18:00', turbidity: 0.3, chlorine: 0.6, ph: 7.2 },
|
||||||
|
{ time: '06-07 17:00', turbidity: 0.2, chlorine: 0.5, ph: 7.1 },
|
||||||
|
{ time: '06-07 16:00', turbidity: 0.3, chlorine: 0.4, ph: 7.3 },
|
||||||
|
{ time: '06-07 15:00', turbidity: 0.4, chlorine: 0.5, ph: 7.2 },
|
||||||
|
{ time: '06-07 14:00', turbidity: 0.3, chlorine: 0.6, ph: 7.1 },
|
||||||
|
{ time: '06-07 13:00', turbidity: 0.2, chlorine: 0.5, ph: 7.3 },
|
||||||
|
{ time: '06-07 12:00', turbidity: 0.3, chlorine: 0.4, ph: 7.2 }
|
||||||
|
];
|
||||||
|
const option = {
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['PH值', '浊度(NTU)', '余氯(mg/L)'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '10%',
|
||||||
|
right: '10%',
|
||||||
|
bottom: '0%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: data.map(item => item.time),
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
rotate: 45,
|
||||||
|
interval: 1,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: 'PH值',
|
||||||
|
type: 'value',
|
||||||
|
position: 'left',
|
||||||
|
offset: 0,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fac858'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fac858'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fac858'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '浊度(NTU)',
|
||||||
|
type: 'value',
|
||||||
|
position: 'right',
|
||||||
|
offset: 60,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#ee6666'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#ee6666'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ee6666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '余氯(mg/L)',
|
||||||
|
type: 'value',
|
||||||
|
position: 'right',
|
||||||
|
offset: 0,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#73c0de'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#73c0de'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#73c0de'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'PH值',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
data: data.map(item => item.ph),
|
||||||
|
itemStyle: {
|
||||||
|
color: '#fac858'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '浊度(NTU)',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: data.map(item => item.turbidity),
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ee6666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '余氯(mg/L)',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
data: data.map(item => item.chlorine),
|
||||||
|
itemStyle: {
|
||||||
|
color: '#73c0de'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
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>
|
||||||
|
</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.chlorine}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.ph}</DpTableCell>
|
||||||
|
</DpTableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</div>
|
||||||
|
<div style={{ height: '500px', width: '100%', flex: 1 }}>
|
||||||
|
<ReactECharts
|
||||||
|
option={option}
|
||||||
|
style={{ height: '100%' }}
|
||||||
|
opts={{ renderer: 'canvas' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SkInfo;
|
||||||
|
|
@ -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 ShuichangInfo from '../../components/ShuichangInfo';
|
||||||
|
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 && <ShuichangInfo 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,86 @@
|
||||||
|
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')}
|
||||||
|
>
|
||||||
|
瞬时流量趋势
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className={activeType === 'flood' ? 'active' : ''}
|
||||||
|
onClick={() => handleTypeChange('flood')}
|
||||||
|
>
|
||||||
|
小时累积趋势
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</ButtonGroup>
|
||||||
|
</Box>
|
||||||
|
<img src={`${process.env.PUBLIC_URL}/assets/ssflow.png`} alt="" style={{width:'96%'}}/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SkInfo;
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
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>
|
||||||
|
{
|
||||||
|
activeType == 'daily' ? <img src={`${process.env.PUBLIC_URL}/assets/sp1.png`} alt="" style={{ width: '96%', height: 600 }} /> :
|
||||||
|
<img src={`${process.env.PUBLIC_URL}/assets/sp2.png`} 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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -15,6 +15,7 @@ import SkPlan from '../../components/SkInfo/SkPlan';
|
||||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||||
import ZrrPlan from './zrrPlan'
|
import ZrrPlan from './zrrPlan'
|
||||||
|
import Sjjg from '../../components/Sksjjg';
|
||||||
|
|
||||||
|
|
||||||
function SkDlg({ record, onClose }) {
|
function SkDlg({ record, onClose }) {
|
||||||
|
|
@ -39,6 +40,7 @@ function SkDlg({ record, onClose }) {
|
||||||
<DpTab label="基础信息" />
|
<DpTab label="基础信息" />
|
||||||
<DpTab label="责任人" />
|
<DpTab label="责任人" />
|
||||||
<DpTab label="水库预案" />
|
<DpTab label="水库预案" />
|
||||||
|
{record.events && <DpTab label="事件经过" />}
|
||||||
</DpTabs>
|
</DpTabs>
|
||||||
<DpCloseButton onClick={onClose} />
|
<DpCloseButton onClick={onClose} />
|
||||||
</DpAppBar>
|
</DpAppBar>
|
||||||
|
|
@ -49,6 +51,7 @@ function SkDlg({ record, onClose }) {
|
||||||
{value === 3 && <SkInfo record={record} />}
|
{value === 3 && <SkInfo record={record} />}
|
||||||
{value === 4 && <ZrrPlan />}
|
{value === 4 && <ZrrPlan />}
|
||||||
{value === 5 && <SkPlan record={record} />}
|
{value === 5 && <SkPlan record={record} />}
|
||||||
|
{value === 6 && <Sjjg record={record} />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,8 @@ import ShuikuyhDlg from './ShuikuyhDlg';
|
||||||
import XunchaDlg from './XunchaDlg';
|
import XunchaDlg from './XunchaDlg';
|
||||||
import XcxqDlg from './XcxqDlg';
|
import XcxqDlg from './XcxqDlg';
|
||||||
import WyWarnDlg from './WyWarnDlg';
|
import WyWarnDlg from './WyWarnDlg';
|
||||||
|
import ShuiChangDlg from './ShuiChangDlg';
|
||||||
|
import ShuiyuandiDlg from './ShuiyuandiDlg';
|
||||||
import ShuiBengDlg from './ShuiBengDlg'
|
import ShuiBengDlg from './ShuiBengDlg'
|
||||||
|
|
||||||
function InfoDlg() {
|
function InfoDlg() {
|
||||||
|
|
@ -136,6 +138,10 @@ function InfoDlg() {
|
||||||
return <XcxqDlg record={properties} onClose={handleClose} />
|
return <XcxqDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'WyWarnLayer') {
|
}else if (layerId === 'WyWarnLayer') {
|
||||||
return <WyWarnDlg record={properties} onClose={handleClose} />
|
return <WyWarnDlg record={properties} onClose={handleClose} />
|
||||||
|
}else if (layerId === 'ShuichangLayer') {
|
||||||
|
return <ShuiChangDlg record={properties} onClose={handleClose} />
|
||||||
|
}else if (layerId === 'ShuiyuandiLayer') {
|
||||||
|
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} />
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,9 @@ import QdLayer from "./qdlayer"
|
||||||
import ShuizhiLayer from "./shuizhilayer"
|
import ShuizhiLayer from "./shuizhilayer"
|
||||||
import TrsqLayer from "./trsqlayer"
|
import TrsqLayer from "./trsqlayer"
|
||||||
import ShuichangLayer from "./shuichangLayer"
|
import ShuichangLayer from "./shuichangLayer"
|
||||||
|
import ShuichangQLayer from "./shuichangQLayer"
|
||||||
import ShuiyuandiLayer from "./shuiyuandiLayer"
|
import ShuiyuandiLayer from "./shuiyuandiLayer"
|
||||||
|
import ShuiyuandiQLayer from "./shuiyuandiQLayer"
|
||||||
import ShuikuLayer from "./shuikuLayer"
|
import ShuikuLayer from "./shuikuLayer"
|
||||||
import RainDrpLayer from "./rainDrpLayer"
|
import RainDrpLayer from "./rainDrpLayer"
|
||||||
import XunchaLayer from "./xunchalayer"
|
import XunchaLayer from "./xunchalayer"
|
||||||
|
|
@ -64,7 +66,9 @@ class LayerMgr {
|
||||||
this.layers.push(new ShuizhiLayer());
|
this.layers.push(new ShuizhiLayer());
|
||||||
this.layers.push(new TrsqLayer());
|
this.layers.push(new TrsqLayer());
|
||||||
this.layers.push(new ShuichangLayer());
|
this.layers.push(new ShuichangLayer());
|
||||||
|
this.layers.push(new ShuichangQLayer());
|
||||||
this.layers.push(new ShuiyuandiLayer());
|
this.layers.push(new ShuiyuandiLayer());
|
||||||
|
this.layers.push(new ShuiyuandiQLayer());
|
||||||
this.layers.push(new ShuikuLayer());
|
this.layers.push(new ShuikuLayer());
|
||||||
this.layers.push(new RainDrpLayer());
|
this.layers.push(new RainDrpLayer());
|
||||||
this.layers.push(new XunchaLayer());
|
this.layers.push(new XunchaLayer());
|
||||||
|
|
@ -211,7 +215,9 @@ class LayerMgr {
|
||||||
this.layerMap.ShuizhiLayer.getStyle(),
|
this.layerMap.ShuizhiLayer.getStyle(),
|
||||||
this.layerMap.TrsqLayer.getStyle(),
|
this.layerMap.TrsqLayer.getStyle(),
|
||||||
this.layerMap.ShuichangLayer.getStyle(),
|
this.layerMap.ShuichangLayer.getStyle(),
|
||||||
|
this.layerMap.ShuichangQLayer.getStyle(),
|
||||||
this.layerMap.ShuiyuandiLayer.getStyle(),
|
this.layerMap.ShuiyuandiLayer.getStyle(),
|
||||||
|
this.layerMap.ShuiyuandiQLayer.getStyle(),
|
||||||
this.layerMap.ShuikuLayer.getStyle(),
|
this.layerMap.ShuikuLayer.getStyle(),
|
||||||
this.layerMap.RainDrpLayer.getStyle(),
|
this.layerMap.RainDrpLayer.getStyle(),
|
||||||
this.layerMap.XunchaLayer.getStyle(),
|
this.layerMap.XunchaLayer.getStyle(),
|
||||||
|
|
|
||||||
|
|
@ -45,53 +45,116 @@ const ShapeStyle = {
|
||||||
|
|
||||||
const page1 = [
|
const page1 = [
|
||||||
{
|
{
|
||||||
"stcd": "716113001",
|
"stcd": "61612610",
|
||||||
"type": "sk",
|
"type": "sk",
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"stnm": "监测点9",
|
"stnm": "三河口水厂",
|
||||||
"adcd": "421181113000",
|
"adcd": "421181109000",
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 114.805278,
|
"lgtd": 115.166667,
|
||||||
"lttd": 31.206667,
|
"lttd": 31.333333,
|
||||||
"elev": 0,
|
"elev": 0,
|
||||||
"damel": 104.27,
|
"damel": 156.8,
|
||||||
"dsflz": 102.9,
|
"dsflz": 154.99,
|
||||||
"fsltdz": 102.36,
|
"fsltdz": 149,
|
||||||
"ddz": 90.86,
|
"ddz": 124,
|
||||||
"zcxsw": 102.36,
|
"zcxsw": 149,
|
||||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
"today": 0,
|
"today": 0,
|
||||||
"h1": 0,
|
"h1": 0,
|
||||||
"h3": 0,
|
"h3": 0,
|
||||||
"h6": 0,
|
"h6": 0,
|
||||||
"h12": 0,
|
"h12": 0,
|
||||||
"h24": 0,
|
"h24": 0,
|
||||||
"h48": 0,
|
"h48": 12.5,
|
||||||
"drpState": 2,
|
"drpState": 1,
|
||||||
"rz": 8.19,
|
"rz": 141.45,
|
||||||
"w": 0,
|
"w": 77.8,
|
||||||
"a_fsltdz": -94.17,
|
"a_fsltdz": -7.550000000000011,
|
||||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
"rzTm": "2025-06-03T01:00:00.000Z",
|
||||||
"rzWarning": 0,
|
"rzWarning": 0,
|
||||||
"rzState": 2,
|
"rzState": 1,
|
||||||
"pic": [
|
"aRz": -7.55
|
||||||
{
|
},
|
||||||
"stcd": "716113001",
|
{
|
||||||
"tm": "2023-03-12T07:01:00.000Z",
|
"stcd": "7CS000231",
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113001/20230312150100.jpg"
|
"type": "sk",
|
||||||
},
|
"hasRz": true,
|
||||||
{
|
"stnm": "刘集水厂",
|
||||||
"stcd": "716113001",
|
"adcd": "421181100000",
|
||||||
"tm": "2023-03-12T07:08:00.000Z",
|
"wscd": null,
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113002/20230312150800.jpg"
|
"importancy": 0,
|
||||||
}
|
"lgtd": 115.048056,
|
||||||
],
|
"lttd": 31.335556,
|
||||||
"aRz": -94.17
|
"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": "杉林河水厂",
|
||||||
|
"adcd": "421181107000",
|
||||||
|
"wscd": null,
|
||||||
|
"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
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"stcd": "716123001",
|
"stcd": "716123001",
|
||||||
"type": "sk",
|
"type": "sk",
|
||||||
|
|
@ -136,330 +199,7 @@ const page1 = [
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"aRz": -4.77
|
"aRz": -4.77
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"stcd": "716122901",
|
|
||||||
"type": "sk",
|
|
||||||
"hasRz": true,
|
|
||||||
"stnm": "监测点7",
|
|
||||||
"adcd": "421181112000",
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.905833,
|
|
||||||
"lttd": 31.339444,
|
|
||||||
"elev": 0,
|
|
||||||
"damel": 90.5,
|
|
||||||
"dsflz": 89.28,
|
|
||||||
"fsltdz": 88.6,
|
|
||||||
"ddz": 14.44,
|
|
||||||
"zcxsw": 88.6,
|
|
||||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
|
||||||
"today": 0,
|
|
||||||
"h1": 0,
|
|
||||||
"h3": 0,
|
|
||||||
"h6": 0,
|
|
||||||
"h12": 0,
|
|
||||||
"h24": 0,
|
|
||||||
"h48": 0,
|
|
||||||
"drpState": 2,
|
|
||||||
"rz": 87.23,
|
|
||||||
"w": 0.092,
|
|
||||||
"a_fsltdz": -1.3699999999999903,
|
|
||||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
|
||||||
"rzWarning": 0,
|
|
||||||
"rzState": 2,
|
|
||||||
"pic": [
|
|
||||||
{
|
|
||||||
"stcd": "716122901",
|
|
||||||
"tm": "2023-03-12T07:03:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716122901/20230312150300.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716122901",
|
|
||||||
"tm": "2023-03-12T07:12:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716122902/20230312151200.jpg"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"aRz": -1.37
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716123901",
|
|
||||||
"type": "sk",
|
|
||||||
"hasRz": true,
|
|
||||||
"stnm": "监测点6",
|
|
||||||
"adcd": "421181112000",
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.903056,
|
|
||||||
"lttd": 31.285833,
|
|
||||||
"elev": 0,
|
|
||||||
"damel": 14.2,
|
|
||||||
"dsflz": 13.88,
|
|
||||||
"fsltdz": 93.3,
|
|
||||||
"ddz": 9.4,
|
|
||||||
"zcxsw": 93.3,
|
|
||||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
|
||||||
"today": 0,
|
|
||||||
"h1": 0,
|
|
||||||
"h3": 0,
|
|
||||||
"h6": 0,
|
|
||||||
"h12": 0,
|
|
||||||
"h24": 0,
|
|
||||||
"h48": 0,
|
|
||||||
"drpState": 2,
|
|
||||||
"rz": 110.13,
|
|
||||||
"w": 0,
|
|
||||||
"a_fsltdz": 16.83,
|
|
||||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
|
||||||
"rzWarning": 1,
|
|
||||||
"rzState": 2,
|
|
||||||
"pic": [
|
|
||||||
{
|
|
||||||
"stcd": "716123901",
|
|
||||||
"tm": "2023-03-12T08:01:08.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716123901/20230312160108.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716123901",
|
|
||||||
"tm": "2023-03-12T07:03:56.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716123902/20230312150356.jpg"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"aRz": 16.83
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716115801",
|
|
||||||
"type": "sk",
|
|
||||||
"hasRz": true,
|
|
||||||
"stnm": "监测点5",
|
|
||||||
"adcd": "421181112000",
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.014444,
|
|
||||||
"lttd": 31.355833,
|
|
||||||
"elev": 0,
|
|
||||||
"damel": 134.7,
|
|
||||||
"dsflz": 133.45,
|
|
||||||
"fsltdz": 132.6,
|
|
||||||
"ddz": 124.5,
|
|
||||||
"zcxsw": 132.6,
|
|
||||||
"drpTm": "2025-04-11T06:00:00.000Z",
|
|
||||||
"today": 0,
|
|
||||||
"h1": 0,
|
|
||||||
"h3": 0,
|
|
||||||
"h6": 0,
|
|
||||||
"h12": 0,
|
|
||||||
"h24": 0,
|
|
||||||
"h48": 0,
|
|
||||||
"drpState": 2,
|
|
||||||
"rz": 128.72,
|
|
||||||
"w": 0.054,
|
|
||||||
"a_fsltdz": -3.8799999999999955,
|
|
||||||
"rzTm": "2025-04-11T06:00:00.000Z",
|
|
||||||
"rzWarning": 0,
|
|
||||||
"rzState": 2,
|
|
||||||
"pic": [
|
|
||||||
{
|
|
||||||
"stcd": "716115801",
|
|
||||||
"tm": "2023-03-12T07:03:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115801/20230312150300.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716115801",
|
|
||||||
"tm": "2023-03-12T07:12:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115802/20230312151200.jpg"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"aRz": -3.88
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716120401",
|
|
||||||
"type": "sk",
|
|
||||||
"hasRz": true,
|
|
||||||
"stnm": "监测点4",
|
|
||||||
"adcd": "421181112000",
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.954167,
|
|
||||||
"lttd": 31.311944,
|
|
||||||
"elev": 0,
|
|
||||||
"damel": 100,
|
|
||||||
"dsflz": 98.46,
|
|
||||||
"fsltdz": 97.4,
|
|
||||||
"ddz": 93.2,
|
|
||||||
"zcxsw": 97.4,
|
|
||||||
"drpTm": "2024-09-03T02:00:00.000Z",
|
|
||||||
"today": 0,
|
|
||||||
"h1": 0,
|
|
||||||
"h3": 0,
|
|
||||||
"h6": 0,
|
|
||||||
"h12": 0,
|
|
||||||
"h24": 0,
|
|
||||||
"h48": 0,
|
|
||||||
"drpState": 2,
|
|
||||||
"rz": 96.71,
|
|
||||||
"w": 0,
|
|
||||||
"a_fsltdz": -0.6900000000000119,
|
|
||||||
"rzTm": "2024-09-03T02:00:00.000Z",
|
|
||||||
"rzWarning": 0,
|
|
||||||
"rzState": 2,
|
|
||||||
"pic": [
|
|
||||||
{
|
|
||||||
"stcd": "716120401",
|
|
||||||
"tm": "2023-03-12T08:01:20.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716120401/20230312160120.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716120401",
|
|
||||||
"tm": "2023-03-12T07:04:03.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716120402/20230312150403.jpg"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"aRz": -0.69
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716116201",
|
|
||||||
"type": "sk",
|
|
||||||
"hasRz": true,
|
|
||||||
"stnm": "监测点3",
|
|
||||||
press: '0.91',
|
|
||||||
flow: 200,
|
|
||||||
hg: 90,
|
|
||||||
"adcd": "421181112000",
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 115.024444,
|
|
||||||
"lttd": 31.232222,
|
|
||||||
"elev": 0,
|
|
||||||
"damel": 140,
|
|
||||||
"dsflz": 137.65,
|
|
||||||
"fsltdz": 136.2,
|
|
||||||
"ddz": 128,
|
|
||||||
"zcxsw": 136.2,
|
|
||||||
"drpTm": "2025-04-11T06:00:00.000Z",
|
|
||||||
"today": 0,
|
|
||||||
"h1": 0,
|
|
||||||
"h3": 0,
|
|
||||||
"h6": 0,
|
|
||||||
"h12": 0,
|
|
||||||
"h24": 0,
|
|
||||||
"h48": 0,
|
|
||||||
"drpState": 2,
|
|
||||||
"rz": 131.47,
|
|
||||||
"w": 0.091,
|
|
||||||
"a_fsltdz": -4.72999999999999,
|
|
||||||
"rzTm": "2025-04-11T06:00:00.000Z",
|
|
||||||
"rzWarning": 0,
|
|
||||||
"rzState": 2,
|
|
||||||
"pic": [
|
|
||||||
{
|
|
||||||
"stcd": "716116201",
|
|
||||||
"tm": "2023-03-12T07:03:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716116201/20230312150300.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716116201",
|
|
||||||
"tm": "2023-03-12T07:11:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716116202/20230312151100.jpg"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"aRz": -4.73
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716122701",
|
|
||||||
"type": "sk",
|
|
||||||
"hasRz": true,
|
|
||||||
press: '0.52',
|
|
||||||
flow: 200,
|
|
||||||
hg: 90,
|
|
||||||
"stnm": "监测点2",
|
|
||||||
"adcd": "421181112000",
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.908889,
|
|
||||||
"lttd": 31.334167,
|
|
||||||
"elev": 0,
|
|
||||||
"damel": 114.6,
|
|
||||||
"dsflz": 112.89,
|
|
||||||
"fsltdz": 111.6,
|
|
||||||
"ddz": 101.8,
|
|
||||||
"zcxsw": 111.6,
|
|
||||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
|
||||||
"today": 0,
|
|
||||||
"h1": 0,
|
|
||||||
"h3": 0,
|
|
||||||
"h6": 0,
|
|
||||||
"h12": 0,
|
|
||||||
"h24": 0,
|
|
||||||
"h48": 0,
|
|
||||||
"drpState": 2,
|
|
||||||
"rz": 103.84,
|
|
||||||
"w": 0.123,
|
|
||||||
"a_fsltdz": -7.759999999999991,
|
|
||||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
|
||||||
"rzWarning": 0,
|
|
||||||
"rzState": 2,
|
|
||||||
"pic": [
|
|
||||||
{
|
|
||||||
"stcd": "716122701",
|
|
||||||
"tm": "2022-02-21T01:05:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2022/0221/716122701/20220221090500.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716122701",
|
|
||||||
"tm": "2022-02-21T01:30:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2022/0221/716122702/20220221093000.jpg"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"aRz": -7.76
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716122601",
|
|
||||||
"type": "sk",
|
|
||||||
"hasRz": true,
|
|
||||||
"stnm": "监测点1", press: '0.91',
|
|
||||||
flow: 200,
|
|
||||||
hg: 90,
|
|
||||||
"adcd": "421181112000",
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.891667,
|
|
||||||
"lttd": 31.346944,
|
|
||||||
"elev": 0,
|
|
||||||
"damel": 128,
|
|
||||||
"dsflz": 125.52,
|
|
||||||
"fsltdz": 124.4,
|
|
||||||
"ddz": 117.2,
|
|
||||||
"zcxsw": 124.4,
|
|
||||||
"drpTm": "2025-04-11T04:00:00.000Z",
|
|
||||||
"today": 0,
|
|
||||||
"h1": 0,
|
|
||||||
"h3": 0,
|
|
||||||
"h6": 0,
|
|
||||||
"h12": 0,
|
|
||||||
"h24": 0,
|
|
||||||
"h48": 0,
|
|
||||||
"drpState": 2,
|
|
||||||
"rz": 121.77,
|
|
||||||
"w": 0.057,
|
|
||||||
"a_fsltdz": -2.6300000000000097,
|
|
||||||
"rzTm": "2025-04-11T04:00:00.000Z",
|
|
||||||
"rzWarning": 0,
|
|
||||||
"rzState": 2,
|
|
||||||
"pic": [
|
|
||||||
{
|
|
||||||
"stcd": "716122601",
|
|
||||||
"tm": "2023-03-12T07:27:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716122601/20230312152700.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"stcd": "716122601",
|
|
||||||
"tm": "2023-03-12T07:39:00.000Z",
|
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716122602/20230312153900.jpg"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"aRz": -2.63
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default class ShuichangLayer extends BaseLayer {
|
export default class ShuichangLayer extends BaseLayer {
|
||||||
|
|
@ -487,7 +227,14 @@ export default class ShuichangLayer extends BaseLayer {
|
||||||
async doRefreshLayer(mapCtrl) {
|
async doRefreshLayer(mapCtrl) {
|
||||||
const ms = mapCtrl.getSource(SourceName);
|
const ms = mapCtrl.getSource(SourceName);
|
||||||
|
|
||||||
let data = page1
|
let data =
|
||||||
|
// await PicStPromise.get();
|
||||||
|
[...page1].map((item)=>{
|
||||||
|
const obj = {...item}
|
||||||
|
obj.lgtd = item.lgtd - 0.00122
|
||||||
|
obj.lttd = item.lttd
|
||||||
|
return obj
|
||||||
|
})
|
||||||
ms.setData(parseGeoJSON(data));
|
ms.setData(parseGeoJSON(data));
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
@ -497,11 +244,12 @@ export default class ShuichangLayer extends BaseLayer {
|
||||||
}
|
}
|
||||||
|
|
||||||
featureClicked(properties, dispatch) {
|
featureClicked(properties, dispatch) {
|
||||||
dispatch.runtime.setFeaturePop({
|
// dispatch.runtime.setFeaturePop({
|
||||||
type: 'shuichang',
|
// type: 'shuichang',
|
||||||
properties,
|
// properties,
|
||||||
coordinates: [properties.lgtd, properties.lttd],
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
offsetPop: true,
|
// offsetPop: true,
|
||||||
});
|
// });
|
||||||
|
dispatch.runtime.setInfoDlg({ layerId: 'ShuichangLayer',properties })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
import clone from "clone";
|
||||||
|
import { PicStPromise, TestPicStPromise } from "../../../../models/_/real";
|
||||||
|
import { parseGeoJSON } from "../../../../utils/tools";
|
||||||
|
import { InfoPopNames } from "../../InfoPops";
|
||||||
|
import BaseLayer from "./baselayer";
|
||||||
|
|
||||||
|
const SourceName = '水厂q';
|
||||||
|
|
||||||
|
const ShapeStyle = {
|
||||||
|
id: SourceName,
|
||||||
|
type: 'symbol',
|
||||||
|
source: SourceName,
|
||||||
|
layout: {
|
||||||
|
'icon-allow-overlap': true,
|
||||||
|
'text-allow-overlap': true,
|
||||||
|
'icon-image': '水厂q',
|
||||||
|
'icon-size': [
|
||||||
|
'interpolate', ['linear'], ['zoom'],
|
||||||
|
10, 0.4,
|
||||||
|
14, 0.8,
|
||||||
|
],
|
||||||
|
|
||||||
|
'text-allow-overlap': true,
|
||||||
|
'text-size': [
|
||||||
|
'interpolate', ['linear'], ['zoom'],
|
||||||
|
10, 10,
|
||||||
|
14, 14,
|
||||||
|
],
|
||||||
|
'text-font': ['Roboto Black'],
|
||||||
|
'text-field': [
|
||||||
|
'step',
|
||||||
|
['zoom'],
|
||||||
|
'',
|
||||||
|
12, ['get', 'stnm']
|
||||||
|
],
|
||||||
|
'text-anchor': 'top',
|
||||||
|
'text-offset': [0, 1],
|
||||||
|
|
||||||
|
'visibility': 'none',
|
||||||
|
},
|
||||||
|
paint: {
|
||||||
|
'text-color': '#fff'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const page1 = [
|
||||||
|
{
|
||||||
|
"stcd": "61614200",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "浮桥河水厂",
|
||||||
|
"adcd": "421181100000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 114.875,
|
||||||
|
"lttd": 31.166667,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 71.33,
|
||||||
|
"dsflz": 68.04,
|
||||||
|
"fsltdz": 64.89,
|
||||||
|
"ddz": 51.78,
|
||||||
|
"zcxsw": 64.89,
|
||||||
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 16.5,
|
||||||
|
"drpState": 1,
|
||||||
|
"rz": 60.71,
|
||||||
|
"w": 162.8,
|
||||||
|
"a_fsltdz": -4.18,
|
||||||
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 1,
|
||||||
|
"aRz": -4.18
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default class ShuichangQLayer extends BaseLayer {
|
||||||
|
|
||||||
|
static LayerName = 'ShuichangQLayer';
|
||||||
|
|
||||||
|
static SourceName = SourceName;
|
||||||
|
|
||||||
|
getStyle() {
|
||||||
|
|
||||||
|
const ret = clone(ShapeStyle);
|
||||||
|
this._setStyleVisibility(ret);
|
||||||
|
return ret;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
getName() {
|
||||||
|
return ShuichangQLayer.LayerName;
|
||||||
|
}
|
||||||
|
|
||||||
|
getSubLayers() {
|
||||||
|
return [ShapeStyle.id];
|
||||||
|
}
|
||||||
|
|
||||||
|
async doRefreshLayer(mapCtrl) {
|
||||||
|
const ms = mapCtrl.getSource(SourceName);
|
||||||
|
|
||||||
|
let data =
|
||||||
|
// await PicStPromise.get();
|
||||||
|
[...page1].map((item)=>{
|
||||||
|
const obj = {...item}
|
||||||
|
obj.lgtd = item.lgtd - 0.00122
|
||||||
|
obj.lttd = item.lttd
|
||||||
|
return obj
|
||||||
|
})
|
||||||
|
ms.setData(parseGeoJSON(data));
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
getFeatureTip(record) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
featureClicked(properties, dispatch) {
|
||||||
|
// dispatch.runtime.setFeaturePop({
|
||||||
|
// type: 'shuichang',
|
||||||
|
// properties,
|
||||||
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
|
// offsetPop: true,
|
||||||
|
// });
|
||||||
|
dispatch.runtime.setInfoDlg({ layerId: 'ShuichangLayer',properties })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -44,161 +44,129 @@ const ShapeStyle = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const page1 = [
|
const page1 = [
|
||||||
{
|
{
|
||||||
"addvcd": "420800000000000",
|
"stcd": "716115301",
|
||||||
"moditime": "2022-05-01 21:00:00",
|
"type": "sk",
|
||||||
"comments": "漳河遥测",
|
"hasRz": true,
|
||||||
"src": "zhzj",
|
"stnm": "葡萄冲水库",
|
||||||
"esstym": "",
|
"adcd": "421181110000",
|
||||||
"mvalue": {
|
"wscd": null,
|
||||||
"slmmmt": null,
|
"importancy": 0,
|
||||||
"slm60": 0,
|
"lgtd": 115.051389,
|
||||||
"exkey": "@",
|
"lttd": 31.423333,
|
||||||
"slm80": 0,
|
"elev": 0,
|
||||||
"hitrsn": null,
|
"damel": 15.8,
|
||||||
"crpty": null,
|
"dsflz": 14.73,
|
||||||
"crpgrwprd": null,
|
"fsltdz": 14.3,
|
||||||
"srlslm": null,
|
"ddz": 9.48,
|
||||||
"stcd": "ZH201417",
|
"zcxsw": 14.3,
|
||||||
"slm10": 24,
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||||
"slm20": 5.3,
|
"today": 0,
|
||||||
"slm30": 44.3,
|
"h1": 0,
|
||||||
"slm40": 44.3,
|
"h3": 0,
|
||||||
"tm": "2024-08-03 05:00",
|
"h6": 0,
|
||||||
"slm100": 0,
|
"h12": 0,
|
||||||
"vtavslm": null,
|
"h24": 0,
|
||||||
"slmAvg": 24.5
|
"h48": 0,
|
||||||
},
|
"drpState": 2,
|
||||||
"lttd": 30.8456,
|
"rz": 213.75,
|
||||||
"sttp": "SS",
|
"w": 0.04,
|
||||||
"irrCode": "D00000010",
|
"a_fsltdz": 199.45,
|
||||||
"sort": 9999,
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||||
"hasImg": false,
|
"rzWarning": 1,
|
||||||
"stlc": "荆门市",
|
"rzState": 2,
|
||||||
"dtmel": 0,
|
"pic": [
|
||||||
"stcd": "ZH201417",
|
{
|
||||||
"stnm": "马山二组（墒情）",
|
"stcd": "716115301",
|
||||||
"addvcd_dictText": "荆门市",
|
"tm": "2023-03-12T08:02:00.000Z",
|
||||||
"lgtd": 112.2321,
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115301/20230312160200.jpg"
|
||||||
"irrCode_dictText": "漳河实验站",
|
},
|
||||||
"bsnm": "漳河流域"
|
{
|
||||||
},
|
"stcd": "716115301",
|
||||||
{
|
"tm": "2023-03-12T07:11:00.000Z",
|
||||||
"addvcd": "420800000000000",
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115302/20230312151100.jpg"
|
||||||
"moditime": "2022-05-01 21:00:00",
|
}
|
||||||
"comments": "漳河遥测",
|
],
|
||||||
"src": "zhzj",
|
"aRz": 199.45
|
||||||
"esstym": "",
|
},
|
||||||
"mvalue": {
|
{
|
||||||
"slmmmt": null,
|
"stcd": "716115701",
|
||||||
"slm60": 0,
|
"type": "sk",
|
||||||
"exkey": "@",
|
"hasRz": true,
|
||||||
"slm80": 0,
|
"stnm": "二五冲水库",
|
||||||
"hitrsn": null,
|
"adcd": "421181110000",
|
||||||
"crpty": null,
|
"wscd": null,
|
||||||
"crpgrwprd": null,
|
"importancy": 0,
|
||||||
"srlslm": null,
|
"lgtd": 115.087222,
|
||||||
"stcd": "ZH201421",
|
"lttd": 31.378333,
|
||||||
"slm10": 12.1,
|
"elev": 0,
|
||||||
"slm20": 16.2,
|
"damel": 11.2,
|
||||||
"slm30": 12.8,
|
"dsflz": 10.07,
|
||||||
"slm40": 12.8,
|
"fsltdz": 108.55,
|
||||||
"tm": "2024-08-15 08:00",
|
"ddz": 1.5,
|
||||||
"slm100": 0,
|
"zcxsw": 108.55,
|
||||||
"vtavslm": null,
|
"drpTm": "2025-03-22T08:00:00.000Z",
|
||||||
"slmAvg": 13.7
|
"today": 0,
|
||||||
},
|
"h1": 0,
|
||||||
"lttd": 30.8446,
|
"h3": 0,
|
||||||
"sttp": "SS",
|
"h6": 0,
|
||||||
"irrCode": "D00000010",
|
"h12": 0,
|
||||||
"sort": 9999,
|
"h24": 0,
|
||||||
"hasImg": false,
|
"h48": 0,
|
||||||
"stlc": "荆门市",
|
"drpState": 2,
|
||||||
"dtmel": 0,
|
"rz": 99.65,
|
||||||
"stcd": "ZH201421",
|
"w": 0.038,
|
||||||
"stnm": "槐桥四组（墒情）",
|
"a_fsltdz": -8.899999999999991,
|
||||||
"addvcd_dictText": "荆门市",
|
"rzTm": "2025-03-22T08:00:00.000Z",
|
||||||
"lgtd": 112.203,
|
"rzWarning": 0,
|
||||||
"irrCode_dictText": "漳河实验站",
|
"rzState": 2,
|
||||||
"bsnm": "漳河流域"
|
"pic": [
|
||||||
},
|
{
|
||||||
{
|
"stcd": "716115701",
|
||||||
"addvcd": "420800000000000",
|
"tm": "2025-03-06T23:01:00.000Z",
|
||||||
"moditime": "2022-05-01 21:00:00",
|
"url": "http://223.75.53.106:8891/skjgimages/2025/0307/716115701/20250307070100.jpg"
|
||||||
"src": "zhzj",
|
},
|
||||||
"esstym": "",
|
{
|
||||||
"mvalue": {
|
"stcd": "716115701",
|
||||||
"slmmmt": null,
|
"tm": "2024-10-18T06:28:00.000Z",
|
||||||
"slm60": 0,
|
"url": "http://223.75.53.106:8891/skjgimages/2024/1018/716115702/20241018142800.jpg"
|
||||||
"exkey": "@",
|
}
|
||||||
"slm80": 0,
|
],
|
||||||
"hitrsn": null,
|
"aRz": -8.9
|
||||||
"crpty": null,
|
},
|
||||||
"crpgrwprd": null,
|
{
|
||||||
"srlslm": null,
|
"stcd": "61614200",
|
||||||
"stcd": "ZH201418",
|
"type": "sk",
|
||||||
"slm10": 16.5,
|
"hasRz": true,
|
||||||
"slm20": 12.5,
|
"stnm": "浮桥河水库",
|
||||||
"slm30": 0,
|
"adcd": "421181100000",
|
||||||
"slm40": 0,
|
"wscd": null,
|
||||||
"tm": "2024-09-19 11:00",
|
"importancy": 0,
|
||||||
"slm100": 0,
|
"lgtd": 114.875,
|
||||||
"vtavslm": null,
|
"lttd": 31.166667,
|
||||||
"slmAvg": 14.5
|
"elev": 0,
|
||||||
},
|
"damel": 71.33,
|
||||||
"lttd": 30.8866,
|
"dsflz": 68.04,
|
||||||
"sttp": "SS",
|
"fsltdz": 64.89,
|
||||||
"irrCode": "D00000010",
|
"ddz": 51.78,
|
||||||
"sort": 9999,
|
"zcxsw": 64.89,
|
||||||
"hasImg": false,
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
"stlc": "荆门市",
|
"today": 0,
|
||||||
"dtmel": 0,
|
"h1": 0,
|
||||||
"stcd": "ZH201418",
|
"h3": 0,
|
||||||
"stnm": "双碑一组（墒情）",
|
"h6": 0,
|
||||||
"addvcd_dictText": "荆门市",
|
"h12": 0,
|
||||||
"lgtd": 112.2006,
|
"h24": 0,
|
||||||
"irrCode_dictText": "漳河实验站",
|
"h48": 16.5,
|
||||||
"bsnm": "漳河流域"
|
"drpState": 1,
|
||||||
},
|
"rz": 60.71,
|
||||||
{
|
"w": 162.8,
|
||||||
"addvcd": "420800000000000",
|
"a_fsltdz": -4.18,
|
||||||
"moditime": "2022-05-01 21:00:00",
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
"comments": "水资源多孔闸门控制系统",
|
"rzWarning": 0,
|
||||||
"src": "zhzj",
|
"rzState": 1,
|
||||||
"esstym": "",
|
"aRz": -4.18
|
||||||
"mvalue": {
|
}]
|
||||||
"slmmmt": null,
|
|
||||||
"slm60": null,
|
|
||||||
"exkey": "@",
|
|
||||||
"slm80": null,
|
|
||||||
"hitrsn": null,
|
|
||||||
"crpty": null,
|
|
||||||
"crpgrwprd": null,
|
|
||||||
"srlslm": null,
|
|
||||||
"stcd": "4211221031",
|
|
||||||
"slm10": 31,
|
|
||||||
"slm20": 42.6,
|
|
||||||
"slm30": null,
|
|
||||||
"slm40": 26.6,
|
|
||||||
"tm": "2025-05-26 09:00",
|
|
||||||
"slm100": null,
|
|
||||||
"vtavslm": null,
|
|
||||||
"slmAvg": 33.4
|
|
||||||
},
|
|
||||||
"lttd": 30.904191,
|
|
||||||
"sttp": "SS",
|
|
||||||
"irrCode": "D00000010",
|
|
||||||
"sort": 9999,
|
|
||||||
"hasImg": false,
|
|
||||||
"stlc": "荆门市",
|
|
||||||
"stcd": "4211221031",
|
|
||||||
"stnm": "试验站墒情",
|
|
||||||
"addvcd_dictText": "荆门市",
|
|
||||||
"lgtd": 112.087806,
|
|
||||||
"irrCode_dictText": "漳河实验站",
|
|
||||||
"bsnm": "漳河流域"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default class ShuiyuandiLayer extends BaseLayer {
|
export default class ShuiyuandiLayer extends BaseLayer {
|
||||||
|
|
||||||
|
|
@ -229,8 +197,8 @@ export default class ShuiyuandiLayer extends BaseLayer {
|
||||||
// await PicStPromise.get();
|
// await PicStPromise.get();
|
||||||
[...page1].map((item)=>{
|
[...page1].map((item)=>{
|
||||||
const obj = {...item}
|
const obj = {...item}
|
||||||
obj.lgtd = item.lgtd + 2.9619
|
obj.lgtd = item.lgtd
|
||||||
obj.lttd = item.lttd + 0.2002
|
obj.lttd = item.lttd
|
||||||
return obj
|
return obj
|
||||||
})
|
})
|
||||||
ms.setData(parseGeoJSON(data));
|
ms.setData(parseGeoJSON(data));
|
||||||
|
|
@ -248,5 +216,7 @@ export default class ShuiyuandiLayer extends BaseLayer {
|
||||||
// coordinates: [properties.lgtd, properties.lttd],
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
// offsetPop: true,
|
// offsetPop: true,
|
||||||
// });
|
// });
|
||||||
|
dispatch.runtime.setInfoDlg({ layerId: 'ShuiyuandiLayer',properties })
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
import clone from "clone";
|
||||||
|
import { PicStPromise, TestPicStPromise } from "../../../../models/_/real";
|
||||||
|
import { parseGeoJSON } from "../../../../utils/tools";
|
||||||
|
import { InfoPopNames } from "../../InfoPops";
|
||||||
|
import BaseLayer from "./baselayer";
|
||||||
|
|
||||||
|
const SourceName = '水源地q';
|
||||||
|
|
||||||
|
const ShapeStyle = {
|
||||||
|
id: SourceName,
|
||||||
|
type: 'symbol',
|
||||||
|
source: SourceName,
|
||||||
|
layout: {
|
||||||
|
'icon-allow-overlap': true,
|
||||||
|
'text-allow-overlap': true,
|
||||||
|
'icon-image': '水源地q',
|
||||||
|
'icon-size': [
|
||||||
|
'interpolate', ['linear'], ['zoom'],
|
||||||
|
10, 0.4,
|
||||||
|
14, 0.8,
|
||||||
|
],
|
||||||
|
|
||||||
|
'text-allow-overlap': true,
|
||||||
|
'text-size': [
|
||||||
|
'interpolate', ['linear'], ['zoom'],
|
||||||
|
10, 10,
|
||||||
|
14, 14,
|
||||||
|
],
|
||||||
|
'text-font': ['Roboto Black'],
|
||||||
|
'text-field': [
|
||||||
|
'step',
|
||||||
|
['zoom'],
|
||||||
|
'',
|
||||||
|
12, ['get', 'stnm']
|
||||||
|
],
|
||||||
|
'text-anchor': 'top',
|
||||||
|
'text-offset': [0, 1],
|
||||||
|
|
||||||
|
'visibility': 'none',
|
||||||
|
},
|
||||||
|
paint: {
|
||||||
|
'text-color': '#fff'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const page1 = [{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "长冲水库",
|
||||||
|
"adcd": "421181110000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.061389,
|
||||||
|
"lttd": 31.408611,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 21.6,
|
||||||
|
"dsflz": 20.15,
|
||||||
|
"fsltdz": 130.8,
|
||||||
|
"ddz": 0,
|
||||||
|
"zcxsw": 130.8,
|
||||||
|
"drpTm": "2024-05-17T08:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 0,
|
||||||
|
"drpState": 2,
|
||||||
|
"rz": 126.41,
|
||||||
|
"w": 0.374,
|
||||||
|
"a_fsltdz": -4.390000000000015,
|
||||||
|
"rzTm": "2024-05-17T06:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 2,
|
||||||
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"tm": "2024-05-17T08:05:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115401/20240517160500.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"tm": "2024-05-17T08:20:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115402/20240517162000.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": -4.39
|
||||||
|
}]
|
||||||
|
|
||||||
|
export default class ShuiyuandiQLayer extends BaseLayer {
|
||||||
|
|
||||||
|
static LayerName = 'ShuiyuandiQLayer';
|
||||||
|
|
||||||
|
static SourceName = SourceName;
|
||||||
|
|
||||||
|
getStyle() {
|
||||||
|
|
||||||
|
const ret = clone(ShapeStyle);
|
||||||
|
this._setStyleVisibility(ret);
|
||||||
|
return ret;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
getName() {
|
||||||
|
return ShuiyuandiQLayer.LayerName;
|
||||||
|
}
|
||||||
|
|
||||||
|
getSubLayers() {
|
||||||
|
return [ShapeStyle.id];
|
||||||
|
}
|
||||||
|
|
||||||
|
async doRefreshLayer(mapCtrl) {
|
||||||
|
const ms = mapCtrl.getSource(SourceName);
|
||||||
|
|
||||||
|
let data =
|
||||||
|
// await PicStPromise.get();
|
||||||
|
[...page1].map((item)=>{
|
||||||
|
const obj = {...item}
|
||||||
|
obj.lgtd = item.lgtd
|
||||||
|
obj.lttd = item.lttd
|
||||||
|
return obj
|
||||||
|
})
|
||||||
|
ms.setData(parseGeoJSON(data));
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
getFeatureTip(record) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
featureClicked(properties, dispatch) {
|
||||||
|
// dispatch.runtime.setFeaturePop({
|
||||||
|
// type: InfoPopNames.PicStPop,
|
||||||
|
// properties,
|
||||||
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
|
// offsetPop: true,
|
||||||
|
// });
|
||||||
|
dispatch.runtime.setInfoDlg({ layerId: 'ShuiyuandiLayer',properties })
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -23,7 +23,9 @@ import QdLayer from "./qdlayer";
|
||||||
import ShuizhiLayer from "./shuizhilayer";
|
import ShuizhiLayer from "./shuizhilayer";
|
||||||
import TrsqLayer from "./trsqlayer";
|
import TrsqLayer from "./trsqlayer";
|
||||||
import ShuichangLayer from "./shuichangLayer";
|
import ShuichangLayer from "./shuichangLayer";
|
||||||
|
import ShuichangQLayer from "./shuichangQLayer";
|
||||||
import ShuiyuandiLayer from "./shuiyuandiLayer";
|
import ShuiyuandiLayer from "./shuiyuandiLayer";
|
||||||
|
import ShuiyuandiQLayer from "./shuiyuandiQLayer";
|
||||||
import ShuikuLayer from "./shuikuLayer";
|
import ShuikuLayer from "./shuikuLayer";
|
||||||
import RainDrpLayer from "./rainDrpLayer"
|
import RainDrpLayer from "./rainDrpLayer"
|
||||||
import XunchaLayer from "./xunchalayer"
|
import XunchaLayer from "./xunchalayer"
|
||||||
|
|
@ -217,10 +219,18 @@ const sources = {
|
||||||
[ShuichangLayer.SourceName]: {
|
[ShuichangLayer.SourceName]: {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
data: { type: 'FeatureCollection', features: [] },
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
|
},
|
||||||
|
[ShuichangQLayer.SourceName]: {
|
||||||
|
type: 'geojson',
|
||||||
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
},
|
},
|
||||||
[ShuiyuandiLayer.SourceName]: {
|
[ShuiyuandiLayer.SourceName]: {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
data: { type: 'FeatureCollection', features: [] },
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
|
},
|
||||||
|
[ShuiyuandiQLayer.SourceName]: {
|
||||||
|
type: 'geojson',
|
||||||
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
},
|
},
|
||||||
[ShuikuLayer.SourceName]: {
|
[ShuikuLayer.SourceName]: {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
|
|
|
||||||
|
|
@ -128,6 +128,8 @@ import Sljc from './panels/Sljc'
|
||||||
import Byjc from './panels/Byjc'
|
import Byjc from './panels/Byjc'
|
||||||
import Shuikusp from './panels/ShuikuSp'
|
import Shuikusp from './panels/ShuikuSp'
|
||||||
import JcGJ from './panels/Jcgj'
|
import JcGJ from './panels/Jcgj'
|
||||||
|
import YjList from './panels/YjList'
|
||||||
|
import Yjsj from './panels/Yjsj'
|
||||||
import Sczl from './panels/Sczl'
|
import Sczl from './panels/Sczl'
|
||||||
import Sbtj from './panels/Sbtj'
|
import Sbtj from './panels/Sbtj'
|
||||||
import Sbyj from './panels/Sbyj'
|
import Sbyj from './panels/Sbyj'
|
||||||
|
|
@ -273,6 +275,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <Gsts style={style} />
|
return <Gsts style={style} />
|
||||||
} else if (name === '供水覆盖率') {
|
} else if (name === '供水覆盖率') {
|
||||||
return <Gsfgl style={style} />
|
return <Gsfgl style={style} />
|
||||||
|
} else if (name === '预警列表') {
|
||||||
|
return <YjList style={style} />
|
||||||
} else if (name === '日供水量') {
|
} else if (name === '日供水量') {
|
||||||
return <Rgsl style={style} />
|
return <Rgsl style={style} />
|
||||||
} else if (name === '对比分析') {
|
} else if (name === '对比分析') {
|
||||||
|
|
@ -331,6 +335,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <Gcxxzl style={style} />
|
return <Gcxxzl style={style} />
|
||||||
} else if (name === '应急指挥调度') {
|
} else if (name === '应急指挥调度') {
|
||||||
return <Yjdd style={style} />
|
return <Yjdd style={style} />
|
||||||
|
} else if (name === '应急事件') {
|
||||||
|
return <Yjsj style={style} />
|
||||||
} else if (name === "网格") {
|
} else if (name === "网格") {
|
||||||
return <Yawg style={style} />
|
return <Yawg style={style} />
|
||||||
} else if (name === "降雨分析") {
|
} else if (name === "降雨分析") {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import React, { useMemo } from 'react'
|
||||||
|
import config from '../../../../config';
|
||||||
|
import { skInfo } from '../../../../models/_/search';
|
||||||
|
import useRequest from '../../../../utils/useRequest';
|
||||||
|
import DpAlert from '../../../../layouts/mui/DpAlert';
|
||||||
|
|
||||||
|
function SkPlan({ record }) {
|
||||||
|
|
||||||
|
let { data } = useRequest(() => skInfo(record));
|
||||||
|
const { hasFile, path, url, info } = useMemo(() => {
|
||||||
|
if (!data) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.plan) {
|
||||||
|
return { info: '未上传预案' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const plan = data.plan;
|
||||||
|
const path = `${config.OSS_BASE}/skyuan/${plan.stcd}/`;
|
||||||
|
const filename = plan.filename;
|
||||||
|
const hasFile = filename.endsWith('doc') || filename.endsWith('docx') || filename.endsWith('pdf');
|
||||||
|
let url;
|
||||||
|
if (hasFile) {
|
||||||
|
if (filename.endsWith('pdf')) {
|
||||||
|
url = path + filename;
|
||||||
|
} else {
|
||||||
|
const filefolder = filename.replace('.docx', '').replace('.doc', '');
|
||||||
|
url = path + filefolder + '/' + filefolder + '.html';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
path,
|
||||||
|
filename: plan.filename,
|
||||||
|
url,
|
||||||
|
hasFile,
|
||||||
|
info: !hasFile ? '未上传预案' : null
|
||||||
|
};
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
|
||||||
|
{/* { info ? <DpAlert style={{ flexShrink: 0, marginBottom: '1rem' }} severity="info">{info}</DpAlert> : null}
|
||||||
|
<div style={{ flexGrow: 1, height: '20rem' }}>
|
||||||
|
{
|
||||||
|
hasFile && (<iframe
|
||||||
|
seamless="seamless"
|
||||||
|
key={path}
|
||||||
|
height={600}
|
||||||
|
style={{ width: '100%', height: '100%', border: 0, backgroundColor: '#fff' }}
|
||||||
|
src={url}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</div> */}
|
||||||
|
<iframe src={`${process.env.PUBLIC_URL}/assets/仰天窝水库（三里畈）防汛应急预案 -.pdf`} width="100%" height="100%"></iframe>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SkPlan
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
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 DescriptionItem from '../DescrptionItem';
|
||||||
|
|
||||||
|
|
||||||
|
function Personel({ data }) {
|
||||||
|
return (
|
||||||
|
<Grid container alignItems="center" spacing={1} style={{ color: '#bbb' }}>
|
||||||
|
<Grid item><Person /></Grid>
|
||||||
|
<Grid item style={{ fontWeight: 'bold', color: '#fff' }}>{data.name}:</Grid>
|
||||||
|
{data.zw && <Grid item>{data.zw};</Grid>}
|
||||||
|
{data.zz && <Grid item>{data.zz};</Grid>}
|
||||||
|
{data.dw && <Grid item>{data.dw};</Grid>}
|
||||||
|
{data.phone && <Grid item>{data.phone}</Grid>}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function SkInfo({ record }) {
|
||||||
|
let { data } = useRequest(() => skInfo(record));
|
||||||
|
data = data || {};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Grid container size="small">
|
||||||
|
<DescriptionItem label="水厂名称">{data.stnm}</DescriptionItem>
|
||||||
|
<DescriptionItem label="管理单位">用水协会</DescriptionItem>
|
||||||
|
<DescriptionItem label="水厂规模">800吨</DescriptionItem>
|
||||||
|
<DescriptionItem label="取水水源">山泉水、新水厂</DescriptionItem>
|
||||||
|
<DescriptionItem label="负责人">陈刚</DescriptionItem>
|
||||||
|
<DescriptionItem label="联系电话">13647186235</DescriptionItem>
|
||||||
|
|
||||||
|
<DescriptionItem label="行政村" span={2}>
|
||||||
|
{/* {adnmZhen(data.adcd)}{adnmCun(data.adcd)} */}
|
||||||
|
林寨村村民、桃园村村民、果园村
|
||||||
|
</DescriptionItem>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SkInfo;
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import React, { useMemo } from 'react'
|
||||||
|
import config from '../../../../config';
|
||||||
|
import { skInfo } from '../../../../models/_/search';
|
||||||
|
import useRequest from '../../../../utils/useRequest';
|
||||||
|
import DpAlert from '../../../../layouts/mui/DpAlert';
|
||||||
|
|
||||||
|
function SkPlan({ record }) {
|
||||||
|
|
||||||
|
let { data } = useRequest(() => skInfo(record));
|
||||||
|
const { hasFile, path, url, info } = useMemo(() => {
|
||||||
|
if (!data) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.plan) {
|
||||||
|
return { info: '未上传预案' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const plan = data.plan;
|
||||||
|
const path = `${config.OSS_BASE}/skyuan/${plan.stcd}/`;
|
||||||
|
const filename = plan.filename;
|
||||||
|
const hasFile = filename.endsWith('doc') || filename.endsWith('docx') || filename.endsWith('pdf');
|
||||||
|
let url;
|
||||||
|
if (hasFile) {
|
||||||
|
if (filename.endsWith('pdf')) {
|
||||||
|
url = path + filename;
|
||||||
|
} else {
|
||||||
|
const filefolder = filename.replace('.docx', '').replace('.doc', '');
|
||||||
|
url = path + filefolder + '/' + filefolder + '.html';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
path,
|
||||||
|
filename: plan.filename,
|
||||||
|
url,
|
||||||
|
hasFile,
|
||||||
|
info: !hasFile ? '未上传预案' : null
|
||||||
|
};
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
|
||||||
|
{/* { info ? <DpAlert style={{ flexShrink: 0, marginBottom: '1rem' }} severity="info">{info}</DpAlert> : null}
|
||||||
|
<div style={{ flexGrow: 1, height: '20rem' }}>
|
||||||
|
{
|
||||||
|
hasFile && (<iframe
|
||||||
|
seamless="seamless"
|
||||||
|
key={path}
|
||||||
|
height={600}
|
||||||
|
style={{ width: '100%', height: '100%', border: 0, backgroundColor: '#fff' }}
|
||||||
|
src={url}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</div> */}
|
||||||
|
<iframe src={`${process.env.PUBLIC_URL}/assets/仰天窝水库（三里畈）防汛应急预案 -.pdf`} width="100%" height="100%"></iframe>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SkPlan
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
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 DescriptionItem from '../DescrptionItem';
|
||||||
|
|
||||||
|
|
||||||
|
function Personel({ data }) {
|
||||||
|
return (
|
||||||
|
<Grid container alignItems="center" spacing={1} style={{ color: '#bbb' }}>
|
||||||
|
<Grid item><Person /></Grid>
|
||||||
|
<Grid item style={{ fontWeight: 'bold', color: '#fff' }}>{data.name}:</Grid>
|
||||||
|
{data.zw && <Grid item>{data.zw};</Grid>}
|
||||||
|
{data.zz && <Grid item>{data.zz};</Grid>}
|
||||||
|
{data.dw && <Grid item>{data.dw};</Grid>}
|
||||||
|
{data.phone && <Grid item>{data.phone}</Grid>}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function SkInfo({ record }) {
|
||||||
|
let { data } = useRequest(() => skInfo(record));
|
||||||
|
data = data || {};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Grid container size="small">
|
||||||
|
<DescriptionItem label="水库名称">{data.stnm}</DescriptionItem>
|
||||||
|
<DescriptionItem label="设计洪水位(m)">{data.dsflz}</DescriptionItem>
|
||||||
|
<DescriptionItem label="校核洪水位(m)">{data.HJHSW}</DescriptionItem>
|
||||||
|
<DescriptionItem label="正常蓄水位(m)">{data.ZCXSW}</DescriptionItem>
|
||||||
|
<DescriptionItem label="死水位(m)">{data.ddz}</DescriptionItem>
|
||||||
|
<DescriptionItem label="汛限水位(m)">{data.fsltdz}</DescriptionItem>
|
||||||
|
<DescriptionItem label="总库容(万方)">{data.ZKR}</DescriptionItem>
|
||||||
|
<DescriptionItem label="防洪库容(万方)">{data.FHKR}</DescriptionItem>
|
||||||
|
<DescriptionItem label="兴利库容(万方)" span={2}>{data.XLKR}</DescriptionItem>
|
||||||
|
|
||||||
|
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SkInfo;
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import React, { useMemo } from 'react'
|
||||||
|
import config from '../../../../config';
|
||||||
|
import { skInfo } from '../../../../models/_/search';
|
||||||
|
import useRequest from '../../../../utils/useRequest';
|
||||||
|
import DpAlert from '../../../../layouts/mui/DpAlert';
|
||||||
|
|
||||||
|
function SkPlan({ record }) {
|
||||||
|
|
||||||
|
let { data } = useRequest(() => skInfo(record));
|
||||||
|
const { hasFile, path, url, info } = useMemo(() => {
|
||||||
|
if (!data) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.plan) {
|
||||||
|
return { info: '未上传预案' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const plan = data.plan;
|
||||||
|
const path = `${config.OSS_BASE}/skyuan/${plan.stcd}/`;
|
||||||
|
const filename = plan.filename;
|
||||||
|
const hasFile = filename.endsWith('doc') || filename.endsWith('docx') || filename.endsWith('pdf');
|
||||||
|
let url;
|
||||||
|
if (hasFile) {
|
||||||
|
if (filename.endsWith('pdf')) {
|
||||||
|
url = path + filename;
|
||||||
|
} else {
|
||||||
|
const filefolder = filename.replace('.docx', '').replace('.doc', '');
|
||||||
|
url = path + filefolder + '/' + filefolder + '.html';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
path,
|
||||||
|
filename: plan.filename,
|
||||||
|
url,
|
||||||
|
hasFile,
|
||||||
|
info: !hasFile ? '未上传预案' : null
|
||||||
|
};
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
|
||||||
|
{/* { info ? <DpAlert style={{ flexShrink: 0, marginBottom: '1rem' }} severity="info">{info}</DpAlert> : null}
|
||||||
|
<div style={{ flexGrow: 1, height: '20rem' }}>
|
||||||
|
{
|
||||||
|
hasFile && (<iframe
|
||||||
|
seamless="seamless"
|
||||||
|
key={path}
|
||||||
|
height={600}
|
||||||
|
style={{ width: '100%', height: '100%', border: 0, backgroundColor: '#fff' }}
|
||||||
|
src={url}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</div> */}
|
||||||
|
<iframe src={`${process.env.PUBLIC_URL}/assets/仰天窝水库（三里畈）防汛应急预案 -.pdf`} width="100%" height="100%"></iframe>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SkPlan
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
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 DescriptionItem from '../DescrptionItem';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
function Personel({ data }) {
|
||||||
|
return (
|
||||||
|
<Grid container alignItems="center" spacing={1} style={{ color: '#bbb' }}>
|
||||||
|
<Grid item><Person /></Grid>
|
||||||
|
<Grid item style={{ fontWeight: 'bold', color: '#fff' }}>{data.name}:</Grid>
|
||||||
|
{data.zw && <Grid item>{data.zw};</Grid>}
|
||||||
|
{data.zz && <Grid item>{data.zz};</Grid>}
|
||||||
|
{data.dw && <Grid item>{data.dw};</Grid>}
|
||||||
|
{data.phone && <Grid item>{data.phone}</Grid>}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function SkInfo({ record }) {
|
||||||
|
let { data } = useRequest(() => skInfo(record));
|
||||||
|
data = data || {};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Grid container size="small">
|
||||||
|
<DescriptionItem label="事件名称">{record.event}</DescriptionItem>
|
||||||
|
<DescriptionItem label="事件类型">{record.types}</DescriptionItem>
|
||||||
|
{/* <DescriptionItem label="行政区划">{adnmZhen(data.adcd)}{adnmCun(data.adcd)}</DescriptionItem> */}
|
||||||
|
<DescriptionItem label="发生时间">{moment(record.drpTm).format('YYYY-MM-DD HH:mm:ss')}</DescriptionItem>
|
||||||
|
<DescriptionItem label="执行人">王强</DescriptionItem>
|
||||||
|
<DescriptionItem label="执行时间">2025-06-06 16:32:12</DescriptionItem>
|
||||||
|
<DescriptionItem label="采取的措施" span={1}>立即启动东部备用水源，补充供水量的30%，缓解供水压力。</DescriptionItem>
|
||||||
|
<DescriptionItem label="影响范围" span={1}>主要影响城北区域约5万户居民，部分高层建筑在高峰时段可能出现水压不足情况。已通知受影响区域居民做好储水准备。</DescriptionItem>
|
||||||
|
<DescriptionItem label="处理结果" span={1}>通过启用备用水源和调度其他水源，目前供水系统压力已趋于稳定，供水量恢复到正常水平的85%。预计今晚可完全恢复。</DescriptionItem>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SkInfo;
|
||||||
|
|
@ -38,7 +38,7 @@ const useStyles = makeStyles((theme) => ({
|
||||||
},
|
},
|
||||||
controls1: {
|
controls1: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '85%',
|
top: '88%',
|
||||||
left: '50%',
|
left: '50%',
|
||||||
transform: 'translate(-50%, -50%)',
|
transform: 'translate(-50%, -50%)',
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
|
|
|
||||||
|
|
@ -45,9 +45,9 @@ export default function Demo1() {
|
||||||
// </>
|
// </>
|
||||||
}
|
}
|
||||||
|
|
||||||
{
|
{/* {
|
||||||
isSc && <img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute', width: '100%' }} />
|
isSc && <img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute', width: '100%' }} />
|
||||||
}
|
} */}
|
||||||
|
|
||||||
|
|
||||||
<div className="bottom">
|
<div className="bottom">
|
||||||
|
|
|
||||||
|
|
@ -1,171 +1,137 @@
|
||||||
import React, { useMemo } from 'react';
|
import React from 'react';
|
||||||
import echarts from 'echarts/lib/echarts';
|
import ReactECharts from 'echarts-for-react';
|
||||||
import ReactEcharts from 'echarts-for-react';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
chartContainer: {
|
||||||
|
width: '100%',
|
||||||
|
height: '400px',
|
||||||
|
// backgroundColor: '#0d1117',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const pallete = [
|
const WaterSourceChart = () => {
|
||||||
['#177ab3', '#51c3e7'],
|
const classes = useStyles();
|
||||||
['#9976dc', '#c792ee'],
|
const option = {
|
||||||
['#94a1eb', '#a7caf8'],
|
// backgroundColor: '#0d1117',
|
||||||
['#7ae5c3', '#c9f4ea'],
|
|
||||||
['#c7dca5', '#f5fcd5'],
|
|
||||||
['#7988d9', '#9dc6f1'],
|
|
||||||
['#d9ed8f', '#d3f89b'],
|
|
||||||
];
|
|
||||||
|
|
||||||
const palleteLen = pallete.length;
|
|
||||||
|
|
||||||
|
|
||||||
const AreaDrpChart = () => {
|
|
||||||
const x = ['清泉水厂','南湖水厂','东郊水厂','西山水厂']
|
|
||||||
const y1 = [612, 601, 630, 640]
|
|
||||||
const y2 = [624, 645, 665, 656]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var option = {
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
type: 'shadow'
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
valueFormatter: (value) => value + ' 万m³'
|
formatter: function (params) {
|
||||||
},
|
let total = 0;
|
||||||
grid: {
|
let result = `${params[0].axisValue}<br/>`;
|
||||||
top: 42,
|
|
||||||
left: 50,
|
// 按数值从大到小排序并只显示有预警的水源地
|
||||||
right: 0,
|
const sortedParams = params
|
||||||
bottom: 27,
|
.filter(param => param.value > 0)
|
||||||
|
.sort((a, b) => b.value - a.value);
|
||||||
|
|
||||||
|
sortedParams.forEach(param => {
|
||||||
|
total += param.value;
|
||||||
|
result += `${param.seriesName}: ${param.value}<br/>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
result += `总计: ${total}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['设计产能', '实际产水'],
|
data: ['浮桥河水厂', '三河口水厂', '刘集水厂', '杉林河水厂', ],
|
||||||
top: '8',
|
|
||||||
left: 'center',
|
|
||||||
itemWidth: 11,//11,
|
|
||||||
itemHeight: 11,//11,
|
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#B9BFC9',
|
color: '#c9d1d9'
|
||||||
fontSize: 12,//12
|
},
|
||||||
}
|
top: 10
|
||||||
},
|
},
|
||||||
xAxis: [
|
grid: {
|
||||||
{
|
left: '3%',
|
||||||
type: 'category',
|
right: '4%',
|
||||||
data: x,
|
bottom: '3%',
|
||||||
splitLine: {
|
top: '15%',
|
||||||
show: true, //隐藏X轴轴线
|
containLabel: true
|
||||||
lineStyle: {
|
},
|
||||||
color: 'rgba(255,255,255,0.2)',
|
xAxis: {
|
||||||
width: 0
|
type: 'category',
|
||||||
}
|
data: ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06'],
|
||||||
},
|
axisLabel: {
|
||||||
axisLabel: {
|
color: '#fff',
|
||||||
show: true,
|
rotate: 45
|
||||||
textStyle: {
|
},
|
||||||
color: '#B9BFC9' //X轴文字颜色
|
axisLine: {
|
||||||
},
|
lineStyle: {
|
||||||
// rotate: 20, // 角度值：Number
|
color: '#c9d1d9'
|
||||||
fontSize: 10,//10
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true, //隐藏X轴轴线
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.2)',
|
|
||||||
width: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: true,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
},
|
||||||
yAxis: [
|
yAxis: {
|
||||||
{
|
type: 'value',
|
||||||
type: 'value',
|
name: '预警数量',
|
||||||
position: 'left',
|
nameTextStyle: {
|
||||||
name: '产水量m³',
|
color: '#fff'
|
||||||
nameTextStyle: {
|
},
|
||||||
color: '#B9BFC9',
|
axisLabel: {
|
||||||
fontSize: 10,//10,
|
color: '#fff'
|
||||||
padding: [0, 0, 0, -30],//[0, 0, 0, -30]//控制y轴标题位置
|
},
|
||||||
},
|
axisLine: {
|
||||||
nameGap: 17,
|
lineStyle: {
|
||||||
|
color: '#c9d1d9'
|
||||||
splitLine: {
|
}
|
||||||
show: true,
|
},
|
||||||
lineStyle: {
|
splitLine: {
|
||||||
width: 1,
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,0.2)'
|
color: '#30363d',
|
||||||
}
|
type: 'dashed'
|
||||||
},
|
}
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: '#B9BFC9',
|
|
||||||
fontSize: 11,//11
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
min: 200,
|
|
||||||
max: 800,
|
|
||||||
}
|
}
|
||||||
],
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '设计产能',
|
name: '浮桥河水厂',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 10,
|
barWidth: 30,
|
||||||
data: y1,
|
stack: 'total',
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
data: [45, 52, 65, 70, 75, 79]
|
||||||
color: '#56b38b'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// label: {
|
|
||||||
// show: true,
|
|
||||||
// position: 'top',
|
|
||||||
// color: '#bbb',
|
|
||||||
// fontSize: 12,
|
|
||||||
// textShadowBlur: 4,
|
|
||||||
// textShadowColor: '#6ab',
|
|
||||||
// },
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '实际产水',
|
name: '三河口水厂',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 10,
|
barWidth: 30,
|
||||||
data: y2,
|
stack: 'total',
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
data: [15, 18, 20, 22, 23, 24]
|
||||||
color: '#3860d0'
|
},
|
||||||
},
|
{
|
||||||
},
|
name: '刘集水厂',
|
||||||
// label: {
|
type: 'bar',
|
||||||
// show: true,
|
barWidth: 30,
|
||||||
// position: 'top',
|
stack: 'total',
|
||||||
// color: '#bbb',
|
|
||||||
// fontSize: 12,
|
data: [10, 12, 14, 16, 17, 19]
|
||||||
// textShadowBlur: 4,
|
},
|
||||||
// textShadowColor: '#6ab',
|
{
|
||||||
// },
|
name: '杉林河水厂',
|
||||||
}
|
type: 'bar',
|
||||||
]
|
barWidth: 30,
|
||||||
|
stack: 'total',
|
||||||
|
|
||||||
|
data: [8, 10, 12, 14, 15, 17]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
color: ['#fac858', '#ee6666', '#73c0de', '#3ba272']
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReactEcharts
|
<div className={classes.chartContainer}>
|
||||||
option={option}
|
<ReactECharts
|
||||||
style={{ height: '99%', width: '100%' }}
|
option={option}
|
||||||
/>
|
style={{ height: '100%' }}
|
||||||
)
|
opts={{ renderer: 'canvas' }}
|
||||||
}
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default React.memo(AreaDrpChart);
|
export default WaterSourceChart;
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
const WaterSourceChart = () => {
|
||||||
|
const dates = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06'];
|
||||||
|
const waterSources = ['浮桥河水库', '长冲水库', '葡萄冲水库', '二五冲水库'];
|
||||||
|
|
||||||
|
// 使用固定的示例数据
|
||||||
|
const series = [
|
||||||
|
{
|
||||||
|
name: '浮桥河水库',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: 30,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [15, 18, 12, 20, 16, 22]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '长冲水库',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: 30,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [10, 12, 8, 15, 11, 14]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '葡萄冲水库',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: 30,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [8, 10, 6, 12, 9, 11]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '二五冲水库',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: 30,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [5, 7, 4, 8, 6, 9]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
let total = 0;
|
||||||
|
let result = `${params[0].axisValue}<br/>`;
|
||||||
|
|
||||||
|
// 按数值从大到小排序并只显示有预警的水源地
|
||||||
|
const sortedParams = params
|
||||||
|
.filter(param => param.value > 0)
|
||||||
|
.sort((a, b) => b.value - a.value);
|
||||||
|
|
||||||
|
sortedParams.forEach(param => {
|
||||||
|
total += param.value;
|
||||||
|
result += `${param.seriesName}: ${param.value}<br/>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
result += `总计: ${total}`;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: waterSources,
|
||||||
|
top: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
top: '15%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: dates,
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
rotate: 45
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '预警数量',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: 'rgba(255, 255, 255, 0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: series,
|
||||||
|
color: ['#fac858', '#ee6666', '#73c0de', '#3ba272']
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ height: '400px', width: '100%' }}>
|
||||||
|
<ReactECharts
|
||||||
|
option={option}
|
||||||
|
style={{ height: '100%' }}
|
||||||
|
opts={{ renderer: 'canvas' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WaterSourceChart;
|
||||||
|
|
@ -2,23 +2,34 @@ import React, { useMemo, useState } from 'react';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import PanelBox from '../../components/PanelBox';
|
import PanelBox from '../../components/PanelBox';
|
||||||
import AreaDrpChart from './chart';
|
import AreaDrpChart from './chart';
|
||||||
|
import ShuiyuandiChart from './chart1'
|
||||||
|
import clsx from 'clsx';
|
||||||
function DrpReal({ style }) {
|
function DrpReal({ style }) {
|
||||||
const dispatch = useDispatch();
|
const [type, setType] = useState('sc')
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const toggleStType = (type) => {
|
||||||
|
setType(type)
|
||||||
|
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="报警分析"
|
title="预警统计"
|
||||||
color="green"
|
color="green"
|
||||||
extra={
|
tabs={
|
||||||
<>
|
<>
|
||||||
<div style={{cursor:'pointer',color:'#3c88f7'}} onClick={()=>dispatch?.runtime.setInfoDlg({ layerId: 'BjLayer', properties: {} })}>更多</div>
|
{/* <div style={{cursor:'pointer',color:'#3c88f7'}} onClick={()=>dispatch?.runtime.setInfoDlg({ layerId: 'BjLayer', properties: {} })}>更多</div> */}
|
||||||
|
<span className="button-group">
|
||||||
|
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||||
|
<span className={clsx({ active: type == 'syd' })} onClick={() => toggleStType('syd')}>水源地</span>
|
||||||
|
</span>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
>
|
>{
|
||||||
<img src='/assets/报警分析.jpg' style={{width:'26.5rem', height:'13.5rem',marginLeft:'0rem',marginTop:'1rem'}}/>
|
type == 'sc' ?<AreaDrpChart />:<ShuiyuandiChart />
|
||||||
|
}
|
||||||
|
|
||||||
|
{/* <img src='/assets/报警分析.jpg' style={{width:'26.5rem', height:'13.5rem',marginLeft:'0rem',marginTop:'1rem'}}/> */}
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,416 @@
|
||||||
import React, { useMemo, useState } from 'react';
|
import React, { useMemo, useState,useEffect } from 'react';
|
||||||
import PanelBox from '../../components/PanelBox';
|
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';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import config from '../../../../config';
|
||||||
|
import clsx from 'clsx';
|
||||||
function DrpReal({ style }) {
|
function DrpReal({ style }) {
|
||||||
|
const [type, setType] = useState('sc')
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const toggleStType = (type) => {
|
||||||
|
setType(type)
|
||||||
|
|
||||||
|
}
|
||||||
|
const scData = [
|
||||||
|
{
|
||||||
|
"stcd": "61614200",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "浮桥河水厂",
|
||||||
|
"adcd": "421181100000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 114.875,
|
||||||
|
"lttd": 31.166667,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 71.33,
|
||||||
|
"dsflz": 68.04,
|
||||||
|
"fsltdz": 64.89,
|
||||||
|
"ddz": 51.78,
|
||||||
|
"zcxsw": 64.89,
|
||||||
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 16.5,
|
||||||
|
"drpState": 1,
|
||||||
|
"rz": 60.71,
|
||||||
|
"w": 162.8,
|
||||||
|
"a_fsltdz": -4.18,
|
||||||
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 1,
|
||||||
|
"aRz": -4.18,
|
||||||
|
percent:98.20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "61612610",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "三河口水厂",
|
||||||
|
"adcd": "421181109000",
|
||||||
|
"wscd": null,
|
||||||
|
percent:94.29,
|
||||||
|
"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": "刘集水厂",
|
||||||
|
percent:56.98,
|
||||||
|
"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": "杉林河水厂",
|
||||||
|
"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 page1 = [
|
||||||
|
{
|
||||||
|
"stcd": "61614200",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "浮桥河水库",
|
||||||
|
"adcd": "421181100000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 114.875,
|
||||||
|
"lttd": 31.166667,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 71.33,
|
||||||
|
"dsflz": 68.04,
|
||||||
|
"fsltdz": 64.89,
|
||||||
|
"ddz": 51.78,
|
||||||
|
"zcxsw": 64.89,
|
||||||
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 16.5,
|
||||||
|
"drpState": 1,
|
||||||
|
"rz": 60.71,
|
||||||
|
"w": 162.8,
|
||||||
|
"a_fsltdz": -4.18,
|
||||||
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 1,
|
||||||
|
"aRz": -4.18,
|
||||||
|
percent:98.21
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "长冲水库",
|
||||||
|
"adcd": "421181110000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.061389,
|
||||||
|
"lttd": 31.408611,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 21.6,
|
||||||
|
"dsflz": 20.15,
|
||||||
|
"fsltdz": 130.8,
|
||||||
|
"ddz": 0,
|
||||||
|
"zcxsw": 130.8,
|
||||||
|
"drpTm": "2024-05-17T08:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 0,
|
||||||
|
"drpState": 2,
|
||||||
|
"rz": 126.41,
|
||||||
|
"w": 0.374,
|
||||||
|
"a_fsltdz": -4.390000000000015,
|
||||||
|
"rzTm": "2024-05-17T06:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 2,
|
||||||
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"tm": "2024-05-17T08:05:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115401/20240517160500.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"tm": "2024-05-17T08:20:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115402/20240517162000.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": -4.39,
|
||||||
|
percent:96.12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115301",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "葡萄冲水库",
|
||||||
|
"adcd": "421181110000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.051389,
|
||||||
|
"lttd": 31.423333,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 15.8,
|
||||||
|
"dsflz": 14.73,
|
||||||
|
"fsltdz": 14.3,
|
||||||
|
"ddz": 9.48,
|
||||||
|
"zcxsw": 14.3,
|
||||||
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 0,
|
||||||
|
"drpState": 2,
|
||||||
|
"rz": 213.75,
|
||||||
|
"w": 0.04,
|
||||||
|
"a_fsltdz": 199.45,
|
||||||
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||||
|
"rzWarning": 1,
|
||||||
|
"rzState": 2,
|
||||||
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716115301",
|
||||||
|
"tm": "2023-03-12T08:02:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115301/20230312160200.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115301",
|
||||||
|
"tm": "2023-03-12T07:11:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115302/20230312151100.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": 199.45,
|
||||||
|
percent:89.21
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115701",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "二五冲水库",
|
||||||
|
"adcd": "421181110000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.087222,
|
||||||
|
"lttd": 31.378333,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 11.2,
|
||||||
|
"dsflz": 10.07,
|
||||||
|
"fsltdz": 108.55,
|
||||||
|
"ddz": 1.5,
|
||||||
|
"zcxsw": 108.55,
|
||||||
|
"drpTm": "2025-03-22T08:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 0,
|
||||||
|
"drpState": 2,
|
||||||
|
"rz": 99.65,
|
||||||
|
"w": 0.038,
|
||||||
|
"a_fsltdz": -8.899999999999991,
|
||||||
|
"rzTm": "2025-03-22T08:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 2,
|
||||||
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716115701",
|
||||||
|
"tm": "2025-03-06T23:01:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2025/0307/716115701/20250307070100.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115701",
|
||||||
|
"tm": "2024-10-18T06:28:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2024/1018/716115702/20241018142800.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": -8.9,
|
||||||
|
percent:58.2
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const flyTo = (record) => {
|
||||||
|
const { lgtd, lttd } = record;
|
||||||
|
if (lgtd && lttd) {
|
||||||
|
const newLgtd = type == 'sc' ? lgtd - 0.00122 : lgtd;
|
||||||
|
// dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
|
||||||
|
dispatch.runtime.setCameraTarget({
|
||||||
|
center: [newLgtd, lttd + config.poiPositionOffsetY.hd],
|
||||||
|
zoom: config.poiPositionZoom.hd,
|
||||||
|
pitch: config.poiPitch,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const [data, setData] = useState([])
|
||||||
|
useEffect(() => {
|
||||||
|
if (type == 'sc') {
|
||||||
|
setData(scData)
|
||||||
|
} else {
|
||||||
|
setData(page1)
|
||||||
|
}
|
||||||
|
}, [type])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="水质监测"
|
title="水质达标率"
|
||||||
color="green"
|
color="green"
|
||||||
extra={
|
tabs={
|
||||||
<>
|
// <>
|
||||||
<img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
// <img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||||
<img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
// <img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||||
</>
|
// </>
|
||||||
|
<span className="button-group">
|
||||||
|
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||||
|
<span className={clsx({ active: type == 'syd' })} onClick={() => toggleStType('syd')}>水源地</span>
|
||||||
|
</span>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<img src='/assets/水厂水质监测.jpg' style={{width:'26.5rem', height:'12rem',marginLeft:'0rem',marginTop:'1rem'}}/>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||||
|
<img src={`${process.env.PUBLIC_URL}/assets/zhdbl.jpg`} style={{ width: 150 }} alt="" />
|
||||||
|
<span style={{color:'#fff'}}>综合达标率</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TableContainer style={{ height: '100%' }}>
|
||||||
|
<Table size="small" stickyHeader>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<DpTableCell style={{ width: '40%' }} align="center">名称</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '60%' }} align="center">达标率（%）</DpTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{
|
||||||
|
data.map((row) => (
|
||||||
|
<DpTableRow key={row.stcd} onClick={() => flyTo(row)}>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
{row.stnm}
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
{row.percent}
|
||||||
|
</DpTableCell>
|
||||||
|
</DpTableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</div>
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,453 @@
|
||||||
|
import React, { useMemo, useState, useEffect } from 'react';
|
||||||
|
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';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import config from '../../../../config';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import moment from 'moment';
|
||||||
|
function DrpReal({ style }) {
|
||||||
|
const [type, setType] = useState('sc')
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const toggleStType = (type) => {
|
||||||
|
setType(type)
|
||||||
|
|
||||||
|
}
|
||||||
|
const scData = [
|
||||||
|
{
|
||||||
|
"stcd": "61614200",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "浮桥河水厂",
|
||||||
|
zb: '浊度',
|
||||||
|
yjvalue: 0.6,
|
||||||
|
status:1,
|
||||||
|
"adcd": "421181100000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 114.875,
|
||||||
|
"lttd": 31.166667,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 71.33,
|
||||||
|
"dsflz": 68.04,
|
||||||
|
"fsltdz": 64.89,
|
||||||
|
"ddz": 51.78,
|
||||||
|
"zcxsw": 64.89,
|
||||||
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 16.5,
|
||||||
|
"drpState": 1,
|
||||||
|
"rz": 60.71,
|
||||||
|
"w": 162.8,
|
||||||
|
"a_fsltdz": -4.18,
|
||||||
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 1,
|
||||||
|
"aRz": -4.18,
|
||||||
|
percent: 98.20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "61612610",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "三河口水厂",
|
||||||
|
zb: '余氯',
|
||||||
|
yjvalue: 0.25,
|
||||||
|
"adcd": "421181109000",
|
||||||
|
"wscd": null,
|
||||||
|
percent: 94.29,
|
||||||
|
"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": "刘集水厂",
|
||||||
|
zb: 'PH值',
|
||||||
|
yjvalue: 7.4,
|
||||||
|
percent: 56.98,
|
||||||
|
"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": "杉林河水厂",
|
||||||
|
zb: 'PH值',
|
||||||
|
yjvalue: 6.3,
|
||||||
|
"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 page1 = [
|
||||||
|
{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "长冲水库",
|
||||||
|
"adcd": "421181110000",
|
||||||
|
"wscd": null,
|
||||||
|
zb: '氨氮',
|
||||||
|
yjvalue: 1.3,
|
||||||
|
status:1,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.061389,
|
||||||
|
"lttd": 31.408611,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 21.6,
|
||||||
|
"dsflz": 20.15,
|
||||||
|
"fsltdz": 130.8,
|
||||||
|
"ddz": 0,
|
||||||
|
"zcxsw": 130.8,
|
||||||
|
"drpTm": "2024-05-17T08:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 0,
|
||||||
|
"drpState": 2,
|
||||||
|
"rz": 126.41,
|
||||||
|
"w": 0.374,
|
||||||
|
"a_fsltdz": -4.390000000000015,
|
||||||
|
"rzTm": "2024-05-17T06:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 2,
|
||||||
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"tm": "2024-05-17T08:05:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115401/20240517160500.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115401",
|
||||||
|
"tm": "2024-05-17T08:20:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115402/20240517162000.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": -4.39,
|
||||||
|
percent: 96.12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "61614200",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "浮桥河水库",
|
||||||
|
"adcd": "421181100000",
|
||||||
|
"wscd": null,
|
||||||
|
zb: '浊度',
|
||||||
|
yjvalue: 0.4,
|
||||||
|
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 114.875,
|
||||||
|
"lttd": 31.166667,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 71.33,
|
||||||
|
"dsflz": 68.04,
|
||||||
|
"fsltdz": 64.89,
|
||||||
|
"ddz": 51.78,
|
||||||
|
"zcxsw": 64.89,
|
||||||
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 16.5,
|
||||||
|
"drpState": 1,
|
||||||
|
"rz": 60.71,
|
||||||
|
"w": 162.8,
|
||||||
|
"a_fsltdz": -4.18,
|
||||||
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 1,
|
||||||
|
"aRz": -4.18,
|
||||||
|
percent: 98.21
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"stcd": "716115301",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "葡萄冲水库",
|
||||||
|
"adcd": "421181110000",
|
||||||
|
zb: '总磷',
|
||||||
|
yjvalue: 0.09,
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.051389,
|
||||||
|
"lttd": 31.423333,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 15.8,
|
||||||
|
"dsflz": 14.73,
|
||||||
|
"fsltdz": 14.3,
|
||||||
|
"ddz": 9.48,
|
||||||
|
"zcxsw": 14.3,
|
||||||
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 0,
|
||||||
|
"drpState": 2,
|
||||||
|
"rz": 213.75,
|
||||||
|
"w": 0.04,
|
||||||
|
"a_fsltdz": 199.45,
|
||||||
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||||
|
"rzWarning": 1,
|
||||||
|
"rzState": 2,
|
||||||
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716115301",
|
||||||
|
"tm": "2023-03-12T08:02:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115301/20230312160200.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115301",
|
||||||
|
"tm": "2023-03-12T07:11:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115302/20230312151100.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": 199.45,
|
||||||
|
percent: 89.21
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115701",
|
||||||
|
"type": "sk",
|
||||||
|
zb: 'PH值',
|
||||||
|
yjvalue: 7.1,
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "二五冲水库",
|
||||||
|
"adcd": "421181110000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.087222,
|
||||||
|
"lttd": 31.378333,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 11.2,
|
||||||
|
"dsflz": 10.07,
|
||||||
|
"fsltdz": 108.55,
|
||||||
|
"ddz": 1.5,
|
||||||
|
"zcxsw": 108.55,
|
||||||
|
"drpTm": "2025-03-22T08:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 0,
|
||||||
|
"drpState": 2,
|
||||||
|
"rz": 99.65,
|
||||||
|
"w": 0.038,
|
||||||
|
"a_fsltdz": -8.899999999999991,
|
||||||
|
"rzTm": "2025-03-22T08:00:00.000Z",
|
||||||
|
"rzWarning": 0,
|
||||||
|
"rzState": 2,
|
||||||
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716115701",
|
||||||
|
"tm": "2025-03-06T23:01:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2025/0307/716115701/20250307070100.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716115701",
|
||||||
|
"tm": "2024-10-18T06:28:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2024/1018/716115702/20241018142800.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": -8.9,
|
||||||
|
percent: 58.2
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const flyTo = (record) => {
|
||||||
|
const { lgtd, lttd } = record;
|
||||||
|
if (lgtd && lttd) {
|
||||||
|
const newLgtd = type == 'sc' ? lgtd - 0.00122 : lgtd;
|
||||||
|
// dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
|
||||||
|
dispatch.runtime.setCameraTarget({
|
||||||
|
center: [newLgtd, lttd + config.poiPositionOffsetY.hd],
|
||||||
|
zoom: config.poiPositionZoom.hd,
|
||||||
|
pitch: config.poiPitch,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const [data, setData] = useState([])
|
||||||
|
useEffect(() => {
|
||||||
|
if (type == 'sc') {
|
||||||
|
setData(scData)
|
||||||
|
} else {
|
||||||
|
setData(page1)
|
||||||
|
}
|
||||||
|
}, [type])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="预警列表"
|
||||||
|
color="green"
|
||||||
|
tabs={
|
||||||
|
// <>
|
||||||
|
// <img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||||
|
// <img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||||
|
// </>
|
||||||
|
<span className="button-group">
|
||||||
|
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||||
|
<span className={clsx({ active: type == 'syd' })} onClick={() => toggleStType('syd')}>水源地</span>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div >
|
||||||
|
<TableContainer style={{ height: '100%' }}>
|
||||||
|
<Table size="small" stickyHeader>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<DpTableCell style={{ width: '12%' }} align="center">序号</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '22%' }} align="center">水厂名称</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '22%' }} align="center">预警指标</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '22%' }} align="center">预警数值</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '22%' }} align="center">预警时间</DpTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{
|
||||||
|
data.map((row, i) => (
|
||||||
|
<DpTableRow key={row.stcd} onClick={() => flyTo(row)}>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
{i + 1}
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<div
|
||||||
|
className="table-ellipsis cursor-pointer"
|
||||||
|
title={row.stnm}
|
||||||
|
> {row.stnm}</div>
|
||||||
|
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
{row.zb}
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<span style={{ color: row.status ? 'red' :''}}>{row.yjvalue}</span>
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<div
|
||||||
|
className="table-ellipsis cursor-pointer"
|
||||||
|
title={moment(row.drpTm).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
> {moment(row.drpTm).format('YYYY-MM-DD HH:mm:ss')}</div>
|
||||||
|
</DpTableCell>
|
||||||
|
</DpTableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</div>
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DrpReal;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,67 @@
|
||||||
|
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 { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
|
||||||
|
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
|
||||||
|
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||||
|
|
||||||
|
|
||||||
|
function Setting({ onClose }) {
|
||||||
|
const layerVisible = useSelector(getLayerVisible);
|
||||||
|
const layerSetting = useSelector(getLayerSetting);
|
||||||
|
|
||||||
|
const dispath = useDispatch();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
open={true}
|
||||||
|
onClose={onClose}
|
||||||
|
maxWidth="xl"
|
||||||
|
style={{ borderRadius: 0 }}
|
||||||
|
PaperComponent={DpPaperComponent}
|
||||||
|
BackdropComponent={DpBackgroundDrop}
|
||||||
|
>
|
||||||
|
<div className="boxhead"></div>
|
||||||
|
|
||||||
|
<DpDialogTitle>实时雨量显示设置</DpDialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<div style={{ width: 320, padding: '1rem 0' }}>
|
||||||
|
<FormGroup>
|
||||||
|
<div style={{ marginBottom: '2rem' }}>
|
||||||
|
<Typography variant="subtitle2">地图实时雨量显示雨量时段</Typography>
|
||||||
|
<Select
|
||||||
|
style={{ fontSize: '1.2rem' }}
|
||||||
|
fullWidth
|
||||||
|
value={layerSetting.drplabel}
|
||||||
|
onChange={(event) => dispath.map.setLayerSetting({ drplabel: event.target.value })}
|
||||||
|
>
|
||||||
|
<MenuItem value="h1">小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h3">3小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h6">6小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h12">12小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h24">24小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h48">48小时雨量</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '1rem' }}>
|
||||||
|
<Typography variant="subtitle2">显示实时雨量图层</Typography>
|
||||||
|
<Switch
|
||||||
|
checked={!!layerVisible.RealDrpLayer}
|
||||||
|
color="primary"
|
||||||
|
edge="start"
|
||||||
|
onChange={(e) => dispath.map.setLayerVisible({ RealDrpLayer: e.target.checked })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
<div className="boxfoot"></div>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Setting;
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
import React, { useMemo, useState } from 'react';
|
||||||
|
import useRequest from '../../../../utils/useRequest';
|
||||||
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
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 clsx from 'clsx';
|
||||||
|
import { renderDrp } from '../../../../utils/renutils';
|
||||||
|
import moment from 'moment';
|
||||||
|
import config from '../../../../config';
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
"stcd": "716129061",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "仰天窝水库",
|
||||||
|
event: '仰天窝水库蓄水量＜30%',
|
||||||
|
types:'干旱',
|
||||||
|
"adcd": "421181201000",
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.106667,
|
||||||
|
"lttd": 31.126389,
|
||||||
|
"elev": 0,
|
||||||
|
"damel": 325.08,
|
||||||
|
"dsflz": 324.18,
|
||||||
|
"fsltdz": 323.5,
|
||||||
|
"ddz": 319.5,
|
||||||
|
"zcxsw": 323.5,
|
||||||
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||||
|
"today": 0,
|
||||||
|
"h1": 0,
|
||||||
|
"h3": 0,
|
||||||
|
"h6": 0,
|
||||||
|
"h12": 0,
|
||||||
|
"h24": 0,
|
||||||
|
"h48": 0,
|
||||||
|
"drpState": 2,
|
||||||
|
"rz": 325.16,
|
||||||
|
"w": 0.132,
|
||||||
|
"a_fsltdz": 4.660000000000025,
|
||||||
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||||
|
"rzWarning": 1,
|
||||||
|
"rzState": 2,
|
||||||
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716129061",
|
||||||
|
"tm": "2023-03-12T06:05:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716129061",
|
||||||
|
"tm": "2023-03-12T07:25:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": 4.66
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"stcd": "61612910",
|
||||||
|
"stnm": "桃林河(阎河)",
|
||||||
|
"adcd": "421181000000000",
|
||||||
|
event: '桃林河河道水位超警',
|
||||||
|
types: '洪涝',
|
||||||
|
|
||||||
|
"wscd": null,
|
||||||
|
"importancy": 0,
|
||||||
|
"lgtd": 115.087777777,
|
||||||
|
"lttd": 31.164444444,
|
||||||
|
"elev": null,
|
||||||
|
"hasRz": true,
|
||||||
|
"wrz": null,
|
||||||
|
"wrq": null,
|
||||||
|
"grz": null,
|
||||||
|
"grq": null,
|
||||||
|
"sfz": null,
|
||||||
|
"sfq": null,
|
||||||
|
"type": "sh",
|
||||||
|
"tm": "2025-06-03T02:35:00.000Z",
|
||||||
|
"rz": 55.67,
|
||||||
|
"trend": 0,
|
||||||
|
"state": 1,
|
||||||
|
"warning": 0,
|
||||||
|
"maxRz": 55.67,
|
||||||
|
"maxDate": "2025-06-03T02:00:00.000Z",
|
||||||
|
"warndes": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stcd": "61612610",
|
||||||
|
"type": "sk",
|
||||||
|
"hasRz": true,
|
||||||
|
"stnm": "三河口水库",
|
||||||
|
event: '三河口水库水源地水质突变',
|
||||||
|
types:'水质污染',
|
||||||
|
"adcd": "421181109000",
|
||||||
|
"wscd": null,
|
||||||
|
"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
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
function DrpReal({ style }) {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const flyTo = (record) => {
|
||||||
|
const { lgtd, lttd } = record;
|
||||||
|
const types = record.type == 'sk' ? 'RealSkPop' :'RealHDPop'
|
||||||
|
if (lgtd && lttd) {
|
||||||
|
dispatch.runtime.setFeaturePop({ type:types, properties: {...record,events:1}, coordinates: [lgtd, lttd] });
|
||||||
|
dispatch.runtime.setCameraTarget({
|
||||||
|
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||||||
|
zoom: config.poiPositionZoom.hd,
|
||||||
|
pitch: config.poiPitch,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="应急事件"
|
||||||
|
color="green"
|
||||||
|
>
|
||||||
|
<TableContainer style={{ height: '100%' }}>
|
||||||
|
<Table size="small" stickyHeader>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<DpTableCell style={{ width: '10%' }} align="center">序号</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '35%' }} align="center">事件名称</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '20%' }} align="center">事件类型</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '35%' }} align="center">发生时间</DpTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((row,index) => (
|
||||||
|
<DpTableRow key={row.stcd} onClick={() => flyTo(row)}>
|
||||||
|
<DpTableCell align="center">{index+1}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.event}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.types}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{moment(row.drpTm).format('YYYY-MM-DD HH:mm:ss')}</DpTableCell>
|
||||||
|
</DpTableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DrpReal;
|
||||||
Loading…
Reference in New Issue