lsf-dev
秦子超 2025-06-11 11:31:37 +08:00
commit 99d9008627
18 changed files with 1703 additions and 221 deletions

View File

@ -24,7 +24,7 @@ export const DrpRealPromise = new CachePromise(
() => fetch(`${process.env.PUBLIC_URL}/data3/drpReal.json`)
.then((response) => response.json())
.then(data=>{
.then(data => {
return data.filter(o=>o.state===1)
})
.catch(() => null),

View File

@ -148,7 +148,7 @@ const map = {
setView(id) {
let layerVisible = {};
const map = window.__mapref
if (id === 1 || id == 503) {
if (id === 1 || id == 503) {
layerVisible = {
RealDrpLayer: true,
RealHDLayer: true,
@ -171,8 +171,8 @@ const map = {
YuwaiLayer: false,
AdcdLayer: true,
WataLayer: false,
RealSkLayerQ2:true,
RealHDLayerQ2:true,
RealSkLayerQ2: true,
RealHDLayerQ2: true,
}
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
@ -187,8 +187,8 @@ const map = {
YuwaiLayer: false,
AdcdLayer: true,
WataLayer: false,
RealSkLayerQ2:true,
RealHDLayerQ2:true,
RealSkLayerQ2: true,
RealHDLayerQ2: true,
}
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
@ -228,7 +228,7 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
}else if (id === 5) {
} else if (id === 5) {
layerVisible = {
RealDrpLayer: true,
RealHDLayer: false,
@ -246,8 +246,8 @@ const map = {
RealDrpLayer: false,
RealHDLayer: false,
RealSkLayer: false,
RainDrpLayer:true,
ShuikuLayer:false,
RainDrpLayer: true,
ShuikuLayer: false,
BxSkLayer: true,
FzdxLayer: false,
WataLayer: false,
@ -255,7 +255,7 @@ const map = {
RoadLayer: true,
RivlLayer: true,
RealHDLayerQ2: true,
RealSkLayerQ2:true
RealSkLayerQ2: true
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
@ -316,11 +316,17 @@ const map = {
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
BxjcLayer: true,
SyjcLayer: true,
SljcLayer: true,
ByjcLayer:true
BxjcLayer: false,
SyjcLayer: false,
SljcLayer: false,
ByjcLayer: false
};
dispatch.runtime.setCameraTarget({
center: [114.88069, 31.171967],
zoom: 12,
pitch: 60,
bearing: 0
});
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
@ -361,7 +367,7 @@ const map = {
RealHDLayer: false,
RealSkLayer: false,
BxSkLayer: false,
XunchaLayer:true,
XunchaLayer: true,
FzdxLayer: false,
WataLayer: false,
AdcdLayer: true,
@ -397,8 +403,8 @@ const map = {
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
ShuichangLayer:true,
ShuiyuandiLayer:false,
ShuichangLayer: true,
ShuiyuandiLayer: false,
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
@ -414,10 +420,10 @@ const map = {
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
ShuichangLayer:true,
ShuichangLayer: true,
ShuichangQLayer: true,
ShuiyuandiQLayer:true,
ShuizhiLayer:true,
ShuiyuandiQLayer: true,
ShuizhiLayer: true,
ShuiyuandiLayer: true,
};
Object.keys(DCPJ_TYPES).forEach(key => {
@ -434,13 +440,13 @@ const map = {
AdcdLayer: true,
RoadLayer: true,
RivlLayer: true,
ShuichangLayer:true,
ShuichangLayer: true,
ShuichangQLayer: true,
};
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
} else if ( id === 303 || id === 306 || id === 305) {
} else if (id === 303 || id === 306 || id === 305) {
layerVisible = {
RealDrpLayer: false,
RealHDLayer: false,
@ -455,7 +461,7 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
}else if ( id === 307) {
} else if (id === 307) {
layerVisible = {
RealDrpLayer: false,
RealHDLayer: true,
@ -487,7 +493,7 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
}else if (id == 504) {
} else if (id == 504) {
layerVisible = {
RealDrpLayer: true,
TrsqLayer: true,
@ -497,7 +503,7 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
}else if (id == 505) {
} else if (id == 505) {
layerVisible = {
BzLayer: true,
SbLayer: true,
@ -509,7 +515,7 @@ const map = {
Object.keys(DCPJ_TYPES).forEach(key => {
layerVisible['Dcpj_' + key + 'Layer'] = false;
});
}else if (id == 506 || id == 507) {
} else if (id == 506 || id == 507) {
layerVisible = {
AdcdLayer: true,
RivlLayer: true,
@ -519,7 +525,7 @@ const map = {
layerVisible['Dcpj_' + key + 'Layer'] = true;
} else {
layerVisible['Dcpj_' + key + 'Layer'] = false;
}
});
}
@ -529,9 +535,9 @@ const map = {
dispatch.runtime.setFeaturePop(null);
if (id === 8){
if (id === 8) {
dispatch.rcview.showRealContour('h24')
}else{
} else {
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
dispatch.runtime.setLayerSetting({ planeArea: null });
dispatch.map.setLayerVisible({ ContourLayer: false });
@ -573,10 +579,192 @@ const map = {
dispatch.map.setLayerSetting({ dom: true });
// map.setLayoutProperty('卫星图', 'visibility', 'visible');
} else {
dispatch.map.setLayerSetting({dom: false});
dispatch.map.setLayerSetting({ dom: false });
// map.setLayoutProperty('卫星图', 'visibility', 'none');
}
if (id == 203) {
const skdata = [
{
"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": 5,
"h3": 6,
"h6": 7.5,
"h12": 8,
"h24": 9,
"h48": 26,
"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": "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": 7,
"h3": 8.4,
"h6": 10.5,
"h12": 11.200000000000001,
"h24": 12.6,
"h48": 25.799999999999997,
"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": "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": 7,
"h3": 8.4,
"h6": 10.5,
"h12": 11.200000000000001,
"h24": 12.6,
"h48": 25.799999999999997,
"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": "61612700",
"type": "sk",
"hasRz": true,
"stnm": "碧绿河水库",
"adcd": "421181109000",
"wscd": null,
"importancy": 0,
"lgtd": 115.214444,
"lttd": 31.299722,
"elev": 0,
"damel": 142.9,
"dsflz": 139.08,
"fsltdz": 137,
"ddz": 105,
"zcxsw": 137,
"drpTm": "2025-06-03T02:00:00.000Z",
"today": 0,
"h1": 4,
"h3": 4.8,
"h6": 6,
"h12": 6.4,
"h24": 7.2,
"h48": 22.6,
"drpState": 1,
"rz": 119.6,
"w": 13.15,
"a_fsltdz": -17.400000000000006,
"rzTm": "2025-06-03T00:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"aRz": -17.4
}
]
const layer = map.getLayer('关联站点')
if (layer) {
map.removeLayer('关联站点');
map.removeSource('关联站点');
}
map.addLayer({
'id': '关联站点',//+new Date().getTime(),
'type': 'symbol',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [],
},
},
'layout': {
'icon-allow-overlap': true,
'text-allow-overlap': true,
'icon-image': '水库-离线',
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10, 0.4,
14, 0.8,
],
'text-allow-overlap': true,
'text-size': [
'interpolate', ['linear'], ['zoom'],
10, 10,
14, 14,
],
'text-font': ['Roboto Black'],
'text-field': [
'step',
['zoom'],
'',
12, ['get', 'stnm']
],
'text-anchor': 'top',
'text-offset': [0, 1],
},
'paint': {
'text-color': '#fff'
},
'visibility': 'visible',
});
map.getSource('关联站点').setData(parseGeoJSON(skdata))
}
if(id!==200&&id!==203&&id!==205&&id!==206){
const layer = map.getLayer('临时水库tz')

View File

@ -82,9 +82,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
} else if (view === 203) {
left = [
{ key: '天气' },
{ key: '变形监测', style: { height: '20rem', flexGrow: 1 } },
{ key: '渗压监测', style: { height: '20rem', flexGrow: 1 } },
{ key: '渗流监测', style: { height: '20rem', flexGrow: 1 } },
{ key: '关联站点',style: { height: '15rem', flexGrow: 1 } },
{ key: '水库水量统计',style: { height: '22rem' } },
// { key: '安全监测', style: { height: '20rem', flexGrow: 1 } },
];
leftFullHeight = true;

View File

@ -40,6 +40,7 @@ function HDStDlg({ record, onClose }) {
<TableHead>
<TableRow>
<DpTableCell align="center">序号</DpTableCell>
<DpTableCell align="center">水库名称</DpTableCell>
<DpTableCell align="center">预警时间</DpTableCell>
<DpTableCell align="center">测点编号</DpTableCell>
<DpTableCell align="center">预警级别</DpTableCell>
@ -53,6 +54,7 @@ function HDStDlg({ record, onClose }) {
<DpTableCell align="center">
<div className="table-ellipsis cursor-pointer" >1</div>
</DpTableCell>
<DpTableCell align="center">浮桥河水库</DpTableCell>
<DpTableCell align="center">2025-5-20 10:00:00</DpTableCell>
<DpTableCell align="center">GN1</DpTableCell>
<DpTableCell align="center">红色</DpTableCell>

View File

@ -134,8 +134,19 @@ export default function MapCtrl({ initParams, onLoad }) {
}
dispatch.runtime.setFeaturePop({ type: record.layerPop, properties: record, coordinates: [record.lgtd, record.lttd] });
}
if(feature.layer.id==='关联站点'){
if (feature.layer.id === '关联站点') {
const record = feature.properties
if (record.cd_nm == 'GN1') {
dispatch?.runtime.setInfoDlg({ layerId: 'BxjcLayer', properties: record })
}else if (record.cd_nm == 'UPD1') {
dispatch?.runtime.setInfoDlg({ layerId: 'SyjcLayer', properties: record })
}else if (record.cd_nm == 'WE1') {
dispatch?.runtime.setInfoDlg({ layerId: 'SljcLayer', properties: record })
}else if (record.cd_nm == '0EA5DE') {
dispatch?.runtime.setInfoDlg({ layerId: 'ByjcLayer', properties: record })
}else if (record.stnm == '浮桥河水库') {
dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record })
}
// dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
}
}

View File

@ -46,8 +46,8 @@ const ShapeStyle = {
const page1 = [
{
"res_cd": "42118140035",
"res_lon": 114.875,
"res_lat": 31.166667,
"res_lon": 114.88089,
"res_lat": 31.171467,
"cd": "01",
"cd_nm": "GN1",
"stnm": "GN1",

View File

@ -72,36 +72,44 @@ export default class ByjcLayer extends BaseLayer {
let data =
// await PicStPromise.get();
[
{
"res_cd": "42118140004",
"res_nm": "永丰水库",
{
"cd": "1",
"cd_nm": "UPD1",
"ch": "0+060",
"res_reg_cd": "42118140011-A4",
"res_cd": "42118140038",
"res_nm": "浮桥河水库",
"res_lon": 114.88299,
"res_lat": 31.172700,
"stnm": "UPD1",
"province_cd": "420000000000",
"province_nm": "湖北省",
stnm:'0FA5DE',
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181003000",
"town_nm": "南湖办事处",
"rv_name": "举水",
"town_cd": "421181113000",
"town_nm": "乘马岗镇",
"bas_guid": "鄂东五河片区",
"res_lon": 115.05541,
"res_lat": 31.11106,
"res_reg_cd": "42118140042-A4",
"eng_scal": "小1型",
"eng_g": "IV",
"children": [
{
"res_cd": "42118140004",
"res_nm": "永丰水库",
"cd": 5821,
"cd_nm": "永丰水库",
"termite_status": "n",
"tm": "2025-05-21 09:18:28",
"is_main_cd": "y"
}
]
"danger_stat": "非病险水库",
"label": "2023高标准",
"value": 164.8742,
"diff_value": -0.0275,
"trend": -1,
"is_has_data": "y",
"diff_rz": -0.6958,
"stcd": "4239",
"diff_rz_cd": 5.0554,
"max_cd_value": -0.0225,
"rz": 165.57,
"dt": "2025-05-20",
"diff5_value": -0.0737,
"trend5": -1,
"diff10_value": -0.1204,
"trend10": -1,
"diff30_value": -0.0633,
"trend30": -1
},
{
"res_cd": "42118140015",

View File

@ -71,16 +71,17 @@ export default class SljcLayer extends BaseLayer {
let data =
// await PicStPromise.get();
[{
[
{
"cd": "1",
"cd_nm": "WE",
"ch": "1",
'stnm':'WE',
"res_reg_cd": "42118140042-A4",
"res_cd": "42118140004",
"res_nm": "永丰水库",
"res_lon": 115.05541,
"res_lat": 31.11106,
"res_nm": "浮桥河水库",
"res_lon": 114.88429,
"res_lat": 31.172700,
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",

View File

@ -78,9 +78,9 @@ export default class SyjcLayer extends BaseLayer {
"ch": "0+060",
"res_reg_cd": "42118140011-A4",
"res_cd": "42118140038",
"res_lon": 115.01664,
"res_lat": 31.40681,
"res_nm": "蛤蟆岗水库",
"res_nm": "浮桥河水库",
"res_lon": 114.87929,
"res_lat": 31.171467,
"stnm": "UPD1",
"province_cd": "420000000000",
"province_nm": "湖北省",

View File

@ -16,8 +16,8 @@ import { renderDrp } from '../../../../utils/renutils';
const data1 = [
{
"res_cd": "42118140035",
"res_lon": 114.875,
"res_lat": 31.166667,
"res_lon": 114.88089,
"res_lat": 31.171467,
"cd": "01",
"cd_nm": "GN1",
"stnm": "GN1",
@ -613,7 +613,7 @@ function DrpReal({ style }) {
if (lgtd && lttd) {
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
zoom: 17,
pitch: 60,
bearing: 0
});

File diff suppressed because it is too large Load Diff

View File

@ -24,6 +24,7 @@ const DRP_COLORS = [
'rgb(136, 11, 29)',
]
const data1 = [
{
"stcd": "61612150",
@ -887,14 +888,16 @@ function DrpReal({ style }) {
}
}
},[skObj])
const [showDrp, setShowdDrp] = useState(0)
const [showHd, setShowdHd] = useState(0)
useEffect(()=>{
const map = window.__mapref;
if(map){
if(tab==='1'&&drpData){
if(tab==='1'&&drpData && showDrp){
setLayer(drpData,'drp')
}
if(tab==='2'&&hdData){
if(tab==='2'&&hdData && showHd){
setLayer(hdData,'hd')
}
if(tab==='3'&&data3){
@ -916,7 +919,7 @@ function DrpReal({ style }) {
}, 500);
}
},[drpData,hdData,skObj,tab])
},[drpData,hdData,skObj,tab,showDrp,showHd])
@ -940,7 +943,8 @@ function DrpReal({ style }) {
}
});
}
setDrpData(data)
const newData = [data[1],data[0]]
setDrpData(newData)
}
const getHd = async(skObj)=>{
@ -963,7 +967,8 @@ function DrpReal({ style }) {
}
});
}
setHdData(data)
const newData = [data[1],data[0]]
setHdData(newData)
}
const setLayer = (data=[],type)=>{
@ -1208,21 +1213,32 @@ function DrpReal({ style }) {
map.getSource('关联站点').setData(parseGeoJSON(data))
}
// useEffect(() => {
// setLayer(skdata,"sk")
// }, [])
useEffect(() => {
setShowdHd(0)
setShowdDrp(0)
}, [tab])
return (
<PanelBox
style={style}
title="关联站点"
title="水雨情监测"
color="green"
tabs={
<span className="button-group">
<span className={clsx({ active: tab==='1' })} onClick={() => {
setTab('1')
}}>雨量站</span>
<span className={clsx({ active: tab==='2' })} onClick={() => {
setTab('2')
}}>水位站</span>
<span className={clsx({ active: tab==='3' })} onClick={() => {
{/* <span className={clsx({ active: tab==='3' })} onClick={() => {
setTab('3')
}}>流量站</span>
<span className={clsx({ active: tab==='4' })} onClick={() => {
@ -1230,7 +1246,7 @@ function DrpReal({ style }) {
}}>图像站</span>
<span className={clsx({ active: tab==='5' })} onClick={() => {
setTab('5')
}}>视频站</span>
}}>视频站</span> */}
</span>
}
>
@ -1254,14 +1270,17 @@ function DrpReal({ style }) {
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {
const { lgtd, lttd } = row;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: row, coordinates: [row.lgtd, row.lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: 60,
bearing: 0
});
if (row.stnm == '浮桥河') {
setShowdDrp(1)
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: row, coordinates: [row.lgtd, row.lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: 60,
bearing: 0
});
}
}
}}>{row.stnm}</div>
</DpTableCell>
@ -1289,14 +1308,17 @@ function DrpReal({ style }) {
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {
const { lgtd, lttd } = row;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: row, coordinates: [row.lgtd, row.lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: 60,
bearing: 0
});
if (row.stnm == '浮桥河') {
setShowdHd(1)
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: row, coordinates: [row.lgtd, row.lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: 60,
bearing: 0
});
}
}
}}>{row.stnm}</div>
</DpTableCell>

View File

@ -202,7 +202,7 @@ function DrpReal({ style }) {
return (
<PanelBox
style={style}
title="水量统计"
title="水资源利用"
color="green"
extra={
<>
@ -214,20 +214,20 @@ function DrpReal({ style }) {
// dispatch.map.setLayerVisible({'ByjcLayer':false});
setTab('生态')
}}>生态</span>
<span className={clsx({ active: tab==='灌溉' })} onClick={() => {
<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={() => {
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> */}
<span className={clsx({ active: tab==='泄洪' })} onClick={() => {
// dispatch.map.setLayerVisible({'BxjcLayer':false});
// dispatch.map.setLayerVisible({'SyjcLayer':false});

View File

@ -12,34 +12,35 @@ import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
const data3 = [{
"cd": "1",
"cd_nm": "WE",
"ch": "1",
"res_reg_cd": "42118140042-A4",
"res_cd": "42118140004",
"res_nm": "永丰水库",
"res_lon": 115.05541,
"res_lat": 31.11106,
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181003000",
"town_nm": "南湖办事处",
"danger_stat": "非病险水库",
"bas_guid": "鄂东五河片区",
"label": "2023高标准",
"eng_scal": "小1型",
"value": 0.3,
"diff_value": -0.02,
"trend": -1,
"dt": "2025-05-20",
"is_has_data": "y",
"max_value": 0.3
}]
const data3 =[{
"cd": "1",
"cd_nm": "WE",
"ch": "1",
'stnm':'WE',
"res_reg_cd": "42118140042-A4",
"res_cd": "42118140004",
"res_nm": "浮桥河水库",
"res_lon": 114.88429,
"res_lat": 31.172700,
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
"city_nm": "黄冈市",
"county_cd": "421181000000",
"county_nm": "麻城市",
"town_cd": "421181003000",
"town_nm": "南湖办事处",
"danger_stat": "非病险水库",
"bas_guid": "鄂东五河片区",
"label": "2023高标准",
"eng_scal": "小1型",
"value": 0.3,
"diff_value": -0.02,
"trend": -1,
"dt": "2025-05-20",
"is_has_data": "y",
"max_value": 0.3
}]
function DrpReal({ style }) {
@ -73,7 +74,7 @@ function DrpReal({ style }) {
if (lgtd && lttd) {
dispatch.runtime.setCameraTarget({
center: [lgtd- 0.0029, lttd],
zoom: 15,
zoom: 17,
pitch: 60,
bearing: 0
});

View File

@ -19,9 +19,9 @@ const data2 = [
"ch": "0+060",
"res_reg_cd": "42118140011-A4",
"res_cd": "42118140038",
"res_lon": 115.01664,
"res_lat": 31.40681,
"res_nm": "蛤蟆岗水库",
"res_lon": 114.87929,
"res_lat": 31.171467,
"res_nm": "浮桥河水库",
"province_cd": "420000000000",
"province_nm": "湖北省",
"city_cd": "421100000000",
@ -730,14 +730,16 @@ function DrpReal({ style }) {
<DpTableRow key={row.stcd}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {
const { res_lon:lgtd, res_lat:lttd } = row;
if (lgtd && lttd) {
dispatch.runtime.setCameraTarget({
center: [lgtd + 0.0019, lttd],
zoom: 15,
pitch: 60,
bearing: 0
});
const { res_lon: lgtd, res_lat: lttd,res_nm:stnm } = row;
if (stnm == '浮桥河水库') {
if (lgtd && lttd) {
dispatch.runtime.setCameraTarget({
center: [lgtd+ 0.0019, lttd],
zoom: 17,
pitch: 60,
bearing: 0
});
}
}
}}>{row.res_nm}</div>
</DpTableCell>

View File

@ -0,0 +1,67 @@
import React, { useState, useEffect } from 'react';
import './index.less';
const WaterLevelAlert = () => {
const [position, setPosition] = useState(0);
const alerts = [
{
reservoir: '浮桥河水库',
time: '06月08日02时',
level: '65.01',
overLimit: '0.12',
},
{
reservoir: '浮桥河水库',
time: '06月08日02时',
level: '93.4',
overLimit: '0.40',
}
];
useEffect(() => {
const height = 24; // 每个项目的高度
const totalHeight = height * alerts.length;
let currentPosition = 0;
const animate = () => {
currentPosition += height;
if (currentPosition >= totalHeight) {
currentPosition = 0;
}
setPosition(currentPosition);
};
const timer = setInterval(animate, 3000);
return () => clearInterval(timer);
}, []);
// 复制一份数据用于无缝滚动
const displayAlerts = [...alerts, ...alerts];
return (
<div className="water-level-alert">
<div className="alert-container">
<div
className="alert-wrapper"
style={{
transform: `translateY(-${position}px)`,
transition: position === 0 ? 'none' : 'transform 0.5s ease-in-out'
}}
>
{displayAlerts.map((alert, index) => (
<div key={index} className="alert-item">
<span className="alert-text">
预计{alert.reservoir} {alert.time}水位将上涨至
{alert.level} m (超汛限水位{alert.overLimit}m)
请做好防范
</span>
</div>
))}
</div>
</div>
</div>
);
};
export default WaterLevelAlert;

View File

@ -0,0 +1,32 @@
.water-level-alert {
background: rgba(0, 32, 51, 0.9);
padding: 10px 20px;
border-radius: 4px;
border: 1px solid #0088cc;
.alert-container {
height: 24px;
overflow: hidden;
}
.alert-wrapper {
will-change: transform;
}
.alert-item {
height: 24px;
display: flex;
align-items: center;
}
.alert-text {
color: #ffffff;
font-size: 14px;
white-space: nowrap;
&::before {
content: '⚠️';
margin-right: 8px;
}
}
}

View File

@ -19,6 +19,7 @@ import { RadioGroup, Radio, Switch, FormControlLabel, InputLabel, Select, MenuIt
import { backgroundColor } from 'echarts/lib/theme/dark';
import { Description } from '@material-ui/icons';
import DescriptionItem from '../../components/DescrptionItem';
import WaterLevelAlert from './WaterLevelAlert'
export default function Warn({ style }) {
const dispatch = useDispatch();
const res = useSelector(s => s.runtime.yyObj)
@ -168,6 +169,10 @@ export default function Warn({ style }) {
<img src={`${process.env.PUBLIC_URL}/assets/sl.jpg`} alt="" style={{ width: 421}} />
</div> */}
</div>}
<div style={{ color: "#fff", position: 'absolute', top: 90, right: 600 }}>
<WaterLevelAlert />
</div>
</div>
</PanelBox>
)