Merge branch 'lsf-dev'

src/components/ant_override.less

@@ -460,3 +460,27 @@ input:-webkit-autofill:active {
     }
   }
 }
+//修改Radio全局样式
+.ant-radio-group{
+  .ant-radio-button-wrapper{
+    background: transparent;
+    border-color: rgba(0, 160, 233, 0.6);
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 400;
+
+    
+  }
+  .ant-radio-button-wrapper:not(:first-child)::before{
+    background-color: rgba(0, 160, 233, 0.8);
+    padding: 0;
+    top: 0;
+  }
+  .ant-radio-button-wrapper-checked{
+    background: rgba(0, 160, 233, 0.8);
+    border-color: rgba(0, 160, 233, 0.6);
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 400;
+  }
+}

src/service/apiurl.js

@@ -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',

src/views/Home/MapCtrl/Markers/AZDMarker.js

@@ -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) {

src/views/Home/MapCtrl/Markers/GongShuiMarker.js

@@ -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) {

src/views/Home/MapCtrl/Markers/HdswMarker.js

@@ -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) {

src/views/Home/MapCtrl/Markers/PicStMarker.js

@@ -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) {

src/views/Home/MapCtrl/Markers/QSYDWMarker.js

@@ -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>
   `
 }

src/views/Home/MapCtrl/Markers/SLMarker.js

@@ -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) {

src/views/Home/MapCtrl/Markers/SYMarker.js

@@ -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>
         )
       }

src/views/Home/MapCtrl/Markers/WYMarker.js

@@ -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) {

src/views/Home/MapCtrl/Markers/YHJMHMarker.js

@@ -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) {

src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/TableData.js

@@ -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

src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/drpOption.js

@@ -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,
-        },
-      },
-    ]
-  };
-}

src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/index.js

@@ -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

src/views/Home/MapCtrl/Pops/GongShui/GsJcsj/index.less

@@ -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;
-      }
-    }
-  }
-}

src/views/Home/MapCtrl/Pops/GongShui/index.js

@@ -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 }) {
+function ShuikuPop({ id, data, dispatch }) {
-  console.log("供水弹框数据porps",data);
+  console.log(data);
+  const [show, setShow] = useState(false)
+  
+  useEffect(()=>{
+    setTimeout(() => {
+      //防止Modal打开时echarts不能找到正确的大小
+      setShow(true)
+    }, 200);
+  },[])
+  
   const closePop = () => {
     dispatch.runtime.closeFeaturePop(id);
   };
 
-  const width = 1050;
-
-
   return (
     <>
-      <div className="dp-popup" style={{ position: 'absolute', top: 0, left: 0, width, lineHeight: 1 }}>
+      <div className='shuikuPop'>
-        <div className="dp-popup-content" style={{borderRadius:'10px'}}>
+        <div className="modal-header">
-          <div className="content-body tyb skpop" id='tyb' style={{ height: '100%' }}>
+          <div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
-            <div className="normalModalStyle">
+            <span className="title-text">{data.stnm}</span>
-            <div className="normalModalStyle_title" style={{marginBottom:0}}>
-                        <div className="normalModalStyle_title_icon"></div>
-                        <span>{data.stnm}&emsp;</span>
-                        {/* {data?.sttp &&
-            <span style={
-              { 
-                display:"inline-block",
-                padding: "5px 10px",
-                color: "#74a7ff",
-                border: "1px solid #74a7ff",
-                borderRadius: "5px"
-              }
-            }> {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}（{{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]}）</span>} */}
-                        <div className="normalModalStyle_title_cancel">
-                  <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
-                </div>
-              </div>
-              <div style={{ paddingLeft: 15,paddingTop:15,background:"#fff",borderRadius:'0 0 10px 10px' }} >
-              <Jcsj record={data}/>
-              </div>
           </div>
+          <div 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);

src/views/Home/MapCtrl/Pops/GongShui/index.less

@@ -0,0 +1,100 @@
+.shuikuPop{
+    width: 100%;
+    background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+    .modal-header {
+        height: 50px; // Reduced height to bring line closer
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+        position: relative;
+        margin-top: 10px;
+        // Separator line using pseudo-element for precise positioning
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 9px;
+          left: 20px; // Align with title image (which starts at padding-left)
+          right: 0;   // Extend to the right edge
+          height: 1px;
+          background: rgba(18, 137, 221, 0.5);
+        }
+  
+        .title-wrapper {
+          height: 30px;
+          min-width: 150px;
+          display: flex;
+          align-items: center;
+          background-repeat: no-repeat;
+          background-position: left center;
+          background-size: contain;
+          padding-left: 30px; // Adjust based on image content
+  
+          .title-text {
+            font-size: 16px;
+            color: #fff;
+            text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+            letter-spacing: 2px;
+          }
+        }
+  
+        .modal-tabs {
+          flex: 1;
+          display: flex;
+          height: 70%;
+          align-items: center;
+          gap: 60px; // Add spacing between tabs
+          justify-content: center;
+          .tab-item {
+            padding: 0 10px; // Reduce horizontal padding inside tab item
+            height: 90%;
+            width: 15%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 16px; // Increase font size
+            color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+            transition: all 0.3s;
+            background-repeat: no-repeat;
+            background-position: center bottom;
+            background-size: 100% 8px; // Control height of the indicator bar
+            position: relative;
+            margin-bottom: -1px; // Align with bottom border if needed
+  
+            &:hover {
+              color: #fff;
+            }
+  
+            &.active {
+              color: #fff;
+              text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+              // Selected background image
+              background-image: url('../../../../../assets/images/modal/selected.png');
+              background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+              background-position: center center; // Push image slightly down to align with bottom edge
+            }
+          }
+        }
+  
+        .close-btn {
+          cursor: pointer;
+          color: rgba(255, 255, 255, 0.7);
+          font-size: 18px;
+          transition: color 0.3s;
+  
+          &:hover {
+            color: #fff;
+          }
+        }
+    }
+    .modal-body {
+      // flex: 1;
+      height: 800px;
+      overflow: auto;
+      padding: 10px;
+      color: #fff;
+      position: relative;
+    }
+}

src/views/Home/MapCtrl/Pops/PciStPop/index.js

@@ -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);

src/views/Home/MapCtrl/Pops/PciStPop/index.less

@@ -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;
+    }
+}

src/views/Home/MapCtrl/Pops/ShenLiu/TableData.js

@@ -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> },
   ];

src/views/Home/MapCtrl/Pops/ShenLiu/index.js

@@ -1,6 +1,16 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import { Descriptions, Form, Button, Input, DatePicker } from 'antd';
+import { Empty } from 'antd';
-import {CloseOutlined} from '@ant-design/icons';
+import {
+  CloseOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined,
+  CaretLeftOutlined,
+  CaretRightOutlined,
+  PlusOutlined,
+  MinusOutlined
+} from "@ant-design/icons";
+import titleBg from '@/assets/images/modal/title.png';
+import './index.less'
 import ReactEcharts from 'echarts-for-react';
 import { 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='ShenYaPop'>
-          <div className="normalModalStyle_title">
+        <div className="modal-header">
-              <div className="normalModalStyle_title_icon"></div>
+          <div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
-              {data.stationCode}
+            <span className="title-text">{data.stationCode}</span>
-              <div className="normalModalStyle_title_cancel">
-                  <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
-              </div>
           </div>
+          <div className="close-btn" onClick={closePop}>
+            <CloseOutlined />
+          </div>
+        </div>
+        <div className='modal-body'>
+            <div style={{padding:'0 20px'}}>
+                <ToolBar search={(tms)=>getData(tms,data.stationCode)}/>            
+            </div>
 
-          <div style={{padding:'0 20px'}}>
+            <div className='homeModal1_content'>
-            <ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
-          </div>
-          <div className='homeModal1_content'>
                 <div className='homeModal1_content_lf'>
                     <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);

src/views/Home/MapCtrl/Pops/ShenLiu/index.less

@@ -0,0 +1,116 @@
+.ShenYaPop{
+    width: 100%;
+    background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+    .modal-header {
+        height: 50px; // Reduced height to bring line closer
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+        position: relative;
+        margin-top: 10px;
+        // Separator line using pseudo-element for precise positioning
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 9px;
+          left: 20px; // Align with title image (which starts at padding-left)
+          right: 0;   // Extend to the right edge
+          height: 1px;
+          background: rgba(18, 137, 221, 0.5);
+        }
+  
+        .title-wrapper {
+          height: 30px;
+          min-width: 150px;
+          display: flex;
+          align-items: center;
+          background-repeat: no-repeat;
+          background-position: left center;
+          background-size: contain;
+          padding-left: 30px; // Adjust based on image content
+  
+          .title-text {
+            font-size: 16px;
+            color: #fff;
+            text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+            letter-spacing: 2px;
+          }
+        }
+  
+        .modal-tabs {
+          flex: 1;
+          display: flex;
+          height: 70%;
+          align-items: center;
+          gap: 60px; // Add spacing between tabs
+          justify-content: center;
+          .tab-item {
+            padding: 0 10px; // Reduce horizontal padding inside tab item
+            height: 90%;
+            width: 15%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 16px; // Increase font size
+            color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+            transition: all 0.3s;
+            background-repeat: no-repeat;
+            background-position: center bottom;
+            background-size: 100% 8px; // Control height of the indicator bar
+            position: relative;
+            margin-bottom: -1px; // Align with bottom border if needed
+  
+            &:hover {
+              color: #fff;
+            }
+  
+            &.active {
+              color: #fff;
+              text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+              // Selected background image
+              background-image: url('../../../../../assets/images/modal/selected.png');
+              background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+              background-position: center center; // Push image slightly down to align with bottom edge
+            }
+          }
+        }
+  
+        .close-btn {
+          cursor: pointer;
+          color: rgba(255, 255, 255, 0.7);
+          font-size: 18px;
+          transition: color 0.3s;
+  
+          &:hover {
+            color: #fff;
+          }
+        }
+    }
+    .modal-body {
+      // flex: 1;
+      height: 570px;
+      overflow: auto;
+      padding: 10px;
+      color: #fff;
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      .homeModal1_content{
+        height: 504px;
+        display: flex;
+        padding: 5px 20px 20px 20px;
+        .homeModal1_content_lf{
+          width: 40%;
+          height: 100%;
+        }
+        .homeModal1_content_rf{
+          width: 60%;
+          height: 100%;
+        }
+      }
+    }
+}

src/views/Home/MapCtrl/Pops/ShenLiu/indexOld.js

@@ -0,0 +1,114 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Descriptions, Form, Button, Input, DatePicker } from 'antd';
+import {CloseOutlined} from '@ant-design/icons';
+import ReactEcharts from 'echarts-for-react';
+import { httppost } from '../../../../../utils/request';
+import apiurl from '../../../../../service/apiurl';
+import moment from "moment"
+import ToolBar from './toolbar';
+import TableData from './TableData'
+import drpOption from './drpOption';
+
+function ShenLiu({ id, data, dispatch, onCancel }) {
+  console.log(data);
+  const [ tableData, setTableData ] = useState([])
+  const [ yjData, setYjData ] = useState([])
+  const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
+  const width = 780;
+  
+  const closePop = () => {
+    if(onCancel){
+      onCancel()
+    }
+    dispatch.runtime.closeFeaturePop(id);
+  };
+
+  const getData = async(tms,stationCode)=>{
+    const params = {
+      type: 2,
+      dateTimeRangeSo: {
+        start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
+        end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
+      },
+      stationCode: stationCode
+    }
+    const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
+    if(code!==200){
+        return
+    }
+    setTableData(data)
+  }
+
+  const getYjData = async(stationCode)=>{
+    const params = {
+      "pageSo": {
+          "pageSize": 10,
+          "pageNumber": 1
+      },
+      "stationCode": stationCode
+    }
+
+    const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
+    if(code!==200){
+        return
+    }
+    const linshi = []
+    records?.map((item)=>{
+      if(item.status===0){
+        return
+      }
+      if(item.valueOne||0){
+        linshi.push({
+          yjName:item.level ===1?'黄色预警':'红色预警', 
+          value:item.valueOne,
+          color:item.level ===1?'#f1bf42':'red'
+        })
+      }
+      if(item.valueTwo||0){
+        linshi.push({
+          yjName:item.level ===1?'黄色预警':'红色预警', 
+          value:item.valueTwo,
+          color:item.level ===1?'#f1bf42':'red'
+        })
+      }
+    })
+    setYjData(linshi)
+  }
+
+  useEffect(()=>{
+    getYjData(data.stationCode)
+    getData([moment().add(-1,'months'),moment()],data.stationCode)
+  },[])
+
+  return (
+    <>
+      <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);

src/views/Home/MapCtrl/Pops/ShenYa/TableData.js

@@ -5,7 +5,7 @@ import moment from 'moment'
 
 const Tabledata = ({tableData}) => {
   const columns = [
-    { title: '序号', key: '', dataIndex: '', align: 'center',render:(a,b,c)=>c+1},
+    { title: '序号', key: '', dataIndex: '', align: 'center', width:'100px', render:(a,b,c)=>c+1},
     { title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',render: (rec) => <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>},

src/views/Home/MapCtrl/Pops/ShenYa/drpOption.js

@@ -42,6 +42,7 @@ export default function drpOption(data,yjData) {
       show: true,
       // 图例的位置
       data: ["压测管水位", "库水位"],
+      textStyle: { color: '#fff' },
     },
     xAxis: [
       {
@@ -53,13 +54,13 @@ export default function drpOption(data,yjData) {
         },
         axisLabel: {
           padding: [0, 0, 100, 0],
-          color: '#333',
+          color: '#ffffff',
           fontSize: 12,
           formatter: val => val.slice(0,10)
         },
         axisLine: {
           lineStyle: {
-            color: '#8c8c8c',
+            color: '#ffffff',
             width: 1,
           }
         },
@@ -76,7 +77,7 @@ export default function drpOption(data,yjData) {
         name: "压测管水位(m)",
         nameTextStyle: {
           padding: [0, 0, 10, 10],
-          color:'#333333',
+          color:'#ffffff',
           fontSize: 14
         },
         splitLine: {
@@ -88,7 +89,7 @@ export default function drpOption(data,yjData) {
           }
         },
         axisLabel: {
-          color: '#333',
+          color: '#ffffff',
           fontSize: 12,
         },
         axisLine: {
@@ -111,7 +112,7 @@ export default function drpOption(data,yjData) {
         name: "库水位(m)",
         nameTextStyle: {
           padding: [0, 0, 10, 10],
-          color:'#333333',
+          color:'#ffffff',
           fontSize: 14
         },
         splitLine: {
@@ -123,7 +124,7 @@ export default function drpOption(data,yjData) {
           }
         },
         axisLabel: {
-          color: '#333',
+          color: '#ffffff',
           fontSize: 12,
         },
         axisLine: {

src/views/Home/MapCtrl/Pops/ShenYa/index.js

@@ -1,6 +1,16 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import { Empty, Form, Button, Input, DatePicker } from 'antd';
+import { Empty } from 'antd';
-import {CloseOutlined} from '@ant-design/icons';
+import {
+  CloseOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined,
+  CaretLeftOutlined,
+  CaretRightOutlined,
+  PlusOutlined,
+  MinusOutlined
+} from "@ant-design/icons";
+import titleBg from '@/assets/images/modal/title.png';
+import './index.less'
 import ReactEcharts from 'echarts-for-react';
 import { 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 }) {
+function ShuikuPop({ id, data, dispatch, onCancel }) {
-  console.log('SY',data);
+  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='ShenYaPop'>
-          <div className="normalModalStyle_title">
+        <div className="modal-header">
-              <div className="normalModalStyle_title_icon"></div>
+          <div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
-              {data.stationCode}
+            <span className="title-text">{data.stationCode}</span>
-              <div className="normalModalStyle_title_cancel">
-                  <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
-              </div>
           </div>
-
+          <div className="close-btn" onClick={closePop}>
-          <div style={{padding:'0 20px'}}>
+            <CloseOutlined />
-            <ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
           </div>
-          <div className='homeModal2_content' >
+        </div>
-              {
+        <div className='modal-body'>
-                  tabVal==='1'?
+            <div style={{padding:'0 20px'}}>
+                <ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
+            </div>
+            {
+                tabVal==='1'?
                     tableData.length>0?
-                    <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
+                :null
-              }
+            }
-              {
+            {
-                  tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
+                tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
-              }
+            }
-          </div>
+        </div>
       </div>
     </>
   )
 }
 
-export default React.memo(ShenYa);
+export default React.memo(ShuikuPop);

src/views/Home/MapCtrl/Pops/ShenYa/index.less

@@ -0,0 +1,100 @@
+.ShenYaPop{
+    width: 100%;
+    background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+    .modal-header {
+        height: 50px; // Reduced height to bring line closer
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+        position: relative;
+        margin-top: 10px;
+        // Separator line using pseudo-element for precise positioning
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 9px;
+          left: 20px; // Align with title image (which starts at padding-left)
+          right: 0;   // Extend to the right edge
+          height: 1px;
+          background: rgba(18, 137, 221, 0.5);
+        }
+  
+        .title-wrapper {
+          height: 30px;
+          min-width: 150px;
+          display: flex;
+          align-items: center;
+          background-repeat: no-repeat;
+          background-position: left center;
+          background-size: contain;
+          padding-left: 30px; // Adjust based on image content
+  
+          .title-text {
+            font-size: 16px;
+            color: #fff;
+            text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+            letter-spacing: 2px;
+          }
+        }
+  
+        .modal-tabs {
+          flex: 1;
+          display: flex;
+          height: 70%;
+          align-items: center;
+          gap: 60px; // Add spacing between tabs
+          justify-content: center;
+          .tab-item {
+            padding: 0 10px; // Reduce horizontal padding inside tab item
+            height: 90%;
+            width: 15%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 16px; // Increase font size
+            color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+            transition: all 0.3s;
+            background-repeat: no-repeat;
+            background-position: center bottom;
+            background-size: 100% 8px; // Control height of the indicator bar
+            position: relative;
+            margin-bottom: -1px; // Align with bottom border if needed
+  
+            &:hover {
+              color: #fff;
+            }
+  
+            &.active {
+              color: #fff;
+              text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+              // Selected background image
+              background-image: url('../../../../../assets/images/modal/selected.png');
+              background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+              background-position: center center; // Push image slightly down to align with bottom edge
+            }
+          }
+        }
+  
+        .close-btn {
+          cursor: pointer;
+          color: rgba(255, 255, 255, 0.7);
+          font-size: 18px;
+          transition: color 0.3s;
+  
+          &:hover {
+            color: #fff;
+          }
+        }
+    }
+    .modal-body {
+      // flex: 1;
+      height: 570px;
+      overflow: auto;
+      padding: 10px;
+      color: #fff;
+      position: relative;
+    }
+}

src/views/Home/MapCtrl/Pops/ShenYa/indexOld.js

@@ -0,0 +1,116 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Empty, Form, Button, Input, DatePicker } from 'antd';
+import {CloseOutlined} from '@ant-design/icons';
+import ReactEcharts from 'echarts-for-react';
+import { httppost } from '../../../../../utils/request';
+import apiurl from '../../../../../service/apiurl';
+import moment from "moment"
+import ToolBar from './toolbar';
+import TableData from './TableData'
+import drpOption from './drpOption';
+
+function ShenYa({ id, data, dispatch, onCancel }) {
+  console.log('SY',data);
+  const [ tableData, setTableData ] = useState([])
+  const [ yjData, setYjData ] = useState([])
+  const [ tabVal, setTabVal ] = useState('1')
+  const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
+  const width = 780;
+  
+  const closePop = () => {
+    if(onCancel){
+      onCancel()
+    }
+    dispatch.runtime.closeFeaturePop(id);
+  };
+
+  const getData = async(tms,stationCode)=>{
+    const params = {
+      // type: 2,
+      dateTimeRangeSo: {
+        start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
+        end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
+      },
+      stationCode: stationCode
+    }
+    
+    const { code, data} = await httppost(apiurl.monitor.dbaq.syslList,params)
+    if(code!==200){
+        return
+    }
+    setTableData(data)
+  }
+
+  const getYjData = async(stationCode)=>{
+    const params = {
+      "pageSo": {
+          "pageSize": 10,
+          "pageNumber": 1
+      },
+      "stationCode": stationCode
+    }
+
+    const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
+    if(code!==200){
+        return
+    }
+    const linshi = []
+    records?.map((item)=>{
+      if(item.status===0){
+        return
+      }
+      if(item.valueOne||0){
+        linshi.push({
+          yjName:item.level ===1?'黄色预警':'红色预警', 
+          value:item.valueOne,
+          color:item.level ===1?'#f1bf42':'red'
+        })
+      }
+      if(item.valueTwo||0){
+        linshi.push({
+          yjName:item.level ===1?'黄色预警':'红色预警', 
+          value:item.valueTwo,
+          color:item.level ===1?'#f1bf42':'red'
+        })
+      }
+    })
+    setYjData(linshi)
+  }
+
+  useEffect(()=>{
+    getYjData(data.stationCode)
+    getData([moment().add(-1,'months'),moment()],data.stationCode)
+  },[])
+
+  return (
+    <>
+      <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);

src/views/Home/MapCtrl/Pops/ShenYa/toolbar.js

@@ -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>

src/views/Home/MapCtrl/Pops/ShuiKuPop/index.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import moment from "moment"
+import { CloseOutlined } from '@ant-design/icons';
+import titleBg from '@/assets/images/modal/title.png';
+import { Modal, Tabs } from 'antd';
+import './index.less'
+import ReservoirPanel from '../../../components/Business/SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel'
+
+
+function ShuikuPop({ id, data, dispatch }) {
+  console.log(data);
+  const [show, setShow] = useState(false)
+  
+  useEffect(()=>{
+    setTimeout(() => {
+      //防止Modal打开时echarts不能找到正确的大小
+      setShow(true)
+    }, 200);
+  },[])
+  
+  const closePop = () => {
+    dispatch.runtime.closeFeaturePop(id);
+  };
+
+  return (
+    <>
+      <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);

src/views/Home/MapCtrl/Pops/ShuiKuPop/index.less

@@ -0,0 +1,100 @@
+.shuikuPop{
+    width: 100%;
+    background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+    .modal-header {
+        height: 50px; // Reduced height to bring line closer
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+        position: relative;
+        margin-top: 10px;
+        // Separator line using pseudo-element for precise positioning
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 9px;
+          left: 20px; // Align with title image (which starts at padding-left)
+          right: 0;   // Extend to the right edge
+          height: 1px;
+          background: rgba(18, 137, 221, 0.5);
+        }
+  
+        .title-wrapper {
+          height: 30px;
+          min-width: 150px;
+          display: flex;
+          align-items: center;
+          background-repeat: no-repeat;
+          background-position: left center;
+          background-size: contain;
+          padding-left: 30px; // Adjust based on image content
+  
+          .title-text {
+            font-size: 16px;
+            color: #fff;
+            text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+            letter-spacing: 2px;
+          }
+        }
+  
+        .modal-tabs {
+          flex: 1;
+          display: flex;
+          height: 70%;
+          align-items: center;
+          gap: 60px; // Add spacing between tabs
+          justify-content: center;
+          .tab-item {
+            padding: 0 10px; // Reduce horizontal padding inside tab item
+            height: 90%;
+            width: 15%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 16px; // Increase font size
+            color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+            transition: all 0.3s;
+            background-repeat: no-repeat;
+            background-position: center bottom;
+            background-size: 100% 8px; // Control height of the indicator bar
+            position: relative;
+            margin-bottom: -1px; // Align with bottom border if needed
+  
+            &:hover {
+              color: #fff;
+            }
+  
+            &.active {
+              color: #fff;
+              text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+              // Selected background image
+              background-image: url('../../../../../assets/images/modal/selected.png');
+              background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+              background-position: center center; // Push image slightly down to align with bottom edge
+            }
+          }
+        }
+  
+        .close-btn {
+          cursor: pointer;
+          color: rgba(255, 255, 255, 0.7);
+          font-size: 18px;
+          transition: color 0.3s;
+  
+          &:hover {
+            color: #fff;
+          }
+        }
+    }
+    .modal-body {
+      // flex: 1;
+      height: 800px;
+      overflow: auto;
+      padding: 10px;
+      color: #fff;
+      position: relative;
+    }
+}

src/views/Home/MapCtrl/Pops/ShuikuPop.js

@@ -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}&emsp;</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);

src/views/Home/MapCtrl/Pops/WeiYi/index.js

@@ -1,6 +1,16 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import { Empty, Form, Button, Input, DatePicker } from 'antd';
+import { Empty } from 'antd';
-import {CloseOutlined} from '@ant-design/icons';
+import {
+  CloseOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined,
+  CaretLeftOutlined,
+  CaretRightOutlined,
+  PlusOutlined,
+  MinusOutlined
+} from "@ant-design/icons";
+import titleBg from '@/assets/images/modal/title.png';
+import './index.less'
 import ReactEcharts from 'echarts-for-react';
 import { 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='ShenYaPop'>
-          <div className="normalModalStyle_title">
+        <div className="modal-header">
-              <div className="normalModalStyle_title_icon"></div>
+          <div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
-              {data.stationCode}
+            <span className="title-text">{data.stationCode}</span>
-              <div className="normalModalStyle_title_cancel">
-                  <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
-              </div>
           </div>
-
+          <div className="close-btn" onClick={closePop}>
-          <div style={{padding:'0 20px'}}>
+            <CloseOutlined />
-            <ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
           </div>
-          <div className='homeModal2_content'>
+        </div>
-              {
+        <div className='modal-body'>
-                  tabVal==='1'?
+            <div style={{padding:'0 20px'}}>
+                <ToolBar search={(tms)=>getData(tms,data.stationCode)} setTabVal={setTabVal}/>
+            </div>
+            {
+                tabVal==='1'?
                     tableData.length>0?
-                    <ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
+                    <ReactEcharts option={option} style={{width: "100%", height: '480px'}}/>
-                    :<div style={{textAlign: "center", margin: "10%"}}>
+                    :<div style={{textAlign: "center", margin: "10%"}}><Empty description={'暂无数据'} /></div>
-                      <Empty description={'暂无数据'} />
+                :null
-                    </div>
+            }
-                    :null
+            {
-              }
+                tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
-              {
+            }
-                  tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
+        </div>
-              }
-          </div>
       </div>
     </>
   )
 }
 
-export default React.memo(ShenYa);
+export default React.memo(ShuikuPop);

src/views/Home/MapCtrl/Pops/WeiYi/index.less

@@ -0,0 +1,100 @@
+.ShenYaPop{
+    width: 100%;
+    background: linear-gradient(135deg, rgba(10, 75, 150, 0.9), rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8),rgba(14, 17, 22, 0.8));
+
+    .modal-header {
+        height: 50px; // Reduced height to bring line closer
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+        position: relative;
+        margin-top: 10px;
+        // Separator line using pseudo-element for precise positioning
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 9px;
+          left: 20px; // Align with title image (which starts at padding-left)
+          right: 0;   // Extend to the right edge
+          height: 1px;
+          background: rgba(18, 137, 221, 0.5);
+        }
+  
+        .title-wrapper {
+          height: 30px;
+          min-width: 150px;
+          display: flex;
+          align-items: center;
+          background-repeat: no-repeat;
+          background-position: left center;
+          background-size: contain;
+          padding-left: 30px; // Adjust based on image content
+  
+          .title-text {
+            font-size: 16px;
+            color: #fff;
+            text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+            letter-spacing: 2px;
+          }
+        }
+  
+        .modal-tabs {
+          flex: 1;
+          display: flex;
+          height: 70%;
+          align-items: center;
+          gap: 60px; // Add spacing between tabs
+          justify-content: center;
+          .tab-item {
+            padding: 0 10px; // Reduce horizontal padding inside tab item
+            height: 90%;
+            width: 15%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 16px; // Increase font size
+            color: rgba(255, 255, 255, 0.65); // Slightly darker inactive color
+            transition: all 0.3s;
+            background-repeat: no-repeat;
+            background-position: center bottom;
+            background-size: 100% 8px; // Control height of the indicator bar
+            position: relative;
+            margin-bottom: -1px; // Align with bottom border if needed
+  
+            &:hover {
+              color: #fff;
+            }
+  
+            &.active {
+              color: #fff;
+              text-shadow: 0 0 10px rgba(0, 160, 233, 0.8);
+              // Selected background image
+              background-image: url('../../../../../assets/images/modal/selected.png');
+              background-size: 100% 100%; // Restore natural aspect ratio for the glow effect
+              background-position: center center; // Push image slightly down to align with bottom edge
+            }
+          }
+        }
+  
+        .close-btn {
+          cursor: pointer;
+          color: rgba(255, 255, 255, 0.7);
+          font-size: 18px;
+          transition: color 0.3s;
+  
+          &:hover {
+            color: #fff;
+          }
+        }
+    }
+    .modal-body {
+      // flex: 1;
+      height: 570px;
+      overflow: auto;
+      padding: 10px;
+      color: #fff;
+      position: relative;
+    }
+}

src/views/Home/MapCtrl/Pops/WeiYi/indexOld.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Empty, Form, Button, Input, DatePicker } from 'antd';
+import {CloseOutlined} from '@ant-design/icons';
+import ReactEcharts from 'echarts-for-react';
+import { httppost } from '../../../../../utils/request';
+import apiurl from '../../../../../service/apiurl';
+import moment from "moment"
+import ToolBar from './toolbar';
+import TableData from './TableData'
+import drpOption from './drpOption';
+
+function ShenYa({ id, data, dispatch, onCancel }) {
+  console.log(data);
+  const [ tableData, setTableData ] = useState([])
+  const [ yjData, setYjData ] = useState([])
+  const [ tabVal, setTabVal ] = useState('1')
+  // const option = useMemo(() => drpOption(tableData), [tableData])
+  const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
+  const width = 780;
+  
+  const closePop = () => {
+    if(onCancel){
+      onCancel()
+    }
+    dispatch.runtime.closeFeaturePop(id);
+  };
+
+  const getData = async(tms,stationCode)=>{
+    const params = {
+      // type: 0,
+      dateTimeRangeSo: {
+        start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
+        end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
+      },
+      stationCode: stationCode
+    }
+    
+    const { code, data} = await httppost(apiurl.monitor.dbaq.wyList,params)
+    if(code!==200){
+        return
+    }
+    setTableData(data)
+  }
+
+  const getYjData = async(stationCode)=>{
+    const params = {
+      "pageSo": {
+          "pageSize": 10,
+          "pageNumber": 1
+      },
+      "stationCode": stationCode
+    }
+
+    const { code, data:{records}} = await httppost(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
+    if(code!==200){
+        return
+    }
+    const linshi = []
+    records?.map((item)=>{
+      if(item.status===0){
+        return
+      }
+      if(item.valueOne||0){
+        linshi.push({
+          yjName:item.level ===1?'黄色预警':'红色预警', 
+          value:item.valueOne,
+          color:item.level ===1?'#f1bf42':'red'
+        })
+      }
+      if(item.valueTwo||0){
+        linshi.push({
+          yjName:item.level ===1?'黄色预警':'红色预警', 
+          value:item.valueTwo,
+          color:item.level ===1?'#f1bf42':'red'
+        })
+      }
+    })
+    setYjData(linshi)
+  }
+
+  useEffect(()=>{
+    getYjData(data.stationCode)
+    getData([moment().add(-1,'months'),moment()],data.stationCode)
+  },[])
+
+  return (
+    <>
+      <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);

src/views/Home/MapCtrl/Pops/index.js

@@ -2,9 +2,9 @@ import React, { useCallback } from 'react'
 import { Button, Modal, Space } from 'antd';
 import { useDispatch, useSelector } from 'react-redux'
 import DrpPop from './DrpPop';
-import ShuikuPop from './ShuikuPop';
+import ShuikuPop from './ShuiKuPop/index.js';
 import GongShuiPop from './GongShui';
-import PciStPop from './PciStPop';
+import PciStPop from './PciStPop/index';
 import WeiYi from './WeiYi/index.js';
 import ShenYa from './ShenYa/index.js';
 import ShenLiu from './ShenLiu/index.js';
@@ -55,14 +55,14 @@ function FeaturePops({ mapobj }) {
             )
           }else if (type === 'hdsw') {
             return (
-              <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>
             )

src/views/Home/MapCtrl/Pops/index.less

@@ -119,6 +119,11 @@
       border-radius: 10px;
   }
 }
+.home_modal_transparent{
+  .ant-modal-content{
+    background: transparent;
+  }
+}
 .normalModalStyle{
   width: 100%;
   // min-height: 600px;

src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel/index.js

@@ -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

src/views/Home/mapToolBox/globalSearch.js

@@ -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>
+    );
+}

src/views/Home/mapToolBox/index.js

@@ -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')){
+        const now = Date.now()
-            // dispatch.runtime.setCameraTarget({
+        if(
-            //     center: [114.15437134051429, 29.744689445729758],
+            event.target.checked && 
-            //     zoom: 18,
+            (event.target.name==='SYLayer' || event.target.name==='SLLayer' || event.target.name==='WYLayer') &&
-            //     pitch: 60
+            (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 
+            <LayerBox
-                            className='mapToolLayerBoxItem hoverBg' 
+                open={open}
-                            onClick={()=>{
+                mode={mode}
-                                const cameraTargeta = {
+                layerVisible={layerVisible}
-                                    center:config.mapCenter,
+                setOpen={setOpen}
-                                    zoom: 15,
+                mapType={mapType}
-                                    pitch: config.pitch3d,
+                layerVisibleChanged={layerVisibleChanged}
-                                }
+            />
-                                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>
 
+            <GlobalSearch
+                open={searchOpen}
+                mode={mode}
+                layerVisible={layerVisible}
+                setOpen={SearchOpen}
+                mapType={mapType}
+                layerVisibleChanged={layerVisibleChanged}
+            />
         </div>
     );
 }

src/views/Home/mapToolBox/index.less

@@ -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;
+    }
+
+    
 }

src/views/Home/mapToolBox/layer.js

@@ -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>
+    );
+}