Compare commits

..

6 Commits

Author SHA1 Message Date
秦子超 4118661eeb Merge branch 'qzc-dev' 2025-06-12 11:47:01 +08:00
李神峰 455f63f122 feat(): 水库总览修改 2025-06-12 11:45:21 +08:00
李神峰 d4a3f222a2 merge: 合并冲突 2025-06-11 17:49:18 +08:00
李神峰 ad81d24dc6 feat(): 水资源利用修改 2025-06-11 17:17:33 +08:00
秦子超 fded4a1282 合并代码 2025-06-11 17:16:34 +08:00
李神峰 bfc27021e4 fix(): 修改预演图表 2025-06-11 16:45:01 +08:00
23 changed files with 385 additions and 137 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 86 KiB

BIN
public/assets/ddjg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

BIN
public/assets/yyzl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

View File

@ -0,0 +1,8 @@
{"type":"FeatureCollection",
"features":[{"type":"Feature",
"id":2,
"bbox":[114.88191247,31.16683581,114.88643309,31.16825998],
"properties":{"gid":2,"geometry":"LineString"},
"geometry":{
"type":"LineString",
"coordinates":[[114.878250,31.169557],[114.879593,31.169511],[114.880543,31.169543],[114.881345,31.170357]]}}]}

View File

@ -44,6 +44,52 @@
],
"layer": "RealSkLayer",
"layerPop": "RealSkPop"
},
{
"stcd": "716115401",
"type": "sk",
"hasRz": true,
"stnm": "小玉潭水库",
"adcd": "421181110000",
"wscd": null,
"importancy": 0,
"lgtd": 114.96946270525194,
"lttd": 31.469026638957608,
"elev": 0,
"damel": 21.6,
"dsflz": 20.15,
"fsltdz": 130.8,
"ddz": 0,
"zcxsw": 130.8,
"drpTm": "2024-05-17T08:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 126.41,
"w": 4.971,
"a_fsltdz": -4.390000000000015,
"rzTm": "2024-05-17T06:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"pic": [
{
"stcd": "716115401",
"tm": "2024-05-17T08:05:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115401/20240517160500.jpg"
},
{
"stcd": "716115401",
"tm": "2024-05-17T08:20:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2024/0517/716115402/20240517162000.jpg"
}
],
"layer": "RealSkLayer",
"layerPop": "RealSkPop"
},
{
"stcd": "716115301",
@ -669,6 +715,7 @@
"h48": 15,
"drpState": 1,
"rz": 84.67,
"xs":10432,
"w": 16900,
"a_fsltdz": -8.329999999999998,
"rzTm": "2025-06-06T22:00:00.000Z",
@ -704,6 +751,7 @@
"drpState": 2,
"rz": 83,
"w": 1026,
"xs":375,
"a_fsltdz": -15.299999999999997,
"rzTm": "2025-06-06T00:00:00.000Z",
"rzWarning": 0,
@ -737,6 +785,7 @@
"h48": 0,
"drpState": 2,
"rz": 203.4,
"xs":1164,
"w": 2797,
"a_fsltdz": -5.079999999999984,
"rzTm": "2025-06-06T00:00:00.000Z",
@ -1876,6 +1925,7 @@
"drpState": 1,
"rz": 60.7,
"w": 45490,
"xs":32133,
"a_fsltdz": -4.189999999999998,
"rzTm": "2025-06-06T22:00:00.000Z",
"rzWarning": 0,
@ -5451,6 +5501,7 @@
"h48": 43.5,
"drpState": 1,
"rz": 141.56,
"xs":12744,
"w": 16926,
"a_fsltdz": -7.439999999999998,
"rzTm": "2025-06-06T22:00:00.000Z",
@ -5486,6 +5537,7 @@
"drpState": 1,
"rz": 120,
"w": 6015,
"xs":1676,
"a_fsltdz": -17,
"rzTm": "2025-06-06T00:00:00.000Z",
"rzWarning": 0,
@ -5888,6 +5940,7 @@
"drpState": 2,
"rz": 224.31,
"w": 1415,
"xs":750,
"a_fsltdz": -6.689999999999998,
"rzTm": "2025-04-11T05:00:00.000Z",
"rzWarning": 0,
@ -7486,6 +7539,7 @@
"drpState": 2,
"rz": 156.8,
"w": 1834,
"xs":448,
"a_fsltdz": -10.599999999999994,
"rzTm": "2025-06-06T00:00:00.000Z",
"rzWarning": 0,
@ -8256,6 +8310,7 @@
"drpState": 1,
"rz": 117.78,
"w": 1577,
"xs":628,
"a_fsltdz": -4.659999999999997,
"rzTm": "2025-06-06T22:00:00.000Z",
"rzWarning": 0,
@ -9072,6 +9127,7 @@
"drpState": 1,
"rz": 144.5,
"w": 1574,
"xs":"--",
"a_fsltdz": -14.5,
"rzTm": "2025-06-06T00:00:00.000Z",
"rzWarning": 0,

BIN
src/assets/yybg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 MiB

View File

@ -136,8 +136,8 @@ const enterpriseData = [
const statistics = {
floodArea: 3.57,
affectedVillages: 2,
affectedHouseholds: 310,
affectedPopulation: 940,
affectedHouseholds: 75,
affectedPopulation: 224,
};
const FloodImpactMonitor = () => {
@ -162,8 +162,8 @@ const FloodImpactMonitor = () => {
<Typography variant="h6" className={classes.title}>
城镇集镇村庄
</Typography>
<Paper>
<Table className={classes.table}>
<Paper style={{background:"transparent"}}>
<Table className={classes.table} >
<thead>
<tr>
<th>名称</th>
@ -196,7 +196,7 @@ const FloodImpactMonitor = () => {
<Typography variant="h6" className={classes.title}>
企事业单位影响情况
</Typography>
<Paper>
<Paper style={{background:"transparent"}}>
<Table className={classes.table}>
<thead>
<tr>

View File

@ -40,7 +40,7 @@ function HDStDlg({ record, onClose }) {
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<div style={{ display: 'flex' }}>
<div className='yy-contents'>
<div className='yy-left'>
<WarningCard
key={warnObj.id}
@ -53,10 +53,10 @@ function HDStDlg({ record, onClose }) {
/>
</div>
<div className='yy-middle'>
<VideoPlayer
{/* <VideoPlayer
videoUrl={`${process.env.PUBLIC_URL}/assets/yyVideo.mp4`}
date=""
/>
/> */}
{/* <video src={`${process.env.PUBLIC_URL}/assets/yyVideo.mp4`} style={{width:'100%',height:'100%'}}></video> */}
</div>
<div className='yy-right'>

View File

@ -1,6 +1,12 @@
.yy-left,.yy-right{
width:450px
width:450px;
background: rgba(6, 34, 56, .8);
}
.yy-middle{
width: 1000px;
}
.yy-contents{
display: flex;
background:url(../../../../assets/yybg.png) no-repeat;
background-size: 100% 100%;
}

View File

@ -153,7 +153,7 @@ const RainfallMonitor = () => {
<Tab label="降雨情景" />
<Tab label="风险评估" />
</Tabs>
{
tabValue == 0 ? <>
<TableContainer component={Paper} className={classes.table}>
@ -213,10 +213,6 @@ const RainfallMonitor = () => {
</Box>
</> : <Fxyb />
}
</Box>
);
};

View File

@ -24,7 +24,7 @@ function SkSmtp({ record, onClose }) {
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, width: '30rem', overflowX: 'hidden' }}>
<DpAppBar position="sticky">
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1 }}>{record.stnm}</Typography>
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1,color:"#fff" }}>{record.stnm}</Typography>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<SkSmtpPanel personels={record.personels || []} txt={record.txt} />

View File

@ -0,0 +1,120 @@
import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import config from '../../../../config';
import LayerMgr from '../../MapCtrl/mapstyle/layermgr';
import { getLayerVisible, getLayerSetting, getCameraTarget } from '../../../../models/map/selectors';
import { useDispatch, useSelector } from 'react-redux';
// 设置你的 Mapbox 访问令牌
mapboxgl.accessToken = 'pk.eyJ1IjoiaW5ob25vb3IiLCJhIjoiQzgzSmFadyJ9.jQDKFw6z_HrtBzu8hY415g';
const TrackMap = ({ trackData }) => {
const mapContainer = useRef(null);
const map = useRef(null);
const layermgrRef = useRef(new LayerMgr());
const layerSetting = useSelector(getLayerSetting);
useEffect(() => {
if (!mapContainer.current) return;
layermgrRef.current.init(layerSetting);
// 初始化地图
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: layermgrRef.current.getMapStyle(), // 使用暗色主题
center: [114.88069, 31.171967], // 以轨迹起点为中心
minZoom: 5,
maxZoom: 18,
pitch: config.homePitch,
bounds: config.initalExtent,
maxBounds: config.w_extent_mb,
preserveDrawingBuffer: true,
});
map.current.on('load', () => {
if (!map.current) return;
// // 添加轨迹数据源
// map.current.addSource('track', {
// type: 'geojson',
// data: {
// type: 'Feature',
// properties: {},
// geometry: {
// type: 'LineString',
// coordinates: trackData.coordinates
// }
// }
// });
// // 添加轨迹线图层
// map.current.addLayer({
// id: 'track-line',
// type: 'line',
// source: 'track',
// layout: {
// 'line-join': 'round',
// 'line-cap': 'round'
// },
// paint: {
// 'line-color': '#1890ff',
// 'line-width': 3,
// 'line-opacity': 0.8
// }
// });
// 添加起点标记
// new mapboxgl.Marker({ color: '#00ff00' })
// .setLngLat(trackData.coordinates[0])
// .setPopup(new mapboxgl.Popup().setHTML('起点'))
// .addTo(map.current);
// // 添加终点标记
// new mapboxgl.Marker({ color: '#ff0000' })
// .setLngLat(trackData.coordinates[trackData.coordinates.length - 1])
// .setPopup(new mapboxgl.Popup().setHTML('终点'))
// .addTo(map.current);
// 添加轨迹点图层
// map.current.addLayer({
// id: 'track-points',
// type: 'circle',
// source: 'track',
// paint: {
// 'circle-radius': 4,
// 'circle-color': '#ffffff',
// 'circle-stroke-width': 1,
// 'circle-stroke-color': '#1890ff'
// }
// });
// // 添加动画效果
// let animationStep = 0;
// const animateTrack = () => {
// if (!map.current) return;
// // 更新轨迹线的渐变动画
// map.current.setPaintProperty('track-line', 'line-gradient', [
// 'step',
// ['line-progress'],
// '#1890ff',
// animationStep,
// '#ffffff'
// ]);
// animationStep = (animationStep + 0.001) % 1;
// requestAnimationFrame(animateTrack);
// };
// animateTrack();
});
// 清理函数
return () => {
map.current?.remove();
};
}, [[]]);
return <div ref={mapContainer} style={{width:500}} />;
};
export default TrackMap;

View File

@ -8,6 +8,7 @@ import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import TaskInspectionDetail from './TaskInspectionDetail'
import TrackMap from './TrackMap'
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
@ -21,7 +22,7 @@ function HDStDlg({ record, onClose }) {
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden',height:'80rem' }}>
<DialogContent style={{ padding: 0, width: '85rem', overflowX: 'hidden',height:'80rem' }}>
<DpAppBar position="sticky">
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
<DpTab label="任务信息" />
@ -30,7 +31,13 @@ function HDStDlg({ record, onClose }) {
</DpAppBar>
<div >
{/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
<TaskInspectionDetail />
<div style={{display:'flex'}}>
<div style={{flex:1}}>
<TaskInspectionDetail />
</div>
{/* <div style={{width:500}}></div> */}
{/* <TrackMap /> */}
</div>
</div>
</DialogContent>
<div className="boxfoot"></div>

View File

@ -134,9 +134,7 @@ export default function MapCtrl({ initParams, onLoad }) {
dispatch.runtime.setFeaturePop({ type: record.layerPop, properties: record, coordinates: [record.lgtd, record.lttd] });
}
}
if(feature.layer.id==='临时线'){
debugger
}
if (feature.layer.id === '关联站点') {
const record = feature.properties
if (record.cd_nm == 'GN1') {

View File

@ -12,7 +12,7 @@
}
.mapboxgl-popup-content {
background:rgba(4, 8, 27, 0.8);
background:rgba(4, 8, 27, 0.8) !important;
border-radius: 0px;
padding: 0;
box-shadow: 0 0 0.5rem 0 rgba(31, 95, 102, 0.7);

View File

@ -168,7 +168,15 @@ export default function Title() {
<>
<div style={{color:item.key===view?'#65dbfb':'#ffffff',cursor:'pointer',marginBottom:"0.5rem",display:'flex',flexDirection:'column',alignItems:'center',fontSize:'0.8rem'}} onClick={()=>{
dispatch.map.setView(item.key)
if(item.key===200){
const map = window.__mapref;
if (map) {
const layer = map.getLayer('临时线')
if (layer) {
map.removeLayer('临时线');
map.removeSource('临时线');
}
}
if (item.key === 200) {
const {lgtd,lttd} = JSON.parse(sessionStorage.getItem('lastCenter'))
if(lgtd&&lttd){
dispatch.runtime.setCameraTarget({

View File

@ -143,8 +143,8 @@ function HDReal({ style }) {
<img src={`${process.env.PUBLIC_URL}/assets/cgfx.png`} alt="" style={{ width: 420}} />
</div>
{
renderChart &&<div style={{position:'absolute',top:80,right:450}}>
<img src={`${process.env.PUBLIC_URL}/assets/dcjg.jpg`} alt="" style={{ width: 370}} />
renderChart &&<div style={{position:'absolute',top:130,right:450}}>
<img src={`${process.env.PUBLIC_URL}/assets/ddjg.png`} alt="" style={{ width: 370}} />
</div>
}

View File

@ -50,7 +50,7 @@ function HDReal({ style }) {
return (
<PanelBox
style={style}
title="监测2告警"
title="监测告警"
color="green"
extra={
<div>

View File

@ -276,7 +276,7 @@ function DrpReal({ style }) {
:null
}
{
tab==='发电'?
tab==='灌溉发电'?
<div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>2.41</span> m³/s</div>

View File

@ -12,17 +12,17 @@ function Page({ style }) {
<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 style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>7</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 style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>44</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 style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>207</span> </div>
</div>
</div>
</div>

View File

@ -1,5 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react';
import { Switch, Collapse,Table, TableContainer, TableBody,TableHead, TableRow, TableSortLabel } from '@material-ui/core/index'
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';
@ -12,35 +12,40 @@ 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 [dimension, setDimension] = useState('ft');
const [skData, setSkData] = useState([])
const [skType, setSkType] = useState('')
const [sort, setSort] = useState(true)
const [sort1, setSort1] = 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))
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 === '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 === '3') {
const filterSkData = skData.filter(o => o.w > 0.375 && o.w <= 100) || [];
const newFilterData = filterSkData.map(item => ({ ...item, xs: (item.w * 0.6).toFixed(2) }))
return newFilterData.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))
if (skType === '4') {
const filterSkData = skData.filter(o => o.w >= 0 && o.w <= 0.375) || [];
const newFilterData = filterSkData.map(item => ({ ...item, xs: (item.w * 0.6).toFixed(2) }))
return newFilterData.sort((a, b) => sort ? (b.w - a.w) : (a.w - b.w))
}
return []
},[skData,skType,sort])
}, [skData, skType, sort, sort1])
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},
{ type: '1', name: '大型水库', num1: 3, num2: 7.9316 },//8.735
{ type: '2', name: '中型水库', num1: 7, num2: 1.627 },
{ type: '3', name: '小(1)型水库', num1: 44, num2: 1.627 },
{ type: '4', name: '小(2)型水库', num1: 207, num2: 8.735 },
]
useEffect(()=>{
useEffect(() => {
getSkData()
// return ()=>{
@ -51,132 +56,142 @@ function DrpReal({ style }) {
// map.removeSource('临时水库tz');
// }
// }
},[])
}, [])
const getSkData = async()=>{
const getSkData = async () => {
const data = await SkRealPromise.get();
setSkData(data)
}
const flyTo = (row)=>{
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+0.005],
// dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: row, coordinates: [row.lgtd, row.lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + 0.005],
zoom: 15,
pitch: 50,
bearing: 0
});
});
}
}
const setSkLayer = (data=[])=>{
const setSkLayer = (data = []) => {
const map = window.__mapref;
const layer = map.getLayer('临时水库tz')
if(layer){
if (layer) {
map.removeLayer('临时水库tz');
map.removeSource('临时水库tz');
}
if(data.length===0){return}
if (data.length === 0) { return }
map.addLayer({
'id': '临时水库tz',//+new Date().getTime(),
'type': 'symbol',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [],
},
'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',
},
'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 (
return (
<PanelBox
style={style}
title="水库总览"
color="green"
>
<CountPage/>
<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={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
<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)}
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={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '3rem' }} align="left">序号</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">水库名称</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">类型</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">
{/* <TableSortLabel
onClick={() => setSort1(!sort1)}
active={true}
direction={sort?'desc':'asc'}>
{'库容(万m³)'}
</TableSortLabel>
</DpTableCell>
</TableRow>
</TableHead>
{
tableData.map((tableRow,index)=>
direction={sort1?'desc':'asc'}>
{'蓄水量(万m³)'}
</TableSortLabel> */}
蓄水量(万m³)
</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" >{index + 1}</DpTableCell>
<DpTableCell align="center" >
<div className="table-ellipsis cursor-pointer" onClick={()=>{
flyTo(tableRow)
setSkLayer([tableRow])
}}>
{tableRow.stnm}
</div>
<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.xs}</DpTableCell>
<DpTableCell align="center" >{tableRow.w}</DpTableCell>
</DpTableRow>
</TableBody>
)
}
</Table>
</TableContainer>
</Collapse>
</>)
)
}
</Table>
</TableContainer>
</Collapse>
</>)
)
}
</PanelBox>
)
}
}
export default DrpReal;

View File

@ -85,11 +85,45 @@ function DrpReal({ style }) {
const flyTo = () => {
dispatch?.runtime.setInfoDlg({ layerId: 'XunchachaoshiLayer', properties: {} })
}
const setSkLayer1 = ()=>{
const map = window.__mapref;
const layer = map.getLayer('临时线')
if(layer){
map.removeLayer('临时线');
map.removeSource('临时线');
}
map.addLayer({
'id': '临时线',
'type': 'line',
'source': {
'type': 'geojson',
'data': `${window.location.origin}/data3/line2.geojson`
},
'layout': {
'line-join': 'round'
},
'paint': {
'line-color': 'red',
'line-width': 6
// [
// 'case',
// ['==', ['get', 'LEVEL'], 1], 2.2,
// ['==', ['get', 'LEVEL'], 2], 2.2,
// ['==', ['get', 'LEVEL'], 3], 2.2,
// ['==', ['get', 'LEVEL'], 4], 1.6,
// ['==', ['get', 'LEVEL'], 5], 1.3,
// 10
// ]
},
'visibility': 'visible',
});
}
const jumpTo = (record) => {
const { lgtd, lttd } = record;
const lgtdNum = Number(lgtd);
const lttdNum = Number(lttd)
if (record.code == 1) {
setSkLayer1()
if (lgtdNum && lttdNum) {
dispatch.runtime.setCameraTarget({
center: [lgtdNum, lttdNum],

View File

@ -155,8 +155,8 @@ export default function Warn({ style }) {
</RadioGroup>
</FormControl>
{res.yy &&
<div style={{ color: "#fff", position: 'absolute', top: 90, left: '-380px' }}>
<img src={`${process.env.PUBLIC_URL}/assets/yjzl.jpg`} alt="" style={{ width: 370 }} />
<div style={{ color: "#fff", position: 'absolute', top: 130, left: '-380px' }}>
<img src={`${process.env.PUBLIC_URL}/assets/yyzl.png`} alt="" style={{ width: 370 }} />
{/* <div style={{ background: '#020c2b',padding:'5px 10px',opacity:1 }}>
<div style={{color:'#c5d02c',fontSize:20}}>最大淹没范围</div>
<div style={{display:'flex',columnGap:10}}>
@ -170,7 +170,7 @@ export default function Warn({ style }) {
</div> */}
</div>}
<div style={{ color: "#fff", position: 'absolute', top: 160, right: 600 }}>
<div style={{ color: "#fff", position: 'absolute', top: 83, right: 600 }}>
<WaterLevelAlert />
</div>
</div>