diff --git a/src/views/Home/homePanelsLayoutPage/index.js b/src/views/Home/homePanelsLayoutPage/index.js index 912d83cec..4a70dc488 100644 --- a/src/views/Home/homePanelsLayoutPage/index.js +++ b/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,89 +397,108 @@ const HomePage = ({ showPanels }) => { return; // 添加return避免继续执行 } - // 如果有经纬度信息，则进行处理 - if ((item.lgtd && item.lttd) || item.type == '危险区') { - // 关闭所有已打开的弹窗 - dispatch.runtime.closeFeaturePopAll(); - // 先关闭所有图层 - dispatch.map.setLayerVisible({ - HdswLayer: false, - RealDrpLayer: false, - PicStLayer: false, - ShuiKuLayer: false, - TuRangLayer: false, - GongShuiLayer: false - }); - // 根据类型确定弹窗类型和图层 - let popType = item.type; - let layerToShow = {}; + // 关闭所有已打开的弹窗 + dispatch.runtime.closeFeaturePopAll(); + // 先关闭所有图层 + dispatch.map.setLayerVisible({ + HdswLayer: false, + RealDrpLayer: false, + PicStLayer: false, + ShuiKuLayer: false, + TuRangLayer: 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; + let layerToShow = {}; - // 对特定类型进行映射和图层设置 - 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; - } + // 对特定类型进行映射和图层设置 + 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 = { ShuiKuLayer: true }; + break; + case '土壤墒情站': + popType = 'turangshangqing'; + layerToShow = { TuRangLayer: true }; + break; + case '流量站': + popType = 'gongshui'; + layerToShow = { GongShuiLayer: true }; + 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; + 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 == '危险区') { + addLayer() + 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, @@ -372,14 +507,59 @@ const HomePage = ({ showPanels }) => { lttd: item.lttd, id: record.id }); - - // 设置地图视角 - dispatch.runtime.setCameraTarget({ - center: [item.lgtd, item.lttd], - zoom: 15, - pitch: 60 - }); } + + // 雨量站 + 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: 18, + pitch: 60 + }); + } useEffect(() => { @@ -423,9 +603,18 @@ const HomePage = ({ showPanels }) => { return (
- + setSearchVal(e.target.value)} + />
综合展示
{ + // 清空搜索输入框 + 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) => { + // 清空搜索输入框 + setSearchVal('') setCheckedObj(item) setShowTable(true) }}> @@ -550,7 +741,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 } diff --git a/src/views/Home/setMapStation/drp.js b/src/views/Home/setMapStation/drp.js index e6f99957a..3c17b39df 100644 --- a/src/views/Home/setMapStation/drp.js +++ b/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", diff --git a/src/views/Home/setMapStation/wxq.js b/src/views/Home/setMapStation/wxq.js index ea94af160..7e68980ae 100644 --- a/src/views/Home/setMapStation/wxq.js +++ b/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