洪水预演地图
parent
7eeb850682
commit
1f96ef565c
|
|
@ -5,8 +5,8 @@ module.exports = function (app) {
|
|||
app.use(
|
||||
'/gunshiApp',
|
||||
createProxyMiddleware({
|
||||
// target: 'http://local.gunshiiot.com:18083/',//测试
|
||||
target: 'http://223.75.53.141:83/',//测试
|
||||
target: 'http://local.gunshiiot.com:18083/',//测试
|
||||
// target: 'http://223.75.53.141:83/',//测试
|
||||
// target: 'http://192.168.66.199:24105/',//正式
|
||||
// target: 'http://36.139.207.50:18083/',//移动云
|
||||
// target: 'http://192.168.66.49:24105/',//移动云
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@ const AppRouters: React.FC = () => {
|
|||
//四预
|
||||
{ path: 'sy/fhxzfx', element: <HomePage /> },
|
||||
{ path: 'sy/tqyb', element: <HomePage /> },
|
||||
{ path: 'sy/hsyy', element: <HomePage /> },
|
||||
|
||||
//四预-洪水预报
|
||||
{ path: 'sy/hsyb/hyybjs', element: <Hsybjs /> },
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ export default class Map3D extends BaseMap {
|
|||
this.layerMgr = new LayerMgr3D(viewer);
|
||||
this.demo = new Demo3D()
|
||||
|
||||
// this.demo.getQxsy(viewer) //倾斜摄影
|
||||
this.demo.getQxsy(viewer) //倾斜摄影
|
||||
// this.demo.getDem(viewer) //地形图
|
||||
this.demo.getWxyx(viewer) //卫星影像
|
||||
this.demo.getCzml2(viewer) //demo
|
||||
|
|
@ -261,14 +261,14 @@ export default class Map3D extends BaseMap {
|
|||
|
||||
viewer.camera.setView({
|
||||
// destination: Cesium.Cartesian3.fromDegrees(...config.homeCenter3D),
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.763746000,31.482518000,1000),
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.770546000,31.496518000,500),
|
||||
orientation: {
|
||||
// heading: Cesium.Math.toRadians(0),
|
||||
// pitch: Cesium.Math.toRadians(-35.0),
|
||||
// roll: 0.0
|
||||
heading: Cesium.Math.toRadians(0),
|
||||
pitch: Cesium.Math.toRadians(-90.0),
|
||||
heading: Cesium.Math.toRadians(-90),
|
||||
pitch: Cesium.Math.toRadians(-35.0),
|
||||
roll: 0.0
|
||||
// heading: Cesium.Math.toRadians(0),
|
||||
// pitch: Cesium.Math.toRadians(-90.0),
|
||||
// roll: 0.0
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -147,8 +147,8 @@ export default class LayerMgr {
|
|||
viewer.scene.primitives.add(tileset);
|
||||
|
||||
|
||||
// const offsetHeight = 10
|
||||
const offsetHeight = -70
|
||||
const offsetHeight = 10
|
||||
// const offsetHeight = -70
|
||||
const boundingSphere = tileset.boundingSphere
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
|
||||
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
|
||||
|
|
|
|||
|
|
@ -124,11 +124,11 @@ export default function Btn({showPanels,setShowPanels}) {
|
|||
{/* <div className="lf" title="地图展示图层控制" onClick={showLayers}>
|
||||
<DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
|
||||
</div> */}
|
||||
<div className='mapToolBoxTuCeng' style={{left:open?'-235px':'5px'}}>
|
||||
<div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black'}} onClick={btn3d}>
|
||||
<div className='mapToolBoxTuCeng' style={{left:open?'-185px':'5px'}}>
|
||||
{/* <div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black'}} onClick={btn3d}>
|
||||
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/3dMap.jpg`} alt=""/>
|
||||
3D图
|
||||
</div>
|
||||
</div> */}
|
||||
<div className='mapToolBoxTuCengItem' style={{color:(!!layerVisible["SatelliteImage"]&&mode!=='3d')?'#1677ff':'black',cursor:mode==='3d'?'no-drop':'pointer'}} onClick={yxtBtn}>
|
||||
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/yingxiangtu.png`} alt=""/>
|
||||
影像图
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import React, { useEffect, useState, useRef } from 'react'
|
||||
import { useLocation } from 'react-router'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { Collapse, DatePicker, Input, Modal, message } from 'antd';
|
||||
import './index.less'
|
||||
import Ybfa from './ybfa'
|
||||
|
||||
|
||||
const Page = ({ showPanels }) => {
|
||||
const dispatch = useDispatch();
|
||||
let mapObj = useSelector(s => s.map.map)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className='homePage' style={{ display: !showPanels ? 'none' : 'block' }}>
|
||||
<div className='homePage_rightBox' style={{ display: !showPanels ? 'none' : 'block', padding: '0px' }}>
|
||||
<Ybfa />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
|
|
@ -0,0 +1,444 @@
|
|||
.homePage{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
|
||||
.homePage_leftBox{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 250px;
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
|
||||
.homePage_head{
|
||||
padding-left: 20px;
|
||||
background-color: rgba(0, 122, 253, 1);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ant-collapse-header{
|
||||
height: 40px;
|
||||
background-color: rgba(233, 245, 254, 1);
|
||||
border-bottom: 1px solid rgba(215, 215, 215, 1);
|
||||
}
|
||||
.ant-collapse-content{
|
||||
border-bottom: 1px solid rgba(215, 215, 215, 1);
|
||||
.ant-collapse-content-box{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.homePage_Panel{
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
align-items: center;
|
||||
|
||||
.homePage_Panel_icon{
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
background-color: #007afd;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.homePage_Panel_item{
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.homePage_Panel_item_acitve{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.homePage_centerBox{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
|
||||
.ant-picker.ant-picker-disabled{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.homePage_rightBox{
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 0;
|
||||
width: 390px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
// border: 1px solid #eee;
|
||||
|
||||
.homePage_head2{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: -5px;
|
||||
|
||||
.homePage_head2_Bg{
|
||||
width: 175px;
|
||||
height: 46px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
background: url(../../../../public/assets/xyt/homeImg/titleBg.png) 0 0 no-repeat;
|
||||
background-size:100% 95%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.yujing{
|
||||
.title{
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding: 0 10px;
|
||||
background-color: #f2f2f2;
|
||||
letter-spacing: -0.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.bodyBox{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.bodyBoxItem{
|
||||
width: calc( 33% - 10px);
|
||||
margin: 5px;
|
||||
height: 90px;
|
||||
background-color: rgba(234, 244, 254, 1);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
.num{
|
||||
height: 45%;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: #D9001B;
|
||||
}
|
||||
.sw{
|
||||
color: #04D919;
|
||||
}
|
||||
.content{
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
color: #409EFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.xunchaxunjian{
|
||||
.title{
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding: 0 10px;
|
||||
background-color: #f2f2f2;
|
||||
letter-spacing: -0.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.bodyBox{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.bodyBoxItem{
|
||||
width: calc( 33% - 10px);
|
||||
margin: 5px;
|
||||
height: 90px;
|
||||
background-color: rgba(234, 244, 254, 1);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
.num{
|
||||
height: 45%;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: #D9001B;
|
||||
}
|
||||
.sw{
|
||||
color: #04D919;
|
||||
}
|
||||
.content{
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
color: #409EFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home_gongshui{
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.home_gongshui_item{
|
||||
width: 49%;
|
||||
.home_gongshui_item_title{
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(234, 244, 254, 1);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
img{
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
}
|
||||
.home_gongshui_item_text{
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
|
||||
.lf, .rf{
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
font-weight: 400;
|
||||
}
|
||||
.lf2, .rf2{
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.rf{
|
||||
flex: 1;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_yuqing{
|
||||
// min-height: 100px;
|
||||
|
||||
.home_yuqing_header{
|
||||
width: 100%;
|
||||
background-color: #eaf4fe;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 10px;
|
||||
|
||||
div{
|
||||
width: 33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.home_yuqing_header_item{
|
||||
margin-bottom: 10px;
|
||||
width: 7rem;
|
||||
height: 2rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.avtive{
|
||||
border-radius: 2rem;
|
||||
border: 1px solid #409EFF;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_shuizhi{
|
||||
|
||||
.home_shuizhi_title1{
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
.home_shuizhi_title2{
|
||||
display: flex;
|
||||
height: 80px;
|
||||
margin: 8px 5px 0 5px;
|
||||
border-radius: 5px;
|
||||
background: #EAF4FE;
|
||||
div{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.lf{
|
||||
font-size: 17px;
|
||||
color: #409EFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
.rf{
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
.icon{
|
||||
margin: -5px 0 0 10px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: #7F7F7F;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_shuizhi_item{
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(to right, #e8effd, rgba(255, 0, 0, 0));
|
||||
|
||||
.home_shuizhi_item_box1{
|
||||
width: 40%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
.home_shuizhi_item_box2{
|
||||
width: 18%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #3749C7;
|
||||
text-align: center;
|
||||
}
|
||||
.home_shuizhi_item_box3{
|
||||
width: 18%;
|
||||
text-align: center;
|
||||
}
|
||||
.home_shuizhi_item_box4{
|
||||
width: 24%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #3749C7;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.home_shuizhi_item2{
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(to right, #e8effd, rgba(255, 0, 0, 0));
|
||||
justify-content: space-between;
|
||||
}
|
||||
.home_shuizhi_wenhao{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.homePage_bztBox{
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: -12px;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: calc( 100vh - 60px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.homePage_leftBottomBox{
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: calc( 100vh - 400px);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.homePage_centerBox2{
|
||||
|
||||
.ant-picker.ant-picker-disabled{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.hsyyBox{
|
||||
padding: 8px;
|
||||
|
||||
|
||||
|
||||
.hsyylistBox{
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #ebf4fd;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease;
|
||||
|
||||
|
||||
.hsyylistBoxTitle{
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
color: #259DFF;
|
||||
font-weight: 400;
|
||||
border: 1px solid #259DFF;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.hsyylistBoxLabel{
|
||||
color: #8FAFC4;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
|
||||
.hsyylistBoxValue{
|
||||
color: #000000;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,700 @@
|
|||
import * as echarts from 'echarts';
|
||||
import moment from 'moment';
|
||||
|
||||
export default function drpOption({data,tms}) {
|
||||
const list1 = []
|
||||
data.map(i=>{
|
||||
if(i.ycSwHValue!==null){list1.push(i.ycSwHValue)}
|
||||
if(i.realSwHValue!==null){list1.push(i.realSwHValue)}
|
||||
if(i.flLowLimLev!==null){list1.push(i.flLowLimLev)}
|
||||
})
|
||||
const maxSw = list1.length===0?200:Math.max(...list1)
|
||||
const minSw = list1.length===0?0:Math.min(...list1)
|
||||
|
||||
|
||||
const list2 = []
|
||||
data.map(i=>{
|
||||
if(i.ycRkQValue!==null){list2.push(i.ycRkQValue)}
|
||||
if(i.realRkQValue!==null){list2.push(i.realRkQValue)}
|
||||
if(i.ycCkQValue!==null){list2.push(i.ycCkQValue)}
|
||||
if(i.realCkQValue!==null){list2.push(i.realCkQValue)}
|
||||
})
|
||||
|
||||
const maxLl = list2.length===0?200:Math.max(...list2)
|
||||
const minLl = list2.length===0?0:Math.min(...list2)
|
||||
|
||||
const list3 = []
|
||||
data.map((i=>{
|
||||
if(i.drp!==null){list3.push(i.drp)}
|
||||
}))
|
||||
const maxYl = list3.length===0?200:Math.max(...list3)
|
||||
const minYl = list3.length===0?0:Math.min(...list3)
|
||||
|
||||
const getVal = (val)=>{
|
||||
if(val===null||val===undefined){
|
||||
return '-'
|
||||
}else{
|
||||
return Number(val).toFixed(2)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params,b) {
|
||||
// params 是一个数组，数组中包含每个系列的数据信息
|
||||
let result = '时间：'+params[0].axisValueLabel+'<br/>';
|
||||
params.forEach(function (item) {
|
||||
// item 是每一个系列的数据
|
||||
const seriesName = item.seriesName; // 系列名称
|
||||
const value = item.value; // 数据值
|
||||
const marker = item.marker; // 标志图形
|
||||
if(value!==undefined && seriesName!=='预报时间'){
|
||||
result += `${marker}${seriesName}: ${value}<br/>`;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: '15%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
width: '90%',
|
||||
height: '25%'
|
||||
},
|
||||
{
|
||||
top: '15%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
width: '90%',
|
||||
height: '25%'
|
||||
},
|
||||
{
|
||||
bottom: '5%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
width: '90%',
|
||||
height: '45%'
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
top:'3%',
|
||||
// 显示图例
|
||||
show: true,
|
||||
// 图例的位置
|
||||
// data: ["降雨量","预测雨量","实测水位","预报水位","汛限水位","实测入库流量","预报入库流量","实测出库流量","预报出库流量"],
|
||||
data: [
|
||||
{
|
||||
name: '降雨量',
|
||||
},
|
||||
{
|
||||
name: '预测雨量',
|
||||
icon: 'image://'+`${process.env.PUBLIC_URL}/assets/xyt/fxdd/ycjyicon.svg`
|
||||
},
|
||||
{
|
||||
name: '实测水位',
|
||||
icon: 'image://'+`${process.env.PUBLIC_URL}/assets/xyt/fxdd/scswicon.svg`
|
||||
},
|
||||
{
|
||||
name: '预报水位',
|
||||
icon: 'image://'+`${process.env.PUBLIC_URL}/assets/xyt/fxdd/ybswicon.svg`
|
||||
},
|
||||
{
|
||||
name: '汛限水位',
|
||||
icon: 'image://'+`${process.env.PUBLIC_URL}/assets/xyt/fxdd/xxswicon2.svg`
|
||||
},
|
||||
{
|
||||
name: '实测入库流量',
|
||||
icon: 'image://'+`${process.env.PUBLIC_URL}/assets/xyt/fxdd/scrkicon.svg`
|
||||
},
|
||||
{
|
||||
name: '预报入库流量',
|
||||
icon: 'image://'+`${process.env.PUBLIC_URL}/assets/xyt/fxdd/ybrkllicon.svg`
|
||||
},
|
||||
{
|
||||
name: '实测出库流量',
|
||||
icon: 'image://'+`${process.env.PUBLIC_URL}/assets/xyt/fxdd/scckllicon.svg`
|
||||
|
||||
},
|
||||
{
|
||||
name: '预报出库流量',
|
||||
icon: 'image://'+`${process.env.PUBLIC_URL}/assets/xyt/fxdd/ybckllicon.svg`
|
||||
},
|
||||
],
|
||||
},
|
||||
xAxis: [
|
||||
//降雨量的图
|
||||
{
|
||||
gridIndex: 0,
|
||||
type: 'category',
|
||||
offset:100,
|
||||
// inverse: true,
|
||||
data: data.map(o => o.tm),
|
||||
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(170, 170, 170)',
|
||||
width: 1
|
||||
}
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
//预测雨量的图
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'category',
|
||||
// inverse: true,
|
||||
data: data.map(o => o.tm),
|
||||
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
// lineStyle: {
|
||||
// color: 'rgb(170, 170, 170)',
|
||||
// width: 1
|
||||
// }
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
//流量水位的图
|
||||
{
|
||||
gridIndex: 2,
|
||||
type: 'category',
|
||||
data: data.map(o => o.tm),
|
||||
// inverse: true,
|
||||
inverse: false,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
padding: [0, 0, 100, 0],
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
formatter: val => val.slice(5,16)
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(170, 170, 170)',
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
inverse: true,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '降雨量(mm)',
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 0, -5],
|
||||
color:'#333333',
|
||||
fontSize: 12
|
||||
},
|
||||
nameLocation: 'start',
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(170, 170, 170)',
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgb(170, 170, 170,0.5)',
|
||||
width: 0.25,
|
||||
// type: 'line'
|
||||
}
|
||||
},
|
||||
max: Math.ceil((6*maxYl-minYl)/5),
|
||||
min: minYl===0?0:Math.floor((6*minYl-maxYl)/5)
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
inverse: true,
|
||||
type: 'value',
|
||||
nameLocation: 'start',
|
||||
axisLabel: {
|
||||
// color: '#333',
|
||||
fontSize: 0
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// color: 'rgb(170, 170, 170)',
|
||||
width: 0,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// color: 'rgb(170, 170, 170,0.5)',
|
||||
width: 0,
|
||||
// type: 'line'
|
||||
}
|
||||
},
|
||||
max: Math.ceil((6*maxYl-minYl)/5),
|
||||
min: minYl===0?0:Math.floor((6*minYl-maxYl)/5)
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: "流量(m³/s)",
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 0, -20],
|
||||
color:'#333333',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgb(170, 170, 170,0.5)',
|
||||
width: 0.25,
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgb(170, 170, 170)',
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
max: Math.ceil((6*maxLl-minLl)/5),
|
||||
min: minLl===0?0:Math.floor((6*minLl-maxLl)/5)
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: "水位(m)",
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 0, 55],
|
||||
color:'#333333',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgb(170, 170, 170)',
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
max: Math.ceil((6*maxSw-minSw)/5),
|
||||
min: minSw===0?0:Math.floor((6*minSw-maxSw)/5)
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
name: '降雨量',
|
||||
type: 'bar',
|
||||
barWidth: '50%',
|
||||
data: data.map((v) => {
|
||||
//"0"真实数据，“1”预报数据
|
||||
if (v.ispreDrp==='0') {
|
||||
return getVal(v.drp)
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
}),
|
||||
itemStyle: {
|
||||
color: '#007AFD',
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
name: '预报时间',
|
||||
type: 'bar',
|
||||
barWidth: '2px',
|
||||
data: data.map((v) => {
|
||||
if (v.tm===tms.forecastTime) {
|
||||
return maxYl*1.2
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
}),
|
||||
itemStyle: {
|
||||
color: '#e35650',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '预报时间'
|
||||
},
|
||||
},
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
name: '占位',
|
||||
type: 'bar',
|
||||
barWidth: '50%',
|
||||
barGap:'0%',
|
||||
data: data.map((v) => null),
|
||||
itemStyle: {
|
||||
color: '#dbe6fb',
|
||||
barBorderWidth:'2',
|
||||
barBorderColor:'#007AFD',
|
||||
borderType: "dotted"//这一行属性就是虚线
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '预测雨量',
|
||||
type: 'bar',
|
||||
barWidth: '50%',
|
||||
data: data.map((v) => {
|
||||
//"0"真实数据，“1”预报数据
|
||||
if (v.ispreDrp==='1') {
|
||||
return getVal(v.drp)
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
}),
|
||||
itemStyle: {
|
||||
color: '#dbe6fb',
|
||||
barBorderWidth:'2',
|
||||
barBorderColor:'#007AFD',
|
||||
borderType: "dotted"//这一行属性就是虚线
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '占位',
|
||||
type: 'bar',
|
||||
barWidth: '50%',
|
||||
barGap:'0%',
|
||||
data: data.map((v) => null),
|
||||
itemStyle: {
|
||||
color: '#dbe6fb',
|
||||
barBorderWidth:'2',
|
||||
barBorderColor:'#007AFD',
|
||||
borderType: "dotted"//这一行属性就是虚线
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
//渐变背景
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
type: 'line',
|
||||
markArea: {
|
||||
data: [
|
||||
[{
|
||||
xAxis: tms.startTime||''
|
||||
}, {
|
||||
xAxis: tms.forecastTime||''
|
||||
}]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0, color: 'rgba(255, 0, 0, 0.1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(255, 255, 0, 0)' // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
name: '实测入库流量',
|
||||
type: 'line',
|
||||
color: "#82b87e",
|
||||
lineStyle: {
|
||||
// type: "dashed"
|
||||
},
|
||||
data: data.map(o => getVal(o.realRkQValue)),
|
||||
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||
smooth: 0.5,
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
name: '预报入库流量',
|
||||
type: 'line',
|
||||
color: "#82b87e",
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
},
|
||||
data: data.map(o => getVal(o.ycRkQValue)),
|
||||
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||
smooth: 0.5,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
// { type: "min", name: "最小值" },
|
||||
],
|
||||
symbol:'circle',
|
||||
symbolSize:10,
|
||||
label:{
|
||||
show:false,
|
||||
position: [-15, -20]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
name: '实测出库流量',
|
||||
type: 'line',
|
||||
color: "#e5625c",
|
||||
lineStyle: {
|
||||
// type: "dashed"
|
||||
},
|
||||
data: data.map(o => getVal(o.realCkQValue)),
|
||||
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||
smooth: 0.5,
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
name: '预报出库流量',
|
||||
type: 'line',
|
||||
color: "#e5625c",
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
},
|
||||
data: data.map(o => getVal(o.ycCkQValue)),
|
||||
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||
smooth: 0.5,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
// { type: "min", name: "最小值" },
|
||||
],
|
||||
symbol:'circle',
|
||||
symbolSize:10,
|
||||
label:{
|
||||
show:false,
|
||||
position: [-15, -20]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 3,
|
||||
name: '实测水位',
|
||||
type: 'line',
|
||||
color: "#4b85f0",
|
||||
lineStyle: {
|
||||
// type: "dashed"
|
||||
},
|
||||
data: data.map(o => getVal(o.realSwHValue)),
|
||||
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||
smooth: 0.5,
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 3,
|
||||
name: '预报水位',
|
||||
type: 'line',
|
||||
color: "#4b85f0",
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
},
|
||||
data: data.map(o => getVal(o.ycSwHValue)),
|
||||
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||
smooth: 0.5,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
// { type: "min", name: "最小值" },
|
||||
],
|
||||
symbol:'circle',
|
||||
symbolSize:10,
|
||||
label:{
|
||||
show:false,
|
||||
position: [-15, -20]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 3,
|
||||
name: '预报-实测',
|
||||
type: 'line',
|
||||
color: "#4b85f0",
|
||||
lineStyle: {
|
||||
// type: "dashed"
|
||||
},
|
||||
data: data.map(o => getVal(o.swHDValue)),
|
||||
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||
smooth: 0.5,
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 3,
|
||||
name: '汛限水位',
|
||||
type: 'line',
|
||||
color: "#f2ca6b",
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
},
|
||||
data: data.map(o => getVal(o.flLowLimLev)),
|
||||
symbol: 'none', // 设置标记点为'none'，即去掉圆点
|
||||
smooth: 0.5,
|
||||
markArea: {
|
||||
data: [
|
||||
[{
|
||||
xAxis: tms.startTime||''
|
||||
}, {
|
||||
xAxis: tms.forecastTime||''
|
||||
}]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0, color: 'rgba(255, 0, 0, 0.1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(255, 255, 0, 0)' // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 3,
|
||||
name: '预报时间',
|
||||
type: 'bar',
|
||||
barWidth: '2px',
|
||||
z:2,
|
||||
data: data.map((v) => {
|
||||
if (v.tm===tms.forecastTime) {
|
||||
return maxSw*1.2
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
}),
|
||||
itemStyle: {
|
||||
color: '#e35650',
|
||||
}
|
||||
},
|
||||
{
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 3,
|
||||
name: '预报时间',
|
||||
type: 'bar',
|
||||
barWidth: '2px',
|
||||
barGap:'-100%',
|
||||
z:3,
|
||||
data: data.map((v) => {
|
||||
if (v.tm===tms.projectTm) {
|
||||
return 0//maxSw*1.2
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
}),
|
||||
itemStyle: {
|
||||
color: '#a1fcfd',
|
||||
backgroundColor: {
|
||||
image: require("../../../../assets/icons/arrow.png")
|
||||
}
|
||||
},
|
||||
label: {
|
||||
offset:[0,10],
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: function(value, index) {
|
||||
return `{img0|}`;
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
fontsize: 20
|
||||
},
|
||||
img0: {
|
||||
height: 100,
|
||||
width: 10,
|
||||
backgroundColor: {
|
||||
image: `${process.env.PUBLIC_URL}/assets/xyt/fxdd/dqsj2.svg`
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Form, Input, Button, Table, Radio, Tabs } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
import moment from 'moment';
|
||||
import './index.less'
|
||||
import ModalForm1 from './table1'
|
||||
import { httpget2, httppost2 } from '../../../../utils/request';
|
||||
import apiurl from '../../../../service/apiurl';
|
||||
|
||||
const Page = ({projectId,onCancel,show}) => {
|
||||
const [data,setData] = useState({data:[],tms:{}})
|
||||
const [tab,setTab] = useState('1')
|
||||
const [tabs, setTabsChange] = useState(0)
|
||||
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '降雨量(mm)', key: 'drp', dataIndex: 'drp', align:"center", width:100,render:(v,row)=>{
|
||||
const val = v===null?'-':Number(v).toFixed(2)
|
||||
return <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>{val}{row.ispreDrp==='1'?<div style={{marginLeft:'5px',width:'20px',height:'20px',borderRadius:"10px",border:'1px solid rgb(245, 154, 35)',color:'rgb(245, 154, 35)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'12px'}}>预</div>:null}</div>
|
||||
}},
|
||||
{ title: '实测水位(m)', key: 'realSwHValue', dataIndex: 'realSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报水位(m)', key: 'ycSwHValue', dataIndex: 'ycSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '入库流量(m³/s)', key: 'realRkQValue', dataIndex: 'realRkQValue', width:120, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报入库流量(m³/s)', key: 'ycRkQValue', dataIndex: 'ycRkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '实际出库流量(m³/s)', key: 'realCkQValue', dataIndex: 'realCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '预报出库流量(m³/s)', key: 'ycCkQValue', dataIndex: 'ycCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
|
||||
const columns2 = [
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", render:v=>v.slice(0, 16)},
|
||||
{ title: '流量', key: 'realSwHValue', dataIndex: 'realSwHValue', align:"center",render:(v)=><Input style={{width:"200px"}} defaultValue={v}></Input>},
|
||||
];
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
(async()=>{
|
||||
const {code , data} = await httpget2(apiurl.fxdd_xyt.hsyb.ybfagl.getData+'?projectId='+projectId)
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
setData({data:[...data.voList],tms:{
|
||||
forecastTime: data.forecastTm,
|
||||
projectTm: data.projectTm,
|
||||
startTime: data.startTm,
|
||||
endTime: data.endTm,
|
||||
forecastPeriod: data.forecastPeriod,
|
||||
forecastWarm: data.forecastWarm,
|
||||
type:data.type,
|
||||
ycMaxSwH:data.ycMaxSwH,
|
||||
ycMaxRkQ:data.ycMaxRkQ,
|
||||
ycMaxCkQ:data.ycMaxCkQ,
|
||||
ycSumFlood:data.ycSumFlood,
|
||||
}})
|
||||
})()
|
||||
},[])
|
||||
return (
|
||||
<div className='normalModalStyle homeModal2' style={{paddingBottom:'20px'}}>
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
预报成果详情
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={onCancel} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
<Tabs
|
||||
onChange={(e) => setTabsChange(e)}
|
||||
activeKey={tabs}
|
||||
style={{paddingLeft:'20px'}}
|
||||
items={[
|
||||
{label: '方案查看',key: 0},
|
||||
{label: '条件配置',key: 1},
|
||||
]}
|
||||
>
|
||||
</Tabs>
|
||||
{
|
||||
tabs===0?<>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar'>
|
||||
预见期(小时)：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastPeriod}</span>
|
||||
预热期(天)：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastWarm}</span>
|
||||
预报时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.forecastTime}</span>
|
||||
开始时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.startTime}</span>
|
||||
结束时间：
|
||||
<span style={{marginRight:'55px'}}>{data?.tms?.endTime}</span>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_tab'>
|
||||
<Radio.Group onChange={(e)=>{setTab(e.target.value)}} defaultValue="1">
|
||||
<Radio.Button value="1">数据图</Radio.Button>
|
||||
<Radio.Button value="2">数据表</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar2'>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最高调洪水位(m):<span>{data?.tms?.ycMaxSwH?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大入库流量(m³/s):<span>{data?.tms?.ycMaxRkQ?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大下泄流量(m³/s):<span>{data?.tms?.ycMaxCkQ?.toFixed(2)}</span></div>
|
||||
<div className='fxdd_hsybjs_content_item2_toolbar_content'>预报洪水总量(万m³):<span>{data?.tms?.ycSumFlood?.toFixed(2)}</span></div>
|
||||
</div>
|
||||
<div className='fxdd_hsybjs_content_item2_content'>
|
||||
{
|
||||
tab==='1'?
|
||||
<ReactEcharts option={drpOption(data)} style={{width: "1500px", height: '600px'}}/>
|
||||
:null //<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||||
}
|
||||
{
|
||||
tab==='2'?
|
||||
<div className="colorTable" style={{padding:"10px 30px",height:'600px'}}>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={data.data}
|
||||
scroll={{ y: "540px"}}
|
||||
/>
|
||||
</div>:null
|
||||
}
|
||||
</div>
|
||||
</>:null
|
||||
}
|
||||
{
|
||||
tabs===1?<>
|
||||
<div className="colorTable" style={{padding:"10px 30px",height:'600px'}}>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns2}
|
||||
pagination={false}
|
||||
dataSource={data.data}
|
||||
scroll={{ y: "500px"}}
|
||||
/>
|
||||
<div style={{padding:'15px',textAlign:'right'}}>
|
||||
<Button type="primary" onClick={()=>show('aaaa')}>加载方案</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>:null
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
.fxdd_hsybjs_content_item2_toolbar{
|
||||
padding: 0 20px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
img{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.fxdd_hsybjs_content_item2_toolbar_tab{
|
||||
flex: 1;
|
||||
margin-right: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.fxdd_hsybjs_content_item2_toolbar2{
|
||||
padding: 0 20px;
|
||||
margin: 0 20px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
|
||||
.fxdd_hsybjs_content_item2_toolbar_content{
|
||||
width: 24%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
span{
|
||||
margin-left: 10px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fxdd_hsybjs_content_item2_content{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
// background: red;
|
||||
|
||||
|
||||
.fxdd_hsybjs_content_item2_content_flow{
|
||||
margin: 10px 20px;
|
||||
margin-top: 40px;
|
||||
height: 150px;
|
||||
padding: 0 50px;
|
||||
background: rgba(245, 248, 255, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fxdd_hsybjs_content_item2_content_flow_item{
|
||||
// width: 24%;
|
||||
height: 100px;
|
||||
|
||||
|
||||
.fxdd_hsybjs_content_item2_content_flow_item_item1{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.fxdd_hsybjs_content_item2_content_flow_item_item1_icon{
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 23px;
|
||||
border: 1px solid #8c8c8c;
|
||||
.fxdd_hsybjs_content_item2_content_flow_item_item1_icon2{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 20px;
|
||||
background: rgb(128, 174, 252);
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
.fxdd_hsybjs_content_item2_content_flow_item_item1_icon3{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fxdd_hsybjs_content_item2_content_flow_item_item2{
|
||||
padding: 10px 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React, { useEffect, useState, useRef, useMemo } from 'react';
|
||||
import { Form, Input, Button, Table, Radio } from 'antd';
|
||||
import { EyeOutlined } from '@ant-design/icons';
|
||||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
import moment from 'moment';
|
||||
import './index.less'
|
||||
|
||||
|
||||
const Page = ({record}) => {
|
||||
const columns = useMemo(()=>{
|
||||
if(record.type==='产流计算'){
|
||||
return [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '面雨量P(mm)', key: 'drp', dataIndex: 'drp', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '土壤含水量Pa(mm)', key: 'pa', dataIndex: 'pa', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
{ title: '径流深R(mm)', key: 'r', dataIndex: 'r', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
}else if(record.type==='汇流计算'){
|
||||
return [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '预测入库流量', key: 'ycRkQValue', dataIndex: 'ycRkQValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
}else{
|
||||
return [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
|
||||
{ title: '预测出库流量', key: 'ycCkQValue', dataIndex: 'ycCkQValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
|
||||
];
|
||||
}
|
||||
},[record])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="colorTable" style={{padding:"0px 0px"}}>
|
||||
<Table rowKey="id"
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={record.list}
|
||||
scroll={{ y: "650px"}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
import React, { useEffect, useState, useRef } from 'react'
|
||||
import { useLocation } from 'react-router'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import {Form, Input, DatePicker, Popover, Collapse , Button, message, Table, Col, Modal} from 'antd';
|
||||
import { createCrudService } from '../../../components/crud/_';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import ModalForm from './information';
|
||||
import { httppost2 } from '../../../utils/request';
|
||||
|
||||
|
||||
const { RangePicker } = DatePicker
|
||||
|
||||
|
||||
const Page = ({ showPanels }) => {
|
||||
const dispatch = useDispatch();
|
||||
let mapObj = useSelector(s => s.map.map)
|
||||
const [index,setIndex] = useState(0)
|
||||
const [data,setData] = useState([])
|
||||
const [projectId, setProjectId] = useState('')
|
||||
const [open, setOpen] = useState(false)
|
||||
const [mode,setMode] = useState(0)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const getData = async()=>{
|
||||
const { code, data } = await httppost2(apiurl.fxdd_xyt.hsyb.ybfagl.page, {
|
||||
"pageSo": {
|
||||
"pageSize": 99999,
|
||||
"pageNumber": 1
|
||||
},
|
||||
"orderField": "chtm",
|
||||
"isAsc": false
|
||||
});
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
setData(data?.records||[])
|
||||
}
|
||||
|
||||
const show = (data)=>{
|
||||
setOpen(false)
|
||||
setMode(1)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='hsyyBox'>
|
||||
{
|
||||
mode===0?<>
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
预报方案
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
</div>
|
||||
</div>
|
||||
<Form className='toolbarBox'>
|
||||
<Form.Item label="队伍名称" name='name' style={{ margin: '0 0 0 5px' }}>
|
||||
<Input style={{width:'90%',height:'28px',lineHeight:'28px'}} />
|
||||
</Form.Item>
|
||||
<Form.Item label='时段选择' name='tm' style={{ margin: '0 0 4px 5px' }}>
|
||||
<RangePicker
|
||||
style={{ width: '90%',height:'28px',lineHeight:'28px' }}
|
||||
// onChange={(v)=>setTms(v)}
|
||||
// value={tms}
|
||||
format='YYYY-MM-DD HH:mm'
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{
|
||||
data?.map((item,listIndex)=>(
|
||||
<>
|
||||
<div
|
||||
style={{height:listIndex===index?'200px':'45px',cursor:'pointer'}}
|
||||
className='hsyylistBox'
|
||||
onClick={()=>setIndex(listIndex)}
|
||||
>
|
||||
<div className='hsyylistBoxTitle'>{(listIndex+1)+'.'+item.name}{
|
||||
listIndex===index?
|
||||
<span onClick={()=>{
|
||||
setOpen(true)
|
||||
setProjectId(item.id)
|
||||
}}>方案配置</span>:
|
||||
<span style={{color:'#8FAFC4',borderColor:'#8FAFC4'}}>方案配置</span>
|
||||
}</div>
|
||||
<div className='hsyylistBoxLabel'>预报时段：<div className='hsyylistBoxValue'>{item.startTm}至{item.endTm}</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最高调洪水位(m)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大入库流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大下泄流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报洪水总量(万m³)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>方案制作时间：<div className='hsyylistBoxValue'>{item.updateTm}</div></div>
|
||||
</div>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</>:null
|
||||
}
|
||||
|
||||
{
|
||||
mode===1?<>
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
卸洪结果
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }} onClick={()=>{
|
||||
setProjectId(null)
|
||||
setMode(0)
|
||||
}}>
|
||||
返回
|
||||
</div>
|
||||
</div>
|
||||
<div className='hsyylistBox' >
|
||||
<div className='hsyylistBoxLabel'>预报时段：<div className='hsyylistBoxValue'>{}至{}</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最高调洪水位(m)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大入库流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报最大下泄流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>预报洪水总量(万m³)：<div className='hsyylistBoxValue'>-</div></div>
|
||||
<div className='hsyylistBoxLabel'>方案制作时间：<div className='hsyylistBoxValue'>{}</div></div>
|
||||
</div>
|
||||
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
水位
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{ margin: '0 10px' }} />
|
||||
出入库流量
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
</div>
|
||||
</div>
|
||||
</>:null
|
||||
}
|
||||
</div>
|
||||
|
||||
<Modal width={1500} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={open} onCancel={()=>setOpen(false)} destroyOnClose={true}>
|
||||
<ModalForm projectId={projectId} onCancel={()=>setOpen(false)} show={show}/>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
|
|
@ -10,6 +10,7 @@ import Ddxsfx from '../fxdd/dqxsfx'
|
|||
// import Tqyb from '../fxdd/tqyb'
|
||||
import Fhxs from './fhxs'
|
||||
import Tqyb from './tqyb'
|
||||
import Hsyy from './hsyy'
|
||||
import Btn from './btn'
|
||||
|
||||
|
||||
|
|
@ -34,6 +35,11 @@ const HomePage = () => {
|
|||
// dispatch.map.setLayerVisible({ ShuiKuLayer: true })
|
||||
// dispatch.map.setZhongxingSk(true)
|
||||
// }
|
||||
if(pathname === '/mgr/sy/hsyy'){
|
||||
dispatch.map.setMode('3d');
|
||||
}else{
|
||||
dispatch.map.setMode('2d');
|
||||
}
|
||||
}, [pathname])
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -83,6 +89,10 @@ const HomePage = () => {
|
|||
<Tqyb showPanels={showPanels}/>
|
||||
) : null}
|
||||
|
||||
{/*四预-洪水预演*/}
|
||||
{pathname === '/mgr/sy/hsyy' ? (
|
||||
<Hsyy showPanels={showPanels}/>
|
||||
) : null}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue