修改水库切换逻辑
parent
b379a58cc8
commit
475f551507
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749537394241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2581" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 511.936008a511.936008 511.936008 0 1 0 511.936008-511.936008 511.936008 511.936008 0 0 0-511.936008 511.936008z" fill="#00B4FF" p-id="2582"></path><path d="M511.936008 475.204599h426.647469c0-219.850919-191.054518-398.132633-426.647469-398.132633S85.160555 255.353681 85.160555 475.204599z" fill="#FFFFFF" p-id="2583"></path></svg>
|
||||
|
After Width: | Height: | Size: 667 B |
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -51 -179 )">
|
||||
<path d="M 20 10 C 20 4.47715250169207 15.5228474983079 0 10 0 C 4.47715250169207 0 0 4.47715250169207 0 10 C 0 15.5228474983079 4.47715250169207 20 10 20 C 15.5228474983079 20 20 15.5228474983079 20 10 Z M 1.4285 10 C 1.4285 5.26609126682536 5.26609126682536 1.4285 10 1.4285 L 10 10 L 1.4285 10 Z " fill-rule="nonzero" fill="#00b4ff" stroke="none" transform="matrix(1 0 0 1 51 179 )" />
|
||||
</g>
|
||||
</svg>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -56,6 +56,9 @@ export const SkRealPromise = new CachePromise(
|
|||
|
||||
() => 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)) }))
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 <Sbyj style={style} />
|
||||
} else if (name === '供水负荷曲线') {
|
||||
return <Gsfhqx style={style} />
|
||||
} else if (name === '超汛水库') {
|
||||
return <Cxsk style={style} />
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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({ }) {
|
|||
}
|
||||
}
|
||||
}}>
|
||||
<div className={clsx('button', { active: view === o.id })}>
|
||||
<div className={clsx('button', { active: o.id===200?(view===207||view===203||view===205||view===206||view===200):view === o.id })}>
|
||||
<img width={32} height={32} src={o.img} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -155,6 +155,36 @@ export default function Title() {
|
|||
</div>
|
||||
</div>:null
|
||||
}
|
||||
{
|
||||
(view===203||view===205||view===206)?
|
||||
<div style={{position:'absolute',left:'50%',top:'6rem',transform:'translate(-50%, 0px)',display:'flex'}}>
|
||||
{
|
||||
[
|
||||
{name:'返回',key:200},
|
||||
{name:'水库监测',key:203},
|
||||
{name:'防汛调度',key:205},
|
||||
{name:'巡查维养',key:206},
|
||||
].map((item)=>
|
||||
<>
|
||||
<div style={{padding:'1rem',color:item.key===view?'#65dbfb':'#ffffff',cursor:'pointer',margin:"0 1rem"}} onClick={()=>{
|
||||
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}</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>:null
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="item">
|
||||
<div className={`header alertsk`}>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="main">
|
||||
<div className="title cursor-pointer" onClick={() => viewInfo(data)}>{data.stnm}</div>
|
||||
<div className="span"></div>
|
||||
<div className="extra">+{(data.rz - data.fsltdz).toFixed(2)}</div>
|
||||
</div>
|
||||
<div className="desc">
|
||||
<Typography variant="body2">
|
||||
水库汛限水位<span className="bold">{data.fsltdz}</span>m。
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
实时监测水位<span className="bold">{data.rz}</span>m，超出汛限水位<span className="bold red">{(data.rz - data.fsltdz).toFixed(2)}</span>m
|
||||
</Typography>
|
||||
</div>
|
||||
<div className="tail">
|
||||
<span>{moment(data.rzTm).format('YYYY-MM-DD HH:mm')}</span>
|
||||
<MailOutline className="action" onClick={() => sendMessage(data)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
// <div className="dppanel-shyj">
|
||||
// {
|
||||
// data.map(o => (
|
||||
// <Item key={o.stcd} viewInfo={flyTo} sendMessage={sendMessage} data={o} />
|
||||
// ))
|
||||
// }
|
||||
// </div>
|
||||
<TableContainer style={{ height: '12.8rem' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '4rem' }} align="left">水库名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '5rem' }} align="center">类型</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '3rem' }} align="center">水位(m)</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '6rem' }} align="center">监测时间</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{
|
||||
data.map((tableRow,index)=>
|
||||
<TableBody>
|
||||
<DpTableRow key={tableRow.stcd}>
|
||||
<DpTableCell align="center" >
|
||||
<div className="table-ellipsis cursor-pointer" onClick={()=>{
|
||||
flyTo(tableRow)
|
||||
setSkLayer([tableRow])
|
||||
}}>
|
||||
{tableRow.stnm}
|
||||
</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center" >小(2)型</DpTableCell>
|
||||
<DpTableCell align="center" >{tableRow.rz}</DpTableCell>
|
||||
<DpTableCell align="center" >{moment(tableRow.tm).format('YYYY-MM-DD HH:mm:ss')}</DpTableCell>
|
||||
</DpTableRow>
|
||||
</TableBody>
|
||||
)
|
||||
}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default ARzSk;
|
||||
|
|
@ -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 (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="超汛水库"
|
||||
color="green"
|
||||
>
|
||||
<ARzSk />
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
function Page({ type,name,num1,num2,skType,setSkType }) {
|
||||
|
||||
return (
|
||||
<div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 1rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'1px',cursor:'pointer'}} onClick={()=>{
|
||||
setSkType(skType!==type?type:'')
|
||||
}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={15} height={15} alt=""/>
|
||||
<div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{name}</div>
|
||||
<div style={{marginBottom:'-0.1rem'}}>{num1}座</div>
|
||||
<div style={{margin:'0 1rem -0.1rem 1rem'}}>{num2}亿m³</div>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/${skType===type?'收起':'展开'}.png`} style={{cursor:'pointer'}} width={20} alt="" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
function Page({ style }) {
|
||||
|
||||
return (
|
||||
<div style={{width:'100%',display:'flex'}}>
|
||||
<div style={{width:'100%',display:'flex',alignItems:'flex-start',padding:'0.5rem 0',justifyContent:'space-around'}}>
|
||||
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={20} alt=""/>
|
||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>大型水库</div>
|
||||
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
|
||||
</div>
|
||||
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={20} alt=""/>
|
||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>中型水库</div>
|
||||
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
|
||||
</div>
|
||||
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={20} alt=""/>
|
||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(1)型水库</div>
|
||||
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
|
||||
</div>
|
||||
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={20} alt=""/>
|
||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(2)型水库</div>
|
||||
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -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 (
|
||||
<PanelBox
|
||||
|
|
@ -15,18 +118,54 @@ function DrpReal({ 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>
|
||||
<CountPage/>
|
||||
{
|
||||
skTypeObj.map((item)=>
|
||||
(<>
|
||||
<CollapsePage type={item.type} name={item.name} num1={item.num1} num2={item.num2} skType={skType} setSkType={setSkType}/>
|
||||
<Collapse in={skType===item.type} timeout="auto" unmountOnExit>
|
||||
<TableContainer style={{ height: '12.8rem' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '1rem' }} align="left">序号</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '5rem' }} align="center">水库名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '8rem' }} align="center">类型</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '8rem' }} align="center">
|
||||
<TableSortLabel
|
||||
onClick={() => setSort(!sort)}
|
||||
active={true}
|
||||
direction={sort?'desc':'asc'}>
|
||||
{'库容(万m³)'}
|
||||
</TableSortLabel>
|
||||
</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{
|
||||
tableData.map((tableRow,index)=>
|
||||
<TableBody>
|
||||
<DpTableRow key={tableRow.stcd}>
|
||||
<DpTableCell align="center" >{index+1}</DpTableCell>
|
||||
<DpTableCell align="center" >
|
||||
<div className="table-ellipsis cursor-pointer" onClick={()=>{
|
||||
flyTo(tableRow)
|
||||
setSkLayer([tableRow])
|
||||
}}>
|
||||
{tableRow.stnm}
|
||||
</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center" >{item.name}</DpTableCell>
|
||||
<DpTableCell align="center" >{tableRow.w}</DpTableCell>
|
||||
</DpTableRow>
|
||||
</TableBody>
|
||||
)
|
||||
}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Collapse>
|
||||
</>)
|
||||
)
|
||||
}
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue