lishenfeng
/
mcfxkh-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 水厂开发

lsf-dev
李神峰 2025-05-27 16:35:13 +08:00
parent 828cfc6dbf
commit 76eef743e6
47 changed files with 5498 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/scdd.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB

37
src/models/map/layout.js
View File

@ -96,7 +96,27 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '日供水量',style: { height: '16rem', flexGrow: 1 } },
{ key: '供水覆盖率',style: { height: '16rem', flexGrow: 1 } },
];
} else if (view === 501) {
}else if (view === 305) {
left = [
{ key: '供水量统计', style: { height: '30rem', flexGrow: 1 } },
{ key: '取水量统计', style: { height: '40rem', flexGrow: 1 } },
];
leftFullHeight = true;
}
else if (view === 306) {
left = [
{ key: '管线', style: { height: '30rem', flexGrow: 1 } },
{ key: '数量及里程分布', style: { height: '40rem', flexGrow: 1 } },
{ key: '管网监测数据', style: { height: '40rem', flexGrow: 1 } },
];
leftFullHeight = true;
}
else if (view === 307) {
left = [
{ key: '预案库管理', style: { height: '40rem', flexGrow: 1 } },
];
leftFullHeight = true;
}else if (view === 501) {
left = [
{ key: '雨量监测',style: { height: '33%', flexGrow: 1 } },
{ key: '水情监测', style: { height: '33%', flexGrow: 1 } },
@ -209,7 +229,20 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '供水监控', style: { flexGrow: 1 } },
rightFullHeight = true
];
} else if (view === 501) {
}else if (view === 305) {
right = [
{ key: '电耗统计', style: { height: '100%', flexGrow: 1 } },
];
rightFullHeight = true;
}
else if (view === 306) {
right = [
{ key: '漏损排行榜', style: { height: '50%', flexGrow: 1 } },
{ key: '最小流量', style: { height: '50%', flexGrow: 1 } },
];
rightFullHeight = true;
}
else if (view === 501) {
right = [
{ key: '水质监测',style: { height: '33%', flexGrow: 1 } },
{ key: '土壤墒情监测', style: { height: '33%', flexGrow: 1 } },

11
src/models/runtime/index.js
View File

@ -13,9 +13,10 @@ function initState() {
featurePops: [],
layerSetting: {
},
yyObj:{},
yyObj: {},
gwobj:undefined,
markers: {}, // type -> [{ id, lgtd, lttd, elev }]
scya:undefined,
warnresp: {},
warnrespTick: 1,
}
@ -30,6 +31,12 @@ const runtime = {
setYyfa(state, props) {
return { ...state, yyObj: props }
},
setGwtc(state, props) {
return { ...state, gwobj: props }
},
setScya(state, props) {
return { ...state, scya: props }
},
setLogoDisplaying(state, val) {
return { ...state, logoDisplaying: val }
},

5
src/views/Home/InfoDlg/LayersDlg/index.js
View File

@ -29,7 +29,7 @@ import SbLayer from '../../MapCtrl/mapstyle/sblayer';
import QdLayer from '../../MapCtrl/mapstyle/qdlayer';
import ShuizhiLayer from '../../MapCtrl/mapstyle/shuizhilayer';
import TrsqLayer from '../../MapCtrl/mapstyle/trsqlayer';
import ScjcLayer from '../../MapCtrl/mapstyle/scjclayer'
@ -142,6 +142,9 @@ function LayersDlg({ onClose }) {
<div className={classes.catItem}>
<RowItem icon="土壤墒情" label="土壤墒情" name={TrsqLayer.LayerName} checked={!!layerVisible[TrsqLayer.LayerName]} onChange={layerVisibleChanged} />
</div>
<div className={classes.catItem}>
<RowItem icon="水厂监测" label="水厂监测" name={ScjcLayer.LayerName} checked={!!layerVisible[ScjcLayer.LayerName]} onChange={layerVisibleChanged} />
</div>
</div>
<div className={classes.catRoot}>

2
src/views/Home/InfoDlg/OverallSmtp/index.js
View File

@ -29,7 +29,7 @@ function OverallSmtp({ record, onClose }) {
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden' }}>
<DpAppBar position="sticky">
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1 }}>
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1,color:'#fff' }}>
24时报讯
</Typography>
<DpCloseButton onClick={onClose} />

223
src/views/Home/InfoPops/ScJcPop/HDChart.js Normal file
View File

@ -0,0 +1,223 @@
import React, { useEffect, useMemo, useState } from 'react'
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { makeStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { rzSearch } from '../../../../models/_/search';
const useStyles = makeStyles({
grid: {
color: '#fff',
padding: '1rem',
},
realdrpgrid: {
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
margin: '0.5rem 0'
}
})
function HDChart({ record }) {
const classes = useStyles();
const [data, setData] = useState([]);
const tm = [moment().add(-24, 'hour'), moment()];
const resultTm = normalizeSearchTmRange(tm, 'h');
useEffect(() => {
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
setData(data || []);
});
}, [])
const option = useMemo(() => {
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
let sorted = data.map(o => o.z);
const markLine = [];
const { sfz, wrz, grz } = record;
if (sfz) {
sorted.push(sfz);
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
}
if (wrz) {
sorted.push(wrz);
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
}
if (grz) {
sorted.push(grz);
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
}
sorted = sorted.sort();
let minVal = sorted[0] || 0;
let maxVal = sorted[sorted.length - 1] || 0;
let dz = 0.5;
maxVal = Math.ceil(maxVal / dz) * dz;
minVal = Math.floor(minVal / dz) * dz;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#fff'
}
}
},
grid: {
x: markLine.length > 0 ? 64 : 24,
y: 24,
x2: 38,
y2: 42,
borderWidth: 0
},
calculable: true,
xAxis: [
{
type: 'time',
splitLine: {
show: false
},
axisLabel: {
color: '#bbb',
fontSize: 9,
textShadowBlur: 4,
textShadowColor: '#6ab',
// formatter: val => val.substr('2020-10-14 '.length, 2)
},
axisLine: {
lineStyle: {
color: '#07a6ff',
width: 0.5,
}
},
axisTick: {
show: false,
}
}
],
yAxis: [
{
type: 'value',
position: 'right',
splitLine: {
show: true,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dashed'
}
},
axisLabel: {
color: '#bbb',
fontSize: 10,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: minVal,
max: maxVal
}
],
series: [
{
name: '水位',
type: 'line',
showSymbol: false,
label: {
show: false,
},
data: serialData,
lineStyle: {
normal: {
width: 1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(3, 194, 236, 0.3)'
}, {
offset: 0.8,
color: 'rgba(3, 194, 236, 0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#03C2EC'
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
]
},
markLine: {
silent: true,
symbol: 'none',
label: {
position: 'start',
formatter: (p) => p?.name + ' ' + p?.value,
},
data: markLine
}
}
]
};
}, [data]);
const rtm = record.rzTm || record.tm;
return (
<>
<ReactEcharts
option={option}
style={{ height: '15rem', width: '30rem' }}
/>
<div className={classes.grid}>
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
<div className={classes.realdrpgrid}>
<div className="item">
<Typography variant="caption">水位</Typography>
<Typography variant="h5">{renderHDRz(record)}</Typography>
</div>
<div className="item">
<Typography variant="caption">设防水位</Typography>
<Typography variant="h5">{record.sfz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">警戒水位</Typography>
<Typography variant="h5">{record.wrz || '--'}</Typography>
</div>
<div className="item">
<Typography variant="caption">保证水位</Typography>
<Typography variant="h5">{record.grz || '--'}</Typography>
</div>
</div>
</div>
</>
)
}
export default React.memo(HDChart);

41
src/views/Home/InfoPops/ScJcPop/index.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react'
import { makeStyles } from '@material-ui/core';
import HDChart from './HDChart';
import { Grid } from '@material-ui/core';
import useDescStyle from '../_/descstyle';
function RealHDTip({ record, dispatch }) {
const classes = useDescStyle();
const viewInfo = () => {
dispatch?.runtime.setInfoDlg({ layerId: 'llsbLayer', properties: record })
}
return (
<>
<div className="boxhead"></div>
<div className="featuretip-title">
<div className="name">{record.stnm}</div>
{/* <div className="extra cursor-pointer" onClick={viewInfo}>详细</div> */}
</div>
<div style={{ width: '25rem' }} className='f_14'>
<Grid container>
<Grid item className={classes.title}>压力:</Grid>
<Grid item className={classes.value}>{record.press}(Mpa)</Grid>
<Grid item className={classes.title}>流量:</Grid>
<Grid item className={classes.value}>{record.flow}(m³/h)</Grid>
<Grid item className={classes.title}>水质合格率:</Grid>
<Grid item className={classes.value}>{record.hg}%</Grid>
<Grid item className={classes.title}>采集时间:</Grid>
<Grid item className={classes.value}>2025-05-27 15：:25：:00</Grid>
</Grid>
</div>
<div className="boxfoot"></div>
</>
)
}
export default React.memo(RealHDTip);

1
src/views/Home/InfoPops/_/layericons.js
View File

@ -81,6 +81,7 @@ export const iconstyles = {
渠道: { backgroundPosition: '30.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%' },

3
src/views/Home/InfoPops/index.js
View File

@ -26,6 +26,7 @@ import SzPop from './SzPop'
import SqPop from './SqPop';
import LlqdPop from './LlqdPop';
import LlsbPop from './LlsbPop';
import ScjcPop from './ScJcPop';
export const InfoPopNames = {
RealSkPop: 'RealSkPop',
RealHDPop: 'RealHDPop',
@ -89,6 +90,8 @@ export const InfoPops = ({ type, properties, dispatch }) => {
return <LlqdPop record={properties} dispatch={dispatch} />
}else if (type === '流量水表站') {
return <LlsbPop record={properties} dispatch={dispatch} />
}else if (type === '监测站') {
return <ScjcPop record={properties} dispatch={dispatch} />
}
return null;

252
src/views/Home/MapCtrl/mapstyle/scjclayer.js Normal file
View File

@ -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 TrsqLayer extends BaseLayer {
static LayerName = 'ScjcLayer';
static SourceName = SourceName;
getStyle() {
const ret = clone(ShapeStyle);
this._setStyleVisibility(ret);
return ret;
}
getName() {
return TrsqLayer.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 record.stnm;
}
featureClicked(properties, dispatch) {
dispatch.runtime.setFeaturePop({
type: InfoPopNames.PicStPop,
properties,
coordinates: [properties.lgtd, properties.lttd],
offsetPop: true,
});
}
}

27
src/views/Home/PanelIndex.js
View File

@ -61,6 +61,15 @@ import Rgsl from './panels/Rgsl'
import Dbfx from './panels/Dbfx'
import Gsjk from './panels/Gsjk'
import YaRes from './panels/YaRes'
import Yakgl from './panels/Yakgl'
import Gwjc from './panels/Gwjc'
import Gx from './panels/Gx'
import Gwsllc from './panels/Gwsllc'
import Lsphb from './panels/lsphb'
import Gxzxll from './panels/Gxzxll'
import Gsl from './panels/Gwgsl'
import Qsl from './panels/Gwqsl'
import Dhtj from './panels/Gwdh'
export default function PanelIndex({ name, style, ...params }) {
if (name === '天气') {
return (
@ -156,6 +165,8 @@ export default function PanelIndex({ name, style, ...params }) {
return <Spjc style={style} />
} else if (name === '水库管理') {
return <Skgl style={style} />
}else if (name === '预案库管理') {
return <Yakgl style={style} />
} else if (name === '防汛调度') {
return <Fxdd style={style} />
}else if (name === '灌区统计') {
@ -186,6 +197,22 @@ export default function PanelIndex({ name, style, ...params }) {
return <Dbfx style={style} />
} else if (name === '供水监控') {
return <Gsjk style={style} />
} else if (name == '管网监测数据') {
return <Gwjc style={style}/>
} else if (name == '管线') {
return <Gx style={style}/>
}else if (name == '数量及里程分布') {
return <Gwsllc style={style}/>
}else if (name == '漏损排行榜') {
return <Lsphb style={style}/>
}else if (name == '最小流量') {
return <Gxzxll style={style}/>
}else if (name == '供水量统计') {
return <Gsl style={style}/>
}else if (name == '取水量统计') {
return <Qsl style={style}/>
}else if (name == '电耗统计') {
return <Dhtj style={style}/>
}
return (

143
src/views/Home/components/ActionDock/index.js
View File

@ -5,51 +5,64 @@ import { useDispatch, useSelector } from 'react-redux';
import { makeStyles, Tooltip, Typography } from '@material-ui/core';
const VIEWS = [
{ id: 100, title: '防汛', img: '/assets/menu/防洪形势.png',children:[
{ id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
{ id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
{ id: 6, title: '水库调度', img: '/assets/menu/病险水库.png' },
{ id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
{ id: 3, title: '辅助决策', img: '/assets/menu/辅助决策.png' },
{ id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
{ id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
] },
{ id: 200, title: '水库', img: '/assets/menu/实时数据.png',children:[
{ id: 201, title: '雨情监测', img: '/assets/menu/降雨中心.png' },
{ id: 202, title: '水情监测', img: '/assets/menu/水利设施.png' },
{ id: 203, title: '安全监测', img: '/assets/menu/降雨中心.png' },
{ id: 204, title: '视频监控', img: '/assets/menu/辅助决策.png' },
{ id: 205, title: '防汛调度', img: '/assets/menu/辅助决策.png' },
{ id: 206, title: '水库管理', img: '/assets/menu/病险水库.png' },
] },
{ id: 300, title: '水厂', img: '/assets/menu/水利设施.png',children:[
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
{
id: 100, title: '防汛', img: '/assets/menu/防洪形势.png', children: [
{ id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
{ id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
{ id: 6, title: '水库调度', img: '/assets/menu/病险水库.png' },
{ id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
{ id: 3, title: '辅助决策', img: '/assets/menu/辅助决策.png' },
{ id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
{ id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
]
},
{
id: 200, title: '水库', img: '/assets/menu/实时数据.png', children: [
{ id: 201, title: '雨情监测', img: '/assets/menu/降雨中心.png' },
{ id: 202, title: '水情监测', img: '/assets/menu/水利设施.png' },
{ id: 203, title: '安全监测', img: '/assets/menu/降雨中心.png' },
{ id: 204, title: '视频监控', img: '/assets/menu/辅助决策.png' },
{ id: 205, title: '防汛调度', img: '/assets/menu/辅助决策.png' },
{ id: 206, title: '水库管理', img: '/assets/menu/病险水库.png' },
]
},
{
id: 300, title: '水厂', img: '/assets/menu/水利设施.png', children: [
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
// 供水态势
// 水质安全
// 水厂运行
// 管网健康诊断
// 应急指挥调度
// 决策支持与报表
] },
{ id: 306, title: '管网健康诊断', img: '/assets/menu/水利设施.png' },
{ id: 307, title: '应急指挥调度', img: '/assets/menu/病险水库.png' },
{ id: 305, title: '决策支持与报表', img: '/assets/menu/辅助决策.png' },
// 供水态势
// 水质安全
// 水厂运行
// 管网健康诊断
// 应急指挥调度
// 决策支持与报表
]
},
{
id: 400, title: '灌区', img: '/assets/menu/预警分析.png', children: [
{ id: 501, title: '灌区监测', img: '/assets/menu/防洪形势.png' },
{ id: 504, title: '水旱灾害防御', img: '/assets/menu/水利设施.png' },
// { id: 502, title: '预警信息管理', img: '/assets/menu/实时数据.png' },
{ id: 503, title: '水资源调度', img: '/assets/menu/病险水库.png' },
{ id: 505, title: '量测水管理', img: '/assets/menu/辅助决策.png' },
{ id: 506, title: '水政管理', img: '/assets/menu/预警分析.png' },
{ id: 507, title: '工程管理', img: '/assets/menu/降雨中心.png' },
// 图层控制
// 灌区监测
// 预警信息管理
// 水旱灾害防御
// 水资源调度
// 量测水管理
// 水政管理
// 工程管理
] },
// { id: 502, title: '预警信息管理', img: '/assets/menu/实时数据.png' },
{ id: 503, title: '水资源调度', img: '/assets/menu/病险水库.png' },
{ id: 505, title: '量测水管理', img: '/assets/menu/辅助决策.png' },
{ id: 506, title: '水政管理', img: '/assets/menu/预警分析.png' },
{ id: 507, title: '工程管理', img: '/assets/menu/降雨中心.png' },
// 图层控制
// 灌区监测
// 预警信息管理
// 水旱灾害防御
// 水资源调度
// 量测水管理
// 水政管理
// 工程管理
]
},
];
@ -73,8 +86,8 @@ function BootstrapTooltip(props) {
export default function ActionDock({ }) {
const view = useSelector(s => s.map.view);
const [viewKey,setViewKey] = useState(null)
const viewItem = useMemo(()=>viewKey?VIEWS.filter(o=>o.id===viewKey)[0].children:VIEWS,[viewKey,VIEWS])
const [viewKey, setViewKey] = useState(null)
const viewItem = useMemo(() => viewKey ? VIEWS.filter(o => o.id === viewKey)[0].children : VIEWS, [viewKey, VIEWS])
const dispatch = useDispatch();
@ -82,30 +95,48 @@ export default function ActionDock({ }) {
return (
<div className="dp-actiondock">
{
viewKey?
<BootstrapTooltip key={999} title={<Typography variant="h6"><span style={{color:'#fff'}}>返回</span></Typography>}>
<div className="dock-item" onClick={() => {
// dispatch.map.setView(o.id) 这里不知道用哪个，等问好在弄
setViewKey(null)
}}>
<div className={clsx('button', { active: false })}>
<img width={40} style={{marginLeft:'5px'}} src={'/assets/pump/退出.png'} />
viewKey ?
<BootstrapTooltip key={999} title={<Typography variant="h6"><span style={{ color: '#fff' }}>返回</span></Typography>}>
<div className="dock-item" onClick={() => {
// dispatch.map.setView(o.id) 这里不知道用哪个，等问好在弄
setViewKey(null)
dispatch.runtime.setScya(false)
dispatch.runtime.setGwtc(false)
}}>
<div className={clsx('button', { active: false })}>
<img width={40} style={{ marginLeft: '5px' }} src={'/assets/pump/退出.png'} />
</div>
</div>
</div>
</BootstrapTooltip>
:null
</BootstrapTooltip>
: null
}
{
viewItem.map(o => (
<BootstrapTooltip key={o.id} title={<Typography variant="h6"><span style={{color:'#fff'}}>{o.title}</span></Typography>}>
<BootstrapTooltip key={o.id} title={<Typography variant="h6"><span style={{ color: '#fff' }}>{o.title}</span></Typography>}>
<div className="dock-item" onClick={() => {
if(o.children){
if (o.children) {
//一级菜单
dispatch.map.setView(o.children[0].id)
setViewKey(o.id)
}else{
dispatch.runtime.setScya(false)
dispatch.runtime.setGwtc(false)
} else {
// 判断水厂资源调度切换图层
if (o.id == 307) {
dispatch.runtime.setScya(true)
} else {
dispatch.runtime.setScya(false)
}
// if (o.id == 307) {
// dispatch.runtime.setGwtc(true)
// } else {
// dispatch.runtime.setGwtc(true)
// }
//二级菜单
dispatch.map.setView(o.id)
}
}}>
<div className={clsx('button', { active: view === o.id })}>

1
src/views/Home/components/Llqdjcsj/drpOption.js
View File

@ -1,5 +1,4 @@
export default function drpOption({ data, wrz, grz }) {
debugger
console.log("data",wrz);
const maxVal = Math.max(...data.map(obj => obj.drp))
const maxSw = Math.max(...data.map(obj => obj.deep))

9
src/views/Home/index.js
View File

@ -17,7 +17,8 @@ export default function Demo1() {
const layout = useSelector(getLayout);
const hp = useSelector(hidePanels);
console.log("hp",hp);
const yyRes = useSelector(s => s.runtime.yyObj);
const yyRes = useSelector(s => s.runtime.yyObj);
const isSc = useSelector(s => s.runtime.scya);
return (
<div className="demo1">
<div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
@ -30,7 +31,11 @@ export default function Demo1() {
<img src={`${process.env.PUBLIC_URL}/assets/yytc.png`} alt="" style={{ zIndex: 0.1, position: 'absolute' }} />
<img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute',bottom:100,left:'28%' }} />
</>
}
}
{
isSc &&<img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute',width:'100%',transform:`scale(1)` }} />
}
<div className="bottom">

2
src/views/Home/panels/GqWeatherForcast/index.js
View File

@ -15,7 +15,7 @@ export default function WeatherForcast({ style }) {
return (
<PanelBox
style={style}
title="天气预报1"
title="天气预报"
color="orange"
extra={
<i className="ionicons close cursor-pointer" onClick={closeLayer}></i>

70
src/views/Home/panels/Gqdb/index.js
View File

@ -20,9 +20,9 @@ const analysisData = {
waterUsage: Array.from({ length: 7 }, (_, i) => ({
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
areas: [
{ name: '东部灌区', value: 85 + Math.random() * 10 },
{ name: '西部灌区', value: 92 + Math.random() * 10 },
{ name: '南部灌区', value: 78 + Math.random() * 10 }
{ name: '浮桥河灌区', value: 85 + Math.random() * 10 },
{ name: '群建水库灌区', value: 92 + Math.random() * 10 },
{ name: '大石板灌区', value: 78 + Math.random() * 10 }
]
})).reverse(),
@ -30,9 +30,9 @@ const analysisData = {
efficiency: Array.from({ length: 7 }, (_, i) => ({
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
areas: [
{ name: '东部灌区', value: 0.82 + Math.random() * 0.05 },
{ name: '西部灌区', value: 0.78 + Math.random() * 0.05 },
{ name: '南部灌区', value: 0.85 + Math.random() * 0.05 }
{ name: '浮桥河灌区', value: 0.82 + Math.random() * 0.05 },
{ name: '群建水库灌区', value: 0.78 + Math.random() * 0.05 },
{ name: '大石板灌区', value: 0.85 + Math.random() * 0.05 }
]
})).reverse(),
@ -40,16 +40,16 @@ const analysisData = {
waterSaving: Array.from({ length: 7 }, (_, i) => ({
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
areas: [
{ name: '东部灌区', value: 12.5 + Math.random() * 5 },
{ name: '西部灌区', value: 10.2 + Math.random() * 5 },
{ name: '南部灌区', value: 15.6 + Math.random() * 5 }
{ name: '浮桥河灌区', value: 12.5 + Math.random() * 5 },
{ name: '群建水库灌区', value: 10.2 + Math.random() * 5 },
{ name: '大石板灌区', value: 15.6 + Math.random() * 5 }
]
})).reverse()
};
const dimensionConfig = {
waterUsage: {
title: '用水量对比',
unit: 'm³/s'
title: '用水量',
unit: 'm³'
},
efficiency: {
title: '输水效率对比',
@ -66,13 +66,6 @@ const getOption = (type) => {
const config = dimensionConfig[type];
return {
title: {
text: config.title,
textStyle: {
color: '#fff',
fontSize: 14
}
},
tooltip: {
trigger: 'axis',
formatter: (params) => {
@ -87,7 +80,7 @@ const getOption = (type) => {
}
},
legend: {
data: ['东部灌区', '西部灌区', '南部灌区'],
data: ['浮桥河灌区', '群建水库灌区', '大石板灌区'],
textStyle: { color: '#fff' },
right: '10%'
},
@ -104,11 +97,12 @@ const getOption = (type) => {
},
yAxis: {
type: 'value',
name: config.unit,
nameTextStyle: { color: '#fff' },
name: '用水量m³',
nameTextStyle: { color: '#fff', // 调整内边距
},
axisLabel: { color: '#fff' }
},
series: ['东部灌区', '西部灌区', '南部灌区'].map(area => ({
series: ['浮桥河灌区', '群建水库灌区', '大石板灌区'].map(area => ({
name: area,
type: 'line',
smooth: true,
@ -148,7 +142,7 @@ function HDReal({ style }) {
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
</>
}
>
@ -159,35 +153,7 @@ function HDReal({ style }) {
marginTop: '10px',
paddingRight: '20px'
}}>
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
<InputLabel id="analysis-select-label">分析维度</InputLabel>
<Select
labelId="analysis-select-label"
value={dimension}
label="分析维度"
onChange={(event) => {
const value = event.target.value;
setDimension(value);
setOption(getOption(value));
}}
sx={{
color: '#fff',
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(255, 255, 255, 0.3)',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(255, 255, 255, 0.6)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: '#fff',
}
}}
>
<MenuItem value="waterUsage">用水量对比</MenuItem>
<MenuItem value="efficiency">输水效率对比</MenuItem>
<MenuItem value="waterSaving">节水量对比</MenuItem>
</Select>
</FormControl>
</div>
<ReactEcharts
option={option}

2
src/views/Home/panels/Gqdd/index.js
View File

@ -117,7 +117,7 @@ const StyledFormControlLabel = styled(FormControlLabel)({
// }
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}

2
src/views/Home/panels/Gqycqd/index.js
View File

@ -131,7 +131,7 @@ function HDReal({ style }) {
// }
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}

51
src/views/Home/panels/Gwdh/Setting.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

191
src/views/Home/panels/Gwdh/index.js Normal file
View File

@ -0,0 +1,191 @@
import React, { useMemo, useState,useEffect } 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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less'
const { RangePicker } = DatePicker;
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
// const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const showData = Array(1).fill(0).map((o,i) => ({
date: '2025-05-26',
event: '侵占河道',
type: '侵占河道',
status: '待处理',
place:'浮桥河灌区'
}))
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const data = [
{ key: '0', date: '合计', power: '0' },
{ key: '1', date: '2025-05-01', power: '0' },
{ key: '2', date: '2025-05-02', power: '0' },
{ key: '3', date: '2025-05-03', power: '0' },
{ key: '4', date: '2025-05-04', power: '0' },
{ key: '5', date: '2025-05-05', power: '0' },
{ key: '6', date: '2025-05-06', power: '0' },
{ key: '7', date: '2025-05-07', power: '0' },
{ key: '8', date: '2025-05-08', power: '0' },
{ key: '9', date: '2025-05-09', power: '0' }
];
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const [params, setParams] = useState({ tm: [] })
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const searchTm = (e) => {
setParams({
...params,
stm: e[0].format("YYYY-MM-DD HH:mm"),
etm: e[1].format("YYYY-MM-DD HH:mm"),
tm:e,
})
};
useEffect(() => {
let options = "";
options = {
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
tm: [
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
],
}
setParams(options)
}, [])
return (
<PanelBox
style={style}
title="电耗统计"
color="green"
// tabs={
// <span className="button-group">
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
// </span>
// }
extra={
<>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
<RangePicker
// width="100%"
className='time-picker'
style={{
flex:1,
background: "transparent",
border: "none",
color: "#fff",
}}
onChange={searchTm}
allowClear
format="YYYY-MM-DD HH:mm"
showTime={{
format: 'HH:mm',
}}
value={params.tm}
getPopupContainer={trigger => trigger.parentElement}
/>
</div>
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow >
<DpTableCell style={{ width: '50%' }} align="center">日期</DpTableCell>
<DpTableCell style={{ width: '50%' }} align="center">电耗(kWh)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.date}</div>
</DpTableCell>
<DpTableCell align="center">{row.power}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;

90
src/views/Home/panels/Gwdh/index.less Normal file
View File

@ -0,0 +1,90 @@
.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;
}
}
.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;
}

51
src/views/Home/panels/Gwgsl/Setting.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

189
src/views/Home/panels/Gwgsl/index.js Normal file
View File

@ -0,0 +1,189 @@
import React, { useMemo, useState,useEffect } 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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less'
const { RangePicker } = DatePicker;
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
// const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const showData = Array(1).fill(0).map((o,i) => ({
date: '2025-05-26',
event: '侵占河道',
type: '侵占河道',
status: '待处理',
place:'浮桥河灌区'
}))
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const data = [
{ key: '0', date: '合计', supply: '15402.15', lastMonth: '14725.78' },
{ key: '1', date: '2025-05-01', supply: '643.91', lastMonth: '446.78' },
{ key: '2', date: '2025-05-02', supply: '654.94', lastMonth: '527.03' },
{ key: '3', date: '2025-05-03', supply: '674.31', lastMonth: '528.33' },
{ key: '4', date: '2025-05-04', supply: '619.43', lastMonth: '448.18' },
{ key: '5', date: '2025-05-05', supply: '537.5', lastMonth: '483.9' }
];
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const [params, setParams] = useState({ tm: [] })
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const searchTm = (e) => {
setParams({
...params,
stm: e[0].format("YYYY-MM-DD HH:mm"),
etm: e[1].format("YYYY-MM-DD HH:mm"),
tm:e,
})
};
useEffect(() => {
let options = "";
options = {
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
tm: [
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
],
}
setParams(options)
}, [])
return (
<PanelBox
style={style}
title="供水量统计"
color="green"
// tabs={
// <span className="button-group">
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
// </span>
// }
extra={
<>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
<RangePicker
// width="100%"
className='time-picker'
style={{
flex:1,
background: "transparent",
border: "none",
color: "#fff",
}}
onChange={searchTm}
allowClear
format="YYYY-MM-DD HH:mm"
showTime={{
format: 'HH:mm',
}}
value={params.tm}
getPopupContainer={trigger => trigger.parentElement}
/>
</div>
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow >
<DpTableCell style={{ width: '40%' }} align="center">日期</DpTableCell>
<DpTableCell style={{ width: '30%' }} align="center">供水量(m³)</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>上月对比(m³)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.date}</div>
</DpTableCell>
<DpTableCell align="center">{row.supply}</DpTableCell>
<DpTableCell align="center">{row.lastMonth}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;

90
src/views/Home/panels/Gwgsl/index.less Normal file
View File

@ -0,0 +1,90 @@
.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;
}
}
.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;
}

51
src/views/Home/panels/Gwjc/Setting.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

157
src/views/Home/panels/Gwjc/constant.js Normal file
View File

@ -0,0 +1,157 @@
const data = [
{
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201417",
"stnm": "马山二组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2321 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201421",
"stnm": "槐桥四组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.203 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201418",
"stnm": "双碑一组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2006 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"stcd": "4211221031",
"stnm": "试验站墒情",
"addvcd_dictText": "荆门市",
"lgtd": 112.087806 +2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
}
]
export default data;

167
src/views/Home/panels/Gwjc/index.js Normal file
View File

@ -0,0 +1,167 @@
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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import showData from './constant'
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const randomMinutes = Math.floor(Math.random() * 60) + 1;
const format = 'YYYY-MM-DD HH:mm';
const showData = [
{
stnm: '监测点1',
press: '0.52',
flow: 200,
hg: 90,
"lttd": 30.8456 +0.2002,
"lgtd": 112.2321 +2.9619,
},
{
stnm: '监测点2',
press: '0.52',
flow: 200,
hg: 90,
"lttd": 30.8446 +0.2002,
"lgtd": 112.203 +2.9619,
},{
stnm: '监测点3',
press: '0.52',
flow: 200,
hg: 90,
"lttd": 30.8866 +0.2002,
"lgtd": 112.2006 +2.9619,
}
]
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: '监测站', properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
return (
<PanelBox
style={style}
title="管网监测数据"
color="green"
// tabs={
// <span className="button-group">
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
// </span>
// }
extra={
<>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '20%' }} align="center">监测点</DpTableCell>
<DpTableCell style={{ width: '30%' }} align="center">压力(Mpa)</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>流量(m³/h)</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>水质合格率(%)</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.press}</div>
</DpTableCell>
<DpTableCell align="center">{row.flow}</DpTableCell>
<DpTableCell align="center">{row.hg}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;

51
src/views/Home/panels/Gwqsl/Setting.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

193
src/views/Home/panels/Gwqsl/index.js Normal file
View File

@ -0,0 +1,193 @@
import React, { useMemo, useState,useEffect } 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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less'
const { RangePicker } = DatePicker;
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
// const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const showData = Array(1).fill(0).map((o,i) => ({
date: '2025-05-26',
event: '侵占河道',
type: '侵占河道',
status: '待处理',
place:'浮桥河灌区'
}))
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const data = [
{ key: '0', date: '合计', intake: '20959.07', lastMonth: '22558.47' },
{ key: '1', date: '2025-05-01', intake: '754.77', lastMonth: '704.77' },
{ key: '2', date: '2025-05-02', intake: '940.93', lastMonth: '713.9' },
{ key: '3', date: '2025-05-03', intake: '891.67', lastMonth: '526.83' },
{ key: '4', date: '2025-05-04', intake: '888.15', lastMonth: '577.1' },
{ key: '5', date: '2025-05-05', intake: '813.27', lastMonth: '780.13' },
{ key: '6', date: '2025-05-06', intake: '875.79', lastMonth: '850.83' },
{ key: '7', date: '2025-05-07', intake: '743.86', lastMonth: '862.48' },
{ key: '8', date: '2025-05-08', intake: '728.14', lastMonth: '853.63' },
{ key: '9', date: '2025-05-09', intake: '738.43', lastMonth: '890.43' }
];
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const [params, setParams] = useState({ tm: [] })
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const searchTm = (e) => {
setParams({
...params,
stm: e[0].format("YYYY-MM-DD HH:mm"),
etm: e[1].format("YYYY-MM-DD HH:mm"),
tm:e,
})
};
useEffect(() => {
let options = "";
options = {
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
tm: [
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
],
}
setParams(options)
}, [])
return (
<PanelBox
style={style}
title="取水量统计"
color="green"
// tabs={
// <span className="button-group">
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
// </span>
// }
extra={
<>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
<RangePicker
// width="100%"
className='time-picker'
style={{
flex:1,
background: "transparent",
border: "none",
color: "#fff",
}}
onChange={searchTm}
allowClear
format="YYYY-MM-DD HH:mm"
showTime={{
format: 'HH:mm',
}}
value={params.tm}
getPopupContainer={trigger => trigger.parentElement}
/>
</div>
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow >
<DpTableCell style={{ width: '40%' }} align="center">日期</DpTableCell>
<DpTableCell style={{ width: '30%' }} align="center">取水量(m³)</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>上月对比(m³)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.date}</div>
</DpTableCell>
<DpTableCell align="center">{row.intake}</DpTableCell>
<DpTableCell align="center">{row.lastMonth}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;

90
src/views/Home/panels/Gwqsl/index.less Normal file
View File

@ -0,0 +1,90 @@
.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;
}
}
.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;
}

51
src/views/Home/panels/Gwsllc/Setting.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

157
src/views/Home/panels/Gwsllc/constant.js Normal file
View File

@ -0,0 +1,157 @@
const data = [
{
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201417",
"stnm": "马山二组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2321 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201421",
"stnm": "槐桥四组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.203 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201418",
"stnm": "双碑一组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2006 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"stcd": "4211221031",
"stnm": "试验站墒情",
"addvcd_dictText": "荆门市",
"lgtd": 112.087806 +2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
}
]
export default data;

202
src/views/Home/panels/Gwsllc/index.js Normal file
View File

@ -0,0 +1,202 @@
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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import showData from './constant'
import ReactECharts from 'echarts-for-react';
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const randomMinutes = Math.floor(Math.random() * 60) + 1;
const format = 'YYYY-MM-DD HH:mm';
const showData = [
{
stnm: '监测点1',
press: '0.52',
flow: 200,
hg:90
},
{
stnm: '监测点2',
press: '0.52',
flow: 200,
hg:90
},{
stnm: '监测点3',
press: '0.52',
flow: 200,
hg:90
}
]
const flyTo = (record) => {
dispatch.map.setLayerVisible({'TrsqLayer':true})
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: '墒情站', properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['数字分布', '里程分布'],
textStyle: {
color: '#fff'
},
top: 10
},
grid: {
top:'13%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['福田镇', '龙池桥镇', '木子店镇', '宋埠镇', '黄土岗镇', '铁门岗镇', '乘马岗镇', '白果镇', '张家畈镇', '顺河镇'],
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff',
interval: 0,
rotate: 45
}
},
yAxis: {
type: 'value',
name: '数量',
nameTextStyle: {
color: '#fff'
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.2)'
}
}
},
series: [
{
name: '数字分布',
type: 'bar',
data: [2050, 2250, 1300, 2100, 1950, 1100, 2150, 2400, 1950, 2100],
itemStyle: {
color: '#36a4eb'
},
barWidth: '20%'
},
{
name: '里程分布',
type: 'bar',
data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
itemStyle: {
color: '#4b5cc4'
},
barWidth: '20%'
}
]
};
return (
<PanelBox
style={style}
title="数量及里程分布"
color="green"
extra={
<>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
<ReactECharts
option={option}
style={{ height: '400px', width: '100%' }}
/>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;

139
src/views/Home/panels/Gx/OverallContent.js Normal file
View File

@ -0,0 +1,139 @@
import { Button, makeStyles } from '@material-ui/core';
import { Email } from '@material-ui/icons';
import React from 'react';
import { useDispatch } from 'react-redux';
import config from '../../../../config';
import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
import { strNumber } from '../../../../utils/tools';
import { InfoPopNames } from '../../InfoPops';
const useStyles = makeStyles({
root: {
padding: '1.5rem 0.75rem 0.75rem 0.75rem',
color: 'rgb(224, 246, 247)',
fontSize: '0.9rem',
lineHeight: '1.8rem',
},
titleDate: {
fontSize: '1.2rem',
margin: '0.2rem',
color: '#00deff',
},
number: {
color: '#ffd220',
fontSize: '1.2rem',
margin: '0.2rem',
},
sttype: {
color: '#92f0ff',
},
stname: {
fontWeight: 'bold',
fontSize: '1rem',
margin: '0.25rem',
cursor: 'pointer'
},
grid: {
display: 'flex',
justifyContent: 'space-around',
marginBottom: '1rem',
textAlign: 'center',
'& .value': {
fontSize: '1.8rem',
color: '#6fe9fd',
lineHeight: '2rem'
},
'& .key': {
fontSize: '0.8rem',
color: '#aaa',
},
},
action: {
textAlign: 'right',
color: '#fff',
}
})
export default function OverallContent({ data }) {
const classes = useStyles();
const dispatch = useDispatch();
const {
drpInfo,
skInfo,
tm1, tm2,
} = data || {};
const { h24, h1, h3, h6 } = drpInfo || {};
const _showRecord = (record, poptype) => {
if (record) {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: config.poiPitch,
});
}
}
}
const showRecord = (obj) => {
if (!obj) {
return;
}
const { type } = obj;
if (type === 'sk') {
skRealGet(obj.stcd).then((record) => {
_showRecord(record, InfoPopNames.RealSkPop)
})
} else {
drpRealGet(obj).then((record) => {
_showRecord(record, InfoPopNames.RealDrpPop)
});
}
}
const doBx = () => {
bxstr().then((data) => {
dispatch.runtime.setInfoDlg({
layerId: 'OverallSmtp',
properties: { txt: data }
})
});
}
return (
<div className={classes.root}>
<div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'center',columnGap:20,alignItems:'center'}}>
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>14700<span style={{fontSize:14}}>根</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总数量</div>
</div>
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>12875<span style={{fontSize:14}}>公里</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总里程</div>
</div>
{/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ cursor: 'pointer', color: '#5ecd45' }}>9876<span style={{fontSize:14}}>m³</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>累计用水量</div>
</div>
<div style={{ padding:"15px 30px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>85.6<span style={{fontSize:14}}>%</span></div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>渠系利用率</div>
</div> */}
</div>
</div>
)
}

20
src/views/Home/panels/Gx/index.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
export default function Overall({ style }) {
const { data } = useRequest(OverallPromise.get);
return (
<PanelBox
style={style}
title="管线"
color="green"
>
<OverallContent data={data} />
</PanelBox>
)
}

38
src/views/Home/panels/Gx/index.less Normal file
View File

@ -0,0 +1,38 @@
.dppanel-overall {
padding: 0.75rem;
color: rgb(224, 246, 247);
font-size: 0.8rem;
line-height: 1.8rem;
.title-date {
font-size: 1.2rem;
margin: 0.2rem;
color: #00deff;
}
.number {
color: #ffd220;
font-size: 1.2rem;
margin: 0.2rem;
}
.sttype {
color: #92f0ff;
}
.stname {
font-weight: bold;
font-size: 1rem;
margin: 0.25rem;
}
.sycm {
height: 5rem;
padding-top: 0.75rem;
ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
li{ float: left; width: 33.33%; text-align: center; position: relative}
li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
li:last-child:before{ width: 0;}
li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
li span{ font-size:1rem; color: #fff; opacity: .5;}
}
}

51
src/views/Home/panels/Gxzxll/Setting.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

157
src/views/Home/panels/Gxzxll/constant.js Normal file
View File

@ -0,0 +1,157 @@
const data = [
{
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201417",
"stnm": "马山二组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2321 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201421",
"stnm": "槐桥四组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.203 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "ZH201418",
"stnm": "双碑一组（墒情）",
"addvcd_dictText": "荆门市",
"lgtd": 112.2006 +2.9619,
"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 +0.2002,
"sttp": "SS",
"irrCode": "D00000010",
"sort": 9999,
"hasImg": false,
"stlc": "荆门市",
"stcd": "4211221031",
"stnm": "试验站墒情",
"addvcd_dictText": "荆门市",
"lgtd": 112.087806 +2.9619,
"irrCode_dictText": "漳河实验站",
"bsnm": "漳河流域"
}
]
export default data;

207
src/views/Home/panels/Gxzxll/index.js Normal file
View File

@ -0,0 +1,207 @@
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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import showData from './constant'
import ReactECharts from 'echarts-for-react';
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const randomMinutes = Math.floor(Math.random() * 60) + 1;
const format = 'YYYY-MM-DD HH:mm';
const showData = [
{
stnm: '监测点1',
press: '0.52',
flow: 200,
hg:90
},
{
stnm: '监测点2',
press: '0.52',
flow: 200,
hg:90
},{
stnm: '监测点3',
press: '0.52',
flow: 200,
hg:90
}
]
const flyTo = (record) => {
dispatch.map.setLayerVisible({'TrsqLayer':true})
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: '墒情站', properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const option = {
tooltip: {
trigger: 'axis'
},
grid: {
top: '15%',
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['04-20', '04-21', '04-22', '04-23', '04-24', '04-25', '04-26'],
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
}
},
yAxis: {
type: 'value',
name: '流量',
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.2)'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
}
},
series: [
{
name: '夜间流量',
type: 'line',
smooth: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0,255,255,0.3)'
}, {
offset: 1,
color: 'rgba(0,255,255,0)'
}]
}
},
lineStyle: {
color: '#00ffff'
},
data: [180, 205, 135, 150, 180, 120, 190],
markLine: {
silent: true,
lineStyle: {
color: '#ffd700',
type: 'dashed'
},
data: [{
yAxis: 180,
name: '安全流量上限'
}]
}
}
]
};
return (
<PanelBox
style={style}
title="近七日夜间最小流量"
color="green"
extra={
<>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
<ReactECharts
option={option}
style={{ height: '400px', width: '100%' }}
/>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;

65
src/views/Home/panels/LlWatch/constant.js
View File

@ -1,69 +1,4 @@
const data =[
{
"addvcd": "420800000000000",
"moditime": "2022-10-01 21:00:00",
"comments": "水资源多孔闸门控制系统",
"src": "zhzj",
"esstym": "",
"mvalue": {
"formatTm": null,
"formatHq": "0.000",
"vol": 0,
"formatAccq": null,
"stcd": "4211221029",
"rz": 1.129,
"tm": "2025-05-26 11:00",
"hq": 0,
"fr": null,
"chan": "1",
"accq": 120057496
},
"lttd": 31.240848 +0.2002,
"sttp": "QQ",
"irrCode": "D00001300",
"sort": 6001,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "4211221029",
"stnm": "口泉测流站",
"addvcd_dictText": "荆门市",
"lgtd": 111.826413 +2.9619,
"irrCode_dictText": "水库枢纽",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-10-26 21:00:00",
"comments": "水资源多孔闸门控制系统",
"src": "zhzj",
"mvalue": {
"formatTm": null,
"formatHq": "0.000",
"vol": 0,
"formatAccq": null,
"stcd": "4211221030",
"rz": 0.869,
"tm": "2025-05-26 11:00",
"hq": 0,
"fr": null,
"chan": "1",
"accq": 159077248
},
"lttd": 31.249561,
"sttp": "QQ",
"irrCode": "D00001300",
"sort": 6002,
"hasImg": false,
"stlc": "荆门市",
"dtmel": 0,
"stcd": "4211221030",
"stnm": "苍坪测流站",
"addvcd_dictText": "荆门市",
"lgtd": 111.866217 +2.9619,
"irrCode_dictText": "水库枢纽",
"bsnm": "漳河流域"
},
{
"addvcd": "420800000000000",
"moditime": "2022-06-26 21:00:00",

2
src/views/Home/panels/SzWatch/index.js
View File

@ -57,7 +57,7 @@ function HDReal({ style }) {
"lttd": 30.9641 +0.2002,
"tm": "2025-03-21 08",
"doxLevelStr": "Ⅰ类",
stnm:'水质站'
stnm:'麻城水站'
}))
const flyTo = (record) => {

6
src/views/Home/panels/YaRes/index.js
View File

@ -125,7 +125,7 @@ function HDReal({ style }) {
// }
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
@ -179,7 +179,7 @@ function HDReal({ style }) {
<div style={{fontSize:16}}>淹没乡镇数</div>
</div>
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
<div style={{color:'#41cbf1',fontSize:20}}>0.5km2</div>
<div style={{color:'#41cbf1',fontSize:20}}>0.5k㎡</div>
<div style={{fontSize:16}}>淹没总面积</div>
</div>
</div>
@ -190,7 +190,7 @@ function HDReal({ style }) {
<TableHead>
<TableRow>
<DpTableCell style={{ width: '50%' }} align="center">乡镇名称</DpTableCell>
<DpTableCell style={{ width: '50%' }} align="center">影响面积/m2</DpTableCell>
<DpTableCell style={{ width: '50%' }} align="center">影响面积/㎡</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>

67
src/views/Home/panels/Yakgl/Setting.js Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>实时雨量显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '2rem' }}>
<Typography variant="subtitle2">地图实时雨量显示雨量时段</Typography>
<Select
style={{ fontSize: '1.2rem' }}
fullWidth
value={layerSetting.drplabel}
onChange={(event) => dispath.map.setLayerSetting({ drplabel: event.target.value })}
>
<MenuItem value="h1">小时雨量</MenuItem>
<MenuItem value="h3">3小时雨量</MenuItem>
<MenuItem value="h6">6小时雨量</MenuItem>
<MenuItem value="h12">12小时雨量</MenuItem>
<MenuItem value="h24">24小时雨量</MenuItem>
<MenuItem value="h48">48小时雨量</MenuItem>
</Select>
</div>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示实时雨量图层</Typography>
<Switch
checked={!!layerVisible.RealDrpLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealDrpLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

1987
src/views/Home/panels/Yakgl/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

51
src/views/Home/panels/lsphb/Setting.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

195
src/views/Home/panels/lsphb/index.js Normal file
View File

@ -0,0 +1,195 @@
import React, { useMemo, useState,useEffect } 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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less'
const { RangePicker } = DatePicker;
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
// const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
// const showData = useMemo(() => {
// if (!data) {
// return [];
// }
// let ret = [];
// data.forEach(o => {
// if (!tableRzFilter[o.type]) {
// return;
// }
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
// o.kd = (Math.random() * 100).toFixed(2);
// o.ll = (Math.random() * 100).toFixed(1);
// ret.push(o);
// });
// return ret;
// }, [data, tableRzFilter]);
const showData = Array(1).fill(0).map((o,i) => ({
date: '2025-05-26',
event: '侵占河道',
type: '侵占河道',
status: '待处理',
place:'浮桥河灌区'
}))
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const data = [
{ name: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
{ name: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
{ name: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
{ name: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
{ name: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
{ name: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
{ name: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
{ name: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
{ name: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
{ name: '顺河镇区', leakage: '749.3', supply: '4490.1', rate: 16.7 }
];
const toggleStType = (type) => {
const visible = !tableRzFilter[type];
dispatch.realview.setTableRzFilter({ [type]: visible });
}
const [params, setParams] = useState({ tm: [] })
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const searchTm = (e) => {
setParams({
...params,
stm: e[0].format("YYYY-MM-DD HH:mm"),
etm: e[1].format("YYYY-MM-DD HH:mm"),
tm:e,
})
};
useEffect(() => {
let options = "";
options = {
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
tm: [
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
],
}
setParams(options)
}, [])
return (
<PanelBox
style={style}
title="漏损排行榜"
color="green"
// tabs={
// <span className="button-group">
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
// </span>
// }
extra={
<>
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
<RangePicker
// width="100%"
className='time-picker'
style={{
flex:1,
background: "transparent",
border: "none",
color: "#fff",
}}
onChange={searchTm}
allowClear
format="YYYY-MM-DD HH:mm"
showTime={{
format: 'HH:mm',
}}
value={params.tm}
getPopupContainer={trigger => trigger.parentElement}
/>
</div>
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow >
<DpTableCell style={{ width: '30%' }} align="center">DMA分区名称</DpTableCell>
<DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>供水量</DpTableCell>
<DpTableCell align="center" style={{ width: '20%' }}>漏损率(%)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.leakage}</DpTableCell>
<DpTableCell align="center">{row.supply}</DpTableCell>
<DpTableCell align="center">{row.rate}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;

90
src/views/Home/panels/lsphb/index.less Normal file
View File

@ -0,0 +1,90 @@
.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;
}
}
.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;
}