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

Compare commits

base: lishenfeng:d560e6371099919c899d68a4b54974a5b08806d7
Branches Tags
lishenfeng:master
lishenfeng:qzc-dev
lishenfeng:lsf-dev
...
compare: lishenfeng:0ee42db098dce12561ba8b439f0f950c939fb15c
Branches Tags
lishenfeng:master
lishenfeng:qzc-dev
lishenfeng:lsf-dev

7 Commits
d560e63710 ... 0ee42db098

Author SHA1 Message Date
秦子超 0ee42db098 合并代码 2025-06-05 18:07:35 +08:00
李神峰 0ef113ca63 merge: 合并冲突 2025-06-05 18:06:53 +08:00
秦子超 bb07d9d600 水库修改 2025-06-05 18:01:12 +08:00
秦子超 1f498da5ef 防汛修稿 2025-06-05 16:39:29 +08:00
秦子超 3707b7a9ae 提交 2025-06-05 09:48:43 +08:00
秦子超 9b0f02e934 合并代码 2025-06-04 20:47:26 +08:00
秦子超 c8729f8010 提交 2025-06-04 20:45:32 +08:00
63 changed files with 34692 additions and 737 deletions
Show Stats Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/assets/仰天窝水库（三里畈）防汛应急预案 -.pdf Normal file
View File

Binary file not shown.

BIN
public/assets/组 4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/组 6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/assets/组 8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

8360
public/data/drpReal2.json Normal file
View File

File diff suppressed because it is too large Load Diff

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

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

2
public/data/skReal.json
View File

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

17
src/models/_/hdyj.js
View File

@ -16,7 +16,22 @@ export async function hdyjUnclose() {
item.real = record; item.real = record;
}); });
return ret; // return ret;
return [{
"stcd": "61612900",
"stnm": "阎家河",
"adcd": null,
"wscd": null,
"importancy": 0,
"lgtd": 115.128722,
"lttd": 31.207,
"elev": null,
"hasRz": true,
"type": "sw",
"tm": "2025-06-03T02:00:00.000Z",
"rz": 61.75,
"state": 1
}]
} }
export async function hdyjLatestClosed() { export async function hdyjLatestClosed() {

41
src/models/_/real.js
View File

@ -22,8 +22,25 @@ export const DrpRealPromise = new CachePromise(
// .catch(() => null), // .catch(() => null),
// 5000 // 5000
() => fetch(`${process.env.PUBLIC_URL}/data/drpReal.json`) () => fetch(`${process.env.PUBLIC_URL}/data/drpReal2.json`)
.then((response) => response.json()) .then((response) => response.json())
// .then(data=>{
// const cs = []
// const list = data.map((item)=>{
// const obj = {...item}
// const num = item.lgtd.toString()||'0.000';
// const num2 = Number(num.slice(num.length-1,num.length))
// obj.h1 = item.h1+num2
// obj.h3 = item.h3+num2*1.2
// obj.h6 = item.h6+num2*1.5
// obj.h12 = item.h12+num2*1.6
// obj.h24 = item.h24+num2*1.8
// obj.h48 = item.h48+num2*1.9
// return obj
// })
// debugger
// return list
// })
.catch(() => null), .catch(() => null),
5000 5000
); );
@ -56,6 +73,24 @@ export const SkRealPromise = new CachePromise(
.then(data => { .then(data => {
return data.map(o => ({ ...o, aRz: parseFloat((o.rz - o.fsltdz).toFixed(2)) })) return data.map(o => ({ ...o, aRz: parseFloat((o.rz - o.fsltdz).toFixed(2)) }))
}) })
.then(data=>{
const list = data.map((item)=>{
const obj = {...item}
const num = item.lgtd.toString()||'0.000';
const num2 = Number(num.slice(num.length-1,num.length))
obj.h1 = item.h1+num2
obj.h3 = item.h3+num2*1.2
obj.h6 = item.h6+num2*1.5
obj.h12 = item.h12+num2*1.6
obj.h24 = item.h24+num2*1.8
obj.h48 = item.h48+num2*1.9
// if(obj.h1===9){
// cs = obj.h1
// }
return obj
})
return list
})
.catch(() => null), .catch(() => null),
5000 5000
); );
@ -163,6 +198,10 @@ export const PicStPromise = new CachePromise(
() => httpget(apiurl.picst.list) () => httpget(apiurl.picst.list)
.then(({ data }) => data) .then(({ data }) => data)
.catch(() => null) .catch(() => null)
// () => fetch(`${process.env.PUBLIC_URL}/data/overall.json`)
// .then((response) => response.json())
// .catch(() => null),
); );
export const TestPicStPromise = new CachePromise( export const TestPicStPromise = new CachePromise(

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

@ -1,6 +1,6 @@
import { parseGeoJSONFeature } from "../../utils/tools"; import { parseGeoJSONFeature } from "../../utils/tools";
import { DCPJ_TYPES, SLGC_TYPES } from "../../views/Home/consts"; import { DCPJ_TYPES, SLGC_TYPES } from "../../views/Home/consts";
import { parseGeoJSON } from "../../utils/tools";
function initState() { function initState() {
return { return {
calculating: false, calculating: false,
@ -148,13 +148,13 @@ const map = {
setView(id) { setView(id) {
let layerVisible = {}; let layerVisible = {};
const map = window.__mapref const map = window.__mapref
if (id === 0 || id === 1 || id == 503) { if (id === 1 || id == 503) {
layerVisible = { layerVisible = {
RealDrpLayer: true, RealDrpLayer: true,
RealHDLayer: true, RealHDLayer: true,
RealSkLayer: true, RealSkLayer: true,
AdcdLayer: true, AdcdLayer: true,
PicStLayer: true, PicStLayer: false,
RivlLayer: true, RivlLayer: true,
WataLayer: false, WataLayer: false,
} }
@ -165,11 +165,30 @@ const map = {
layerVisible = { layerVisible = {
RealDrpLayer: true, RealDrpLayer: true,
RealHDLayer: true, RealHDLayer: true,
RealSkLayer: true, RealSkLayer: false,
PicStLayer: true, PicStLayer: false,
RivlLayer: true, RivlLayer: true,
YuwaiLayer: true, YuwaiLayer: false,
AdcdLayer: true,
WataLayer: false, WataLayer: false,
RealSkLayerQ2:true,
RealHDLayerQ2:true,
}
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 8) {
layerVisible = {
RealDrpLayer: true,
RealHDLayer: true,
RealSkLayer: false,
PicStLayer: false,
RivlLayer: true,
YuwaiLayer: false,
AdcdLayer: true,
WataLayer: false,
RealSkLayerQ2:true,
RealHDLayerQ2:true,
} }
Object.keys(DCPJ_TYPES).forEach(key => { Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false; layerVisible['Dcpj_' + key + 'Layer'] = false;
@ -197,7 +216,7 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => { Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = !SLGC_TYPES[key]; layerVisible['Dcpj_' + key + 'Layer'] = !SLGC_TYPES[key];
}); });
} else if (id === 4 || id === 5) { } else if (id === 4) {
layerVisible = { layerVisible = {
RealDrpLayer: false, RealDrpLayer: false,
RealHDLayer: false, RealHDLayer: false,
@ -209,6 +228,19 @@ 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 === 5) {
layerVisible = {
RealDrpLayer: true,
RealHDLayer: false,
RealSkLayer: true,
FzdxLayer: false,
WataLayer: false,
AdcdLayer: true,
RivlLayer: true,
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 6) { } else if (id === 6) {
layerVisible = { layerVisible = {
RealDrpLayer: false, RealDrpLayer: false,
@ -226,6 +258,21 @@ 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 === 7) {
layerVisible = {
RealDrpLayer: false,
RealHDLayer: false,
RealSkLayer: true,
BxSkLayer: false,
FzdxLayer: false,
WataLayer: false,
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 201) { } else if (id === 201) {
layerVisible = { layerVisible = {
RealDrpLayer: true, RealDrpLayer: true,
@ -318,6 +365,21 @@ 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 === 207) {
layerVisible = {
RealDrpLayer: false,
RealHDLayer: false,
RealSkLayer: true,
BxSkLayer: false,
FzdxLayer: false,
WataLayer: false,
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if (id === 301) { } else if (id === 301) {
layerVisible = { layerVisible = {
RealDrpLayer: false, RealDrpLayer: false,
@ -442,6 +504,13 @@ const map = {
dispatch.runtime.setFeaturePop(null); dispatch.runtime.setFeaturePop(null);
if (id === 8){
dispatch.rcview.showRealContour('h1')
}else{
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
dispatch.runtime.setLayerSetting({ planeArea: null });
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'); map.setLayoutProperty('热力图', 'visibility', 'visible');

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

@ -17,6 +17,13 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '预警', style: { height: '40%', flexGrow: 1 } }, { key: '预警', style: { height: '40%', flexGrow: 1 } },
]; ];
leftFullHeight = true; leftFullHeight = true;
} else if (view === 8) {
left = [
{ key: '天气' },
{ key: '综述' },
{ key: '预警', style: { height: '40%', flexGrow: 1 } },
];
leftFullHeight = true;
} else if (view === 1) { } else if (view === 1) {
left = [ left = [
{ key: '天气' }, { key: '天气' },
@ -52,6 +59,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '病险水库综述', style: { flexShink: 0 } }, { key: '病险水库综述', style: { flexShink: 0 } },
{ key: '降雨分析', style: { flexShink: 0 } }, { key: '降雨分析', style: { flexShink: 0 } },
]; ];
} else if (view === 7) {
left = [
// { key: '天气' },
{ key: '预报调度', style: { height: '20rem', flexGrow: 1 } },
];
leftFullHeight = true
} }
else if (view === 201) { else if (view === 201) {
left = [ left = [
@ -92,6 +105,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '巡查任务总览', style: { height: '40rem', flexGrow: 1 } }, { key: '巡查任务总览', style: { height: '40rem', flexGrow: 1 } },
]; ];
leftFullHeight = true; leftFullHeight = true;
} else if (view === 207) {
left = [
{ key: '天气' },
{ key: '水库总览', style: { height: '24rem', flexGrow: 1 } },
{ key: '水库列表', style: { height: '24rem', flexGrow: 1 } },
];
} else if (view === 301) { } else if (view === 301) {
left = [ left = [
{ key: '天气' }, { key: '天气' },
@ -208,6 +227,17 @@ export default function calcLayout(view, rightStack, hidePanels) {
// { key: '今日值班' }, // { key: '今日值班' },
]; ];
rightFullHeight = true; rightFullHeight = true;
}else if (view === 8) {
right = [
{ 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: '10rem', flexGrow: 1 } },
// { key: '今日值班' },
];
rightFullHeight = true;
} else if (view === 1) { } else if (view === 1) {
right = [ right = [
{ key: '警报' }, { key: '警报' },
@ -232,7 +262,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
} else if (view === 5) { } else if (view === 5) {
right = [ right = [
{ key: '警报' }, { key: '警报' },
{ key: '气象预警综述' }, // { key: '气象预警综述' },
{ key: '河流重要断面预报', style: { height: '40%', flexGrow: 1 } },
{ key: '重要水库预报', style: { height: '18rem', flexGrow: 1 } },
]; ];
} else if (view === 6) { } else if (view === 6) {
right = [ right = [
@ -243,6 +275,14 @@ export default function calcLayout(view, rightStack, hidePanels) {
]; ];
rightFullHeight=true rightFullHeight=true
} else if (view === 7) {
right = [
{ key: '预报成果', style: { height: '10rem', flexGrow: 1 } },
{ key: '预警成果', style: { height: '14rem' } },
{ key: '调度成果', style: { height: '15rem', flexGrow: 1 } },
{ key: '防汛方案对比', style: { height: '15.5rem' } },
];
rightFullHeight=true
} else if (view === 201) { } else if (view === 201) {
right = [ right = [
{ key: '警报' }, { key: '警报' },
@ -270,7 +310,14 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '巡查问题看板', style: { height: '70%', flexGrow: 1 } }, { key: '巡查问题看板', style: { height: '70%', flexGrow: 1 } },
{ key: '水库管护', style: { height: '10rem', flexGrow: 1 } }, { key: '水库管护', style: { height: '10rem', flexGrow: 1 } },
]; ];
rightFullHeight = true; } else if (view === 207) {
right = [
{ key: '警报' },
{ key: '关联站点',style: { height: '15rem', flexGrow: 1 } },
{ key: '水库水量统计',style: { height: '22rem' } },
{ key: '洪水防御',style: { height: '18rem', flexGrow: 1 } },
];
rightFullHeight = true;
} else if (view === 301) { } else if (view === 301) {
right = [ right = [
// { key: '警报' }, // { key: '警报' },

38
src/views/Home/InfoDlg/DdcgDlg/index.js Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import DpTab from '../../../../layouts/mui/DpTab';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, overflow:'hidden'}}>
<DpAppBar position="sticky">
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
<DpTab label="明山水库" />
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<img src='/assets/ddcg.jpg' style={{width:'95vw', height:'90vh'}}/>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

38
src/views/Home/InfoDlg/FadbDlg/index.js Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import DpTab from '../../../../layouts/mui/DpTab';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, overflow:'hidden'}}>
<DpAppBar position="sticky">
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
<DpTab label="方案对比" />
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<img src='/assets/fadb.jpg' style={{width:'80vw', height:'80vh',marginTop:"0.5rem",marginRight:'0.5rem'}}/>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

3
src/views/Home/InfoDlg/HDStDlg/index.js
View File

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

66
src/views/Home/InfoDlg/HDStDlg/zrrPlan.js Normal file
View File

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

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

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

56
src/views/Home/InfoDlg/SkDlg/zrrPlan.js Normal file
View File

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

307
src/views/Home/InfoDlg/YbcgDlg/chart.js Normal file
View File

@ -0,0 +1,307 @@
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 = () => {
const x = [
"2025-06-02 15:00:00",
"2025-06-02 16:00:00",
"2025-06-02 17:00:00",
"2025-06-02 18:00:00",
"2025-06-02 19:00:00",
"2025-06-02 20:00:00",
"2025-06-02 21:00:00",
"2025-06-03 01:00:00",
"2025-06-03 02:00:00",
"2025-06-03 04:00:00",
"2025-06-03 06:00:00",
"2025-06-03 08:00:00",
"2025-06-03 10:00:00",
"2025-06-03 12:00:00",
"2025-06-03 13:00:00",
"2025-06-03 14:00:00"
]
const y = [
24.05,
22.04,
21.03,
24.03,
25.02,
25.02,
27.02,
28,
27.99,
29.99,
27.97,
28.97,
29.97,
28.98,
27.97,
29.97
]
const y1 = [
23.05,
24.04,
24.03,
24.03,
23.02,
23.02,
23.02,
24,
23.99,
23.99,
23.97,
23.97,
23.97,
23.98,
23.97,
23.97
]
const y2 = [
23.05,
23.24,
23.53,
23.43,
23.02,
23.22,
23.02,
23,
23.19,
23.29,
23.57,
23.57,
23.67,
23.78,
23.87,
23.67
]
const y3 = [
14.05,
12.24,
13.53,
13.43,
14.02,
13.22,
14.02,
15,
16.19,
15.29,
17.57,
18.57,
18.67,
19.78,
18.87,
18.67
]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: false
}
},
// valueFormatter: (value) => value + ' 万m³'
},
grid: {
top: 42,
left: 50,
right: 40,
bottom: 27,
},
legend: {
data: ['水文预报','全局优先', '兴利优先','实时监测'],
top: '8',
icon:'circle',
left: 'center',
itemWidth: 11,//11,
itemHeight: 11,//11,
textStyle: {
color: '#B9BFC9',
fontSize: 12,//12
}
},
xAxis: [
{
type: 'category',
data: x,
splitLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9' //X轴文字颜色
},
formatter: val => val.substr('2020-10-14 '.length, 5),
// rotate: 20, // 角度值：Number
fontSize: 10,//10
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisTick: {
show: true,
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '流量',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 5,
// max: 135,
}
],
series: [
{
name: '水文预报',
type: 'line',
barWidth: 10,
data: y,
showSymbol: false,
itemStyle: {
normal: {
color: '#32e1b5'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
name: '全局优先',
type: 'line',
barWidth: 10,
showSymbol: false,
data: y1,
itemStyle: {
normal: {
color: '#f19932'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
name: '兴利优先',
type: 'line',
barWidth: 10,
showSymbol: false,
data: y2,
itemStyle: {
normal: {
color: '#e1554e'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
name: '实时监测',
type: 'line',
barWidth: 10,
showSymbol: false,
data: y3,
itemStyle: {
normal: {
color: '#e1554e'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '99%', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

95
src/views/Home/InfoDlg/YbcgDlg/index.js Normal file
View File

@ -0,0 +1,95 @@
import React from 'react';
import DpTab from '../../../../layouts/mui/DpTab';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import AreaDrpChart from './chart';
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';
const data = [
{ name:'水文预报', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00',num:'12' },
{ name:'全局优化调度', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30',num:'34' },
{ name:'兴利优先调度', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00',num:'23' },
{ name:'实时监测', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00',num:'23' },
]
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
const dispatch = useDispatch()
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden' }}>
<DpAppBar position="sticky">
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
<DpTab label="明山水库洪水预报分析结果" />
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<div style={{width:'100%',height:'25rem'}}>
<AreaDrpChart data={[]} />
</div>
{/* <img src='/assets/报警列表.jpg' style={{width:'100%', height:'33rem',marginTop:'0rem'}}/> */}
<TableContainer style={{ height: '15rem',padding:'10px 10px' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '7rem' }} align="left">名称</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">洪峰数量</DpTableCell>
<DpTableCell style={{ minWidth: '4.7rem' }} align="center">涨水时间(h)</DpTableCell>
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪峰时刻</DpTableCell>
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">退水时间(h)</DpTableCell>
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪水历时(h)</DpTableCell>
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪峰流量</DpTableCell>
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪水总量</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {
}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{'1'}</DpTableCell>
<DpTableCell align="center">{row.tm}</DpTableCell>
<DpTableCell align="center">{row.tm}</DpTableCell>
<DpTableCell align="center">{row.tm}</DpTableCell>
<DpTableCell align="center">{row.hfll}</DpTableCell>
<DpTableCell align="center">{row.hfll}</DpTableCell>
<DpTableCell align="center">{row.hfll}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

11
src/views/Home/InfoDlg/index.js
View File

@ -34,6 +34,9 @@ import SljcDlg from './SljcDlg'
import BjDlg from './BjDlg' import BjDlg from './BjDlg'
import HistoryYyDlg from './HistoryYyDlg'; import HistoryYyDlg from './HistoryYyDlg';
import YascDlg from './YascDlg'; import YascDlg from './YascDlg';
import YbcgDlg from './YbcgDlg'
import DdcgDlg from './DdcgDlg'
import FadbDlg from './FadbDlg'
import ShuikuyhDlg from './ShuikuyhDlg'; import ShuikuyhDlg from './ShuikuyhDlg';
import XunchaDlg from './XunchaDlg'; import XunchaDlg from './XunchaDlg';
import XcxqDlg from './XcxqDlg'; import XcxqDlg from './XcxqDlg';
@ -116,7 +119,13 @@ function InfoDlg() {
return <HistoryYyDlg record={properties} onClose={handleClose} /> return <HistoryYyDlg record={properties} onClose={handleClose} />
} else if (layerId === 'YuananLayer') { } else if (layerId === 'YuananLayer') {
return <YascDlg record={properties} onClose={handleClose} /> return <YascDlg record={properties} onClose={handleClose} />
}else if (layerId === 'ShuikuyanghuLayer') { } else if (layerId === 'YbcgLayer') {
return <YbcgDlg record={properties} onClose={handleClose} />
} else if (layerId === 'DdcgLayer') {
return <DdcgDlg record={properties} onClose={handleClose} />
} else if (layerId === 'FadbLayer') {
return <FadbDlg record={properties} onClose={handleClose} />
} else if (layerId === 'ShuikuyanghuLayer') {
return <ShuikuyhDlg record={properties} onClose={handleClose} /> return <ShuikuyhDlg record={properties} onClose={handleClose} />
}else if (layerId === 'XunchachaoshiLayer') { }else if (layerId === 'XunchachaoshiLayer') {
return <XunchaDlg record={properties} onClose={handleClose} /> return <XunchaDlg record={properties} onClose={handleClose} />

3
src/views/Home/InfoPops/RealDrpPop/DrpChart.js
View File

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

31
src/views/Home/InfoPops/RealSkPop/index.js
View File

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

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

@ -119,6 +119,13 @@ export default class DcpjLayer extends BaseLayer {
const ms = mapCtrl.getSource(DCPJ_TYPES[this._type]); const ms = mapCtrl.getSource(DCPJ_TYPES[this._type]);
const data = await DcpjPromise[this._type].get(); const data = await DcpjPromise[this._type].get();
// const list = data.filter((item)=>{
// if(item.ADCD.indexOf('4211811')>-1){
// return true
// }else{
// return false
// }
// })
ms.setData(parseGeoJSON(data)); ms.setData(parseGeoJSON(data));
return true; return true;
} }

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

@ -1,6 +1,8 @@
import RealDrpLayer from "./realdrplayer"; import RealDrpLayer from "./realdrplayer";
import RealHDLayer from "./realhdlayer"; import RealHDLayer from "./realhdlayer";
import RealHDLayerQ2 from "./realhdlayerQ2";
import RealSkLayer from "./realsklayer"; import RealSkLayer from "./realsklayer";
import RealSkLayerQ2 from "./realsklayerQ2";
import sources from "./sources"; import sources from "./sources";
import base from "./base"; import base from "./base";
@ -74,7 +76,11 @@ class LayerMgr {
this.layers.push(new RealDrpLayer()); this.layers.push(new RealDrpLayer());
this.layers.push(new RealHDLayer()); this.layers.push(new RealHDLayer());
this.layers.push(new RealHDLayerQ2());
this.layers.push(new RealSkLayer()); this.layers.push(new RealSkLayer());
this.layers.push(new RealSkLayerQ2());
this.layers.push(new BxSkLayer()); this.layers.push(new BxSkLayer());
this.layers.push(new YuwaiLayer()); this.layers.push(new YuwaiLayer());
this.layers.push(new PicStLayer()); this.layers.push(new PicStLayer());
@ -177,8 +183,11 @@ class LayerMgr {
this.layerMap.PumpLayer.getStyle(), this.layerMap.PumpLayer.getStyle(),
this.layerMap.RealSkLayer.getStyle(), this.layerMap.RealSkLayer.getStyle(),
this.layerMap.RealSkLayerQ2.getStyle(),
this.layerMap.BxSkLayer.getStyle(), this.layerMap.BxSkLayer.getStyle(),
this.layerMap.RealHDLayer.getStyle(), this.layerMap.RealHDLayer.getStyle(),
this.layerMap.RealHDLayerQ2.getStyle(),
this.layerMap.RealDrpLayer.getStyle(0), this.layerMap.RealDrpLayer.getStyle(0),
this.layerMap.RealDrpLayer.getStyle(1), this.layerMap.RealDrpLayer.getStyle(1),
this.layerMap.YuwaiLayer.getStyle(0), this.layerMap.YuwaiLayer.getStyle(0),

127
src/views/Home/MapCtrl/mapstyle/realhdlayerQ2.js Normal file
View File

@ -0,0 +1,127 @@
import clone from "clone";
import { HDRealPromise } from "../../../../models/_/real";
import { parseGeoJSON } from "../../../../utils/tools";
import { InfoPopNames } from "../../InfoPops";
import BaseLayer from "./baselayer";
const SourceName = '实时河道水位Q2';
const Style = {
id: '实时河道水位Q2',
type: 'symbol',
source: SourceName,
layout: {
'icon-allow-overlap': true,
'text-allow-overlap': true,
'icon-image': '水位站-警戒',
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10, 0.8,
14, 1,
],
'text-size': [
'interpolate', ['linear'], ['zoom'],
10, 10,
14, 16,
],
'text-max-width': 30,
'text-font': ['Roboto Black'],
'text-field': [
'step',
['zoom'],
[
'case',
['!=', ['get', 'state'], 1], '',
['concat', ['get', 'rz'], 'm']
],
12, [
'case',
['!=', ['get', 'state'], 1], ['get', 'stnm'],
[
'format',
['get', 'stnm'], { 'font-scale': 0.8, 'text-color': '#fff' },
'\n', {},
['concat', ['get', 'rz'], 'm'], {}
]
],
],
'text-anchor': 'top',
'text-offset': [0, 1],
'visibility': 'none',
},
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
}
};
export default class RealHDLayerQ2 extends BaseLayer {
static LayerName = 'RealHDLayerQ2';
static SourceName = SourceName;
getStyle() {
const ret = clone(Style);
this._setStyleVisibility(ret);
return ret;
}
getName() {
return RealHDLayerQ2.LayerName;
}
getSubLayers() {
return [Style.id];
}
getRefreshInterval() {
return 60 * 1000;
}
async doRefreshLayer(mapCtrl) {
const ms = mapCtrl.getSource(SourceName);
const data = [{
"stcd": "61612900",
"stnm": "阎家河",
"adcd": null,
"wscd": null,
"importancy": 0,
"lgtd": 115.128722,
"lttd": 31.207,
"elev": null,
"hasRz": true,
"type": "sw",
"tm": "2025-06-03T02:00:00.000Z",
"rz": 61.75,
"state": 1
}];
ms.setData(parseGeoJSON(data));
return true;
}
getFeatureTip(record) {
return record.stnm;
}
featureClicked(properties, dispatch) {
dispatch.runtime.setFeaturePop({
type: InfoPopNames.RealHDPop,
properties,
coordinates: [properties.lgtd, properties.lttd],
offsetPop: true,
});
}
}

86
src/views/Home/MapCtrl/mapstyle/realsklayer.js
View File

@ -113,87 +113,13 @@ export default class RealSkLayer extends BaseLayer {
o.strarz = strarz.toFixed(2); o.strarz = strarz.toFixed(2);
} }
}); });
data = [...data, {
aRz: -15.38,
a_fsltdz: null,
adcd: null,
damel: 236,
ddz: 204,
drpState: 2,
drpTm: "2021-11-21T00:00:00.000Z",
dsflz: 233.92,
elev: null,
fsltdz: 231,
h1: 0,
h3: 0,
h6: 0,
h12: 0,
h24: 0,
h48: 0,
hasRz: true,
importancy: 0,
lgtd: 114.96994272023744,
lttd: 31.468737175815974,
rz: 215.62,
rzState: 2,
rzTm: "2021-11-21T00:00:00.000Z",
rzWarning: 0,
stcd: "11111000",
stnm: "小玉潭水库",
strarz: "0",
today: 0,
type: "sw",
type2: "swsk",
wscd: null,
zcxsw: 231,
},
{
"stcd": "716113701",
"type": "sk",
"hasRz": true,
"stnm": "永红水库",
"adcd": "421181105000",
"wscd": null,
"importancy": 0,
"lgtd": 115.120278,
"lttd": 31.183611,
"elev": 0,
"damel": 131.99,
"dsflz": 130.56,
"fsltdz": 129.9,
"ddz": 113.5,
"zcxsw": 129.9,
"drpTm": "2025-04-11T06:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 130.15,
"w": 0.444,
"a_fsltdz": -10.75,
"rzTm": "2025-04-11T06:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"pic": [
{
"stcd": "716113701",
"tm": "2023-11-16T11:19:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113701/20231116191900.jpg"
},
{
"stcd": "716113701",
"tm": "2023-11-16T09:05:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113702/20231116170500.jpg"
}
]
},
]
} }
data.map((item)=>{
if(item.stnm==='夏家山水库'){
}
})
const list = data.filter(o=>{ const list = data.filter(o=>{
if(o.stnm==='青山垸水库'||o.stnm==='七角尖水库'||o.stnm==='杨树庵水库'||o.stnm==='石鼓庙水库'||o.stnm==='张家凹水库'||o.stnm==='大坳水库'){ if(o.stnm==='青山垸水库'||o.stnm==='七角尖水库'||o.stnm==='杨树庵水库'||o.stnm==='石鼓庙水库'||o.stnm==='张家凹水库'||o.stnm==='大坳水库'){
return false return false

159
src/views/Home/MapCtrl/mapstyle/realsklayerQ2.js Normal file
View File

@ -0,0 +1,159 @@
import clone from "clone";
import { SkRealPromise } from "../../../../models/_/real";
import { parseGeoJSON } from "../../../../utils/tools";
import { InfoPopNames } from "../../InfoPops";
import BaseLayer from "./baselayer";
const SourceName = '实时水库q2';
const ShapeStyle = {
id: SourceName,
type: 'symbol',
source: SourceName,
layout: {
'icon-allow-overlap': true,
'text-allow-overlap': true,
'icon-image': '水库-超汛限',
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10, 0.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 RealSkLayerQ2 extends BaseLayer {
static LayerName = 'RealSkLayerQ2';
static SourceName = SourceName;
getStyle() {
const ret = clone(ShapeStyle);
this._setStyleVisibility(ret);
return ret;
}
getName() {
return RealSkLayerQ2.LayerName;
}
getSubLayers() {
return [ShapeStyle.id];
}
getRefreshInterval() {
return 60 * 1000;
}
async doRefreshLayer(mapCtrl) {
const ms = mapCtrl.getSource(SourceName);
let data = [{
"stcd": "716129061",
"type": "sk",
"hasRz": true,
"stnm": "仰天窝水库",
"adcd": "421181201000",
"wscd": null,
"importancy": 0,
"lgtd": 115.106667,
"lttd": 31.126389,
"elev": 0,
"damel": 325.08,
"dsflz": 324.18,
"fsltdz": 323.5,
"ddz": 319.5,
"zcxsw": 323.5,
"drpTm": "2025-04-11T05:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 325.16,
"w": 0.132,
"a_fsltdz": 4.660000000000025,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 1,
"rzState": 2,
"pic": [
{
"stcd": "716129061",
"tm": "2023-03-12T06:05:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
},
{
"stcd": "716129061",
"tm": "2023-03-12T07:25:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
}
],
"aRz": 4.66,
"strarz": "4.66"
}];
if (Array.isArray(data)) {
data.forEach(o => {
const strarz = o.rz - o.fsltdz;
if (!isNaN(strarz)) {
o.strarz = strarz.toFixed(2);
}
});
}
ms.setData(parseGeoJSON(data));
return true;
}
getFeatureTip(record) {
return record.stnm;
}
featureClicked(properties, dispatch) {
if (properties.stnm === '小玉潭水库') {
/*
dispatch.runtime.setInfoDlg({
layerId: 'Three', properties: properties
});
*/
window.open('http://www.baidu.com')
} else {
dispatch.runtime.setFeaturePop({
type: InfoPopNames.RealSkPop,
properties,
coordinates: [properties.lgtd, properties.lttd],
offsetPop: true,
});
}
}
}

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

@ -1,7 +1,9 @@
import ContourLayer from "./contourlayer"; import ContourLayer from "./contourlayer";
import RealDrpLayer from "./realdrplayer"; import RealDrpLayer from "./realdrplayer";
import RealHDLayer from "./realhdlayer"; import RealHDLayer from "./realhdlayer";
import RealHDLayerQ2 from "./realhdlayerQ2";
import RealSkLayer from "./realsklayer"; import RealSkLayer from "./realsklayer";
import RealSkLayerQ2 from "./realsklayerQ2";
import { DCPJ_TYPES } from "../../consts"; import { DCPJ_TYPES } from "../../consts";
import WataLayer from "./watalayer"; import WataLayer from "./watalayer";
import PlaneAreaLayer from "./planarealayer"; import PlaneAreaLayer from "./planarealayer";
@ -244,10 +246,18 @@ const sources = {
type: 'geojson', type: 'geojson',
data: { type: 'FeatureCollection', features: [] }, data: { type: 'FeatureCollection', features: [] },
}, },
[RealHDLayerQ2.SourceName]: {
type: 'geojson',
data: { type: 'FeatureCollection', features: [] },
},
[RealSkLayer.SourceName]: { [RealSkLayer.SourceName]: {
type: 'geojson', type: 'geojson',
data: { type: 'FeatureCollection', features: [] }, data: { type: 'FeatureCollection', features: [] },
}, },
[RealSkLayerQ2.SourceName]: {
type: 'geojson',
data: { type: 'FeatureCollection', features: [] },
},
[PicStLayer.SourceName]: { [PicStLayer.SourceName]: {
type: 'geojson', type: 'geojson',
data: { type: 'FeatureCollection', features: [] }, data: { type: 'FeatureCollection', features: [] },

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

@ -100,7 +100,18 @@ import FhxsTqyb from './panels/FhxsTqyb'
import FhxsSq from './panels/FhxsSq' import FhxsSq from './panels/FhxsSq'
import FhxsAreaDrp from './panels/FhxsAreaDrp' import FhxsAreaDrp from './panels/FhxsAreaDrp'
import Tqyb24h from './panels/Tqyb24h' import Tqyb24h from './panels/Tqyb24h'
import Hlzydm from './panels/Hlzydm'
import Zyskyb from './panels/Zyskyb'
import Skzl from './panels/Skzl'
import Sklb from './panels/Sklb'
import Glzd from './panels/Glzd'
import Ybdd from './panels/Ybdd'
import Ybcg from './panels/Ybcg'
import Yjcg from './panels/Yjcg'
import Ddcg from './panels/Ddcg'
import Fadb from './panels/Fadb'
import Sksltj from './panels/Sksltj'
import Hsfy from './panels/Hsfy'
@ -319,13 +330,38 @@ export default function PanelIndex({ name, style, ...params }) {
return <Diaodujg /> return <Diaodujg />
}else if (name === '方案对比') { }else if (name === '方案对比') {
return <Duibifx /> return <Duibifx />
} else if (name === '河流重要断面预报') {
return <Hlzydm style={style} />
} else if (name === '重要水库预报') {
return <Zyskyb style={style} />
} else if (name === '水库总览') {
return <Skzl style={style} />
} else if (name === '水库列表') {
return <Sklb style={style} />
} else if (name === '关联站点') {
return <Glzd style={style} />
} else if (name === '预报调度') {
return <Ybdd style={style} />
} else if (name === '预报成果') {
return <Ybcg style={style} />
} else if (name === '预警成果') {
return <Yjcg style={style} />
} else if (name === '调度成果') {
return <Ddcg style={style} />
} else if (name === '防汛方案对比') {
return <Fadb style={style} />
}else if (name === '巡查任务总览') { }else if (name === '巡查任务总览') {
return <Xczl /> return <Xczl />
}else if (name === '巡查问题看板') { }else if (name === '巡查问题看板') {
return <Xckb /> return <Xckb />
}else if (name === '水库管护') { }else if (name === '水库管护') {
return <Shuikugh /> return <Shuikugh />
} else if (name === '水库水量统计') {
return <Sksltj style={style} />
} else if (name === '洪水防御') {
return <Hsfy style={style} />
} }
return ( return (
<PanelBox style={style} title={name} color="red"> <PanelBox style={style} title={name} color="red">
<p>not impl</p> <p>not impl</p>

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

@ -8,16 +8,19 @@ const VIEWS = [
{ {
id: 100, title: '防汛', img: '/assets/menu/防洪形势.png', children: [ id: 100, title: '防汛', img: '/assets/menu/防洪形势.png', children: [
{ id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' }, // { id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
{ id: 8, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
{ id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' }, { id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
{ id: 6, title: '预警', img: '/assets/menu/病险水库.png' },
{ id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' }, { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
{ id: 3, title: '预案', img: '/assets/menu/辅助决策.png' }, { id: 5, 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: 5, 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:[ { id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[
{ id: 207, title: '水库总览', img: '/assets/menu/水库管理.png' },
{ id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' }, { id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' },
{ id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' }, { id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' },
{ id: 203, title: '安全监测', img: '/assets/menu/安全监测.png' }, { id: 203, title: '安全监测', img: '/assets/menu/安全监测.png' },

6
src/views/Home/components/SkInfo/SkPlan.js
View File

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

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

@ -88,8 +88,6 @@ export default function Demo1() {
</CSSTransition> </CSSTransition>
) )
} }
} }
) )
} }

304
src/views/Home/panels/Ddcg/chart.js Normal file
View File

@ -0,0 +1,304 @@
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 = () => {
const x = [
"2025-06-02 15:00:00",
"2025-06-02 16:00:00",
"2025-06-02 17:00:00",
"2025-06-02 18:00:00",
"2025-06-02 19:00:00",
"2025-06-02 20:00:00",
"2025-06-02 21:00:00",
"2025-06-03 01:00:00",
"2025-06-03 02:00:00",
"2025-06-03 04:00:00",
"2025-06-03 06:00:00",
"2025-06-03 08:00:00",
"2025-06-03 10:00:00",
"2025-06-03 12:00:00",
"2025-06-03 13:00:00",
"2025-06-03 14:00:00"
]
const y = [
134.05,
134.04,
134.03,
134.03,
134.02,
134.02,
134.02,
134,
133.99,
133.99,
133.97,
133.97,
133.97,
133.98,
133.97,
133.97
]
const y1 = [
13.05,
14.04,
14.03,
14.03,
13.02,
13.02,
13.02,
14,
13.99,
13.99,
13.97,
13.97,
13.97,
13.98,
13.97,
13.97
]
const y2 = [
13.05,
13.24,
13.53,
13.43,
13.02,
13.22,
13.02,
13,
13.19,
13.29,
13.57,
13.57,
13.67,
13.78,
13.87,
13.67
]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: false
}
},
// valueFormatter: (value) => value + ' 万m³'
},
grid: {
top: 42,
left: 50,
right: 40,
bottom: 27,
},
legend: {
data: ['水位','入库流量', '出库流量',],
top: '8',
icon:'circle',
left: 'center',
itemWidth: 11,//11,
itemHeight: 11,//11,
textStyle: {
color: '#B9BFC9',
fontSize: 12,//12
}
},
xAxis: [
{
type: 'category',
data: x,
splitLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9' //X轴文字颜色
},
formatter: val => val.substr('2020-10-14 '.length, 5),
// rotate: 20, // 角度值：Number
fontSize: 10,//10
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisTick: {
show: true,
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '水位m',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 133,
// max: 135,
},
{
type: 'value',
position: 'right',
name: '流量m³/s',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, 30],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 0,
max: 30,
}
],
series: [
{
name: '水位',
type: 'line',
barWidth: 10,
data: y,
showSymbol: false,
itemStyle: {
normal: {
color: '#32e1b5'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
yAxisIndex: 1,
name: '入库流量',
type: 'line',
barWidth: 10,
showSymbol: false,
data: y1,
itemStyle: {
normal: {
color: '#f19932'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
yAxisIndex: 1,
name: '出库流量',
type: 'line',
barWidth: 10,
showSymbol: false,
data: y2,
itemStyle: {
normal: {
color: '#e1554e'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '99%', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

33
src/views/Home/panels/Ddcg/index.js Normal file
View File

@ -0,0 +1,33 @@
import React, { useMemo, useState } from 'react';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import { useDispatch, useSelector } from 'react-redux';
import PanelBox from '../../components/PanelBox';
import AreaDrpChart from './chart';
function DrpReal({ style }) {
const dispatch = useDispatch()
return (
<PanelBox
style={style}
title="调度成果"
color="green"
extra={
<>
{/* <img src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
<div style={{color:'#1890ff',marginRight:'10px',cursor:'pointer'}} onClick={()=>{
dispatch?.runtime.setInfoDlg({ layerId: 'DdcgLayer', properties: {} })
}}>
详情
</div>
</>
}
>
<AreaDrpChart data={[]} />
</PanelBox>
)
}
export default DrpReal;

26
src/views/Home/panels/Fadb/index.js Normal file
View File

@ -0,0 +1,26 @@
import React, { useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
const dispatch = useDispatch()
return (
<PanelBox
style={style}
title="方案对比"
color="green"
extra={
<div style={{color:'#1890ff',marginRight:'10px',cursor:'pointer'}} onClick={()=>{
dispatch?.runtime.setInfoDlg({ layerId: 'FadbLayer', properties: {} })
}}>
详情
</div>
}
>
<img src='/assets/组 6.png' style={{width:'23rem',marginLeft:'1.7rem',marginTop:'0.5rem'}}/>
</PanelBox>
)
}
export default DrpReal;

154
src/views/Home/panels/FhxsSq/index.js
View File

@ -1,12 +1,143 @@
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index' import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import PanelBox from '../../components/PanelBox'; import PanelBox from '../../components/PanelBox';
import { useDispatch, useSelector } from 'react-redux';
import AreaDrpChart from './chart'; import AreaDrpChart from './chart';
import config from '../../../../config';
function DrpReal({ style }) { function DrpReal({ style }) {
const [dimension, setDimension] =useState('ft'); const [dimension, setDimension] =useState('61614460');
const dispatch = useDispatch();
const data = [
{
"stcd": "61614460",
"stnm": "项生(宋埠)",
"adcd": "421181000000000",
"wscd": null,
"importancy": 0,
"lgtd": 114.798056,
"lttd": 31.058611,
"elev": null,
"hasRz": true,
"wrz": null,
"wrq": null,
"grz": null,
"grq": null,
"sfz": null,
"sfq": null,
"type": "sh",
"tm": "2025-06-03T02:00:00.000Z",
"rz": 21.91,
"trend": 1,
"state": 1,
"warning": 0,
"maxRz": 21.91,
"maxDate": "2025-06-03T02:00:00.000Z",
"warndes": null
},{
"stcd": "61613700",
"stnm": "四角门(宋铁二桥)",
"adcd": "421181000000000",
"wscd": null,
"importancy": 0,
"lgtd": 114.8291,
"lttd": 31.0754,
"elev": null,
"hasRz": true,
"wrz": null,
"wrq": null,
"grz": null,
"grq": null,
"sfz": null,
"sfq": null,
"type": "sh",
"tm": "2025-06-03T02:00:00.000Z",
"rz": 27.57,
"trend": 0,
"state": 1,
"warning": 0,
"maxRz": 27.57,
"maxDate": "2025-06-03T01:00:00.000Z",
"warndes": null
},{
"stcd": "61612910",
"stnm": "桃林河(阎河)",
"adcd": "421181000000000",
"wscd": null,
"importancy": 0,
"lgtd": 115.087777777,
"lttd": 31.164444444,
"elev": null,
"hasRz": true,
"wrz": null,
"wrq": null,
"grz": null,
"grq": null,
"sfz": null,
"sfq": null,
"type": "sh",
"tm": "2025-06-03T02:35:00.000Z",
"rz": 55.67,
"trend": 0,
"state": 1,
"warning": 0,
"maxRz": 55.67,
"maxDate": "2025-06-03T02:00:00.000Z",
"warndes": null
},{
"stcd": "61615110",
"stnm": "杨梅河(木子店)",
"adcd": "421181000000000",
"wscd": null,
"importancy": 0,
"lgtd": 115.339667,
"lttd": 31.1595,
"elev": null,
"hasRz": true,
"wrz": null,
"wrq": null,
"grz": null,
"grq": null,
"sfz": null,
"sfq": null,
"type": "sh",
"tm": "2025-06-03T02:00:00.000Z",
"rz": 112.71,
"trend": 0,
"state": 1,
"warning": 0,
"maxRz": 112.71,
"maxDate": "2025-06-02T22:00:00.000Z",
"warndes": null
},{
"stcd": "61612150",
"stnm": "鹰山畈(黄土岗)",
"adcd": "421181000000000",
"wscd": null,
"importancy": 0,
"lgtd": 115.073611,
"lttd": 31.386667,
"elev": null,
"hasRz": true,
"wrz": null,
"wrq": null,
"grz": null,
"grq": null,
"sfz": null,
"sfq": null,
"type": "sh",
"tm": "2025-06-03T02:00:00.000Z",
"rz": 77.12,
"trend": 0,
"state": 1,
"warning": 0,
"maxRz": 77.25,
"maxDate": "2025-06-02T16:00:00.000Z",
"warndes": null
},
]
return ( return (
@ -22,9 +153,19 @@ function DrpReal({ style }) {
labelId="analysis-select-label" labelId="analysis-select-label"
value={dimension} value={dimension}
label="" label=""
onChange={(event) => { onChange={(event,b) => {
const value = event.target.value; const value = event.target.value;
setDimension(value); setDimension(value);
const record = data.filter(o=>o.stcd===value)[0]
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}} }}
// sx={{ // sx={{
// color: '#fff', // color: '#fff',
@ -39,10 +180,11 @@ function DrpReal({ style }) {
// } // }
// }} // }}
> >
<MenuItem value="ft">水情站1</MenuItem> {
<MenuItem value="lc">水情站2</MenuItem> data.map((item)=>
<MenuItem value="mz">水情站3</MenuItem> <MenuItem value={item.stcd}>{item.stnm}</MenuItem>
<MenuItem value="sb">水情站4</MenuItem> )
}
</Select> </Select>
</div> </div>
</> </>

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

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

1093
src/views/Home/panels/Glzd/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

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

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

62
src/views/Home/panels/Hlzydm/index.js Normal file
View File

@ -0,0 +1,62 @@
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:'余家河', 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 }) {
return (
<PanelBox
style={style}
title="河流重要断面预报"
color="green"
>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<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>
{data.map((row) => (
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.dm}</DpTableCell>
<DpTableCell align="center">{row.hfsw}</DpTableCell>
<DpTableCell align="center">{row.hfll}</DpTableCell>
<DpTableCell align="center">{row.tm}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PanelBox>
)
}
export default React.memo(SkReal);

1473
src/views/Home/panels/Hsfy/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

36
src/views/Home/panels/Overall/OverallContent.js
View File

@ -100,7 +100,31 @@ export default function OverallContent({ data }) {
}) })
} else { } else {
drpRealGet(obj).then((record) => { drpRealGet(obj).then((record) => {
_showRecord(record, InfoPopNames.RealDrpPop) const data = {
"stcd": "61644250",
"stnm": "岐亭",
"adcd": null,
"wscd": null,
"importancy": 0,
"lgtd": 114.75161,
"lttd": 31.01175,
"elev": null,
"hasRz": false,
"type": "sw",
"today": 0.5,
"h1": 0.5,
"h3": 0.5,
"h6": 0.5,
"h12": 1,
"h24": 4.5,
"h48": 21,
"tm": "2025-06-03T02:00:00.000Z",
"state": 1,
"warning": 0
}
_showRecord(data, InfoPopNames.RealDrpPop)
}); });
} }
} }
@ -135,9 +159,15 @@ export default function OverallContent({ data }) {
<div> <div>
<span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span> <span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span>
24小时中共有<span className={classes.number}>{strNumber(h24?.drpStCount?.total, '-')}</span> 24小时中共有<span className={classes.number}>
{/* {strNumber(h24?.drpStCount?.total, '-')} */}
378
</span>
个降雨测站(<span className={classes.sttype}>山洪测站</span> 个降雨测站(<span className={classes.sttype}>山洪测站</span>
<span className={classes.number}>{strNumber(h24?.drpStCount?.sh, '-')}</span> <span className={classes.number}>
{/* {strNumber(h24?.drpStCount?.sh, '-')} */}
35
</span>
个)，其中最大降雨测站为<span onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span> 个)，其中最大降雨测站为<span onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span>
，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm ，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm
{h24?.cntDrp10 > 0 && (<>，<span className={classes.sttype}>10mm以下</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp10, '-')}</span>个</>)} {h24?.cntDrp10 > 0 && (<>，<span className={classes.sttype}>10mm以下</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp10, '-')}</span>个</>)}

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

@ -111,7 +111,7 @@ function SkReal({ style }) {
<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" onClick={() => flyTo(row)}>{row.stnm}</div>
</DpTableCell> </DpTableCell>
<DpTableCell align="right">{renderDrp(row, tableSkDrpField)}</DpTableCell> <DpTableCell align="right">{row['h24']}</DpTableCell>
<DpTableCell align="right">{row?.rz}</DpTableCell> <DpTableCell align="right">{row?.rz}</DpTableCell>
<DpTableCell align="right">{renderSkArz(row)}</DpTableCell> <DpTableCell align="right">{renderSkArz(row)}</DpTableCell>
</DpTableRow> </DpTableRow>

217
src/views/Home/panels/Sklb/index.js Normal file
View File

@ -0,0 +1,217 @@
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 = [
{
"stcd": "61614200",
"type": "sk",
"hasRz": true,
"stnm": "浮桥河水库",
"adcd": "421181100000",
"wscd": null,
"importancy": 0,
"lgtd": 114.875,
"lttd": 31.166667,
"elev": 0,
"damel": 71.33,
"dsflz": 68.04,
"fsltdz": 64.89,
"ddz": 51.78,
"zcxsw": 64.89,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 16.5,
"drpState": 1,
"rz": 60.71,
"w": 162.8,
"a_fsltdz": -4.18,
"rzTm": "2025-06-03T02:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"aRz": -4.18,
"strarz": "-4.18",
"type":"大型",
},
{
"stcd": "61613010",
"type": "sk",
"hasRz": true,
"stnm": "明山水库",
"adcd": "421181103000",
"wscd": null,
"importancy": 0,
"lgtd": 115.066667,
"lttd": 31.016667,
"elev": 0,
"damel": 98.7,
"dsflz": 96.07,
"fsltdz": 93,
"ddz": 78.02,
"zcxsw": 93,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 12.5,
"drpState": 1,
"rz": 84.43,
"w": 49.5,
"a_fsltdz": -8.569999999999993,
"rzTm": "2025-06-03T02:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"aRz": -8.57,
"strarz": "-8.57",
"type":"大型",
},
{
"stcd": "716128301",
"type": "sk",
"hasRz": true,
"stnm": "新庙水库",
"adcd": "421181201000",
"wscd": null,
"importancy": 0,
"lgtd": 115.2125,
"lttd": 31.077222,
"elev": 0,
"damel": 21,
"dsflz": 18.88,
"fsltdz": 17.8,
"ddz": 7.6,
"zcxsw": 17.8,
"drpTm": "2025-04-11T05:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 651.46,
"w": 0.154,
"a_fsltdz": 633.6600000000001,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 1,
"rzState": 2,
"type":"小(2)型",
"pic": [
{
"stcd": "716128301",
"tm": "2023-03-12T06:04:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716128301/20230312140400.jpg"
},
{
"stcd": "716128301",
"tm": "2023-03-12T06:29:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716128302/20230312142900.jpg"
}
],
"aRz": 633.66,
"strarz": "633.66"
},
{
"stcd": "7CS000021",
"type": "sk",
"hasRz": true,
"stnm": "夏家山水库",
"adcd": "421181104000",
"wscd": null,
"importancy": 0,
"lgtd": 115.108333,
"lttd": 30.920556,
"elev": 0,
"damel": 14.2,
"dsflz": 13,
"fsltdz": 12.55,
"ddz": 4.8,
"zcxsw": 12.55,
"drpTm": "2025-04-11T06:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 532.4,
"w": 0.075,
"a_fsltdz": 519.85,
"rzTm": "2025-04-11T06:00:00.000Z",
"rzWarning": 1,
"rzState": 2,
"type":"小(2)型",
"pic": [
{
"stcd": "7CS000021",
"tm": "2022-11-17T04:04:59.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2022/1117/7CS000021/20221117120459.jpg"
},
{
"stcd": "7CS000021",
"tm": "2022-11-17T04:10:28.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2022/1117/7CS000022/20221117121028.jpg"
}
],
"aRz": 519.85,
"strarz": "519.85"
}
]
function SkReal({ style }) {
return (
<PanelBox
style={style}
title="水库列表"
color="green"
>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ maxWidth: '30%' }} align="left">水库名称</DpTableCell>
<DpTableCell align="center">类型</DpTableCell>
<DpTableCell align="center">库容</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.stnm}</div>
</DpTableCell>
<DpTableCell align="center">{row.type}</DpTableCell>
<DpTableCell align="center">{row.w}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PanelBox>
)
}
export default React.memo(SkReal);

337
src/views/Home/panels/Sksltj/chart.js Normal file
View File

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

267
src/views/Home/panels/Sksltj/index.js Normal file
View File

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

139
src/views/Home/panels/Skzl/chart.js Normal file
View File

@ -0,0 +1,139 @@
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 data = [
[
"2025-06-02 15:00:00",
134.05
],
[
"2025-06-02 16:00:00",
134.04
],
[
"2025-06-02 17:00:00",
134.03
],
[
"2025-06-02 18:00:00",
134.03
],
[
"2025-06-02 19:00:00",
134.02
],
[
"2025-06-02 20:00:00",
134.02
],
[
"2025-06-02 21:00:00",
134.02
],
[
"2025-06-03 01:00:00",
134
],
[
"2025-06-03 02:00:00",
133.99
],
[
"2025-06-03 04:00:00",
133.99
],
[
"2025-06-03 06:00:00",
133.97
],
[
"2025-06-03 08:00:00",
133.97
],
[
"2025-06-03 10:00:00",
133.97
],
[
"2025-06-03 12:00:00",
133.98
],
[
"2025-06-03 13:00:00",
133.97
],
[
"2025-06-03 14:00:00",
133.97
]
]
const AreaDrpChart = () => {
const color= [
'#6187e6',
'#77caa1',
'#5c6988',
'#e2b642',
]
var option = {
color: color,
title : {
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// legend: {
// orient : 'vertical',
// x : 'left',
// data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
// },
toolbox: {
show : false,
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '65%',
center: ['50%', '60%'],
data:[
{value:3, name:'大型水库'},
{value:7, name:'中型水库'},
{value:44, name:'小(1)型水库'},
{value:271, name:'小(2)型水库'},
]
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '99%', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

34
src/views/Home/panels/Skzl/index.js Normal file
View File

@ -0,0 +1,34 @@
import React, { useMemo, useState } from 'react';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import PanelBox from '../../components/PanelBox';
import AreaDrpChart from './chart';
function DrpReal({ style }) {
const [dimension, setDimension] =useState('ft');
return (
<PanelBox
style={style}
title="水库总览"
color="green"
>
<div style={{width:'100%',height:"14rem",display:'flex',marginTop:'-15px'}}>
<div style={{margin:'10px auto',width:'70%'}}>
<AreaDrpChart data={[]} />
</div>
<div style={{width:'30%',display:'flex',flexDirection:'column',justifyContent:'center'}}>
<div style={{display:'flex',alignItems:'center',color:'#cdddf7',cursor:'pointer',marginTop:'35px'}}><div style={{width:'8px',height:'8px',borderRadius:'8px',background:'#6187e6',marginRight:'10px'}}></div>大型水库</div>
<div style={{display:'flex',alignItems:'center',color:'#cdddf7',cursor:'pointer',marginTop:'10px'}}><div style={{width:'8px',height:'8px',borderRadius:'8px',background:'#77caa1',marginRight:'10px'}}></div>中型水库</div>
<div style={{display:'flex',alignItems:'center',color:'#cdddf7',cursor:'pointer',marginTop:'10px'}}><div style={{width:'8px',height:'8px',borderRadius:'8px',background:'#5c6988',marginRight:'10px'}}></div>小(1)型水库</div>
<div style={{display:'flex',alignItems:'center',color:'#cdddf7',cursor:'pointer',marginTop:'10px'}}><div style={{width:'8px',height:'8px',borderRadius:'8px',background:'#e2b642',marginRight:'10px'}}></div>小(2)型水库</div>
</div>
</div>
<div style={{width:'100%',color:'#E0F6F7',padding:"0 15px"}}><div style={{width:'2rem',display:'inline-block'}}></div>麻城市共有 325 座水库，其中大型水库 3 座（浮桥河水库45490万m³、明山水库16900万m³、三河口水库16926万m³），中型水库 7 座（总库容约 1.627亿m³），小（1）型水库 44 座、小（2）型水库 271 座，全市水库总库容约 11.56 亿m³。</div>
</PanelBox>
)
}
export default DrpReal;

228
src/views/Home/panels/Tqyb24h/chart.js Normal file
View File

@ -0,0 +1,228 @@
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 = () => {
const x = [
"2025-06-02 15:00:00",
"2025-06-02 16:00:00",
"2025-06-02 17:00:00",
"2025-06-02 18:00:00",
"2025-06-02 19:00:00",
"2025-06-02 20:00:00",
"2025-06-02 21:00:00",
"2025-06-03 01:00:00",
"2025-06-03 02:00:00",
"2025-06-03 04:00:00",
"2025-06-03 06:00:00",
"2025-06-03 08:00:00",
"2025-06-03 10:00:00",
"2025-06-03 12:00:00",
"2025-06-03 13:00:00",
"2025-06-03 14:00:00"
]
const y = [
0,
0,
0,
0,
0,
1.02,
1.02,
1,
0,
0,
0,
1.97,
1.23,
0,
0,
0
]
const y1 = [
13.05,
14.04,
14.03,
14.03,
13.02,
13.02,
13.02,
14,
13.99,
13.99,
13.97,
13.97,
13.97,
13.98,
13.97,
13.97
]
const y2 = [
13.05,
13.24,
13.53,
13.43,
13.02,
13.22,
13.02,
13,
13.19,
13.29,
13.57,
13.57,
13.67,
13.78,
13.87,
13.67
]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: false
}
},
// valueFormatter: (value) => value + ' 万m³'
},
grid: {
top: 42,
left: 50,
right: 40,
bottom: 27,
},
legend: {
data: ['雨量'],
top: '8',
icon:'circle',
left: 'center',
itemWidth: 11,//11,
itemHeight: 11,//11,
textStyle: {
color: '#B9BFC9',
fontSize: 12,//12
}
},
xAxis: [
{
type: 'category',
data: x,
splitLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9' //X轴文字颜色
},
formatter: val => val.substr('2020-10-14 '.length, 5),
// rotate: 20, // 角度值：Number
fontSize: 10,//10
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisTick: {
show: true,
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '雨量mm',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 0,
max: 5,
}
],
series: [
{
name: '雨量',
type: 'bar',
barWidth: 10,
data: y,
showSymbol: false,
itemStyle: {
normal: {
color: '#32e1b5'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '12rem', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

2425
src/views/Home/panels/Tqyb24h/dsld.js Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,9 +1,10 @@
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import PanelBox from '../../components/PanelBox'; import PanelBox from '../../components/PanelBox';
import clsx from 'clsx'; import clsx from 'clsx';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { Button, Grid, makeStyles } from '@material-ui/core' import { Button, Grid, makeStyles } from '@material-ui/core'
import Yb24h from './yb24h' import Yb24h from './yb24h'
import Dsld from './dsld'
const useStyles = makeStyles({ const useStyles = makeStyles({
root: { root: {
@ -31,7 +32,21 @@ const useStyles = makeStyles({
export default function AreaDrp({ style }) { export default function AreaDrp({ style }) {
const classes = useStyles(); const classes = useStyles();
const dispatch = useDispatch();
const [tab,setTab] = useState('1') const [tab,setTab] = useState('1')
useEffect(()=>{
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 });
}
},[tab])
return ( return (
@ -65,6 +80,11 @@ export default function AreaDrp({ style }) {
<Yb24h/> <Yb24h/>
:null :null
} }
{
tab==='2'?
<Dsld/>
:null
}
</PanelBox> </PanelBox>
) )
} }

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

File diff suppressed because it is too large Load Diff

49
src/views/Home/panels/Warn/ARzSk.js
View File

@ -36,7 +36,52 @@ function Item({ data, viewInfo, sendMessage }) {
} }
function ARzSk({ data }) { function ARzSk({ data }) {
data = data || []; data = [{
"stcd": "716129061",
"type": "sk",
"hasRz": true,
"stnm": "仰天窝水库",
"adcd": "421181201000",
"wscd": null,
"importancy": 0,
"lgtd": 115.106667,
"lttd": 31.126389,
"elev": 0,
"damel": 325.08,
"dsflz": 324.18,
"fsltdz": 323.5,
"ddz": 319.5,
"zcxsw": 323.5,
"drpTm": "2025-04-11T05:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 325.16,
"w": 0.132,
"a_fsltdz": 4.660000000000025,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 1,
"rzState": 2,
"pic": [
{
"stcd": "716129061",
"tm": "2023-03-12T06:05:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
},
{
"stcd": "716129061",
"tm": "2023-03-12T07:25:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
}
],
"aRz": 4.66,
"strarz": "4.66"
}];
const dispatch = useDispatch(); const dispatch = useDispatch();
const flyTo = (record) => { const flyTo = (record) => {
@ -44,7 +89,7 @@ function ARzSk({ data }) {
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], center: [lgtd, lttd+0.005],
zoom: 15, zoom: 15,
pitch: config.poiPitch, pitch: config.poiPitch,
}); });

9
src/views/Home/panels/Warn/Hdyj.js
View File

@ -22,8 +22,8 @@ function Item({ data, viewInfo, flyTo }) {
return ( return (
<div className="item"> <div className="item">
<div className={`header level${data.level}`}> {/* <div className={`header level${data.level}`}>
</div> </div> */}
<div className="content"> <div className="content">
<div className="main"> <div className="main">
<div className="title"> <div className="title">
@ -33,7 +33,8 @@ function Item({ data, viewInfo, flyTo }) {
<div className="extra">{appconsts.stWarnStatus[data.status]}</div> <div className="extra">{appconsts.stWarnStatus[data.status]}</div>
</div> </div>
<div className="desc"> <div className="desc">
<span>{`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level]}为${brz ?? '-'}m，超${arz || '-'}m`}</span> {/* <span>{`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level]}为${brz ?? '-'}m，超${arz || '-'}m`}</span> */}
<span>{`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level||2]}为${brz ?? '77'}m，超${'0.12'}m`}</span>
</div> </div>
<div className="tail"> <div className="tail">
<span>报警: {tm1}</span> <span>报警: {tm1}</span>
@ -42,7 +43,7 @@ function Item({ data, viewInfo, flyTo }) {
<span>更新: {tm2}</span> <span>更新: {tm2}</span>
) : null ) : null
} }
<a style={{ cursor: 'pointer' }} onClick={() => viewInfo(data)}>处理</a> {/* <a style={{ cursor: 'pointer' }} onClick={() => viewInfo(data)}>处理</a> */}
</div> </div>
</div> </div>
</div> </div>

13
src/views/Home/panels/Warn/index.js
View File

@ -40,24 +40,25 @@ export default function Warn({ style }) {
<span <span
className={clsx({ active: warnType === 'sk', 'cusor-pointer': warnType !== 'sk' })} className={clsx({ active: warnType === 'sk', 'cusor-pointer': warnType !== 'sk' })}
onClick={() => dispatch.overallview.setWarnType('sk')} onClick={() => dispatch.overallview.setWarnType('sk')}
>超汛限水库{bxData?.aRzSk?.length ? <a className="number">{bxData?.aRzSk?.length}</a> : null} >水库预警{bxData?.aRzSk?.length ? <a className="number">{bxData?.aRzSk?.length}</a> : null}
</span> </span>
<span <span
className={clsx({ active: warnType === 'hd', 'cusor-pointer': warnType !== 'hd' })} className={clsx({ active: warnType === 'hd', 'cusor-pointer': warnType !== 'hd' })}
onClick={() => dispatch.overallview.setWarnType('hd')} onClick={() => dispatch.overallview.setWarnType('hd')}
>河道预警{hdyj?.length ? <a className="number">{hdyj?.length}</a> : null} >河道预警
{/* {hdyj?.length ? <a className="number">{hdyj?.length}</a> : null} */}
</span> </span>
<span {/* <span
className={clsx({ active: warnType === 'qx', 'cusor-pointer': warnType !== 'qx' })} className={clsx({ active: warnType === 'qx', 'cusor-pointer': warnType !== 'qx' })}
onClick={() => dispatch.overallview.setWarnType('qx')} onClick={() => dispatch.overallview.setWarnType('qx')}
>气象预警{shqx?.maxLv ? <a className="number" style={{ backgroundColor: yjLevelColor(shqx.maxLv) }}>{shqx.maxLv}</a> : null} >气象预警{shqx?.maxLv ? <a className="number" style={{ backgroundColor: yjLevelColor(shqx.maxLv) }}>{shqx.maxLv}</a> : null}
</span> </span> */}
</span> </span>
} }
> >
{warnType === 'sh' ? <ShYj data={shyjData} /> : null} {warnType === 'sh' ? <ShYj data={shyjData} /> : null}
{/* {warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null} */} {warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null}
{warnType === 'sk' ? <Cxxsk/> : null} {/* {warnType === 'sk' ? <Cxxsk/> : null} */}
{warnType === 'hd' ? <Hdyj data={hdyj} /> : null} {warnType === 'hd' ? <Hdyj data={hdyj} /> : null}
{warnType === 'qx' ? <Shqx data={shqx} /> : null} {warnType === 'qx' ? <Shqx data={shqx} /> : null}
</PanelBox> </PanelBox>

62
src/views/Home/panels/Ybcg/index.js Normal file
View File

@ -0,0 +1,62 @@
import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
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 appconsts from '../../../../models/appconsts';
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' },
]
function SkReal({ style }) {
const dispatch = useDispatch();
return (
<PanelBox
style={style}
title="预报成果"
color="green"
>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '7rem' }} align="left">名称</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">洪峰时间</DpTableCell>
<DpTableCell style={{ minWidth: '4.7rem' }} align="center">最高水位</DpTableCell>
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪峰流量</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {
dispatch?.runtime.setInfoDlg({ layerId: 'YbcgLayer', properties: {} })
}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.tm}</DpTableCell>
<DpTableCell align="center">{row.hfsw}</DpTableCell>
<DpTableCell align="center">{row.hfll}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PanelBox>
)
}
export default React.memo(SkReal);

23
src/views/Home/panels/Ybdd/index.js Normal file
View File

@ -0,0 +1,23 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="预报调度"
color="green"
// extra={
// <>
// <img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
// <img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
// </>
// }
>
<img src='/assets/组 8.png' style={{width:'26rem',marginLeft:'8px',marginTop:'0.8rem'}}/>
</PanelBox>
)
}
export default DrpReal;

23
src/views/Home/panels/Yjcg/index.js Normal file
View File

@ -0,0 +1,23 @@
import React, { useMemo, useState } from 'react';
import PanelBox from '../../components/PanelBox';
function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="预警成果"
color="green"
// extra={
// <>
// <img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
// <img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
// </>
// }
>
<img src='/assets/组 4.png' style={{width:'23rem',marginLeft:'1.7rem',marginTop:'1rem'}}/>
</PanelBox>
)
}
export default DrpReal;

304
src/views/Home/panels/Zyskyb/chart.js Normal file
View File

@ -0,0 +1,304 @@
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 = () => {
const x = [
"2025-06-02 15:00:00",
"2025-06-02 16:00:00",
"2025-06-02 17:00:00",
"2025-06-02 18:00:00",
"2025-06-02 19:00:00",
"2025-06-02 20:00:00",
"2025-06-02 21:00:00",
"2025-06-03 01:00:00",
"2025-06-03 02:00:00",
"2025-06-03 04:00:00",
"2025-06-03 06:00:00",
"2025-06-03 08:00:00",
"2025-06-03 10:00:00",
"2025-06-03 12:00:00",
"2025-06-03 13:00:00",
"2025-06-03 14:00:00"
]
const y = [
134.05,
134.04,
134.03,
134.03,
134.02,
134.02,
134.02,
134,
133.99,
133.99,
133.97,
133.97,
133.97,
133.98,
133.97,
133.97
]
const y1 = [
13.05,
14.04,
14.03,
14.03,
13.02,
13.02,
13.02,
14,
13.99,
13.99,
13.97,
13.97,
13.97,
13.98,
13.97,
13.97
]
const y2 = [
13.05,
13.24,
13.53,
13.43,
13.02,
13.22,
13.02,
13,
13.19,
13.29,
13.57,
13.57,
13.67,
13.78,
13.87,
13.67
]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: false
}
},
// valueFormatter: (value) => value + ' 万m³'
},
grid: {
top: 42,
left: 50,
right: 40,
bottom: 27,
},
legend: {
data: ['水位','入库流量', '出库流量',],
top: '8',
icon:'circle',
left: 'center',
itemWidth: 11,//11,
itemHeight: 11,//11,
textStyle: {
color: '#B9BFC9',
fontSize: 12,//12
}
},
xAxis: [
{
type: 'category',
data: x,
splitLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9' //X轴文字颜色
},
formatter: val => val.substr('2020-10-14 '.length, 5),
// rotate: 20, // 角度值：Number
fontSize: 10,//10
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: 'rgba(255,255,255,0.2)',
width: 0
}
},
axisTick: {
show: true,
}
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: '水位m',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 133,
// max: 135,
},
{
type: 'value',
position: 'right',
name: '流量m³/s',
nameTextStyle: {
color: '#B9BFC9',
fontSize: 10,//10,
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
},
nameGap: 17,
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#B9BFC9',
fontSize: 11,//11
}
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
min: 0,
max: 30,
}
],
series: [
{
name: '水位',
type: 'line',
barWidth: 10,
data: y,
showSymbol: false,
itemStyle: {
normal: {
color: '#32e1b5'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
yAxisIndex: 1,
name: '入库流量',
type: 'line',
barWidth: 10,
showSymbol: false,
data: y1,
itemStyle: {
normal: {
color: '#f19932'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
},
{
yAxisIndex: 1,
name: '出库流量',
type: 'line',
barWidth: 10,
showSymbol: false,
data: y2,
itemStyle: {
normal: {
color: '#e1554e'
},
},
// label: {
// show: true,
// position: 'top',
// color: '#bbb',
// fontSize: 12,
// textShadowBlur: 4,
// textShadowColor: '#6ab',
// },
}
]
};
return (
<ReactEcharts
option={option}
style={{ height: '99%', width: '100%' }}
/>
)
}
export default React.memo(AreaDrpChart);

244
src/views/Home/panels/Zyskyb/index.js Normal file
View File

@ -0,0 +1,244 @@
import React, { useMemo, useState } from 'react';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import PanelBox from '../../components/PanelBox';
import config from '../../../../config';
import { useDispatch, useSelector } from 'react-redux';
import AreaDrpChart from './chart';
function DrpReal({ style }) {
const [dimension, setDimension] =useState('61614200');
const dispatch = useDispatch();
const data = [
{
"stcd": "61614200",
"type": "sk",
"hasRz": true,
"stnm": "浮桥河水库",
"adcd": "421181100000",
"wscd": null,
"importancy": 0,
"lgtd": 114.875,
"lttd": 31.166667,
"elev": 0,
"damel": 71.33,
"dsflz": 68.04,
"fsltdz": 64.89,
"ddz": 51.78,
"zcxsw": 64.89,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 16.5,
"drpState": 1,
"rz": 60.71,
"w": 162.8,
"a_fsltdz": -4.18,
"rzTm": "2025-06-03T02:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"aRz": -4.18
},{
"stcd": "61612610",
"type": "sk",
"hasRz": true,
"stnm": "三河口水库",
"adcd": "421181109000",
"wscd": null,
"importancy": 0,
"lgtd": 115.166667,
"lttd": 31.333333,
"elev": 0,
"damel": 156.8,
"dsflz": 154.99,
"fsltdz": 149,
"ddz": 124,
"zcxsw": 149,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 12.5,
"drpState": 1,
"rz": 141.45,
"w": 77.8,
"a_fsltdz": -7.550000000000011,
"rzTm": "2025-06-03T01:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"aRz": -7.55
},{
"stcd": "61613010",
"type": "sk",
"hasRz": true,
"stnm": "明山水库",
"adcd": "421181103000",
"wscd": null,
"importancy": 0,
"lgtd": 115.066667,
"lttd": 31.016667,
"elev": 0,
"damel": 98.7,
"dsflz": 96.07,
"fsltdz": 93,
"ddz": 78.02,
"zcxsw": 93,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 12.5,
"drpState": 1,
"rz": 84.43,
"w": 49.5,
"a_fsltdz": -8.569999999999993,
"rzTm": "2025-06-03T02:00:00.000Z",
"rzWarning": 0,
"rzState": 1,
"aRz": -8.57
},{
"stcd": "716113901",
"type": "sk",
"hasRz": true,
"stnm": "铺头坳水库",
"adcd": "421181201000",
"wscd": null,
"importancy": 0,
"lgtd": 115.169444,
"lttd": 31.090278,
"elev": 0,
"damel": 266.7,
"dsflz": 265.54,
"fsltdz": 264.3,
"ddz": 256,
"zcxsw": 264.3,
"drpTm": "2025-04-11T05:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 263.16,
"w": 0.991,
"a_fsltdz": -1.1399999999999864,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"pic": [
{
"stcd": "716113901",
"tm": "2023-03-12T08:02:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg"
},
{
"stcd": "716113901",
"tm": "2023-03-12T07:15:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg"
}
],
"aRz": -1.14
},{
"stcd": "716111701",
"type": "sk",
"hasRz": true,
"stnm": "桐枧冲水库",
"adcd": "421181110000",
"wscd": null,
"importancy": 0,
"lgtd": 115.135278,
"lttd": 31.3925,
"elev": 0,
"damel": 276.56,
"dsflz": 273.66,
"fsltdz": 269.86,
"ddz": 256.76,
"zcxsw": 269.86,
"drpTm": "2025-04-11T05:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 265.12,
"w": 0.689,
"a_fsltdz": -4.740000000000009,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"pic": [
{
"stcd": "716111701",
"tm": "2023-03-12T07:03:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg"
},
{
"stcd": "716111701",
"tm": "2023-03-12T07:27:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg"
}
],
"aRz": -4.74
},
]
return (
<PanelBox
style={style}
title="重要水库预报"
color="green"
extra={
<>
{/* <img src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
<div style={{height:'30px',overflow:'hidden'}}>
<Select
labelId="analysis-select-label"
value={dimension}
label=""
onChange={(event,b) => {
const value = event.target.value;
setDimension(value);
const record = data.filter(o=>o.stcd===value)[0]
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}}
>
{
data.map((item)=>
<MenuItem value={item.stcd}>{item.stnm}</MenuItem>
)
}
</Select>
</div>
</>
}
>
<AreaDrpChart data={[]} />
</PanelBox>
)
}
export default DrpReal;

14941
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff