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

Compare commits

base: lishenfeng:afcb324911c880deba68e630df0c11502a5b1857
Branches Tags
lishenfeng:master
lishenfeng:qzc-dev
lishenfeng:lsf-dev
..
compare: lishenfeng:12f3fa08787af02aa444534ae489378055d4a22f
Branches Tags
lishenfeng:master
lishenfeng:qzc-dev
lishenfeng:lsf-dev

No commits in common. "afcb324911c880deba68e630df0c11502a5b1857" and "12f3fa08787af02aa444534ae489378055d4a22f" have entirely different histories.
afcb324911 ... 12f3fa0878

26 changed files with 4631 additions and 1626 deletions
Show Stats Expand all files Collapse all files

18
public/data/shyjFind.json
View File

@ -8,9 +8,7 @@
"warnstm": "2025-05-22 21:00:00",
"tempcolumn": 0,
"warnid": 1128,
"isauto": "0",
"lgtd": 115.01083,
"lttd": 31.041152,
"isauto": "0",
"warnnm": "白果镇山洪准备转移",
"adnm": "白果镇",
"adcd": "421181103000000",
@ -30,8 +28,6 @@
"warnnm": "夫子河镇北门村山洪准备转移",
"adnm": "夫子河镇北门村",
"adcd": "421181104001000",
"lgtd": 115.01986,
"lttd": 30.968793,
"warntypeid": 10,
"temprownumber": 2
},
@ -48,8 +44,6 @@
"warnnm": "夫子河镇山洪准备转移",
"adnm": "夫子河镇",
"adcd": "421181104000000",
"lgtd": 115.026944,
"lttd": 30.959121,
"warntypeid": 10,
"temprownumber": 3
},
@ -66,8 +60,6 @@
"warnnm": "福田河镇山洪准备转移",
"adnm": "福田河镇",
"adcd": "421181111000000",
"lgtd": 115.075433,
"lttd": 31.384331,
"warntypeid": 10,
"temprownumber": 4
},
@ -84,8 +76,6 @@
"warnnm": "木子店镇山洪准备转移",
"adnm": "木子店镇",
"adcd": "421181107000000",
"lgtd": 115.172808,
"lttd": 30.963342,
"warntypeid": 10,
"temprownumber": 5
},
@ -102,8 +92,6 @@
"warnnm": "白果镇山洪准备转移",
"adnm": "白果镇",
"adcd": "421181103000000",
"lgtd": 115.01083,
"lttd": 31.041152,
"warntypeid": 10,
"temprownumber": 6
},
@ -152,8 +140,6 @@
"warnnm": "张家畈镇山洪准备转移",
"adnm": "张家畈镇",
"adcd": "421181106000000",
"lgtd": 115.183208,
"lttd": 31.074978,
"warntypeid": 10,
"temprownumber": 9
},
@ -170,8 +156,6 @@
"warnnm": "夫子河镇北门村山洪准备转移",
"adnm": "夫子河镇北门村",
"adcd": "421181104001000",
"lgtd": 115.01986,
"lttd": 30.968793,
"warntypeid": 10,
"temprownumber": 10
}

62
src/models/map/index.js
View File

@ -191,7 +191,7 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 8) {
} else if (id === 9) {
layerVisible = {
RealDrpLayer: false,
RealHDLayer: false,
@ -201,9 +201,8 @@ const map = {
YuwaiLayer: false,
AdcdLayer: true,
WataLayer: false,
RealSkLayerQ2: true,
RealHDLayerQ2: true,
ShyjLayer:true,
RealSkLayerQ2: false,
RealHDLayerQ2: false,
}
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
@ -550,48 +549,36 @@ const map = {
dispatch.runtime.setFeaturePop(null);
// if (id === 8) {
// dispatch.rcview.showRealContour('h24')
// } else {
// dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
// dispatch.runtime.setLayerSetting({ planeArea: null });
// dispatch.map.setLayerVisible({ ContourLayer: false });
// }
if (id === 8) {
dispatch.rcview.showRealContour('h24')
} else {
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
dispatch.runtime.setLayerSetting({ planeArea: null });
dispatch.map.setLayerVisible({ ContourLayer: false });
}
if (id === 201) {
dispatch.map.setLayerSetting({ dom: false });
if(map){
map.setLayoutProperty('热力图', 'visibility', 'visible');
}
map.setLayoutProperty('热力图', 'visibility', 'visible');
} else {
// dispatch.map.setLayerSetting({dom: true});
if(map){
map.setLayoutProperty('热力图', 'visibility', 'none');
}
map.setLayoutProperty('热力图', 'visibility', 'none');
}
if (id === 306 && map) {
if (id === 306) {
dispatch.map.setLayerSetting({ dom: false });
dispatch.runtime.setShowGw(true)
// if(map){
// map.setLayoutProperty('管网图', 'visibility', 'visible');
// }
// map.setLayoutProperty('管网图', 'visibility', 'visible');
} else {
dispatch.runtime.setShowGw(false)
// dispatch.map.setLayerSetting({dom: true});
// if(map){
// map.setLayoutProperty('管网图', 'visibility', 'none');
// }
// map.setLayoutProperty('管网图', 'visibility', 'none');
}
if (id === 503 || id == 501 || id == 504 || id == 505 || id == 506 || id == 507) {
dispatch.map.setLayerSetting({ dom: false });
if(map){
map.setLayoutProperty('灌区图', 'visibility', 'visible');
}
map.setLayoutProperty('灌区图', 'visibility', 'visible');
} else {
// dispatch.map.setLayerSetting({dom: true});
if(map){
map.setLayoutProperty('灌区图', 'visibility', 'none');
}
map.setLayoutProperty('灌区图', 'visibility', 'none');
}
if (id != 504) {
dispatch.runtime.setYyfa({})
@ -599,30 +586,23 @@ const map = {
if (
id === 3
|| id === 8
|| id === 203
|| id === 205
|| id === 206
|| id === 200
) {
dispatch.map.setLayerSetting({ dom: true });
// if(map){
// map.setLayoutProperty('卫星图', 'visibility', 'visible');
// }
// map.setLayoutProperty('卫星图', 'visibility', 'visible');
} else {
dispatch.map.setLayerSetting({ dom: false });
// if(map){
// map.setLayoutProperty('卫星图', 'visibility', 'none');
// }
// map.setLayoutProperty('卫星图', 'visibility', 'none');
}
if(id!==200&&id!==203&&id!==205&&id!==206){
if(map){
const layer = map.getLayer('临时水库tz')
if(layer){
const layer = map.getLayer('临时水库tz')
if(layer){
map.removeLayer('临时水库tz');
map.removeSource('临时水库tz');
}
}
}
}

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

@ -57,7 +57,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '天气' },
{ key: '未来24h预报', style: { height: '40%', flexGrow: 1 } },
];
// leftFullHeight = true;
leftFullHeight = true;
} else if (view === 6) {
left = [
{ key: '天气' },
@ -236,14 +236,11 @@ export default function calcLayout(view, rightStack, hidePanels) {
rightFullHeight = true;
}else if (view === 8) {
right = [
// { key: '警报' },
{ key: '防洪形势雨情2', style: {} },
{ key: '重点关注水情', style: { height: '18rem'} },
{ key: '测站到报率', style: { height: '18rem' } },
// { key: '防洪形势天气预报', style: { height: '18.5rem'} },
// { key: '防洪形势水情', style: { height: '18.5rem'} },
{ key: '警报' },
{ key: '防洪形势天气预报', style: { height: '18.5rem'} },
{ key: '防洪形势水情', style: { height: '18.5rem'} },
// { key: '河道水位', style: { height: '10rem', flexGrow: 1 } },
// { key: '防洪形势雨情', style: { height: '16rem', flexGrow: 1 } },
{ key: '防洪形势雨情', style: { height: '16rem', flexGrow: 1 } },
// { key: '工情', style: { height: '10rem', flexGrow: 1 } },
// { key: '今日值班' },
];
@ -280,8 +277,10 @@ export default function calcLayout(view, rightStack, hidePanels) {
// ]
} else if (view === 5) {
right = [
{ key: '重要水库预报', style: { flexGrow: 1 } },
{ key: '警报' },
// { key: '气象预警综述' },
{ key: '河流重要断面预报', style: { height: '40%', flexGrow: 1 } },
{ key: '重要水库预报', style: { height: '18rem', flexGrow: 1 } },
];
} else if (view === 6) {
right = [

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

@ -147,9 +147,6 @@ export default function MapCtrl({ initParams, onLoad }) {
dispatch?.runtime.setInfoDlg({ layerId: 'ByjcLayer', properties: record })
}else if (record.stnm == '浮桥河水库') {
dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record })
} else if (record.type == 'sw') {
dispatch?.runtime.setFeaturePop({ layerId: 'RealHDPop', properties: record,coordinates: [record.lgtd, record.lttd] })
}
// dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
}

3
src/views/Home/MapCtrl/mapstyle/layermgr.js
View File

@ -3,7 +3,6 @@ import RealHDLayer from "./realhdlayer";
import RealHDLayerQ2 from "./realhdlayerQ2";
import RealSkLayer from "./realsklayer";
import RealSkLayerQ2 from "./realsklayerQ2";
import ShyjLayer from "./shyjLayer"
import sources from "./sources";
import base from "./base";
@ -73,7 +72,6 @@ class LayerMgr {
this.layers.push(new ShuikuLayer());
this.layers.push(new RainDrpLayer());
this.layers.push(new XunchaLayer());
this.layers.push(new ShyjLayer());
//
@ -225,7 +223,6 @@ class LayerMgr {
this.layerMap.ShuikuLayer.getStyle(),
this.layerMap.RainDrpLayer.getStyle(),
this.layerMap.XunchaLayer.getStyle(),
this.layerMap.ShyjLayer.getStyle(),
//

34
src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js
View File

@ -44,31 +44,29 @@ const ShapeStyle = {
};
const page1 = [
{
"stcd": "Q9111",
"stnm": "福田河",
const page1 = [{
"stcd": "61612910",
"stnm": "桃林河(阎河)",
test:1,
"adcd": "421181000000000",
'test':1,
"wscd": null,
"importancy": 0,
"lgtd": 115.0944,
"lttd": 31.4747,
"lgtd": 115.087777777,
"lttd": 31.164444444,
"elev": null,
"hasRz": true,
"type": "qx",
"today": 50.3,
"h1": 50.2,
"h3": 50.2,
"h6": 50.2,
"h12": 50.2,
"h24": 50.3,
"tm": "2025-06-06T22:00:00.000Z",
"type": "sh",
"today": 7,
"h1": 3,
"h3": 4,
"h6": 6,
"h12": 7,
"h24": 12,
"h48": 19.5,
"tm": "2025-06-03T02:10:00.000Z",
"state": 1,
"warning": 0
},
]
}]
export default class RainDrpLayer extends BaseLayer {

92
src/views/Home/MapCtrl/mapstyle/shyjLayer.js
View File

@ -1,92 +0,0 @@
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': 'Marker',
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10, 0.8,
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'
}
};
export default class ShyjLayer extends BaseLayer {
static LayerName = 'ShyjLayer';
static SourceName = SourceName;
getStyle() {
const ret = clone(ShapeStyle);
this._setStyleVisibility(ret);
return ret;
}
getName() {
return ShyjLayer.LayerName;
}
getSubLayers() {
return [ShapeStyle.id];
}
async doRefreshLayer(mapCtrl) {
const ms = mapCtrl.getSource(SourceName);
let data = await fetch(`${process.env.PUBLIC_URL}/data/shyjFind.json`)
.then((response) => response.json())
.catch(() => null);
const list = data.filter(o=>o.lgtd&&o.lttd)
ms.setData(parseGeoJSON(list));
return true;
}
getFeatureTip(record) {
return record.stnm;
}
featureClicked(properties, dispatch) {
dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: properties })
// dispatch.runtime.setFeaturePop({
// type: InfoPopNames.PicStPop,
// properties,
// coordinates: [properties.lgtd, properties.lttd],
// offsetPop: true,
// });
}
}

7
src/views/Home/MapCtrl/mapstyle/sources.js
View File

@ -29,7 +29,7 @@ import ShuiyuandiQLayer from "./shuiyuandiQLayer";
import ShuikuLayer from "./shuikuLayer";
import RainDrpLayer from "./rainDrpLayer"
import XunchaLayer from "./xunchalayer"
import shyjLayer from "./shyjLayer"
const hash = window.location.origin;
@ -190,11 +190,8 @@ const sources = {
}, {})
),
//新图层
[shyjLayer.SourceName]: {
type: 'geojson',
data: { type: 'FeatureCollection', features: [] },
},
[BxjcLayer.SourceName]: {
type: 'geojson',
data: { type: 'FeatureCollection', features: [] },

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

@ -116,9 +116,6 @@ import Cxsk from './panels/Cxsk'
import Zdtj from './panels/Zdtj'
import Jcgjz from './panels/Jcgjz'
import JbqkLeft from './panels/JbqkLeft'
import FhxsYq2 from './panels/FhxsYq2'
import Zdgzsq from './panels/Zdgzsq'
import Czdbl from './panels/Czdbl'
import Skyb from './panels/Skyb'
@ -420,12 +417,6 @@ export default function PanelIndex({ name, style, ...params }) {
return <JbqkLeft style={style} />
} else if (name === '防汛基本情况右侧') {
return <JbqkRight style={style} />
} else if (name === '防洪形势雨情2') {
return <FhxsYq2 style={style} />
} else if (name === '重点关注水情') {
return <Zdgzsq style={style} />
} else if (name === '测站到报率') {
return <Czdbl style={style} />
}
return (
<PanelBox style={style} title={name} color="red">

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

@ -14,10 +14,10 @@ const VIEWS = [
{ id: 1, title: '监测数据', img: '/assets/menu/实时数据.png' },
// { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
{ id: 5, title: '预报', img: '/assets/menu/降雨中心.png' },
// { id: 6, title: '预警', img: '/assets/menu/病险水库.png' },
{ id: 6, title: '预警', img: '/assets/menu/病险水库.png' },
{ id: 4, title: '预演', img: '/assets/menu/预警分析.png' },
// { id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
// { id: 7, title: '调度', img: '/assets/menu/辅助决策.png' },
{ id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
{ id: 7, title: '调度', img: '/assets/menu/辅助决策.png' },
]
},
// { id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[
@ -85,14 +85,7 @@ export default function ActionDock({ }) {
const viewItem = useMemo(() => viewKey ? VIEWS.filter(o => o.id === viewKey)[0].children : VIEWS, [viewKey, VIEWS])
const dispatch = useDispatch();
const removePoint = () => {
const map = window.__mapref;
const layer = map.getLayer('关联站点')
if (layer) {
map.removeLayer('关联站点');
map.removeSource('关联站点');
}
}
return (
<div className="dp-actiondock">
@ -104,7 +97,6 @@ export default function ActionDock({ }) {
setViewKey(null)
dispatch.runtime.setScya(false)
dispatch.runtime.setGwtc(false)
removePoint()
}}>
<div className={clsx('button', { active: false })}>
<img width={40} style={{ marginLeft: '5px' }} src={'/assets/pump/退出.png'} />
@ -144,7 +136,6 @@ export default function ActionDock({ }) {
} else {
sessionStorage.setItem('point','')
}
removePoint()
}
}}>
<div className={clsx('button', { active: o.id===200?(view===207||view===203||view===205||view===206||view===200):view === o.id })}>

74
src/views/Home/panels/Czdbl/index.js
View File

@ -1,74 +0,0 @@
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 { DrpRealPromise } from '../../../../models/_/real';
import useRefresh from '../../../../utils/useRefresh';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import { TableSortLabel } from '@material-ui/core';
import { InfoPopNames } from '../../InfoPops';
// import AreaDrpChart from './chart';
import config from '../../../../config';
import TablePage from './table.js'
function DrpReal({ style }) {
const dispatch = useDispatch();
const [ tab, setTab ] = useState('1')
const [ tab2, setTab2 ] = useState('1')
const data = [
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
{ name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
{ name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
{ name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
]
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.drp],
zoom: config.poiPositionZoom.drp,
pitch: config.poiPitch,
bearing: 0
});
}
}
return (
<PanelBox
style={style}
title="测站到报率"
color="green"
tabs={
<>
</>
}
extra={
<>
<span className="button-group">
<span className={clsx({ active: tab==='1' })} onClick={() => setTab('1')}>山洪</span>
<span className={clsx({ active: tab==='2' })} onClick={() => setTab('2')}>水文</span>
<span className={clsx({ active: tab==='3' })} onClick={() => setTab('3')}>水库</span>
</span>
</>
}
>
<TablePage tab={tab}/>
</PanelBox>
)
}
export default DrpReal;

91
src/views/Home/panels/Czdbl/table.js
View File

@ -1,91 +0,0 @@
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 appconsts from '../../../../models/appconsts';
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
const data = [
{ name:'雨量站', name2:'10', name3:'8', name4:'2', name5:'80' },
{ name:'水位站', name2:'15', name3:'15', name4:'0', name5:'100' },
{ name:'图像站', name2:'10', name3:'10', name4:'0', name5:'100' },
{ name:'合计', name2:'35', name3:'33', name4:'2', name5:'94.29' },
]
const data2 = [
{ name:'合计', name2:'64', name3:'64', name4:'0', name5:'100' },
]
const data3 = [
{ name:'合计', name2:'12', name3:'12', name4:'0', name5:'100' },
]
function Page({ tab }) {
return (
<TableContainer style={{ height: '12rem' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '2rem' }} align="left"></DpTableCell>
<DpTableCell style={{ minWidth: '3rem' }} align="center">总数</DpTableCell>
<DpTableCell style={{ minWidth: '5rem' }} align="center">在线数量</DpTableCell>
<DpTableCell style={{ minWidth: '5rem' }} align="center">离线数量</DpTableCell>
<DpTableCell style={{ minWidth: '5rem' }} align="center">到报率（%）</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{
tab==='1'?data.map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
)):null
}
{
tab==='2'?data2.map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
)):null
}
{
tab==='3'?data3.map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
)):null
}
</TableBody>
</Table>
</TableContainer>
)
}
export default React.memo(Page);

538
src/views/Home/panels/DrpSta/index.js
View File

@ -1,11 +1,10 @@
import React, { useState, useEffect } from 'react';
import React, { useState,useEffect } from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import { parseGeoJSON } from "../../../../utils/tools";
import {
Box,
Typography,
@ -50,7 +49,7 @@ const useStyles = makeStyles((theme) => ({
marginBottom: theme.spacing(2)
},
timeButton: {
width: 210,
width:210,
color: '#fff',
borderColor: 'rgba(255,255,255,0.3)',
'&.MuiButton-contained': {
@ -98,7 +97,7 @@ const useStyles = makeStyles((theme) => ({
}
}));
export default function Overall({ style }) {
const dispatch = useDispatch();
const dispatch = useDispatch();
const classes = useStyles();
const [types, setTypes] = useState({
@ -135,351 +134,137 @@ export default function Overall({ style }) {
const drpData = [
{
"stcd": "61644000",
"stnm": "浮桥河",
"adcd": null,
"stcd": "61612910",
"stnm": "桃林河(阎河)",
"adcd": "421181000000000",
adnm: '阎家河镇桃林河村村民委员会',
zgrz: '55.67',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz:'58.43',
"wscd": null,
"importancy": 0,
"lgtd": 114.883583,
"lttd": 31.180444,
"lgtd": 115.087777777,
"lttd": 31.164444444,
"elev": null,
"hasRz": true,
"type": "sw",
"tm": "2025-06-06T22:00:00.000Z",
"rz": 43.6,
adnm: '麻城市',
zgrz: '48.17',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz: '47.60',
"state": 1
"type": "sh",
"today": 21,
"h1": 15.5,
"h3": 21,
"h6": 21,
"h12": 21,
"h24": 21,
"h48": 21,
"tm": "2025-06-06T22:15:00.000Z",
"state": 1,
"warning": 0
},
{
"stcd": "61615300",
"stnm": "木子店",
"adcd": null,
"wscd": null,
"importancy": 1,
"lgtd": 115.3625,
"lttd": 31.190278,
{
"stcd": "61612150",
"stnm": "鹰山畈(黄土岗)",
"adcd": "421181000000000",
"wscd": null,
adnm: '黄士岗镇英山畈村村民委员会(雾港河村、鹰山畈村)',
zgrz: '77.00',
time: '2025-06-12 10:33',
jjrz:'78.98',
"importancy": 0,
"lgtd": 115.073611,
"lttd": 31.386667,
"elev": null,
"hasRz": true,
"type": "sw",
"tm": "2025-06-06T21:00:00.000Z",
"rz": 133.89,
adnm: '麻城市',
zgrz: '138.20',
time: '2025-06-12 10:33',
jjrz: '137.89',
"state": 1
"type": "sh",
"today": 27,
"h1": 18.5,
"h3": 27,
"h6": 27,
"h12": 27,
"h24": 27,
"h48": 27,
"tm": "2025-06-06T22:00:00.000Z",
"state": 1,
"warning": 0
},
{
"stcd": "61612500",
"stnm": "王福店",
"adcd": null,
"stcd": "61613700",
"stnm": "四角门(宋铁二桥)",
"adcd": "421181000000000",
"wscd": null,
"importancy": 0,
"lgtd": 114.986666,
"lttd": 31.352944,
"lgtd": 114.8291,
"lttd": 31.0754,
adnm: '铁门岗乡大庙岗村村民委员会(四角门村、大庙岗村、大店村、肖上湾村)',
zgrz: '27.57',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz:'34.86',
"elev": null,
"hasRz": true,
"type": "sw",
"type": "sh",
"today": 3.5,
"h1": 2,
"h3": 3.5,
"h6": 3.5,
"h12": 3.5,
"h24": 3.5,
"h48": 3.5,
"tm": "2025-06-06T22:00:00.000Z",
"rz": 73.37,
adnm: '麻城市',
zgrz: '78.20',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz: '77.37',
"state": 1
"state": 1,
"warning": 0
},
]
const skData = [
{
"stcd": "61614200",
"type": "sk",
"hasRz": true,
"stnm": "浮桥河",
"adcd": "421181100000",
{
"stcd": "61614460",
"stnm": "项生(宋埠)",
"adcd": "421181000000000",
"wscd": null,
"importancy": 0,
adnm: '麻城市',
zgrz: '66.1',
time: '2025-06-11 10:14',
jjrz: '64.89',
"lgtd": 114.88069,
"lttd": 31.171967,
"elev": 0,
"damel": 71.33,
"dsflz": 68.04,
"fsltdz": 64.89,
"ddz": 51.78,
"zcxsw": 64.89,
"drpTm": "2025-06-06T22:00:00.000Z",
"today": 4,
"h1": 4,
"h3": 4,
"h6": 4,
"h12": 4,
"h24": 4,
"h48": 4,
"drpState": 1,
"rz": 60.7,
"w": 45490,
"xs":32133,
"a_fsltdz": -4.189999999999998,
"rzTm": "2025-06-06T22:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"layer": "RealSkLayer",
"layerPop": "RealSkPop"
},
{
"stcd": "61612700",
"type": "sk",
"hasRz": true,
"stnm": "碧绿河",
"adcd": "421181109000",
"wscd": null,
adnm: '麻城市',
zgrz: '138.2',
time: '2025-06-12 10:33',
jjrz: '137',
"importancy": 0,
"lgtd": 115.214444,
"lttd": 31.299722,
"elev": 0,
"damel": 142.9,
"dsflz": 139.08,
"fsltdz": 137,
"ddz": 105,
"zcxsw": 137,
"drpTm": "2025-06-06T22:00:00.000Z",
"today": 50,
"h1": 38,
"h3": 50,
"h6": 50,
"h12": 50,
"h24": 50,
"h48": 50,
"drpState": 1,
"rz": 120,
"w": 6015,
"xs": 1676,
"a_fsltdz": -17,
"rzTm": "2025-06-06T00:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"layer": "RealSkLayer",
"layerPop": "RealSkPop"
},
{
"stcd": "61612560",
"type": "sk",
"hasRz": true,
"stnm": "大河铺",
"adcd": "421181112000",
adnm: '麻城市',
zgrz: '161.5',
"importancy": 0,
adnm: '宋埠镇项生村村民委员会',
zgrz: '21.93',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz: '159',
"wscd": null,
"importancy": 0,
"lgtd": 114.941111,
"lttd": 31.464444,
"elev": 0,
"damel": 162.21,
"dsflz": 160.08,
"fsltdz": 159,
"ddz": 142.5,
"zcxsw": 159,
"drpTm": "2025-06-06T22:00:00.000Z",
"today": 50,
"h1": 50,
"h3": 50,
"h6": 50,
"h12": 50,
"h24": 50,
"h48": 50,
"drpState": 1,
"rz": 144.5,
"w": 1574,
"xs": "--",
"a_fsltdz": -14.5,
"rzTm": "2025-06-06T00:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"layer": "RealSkLayer",
"layerPop": "RealSkPop"
},
{
"stcd": "716460001",
"type": "sk",
"hasRz": true,
"stnm": "杉林河",
"adcd": "421181107000",
"wscd": null,
adnm: '麻城市',
zgrz: '224.31',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz: '231',
"importancy": 0,
"lgtd": 115.433056,
"lttd": 31.304444,
"elev": 0,
"damel": 236.2,
"dsflz": 233.92,
"fsltdz": 231,
"ddz": 204,
"zcxsw": 231,
"drpTm": "2025-04-11T05:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 224.31,
"w": 1415,
"xs": 750,
"a_fsltdz": -6.689999999999998,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"layer": "RealSkLayer",
"layerPop": "RealSkPop"
jjrz:'23.65',
"lgtd": 114.798056,
"lttd": 31.058611,
"elev": null,
"hasRz": true,
"type": "sh",
"today": 4.5,
"h1": 2,
"h3": 4.5,
"h6": 4.5,
"h12": 4.5,
"h24": 4.5,
"h48": 4.5,
"tm": "2025-06-06T22:00:00.000Z",
"state": 1,
"warning": 0
},
]
const flyTo = (row) => {
const { lgtd, lttd } = row;
const skData = []
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: timeRange == '3h'?'RealSkPop':"RealHDPop", properties: row, coordinates: [row.lgtd, row.lttd] });
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + 0.005],
zoom: 15,
pitch: 50,
bearing: 0
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const setSkLayer = (data = []) => {
const map = window.__mapref;
const layer = map.getLayer('临时水库tz')
if (layer) {
map.removeLayer('临时水库tz');
map.removeSource('临时水库tz');
}
if (data.length === 0) { return }
map.addLayer({
'id': '临时水库tz',//+new Date().getTime(),
'type': 'symbol',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [],
},
},
'layout': {
// 'icon-allow-overlap': true,
// 'text-allow-overlap': true,
'icon-image': '水库', // 从properties中动态读取icon字段
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10, 0.8,
14, 0.8,
],
'text-size': [
'interpolate', ['linear'], ['zoom'],
5, 10,
14, 14,
],
'text-font': ['Roboto Black'],
'text-field': [
'step',
['zoom'],
'',
8, ['get', 'stnm']
],
'text-anchor': 'top',
'text-offset': [0, 1],
},
'paint': {
'text-color': '#fff'
},
'visibility': 'visible',
});
map.getSource('临时水库tz').setData(parseGeoJSON(data))
}
const setHdLayer = (data = []) => {
const map = window.__mapref;
const layer = map.getLayer('关联站点')
if (layer) {
map.removeLayer('关联站点');
map.removeSource('关联站点');
}
if (data.length === 0) { return }
map.addLayer({
'id': '关联站点',//+new Date().getTime(),
'type': 'symbol',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [],
},
},
'layout': {
'icon-allow-overlap': true,
'text-allow-overlap': true,
'icon-image': '水位站',
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10, 0.5,
14, 1,
],
'text-size': [
'interpolate', ['linear'], ['zoom'],
10, 10,
14, 16,
],
},
'paint': {
'text-color': [
'case',
['!=', ['get', 'state'], 1], '#888',
['==', ['get', 'warning'], 3], '#f00',
['==', ['get', 'warning'], 2], 'yellow',
['==', ['get', 'warning'], 1], 'yellow',
'#0f0'
],
'text-halo-color': '#062040',
'text-halo-width': 1
},
'visibility': 'visible',
});
map.getSource('关联站点').setData(parseGeoJSON(data))
}
const [type, setType] = useState('h24')
const [type, setType] = useState('1h')
const [data, setData] = useState([])
useEffect(() => {
const newArr = timeRange == '3h' ? skData : drpData;
setData(newArr)
}, [timeRange])
return (
<PanelBox
style={style}
title="水情统计"
color="green"
extra={
extra={
<span className="button-group">
{
['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
@ -490,73 +275,66 @@ export default function Overall({ style }) {
}
>
<Box className={classes.root}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<ButtonGroup variant="outlined">
{[
{ value: '1h', label: '河道水情' },
{ value: '3h', label: '水库水情' },
].map((item) => (
<Button
key={item.value}
className={classes.timeButton}
onClick={() => {
if (item.value == '1h' || item.value == '3h') {
setTimeRange(item.value)
}
}}
variant={timeRange === item.value ? 'contained' : 'outlined'}
style={{ padding: '5px 10px' }}
>
{item.label}
</Button>
))}
</ButtonGroup>
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<ButtonGroup variant="outlined">
{[
{ value: '1h', label: '河道水情' },
{ value: '3h', label: '水库水情' },
].map((item) => (
<Button
key={item.value}
className={classes.timeButton}
onClick={() => {
if (item.value == '1h' || item.value == '3h') {
setTimeRange(item.value)
}
}}
variant={timeRange === item.value ? 'contained' : 'outlined'}
style={{ padding: '5px 10px' }}
>
{item.label}
</Button>
))}
</ButtonGroup>
</div>
</Box>
<TableContainer style={{ height: '70%' }}>
<Table size="small" stickyHeader>
<TableHead >
<DpTableRow>
<DpTableCell style={{ minWidth: '3rem' }} align='center'>序号</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>站名</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>政区</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>{timeRange == '1h' ? "警戒水位(m)" : '汛限水位(m)'}</DpTableCell>
{/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
</DpTableRow>
</TableHead>
<TableBody>
{
data.map((item, i) => (
<DpTableRow key={item.stcd} onClick={() => {
flyTo(item)
if (timeRange == '3h') {
setSkLayer([item])
} else {
setHdLayer([item])
}
}}>
<DpTableCell align='center'>{i + 1}</DpTableCell>
<DpTableCell align='center'>{item.stnm}</DpTableCell>
<DpTableCell align='center'>
<div
className="table-ellipsis cursor-pointer"
title={item.adnm}
>{item.adnm}</div>
</DpTableCell>
<DpTableCell align='center'>{item.zgrz}</DpTableCell>
<DpTableCell align='center'>{item.time}</DpTableCell>
<DpTableCell align='center'>{item.jjrz}</DpTableCell>
</DpTableRow>
))
}
</TableBody>
</Table>
</TableContainer>
<TableContainer style={{ height: '70%' }}>
<Table size="small" stickyHeader>
<TableHead >
<DpTableRow>
<DpTableCell style={{ minWidth: '3rem' }} align='center'>序号</DpTableCell>
<DpTableCell style={{minWidth: '8rem' }} align='center'>站名</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>政区</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>警戒水位(m)</DpTableCell>
{/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
</DpTableRow>
</TableHead>
<TableBody>
{
data.map((item,i) => (
<DpTableRow key={item.stcd} onClick={() => flyTo(item)}>
<DpTableCell align='center'>{i + 1}</DpTableCell>
<DpTableCell align='center'>{item.stnm}</DpTableCell>
<DpTableCell align='center'>
<div
className="table-ellipsis cursor-pointer"
title={item.adnm}
>{item.adnm}</div>
</DpTableCell>
<DpTableCell align='center'>{item.zgrz}</DpTableCell>
<DpTableCell align='center'>{item.time}</DpTableCell>
<DpTableCell align='center'>{item.jjrz}</DpTableCell>
</DpTableRow>
))
}
</TableBody>
</Table>
</TableContainer>
</PanelBox>
)
}

31
src/views/Home/panels/Drpfx/index.js
View File

@ -119,8 +119,8 @@ export default function Overall({ style }) {
{ id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
{ id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
{ id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
{ id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
{ id: 'storm', name: '暴雨站点', count: 1, color: 'green' }
{ id: 'heavy', name: '大暴雨站点', count: 1, color: 'blue2' },
{ id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
];
const toggleExpand = (id) => {
@ -132,25 +132,24 @@ export default function Overall({ style }) {
const drpData = [
{
"stcd": "Q9111",
"stnm": "福田河",
"stcd": "61612910",
"stnm": "桃林河(阎河)",
"adcd": "421181000000000",
'test':1,
"wscd": null,
"importancy": 0,
"lgtd": 115.0944,
"lttd": 31.4747,
"lgtd": 115.087777777,
"lttd": 31.164444444,
"elev": null,
"hasRz": true,
"type": "qx",
"today": 50.3,
"h1": 50.2,
"h3": 50.2,
"h6": 50.2,
"h12": 50.2,
"h24": 50.3,
"tm": "2025-06-06T22:00:00.000Z",
"type": "sh",
"today": 7,
"h1": 12,
"h3": 40,
"h6": 69,
"h12": 133,
"h24": 261,
"tm": "2025-06-03T02:10:00.000Z",
"state": 1,
"warning": 0
},
@ -258,7 +257,7 @@ export default function Overall({ style }) {
<Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
<Box className={`${classes.expandedRow} ${station.color}`}>
{/* 展开的详细内容可以在这里添加 */}{
station.id == 'storm' && drpData.map(item => (
station.id == 'heavy' && drpData.map(item => (
<TableRow onClick={() =>flyTo(item)}>
<DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
<DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>

141
src/views/Home/panels/FhxsYq2/chart.js
View File

@ -1,141 +0,0 @@
import React, { useMemo } from 'react';
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
const pallete = [
['#177ab3', '#51c3e7'],
['#9976dc', '#c792ee'],
['#94a1eb', '#a7caf8'],
['#7ae5c3', '#c9f4ea'],
['#c7dca5', '#f5fcd5'],
['#7988d9', '#9dc6f1'],
['#d9ed8f', '#d3f89b'],
];
const palleteLen = pallete.length;
const AreaDrpChart = ({ data }) => {
const { max, sdata } = useMemo(() => {
let max = 0;
data.forEach(o => {
max = Math.max(max, o.av)
});
max = [10, 20, 50, 100, 200, 300, 400].find(i => i >= max);
return {
max,
sdata: data.map(o => ({ ...o, name: o.NAME.split('').join('\n') })),
}
}, [data]);
var option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
var res = `${params.name.substr('2020-10-14 '.length, 2)}时降雨：${params.data}mm`;
return res;
}
},
grid: {
x: 18,
y: 24,
x2: 28,
y2: 36,
bottom: 65,
borderWidth: 0
},
calculable: true,
xAxis: [
{
type: 'category',
data: sdata.map(o => o.name),
splitLine: {
show: false
},
axisLabel: {
color: '#bbb',
fontSize: 10,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
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: 0,
max,
}
],
series: [
{
name: '降雨',
type: 'bar',
barWidth: '10px',
data: sdata.map(o => o.av),
itemStyle: {
normal: {
color: (params) => {
return new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: pallete[params.dataIndex % palleteLen][0] },
{ offset: 1, color: pallete[params.dataIndex % palleteLen][1] }
]
)
},
},
},
label: {
show: true,
position: 'top',
color: '#bbb',
fontSize: 12,
textShadowBlur: 4,
textShadowColor: '#6ab',
},
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '11rem', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

273
src/views/Home/panels/FhxsYq2/index.js
View File

@ -1,273 +0,0 @@
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 { DrpRealPromise } from '../../../../models/_/real';
import useRefresh from '../../../../utils/useRefresh';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import { TableSortLabel } from '@material-ui/core';
import { InfoPopNames } from '../../InfoPops';
import AreaDrpChart from './chart';
import config from '../../../../config';
function DrpReal({ style }) {
const dispatch = useDispatch();
const [ tab, setTab ] = useState('1')
const data = [
{
"ADCD": "421181001000000",
"NAME": "龙池办事处",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181002000000",
"NAME": "鼓楼办事处",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181003000000",
"NAME": "南湖办事处",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181100000000",
"NAME": "中馆驿镇",
"drp": 4,
"cnt": 1,
"av": 4
},
{
"ADCD": "421181101000000",
"NAME": "宋埠镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181102000000",
"NAME": "歧亭镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181103000000",
"NAME": "白果镇",
"drp": 15,
"cnt": 1,
"av": 15
},
{
"ADCD": "421181104000000",
"NAME": "夫子河镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181105000000",
"NAME": "阎家河镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181106000000",
"NAME": "龟山镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181107000000",
"NAME": "盐田河镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181108000000",
"NAME": "张家畈镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181109000000",
"NAME": "木子店镇",
"drp": 93.5,
"cnt": 2,
"av": 46.8
},
{
"ADCD": "421181110000000",
"NAME": "三河口镇",
"drp": 18,
"cnt": 1,
"av": 18
},
{
"ADCD": "421181111000000",
"NAME": "黄土岗镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181112000000",
"NAME": "福田河镇",
"drp": 50,
"cnt": 1,
"av": 50
},
{
"ADCD": "421181113000000",
"NAME": "乘马岗镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181114000000",
"NAME": "顺河镇",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181200000000",
"NAME": "铁门岗乡",
"drp": 0,
"cnt": 0,
"av": 0
},
{
"ADCD": "421181471000000",
"NAME": "经济开发区",
"drp": 0,
"cnt": 0,
"av": 0
}
]
const data2 = [
{
"ADCD": "421181001000000",
"NAME": "举水",
"drp": 40,
"cnt": 0,
"av": 40
},
{
"ADCD": "421181002000000",
"NAME": "巴水",
"drp": 35,
"cnt": 0,
"av": 35
},
{
"ADCD": "421181003000000",
"NAME": "芭茅河",
"drp": 40,
"cnt": 0,
"av": 40
},
{
"ADCD": "421181100000000",
"NAME": "浮桥河",
"drp": 47,
"cnt": 1,
"av": 47
},
{
"ADCD": "421181101000000",
"NAME": "麻溪河",
"drp": 20,
"cnt": 0,
"av": 20
},
{
"ADCD": "421181102000000",
"NAME": "肖家河",
"drp": 15,
"cnt": 0,
"av": 15
},
{
"ADCD": "421181103000000",
"NAME": "余家河",
"drp": 45,
"cnt": 1,
"av": 45
},
{
"ADCD": "421181104000000",
"NAME": "白果河",
"drp": 20,
"cnt": 0,
"av": 20
}
]
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.drp],
zoom: config.poiPositionZoom.drp,
pitch: config.poiPitch,
bearing: 0
});
}
}
return (
<PanelBox
style={style}
title="雨情"
color="green"
tabs={
<>
</>
}
extra={
<>
<span className="button-group">
<span className={clsx({ active: tab==='1' })} onClick={() => setTab('1')}>政区</span>
<span className={clsx({ active: tab==='2' })} onClick={() => setTab('2')}>流域</span>
</span>
</>
}
>
<div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
<span className="card-group">
<span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>1h</span>
<span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>3h</span>
<span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>6h</span>
<span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>12h</span>
<span className={clsx({ active: true})} style={{marginRight:'0.3rem'}}>24h</span>
<span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>48h</span>
</span>
</div>
<AreaDrpChart data={tab==='1'?data:data2} />
</PanelBox>
)
}
export default DrpReal;

59
src/views/Home/panels/HDReal/index.js
View File

@ -1,7 +1,6 @@
import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import { parseGeoJSON } from "../../../../utils/tools";
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
@ -47,7 +46,7 @@ function HDReal({ style }) {
}
ret.push(o);
});
return ret.slice(-7).reverse();
return ret;
}, [data, tableRzFilter]);
const flyTo = (record) => {
@ -70,58 +69,6 @@ function HDReal({ style }) {
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const setLayer = (data = [], type) => {
const map = window.__mapref;
const layer = map.getLayer('关联站点')
if (layer) {
map.removeLayer('关联站点');
map.removeSource('关联站点');
}
if (data.length === 0) { return }
if (type === 'hd') {
map.addLayer({
'id': '关联站点',//+new Date().getTime(),
'type': 'symbol',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [],
},
},
'layout': {
'icon-allow-overlap': true,
'text-allow-overlap': true,
'icon-image': '水位站',
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10, 0.5,
14, 1,
],
'text-size': [
'interpolate', ['linear'], ['zoom'],
10, 10,
14, 16,
],
},
'paint': {
'text-color': [
'case',
['!=', ['get', 'state'], 1], '#888',
['==', ['get', 'warning'], 3], '#f00',
['==', ['get', 'warning'], 2], 'yellow',
['==', ['get', 'warning'], 1], 'yellow',
'#0f0'
],
'text-halo-color': '#062040',
'text-halo-width': 1
},
'visibility': 'visible',
});
}
map.getSource('关联站点').setData(parseGeoJSON(data))
}
return (
<PanelBox
@ -153,9 +100,9 @@ function HDReal({ style }) {
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.stcd} onClick={() => { flyTo(row); setLayer([row],'hd')}}>
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer">{row.stnm}</div>
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="right">{renderHDRz(row)}</DpTableCell>
{rzRender(row.rz, row.rz+5.5)}

20
src/views/Home/panels/Hlzydm/index.js
View File

@ -14,11 +14,11 @@ import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
const data = [
{ name:'举水', dm:'廖家畈断面', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'举水', dm:'草鞋店断面', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
{ name:'巴水', dm:'义洲河断面', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
{ name:'巴水', dm:'义洲河断面', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
{ name:'芭茅河', dm:'芭茅河断面', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
{ name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
{ name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
{ name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
]
function SkReal({ style }) {
@ -33,11 +33,11 @@ function SkReal({ style }) {
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '5rem' }} align="left">流域</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">断面名称</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">预计洪峰水位</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">预计洪峰流量</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">峰现时间</DpTableCell>
<DpTableCell style={{ maxWidth: '30%' }} align="left">河流名称</DpTableCell>
<DpTableCell align="center">断面名称</DpTableCell>
<DpTableCell align="center">洪峰水位</DpTableCell>
<DpTableCell align="center">洪峰流量</DpTableCell>
<DpTableCell align="center">峰现时间</DpTableCell>
</TableRow>
</TableHead>
<TableBody>

57
src/views/Home/panels/SkReal/index.js
View File

@ -1,7 +1,6 @@
import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import { parseGeoJSON } from "../../../../utils/tools";
import HighlightOff from '@material-ui/icons/HighlightOff';
import { makeStyles } from '@material-ui/core/styles';
@ -58,7 +57,7 @@ function SkReal({ style }) {
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
// dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.sk],
zoom: config.poiPositionZoom.sk,
@ -82,55 +81,7 @@ function SkReal({ style }) {
const handleClose = () => {
setOpen(false);
};
const setSkLayer = (data = []) => {
const map = window.__mapref;
const layer = map.getLayer('临时水库tz')
if (layer) {
map.removeLayer('临时水库tz');
map.removeSource('临时水库tz');
}
if (data.length === 0) { return }
map.addLayer({
'id': '临时水库tz',//+new Date().getTime(),
'type': 'symbol',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [],
},
},
'layout': {
// 'icon-allow-overlap': true,
// 'text-allow-overlap': true,
'icon-image': '水库', // 从properties中动态读取icon字段
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10, 0.8,
14, 0.8,
],
'text-size': [
'interpolate', ['linear'], ['zoom'],
5, 10,
14, 14,
],
'text-font': ['Roboto Black'],
'text-field': [
'step',
['zoom'],
'',
8, ['get', 'stnm']
],
'text-anchor': 'top',
'text-offset': [0, 1],
},
'paint': {
'text-color': '#fff'
},
'visibility': 'visible',
});
map.getSource('临时水库tz').setData(parseGeoJSON(data))
}
return (
<PanelBox
style={style}
@ -156,9 +107,9 @@ const setSkLayer = (data = []) => {
</TableHead>
<TableBody>
{[...sortedData.filter(o=>o.rzState===1),...sortedData.filter(o=>o.rzState!==1)].map((row) => (
<DpTableRow key={row.stcd} onClick={() => { flyTo(row); setSkLayer([row]) }}>
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" >{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div>
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div>
</DpTableCell>
<DpTableCell align="right">{row['h24']}</DpTableCell>
<DpTableCell align="right">{row?.rz}</DpTableCell>

2246
src/views/Home/panels/Tqyb24h/dsld.js
View File

File diff suppressed because it is too large Load Diff

20
src/views/Home/panels/Tqyb24h/index.js
View File

@ -35,17 +35,17 @@ export default function AreaDrp({ style }) {
const dispatch = useDispatch();
const [tab,setTab] = useState('1')
useEffect(()=>{
// if(tab==='1'){
// dispatch.rcview.showRealContour('h24')
// }else{
// dispatch.rcview.showRealContour('h48')
// }
if(tab==='1'){
dispatch.rcview.showRealContour('h24')
}else{
dispatch.rcview.showRealContour('h48')
}
// return ()=>{
// dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
// dispatch.runtime.setLayerSetting({ planeArea: null });
// dispatch.map.setLayerVisible({ ContourLayer: false });
// }
return ()=>{
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
dispatch.runtime.setLayerSetting({ planeArea: null });
dispatch.map.setLayerVisible({ ContourLayer: false });
}
},[tab])

2259
src/views/Home/panels/Tqyb24h/yb24h.js
View File

File diff suppressed because it is too large Load Diff

17
src/views/Home/panels/Warn/ShYj.js
View File

@ -24,7 +24,7 @@ function Item({ data, viewInfo }) {
</div>
<div className="tail">
<span>{data.warnstm.substr(0, 'yyyy-mm-dd hh:mm'.length)}</span>
{/* <a onClick={() => viewInfo(data, 'danad')} style={{ textAlign: 'right' }}>危险区</a> */}
<a onClick={() => viewInfo(data, 'danad')} style={{ textAlign: 'right' }}>危险区</a>
</div>
</div>
</div>
@ -90,16 +90,7 @@ function ShYj({ data }) {
});
}
} else {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: 50,
bearing: 0
});
}
// dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record })
dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record })
}
}, [dispatch]);
@ -108,9 +99,9 @@ function ShYj({ data }) {
return (
<div className="dppanel-shyj">
{/* {
{
hisdata?.length > 0 && <DpAlert severity="info">当前无预警，显示最新10条已关闭预警</DpAlert>
} */}
}
{
showdata.map(o => (
<Item key={o.warnid} viewInfo={viewInfo} data={o} />

78
src/views/Home/panels/Zdgzsq/index.js
View File

@ -1,78 +0,0 @@
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 { DrpRealPromise } from '../../../../models/_/real';
import useRefresh from '../../../../utils/useRefresh';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import { TableSortLabel } from '@material-ui/core';
import { InfoPopNames } from '../../InfoPops';
// import AreaDrpChart from './chart';
import config from '../../../../config';
import TablePage from './table.js'
function DrpReal({ style }) {
const dispatch = useDispatch();
const [ tab, setTab ] = useState('1')
const [ tab2, setTab2 ] = useState('1')
const data = [
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
{ name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
{ name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
{ name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
]
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.drp],
zoom: config.poiPositionZoom.drp,
pitch: config.poiPitch,
bearing: 0
});
}
}
return (
<PanelBox
style={style}
title="雨情"
color="green"
tabs={
<>
</>
}
extra={
<>
<span className="button-group">
<span className={clsx({ active: tab==='1' })} onClick={() => setTab('1')}>河道</span>
<span className={clsx({ active: tab==='2' })} onClick={() => setTab('1')}>水库</span>
</span>
</>
}
>
<div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
<span className="card-group">
<span className={clsx({ active: tab2==='1'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('1')}>政区</span>
<span className={clsx({ active: tab2==='2'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('2')}>流域</span>
</span>
</div>
{ tab==='1'?<TablePage tab={tab2}/>:null }
</PanelBox>
)
}
export default DrpReal;

57
src/views/Home/panels/Zdgzsq/table.js
View File

@ -1,57 +0,0 @@
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 appconsts from '../../../../models/appconsts';
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
const data = [
{ name:'宋埠镇', name2:'项生(宋埠)', name3:'675.49', name4:'680.23', name5:'692.17' },
{ name:'黄土岗镇', name2:'鹰山畈(黄土岗)', name3:'692.92', name4:'710.29', name5:'728.38' },
]
const data2 = [
{ name:'阎家河', name2:'桃林河(阎河)', name3:'609.78', name4:'603.20', name5:'639.21' },
{ name:'巴水', name2:'杨梅河(木子店)', name3:'509.53', name4:'539.20', name5:'558.29' },
]
function Page({ tab }) {
return (
<TableContainer style={{ height: '12rem' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '6rem' }} align="left">{tab==='1'?'乡镇':'流域'}</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">测站</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">实时水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">警戒水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">保证水位(m)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{(tab==='1'?data:data2).map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
}
export default React.memo(Page);

34
src/views/Home/panels/Zyskyb/index.js
View File

@ -3,13 +3,6 @@ import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } fro
import PanelBox from '../../components/PanelBox';
import config from '../../../../config';
import { useDispatch, useSelector } from 'react-redux';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import AreaDrpChart from './chart';
@ -245,32 +238,7 @@ function DrpReal({ style }) {
</>
}
>
{/* <AreaDrpChart data={[]} rz={rz}/> */}
<div style={{color:'#ffffff',padding:'5px',background:'#313f65',width:"7rem",textAlign:"center",margin:'10px',marginBottom:"10px",borderRadius:'3px',fontSize:'14px'}}>水库雨量预报</div>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow style={{height:'3.2rem'}}>
<DpTableCell align="center">h1</DpTableCell>
<DpTableCell align="center">h3</DpTableCell>
<DpTableCell align="center">h6</DpTableCell>
<DpTableCell align="center">h12</DpTableCell>
<DpTableCell align="center">h24</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
<DpTableRow key={1}>
<DpTableCell align="center">0</DpTableCell>
<DpTableCell align="center">0</DpTableCell>
<DpTableCell align="center">0.1</DpTableCell>
<DpTableCell align="center">0.2</DpTableCell>
<DpTableCell align="center">0.2</DpTableCell>
</DpTableRow>
</TableBody>
</Table>
</TableContainer>
<div style={{color:'#ffffff',padding:'5px',background:'#313f65',width:"7rem",textAlign:"center",margin:'10px',marginBottom:"10px",borderRadius:'3px',fontSize:'14px'}}>水库24h预报</div>
<img src={`${process.env.PUBLIC_URL}/assets/yuanyanjg.png`} alt="" style={{ width: '25rem',marginLeft:'0.6rem',marginBottom:"0.5rem" }}/>
<AreaDrpChart data={[]} rz={rz}/>
</PanelBox>
)
}