Compare commits
No commits in common. "bf30757e2484d435c78c7effa157209ea9aa1c7d" and "8ed184216c82c4f6b90a50092d33bb76da30e095" have entirely different histories.
bf30757e24
...
8ed184216c
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
|
|
@ -394,15 +394,7 @@
|
||||||
"水厂": {
|
"水厂": {
|
||||||
"width": 32,
|
"width": 32,
|
||||||
"height": 32,
|
"height": 32,
|
||||||
"x": -3,
|
"x": 0,
|
||||||
"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
|
||||||
|
|
@ -414,13 +406,5 @@
|
||||||
"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: 47 KiB After Width: | Height: | Size: 46 KiB |
|
|
@ -413,11 +413,7 @@ 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;
|
||||||
|
|
@ -453,21 +449,6 @@ 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: '16rem'} },
|
{ key: '进水监测',style: { height: '13rem'} },
|
||||||
{ key: '报警分析',style: { height: '28rem'} },
|
{ key: '出水监测',style: { height: '16rem'} },
|
||||||
];
|
];
|
||||||
} else if (view === 303) {
|
} else if (view === 303) {
|
||||||
left = [
|
left = [
|
||||||
|
|
@ -154,8 +154,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
}
|
}
|
||||||
else if (view === 307) {
|
else if (view === 307) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '应急事件', style: { height: '20rem'} },
|
{ key: '预案库管理', style: { height: '50rem' } },
|
||||||
{ key: '应急指挥调度', style: { height: '30rem'} },
|
|
||||||
];
|
];
|
||||||
// leftFullHeight = true;
|
// leftFullHeight = true;
|
||||||
}else if (view === 501) {
|
}else if (view === 501) {
|
||||||
|
|
@ -338,10 +337,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
} else if (view === 302) {
|
} else if (view === 302) {
|
||||||
right = [
|
right = [
|
||||||
// { key: '警报' },
|
// { key: '警报' },
|
||||||
{ key: '预警列表',style: { height: '20rem'} },
|
{ key: '水厂水质监测',style: { height: '16rem'} },
|
||||||
// { key: '进水监测',style: { height: '13rem'} },
|
{ key: '报警分析',style: { height: '18rem'} },
|
||||||
// { key: '出水监测',style: { height: '16rem'} },
|
|
||||||
|
|
||||||
];
|
];
|
||||||
} else if (view === 303) {
|
} else if (view === 303) {
|
||||||
right = [
|
right = [
|
||||||
|
|
@ -367,7 +364,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
rightFullHeight = true;
|
rightFullHeight = true;
|
||||||
}else if(view === 307) {
|
}else if(view === 307) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '预案库管理', style: { height: '47rem' } },
|
{ key: '应急指挥调度', style: { height: '40rem'} },
|
||||||
];
|
];
|
||||||
// rightFullHeight = true;
|
// rightFullHeight = true;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ 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 }) {
|
||||||
|
|
@ -35,7 +34,6 @@ 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>
|
||||||
|
|
@ -44,8 +42,6 @@ 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>
|
||||||
|
|
|
||||||
|
|
@ -1,280 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
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);
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,291 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
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);
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,122 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
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,7 +15,6 @@ 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 }) {
|
||||||
|
|
@ -40,7 +39,6 @@ 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>
|
||||||
|
|
@ -51,7 +49,6 @@ 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,8 +41,6 @@ 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() {
|
||||||
|
|
@ -138,10 +136,6 @@ 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,9 +32,7 @@ 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"
|
||||||
|
|
@ -66,9 +64,7 @@ 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());
|
||||||
|
|
@ -215,9 +211,7 @@ 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,99 +45,21 @@ const ShapeStyle = {
|
||||||
|
|
||||||
const page1 = [
|
const page1 = [
|
||||||
{
|
{
|
||||||
"stcd": "61612610",
|
"stcd": "716113001",
|
||||||
"type": "sk",
|
"type": "sk",
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"stnm": "三河口水厂",
|
"stnm": "监测点9",
|
||||||
"adcd": "421181109000",
|
"adcd": "421181113000",
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 115.166667,
|
"lgtd": 114.805278,
|
||||||
"lttd": 31.333333,
|
"lttd": 31.206667,
|
||||||
"elev": 0,
|
"elev": 0,
|
||||||
"damel": 156.8,
|
"damel": 104.27,
|
||||||
"dsflz": 154.99,
|
"dsflz": 102.9,
|
||||||
"fsltdz": 149,
|
"fsltdz": 102.36,
|
||||||
"ddz": 124,
|
"ddz": 90.86,
|
||||||
"zcxsw": 149,
|
"zcxsw": 102.36,
|
||||||
"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": "刘集水厂",
|
|
||||||
"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,
|
|
||||||
"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",
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||||
"today": 0,
|
"today": 0,
|
||||||
"h1": 0,
|
"h1": 0,
|
||||||
|
|
@ -147,14 +69,29 @@ const page1 = [
|
||||||
"h24": 0,
|
"h24": 0,
|
||||||
"h48": 0,
|
"h48": 0,
|
||||||
"drpState": 2,
|
"drpState": 2,
|
||||||
"rz": 224.31,
|
"rz": 8.19,
|
||||||
"w": 0,
|
"w": 0,
|
||||||
"a_fsltdz": -6.689999999999998,
|
"a_fsltdz": -94.17,
|
||||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||||
"rzWarning": 0,
|
"rzWarning": 0,
|
||||||
"rzState": 2,
|
"rzState": 2,
|
||||||
"aRz": -6.69
|
"pic": [
|
||||||
|
{
|
||||||
|
"stcd": "716113001",
|
||||||
|
"tm": "2023-03-12T07:01:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113001/20230312150100.jpg"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"stcd": "716113001",
|
||||||
|
"tm": "2023-03-12T07:08:00.000Z",
|
||||||
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113002/20230312150800.jpg"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"aRz": -94.17
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
"stcd": "716123001",
|
"stcd": "716123001",
|
||||||
"type": "sk",
|
"type": "sk",
|
||||||
|
|
@ -200,6 +137,329 @@ 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 {
|
||||||
|
|
@ -227,14 +487,7 @@ export default class ShuichangLayer extends BaseLayer {
|
||||||
async doRefreshLayer(mapCtrl) {
|
async doRefreshLayer(mapCtrl) {
|
||||||
const ms = mapCtrl.getSource(SourceName);
|
const ms = mapCtrl.getSource(SourceName);
|
||||||
|
|
||||||
let data =
|
let data = page1
|
||||||
// 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;
|
||||||
}
|
}
|
||||||
|
|
@ -244,12 +497,11 @@ 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 })
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
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 })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -45,128 +45,160 @@ const ShapeStyle = {
|
||||||
|
|
||||||
const page1 = [
|
const page1 = [
|
||||||
{
|
{
|
||||||
"stcd": "716115301",
|
"addvcd": "420800000000000",
|
||||||
"type": "sk",
|
"moditime": "2022-05-01 21:00:00",
|
||||||
"hasRz": true,
|
"comments": "漳河遥测",
|
||||||
"stnm": "葡萄冲水库",
|
"src": "zhzj",
|
||||||
"adcd": "421181110000",
|
"esstym": "",
|
||||||
"wscd": null,
|
"mvalue": {
|
||||||
"importancy": 0,
|
"slmmmt": null,
|
||||||
"lgtd": 115.051389,
|
"slm60": 0,
|
||||||
"lttd": 31.423333,
|
"exkey": "@",
|
||||||
"elev": 0,
|
"slm80": 0,
|
||||||
"damel": 15.8,
|
"hitrsn": null,
|
||||||
"dsflz": 14.73,
|
"crpty": null,
|
||||||
"fsltdz": 14.3,
|
"crpgrwprd": null,
|
||||||
"ddz": 9.48,
|
"srlslm": null,
|
||||||
"zcxsw": 14.3,
|
"stcd": "ZH201417",
|
||||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
"slm10": 24,
|
||||||
"today": 0,
|
"slm20": 5.3,
|
||||||
"h1": 0,
|
"slm30": 44.3,
|
||||||
"h3": 0,
|
"slm40": 44.3,
|
||||||
"h6": 0,
|
"tm": "2024-08-03 05:00",
|
||||||
"h12": 0,
|
"slm100": 0,
|
||||||
"h24": 0,
|
"vtavslm": null,
|
||||||
"h48": 0,
|
"slmAvg": 24.5
|
||||||
"drpState": 2,
|
},
|
||||||
"rz": 213.75,
|
"lttd": 30.8456,
|
||||||
"w": 0.04,
|
"sttp": "SS",
|
||||||
"a_fsltdz": 199.45,
|
"irrCode": "D00000010",
|
||||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
"sort": 9999,
|
||||||
"rzWarning": 1,
|
"hasImg": false,
|
||||||
"rzState": 2,
|
"stlc": "荆门市",
|
||||||
"pic": [
|
"dtmel": 0,
|
||||||
{
|
"stcd": "ZH201417",
|
||||||
"stcd": "716115301",
|
"stnm": "马山二组（墒情）",
|
||||||
"tm": "2023-03-12T08:02:00.000Z",
|
"addvcd_dictText": "荆门市",
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115301/20230312160200.jpg"
|
"lgtd": 112.2321,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"stcd": "716115301",
|
"addvcd": "420800000000000",
|
||||||
"tm": "2023-03-12T07:11:00.000Z",
|
"moditime": "2022-05-01 21:00:00",
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115302/20230312151100.jpg"
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"slm10": 12.1,
|
||||||
|
"slm20": 16.2,
|
||||||
|
"slm30": 12.8,
|
||||||
|
"slm40": 12.8,
|
||||||
|
"tm": "2024-08-15 08:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 13.7
|
||||||
|
},
|
||||||
|
"lttd": 30.8446,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"stnm": "槐桥四组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.203,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"slm10": 16.5,
|
||||||
|
"slm20": 12.5,
|
||||||
|
"slm30": 0,
|
||||||
|
"slm40": 0,
|
||||||
|
"tm": "2024-09-19 11:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 14.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8866,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"stnm": "双碑一组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2006,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "水资源多孔闸门控制系统",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"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": "漳河流域"
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"aRz": 199.45
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"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
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"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 ShuiyuandiLayer extends BaseLayer {
|
export default class ShuiyuandiLayer extends BaseLayer {
|
||||||
|
|
||||||
|
|
@ -197,8 +229,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
|
obj.lgtd = item.lgtd + 2.9619
|
||||||
obj.lttd = item.lttd
|
obj.lttd = item.lttd + 0.2002
|
||||||
return obj
|
return obj
|
||||||
})
|
})
|
||||||
ms.setData(parseGeoJSON(data));
|
ms.setData(parseGeoJSON(data));
|
||||||
|
|
@ -216,7 +248,5 @@ 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 })
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,143 +0,0 @@
|
||||||
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,9 +23,7 @@ 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"
|
||||||
|
|
@ -219,18 +217,10 @@ 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,8 +128,6 @@ 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'
|
||||||
|
|
@ -275,8 +273,6 @@ 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 === '对比分析') {
|
||||||
|
|
@ -335,8 +331,6 @@ 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 === "降雨分析") {
|
||||||
|
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
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
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
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
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
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
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
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: '88%',
|
top: '85%',
|
||||||
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,137 +1,171 @@
|
||||||
import React from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import ReactECharts from 'echarts-for-react';
|
import echarts from 'echarts/lib/echarts';
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import ReactEcharts from 'echarts-for-react';
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
|
||||||
chartContainer: {
|
|
||||||
width: '100%',
|
|
||||||
height: '400px',
|
|
||||||
// backgroundColor: '#0d1117',
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const WaterSourceChart = () => {
|
const pallete = [
|
||||||
const classes = useStyles();
|
['#177ab3', '#51c3e7'],
|
||||||
const option = {
|
['#9976dc', '#c792ee'],
|
||||||
// backgroundColor: '#0d1117',
|
['#94a1eb', '#a7caf8'],
|
||||||
|
['#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: {
|
||||||
formatter: function (params) {
|
show: false
|
||||||
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: {
|
valueFormatter: (value) => value + ' 万m³'
|
||||||
data: ['浮桥河水厂', '三河口水厂', '刘集水厂', '杉林河水厂', ],
|
|
||||||
textStyle: {
|
|
||||||
color: '#c9d1d9'
|
|
||||||
},
|
|
||||||
top: 10
|
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
top: 42,
|
||||||
right: '4%',
|
left: 50,
|
||||||
bottom: '3%',
|
right: 0,
|
||||||
top: '15%',
|
bottom: 27,
|
||||||
containLabel: true
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
legend: {
|
||||||
|
data: ['设计产能', '实际产水'],
|
||||||
|
top: '8',
|
||||||
|
left: 'center',
|
||||||
|
itemWidth: 11,//11,
|
||||||
|
itemHeight: 11,//11,
|
||||||
|
textStyle: {
|
||||||
|
color: '#B9BFC9',
|
||||||
|
fontSize: 12,//12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06'],
|
data: x,
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
rotate: 45
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#c9d1d9'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '预警数量',
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#c9d1d9'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
|
show: true, //隐藏X轴轴线
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#30363d',
|
color: 'rgba(255,255,255,0.2)',
|
||||||
type: 'dashed'
|
width: 0
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#B9BFC9' //X轴文字颜色
|
||||||
|
},
|
||||||
|
// rotate: 20, // 角度值：Number
|
||||||
|
fontSize: 10,//10
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true, //隐藏X轴轴线
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.2)',
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
position: 'left',
|
||||||
|
name: '产水量m³',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#B9BFC9',
|
||||||
|
fontSize: 10,//10,
|
||||||
|
padding: [0, 0, 0, -30],//[0, 0, 0, -30]//控制y轴标题位置
|
||||||
|
},
|
||||||
|
nameGap: 17,
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: 'rgba(255,255,255,0.2)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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: 30,
|
barWidth: 10,
|
||||||
stack: 'total',
|
data: y1,
|
||||||
|
itemStyle: {
|
||||||
data: [45, 52, 65, 70, 75, 79]
|
normal: {
|
||||||
|
color: '#56b38b'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// position: 'top',
|
||||||
|
// color: '#bbb',
|
||||||
|
// fontSize: 12,
|
||||||
|
// textShadowBlur: 4,
|
||||||
|
// textShadowColor: '#6ab',
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '三河口水厂',
|
name: '实际产水',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 30,
|
barWidth: 10,
|
||||||
stack: 'total',
|
data: y2,
|
||||||
|
itemStyle: {
|
||||||
data: [15, 18, 20, 22, 23, 24]
|
normal: {
|
||||||
|
color: '#3860d0'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: '刘集水厂',
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 30,
|
|
||||||
stack: 'total',
|
|
||||||
|
|
||||||
data: [10, 12, 14, 16, 17, 19]
|
|
||||||
},
|
},
|
||||||
{
|
// label: {
|
||||||
name: '杉林河水厂',
|
// show: true,
|
||||||
type: 'bar',
|
// position: 'top',
|
||||||
barWidth: 30,
|
// color: '#bbb',
|
||||||
stack: 'total',
|
// fontSize: 12,
|
||||||
|
// textShadowBlur: 4,
|
||||||
data: [8, 10, 12, 14, 15, 17]
|
// textShadowColor: '#6ab',
|
||||||
},
|
// },
|
||||||
],
|
}
|
||||||
color: ['#fac858', '#ee6666', '#73c0de', '#3ba272']
|
]
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.chartContainer}>
|
<ReactEcharts
|
||||||
<ReactECharts
|
|
||||||
option={option}
|
option={option}
|
||||||
style={{ height: '100%' }}
|
style={{ height: '99%', width: '100%' }}
|
||||||
opts={{ renderer: 'canvas' }}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
)
|
||||||
);
|
}
|
||||||
};
|
|
||||||
|
|
||||||
export default WaterSourceChart;
|
export default React.memo(AreaDrpChart);
|
||||||
|
|
|
||||||
|
|
@ -1,140 +0,0 @@
|
||||||
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,34 +2,23 @@ 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 }) {
|
|
||||||
const [type, setType] = useState('sc')
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const toggleStType = (type) => {
|
|
||||||
setType(type)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
function DrpReal({ style }) {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="预警统计"
|
title="报警分析"
|
||||||
color="green"
|
color="green"
|
||||||
tabs={
|
extra={
|
||||||
<>
|
<>
|
||||||
{/* <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>
|
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
>{
|
>
|
||||||
type == 'sc' ?<AreaDrpChart />:<ShuiyuandiChart />
|
<img src='/assets/报警分析.jpg' style={{width:'26.5rem', height:'13.5rem',marginLeft:'0rem',marginTop:'1rem'}}/>
|
||||||
}
|
|
||||||
|
|
||||||
{/* <img src='/assets/报警分析.jpg' style={{width:'26.5rem', height:'13.5rem',marginLeft:'0rem',marginTop:'1rem'}}/> */}
|
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,416 +1,21 @@
|
||||||
import React, { useMemo, useState,useEffect } from 'react';
|
import React, { useMemo, useState } 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"
|
||||||
tabs={
|
extra={
|
||||||
// <>
|
<>
|
||||||
// <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>
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<img src='/assets/水厂水质监测.jpg' style={{width:'26.5rem', height:'12rem',marginLeft:'0rem',marginTop:'1rem'}}/>
|
||||||
<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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,453 +0,0 @@
|
||||||
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
|
|
@ -1,67 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,179 +0,0 @@
|
||||||
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