增加弹窗
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">
|
<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 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>
|
</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>
|
</div>
|
||||||
`
|
`
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -36,7 +36,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
||||||
function GongShuiMarker({ data, dispatch, setting, zoom }) {
|
function GongShuiMarker({ data, dispatch, setting, zoom }) {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const width = 13;
|
const width = 20;
|
||||||
|
|
||||||
const placeholder = document.getElementById(`marker_gongshui_${data.id}`);
|
const placeholder = document.getElementById(`marker_gongshui_${data.id}`);
|
||||||
if (!placeholder) {
|
if (!placeholder) {
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ function renderMarker({ status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -33,7 +33,7 @@ function renderMarker({ status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
@ -44,7 +44,7 @@ function HdswMarker({ data, dispatch, setting, zoom }) {
|
||||||
const [ show, setShow ] = useState(true)
|
const [ show, setShow ] = useState(true)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const width = 8;
|
const width = 15;
|
||||||
|
|
||||||
const placeholder = document.getElementById(`marker_hdsw_${data.id}`);
|
const placeholder = document.getElementById(`marker_hdsw_${data.id}`);
|
||||||
if (!placeholder) {
|
if (!placeholder) {
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ function renderMarker({ status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -33,7 +33,7 @@ function PicStMarker({ data, dispatch, setting, zoom, distSq, layerVisible }) {
|
||||||
const [ show, setShow ] = useState(true)
|
const [ show, setShow ] = useState(true)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const width = 10;
|
const width = 15;
|
||||||
|
|
||||||
const placeholder = document.getElementById(`marker_tuxiang_${data.id}`);
|
const placeholder = document.getElementById(`marker_tuxiang_${data.id}`);
|
||||||
if (!placeholder) {
|
if (!placeholder) {
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`
|
`
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
@ -41,7 +41,7 @@ function SLMarker({ data, dispatch, setting, zoom }) {
|
||||||
const [ show, setShow ] = useState(true)
|
const [ show, setShow ] = useState(true)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const width = 15;
|
const width = 16;
|
||||||
|
|
||||||
const placeholder = document.getElementById(`marker_shenliu_${data.id}`);
|
const placeholder = document.getElementById(`marker_shenliu_${data.id}`);
|
||||||
if (!placeholder) {
|
if (!placeholder) {
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`
|
`
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
@ -41,7 +41,7 @@ function SYMarker({ data, dispatch, setting, zoom }) {
|
||||||
const [ show, setShow ] = useState(true)
|
const [ show, setShow ] = useState(true)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const width = 15;
|
const width = 16;
|
||||||
|
|
||||||
const placeholder = document.getElementById(`marker_shenya_${data.id}`);
|
const placeholder = document.getElementById(`marker_shenya_${data.id}`);
|
||||||
if (!placeholder) {
|
if (!placeholder) {
|
||||||
|
|
@ -116,7 +116,7 @@ function SYMarker({ data, dispatch, setting, zoom }) {
|
||||||
transform: 'translateX(-50%)',
|
transform: 'translateX(-50%)',
|
||||||
zIndex: zindexmarker.wyLabel
|
zIndex: zindexmarker.wyLabel
|
||||||
}}>
|
}}>
|
||||||
{data.profileName}
|
{data.stationCode}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`
|
`
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
||||||
<div style="position:relative">
|
<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 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>
|
</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>
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
@ -42,7 +42,7 @@ function WYMarker({ data, dispatch, setting, zoom }) {
|
||||||
const [ show, setShow ] = useState(true)
|
const [ show, setShow ] = useState(true)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const width = 15;
|
const width = 16;
|
||||||
|
|
||||||
const placeholder = document.getElementById(`marker_weiyi_${data.id}`);
|
const placeholder = document.getElementById(`marker_weiyi_${data.id}`);
|
||||||
if (!placeholder) {
|
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 { 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 }) {
|
function ShuikuPop({ id, data, dispatch }) {
|
||||||
console.log("供水弹框数据porps",data);
|
console.log(data);
|
||||||
|
const [show, setShow] = useState(false)
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
setTimeout(() => {
|
||||||
|
//防止Modal打开时echarts不能找到正确的大小
|
||||||
|
setShow(true)
|
||||||
|
}, 200);
|
||||||
|
},[])
|
||||||
|
|
||||||
const closePop = () => {
|
const closePop = () => {
|
||||||
dispatch.runtime.closeFeaturePop(id);
|
dispatch.runtime.closeFeaturePop(id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const width = 1050;
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="dp-popup" style={{ position: 'absolute', top: 0, left: 0, width, lineHeight: 1 }}>
|
<div className='shuikuPop'>
|
||||||
<div className="dp-popup-content" style={{borderRadius:'10px'}}>
|
<div className="modal-header">
|
||||||
<div className="content-body tyb skpop" id='tyb' style={{ height: '100%' }}>
|
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||||
<div className="normalModalStyle">
|
<span className="title-text">{data.stnm}</span>
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div style={{ paddingLeft: 15,paddingTop:15,background:"#fff",borderRadius:'0 0 10px 10px' }} >
|
|
||||||
<Jcsj record={data}/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="close-btn" onClick={closePop}>
|
||||||
|
<CloseOutlined />
|
||||||
</div>
|
</div>
|
||||||
<div className="boxfoot"></div>
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
{show?<FlowPanel stcd={data.stcd}/>:null}
|
||||||
</div>
|
</div>
|
||||||
</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 Tabledata = ({tableData}) => {
|
||||||
const columns = [
|
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: 'tm', dataIndex: 'tm', align: 'center',width:'200px',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||||
{ title: '渗流量', key: 'value', dataIndex: 'value', align: 'center',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 React, { useEffect, useState, useMemo } from 'react';
|
||||||
import { Descriptions, Form, Button, Input, DatePicker } from 'antd';
|
import { Empty } from 'antd';
|
||||||
import {CloseOutlined} from '@ant-design/icons';
|
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 ReactEcharts from 'echarts-for-react';
|
||||||
import { httppost } from '../../../../../utils/request';
|
import { httppost } from '../../../../../utils/request';
|
||||||
import apiurl from '../../../../../service/apiurl';
|
import apiurl from '../../../../../service/apiurl';
|
||||||
|
|
@ -9,12 +19,11 @@ import ToolBar from './toolbar';
|
||||||
import TableData from './TableData'
|
import TableData from './TableData'
|
||||||
import drpOption from './drpOption';
|
import drpOption from './drpOption';
|
||||||
|
|
||||||
function ShenLiu({ id, data, dispatch, onCancel }) {
|
function ShuikuPop({ id, data, dispatch, onCancel }) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
const [ tableData, setTableData ] = useState([])
|
const [ tableData, setTableData ] = useState([])
|
||||||
const [ yjData, setYjData ] = useState([])
|
const [ yjData, setYjData ] = useState([])
|
||||||
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
||||||
const width = 780;
|
|
||||||
|
|
||||||
const closePop = () => {
|
const closePop = () => {
|
||||||
if(onCancel){
|
if(onCancel){
|
||||||
|
|
@ -32,6 +41,7 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
||||||
},
|
},
|
||||||
stationCode: stationCode
|
stationCode: stationCode
|
||||||
}
|
}
|
||||||
|
|
||||||
const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
|
const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
|
||||||
if(code!==200){
|
if(code!==200){
|
||||||
return
|
return
|
||||||
|
|
@ -82,19 +92,21 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="normalModalStyle homeModal1">
|
<div className='ShenYaPop'>
|
||||||
<div className="normalModalStyle_title">
|
<div className="modal-header">
|
||||||
<div className="normalModalStyle_title_icon"></div>
|
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||||
{data.stationCode}
|
<span className="title-text">{data.stationCode}</span>
|
||||||
<div className="normalModalStyle_title_cancel">
|
|
||||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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 style={{padding:'0 20px'}}>
|
<div className='homeModal1_content'>
|
||||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
|
|
||||||
</div>
|
|
||||||
<div className='homeModal1_content'>
|
|
||||||
<div className='homeModal1_content_lf'>
|
<div className='homeModal1_content_lf'>
|
||||||
<TableData tableData={tableData}/>
|
<TableData tableData={tableData}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -106,9 +118,10 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 Tabledata = ({tableData}) => {
|
||||||
const columns = [
|
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: '时间', 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: 'rz', dataIndex: 'rz', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||||
{ title: '管水位(m)', key: 'value', dataIndex: 'value', 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,
|
show: true,
|
||||||
// 图例的位置
|
// 图例的位置
|
||||||
data: ["压测管水位", "库水位"],
|
data: ["压测管水位", "库水位"],
|
||||||
|
textStyle: { color: '#fff' },
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
|
|
@ -53,13 +54,13 @@ export default function drpOption(data,yjData) {
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
padding: [0, 0, 100, 0],
|
padding: [0, 0, 100, 0],
|
||||||
color: '#333',
|
color: '#ffffff',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
formatter: val => val.slice(0,10)
|
formatter: val => val.slice(0,10)
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#8c8c8c',
|
color: '#ffffff',
|
||||||
width: 1,
|
width: 1,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -76,7 +77,7 @@ export default function drpOption(data,yjData) {
|
||||||
name: "压测管水位(m)",
|
name: "压测管水位(m)",
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
padding: [0, 0, 10, 10],
|
padding: [0, 0, 10, 10],
|
||||||
color:'#333333',
|
color:'#ffffff',
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
|
|
@ -88,7 +89,7 @@ export default function drpOption(data,yjData) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#333',
|
color: '#ffffff',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
|
|
@ -111,7 +112,7 @@ export default function drpOption(data,yjData) {
|
||||||
name: "库水位(m)",
|
name: "库水位(m)",
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
padding: [0, 0, 10, 10],
|
padding: [0, 0, 10, 10],
|
||||||
color:'#333333',
|
color:'#ffffff',
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
|
|
@ -123,7 +124,7 @@ export default function drpOption(data,yjData) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#333',
|
color: '#ffffff',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,16 @@
|
||||||
import React, { useEffect, useState, useMemo } from 'react';
|
import React, { useEffect, useState, useMemo } from 'react';
|
||||||
import { Empty, Form, Button, Input, DatePicker } from 'antd';
|
import { Empty } from 'antd';
|
||||||
import {CloseOutlined} from '@ant-design/icons';
|
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 ReactEcharts from 'echarts-for-react';
|
||||||
import { httppost } from '../../../../../utils/request';
|
import { httppost } from '../../../../../utils/request';
|
||||||
import apiurl from '../../../../../service/apiurl';
|
import apiurl from '../../../../../service/apiurl';
|
||||||
|
|
@ -9,13 +19,12 @@ import ToolBar from './toolbar';
|
||||||
import TableData from './TableData'
|
import TableData from './TableData'
|
||||||
import drpOption from './drpOption';
|
import drpOption from './drpOption';
|
||||||
|
|
||||||
function ShenYa({ id, data, dispatch, onCancel }) {
|
function ShuikuPop({ id, data, dispatch, onCancel }) {
|
||||||
console.log('SY',data);
|
console.log(data);
|
||||||
const [ tableData, setTableData ] = useState([])
|
const [ tableData, setTableData ] = useState([])
|
||||||
const [ yjData, setYjData ] = useState([])
|
const [ yjData, setYjData ] = useState([])
|
||||||
const [ tabVal, setTabVal ] = useState('1')
|
const [ tabVal, setTabVal ] = useState('1')
|
||||||
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
||||||
const width = 780;
|
|
||||||
|
|
||||||
const closePop = () => {
|
const closePop = () => {
|
||||||
if(onCancel){
|
if(onCancel){
|
||||||
|
|
@ -84,33 +93,33 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="normalModalStyle homeModal2">
|
<div className='ShenYaPop'>
|
||||||
<div className="normalModalStyle_title">
|
<div className="modal-header">
|
||||||
<div className="normalModalStyle_title_icon"></div>
|
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||||
{data.stationCode}
|
<span className="title-text">{data.stationCode}</span>
|
||||||
<div className="normalModalStyle_title_cancel">
|
|
||||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="close-btn" onClick={closePop}>
|
||||||
<div style={{padding:'0 20px'}}>
|
<CloseOutlined />
|
||||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='homeModal2_content' >
|
</div>
|
||||||
{
|
<div className='modal-body'>
|
||||||
tabVal==='1'?
|
<div style={{padding:'0 20px'}}>
|
||||||
|
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
tabVal==='1'?
|
||||||
tableData.length>0?
|
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>
|
:<div style={{textAlign: "center", margin: "10%"}}><Empty description={'暂无数据'} /></div>
|
||||||
:null
|
:null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
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>
|
||||||
<Form.Item style={{marginLeft:'200px'}}>
|
<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="1">数据图</Radio.Button>
|
||||||
<Radio.Button value="2">数据表</Radio.Button>
|
<Radio.Button value="2">数据表</Radio.Button>
|
||||||
</Radio.Group>
|
</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 React, { useEffect, useState, useMemo } from 'react';
|
||||||
import { Empty, Form, Button, Input, DatePicker } from 'antd';
|
import { Empty } from 'antd';
|
||||||
import {CloseOutlined} from '@ant-design/icons';
|
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 ReactEcharts from 'echarts-for-react';
|
||||||
import { httppost } from '../../../../../utils/request';
|
import { httppost } from '../../../../../utils/request';
|
||||||
import apiurl from '../../../../../service/apiurl';
|
import apiurl from '../../../../../service/apiurl';
|
||||||
|
|
@ -9,14 +19,12 @@ import ToolBar from './toolbar';
|
||||||
import TableData from './TableData'
|
import TableData from './TableData'
|
||||||
import drpOption from './drpOption';
|
import drpOption from './drpOption';
|
||||||
|
|
||||||
function ShenYa({ id, data, dispatch, onCancel }) {
|
function ShuikuPop({ id, data, dispatch, onCancel }) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
const [ tableData, setTableData ] = useState([])
|
const [ tableData, setTableData ] = useState([])
|
||||||
const [ yjData, setYjData ] = useState([])
|
const [ yjData, setYjData ] = useState([])
|
||||||
const [ tabVal, setTabVal ] = useState('1')
|
const [ tabVal, setTabVal ] = useState('1')
|
||||||
// const option = useMemo(() => drpOption(tableData), [tableData])
|
|
||||||
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
||||||
const width = 780;
|
|
||||||
|
|
||||||
const closePop = () => {
|
const closePop = () => {
|
||||||
if(onCancel){
|
if(onCancel){
|
||||||
|
|
@ -35,7 +43,7 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
||||||
stationCode: stationCode
|
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){
|
if(code!==200){
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
@ -85,35 +93,33 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="normalModalStyle homeModal2">
|
<div className='ShenYaPop'>
|
||||||
<div className="normalModalStyle_title">
|
<div className="modal-header">
|
||||||
<div className="normalModalStyle_title_icon"></div>
|
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||||
{data.stationCode}
|
<span className="title-text">{data.stationCode}</span>
|
||||||
<div className="normalModalStyle_title_cancel">
|
|
||||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="close-btn" onClick={closePop}>
|
||||||
<div style={{padding:'0 20px'}}>
|
<CloseOutlined />
|
||||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='homeModal2_content'>
|
</div>
|
||||||
{
|
<div className='modal-body'>
|
||||||
tabVal==='1'?
|
<div style={{padding:'0 20px'}}>
|
||||||
|
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
tabVal==='1'?
|
||||||
tableData.length>0?
|
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%"}}>
|
:<div style={{textAlign: "center", margin: "10%"}}><Empty description={'暂无数据'} /></div>
|
||||||
<Empty description={'暂无数据'} />
|
:null
|
||||||
</div>
|
}
|
||||||
:null
|
{
|
||||||
}
|
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
||||||
{
|
}
|
||||||
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
</div>
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
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 { Button, Modal, Space } from 'antd';
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
import { useDispatch, useSelector } from 'react-redux'
|
||||||
import DrpPop from './DrpPop';
|
import DrpPop from './DrpPop';
|
||||||
import ShuikuPop from './ShuikuPop';
|
import ShuikuPop from './ShuiKuPop/index.js';
|
||||||
import GongShuiPop from './GongShui';
|
import GongShuiPop from './GongShui';
|
||||||
import PciStPop from './PciStPop';
|
import PciStPop from './PciStPop/index';
|
||||||
import WeiYi from './WeiYi/index.js';
|
import WeiYi from './WeiYi/index.js';
|
||||||
import ShenYa from './ShenYa/index.js';
|
import ShenYa from './ShenYa/index.js';
|
||||||
import ShenLiu from './ShenLiu/index.js';
|
import ShenLiu from './ShenLiu/index.js';
|
||||||
|
|
@ -55,14 +55,14 @@ function FeaturePops({ mapobj }) {
|
||||||
)
|
)
|
||||||
}else if (type === 'hdsw') {
|
}else if (type === 'hdsw') {
|
||||||
return (
|
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}/>
|
<ShuikuPop id={id} data={data} dispatch={dispatch} record={data}/>
|
||||||
</Modal>
|
</Modal>
|
||||||
)
|
)
|
||||||
}else if (type === "gongshui" ) {
|
}else if (type === "gongshui" ) {
|
||||||
// 供水
|
// 供水
|
||||||
return (
|
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}/>
|
<GongShuiPop id={id} data={data} dispatch={dispatch} record={data}/>
|
||||||
</Modal>
|
</Modal>
|
||||||
)
|
)
|
||||||
|
|
@ -76,21 +76,21 @@ function FeaturePops({ mapobj }) {
|
||||||
}else if (type === 'weiyi'){
|
}else if (type === 'weiyi'){
|
||||||
//位移
|
//位移
|
||||||
return (
|
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}/>
|
<WeiYi id={id} data={data} dispatch={dispatch} record={data}/>
|
||||||
</Modal>
|
</Modal>
|
||||||
)
|
)
|
||||||
}else if (type === 'shenya'){
|
}else if (type === 'shenya'){
|
||||||
//渗压
|
//渗压
|
||||||
return (
|
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}/>
|
<ShenYa id={id} data={data} dispatch={dispatch} record={data}/>
|
||||||
</Modal>
|
</Modal>
|
||||||
)
|
)
|
||||||
}else if (type === 'shenliu'){
|
}else if (type === 'shenliu'){
|
||||||
//渗流
|
//渗流
|
||||||
return (
|
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}/>
|
<ShenLiu id={id} data={data} dispatch={dispatch} record={data}/>
|
||||||
</Modal>
|
</Modal>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -119,6 +119,11 @@
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.home_modal_transparent{
|
||||||
|
.ant-modal-content{
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
.normalModalStyle{
|
.normalModalStyle{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// min-height: 600px;
|
// min-height: 600px;
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,7 @@ const FlowPanel = ({ stcd, cleanMode = false }) => {
|
||||||
<div className="left-panel">
|
<div className="left-panel">
|
||||||
<div className="panel-header">
|
<div className="panel-header">
|
||||||
<div className="query-label"><span className="dot"></span>实时流量</div>
|
<div className="query-label"><span className="dot"></span>实时流量</div>
|
||||||
{!cleanMode && (
|
{!cleanMode && !stcd && (
|
||||||
<div className="station-select">
|
<div className="station-select">
|
||||||
<span>站点：</span>
|
<span>站点：</span>
|
||||||
<Select
|
<Select
|
||||||
|
|
|
||||||
|
|
@ -126,35 +126,35 @@ export default function Btn({open, mode, layerVisible, setOpen, mapType, layerVi
|
||||||
</div>
|
</div>
|
||||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'HdswLayer',checked:!layerVisible['HdswLayer']}})}>
|
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'HdswLayer',checked:!layerVisible['HdswLayer']}})}>
|
||||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['HdswLayer']} name={'HdswLayer'} ></Checkbox>
|
<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 className='mapToolLayerBoxItemIconDiv'>水库水文站</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'GongShuiLayer',checked:!layerVisible['GongShuiLayer']}})}>
|
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'GongShuiLayer',checked:!layerVisible['GongShuiLayer']}})}>
|
||||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['GongShuiLayer']} name={'GongShuiLayer'} ></Checkbox>
|
<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 className='mapToolLayerBoxItemIconDiv'>流量站</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'PicStLayer',checked:!layerVisible['PicStLayer']}})}>
|
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'PicStLayer',checked:!layerVisible['PicStLayer']}})}>
|
||||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['PicStLayer']} name={'PicStLayer'} ></Checkbox>
|
<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 className='mapToolLayerBoxItemIconDiv'>视频站</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SYLayer',checked:!layerVisible['SYLayer']}})}>
|
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SYLayer',checked:!layerVisible['SYLayer']}})}>
|
||||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SYLayer']} name={'SYLayer'} ></Checkbox>
|
<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 className='mapToolLayerBoxItemIconDiv'>渗压站</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SLLayer',checked:!layerVisible['SLLayer']}})}>
|
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SLLayer',checked:!layerVisible['SLLayer']}})}>
|
||||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SLLayer']} name={'SLLayer'} ></Checkbox>
|
<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 className='mapToolLayerBoxItemIconDiv'>渗流站</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'WYLayer',checked:!layerVisible['WYLayer']}})}>
|
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'WYLayer',checked:!layerVisible['WYLayer']}})}>
|
||||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WYLayer']} name={'WYLayer'} ></Checkbox>
|
<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 className='mapToolLayerBoxItemIconDiv'>位移站</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue