洪水预演地图
parent
7eeb850682
commit
1f96ef565c
|
|
@ -5,8 +5,8 @@ module.exports = function (app) {
|
||||||
app.use(
|
app.use(
|
||||||
'/gunshiApp',
|
'/gunshiApp',
|
||||||
createProxyMiddleware({
|
createProxyMiddleware({
|
||||||
// target: 'http://local.gunshiiot.com:18083/',//测试
|
target: 'http://local.gunshiiot.com:18083/',//测试
|
||||||
target: 'http://223.75.53.141:83/',//测试
|
// target: 'http://223.75.53.141:83/',//测试
|
||||||
// target: 'http://192.168.66.199:24105/',//正式
|
// target: 'http://192.168.66.199:24105/',//正式
|
||||||
// target: 'http://36.139.207.50:18083/',//移动云
|
// target: 'http://36.139.207.50:18083/',//移动云
|
||||||
// target: 'http://192.168.66.49:24105/',//移动云
|
// target: 'http://192.168.66.49:24105/',//移动云
|
||||||
|
|
|
||||||
|
|
@ -152,6 +152,7 @@ const AppRouters: React.FC = () => {
|
||||||
//四预
|
//四预
|
||||||
{ path: 'sy/fhxzfx', element: <HomePage /> },
|
{ path: 'sy/fhxzfx', element: <HomePage /> },
|
||||||
{ path: 'sy/tqyb', element: <HomePage /> },
|
{ path: 'sy/tqyb', element: <HomePage /> },
|
||||||
|
{ path: 'sy/hsyy', element: <HomePage /> },
|
||||||
|
|
||||||
//四预-洪水预报
|
//四预-洪水预报
|
||||||
{ path: 'sy/hsyb/hyybjs', element: <Hsybjs /> },
|
{ path: 'sy/hsyb/hyybjs', element: <Hsybjs /> },
|
||||||
|
|
|
||||||
|
|
@ -239,7 +239,7 @@ export default class Map3D extends BaseMap {
|
||||||
this.layerMgr = new LayerMgr3D(viewer);
|
this.layerMgr = new LayerMgr3D(viewer);
|
||||||
this.demo = new Demo3D()
|
this.demo = new Demo3D()
|
||||||
|
|
||||||
// this.demo.getQxsy(viewer) //倾斜摄影
|
this.demo.getQxsy(viewer) //倾斜摄影
|
||||||
// this.demo.getDem(viewer) //地形图
|
// this.demo.getDem(viewer) //地形图
|
||||||
this.demo.getWxyx(viewer) //卫星影像
|
this.demo.getWxyx(viewer) //卫星影像
|
||||||
this.demo.getCzml2(viewer) //demo
|
this.demo.getCzml2(viewer) //demo
|
||||||
|
|
@ -261,14 +261,14 @@ export default class Map3D extends BaseMap {
|
||||||
|
|
||||||
viewer.camera.setView({
|
viewer.camera.setView({
|
||||||
// destination: Cesium.Cartesian3.fromDegrees(...config.homeCenter3D),
|
// 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: {
|
orientation: {
|
||||||
// heading: Cesium.Math.toRadians(0),
|
heading: Cesium.Math.toRadians(-90),
|
||||||
// pitch: Cesium.Math.toRadians(-35.0),
|
pitch: Cesium.Math.toRadians(-35.0),
|
||||||
// roll: 0.0
|
|
||||||
heading: Cesium.Math.toRadians(0),
|
|
||||||
pitch: Cesium.Math.toRadians(-90.0),
|
|
||||||
roll: 0.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);
|
viewer.scene.primitives.add(tileset);
|
||||||
|
|
||||||
|
|
||||||
// const offsetHeight = 10
|
const offsetHeight = 10
|
||||||
const offsetHeight = -70
|
// const offsetHeight = -70
|
||||||
const boundingSphere = tileset.boundingSphere
|
const boundingSphere = tileset.boundingSphere
|
||||||
const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
|
const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
|
||||||
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
|
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}>
|
{/* <div className="lf" title="地图展示图层控制" onClick={showLayers}>
|
||||||
<DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
|
<DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className='mapToolBoxTuCeng' style={{left:open?'-235px':'5px'}}>
|
<div className='mapToolBoxTuCeng' style={{left:open?'-185px':'5px'}}>
|
||||||
<div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black'}} onClick={btn3d}>
|
{/* <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=""/>
|
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/3dMap.jpg`} alt=""/>
|
||||||
3D图
|
3D图
|
||||||
</div>
|
</div> */}
|
||||||
<div className='mapToolBoxTuCengItem' style={{color:(!!layerVisible["SatelliteImage"]&&mode!=='3d')?'#1677ff':'black',cursor:mode==='3d'?'no-drop':'pointer'}} onClick={yxtBtn}>
|
<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=""/>
|
<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 Tqyb from '../fxdd/tqyb'
|
||||||
import Fhxs from './fhxs'
|
import Fhxs from './fhxs'
|
||||||
import Tqyb from './tqyb'
|
import Tqyb from './tqyb'
|
||||||
|
import Hsyy from './hsyy'
|
||||||
import Btn from './btn'
|
import Btn from './btn'
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -34,6 +35,11 @@ const HomePage = () => {
|
||||||
// dispatch.map.setLayerVisible({ ShuiKuLayer: true })
|
// dispatch.map.setLayerVisible({ ShuiKuLayer: true })
|
||||||
// dispatch.map.setZhongxingSk(true)
|
// dispatch.map.setZhongxingSk(true)
|
||||||
// }
|
// }
|
||||||
|
if(pathname === '/mgr/sy/hsyy'){
|
||||||
|
dispatch.map.setMode('3d');
|
||||||
|
}else{
|
||||||
|
dispatch.map.setMode('2d');
|
||||||
|
}
|
||||||
}, [pathname])
|
}, [pathname])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -83,6 +89,10 @@ const HomePage = () => {
|
||||||
<Tqyb showPanels={showPanels}/>
|
<Tqyb showPanels={showPanels}/>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
{/*四预-洪水预演*/}
|
||||||
|
{pathname === '/mgr/sy/hsyy' ? (
|
||||||
|
<Hsyy showPanels={showPanels}/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue