提交防汛首页
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -312,7 +312,7 @@ function DrpChart({ record }) {
|
||||||
name: '小时降雨',
|
name: '小时降雨',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '60%',
|
barWidth: '60%',
|
||||||
data: data2.map(o => o.drp),
|
data: data2.map(o => Number((o.drp).toFixed(2))),
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
barBorderRadius: [3, 3, 0, 0],
|
barBorderRadius: [3, 3, 0, 0],
|
||||||
|
|
@ -342,7 +342,7 @@ function DrpChart({ record }) {
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: data2.map(o => o.totalDrp),
|
data: data2.map(o => Number((o.totalDrp).toFixed(2))),
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
width: 1,
|
width: 1,
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ export default {
|
||||||
},
|
},
|
||||||
'paint': {
|
'paint': {
|
||||||
'fill-opacity': 0.9,
|
'fill-opacity': 0.9,
|
||||||
'fill-color': '#38467f',
|
'fill-color': 'rgba(44,169,138,0.2)',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
浮桥河流域: {
|
浮桥河流域: {
|
||||||
|
|
@ -31,7 +31,7 @@ export default {
|
||||||
},
|
},
|
||||||
'paint': {
|
'paint': {
|
||||||
'fill-opacity': 0.9,
|
'fill-opacity': 0.9,
|
||||||
'fill-color': '#38467f',
|
'fill-color': 'rgba(44,169,138,0.4)',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
浮桥河: {
|
浮桥河: {
|
||||||
|
|
@ -43,7 +43,8 @@ export default {
|
||||||
'visibility':'none'
|
'visibility':'none'
|
||||||
},
|
},
|
||||||
'paint': {
|
'paint': {
|
||||||
'line-color': '#75fbfd',
|
'line-opacity': 0.6,
|
||||||
|
'line-color': '#00FFFF',
|
||||||
'line-width': [
|
'line-width': [
|
||||||
'case',
|
'case',
|
||||||
['==', ['get', 'LEVEL'], 1], 2.2*4,
|
['==', ['get', 'LEVEL'], 1], 2.2*4,
|
||||||
|
|
|
||||||
|
|
@ -140,7 +140,6 @@ class LayerMgr {
|
||||||
layers: [
|
layers: [
|
||||||
base.background,
|
base.background,
|
||||||
base.zhenGround,
|
base.zhenGround,
|
||||||
base.浮桥河流域,
|
|
||||||
base.heatmap,
|
base.heatmap,
|
||||||
base.gwmap,
|
base.gwmap,
|
||||||
base.gqmap,
|
base.gqmap,
|
||||||
|
|
@ -150,6 +149,7 @@ class LayerMgr {
|
||||||
this.layerMap.RivlLayer.getStyle('water'),
|
this.layerMap.RivlLayer.getStyle('water'),
|
||||||
this.layerMap.RivlLayer.getStyle('rivl'),
|
this.layerMap.RivlLayer.getStyle('rivl'),
|
||||||
sources.绿色区域 && base.plantZone,
|
sources.绿色区域 && base.plantZone,
|
||||||
|
base.浮桥河流域,
|
||||||
base.浮桥河,
|
base.浮桥河,
|
||||||
base.xzj.shape, base.xj.shape,
|
base.xzj.shape, base.xj.shape,
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -128,7 +128,7 @@ export default function drpOption({ data, grid, title }) {
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: data2.map(o => o.totalDrp),
|
data: data2.map(o => Number((o.totalDrp).toFixed(2))),
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
width: 1,
|
width: 1,
|
||||||
|
|
|
||||||
|
|
@ -157,16 +157,16 @@ export default function Title() {
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
(view===203||view===205||view===206)?
|
(view===203||view===205||view===206)?
|
||||||
<div style={{position:'absolute',left:'29rem',top:'6rem',transform:'translate(0px, 0px)',display:'flex',flexDirection:'column'}}>
|
<div style={{position:'absolute',left:'27.8rem',top:'7.6rem',transform:'translate(0px, 0px)',display:'flex',flexDirection:'column'}}>
|
||||||
{
|
{
|
||||||
[
|
[
|
||||||
{name:'返回',key:200,icon:'组1.png'},
|
{name:'返回',key:200,icon:'返回.png',icon2:'返回.png'},
|
||||||
{name:'水库监测',key:203,icon:'组2.png'},
|
{name:'水库监测',key:203,icon:'水库.png',icon2:'水库2.png'},
|
||||||
{name:'防汛调度',key:205,icon:'组3.png'},
|
{name:'防汛调度',key:205,icon:'防汛.png',icon2:'防汛2.png'},
|
||||||
{name:'巡查维养',key:206,icon:'组4.png'},
|
{name:'巡查维养',key:206,icon:'巡查.png',icon2:'巡查2.png'},
|
||||||
].map((item)=>
|
].map((item)=>
|
||||||
<>
|
<>
|
||||||
<div style={{color:item.key===view?'#65dbfb':'#ffffff',cursor:'pointer',marginBottom:"0.5rem",display:'flex',flexDirection:'column',alignItems:'center',fontSize:'0.8rem'}} onClick={()=>{
|
<div style={{color:item.key===view?'#65dbfb':'#ffffff',cursor:'pointer',marginBottom:"-2px",display:'flex',flexDirection:'column',alignItems:'center',fontSize:'0.8rem'}} onClick={()=>{
|
||||||
dispatch.map.setView(item.key)
|
dispatch.map.setView(item.key)
|
||||||
const map = window.__mapref;
|
const map = window.__mapref;
|
||||||
if (map) {
|
if (map) {
|
||||||
|
|
@ -188,10 +188,11 @@ export default function Title() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<div style={{width:'2.5rem',height:'3.2rem',overflow:'hidden'}}>
|
{
|
||||||
<img style={{width:'100%'}} src={`${process.env.PUBLIC_URL}/assets/icon/${item.icon}`} alt=""/>
|
item.key===200?
|
||||||
</div>
|
<img style={{width:'34px'}} src={`${process.env.PUBLIC_URL}/assets/bar/${item.key===view?item.icon:item.icon2}`} alt=""/>
|
||||||
{item.name}
|
:<img style={{width:'40px',marginTop:'-30px'}} src={`${process.env.PUBLIC_URL}/assets/bar/${item.key===view?item.icon:item.icon2}`} alt=""/>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -3100,7 +3100,7 @@ function Page({jbqkKey}) {
|
||||||
map.setLayoutProperty('浮桥河流域', 'visibility', 'visible');
|
map.setLayoutProperty('浮桥河流域', 'visibility', 'visible');
|
||||||
map.setLayoutProperty('浮桥河', 'visibility', 'visible');
|
map.setLayoutProperty('浮桥河', 'visibility', 'visible');
|
||||||
dispatch.runtime.setCameraTarget({
|
dispatch.runtime.setCameraTarget({
|
||||||
center: [114.814743, 31.306305],
|
center: [114.904743, 31.306305],
|
||||||
zoom: 10,
|
zoom: 10,
|
||||||
pitch: 50,
|
pitch: 50,
|
||||||
bearing: 0
|
bearing: 0
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
|
|
||||||
function Page({ type,name,num1,num2,skType,setSkType }) {
|
function Page({ type,name,num1,num2,skType,setSkType,icon }) {
|
||||||
|
|
||||||
return (
|
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={()=>{
|
<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:'')
|
setSkType(skType!==type?type:'')
|
||||||
}}>
|
}}>
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.svg`} width={15} height={15} alt=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/${icon}`} width={15} height={15} alt=""/>
|
||||||
<div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{name}</div>
|
<div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>{name}</div>
|
||||||
<div style={{marginBottom:'-0.1rem'}}>{num1}座</div>
|
<div style={{marginBottom:'-0.1rem'}}>{num1}座</div>
|
||||||
<div style={{margin:'0 1rem -0.1rem 1rem'}}>{num2}亿m³</div>
|
<div style={{margin:'0 1rem -0.1rem 1rem'}}>{num2}亿m³</div>
|
||||||
|
|
|
||||||
|
|
@ -5,22 +5,22 @@ function Page({ style }) {
|
||||||
<div style={{width:'100%',display:'flex'}}>
|
<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:'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'}}>
|
<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=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.png`} width={20} alt=""/>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>大型水库</div>
|
<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'}}>3</span> 座</div>
|
||||||
</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'}}>
|
<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=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={20} alt=""/>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>中型水库</div>
|
<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'}}>7</span> 座</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>7</span> 座</div>
|
||||||
</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'}}>
|
<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=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/小1.png`} width={20} alt=""/>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(1)型水库</div>
|
<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'}}>44</span> 座</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>44</span> 座</div>
|
||||||
</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'}}>
|
<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=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/小1.png`} width={20} alt=""/>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(2)型水库</div>
|
<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'}}>207</span> 座</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>207</span> 座</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -39,10 +39,10 @@ function DrpReal({ style }) {
|
||||||
}, [skData, skType, sort, sort1])
|
}, [skData, skType, sort, sort1])
|
||||||
|
|
||||||
const skTypeObj = [
|
const skTypeObj = [
|
||||||
{ type: '1', name: '大型水库', num1: 3, num2: 7.9316 },//8.735
|
{ type: '1', name: '大型水库', num1: 3, num2: 7.9316,icon:'大型水库.png' },//8.735
|
||||||
{ type: '2', name: '中型水库', num1: 7, num2: 1.627 },
|
{ type: '2', name: '中型水库', num1: 7, num2: 1.627,icon:'中.png' },
|
||||||
{ type: '3', name: '小(1)型水库', num1: 44, num2: 1.627 },
|
{ type: '3', name: '小(1)型水库', num1: 44, num2: 1.627 ,icon:'小1.png'},
|
||||||
{ type: '4', name: '小(2)型水库', num1: 207, num2: 8.735 },
|
{ type: '4', name: '小(2)型水库', num1: 207, num2: 8.735 ,icon:'小1.png'},
|
||||||
]
|
]
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -136,7 +136,7 @@ function DrpReal({ style }) {
|
||||||
{
|
{
|
||||||
skTypeObj.map((item) =>
|
skTypeObj.map((item) =>
|
||||||
(<>
|
(<>
|
||||||
<CollapsePage type={item.type} name={item.name} num1={item.num1} num2={item.num2} skType={skType} setSkType={setSkType} />
|
<CollapsePage type={item.type} icon={item.icon} name={item.name} num1={item.num1} num2={item.num2} skType={skType} setSkType={setSkType} />
|
||||||
<Collapse in={skType === item.type} timeout="auto" unmountOnExit>
|
<Collapse in={skType === item.type} timeout="auto" unmountOnExit>
|
||||||
<TableContainer style={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
|
<TableContainer style={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
|
||||||
<Table size="small" stickyHeader>
|
<Table size="small" stickyHeader>
|
||||||
|
|
|
||||||
|
|
@ -128,7 +128,7 @@ export default function drpOption({ data, grid, title }) {
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: data2.map(o => o.totalDrp),
|
data: data2.map(o => Number((o.totalDrp).toFixed(2))),
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
width: 1,
|
width: 1,
|
||||||
|
|
|
||||||