Compare commits
4 Commits
db011df5a6
...
39c270984a
| Author | SHA1 | Date |
|---|---|---|
 李神峰
|
39c270984a | |
 秦子超
|
9f4fabde9d | |
|
秦子超
|
955e6afb59 | |
|
秦子超
|
65c6d3d933 |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 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.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 673 B 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.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 928 B 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: 3.3 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: 4.9 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.
|
After Width: | Height: | Size: 503 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 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 |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
|
|
@ -459,4 +459,28 @@ input:-webkit-autofill:active {
|
|||
background: transparent!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
//修改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;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,6 +27,7 @@ const apiurl = {
|
|||
sdzlist: service + '/reservoir/water/listV2',//水电站-基础设施没有监测数据
|
||||
},
|
||||
monitor: {
|
||||
globalSearch: service +"/globalSearch/findByName",//首页-全局搜索
|
||||
sk: {
|
||||
detail: service + '/reservoir/water/detail', //监测数据-下方表格
|
||||
picture: service + '/reservoir/water/monitor/data',
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ function renderMarker({ rzWarning, rzState }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/anzhidian.png" alt="" className="panel-icon" />
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/anzhidian2.png" alt="" className="panel-icon" />
|
||||
<div style="width:1px;height:50px;background:red;margin-left:9px"></div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -23,7 +24,7 @@ function AZDMarker({ data, dispatch, setting, zoom }) {
|
|||
|
||||
|
||||
useEffect(() => {
|
||||
const width = 15;
|
||||
const width = 18;
|
||||
|
||||
const placeholder = document.getElementById(`marker_anzhidian_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/flow2.png" alt="" className="panel-icon" />
|
||||
<img width="${width-4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/flow2.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}else{
|
||||
|
|
@ -36,7 +36,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
function GongShuiMarker({ data, dispatch, setting, zoom }) {
|
||||
|
||||
useEffect(() => {
|
||||
const width = 13;
|
||||
const width = 20;
|
||||
|
||||
const placeholder = document.getElementById(`marker_gongshui_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ function renderMarker({ status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw3.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}else{
|
||||
|
|
@ -33,7 +33,7 @@ function renderMarker({ status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@ function HdswMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 8;
|
||||
const width = 15;
|
||||
|
||||
const placeholder = document.getElementById(`marker_hdsw_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function renderMarker({ status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/video2.png" alt="" className="panel-icon" />
|
||||
<img width="${width-4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/video2.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}else{
|
||||
|
|
@ -33,7 +33,7 @@ function PicStMarker({ data, dispatch, setting, zoom, distSq, layerVisible }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 10;
|
||||
const width = 15;
|
||||
|
||||
const placeholder = document.getElementById(`marker_tuxiang_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ function renderMarker({ rzWarning, rzState }, { width, highlight }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/qishiyedanwei.png" alt="" className="panel-icon" />
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/qishiyedanwei2.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sl3.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sl.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}else{
|
||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sl.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sl.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@ function SLMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 15;
|
||||
const width = 16;
|
||||
|
||||
const placeholder = document.getElementById(`marker_shenliu_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy3.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}else{
|
||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@ function SYMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 15;
|
||||
const width = 16;
|
||||
|
||||
const placeholder = document.getElementById(`marker_shenya_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
@ -116,7 +116,7 @@ function SYMarker({ data, dispatch, setting, zoom }) {
|
|||
transform: 'translateX(-50%)',
|
||||
zIndex: zindexmarker.wyLabel
|
||||
}}>
|
||||
{data.profileName}
|
||||
{data.stationCode}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy3.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}else{
|
||||
|
|
@ -31,7 +31,7 @@ function renderMarker({ rzWarning, rzState, status }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy.png" alt="" className="panel-icon" />
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@ function WYMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 15;
|
||||
const width = 16;
|
||||
|
||||
const placeholder = document.getElementById(`marker_weiyi_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function renderMarker({ rzWarning, rzState }, { width }) {
|
|||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/yanhejuminhu.png" alt="" className="panel-icon" />
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/yanhejuminhu2.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ function renderMarker({ rzWarning, rzState }, { width }) {
|
|||
function YHJMHMarker({ data, dispatch, setting, zoom }) {
|
||||
|
||||
useEffect(() => {
|
||||
const width = 15;
|
||||
const width = 18;
|
||||
|
||||
const placeholder = document.getElementById(`marker_yanhejuminhu_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
import {Table} from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import moment from 'moment';
|
||||
import { render } from 'react-dom';
|
||||
|
||||
|
||||
const Tabledata = ({ data, current }) => {
|
||||
const columns = [
|
||||
{title: '序号', key: 'inx', dataIndex: 'inx', align: 'center',},
|
||||
{
|
||||
title: '数据时间', key: 'tm', dataIndex: 'tm', align: 'center',
|
||||
render:(rec) => <span>{rec ? moment(rec).format("YYYY-MM-DD HH:mm") : "-"}</span>
|
||||
},
|
||||
{
|
||||
title: '流量(m³/s)', key: 'q', dataIndex: 'q', align: 'center',
|
||||
render: (rec) => <span>{rec ?? "-"}</span>
|
||||
},
|
||||
{
|
||||
title: '水量(m³)', key: 'v', dataIndex: 'v', align: 'center',
|
||||
render: (rec) => <span>{rec ?? "-"}</span>
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const [tableData, setTableData] = useState([])
|
||||
useEffect(() => {
|
||||
if (data.length > 0) {
|
||||
setTableData(data)
|
||||
}
|
||||
},[data])
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
rowKey="adcd"
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={tableData}
|
||||
/>
|
||||
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default Tabledata
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
|
||||
import { useMemo } from 'react';
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
|
||||
export default function DrpOption(data, num) {
|
||||
console.log("num",num);
|
||||
const minL = Math.floor(Math.min(...data?.map(s => s.q)));
|
||||
const maxL = Math.ceil(Math.max(...data?.map(s => s.q)));
|
||||
const minS = Math.floor(Math.min(...data?.map(s => s.v)));
|
||||
const maxS = Math.ceil(Math.max(...data?.map(s => s.v)));
|
||||
return {
|
||||
title: {
|
||||
text: `时段总水量:${num.value}${num.unit}m³`,
|
||||
top: "2%",
|
||||
right: "12%",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
fontSize:14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// formatter: function (params) {
|
||||
// var res = `${params[0].name.substr('2020-10-14 '.length, 2)}时降雨: ${params[0].data}mm<br />累计降雨: ${params[1].data}mm`;
|
||||
// return res;
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
// x: 40,
|
||||
// y: 30,
|
||||
// x2: 30,
|
||||
// y2: 28,
|
||||
top: '20%',
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '10%',
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
top: "8%",
|
||||
// 图例的位置
|
||||
// data: ['实测', '累计']
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data?.map(item => item.tm),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
formatter: val => val.substr(0,'2020-11-11 11:11'.length)
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name:"流量(m³/s)",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: minL,
|
||||
max: maxL
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name:"水量(m³)",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: minS - 1,
|
||||
max: maxS
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name:'流量',
|
||||
type:'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FAC858",
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
shadowColor: 'rgba(0,0,0,0.4)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 10
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [{
|
||||
name: '最大值',
|
||||
type: 'max',
|
||||
}],
|
||||
},
|
||||
data: data?.map(s => s.q),
|
||||
},
|
||||
{
|
||||
name: '水量',
|
||||
type: 'bar',
|
||||
yAxisIndex:1,
|
||||
barWidth: '10%',
|
||||
data: data?.map(s => s.v),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color:"#5773c7"
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
import React, {useEffect, useMemo, useState} from 'react';
|
||||
import {Button, DatePicker, Form, Descriptions} from 'antd';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import moment from 'moment'
|
||||
import NormalSelect from '../../../../../../components/Form/NormalSelect';
|
||||
import './index.less'
|
||||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
import { httppost } from '../../../../../../utils/request';
|
||||
import apiurl from '../../../../../../service/apiurl';
|
||||
import { exportFile,numberFormat } from '../../../../../../utils/tools';
|
||||
|
||||
|
||||
const {RangePicker} = DatePicker;
|
||||
|
||||
function DrpSearch({record}) {
|
||||
const name = record?.sttp == "QQ" ?"放水管流量": record?.sttp == "PQ" ? "输水管流量" : ""
|
||||
const optionsType = [
|
||||
{
|
||||
label: "今日",
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label: "近一周",
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:"近一月",
|
||||
value:3
|
||||
},
|
||||
{
|
||||
label:"近三月",
|
||||
value:4
|
||||
},
|
||||
{
|
||||
label:"近一年",
|
||||
value:5
|
||||
},
|
||||
]
|
||||
const [data, setData] = useState([]);
|
||||
const [params, setParams] = useState({tm:[]})
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
const option = useMemo(() => {
|
||||
let num = 0;
|
||||
if (data.length > 0) {
|
||||
data.forEach(s => {
|
||||
num += Number(s.v)
|
||||
})
|
||||
return drpOption(data, numberFormat(num));
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const searchTm = (e) => {
|
||||
setParams({
|
||||
...params,
|
||||
tm:e,
|
||||
})
|
||||
};
|
||||
const doSearch = () => {
|
||||
let data = {
|
||||
...params,
|
||||
startTime:params.tm[0].format("YYYY-MM-DD HH:mm:00"),
|
||||
endTime: params.tm[1].format("YYYY-MM-DD HH:mm:00"),
|
||||
}
|
||||
getData(data)
|
||||
}
|
||||
const optionChange = (e) => {
|
||||
onValuesChange(e)
|
||||
}
|
||||
const onValuesChange = (e) => {
|
||||
switch (e) {
|
||||
case 1:
|
||||
setParams({ ...params, tm: [moment().startOf("day"), moment()] })
|
||||
break;
|
||||
case 2:
|
||||
setParams({ ...params, tm: [moment().subtract(7, 'days'), moment()] })
|
||||
break;
|
||||
case 3:
|
||||
setParams({ ...params, tm: [moment().subtract(1, 'months'),moment()] })
|
||||
break;
|
||||
case 4:
|
||||
setParams({ ...params, tm: [moment().subtract(3, 'months'),moment()]})
|
||||
break;
|
||||
case 5:
|
||||
setParams({ ...params, tm: [moment().subtract(1, 'years'),moment()]})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
const exportExcel = () => {
|
||||
let data = {
|
||||
...params,
|
||||
stcd: record.stcd,
|
||||
isAsc: false,
|
||||
sortField: "tm",
|
||||
tm:undefined
|
||||
}
|
||||
httppost(apiurl.monitor.gongshui.export, data, 'blob').then(res => {
|
||||
exportFile(`${name}.xlsx`,res.data)
|
||||
})
|
||||
}
|
||||
const getData = async (params) => {
|
||||
let data = {
|
||||
...params,
|
||||
stcd: record.stcd,
|
||||
isAsc: false,
|
||||
sortField: "tm",
|
||||
tm:undefined
|
||||
}
|
||||
try {
|
||||
const res = await httppost(apiurl.monitor.gongshui.gsPage, data)
|
||||
setData(res.data.map((item,i)=>({...item,inx: i+1})))
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let option = "";
|
||||
if (record.stcd) {
|
||||
option = {
|
||||
stcd: record?.stcd,
|
||||
startTime: params?.startTime || moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:00"),
|
||||
endTime: params?.endTime || moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:00"),
|
||||
tm:[moment().subtract(7, 'days'), moment()]
|
||||
}
|
||||
setParams(option)
|
||||
getData(option)
|
||||
}
|
||||
|
||||
|
||||
}, [current,record])
|
||||
|
||||
|
||||
return (
|
||||
<div style={{width: "98%", height: '56vh'}}>
|
||||
<div className="top">
|
||||
<div style={{ display: "flex", columnGap: 10, alignItems: "center" }}>
|
||||
<span>时间段：</span>
|
||||
<RangePicker
|
||||
showTime
|
||||
allowClear
|
||||
style={{ width: "407px" }}
|
||||
defaultValue={params.tm}
|
||||
onChange={searchTm}
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value={params.tm}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", columnGap: 10, alignItems: "center",margin:"0 20px" }}>
|
||||
<span>常用时段：</span>
|
||||
<NormalSelect
|
||||
allowClear
|
||||
style={{ width: "150px" }}
|
||||
options={optionsType}
|
||||
onChange={(e)=>optionChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<Button type="primary" onClick={doSearch} style={{ marginLeft: "10px" }}>查询</Button>
|
||||
<Button onClick={exportExcel} style={{marginLeft: "10px"}}>导出</Button>
|
||||
</div>
|
||||
<div className="mid">
|
||||
<div className="mid-left">
|
||||
<TableData data={data} current={current}/>
|
||||
</div>
|
||||
<div className="mid-right">
|
||||
{
|
||||
data?.length > 0 ?
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{width: "100%", height: '100%'}}
|
||||
/> : <div style={{textAlign: "center", margin: "10%"}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpSearch
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.time-type {
|
||||
margin-left: 10rem;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
border: 1px solid #cccccc;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #5FB7FF;
|
||||
background: #F0F7FF;
|
||||
border: 1px solid #5FB7FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mid {
|
||||
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 90%;
|
||||
.mid-left {
|
||||
border: 1px solid #eee;
|
||||
width: 47%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mid-right {
|
||||
width: 52%;
|
||||
height: 100%;
|
||||
.react-chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
font-size: 14px;
|
||||
margin-top: 40px;
|
||||
.footer-row{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.footer-item{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
.footer-name{
|
||||
background: #E0EDFF ;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.footer-num{
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +1,44 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import moment from "moment"
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import Jcsj from "./GsJcsj";
|
||||
import titleBg from '@/assets/images/modal/title.png';
|
||||
import { Modal, Tabs } from 'antd';
|
||||
import './index.less'
|
||||
import FlowPanel from '../../../components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel'
|
||||
|
||||
|
||||
function RealDrpTip({ id, data, dispatch }) {
|
||||
console.log("供水弹框数据porps",data);
|
||||
function ShuikuPop({ id, data, dispatch }) {
|
||||
console.log(data);
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
useEffect(()=>{
|
||||
setTimeout(() => {
|
||||
//防止Modal打开时echarts不能找到正确的大小
|
||||
setShow(true)
|
||||
}, 200);
|
||||
},[])
|
||||
|
||||
const closePop = () => {
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
|
||||
const width = 1050;
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dp-popup" style={{ position: 'absolute', top: 0, left: 0, width, lineHeight: 1 }}>
|
||||
<div className="dp-popup-content" style={{borderRadius:'10px'}}>
|
||||
<div className="content-body tyb skpop" id='tyb' style={{ height: '100%' }}>
|
||||
<div className="normalModalStyle">
|
||||
<div className="normalModalStyle_title" style={{marginBottom:0}}>
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
<span>{data.stnm} </span>
|
||||
{/* {data?.sttp &&
|
||||
<span style={
|
||||
{
|
||||
display:"inline-block",
|
||||
padding: "5px 10px",
|
||||
color: "#74a7ff",
|
||||
border: "1px solid #74a7ff",
|
||||
borderRadius: "5px"
|
||||
}
|
||||
}> {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}（{{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]}）</span>} */}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ paddingLeft: 15,paddingTop:15,background:"#fff",borderRadius:'0 0 10px 10px' }} >
|
||||
<Jcsj record={data}/>
|
||||
</div>
|
||||
<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 className="boxfoot"></div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{show?<FlowPanel stcd={data.stcd}/>:null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(RealDrpTip);
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
.shuikuPop{
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
|
||||
|
||||
.modal-header {
|
||||
height: 50px; // Reduced height to bring line closer
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
// Separator line using pseudo-element for precise positioning
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 9px;
|
||||
left: 20px; // Align with title image (which starts at padding-left)
|
||||
right: 0; // Extend to the right edge
|
||||
height: 1px;
|
||||
background: rgba(18, 137, 221, 0.5);
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
height: 30px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: contain;
|
||||
padding-left: 30px; // Adjust based on image content
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-tabs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: 70%;
|
||||
align-items: center;
|
||||
gap: 60px; // Add spacing between tabs
|
||||
justify-content: center;
|
||||
.tab-item {
|
||||
padding: 0 10px; // Reduce horizontal padding inside tab item
|
||||
height: 90%;
|
||||
width: 15%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px; // Increase font size
|
||||
color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
|
||||
transition: all 0.3s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 100% 8px; // Control height of the indicator bar
|
||||
position: relative;
|
||||
margin-bottom: -1px; // Align with bottom border if needed
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
// Selected background image
|
||||
background-image: url('../../../../../assets/images/modal/selected.png');
|
||||
background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
|
||||
background-position: center center; // Push image slightly down to align with bottom edge
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 18px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
// flex: 1;
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
CloseOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CaretLeftOutlined,
|
||||
CaretRightOutlined,
|
||||
PlusOutlined,
|
||||
MinusOutlined
|
||||
} from "@ant-design/icons";
|
||||
import titleBg from '@/assets/images/modal/title.png';
|
||||
import './index.less'
|
||||
import { httpget, httppost } from '@/utils/request';
|
||||
import HFivePlayer from '../../../../../components/VideoCom/videoPlary';
|
||||
import apiurl from '@/service/apiurl';
|
||||
|
||||
|
||||
function ShuikuPop({ id, data, dispatch }) {
|
||||
console.log(data);
|
||||
const [videoSrc, setVideoSrc] = useState('')
|
||||
|
||||
const getVideoSrc = async() => {
|
||||
try {
|
||||
const res = await httpget(`${apiurl.spjk.srcData}${data.indexCode}`)
|
||||
setVideoSrc(res.data);
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 云台控制
|
||||
let timer = null;
|
||||
// 云台控制
|
||||
const onOperation = async(params) => {
|
||||
let data1 = {
|
||||
...params,
|
||||
indexCode: data?.indexCode,
|
||||
action:0
|
||||
}
|
||||
try {
|
||||
const res = await httppost(apiurl.spjk.controler, data1)
|
||||
if (res.code == 200) {
|
||||
onOperation1(params)
|
||||
// if(timer) clearTimeout(timer)
|
||||
// timer = setTimeout(() => {
|
||||
|
||||
// },0)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const onOperation1 = async(params) => {
|
||||
let data1 = {
|
||||
...params,
|
||||
indexCode: data?.indexCode,
|
||||
action:1
|
||||
}
|
||||
try {
|
||||
const res = await httppost(apiurl.spjk.controler,data1)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (data.indexCode) {
|
||||
getVideoSrc();
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const closePop = () => {
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='pciStPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.name}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<HFivePlayer
|
||||
size={1}
|
||||
wsUrl={{ src:videoSrc}}
|
||||
playerID={"333"}
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
data?.type == 1 ?
|
||||
<div className='controler' style={{display:"flex",paddingBottom:'20px',margin:"20px 0",color:"#70dbfe",fontSize:35,justifyContent:"space-around"}}>
|
||||
<CaretUpOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='向上'
|
||||
onClick={() => onOperation({speed:30,command:"UP"})}
|
||||
/>
|
||||
<CaretDownOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='向下'
|
||||
onClick={() => onOperation({speed:30,command:"DOWN"})}
|
||||
/>
|
||||
<CaretLeftOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='向左'
|
||||
onClick={() => onOperation({speed:30,command:"LEFT"})}
|
||||
/>
|
||||
<CaretRightOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='向右'
|
||||
onClick={() => onOperation({speed:30,command:"RIGHT"})}
|
||||
/>
|
||||
<PlusOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='放大'
|
||||
onClick={() => onOperation({speed:30,command:"ZOOM_IN"})}
|
||||
/>
|
||||
<MinusOutlined
|
||||
style={{ cursor: "pointer" }}
|
||||
title='缩小'
|
||||
onClick={() => onOperation({speed:30,command:"ZOOM_OUT"})}
|
||||
/>
|
||||
</div>:null
|
||||
}
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
.pciStPop{
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
|
||||
|
||||
.modal-header {
|
||||
height: 50px; // Reduced height to bring line closer
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
// Separator line using pseudo-element for precise positioning
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 9px;
|
||||
left: 20px; // Align with title image (which starts at padding-left)
|
||||
right: 0; // Extend to the right edge
|
||||
height: 1px;
|
||||
background: rgba(18, 137, 221, 0.5);
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
height: 30px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: contain;
|
||||
padding-left: 30px; // Adjust based on image content
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-tabs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: 70%;
|
||||
align-items: center;
|
||||
gap: 60px; // Add spacing between tabs
|
||||
justify-content: center;
|
||||
.tab-item {
|
||||
padding: 0 10px; // Reduce horizontal padding inside tab item
|
||||
height: 90%;
|
||||
width: 15%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px; // Increase font size
|
||||
color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
|
||||
transition: all 0.3s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 100% 8px; // Control height of the indicator bar
|
||||
position: relative;
|
||||
margin-bottom: -1px; // Align with bottom border if needed
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
// Selected background image
|
||||
background-image: url('../../../../../assets/images/modal/selected.png');
|
||||
background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
|
||||
background-position: center center; // Push image slightly down to align with bottom edge
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 18px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
// flex: 1;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import moment from 'moment'
|
|||
|
||||
const Tabledata = ({tableData}) => {
|
||||
const columns = [
|
||||
{ title: '序号', key: '', dataIndex: '', align: 'center',width:'40px',render:(a,b,c)=>c+1},
|
||||
{ title: '序号', key: '', dataIndex: '', align: 'center',width:'80px',render:(a,b,c)=>c+1},
|
||||
{ title: '数据时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'200px',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||
{ title: '渗流量', key: 'value', dataIndex: 'value', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { Descriptions, Form, Button, Input, DatePicker } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import { Empty } from 'antd';
|
||||
import {
|
||||
CloseOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CaretLeftOutlined,
|
||||
CaretRightOutlined,
|
||||
PlusOutlined,
|
||||
MinusOutlined
|
||||
} from "@ant-design/icons";
|
||||
import titleBg from '@/assets/images/modal/title.png';
|
||||
import './index.less'
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import { httppost } from '../../../../../utils/request';
|
||||
import apiurl from '../../../../../service/apiurl';
|
||||
|
|
@ -9,12 +19,11 @@ import ToolBar from './toolbar';
|
|||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
|
||||
function ShenLiu({ id, data, dispatch, onCancel }) {
|
||||
function ShuikuPop({ id, data, dispatch, onCancel }) {
|
||||
console.log(data);
|
||||
const [ tableData, setTableData ] = useState([])
|
||||
const [ yjData, setYjData ] = useState([])
|
||||
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
||||
const width = 780;
|
||||
|
||||
const closePop = () => {
|
||||
if(onCancel){
|
||||
|
|
@ -32,6 +41,7 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
|||
},
|
||||
stationCode: stationCode
|
||||
}
|
||||
|
||||
const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
|
||||
if(code!==200){
|
||||
return
|
||||
|
|
@ -82,19 +92,21 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal1">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
<div className='ShenYaPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stationCode}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className='modal-body'>
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
|
||||
</div>
|
||||
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
|
||||
</div>
|
||||
<div className='homeModal1_content'>
|
||||
<div className='homeModal1_content'>
|
||||
<div className='homeModal1_content_lf'>
|
||||
<TableData tableData={tableData}/>
|
||||
</div>
|
||||
|
|
@ -106,9 +118,10 @@ function ShenLiu({ id, data, dispatch, onCancel }) {
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenLiu);
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
.ShenYaPop{
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
|
||||
|
||||
.modal-header {
|
||||
height: 50px; // Reduced height to bring line closer
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
// Separator line using pseudo-element for precise positioning
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 9px;
|
||||
left: 20px; // Align with title image (which starts at padding-left)
|
||||
right: 0; // Extend to the right edge
|
||||
height: 1px;
|
||||
background: rgba(18, 137, 221, 0.5);
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
height: 30px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: contain;
|
||||
padding-left: 30px; // Adjust based on image content
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-tabs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: 70%;
|
||||
align-items: center;
|
||||
gap: 60px; // Add spacing between tabs
|
||||
justify-content: center;
|
||||
.tab-item {
|
||||
padding: 0 10px; // Reduce horizontal padding inside tab item
|
||||
height: 90%;
|
||||
width: 15%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px; // Increase font size
|
||||
color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
|
||||
transition: all 0.3s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 100% 8px; // Control height of the indicator bar
|
||||
position: relative;
|
||||
margin-bottom: -1px; // Align with bottom border if needed
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
// Selected background image
|
||||
background-image: url('../../../../../assets/images/modal/selected.png');
|
||||
background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
|
||||
background-position: center center; // Push image slightly down to align with bottom edge
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 18px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
// flex: 1;
|
||||
height: 570px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.homeModal1_content{
|
||||
height: 504px;
|
||||
display: flex;
|
||||
padding: 5px 20px 20px 20px;
|
||||
.homeModal1_content_lf{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
}
|
||||
.homeModal1_content_rf{
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { Descriptions, Form, Button, Input, DatePicker } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import { httppost } from '../../../../../utils/request';
|
||||
import apiurl from '../../../../../service/apiurl';
|
||||
import moment from "moment"
|
||||
import ToolBar from './toolbar';
|
||||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
|
||||
function ShenLiu({ id, data, dispatch, onCancel }) {
|
||||
console.log(data);
|
||||
const [ tableData, setTableData ] = useState([])
|
||||
const [ yjData, setYjData ] = useState([])
|
||||
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
||||
const width = 780;
|
||||
|
||||
const closePop = () => {
|
||||
if(onCancel){
|
||||
onCancel()
|
||||
}
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
|
||||
const getData = async(tms,stationCode)=>{
|
||||
const params = {
|
||||
type: 2,
|
||||
dateTimeRangeSo: {
|
||||
start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
stationCode: stationCode
|
||||
}
|
||||
const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
setTableData(data)
|
||||
}
|
||||
|
||||
const getYjData = async(stationCode)=>{
|
||||
const params = {
|
||||
"pageSo": {
|
||||
"pageSize": 10,
|
||||
"pageNumber": 1
|
||||
},
|
||||
"stationCode": stationCode
|
||||
}
|
||||
|
||||
const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
const linshi = []
|
||||
records?.map((item)=>{
|
||||
if(item.status===0){
|
||||
return
|
||||
}
|
||||
if(item.valueOne||0){
|
||||
linshi.push({
|
||||
yjName:item.level ===1?'黄色预警':'红色预警',
|
||||
value:item.valueOne,
|
||||
color:item.level ===1?'#f1bf42':'red'
|
||||
})
|
||||
}
|
||||
if(item.valueTwo||0){
|
||||
linshi.push({
|
||||
yjName:item.level ===1?'黄色预警':'红色预警',
|
||||
value:item.valueTwo,
|
||||
color:item.level ===1?'#f1bf42':'red'
|
||||
})
|
||||
}
|
||||
})
|
||||
setYjData(linshi)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
getYjData(data.stationCode)
|
||||
getData([moment().add(-1,'months'),moment()],data.stationCode)
|
||||
},[])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal1">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
|
||||
</div>
|
||||
<div className='homeModal1_content'>
|
||||
<div className='homeModal1_content_lf'>
|
||||
<TableData tableData={tableData}/>
|
||||
</div>
|
||||
<div className='homeModal1_content_rf'>
|
||||
{
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenLiu);
|
||||
|
|
@ -5,7 +5,7 @@ import moment from 'moment'
|
|||
|
||||
const Tabledata = ({tableData}) => {
|
||||
const columns = [
|
||||
{ title: '序号', key: '', dataIndex: '', align: 'center',render:(a,b,c)=>c+1},
|
||||
{ title: '序号', key: '', dataIndex: '', align: 'center', width:'100px', render:(a,b,c)=>c+1},
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||
{ title: '库水位(m)', key: 'rz', dataIndex: 'rz', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||||
{ title: '管水位(m)', key: 'value', dataIndex: 'value', align: 'center',render: (rec) => <span>{rec ?? "-"}</span>},
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export default function drpOption(data,yjData) {
|
|||
show: true,
|
||||
// 图例的位置
|
||||
data: ["压测管水位", "库水位"],
|
||||
textStyle: { color: '#fff' },
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
|
|
@ -53,13 +54,13 @@ export default function drpOption(data,yjData) {
|
|||
},
|
||||
axisLabel: {
|
||||
padding: [0, 0, 100, 0],
|
||||
color: '#333',
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
formatter: val => val.slice(0,10)
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#8c8c8c',
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
|
|
@ -76,7 +77,7 @@ export default function drpOption(data,yjData) {
|
|||
name: "压测管水位(m)",
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 10, 10],
|
||||
color:'#333333',
|
||||
color:'#ffffff',
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
|
|
@ -88,7 +89,7 @@ export default function drpOption(data,yjData) {
|
|||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
|
|
@ -111,7 +112,7 @@ export default function drpOption(data,yjData) {
|
|||
name: "库水位(m)",
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 10, 10],
|
||||
color:'#333333',
|
||||
color:'#ffffff',
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
|
|
@ -123,7 +124,7 @@ export default function drpOption(data,yjData) {
|
|||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { Empty, Form, Button, Input, DatePicker } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import { Empty } from 'antd';
|
||||
import {
|
||||
CloseOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CaretLeftOutlined,
|
||||
CaretRightOutlined,
|
||||
PlusOutlined,
|
||||
MinusOutlined
|
||||
} from "@ant-design/icons";
|
||||
import titleBg from '@/assets/images/modal/title.png';
|
||||
import './index.less'
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import { httppost } from '../../../../../utils/request';
|
||||
import apiurl from '../../../../../service/apiurl';
|
||||
|
|
@ -9,13 +19,12 @@ import ToolBar from './toolbar';
|
|||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
|
||||
function ShenYa({ id, data, dispatch, onCancel }) {
|
||||
console.log('SY',data);
|
||||
function ShuikuPop({ id, data, dispatch, onCancel }) {
|
||||
console.log(data);
|
||||
const [ tableData, setTableData ] = useState([])
|
||||
const [ yjData, setYjData ] = useState([])
|
||||
const [ tabVal, setTabVal ] = useState('1')
|
||||
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
||||
const width = 780;
|
||||
|
||||
const closePop = () => {
|
||||
if(onCancel){
|
||||
|
|
@ -84,33 +93,33 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
<div className='ShenYaPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stationCode}</span>
|
||||
</div>
|
||||
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
<div className='homeModal2_content' >
|
||||
{
|
||||
tabVal==='1'?
|
||||
</div>
|
||||
<div className='modal-body'>
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
</div>
|
||||
{
|
||||
tabVal==='1'?
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '480px'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}><Empty description={'暂无数据'} /></div>
|
||||
:null
|
||||
}
|
||||
{
|
||||
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
||||
}
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
{
|
||||
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
||||
}
|
||||
</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 style={{marginLeft:'200px'}}>
|
||||
<Radio.Group onChange={(e)=>{setTabVal(e.target.value)}} defaultValue="1" size="large" buttonStyle="outline">
|
||||
<Radio.Group onChange={(e)=>{setTabVal(e.target.value)}} defaultValue="1" size='middle' buttonStyle="outline">
|
||||
<Radio.Button value="1">数据图</Radio.Button>
|
||||
<Radio.Button value="2">数据表</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import moment from "moment"
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import titleBg from '@/assets/images/modal/title.png';
|
||||
import { Modal, Tabs } from 'antd';
|
||||
import './index.less'
|
||||
import ReservoirPanel from '../../../components/Business/SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel'
|
||||
|
||||
|
||||
function ShuikuPop({ id, data, dispatch }) {
|
||||
console.log(data);
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
useEffect(()=>{
|
||||
setTimeout(() => {
|
||||
//防止Modal打开时echarts不能找到正确的大小
|
||||
setShow(true)
|
||||
}, 200);
|
||||
},[])
|
||||
|
||||
const closePop = () => {
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='shuikuPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stnm}</span>
|
||||
</div>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{show?<ReservoirPanel stcd={data?.stcd} cleanMode={true} />:null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
.shuikuPop{
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
|
||||
|
||||
.modal-header {
|
||||
height: 50px; // Reduced height to bring line closer
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
// Separator line using pseudo-element for precise positioning
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 9px;
|
||||
left: 20px; // Align with title image (which starts at padding-left)
|
||||
right: 0; // Extend to the right edge
|
||||
height: 1px;
|
||||
background: rgba(18, 137, 221, 0.5);
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
height: 30px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: contain;
|
||||
padding-left: 30px; // Adjust based on image content
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-tabs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: 70%;
|
||||
align-items: center;
|
||||
gap: 60px; // Add spacing between tabs
|
||||
justify-content: center;
|
||||
.tab-item {
|
||||
padding: 0 10px; // Reduce horizontal padding inside tab item
|
||||
height: 90%;
|
||||
width: 15%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px; // Increase font size
|
||||
color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
|
||||
transition: all 0.3s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 100% 8px; // Control height of the indicator bar
|
||||
position: relative;
|
||||
margin-bottom: -1px; // Align with bottom border if needed
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
// Selected background image
|
||||
background-image: url('../../../../../assets/images/modal/selected.png');
|
||||
background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
|
||||
background-position: center center; // Push image slightly down to align with bottom edge
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 18px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
// flex: 1;
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import moment from "moment"
|
||||
import {
|
||||
CloseOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Modal, Tabs } from 'antd';
|
||||
import genDamImage from '../../../../components/DamGraph/DamImage';
|
||||
import Skssjc from "../../../../components/skComp/Skssjc";
|
||||
import Sksjcx from "../../../../components/skComp/Sksjcx";
|
||||
import { reservoirlist } from "../../../../service/station"
|
||||
|
||||
|
||||
|
||||
function ShuikuPop({ id, data, dispatch }) {
|
||||
console.log(data);
|
||||
const [picData, setPicData] = useState({});
|
||||
const [damGraph, setDamGraph] = useState();
|
||||
const [tableData, setTableData] = useState([])
|
||||
|
||||
const getData = async (params) => {
|
||||
setTableData(await reservoirlist(params));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// if (data.url && data.url.length > 1) {
|
||||
// setPicData({
|
||||
// pic1: data.url[0]?.imgPath,
|
||||
// pic2: data.url[1]?.imgPath,
|
||||
// pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
// pic2Tm: moment(data.url[1]?.tm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
// });
|
||||
// } else if (data.url && data.url.length == 1) {
|
||||
// setPicData({
|
||||
// pic1: data.url[0]?.imgPath,
|
||||
// pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
// });
|
||||
// }
|
||||
|
||||
}, [data]);// eslint-disable-line
|
||||
|
||||
useEffect(() => {
|
||||
const img = genDamImage(data, 400, 260)
|
||||
setDamGraph(img);
|
||||
}, [data]);// eslint-disable-line
|
||||
|
||||
useEffect(() => {
|
||||
let option = {
|
||||
sources: ["SW", "SK"],
|
||||
args: "",
|
||||
};
|
||||
getData(option)
|
||||
}, [])
|
||||
const closePop = () => {
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
const width = 1050;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dp-popup" style={{ position: 'absolute', top: 0, width,left: 0,height:646, lineHeight: 1,backgroundColor:'#fff',borderRadius:'10px'}}>
|
||||
<div className="dp-popup-content" style={{height:'100%',borderRadius:'10px'}}>
|
||||
<div className="content-body tyb skpop" id='tyb' style={{ height: '100%' }}>
|
||||
<div className="normalModalStyle" style={{borderRadius:10}}>
|
||||
<div className="normalModalStyle_title" style={{marginBottom:0}}>
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
<span>{data?.stnm} </span>
|
||||
{/* {(data?.sttp && data?.stnm==='黑石咀') &&
|
||||
<span style={
|
||||
{
|
||||
display:"inline-block",
|
||||
padding: "5px 10px",
|
||||
color: "#74a7ff",
|
||||
border: "1px solid #74a7ff",
|
||||
borderRadius: "5px"
|
||||
}
|
||||
}> {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}（{{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]}）</span>} */}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{paddingLeft:15}}>
|
||||
<Tabs defaultActiveKey="1">
|
||||
<Tabs.TabPane tab="实时监测" key="1">
|
||||
<Skssjc data={{ ...data }}/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="数据查询" key="2">
|
||||
<Sksjcx record={data}/>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
<div className="boxfoot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
@ -1,6 +1,16 @@
|
|||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { Empty, Form, Button, Input, DatePicker } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import { Empty } from 'antd';
|
||||
import {
|
||||
CloseOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CaretLeftOutlined,
|
||||
CaretRightOutlined,
|
||||
PlusOutlined,
|
||||
MinusOutlined
|
||||
} from "@ant-design/icons";
|
||||
import titleBg from '@/assets/images/modal/title.png';
|
||||
import './index.less'
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import { httppost } from '../../../../../utils/request';
|
||||
import apiurl from '../../../../../service/apiurl';
|
||||
|
|
@ -9,14 +19,12 @@ import ToolBar from './toolbar';
|
|||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
|
||||
function ShenYa({ id, data, dispatch, onCancel }) {
|
||||
function ShuikuPop({ id, data, dispatch, onCancel }) {
|
||||
console.log(data);
|
||||
const [ tableData, setTableData ] = useState([])
|
||||
const [ yjData, setYjData ] = useState([])
|
||||
const [ tabVal, setTabVal ] = useState('1')
|
||||
// const option = useMemo(() => drpOption(tableData), [tableData])
|
||||
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
||||
const width = 780;
|
||||
|
||||
const closePop = () => {
|
||||
if(onCancel){
|
||||
|
|
@ -35,7 +43,7 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
|||
stationCode: stationCode
|
||||
}
|
||||
|
||||
const { code, data} = await httppost(apiurl.monitor.dbaq.wyList,params)
|
||||
const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
|
|
@ -85,35 +93,33 @@ function ShenYa({ id, data, dispatch, onCancel }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
<div className='ShenYaPop'>
|
||||
<div className="modal-header">
|
||||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||||
<span className="title-text">{data.stationCode}</span>
|
||||
</div>
|
||||
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
<div className="close-btn" onClick={closePop}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
<div className='homeModal2_content'>
|
||||
{
|
||||
tabVal==='1'?
|
||||
</div>
|
||||
<div className='modal-body'>
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
</div>
|
||||
{
|
||||
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>
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '480px'}}/>
|
||||
:<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);
|
||||
export default React.memo(ShuikuPop);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
.ShenYaPop{
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
|
||||
|
||||
.modal-header {
|
||||
height: 50px; // Reduced height to bring line closer
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
// Separator line using pseudo-element for precise positioning
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 9px;
|
||||
left: 20px; // Align with title image (which starts at padding-left)
|
||||
right: 0; // Extend to the right edge
|
||||
height: 1px;
|
||||
background: rgba(18, 137, 221, 0.5);
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
height: 30px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: contain;
|
||||
padding-left: 30px; // Adjust based on image content
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-tabs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: 70%;
|
||||
align-items: center;
|
||||
gap: 60px; // Add spacing between tabs
|
||||
justify-content: center;
|
||||
.tab-item {
|
||||
padding: 0 10px; // Reduce horizontal padding inside tab item
|
||||
height: 90%;
|
||||
width: 15%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px; // Increase font size
|
||||
color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
|
||||
transition: all 0.3s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 100% 8px; // Control height of the indicator bar
|
||||
position: relative;
|
||||
margin-bottom: -1px; // Align with bottom border if needed
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
|
||||
// Selected background image
|
||||
background-image: url('../../../../../assets/images/modal/selected.png');
|
||||
background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
|
||||
background-position: center center; // Push image slightly down to align with bottom edge
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 18px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
// flex: 1;
|
||||
height: 570px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { Empty, Form, Button, Input, DatePicker } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import { httppost } from '../../../../../utils/request';
|
||||
import apiurl from '../../../../../service/apiurl';
|
||||
import moment from "moment"
|
||||
import ToolBar from './toolbar';
|
||||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
|
||||
function ShenYa({ id, data, dispatch, onCancel }) {
|
||||
console.log(data);
|
||||
const [ tableData, setTableData ] = useState([])
|
||||
const [ yjData, setYjData ] = useState([])
|
||||
const [ tabVal, setTabVal ] = useState('1')
|
||||
// const option = useMemo(() => drpOption(tableData), [tableData])
|
||||
const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
|
||||
const width = 780;
|
||||
|
||||
const closePop = () => {
|
||||
if(onCancel){
|
||||
onCancel()
|
||||
}
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
|
||||
const getData = async(tms,stationCode)=>{
|
||||
const params = {
|
||||
// type: 0,
|
||||
dateTimeRangeSo: {
|
||||
start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
stationCode: stationCode
|
||||
}
|
||||
|
||||
const { code, data} = await httppost(apiurl.monitor.dbaq.wyList,params)
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
setTableData(data)
|
||||
}
|
||||
|
||||
const getYjData = async(stationCode)=>{
|
||||
const params = {
|
||||
"pageSo": {
|
||||
"pageSize": 10,
|
||||
"pageNumber": 1
|
||||
},
|
||||
"stationCode": stationCode
|
||||
}
|
||||
|
||||
const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
const linshi = []
|
||||
records?.map((item)=>{
|
||||
if(item.status===0){
|
||||
return
|
||||
}
|
||||
if(item.valueOne||0){
|
||||
linshi.push({
|
||||
yjName:item.level ===1?'黄色预警':'红色预警',
|
||||
value:item.valueOne,
|
||||
color:item.level ===1?'#f1bf42':'red'
|
||||
})
|
||||
}
|
||||
if(item.valueTwo||0){
|
||||
linshi.push({
|
||||
yjName:item.level ===1?'黄色预警':'红色预警',
|
||||
value:item.valueTwo,
|
||||
color:item.level ===1?'#f1bf42':'red'
|
||||
})
|
||||
}
|
||||
})
|
||||
setYjData(linshi)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
getYjData(data.stationCode)
|
||||
getData([moment().add(-1,'months'),moment()],data.stationCode)
|
||||
},[])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{padding:'0 20px'}}>
|
||||
<ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
|
||||
</div>
|
||||
<div className='homeModal2_content'>
|
||||
{
|
||||
tabVal==='1'?
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}>
|
||||
<Empty description={'暂无数据'} />
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
{
|
||||
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ShenYa);
|
||||
|
|
@ -2,9 +2,9 @@ import React, { useCallback } from 'react'
|
|||
import { Button, Modal, Space } from 'antd';
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import DrpPop from './DrpPop';
|
||||
import ShuikuPop from './ShuikuPop';
|
||||
import ShuikuPop from './ShuiKuPop/index.js';
|
||||
import GongShuiPop from './GongShui';
|
||||
import PciStPop from './PciStPop';
|
||||
import PciStPop from './PciStPop/index';
|
||||
import WeiYi from './WeiYi/index.js';
|
||||
import ShenYa from './ShenYa/index.js';
|
||||
import ShenLiu from './ShenLiu/index.js';
|
||||
|
|
@ -55,14 +55,14 @@ function FeaturePops({ mapobj }) {
|
|||
)
|
||||
}else if (type === 'hdsw') {
|
||||
return (
|
||||
<Modal width={1050} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={'90%'} transitionName="" wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<ShuikuPop id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}else if (type === "gongshui" ) {
|
||||
// 供水
|
||||
return (
|
||||
<Modal width={1050} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={'90%'} transitionName="" wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<GongShuiPop id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
|
|
@ -76,21 +76,21 @@ function FeaturePops({ mapobj }) {
|
|||
}else if (type === 'weiyi'){
|
||||
//位移
|
||||
return (
|
||||
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={1000} wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<WeiYi id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}else if (type === 'shenya'){
|
||||
//渗压
|
||||
return (
|
||||
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={1000} wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<ShenYa id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}else if (type === 'shenliu'){
|
||||
//渗流
|
||||
return (
|
||||
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<Modal width={1000} wrapClassName='home_modal home_modal_transparent' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<ShenLiu id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -119,6 +119,11 @@
|
|||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
.home_modal_transparent{
|
||||
.ant-modal-content{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.normalModalStyle{
|
||||
width: 100%;
|
||||
// min-height: 600px;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ const FlowPanel = ({ stcd, cleanMode = false }) => {
|
|||
<div className="left-panel">
|
||||
<div className="panel-header">
|
||||
<div className="query-label"><span className="dot"></span>实时流量</div>
|
||||
{!cleanMode && (
|
||||
{!cleanMode && !stcd && (
|
||||
<div className="station-select">
|
||||
<span>站点：</span>
|
||||
<Select
|
||||
|
|
|
|||
|
|
@ -0,0 +1,329 @@
|
|||
import React, { useEffect, useReducer, useRef, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Form, Button, Input, Table, Modal, message } from 'antd';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { geometryCenter } from '../../../utils/tools';
|
||||
import './index.less'
|
||||
import { config } from '@/config';
|
||||
import { httpget } from '@/utils/request';
|
||||
import apiurl from '@/service/apiurl';
|
||||
|
||||
export default function Btn({open, mode, layerVisible, setOpen, mapType, layerVisibleChanged}) {
|
||||
const [form] = Form.useForm();
|
||||
const [ tableData, setTableData ] = useState([])
|
||||
const dispatch = useDispatch()
|
||||
const columns = [
|
||||
{ title: '名称', key: 'name', dataIndex: 'name',align: "center",width:150, ellipsis: true, },
|
||||
{ title: '类型', key: 'type', dataIndex: 'type',align: "center",width: 50, ellipsis: true },
|
||||
];
|
||||
// const importMap = {
|
||||
// '业务规则库': () => import('../../../sz/ywgz/form'),
|
||||
// '调度方案库': () => import('../../../sz/ddfa/form'),
|
||||
// '工程安全知识库': () => import('../../../sz/khzbgl/form')
|
||||
// };
|
||||
|
||||
const onFinish = ({name}) => {
|
||||
if(name){
|
||||
getData(name)
|
||||
}else{
|
||||
setTableData([])
|
||||
}
|
||||
}
|
||||
|
||||
const getData = async(e)=>{
|
||||
const { code, data} = await httpget(apiurl.monitor.globalSearch, { name: e })
|
||||
if(code!==200){
|
||||
// return
|
||||
}
|
||||
setTableData(data||[])
|
||||
}
|
||||
|
||||
const clickItem = (item)=>{
|
||||
// 业务规则库
|
||||
if (item.type == '业务规则库' || item.type == '调度方案库' || item.type == '工程安全知识库') {
|
||||
// regularOpen(item)
|
||||
return; // 添加return避免继续执行
|
||||
}
|
||||
|
||||
// 工程安全监测点
|
||||
if (item.type == '渗压站' || item.type == '渗流站' || item.type == '位移站') {
|
||||
renderGCaqModal(item)
|
||||
return; // 添加return避免继续执行
|
||||
}
|
||||
|
||||
// 关闭所有已打开的弹窗
|
||||
dispatch.runtime.closeFeaturePopAll();
|
||||
// 先关闭所有图层
|
||||
dispatch.map.setLayerVisible({
|
||||
WxqLayer: false,
|
||||
HdswLayer: false,
|
||||
RealDrpLayer: false,
|
||||
PicStLayer: false,
|
||||
ShuiKuLayer: false,
|
||||
TuRangLayer: false,
|
||||
GongShuiLayer: false,
|
||||
AZDLayer: false,
|
||||
QSYDWLayer: false,
|
||||
YHJMHLayer: false,
|
||||
YjgbLayer: false,
|
||||
SYLayer: false, //渗压站
|
||||
SLLayer: false, //渗流站
|
||||
WYLayer: false, //位移站
|
||||
ShuiDianZhanLayer: false,
|
||||
});
|
||||
// 根据类型确定弹窗类型和图层
|
||||
let popType = item.type;
|
||||
let layerToShow = {};
|
||||
|
||||
// 对特定类型进行映射和图层设置
|
||||
switch (item.type) {
|
||||
// case '水文站':
|
||||
// popType = 'hdsw';
|
||||
// layerToShow = { HdswLayer: true };
|
||||
// break;
|
||||
// case '雨量站':
|
||||
// popType = 'drp';
|
||||
// layerToShow = { RealDrpLayer: true };
|
||||
// break;
|
||||
case '视频站':
|
||||
popType = 'tuxiang';
|
||||
layerToShow = { PicStLayer: true };
|
||||
break;
|
||||
case '水库水位站':
|
||||
popType = 'shuiku';
|
||||
layerToShow = { HdswLayer: true }; //水位站用HdswLayer, ShuikuLayer是水利工程的
|
||||
break;
|
||||
case '河道水位站':
|
||||
popType = 'hedao';
|
||||
layerToShow = { HdswLayer: true };
|
||||
break;
|
||||
case '土壤墒情站':
|
||||
popType = 'turangshangqing';
|
||||
layerToShow = { TuRangLayer: true };
|
||||
break;
|
||||
case '流量站':
|
||||
popType = 'gongshui';
|
||||
layerToShow = { GongShuiLayer: true };
|
||||
break;
|
||||
|
||||
case '安置点':
|
||||
popType = 'anzhidian';
|
||||
layerToShow = { AZDLayer: true };
|
||||
break;
|
||||
case '企事业单位':
|
||||
popType = 'qishiyedanwei';
|
||||
layerToShow = { QSYDWLayer: true };
|
||||
break;
|
||||
case '沿河居民点':
|
||||
popType = 'yanhejuminhu';
|
||||
layerToShow = { YHJMHLayer: true };
|
||||
break;
|
||||
default:
|
||||
// 默认不设置特定图层
|
||||
break;
|
||||
}
|
||||
|
||||
// 设置图层可见性
|
||||
if (Object.keys(layerToShow).length > 0) {
|
||||
dispatch.map.setLayerVisible(layerToShow);
|
||||
}
|
||||
const record = JSON.parse(item.jsonStr);
|
||||
|
||||
if (item.type == '危险区') {
|
||||
dispatch.map.setLayerVisible({ WxqLayer: true })
|
||||
const wxq = JSON.parse(sessionStorage.getItem('wxq'))?.[record?.adcd] || ''
|
||||
if (!wxq) {
|
||||
message.error('暂无经纬度数据')
|
||||
return
|
||||
}
|
||||
const data = wxq.properties
|
||||
const center = item.type == '危险区' ? geometryCenter(wxq.geometry) :
|
||||
[record?.lgtd, record?.lttd];
|
||||
|
||||
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [center[0], center[1]],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
})
|
||||
dispatch.runtime.setFeaturePop({
|
||||
id: data.PID,
|
||||
data: { ...data },
|
||||
type: 'wxq',
|
||||
lgtd: center[0],
|
||||
lttd: center[1],
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.type == '安置点' || item.type == '企事业单位' || item.type == '沿河居民点') {
|
||||
// 显示弹窗
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: popType,
|
||||
data: record,
|
||||
lgtd: item.lgtd,
|
||||
lttd: item.lttd,
|
||||
id: record.id
|
||||
});
|
||||
}
|
||||
|
||||
// 雨量站
|
||||
if (item.type == '雨量站') {
|
||||
// // 创建近一小时的时间范围
|
||||
// const tms = [
|
||||
// moment().add(-1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
|
||||
// moment().format('YYYY-MM-DD HH:mm:ss')
|
||||
// ];
|
||||
|
||||
// // 直接调用httppost2获取数据并添加图层
|
||||
// const fetchAndAddLayer = async () => {
|
||||
// try {
|
||||
// const { data, code, msg } = await httppost(apiurl.station.rainlist, {
|
||||
// "stm": tms[0],
|
||||
// "etm": tms[1]
|
||||
// });
|
||||
|
||||
// if (code !== 200) {
|
||||
// message.error(msg || '请求失败');
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const list = data.map((i) => ({
|
||||
// id: i.stcd,
|
||||
// ...i,
|
||||
// drp: i.drp
|
||||
// }));
|
||||
|
||||
// dispatch.map.setLayerVisible({ RealDrpLayer: true })
|
||||
// dispatch.map.setLayerSetting({RealDrpLayer:list})
|
||||
// } catch (error) {
|
||||
// console.error('获取雨量站数据失败', error);
|
||||
// }
|
||||
// };
|
||||
|
||||
// fetchAndAddLayer();
|
||||
}
|
||||
|
||||
|
||||
// 设置地图视角
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [item.lgtd, item.lttd],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 业务规则库弹框
|
||||
// const regularOpen = async (record) => {
|
||||
// const id = record?.unionCode
|
||||
// const com = record.type == '业务规则库' ?
|
||||
// { url: apiurl.zsk.ywgz.getOne } :
|
||||
// record.type == '调度方案库' ?
|
||||
// { url: apiurl.zsk.ddfa.getOne } :
|
||||
// { url: apiurl.zsk.gcaq.getOne };
|
||||
// const res = await httpget(com.url + id)
|
||||
// // 导入业务规则库的Modal组件
|
||||
// // 使用映射函数进行导入
|
||||
// try {
|
||||
// const ModalForm = await importMap[record.type]();
|
||||
|
||||
// Modal.destroyAll(); // 先销毁可能存在的其他Modal
|
||||
// const modal = Modal.confirm({
|
||||
// title: <div style={{ width: '100%', padding: '16px 24px', color: '#3B4859', borderBottom: '1px solid #f0f0f0', position: "absolute", top: 0, left: 0 }}>
|
||||
// <div style={{ fontSize: 16, fontWeight: 'bold' }}>{record.name}详情</div>
|
||||
// </div>,
|
||||
// width: 1000,
|
||||
// content: (
|
||||
// <>
|
||||
// <div style={{ marginTop: 45 }}></div>
|
||||
// <ModalForm.default
|
||||
// mode="view"
|
||||
// record={res}
|
||||
// />
|
||||
// </>
|
||||
// ),
|
||||
// icon: null,
|
||||
// okButtonProps: { style: { display: 'none' } },
|
||||
// cancelButtonProps: { style: { display: 'none' } },
|
||||
// closable: true
|
||||
// });
|
||||
// } catch (error) {
|
||||
// console.error('模块导入失败:', error);
|
||||
// message.error(`无法加载${record.type}详情，请稍后再试`);
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
|
||||
// 工程安全监测点
|
||||
const renderGCaqModal = (record) => {
|
||||
const row = { ...record, stationCode: record.name }
|
||||
let popType = '';
|
||||
|
||||
if (record.type == '渗压站') {
|
||||
popType = 'shenya';
|
||||
} else if (record.type == '渗流站') {
|
||||
popType = 'shenliu';
|
||||
} else if (record.type == '位移站') {
|
||||
popType = 'weiyi';
|
||||
}
|
||||
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: popType,
|
||||
data: row,
|
||||
lgtd: record.lgtd,
|
||||
lttd: record.lttd,
|
||||
id: record.id
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
return ()=>{
|
||||
dispatch.runtime.closeFeaturePopAll()
|
||||
dispatch.map.setLayerVisible({
|
||||
WxqLayer: false,
|
||||
HdswLayer: false,
|
||||
RealDrpLayer: false,
|
||||
PicStLayer: false,
|
||||
ShuiKuLayer: false,
|
||||
GongShuiLayer: false,
|
||||
AZDLayer: false,
|
||||
QSYDWLayer: false,
|
||||
YHJMHLayer: false
|
||||
});
|
||||
dispatch.runtime.setHome()
|
||||
}
|
||||
},[])
|
||||
|
||||
|
||||
return (
|
||||
<div className={open?'mapToolSearch width260':'mapToolSearch width0'}>
|
||||
<div className='mapToolSearchBox'>
|
||||
<div className='mapToolSearchBoxTitle'>
|
||||
搜索
|
||||
<CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
|
||||
</div>
|
||||
<Form form={form} className="search-bar" onFinish={onFinish}>
|
||||
<Form.Item label="" name="name">
|
||||
<Input placeholder="请输入" allowClear/>
|
||||
</Form.Item>
|
||||
<Button type="primary" className="ant-btn-ghost-blue" htmlType="submit">查询</Button>
|
||||
</Form>
|
||||
<Table
|
||||
rowKey="id"
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={tableData}
|
||||
scroll={{ y: "400px"}}
|
||||
onRow={
|
||||
(row)=>({
|
||||
// onClick:()=>clickItem(row)
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@ import { CloseOutlined } from '@ant-design/icons';
|
|||
import { useLocation } from 'react-router'
|
||||
import './index.less'
|
||||
import { config } from '@/config';
|
||||
import LayerBox from './layer'
|
||||
import GlobalSearch from './globalSearch'
|
||||
|
||||
export default function Btn() {
|
||||
const dispatch = useDispatch()
|
||||
|
|
@ -16,24 +18,35 @@ export default function Btn() {
|
|||
const mapCenter = useSelector(s => s.runtime.mapCenter)||{}
|
||||
const mode = useSelector(s=>s.map.mode)
|
||||
const [open, setOpen] = useState(false)//是否弹出图层窗口
|
||||
const [searchOpen, SearchOpen] = useState(false)//弹出全局搜索
|
||||
const [targetZoom, setTargetZoom] = useState(null)//点击缩放按钮后地图目标的zoom值
|
||||
const lastCameraTargetTimeRef = useRef(0);//节流
|
||||
|
||||
useEffect(()=>{
|
||||
//移动地图后同步targetZoom值
|
||||
setTargetZoom(mapCenter?.zoom||null)
|
||||
},[mapCenter])
|
||||
|
||||
//切换图层
|
||||
const layerVisibleChanged = (event)=>{
|
||||
const vo = { [event.target.name]: event.target.checked };
|
||||
if(event.target.checked && (event.target.name==='SYLayer' || event.target.name==='SLLayer' || event.target.name==='WYLayer')){
|
||||
// dispatch.runtime.setCameraTarget({
|
||||
// center: [114.15437134051429, 29.744689445729758],
|
||||
// zoom: 18,
|
||||
// pitch: 60
|
||||
// })
|
||||
const now = Date.now()
|
||||
if(
|
||||
event.target.checked &&
|
||||
(event.target.name==='SYLayer' || event.target.name==='SLLayer' || event.target.name==='WYLayer') &&
|
||||
(now-lastCameraTargetTimeRef.current >=1000)
|
||||
){
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [114.15437134051429, 29.744689445729758],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
})
|
||||
lastCameraTargetTimeRef.current = now;
|
||||
}
|
||||
dispatch.map.setLayerVisible(vo);
|
||||
}
|
||||
|
||||
//切换地图框架
|
||||
const mapType = (name)=>{
|
||||
if(name==='2d'){
|
||||
dispatch.map.setMode('2d');
|
||||
|
|
@ -87,7 +100,10 @@ export default function Btn() {
|
|||
<div title={`${showPanels?'收起':'展开'}功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${showPanels?'shouqi.png':'zhankai.png'}`} />
|
||||
</div>
|
||||
<div title="查询" onClick={()=>{message.warn('功能开发中')}}>
|
||||
<div title="查询" onClick={()=>{
|
||||
if(!searchOpen){setOpen(false)}
|
||||
SearchOpen(!searchOpen)
|
||||
}}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/search.png`} />
|
||||
</div>
|
||||
<div title="还原地图展示位置" onClick={()=>dispatch.runtime.setHome()}>
|
||||
|
|
@ -118,188 +134,32 @@ export default function Btn() {
|
|||
<div title={isFullScreen?"退出全屏":"进入全屏"} onClick={()=>dispatch.runtime.setIsFullScreen(!isFullScreen)}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${isFullScreen?'quanping2.png':'quanping.png'}`} />
|
||||
</div>
|
||||
<div title="地图展示图层控制" onClick={()=>{setOpen(!open)}}>
|
||||
<div title="地图展示图层控制" onClick={()=>{
|
||||
if(!open){SearchOpen(false)}
|
||||
setOpen(!open)}
|
||||
}>
|
||||
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayer' style={{width: open ? '160px' : '0',}}>
|
||||
<div className='mapToolLayerBox'>
|
||||
<div className='mapToolLayerBoxTitle'>
|
||||
资源目录
|
||||
<CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxContent'>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SatelliteImage']} onChange={()=>mapType('2d')} name={'SatelliteImage'} > 影像图 </Checkbox>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center:config.mapCenter,
|
||||
zoom: 15,
|
||||
pitch: config.pitch3d,
|
||||
}
|
||||
if(mode==='2d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('2d')
|
||||
}}
|
||||
>
|
||||
{/* <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div> */}
|
||||
<div className='mapToolLayerBoxItemIconDiv' style={{marginLeft:'12px'}}>水库全景</div>
|
||||
</div>
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center: [114.15437134051429, 29.744689445729758],
|
||||
zoom: 14,
|
||||
pitch: 60
|
||||
}
|
||||
if(mode==='2d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('2d')
|
||||
}}
|
||||
>
|
||||
{/* <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div> */}
|
||||
<div className='mapToolLayerBoxItemIconDiv' style={{marginLeft:'12px'}}>流域全景</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={mode==='3d'} onChange={()=>mapType('3d')} name={'3d'} > 3D图 </Checkbox>
|
||||
</div>
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
style={{}}
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center: [114.15437134051429, 29.744689445729758],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
}
|
||||
if(mode==='3d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('3d')
|
||||
}}
|
||||
>
|
||||
<div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>主坝</div>
|
||||
</div>
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center: [114.18263599215172, 29.747020722346193],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
}
|
||||
if(mode==='3d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('3d')
|
||||
}}
|
||||
>
|
||||
<div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>副坝</div>
|
||||
</div>
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center: [114.15437134051429, 29.743689445729758],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
}
|
||||
if(mode==='3d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('3d')
|
||||
}}
|
||||
>
|
||||
<div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/yihongdao.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>溢洪道</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem' style={{marginBottom:'3px'}}>
|
||||
监测体系
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['HdswLayer']} onChange={layerVisibleChanged} name={'HdswLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={10} height={18} src={`${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>水库水文站</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['GongShuiLayer']} onChange={layerVisibleChanged} name={'GongShuiLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>流量站</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['PicStLayer']} onChange={layerVisibleChanged} name={'PicStLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/video.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>视频站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SYLayer']} onChange={layerVisibleChanged} name={'SYLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>渗压站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SLLayer']} onChange={layerVisibleChanged} name={'SLLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>渗流站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WYLayer']} onChange={layerVisibleChanged} name={'WYLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/wy.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>位移站</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='mapToolLayerBoxItem' style={{marginBottom:'3px'}}>
|
||||
洪水防御
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WxqLayer']} onChange={layerVisibleChanged} name={'WxqLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/weixianqu.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>危险区</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['AZDLayer']} onChange={layerVisibleChanged} name={'AZDLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/anzhidian.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>安置点</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['QSYDWLayer']} onChange={layerVisibleChanged} name={'QSYDWLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/qishiyedanwei.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>企事业单位</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['YHJMHLayer']} onChange={layerVisibleChanged} name={'YHJMHLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/yanhejuminhu.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>沿河居民户</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<LayerBox
|
||||
open={open}
|
||||
mode={mode}
|
||||
layerVisible={layerVisible}
|
||||
setOpen={setOpen}
|
||||
mapType={mapType}
|
||||
layerVisibleChanged={layerVisibleChanged}
|
||||
/>
|
||||
|
||||
<GlobalSearch
|
||||
open={searchOpen}
|
||||
mode={mode}
|
||||
layerVisible={layerVisible}
|
||||
setOpen={SearchOpen}
|
||||
mapType={mapType}
|
||||
layerVisibleChanged={layerVisibleChanged}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,4 +115,77 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mapToolSearch{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 45px;
|
||||
width: 0;
|
||||
height: 580px;
|
||||
transition: width 0.3s ease-in-out;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
|
||||
.mapToolSearchBox{
|
||||
position: absolute;
|
||||
background: #1c3965f0;
|
||||
border: 1px solid #2755a1;
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
.mapToolSearchBoxTitle{
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #2755a1;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
|
||||
.mapToolLayerBoxTitleIcon{
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.search-bar {
|
||||
margin-bottom: 0px;
|
||||
padding: 10px;
|
||||
// background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
label {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
width: 125px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.width260{
|
||||
width: 260px;
|
||||
}
|
||||
.width160{
|
||||
width: 160px;
|
||||
}
|
||||
.width0{
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
import React, { useEffect, useReducer, useRef, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Checkbox, message } from 'antd';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { useLocation } from 'react-router'
|
||||
import './index.less'
|
||||
import { config } from '@/config';
|
||||
|
||||
export default function Btn({open, mode, layerVisible, setOpen, mapType, layerVisibleChanged}) {
|
||||
const dispatch = useDispatch()
|
||||
|
||||
return (
|
||||
<div className={open?'mapToolLayer width160':'mapToolLayer width0'}>
|
||||
<div className='mapToolLayerBox'>
|
||||
<div className='mapToolLayerBoxTitle'>
|
||||
资源目录
|
||||
<CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxContent'>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SatelliteImage']} onChange={()=>mapType('2d')} name={'SatelliteImage'} > 影像图 </Checkbox>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center:config.mapCenter,
|
||||
zoom: 15,
|
||||
pitch: config.pitch3d,
|
||||
}
|
||||
if(mode==='2d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('2d')
|
||||
}}
|
||||
>
|
||||
{/* <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div> */}
|
||||
<div className='mapToolLayerBoxItemIconDiv' style={{marginLeft:'12px'}}>水库全景</div>
|
||||
</div>
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center: [114.15437134051429, 29.744689445729758],
|
||||
zoom: 14,
|
||||
pitch: 60
|
||||
}
|
||||
if(mode==='2d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('2d')
|
||||
}}
|
||||
>
|
||||
{/* <div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div> */}
|
||||
<div className='mapToolLayerBoxItemIconDiv' style={{marginLeft:'12px'}}>流域全景</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem'>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={mode==='3d'} onChange={()=>mapType('3d')} name={'3d'} > 3D图 </Checkbox>
|
||||
</div>
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
style={{}}
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center: [114.15437134051429, 29.744689445729758],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
}
|
||||
if(mode==='3d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('3d')
|
||||
}}
|
||||
>
|
||||
<div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>主坝</div>
|
||||
</div>
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center: [114.18263599215172, 29.747020722346193],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
}
|
||||
if(mode==='3d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('3d')
|
||||
}}
|
||||
>
|
||||
<div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/ba.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>副坝</div>
|
||||
</div>
|
||||
<div
|
||||
className='mapToolLayerBoxItem hoverBg'
|
||||
onClick={()=>{
|
||||
const cameraTargeta = {
|
||||
center: [114.15437134051429, 29.743689445729758],
|
||||
zoom: 18,
|
||||
pitch: 60
|
||||
}
|
||||
if(mode==='3d'){
|
||||
dispatch.runtime.setCameraTarget(cameraTargeta)
|
||||
}else{
|
||||
dispatch.runtime.setMapCenter(cameraTargeta)
|
||||
}
|
||||
mapType('3d')
|
||||
}}
|
||||
>
|
||||
<div className='mapToolLayerBoxItemIcon'><img width={16} height={16} src={`${process.env.PUBLIC_URL}/assets/maptool/yihongdao.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>溢洪道</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem' style={{marginBottom:'3px'}}>
|
||||
监测体系
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'HdswLayer',checked:!layerVisible['HdswLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['HdswLayer']} name={'HdswLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/hdsw4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>水库水文站</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'GongShuiLayer',checked:!layerVisible['GongShuiLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['GongShuiLayer']} name={'GongShuiLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>流量站</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'PicStLayer',checked:!layerVisible['PicStLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['PicStLayer']} name={'PicStLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/video4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>视频站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SYLayer',checked:!layerVisible['SYLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SYLayer']} name={'SYLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>渗压站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'SLLayer',checked:!layerVisible['SLLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['SLLayer']} name={'SLLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>渗流站</div>
|
||||
</div>
|
||||
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'WYLayer',checked:!layerVisible['WYLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WYLayer']} name={'WYLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/wy4.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>位移站</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='mapToolLayerBoxItem' style={{marginBottom:'3px'}}>
|
||||
洪水防御
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'WxqLayer',checked:!layerVisible['WxqLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['WxqLayer']} name={'WxqLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/weixianqu2.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>危险区</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'AZDLayer',checked:!layerVisible['AZDLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['AZDLayer']} name={'AZDLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/anzhidian2.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>安置点</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'QSYDWLayer',checked:!layerVisible['QSYDWLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['QSYDWLayer']} name={'QSYDWLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/qishiyedanwei2.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>企事业单位</div>
|
||||
</div>
|
||||
<div className='mapToolLayerBoxItem' onClick={()=>layerVisibleChanged({target:{name:'YHJMHLayer',checked:!layerVisible['YHJMHLayer']}})}>
|
||||
<Checkbox className='mapToolLayerBoxItemCheckBox2' color="primary" checked={!!layerVisible['YHJMHLayer']} name={'YHJMHLayer'} ></Checkbox>
|
||||
<div className='mapToolLayerBoxItemIcon2'><img width={17} height={17} src={`${process.env.PUBLIC_URL}/assets/mapicon/yanhejuminhu2.png`} alt=""/></div>
|
||||
<div className='mapToolLayerBoxItemIconDiv'>沿河居民户</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue