From 475f551507c11e8e5cc60f484dafc8e707570d9d Mon Sep 17 00:00:00 2001 From: qzc Date: Wed, 11 Jun 2025 11:08:10 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B0=B4=E5=BA=93=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/icon/中型水库.svg | 1 + public/assets/icon/大型水库.svg | 6 + public/assets/icon/展开.png | Bin 0 -> 2052 bytes public/assets/icon/收起.png | Bin 0 -> 2386 bytes public/data3/skReal.json | 1182 ++++++++++++----- src/models/_/real.js | 3 + src/models/map/index.js | 11 +- src/models/map/layout.js | 15 +- src/views/Home/MapCtrl/index.js | 8 +- src/views/Home/PanelIndex.js | 3 + src/views/Home/components/ActionDock/index.js | 21 +- src/views/Home/components/Title/index.js | 30 + src/views/Home/panels/Cxsk/ARzSk.js | 209 +++ src/views/Home/panels/Cxsk/index.js | 17 + src/views/Home/panels/Skzl/collapsePage.js | 18 + src/views/Home/panels/Skzl/countPage.js | 32 + src/views/Home/panels/Skzl/index.js | 169 ++- 17 files changed, 1354 insertions(+), 371 deletions(-) create mode 100644 public/assets/icon/中型水库.svg create mode 100644 public/assets/icon/大型水库.svg create mode 100644 public/assets/icon/展开.png create mode 100644 public/assets/icon/收起.png create mode 100644 src/views/Home/panels/Cxsk/ARzSk.js create mode 100644 src/views/Home/panels/Cxsk/index.js create mode 100644 src/views/Home/panels/Skzl/collapsePage.js create mode 100644 src/views/Home/panels/Skzl/countPage.js diff --git a/public/assets/icon/中型水库.svg b/public/assets/icon/中型水库.svg new file mode 100644 index 0000000..4acf8c0 --- /dev/null +++ b/public/assets/icon/中型水库.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icon/大型水库.svg b/public/assets/icon/大型水库.svg new file mode 100644 index 0000000..d6fbfd3 --- /dev/null +++ b/public/assets/icon/大型水库.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/assets/icon/展开.png b/public/assets/icon/展开.png new file mode 100644 index 0000000000000000000000000000000000000000..9f96b2e442c385cbff684b8a32c92c4ded0e66c1 GIT binary patch literal 2052 zcmeHI`#V&57(eICG0lwI7;OZoCHrh4GVLf?rJ+dc(w_Yv_P5<1zTeODyzl$@yzl$@BzFAsXjJmA4z0OJ0+<@i^9E{q*b@M-qM7gO6>=cr%}AnT)duE~=Y#TB z=98rlTz6;chI5z+^4eKDVkR)3t(Is2U*1UK&aXs6yGpI z)m9{!qX08q4Bvw1&3wC#@9<**cyUEzRT+TY8s>h9f?@-^bMar(f&Y{Lo(ZxbC|8U$b0Ejzl&8LD)FFeAa@6pO!HZ5jUF(m8AV#ykBXtkX|%@ zl*{g*un|RF`~+u7FnT}7Qb%J3T7mahU;HEsoO3kb8xvGEGCkV3R=;_$-U+qDHYSVF zZpL3aLk&rm_%=!$dv5!XrIEV2SmBTMH6~pVy*40vqP$$91&pk!hNLS*2i6+p6&(A6 z_4R|o(HN9Pl*)5aVJahYXJ0cPmmY?-HA|rH%u*gGvnKufHP8d0gl|G$Te)-WsFZjQ zeRP+oTJBv)3y)MgWG+^~)aMN&F9UilF1>+-3-6zn_h~39s_kZeUBmq*MMMGl#g5@= zTW#1bOu}L4Vt319?RGl^8O#i`+1snv9)}=joBY1dzF;q5lF_tyoA53Zo-vcyGE~*w z+-AnJWfBRu@8(@E1$kU1q4n(ARu2zNi6w^BDhzd{{v5VkERN|*U;SwyftwG3{Fy`@ zb5Co@a|~lO?c;l{v6t9k7-?``TThX|lu5veVYMd|62WIo0)0AFs+tlDHZqCx!&0T`v=nt9GS!ctE>5PQyShxgtSKK z!l*fZ?GGG;(fHz!wqjD`F>+O6y^={h^n)aCGXip!?hRkd{bz7~#c9r`M(rPVMvU{)dCUPGiNb=-kA}MalN^a^+T!kPR zd*_z)m9bs%_6QPZZ^lk^y_~syK)5b~;}J+_JFYsp=oi(s(rZSvSs6Qcertrm?L8~e zmSBk2)s`?LVO`fS-0&>#f{b9ZpLMg zYW3ch4^D0BxMRNygCwG`zU8-F;Na3eEAG(gmKTZ=ES=o1?9|&sRSv`mA^tIGI;?z+ zc8n3Kj1B*=Jl;uBNMQC-z-TIjc=mVB@2!_Ts{3=O4ruIh)Mq8fYK|UaAUS9mNar4W zvM0wJ(XCDOhjg+APn7~0CFiVJ$+q^{Q(9QW*!U5cJ#HAjNt@W9a7DlZ>9g@(u+ma~ ziX1YiPsRiKji(r7SBL#d0Wd)maahS|24ASRi_`Mm=!$w3*Tan$pRw5WLfDwK-t#ye zsC52mp`Bx?$2pV%v%M<-J?}ea{Ct=l-3#dD1(4lrHc~qZ)hq;TS7d`i7fgUEX|D_s z(9+ZjPFu^$aW@4CKx&U>I$pXn_ZVgb2 zq>%<0&ccM>JrNnYF9B+u7OAK*bXXTNG*Ux!u9g%$=0(>f#PUib@fm}Zf-z-Iw`vCi z%alg4i literal 0 HcmV?d00001 diff --git a/public/assets/icon/收起.png b/public/assets/icon/收起.png new file mode 100644 index 0000000000000000000000000000000000000000..02dc3bc4ffdf13b4d1109f0dede50c7062986058 GIT binary patch literal 2386 zcmd^>`#+P78^>?k9kbAQY!R(HrgEs4bDIv_TG>dAQqJd+%3*WJa@rkO-3Jq|gO zQcev|SxiYi4n>6pfMcUzN&|G`IH z-|ALfeQM{rEXbA(zD?e0Pe!iaWvZPl`pyEtZORGfR6!`x8GxtNQ2dQ4&;un9lZsDC z;Q&W5I@^yJ$WK(X^9^eRDp1;4NdPefY9Y0M9{`^gyXT|=Y=WU>=vx$&&e5sjVeGhs z^P8M?6u^7*AU6#JidXWgBvd~IvJS6yvIg&i7~L;}XUee>M_`u(P~-YR&JWJ(*#mUq91VkS;$g8pveK>W96j z3MPof`qYr#YmunH!q@Z{()sVrVIteL8g2IcRxHDH^Lump~%MQ1efp+8x}>JkMSreeuzqmkIx`Cip% zT6SA!jc|OjkpIpI5@IJ5U1_8yo~Dql%Z4KCNW%HqpdCm3kcZu0S9Ub<_>a#+Ya@3~ z5ZjT@7sPHS4TxH>ujX(-=lrA}op8NlH^{8)P+{EkVsKL{mJiuN!p)FHH;dp6{{wxR zGPbi#uK!V2$k%Bo`!`yX;9Ps&$ z+;ml}Sy>iBe9M>vW$73)!q2Ey|4Kx|<~s*$D7?TKyf0UUVH)$s$KeTDVrj9ZAhXJG z##BUdrN8ugYEc3W=M&<8?K-BsIekx*rE^z2ZXwE~%(#3mr{Pk+kC?{(^yiO<;_C&E zKinAkyll#bx?+~H1Vx>6Bw3B?>I-0GDWZ743w@FysLSBf6Y~#Spj}@DT03xQ-%Xco?dN9t;mIn zwAy~Oec??0qc`ZG-v=3v@D|$LBaK~!irGoH%TI>#TNWKpnhmF6nc01ho{FR-ius@u zFEsofx48AXo4UD^WE-lV?&h_~$&bNJ8l@w@Ozxg})%ZeGbgVizA5yF9ckU8JH~GpU zcg%fb64%1!WBrvkVxzs4sNRZ~I#$7%f7ev+xV>jmhaf*$cM~PI4yM!OXn;_VZtNM03fzV{*|FC`~kLm$+O*zi@&_0RwE> z_E}WLYKL|X`e2lZ`@7t3jbgStZivPT6fUjc9~3&cw}gpi8iz-~i?JW6XBPFxA!;Kl za4pO&_OsZ_nRun|LkPtM4+@H{B|XfVA!BEDb>62Q)vEy!RbMkaxPuxmUL{mbG`W7v z13i`sPvva7)b`SiP=OP`YNb**jLt1NYeF+Y_0Rw5GjsFxTz$PBtjqJa`5rMU!jYHicmgEj3eD^p0<^nYSDn6IT*9q97$#Dq4%i9{H}T_ESUmpC#@2X6 z7bmvvU2nn@ zm|vzd(Q$2=Jn=L7xUt5>9^SR>Ui-U{)>R>n9OP3;k_oN^=1E?}A*RH$>ZXpagI6B1 z2ik^>S~6;mu8ZBdn)Nnq@o0VKndZaFpXpe`9FTPUebM-GIk)7;Dwl`Q`86`3I^QtF z>8_o|p@TQT<}AU3tl^aU+h0-qEP*)tIJ}Ku77^UasFP|d^SLDzoAW{D*?PCc5!3)@6^t#gsgdPH=hj1Fwl7n>L`fhtN z0F(Wdb fetch(`${process.env.PUBLIC_URL}/data3/skReal.json`) .then((response) => response.json()) + // .then(data=>data.map(o=>{ + // return {...o,layer:'RealSkLayer',layerPop:'RealSkPop'} + // })) .then(data => { return data.map(o => ({ ...o, aRz: parseFloat((o.rz - o.fsltdz).toFixed(2)) })) }) diff --git a/src/models/map/index.js b/src/models/map/index.js index 3c5b52b..2181134 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -342,7 +342,7 @@ const map = { layerVisible = { RealDrpLayer: false, RealHDLayer: false, - RealSkLayer: true, + RealSkLayer: false, BxSkLayer: false, FzdxLayer: true, WataLayer: false, @@ -369,7 +369,7 @@ const map = { Object.keys(DCPJ_TYPES).forEach(key => { layerVisible['Dcpj_' + key + 'Layer'] = false; }); - } else if (id === 207) { + } else if (id === 200) { layerVisible = { RealDrpLayer: false, RealHDLayer: false, @@ -562,7 +562,12 @@ const map = { dispatch.runtime.setYyfa({}) } - if (id === 3) { + if ( + id === 3 + || id === 203 + || id === 205 + || id === 206 + ) { dispatch.map.setLayerSetting({ dom: true }); // map.setLayoutProperty('卫星图', 'visibility', 'visible'); } else { diff --git a/src/models/map/layout.js b/src/models/map/layout.js index 137eb88..8d4921d 100644 --- a/src/models/map/layout.js +++ b/src/models/map/layout.js @@ -108,11 +108,12 @@ export default function calcLayout(view, rightStack, hidePanels) { { key: '巡查任务总览', style: { height: '40rem', flexGrow: 1 } }, ]; leftFullHeight = true; - } else if (view === 207) { + } else if (view === 200) { left = [ { key: '天气' }, - { key: '水库总览', style: { height: '24rem', flexGrow: 1 } }, - { key: '水库列表', style: { height: '24rem', flexGrow: 1 } }, + { key: '水库总览', style: { height: '30rem', flexGrow: 1 } }, + { key: '超汛水库', style: { height: '16rem'} }, + // { key: '水库列表', style: { height: '16rem'} }, ]; } else if (view === 301) { left = [ @@ -320,12 +321,12 @@ export default function calcLayout(view, rightStack, hidePanels) { { key: '巡查问题看板', style: { height: '70%', flexGrow: 1 } }, { key: '水库管护', style: { height: '10rem', flexGrow: 1 } }, ]; - } else if (view === 207) { + } else if (view === 200) { right = [ { key: '警报' }, - { key: '关联站点',style: { height: '15rem', flexGrow: 1 } }, - { key: '水库水量统计',style: { height: '22rem' } }, - { key: '洪水防御',style: { height: '18rem', flexGrow: 1 } }, + // { key: '关联站点',style: { height: '15rem', flexGrow: 1 } }, + // { key: '水库水量统计',style: { height: '22rem' } }, + // { key: '洪水防御',style: { height: '18rem', flexGrow: 1 } }, ]; rightFullHeight = true; } else if (view === 301) { diff --git a/src/views/Home/MapCtrl/index.js b/src/views/Home/MapCtrl/index.js index d44fd35..adc139a 100644 --- a/src/views/Home/MapCtrl/index.js +++ b/src/views/Home/MapCtrl/index.js @@ -126,9 +126,13 @@ export default function MapCtrl({ initParams, onLoad }) { } layer.featureClicked(props, dispatch); } - if(feature.layer.id==='sk1111'||feature.layer.id==='sk2222'){ + if(feature.layer.id==='sk1111'||feature.layer.id==='sk2222'||feature.layer.id==='临时水库tz'||feature.layer.id==='临时水库'){ const record = feature.properties - dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] }); + if(feature.layer.id==='临时水库tz'){ + dispatch.map.setView(203) + sessionStorage.setItem('lastCenter',JSON.stringify([record.lgtd, record.lttd])) + } + dispatch.runtime.setFeaturePop({ type: record.layerPop, properties: record, coordinates: [record.lgtd, record.lttd] }); } if(feature.layer.id==='关联站点'){ const record = feature.properties diff --git a/src/views/Home/PanelIndex.js b/src/views/Home/PanelIndex.js index d0bae40..716733c 100644 --- a/src/views/Home/PanelIndex.js +++ b/src/views/Home/PanelIndex.js @@ -112,6 +112,7 @@ import Ddcg from './panels/Ddcg' import Fadb from './panels/Fadb' import Sksltj from './panels/Sksltj' import Hsfy from './panels/Hsfy' +import Cxsk from './panels/Cxsk' @@ -397,6 +398,8 @@ export default function PanelIndex({ name, style, ...params }) { return } else if (name === '供水负荷曲线') { return + } else if (name === '超汛水库') { + return } diff --git a/src/views/Home/components/ActionDock/index.js b/src/views/Home/components/ActionDock/index.js index 30ed2cf..5b46cc7 100644 --- a/src/views/Home/components/ActionDock/index.js +++ b/src/views/Home/components/ActionDock/index.js @@ -19,15 +19,16 @@ const VIEWS = [ { id: 7, title: '调度', img: '/assets/menu/辅助决策.png' }, ] }, - { id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[ - { id: 207, title: '水库总览', img: '/assets/menu/水库管理.png' }, - // { id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' }, - // { id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' }, - { id: 203, title: '水库监测', img: '/assets/menu/安全监测.png' }, - // { id: 204, title: '视频监视', img: '/assets/menu/视频监视.png' }, - { id: 205, title: '防汛调度', img: '/assets/menu/防汛调度.png' }, - { id: 206, title: '巡查维养', img: '/assets/menu/水库管理.png' }, - ] }, + // { id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[ + // { id: 207, title: '水库总览', img: '/assets/menu/水库管理.png' }, + // // { id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' }, + // // { id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' }, + // { id: 203, title: '水库监测', img: '/assets/menu/安全监测.png' }, + // // { id: 204, title: '视频监视', img: '/assets/menu/视频监视.png' }, + // { id: 205, title: '防汛调度', img: '/assets/menu/防汛调度.png' }, + // { id: 206, title: '巡查维养', img: '/assets/menu/水库管理.png' }, + // ] }, + { id: 200, title: '水库', img: '/assets/menu/水库专题.png'}, { id: 300, title: '水厂', img: '/assets/menu/水利设施.png', children: [ { id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' }, @@ -136,7 +137,7 @@ export default function ActionDock({ }) { } } }}> -
+
diff --git a/src/views/Home/components/Title/index.js b/src/views/Home/components/Title/index.js index d25d302..d376a04 100644 --- a/src/views/Home/components/Title/index.js +++ b/src/views/Home/components/Title/index.js @@ -155,6 +155,36 @@ export default function Title() { :null } + { + (view===203||view===205||view===206)? +
+ { + [ + {name:'返回',key:200}, + {name:'水库监测',key:203}, + {name:'防汛调度',key:205}, + {name:'巡查维养',key:206}, + ].map((item)=> + <> +
{ + dispatch.map.setView(item.key) + if(item.key===200){ + const center = JSON.parse(sessionStorage.getItem('lastCenter')) + if(center){ + dispatch.runtime.setCameraTarget({ + center: center, + zoom: 15, + pitch: 50, + bearing: 0 + }); + } + } + }}>{item.name}
+ + ) + } +
:null + } ) } diff --git a/src/views/Home/panels/Cxsk/ARzSk.js b/src/views/Home/panels/Cxsk/ARzSk.js new file mode 100644 index 0000000..4d2f7fe --- /dev/null +++ b/src/views/Home/panels/Cxsk/ARzSk.js @@ -0,0 +1,209 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import moment from 'moment'; +import { Typography, Collapse,Table, TableContainer, TableBody,TableHead, TableRow, TableSortLabel } from '@material-ui/core'; +import DpTableCell from '../../../../layouts/mui/DpTableCell'; +import DpTableRow from '../../../../layouts/mui/DpTableRow'; +import { useDispatch } from 'react-redux'; +import { InfoPopNames } from '../../InfoPops'; +import { MailOutline } from '@material-ui/icons'; +import { parseGeoJSON } from "../../../../utils/tools"; +import { skInfo } from '../../../../models/_/search'; +import config from '../../../../config'; + +function Item({ data, viewInfo, sendMessage }) { + return ( +
+
+
+
+
+
viewInfo(data)}>{data.stnm}
+
+
+{(data.rz - data.fsltdz).toFixed(2)}
+
+
+ + 水库汛限水位{data.fsltdz}m。 + + + 实时监测水位{data.rz}m，超出汛限水位{(data.rz - data.fsltdz).toFixed(2)}m + +
+
+ {moment(data.rzTm).format('YYYY-MM-DD HH:mm')} + sendMessage(data)} /> +
+
+
+ ); +} + +function ARzSk({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" + } + ], + "layer": "RealSkLayer", + "layerPop": "RealSkPop", + "aRz": 4.66, + "strarz": "4.66" +}]; + + + const dispatch = useDispatch(); + + const flyTo = (record) => { + const { lgtd, lttd } = record; + if (lgtd && lttd) { + // dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] }); + dispatch.runtime.setCameraTarget({ + center: [lgtd, lttd+0.005], + zoom: 15, + pitch: config.poiPitch, + }); + } + } + + const sendMessage = (record) => { + skInfo(record).then(data => { + if (data) { + console.log(record, data); + const txt = `${record.stnm}在${moment(record.rzTm).format('D日H时')}测得水位为${record.rz}米，超汛限水位(${record.fsltdz})${(record.rz - record.fsltdz).toFixed(2)}米，请做好核实防范工作。`; + dispatch.runtime.setInfoDlg({ layerId: 'SkSmtp', properties: { stnm: data.stnm, stcd: data.stcd, personels: data.personels, txt } }) + } + }) + } + + + const setSkLayer = (data=[])=>{ + const map = window.__mapref; + const layer = map.getLayer('临时水库') + if(layer){ + map.removeLayer('临时水库'); + map.removeSource('临时水库'); + } + if(data.length===0){return} + map.addLayer({ + 'id': '临时水库',//+new Date().getTime(), + 'type': 'symbol', + 'source': { + 'type': 'geojson', + 'data': { + 'type': 'FeatureCollection', + 'features': [], + }, + }, + 'layout': { + // 'icon-allow-overlap': true, + // 'text-allow-overlap': true, + 'icon-image': '水库-超汛限', // 从properties中动态读取icon字段 + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.8, + 14, 0.8, + ], + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 5, 10, + 14, 14, + ], + 'text-font': ['Roboto Black'], + 'text-field': [ + 'step', + ['zoom'], + '', + 8, ['get', 'stnm'] + ], + 'text-anchor': 'top', + 'text-offset': [0, 1], + }, + 'paint': { + 'text-color': '#fff' + }, + 'visibility': 'visible', + }); + map.getSource('临时水库').setData(parseGeoJSON(data)) + } + + return ( + //
+ // { + // data.map(o => ( + // + // )) + // } + //
+ + + + + 水库名称 + 类型 + 水位(m) + 监测时间 + + + { + data.map((tableRow,index)=> + + + +
{ + flyTo(tableRow) + setSkLayer([tableRow]) + }}> + {tableRow.stnm} +
+ + 小(2)型 + {tableRow.rz} + {moment(tableRow.tm).format('YYYY-MM-DD HH:mm:ss')} + + + ) + } +
+ + ) +} + +export default ARzSk; diff --git a/src/views/Home/panels/Cxsk/index.js b/src/views/Home/panels/Cxsk/index.js new file mode 100644 index 0000000..323e743 --- /dev/null +++ b/src/views/Home/panels/Cxsk/index.js @@ -0,0 +1,17 @@ +import clsx from 'clsx'; +import React from 'react'; +import PanelBox from '../../components/PanelBox'; +import ARzSk from './ARzSk'; + +export default function Warn({ style }) { + + return ( + + + + ) +} diff --git a/src/views/Home/panels/Skzl/collapsePage.js b/src/views/Home/panels/Skzl/collapsePage.js new file mode 100644 index 0000000..8e99f84 --- /dev/null +++ b/src/views/Home/panels/Skzl/collapsePage.js @@ -0,0 +1,18 @@ + +function Page({ type,name,num1,num2,skType,setSkType }) { + + return ( +
{ + setSkType(skType!==type?type:'') + }}> + +
{name}
+
{num1}座
+
{num2}亿m³
+ +
+ ) + } + + export default Page; + \ No newline at end of file diff --git a/src/views/Home/panels/Skzl/countPage.js b/src/views/Home/panels/Skzl/countPage.js new file mode 100644 index 0000000..7dac542 --- /dev/null +++ b/src/views/Home/panels/Skzl/countPage.js @@ -0,0 +1,32 @@ + +function Page({ style }) { + + return ( +
+
+
+ +
大型水库
+
3 座
+
+
+ +
中型水库
+
3 座
+
+
+ +
小(1)型水库
+
3 座
+
+
+ +
小(2)型水库
+
3 座
+
+
+
+ ) +} + +export default Page; diff --git a/src/views/Home/panels/Skzl/index.js b/src/views/Home/panels/Skzl/index.js index e251ab6..89dac20 100644 --- a/src/views/Home/panels/Skzl/index.js +++ b/src/views/Home/panels/Skzl/index.js @@ -1,13 +1,116 @@ -import React, { useMemo, useState } from 'react'; -import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index' +import React, { useEffect, useMemo, useState } from 'react'; +import { Switch, Collapse,Table, TableContainer, TableBody,TableHead, TableRow, TableSortLabel } from '@material-ui/core/index' +import DpTableCell from '../../../../layouts/mui/DpTableCell'; +import DpTableRow from '../../../../layouts/mui/DpTableRow'; import PanelBox from '../../components/PanelBox'; -import AreaDrpChart from './chart'; +import { parseGeoJSON } from "../../../../utils/tools"; +import { SkRealPromise } from "../../../../models/_/real"; +import { useDispatch, useSelector } from 'react-redux'; +import CountPage from './countPage' +import CollapsePage from './collapsePage' function DrpReal({ style }) { const [dimension, setDimension] =useState('ft'); + const [skData,setSkData] = useState([]) + const [skType,setSkType] = useState('') + const [sort,setSort] = useState(true) + const dispatch = useDispatch(); + const tableData = useMemo(()=>{ + if(skType==='1'){ + return (skData.filter(o=>o.w>10000)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w)) + } + if(skType==='2'){ + return (skData.filter(o=>o.w>100 && o.w<=10000)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w)) + } + if(skType==='3'){ + return (skData.filter(o=>o.w>0.375 && o.w<=100)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w)) + } + if(skType==='4'){ + return (skData.filter(o=>o.w>=0 && o.w<=0.375)||[]).sort((a,b)=>sort?(b.w-a.w):(a.w-b.w)) + } + return [] + },[skData,skType,sort]) + const skTypeObj = [ + {type:'1',name:'大型水库',num1:3,num2:7.9316},//8.735 + {type:'2',name:'中型水库',num1:7,num2:1.627}, + {type:'3',name:'小(1)型水库',num1:43,num2:1.627}, + {type:'4',name:'小(2)型水库',num1:207,num2:8.735}, + ] + + useEffect(()=>{ + getSkData() + },[]) + + const getSkData = async()=>{ + const data = await SkRealPromise.get(); + setSkData(data) + } + + const flyTo = (row)=>{ + 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: 50, + bearing: 0 + }); + } + } + + const setSkLayer = (data=[])=>{ + const map = window.__mapref; + const layer = map.getLayer('临时水库tz') + if(layer){ + map.removeLayer('临时水库tz'); + map.removeSource('临时水库tz'); + } + if(data.length===0){return} + map.addLayer({ + 'id': '临时水库tz',//+new Date().getTime(), + 'type': 'symbol', + 'source': { + 'type': 'geojson', + 'data': { + 'type': 'FeatureCollection', + 'features': [], + }, + }, + 'layout': { + // 'icon-allow-overlap': true, + // 'text-allow-overlap': true, + 'icon-image': '水库', // 从properties中动态读取icon字段 + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.8, + 14, 0.8, + ], + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 5, 10, + 14, 14, + ], + 'text-font': ['Roboto Black'], + 'text-field': [ + 'step', + ['zoom'], + '', + 8, ['get', 'stnm'] + ], + 'text-anchor': 'top', + 'text-offset': [0, 1], + }, + 'paint': { + 'text-color': '#fff' + }, + 'visibility': 'visible', + }); + map.getSource('临时水库tz').setData(parseGeoJSON(data)) + } return ( -
-
- -
-
-
大型水库
-
中型水库
-
小(1)型水库
-
小(2)型水库
-
-
-
麻城市共有 325 座水库，其中大型水库 3 座（浮桥河水库45490万m³、明山水库16900万m³、三河口水库16926万m³），中型水库 7 座（总库容约 1.627亿m³），小（1）型水库 44 座、小（2）型水库 271 座，全市水库总库容约 11.56 亿m³。
+ + { + skTypeObj.map((item)=> + (<> + + + + + + + 序号 + 水库名称 + 类型 + + setSort(!sort)} + active={true} + direction={sort?'desc':'asc'}> + {'库容(万m³)'} + + + + + { + tableData.map((tableRow,index)=> + + + {index+1} + +
{ + flyTo(tableRow) + setSkLayer([tableRow]) + }}> + {tableRow.stnm} +
+ + {item.name} + {tableRow.w} + + + ) + } +
+ + + ) + ) + } ) }