feat(): 完成洪水防御下点位的设置

src/views/Home/homePanelsLayoutPage/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState,useRef } from 'react'
 import { useLocation } from 'react-router'
 import { useDispatch, useSelector } from 'react-redux'
 import { Collapse, DatePicker, Input, Modal, message } from 'antd';
@@ -40,11 +40,17 @@ import GeoJSONFormat from 'ol/format/GeoJSON';
 import { Vector as VectorSource } from "ol/source";
 import StrokeStyle from "ol/style/Stroke";
 import { geometryCenter } from '../../../utils/tools'
+import Text from "ol/style/Text";
 
 import Feature from "ol/Feature";
 import VectorLayer from "ol/layer/Vector";
 import Style from "ol/style/Style";
 import moment from 'moment';
+import { httppost2 } from "../../../utils/request";
+import Circle from 'ol/style/Circle';
+import Stroke from "ol/style/Stroke";
+import Point from 'ol/geom/Point.js';
+import { transform } from 'ol/proj';
 
 const { Panel } = Collapse;
 const { RangePicker } = DatePicker;
@@ -93,9 +99,11 @@ const items = [
 ]
 
 const HomePage = ({ showPanels }) => {
-
+  // 添加搜索输入框的引用
+  const searchInputRef = useRef(null);
   const dispatch = useDispatch();
   const [checkedObj, setCheckedObj] = useState({})
+  const [searchVal, setSearchVal] = useState('')
   const [showTable, setShowTable] = useState(false)
   const [tms, setTms] = useState([
     moment(moment().add(-1, 'days').format('YYYY-MM-DD 08:00:00')),
@@ -109,6 +117,7 @@ const HomePage = ({ showPanels }) => {
     if (e && e.trim() !== '') {
       // 设置为空白状态
       setShowTable(true);
+      setSearchVal(e)
       // 创建一个新的空对象，只保留必要的属性用于显示
       setCheckedObj({
         key: 'search',
@@ -165,7 +174,7 @@ const HomePage = ({ showPanels }) => {
 
   // 工程安全监测点
   const renderGCaqModal = (record) => {
-    const row = { ...record, stationCode: record.id }
+    const row = { ...record, stationCode: record.name }
     let popType = '';
 
     if (record.type == '渗压站') {
@@ -202,8 +211,8 @@ const HomePage = ({ showPanels }) => {
   };
   // 危险区图层
   const addLayer = () => {
+
     getGeoJsonData().then((data) => {
-      debugger
       var layer = new VectorLayer({
         // @ts-ignore
         name: "ZHZS_WXQ",
@@ -268,6 +277,113 @@ const HomePage = ({ showPanels }) => {
     });
   }
 
+  const getColor = (val) => {
+    if (val === null) {
+      return '#8c8c8c';
+    } else if (val < 0.1) {
+      return '#ffffff';
+    } else if (val >= 0.1 && val < 10) {
+      return 'rgb(167, 240, 143)';
+    } else if (val >= 10 && val < 25) {
+      return 'rgb(64, 215, 255)';
+    } else if (val >= 25 && val < 50) {
+      return 'rgb(32, 143, 238)';
+    } else if (val >= 50 && val < 100) {
+      return 'rgb(85, 86, 255)';
+    } else if (val >= 100 && val < 250) {
+      return 'rgb(191, 90, 252)';
+    } else {
+      return 'rgb(246, 66, 66)';
+    }
+  };
+  // 雨量站图层
+  const addRainLayer = (arr, tms) => {
+    var layer = new VectorLayer({
+      // @ts-ignore 
+      name: "ZHZS_YQ",
+      source: new VectorSource(),
+      style: (feature, zIndex) => {
+        const drp = feature.values_.data.drp
+        const stnm = feature.values_.data.stnm
+        return [new Style({
+          image: new Circle({
+            radius: 5,
+            fill: new FillStyle({ color: getColor(drp) }),
+            stroke: new Stroke({ color: getColor(drp), width: 2 })
+          }),
+          text: new Text({
+            text: zIndex < 50 ? `${stnm}` : '',
+            offsetY: 24,
+            font: '12px 微软雅黑',
+            //backgroundFill: new FillStyle({ color: "rgba(255,255,255,0.5)" }),
+            fill: new FillStyle({ color: "rgba(0,0,0,0.5)" }),
+            stroke: new Stroke({ color: '#fff', width: 1 }),
+            overflow: true,
+          }),
+          zIndex: drp === 0 ? 0.01 : drp * 10
+        })]
+      },
+      zIndex: 200,
+    })
+
+    var layerDrp = new VectorLayer({
+      // @ts-ignore
+      name: "ZHZS_YQ_DRP",
+      visible: true,
+      source: new VectorSource(),
+      style: (feature, zIndex) => {
+        const drp = feature.values_.data.drp
+        return [new Style({
+          text: new Text({
+            text: drp === null ? '-' : String(drp),
+            offsetY: 12,
+            font: '12px 微软雅黑',
+            //backgroundFill: new FillStyle({ color: "rgba(255,255,255,0.5)" }),
+            fill: new FillStyle({ color: "rgba(0,0,0,0.5)" }),
+            stroke: new Stroke({ color: '#fff', width: 1 }),
+            overflow: true,
+          })
+        })]
+      },
+      zIndex: 200,
+    })
+
+
+
+    const features = arr.map((item) => {
+      const point2 = transform([item.lgtd, item.lttd], 'EPSG:4326', 'EPSG:3857');
+      const feature = new Feature({
+        geometry: new Point(point2),
+        data: { ...item, myParams: tms, myLayerType: 'drp' }
+      });
+
+      return feature
+    })
+    features.forEach(feature => layer.getSource().addFeature(feature));
+    features.forEach(feature => layerDrp.getSource().addFeature(feature));
+    mapObj && mapObj.addLayer(layer);
+    mapObj && mapObj.addLayer(layerDrp);
+    mapObj && mapObj.on('click', function (evt) {
+
+      //console.log("271++++",postmessageData);
+
+      var feature = mapObj && mapObj.forEachFeatureAtPixel(evt.pixel, function (feature) {
+        return feature;
+      });
+      if (feature) {
+        const data = feature.values_.data
+        if (data && data.myLayerType === 'drp') {
+          dispatch.runtime.setFeaturePop({
+            id: data.stcd,
+            data: { ...data, myParams: tms },
+            type: 'drp',
+            lgtd: data.lgtd,
+            lttd: data.lttd,
+          })
+        }
+      }
+    });
+  }
   const clickItem = (item) => {
     // 业务规则库
     if (item.type == '业务规则库' || item.type == '调度方案库' || item.type == '工程安全知识库') {
@@ -281,8 +397,6 @@ const HomePage = ({ showPanels }) => {
       return; // 添加return避免继续执行
     }
 
-    // 如果有经纬度信息，则进行处理
-    if ((item.lgtd && item.lttd) || item.type == '危险区') {
     // 关闭所有已打开的弹窗
     dispatch.runtime.closeFeaturePopAll();
     // 先关闭所有图层
@@ -292,7 +406,16 @@ const HomePage = ({ showPanels }) => {
       PicStLayer: false,
       ShuiKuLayer: false,
       TuRangLayer: false,
-        GongShuiLayer: false
+      GongShuiLayer: false,
+      AZDLayer: false,
+      QSYDWLayer: false,
+      YHJMHLayer: false
+    });
+    // 先清除已存在的同名图层
+    mapObj && mapObj.getLayers().getArray().forEach(layer => {
+      if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1)) {
+        mapObj.removeLayer(layer);
+      }
     });
     // 根据类型确定弹窗类型和图层
     let popType = item.type;
@@ -300,22 +423,19 @@ const HomePage = ({ showPanels }) => {
 
     // 对特定类型进行映射和图层设置
     switch (item.type) {
-        case '水文站':
+      // case '水文站':
-          popType = 'hdsw';
+      //   popType = 'hdsw';
-          layerToShow = { HdswLayer: true };
+      //   layerToShow = { HdswLayer: true };
-          break;
+      //   break;
-        case 'qxst':
+      // case '雨量站':
-        case '气象站':
+      //   popType = 'drp';
-        case '雨量站':
+      //   layerToShow = { RealDrpLayer: true };
-          popType = 'drp';
+      //   break;
-          layerToShow = { RealDrpLayer: true };
-          break;
       case '视频站':
         popType = 'tuxiang';
         layerToShow = { PicStLayer: true };
         break;
-        case 'shuiku':
+      case '水位站':
-        case '水库':
         popType = 'shuiku';
         layerToShow = { ShuiKuLayer: true };
         break;
@@ -327,10 +447,19 @@ const HomePage = ({ showPanels }) => {
         popType = 'gongshui';
         layerToShow = { GongShuiLayer: true };
         break;
-        case '危险区':
+
-          popType = 'wxq';
+      case '安置点':
+        popType = 'anzhidian';
         layerToShow = { AZDLayer: true };
         break;
+      case '企事业单位':
+        popType = 'qishiyedanwei';
+        layerToShow = { QSYDWLayer: true };
+        break;
+      case '沿河居民点':
+        popType = 'yanhejuminhu';
+        layerToShow = { YHJMHLayer: true };
+        break;
       default:
         // 默认不设置特定图层
         break;
@@ -341,7 +470,8 @@ const HomePage = ({ showPanels }) => {
       dispatch.map.setLayerVisible(layerToShow);
     }
     const record = JSON.parse(item.jsonStr);
-      if (item.type == '危险区' || item.type == '安置点') {
+
+    if (item.type == '危险区') {
       addLayer()
       const wxq = JSON.parse(sessionStorage.getItem('wxq'))?.[record?.adcd] || ''
       if (!wxq) {
@@ -349,7 +479,10 @@ const HomePage = ({ showPanels }) => {
         return
       }
       const data = wxq.properties
-        const center = geometryCenter(wxq.geometry);
+      const center = item.type == '危险区' ? geometryCenter(wxq.geometry) :
+        [record?.lgtd, record?.lttd];
+
+
       dispatch.runtime.setCameraTarget({
         center: [center[0], center[1]],
         zoom: 18,
@@ -364,6 +497,8 @@ const HomePage = ({ showPanels }) => {
       })
       return;
     }
+
+    if (item.type == '安置点' || item.type == '企事业单位' || item.type == '沿河居民点') {
       // 显示弹窗
       dispatch.runtime.setFeaturePop({
         type: popType,
@@ -372,14 +507,59 @@ const HomePage = ({ showPanels }) => {
         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 httppost2(apiurl.home.yq, {
+            "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
+          }));
+
+          // 清除已存在的同名图层
+          mapObj && mapObj.getLayers().getArray().forEach(layer => {
+            if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_YQ') > -1)) {
+              mapObj.removeLayer(layer);
+            }
+          });
+          // 创建雨量站图层
+          addRainLayer(list, tms)
+        } catch (error) {
+          console.error('获取雨量站数据失败', error);
+        }
+      };
+
+      fetchAndAddLayer();
+    }
+
 
     // 设置地图视角
     dispatch.runtime.setCameraTarget({
       center: [item.lgtd, item.lttd],
-        zoom: 15,
+      zoom: 18,
       pitch: 60
     });
-    }
+
   }
 
   useEffect(() => {
@@ -423,9 +603,18 @@ const HomePage = ({ showPanels }) => {
   return (
     <div className='homePage' style={{ display: !showPanels ? 'none' : 'block' }}>
       <div className='homePage_leftBox'>
-        <Search placeholder="请输入" onSearch={globalSearch} enterButton />
+        <Search
+          placeholder="请输入"
+          onSearch={globalSearch}
+          enterButton
+          ref={searchInputRef}
+          value={searchVal}
+          onChange={(e) => setSearchVal(e.target.value)}
+        />
         <div className='homePage_head' style={{ marginTop: 10 }}>综合展示</div>
         <Collapse ghost onChange={(a) => {
+          // 清空搜索输入框
+          setSearchVal('')
           dispatch.runtime.closeFeaturePopAll()
           if (a === undefined) {
             setCheckedObj({ key: '12', label: '雨情', labelRight: '统计', icon: 'yuqing' })
@@ -470,6 +659,8 @@ const HomePage = ({ showPanels }) => {
                 {
                   item.children.map((item) =>
                     <dit className='homePage_Panel_item' style={(checkedObj.key === item.key && showTable) ? { color: '#409eff' } : {}} onClick={() => {
+                      // 清空搜索输入框
+                      setSearchVal('')
                       setCheckedObj(item)
                       setShowTable(true)
                     }}>

src/views/Home/setMapStation/drp.js

@@ -76,7 +76,7 @@ export default function SetDrpStation({tms, setTableData}) {
     }
 
 
-    const addLayer = (arr,tms)=>{
+  const addLayer = (arr, tms) => {
         var layer = new VectorLayer({
           // @ts-ignore 
           name:"ZHZS_YQ",

src/views/Home/setMapStation/wxq.js

@@ -59,7 +59,14 @@ export default function SetDrpStation({tms}) {
 
 
 
-    const addLayer = ()=>{
+  const addLayer = () => {
+    
+       // 先清除已存在的同名图层
+    mapObj && mapObj.getLayers().getArray().forEach(layer => {
+      if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1)) {
+        mapObj.removeLayer(layer);
+      }
+    });
       getGeoJsonData().then((data) => {
         var layer =  new VectorLayer({
           // @ts-ignore