+
影像图
diff --git a/src/views/Home/hsyy/index.js b/src/views/Home/hsyy/index.js
new file mode 100644
index 000000000..0ac975573
--- /dev/null
+++ b/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 (
+
'; + 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}
`; + } + }); + 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` + } + }, + } + }, + }, + ] + }; +} diff --git a/src/views/Home/hsyy/information/index.js b/src/views/Home/hsyy/information/index.js new file mode 100644 index 000000000..4e9f02bf1 --- /dev/null +++ b/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) + returnsetOpen(false)} destroyOnClose={true}>
+ setOpen(false)} show={show}/>
+
+
+ )
+}
+
+export default Page
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index bee5295ca..508008d5f 100644
--- a/src/views/Home/index.tsx
+++ b/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 = () => {
) : null}
+ {/*四预-洪水预演*/}
+ {pathname === '/mgr/sy/hsyy' ? (
+
+ ) : null}
+ {/*
3D图
-
+
*/}
3D图
-
影像图
diff --git a/src/views/Home/hsyy/index.js b/src/views/Home/hsyy/index.js
new file mode 100644
index 000000000..0ac975573
--- /dev/null
+++ b/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 (
+
+
+ )
+}
+
+export default Page
diff --git a/src/views/Home/hsyy/index.less b/src/views/Home/hsyy/index.less
new file mode 100644
index 000000000..6f9ab7254
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/hsyy/information/drpOption.js b/src/views/Home/hsyy/information/drpOption.js
new file mode 100644
index 000000000..1377aac2c
--- /dev/null
+++ b/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+'
+
+ '; + 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}
`; + } + }); + 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` + } + }, + } + }, + }, + ] + }; +} diff --git a/src/views/Home/hsyy/information/index.js b/src/views/Home/hsyy/information/index.js new file mode 100644 index 000000000..4e9f02bf1 --- /dev/null +++ b/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
{val}{row.ispreDrp==='1'?
+ }},
+ { 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)=>},
+ ];
+
+
+ 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 (
+ 预
:null}
+ setTabsChange(e)}
+ activeKey={tabs}
+ style={{paddingLeft:'20px'}}
+ items={[
+ {label: '方案查看',key: 0},
+ {label: '条件配置',key: 1},
+ ]}
+ >
+
+ {
+ tabs===0?<>
+
+ );
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/views/Home/hsyy/information/index.less b/src/views/Home/hsyy/information/index.less
new file mode 100644
index 000000000..c59d2a86d
--- /dev/null
+++ b/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;
+
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/hsyy/information/table1.js b/src/views/Home/hsyy/information/table1.js
new file mode 100644
index 000000000..aee836fd8
--- /dev/null
+++ b/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 (
+ <>
+
+
+ 预报成果详情
+
+
+
+
+
+ 预见期(小时)：
+ {data?.tms?.forecastPeriod}
+ 预热期(天)：
+ {data?.tms?.forecastWarm}
+ 预报时间：
+ {data?.tms?.forecastTime}
+ 开始时间：
+ {data?.tms?.startTime}
+ 结束时间：
+ {data?.tms?.endTime}
+
+
+ {setTab(e.target.value)}} defaultValue="1">
+ 数据图
+ 数据表
+
+
+
+
+ 预报最高调洪水位(m):{data?.tms?.ycMaxSwH?.toFixed(2)}
+ 预报最大入库流量(m³/s):{data?.tms?.ycMaxRkQ?.toFixed(2)}
+ 预报最大下泄流量(m³/s):{data?.tms?.ycMaxCkQ?.toFixed(2)}
+ 预报洪水总量(万m³):{data?.tms?.ycSumFlood?.toFixed(2)}
+
+ {
+ tab==='1'?
+ 
+ }
+ {
+ tab==='2'?
+
+ :null
+ }
+ {
+ tabs===1?<>
+
+
+
:null
+ }
+
+
+
+ :null
+ }
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/views/Home/hsyy/ybfa.js b/src/views/Home/hsyy/ybfa.js
new file mode 100644
index 000000000..354440cf0
--- /dev/null
+++ b/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 (
+ <>
+
+ {
+ mode===0?<>
+
+
+
+
+
+ {
+ data?.map((item,listIndex)=>(
+ <>
+
+ 
+ 预报方案
+
+
+ 预报方案
+
+
+ setIndex(listIndex)}
+ >
+
+
+ ))
+ }
+ :null
+ }
+
+ {
+ mode===1?<>
+ {(listIndex+1)+'.'+item.name}{
+ listIndex===index?
+ {
+ setOpen(true)
+ setProjectId(item.id)
+ }}>方案配置:
+ 方案配置
+ }
+ 预报时段：
+ {item.startTm}至{item.endTm}
预报最高调洪水位(m)：
+ -
预报最大入库流量(m³/s)：
+ -
预报最大下泄流量(m³/s)：
+ -
预报洪水总量(万m³)：
+ -
方案制作时间：
+ {item.updateTm}
+
+
+
+ 卸洪结果
+
+
+ 卸洪结果
+ {
+ setProjectId(null)
+ setMode(0)
+ }}>
+ 返回
+
+
+
+
+ 预报时段：
+ {}至{}
预报最高调洪水位(m)：
+ -
预报最大入库流量(m³/s)：
+ -
预报最大下泄流量(m³/s)：
+ -
预报洪水总量(万m³)：
+ -
方案制作时间：
+ {}
+
+
+
+
+ 水位
+
+
+ 水位
+
+
+
+
+ :null
+ }
+
+
+ 出入库流量
+
+
+ 出入库流量
+
+
+