增加图层
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%/d3.min.js"></script>
|
||||||
<script type="text/javascript" src="%PUBLIC_URL%/popmotion.xl.min.js"></script>
|
<script type="text/javascript" src="%PUBLIC_URL%/popmotion.xl.min.js"></script>
|
||||||
|
|
||||||
<title>麻城市防汛抗旱大数据监控平台</title>
|
<title>麻城市智慧水利一张图</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.lf {
|
.lf {
|
||||||
|
|
|
||||||
|
|
@ -289,7 +289,7 @@
|
||||||
},
|
},
|
||||||
"变形监测": {
|
"变形监测": {
|
||||||
"width": 26,
|
"width": 26,
|
||||||
"height": 32,
|
"height": 26,
|
||||||
"x": 0,
|
"x": 0,
|
||||||
"y": 288,
|
"y": 288,
|
||||||
"pixelRatio": 0.8,
|
"pixelRatio": 0.8,
|
||||||
|
|
@ -366,5 +366,21 @@
|
||||||
"y": 290,
|
"y": 290,
|
||||||
"pixelRatio": 0.5,
|
"pixelRatio": 0.5,
|
||||||
"visible": true
|
"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 = {
|
const config = {
|
||||||
address,
|
address,
|
||||||
title: '麻城市防汛抗旱大数据监控平台',
|
title: '麻城市智慧水利一张图',
|
||||||
ADCD,
|
ADCD,
|
||||||
ADCD6,
|
ADCD6,
|
||||||
ADCD12,
|
ADCD12,
|
||||||
|
|
|
||||||
|
|
@ -320,18 +320,53 @@ const map = {
|
||||||
layerVisible = {
|
layerVisible = {
|
||||||
RealDrpLayer: false,
|
RealDrpLayer: false,
|
||||||
RealHDLayer: false,
|
RealHDLayer: false,
|
||||||
RealSkLayer: true,
|
RealSkLayer: false,
|
||||||
BxSkLayer: false,
|
BxSkLayer: false,
|
||||||
FzdxLayer: false,
|
FzdxLayer: false,
|
||||||
WataLayer: false,
|
WataLayer: false,
|
||||||
AdcdLayer: true,
|
AdcdLayer: true,
|
||||||
RoadLayer: true,
|
RoadLayer: true,
|
||||||
RivlLayer: true,
|
RivlLayer: true,
|
||||||
|
ShuichangLayer:true,
|
||||||
|
ShuiyuandiLayer:true,
|
||||||
};
|
};
|
||||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||||
});
|
});
|
||||||
} 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 = {
|
layerVisible = {
|
||||||
RealDrpLayer: false,
|
RealDrpLayer: false,
|
||||||
RealHDLayer: 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 DrpSearch from '../../components/DrpSearch';
|
||||||
import DrpStAround from '../../components/DrpStAround';
|
import DrpStAround from '../../components/DrpStAround';
|
||||||
import GqJcsj from '../../components/Hdjcsj'
|
import GqJcsj from '../../components/Hdjcsj'
|
||||||
import GqJbxx from './jbxx';
|
import Table from './table'
|
||||||
import Gqspxx from '../GqbzDlg/spxx'
|
|
||||||
|
|
||||||
function HDStDlg({ record, onClose }) {
|
function HDStDlg({ record, onClose }) {
|
||||||
const [value, setValue] = React.useState(0);
|
const [value, setValue] = React.useState(0);
|
||||||
|
|
@ -31,18 +30,12 @@ function HDStDlg({ record, onClose }) {
|
||||||
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
|
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden' }}>
|
||||||
<DpAppBar position="sticky">
|
<DpAppBar position="sticky">
|
||||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||||
<DpTab label="监测数据" />
|
<DpTab label={record.res_nm+'-'+record.cd_nm} />
|
||||||
{/* <DpTab label="基本信息" /> */}
|
|
||||||
{/* <DpTab label="视频信息" /> */}
|
|
||||||
|
|
||||||
</DpTabs>
|
</DpTabs>
|
||||||
<DpCloseButton onClick={onClose} />
|
<DpCloseButton onClick={onClose} />
|
||||||
</DpAppBar>
|
</DpAppBar>
|
||||||
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
|
<div style={{ padding: '2rem', hminHeight: '50rem',maxHeight: '60rem' }}>
|
||||||
{value === 0 && <GqJcsj record={record} />}
|
<Table/>
|
||||||
{/* {value === 1 && <GqJbxx record={record} />} */}
|
|
||||||
{/* {value === 2 && <Gqspxx record={record} />} */}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</DialogContent>
|
</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 QdLayer from '../../MapCtrl/mapstyle/qdlayer';
|
||||||
import ShuizhiLayer from '../../MapCtrl/mapstyle/shuizhilayer';
|
import ShuizhiLayer from '../../MapCtrl/mapstyle/shuizhilayer';
|
||||||
import TrsqLayer from '../../MapCtrl/mapstyle/trsqlayer';
|
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} />
|
<RowItem icon="土壤墒情" label="土壤墒情" name={TrsqLayer.LayerName} checked={!!layerVisible[TrsqLayer.LayerName]} onChange={layerVisibleChanged} />
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.catItem}>
|
<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>
|
||||||
</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 BxjcDlg from './BxjcBlg'
|
||||||
import ByjcDlg from './ByjcDlg'
|
import ByjcDlg from './ByjcDlg'
|
||||||
import PdfDlg from './PdfDlg'
|
import PdfDlg from './PdfDlg'
|
||||||
|
import SyjcDlg from './SyjcDlg'
|
||||||
|
import SljcDlg from './SljcDlg'
|
||||||
|
|
||||||
|
|
||||||
function InfoDlg() {
|
function InfoDlg() {
|
||||||
const infoDlg = useSelector(getInfoDlg);
|
const infoDlg = useSelector(getInfoDlg);
|
||||||
|
|
@ -94,9 +97,9 @@ function InfoDlg() {
|
||||||
}else if (layerId === 'BxjcLayer') {
|
}else if (layerId === 'BxjcLayer') {
|
||||||
return <BxjcDlg record={properties} onClose={handleClose} />
|
return <BxjcDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'SyjcLayer') {
|
}else if (layerId === 'SyjcLayer') {
|
||||||
return <BxjcDlg record={properties} onClose={handleClose} />
|
return <SyjcDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'SljcLayer') {
|
}else if (layerId === 'SljcLayer') {
|
||||||
return <BxjcDlg record={properties} onClose={handleClose} />
|
return <SljcDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'ByjcLayer') {
|
}else if (layerId === 'ByjcLayer') {
|
||||||
return <ByjcDlg record={properties} onClose={handleClose} />
|
return <ByjcDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'PdfLayer') {
|
}else if (layerId === 'PdfLayer') {
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@ export const iconstyles = {
|
||||||
|
|
||||||
病险水库: { backgroundPosition: '0 -800%' },
|
病险水库: { backgroundPosition: '0 -800%' },
|
||||||
|
|
||||||
变形监测: { backgroundPosition: '0% -40%',backgroundSize: '1890% 1650%' },
|
变形监测: { backgroundPosition: '0% -40.5%',backgroundSize: '1890% 1650%' },
|
||||||
渗压监测: { backgroundPosition: '5.5% -40%',backgroundSize: '1990% 1650%' },
|
渗压监测: { backgroundPosition: '5.5% -40%',backgroundSize: '1990% 1650%' },
|
||||||
渗流监测: { backgroundPosition: '10.5% -40%',backgroundSize: '2394% 1650%' },
|
渗流监测: { backgroundPosition: '10.5% -40%',backgroundSize: '2394% 1650%' },
|
||||||
白蚁监测: { backgroundPosition: '14.8% -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: '33.5% -40%',backgroundSize: '3295% 1650%' },
|
||||||
土壤墒情: { backgroundPosition: '37.5% -40%',backgroundSize: '1895% 1650%' },
|
土壤墒情: { backgroundPosition: '37.5% -40%',backgroundSize: '1895% 1650%' },
|
||||||
水厂监测: { backgroundPosition: '0.5% -34%',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) {
|
featureClicked(properties, dispatch) {
|
||||||
dispatch.runtime.setFeaturePop({
|
// dispatch.runtime.setFeaturePop({
|
||||||
type: InfoPopNames.PicStPop,
|
// type: InfoPopNames.PicStPop,
|
||||||
properties,
|
// properties,
|
||||||
coordinates: [properties.lgtd, properties.lttd],
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
offsetPop: true,
|
// offsetPop: true,
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,8 @@ import SbLayer from "./sblayer"
|
||||||
import QdLayer from "./qdlayer"
|
import QdLayer from "./qdlayer"
|
||||||
import ShuizhiLayer from "./shuizhilayer"
|
import ShuizhiLayer from "./shuizhilayer"
|
||||||
import TrsqLayer from "./trsqlayer"
|
import TrsqLayer from "./trsqlayer"
|
||||||
|
import ShuichangLayer from "./shuichangLayer"
|
||||||
|
import ShuiyuandiLayer from "./shuiyuandiLayer"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -56,6 +58,13 @@ class LayerMgr {
|
||||||
this.layers.push(new QdLayer());
|
this.layers.push(new QdLayer());
|
||||||
this.layers.push(new ShuizhiLayer());
|
this.layers.push(new ShuizhiLayer());
|
||||||
this.layers.push(new TrsqLayer());
|
this.layers.push(new TrsqLayer());
|
||||||
|
this.layers.push(new ShuichangLayer());
|
||||||
|
this.layers.push(new ShuiyuandiLayer());
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.layers.push(new RealDrpLayer());
|
this.layers.push(new RealDrpLayer());
|
||||||
this.layers.push(new RealHDLayer());
|
this.layers.push(new RealHDLayer());
|
||||||
this.layers.push(new RealSkLayer());
|
this.layers.push(new RealSkLayer());
|
||||||
|
|
@ -183,6 +192,9 @@ class LayerMgr {
|
||||||
this.layerMap.QdLayer.getStyle(),
|
this.layerMap.QdLayer.getStyle(),
|
||||||
this.layerMap.ShuizhiLayer.getStyle(),
|
this.layerMap.ShuizhiLayer.getStyle(),
|
||||||
this.layerMap.TrsqLayer.getStyle(),
|
this.layerMap.TrsqLayer.getStyle(),
|
||||||
|
this.layerMap.ShuichangLayer.getStyle(),
|
||||||
|
this.layerMap.ShuiyuandiLayer.getStyle(),
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.layerMap.RivlLayer.getStyle('rivlLabel'),
|
this.layerMap.RivlLayer.getStyle('rivlLabel'),
|
||||||
|
|
|
||||||
|
|
@ -1341,15 +1341,15 @@ export default class QdLayer extends BaseLayer {
|
||||||
}
|
}
|
||||||
|
|
||||||
getFeatureTip(record) {
|
getFeatureTip(record) {
|
||||||
return record.stnm;
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
featureClicked(properties, dispatch) {
|
featureClicked(properties, dispatch) {
|
||||||
dispatch.runtime.setFeaturePop({
|
// dispatch.runtime.setFeaturePop({
|
||||||
type: InfoPopNames.PicStPop,
|
// type: InfoPopNames.PicStPop,
|
||||||
properties,
|
// properties,
|
||||||
coordinates: [properties.lgtd, properties.lttd],
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
offsetPop: true,
|
// offsetPop: true,
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -769,15 +769,15 @@ export default class SbLayer extends BaseLayer {
|
||||||
}
|
}
|
||||||
|
|
||||||
getFeatureTip(record) {
|
getFeatureTip(record) {
|
||||||
return record.stnm;
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
featureClicked(properties, dispatch) {
|
featureClicked(properties, dispatch) {
|
||||||
dispatch.runtime.setFeaturePop({
|
// dispatch.runtime.setFeaturePop({
|
||||||
type: InfoPopNames.PicStPop,
|
// type: InfoPopNames.PicStPop,
|
||||||
properties,
|
// properties,
|
||||||
coordinates: [properties.lgtd, properties.lttd],
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
offsetPop: true,
|
// 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) {
|
featureClicked(properties, dispatch) {
|
||||||
dispatch.runtime.setFeaturePop({
|
// dispatch.runtime.setFeaturePop({
|
||||||
type: InfoPopNames.PicStPop,
|
// type: InfoPopNames.PicStPop,
|
||||||
properties,
|
// properties,
|
||||||
coordinates: [properties.lgtd, properties.lttd],
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
offsetPop: true,
|
// offsetPop: true,
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -539,15 +539,15 @@ export default class ShuizhiLayer extends BaseLayer {
|
||||||
}
|
}
|
||||||
|
|
||||||
getFeatureTip(record) {
|
getFeatureTip(record) {
|
||||||
return record.stnm;
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
featureClicked(properties, dispatch) {
|
featureClicked(properties, dispatch) {
|
||||||
dispatch.runtime.setFeaturePop({
|
// dispatch.runtime.setFeaturePop({
|
||||||
type: InfoPopNames.PicStPop,
|
// type: InfoPopNames.PicStPop,
|
||||||
properties,
|
// properties,
|
||||||
coordinates: [properties.lgtd, properties.lttd],
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
offsetPop: true,
|
// offsetPop: true,
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,8 @@ import SbLayer from "./sblayer";
|
||||||
import QdLayer from "./qdlayer";
|
import QdLayer from "./qdlayer";
|
||||||
import ShuizhiLayer from "./shuizhilayer";
|
import ShuizhiLayer from "./shuizhilayer";
|
||||||
import TrsqLayer from "./trsqlayer";
|
import TrsqLayer from "./trsqlayer";
|
||||||
|
import ShuichangLayer from "./shuichangLayer";
|
||||||
|
import ShuiyuandiLayer from "./shuiyuandiLayer";
|
||||||
|
|
||||||
|
|
||||||
const hash = window.location.origin;
|
const hash = window.location.origin;
|
||||||
|
|
@ -170,6 +172,17 @@ const sources = {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
data: { type: 'FeatureCollection', features: [] },
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
},
|
},
|
||||||
|
[ShuichangLayer.SourceName]: {
|
||||||
|
type: 'geojson',
|
||||||
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
|
},
|
||||||
|
[ShuiyuandiLayer.SourceName]: {
|
||||||
|
type: 'geojson',
|
||||||
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
[RealDrpLayer.SourceName]: {
|
[RealDrpLayer.SourceName]: {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
data: { type: 'FeatureCollection', features: [] },
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
|
|
|
||||||
|
|
@ -238,15 +238,15 @@ export default class TrsqLayer extends BaseLayer {
|
||||||
}
|
}
|
||||||
|
|
||||||
getFeatureTip(record) {
|
getFeatureTip(record) {
|
||||||
return record.stnm;
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
featureClicked(properties, dispatch) {
|
featureClicked(properties, dispatch) {
|
||||||
dispatch.runtime.setFeaturePop({
|
// dispatch.runtime.setFeaturePop({
|
||||||
type: InfoPopNames.PicStPop,
|
// type: InfoPopNames.PicStPop,
|
||||||
properties,
|
// properties,
|
||||||
coordinates: [properties.lgtd, properties.lttd],
|
// coordinates: [properties.lgtd, properties.lttd],
|
||||||
offsetPop: true,
|
// offsetPop: true,
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -88,7 +88,7 @@ const AreaDrpChart = () => {
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
position: 'left',
|
position: 'left',
|
||||||
name: '产水量m³',
|
name: '个',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#B9BFC9',
|
color: '#B9BFC9',
|
||||||
fontSize: 10,//10,
|
fontSize: 10,//10,
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,7 @@ function SkReal({ style }) {
|
||||||
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
|
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
|
||||||
</DpTableCell>
|
</DpTableCell>
|
||||||
<DpTableCell align="right">{renderDrp(row, tableSkDrpField)}</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>
|
<DpTableCell align="right">{renderSkArz(row)}</DpTableCell>
|
||||||
</DpTableRow>
|
</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 Hdyj from './Hdyj';
|
||||||
import Shqx from './Shqx';
|
import Shqx from './Shqx';
|
||||||
import ShYj from './ShYj';
|
import ShYj from './ShYj';
|
||||||
|
import Cxxsk from './Cxxsk'
|
||||||
|
|
||||||
export default function Warn({ style }) {
|
export default function Warn({ style }) {
|
||||||
const t = useRefresh(60 * 1000);
|
const t = useRefresh(60 * 1000);
|
||||||
|
|
@ -55,7 +56,8 @@ export default function Warn({ style }) {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{warnType === 'sh' ? <ShYj data={shyjData} /> : null}
|
{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 === 'hd' ? <Hdyj data={hdyj} /> : null}
|
||||||
{warnType === 'qx' ? <Shqx data={shqx} /> : null}
|
{warnType === 'qx' ? <Shqx data={shqx} /> : null}
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue