洪水预演地图

public/index.html

@@ -30,6 +30,7 @@
   <script type="text/javascript" src="%PUBLIC_URL%/imouplayer.js"></script>
   <script src="%PUBLIC_URL%/h5Player/h5player.min.js"></script>
   <title>檀树岗水库现代化运行管理矩阵平台</title>
+  <!-- <div class="mytest"></div> -->
 
   <style>
     .lf{
@@ -43,6 +44,17 @@
       display:block;
       clear:both;
     }
+    .mytest{
+      width: 10px;
+      height: 10px;
+      /* border: 1px solid red; */
+      background-color: red;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-100%, -100%);
+      z-index: 999999;
+    }
   </style>
 </head>
 

src/models/auth/_.ts

@@ -324,6 +324,7 @@ export async function loadMenu(): Promise<MenuItem[]> {
             { id: id(), title: '参数管理', path: '/mgr/sy/hsyb/csgl' },
           ]
         },
+        { id: id(), title: '洪水预演', path: '/mgr/sy/hsyy' },
         { id: id(), title: '防汛预案', path: '/mgr/sy/fxya' },
         { id: id(), title: '调度规程', path: '/mgr/sy/ddgc' },
         {

src/setupProxy.js

@@ -6,6 +6,7 @@ module.exports = function (app) {
     '/gunshiApp',
     createProxyMiddleware({
        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/',//移动云

src/views/AppRouters.tsx

@@ -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 /> },

src/views/Home/MapCtrl/Map3D/Map3D.js

@@ -40,6 +40,7 @@ export default class Map3D extends BaseMap {
     this.layerMgr = null;
     this.toolMgr = null;
     this.demo = null;
+    this.list = []
 
     // @ts-ignore
     const open = XMLHttpRequest.prototype.open;
@@ -98,6 +99,7 @@ export default class Map3D extends BaseMap {
         //     requestVertexNormals: true,
         // }),
 
+        shouldAnimate: true, //动画
         scene3DOnly: true,//用于强制场景以 3D 模式运行，禁止切换至 2D 或 Columbus 视图
         animation: false,//获取动画小部件。
         baseLayerPicker: false,//获取BaseLayerPicker。
@@ -230,16 +232,17 @@ export default class Map3D extends BaseMap {
       let height = Math.ceil(viewer.camera.positionCartographic.height);
       let zoom = heightToZoom(height);
 
-      console.log('地图变化监听事件',zoom);
+      // console.log('地图变化监听事件',zoom);
 
     });
 
     this.layerMgr = new LayerMgr3D(viewer);
     this.demo = new Demo3D()
 
-    // this.demo.getQxsy(viewer) //倾斜摄影
-    this.demo.getDem(viewer) //地形图
+    this.demo.getQxsy(viewer) //倾斜摄影
+    // this.demo.getDem(viewer) //地形图
     this.demo.getWxyx(viewer) //卫星影像
+    this.demo.getCzml2(viewer) //demo
     // this.demo.getGltf(viewer) //模型
     // this.demo.getWater(viewer)//简单淹没分析
     // this.demo.getWater2(viewer)
@@ -258,11 +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),
+        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
       }
     });
 
@@ -286,6 +292,27 @@ export default class Map3D extends BaseMap {
       }
     });
 
+    // 假设你已经有了一个Viewer实例，名为viewer
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(function(click) {
+      // 在这里处理点击事件
+      var cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
+      if (cartesian) {
+          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+          var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(12);
+          var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(12);
+          // console.log(longitudeString+','+latitudeString+','+0+',');
+          let list = sessionStorage.getItem('myList')||''
+          list = list + longitudeString+','+latitudeString+','+0+','
+          sessionStorage.setItem('myList',list)
+
+          // 你可以在这里添加更多的逻辑，比如创建一个标记或者显示信息等
+      } else {
+          console.log('点击位置不在地面上');
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 或者使用其他类型的点击事件，如RIGHT_CLICK等
+  
+
     this._map = viewer;
     const toremove = document.getElementsByClassName('cesium-widget-credits');
     if (toremove && toremove[0]) {

src/views/Home/btn/index.js

@@ -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=""/>
                     影像图

src/views/Home/homePanelsLayoutPage/item_gongcheng.js

@@ -31,9 +31,9 @@ const Page = () => {
             return [
                 { title: '监测点', key: 'cd', dataIndex: 'cd',align: "center",width: 80, ellipsis: true },
                 { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 80, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}><div>{v?.slice(5,10)}</div><div>{v?.slice(11,16)}</div></div> },
-                { title: <div><div>e方向</div><div>(mm)</div></div>, key: 'de', dataIndex: 'de',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.xstatus===1?'red':'#3B4859'}}>{v}</div> },
-                { title: <div><div>n方向</div><div>(mm)</div></div>, key: 'dn', dataIndex: 'dn',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.ystatus===1?'red':'#3B4859'}}>{v}</div> },
-                { title: <div><div>u方向</div><div>(mm)</div></div>, key: 'du', dataIndex: 'du',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.hstatus===1?'red':'#3B4859'}}>{v}</div> },
+                { title: <div><div>x方向</div><div>(mm)</div></div>, key: 'de', dataIndex: 'de',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.xstatus===1?'red':'#3B4859'}}>{v}</div> },
+                { title: <div><div>y方向</div><div>(mm)</div></div>, key: 'dn', dataIndex: 'dn',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.ystatus===1?'red':'#3B4859'}}>{v}</div> },
+                { title: <div><div>h方向</div><div>(mm)</div></div>, key: 'du', dataIndex: 'du',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.hstatus===1?'red':'#3B4859'}}>{v}</div> },
             ]
         }
     }, [checked]);

src/views/Home/hsyy/index.js

@@ -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

src/views/Home/hsyy/index.less

@@ -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;
+            }
+        }
+    }
+}

src/views/Home/hsyy/information/drpOption.js

@@ -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`
+                }
+            }, 
+          }
+        },
+      },
+    ]
+  };
+}

src/views/Home/hsyy/information/index.js

@@ -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;

src/views/Home/hsyy/information/index.less

@@ -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;
+
+            }
+        }
+    }
+}

src/views/Home/hsyy/information/table1.js

@@ -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;

src/views/Home/hsyy/ybfa.js

@@ -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

src/views/Home/index.tsx

@@ -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}
           
 
 

src/views/gcaqjc/bzt2/index.js

@@ -46,9 +46,9 @@ export default function Page({isHome}) {
   const columnsWy = [
     { title: '监测点', key: 'cdnm', dataIndex: 'cdnm',align: "center",width: 150, ellipsis: true },
     { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 80, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}><div>{v?.slice(5,10)}</div><div>{v?.slice(11,16)}</div></div> },
-    { title: <div><div>e方向</div><div>(mm)</div></div>, key: 'de', dataIndex: 'de',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.xstatus===1?'red':'#3B4859'}}>{v}</div> },
-    { title: <div><div>n方向</div><div>(mm)</div></div>, key: 'dn', dataIndex: 'dn',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.ystatus===1?'red':'#3B4859'}}>{v}</div> },
-    { title: <div><div>u方向</div><div>(mm)</div></div>, key: 'du', dataIndex: 'du',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.hstatus===1?'red':'#3B4859'}}>{v}</div> },
+    { title: <div><div>x方向</div><div>(mm)</div></div>, key: 'de', dataIndex: 'de',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.xstatus===1?'red':'#3B4859'}}>{v}</div> },
+    { title: <div><div>y方向</div><div>(mm)</div></div>, key: 'dn', dataIndex: 'dn',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.ystatus===1?'red':'#3B4859'}}>{v}</div> },
+    { title: <div><div>h方向</div><div>(mm)</div></div>, key: 'du', dataIndex: 'du',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.hstatus===1?'red':'#3B4859'}}>{v}</div> },
   ]
 
 
@@ -112,7 +112,6 @@ export default function Page({isHome}) {
             {
               syList.map((item)=>
                 <div className={'gcaqjc_bzt_sy_'+item.stationCode} onClick={()=>{
-                  debugger
                   setOpenSy(true)
                   setModalData(item)
                 }}>

src/views/gcaqjc/bzt2/index.less

@@ -88,8 +88,8 @@
       font-size: 10px;
       color: #00c188;
       cursor: pointer;
-      left: 0;
-      top: 0;
+      left: -10000px;
+      top: -10000px;
       span{
         transform: scaleX(0.8);
         letter-spacing: -0.8px;
@@ -113,8 +113,8 @@
       font-size: 10px;
       color: #00c188;
       cursor: pointer;
-      left: 0;
-      top: 0;
+      left: -10000px;
+      top: -10000px;
       span{
         transform: scaleX(0.8);
         letter-spacing: -0.8px;
@@ -138,8 +138,8 @@
       font-size: 10px;
       color: #00c188;
       cursor: pointer;
-      left: 0;
-      top: 0;
+      left: -10000px;
+      top: -10000px;
       span{
         transform: scaleX(0.8);
         letter-spacing: -0.8px;
@@ -163,8 +163,8 @@
       color: #00c188;
       font-size: 10px;
       cursor: pointer;
-      left: 0;
-      top: 0;
+      left: -10000px;
+      top: -10000px;
     }
 
     //ZB0+130

src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js

@@ -11,6 +11,9 @@ export default function jrxOptions(data = {}, type = "1",typeName='1') {
    const type4 = ["UPD11", "UPD14"];
    const type5 = ["UPD3", "UPD6", "UPD9"];
    const type6 = ["UPD12", "UPD15"];
+
+   // 管底高程
+
    const alltype = typeName == "1" ? type1 :
       typeName == "2" ? type2 :
          typeName == "3" ? type3 :
@@ -52,30 +55,30 @@ export default function jrxOptions(data = {}, type = "1",typeName='1') {
       []
    // gz1、gz2、gz3、gz4分别为渗压管
    const gz1 = data[alltype[0]] ?
-      type == "3" ? [[47, 101], [47, data[alltype[0]]]] :
-         type == "2" ? [[45.5, 98], [45.5, data[alltype[0]]]] :
-         type == "1" ? [[44, 83], [44, data[alltype[0]]]] :
+      type == "3" ? [[47, typeName =='5' ?76.56:92.18], [47, data[alltype[0]]]] :
+         type == "2" ? [[45.5, typeName =='3' ?76.16:77.18], [45.5, data[alltype[0]]]] :
+         type == "1" ? [[44, typeName =='1' ?79.16:77.18], [44, data[alltype[0]]]] :
             [[47.5, 158], [85, data[alltype[0]]]]
       : [];
    
    const gz2 = data[alltype[1]] ?
-      type == "3" ? [[51, 101], [51, data[alltype[1]]]] :
-         type == "2" ? [[50, 98], [50, data[alltype[1]]]] :
-         type == "1" ? [[51.5, 82], [51.5, data[alltype[1]]]] :
+      type == "3" ? [[51, typeName =='5' ?77.18:83.50], [51, data[alltype[1]]]] :
+         type == "2" ? [[50, typeName =='3' ?77.18:77.50], [50, data[alltype[1]]]] :
+         type == "1" ? [[51.5, typeName =='1' ?77.18:74.5], [51.5, data[alltype[1]]]] :
             [[53.6, 158], [53.6, data[alltype[1]]]] :
       [];
 
    const gz3 = data[alltype[2]] ?
-      type == "3" ? [[58.5, 95], [58.5, data[alltype[2]]]] :
-         type == "2" ? [[58, 92], [58, data[alltype[2]]]] :
-         type == "1" ? [[58, 81], [58, data[alltype[2]]]] :
+      type == "3" ? [[58.5, 81.50], [58.5, data[alltype[2]]]] :
+         type == "2" ? [[58, 80.50], [58, data[alltype[2]]]] :
+         type == "1" ? [[58, 66.50], [58, data[alltype[2]]]] :
             [[73, 161], [73, data[alltype[2]]]] : [];
    
    
    const gz4 = data[alltype[3]] ?
       type == "3" ? [] :
-         type == "2" ? [[77, 82], [77, data[alltype[3]]]] :
-         type == "1" ? [[79, 78], [79, data[alltype[3]]]] :
+         type == "2" ? [[77, 73.50], [77, data[alltype[3]]]] :
+         type == "1" ? [[79, 72.50], [79, data[alltype[3]]]] :
             [[85, 166], [85, data[alltype[3]]]] : [];
    
    // 将渗压管连起来的线

src/views/gcaqjc/sjtjcx/ndwytjb/index.js

@@ -16,7 +16,7 @@ const Page = () => {
   const [table2Data, setTable2Data] = useState([])
   const [loading, setLoading] = useState(false)
   const [wyObj, setWyObj] = useState(false)
-  const wyList = ["e","n","u"]
+  const wyList = ["x","y","h"]
   const columns1 = [
     { title: '序号', key: 'inx', dataIndex: 'inx', width: 150, align:"center"},
   ];
@@ -84,9 +84,9 @@ const Page = () => {
       let newData = res.data?.map((s, i) => {
         newArr.push(s.list?.map((c, i) => ({
           [c.cd]: (c.value || c.value == 0) ? c.value : '-',
-           [`e_${c.cd}`]:c.de ,
-           [`n_${c.cd}`]:c.dn ,
-           [`u_${c.cd}`]:c.du ,
+           [`x_${c.cd}`]:c.de ,
+           [`y_${c.cd}`]:c.dn ,
+           [`h_${c.cd}`]:c.du ,
          tm: c.tm,
         })))
         return {

src/views/gcaqjc/sjtjcx/ndwytjb/toolbar.js

@@ -31,9 +31,9 @@ const ToolBar = ({ setSearchVal, setDmName, exportFile, role,list,setWyObj }) =>
   useEffect(() => {
    let time = moment()
    form.setFieldValue("tm", time)
-   form.setFieldValue("wy","07")
+   form.setFieldValue("wy","01")
     setSearchVal({ year: moment().format("YYYY")})
-    setWyObj({ wy: "07"})
+    setWyObj({ wy: "01"})
   }, [])
   useEffect(() => {
     if (list.length > 0) {

src/views/gcaqjc/sjtjcx/sjlr/wy/index.js

@@ -22,11 +22,11 @@ const Page = () => {
     { title: '水库编码设备编码', key: 'resCd', dataIndex: 'resCd', width: 200, ellipsis: true, align:"center" },
     { title: '测点编号', key: 'cd', dataIndex: 'cd', width: 200, align:"center"},
     {
-      title: 'e方向变形值(mm)', key: 'de', dataIndex: 'de', width: 200, align:"center",
+      title: 'x方向变形值(mm)', key: 'de', dataIndex: 'de', width: 200, align:"center",
     },
-    { title: 'n方向变形值(mm)', key: 'dn', dataIndex: 'dn', width: 200, ellipsis: true,align:"center", },
+    { title: 'y方向变形值(mm)', key: 'dn', dataIndex: 'dn', width: 200, ellipsis: true,align:"center", },
  
-    { title: 'u方向变形值(mm)', key: 'du', dataIndex: 'du', width: 200, ellipsis: true, align: "center", },
+    { title: 'h方向变形值(mm)', key: 'du', dataIndex: 'du', width: 200, ellipsis: true, align: "center", },
     { title: '站点高程', key: 'alt', dataIndex: 'alt', width: 200, align:"center"},
     { title: '监测时间', key: 'tm', dataIndex: 'tm', width: 200, align:"center"},
     { title: '更新时间', key: 'updateTm', dataIndex: 'updateTm', width: 200, align:"center"},

src/views/gcaqjc/sjtjcx/sljc/index.js

@@ -15,7 +15,7 @@ const Page = () => {
   const columns = [
     { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
     // { title: '水库代码', key: 'rscd', dataIndex: 'rscd', width: 200, ellipsis: true, align:"center" },
-    { title: '水工建筑物编号', key: 'hycncd', dataIndex: 'hycncd', width: 200, align:"center"},
+    // { title: '水工建筑物编号', key: 'hycncd', dataIndex: 'hycncd', width: 200, align:"center"},
     { title: '测点编号', key: 'mpcd', dataIndex: 'mpcd', width: 200, align:"center"},
     { title: '测量时间', key: 'mstm', dataIndex: 'mstm', width: 200, align:"center"},
     { title: '温度(°C)', key: 'tm', dataIndex: 'tm', width: 250, ellipsis: true,align:"center", },

src/views/gcaqjc/sjtjcx/syjc/index.js

@@ -16,8 +16,9 @@ const Page = () => {
   const columns = [
     { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
     { title: '测点名称', key: 'dvcd', dataIndex: 'dvcd', width: 200, ellipsis: true, align:"center" },
-    { title: '水工建筑物编号', key: 'hycncd', dataIndex: 'hycncd', width: 200, align:"center"},
-    { title: '测点编号', key: 'mpcd', dataIndex: 'mpcd', width: 200, align:"center"},
+    { title: '断面名称', key: 'dmName', dataIndex: 'dmName', width: 200, ellipsis: true, align:"center" },
+    // { title: '水工建筑物编号', key: 'hycncd', dataIndex: 'hycncd', width: 200, align:"center"},
+    // { title: '测点编号', key: 'mpcd', dataIndex: 'mpcd', width: 200, align:"center"},
     { title: '测量时间', key: 'mstm', dataIndex: 'mstm', width: 200, align:"center"},
     { title: '温度(°C)', key: 'tm', dataIndex: 'tm', width: 250, ellipsis: true,align:"center", },
     {