增加弹窗
parent
955e6afb59
commit
9f4fabde9d
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
|
|
@ -453,3 +453,27 @@ input:-webkit-autofill:active {
|
|||
}
|
||||
}
|
||||
}
|
||||
//修改Radio全局样式
|
||||
.ant-radio-group{
|
||||
.ant-radio-button-wrapper{
|
||||
background: transparent;
|
||||
border-color: rgba(0, 160, 233, 0.6);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
|
||||
}
|
||||
.ant-radio-button-wrapper:not(:first-child)::before{
|
||||
background-color: rgba(0, 160, 233, 0.8);
|
||||
padding: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ant-radio-button-wrapper-checked{
|
||||
background: rgba(0, 160, 233, 0.8);
|
||||
border-color: rgba(0, 160, 233, 0.6);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/flow2.png" alt="" className="panel-icon" />
|
||||
<img width="${width-4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/flow2.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}else{
|
||||
|
|
@ -36,7 +36,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
function GongShuiMarker({ data, dispatch, setting, zoom }) {
|
||||
|
||||
useEffect(() => {
|
||||
const width = 13;
|
||||
const width = 20;
|
||||
|
||||
const placeholder = document.getElementById(`marker_gongshui_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ function renderMarker({ status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw3.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}else{
|
||||
|
|
@ -33,7 +33,7 @@ function renderMarker({ status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@ function HdswMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 8;
|
||||
const width = 15;
|
||||
|
||||
const placeholder = document.getElementById(`marker_hdsw_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function renderMarker({ status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/video2.png" alt="" className="panel-icon" />
|
||||
<img width="${width-4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/video2.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}else{
|
||||
|
|
@ -33,7 +33,7 @@ function PicStMarker({ data, dispatch, setting, zoom, distSq, layerVisible }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 10;
|
||||
const width = 15;
|
||||
|
||||
const placeholder = document.getElementById(`marker_tuxiang_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sl3.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sl.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}else{
|
||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sl.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sl.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@ function SLMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 15;
|
||||
const width = 16;
|
||||
|
||||
const placeholder = document.getElementById(`marker_shenliu_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy3.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}else{
|
||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@ function SYMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 15;
|
||||
const width = 16;
|
||||
|
||||
const placeholder = document.getElementById(`marker_shenya_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
@ -116,7 +116,7 @@ function SYMarker({ data, dispatch, setting, zoom }) {
|
|||
transform: 'translateX(-50%)',
|
||||
zIndex: zindexmarker.wyLabel
|
||||
}}>
|
||||
{data.profileName}
|
||||
{data.stationCode}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy3.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}else{
|
||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@ function WYMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 15;
|
||||
const width = 16;
|
||||
|
||||
const placeholder = document.getElementById(`marker_weiyi_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
import {Table} from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import moment from 'moment';
|
||||
import { render } from 'react-dom';
|
||||
|
||||
|
||||
const Tabledata = ({ data, current }) => {
|
||||
const columns = [
|
||||
{title: '序号', key: 'inx', dataIndex: 'inx', align: 'center',},
|
||||
{
|
||||
title: '数据时间', key: 'tm', dataIndex: 'tm', align: 'center',
|
||||
render:(rec) => <span>{rec ? moment(rec).format("YYYY-MM-DD HH:mm") : "-"}</span>
|
||||
},
|
||||
{
|
||||
title: '流量(m³/s)', key: 'q', dataIndex: 'q', align: 'center',
|
||||
render: (rec) => <span>{rec ?? "-"}</span>
|
||||
},
|
||||
{
|
||||
title: '水量(m³)', key: 'v', dataIndex: 'v', align: 'center',
|
||||
render: (rec) => <span>{rec ?? "-"}</span>
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const [tableData, setTableData] = useState([])
|
||||
useEffect(() => {
|
||||
if (data.length > 0) {
|
||||
setTableData(data)
|
||||
}
|
||||
},[data])
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
rowKey="adcd"
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={tableData}
|
||||
/>
|
||||
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default Tabledata
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
|
||||
import { useMemo } from 'react';
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
|
||||
export default function DrpOption(data, num) {
|
||||
console.log("num",num);
|
||||
const minL = Math.floor(Math.min(...data?.map(s => s.q)));
|
||||
const maxL = Math.ceil(Math.max(...data?.map(s => s.q)));
|
||||
const minS = Math.floor(Math.min(...data?.map(s => s.v)));
|
||||
const maxS = Math.ceil(Math.max(...data?.map(s => s.v)));
|
||||
return {
|
||||
title: {
|
||||
text: `时段总水量:${num.value}${num.unit}m³`,
|
||||
top: "2%",
|
||||
right: "12%",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
fontSize:14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// formatter: function (params) {
|
||||
// var res = `${params[0].name.substr('2020-10-14 '.length, 2)}时降雨: ${params[0].data}mm<br />累计降雨: ${params[1].data}mm`;
|
||||
// return res;
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
// x: 40,
|
||||
// y: 30,
|
||||
// x2: 30,
|
||||
// y2: 28,
|
||||
top: '20%',
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '10%',
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
top: "8%",
|
||||
// 图例的位置
|
||||
// data: ['实测', '累计']
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data?.map(item => item.tm),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
formatter: val => val.substr(0,'2020-11-11 11:11'.length)
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name:"流量(m³/s)",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: minL,
|
||||
max: maxL
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name:"水量(m³)",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: minS - 1,
|
||||
max: maxS
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name:'流量',
|
||||
type:'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FAC858",
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
shadowColor: 'rgba(0,0,0,0.4)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 10
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [{
|
||||
name: '最大值',
|
||||
type: 'max',
|
||||
}],
|
||||
},
|
||||
data: data?.map(s => s.q),
|
||||
},
|
||||
{
|
||||
name: '水量',
|
||||
type: 'bar',
|
||||
yAxisIndex:1,
|
||||
barWidth: '10%',
|
||||
data: data?.map(s => s.v),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color:"#5773c7"
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
import React, {useEffect, useMemo, useState} from 'react';
|
||||
import {Button, DatePicker, Form, Descriptions} from 'antd';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import moment from 'moment'
|
||||
import NormalSelect from '../../../../../../components/Form/NormalSelect';
|
||||
import './index.less'
|
||||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
import { httppost } from '../../../../../../utils/request';
|
||||
import apiurl from '../../../../../../service/apiurl';
|
||||
import { exportFile,numberFormat } from '../../../../../../utils/tools';
|
||||
|
||||
|
||||
const {RangePicker} = DatePicker;
|
||||
|
||||
function DrpSearch({record}) {
|
||||
const name = record?.sttp == "QQ" ?"放水管流量": record?.sttp == "PQ" ? "输水管流量" : ""
|
||||
const optionsType = [
|
||||
{
|
||||
label: "今日",
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label: "近一周",
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:"近一月",
|
||||
value:3
|
||||
},
|
||||
{
|
||||
label:"近三月",
|
||||
value:4
|
||||
},
|
||||
{
|
||||
label:"近一年",
|
||||
value:5
|
||||
},
|
||||
]
|
||||
const [data, setData] = useState([]);
|
||||
const [params, setParams] = useState({tm:[]})
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
const option = useMemo(() => {
|
||||
let num = 0;
|
||||
if (data.length > 0) {
|
||||
data.forEach(s => {
|
||||
num += Number(s.v)
|
||||
})
|
||||
return drpOption(data, numberFormat(num));
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const searchTm = (e) => {
|
||||
setParams({
|
||||
...params,
|
||||
tm:e,
|
||||
})
|
||||
};
|
||||
const doSearch = () => {
|
||||
let data = {
|
||||
...params,
|
||||
startTime:params.tm[0].format("YYYY-MM-DD HH:mm:00"),
|
||||
endTime: params.tm[1].format("YYYY-MM-DD HH:mm:00"),
|
||||
}
|
||||
getData(data)
|
||||
}
|
||||
const optionChange = (e) => {
|
||||
onValuesChange(e)
|
||||
}
|
||||
const onValuesChange = (e) => {
|
||||
switch (e) {
|
||||
case 1:
|
||||
setParams({ ...params, tm: [moment().startOf("day"), moment()] })
|
||||
break;
|
||||
case 2:
|
||||
setParams({ ...params, tm: [moment().subtract(7, 'days'), moment()] })
|
||||
break;
|
||||
case 3:
|
||||
setParams({ ...params, tm: [moment().subtract(1, 'months'),moment()] })
|
||||
break;
|
||||
case 4:
|
||||
setParams({ ...params, tm: [moment().subtract(3, 'months'),moment()]})
|
||||
break;
|
||||
case 5:
|
||||
setParams({ ...params, tm: [moment().subtract(1, 'years'),moment()]})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
const exportExcel = () => {
|
||||
let data = {
|
||||
...params,
|
||||
stcd: record.stcd,
|
||||
isAsc: false,
|
||||
sortField: "tm",
|
||||
tm:undefined
|
||||
}
|
||||
httppost(apiurl.monitor.gongshui.export, data, 'blob').then(res => {
|
||||
exportFile(`${name}.xlsx`,res.data)
|
||||
})
|
||||
}
|
||||
const getData = async (params) => {
|
||||
let data = {
|
||||
...params,
|
||||
stcd: record.stcd,
|
||||
isAsc: false,
|
||||
sortField: "tm",
|
||||
tm:undefined
|
||||
}
|
||||
try {
|
||||
const res = await httppost(apiurl.monitor.gongshui.gsPage, data)
|
||||
setData(res.data.map((item,i)=>({...item,inx: i+1})))
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let option = "";
|
||||
if (record.stcd) {
|
||||
option = {
|
||||
stcd: record?.stcd,
|
||||
startTime: params?.startTime || moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:00"),
|
||||
endTime: params?.endTime || moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:00"),
|
||||
tm:[moment().subtract(7, 'days'), moment()]
|
||||
}
|
||||
setParams(option)
|
||||
getData(option)
|
||||
}
|
||||
|
||||
|
||||
}, [current,record])
|
||||
|
||||
|
||||
return (
|
||||
<div style={{width: "98%", height: '56vh'}}>
|
||||
<div className="top">
|
||||
<div style={{ display: "flex", columnGap: 10, alignItems: "center" }}>
|
||||
<span>时间段：</span>
|
||||
<RangePicker
|
||||
showTime
|
||||
allowClear
|
||||
style={{ width: "407px" }}
|
||||
defaultValue={params.tm}
|
||||
onChange={searchTm}
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value={params.tm}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", columnGap: 10, alignItems: "center",margin:"0 20px" }}>
|
||||
<span>常用时段：</span>
|
||||
<NormalSelect
|
||||
allowClear
|
||||
style={{ width: "150px" }}
|
||||
options={optionsType}
|
||||
onChange={(e)=>optionChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<Button type="primary" onClick={doSearch} style={{ marginLeft: "10px" }}>查询</Button>
|
||||
<Button onClick={exportExcel} style={{marginLeft: "10px"}}>导出</Button>
|
||||
</div>
|
||||
<div className="mid">
|
||||
<div className="mid-left">
|
||||
<TableData data={data} current={current}/>
|
||||
</div>
|
||||
<div className="mid-right">
|
||||
{
|
||||
data?.length > 0 ?
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{width: "100%", height: '100%'}}
|
||||
/> : <div style={{textAlign: "center", margin: "10%"}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpSearch
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.time-type {
|
||||
margin-left: 10rem;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
border: 1px solid #cccccc;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #5FB7FF;
|
||||
background: #F0F7FF;
|
||||
border: 1px solid #5FB7FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mid {
|
||||
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 90%;
|
||||
.mid-left {
|
||||
border: 1px solid #eee;
|
||||
width: 47%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mid-right {
|
||||
width: 52%;
|
||||
height: 100%;
|
||||
.react-chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
font-size: 14px;
|
||||
margin-top: 40px;
|
||||
.footer-row{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.footer-item{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
.footer-name{
|
||||
background: #E0EDFF ;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.footer-num{
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +1,44 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import moment from "moment"
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import Jcsj from "./GsJcsj";
|
||||
import titleBg from '@/assets/images/modal/title.png';
|
||||
import { Modal, Tabs } from 'antd';
|
||||
import './index.less'
|
||||
import FlowPanel from '../../../components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel'
|
||||
|
||||
|
||||
function RealDrpTip({ id, data, dispatch }) {
|
||||
console.log("供水弹框数据porps",data);
|
||||
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);
|
||||
};
|
||||
|
||||
const width = 1050;
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dp-popup" style={{ position: 'absolute', top: 0, left: 0, width, lineHeight: 1 }}>
|
||||
<div className="dp-popup-content" style={{borderRadius:'10px'}}>
|
||||
<div className="content-body tyb skpop" id='tyb' style={{ height: '100%' }}>
|
||||
<div className="normalModalStyle">
|
||||
<div className="normalModalStyle_title" style={{marginBottom:0}}>
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
<span>{data.stnm} </span>
|
||||
{/* {data?.sttp &&
|
||||
<span style={
|
||||
{
|
||||
display:"inline-block",
|
||||
padding: "5px 10px",
|
||||
color: "#74a7ff",
|
||||
border: "1px solid #74a7ff",
|
||||
borderRadius: "5px"
|
||||
}
|
||||
}> {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}（{{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]}）</span>} */}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
<div className='shuikuPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stnm}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ paddingLeft: 15,paddingTop:15,background:"#fff",borderRadius:'0 0 10px 10px' }} >
|
||||
<Jcsj record={data}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="boxfoot"></div>
|
||||
<div className="modal-body">
|
||||
{show?<FlowPanel stcd={data.stcd}/>:null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(RealDrpTip);
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
CloseOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CaretLeftOutlined,
|
||||
CaretRightOutlined,
|
||||
PlusOutlined,
|
||||
MinusOutlined
|
||||
} from "@ant-design/icons";
|
||||
import titleBg from '@/assets/images/modal/title.png';
|
||||
import './index.less'
|
||||
import { httpget, httppost } from '@/utils/request';
|
||||
import HFivePlayer from '../../../../../components/VideoCom/videoPlary';
|
||||
import apiurl from '@/service/apiurl';
|
||||
|
||||
|
||||
function ShuikuPop({ id, data, dispatch }) {
|
||||
console.log(data);
|
||||
const [videoSrc, setVideoSrc] = useState('')
|
||||
|
||||
const getVideoSrc = async() => {
|
||||
try {
|
||||
const res = await httpget(`${apiurl.spjk.srcData}${data.indexCode}`)
|
||||
setVideoSrc(res.data);
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 云台控制
|
||||
let timer = null;
|
||||
// 云台控制
|
||||
const onOperation = async(params) => {
|
||||
let data1 = {
|
||||
...params,
|
||||
indexCode: data?.indexCode,
|
||||
action:0
|
||||
}
|
||||
try {
|
||||
const res = await httppost(apiurl.spjk.controler, data1)
|
||||
if (res.code == 200) {
|
||||
onOperation1(params)
|
||||
// if(timer) clearTimeout(timer)
|
||||
// timer = setTimeout(() => {
|
||||
|
||||
// },0)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const onOperation1 = async(params) => {
|
||||
let data1 = {
|
||||
...params,
|
||||
indexCode: data?.indexCode,
|
||||
action:1
|
||||
}
|
||||
try {
|
||||
const res = await httppost(apiurl.spjk.controler,data1)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (data.indexCode) {
|
||||
getVideoSrc();
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const closePop = () => {
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='pciStPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.name}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<HFivePlayer
|
||||
size={1}
|
||||
wsUrl={{ src:videoSrc}}
|
||||
playerID={"333"}
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
data?.type == 1 ?
|
||||
<div className='controler' style={{display:"flex",paddingBottom:'20px',margin:"20px 0",color:"#70dbfe",fontSize:35,justifyContent:"space-around"}}>
|
||||
<CaretUpOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='向上'
|
||||
onClick={() => onOperation({speed:30,command:"UP"})}
|
||||
/>
|
||||
<CaretDownOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='向下'
|
||||
onClick={() => onOperation({speed:30,command:"DOWN"})}
|
||||
/>
|
||||
<CaretLeftOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='向左'
|
||||
onClick={() => onOperation({speed:30,command:"LEFT"})}
|
||||
/>
|
||||
<CaretRightOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='向右'
|
||||
onClick={() => onOperation({speed:30,command:"RIGHT"})}
|
||||
/>
|
||||
<PlusOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='放大'
|
||||
onClick={() => onOperation({speed:30,command:"ZOOM_IN"})}
|
||||
/>
|
||||
<MinusOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='缩小'
|
||||
onClick={() => onOperation({speed:30,command:"ZOOM_OUT"})}
|
||||
/>
|
||||
</div>:null
|
||||
}
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
.pciStPop{
|
||||
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: 400px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import moment from 'moment'
|
|||
|
||||
const Tabledata = ({tableData}) => {
|
||||
const columns = [
|
||||
{ title: '序号', key: '', dataIndex: '', align: 'center',width:'40px',render:(a,b,c)=>c+1},
|
||||
{ title: '序号', key: '', dataIndex: '', align: 'center',width:'80px',render:(a,b,c)=>c+1},
|
||||
{ title: '数据时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'200px',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||
{ title: '渗流量', key: 'value', dataIndex: 'value', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { Descriptions, 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,12 +19,11 @@ import ToolBar from './toolbar';
|
|||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
|
||||
function ShenLiu({ id, data, dispatch, onCancel }) {
|
||||
function ShuikuPop({ 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){
|
||||
|
|
@ -32,6 +41,7 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
|||
},
|
||||
stationCode: stationCode
|
||||
}
|
||||
|
||||
const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
|
||||
if(code!==200){
|
||||
return
|
||||
|
|
@ -82,18 +92,20 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal1">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
<div className='ShenYaPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stationCode}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='modal-body'>
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
|
||||
</div>
|
||||
|
||||
<div className='homeModal1_content'>
|
||||
<div className='homeModal1_content_lf'>
|
||||
<TableData tableData={tableData}/>
|
||||
|
|
@ -107,8 +119,9 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenLiu);
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal1">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
|
||||
</div>
|
||||
<div className='homeModal1_content'>
|
||||
<div className='homeModal1_content_lf'>
|
||||
<TableData tableData={tableData}/>
|
||||
</div>
|
||||
<div className='homeModal1_content_rf'>
|
||||
{
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenLiu);
|
||||
|
|
@ -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) => <span>{rec ?? "-"}</span> },
|
||||
{ title: '库水位(m)', key: 'rz', dataIndex: 'rz', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||
{ title: '管水位(m)', key: 'value', dataIndex: 'value', align: 'center',render: (rec) => <span>{rec ?? "-"}</span>},
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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,23 +93,23 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
<div className='ShenYaPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stationCode}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='modal-body'>
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
</div>
|
||||
<div className='homeModal2_content' >
|
||||
{
|
||||
tabVal==='1'?
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '480px'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}><Empty description={'暂无数据'} /></div>
|
||||
:null
|
||||
}
|
||||
|
|
@ -113,4 +122,4 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
|||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenYa);
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
</div>
|
||||
<div className='homeModal2_content' >
|
||||
{
|
||||
tabVal==='1'?
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}><Empty description={'暂无数据'} /></div>
|
||||
:null
|
||||
}
|
||||
{
|
||||
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenYa);
|
||||
|
|
@ -25,7 +25,7 @@ const ToolBar = ({search, setTabVal}) => {
|
|||
/>
|
||||
</Form.Item>
|
||||
<Form.Item style={{marginLeft:'200px'}}>
|
||||
<Radio.Group onChange={(e)=>{setTabVal(e.target.value)}} defaultValue="1" size="large" buttonStyle="outline">
|
||||
<Radio.Group onChange={(e)=>{setTabVal(e.target.value)}} defaultValue="1" size='middle' buttonStyle="outline">
|
||||
<Radio.Button value="1">数据图</Radio.Button>
|
||||
<Radio.Button value="2">数据表</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<div className='shuikuPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stnm}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{show?<ReservoirPanel stcd={data?.stcd} cleanMode={true} />:null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<div className="dp-popup" style={{ position: 'absolute', top: 0, width,left: 0,height:646, lineHeight: 1,backgroundColor:'#fff',borderRadius:'10px'}}>
|
||||
<div className="dp-popup-content" style={{height:'100%',borderRadius:'10px'}}>
|
||||
<div className="content-body tyb skpop" id='tyb' style={{ height: '100%' }}>
|
||||
<div className="normalModalStyle" style={{borderRadius:10}}>
|
||||
<div className="normalModalStyle_title" style={{marginBottom:0}}>
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
<span>{data?.stnm} </span>
|
||||
{/* {(data?.sttp && data?.stnm==='黑石咀') &&
|
||||
<span style={
|
||||
{
|
||||
display:"inline-block",
|
||||
padding: "5px 10px",
|
||||
color: "#74a7ff",
|
||||
border: "1px solid #74a7ff",
|
||||
borderRadius: "5px"
|
||||
}
|
||||
}> {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}（{{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]}）</span>} */}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{paddingLeft:15}}>
|
||||
<Tabs defaultActiveKey="1">
|
||||
<Tabs.TabPane tab="实时监测" key="1">
|
||||
<Skssjc data={{ ...data }}/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="数据查询" key="2">
|
||||
<Sksjcx record={data}/>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
<div className="boxfoot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
@ -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,26 +93,24 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
<div className='ShenYaPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stationCode}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='modal-body'>
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
</div>
|
||||
<div className='homeModal2_content'>
|
||||
{
|
||||
tabVal==='1'?
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}>
|
||||
<Empty description={'暂无数据'} />
|
||||
</div>
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '480px'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}><Empty description={'暂无数据'} /></div>
|
||||
:null
|
||||
}
|
||||
{
|
||||
|
|
@ -116,4 +122,4 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
|||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenYa);
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
</div>
|
||||
<div className='homeModal2_content'>
|
||||
{
|
||||
tabVal==='1'?
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}>
|
||||
<Empty description={'暂无数据'} />
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
{
|
||||
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenYa);
|
||||
|
|
@ -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 (
|
||||
<Modal width={1050} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={'90%'} transitionName="" wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<ShuikuPop id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}else if (type === "gongshui" ) {
|
||||
// 供水
|
||||
return (
|
||||
<Modal width={1050} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={'90%'} transitionName="" wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<GongShuiPop id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
|
|
@ -76,21 +76,21 @@ function FeaturePops({ mapobj }) {
|
|||
}else if (type === 'weiyi'){
|
||||
//位移
|
||||
return (
|
||||
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={1000} wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<WeiYi id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}else if (type === 'shenya'){
|
||||
//渗压
|
||||
return (
|
||||
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={1000} wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<ShenYa id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}else if (type === 'shenliu'){
|
||||
//渗流
|
||||
return (
|
||||
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={1000} wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<ShenLiu id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -119,6 +119,11 @@
|
|||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
.home_modal_transparent{
|
||||
.ant-modal-content{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.normalModalStyle{
|
||||
width: 100%;
|
||||
// min-height: 600px;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ const FlowPanel = ({ stcd, cleanMode = false }) => {
|
|||
<div className="left-panel">
|
||||
<div className="panel-header">
|
||||
<div className="query-label"><span className="dot"></span>实时流量</div>
|
||||
{!cleanMode && (
|
||||
{!cleanMode && !stcd && (
|
||||
<div className="station-select">
|
||||
<span>站点：</span>
|
||||
<Select
|
||||
|
|
|
|||
|
|
@ -126,35 +126,35 @@ export default function Btn({open, mode, layerVisible, setOpen, mapType, layerVi
|
|||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'HdswLayer',checked:!layerVisible['HdswLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['HdswLayer']} name={'HdswLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/hdsw4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>水库水文站</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'GongShuiLayer',checked:!layerVisible['GongShuiLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['GongShuiLayer']} name={'GongShuiLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>流量站</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'PicStLayer',checked:!layerVisible['PicStLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['PicStLayer']} name={'PicStLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/video.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/video4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>视频站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SYLayer',checked:!layerVisible['SYLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SYLayer']} name={'SYLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>渗压站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SLLayer',checked:!layerVisible['SLLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SLLayer']} name={'SLLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>渗流站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'WYLayer',checked:!layerVisible['WYLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WYLayer']} name={'WYLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/wy.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/wy4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>位移站</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue