-
- {data.stationCode}
-
-
-
+
+
+
+ {data.stationCode}
+
+
+
+
+
+
+ getData(tms,data.stationCode)}/>
+
-
- getData(tms,data.stationCode)}/>
-
-
+
@@ -106,9 +118,10 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
}
+
>
)
}
-export default React.memo(ShenLiu);
+export default React.memo(ShuikuPop);
diff --git a/src/views/Home/MapCtrl/Pops/ShenLiu/index.less b/src/views/Home/MapCtrl/Pops/ShenLiu/index.less
new file mode 100644
index 0000000..d78bd25
--- /dev/null
+++ b/src/views/Home/MapCtrl/Pops/ShenLiu/index.less
@@ -0,0 +1,116 @@
+.ShenYaPop{
+ width: 100%;
+ background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+ .modal-header {
+ height: 50px; // Reduced height to bring line closer
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+ position: relative;
+ margin-top: 10px;
+ // Separator line using pseudo-element for precise positioning
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 9px;
+ left: 20px; // Align with title image (which starts at padding-left)
+ right: 0; // Extend to the right edge
+ height: 1px;
+ background: rgba(18, 137, 221, 0.5);
+ }
+
+ .title-wrapper {
+ height: 30px;
+ min-width: 150px;
+ display: flex;
+ align-items: center;
+ background-repeat: no-repeat;
+ background-position: left center;
+ background-size: contain;
+ padding-left: 30px; // Adjust based on image content
+
+ .title-text {
+ font-size: 16px;
+ color: #fff;
+ text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+ letter-spacing: 2px;
+ }
+ }
+
+ .modal-tabs {
+ flex: 1;
+ display: flex;
+ height: 70%;
+ align-items: center;
+ gap: 60px; // Add spacing between tabs
+ justify-content: center;
+ .tab-item {
+ padding: 0 10px; // Reduce horizontal padding inside tab item
+ height: 90%;
+ width: 15%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 16px; // Increase font size
+ color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+ transition: all 0.3s;
+ background-repeat: no-repeat;
+ background-position: center bottom;
+ background-size: 100% 8px; // Control height of the indicator bar
+ position: relative;
+ margin-bottom: -1px; // Align with bottom border if needed
+
+ &:hover {
+ color: #fff;
+ }
+
+ &.active {
+ color: #fff;
+ text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+ // Selected background image
+ background-image: url('../../../../../assets/images/modal/selected.png');
+ background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+ background-position: center center; // Push image slightly down to align with bottom edge
+ }
+ }
+ }
+
+ .close-btn {
+ cursor: pointer;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 18px;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+ }
+ .modal-body {
+ // flex: 1;
+ height: 570px;
+ overflow: auto;
+ padding: 10px;
+ color: #fff;
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+ .homeModal1_content{
+ height: 504px;
+ display: flex;
+ padding: 5px 20px 20px 20px;
+ .homeModal1_content_lf{
+ width: 40%;
+ height: 100%;
+ }
+ .homeModal1_content_rf{
+ width: 60%;
+ height: 100%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/MapCtrl/Pops/ShenLiu/indexOld.js b/src/views/Home/MapCtrl/Pops/ShenLiu/indexOld.js
new file mode 100644
index 0000000..1245de6
--- /dev/null
+++ b/src/views/Home/MapCtrl/Pops/ShenLiu/indexOld.js
@@ -0,0 +1,114 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Descriptions, Form, Button, Input, DatePicker } from 'antd';
+import {CloseOutlined} from '@ant-design/icons';
+import ReactEcharts from 'echarts-for-react';
+import { httppost } from '../../../../../utils/request';
+import apiurl from '../../../../../service/apiurl';
+import moment from "moment"
+import ToolBar from './toolbar';
+import TableData from './TableData'
+import drpOption from './drpOption';
+
+function ShenLiu({ id, data, dispatch, onCancel }) {
+ console.log(data);
+ const [ tableData, setTableData ] = useState([])
+ const [ yjData, setYjData ] = useState([])
+ const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
+ const width = 780;
+
+ const closePop = () => {
+ if(onCancel){
+ onCancel()
+ }
+ dispatch.runtime.closeFeaturePop(id);
+ };
+
+ const getData = async(tms,stationCode)=>{
+ const params = {
+ type: 2,
+ dateTimeRangeSo: {
+ start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
+ end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
+ },
+ stationCode: stationCode
+ }
+ const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
+ if(code!==200){
+ return
+ }
+ setTableData(data)
+ }
+
+ const getYjData = async(stationCode)=>{
+ const params = {
+ "pageSo": {
+ "pageSize": 10,
+ "pageNumber": 1
+ },
+ "stationCode": stationCode
+ }
+
+ const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
+ if(code!==200){
+ return
+ }
+ const linshi = []
+ records?.map((item)=>{
+ if(item.status===0){
+ return
+ }
+ if(item.valueOne||0){
+ linshi.push({
+ yjName:item.level ===1?'黄色预警':'红色预警',
+ value:item.valueOne,
+ color:item.level ===1?'#f1bf42':'red'
+ })
+ }
+ if(item.valueTwo||0){
+ linshi.push({
+ yjName:item.level ===1?'黄色预警':'红色预警',
+ value:item.valueTwo,
+ color:item.level ===1?'#f1bf42':'red'
+ })
+ }
+ })
+ setYjData(linshi)
+ }
+
+ useEffect(()=>{
+ getYjData(data.stationCode)
+ getData([moment().add(-1,'months'),moment()],data.stationCode)
+ },[])
+
+ return (
+ <>
+
+
+
+ {data.stationCode}
+
+
+
+
+
+
+ getData(tms,data.stationCode)}/>
+
+
+
+
+ {
+ tableData.length>0?
+
+ :
+ }
+
+
+
+ >
+ )
+}
+
+export default React.memo(ShenLiu);
diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/TableData.js b/src/views/Home/MapCtrl/Pops/ShenYa/TableData.js
index 2e95ff1..eee6970 100644
--- a/src/views/Home/MapCtrl/Pops/ShenYa/TableData.js
+++ b/src/views/Home/MapCtrl/Pops/ShenYa/TableData.js
@@ -5,7 +5,7 @@ import moment from 'moment'
const Tabledata = ({tableData}) => {
const columns = [
- { title: '序号', key: '', dataIndex: '', align: 'center',render:(a,b,c)=>c+1},
+ { title: '序号', key: '', dataIndex: '', align: 'center', width:'100px', render:(a,b,c)=>c+1},
{ title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',render: (rec) =>
{rec ?? "-"} },
{ title: '库水位(m)', key: 'rz', dataIndex: 'rz', align: 'center',render: (rec) =>
{rec ?? "-"} },
{ title: '管水位(m)', key: 'value', dataIndex: 'value', align: 'center',render: (rec) =>
{rec ?? "-"}},
diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js b/src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js
index c7f062f..c7a46c3 100644
--- a/src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js
+++ b/src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js
@@ -42,6 +42,7 @@ export default function drpOption(data,yjData) {
show: true,
// 图例的位置
data: ["压测管水位", "库水位"],
+ textStyle: { color: '#fff' },
},
xAxis: [
{
@@ -53,13 +54,13 @@ export default function drpOption(data,yjData) {
},
axisLabel: {
padding: [0, 0, 100, 0],
- color: '#333',
+ color: '#ffffff',
fontSize: 12,
formatter: val => val.slice(0,10)
},
axisLine: {
lineStyle: {
- color: '#8c8c8c',
+ color: '#ffffff',
width: 1,
}
},
@@ -76,7 +77,7 @@ export default function drpOption(data,yjData) {
name: "压测管水位(m)",
nameTextStyle: {
padding: [0, 0, 10, 10],
- color:'#333333',
+ color:'#ffffff',
fontSize: 14
},
splitLine: {
@@ -88,7 +89,7 @@ export default function drpOption(data,yjData) {
}
},
axisLabel: {
- color: '#333',
+ color: '#ffffff',
fontSize: 12,
},
axisLine: {
@@ -111,7 +112,7 @@ export default function drpOption(data,yjData) {
name: "库水位(m)",
nameTextStyle: {
padding: [0, 0, 10, 10],
- color:'#333333',
+ color:'#ffffff',
fontSize: 14
},
splitLine: {
@@ -123,7 +124,7 @@ export default function drpOption(data,yjData) {
}
},
axisLabel: {
- color: '#333',
+ color: '#ffffff',
fontSize: 12,
},
axisLine: {
diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/index.js b/src/views/Home/MapCtrl/Pops/ShenYa/index.js
index b6e843f..4fe0abf 100644
--- a/src/views/Home/MapCtrl/Pops/ShenYa/index.js
+++ b/src/views/Home/MapCtrl/Pops/ShenYa/index.js
@@ -1,6 +1,16 @@
import React, { useEffect, useState, useMemo } from 'react';
-import { Empty, Form, Button, Input, DatePicker } from 'antd';
-import {CloseOutlined} from '@ant-design/icons';
+import { Empty } from 'antd';
+import {
+ CloseOutlined,
+ CaretUpOutlined,
+ CaretDownOutlined,
+ CaretLeftOutlined,
+ CaretRightOutlined,
+ PlusOutlined,
+ MinusOutlined
+} from "@ant-design/icons";
+import titleBg from '@/assets/images/modal/title.png';
+import './index.less'
import ReactEcharts from 'echarts-for-react';
import { httppost } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
@@ -9,13 +19,12 @@ import ToolBar from './toolbar';
import TableData from './TableData'
import drpOption from './drpOption';
-function ShenYa({ id, data, dispatch, onCancel }) {
- console.log('SY',data);
+function ShuikuPop({ id, data, dispatch, onCancel }) {
+ console.log(data);
const [ tableData, setTableData ] = useState([])
const [ yjData, setYjData ] = useState([])
const [ tabVal, setTabVal ] = useState('1')
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
- const width = 780;
const closePop = () => {
if(onCancel){
@@ -84,33 +93,33 @@ function ShenYa({ id, data, dispatch, onCancel }) {
return (
<>
-
-
-
- {data.stationCode}
-
-
-
+
+
+
+ {data.stationCode}
-
-
-
getData(tms,data.stationCode)} setTabVal={setTabVal}/>
+
+
-
- {
- tabVal==='1'?
+
+
+
+ getData(tms,data.stationCode)} setTabVal={setTabVal}/>
+
+ {
+ tabVal==='1'?
tableData.length>0?
-
+
:
- :null
- }
- {
- tabVal==='2'?
:null
- }
-
+ :null
+ }
+ {
+ tabVal==='2'?:null
+ }
+
>
)
}
-export default React.memo(ShenYa);
+export default React.memo(ShuikuPop);
diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/index.less b/src/views/Home/MapCtrl/Pops/ShenYa/index.less
new file mode 100644
index 0000000..e3b3d33
--- /dev/null
+++ b/src/views/Home/MapCtrl/Pops/ShenYa/index.less
@@ -0,0 +1,100 @@
+.ShenYaPop{
+ width: 100%;
+ background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+ .modal-header {
+ height: 50px; // Reduced height to bring line closer
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+ position: relative;
+ margin-top: 10px;
+ // Separator line using pseudo-element for precise positioning
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 9px;
+ left: 20px; // Align with title image (which starts at padding-left)
+ right: 0; // Extend to the right edge
+ height: 1px;
+ background: rgba(18, 137, 221, 0.5);
+ }
+
+ .title-wrapper {
+ height: 30px;
+ min-width: 150px;
+ display: flex;
+ align-items: center;
+ background-repeat: no-repeat;
+ background-position: left center;
+ background-size: contain;
+ padding-left: 30px; // Adjust based on image content
+
+ .title-text {
+ font-size: 16px;
+ color: #fff;
+ text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+ letter-spacing: 2px;
+ }
+ }
+
+ .modal-tabs {
+ flex: 1;
+ display: flex;
+ height: 70%;
+ align-items: center;
+ gap: 60px; // Add spacing between tabs
+ justify-content: center;
+ .tab-item {
+ padding: 0 10px; // Reduce horizontal padding inside tab item
+ height: 90%;
+ width: 15%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 16px; // Increase font size
+ color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+ transition: all 0.3s;
+ background-repeat: no-repeat;
+ background-position: center bottom;
+ background-size: 100% 8px; // Control height of the indicator bar
+ position: relative;
+ margin-bottom: -1px; // Align with bottom border if needed
+
+ &:hover {
+ color: #fff;
+ }
+
+ &.active {
+ color: #fff;
+ text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+ // Selected background image
+ background-image: url('../../../../../assets/images/modal/selected.png');
+ background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+ background-position: center center; // Push image slightly down to align with bottom edge
+ }
+ }
+ }
+
+ .close-btn {
+ cursor: pointer;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 18px;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+ }
+ .modal-body {
+ // flex: 1;
+ height: 570px;
+ overflow: auto;
+ padding: 10px;
+ color: #fff;
+ position: relative;
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/indexOld.js b/src/views/Home/MapCtrl/Pops/ShenYa/indexOld.js
new file mode 100644
index 0000000..b6e843f
--- /dev/null
+++ b/src/views/Home/MapCtrl/Pops/ShenYa/indexOld.js
@@ -0,0 +1,116 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Empty, Form, Button, Input, DatePicker } from 'antd';
+import {CloseOutlined} from '@ant-design/icons';
+import ReactEcharts from 'echarts-for-react';
+import { httppost } from '../../../../../utils/request';
+import apiurl from '../../../../../service/apiurl';
+import moment from "moment"
+import ToolBar from './toolbar';
+import TableData from './TableData'
+import drpOption from './drpOption';
+
+function ShenYa({ id, data, dispatch, onCancel }) {
+ console.log('SY',data);
+ const [ tableData, setTableData ] = useState([])
+ const [ yjData, setYjData ] = useState([])
+ const [ tabVal, setTabVal ] = useState('1')
+ const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
+ const width = 780;
+
+ const closePop = () => {
+ if(onCancel){
+ onCancel()
+ }
+ dispatch.runtime.closeFeaturePop(id);
+ };
+
+ const getData = async(tms,stationCode)=>{
+ const params = {
+ // type: 2,
+ dateTimeRangeSo: {
+ start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
+ end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
+ },
+ stationCode: stationCode
+ }
+
+ const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
+ if(code!==200){
+ return
+ }
+ setTableData(data)
+ }
+
+ const getYjData = async(stationCode)=>{
+ const params = {
+ "pageSo": {
+ "pageSize": 10,
+ "pageNumber": 1
+ },
+ "stationCode": stationCode
+ }
+
+ const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
+ if(code!==200){
+ return
+ }
+ const linshi = []
+ records?.map((item)=>{
+ if(item.status===0){
+ return
+ }
+ if(item.valueOne||0){
+ linshi.push({
+ yjName:item.level ===1?'黄色预警':'红色预警',
+ value:item.valueOne,
+ color:item.level ===1?'#f1bf42':'red'
+ })
+ }
+ if(item.valueTwo||0){
+ linshi.push({
+ yjName:item.level ===1?'黄色预警':'红色预警',
+ value:item.valueTwo,
+ color:item.level ===1?'#f1bf42':'red'
+ })
+ }
+ })
+ setYjData(linshi)
+ }
+
+ useEffect(()=>{
+ getYjData(data.stationCode)
+ getData([moment().add(-1,'months'),moment()],data.stationCode)
+ },[])
+
+ return (
+ <>
+
+
+
+ {data.stationCode}
+
+
+
+
+
+
+ getData(tms,data.stationCode)} setTabVal={setTabVal}/>
+
+
+ {
+ tabVal==='1'?
+ tableData.length>0?
+
+ :
+ :null
+ }
+ {
+ tabVal==='2'?
:null
+ }
+
+
+ >
+ )
+}
+
+export default React.memo(ShenYa);
diff --git a/src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js b/src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js
index f2a56ec..386aba2 100644
--- a/src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js
+++ b/src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js
@@ -25,7 +25,7 @@ const ToolBar = ({search, setTabVal}) => {
/>
- {setTabVal(e.target.value)}} defaultValue="1" size="large" buttonStyle="outline">
+ {setTabVal(e.target.value)}} defaultValue="1" size='middle' buttonStyle="outline">
数据图
数据表
diff --git a/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.js b/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.js
new file mode 100644
index 0000000..1b6779f
--- /dev/null
+++ b/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import moment from "moment"
+import { CloseOutlined } from '@ant-design/icons';
+import titleBg from '@/assets/images/modal/title.png';
+import { Modal, Tabs } from 'antd';
+import './index.less'
+import ReservoirPanel from '../../../components/Business/SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel'
+
+
+function ShuikuPop({ id, data, dispatch }) {
+ console.log(data);
+ const [show, setShow] = useState(false)
+
+ useEffect(()=>{
+ setTimeout(() => {
+ //防止Modal打开时echarts不能找到正确的大小
+ setShow(true)
+ }, 200);
+ },[])
+
+ const closePop = () => {
+ dispatch.runtime.closeFeaturePop(id);
+ };
+
+ return (
+ <>
+
+
+
+ {data.stnm}
+
+
+
+
+
+
+ {show?:null}
+
+
+ >
+ )
+}
+
+export default React.memo(ShuikuPop);
diff --git a/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.less b/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.less
new file mode 100644
index 0000000..7a64d69
--- /dev/null
+++ b/src/views/Home/MapCtrl/Pops/ShuiKuPop/index.less
@@ -0,0 +1,100 @@
+.shuikuPop{
+ width: 100%;
+ background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+ .modal-header {
+ height: 50px; // Reduced height to bring line closer
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+ position: relative;
+ margin-top: 10px;
+ // Separator line using pseudo-element for precise positioning
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 9px;
+ left: 20px; // Align with title image (which starts at padding-left)
+ right: 0; // Extend to the right edge
+ height: 1px;
+ background: rgba(18, 137, 221, 0.5);
+ }
+
+ .title-wrapper {
+ height: 30px;
+ min-width: 150px;
+ display: flex;
+ align-items: center;
+ background-repeat: no-repeat;
+ background-position: left center;
+ background-size: contain;
+ padding-left: 30px; // Adjust based on image content
+
+ .title-text {
+ font-size: 16px;
+ color: #fff;
+ text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+ letter-spacing: 2px;
+ }
+ }
+
+ .modal-tabs {
+ flex: 1;
+ display: flex;
+ height: 70%;
+ align-items: center;
+ gap: 60px; // Add spacing between tabs
+ justify-content: center;
+ .tab-item {
+ padding: 0 10px; // Reduce horizontal padding inside tab item
+ height: 90%;
+ width: 15%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 16px; // Increase font size
+ color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+ transition: all 0.3s;
+ background-repeat: no-repeat;
+ background-position: center bottom;
+ background-size: 100% 8px; // Control height of the indicator bar
+ position: relative;
+ margin-bottom: -1px; // Align with bottom border if needed
+
+ &:hover {
+ color: #fff;
+ }
+
+ &.active {
+ color: #fff;
+ text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+ // Selected background image
+ background-image: url('../../../../../assets/images/modal/selected.png');
+ background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+ background-position: center center; // Push image slightly down to align with bottom edge
+ }
+ }
+ }
+
+ .close-btn {
+ cursor: pointer;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 18px;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+ }
+ .modal-body {
+ // flex: 1;
+ height: 800px;
+ overflow: auto;
+ padding: 10px;
+ color: #fff;
+ position: relative;
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/MapCtrl/Pops/ShuikuPop.js b/src/views/Home/MapCtrl/Pops/ShuikuPop.js
deleted file mode 100644
index f0f8e55..0000000
--- a/src/views/Home/MapCtrl/Pops/ShuikuPop.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import moment from "moment"
-import {
- CloseOutlined,
-} from '@ant-design/icons';
-import { Modal, Tabs } from 'antd';
-import genDamImage from '../../../../components/DamGraph/DamImage';
-import Skssjc from "../../../../components/skComp/Skssjc";
-import Sksjcx from "../../../../components/skComp/Sksjcx";
-import { reservoirlist } from "../../../../service/station"
-
-
-
-function ShuikuPop({ id, data, dispatch }) {
- console.log(data);
- const [picData, setPicData] = useState({});
- const [damGraph, setDamGraph] = useState();
- const [tableData, setTableData] = useState([])
-
- const getData = async (params) => {
- setTableData(await reservoirlist(params));
- }
-
- useEffect(() => {
- // if (data.url && data.url.length > 1) {
- // setPicData({
- // pic1: data.url[0]?.imgPath,
- // pic2: data.url[1]?.imgPath,
- // pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'),
- // pic2Tm: moment(data.url[1]?.tm).format('YYYY-MM-DD HH:mm:ss'),
- // });
- // } else if (data.url && data.url.length == 1) {
- // setPicData({
- // pic1: data.url[0]?.imgPath,
- // pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'),
- // });
- // }
-
- }, [data]);// eslint-disable-line
-
- useEffect(() => {
- const img = genDamImage(data, 400, 260)
- setDamGraph(img);
- }, [data]);// eslint-disable-line
-
- useEffect(() => {
- let option = {
- sources: ["SW", "SK"],
- args: "",
- };
- getData(option)
- }, [])
- const closePop = () => {
- dispatch.runtime.closeFeaturePop(id);
- };
- const width = 1050;
-
- return (
- <>
-
-
-
-
-
-
-
{data?.stnm}
- {/* {(data?.sttp && data?.stnm==='黑石咀') &&
-
{{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}({{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]})} */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- )
-}
-
-export default React.memo(ShuikuPop);
diff --git a/src/views/Home/MapCtrl/Pops/WeiYi/index.js b/src/views/Home/MapCtrl/Pops/WeiYi/index.js
index d7a08a8..aa4a181 100644
--- a/src/views/Home/MapCtrl/Pops/WeiYi/index.js
+++ b/src/views/Home/MapCtrl/Pops/WeiYi/index.js
@@ -1,6 +1,16 @@
import React, { useEffect, useState, useMemo } from 'react';
-import { Empty, Form, Button, Input, DatePicker } from 'antd';
-import {CloseOutlined} from '@ant-design/icons';
+import { Empty } from 'antd';
+import {
+ CloseOutlined,
+ CaretUpOutlined,
+ CaretDownOutlined,
+ CaretLeftOutlined,
+ CaretRightOutlined,
+ PlusOutlined,
+ MinusOutlined
+} from "@ant-design/icons";
+import titleBg from '@/assets/images/modal/title.png';
+import './index.less'
import ReactEcharts from 'echarts-for-react';
import { httppost } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
@@ -9,14 +19,12 @@ import ToolBar from './toolbar';
import TableData from './TableData'
import drpOption from './drpOption';
-function ShenYa({ id, data, dispatch, onCancel }) {
+function ShuikuPop({ id, data, dispatch, onCancel }) {
console.log(data);
const [ tableData, setTableData ] = useState([])
const [ yjData, setYjData ] = useState([])
const [ tabVal, setTabVal ] = useState('1')
- // const option = useMemo(() => drpOption(tableData), [tableData])
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
- const width = 780;
const closePop = () => {
if(onCancel){
@@ -35,7 +43,7 @@ function ShenYa({ id, data, dispatch, onCancel }) {
stationCode: stationCode
}
- const { code, data} = await httppost(apiurl.monitor.dbaq.wyList,params)
+ const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
if(code!==200){
return
}
@@ -85,35 +93,33 @@ function ShenYa({ id, data, dispatch, onCancel }) {
return (
<>
-
-
-
- {data.stationCode}
-
-
-
+
+
+
+ {data.stationCode}
-
-
-
getData(tms,data.stationCode)} setTabVal={setTabVal}/>
+
+
-
- {
- tabVal==='1'?
+
+
+
+ getData(tms,data.stationCode)} setTabVal={setTabVal}/>
+
+ {
+ tabVal==='1'?
tableData.length>0?
-
- :
-
-
- :null
- }
- {
- tabVal==='2'?
:null
- }
-
+
+ :
+ :null
+ }
+ {
+ tabVal==='2'?:null
+ }
+
>
)
}
-export default React.memo(ShenYa);
+export default React.memo(ShuikuPop);
diff --git a/src/views/Home/MapCtrl/Pops/WeiYi/index.less b/src/views/Home/MapCtrl/Pops/WeiYi/index.less
new file mode 100644
index 0000000..e3b3d33
--- /dev/null
+++ b/src/views/Home/MapCtrl/Pops/WeiYi/index.less
@@ -0,0 +1,100 @@
+.ShenYaPop{
+ width: 100%;
+ background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+ .modal-header {
+ height: 50px; // Reduced height to bring line closer
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+ position: relative;
+ margin-top: 10px;
+ // Separator line using pseudo-element for precise positioning
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 9px;
+ left: 20px; // Align with title image (which starts at padding-left)
+ right: 0; // Extend to the right edge
+ height: 1px;
+ background: rgba(18, 137, 221, 0.5);
+ }
+
+ .title-wrapper {
+ height: 30px;
+ min-width: 150px;
+ display: flex;
+ align-items: center;
+ background-repeat: no-repeat;
+ background-position: left center;
+ background-size: contain;
+ padding-left: 30px; // Adjust based on image content
+
+ .title-text {
+ font-size: 16px;
+ color: #fff;
+ text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+ letter-spacing: 2px;
+ }
+ }
+
+ .modal-tabs {
+ flex: 1;
+ display: flex;
+ height: 70%;
+ align-items: center;
+ gap: 60px; // Add spacing between tabs
+ justify-content: center;
+ .tab-item {
+ padding: 0 10px; // Reduce horizontal padding inside tab item
+ height: 90%;
+ width: 15%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 16px; // Increase font size
+ color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+ transition: all 0.3s;
+ background-repeat: no-repeat;
+ background-position: center bottom;
+ background-size: 100% 8px; // Control height of the indicator bar
+ position: relative;
+ margin-bottom: -1px; // Align with bottom border if needed
+
+ &:hover {
+ color: #fff;
+ }
+
+ &.active {
+ color: #fff;
+ text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+ // Selected background image
+ background-image: url('../../../../../assets/images/modal/selected.png');
+ background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+ background-position: center center; // Push image slightly down to align with bottom edge
+ }
+ }
+ }
+
+ .close-btn {
+ cursor: pointer;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 18px;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+ }
+ .modal-body {
+ // flex: 1;
+ height: 570px;
+ overflow: auto;
+ padding: 10px;
+ color: #fff;
+ position: relative;
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/MapCtrl/Pops/WeiYi/indexOld.js b/src/views/Home/MapCtrl/Pops/WeiYi/indexOld.js
new file mode 100644
index 0000000..d7a08a8
--- /dev/null
+++ b/src/views/Home/MapCtrl/Pops/WeiYi/indexOld.js
@@ -0,0 +1,119 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Empty, Form, Button, Input, DatePicker } from 'antd';
+import {CloseOutlined} from '@ant-design/icons';
+import ReactEcharts from 'echarts-for-react';
+import { httppost } from '../../../../../utils/request';
+import apiurl from '../../../../../service/apiurl';
+import moment from "moment"
+import ToolBar from './toolbar';
+import TableData from './TableData'
+import drpOption from './drpOption';
+
+function ShenYa({ id, data, dispatch, onCancel }) {
+ console.log(data);
+ const [ tableData, setTableData ] = useState([])
+ const [ yjData, setYjData ] = useState([])
+ const [ tabVal, setTabVal ] = useState('1')
+ // const option = useMemo(() => drpOption(tableData), [tableData])
+ const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
+ const width = 780;
+
+ const closePop = () => {
+ if(onCancel){
+ onCancel()
+ }
+ dispatch.runtime.closeFeaturePop(id);
+ };
+
+ const getData = async(tms,stationCode)=>{
+ const params = {
+ // type: 0,
+ dateTimeRangeSo: {
+ start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
+ end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
+ },
+ stationCode: stationCode
+ }
+
+ const { code, data} = await httppost(apiurl.monitor.dbaq.wyList,params)
+ if(code!==200){
+ return
+ }
+ setTableData(data)
+ }
+
+ const getYjData = async(stationCode)=>{
+ const params = {
+ "pageSo": {
+ "pageSize": 10,
+ "pageNumber": 1
+ },
+ "stationCode": stationCode
+ }
+
+ const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
+ if(code!==200){
+ return
+ }
+ const linshi = []
+ records?.map((item)=>{
+ if(item.status===0){
+ return
+ }
+ if(item.valueOne||0){
+ linshi.push({
+ yjName:item.level ===1?'黄色预警':'红色预警',
+ value:item.valueOne,
+ color:item.level ===1?'#f1bf42':'red'
+ })
+ }
+ if(item.valueTwo||0){
+ linshi.push({
+ yjName:item.level ===1?'黄色预警':'红色预警',
+ value:item.valueTwo,
+ color:item.level ===1?'#f1bf42':'red'
+ })
+ }
+ })
+ setYjData(linshi)
+ }
+
+ useEffect(()=>{
+ getYjData(data.stationCode)
+ getData([moment().add(-1,'months'),moment()],data.stationCode)
+ },[])
+
+ return (
+ <>
+
+
+
+ {data.stationCode}
+
+
+
+
+
+
+ getData(tms,data.stationCode)} setTabVal={setTabVal}/>
+
+
+ {
+ tabVal==='1'?
+ tableData.length>0?
+
+ :
+
+
+ :null
+ }
+ {
+ tabVal==='2'?
:null
+ }
+
+
+ >
+ )
+}
+
+export default React.memo(ShenYa);
diff --git a/src/views/Home/MapCtrl/Pops/index.js b/src/views/Home/MapCtrl/Pops/index.js
index e1760b8..9034dcf 100644
--- a/src/views/Home/MapCtrl/Pops/index.js
+++ b/src/views/Home/MapCtrl/Pops/index.js
@@ -2,9 +2,9 @@ import React, { useCallback } from 'react'
import { Button, Modal, Space } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import DrpPop from './DrpPop';
-import ShuikuPop from './ShuikuPop';
+import ShuikuPop from './ShuiKuPop/index.js';
import GongShuiPop from './GongShui';
-import PciStPop from './PciStPop';
+import PciStPop from './PciStPop/index';
import WeiYi from './WeiYi/index.js';
import ShenYa from './ShenYa/index.js';
import ShenLiu from './ShenLiu/index.js';
@@ -55,14 +55,14 @@ function FeaturePops({ mapobj }) {
)
}else if (type === 'hdsw') {
return (
-
dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
+ dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
)
}else if (type === "gongshui" ) {
// 供水
return (
- dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
+ dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
)
@@ -76,21 +76,21 @@ function FeaturePops({ mapobj }) {
}else if (type === 'weiyi'){
//位移
return (
- dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
+ dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
)
}else if (type === 'shenya'){
//渗压
return (
- dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
+ dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
)
}else if (type === 'shenliu'){
//渗流
return (
- dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
+ dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
)
diff --git a/src/views/Home/MapCtrl/Pops/index.less b/src/views/Home/MapCtrl/Pops/index.less
index 00da44d..0d4239e 100644
--- a/src/views/Home/MapCtrl/Pops/index.less
+++ b/src/views/Home/MapCtrl/Pops/index.less
@@ -119,6 +119,11 @@
border-radius: 10px;
}
}
+.home_modal_transparent{
+ .ant-modal-content{
+ background: transparent;
+ }
+}
.normalModalStyle{
width: 100%;
// min-height: 600px;
diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js
index a67cd58..efd7cd7 100644
--- a/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js
+++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js
@@ -76,7 +76,7 @@ const FlowPanel = ({ stcd, cleanMode = false }) => {
实时流量
- {!cleanMode && (
+ {!cleanMode && !stcd && (
站点: