防汛修稿

lsf-dev
秦子超 2025-06-05 16:39:29 +08:00
parent 3707b7a9ae
commit 1f498da5ef
25 changed files with 11777 additions and 1452 deletions

8360
public/data/drpReal2.json Normal file

File diff suppressed because it is too large Load Diff

92
public/data/pic.json Normal file
View File

@ -0,0 +1,92 @@
[
{
"stcd": "05566004",
"type": "pic",
"hasRz": false,
"stnm": "三河口镇小河沟图像站",
"adcd": "421181109014000",
"lgtd": 115.310397,
"lttd": 31.39211
},
{
"stcd": "05511105",
"type": "pic",
"hasRz": false,
"stnm": "木子店镇郑家榜图像站",
"adcd": "421181107011000",
"lgtd": 115.421127,
"lttd": 31.246292
},
{
"stcd": "05566003",
"type": "pic",
"hasRz": false,
"stnm": "龙池办虎形地图像站",
"adcd": "421181001013000",
"lgtd": 115.008805,
"lttd": 31.23537
},
{
"stcd": "05566005",
"type": "pic",
"hasRz": false,
"stnm": "中驿镇林寨图像站",
"adcd": "421181100006000",
"lgtd": 114.909063,
"lttd": 31.146058
},
{
"stcd": "05511104",
"type": "pic",
"hasRz": false,
"stnm": "木子店镇严家坳图像站",
"adcd": "421181107012000",
"lgtd": 115.406112,
"lttd": 31.254278
},
{
"stcd": "05566001",
"type": "pic",
"hasRz": false,
"stnm": "张家畈镇余家河图像站",
"adcd": "421181106017000",
"lgtd": 115.278691,
"lttd": 31.057429
},
{
"stcd": "05566002",
"type": "pic",
"hasRz": false,
"stnm": "阎家河镇柳林河图像站",
"adcd": "421181105006000",
"lgtd": 115.083333,
"lttd": 31.15
},
{
"stcd": "05511101",
"type": "pic",
"hasRz": false,
"stnm": "龟山镇九里冲图像站",
"adcd": "421181201013000",
"lgtd": 115.1952,
"lttd": 31.0379
},
{
"stcd": "05511102",
"type": "pic",
"hasRz": false,
"stnm": "龟山镇铺头坳图像站",
"adcd": "421181201009000",
"lgtd": 115.170265,
"lttd": 31.090787
},
{
"stcd": "05511103",
"type": "pic",
"hasRz": false,
"stnm": "龟山镇栗林口图像站",
"adcd": "421181201007000",
"lgtd": 115.178527,
"lttd": 31.123027
}
]

View File

@ -3666,7 +3666,7 @@
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 328.16,
"rz": 325.16,
"w": 0.132,
"a_fsltdz": 4.660000000000025,
"rzTm": "2025-04-11T05:00:00.000Z",

View File

@ -22,28 +22,25 @@ export const DrpRealPromise = new CachePromise(
// .catch(() => null),
// 5000
() => fetch(`${process.env.PUBLIC_URL}/data/drpReal.json`)
() => fetch(`${process.env.PUBLIC_URL}/data/drpReal2.json`)
.then((response) => response.json())
.then(data=>{
const cs = []
const list = data.map((item)=>{
const obj = {...item}
const num = item.lgtd.toString()||'0.000';
const num2 = Number(num.slice(num.length-1,num.length))
obj.h1 = item.h1+num2
obj.h3 = item.h3+num2*1.2
obj.h6 = item.h6+num2*1.5
obj.h12 = item.h12+num2*1.6
obj.h24 = item.h24+num2*1.8
obj.h48 = item.h48+num2*1.9
if(obj.h24<5){
cs.push(obj)
}
return obj
})
return list
}
)
// .then(data=>{
// const cs = []
// const list = data.map((item)=>{
// const obj = {...item}
// const num = item.lgtd.toString()||'0.000';
// const num2 = Number(num.slice(num.length-1,num.length))
// obj.h1 = item.h1+num2
// obj.h3 = item.h3+num2*1.2
// obj.h6 = item.h6+num2*1.5
// obj.h12 = item.h12+num2*1.6
// obj.h24 = item.h24+num2*1.8
// obj.h48 = item.h48+num2*1.9
// return obj
// })
// debugger
// return list
// })
.catch(() => null),
5000
);
@ -201,6 +198,10 @@ export const PicStPromise = new CachePromise(
() => httpget(apiurl.picst.list)
.then(({ data }) => data)
.catch(() => null)
// () => fetch(`${process.env.PUBLIC_URL}/data/overall.json`)
// .then((response) => response.json())
// .catch(() => null),
);
export const TestPicStPromise = new CachePromise(

View File

@ -365,6 +365,21 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 207) {
layerVisible = {
RealDrpLayer: false,
RealHDLayer: false,
RealSkLayer: true,
BxSkLayer: false,
FzdxLayer: false,
WataLayer: false,
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 301) {
layerVisible = {
RealDrpLayer: false,

View File

@ -312,9 +312,11 @@ export default function calcLayout(view, rightStack, hidePanels) {
} else if (view === 207) {
right = [
{ key: '警报' },
{ key: '关联站点',style: { height: '18rem', flexGrow: 1 } },
{ key: '关联站点',style: { height: '15rem', flexGrow: 1 } },
{ key: '水库水量统计',style: { height: '22rem' } },
{ key: '洪水防御',style: { height: '18rem', flexGrow: 1 } },
];
rightFullHeight = true;
} else if (view === 301) {
right = [
// { key: '警报' },

View File

@ -11,6 +11,7 @@ import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import DrpSearch from '../../components/DrpSearch';
import DrpStAround from '../../components/DrpStAround';
import ZrrPlan from './zrrPlan'
function HDStDlg({ record, onClose }) {
@ -32,6 +33,7 @@ function HDStDlg({ record, onClose }) {
<DpTab label="水位查询" />
<DpTab label="雨量查询" />
<DpTab label="周边雨量站" />
<DpTab label="责任人" />
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
@ -39,6 +41,7 @@ function HDStDlg({ record, onClose }) {
{value === 0 && <RzSearch record={record} />}
{value === 1 && <DrpSearch record={record} />}
{value === 2 && <DrpStAround record={record} />}
{value === 3 && <ZrrPlan />}
</div>
</DialogContent>

View File

@ -0,0 +1,66 @@
import { Grid } from '@material-ui/core';
import React from 'react';
import useRequest from '../../../../utils/useRequest';
import { skInfo } from '../../../../models/_/search';
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
import { Person } from '@material-ui/icons';
import PanelBox from '../../components/PanelBox';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
function SkInfo() {
const data = [
{ name:'防汛抗洪人民政府行政首长责任人', dm:'阎家河镇', hfsw:'戴凯', hfll:'乡', a:'阎家河镇人民政府',b:'党委副书记、镇长',c:'镇长' },
{ name:'河长制责任人', dm:'阎家河镇', hfsw:'刘俊', hfll:'乡', a:'阎家河镇人民政府',b:'党委书记'},
{ name:'河长制责任人', dm:'桃林河村', hfsw:'徐凯平', hfll:'村', a:'桃林河村',b:'村书记'},
{ name:'主管部门责任人', dm:'桃林河村', hfsw:'李伟', hfll:'乡', a:'阎家河镇人民政府',b:'党政办主任'},
{ name:'巡查管护责任人', dm:'桃林河村', hfsw:'徐定来', hfll:'村', a:'桃林河村',b:'主任'},
]
return (
<div>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow style={{padding:'30px 0'}}>
<DpTableCell style={{ maxWidth: '30%',padding:'15px' }} align="left">责任人类型</DpTableCell>
<DpTableCell align="center">责任人所在行政区名称</DpTableCell>
<DpTableCell align="center">责任人姓名</DpTableCell>
<DpTableCell align="center">责任人层级</DpTableCell>
<DpTableCell align="center">责任人单位</DpTableCell>
<DpTableCell align="center">责任人职务</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.dm}</DpTableCell>
<DpTableCell align="center">{row.hfsw}</DpTableCell>
<DpTableCell align="center">{row.hfll}</DpTableCell>
<DpTableCell align="center">{row.a}</DpTableCell>
<DpTableCell align="center">{row.b}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
)
}
export default SkInfo;

View File

@ -14,6 +14,7 @@ import SkInfo from '../../components/SkInfo';
import SkPlan from '../../components/SkInfo/SkPlan';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import ZrrPlan from './zrrPlan'
function SkDlg({ record, onClose }) {
@ -36,6 +37,7 @@ function SkDlg({ record, onClose }) {
<DpTab label="水位查询" />
<DpTab label="图像查询" />
<DpTab label="基础信息" />
<DpTab label="责任人" />
<DpTab label="水库预案" />
</DpTabs>
<DpCloseButton onClick={onClose} />
@ -45,7 +47,8 @@ function SkDlg({ record, onClose }) {
{value === 1 && <RzSearch record={record} />}
{value === 2 && <SkImgSearch record={record} />}
{value === 3 && <SkInfo record={record} />}
{value === 4 && <SkPlan record={record} />}
{value === 4 && <ZrrPlan />}
{value === 5 && <SkPlan record={record} />}
</div>
</DialogContent>

View File

@ -0,0 +1,56 @@
import { Grid } from '@material-ui/core';
import React from 'react';
import useRequest from '../../../../utils/useRequest';
import { skInfo } from '../../../../models/_/search';
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
import { Person } from '@material-ui/icons';
import PanelBox from '../../components/PanelBox';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
function SkInfo() {
const data = [
{ name:'行政责任人', dm:'郑家豪', hfsw:'龟山镇人民政府', hfll:'组织委员', tm:'05-29 14:00' },
{ name:'巡查责任人', dm:'熊中良', hfsw:'花桥河村', hfll:'书记', tm:'05-29 14:30' },
{ name:'技术责任人', dm:'余健', hfsw:'农业农村服务中心', hfll:'副主任', tm:'05-29 15:00' },
]
return (
<div>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow style={{padding:'30px 0'}}>
<DpTableCell style={{ maxWidth: '30%',padding:'15px' }} align="left">责任人</DpTableCell>
<DpTableCell align="center">姓名</DpTableCell>
<DpTableCell align="center">单位</DpTableCell>
<DpTableCell align="center">职务</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.dm}</DpTableCell>
<DpTableCell align="center">{row.hfsw}</DpTableCell>
<DpTableCell align="center">{row.hfll}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
)
}
export default SkInfo;

View File

@ -208,7 +208,8 @@ function DrpChart({ record }) {
useEffect(() => {
drpSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
const newData = record.test ? demoData : data;
// const newData = record.test ? demoData : data;
const newData = demoData;
setData(newData || []);
});
}, [])

View File

@ -112,6 +112,7 @@ function RealSkTip({ record, dispatch }) {
const classes = useStyles();
const [picData, setPicData] = useState({});
console.log('11111111', picData);
const [damGraph, setDamGraph] = useState();
const [picidx, setpicidx] = useState([1, 2]);
@ -149,14 +150,20 @@ function RealSkTip({ record, dispatch }) {
useEffect(() => {
skPicGet(record.stcd).then(data => {
if (data && data.length > 1) {
setPicData({
pic1: data[0].url,
pic2: data[1].url,
pic1Tm: moment(data[0].tm).format('YYYY-MM-DD HH:mm:ss'),
pic2Tm: moment(data[1].tm).format('YYYY-MM-DD HH:mm:ss'),
});
}
// if (data && data.length > 1) {
// setPicData({
// pic1: data[0].url,
// pic2: data[1].url,
// pic1Tm: moment(data[0].tm).format('YYYY-MM-DD HH:mm:ss'),
// pic2Tm: moment(data[1].tm).format('YYYY-MM-DD HH:mm:ss'),
// });
// }
setPicData({
"pic1": "http://223.75.53.106:8891/skjgimages/2023/1018/716130201/20231018100200.jpg",
"pic2": "http://223.75.53.106:8891/skjgimages/2023/1018/716130202/20231018100600.jpg",
"pic1Tm": "2023-10-18 10:02:00",
"pic2Tm": "2023-10-18 10:06:00"
})
})
}, []);
@ -191,25 +198,25 @@ function RealSkTip({ record, dispatch }) {
<div className={classes.infoItem}>
<div className="row-key">汛限水位:</div>
<div className="row-value">{record.fsltdz} {renderSkArz(record)}</div>
<div className="row-value">{record.fsltdz}</div>
<div className="row-unit"></div>
</div>
<div className={classes.infoItem}>
<div className="row-key">正常蓄水位:</div>
<div className="row-value">{record.zcxsw} {renderSkArz(record, 'zcxsw')}</div>
<div className="row-value">{record.zcxsw}</div>
<div className="row-unit"></div>
</div>
<div className={classes.infoItem}>
<div className="row-key">设计洪水位:</div>
<div className="row-value">{record.dsflz} {renderSkArz(record, 'dsflz')}</div>
<div className="row-value">{record.dsflz}</div>
<div className="row-unit"></div>
</div>
<div className={classes.infoItem}>
<div className="row-key">死水位:</div>
<div className="row-value">{record.ddz} {renderSkDdz(record, 'hjhsw')}</div>
<div className="row-value">{record.ddz}</div>
<div className="row-unit"></div>
</div>

View File

@ -98,7 +98,7 @@ export default class RealSkLayerQ2 extends BaseLayer {
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 328.16,
"rz": 325.16,
"w": 0.132,
"a_fsltdz": 4.660000000000025,
"rzTm": "2025-04-11T05:00:00.000Z",

View File

@ -110,7 +110,8 @@ import Ybcg from './panels/Ybcg'
import Yjcg from './panels/Yjcg'
import Ddcg from './panels/Ddcg'
import Fadb from './panels/Fadb'
import Sksltj from './panels/Sksltj'
import Hsfy from './panels/Hsfy'
@ -346,6 +347,10 @@ export default function PanelIndex({ name, style, ...params }) {
return <Ddcg style={style} />
} else if (name === '防汛方案对比') {
return <Fadb style={style} />
} else if (name === '水库水量统计') {
return <Sksltj style={style} />
} else if (name === '洪水防御') {
return <Hsfy style={style} />
}
return (

View File

@ -40,7 +40,7 @@ function SkPlan({ record }) {
return (
<div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
{ info ? <DpAlert style={{ flexShrink: 0, marginBottom: '1rem' }} severity="info">{info}</DpAlert> : null}
{/* { info ? <DpAlert style={{ flexShrink: 0, marginBottom: '1rem' }} severity="info">{info}</DpAlert> : null}
<div style={{ flexGrow: 1, height: '20rem' }}>
{
hasFile && (<iframe
@ -51,8 +51,8 @@ function SkPlan({ record }) {
src={url}
/>)
}
</div>
</div> */}
<iframe src={`${process.env.PUBLIC_URL}/assets/仰天窝水库(三里畈)防汛应急预案 -.pdf`} width="100%" height="100%"></iframe>
</div>
)
}

File diff suppressed because it is too large Load Diff

View File

@ -105,8 +105,8 @@ function HDReal({ style }) {
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="right">{renderHDRz(row)}</DpTableCell>
{rzRender(row.rz, row.rz+5)}
{rzRender(row.rz, row.rz+5.5)}
{rzRender(row.rz, row.rz+4)}
</DpTableRow>
))}
</TableBody>

File diff suppressed because it is too large Load Diff

View File

@ -100,7 +100,31 @@ export default function OverallContent({ data }) {
})
} else {
drpRealGet(obj).then((record) => {
_showRecord(record, InfoPopNames.RealDrpPop)
const data = {
"stcd": "61644250",
"stnm": "岐亭",
"adcd": null,
"wscd": null,
"importancy": 0,
"lgtd": 114.75161,
"lttd": 31.01175,
"elev": null,
"hasRz": false,
"type": "sw",
"today": 0.5,
"h1": 0.5,
"h3": 0.5,
"h6": 0.5,
"h12": 1,
"h24": 4.5,
"h48": 21,
"tm": "2025-06-03T02:00:00.000Z",
"state": 1,
"warning": 0
}
_showRecord(data, InfoPopNames.RealDrpPop)
});
}
}

View File

@ -201,7 +201,7 @@ function SkReal({ style }) {
{data.map((row) => (
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.stnm}</div>
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="center">{row.type}</DpTableCell>
<DpTableCell align="center">{row.w}</DpTableCell>

View File

@ -0,0 +1,337 @@
import React, { useMemo } from 'react';
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
const pallete = [
['#177ab3', '#51c3e7'],
['#9976dc', '#c792ee'],
['#94a1eb', '#a7caf8'],
['#7ae5c3', '#c9f4ea'],
['#c7dca5', '#f5fcd5'],
['#7988d9', '#9dc6f1'],
['#d9ed8f', '#d3f89b'],
];
const palleteLen = pallete.length;
const AreaDrpChart = ({tab}) => {
const x = [
"2025-06-02 15:00:00",
"2025-06-02 16:00:00",
"2025-06-02 17:00:00",
"2025-06-02 18:00:00",
"2025-06-02 19:00:00",
"2025-06-02 20:00:00",
"2025-06-02 21:00:00",
"2025-06-03 01:00:00",
"2025-06-03 02:00:00",
"2025-06-03 04:00:00",
"2025-06-03 06:00:00",
"2025-06-03 08:00:00",
"2025-06-03 10:00:00",
"2025-06-03 12:00:00",
"2025-06-03 13:00:00",
"2025-06-03 14:00:00"
]
let y = []
const y1 = [
134.15,
134.14,
134.23,
134.23,
134.22,
134.32,
134.32,
134,
133.99,
133.79,
133.77,
133.77,
133.67,
133.78,
133.67,
133.67
]
const y2 = [
134.23,
134.23,
134.22,
134.32,
134.32,
134,
133.99,
133.79,
134.15,
134.14,
133.77,
133.77,
133.67,
133.78,
133.67,
133.67
]
const y3 = [
133.77,
133.67,
133.78,
133.67,
133.67,
134.15,
134.14,
134.23,
134.23,
134.22,
134.32,
134.32,
134,
133.99,
133.79,
133.77,
]
const y4 = [
134.15,
134.14,
134.23,
133.67,
133.67,
134.23,
134.22,
134.32,
134.32,
134,
133.99,
133.79,
133.77,
133.77,
133.67,
133.78,
]
if(tab==='生态'){
y = y1
}else if(tab==='灌溉'){
y = y2
}else if(tab==='发电'){
y = y3
}else{
y = y4
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: false
}
},
// valueFormatter: (value) => value + ' 万m³'
},
grid: {
top: 42,
left: 50,
right: 20,
bottom: 27,
},
legend: {
data: ['流量'],
top: '8',
icon:'circle',
left: 'center',
itemWidth: 11,//11,
itemHeight: 11,//11,
textStyle: {
color: '#B9BFC9',
fontSize: 12,//12
}
},
xAxis: [
{
type: 'category',
data: x,
splitLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9' //X轴文字颜色
},
formatter: val => val.substr('2020-10-14 '.length, 5),
// rotate: 20, // 角度值Number
fontSize: 10,//10
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisTick: {
show: true,
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '流量m³/s',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 133,
max: 135,
},
// {
// type: 'value',
// position: 'right',
// name: '流量m³/s',
// nameTextStyle: {
// color: '#B9BFC9',
// fontSize: 10,//10,
// padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
// },
// nameGap: 17,
// splitLine: {
// show: true,
// lineStyle: {
// width: 1,
// color: 'rgba(255,255,255,0.2)'
// }
// },
// axisLabel: {
// show: true,
// textStyle: {
// color: '#B9BFC9',
// fontSize: 11,//11
// }
// },
// axisLine: {
// show: false
// },
// axisTick: {
// show: false,
// },
// min: 0,
// max: 30,
// }
],
series: [
{
name: '流量',
type: 'line',
barWidth: 10,
data: y,
showSymbol: false,
itemStyle: {
normal: {
color: '#32e1b5'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
// {
// yAxisIndex: 1,
// name: '入库流量',
// type: 'line',
// barWidth: 10,
// showSymbol: false,
// data: y1,
// itemStyle: {
// normal: {
// color: '#f19932'
// },
// },
// // label: {
// // show: true,
// // position: 'top',
// // color: '#bbb',
// // fontSize: 12,
// // textShadowBlur: 4,
// // textShadowColor: '#6ab',
// // },
// },
// {
// yAxisIndex: 1,
// name: '出库流量',
// type: 'line',
// barWidth: 10,
// showSymbol: false,
// data: y2,
// itemStyle: {
// normal: {
// color: '#e1554e'
// },
// },
// // label: {
// // show: true,
// // position: 'top',
// // color: '#bbb',
// // fontSize: 12,
// // textShadowBlur: 4,
// // textShadowColor: '#6ab',
// // },
// }
]
};
return (
<ReactEcharts
option={option}
style={{ height: '99%', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

View File

@ -0,0 +1,267 @@
import React, { useMemo, useState } from 'react';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import PanelBox from '../../components/PanelBox';
import config from '../../../../config';
import { useDispatch, useSelector } from 'react-redux';
import AreaDrpChart from './chart';
import clsx from 'clsx';
function DrpReal({ style }) {
const [tab,setTab] = useState('生态')
const dispatch = useDispatch();
const data = [
{
"stcd": "61614200",
"type": "sk",
"hasRz": true,
"stnm": "浮桥河水库",
"adcd": "421181100000",
"wscd": null,
"importancy": 0,
"lgtd": 114.875,
"lttd": 31.166667,
"elev": 0,
"damel": 71.33,
"dsflz": 68.04,
"fsltdz": 64.89,
"ddz": 51.78,
"zcxsw": 64.89,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 16.5,
"drpState": 1,
"rz": 60.71,
"w": 162.8,
"a_fsltdz": -4.18,
"rzTm": "2025-06-03T02:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"aRz": -4.18
},{
"stcd": "61612610",
"type": "sk",
"hasRz": true,
"stnm": "三河口水库",
"adcd": "421181109000",
"wscd": null,
"importancy": 0,
"lgtd": 115.166667,
"lttd": 31.333333,
"elev": 0,
"damel": 156.8,
"dsflz": 154.99,
"fsltdz": 149,
"ddz": 124,
"zcxsw": 149,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 12.5,
"drpState": 1,
"rz": 141.45,
"w": 77.8,
"a_fsltdz": -7.550000000000011,
"rzTm": "2025-06-03T01:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"aRz": -7.55
},{
"stcd": "61613010",
"type": "sk",
"hasRz": true,
"stnm": "明山水库",
"adcd": "421181103000",
"wscd": null,
"importancy": 0,
"lgtd": 115.066667,
"lttd": 31.016667,
"elev": 0,
"damel": 98.7,
"dsflz": 96.07,
"fsltdz": 93,
"ddz": 78.02,
"zcxsw": 93,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 12.5,
"drpState": 1,
"rz": 84.43,
"w": 49.5,
"a_fsltdz": -8.569999999999993,
"rzTm": "2025-06-03T02:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"aRz": -8.57
},{
"stcd": "716113901",
"type": "sk",
"hasRz": true,
"stnm": "铺头坳水库",
"adcd": "421181201000",
"wscd": null,
"importancy": 0,
"lgtd": 115.169444,
"lttd": 31.090278,
"elev": 0,
"damel": 266.7,
"dsflz": 265.54,
"fsltdz": 264.3,
"ddz": 256,
"zcxsw": 264.3,
"drpTm": "2025-04-11T05:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 263.16,
"w": 0.991,
"a_fsltdz": -1.1399999999999864,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"pic": [
{
"stcd": "716113901",
"tm": "2023-03-12T08:02:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg"
},
{
"stcd": "716113901",
"tm": "2023-03-12T07:15:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg"
}
],
"aRz": -1.14
},{
"stcd": "716111701",
"type": "sk",
"hasRz": true,
"stnm": "桐枧冲水库",
"adcd": "421181110000",
"wscd": null,
"importancy": 0,
"lgtd": 115.135278,
"lttd": 31.3925,
"elev": 0,
"damel": 276.56,
"dsflz": 273.66,
"fsltdz": 269.86,
"ddz": 256.76,
"zcxsw": 269.86,
"drpTm": "2025-04-11T05:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 265.12,
"w": 0.689,
"a_fsltdz": -4.740000000000009,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"pic": [
{
"stcd": "716111701",
"tm": "2023-03-12T07:03:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg"
},
{
"stcd": "716111701",
"tm": "2023-03-12T07:27:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg"
}
],
"aRz": -4.74
},
]
return (
<PanelBox
style={style}
title="水量统计"
color="green"
extra={
<>
<span className="button-group">
<span className={clsx({ active: tab==='生态' })} onClick={() => {
// dispatch.map.setLayerVisible({'BxjcLayer':true});
// dispatch.map.setLayerVisible({'SyjcLayer':false});
// dispatch.map.setLayerVisible({'SljcLayer':false});
// dispatch.map.setLayerVisible({'ByjcLayer':false});
setTab('生态')
}}>生态</span>
<span className={clsx({ active: tab==='灌溉' })} onClick={() => {
// dispatch.map.setLayerVisible({'BxjcLayer':false});
// dispatch.map.setLayerVisible({'SyjcLayer':true});
// dispatch.map.setLayerVisible({'SljcLayer':false});
// dispatch.map.setLayerVisible({'ByjcLayer':false});
setTab('灌溉')
}}>灌溉</span>
<span className={clsx({ active: tab==='发电' })} onClick={() => {
// dispatch.map.setLayerVisible({'BxjcLayer':false});
// dispatch.map.setLayerVisible({'SyjcLayer':false});
// dispatch.map.setLayerVisible({'SljcLayer':true});
// dispatch.map.setLayerVisible({'ByjcLayer':false});
setTab('发电')
}}>发电</span>
<span className={clsx({ active: tab==='泄洪' })} onClick={() => {
// dispatch.map.setLayerVisible({'BxjcLayer':false});
// dispatch.map.setLayerVisible({'SyjcLayer':false});
// dispatch.map.setLayerVisible({'SljcLayer':false});
// dispatch.map.setLayerVisible({'ByjcLayer':true});
setTab('泄洪')
}}>泄洪</span>
</span>
</>
}
>
{
tab==='生态'?
<div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>15.26</span> m³/s</div>
<div style={{textAlign:'center'}}>生态流量站(2025-06-02 09:00)</div>
</div>
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>441.12</span> m³</div>
<div style={{marginTop:'5px'}}>月供水量</div>
</div>
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>371.12</span> m³</div>
<div style={{marginTop:'5px'}}>年供水量</div>
</div>
</div>
:null
}
<div style={{width:'100%',height:'12rem'}}>
<AreaDrpChart data={[]} tab={tab} />
</div>
</PanelBox>
)
}
export default DrpReal;

View File

@ -61,7 +61,7 @@ function ARzSk({ data }) {
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 328.16,
"rz": 325.16,
"w": 0.132,
"a_fsltdz": 4.660000000000025,
"rzTm": "2025-04-11T05:00:00.000Z",
@ -89,7 +89,7 @@ function ARzSk({ data }) {
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
center: [lgtd, lttd+0.005],
zoom: 15,
pitch: config.poiPitch,
});

View File

@ -43,7 +43,7 @@ function Item({ data, viewInfo, flyTo }) {
<span>更新: {tm2}</span>
) : null
}
<a style={{ cursor: 'pointer' }} onClick={() => viewInfo(data)}>处理</a>
{/* <a style={{ cursor: 'pointer' }} onClick={() => viewInfo(data)}>处理</a> */}
</div>
</div>
</div>