From 39d8bb47d06f6495fd03adf36b6f8df967715d15 Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Mon, 4 Aug 2025 17:59:49 +0800 Subject: [PATCH] =?UTF-8?q?feat():=E7=9F=A5=E8=AF=86=E6=A3=80=E7=B4=A2?= =?UTF-8?q?=E7=9F=A5=E8=AF=86=E5=BA=93=E5=BC=B9=E6=A1=86=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Home/homePanelsLayoutPage/index.js | 308 +++++++++++++++---- 1 file changed, 244 insertions(+), 64 deletions(-) diff --git a/src/views/Home/homePanelsLayoutPage/index.js b/src/views/Home/homePanelsLayoutPage/index.js index 664a5937f..912d83cec 100644 --- a/src/views/Home/homePanelsLayoutPage/index.js +++ b/src/views/Home/homePanelsLayoutPage/index.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' import { useLocation } from 'react-router' import { useDispatch, useSelector } from 'react-redux' -import { Collapse, DatePicker, Input, Modal,message } from 'antd'; +import { Collapse, DatePicker, Input, Modal, message } from 'antd'; import './index.less' import Yujing from './item_yujing/index.js' import Yuqing from './item_yuqing' @@ -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,88 +129,256 @@ const HomePage = ({ showPanels }) => { }; // 业务规则库弹框 const regularOpen = async (record) => { - debugger - const id = record?.id.split('-')[0] + 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 }; + { 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: `${record.name}详情`, - width: 1000, - content: ( - - ), - icon: null, - okButtonProps: { style: { display: 'none' } }, - cancelButtonProps: { style: { display: 'none' } }, - closable: true - }); - } catch (error) { - console.error('模块导入失败:', error); - message.error(`无法加载${record.type}详情，请稍后再试`); - } + // 使用映射函数进行导入 + try { + const ModalForm = await importMap[record.type](); + + Modal.destroyAll(); // 先销毁可能存在的其他Modal + const modal = Modal.confirm({ + title: `${record.name}详情`, + width: 1000, + content: ( + + ), + icon: null, + okButtonProps: { style: { display: 'none' } }, + cancelButtonProps: { style: { display: 'none' } }, + closable: true + }); + } catch (error) { + console.error('模块导入失败:', error); + message.error(`无法加载${record.type}详情，请稍后再试`); + } return; } - const clickItem = (item) => { + // 工程安全监测点 + const renderGCaqModal = (record) => { + const row = { ...record, stationCode: record.id } + let popType = ''; - //业务规则库 - if (item.type == '业务规则库' || item.type == '调度方案库' || item.type == '工程安全知识库') { - regularOpen(item) + 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'; // 水文站映射到河道水位 - if (item.type === 'qxst') popType = 'drp'; // 气象站映射到雨情 - if (item.type === 'picst') popType = 'picst'; // 视频站 - // 然后根据类型打开对应图层 - if (item.type === 'swst' || item.type === 'hdsw') { - dispatch.map.setLayerVisible({ HdswLayer: true }); - } else if (item.type === 'qxst' || item.type === 'drp') { - dispatch.map.setLayerVisible({ RealDrpLayer: true }); - } else if (item.type === 'picst') { - dispatch.map.setLayerVisible({ PicStLayer: true }); + // 对特定类型进行映射和图层设置 + switch (item.type) { + case '水文站': + popType = 'hdsw'; + layerToShow = { HdswLayer: true }; + break; + case 'qxst': + case '气象站': + case '雨量站': + popType = 'drp'; + 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, - pitch: 60 - }); - } + // 设置地图视角 + dispatch.runtime.setCameraTarget({ + center: [item.lgtd, item.lttd], + zoom: 15, + pitch: 60 + }); } } @@ -207,7 +386,8 @@ const HomePage = ({ showPanels }) => { dispatch.runtime.closeFeaturePopAll() // 如果是搜索结果，不要关闭图层 if (checkedObj.label === '搜索结果') { - // 可以选择保持当前图层状态，或者显示某些默认图层 + // 主动设置相关图层可见 + return; } if (checkedObj.label === '水库' || checkedObj.label === '大坝' || checkedObj.label === '溢洪道' || checkedObj.label === '视频点') { @@ -370,7 +550,7 @@ const HomePage = ({ showPanels }) => { {checkedObj.label === '企事业单位' ? : null} {checkedObj.label === '沿河居民户' ? : null} - {checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? : null} + {checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? : null} : null }