Compare commits
3 Commits
8ed184216c
...
bf30757e24
| Author | SHA1 | Date |
|---|---|---|
 秦子超
|
bf30757e24 | |
 李神峰
|
12d1fe5f04 | |
|
李神峰
|
9e0bb97345 |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -394,7 +394,15 @@
|
|||
"水厂": {
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"x": 0,
|
||||
"x": -3,
|
||||
"y": 315,
|
||||
"pixelRatio": 0.6,
|
||||
"visible": true
|
||||
},
|
||||
"水厂q": {
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"x": 28,
|
||||
"y": 315,
|
||||
"pixelRatio": 0.6,
|
||||
"visible": true
|
||||
|
|
@ -406,5 +414,13 @@
|
|||
"y": 0,
|
||||
"pixelRatio": 0.6,
|
||||
"visible": true
|
||||
} ,
|
||||
"水源地q": {
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"x": 59,
|
||||
"y": 315,
|
||||
"pixelRatio": 0.6,
|
||||
"visible": true
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 47 KiB |
|
|
@ -413,7 +413,11 @@ const map = {
|
|||
RoadLayer: true,
|
||||
RivlLayer: true,
|
||||
ShuichangLayer:true,
|
||||
ShuichangQLayer: true,
|
||||
ShuiyuandiQLayer:true,
|
||||
ShuizhiLayer:true,
|
||||
ShuiyuandiLayer: true,
|
||||
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
|
|
@ -449,6 +453,21 @@ const map = {
|
|||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
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) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: true,
|
||||
|
|
|
|||
|
|
@ -125,8 +125,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
} else if (view === 302) {
|
||||
left = [
|
||||
{ key: '天气' },
|
||||
{ key: '进水监测',style: { height: '13rem'} },
|
||||
{ key: '出水监测',style: { height: '16rem'} },
|
||||
{ key: '水厂水质监测',style: { height: '16rem'} },
|
||||
{ key: '报警分析',style: { height: '28rem'} },
|
||||
];
|
||||
} else if (view === 303) {
|
||||
left = [
|
||||
|
|
@ -154,7 +154,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
}
|
||||
else if (view === 307) {
|
||||
left = [
|
||||
{ key: '预案库管理', style: { height: '50rem' } },
|
||||
{ key: '应急事件', style: { height: '20rem'} },
|
||||
{ key: '应急指挥调度', style: { height: '30rem'} },
|
||||
];
|
||||
// leftFullHeight = true;
|
||||
}else if (view === 501) {
|
||||
|
|
@ -337,8 +338,10 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
} else if (view === 302) {
|
||||
right = [
|
||||
// { key: '警报' },
|
||||
{ key: '水厂水质监测',style: { height: '16rem'} },
|
||||
{ key: '报警分析',style: { height: '18rem'} },
|
||||
{ key: '预警列表',style: { height: '20rem'} },
|
||||
// { key: '进水监测',style: { height: '13rem'} },
|
||||
// { key: '出水监测',style: { height: '16rem'} },
|
||||
|
||||
];
|
||||
} else if (view === 303) {
|
||||
right = [
|
||||
|
|
@ -364,7 +367,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
rightFullHeight = true;
|
||||
}else if(view === 307) {
|
||||
right = [
|
||||
{ key: '应急指挥调度', style: { height: '40rem'} },
|
||||
{ key: '预案库管理', style: { height: '47rem' } },
|
||||
];
|
||||
// rightFullHeight = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
|||
import DrpSearch from '../../components/DrpSearch';
|
||||
import DrpStAround from '../../components/DrpStAround';
|
||||
import ZrrPlan from './zrrPlan'
|
||||
import Sjjg from '../../components/Sksjjg';
|
||||
|
||||
|
||||
function HDStDlg({ record, onClose }) {
|
||||
|
|
@ -34,6 +35,7 @@ function HDStDlg({ record, onClose }) {
|
|||
<DpTab label="雨量查询" />
|
||||
<DpTab label="周边雨量站" />
|
||||
<DpTab label="责任人" />
|
||||
{record.events && <DpTab label="事件经过" />}
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
|
|
@ -42,6 +44,8 @@ function HDStDlg({ record, onClose }) {
|
|||
{value === 1 && <DrpSearch record={record} />}
|
||||
{value === 2 && <DrpStAround record={record} />}
|
||||
{value === 3 && <ZrrPlan />}
|
||||
{value === 4 && <Sjjg record={record} />}
|
||||
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,280 @@
|
|||
import { Grid, withStyles, TableCell } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
// import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const useStyles = makeStyles({
|
||||
tableContainer: {
|
||||
background: '#182d42', // 设置表格容器的背景颜色
|
||||
},
|
||||
item: {
|
||||
'& .MuiGrid-item': {
|
||||
'& [class*="makeStyles-title"]': {
|
||||
color: '#fff',
|
||||
backgroundColor: '#104175',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
const DpTableCell = withStyles({
|
||||
head: {
|
||||
backgroundColor: '#104175',
|
||||
color: '#fff',
|
||||
fontSize: '1rem',
|
||||
padding: '0.5rem 0.3rem !important',
|
||||
},
|
||||
body: {
|
||||
color: '#fff',
|
||||
fontSize: '0.9rem',
|
||||
padding: '0.7rem 0.3rem !important',
|
||||
borderBottom: 'none',
|
||||
position: "relative"
|
||||
},
|
||||
})(TableCell);
|
||||
function SkInfo() {
|
||||
const classes = useStyles();
|
||||
const data = [
|
||||
{ time: '06-08 12:00', turbidity: 0.3, chlorine: 0.5, ph: 7.2 },
|
||||
{ time: '06-08 11:00', turbidity: 0.2, chlorine: 0.4, ph: 7.1 },
|
||||
{ time: '06-08 10:00', turbidity: 0.4, chlorine: 0.6, ph: 7.3 },
|
||||
{ time: '06-08 09:00', turbidity: 0.3, chlorine: 0.5, ph: 7.2 },
|
||||
{ time: '06-08 08:00', turbidity: 0.2, chlorine: 0.4, ph: 7.0 },
|
||||
{ time: '06-08 07:00', turbidity: 0.4, chlorine: 0.5, ph: 7.4 },
|
||||
{ time: '06-08 06:00', turbidity: 0.3, chlorine: 0.6, ph: 7.2 },
|
||||
{ time: '06-08 05:00', turbidity: 0.2, chlorine: 0.5, ph: 7.1 },
|
||||
{ time: '06-08 04:00', turbidity: 0.3, chlorine: 0.4, ph: 7.3 },
|
||||
{ time: '06-08 03:00', turbidity: 0.4, chlorine: 0.5, ph: 7.2 },
|
||||
{ time: '06-08 02:00', turbidity: 0.3, chlorine: 0.6, ph: 7.1 },
|
||||
{ time: '06-08 01:00', turbidity: 0.2, chlorine: 0.5, ph: 7.3 },
|
||||
{ time: '06-08 00:00', turbidity: 0.3, chlorine: 0.4, ph: 7.2 },
|
||||
{ time: '06-07 23:00', turbidity: 0.4, chlorine: 0.5, ph: 7.1 },
|
||||
{ time: '06-07 22:00', turbidity: 0.3, chlorine: 0.6, ph: 7.3 },
|
||||
{ time: '06-07 21:00', turbidity: 0.2, chlorine: 0.5, ph: 7.2 },
|
||||
{ time: '06-07 20:00', turbidity: 0.3, chlorine: 0.4, ph: 7.1 },
|
||||
{ time: '06-07 19:00', turbidity: 0.4, chlorine: 0.5, ph: 7.3 },
|
||||
{ time: '06-07 18:00', turbidity: 0.3, chlorine: 0.6, ph: 7.2 },
|
||||
{ time: '06-07 17:00', turbidity: 0.2, chlorine: 0.5, ph: 7.1 },
|
||||
{ time: '06-07 16:00', turbidity: 0.3, chlorine: 0.4, ph: 7.3 },
|
||||
{ time: '06-07 15:00', turbidity: 0.4, chlorine: 0.5, ph: 7.2 },
|
||||
{ time: '06-07 14:00', turbidity: 0.3, chlorine: 0.6, ph: 7.1 },
|
||||
{ time: '06-07 13:00', turbidity: 0.2, chlorine: 0.5, ph: 7.3 },
|
||||
{ time: '06-07 12:00', turbidity: 0.3, chlorine: 0.4, ph: 7.2 }
|
||||
];
|
||||
const option = {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['PH值', '浊度(NTU)', '余氯(mg/L)'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.map(item => item.time),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
rotate: 45,
|
||||
interval: 1,
|
||||
fontSize: 14
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: 'PH值',
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
offset: 0,
|
||||
nameTextStyle: {
|
||||
color: '#fac858'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fac858'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fac858'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '浊度(NTU)',
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
offset: 60,
|
||||
nameTextStyle: {
|
||||
color: '#ee6666'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ee6666'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ee6666'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '余氯(mg/L)',
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
offset: 0,
|
||||
nameTextStyle: {
|
||||
color: '#73c0de'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#73c0de'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#73c0de'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'PH值',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
data: data.map(item => item.ph),
|
||||
itemStyle: {
|
||||
color: '#fac858'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '浊度(NTU)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
yAxisIndex: 1,
|
||||
data: data.map(item => item.turbidity),
|
||||
itemStyle: {
|
||||
color: '#ee6666'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '余氯(mg/L)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
yAxisIndex: 2,
|
||||
data: data.map(item => item.chlorine),
|
||||
itemStyle: {
|
||||
color: '#73c0de'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ width: 600 }}>
|
||||
<div className='toolbar' style={{ marginBottom: '10px' }}>
|
||||
<div className='tm' style={{ position: "relative", zIndex: 999999, width: '60%' }}>
|
||||
<RangePicker
|
||||
width="50%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
allowClear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={[moment('2025-06-07 12:00:00'), moment('2025-06-07 12:00:00')]}
|
||||
/>
|
||||
</div>
|
||||
<button className='search'>查询</button>
|
||||
</div>
|
||||
<TableContainer style={{ height: '49vh' }} className={classes.tableContainer}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow style={{ padding: '30px 0' }}>
|
||||
<DpTableCell align="center">时间</DpTableCell>
|
||||
<DpTableCell align="center">浊度(NTU)</DpTableCell>
|
||||
<DpTableCell align="center">余氯(gml/L)</DpTableCell>
|
||||
<DpTableCell align="center">PH值</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell align="center">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => { }}>{row.time}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.turbidity}</DpTableCell>
|
||||
<DpTableCell align="center">{row.chlorine}</DpTableCell>
|
||||
<DpTableCell align="center">{row.ph}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<div style={{ height: '500px', width: '100%', flex: 1 }}>
|
||||
<ReactECharts
|
||||
option={option}
|
||||
style={{ height: '100%' }}
|
||||
opts={{ renderer: 'canvas' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import React from 'react';
|
||||
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
|
||||
import { AppBar, Tab, Tabs } from '@material-ui/core';
|
||||
import DrpSearch from '../../components/DrpSearch';
|
||||
import DpTabs from '../../../../layouts/mui/DpTabs';
|
||||
import DpTab from '../../../../layouts/mui/DpTab';
|
||||
import RzSearch from '../../components/RzSearch';
|
||||
import SkImgSearch from '../../components/SkImgSearch';
|
||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||
import ShuichangInfo from '../../components/ShuichangInfo';
|
||||
import SkPlan from '../../components/SkInfo/SkPlan';
|
||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||
import ZrrPlan from './zrrPlan'
|
||||
import Shuizhijc from './Shuizhijc'
|
||||
import Jianceflow from './jianceflow'
|
||||
import Spjk from './spjk'
|
||||
import './index.less'
|
||||
function SkDlg({ record, onClose }) {
|
||||
const [value, setValue] = React.useState(0);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
maxWidth="xl"
|
||||
style={{ borderRadius: 0 }}
|
||||
PaperComponent={DpPaperComponent}
|
||||
BackdropComponent={DpBackgroundDrop}
|
||||
>
|
||||
<div className="boxhead"></div>
|
||||
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
|
||||
<DpAppBar position="sticky">
|
||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||
<DpTab label="基础信息" />
|
||||
<DpTab label="水质监测" />
|
||||
<DpTab label="供水流量" />
|
||||
<DpTab label="视频监控" />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
<div style={{ padding: '2rem', height: '50rem' }}>
|
||||
{value === 0 && <ShuichangInfo record={record} />}
|
||||
{value === 1 && <Shuizhijc record={record} />}
|
||||
{value === 2 && <Jianceflow record={record} />}
|
||||
{value === 3 && <Spjk record={record} />}
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(SkDlg);
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
|
||||
|
||||
.toolbar{
|
||||
display: flex;
|
||||
.tm{
|
||||
width: 40%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
background: linear-gradient(270deg,rgba(65,76,217,.4),rgba(58,85,218,.2) 14%,rgba(54,90,218,0) 49%,rgba(51,94,218,.2) 86%,rgba(44,102,219,.4));
|
||||
border: 1px solid #0e4e93;
|
||||
|
||||
.MuiInput-underline:before{
|
||||
border: 0px;
|
||||
}
|
||||
.time-picker{
|
||||
.ant-picker-input > input{
|
||||
color: #fff;
|
||||
}
|
||||
.ant-picker-separator{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.time-type {
|
||||
margin-left: 10rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
background-color: #393e45;
|
||||
border-radius: 5%;
|
||||
padding: 0.01% !important;
|
||||
border: 1px solid #585e64;
|
||||
div {
|
||||
width: 80px;
|
||||
border-radius: 5%;
|
||||
text-align: center;
|
||||
border: 1px solid #585e64;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #5FB7FF;
|
||||
// background: #F0F7FF;
|
||||
border: 1px solid #5FB7FF;
|
||||
}
|
||||
}
|
||||
.search{
|
||||
margin-left: 1.5rem;
|
||||
border: 1px solid #0e4e93;
|
||||
|
||||
background: url(../../../../assets/btn44.png) no-repeat 100% center;
|
||||
color: #fff;
|
||||
padding: 0 1rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.echartBox{
|
||||
width: 60%;
|
||||
.echart1{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
flex: 1;
|
||||
margin-top: 15px;
|
||||
.split-line{
|
||||
width: 100%;
|
||||
border: 1px dashed rgba(16, 102, 141);
|
||||
opacity: .36;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.MuiGrid-container{
|
||||
background-color: #182d42 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ant-picker-panel-container{
|
||||
background-color: rgba(36, 46, 92,1) !important;
|
||||
|
||||
}
|
||||
.ant-picker-header,.ant-picker-body{
|
||||
color: #fff !important;
|
||||
border-color: #242e5c;
|
||||
}
|
||||
.ant-picker-content th{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-picker-cell,
|
||||
.ant-picker-header-super-prev-btn,
|
||||
.ant-picker-header-prev-btn,
|
||||
.ant-picker-header-next-btn,
|
||||
.ant-picker-header-super-next-btn
|
||||
{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
|
||||
// background: transparent !important;
|
||||
color: #000;
|
||||
}
|
||||
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
|
||||
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
|
||||
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
|
||||
{
|
||||
background-color:transparent !important;
|
||||
}
|
||||
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
|
||||
background-color: #1890ff !important;
|
||||
}
|
||||
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
|
||||
// background-color:transparent !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
|
||||
{
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import { Grid, withStyles, TableCell, Box,
|
||||
Button,
|
||||
ButtonGroup, } from '@material-ui/core';
|
||||
import React,{useState} from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
// import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const useStyles = makeStyles((theme)=>({
|
||||
tableContainer: {
|
||||
background: '#182d42', // 设置表格容器的背景颜色
|
||||
},
|
||||
item: {
|
||||
'& .MuiGrid-item': {
|
||||
'& [class*="makeStyles-title"]': {
|
||||
color: '#fff',
|
||||
backgroundColor: '#104175',
|
||||
},
|
||||
},
|
||||
},
|
||||
searchRow: {
|
||||
display: 'flex',
|
||||
gap: theme.spacing(2),
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom:10
|
||||
},
|
||||
buttonGroup: {
|
||||
'& .MuiButton-root': {
|
||||
color: '#fff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
'&.active': {
|
||||
backgroundColor: '#2196f3',
|
||||
borderColor: '#2196f3'
|
||||
}
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
function SkInfo() {
|
||||
const classes = useStyles();
|
||||
const [activeType, setActiveType] = useState('daily');
|
||||
const [visible, setVisible] = useState(false)
|
||||
const handleTypeChange = (type) => {
|
||||
setActiveType(type);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Box className={classes.searchRow}>
|
||||
<ButtonGroup className={classes.buttonGroup}>
|
||||
<Button
|
||||
className={activeType === 'daily' ? 'active' : ''}
|
||||
onClick={() => handleTypeChange('daily')}
|
||||
>
|
||||
瞬时流量趋势
|
||||
</Button>
|
||||
<Button
|
||||
className={activeType === 'flood' ? 'active' : ''}
|
||||
onClick={() => handleTypeChange('flood')}
|
||||
>
|
||||
小时累积趋势
|
||||
</Button>
|
||||
|
||||
</ButtonGroup>
|
||||
</Box>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/ssflow.png`} alt="" style={{width:'96%'}}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import { Grid, withStyles, TableCell, Box,
|
||||
Button,
|
||||
ButtonGroup, } from '@material-ui/core';
|
||||
import React,{useState} from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
// import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const useStyles = makeStyles((theme)=>({
|
||||
tableContainer: {
|
||||
background: '#182d42', // 设置表格容器的背景颜色
|
||||
},
|
||||
item: {
|
||||
'& .MuiGrid-item': {
|
||||
'& [class*="makeStyles-title"]': {
|
||||
color: '#fff',
|
||||
backgroundColor: '#104175',
|
||||
},
|
||||
},
|
||||
},
|
||||
searchRow: {
|
||||
display: 'flex',
|
||||
gap: theme.spacing(2),
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom:10
|
||||
},
|
||||
buttonGroup: {
|
||||
'& .MuiButton-root': {
|
||||
color: '#fff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
'&.active': {
|
||||
backgroundColor: '#2196f3',
|
||||
borderColor: '#2196f3'
|
||||
}
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
function SkInfo() {
|
||||
const classes = useStyles();
|
||||
const [activeType, setActiveType] = useState('daily');
|
||||
const [visible, setVisible] = useState(false)
|
||||
const handleTypeChange = (type) => {
|
||||
setActiveType(type);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Box className={classes.searchRow}>
|
||||
<ButtonGroup className={classes.buttonGroup}>
|
||||
<Button
|
||||
className={activeType === 'daily' ? 'active' : ''}
|
||||
onClick={() => handleTypeChange('daily')}
|
||||
>
|
||||
视频1
|
||||
</Button>
|
||||
<Button
|
||||
className={activeType === 'flood' ? 'active' : ''}
|
||||
onClick={() => handleTypeChange('flood')}
|
||||
>
|
||||
视频2
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Box>
|
||||
{
|
||||
activeType == 'daily' ? <img src={`${process.env.PUBLIC_URL}/assets/sp1.png`} alt="" style={{ width: '96%', height: 600 }} /> :
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/sp2.png`} alt="" style={{width:'96%',height:600}}/>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { Grid } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
|
||||
|
||||
function SkInfo() {
|
||||
|
||||
const data = [
|
||||
{ name:'行政责任人', dm:'郑家豪', hfsw:'龟山镇人民政府', hfll:'组织委员', tm:'05-29 14:00' },
|
||||
{ name:'巡查责任人', dm:'熊中良', hfsw:'花桥河村', hfll:'书记', tm:'05-29 14:30' },
|
||||
{ name:'技术责任人', dm:'余健', hfsw:'农业农村服务中心', hfll:'副主任', tm:'05-29 15:00' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow style={{padding:'30px 0'}}>
|
||||
<DpTableCell style={{ maxWidth: '30%',padding:'15px' }} align="left">责任人</DpTableCell>
|
||||
<DpTableCell align="center">姓名</DpTableCell>
|
||||
<DpTableCell align="center">单位</DpTableCell>
|
||||
<DpTableCell align="center">职务</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.dm}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfsw}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfll}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -0,0 +1,291 @@
|
|||
import { Grid, withStyles, TableCell } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
// import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const useStyles = makeStyles({
|
||||
tableContainer: {
|
||||
background: '#182d42', // 设置表格容器的背景颜色
|
||||
},
|
||||
item: {
|
||||
'& .MuiGrid-item': {
|
||||
'& [class*="makeStyles-title"]': {
|
||||
color: '#fff',
|
||||
backgroundColor: '#104175',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
const DpTableCell = withStyles({
|
||||
head: {
|
||||
backgroundColor: '#104175',
|
||||
color: '#fff',
|
||||
fontSize: '1rem',
|
||||
padding: '0.5rem 0.3rem !important',
|
||||
},
|
||||
body: {
|
||||
color: '#fff',
|
||||
fontSize: '0.9rem',
|
||||
padding: '0.7rem 0.3rem !important',
|
||||
borderBottom: 'none',
|
||||
position: "relative"
|
||||
},
|
||||
})(TableCell);
|
||||
function SkInfo() {
|
||||
const classes = useStyles();
|
||||
const data = [
|
||||
{ time: '06-07 12:00', turbidity: 28.5, ammoniaNitrogen: 0.085, ph: 7.2, totalPhosphorus: 0.075 },
|
||||
{ time: '06-07 14:00', turbidity: 29.8, ammoniaNitrogen: 0.092, ph: 7.4, totalPhosphorus: 0.082 },
|
||||
{ time: '06-07 16:00', turbidity: 30.2, ammoniaNitrogen: 0.088, ph: 7.1, totalPhosphorus: 0.078 },
|
||||
{ time: '06-07 18:00', turbidity: 31.5, ammoniaNitrogen: 0.095, ph: 6.9, totalPhosphorus: 0.085 },
|
||||
{ time: '06-07 20:00', turbidity: 30.8, ammoniaNitrogen: 0.089, ph: 7.3, totalPhosphorus: 0.079 },
|
||||
{ time: '06-07 22:00', turbidity: 29.5, ammoniaNitrogen: 0.087, ph: 7.5, totalPhosphorus: 0.073 },
|
||||
{ time: '06-08 00:00', turbidity: 28.9, ammoniaNitrogen: 0.083, ph: 7.2, totalPhosphorus: 0.071 },
|
||||
{ time: '06-08 02:00', turbidity: 27.8, ammoniaNitrogen: 0.078, ph: 7.0, totalPhosphorus: 0.068 },
|
||||
{ time: '06-08 04:00', turbidity: 28.2, ammoniaNitrogen: 0.082, ph: 7.1, totalPhosphorus: 0.072 },
|
||||
{ time: '06-08 06:00', turbidity: 29.1, ammoniaNitrogen: 0.086, ph: 7.3, totalPhosphorus: 0.076 },
|
||||
{ time: '06-08 08:00', turbidity: 30.5, ammoniaNitrogen: 0.091, ph: 7.4, totalPhosphorus: 0.081 },
|
||||
{ time: '06-08 10:00', turbidity: 31.2, ammoniaNitrogen: 0.093, ph: 7.2, totalPhosphorus: 0.083 },
|
||||
{ time: '06-08 12:00', turbidity: 30.1, ammoniaNitrogen: 0.088, ph: 7.3, totalPhosphorus: 0.077 }
|
||||
];
|
||||
const option = {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['浊度', '氨氮', 'PH', '总磷'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
top: 30
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '15%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.map(item => item.time),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
interval: 2,
|
||||
rotate: 0
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: 'PH',
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
min: 6,
|
||||
max: 9,
|
||||
interval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#675bba'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '浊度(NTU)',
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
offset: 40,
|
||||
min: 0,
|
||||
max: 32,
|
||||
interval: 8,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5470c6'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '氨氮(mg/L)',
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
offset: 100,
|
||||
min: 0,
|
||||
max: 0.1,
|
||||
interval: 0.025,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#91cc75'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '总磷(mg/L)',
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
offset: 165,
|
||||
min: 0,
|
||||
max: 0.1,
|
||||
interval: 0.025,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fac858'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'PH',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: data.map(item => item.ph),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#675bba'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#675bba'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '浊度',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: data.map(item => item.turbidity),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#5470c6'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5470c6'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '氨氮',
|
||||
type: 'line',
|
||||
yAxisIndex: 2,
|
||||
data: data.map(item => item.ammoniaNitrogen),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#91cc75'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#91cc75'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '总磷',
|
||||
type: 'line',
|
||||
yAxisIndex: 3,
|
||||
data: data.map(item => item.totalPhosphorus),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#fac858'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#fac858'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ width: 600 }}>
|
||||
<div className='toolbar' style={{ marginBottom: '10px' }}>
|
||||
<div className='tm' style={{ position: "relative", zIndex: 999999, width: '60%' }}>
|
||||
<RangePicker
|
||||
width="50%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
allowClear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={[moment('2025-06-07 12:00:00'), moment('2025-06-07 12:00:00')]}
|
||||
/>
|
||||
</div>
|
||||
<button className='search'>查询</button>
|
||||
</div>
|
||||
<TableContainer style={{ height: '49vh' }} className={classes.tableContainer}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow style={{ padding: '30px 0' }}>
|
||||
<DpTableCell align="center">时间</DpTableCell>
|
||||
<DpTableCell align="center">浊度(NTU)</DpTableCell>
|
||||
<DpTableCell align="center">氨氮(gml/L)</DpTableCell>
|
||||
<DpTableCell align="center">PH值</DpTableCell>
|
||||
<DpTableCell align="center">总磷(gml/L)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell align="center">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => { }}>{row.time}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.turbidity}</DpTableCell>
|
||||
<DpTableCell align="center">{row.ammoniaNitrogen}</DpTableCell>
|
||||
<DpTableCell align="center">{row.ph}</DpTableCell>
|
||||
<DpTableCell align="center">{row.totalPhosphorus}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<div style={{ height: '500px', width: '100%', flex: 1 }}>
|
||||
<ReactECharts
|
||||
option={option}
|
||||
style={{ height: '100%' }}
|
||||
opts={{ renderer: 'canvas' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import React from 'react';
|
||||
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
|
||||
import { AppBar, Tab, Tabs } from '@material-ui/core';
|
||||
import DrpSearch from '../../components/DrpSearch';
|
||||
import DpTabs from '../../../../layouts/mui/DpTabs';
|
||||
import DpTab from '../../../../layouts/mui/DpTab';
|
||||
import RzSearch from '../../components/RzSearch';
|
||||
import SkImgSearch from '../../components/SkImgSearch';
|
||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||
import ShuiyuandiInfo from '../../components/ShuiyuandiInfo';
|
||||
import SkPlan from '../../components/SkInfo/SkPlan';
|
||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||
import ZrrPlan from './zrrPlan'
|
||||
import Shuizhijc from './Shuizhijc'
|
||||
import Jianceflow from './jianceflow'
|
||||
import Spjk from './spjk'
|
||||
import './index.less'
|
||||
function SkDlg({ record, onClose }) {
|
||||
const [value, setValue] = React.useState(0);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
maxWidth="xl"
|
||||
style={{ borderRadius: 0 }}
|
||||
PaperComponent={DpPaperComponent}
|
||||
BackdropComponent={DpBackgroundDrop}
|
||||
>
|
||||
<div className="boxhead"></div>
|
||||
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
|
||||
<DpAppBar position="sticky">
|
||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||
<DpTab label="基础信息" />
|
||||
<DpTab label="水质监测" />
|
||||
<DpTab label="监测水位" />
|
||||
<DpTab label="视频监控" />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
<div style={{ padding: '2rem', height: '50rem' }}>
|
||||
{value === 0 && <ShuiyuandiInfo record={record} />}
|
||||
{value === 1 && <Shuizhijc record={record} />}
|
||||
{value === 2 && <Jianceflow record={record} />}
|
||||
{value === 3 && <Spjk record={record} />}
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(SkDlg);
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
|
||||
|
||||
.toolbar{
|
||||
display: flex;
|
||||
.tm{
|
||||
width: 40%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
background: linear-gradient(270deg,rgba(65,76,217,.4),rgba(58,85,218,.2) 14%,rgba(54,90,218,0) 49%,rgba(51,94,218,.2) 86%,rgba(44,102,219,.4));
|
||||
border: 1px solid #0e4e93;
|
||||
|
||||
.MuiInput-underline:before{
|
||||
border: 0px;
|
||||
}
|
||||
.time-picker{
|
||||
.ant-picker-input > input{
|
||||
color: #fff;
|
||||
}
|
||||
.ant-picker-separator{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.time-type {
|
||||
margin-left: 10rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
background-color: #393e45;
|
||||
border-radius: 5%;
|
||||
padding: 0.01% !important;
|
||||
border: 1px solid #585e64;
|
||||
div {
|
||||
width: 80px;
|
||||
border-radius: 5%;
|
||||
text-align: center;
|
||||
border: 1px solid #585e64;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #5FB7FF;
|
||||
// background: #F0F7FF;
|
||||
border: 1px solid #5FB7FF;
|
||||
}
|
||||
}
|
||||
.search{
|
||||
margin-left: 1.5rem;
|
||||
border: 1px solid #0e4e93;
|
||||
|
||||
background: url(../../../../assets/btn44.png) no-repeat 100% center;
|
||||
color: #fff;
|
||||
padding: 0 1rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.echartBox{
|
||||
width: 60%;
|
||||
.echart1{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
flex: 1;
|
||||
margin-top: 15px;
|
||||
.split-line{
|
||||
width: 100%;
|
||||
border: 1px dashed rgba(16, 102, 141);
|
||||
opacity: .36;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.MuiGrid-container{
|
||||
background-color: #182d42 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ant-picker-panel-container{
|
||||
background-color: rgba(36, 46, 92,1) !important;
|
||||
|
||||
}
|
||||
.ant-picker-header,.ant-picker-body{
|
||||
color: #fff !important;
|
||||
border-color: #242e5c;
|
||||
}
|
||||
.ant-picker-content th{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-picker-cell,
|
||||
.ant-picker-header-super-prev-btn,
|
||||
.ant-picker-header-prev-btn,
|
||||
.ant-picker-header-next-btn,
|
||||
.ant-picker-header-super-next-btn
|
||||
{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
|
||||
// background: transparent !important;
|
||||
color: #000;
|
||||
}
|
||||
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
|
||||
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
|
||||
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
|
||||
{
|
||||
background-color:transparent !important;
|
||||
}
|
||||
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
|
||||
background-color: #1890ff !important;
|
||||
}
|
||||
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
|
||||
// background-color:transparent !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
|
||||
{
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
import React from 'react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
const WaterLevelChart = () => {
|
||||
const generateData = () => {
|
||||
const data = [];
|
||||
const startTime = new Date('2023-06-08T00:00:00');
|
||||
const endTime = new Date('2023-06-08T14:00:00');
|
||||
let currentTime = new Date(startTime);
|
||||
|
||||
while (currentTime <= endTime) {
|
||||
const timeString = currentTime.toLocaleString('zh-CN', {
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
// 生成一个接近500的固定值
|
||||
data.push({
|
||||
time: timeString,
|
||||
value: 495
|
||||
});
|
||||
|
||||
currentTime.setHours(currentTime.getHours() + 1);
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
const data = generateData();
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.map(item => item.time),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '水位(m)',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '水位',
|
||||
type: 'line',
|
||||
data: data.map(item => item.value),
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#409EFF',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(64,158,255,0.2)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(64,158,255,0)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return <ReactECharts option={option} style={{ height: '550px' }} />;
|
||||
};
|
||||
|
||||
export default WaterLevelChart;
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { Grid, withStyles, TableCell, Box,
|
||||
Button,
|
||||
ButtonGroup, } from '@material-ui/core';
|
||||
import React,{useState} from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
// import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import { DatePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const useStyles = makeStyles((theme)=>({
|
||||
tableContainer: {
|
||||
background: '#182d42', // 设置表格容器的背景颜色
|
||||
},
|
||||
item: {
|
||||
'& .MuiGrid-item': {
|
||||
'& [class*="makeStyles-title"]': {
|
||||
color: '#fff',
|
||||
backgroundColor: '#104175',
|
||||
},
|
||||
},
|
||||
},
|
||||
searchRow: {
|
||||
display: 'flex',
|
||||
gap: theme.spacing(2),
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom:10
|
||||
},
|
||||
buttonGroup: {
|
||||
'& .MuiButton-root': {
|
||||
color: '#fff',
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
'&.active': {
|
||||
backgroundColor: '#2196f3',
|
||||
borderColor: '#2196f3'
|
||||
}
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
function SkInfo() {
|
||||
const classes = useStyles();
|
||||
const [activeType, setActiveType] = useState('daily');
|
||||
const [visible, setVisible] = useState(false)
|
||||
const handleTypeChange = (type) => {
|
||||
setActiveType(type);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Box className={classes.searchRow}>
|
||||
<ButtonGroup className={classes.buttonGroup}>
|
||||
<Button
|
||||
className={activeType === 'daily' ? 'active' : ''}
|
||||
onClick={() => handleTypeChange('daily')}
|
||||
>
|
||||
视频1
|
||||
</Button>
|
||||
<Button
|
||||
className={activeType === 'flood' ? 'active' : ''}
|
||||
onClick={() => handleTypeChange('flood')}
|
||||
>
|
||||
视频2
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Box>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/sksp.jpg`} alt="" style={{width:'96%',height:600}}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { Grid } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
|
||||
|
||||
function SkInfo() {
|
||||
|
||||
const data = [
|
||||
{ name:'行政责任人', dm:'郑家豪', hfsw:'龟山镇人民政府', hfll:'组织委员', tm:'05-29 14:00' },
|
||||
{ name:'巡查责任人', dm:'熊中良', hfsw:'花桥河村', hfll:'书记', tm:'05-29 14:30' },
|
||||
{ name:'技术责任人', dm:'余健', hfsw:'农业农村服务中心', hfll:'副主任', tm:'05-29 15:00' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow style={{padding:'30px 0'}}>
|
||||
<DpTableCell style={{ maxWidth: '30%',padding:'15px' }} align="left">责任人</DpTableCell>
|
||||
<DpTableCell align="center">姓名</DpTableCell>
|
||||
<DpTableCell align="center">单位</DpTableCell>
|
||||
<DpTableCell align="center">职务</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.dm}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfsw}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfll}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -15,6 +15,7 @@ import SkPlan from '../../components/SkInfo/SkPlan';
|
|||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||
import ZrrPlan from './zrrPlan'
|
||||
import Sjjg from '../../components/Sksjjg';
|
||||
|
||||
|
||||
function SkDlg({ record, onClose }) {
|
||||
|
|
@ -39,6 +40,7 @@ function SkDlg({ record, onClose }) {
|
|||
<DpTab label="基础信息" />
|
||||
<DpTab label="责任人" />
|
||||
<DpTab label="水库预案" />
|
||||
{record.events && <DpTab label="事件经过" />}
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
|
|
@ -49,6 +51,7 @@ function SkDlg({ record, onClose }) {
|
|||
{value === 3 && <SkInfo record={record} />}
|
||||
{value === 4 && <ZrrPlan />}
|
||||
{value === 5 && <SkPlan record={record} />}
|
||||
{value === 6 && <Sjjg record={record} />}
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,8 @@ import ShuikuyhDlg from './ShuikuyhDlg';
|
|||
import XunchaDlg from './XunchaDlg';
|
||||
import XcxqDlg from './XcxqDlg';
|
||||
import WyWarnDlg from './WyWarnDlg';
|
||||
import ShuiChangDlg from './ShuiChangDlg';
|
||||
import ShuiyuandiDlg from './ShuiyuandiDlg';
|
||||
import ShuiBengDlg from './ShuiBengDlg'
|
||||
|
||||
function InfoDlg() {
|
||||
|
|
@ -136,6 +138,10 @@ function InfoDlg() {
|
|||
return <XcxqDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'WyWarnLayer') {
|
||||
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') {
|
||||
return <ShuiBengDlg record={properties} onClose={handleClose} />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@ import QdLayer from "./qdlayer"
|
|||
import ShuizhiLayer from "./shuizhilayer"
|
||||
import TrsqLayer from "./trsqlayer"
|
||||
import ShuichangLayer from "./shuichangLayer"
|
||||
import ShuichangQLayer from "./shuichangQLayer"
|
||||
import ShuiyuandiLayer from "./shuiyuandiLayer"
|
||||
import ShuiyuandiQLayer from "./shuiyuandiQLayer"
|
||||
import ShuikuLayer from "./shuikuLayer"
|
||||
import RainDrpLayer from "./rainDrpLayer"
|
||||
import XunchaLayer from "./xunchalayer"
|
||||
|
|
@ -64,7 +66,9 @@ class LayerMgr {
|
|||
this.layers.push(new ShuizhiLayer());
|
||||
this.layers.push(new TrsqLayer());
|
||||
this.layers.push(new ShuichangLayer());
|
||||
this.layers.push(new ShuichangQLayer());
|
||||
this.layers.push(new ShuiyuandiLayer());
|
||||
this.layers.push(new ShuiyuandiQLayer());
|
||||
this.layers.push(new ShuikuLayer());
|
||||
this.layers.push(new RainDrpLayer());
|
||||
this.layers.push(new XunchaLayer());
|
||||
|
|
@ -211,7 +215,9 @@ class LayerMgr {
|
|||
this.layerMap.ShuizhiLayer.getStyle(),
|
||||
this.layerMap.TrsqLayer.getStyle(),
|
||||
this.layerMap.ShuichangLayer.getStyle(),
|
||||
this.layerMap.ShuichangQLayer.getStyle(),
|
||||
this.layerMap.ShuiyuandiLayer.getStyle(),
|
||||
this.layerMap.ShuiyuandiQLayer.getStyle(),
|
||||
this.layerMap.ShuikuLayer.getStyle(),
|
||||
this.layerMap.RainDrpLayer.getStyle(),
|
||||
this.layerMap.XunchaLayer.getStyle(),
|
||||
|
|
|
|||
|
|
@ -45,21 +45,99 @@ const ShapeStyle = {
|
|||
|
||||
const page1 = [
|
||||
{
|
||||
"stcd": "716113001",
|
||||
"stcd": "61612610",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "监测点9",
|
||||
"adcd": "421181113000",
|
||||
"stnm": "三河口水厂",
|
||||
"adcd": "421181109000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 114.805278,
|
||||
"lttd": 31.206667,
|
||||
"lgtd": 115.166667,
|
||||
"lttd": 31.333333,
|
||||
"elev": 0,
|
||||
"damel": 104.27,
|
||||
"dsflz": 102.9,
|
||||
"fsltdz": 102.36,
|
||||
"ddz": 90.86,
|
||||
"zcxsw": 102.36,
|
||||
"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": "刘集水厂",
|
||||
"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",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
|
|
@ -69,29 +147,14 @@ const page1 = [
|
|||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 8.19,
|
||||
"rz": 224.31,
|
||||
"w": 0,
|
||||
"a_fsltdz": -94.17,
|
||||
"a_fsltdz": -6.689999999999998,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716113001",
|
||||
"tm": "2023-03-12T07:01:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113001/20230312150100.jpg"
|
||||
"aRz": -6.69
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"type": "sk",
|
||||
|
|
@ -137,329 +200,6 @@ const page1 = [
|
|||
],
|
||||
"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 {
|
||||
|
|
@ -487,7 +227,14 @@ export default class ShuichangLayer extends BaseLayer {
|
|||
async doRefreshLayer(mapCtrl) {
|
||||
const ms = mapCtrl.getSource(SourceName);
|
||||
|
||||
let data = page1
|
||||
let data =
|
||||
// await PicStPromise.get();
|
||||
[...page1].map((item)=>{
|
||||
const obj = {...item}
|
||||
obj.lgtd = item.lgtd - 0.00122
|
||||
obj.lttd = item.lttd
|
||||
return obj
|
||||
})
|
||||
ms.setData(parseGeoJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
|
@ -497,11 +244,12 @@ export default class ShuichangLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: 'shuichang',
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: 'shuichang',
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
dispatch.runtime.setInfoDlg({ layerId: 'ShuichangLayer',properties })
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
import clone from "clone";
|
||||
import { PicStPromise, TestPicStPromise } from "../../../../models/_/real";
|
||||
import { parseGeoJSON } from "../../../../utils/tools";
|
||||
import { InfoPopNames } from "../../InfoPops";
|
||||
import BaseLayer from "./baselayer";
|
||||
|
||||
const SourceName = '水厂q';
|
||||
|
||||
const ShapeStyle = {
|
||||
id: SourceName,
|
||||
type: 'symbol',
|
||||
source: SourceName,
|
||||
layout: {
|
||||
'icon-allow-overlap': true,
|
||||
'text-allow-overlap': true,
|
||||
'icon-image': '水厂q',
|
||||
'icon-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 0.4,
|
||||
14, 0.8,
|
||||
],
|
||||
|
||||
'text-allow-overlap': true,
|
||||
'text-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 10,
|
||||
14, 14,
|
||||
],
|
||||
'text-font': ['Roboto Black'],
|
||||
'text-field': [
|
||||
'step',
|
||||
['zoom'],
|
||||
'',
|
||||
12, ['get', 'stnm']
|
||||
],
|
||||
'text-anchor': 'top',
|
||||
'text-offset': [0, 1],
|
||||
|
||||
'visibility': 'none',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#fff'
|
||||
}
|
||||
};
|
||||
|
||||
const page1 = [
|
||||
{
|
||||
"stcd": "61614200",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "浮桥河水厂",
|
||||
"adcd": "421181100000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 114.875,
|
||||
"lttd": 31.166667,
|
||||
"elev": 0,
|
||||
"damel": 71.33,
|
||||
"dsflz": 68.04,
|
||||
"fsltdz": 64.89,
|
||||
"ddz": 51.78,
|
||||
"zcxsw": 64.89,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 16.5,
|
||||
"drpState": 1,
|
||||
"rz": 60.71,
|
||||
"w": 162.8,
|
||||
"a_fsltdz": -4.18,
|
||||
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -4.18
|
||||
},
|
||||
]
|
||||
|
||||
export default class ShuichangQLayer extends BaseLayer {
|
||||
|
||||
static LayerName = 'ShuichangQLayer';
|
||||
|
||||
static SourceName = SourceName;
|
||||
|
||||
getStyle() {
|
||||
|
||||
const ret = clone(ShapeStyle);
|
||||
this._setStyleVisibility(ret);
|
||||
return ret;
|
||||
|
||||
}
|
||||
|
||||
getName() {
|
||||
return ShuichangQLayer.LayerName;
|
||||
}
|
||||
|
||||
getSubLayers() {
|
||||
return [ShapeStyle.id];
|
||||
}
|
||||
|
||||
async doRefreshLayer(mapCtrl) {
|
||||
const ms = mapCtrl.getSource(SourceName);
|
||||
|
||||
let data =
|
||||
// await PicStPromise.get();
|
||||
[...page1].map((item)=>{
|
||||
const obj = {...item}
|
||||
obj.lgtd = item.lgtd - 0.00122
|
||||
obj.lttd = item.lttd
|
||||
return obj
|
||||
})
|
||||
ms.setData(parseGeoJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
getFeatureTip(record) {
|
||||
return '';
|
||||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: 'shuichang',
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
dispatch.runtime.setInfoDlg({ layerId: 'ShuichangLayer',properties })
|
||||
}
|
||||
}
|
||||
|
|
@ -45,160 +45,128 @@ const ShapeStyle = {
|
|||
|
||||
const page1 = [
|
||||
{
|
||||
"addvcd": "420800000000000",
|
||||
"moditime": "2022-05-01 21:00:00",
|
||||
"comments": "漳河遥测",
|
||||
"src": "zhzj",
|
||||
"esstym": "",
|
||||
"mvalue": {
|
||||
"slmmmt": null,
|
||||
"slm60": 0,
|
||||
"exkey": "@",
|
||||
"slm80": 0,
|
||||
"hitrsn": null,
|
||||
"crpty": null,
|
||||
"crpgrwprd": null,
|
||||
"srlslm": null,
|
||||
"stcd": "ZH201417",
|
||||
"slm10": 24,
|
||||
"slm20": 5.3,
|
||||
"slm30": 44.3,
|
||||
"slm40": 44.3,
|
||||
"tm": "2024-08-03 05:00",
|
||||
"slm100": 0,
|
||||
"vtavslm": null,
|
||||
"slmAvg": 24.5
|
||||
},
|
||||
"lttd": 30.8456,
|
||||
"sttp": "SS",
|
||||
"irrCode": "D00000010",
|
||||
"sort": 9999,
|
||||
"hasImg": false,
|
||||
"stlc": "荆门市",
|
||||
"dtmel": 0,
|
||||
"stcd": "ZH201417",
|
||||
"stnm": "马山二组（墒情）",
|
||||
"addvcd_dictText": "荆门市",
|
||||
"lgtd": 112.2321,
|
||||
"irrCode_dictText": "漳河实验站",
|
||||
"bsnm": "漳河流域"
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"addvcd": "420800000000000",
|
||||
"moditime": "2022-05-01 21:00:00",
|
||||
"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": "漳河流域"
|
||||
"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
|
||||
},
|
||||
{
|
||||
"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 {
|
||||
|
||||
|
|
@ -229,8 +197,8 @@ export default class ShuiyuandiLayer extends BaseLayer {
|
|||
// await PicStPromise.get();
|
||||
[...page1].map((item)=>{
|
||||
const obj = {...item}
|
||||
obj.lgtd = item.lgtd + 2.9619
|
||||
obj.lttd = item.lttd + 0.2002
|
||||
obj.lgtd = item.lgtd
|
||||
obj.lttd = item.lttd
|
||||
return obj
|
||||
})
|
||||
ms.setData(parseGeoJSON(data));
|
||||
|
|
@ -248,5 +216,7 @@ export default class ShuiyuandiLayer extends BaseLayer {
|
|||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
dispatch.runtime.setInfoDlg({ layerId: 'ShuiyuandiLayer',properties })
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,143 @@
|
|||
import clone from "clone";
|
||||
import { PicStPromise, TestPicStPromise } from "../../../../models/_/real";
|
||||
import { parseGeoJSON } from "../../../../utils/tools";
|
||||
import { InfoPopNames } from "../../InfoPops";
|
||||
import BaseLayer from "./baselayer";
|
||||
|
||||
const SourceName = '水源地q';
|
||||
|
||||
const ShapeStyle = {
|
||||
id: SourceName,
|
||||
type: 'symbol',
|
||||
source: SourceName,
|
||||
layout: {
|
||||
'icon-allow-overlap': true,
|
||||
'text-allow-overlap': true,
|
||||
'icon-image': '水源地q',
|
||||
'icon-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 0.4,
|
||||
14, 0.8,
|
||||
],
|
||||
|
||||
'text-allow-overlap': true,
|
||||
'text-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 10,
|
||||
14, 14,
|
||||
],
|
||||
'text-font': ['Roboto Black'],
|
||||
'text-field': [
|
||||
'step',
|
||||
['zoom'],
|
||||
'',
|
||||
12, ['get', 'stnm']
|
||||
],
|
||||
'text-anchor': 'top',
|
||||
'text-offset': [0, 1],
|
||||
|
||||
'visibility': 'none',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#fff'
|
||||
}
|
||||
};
|
||||
|
||||
const page1 = [{
|
||||
"stcd": "716115401",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "长冲水库",
|
||||
"adcd": "421181110000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.061389,
|
||||
"lttd": 31.408611,
|
||||
"elev": 0,
|
||||
"damel": 21.6,
|
||||
"dsflz": 20.15,
|
||||
"fsltdz": 130.8,
|
||||
"ddz": 0,
|
||||
"zcxsw": 130.8,
|
||||
"drpTm": "2024-05-17T08:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 126.41,
|
||||
"w": 0.374,
|
||||
"a_fsltdz": -4.390000000000015,
|
||||
"rzTm": "2024-05-17T06:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716115401",
|
||||
"tm": "2024-05-17T08:05:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115401/20240517160500.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716115401",
|
||||
"tm": "2024-05-17T08:20:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115402/20240517162000.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": -4.39
|
||||
}]
|
||||
|
||||
export default class ShuiyuandiQLayer extends BaseLayer {
|
||||
|
||||
static LayerName = 'ShuiyuandiQLayer';
|
||||
|
||||
static SourceName = SourceName;
|
||||
|
||||
getStyle() {
|
||||
|
||||
const ret = clone(ShapeStyle);
|
||||
this._setStyleVisibility(ret);
|
||||
return ret;
|
||||
|
||||
}
|
||||
|
||||
getName() {
|
||||
return ShuiyuandiQLayer.LayerName;
|
||||
}
|
||||
|
||||
getSubLayers() {
|
||||
return [ShapeStyle.id];
|
||||
}
|
||||
|
||||
async doRefreshLayer(mapCtrl) {
|
||||
const ms = mapCtrl.getSource(SourceName);
|
||||
|
||||
let data =
|
||||
// await PicStPromise.get();
|
||||
[...page1].map((item)=>{
|
||||
const obj = {...item}
|
||||
obj.lgtd = item.lgtd
|
||||
obj.lttd = item.lttd
|
||||
return obj
|
||||
})
|
||||
ms.setData(parseGeoJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
getFeatureTip(record) {
|
||||
return '';
|
||||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: InfoPopNames.PicStPop,
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
dispatch.runtime.setInfoDlg({ layerId: 'ShuiyuandiLayer',properties })
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -23,7 +23,9 @@ import QdLayer from "./qdlayer";
|
|||
import ShuizhiLayer from "./shuizhilayer";
|
||||
import TrsqLayer from "./trsqlayer";
|
||||
import ShuichangLayer from "./shuichangLayer";
|
||||
import ShuichangQLayer from "./shuichangQLayer";
|
||||
import ShuiyuandiLayer from "./shuiyuandiLayer";
|
||||
import ShuiyuandiQLayer from "./shuiyuandiQLayer";
|
||||
import ShuikuLayer from "./shuikuLayer";
|
||||
import RainDrpLayer from "./rainDrpLayer"
|
||||
import XunchaLayer from "./xunchalayer"
|
||||
|
|
@ -217,10 +219,18 @@ const sources = {
|
|||
[ShuichangLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[ShuichangQLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[ShuiyuandiLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[ShuiyuandiQLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[ShuikuLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
|
|
|
|||
|
|
@ -128,6 +128,8 @@ import Sljc from './panels/Sljc'
|
|||
import Byjc from './panels/Byjc'
|
||||
import Shuikusp from './panels/ShuikuSp'
|
||||
import JcGJ from './panels/Jcgj'
|
||||
import YjList from './panels/YjList'
|
||||
import Yjsj from './panels/Yjsj'
|
||||
import Sczl from './panels/Sczl'
|
||||
import Sbtj from './panels/Sbtj'
|
||||
import Sbyj from './panels/Sbyj'
|
||||
|
|
@ -273,6 +275,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
return <Gsts style={style} />
|
||||
} else if (name === '供水覆盖率') {
|
||||
return <Gsfgl style={style} />
|
||||
} else if (name === '预警列表') {
|
||||
return <YjList style={style} />
|
||||
} else if (name === '日供水量') {
|
||||
return <Rgsl style={style} />
|
||||
} else if (name === '对比分析') {
|
||||
|
|
@ -331,6 +335,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
return <Gcxxzl style={style} />
|
||||
} else if (name === '应急指挥调度') {
|
||||
return <Yjdd style={style} />
|
||||
} else if (name === '应急事件') {
|
||||
return <Yjsj style={style} />
|
||||
} else if (name === "网格") {
|
||||
return <Yawg style={style} />
|
||||
} else if (name === "降雨分析") {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import React, { useMemo } from 'react'
|
||||
import config from '../../../../config';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import DpAlert from '../../../../layouts/mui/DpAlert';
|
||||
|
||||
function SkPlan({ record }) {
|
||||
|
||||
let { data } = useRequest(() => skInfo(record));
|
||||
const { hasFile, path, url, info } = useMemo(() => {
|
||||
if (!data) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (!data.plan) {
|
||||
return { info: '未上传预案' }
|
||||
}
|
||||
|
||||
const plan = data.plan;
|
||||
const path = `${config.OSS_BASE}/skyuan/${plan.stcd}/`;
|
||||
const filename = plan.filename;
|
||||
const hasFile = filename.endsWith('doc') || filename.endsWith('docx') || filename.endsWith('pdf');
|
||||
let url;
|
||||
if (hasFile) {
|
||||
if (filename.endsWith('pdf')) {
|
||||
url = path + filename;
|
||||
} else {
|
||||
const filefolder = filename.replace('.docx', '').replace('.doc', '');
|
||||
url = path + filefolder + '/' + filefolder + '.html';
|
||||
}
|
||||
}
|
||||
return {
|
||||
path,
|
||||
filename: plan.filename,
|
||||
url,
|
||||
hasFile,
|
||||
info: !hasFile ? '未上传预案' : null
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
|
||||
{/* { info ? <DpAlert style={{ flexShrink: 0, marginBottom: '1rem' }} severity="info">{info}</DpAlert> : null}
|
||||
<div style={{ flexGrow: 1, height: '20rem' }}>
|
||||
{
|
||||
hasFile && (<iframe
|
||||
seamless="seamless"
|
||||
key={path}
|
||||
height={600}
|
||||
style={{ width: '100%', height: '100%', border: 0, backgroundColor: '#fff' }}
|
||||
src={url}
|
||||
/>)
|
||||
}
|
||||
</div> */}
|
||||
<iframe src={`${process.env.PUBLIC_URL}/assets/仰天窝水库（三里畈）防汛应急预案 -.pdf`} width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkPlan
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import { Grid } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import DescriptionItem from '../DescrptionItem';
|
||||
|
||||
|
||||
function Personel({ data }) {
|
||||
return (
|
||||
<Grid container alignItems="center" spacing={1} style={{ color: '#bbb' }}>
|
||||
<Grid item><Person /></Grid>
|
||||
<Grid item style={{ fontWeight: 'bold', color: '#fff' }}>{data.name}:</Grid>
|
||||
{data.zw && <Grid item>{data.zw};</Grid>}
|
||||
{data.zz && <Grid item>{data.zz};</Grid>}
|
||||
{data.dw && <Grid item>{data.dw};</Grid>}
|
||||
{data.phone && <Grid item>{data.phone}</Grid>}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function SkInfo({ record }) {
|
||||
let { data } = useRequest(() => skInfo(record));
|
||||
data = data || {};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Grid container size="small">
|
||||
<DescriptionItem label="水厂名称">{data.stnm}</DescriptionItem>
|
||||
<DescriptionItem label="管理单位">用水协会</DescriptionItem>
|
||||
<DescriptionItem label="水厂规模">800吨</DescriptionItem>
|
||||
<DescriptionItem label="取水水源">山泉水、新水厂</DescriptionItem>
|
||||
<DescriptionItem label="负责人">陈刚</DescriptionItem>
|
||||
<DescriptionItem label="联系电话">13647186235</DescriptionItem>
|
||||
|
||||
<DescriptionItem label="行政村" span={2}>
|
||||
{/* {adnmZhen(data.adcd)}{adnmCun(data.adcd)} */}
|
||||
林寨村村民、桃园村村民、果园村
|
||||
</DescriptionItem>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import React, { useMemo } from 'react'
|
||||
import config from '../../../../config';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import DpAlert from '../../../../layouts/mui/DpAlert';
|
||||
|
||||
function SkPlan({ record }) {
|
||||
|
||||
let { data } = useRequest(() => skInfo(record));
|
||||
const { hasFile, path, url, info } = useMemo(() => {
|
||||
if (!data) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (!data.plan) {
|
||||
return { info: '未上传预案' }
|
||||
}
|
||||
|
||||
const plan = data.plan;
|
||||
const path = `${config.OSS_BASE}/skyuan/${plan.stcd}/`;
|
||||
const filename = plan.filename;
|
||||
const hasFile = filename.endsWith('doc') || filename.endsWith('docx') || filename.endsWith('pdf');
|
||||
let url;
|
||||
if (hasFile) {
|
||||
if (filename.endsWith('pdf')) {
|
||||
url = path + filename;
|
||||
} else {
|
||||
const filefolder = filename.replace('.docx', '').replace('.doc', '');
|
||||
url = path + filefolder + '/' + filefolder + '.html';
|
||||
}
|
||||
}
|
||||
return {
|
||||
path,
|
||||
filename: plan.filename,
|
||||
url,
|
||||
hasFile,
|
||||
info: !hasFile ? '未上传预案' : null
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
|
||||
{/* { info ? <DpAlert style={{ flexShrink: 0, marginBottom: '1rem' }} severity="info">{info}</DpAlert> : null}
|
||||
<div style={{ flexGrow: 1, height: '20rem' }}>
|
||||
{
|
||||
hasFile && (<iframe
|
||||
seamless="seamless"
|
||||
key={path}
|
||||
height={600}
|
||||
style={{ width: '100%', height: '100%', border: 0, backgroundColor: '#fff' }}
|
||||
src={url}
|
||||
/>)
|
||||
}
|
||||
</div> */}
|
||||
<iframe src={`${process.env.PUBLIC_URL}/assets/仰天窝水库（三里畈）防汛应急预案 -.pdf`} width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkPlan
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import { Grid } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import DescriptionItem from '../DescrptionItem';
|
||||
|
||||
|
||||
function Personel({ data }) {
|
||||
return (
|
||||
<Grid container alignItems="center" spacing={1} style={{ color: '#bbb' }}>
|
||||
<Grid item><Person /></Grid>
|
||||
<Grid item style={{ fontWeight: 'bold', color: '#fff' }}>{data.name}:</Grid>
|
||||
{data.zw && <Grid item>{data.zw};</Grid>}
|
||||
{data.zz && <Grid item>{data.zz};</Grid>}
|
||||
{data.dw && <Grid item>{data.dw};</Grid>}
|
||||
{data.phone && <Grid item>{data.phone}</Grid>}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function SkInfo({ record }) {
|
||||
let { data } = useRequest(() => skInfo(record));
|
||||
data = data || {};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Grid container size="small">
|
||||
<DescriptionItem label="水库名称">{data.stnm}</DescriptionItem>
|
||||
<DescriptionItem label="设计洪水位(m)">{data.dsflz}</DescriptionItem>
|
||||
<DescriptionItem label="校核洪水位(m)">{data.HJHSW}</DescriptionItem>
|
||||
<DescriptionItem label="正常蓄水位(m)">{data.ZCXSW}</DescriptionItem>
|
||||
<DescriptionItem label="死水位(m)">{data.ddz}</DescriptionItem>
|
||||
<DescriptionItem label="汛限水位(m)">{data.fsltdz}</DescriptionItem>
|
||||
<DescriptionItem label="总库容(万方)">{data.ZKR}</DescriptionItem>
|
||||
<DescriptionItem label="防洪库容(万方)">{data.FHKR}</DescriptionItem>
|
||||
<DescriptionItem label="兴利库容(万方)" span={2}>{data.XLKR}</DescriptionItem>
|
||||
|
||||
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import React, { useMemo } from 'react'
|
||||
import config from '../../../../config';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import DpAlert from '../../../../layouts/mui/DpAlert';
|
||||
|
||||
function SkPlan({ record }) {
|
||||
|
||||
let { data } = useRequest(() => skInfo(record));
|
||||
const { hasFile, path, url, info } = useMemo(() => {
|
||||
if (!data) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (!data.plan) {
|
||||
return { info: '未上传预案' }
|
||||
}
|
||||
|
||||
const plan = data.plan;
|
||||
const path = `${config.OSS_BASE}/skyuan/${plan.stcd}/`;
|
||||
const filename = plan.filename;
|
||||
const hasFile = filename.endsWith('doc') || filename.endsWith('docx') || filename.endsWith('pdf');
|
||||
let url;
|
||||
if (hasFile) {
|
||||
if (filename.endsWith('pdf')) {
|
||||
url = path + filename;
|
||||
} else {
|
||||
const filefolder = filename.replace('.docx', '').replace('.doc', '');
|
||||
url = path + filefolder + '/' + filefolder + '.html';
|
||||
}
|
||||
}
|
||||
return {
|
||||
path,
|
||||
filename: plan.filename,
|
||||
url,
|
||||
hasFile,
|
||||
info: !hasFile ? '未上传预案' : null
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
|
||||
{/* { info ? <DpAlert style={{ flexShrink: 0, marginBottom: '1rem' }} severity="info">{info}</DpAlert> : null}
|
||||
<div style={{ flexGrow: 1, height: '20rem' }}>
|
||||
{
|
||||
hasFile && (<iframe
|
||||
seamless="seamless"
|
||||
key={path}
|
||||
height={600}
|
||||
style={{ width: '100%', height: '100%', border: 0, backgroundColor: '#fff' }}
|
||||
src={url}
|
||||
/>)
|
||||
}
|
||||
</div> */}
|
||||
<iframe src={`${process.env.PUBLIC_URL}/assets/仰天窝水库（三里畈）防汛应急预案 -.pdf`} width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkPlan
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { Grid } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import { skInfo } from '../../../../models/_/search';
|
||||
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { Person } from '@material-ui/icons';
|
||||
import DescriptionItem from '../DescrptionItem';
|
||||
import moment from 'moment';
|
||||
|
||||
function Personel({ data }) {
|
||||
return (
|
||||
<Grid container alignItems="center" spacing={1} style={{ color: '#bbb' }}>
|
||||
<Grid item><Person /></Grid>
|
||||
<Grid item style={{ fontWeight: 'bold', color: '#fff' }}>{data.name}:</Grid>
|
||||
{data.zw && <Grid item>{data.zw};</Grid>}
|
||||
{data.zz && <Grid item>{data.zz};</Grid>}
|
||||
{data.dw && <Grid item>{data.dw};</Grid>}
|
||||
{data.phone && <Grid item>{data.phone}</Grid>}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function SkInfo({ record }) {
|
||||
let { data } = useRequest(() => skInfo(record));
|
||||
data = data || {};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Grid container size="small">
|
||||
<DescriptionItem label="事件名称">{record.event}</DescriptionItem>
|
||||
<DescriptionItem label="事件类型">{record.types}</DescriptionItem>
|
||||
{/* <DescriptionItem label="行政区划">{adnmZhen(data.adcd)}{adnmCun(data.adcd)}</DescriptionItem> */}
|
||||
<DescriptionItem label="发生时间">{moment(record.drpTm).format('YYYY-MM-DD HH:mm:ss')}</DescriptionItem>
|
||||
<DescriptionItem label="执行人">王强</DescriptionItem>
|
||||
<DescriptionItem label="执行时间">2025-06-06 16:32:12</DescriptionItem>
|
||||
<DescriptionItem label="采取的措施" span={1}>立即启动东部备用水源，补充供水量的30%，缓解供水压力。</DescriptionItem>
|
||||
<DescriptionItem label="影响范围" span={1}>主要影响城北区域约5万户居民，部分高层建筑在高峰时段可能出现水压不足情况。已通知受影响区域居民做好储水准备。</DescriptionItem>
|
||||
<DescriptionItem label="处理结果" span={1}>通过启用备用水源和调度其他水源，目前供水系统压力已趋于稳定，供水量恢复到正常水平的85%。预计今晚可完全恢复。</DescriptionItem>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkInfo;
|
||||
|
|
@ -38,7 +38,7 @@ const useStyles = makeStyles((theme) => ({
|
|||
},
|
||||
controls1: {
|
||||
position: 'absolute',
|
||||
top: '85%',
|
||||
top: '88%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
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%' }} />
|
||||
}
|
||||
} */}
|
||||
|
||||
|
||||
<div className="bottom">
|
||||
|
|
|
|||
|
|
@ -1,171 +1,137 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import React from 'react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
chartContainer: {
|
||||
width: '100%',
|
||||
height: '400px',
|
||||
// backgroundColor: '#0d1117',
|
||||
}
|
||||
});
|
||||
|
||||
const pallete = [
|
||||
['#177ab3', '#51c3e7'],
|
||||
['#9976dc', '#c792ee'],
|
||||
['#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 = {
|
||||
const WaterSourceChart = () => {
|
||||
const classes = useStyles();
|
||||
const option = {
|
||||
// backgroundColor: '#0d1117',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: false
|
||||
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;
|
||||
}
|
||||
},
|
||||
valueFormatter: (value) => value + ' 万m³'
|
||||
},
|
||||
grid: {
|
||||
top: 42,
|
||||
left: 50,
|
||||
right: 0,
|
||||
bottom: 27,
|
||||
},
|
||||
legend: {
|
||||
data: ['设计产能', '实际产水'],
|
||||
top: '8',
|
||||
left: 'center',
|
||||
itemWidth: 11,//11,
|
||||
itemHeight: 11,//11,
|
||||
data: ['浮桥河水厂', '三河口水厂', '刘集水厂', '杉林河水厂', ],
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 12,//12
|
||||
}
|
||||
color: '#c9d1d9'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
top: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: x,
|
||||
splitLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
data: ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9' //X轴文字颜色
|
||||
},
|
||||
// rotate: 20, // 角度值：Number
|
||||
fontSize: 10,//10
|
||||
color: '#fff',
|
||||
rotate: 45
|
||||
},
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
color: '#c9d1d9'
|
||||
}
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '产水量m³',
|
||||
name: '预警数量',
|
||||
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)'
|
||||
}
|
||||
color: '#fff'
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 11,//11
|
||||
}
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 200,
|
||||
max: 800,
|
||||
lineStyle: {
|
||||
color: '#c9d1d9'
|
||||
}
|
||||
],
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#30363d',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '设计产能',
|
||||
name: '浮桥河水厂',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
data: y1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#56b38b'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
barWidth: 30,
|
||||
stack: 'total',
|
||||
|
||||
data: [45, 52, 65, 70, 75, 79]
|
||||
},
|
||||
{
|
||||
name: '实际产水',
|
||||
name: '三河口水厂',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
data: y2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3860d0'
|
||||
barWidth: 30,
|
||||
stack: 'total',
|
||||
|
||||
data: [15, 18, 20, 22, 23, 24]
|
||||
},
|
||||
{
|
||||
name: '刘集水厂',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
stack: 'total',
|
||||
|
||||
data: [10, 12, 14, 16, 17, 19]
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
}
|
||||
]
|
||||
{
|
||||
name: '杉林河水厂',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
stack: 'total',
|
||||
|
||||
data: [8, 10, 12, 14, 15, 17]
|
||||
},
|
||||
],
|
||||
color: ['#fac858', '#ee6666', '#73c0de', '#3ba272']
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
<div className={classes.chartContainer}>
|
||||
<ReactECharts
|
||||
option={option}
|
||||
style={{ height: '99%', width: '100%' }}
|
||||
style={{ height: '100%' }}
|
||||
opts={{ renderer: 'canvas' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(AreaDrpChart);
|
||||
export default WaterSourceChart;
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
import React from 'react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
const WaterSourceChart = () => {
|
||||
const dates = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06'];
|
||||
const waterSources = ['浮桥河水库', '长冲水库', '葡萄冲水库', '二五冲水库'];
|
||||
|
||||
// 使用固定的示例数据
|
||||
const series = [
|
||||
{
|
||||
name: '浮桥河水库',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 30,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [15, 18, 12, 20, 16, 22]
|
||||
},
|
||||
{
|
||||
name: '长冲水库',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 30,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [10, 12, 8, 15, 11, 14]
|
||||
},
|
||||
{
|
||||
name: '葡萄冲水库',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 30,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [8, 10, 6, 12, 9, 11]
|
||||
},
|
||||
{
|
||||
name: '二五冲水库',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 30,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [5, 7, 4, 8, 6, 9]
|
||||
}
|
||||
];
|
||||
|
||||
const option = {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
let total = 0;
|
||||
let result = `${params[0].axisValue}<br/>`;
|
||||
|
||||
// 按数值从大到小排序并只显示有预警的水源地
|
||||
const sortedParams = params
|
||||
.filter(param => param.value > 0)
|
||||
.sort((a, b) => b.value - a.value);
|
||||
|
||||
sortedParams.forEach(param => {
|
||||
total += param.value;
|
||||
result += `${param.seriesName}: ${param.value}<br/>`;
|
||||
});
|
||||
|
||||
result += `总计: ${total}`;
|
||||
return result;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: waterSources,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dates,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
rotate: 45
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '预警数量',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: series,
|
||||
color: ['#fac858', '#ee6666', '#73c0de', '#3ba272']
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ height: '400px', width: '100%' }}>
|
||||
<ReactECharts
|
||||
option={option}
|
||||
style={{ height: '100%' }}
|
||||
opts={{ renderer: 'canvas' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WaterSourceChart;
|
||||
|
|
@ -2,23 +2,34 @@ import React, { useMemo, useState } from 'react';
|
|||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
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)
|
||||
|
||||
}
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="报警分析"
|
||||
title="预警统计"
|
||||
color="green"
|
||||
extra={
|
||||
tabs={
|
||||
<>
|
||||
<div style={{cursor:'pointer',color:'#3c88f7'}} onClick={()=>dispatch?.runtime.setInfoDlg({ layerId: 'BjLayer', properties: {} })}>更多</div>
|
||||
{/* <div style={{cursor:'pointer',color:'#3c88f7'}} onClick={()=>dispatch?.runtime.setInfoDlg({ layerId: 'BjLayer', properties: {} })}>更多</div> */}
|
||||
<span className="button-group">
|
||||
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||
<span className={clsx({ active: type == 'syd' })} onClick={() => toggleStType('syd')}>水源地</span>
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<img src='/assets/报警分析.jpg' style={{width:'26.5rem', height:'13.5rem',marginLeft:'0rem',marginTop:'1rem'}}/>
|
||||
>{
|
||||
type == 'sc' ?<AreaDrpChart />:<ShuiyuandiChart />
|
||||
}
|
||||
|
||||
{/* <img src='/assets/报警分析.jpg' style={{width:'26.5rem', height:'13.5rem',marginLeft:'0rem',marginTop:'1rem'}}/> */}
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,416 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
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';
|
||||
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 (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="水质监测"
|
||||
title="水质达标率"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
<img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||
<img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||
</>
|
||||
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>
|
||||
}
|
||||
>
|
||||
<img src='/assets/水厂水质监测.jpg' style={{width:'26.5rem', height:'12rem',marginLeft:'0rem',marginTop:'1rem'}}/>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/zhdbl.jpg`} style={{ width: 150 }} alt="" />
|
||||
<span style={{color:'#fff'}}>综合达标率</span>
|
||||
</div>
|
||||
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ width: '40%' }} align="center">名称</DpTableCell>
|
||||
<DpTableCell style={{ width: '60%' }} align="center">达标率（%）</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{
|
||||
data.map((row) => (
|
||||
<DpTableRow key={row.stcd} onClick={() => flyTo(row)}>
|
||||
<DpTableCell align="center">
|
||||
{row.stnm}
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
{row.percent}
|
||||
</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,453 @@
|
|||
import React, { useMemo, useState, useEffect } from 'react';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import config from '../../../../config';
|
||||
import clsx from 'clsx';
|
||||
import moment from 'moment';
|
||||
function DrpReal({ style }) {
|
||||
const [type, setType] = useState('sc')
|
||||
const dispatch = useDispatch();
|
||||
const toggleStType = (type) => {
|
||||
setType(type)
|
||||
|
||||
}
|
||||
const scData = [
|
||||
{
|
||||
"stcd": "61614200",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "浮桥河水厂",
|
||||
zb: '浊度',
|
||||
yjvalue: 0.6,
|
||||
status:1,
|
||||
"adcd": "421181100000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 114.875,
|
||||
"lttd": 31.166667,
|
||||
"elev": 0,
|
||||
"damel": 71.33,
|
||||
"dsflz": 68.04,
|
||||
"fsltdz": 64.89,
|
||||
"ddz": 51.78,
|
||||
"zcxsw": 64.89,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 16.5,
|
||||
"drpState": 1,
|
||||
"rz": 60.71,
|
||||
"w": 162.8,
|
||||
"a_fsltdz": -4.18,
|
||||
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -4.18,
|
||||
percent: 98.20
|
||||
},
|
||||
{
|
||||
"stcd": "61612610",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "三河口水厂",
|
||||
zb: '余氯',
|
||||
yjvalue: 0.25,
|
||||
"adcd": "421181109000",
|
||||
"wscd": null,
|
||||
percent: 94.29,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.166667,
|
||||
"lttd": 31.333333,
|
||||
"elev": 0,
|
||||
"damel": 156.8,
|
||||
"dsflz": 154.99,
|
||||
"fsltdz": 149,
|
||||
"ddz": 124,
|
||||
"zcxsw": 149,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 12.5,
|
||||
"drpState": 1,
|
||||
"rz": 141.45,
|
||||
"w": 77.8,
|
||||
"a_fsltdz": -7.550000000000011,
|
||||
"rzTm": "2025-06-03T01:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -7.55
|
||||
},
|
||||
{
|
||||
"stcd": "7CS000231",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "刘集水厂",
|
||||
zb: 'PH值',
|
||||
yjvalue: 7.4,
|
||||
percent: 56.98,
|
||||
"adcd": "421181100000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.048056,
|
||||
"lttd": 31.335556,
|
||||
"elev": 0,
|
||||
"damel": 79.6,
|
||||
"dsflz": 78.65,
|
||||
"fsltdz": 72.05,
|
||||
"ddz": 69.55,
|
||||
"zcxsw": 72.05,
|
||||
"drpTm": "2023-11-20T01:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 76.49,
|
||||
"w": 0.049,
|
||||
"a_fsltdz": 4.439999999999998,
|
||||
"rzTm": "2025-04-11T06:00:00.000Z",
|
||||
"rzWarning": 1,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "7CS000231",
|
||||
"tm": "2023-11-20T01:04:18.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000231/20231120090418.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "7CS000231",
|
||||
"tm": "2023-11-20T01:07:54.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000232/20231120090754.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": 4.44
|
||||
},
|
||||
{
|
||||
"stcd": "716460001",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "杉林河水厂",
|
||||
zb: 'PH值',
|
||||
yjvalue: 6.3,
|
||||
"adcd": "421181107000",
|
||||
"wscd": null,
|
||||
percent: 42.14,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.433056,
|
||||
"lttd": 31.304444,
|
||||
"elev": 0,
|
||||
"damel": 236.2,
|
||||
"dsflz": 233.92,
|
||||
"fsltdz": 231,
|
||||
"ddz": 204,
|
||||
"zcxsw": 231,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 224.31,
|
||||
"w": 0,
|
||||
"a_fsltdz": -6.689999999999998,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"aRz": -6.69
|
||||
},
|
||||
]
|
||||
|
||||
const page1 = [
|
||||
{
|
||||
"stcd": "716115401",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "长冲水库",
|
||||
"adcd": "421181110000",
|
||||
"wscd": null,
|
||||
zb: '氨氮',
|
||||
yjvalue: 1.3,
|
||||
status:1,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.061389,
|
||||
"lttd": 31.408611,
|
||||
"elev": 0,
|
||||
"damel": 21.6,
|
||||
"dsflz": 20.15,
|
||||
"fsltdz": 130.8,
|
||||
"ddz": 0,
|
||||
"zcxsw": 130.8,
|
||||
"drpTm": "2024-05-17T08:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 126.41,
|
||||
"w": 0.374,
|
||||
"a_fsltdz": -4.390000000000015,
|
||||
"rzTm": "2024-05-17T06:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716115401",
|
||||
"tm": "2024-05-17T08:05:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115401/20240517160500.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716115401",
|
||||
"tm": "2024-05-17T08:20:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115402/20240517162000.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": -4.39,
|
||||
percent: 96.12
|
||||
},
|
||||
{
|
||||
"stcd": "61614200",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "浮桥河水库",
|
||||
"adcd": "421181100000",
|
||||
"wscd": null,
|
||||
zb: '浊度',
|
||||
yjvalue: 0.4,
|
||||
|
||||
"importancy": 0,
|
||||
"lgtd": 114.875,
|
||||
"lttd": 31.166667,
|
||||
"elev": 0,
|
||||
"damel": 71.33,
|
||||
"dsflz": 68.04,
|
||||
"fsltdz": 64.89,
|
||||
"ddz": 51.78,
|
||||
"zcxsw": 64.89,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 16.5,
|
||||
"drpState": 1,
|
||||
"rz": 60.71,
|
||||
"w": 162.8,
|
||||
"a_fsltdz": -4.18,
|
||||
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -4.18,
|
||||
percent: 98.21
|
||||
},
|
||||
|
||||
{
|
||||
"stcd": "716115301",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "葡萄冲水库",
|
||||
"adcd": "421181110000",
|
||||
zb: '总磷',
|
||||
yjvalue: 0.09,
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.051389,
|
||||
"lttd": 31.423333,
|
||||
"elev": 0,
|
||||
"damel": 15.8,
|
||||
"dsflz": 14.73,
|
||||
"fsltdz": 14.3,
|
||||
"ddz": 9.48,
|
||||
"zcxsw": 14.3,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 213.75,
|
||||
"w": 0.04,
|
||||
"a_fsltdz": 199.45,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 1,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716115301",
|
||||
"tm": "2023-03-12T08:02:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115301/20230312160200.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716115301",
|
||||
"tm": "2023-03-12T07:11:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716115302/20230312151100.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": 199.45,
|
||||
percent: 89.21
|
||||
},
|
||||
{
|
||||
"stcd": "716115701",
|
||||
"type": "sk",
|
||||
zb: 'PH值',
|
||||
yjvalue: 7.1,
|
||||
"hasRz": true,
|
||||
"stnm": "二五冲水库",
|
||||
"adcd": "421181110000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.087222,
|
||||
"lttd": 31.378333,
|
||||
"elev": 0,
|
||||
"damel": 11.2,
|
||||
"dsflz": 10.07,
|
||||
"fsltdz": 108.55,
|
||||
"ddz": 1.5,
|
||||
"zcxsw": 108.55,
|
||||
"drpTm": "2025-03-22T08:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 99.65,
|
||||
"w": 0.038,
|
||||
"a_fsltdz": -8.899999999999991,
|
||||
"rzTm": "2025-03-22T08:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716115701",
|
||||
"tm": "2025-03-06T23:01:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2025/0307/716115701/20250307070100.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716115701",
|
||||
"tm": "2024-10-18T06:28:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2024/1018/716115702/20241018142800.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": -8.9,
|
||||
percent: 58.2
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const flyTo = (record) => {
|
||||
const { lgtd, lttd } = record;
|
||||
if (lgtd && lttd) {
|
||||
const newLgtd = type == 'sc' ? lgtd - 0.00122 : lgtd;
|
||||
// dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [newLgtd, lttd + config.poiPositionOffsetY.hd],
|
||||
zoom: config.poiPositionZoom.hd,
|
||||
pitch: config.poiPitch,
|
||||
});
|
||||
}
|
||||
}
|
||||
const [data, setData] = useState([])
|
||||
useEffect(() => {
|
||||
if (type == 'sc') {
|
||||
setData(scData)
|
||||
} else {
|
||||
setData(page1)
|
||||
}
|
||||
}, [type])
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="预警列表"
|
||||
color="green"
|
||||
tabs={
|
||||
// <>
|
||||
// <img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||
// <img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||
// </>
|
||||
<span className="button-group">
|
||||
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
||||
<span className={clsx({ active: type == 'syd' })} onClick={() => toggleStType('syd')}>水源地</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<div >
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ width: '12%' }} align="center">序号</DpTableCell>
|
||||
<DpTableCell style={{ width: '22%' }} align="center">水厂名称</DpTableCell>
|
||||
<DpTableCell style={{ width: '22%' }} align="center">预警指标</DpTableCell>
|
||||
<DpTableCell style={{ width: '22%' }} align="center">预警数值</DpTableCell>
|
||||
<DpTableCell style={{ width: '22%' }} align="center">预警时间</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{
|
||||
data.map((row, i) => (
|
||||
<DpTableRow key={row.stcd} onClick={() => flyTo(row)}>
|
||||
<DpTableCell align="center">
|
||||
{i + 1}
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
title={row.stnm}
|
||||
> {row.stnm}</div>
|
||||
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
{row.zb}
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<span style={{ color: row.status ? 'red' :''}}>{row.yjvalue}</span>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div
|
||||
className="table-ellipsis cursor-pointer"
|
||||
title={moment(row.drpTm).format('YYYY-MM-DD HH:mm:ss')}
|
||||
> {moment(row.drpTm).format('YYYY-MM-DD HH:mm:ss')}</div>
|
||||
</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,67 @@
|
|||
import React from 'react';
|
||||
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
|
||||
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
|
||||
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
|
||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
|
||||
|
||||
function Setting({ onClose }) {
|
||||
const layerVisible = useSelector(getLayerVisible);
|
||||
const layerSetting = useSelector(getLayerSetting);
|
||||
|
||||
const dispath = useDispatch();
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
maxWidth="xl"
|
||||
style={{ borderRadius: 0 }}
|
||||
PaperComponent={DpPaperComponent}
|
||||
BackdropComponent={DpBackgroundDrop}
|
||||
>
|
||||
<div className="boxhead"></div>
|
||||
|
||||
<DpDialogTitle>实时雨量显示设置</DpDialogTitle>
|
||||
<DialogContent>
|
||||
<div style={{ width: 320, padding: '1rem 0' }}>
|
||||
<FormGroup>
|
||||
<div style={{ marginBottom: '2rem' }}>
|
||||
<Typography variant="subtitle2">地图实时雨量显示雨量时段</Typography>
|
||||
<Select
|
||||
style={{ fontSize: '1.2rem' }}
|
||||
fullWidth
|
||||
value={layerSetting.drplabel}
|
||||
onChange={(event) => dispath.map.setLayerSetting({ drplabel: event.target.value })}
|
||||
>
|
||||
<MenuItem value="h1">小时雨量</MenuItem>
|
||||
<MenuItem value="h3">3小时雨量</MenuItem>
|
||||
<MenuItem value="h6">6小时雨量</MenuItem>
|
||||
<MenuItem value="h12">12小时雨量</MenuItem>
|
||||
<MenuItem value="h24">24小时雨量</MenuItem>
|
||||
<MenuItem value="h48">48小时雨量</MenuItem>
|
||||
</Select>
|
||||
</div>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<Typography variant="subtitle2">显示实时雨量图层</Typography>
|
||||
<Switch
|
||||
checked={!!layerVisible.RealDrpLayer}
|
||||
color="primary"
|
||||
edge="start"
|
||||
onChange={(e) => dispath.map.setLayerVisible({ RealDrpLayer: e.target.checked })}
|
||||
/>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default Setting;
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import clsx from 'clsx';
|
||||
import { renderDrp } from '../../../../utils/renutils';
|
||||
import moment from 'moment';
|
||||
import config from '../../../../config';
|
||||
|
||||
const data = [
|
||||
{
|
||||
"stcd": "716129061",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "仰天窝水库",
|
||||
event: '仰天窝水库蓄水量＜30%',
|
||||
types:'干旱',
|
||||
"adcd": "421181201000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.106667,
|
||||
"lttd": 31.126389,
|
||||
"elev": 0,
|
||||
"damel": 325.08,
|
||||
"dsflz": 324.18,
|
||||
"fsltdz": 323.5,
|
||||
"ddz": 319.5,
|
||||
"zcxsw": 323.5,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 325.16,
|
||||
"w": 0.132,
|
||||
"a_fsltdz": 4.660000000000025,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 1,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716129061",
|
||||
"tm": "2023-03-12T06:05:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716129061",
|
||||
"tm": "2023-03-12T07:25:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": 4.66
|
||||
},
|
||||
|
||||
{
|
||||
"stcd": "61612910",
|
||||
"stnm": "桃林河(阎河)",
|
||||
"adcd": "421181000000000",
|
||||
event: '桃林河河道水位超警',
|
||||
types: '洪涝',
|
||||
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.087777777,
|
||||
"lttd": 31.164444444,
|
||||
"elev": null,
|
||||
"hasRz": true,
|
||||
"wrz": null,
|
||||
"wrq": null,
|
||||
"grz": null,
|
||||
"grq": null,
|
||||
"sfz": null,
|
||||
"sfq": null,
|
||||
"type": "sh",
|
||||
"tm": "2025-06-03T02:35:00.000Z",
|
||||
"rz": 55.67,
|
||||
"trend": 0,
|
||||
"state": 1,
|
||||
"warning": 0,
|
||||
"maxRz": 55.67,
|
||||
"maxDate": "2025-06-03T02:00:00.000Z",
|
||||
"warndes": null
|
||||
},
|
||||
{
|
||||
"stcd": "61612610",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "三河口水库",
|
||||
event: '三河口水库水源地水质突变',
|
||||
types:'水质污染',
|
||||
"adcd": "421181109000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.166667,
|
||||
"lttd": 31.333333,
|
||||
"elev": 0,
|
||||
"damel": 156.8,
|
||||
"dsflz": 154.99,
|
||||
"fsltdz": 149,
|
||||
"ddz": 124,
|
||||
"zcxsw": 149,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 12.5,
|
||||
"drpState": 1,
|
||||
"rz": 141.45,
|
||||
"w": 77.8,
|
||||
"a_fsltdz": -7.550000000000011,
|
||||
"rzTm": "2025-06-03T01:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -7.55
|
||||
},
|
||||
]
|
||||
|
||||
function DrpReal({ style }) {
|
||||
const dispatch = useDispatch();
|
||||
const flyTo = (record) => {
|
||||
const { lgtd, lttd } = record;
|
||||
const types = record.type == 'sk' ? 'RealSkPop' :'RealHDPop'
|
||||
if (lgtd && lttd) {
|
||||
dispatch.runtime.setFeaturePop({ type:types, properties: {...record,events:1}, coordinates: [lgtd, lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||||
zoom: config.poiPositionZoom.hd,
|
||||
pitch: config.poiPitch,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="应急事件"
|
||||
color="green"
|
||||
>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ width: '10%' }} align="center">序号</DpTableCell>
|
||||
<DpTableCell style={{ width: '35%' }} align="center">事件名称</DpTableCell>
|
||||
<DpTableCell style={{ width: '20%' }} align="center">事件类型</DpTableCell>
|
||||
<DpTableCell style={{ width: '35%' }} align="center">发生时间</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row,index) => (
|
||||
<DpTableRow key={row.stcd} onClick={() => flyTo(row)}>
|
||||
<DpTableCell align="center">{index+1}</DpTableCell>
|
||||
<DpTableCell align="center">{row.event}</DpTableCell>
|
||||
<DpTableCell align="center">{row.types}</DpTableCell>
|
||||
<DpTableCell align="center">{moment(row.drpTm).format('YYYY-MM-DD HH:mm:ss')}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
Loading…
Reference in New Issue