feat():知识检索知识库弹框开发

src/views/Home/homePanelsLayoutPage/index.js

@@ -24,7 +24,9 @@ import QSYDW from './item_qishiyedanwei'
 import YHJMH from './item_yanhejuminhu'
 import SetWxqStation from '../setMapStation/wxq'
 import Bzt from '../../gcaqjc/bzt2'
-
+import ShenLiu from '../MapCtrl/Pops/ShenLiu';
+import ShenYa from '../MapCtrl/Pops/ShenYa';
+import WeiYi from '../MapCtrl/Pops/WeiYi';
 import Tuli from '../TuLi/Tuli.js'
 import Tuli2 from '../TuLi/Tuli2.js';
 import Tuli3 from '../TuLi/Tuli3.js'
@@ -33,7 +35,15 @@ import Tuli5 from '../TuLi/Tuli5.js'
 import SearchResultList from './SearchResultList';
 import { httpget } from '../../../utils/request';
 import apiurl from '../../../service/apiurl';
+import FillStyle from "ol/style/Fill";
+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 Feature from "ol/Feature";
+import VectorLayer from "ol/layer/Vector";
+import Style from "ol/style/Style";
 import moment from 'moment';
 
 const { Panel } = Collapse;
@@ -91,6 +101,7 @@ const HomePage = ({ showPanels }) => {
     moment(moment().add(-1, 'days').format('YYYY-MM-DD 08:00:00')),
     moment(moment().format('YYYY-MM-DD 08:00:00')),
   ])
+  let mapObj = useSelector(s => s.map.map)
 
   // 在 globalSearch 函数中添加搜索结果状态
   const [searchResults, setSearchResults] = useState([]);
@@ -118,8 +129,7 @@ const HomePage = ({ showPanels }) => {
   };
   // 业务规则库弹框
   const regularOpen = async (record) => {
-    debugger
+    const id = record?.unionCode
-    const id = record?.id.split('-')[0]
     const com = record.type == '业务规则库' ?
       { url: apiurl.zsk.ywgz.getOne } :
       record.type == '调度方案库' ?
@@ -153,47 +163,217 @@ const HomePage = ({ showPanels }) => {
     return;
   }
 
-  const clickItem = (item) => {
+  // 工程安全监测点
+  const renderGCaqModal = (record) => {
+    const row = { ...record, stationCode: record.id }
+    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;
+  }
+
+  // 加载危险区图层数据
+  const getGeoJsonData = async () => {
+    const radarRangeData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/wxq2.geojson`)
+      .then(resp => resp.json())
+      .then(data => data.features)
+      .catch(() => []);
+
+    const wxq = {}
+    radarRangeData.map((item) => {
+      wxq[item.properties.ADCD] = item
+    })
+    sessionStorage.setItem('wxq', JSON.stringify(wxq))
+    return [...radarRangeData];
+  };
+  // 危险区图层
+  const addLayer = () => {
+    getGeoJsonData().then((data) => {
+      debugger
+      var layer = new VectorLayer({
+        // @ts-ignore
+        name: "ZHZS_WXQ",
+        source: new VectorSource(),
+        style: new Style({
+          stroke: new StrokeStyle({
+            color: 'rgba(255,0,0,0.9)',
+            width: 2,
+          }),
+          fill: new FillStyle({
+            color: 'rgba(255,0,0,0.3)',
+          }),
+        })
+      });
+
+      const features = data.map((item) => {
+        // debugger
+        const geojsonFormat = new GeoJSONFormat();
+        let geometry = geojsonFormat.readGeometry(item.geometry, {
+          featureProjection: 'EPSG:3857',
+        });
+        const feature = new Feature({
+          geometry,
+          data: { ...item.properties, geometry: item.geometry, myLayerType: 'wxq' },
+        });
+
+        return feature
+      })
+
+      features.forEach(feature => layer.getSource().addFeature(feature));
+      mapObj && mapObj.addLayer(layer);
+
+      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
+
+          const center = geometryCenter(data.geometry);
+          if (data && data.myLayerType === 'wxq') {
+
+            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],
+            })
+          }
+        }
+      });
+
+    });
+  }
+
+  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避免继续执行
     }
 
-    // 判断是否为知识库或安全监测站类型
-    const isKnowledgeOrMonitoringStation = item.type === 'daminfo' || item.type === 'stinfo';
     // 如果有经纬度信息，则进行处理
-    if (item.lgtd && item.lttd) {
+    if ((item.lgtd && item.lttd) || item.type == '危险区') {
       // 关闭所有已打开的弹窗
       dispatch.runtime.closeFeaturePopAll();
-      // 关闭所有业务图层
+      // 先关闭所有图层
-      // dispatch.map.closeBusinessLayersEffect();
+      dispatch.map.setLayerVisible({
-      // 根据类型确定弹窗类型
+        HdswLayer: false,
+        RealDrpLayer: false,
+        PicStLayer: false,
+        ShuiKuLayer: false,
+        TuRangLayer: false,
+        GongShuiLayer: false
+      });
+      // 根据类型确定弹窗类型和图层
       let popType = item.type;
+      let layerToShow = {};
 
-      // 对特定类型进行映射
+      // 对特定类型进行映射和图层设置
-      if (item.type === 'swst') popType = 'hdsw'; // 水文站映射到河道水位
+      switch (item.type) {
-      if (item.type === 'qxst') popType = 'drp';  // 气象站映射到雨情
+        case '水文站':
-      if (item.type === 'picst') popType = 'picst'; // 视频站
+          popType = 'hdsw';
-      // 然后根据类型打开对应图层
+          layerToShow = { HdswLayer: true };
-      if (item.type === 'swst' || item.type === 'hdsw') {
+          break;
-        dispatch.map.setLayerVisible({ HdswLayer: true });
+        case 'qxst':
-      } else if (item.type === 'qxst' || item.type === 'drp') {
+        case '气象站':
-        dispatch.map.setLayerVisible({ RealDrpLayer: true });
+        case '雨量站':
-      } else if (item.type === 'picst') {
+          popType = 'drp';
-        dispatch.map.setLayerVisible({ PicStLayer: true });
+          layerToShow = { RealDrpLayer: true };
+          break;
+        case '视频站':
+          popType = 'tuxiang';
+          layerToShow = { PicStLayer: true };
+          break;
+        case 'shuiku':
+        case '水库':
+          popType = 'shuiku';
+          layerToShow = { ShuiKuLayer: true };
+          break;
+        case '土壤墒情站':
+          popType = 'turangshangqing';
+          layerToShow = { TuRangLayer: true };
+          break;
+        case '流量站':
+          popType = 'gongshui';
+          layerToShow = { GongShuiLayer: true };
+          break;
+        case '危险区':
+          popType = 'wxq';
+          layerToShow = { AZDLayer: true };
+          break;
+        default:
+          // 默认不设置特定图层
+          break;
+      }
+
+      // 设置图层可见性
+      if (Object.keys(layerToShow).length > 0) {
+        dispatch.map.setLayerVisible(layerToShow);
+      }
+      const record = JSON.parse(item.jsonStr);
+      if (item.type == '危险区' || item.type == '安置点') {
+        addLayer()
+        const wxq = JSON.parse(sessionStorage.getItem('wxq'))?.[record?.adcd] || ''
+        if (!wxq) {
+          message.error('暂无经纬度数据')
+          return
+        }
+        const data = wxq.properties
+        const center = geometryCenter(wxq.geometry);
+        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;
       }
       // 显示弹窗
       dispatch.runtime.setFeaturePop({
         type: popType,
-        data: item,
+        data: record,
         lgtd: item.lgtd,
         lttd: item.lttd,
-        id: item.id
+        id: record.id
       });
 
-      // 如果不是知识库或安全监测站类型，则进行地图定位
+      // 设置地图视角
-      if (!isKnowledgeOrMonitoringStation) {
       dispatch.runtime.setCameraTarget({
         center: [item.lgtd, item.lttd],
         zoom: 15,
@@ -201,13 +381,13 @@ const HomePage = ({ showPanels }) => {
       });
     }
   }
-  }
 
   useEffect(() => {
     dispatch.runtime.closeFeaturePopAll()
     // 如果是搜索结果，不要关闭图层
     if (checkedObj.label === '搜索结果') {
-      // 可以选择保持当前图层状态，或者显示某些默认图层
+      // 主动设置相关图层可见
+
       return;
     }
     if (checkedObj.label === '水库' || checkedObj.label === '大坝' || checkedObj.label === '溢洪道' || checkedObj.label === '视频点') {