增加图层
parent
2d63f3ca60
commit
3494416b0e
|
|
@ -29,7 +29,7 @@
|
|||
<script type="text/javascript" src="%PUBLIC_URL%/d3.min.js"></script>
|
||||
<script type="text/javascript" src="%PUBLIC_URL%/popmotion.xl.min.js"></script>
|
||||
|
||||
<title>麻城市防汛抗旱大数据监控平台</title>
|
||||
<title>麻城市智慧水利一张图</title>
|
||||
|
||||
<style>
|
||||
.lf {
|
||||
|
|
|
|||
|
|
@ -289,7 +289,7 @@
|
|||
},
|
||||
"变形监测": {
|
||||
"width": 26,
|
||||
"height": 32,
|
||||
"height": 26,
|
||||
"x": 0,
|
||||
"y": 288,
|
||||
"pixelRatio": 0.8,
|
||||
|
|
@ -366,5 +366,21 @@
|
|||
"y": 290,
|
||||
"pixelRatio": 0.5,
|
||||
"visible": true
|
||||
},
|
||||
"水厂": {
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"x": 0,
|
||||
"y": 315,
|
||||
"pixelRatio": 0.6,
|
||||
"visible": true
|
||||
},
|
||||
"水源地": {
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"x": 256,
|
||||
"y": 0,
|
||||
"pixelRatio": 0.6,
|
||||
"visible": true
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ const isShYjDebug = false;
|
|||
|
||||
const config = {
|
||||
address,
|
||||
title: '麻城市防汛抗旱大数据监控平台',
|
||||
title: '麻城市智慧水利一张图',
|
||||
ADCD,
|
||||
ADCD6,
|
||||
ADCD12,
|
||||
|
|
|
|||
|
|
@ -320,18 +320,53 @@ const map = {
|
|||
layerVisible = {
|
||||
RealDrpLayer: false,
|
||||
RealHDLayer: false,
|
||||
RealSkLayer: true,
|
||||
RealSkLayer: false,
|
||||
BxSkLayer: false,
|
||||
FzdxLayer: false,
|
||||
WataLayer: false,
|
||||
AdcdLayer: true,
|
||||
RoadLayer: true,
|
||||
RivlLayer: true,
|
||||
ShuichangLayer:true,
|
||||
ShuiyuandiLayer:true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
});
|
||||
} else if (id === 302 || id === 303 || id === 306 || id === 305) {
|
||||
} else if (id === 302) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: false,
|
||||
RealHDLayer: false,
|
||||
RealSkLayer: false,
|
||||
BxSkLayer: false,
|
||||
FzdxLayer: false,
|
||||
WataLayer: false,
|
||||
AdcdLayer: true,
|
||||
RoadLayer: true,
|
||||
RivlLayer: true,
|
||||
// ShuichangLayer:true,
|
||||
ShuizhiLayer:true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
});
|
||||
} else if (id === 303) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: false,
|
||||
RealHDLayer: false,
|
||||
RealSkLayer: false,
|
||||
BxSkLayer: false,
|
||||
FzdxLayer: false,
|
||||
WataLayer: false,
|
||||
AdcdLayer: true,
|
||||
RoadLayer: true,
|
||||
RivlLayer: true,
|
||||
ShuichangLayer:true,
|
||||
};
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
});
|
||||
} else if ( id === 303 || id === 306 || id === 305) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: false,
|
||||
RealHDLayer: false,
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
const useDescStyles = makeStyles({
|
||||
root: { flex: 'auto' },
|
||||
|
||||
tabBox: { width: '2rem' },
|
||||
tabs1: {
|
||||
backgroundColor: '#122e47',
|
||||
fontWeight: 'bold',
|
||||
overflow: 'hidden',
|
||||
marginBottom: '0.6rem',
|
||||
color: '#E2EDFF'
|
||||
},
|
||||
tabIndicator: {
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
|
||||
active: {
|
||||
border: '1px solid #02a6b5'
|
||||
},
|
||||
title: {
|
||||
width: '16%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0.2rem 0.5rem',
|
||||
textAlign: 'left',
|
||||
borderBottom: '1px solid rgb(33, 53, 77)',
|
||||
borderLeft: '1px solid rgb(33, 53, 77)',
|
||||
borderTop: '1px solid rgb(33, 53, 77)',
|
||||
overflowWrap: 'break-word'
|
||||
},
|
||||
|
||||
value: {
|
||||
width: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '1rem 0.5rem',
|
||||
textAlign: 'left',
|
||||
border: '1px solid rgb(33, 53, 77)',
|
||||
overflowWrap: 'break-word',
|
||||
wordBreak: 'break-all'
|
||||
},
|
||||
title1: {
|
||||
width: '99.6%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0.2rem 0.5rem',
|
||||
textAlign: 'left',
|
||||
border: '1px solid rgb(33, 53, 77)',
|
||||
overflowWrap: 'break-word',
|
||||
height: '2.5rem'
|
||||
},
|
||||
|
||||
cont: {
|
||||
display: 'flex'
|
||||
},
|
||||
tabList: {
|
||||
width: '100%'
|
||||
},
|
||||
tableCont: {
|
||||
height: '100%',
|
||||
width: '99.6%',
|
||||
border: '1px solid rgb(33, 53, 77)'
|
||||
},
|
||||
tablebg: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgb(33, 53, 77)'
|
||||
},
|
||||
emit: {
|
||||
border: '1px solid rgb(33, 53, 77)'
|
||||
},
|
||||
title2: {
|
||||
width: '83.6%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0.2rem 0.5rem',
|
||||
textAlign: 'left',
|
||||
border: '1px solid rgb(33, 53, 77)',
|
||||
overflowWrap: 'break-word'
|
||||
},
|
||||
tit: {
|
||||
width: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '1rem 0.5rem',
|
||||
textAlign: 'left',
|
||||
borderBottom: '1px solid rgb(33, 53, 77)',
|
||||
borderLeft: '1px solid rgb(33, 53, 77)',
|
||||
borderTop: '1px solid rgb(33, 53, 77)',
|
||||
overflowWrap: 'break-word',
|
||||
backgroundColor: 'rgba(33,53,77,0.2)'
|
||||
// color: '#bbb'
|
||||
},
|
||||
value1: {
|
||||
width: '99.6%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0.2rem 0.5rem',
|
||||
textAlign: 'left',
|
||||
border: '1px solid rgb(33, 53, 77)',
|
||||
overflowWrap: 'break-word'
|
||||
}
|
||||
})
|
||||
|
||||
export default useDescStyles
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
export default function drpOption(data) {
|
||||
return {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: "15%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
width: '80%',
|
||||
height: '75%'
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
// 图例的位置
|
||||
data: ['垂直位移', '库水位'],
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.map(o => o.dt),//.reverse(),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
show:false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
inverse: false,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: "垂直位移",
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
// nameLocation: "start",
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: -20,
|
||||
max:20
|
||||
},
|
||||
{
|
||||
// gridIndex: 1,
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: "库水位",
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 150
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
yAxisIndex: 0,
|
||||
name: '垂直位移(mm)',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
color: "#0AE0B5",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data:data.map(o => o.du_value),
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '库水位(m)',
|
||||
type: 'line',
|
||||
color: "#007AFD",
|
||||
symbol: 'none',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: data.map(o => o.rz),
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -12,8 +12,7 @@ import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
|||
import DrpSearch from '../../components/DrpSearch';
|
||||
import DrpStAround from '../../components/DrpStAround';
|
||||
import GqJcsj from '../../components/Hdjcsj'
|
||||
import GqJbxx from './jbxx';
|
||||
import Gqspxx from '../GqbzDlg/spxx'
|
||||
import Table from './table'
|
||||
|
||||
function HDStDlg({ record, onClose }) {
|
||||
const [value, setValue] = React.useState(0);
|
||||
|
|
@ -31,18 +30,12 @@ function HDStDlg({ record, onClose }) {
|
|||
<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={record.res_nm+'-'+record.cd_nm} />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
|
||||
{value === 0 && <GqJcsj record={record} />}
|
||||
{/* {value === 1 && <GqJbxx record={record} />} */}
|
||||
{/* {value === 2 && <Gqspxx record={record} />} */}
|
||||
|
||||
<Table/>
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
.infoDlg_jcsj{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
height: 40vh;
|
||||
margin-top: 1vh;
|
||||
display: flex;
|
||||
|
||||
.list{
|
||||
width: 40%;
|
||||
}
|
||||
.echart{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.echartBox{
|
||||
width: 60%;
|
||||
.echart1{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
flex: 1;
|
||||
margin-top: 15px;
|
||||
.split-line{
|
||||
width: 100%;
|
||||
border: 1px dashed rgba(16, 102, 141);
|
||||
opacity: .36;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.MuiGrid-container{
|
||||
background-color: #182d42 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.ant-picker-panel-container{
|
||||
background-color: rgba(36, 46, 92,1) !important;
|
||||
|
||||
}
|
||||
.ant-picker-header,.ant-picker-body{
|
||||
color: #fff !important;
|
||||
border-color: #242e5c;
|
||||
}
|
||||
.ant-picker-content th{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-picker-cell,
|
||||
.ant-picker-header-super-prev-btn,
|
||||
.ant-picker-header-prev-btn,
|
||||
.ant-picker-header-next-btn,
|
||||
.ant-picker-header-super-next-btn
|
||||
{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
|
||||
// background: transparent !important;
|
||||
color: #000;
|
||||
}
|
||||
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
|
||||
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
|
||||
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
|
||||
{
|
||||
background-color:transparent !important;
|
||||
}
|
||||
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
|
||||
background-color: #1890ff !important;
|
||||
}
|
||||
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
|
||||
// background-color:transparent !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
|
||||
{
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { Grid } from '@material-ui/core'
|
||||
import useDescStyle from './descstyle'
|
||||
|
||||
function Jbxx ({ record }) {
|
||||
const classes = useDescStyle()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ fontSize: '0.9rem', marginLeft: '1rem' }}>
|
||||
<Grid container className={classes.cont}>
|
||||
<Grid item className={classes.tit}>
|
||||
灌区名称
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.chanCode_dictText}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
水闸类型
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.wagaType_dictText??'--'}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
行政区划
|
||||
</Grid>
|
||||
<Grid item className={classes.value} style={{}}>
|
||||
{record?.adCode_dictText}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
管理单位
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.engManCode_dictText}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
渠道名称
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.chanCode_dictText}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
桩号
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.bnch}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
动力类型
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.pwrTp_dictText??'--'}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
闸门孔数
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.whthInWat??'--'}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
闸门尺寸
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
3*2.8m*m
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
设计流量
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.dsfl}m³/s
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
进口高程
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.actIrrA??'--'}m
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
实达流量
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.stfl??'--'}
|
||||
</Grid>
|
||||
<Grid item className={classes.tit}>
|
||||
运行状态
|
||||
</Grid>
|
||||
<Grid item className={classes.value}>
|
||||
{record?.runStat_dictText??'--'}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
<div className='boxfoot'></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Jbxx)
|
||||
|
|
@ -0,0 +1,310 @@
|
|||
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
|
||||
import { DatePicker } from 'antd';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import moment from 'moment';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import DescriptionItem from '../../components/DescrptionItem2';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
import { DateTimePicker } from '@material-ui/pickers';
|
||||
import React, { useEffect, useState,useMemo } from 'react';
|
||||
import './index.less'
|
||||
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);
|
||||
|
||||
|
||||
|
||||
const data = [
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"rz": 141.95,
|
||||
"du_value":-8.29,
|
||||
"dt": "2025-04-28"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-8.80,
|
||||
"rz": 141.95,
|
||||
"dt": "2025-04-29"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-9.13,
|
||||
"rz": 141.94,
|
||||
"dt": "2025-04-30"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.19,
|
||||
"rz": 141.95,
|
||||
"dt": "2025-05-01"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.29,
|
||||
"rz": 141.95,
|
||||
"dt": "2025-05-02"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.26,
|
||||
"rz": 141.94,
|
||||
"dt": "2025-05-03"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-9.31,
|
||||
"rz": 141.92,
|
||||
"dt": "2025-05-04"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-9.20,
|
||||
"rz": 142.03,
|
||||
"dt": "2025-05-05"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-9.66,
|
||||
"rz": 142.03,
|
||||
"dt": "2025-05-06"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-9.52,
|
||||
"rz": 142.03,
|
||||
"dt": "2025-05-07"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.40,
|
||||
"rz": 142.01,
|
||||
"dt": "2025-05-08"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-9.75,
|
||||
"rz": 142.22,
|
||||
"dt": "2025-05-09"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.25,
|
||||
"rz": 142.23,
|
||||
"dt": "2025-05-10"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.59,
|
||||
"rz": 142.27,
|
||||
"dt": "2025-05-11"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.98,
|
||||
"rz": 142.28,
|
||||
"dt": "2025-05-12"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.82,
|
||||
"rz": 142.28,
|
||||
"dt": "2025-05-13"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.72,
|
||||
"rz": 142.3,
|
||||
"dt": "2025-05-14"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-11.26,
|
||||
"rz": 142.28,
|
||||
"dt": "2025-05-15"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-12.16,
|
||||
"rz": 142.33,
|
||||
"dt": "2025-05-16"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-11.82,
|
||||
"rz": 142.33,
|
||||
"dt": "2025-05-17"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.92,
|
||||
"rz": 142.32,
|
||||
"dt": "2025-05-18"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.15,
|
||||
"rz": 142.36,
|
||||
"dt": "2025-05-19"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.09,
|
||||
"rz": 142.33,
|
||||
"dt": "2025-05-20"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-10.21,
|
||||
"rz": 142.33,
|
||||
"dt": "2025-05-21"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-11.62,
|
||||
"rz": 142.31,
|
||||
"dt": "2025-05-22"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-11.42,
|
||||
"rz": 142.41,
|
||||
"dt": "2025-05-23"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-9.74,
|
||||
"rz": 142.45,
|
||||
"dt": "2025-05-24"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-9.02,
|
||||
"rz": 142.45,
|
||||
"dt": "2025-05-25"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-8.37,
|
||||
"rz": 142.44,
|
||||
"dt": "2025-05-26"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-8.79,
|
||||
"rz": 142.45,
|
||||
"dt": "2025-05-27"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":-8.29,
|
||||
"rz": 142.4,
|
||||
"dt": "2025-05-28"
|
||||
}
|
||||
]
|
||||
|
||||
function DrpStAround({ record }) {
|
||||
const classes = useStyles();
|
||||
|
||||
const option = useMemo(() => {
|
||||
return drpOption(data);
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className='infoDlg_jcsj'>
|
||||
<div className='toolbar'>
|
||||
<div className='tm' style={{position:"relative",zIndex:999999}}>
|
||||
<RangePicker
|
||||
width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex:1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
allowClear
|
||||
format="YYYY-MM-DD"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={[moment('2025-04-28'),moment('2025-05-28')]}
|
||||
/>
|
||||
</div>
|
||||
<button className='search'>查询</button>
|
||||
</div>
|
||||
<div className='content' style={{height:"49vh"}}>
|
||||
<div className='list'>
|
||||
<TableContainer style={{ height: '100%' }} className={classes.tableContainer}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>时间</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>库水位(m)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>垂直位移(mm)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{
|
||||
data.map((row) => (
|
||||
<DpTableRow key={row.dt}>
|
||||
<DpTableCell align="center"><div className="ellipsis">{row.dt}</div></DpTableCell>
|
||||
<DpTableCell align="center">{row.rz?? "-"}</DpTableCell>
|
||||
<DpTableCell align="center">{row.du_value?? "-"}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<div className='echartBox'>
|
||||
<div className='echart1'>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='foot'>
|
||||
<Grid container size="small">
|
||||
<DescriptionItem label="最大值(m)" myWidth={'20%'}>-8.29</DescriptionItem>
|
||||
<DescriptionItem label="日期" myWidth={'20%'}>2025-04-28</DescriptionItem>
|
||||
<DescriptionItem label="最小值" myWidth={'20%'}>-12.16</DescriptionItem>
|
||||
<DescriptionItem label="日期" myWidth={'20%'}>2025-05-16</DescriptionItem>
|
||||
<DescriptionItem label="变幅(mm)" myWidth={'20%'}>3.97</DescriptionItem>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpStAround
|
||||
|
|
@ -29,7 +29,8 @@ import SbLayer from '../../MapCtrl/mapstyle/sblayer';
|
|||
import QdLayer from '../../MapCtrl/mapstyle/qdlayer';
|
||||
import ShuizhiLayer from '../../MapCtrl/mapstyle/shuizhilayer';
|
||||
import TrsqLayer from '../../MapCtrl/mapstyle/trsqlayer';
|
||||
import ScjcLayer from '../../MapCtrl/mapstyle/scjclayer'
|
||||
import ShuichangLayer from '../../MapCtrl/mapstyle/shuichangLayer'
|
||||
import ShuiyuandiLayer from '../../MapCtrl/mapstyle/shuiyuandiLayer'
|
||||
|
||||
|
||||
|
||||
|
|
@ -143,7 +144,10 @@ function LayersDlg({ onClose }) {
|
|||
<RowItem icon="土壤墒情" label="土壤墒情" name={TrsqLayer.LayerName} checked={!!layerVisible[TrsqLayer.LayerName]} onChange={layerVisibleChanged} />
|
||||
</div>
|
||||
<div className={classes.catItem}>
|
||||
<RowItem icon="水厂监测" label="水厂监测" name={ScjcLayer.LayerName} checked={!!layerVisible[ScjcLayer.LayerName]} onChange={layerVisibleChanged} />
|
||||
<RowItem icon="水厂监测" label="水厂监测" name={ShuichangLayer.LayerName} checked={!!layerVisible[ShuichangLayer.LayerName]} onChange={layerVisibleChanged} />
|
||||
</div>
|
||||
<div className={classes.catItem}>
|
||||
<RowItem icon="水源地" label="水源地" name={ShuiyuandiLayer.LayerName} checked={!!layerVisible[ShuiyuandiLayer.LayerName]} onChange={layerVisibleChanged} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
export default function drpOption(data) {
|
||||
return {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: "15%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
width: '80%',
|
||||
height: '75%'
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
// 图例的位置
|
||||
data: ['渗流量', '库水位'],
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.map(o => o.dt),//.reverse(),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
show:false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
inverse: false,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: "渗流量(L/s)",
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
// nameLocation: "start",
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max:300
|
||||
},
|
||||
{
|
||||
// gridIndex: 1,
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: "库水位(m)",
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 300
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
yAxisIndex: 0,
|
||||
name: '渗流量',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
color: "#0AE0B5",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data:data.map(o => o.low_z),
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '库水位',
|
||||
type: 'line',
|
||||
color: "#007AFD",
|
||||
symbol: 'none',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: data.map(o => o.rz),
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
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 DpTabs from '../../../../layouts/mui/DpTabs';
|
||||
import DpTab from '../../../../layouts/mui/DpTab';
|
||||
import RzSearch from '../../components/RzSearch';
|
||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||
import DrpSearch from '../../components/DrpSearch';
|
||||
import DrpStAround from '../../components/DrpStAround';
|
||||
import GqJcsj from '../../components/Hdjcsj'
|
||||
import Table from './table'
|
||||
|
||||
function HDStDlg({ 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={record.res_nm+'-'+record.cd_nm} />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
|
||||
<Table/>
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(HDStDlg);
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
.infoDlg_jcsj{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
height: 40vh;
|
||||
margin-top: 1vh;
|
||||
display: flex;
|
||||
|
||||
.list{
|
||||
width: 40%;
|
||||
}
|
||||
.echart{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.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,311 @@
|
|||
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
|
||||
import { DatePicker } from 'antd';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import moment from 'moment';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import DescriptionItem from '../../components/DescrptionItem2';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
import { DateTimePicker } from '@material-ui/pickers';
|
||||
import React, { useEffect, useState,useMemo } from 'react';
|
||||
import './index.less'
|
||||
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);
|
||||
|
||||
|
||||
|
||||
const data = [
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.08,
|
||||
"dt": "2025-04-28",
|
||||
"low_z": 0.38
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.08,
|
||||
"dt": "2025-04-29",
|
||||
"low_z": 0.29
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.08,
|
||||
"dt": "2025-04-30",
|
||||
"low_z": 0.29
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.08,
|
||||
"dt": "2025-05-01",
|
||||
"low_z": 0.27
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.07,
|
||||
"dt": "2025-05-02",
|
||||
"low_z": 0.28
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.07,
|
||||
"dt": "2025-05-03",
|
||||
"low_z": 0.17
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.06,
|
||||
"dt": "2025-05-04",
|
||||
"low_z": 0
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.1,
|
||||
"dt": "2025-05-05",
|
||||
"low_z": 0.71
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.04,
|
||||
"dt": "2025-05-06",
|
||||
"low_z": 0.43
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 70.98,
|
||||
"dt": "2025-05-07",
|
||||
"low_z": 0.34
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 70.97,
|
||||
"dt": "2025-05-08",
|
||||
"low_z": 1.73
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.3,
|
||||
"dt": "2025-05-09",
|
||||
"low_z": 0.71
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.33,
|
||||
"dt": "2025-05-10",
|
||||
"low_z": 0.56
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.35,
|
||||
"dt": "2025-05-11",
|
||||
"low_z": 0.47
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.35,
|
||||
"dt": "2025-05-12",
|
||||
"low_z": 0.38
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.35,
|
||||
"dt": "2025-05-13",
|
||||
"low_z": 0.3
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.35,
|
||||
"dt": "2025-05-14",
|
||||
"low_z": 0.29
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.38,
|
||||
"dt": "2025-05-15",
|
||||
"low_z": 0.63
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.4,
|
||||
"dt": "2025-05-16",
|
||||
"low_z": 0.45
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.41,
|
||||
"dt": "2025-05-17",
|
||||
"low_z": 0.38
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.41,
|
||||
"dt": "2025-05-18",
|
||||
"low_z": 0.34
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.41,
|
||||
"dt": "2025-05-19",
|
||||
"low_z": 0.3
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.41,
|
||||
"dt": "2025-05-20",
|
||||
"low_z": 0.27
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.41,
|
||||
"dt": "2025-05-21",
|
||||
"low_z": 0.25
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 71.41,
|
||||
"dt": "2025-05-22",
|
||||
"low_z": 3.81
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 72.04,
|
||||
"dt": "2025-05-23",
|
||||
"low_z": 2.26
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 72.15,
|
||||
"dt": "2025-05-24",
|
||||
"low_z": 0.75
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 72.19,
|
||||
"dt": "2025-05-25",
|
||||
"low_z": 0.68
|
||||
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 72.21,
|
||||
"dt": "2025-05-26",
|
||||
"low_z": 0.62
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 72.22,
|
||||
"dt": "2025-05-27",
|
||||
"low_z": 0.55
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140004",
|
||||
"rz": 72.22,
|
||||
"dt": "2025-05-28",
|
||||
"low_z": 0.54
|
||||
}
|
||||
]
|
||||
|
||||
function DrpStAround({ record }) {
|
||||
const classes = useStyles();
|
||||
|
||||
const option = useMemo(() => {
|
||||
return drpOption(data);
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className='infoDlg_jcsj'>
|
||||
<div className='toolbar'>
|
||||
<div className='tm' style={{position:"relative",zIndex:999999}}>
|
||||
<RangePicker
|
||||
width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex:1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
allowClear
|
||||
format="YYYY-MM-DD"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={[moment('2025-04-28'),moment('2025-05-28')]}
|
||||
/>
|
||||
</div>
|
||||
<button className='search'>查询</button>
|
||||
</div>
|
||||
<div className='content' style={{height:"49vh"}}>
|
||||
<div className='list'>
|
||||
<TableContainer style={{ height: '100%' }} className={classes.tableContainer}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>时间</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>库水位(m)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>渗流量(L/s)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{
|
||||
data.map((row) => (
|
||||
<DpTableRow key={row.dt}>
|
||||
<DpTableCell align="center"><div className="ellipsis">{row.dt}</div></DpTableCell>
|
||||
<DpTableCell align="center">{row.rz?? "-"}</DpTableCell>
|
||||
<DpTableCell align="center">{row.low_z?? "-"}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<div className='echartBox'>
|
||||
<div className='echart1'>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='foot'>
|
||||
<Grid container size="small">
|
||||
<DescriptionItem label="最大值(m)" myWidth={'20%'}>209.55</DescriptionItem>
|
||||
<DescriptionItem label="日期" myWidth={'20%'}>2025-04-28</DescriptionItem>
|
||||
<DescriptionItem label="最小值" myWidth={'20%'}>209.40</DescriptionItem>
|
||||
<DescriptionItem label="日期" myWidth={'20%'}>2025-05-20</DescriptionItem>
|
||||
<DescriptionItem label="变幅" myWidth={'20%'}>3.97</DescriptionItem>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpStAround
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
export default function drpOption(data) {
|
||||
return {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: "15%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
width: '80%',
|
||||
height: '75%'
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
// 图例的位置
|
||||
data: ['渗压水位', '库水位'],
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.map(o => o.dt),//.reverse(),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
show:false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
inverse: false,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: "渗压水位(m)",
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
// nameLocation: "start",
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max:300
|
||||
},
|
||||
{
|
||||
// gridIndex: 1,
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: "库水位(m)",
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 300
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
yAxisIndex: 0,
|
||||
name: '渗压水位',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
color: "#0AE0B5",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data:data.map(o => o.du_value),
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '库水位',
|
||||
type: 'line',
|
||||
color: "#007AFD",
|
||||
symbol: 'none',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: data.map(o => o.rz),
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
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 DpTabs from '../../../../layouts/mui/DpTabs';
|
||||
import DpTab from '../../../../layouts/mui/DpTab';
|
||||
import RzSearch from '../../components/RzSearch';
|
||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||
import DrpSearch from '../../components/DrpSearch';
|
||||
import DrpStAround from '../../components/DrpStAround';
|
||||
import GqJcsj from '../../components/Hdjcsj'
|
||||
import Table from './table'
|
||||
|
||||
function HDStDlg({ 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={record.res_nm+'-'+record.cd_nm} />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
|
||||
<Table/>
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(HDStDlg);
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
.infoDlg_jcsj{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
height: 40vh;
|
||||
margin-top: 1vh;
|
||||
display: flex;
|
||||
|
||||
.list{
|
||||
width: 40%;
|
||||
}
|
||||
.echart{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.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,304 @@
|
|||
import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
|
||||
import { DatePicker } from 'antd';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import moment from 'moment';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import DescriptionItem from '../../components/DescrptionItem2';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
import { DateTimePicker } from '@material-ui/pickers';
|
||||
import React, { useEffect, useState,useMemo } from 'react';
|
||||
import './index.less'
|
||||
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);
|
||||
|
||||
|
||||
|
||||
const data = [
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"rz": 141.95,
|
||||
"du_value":209.55,
|
||||
"dt": "2025-04-28"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.52,
|
||||
"rz": 141.95,
|
||||
"dt": "2025-04-29"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.48,
|
||||
"rz": 141.94,
|
||||
"dt": "2025-04-30"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.51,
|
||||
"rz": 141.95,
|
||||
"dt": "2025-05-01"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.47,
|
||||
"rz": 141.95,
|
||||
"dt": "2025-05-02"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.5,
|
||||
"rz": 141.94,
|
||||
"dt": "2025-05-03"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.46,
|
||||
"rz": 141.92,
|
||||
"dt": "2025-05-04"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.46,
|
||||
"rz": 142.03,
|
||||
"dt": "2025-05-05"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.49,
|
||||
"rz": 142.03,
|
||||
"dt": "2025-05-06"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.47,
|
||||
"rz": 142.03,
|
||||
"dt": "2025-05-07"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.41,
|
||||
"rz": 142.01,
|
||||
"dt": "2025-05-08"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.47,
|
||||
"rz": 142.22,
|
||||
"dt": "2025-05-09"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.54,
|
||||
"rz": 142.23,
|
||||
"dt": "2025-05-10"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.5,
|
||||
"rz": 142.27,
|
||||
"dt": "2025-05-11"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.46,
|
||||
"rz": 142.28,
|
||||
"dt": "2025-05-12"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.45,
|
||||
"rz": 142.28,
|
||||
"dt": "2025-05-13"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.48,
|
||||
"rz": 142.3,
|
||||
"dt": "2025-05-14"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.5,
|
||||
"rz": 142.28,
|
||||
"dt": "2025-05-15"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.47,
|
||||
"rz": 142.33,
|
||||
"dt": "2025-05-16"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.47,
|
||||
"rz": 142.33,
|
||||
"dt": "2025-05-17"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.47,
|
||||
"rz": 142.32,
|
||||
"dt": "2025-05-18"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.43,
|
||||
"rz": 142.36,
|
||||
"dt": "2025-05-19"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.4,
|
||||
"rz": 142.33,
|
||||
"dt": "2025-05-20"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.42,
|
||||
"rz": 142.33,
|
||||
"dt": "2025-05-21"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.42,
|
||||
"rz": 142.31,
|
||||
"dt": "2025-05-22"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.48,
|
||||
"rz": 142.41,
|
||||
"dt": "2025-05-23"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.54,
|
||||
"rz": 142.45,
|
||||
"dt": "2025-05-24"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.54,
|
||||
"rz": 142.45,
|
||||
"dt": "2025-05-25"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.53,
|
||||
"rz": 142.44,
|
||||
"dt": "2025-05-26"
|
||||
},
|
||||
{
|
||||
"res_cd": "42118140022",
|
||||
"du_value":209.52,
|
||||
"rz": 142.45,
|
||||
"dt": "2025-05-27"
|
||||
}
|
||||
]
|
||||
|
||||
function DrpStAround({ record }) {
|
||||
const classes = useStyles();
|
||||
|
||||
const option = useMemo(() => {
|
||||
return drpOption(data);
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className='infoDlg_jcsj'>
|
||||
<div className='toolbar'>
|
||||
<div className='tm' style={{position:"relative",zIndex:999999}}>
|
||||
<RangePicker
|
||||
width="100%"
|
||||
className='time-picker'
|
||||
style={{
|
||||
flex:1,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
allowClear
|
||||
format="YYYY-MM-DD"
|
||||
showTime={{
|
||||
format: 'HH:mm',
|
||||
}}
|
||||
value={[moment('2025-04-28'),moment('2025-05-28')]}
|
||||
/>
|
||||
</div>
|
||||
<button className='search'>查询</button>
|
||||
</div>
|
||||
<div className='content' style={{height:"49vh"}}>
|
||||
<div className='list'>
|
||||
<TableContainer style={{ height: '100%' }} className={classes.tableContainer}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>时间</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>库水位(m)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '20%' }}>渗压水位(m)</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{
|
||||
data.map((row) => (
|
||||
<DpTableRow key={row.dt}>
|
||||
<DpTableCell align="center"><div className="ellipsis">{row.dt}</div></DpTableCell>
|
||||
<DpTableCell align="center">{211.94?? "-"}</DpTableCell>
|
||||
<DpTableCell align="center">{row.du_value?? "-"}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<div className='echartBox'>
|
||||
<div className='echart1'>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='foot'>
|
||||
<Grid container size="small">
|
||||
<DescriptionItem label="最大值(m)" myWidth={'20%'}>209.55</DescriptionItem>
|
||||
<DescriptionItem label="日期" myWidth={'20%'}>2025-04-28</DescriptionItem>
|
||||
<DescriptionItem label="最小值" myWidth={'20%'}>209.40</DescriptionItem>
|
||||
<DescriptionItem label="日期" myWidth={'20%'}>2025-05-20</DescriptionItem>
|
||||
<DescriptionItem label="变幅(m)" myWidth={'20%'}>3.97</DescriptionItem>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpStAround
|
||||
|
|
@ -29,6 +29,9 @@ import LlsbDlg from './LlsbDlg';
|
|||
import BxjcDlg from './BxjcBlg'
|
||||
import ByjcDlg from './ByjcDlg'
|
||||
import PdfDlg from './PdfDlg'
|
||||
import SyjcDlg from './SyjcDlg'
|
||||
import SljcDlg from './SljcDlg'
|
||||
|
||||
|
||||
function InfoDlg() {
|
||||
const infoDlg = useSelector(getInfoDlg);
|
||||
|
|
@ -94,9 +97,9 @@ function InfoDlg() {
|
|||
}else if (layerId === 'BxjcLayer') {
|
||||
return <BxjcDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'SyjcLayer') {
|
||||
return <BxjcDlg record={properties} onClose={handleClose} />
|
||||
return <SyjcDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'SljcLayer') {
|
||||
return <BxjcDlg record={properties} onClose={handleClose} />
|
||||
return <SljcDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'ByjcLayer') {
|
||||
return <ByjcDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'PdfLayer') {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export const iconstyles = {
|
|||
|
||||
病险水库: { backgroundPosition: '0 -800%' },
|
||||
|
||||
变形监测: { backgroundPosition: '0% -40%',backgroundSize: '1890% 1650%' },
|
||||
变形监测: { backgroundPosition: '0% -40.5%',backgroundSize: '1890% 1650%' },
|
||||
渗压监测: { backgroundPosition: '5.5% -40%',backgroundSize: '1990% 1650%' },
|
||||
渗流监测: { backgroundPosition: '10.5% -40%',backgroundSize: '2394% 1650%' },
|
||||
白蚁监测: { backgroundPosition: '14.8% -40%',backgroundSize: '2394% 1650%' },
|
||||
|
|
@ -82,6 +82,7 @@ export const iconstyles = {
|
|||
水质: { backgroundPosition: '33.5% -40%',backgroundSize: '3295% 1650%' },
|
||||
土壤墒情: { backgroundPosition: '37.5% -40%',backgroundSize: '1895% 1650%' },
|
||||
水厂监测: { backgroundPosition: '0.5% -34%',backgroundSize: '1895% 1650%' },
|
||||
水源地: { backgroundPosition: '53.3% -106.7%',backgroundSize: '1597% 1550%' },
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5613,11 +5613,11 @@ export default class BzLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: InfoPopNames.PicStPop,
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ import SbLayer from "./sblayer"
|
|||
import QdLayer from "./qdlayer"
|
||||
import ShuizhiLayer from "./shuizhilayer"
|
||||
import TrsqLayer from "./trsqlayer"
|
||||
import ShuichangLayer from "./shuichangLayer"
|
||||
import ShuiyuandiLayer from "./shuiyuandiLayer"
|
||||
|
||||
|
||||
|
||||
|
|
@ -56,6 +58,13 @@ class LayerMgr {
|
|||
this.layers.push(new QdLayer());
|
||||
this.layers.push(new ShuizhiLayer());
|
||||
this.layers.push(new TrsqLayer());
|
||||
this.layers.push(new ShuichangLayer());
|
||||
this.layers.push(new ShuiyuandiLayer());
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.layers.push(new RealDrpLayer());
|
||||
this.layers.push(new RealHDLayer());
|
||||
this.layers.push(new RealSkLayer());
|
||||
|
|
@ -183,6 +192,9 @@ class LayerMgr {
|
|||
this.layerMap.QdLayer.getStyle(),
|
||||
this.layerMap.ShuizhiLayer.getStyle(),
|
||||
this.layerMap.TrsqLayer.getStyle(),
|
||||
this.layerMap.ShuichangLayer.getStyle(),
|
||||
this.layerMap.ShuiyuandiLayer.getStyle(),
|
||||
|
||||
|
||||
|
||||
this.layerMap.RivlLayer.getStyle('rivlLabel'),
|
||||
|
|
|
|||
|
|
@ -1341,15 +1341,15 @@ export default class QdLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
getFeatureTip(record) {
|
||||
return record.stnm;
|
||||
return '';
|
||||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: InfoPopNames.PicStPop,
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -769,15 +769,15 @@ export default class SbLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
getFeatureTip(record) {
|
||||
return record.stnm;
|
||||
return '';
|
||||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: InfoPopNames.PicStPop,
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,252 @@
|
|||
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 = '水源地';
|
||||
|
||||
const ShapeStyle = {
|
||||
id: SourceName,
|
||||
type: 'symbol',
|
||||
source: SourceName,
|
||||
layout: {
|
||||
'icon-allow-overlap': true,
|
||||
'text-allow-overlap': true,
|
||||
'icon-image': '水源地',
|
||||
'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 = [
|
||||
{
|
||||
"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": "漳河流域"
|
||||
},
|
||||
{
|
||||
"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": "漳河流域"
|
||||
}
|
||||
]
|
||||
|
||||
export default class ShuiyuandiLayer extends BaseLayer {
|
||||
|
||||
static LayerName = 'ShuiyuandiLayer';
|
||||
|
||||
static SourceName = SourceName;
|
||||
|
||||
getStyle() {
|
||||
|
||||
const ret = clone(ShapeStyle);
|
||||
this._setStyleVisibility(ret);
|
||||
return ret;
|
||||
|
||||
}
|
||||
|
||||
getName() {
|
||||
return ShuiyuandiLayer.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 + 2.9619
|
||||
obj.lttd = item.lttd + 0.2002
|
||||
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,
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
|
@ -4919,11 +4919,11 @@ export default class ShuiZhaLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: InfoPopNames.PicStPop,
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -539,15 +539,15 @@ export default class ShuizhiLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
getFeatureTip(record) {
|
||||
return record.stnm;
|
||||
return '';
|
||||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: InfoPopNames.PicStPop,
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ import SbLayer from "./sblayer";
|
|||
import QdLayer from "./qdlayer";
|
||||
import ShuizhiLayer from "./shuizhilayer";
|
||||
import TrsqLayer from "./trsqlayer";
|
||||
import ShuichangLayer from "./shuichangLayer";
|
||||
import ShuiyuandiLayer from "./shuiyuandiLayer";
|
||||
|
||||
|
||||
const hash = window.location.origin;
|
||||
|
|
@ -170,6 +172,17 @@ const sources = {
|
|||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[ShuichangLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[ShuiyuandiLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
|
||||
|
||||
|
||||
[RealDrpLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
|
|
|
|||
|
|
@ -238,15 +238,15 @@ export default class TrsqLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
getFeatureTip(record) {
|
||||
return record.stnm;
|
||||
return '';
|
||||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.PicStPop,
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
// dispatch.runtime.setFeaturePop({
|
||||
// type: InfoPopNames.PicStPop,
|
||||
// properties,
|
||||
// coordinates: [properties.lgtd, properties.lttd],
|
||||
// offsetPop: true,
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const AreaDrpChart = () => {
|
|||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '产水量m³',
|
||||
name: '个',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ function SkReal({ style }) {
|
|||
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="right">{renderDrp(row, tableSkDrpField)}</DpTableCell>
|
||||
<DpTableCell align="right">{renderSkRz(row)}</DpTableCell>
|
||||
<DpTableCell align="right">{row?.rz}</DpTableCell>
|
||||
<DpTableCell align="right">{renderSkArz(row)}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
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 clsx from 'clsx';
|
||||
import { renderDrp } from '../../../../utils/renutils';
|
||||
|
||||
|
||||
|
||||
function DrpReal({ style }) {
|
||||
|
||||
return (
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '5rem' }} align="center">水库名称</DpTableCell>
|
||||
<DpTableCell style={{ maxWidth: '20%' }} align="center">超汛限</DpTableCell>
|
||||
<DpTableCell style={{ maxWidth: '20%' }} align="center">方案</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{/* {data1.map((row,index) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell align="center">{index+1}</DpTableCell>
|
||||
<DpTableCell align="center">{row.res_nm}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))} */}
|
||||
<DpTableRow>
|
||||
<DpTableCell align="center">夏家山水库</DpTableCell>
|
||||
<DpTableCell align="center">12.1</DpTableCell>
|
||||
<DpTableCell align="center">夏家山水库超汛限预案</DpTableCell>
|
||||
</DpTableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
@ -13,6 +13,7 @@ import ARzSk from './ARzSk';
|
|||
import Hdyj from './Hdyj';
|
||||
import Shqx from './Shqx';
|
||||
import ShYj from './ShYj';
|
||||
import Cxxsk from './Cxxsk'
|
||||
|
||||
export default function Warn({ style }) {
|
||||
const t = useRefresh(60 * 1000);
|
||||
|
|
@ -55,7 +56,8 @@ export default function Warn({ style }) {
|
|||
}
|
||||
>
|
||||
{warnType === 'sh' ? <ShYj data={shyjData} /> : null}
|
||||
{warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null}
|
||||
{/* {warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null} */}
|
||||
{warnType === 'sk' ? <Cxxsk/> : null}
|
||||
{warnType === 'hd' ? <Hdyj data={hdyj} /> : null}
|
||||
{warnType === 'qx' ? <Shqx data={shqx} /> : null}
|
||||
</PanelBox>
|
||||
|
|
|
|||
Loading…
Reference in New Issue