import React, { useEffect, useMemo, useState } from 'react'; import useRequest from '../../../../utils/useRequest'; import { useDispatch, useSelector } from 'react-redux'; import PanelBox from '../../components/PanelBox'; import { parseGeoJSON } from "../../../../utils/tools"; import { DrpRealPromise, HDRealPromise } from "../../../../models/_/real"; 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 clsx from 'clsx'; import { renderDrp } from '../../../../utils/renutils'; const DRP_COLORS = [ '#ffffff', 'rgb(122, 232, 122)', 'rgb(227, 255, 83)', 'rgb(255, 140, 83)', 'rgb(255, 0, 0)', 'rgb(232, 122, 219)', 'rgb(136, 11, 29)', ] const data1 = [ { "stcd": "61612150", "stnm": "鹰山畈(黄土岗)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.073611, "lttd": 31.386667, "elev": null, "hasRz": true, "type": "sh", "today": 0, "h1": 1, "h3": 1.2, "h6": 1.5, "h12": 1.6, "h24": 1.8, "h48": 12.9, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61612910", "stnm": "桃林河(阎河)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.087777777, "lttd": 31.164444444, "elev": null, "hasRz": true, "type": "sh", "today": 0, "h1": 7, "h3": 8.4, "h6": 10.5, "h12": 11.200000000000001, "h24": 12.6, "h48": 32.8, "tm": "2025-06-03T02:10:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61613700", "stnm": "四角门(宋铁二桥)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 114.8291, "lttd": 31.0754, "elev": null, "hasRz": true, "type": "sh", "today": 0, "h1": 1, "h3": 1.2, "h6": 1.5, "h12": 1.6, "h24": 1.8, "h48": 23.4, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61614460", "stnm": "项生(宋埠)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 114.798056, "lttd": 31.058611, "elev": null, "hasRz": true, "type": "sh", "today": 0, "h1": 6, "h3": 7.199999999999999, "h6": 9, "h12": 9.600000000000001, "h24": 10.8, "h48": 11.899999999999999, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61615110", "stnm": "杨梅河(木子店)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.339667, "lttd": 31.1595, "elev": null, "hasRz": true, "type": "sh", "today": 0, "h1": 7, "h3": 8.4, "h6": 10.5, "h12": 11.200000000000001, "h24": 12.6, "h48": 31.299999999999997, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61640390", "stnm": "两路口(福田河)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.158167, "lttd": 31.56833, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 7, "h3": 8.4, "h6": 10.5, "h12": 11.200000000000001, "h24": 12.6, "h48": 24.799999999999997, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61640700", "stnm": "新屋河(黄土岗)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.045277777, "lttd": 31.404444444, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 7, "h3": 8.9, "h6": 11, "h12": 11.700000000000001, "h24": 13.6, "h48": 21.299999999999997, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61640850", "stnm": "喻家垸(黄土岗)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.033889, "lttd": 31.42, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 9, "h3": 10.799999999999999, "h6": 13.5, "h12": 14.4, "h24": 16.2, "h48": 33.099999999999994, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61640900", "stnm": "得胜寨(乘马岗)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 114.936944444, "lttd": 31.410833333, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 4, "h3": 4.8, "h6": 6, "h12": 6.4, "h24": 7.2, "h48": 23.1, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61640960", "stnm": "桐枧冲(黄土岗)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.124444444, "lttd": 31.395, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 4, "h3": 4.8, "h6": 6, "h12": 6.4, "h24": 7.2, "h48": 24.1, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61640970", "stnm": "闵家畈(黄土岗)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.1033, "lttd": 31.2843, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 3, "h3": 3.5999999999999996, "h6": 4.5, "h12": 4.800000000000001, "h24": 5.4, "h48": 19.7, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61640980", "stnm": "飞龙山(乘马岗)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 114.9492, "lttd": 31.304, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 2, "h3": 2.4, "h6": 3, "h12": 3.2, "h24": 3.6, "h48": 19.8, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61641500", "stnm": "黄金桥(开发区)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 114.9749, "lttd": 31.165, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 9, "h3": 10.799999999999999, "h6": 13.5, "h12": 14.4, "h24": 16.2, "h48": 34.099999999999994, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61641610", "stnm": "张广河(三河口)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.314167, "lttd": 31.349667, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 7, "h3": 8.4, "h6": 10.5, "h12": 11.200000000000001, "h24": 12.6, "h48": 24.799999999999997, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, { "stcd": "61641700", "stnm": "前畈(三河口)", "adcd": "421181000000000", "wscd": null, "importancy": 0, "lgtd": 115.2267, "lttd": 31.3925, "elev": null, "hasRz": false, "type": "sh", "today": 0, "h1": 7, "h3": 8.4, "h6": 10.5, "h12": 11.200000000000001, "h24": 12.6, "h48": 22.799999999999997, "tm": "2025-06-03T02:00:00.000Z", "state": 1, "warning": 0 }, ] const data2 = [ { "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 }, { "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": "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": "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": "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": "61612200", "stnm": "麻城", "adcd": null, "wscd": null, "importancy": 0, "lgtd": 115.042444, "lttd": 31.187389, "elev": null, "hasRz": true, "type": "sw", "tm": "2025-06-03T02:00:00.000Z", "rz": 52.72, "state": 1 }, { "stcd": "61612210", "stnm": "麻城临时断面", "adcd": null, "wscd": null, "importancy": 0, "lgtd": 115.042444, "lttd": 31.187389, "elev": null, "hasRz": true, "type": "sw", "tm": "2025-06-03T02:00:00.000Z", "rz": 51.415, "state": 1 }, { "stcd": "61612500", "stnm": "王福店", "adcd": null, "wscd": null, "importancy": 0, "lgtd": 114.986666, "lttd": 31.352944, "elev": null, "hasRz": true, "type": "sw", "tm": "2025-06-03T02:00:00.000Z", "rz": 73.37, "state": 1 }, { "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 }, { "stcd": "61615300", "stnm": "木子店", "adcd": null, "wscd": null, "importancy": 1, "lgtd": 115.3625, "lttd": 31.190278, "elev": null, "hasRz": true, "type": "sw", "tm": "2025-06-03T02:00:00.000Z", "rz": 133.97, "state": 1 }, { "stcd": "61644000", "stnm": "浮桥河", "adcd": null, "wscd": null, "importancy": 0, "lgtd": 114.883583, "lttd": 31.180444, "elev": null, "hasRz": true, "type": "sw", "tm": "2025-06-03T02:00:00.000Z", "rz": 43.6, "state": 1 } ] const data3 = [ { type: '工业', time: '2025-05-26 10:00', stcd: 42000002, stnm: '汉通闸流量站', water: 30, flow: 0.222, "lttd": 30.973775 + 0.2002, "lgtd": 112.17597 + 2.9619, }, { water: 12, type: '工业', stcd: 42000001, time: '2025-05-26 10:00', stnm: '福耀玻璃', flow: 0.355, "lttd": 30.93926 + 0.2002, "lgtd": 112.191703 + 2.9619, }, { water: 21, type: '工业', time: '2025-05-26 10:00', stnm: '格林美', flow: 0.09, "lttd": 30.953887 + 0.2002, "lgtd": 112.190551 + 2.9619, stcd: 42000005 } ] const data4 = [ { "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 } ] const data5 = [ { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181105000", "town_nm": "阎家河镇", "res_cd": "42118140028", "res_nm": "红心水库", "lgtd": 115.18962, "lttd": 31.23425, "video_guid": "00032e3e6d984f0eb32c807e5769ec3a", "video_name": "红心水库坝脚球机", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181001000", "town_nm": "龙池办事处", "res_cd": "42118150152", "res_nm": "戴家冲水库", "lgtd": 115.0241, "lttd": 31.23237, "video_guid": "0037a5cb2caf44e49c012e3fdfa01238", "video_name": "戴家冲水库_坝顶_枪机_龙池", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181101000", "town_nm": "宋埠镇", "res_cd": "42118140008", "res_nm": "管山水库", "lgtd": 114.78397, "lttd": 31.19451, "video_guid": "0243e9726e244b728618741f248e0577", "video_name": "管山水库坝脚球机", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181100000", "town_nm": "中馆驿镇", "res_cd": "42118140005", "res_nm": "响鼓墩水库", "lgtd": 114.91971, "lttd": 31.17985, "video_guid": "024eaf5578464d9192559ad2288ba764", "video_name": "响鼓墩水库", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181112000", "town_nm": "福田河镇", "res_cd": "42118150147", "res_nm": "张家河水库", "lgtd": 115.17869, "lttd": 31.48587, "video_guid": "02d77364354a4f8982ad3d949e0d32ab", "video_name": "张家河水库_坝脚_球机", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181114000", "town_nm": "顺河镇", "res_cd": "42118150048", "res_nm": "孙家榜水库", "lgtd": 114.91758, "lttd": 31.26933, "video_guid": "03059577c270432bb7338e7f714b9a01", "video_name": "孙家塝水库", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181110000", "town_nm": "三河口镇", "res_cd": "42118150145", "res_nm": "袁家冲水库", "lgtd": 115.28076, "lttd": 31.28639, "video_guid": "031ac395df964414a17f9dc996e13d57", "video_name": "袁家冲水库视频站", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181003000", "town_nm": "南湖办事处", "res_cd": "42118140003", "res_nm": "毛家冲水库", "lgtd": 114.98531, "lttd": 31.20469, "video_guid": "036b290ac8e547a79f5835754e02772c", "video_name": "毛家冲水库溢洪道", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181102000", "town_nm": "歧亭镇", "res_cd": "42118150224", "res_nm": "兴隆寺水库", "lgtd": 114.69534, "lttd": 31.01031, "video_guid": "0385335df9c64c1f8972cf3ed17b4854", "video_name": "兴隆寺水库_坝脚_球机", "online": "1", "sys_resource": 2 }, { "city_cd": "421100000000", "city_nm": "黄冈市", "county_cd": "421181000000", "county_nm": "麻城市", "town_cd": "421181100000", "town_nm": "中馆驿镇", "res_cd": "42118150094", "res_nm": "西冲水库", "lgtd": 114.94118, "lttd": 31.06765, "video_guid": "046336873b8a4eefbc321bd2e6e4359c", "video_name": "西冲水库", "online": "1", "sys_resource": 2 }, ] function DrpReal({ style }) { const [tab, setTab] = useState('1') const [drpData, setDrpData] = useState([]) const [hdData, setHdData] = useState([]) const dispatch = useDispatch(); const skObj = useSelector(s => s.runtime.skObj); useEffect(() => { getDrp(skObj) getHd(skObj) return () => { const map = window.__mapref; const layer = map.getLayer('关联站点') if (layer) { map.removeLayer('关联站点'); map.removeSource('关联站点'); } } }, [skObj]) const [showDrp, setShowdDrp] = useState(0) const [showHd, setShowdHd] = useState(0) useEffect(() => { const map = window.__mapref; if (map) { if (tab === '1' && drpData && showDrp) { setLayer(drpData, 'drp') } if (tab === '2' && hdData && showHd) { setLayer(hdData, 'hd') } if (tab === '3' && data3) { setLayer(data3, 'll') } if (tab === '4' && data4) { setLayer(data4, 'tx') } if (tab === '5' && data5) { setLayer(data5, 'sk') } } else { const dsq = setInterval(() => { const map = window.__mapref; if (map && drpData.length > 0) { clearInterval(dsq) setLayer(drpData, 'drp') } }, 500); } }, [drpData, hdData, skObj, tab, showDrp, showHd]) const getDrp = async (skObj) => { const { lgtd, lttd } = skObj const step = 0.05 let data = await DrpRealPromise.get(); if (Array.isArray(data)) { data = data.filter(o => { if (o.type !== 'sk') { if ( lgtd - step < o.lgtd && o.lgtd < lgtd + step && lttd - step < o.lttd && o.lttd < lttd + step ) { return true } else { return false } } else { return false } }); } const newData = [data[1], data[0]] setDrpData(newData) } const getHd = async (skObj) => { const { lgtd, lttd } = skObj const step = 0.1 let data = await HDRealPromise.get(); if (Array.isArray(data)) { data = data.filter(o => { if (o.type !== 'sk') { if ( lgtd - step < o.lgtd && o.lgtd < lgtd + step && lttd - step < o.lttd && o.lttd < lttd + step ) { return true } else { return false } } else { return false } }); } const newData = [data[1], data[0]] setHdData(newData) } const setLayer = (data = [], type) => { const map = window.__mapref; const layer = map.getLayer('关联站点') if (layer) { map.removeLayer('关联站点'); map.removeSource('关联站点'); } if (data.length === 0) { return } if (type === 'drp') { map.addLayer({ 'id': '关联站点',//+new Date().getTime(), 'type': 'circle', 'source': { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [], }, }, 'paint': { 'circle-color': [ 'case', ['==', ['get', 'state'], 1], [ 'interpolate-hcl', ['linear'], ['get', 'h1'], 0, DRP_COLORS[0], 10, DRP_COLORS[1], 25, DRP_COLORS[2], 50, DRP_COLORS[3], 100, DRP_COLORS[4], 250, DRP_COLORS[5], 500, DRP_COLORS[6], ], '#aaa' ], 'circle-opacity': [ 'case', ['==', ['get', 'state'], 1], 1, 0.6 ], 'circle-stroke-width': [ 'step', ['zoom'], 0, 12, 2, 14, 3 ], 'circle-stroke-color': [ 'match', ['get', 'type'], 'sh', '#91eda1', 'sw', '#f8ec82', 'qx', '#e091ed', '#fff' ], 'circle-radius': [ 'interpolate', ['linear'], ['zoom'], 10, 6, 14, 10, ] }, 'visibility': 'visible', }); } if (type === 'hd') { map.addLayer({ 'id': '关联站点',//+new Date().getTime(), 'type': 'symbol', 'source': { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [], }, }, 'layout': { 'icon-allow-overlap': true, 'text-allow-overlap': true, 'icon-image': '水位站', 'icon-size': [ 'interpolate', ['linear'], ['zoom'], 10, 0.5, 14, 1, ], 'text-size': [ 'interpolate', ['linear'], ['zoom'], 10, 10, 14, 16, ], }, 'paint': { 'text-color': [ 'case', ['!=', ['get', 'state'], 1], '#888', ['==', ['get', 'warning'], 3], '#f00', ['==', ['get', 'warning'], 2], 'yellow', ['==', ['get', 'warning'], 1], 'yellow', '#0f0' ], 'text-halo-color': '#062040', 'text-halo-width': 1 }, 'visibility': 'visible', }); } if (type === 'll') { 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', }); } if (type === 'tx') { 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', }); } if (type === 'sk') { 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(data)) } // useEffect(() => { // setLayer(skdata,"sk") // }, []) useEffect(() => { setShowdHd(0) setShowdDrp(0) }, [tab]) return ( { setTab('1') }}>雨量站 { setTab('2') }}>水位站 {/* { setTab('3') }}>流量站 { setTab('4') }}>图像站 { setTab('5') }}>视频站 */} } > { tab === '1' ? {/* 序号 */} 站点名称 1h时段雨量(mm) 时间 {drpData.map((row, index) => ( { const { lgtd, lttd } = row; 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 }); } } }} > {/* {index+1} */}
{row.stnm}
 {(row.h1).toFixed(2)} {row.tm.slice(0, 10)} ))}
: null } { tab === '2' ? 名称 水位 保证水位 警戒水位 {hdData.map((row, index) => (
{ const { lgtd, lttd } = row; 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}
 {row.rz} {row.rz + 5.5} {row.rz + 4} ))}
: null } { tab === '3' ? {/* 序号 */} 站点名称 类型 时间 流量(m³/s) {data3.map((row, index) => ( {/* {index+1} */}
{ const { lgtd, lttd } = row; if (lgtd && lttd) { dispatch.runtime.setFeaturePop({ type: '流量水表站', properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd], zoom: 15, pitch: 60, bearing: 0 }); } }}>{row.stnm}
 {row.type} {row.time} {row.flow} ))}
: null } { tab === '4' ? 序号 名称 状态 {data4.map((row, index) => ( {index + 1}
{ const { lgtd, lttd } = row; if (lgtd && lttd) { dispatch.runtime.setFeaturePop({ type: 'PicStPop', properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd], zoom: 15, pitch: 60, bearing: 0 }); } }}>{row.stnm}
 {
在线} ))}
: null } { tab === '5' ? 序号 水库名称 行政区 状态 {data5.map((row, index) => ( {index + 1}
{ const { lgtd, lttd } = row; if (lgtd && lttd) { dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd], zoom: 15, pitch: 60, bearing: 0 }); } }}>{row.res_nm}
 {row.town_nm} {row.online === '1' ?
在线 :
离线 } ))}
: null } ) } export default DrpReal;