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

Compare commits

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

6 Commits
12f3fa0878 ... afcb324911

Author SHA1 Message Date
李神峰 afcb324911 feat(): 监测数据开发 2025-06-13 09:28:51 +08:00
秦子超 fa9121b76e 修改菜单 2025-06-13 09:18:36 +08:00
秦子超 dce41ebac5 Merge branch 'qzc-dev' 2025-06-13 09:14:59 +08:00
秦子超 9b29aa1d3e 防汛页面 2025-06-13 09:14:33 +08:00
李神峰 8f395012e9 feat(): 防汛监测数据开发 2025-06-13 09:09:18 +08:00
秦子超 4be858d3e8 防汛修改 2025-06-12 18:00:16 +08:00
26 changed files with 1609 additions and 4614 deletions
Show Stats Expand all files Collapse all files

16
public/data/shyjFind.json
View File

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

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

@ -191,7 +191,7 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => { Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false; layerVisible['Dcpj_' + key + 'Layer'] = false;
}); });
} else if (id === 9) { } else if (id === 8) {
layerVisible = { layerVisible = {
RealDrpLayer: false, RealDrpLayer: false,
RealHDLayer: false, RealHDLayer: false,
@ -201,8 +201,9 @@ const map = {
YuwaiLayer: false, YuwaiLayer: false,
AdcdLayer: true, AdcdLayer: true,
WataLayer: false, WataLayer: false,
RealSkLayerQ2: false, RealSkLayerQ2: true,
RealHDLayerQ2: false, RealHDLayerQ2: true,
ShyjLayer:true,
} }
Object.keys(DCPJ_TYPES).forEach(key => { Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false; layerVisible['Dcpj_' + key + 'Layer'] = false;
@ -549,36 +550,48 @@ const map = {
dispatch.runtime.setFeaturePop(null); dispatch.runtime.setFeaturePop(null);
if (id === 8) { // if (id === 8) {
dispatch.rcview.showRealContour('h24') // dispatch.rcview.showRealContour('h24')
} else { // } else {
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined }); // dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
dispatch.runtime.setLayerSetting({ planeArea: null }); // dispatch.runtime.setLayerSetting({ planeArea: null });
dispatch.map.setLayerVisible({ ContourLayer: false }); // dispatch.map.setLayerVisible({ ContourLayer: false });
} // }
if (id === 201) { if (id === 201) {
dispatch.map.setLayerSetting({ dom: false }); dispatch.map.setLayerSetting({ dom: false });
map.setLayoutProperty('热力图', 'visibility', 'visible'); if(map){
map.setLayoutProperty('热力图', 'visibility', 'visible');
}
} else { } else {
// dispatch.map.setLayerSetting({dom: true}); // dispatch.map.setLayerSetting({dom: true});
map.setLayoutProperty('热力图', 'visibility', 'none'); if(map){
map.setLayoutProperty('热力图', 'visibility', 'none');
}
} }
if (id === 306) { if (id === 306 && map) {
dispatch.map.setLayerSetting({ dom: false }); dispatch.map.setLayerSetting({ dom: false });
dispatch.runtime.setShowGw(true) dispatch.runtime.setShowGw(true)
// map.setLayoutProperty('管网图', 'visibility', 'visible'); // if(map){
// map.setLayoutProperty('管网图', 'visibility', 'visible');
// }
} else { } else {
dispatch.runtime.setShowGw(false) dispatch.runtime.setShowGw(false)
// dispatch.map.setLayerSetting({dom: true}); // dispatch.map.setLayerSetting({dom: true});
// map.setLayoutProperty('管网图', 'visibility', 'none'); // if(map){
// map.setLayoutProperty('管网图', 'visibility', 'none');
// }
} }
if (id === 503 || id == 501 || id == 504 || id == 505 || id == 506 || id == 507) { if (id === 503 || id == 501 || id == 504 || id == 505 || id == 506 || id == 507) {
dispatch.map.setLayerSetting({ dom: false }); dispatch.map.setLayerSetting({ dom: false });
map.setLayoutProperty('灌区图', 'visibility', 'visible'); if(map){
map.setLayoutProperty('灌区图', 'visibility', 'visible');
}
} else { } else {
// dispatch.map.setLayerSetting({dom: true}); // dispatch.map.setLayerSetting({dom: true});
map.setLayoutProperty('灌区图', 'visibility', 'none'); if(map){
map.setLayoutProperty('灌区图', 'visibility', 'none');
}
} }
if (id != 504) { if (id != 504) {
dispatch.runtime.setYyfa({}) dispatch.runtime.setYyfa({})
@ -586,23 +599,30 @@ const map = {
if ( if (
id === 3 id === 3
|| id === 8
|| id === 203 || id === 203
|| id === 205 || id === 205
|| id === 206 || id === 206
|| id === 200 || id === 200
) { ) {
dispatch.map.setLayerSetting({ dom: true }); dispatch.map.setLayerSetting({ dom: true });
// map.setLayoutProperty('卫星图', 'visibility', 'visible'); // if(map){
// map.setLayoutProperty('卫星图', 'visibility', 'visible');
// }
} else { } else {
dispatch.map.setLayerSetting({ dom: false }); dispatch.map.setLayerSetting({ dom: false });
// map.setLayoutProperty('卫星图', 'visibility', 'none'); // if(map){
// map.setLayoutProperty('卫星图', 'visibility', 'none');
// }
} }
if(id!==200&&id!==203&&id!==205&&id!==206){ if(id!==200&&id!==203&&id!==205&&id!==206){
const layer = map.getLayer('临时水库tz') if(map){
if(layer){ const layer = map.getLayer('临时水库tz')
if(layer){
map.removeLayer('临时水库tz'); map.removeLayer('临时水库tz');
map.removeSource('临时水库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: '天气' },
{ key: '未来24h预报', style: { height: '40%', flexGrow: 1 } }, { key: '未来24h预报', style: { height: '40%', flexGrow: 1 } },
]; ];
leftFullHeight = true; // leftFullHeight = true;
} else if (view === 6) { } else if (view === 6) {
left = [ left = [
{ key: '天气' }, { key: '天气' },
@ -236,11 +236,14 @@ export default function calcLayout(view, rightStack, hidePanels) {
rightFullHeight = true; rightFullHeight = true;
}else if (view === 8) { }else if (view === 8) {
right = [ right = [
{ key: '警报' }, // { key: '警报' },
{ key: '防洪形势天气预报', style: { height: '18.5rem'} }, { key: '防洪形势雨情2', style: {} },
{ key: '防洪形势水情', style: { height: '18.5rem'} }, { key: '重点关注水情', style: { height: '18rem'} },
{ key: '测站到报率', style: { height: '18rem' } },
// { key: '防洪形势天气预报', style: { height: '18.5rem'} },
// { key: '防洪形势水情', style: { height: '18.5rem'} },
// { key: '河道水位', style: { height: '10rem', flexGrow: 1 } }, // { 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: '工情', style: { height: '10rem', flexGrow: 1 } },
// { key: '今日值班' }, // { key: '今日值班' },
]; ];
@ -277,10 +280,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
// ] // ]
} else if (view === 5) { } else if (view === 5) {
right = [ right = [
{ key: '警报' }, { key: '重要水库预报', style: { flexGrow: 1 } },
// { key: '气象预警综述' },
{ key: '河流重要断面预报', style: { height: '40%', flexGrow: 1 } }, { key: '河流重要断面预报', style: { height: '40%', flexGrow: 1 } },
{ key: '重要水库预报', style: { height: '18rem', flexGrow: 1 } },
]; ];
} else if (view === 6) { } else if (view === 6) {
right = [ right = [

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

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

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

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

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

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

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

@ -0,0 +1,92 @@
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 ShuikuLayer from "./shuikuLayer";
import RainDrpLayer from "./rainDrpLayer" import RainDrpLayer from "./rainDrpLayer"
import XunchaLayer from "./xunchalayer" import XunchaLayer from "./xunchalayer"
import shyjLayer from "./shyjLayer"
const hash = window.location.origin; const hash = window.location.origin;
@ -190,8 +190,11 @@ const sources = {
}, {}) }, {})
), ),
//新图层 //新图层
[shyjLayer.SourceName]: {
type: 'geojson',
data: { type: 'FeatureCollection', features: [] },
},
[BxjcLayer.SourceName]: { [BxjcLayer.SourceName]: {
type: 'geojson', type: 'geojson',
data: { type: 'FeatureCollection', features: [] }, data: { type: 'FeatureCollection', features: [] },

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

@ -116,6 +116,9 @@ import Cxsk from './panels/Cxsk'
import Zdtj from './panels/Zdtj' import Zdtj from './panels/Zdtj'
import Jcgjz from './panels/Jcgjz' import Jcgjz from './panels/Jcgjz'
import JbqkLeft from './panels/JbqkLeft' 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' import Skyb from './panels/Skyb'
@ -417,6 +420,12 @@ export default function PanelIndex({ name, style, ...params }) {
return <JbqkLeft style={style} /> return <JbqkLeft style={style} />
} else if (name === '防汛基本情况右侧') { } else if (name === '防汛基本情况右侧') {
return <JbqkRight style={style} /> 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 ( return (
<PanelBox style={style} title={name} color="red"> <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: 1, title: '监测数据', img: '/assets/menu/实时数据.png' },
// { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' }, // { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
{ id: 5, 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: 4, title: '预演', img: '/assets/menu/预警分析.png' },
{ id: 3, title: '预案', img: '/assets/menu/辅助决策.png' }, // { id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
{ id: 7, title: '调度', img: '/assets/menu/辅助决策.png' }, // { id: 7, title: '调度', img: '/assets/menu/辅助决策.png' },
] ]
}, },
// { id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[ // { id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[
@ -85,7 +85,14 @@ export default function ActionDock({ }) {
const viewItem = useMemo(() => viewKey ? VIEWS.filter(o => o.id === viewKey)[0].children : VIEWS, [viewKey, VIEWS]) const viewItem = useMemo(() => viewKey ? VIEWS.filter(o => o.id === viewKey)[0].children : VIEWS, [viewKey, VIEWS])
const dispatch = useDispatch(); const dispatch = useDispatch();
const removePoint = () => {
const map = window.__mapref;
const layer = map.getLayer('关联站点')
if (layer) {
map.removeLayer('关联站点');
map.removeSource('关联站点');
}
}
return ( return (
<div className="dp-actiondock"> <div className="dp-actiondock">
@ -97,6 +104,7 @@ export default function ActionDock({ }) {
setViewKey(null) setViewKey(null)
dispatch.runtime.setScya(false) dispatch.runtime.setScya(false)
dispatch.runtime.setGwtc(false) dispatch.runtime.setGwtc(false)
removePoint()
}}> }}>
<div className={clsx('button', { active: false })}> <div className={clsx('button', { active: false })}>
<img width={40} style={{ marginLeft: '5px' }} src={'/assets/pump/退出.png'} /> <img width={40} style={{ marginLeft: '5px' }} src={'/assets/pump/退出.png'} />
@ -136,6 +144,7 @@ export default function ActionDock({ }) {
} else { } else {
sessionStorage.setItem('point','') 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 })}> <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 Normal file
View File

@ -0,0 +1,74 @@
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 Normal file
View File

@ -0,0 +1,91 @@
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);

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

@ -1,10 +1,11 @@
import React, { useState,useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { OverallPromise } from '../../../../models/_/real'; import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest'; import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox'; import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent'; import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import DpTableRow from '../../../../layouts/mui/DpTableRow'; import DpTableRow from '../../../../layouts/mui/DpTableRow';
import { parseGeoJSON } from "../../../../utils/tools";
import { import {
Box, Box,
Typography, Typography,
@ -49,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
marginBottom: theme.spacing(2) marginBottom: theme.spacing(2)
}, },
timeButton: { timeButton: {
width:210, width: 210,
color: '#fff', color: '#fff',
borderColor: 'rgba(255,255,255,0.3)', borderColor: 'rgba(255,255,255,0.3)',
'&.MuiButton-contained': { '&.MuiButton-contained': {
@ -97,7 +98,7 @@ const useStyles = makeStyles((theme) => ({
} }
})); }));
export default function Overall({ style }) { export default function Overall({ style }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const classes = useStyles(); const classes = useStyles();
const [types, setTypes] = useState({ const [types, setTypes] = useState({
@ -134,123 +135,337 @@ export default function Overall({ style }) {
const drpData = [ const drpData = [
{ {
"stcd": "61612910", "stcd": "61644000",
"stnm": "桃林河(阎河)", "stnm": "浮桥河",
"adcd": "421181000000000", "adcd": null,
adnm: '阎家河镇桃林河村村民委员会',
zgrz: '55.67',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz:'58.43',
"wscd": null, "wscd": null,
"importancy": 0, "importancy": 0,
"lgtd": 115.087777777, "lgtd": 114.883583,
"lttd": 31.164444444, "lttd": 31.180444,
"elev": null, "elev": null,
"hasRz": true, "hasRz": true,
"type": "sh", "type": "sw",
"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": "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": "sh",
"today": 27,
"h1": 18.5,
"h3": 27,
"h6": 27,
"h12": 27,
"h24": 27,
"h48": 27,
"tm": "2025-06-06T22:00:00.000Z", "tm": "2025-06-06T22:00:00.000Z",
"state": 1, "rz": 43.6,
"warning": 0 adnm: '麻城市',
zgrz: '48.17',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz: '47.60',
"state": 1
},
{
"stcd": "61615300",
"stnm": "木子店",
"adcd": null,
"wscd": null,
"importancy": 1,
"lgtd": 115.3625,
"lttd": 31.190278,
"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
}, },
{ {
"stcd": "61613700", "stcd": "61612500",
"stnm": "四角门(宋铁二桥)", "stnm": "王福店",
"adcd": "421181000000000", "adcd": null,
"wscd": null, "wscd": null,
"importancy": 0, "importancy": 0,
"lgtd": 114.8291, "lgtd": 114.986666,
"lttd": 31.0754, "lttd": 31.352944,
adnm: '铁门岗乡大庙岗村村民委员会(四角门村、大庙岗村、大店村、肖上湾村)',
zgrz: '27.57',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz:'34.86',
"elev": null, "elev": null,
"hasRz": true, "hasRz": true,
"type": "sh", "type": "sw",
"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", "tm": "2025-06-06T22:00:00.000Z",
"state": 1, "rz": 73.37,
"warning": 0 adnm: '麻城市',
zgrz: '78.20',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz: '77.37',
"state": 1
}, },
{
"stcd": "61614460", ]
"stnm": "项生(宋埠)", const skData = [
"adcd": "421181000000000", {
"wscd": null, "stcd": "61614200",
"importancy": 0, "type": "sk",
adnm: '宋埠镇项生村村民委员会',
zgrz: '21.93',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz:'23.65',
"lgtd": 114.798056,
"lttd": 31.058611,
"elev": null,
"hasRz": true, "hasRz": true,
"type": "sh", "stnm": "浮桥河",
"today": 4.5, "adcd": "421181100000",
"h1": 2, "wscd": null,
"h3": 4.5, "importancy": 0,
"h6": 4.5, adnm: '麻城市',
"h12": 4.5, zgrz: '66.1',
"h24": 4.5, time: '2025-06-11 10:14',
"h48": 4.5, jjrz: '64.89',
"tm": "2025-06-06T22:00:00.000Z", "lgtd": 114.88069,
"state": 1, "lttd": 31.171967,
"warning": 0 "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',
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"
}, },
] ]
const skData = [] const flyTo = (row) => {
const flyTo = (record) => { const { lgtd, lttd } = row;
const { lgtd, lttd } = record;
if (lgtd && lttd) { if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] }); dispatch.runtime.setFeaturePop({ type: timeRange == '3h'?'RealSkPop':"RealHDPop", properties: row, coordinates: [row.lgtd, row.lttd] });
dispatch.runtime.setCameraTarget({ dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd], center: [lgtd, lttd + 0.005],
zoom: config.poiPositionZoom.hd, zoom: 15,
pitch: config.poiPitch, pitch: 50,
bearing: 0
}); });
} }
} }
const [type, setType] = useState('1h')
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 [data, setData] = useState([]) const [data, setData] = useState([])
@ -264,7 +479,7 @@ export default function Overall({ style }) {
style={style} style={style}
title="水情统计" title="水情统计"
color="green" color="green"
extra={ extra={
<span className="button-group"> <span className="button-group">
{ {
['h1', 'h3', 'h6', 'h12', 'h24'].map(key => ( ['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
@ -275,66 +490,73 @@ export default function Overall({ style }) {
} }
> >
<Box className={classes.root}> <Box className={classes.root}>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<ButtonGroup variant="outlined"> <ButtonGroup variant="outlined">
{[ {[
{ value: '1h', label: '河道水情' }, { value: '1h', label: '河道水情' },
{ value: '3h', label: '水库水情' }, { value: '3h', label: '水库水情' },
].map((item) => ( ].map((item) => (
<Button <Button
key={item.value} key={item.value}
className={classes.timeButton} className={classes.timeButton}
onClick={() => { onClick={() => {
if (item.value == '1h' || item.value == '3h') { if (item.value == '1h' || item.value == '3h') {
setTimeRange(item.value) setTimeRange(item.value)
} }
}} }}
variant={timeRange === item.value ? 'contained' : 'outlined'} variant={timeRange === item.value ? 'contained' : 'outlined'}
style={{ padding: '5px 10px' }} style={{ padding: '5px 10px' }}
> >
{item.label} {item.label}
</Button> </Button>
))} ))}
</ButtonGroup> </ButtonGroup>
</div> </div>
</Box> </Box>
<TableContainer style={{ height: '70%' }}> <TableContainer style={{ height: '70%' }}>
<Table size="small" stickyHeader> <Table size="small" stickyHeader>
<TableHead > <TableHead >
<DpTableRow> <DpTableRow>
<DpTableCell style={{ minWidth: '3rem' }} align='center'>序号</DpTableCell> <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'>政区</DpTableCell> <DpTableCell style={{ minWidth: '8rem' }} align='center'>政区</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell> <DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell> <DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>警戒水位(m)</DpTableCell> <DpTableCell style={{ minWidth: '8rem' }} align='center'>{timeRange == '1h' ? "警戒水位(m)" : '汛限水位(m)'}</DpTableCell>
{/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */} {/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
</DpTableRow> </DpTableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{ {
data.map((item,i) => ( data.map((item, i) => (
<DpTableRow key={item.stcd} onClick={() => flyTo(item)}> <DpTableRow key={item.stcd} onClick={() => {
<DpTableCell align='center'>{i + 1}</DpTableCell> flyTo(item)
<DpTableCell align='center'>{item.stnm}</DpTableCell> if (timeRange == '3h') {
<DpTableCell align='center'> setSkLayer([item])
<div } else {
className="table-ellipsis cursor-pointer" setHdLayer([item])
title={item.adnm} }
>{item.adnm}</div> }}>
</DpTableCell> <DpTableCell align='center'>{i + 1}</DpTableCell>
<DpTableCell align='center'>{item.zgrz}</DpTableCell> <DpTableCell align='center'>{item.stnm}</DpTableCell>
<DpTableCell align='center'>{item.time}</DpTableCell> <DpTableCell align='center'>
<DpTableCell align='center'>{item.jjrz}</DpTableCell> <div
</DpTableRow> 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> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
</PanelBox> </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: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
{ id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' }, { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
{ id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' }, { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
{ id: 'heavy', name: '大暴雨站点', count: 1, color: 'blue2' }, { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
{ id: 'storm', name: '暴雨站点', count: 0, color: 'green' } { id: 'storm', name: '暴雨站点', count: 1, color: 'green' }
]; ];
const toggleExpand = (id) => { const toggleExpand = (id) => {
@ -132,24 +132,25 @@ export default function Overall({ style }) {
const drpData = [ const drpData = [
{ {
"stcd": "61612910", "stcd": "Q9111",
"stnm": "桃林河(阎河)", "stnm": "福田河",
"adcd": "421181000000000", "adcd": "421181000000000",
'test':1, 'test':1,
"wscd": null, "wscd": null,
"importancy": 0, "importancy": 0,
"lgtd": 115.087777777, "lgtd": 115.0944,
"lttd": 31.164444444, "lttd": 31.4747,
"elev": null, "elev": null,
"hasRz": true, "hasRz": true,
"type": "sh", "type": "qx",
"today": 7, "today": 50.3,
"h1": 12, "h1": 50.2,
"h3": 40, "h3": 50.2,
"h6": 69, "h6": 50.2,
"h12": 133, "h12": 50.2,
"h24": 261, "h24": 50.3,
"tm": "2025-06-03T02:10:00.000Z", "tm": "2025-06-06T22:00:00.000Z",
"state": 1, "state": 1,
"warning": 0 "warning": 0
}, },
@ -257,7 +258,7 @@ export default function Overall({ style }) {
<Collapse in={expanded[station.id]} timeout="auto" unmountOnExit> <Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
<Box className={`${classes.expandedRow} ${station.color}`}> <Box className={`${classes.expandedRow} ${station.color}`}>
{/* 展开的详细内容可以在这里添加 */}{ {/* 展开的详细内容可以在这里添加 */}{
station.id == 'heavy' && drpData.map(item => ( station.id == 'storm' && drpData.map(item => (
<TableRow onClick={() =>flyTo(item)}> <TableRow onClick={() =>flyTo(item)}>
<DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell> <DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
<DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell> <DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>

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

@ -0,0 +1,141 @@
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 Normal file
View File

@ -0,0 +1,273 @@
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,6 +1,7 @@
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest'; import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox'; import PanelBox from '../../components/PanelBox';
import { parseGeoJSON } from "../../../../utils/tools";
import Table from '@material-ui/core/Table'; import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer'; import TableContainer from '@material-ui/core/TableContainer';
@ -46,7 +47,7 @@ function HDReal({ style }) {
} }
ret.push(o); ret.push(o);
}); });
return ret; return ret.slice(-7).reverse();
}, [data, tableRzFilter]); }, [data, tableRzFilter]);
const flyTo = (record) => { const flyTo = (record) => {
@ -69,6 +70,58 @@ function HDReal({ style }) {
const toggleAutoRefresh = () => { const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh); 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 ( return (
<PanelBox <PanelBox
@ -100,9 +153,9 @@ function HDReal({ style }) {
</TableHead> </TableHead>
<TableBody> <TableBody>
{showData.map((row) => ( {showData.map((row) => (
<DpTableRow key={row.stcd}> <DpTableRow key={row.stcd} onClick={() => { flyTo(row); setLayer([row],'hd')}}>
<DpTableCell component="th" scope="row"> <DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div> <div className="table-ellipsis cursor-pointer">{row.stnm}</div>
</DpTableCell> </DpTableCell>
<DpTableCell align="right">{renderHDRz(row)}</DpTableCell> <DpTableCell align="right">{renderHDRz(row)}</DpTableCell>
{rzRender(row.rz, row.rz+5.5)} {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 = [ const data = [
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', 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:'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:'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:'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:'69.09', hfll:'15.11', tm:'05-29 14:00' },
] ]
function SkReal({ style }) { function SkReal({ style }) {
@ -33,11 +33,11 @@ function SkReal({ style }) {
<Table size="small" stickyHeader> <Table size="small" stickyHeader>
<TableHead> <TableHead>
<TableRow> <TableRow>
<DpTableCell style={{ maxWidth: '30%' }} align="left">河流名称</DpTableCell> <DpTableCell style={{ minWidth: '5rem' }} align="left">流域</DpTableCell>
<DpTableCell align="center">断面名称</DpTableCell> <DpTableCell style={{ minWidth: '7rem' }} align="center">断面名称</DpTableCell>
<DpTableCell align="center">洪峰水位</DpTableCell> <DpTableCell style={{ minWidth: '7rem' }} align="center">预计洪峰水位</DpTableCell>
<DpTableCell align="center">洪峰流量</DpTableCell> <DpTableCell style={{ minWidth: '7rem' }} align="center">预计洪峰流量</DpTableCell>
<DpTableCell align="center">峰现时间</DpTableCell> <DpTableCell style={{ minWidth: '7rem' }} align="center">峰现时间</DpTableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>

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

@ -1,6 +1,7 @@
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest'; import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox'; import PanelBox from '../../components/PanelBox';
import { parseGeoJSON } from "../../../../utils/tools";
import HighlightOff from '@material-ui/icons/HighlightOff'; import HighlightOff from '@material-ui/icons/HighlightOff';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
@ -57,7 +58,7 @@ function SkReal({ style }) {
const flyTo = (record) => { const flyTo = (record) => {
const { lgtd, lttd } = record; const { lgtd, lttd } = record;
if (lgtd && lttd) { 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({ dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.sk], center: [lgtd, lttd + config.poiPositionOffsetY.sk],
zoom: config.poiPositionZoom.sk, zoom: config.poiPositionZoom.sk,
@ -81,7 +82,55 @@ function SkReal({ style }) {
const handleClose = () => { const handleClose = () => {
setOpen(false); 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 ( return (
<PanelBox <PanelBox
style={style} style={style}
@ -107,9 +156,9 @@ function SkReal({ style }) {
</TableHead> </TableHead>
<TableBody> <TableBody>
{[...sortedData.filter(o=>o.rzState===1),...sortedData.filter(o=>o.rzState!==1)].map((row) => ( {[...sortedData.filter(o=>o.rzState===1),...sortedData.filter(o=>o.rzState!==1)].map((row) => (
<DpTableRow key={row.stcd}> <DpTableRow key={row.stcd} onClick={() => { flyTo(row); setSkLayer([row]) }}>
<DpTableCell component="th" scope="row"> <DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div> <div className="table-ellipsis cursor-pointer" >{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div>
</DpTableCell> </DpTableCell>
<DpTableCell align="right">{row['h24']}</DpTableCell> <DpTableCell align="right">{row['h24']}</DpTableCell>
<DpTableCell align="right">{row?.rz}</DpTableCell> <DpTableCell align="right">{row?.rz}</DpTableCell>

2226
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 dispatch = useDispatch();
const [tab,setTab] = useState('1') const [tab,setTab] = useState('1')
useEffect(()=>{ useEffect(()=>{
if(tab==='1'){ // if(tab==='1'){
dispatch.rcview.showRealContour('h24') // dispatch.rcview.showRealContour('h24')
}else{ // }else{
dispatch.rcview.showRealContour('h48') // dispatch.rcview.showRealContour('h48')
} // }
return ()=>{ // return ()=>{
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined }); // dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
dispatch.runtime.setLayerSetting({ planeArea: null }); // dispatch.runtime.setLayerSetting({ planeArea: null });
dispatch.map.setLayerVisible({ ContourLayer: false }); // dispatch.map.setLayerVisible({ ContourLayer: false });
} // }
},[tab]) },[tab])

2239
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>
<div className="tail"> <div className="tail">
<span>{data.warnstm.substr(0, 'yyyy-mm-dd hh:mm'.length)}</span> <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> </div>
</div> </div>
@ -90,7 +90,16 @@ function ShYj({ data }) {
}); });
} }
} else { } else {
dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record }) 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]); }, [dispatch]);
@ -99,9 +108,9 @@ function ShYj({ data }) {
return ( return (
<div className="dppanel-shyj"> <div className="dppanel-shyj">
{ {/* {
hisdata?.length > 0 && <DpAlert severity="info">当前无预警，显示最新10条已关闭预警</DpAlert> hisdata?.length > 0 && <DpAlert severity="info">当前无预警，显示最新10条已关闭预警</DpAlert>
} } */}
{ {
showdata.map(o => ( showdata.map(o => (
<Item key={o.warnid} viewInfo={viewInfo} data={o} /> <Item key={o.warnid} viewInfo={viewInfo} data={o} />

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

@ -0,0 +1,78 @@
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 Normal file
View File

@ -0,0 +1,57 @@
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,6 +3,13 @@ import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } fro
import PanelBox from '../../components/PanelBox'; import PanelBox from '../../components/PanelBox';
import config from '../../../../config'; import config from '../../../../config';
import { useDispatch, useSelector } from 'react-redux'; 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'; import AreaDrpChart from './chart';
@ -238,7 +245,32 @@ function DrpReal({ style }) {
</> </>
} }
> >
<AreaDrpChart data={[]} rz={rz}/> {/* <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" }}/>
</PanelBox> </PanelBox>
) )
} }