feat(): 完成洪水防御下点位的设置
parent
39d8bb47d0
commit
8098b39329
|
|
@ -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 '水文站':
|
||||
popType = 'hdsw';
|
||||
layerToShow = { HdswLayer: true };
|
||||
break;
|
||||
case 'qxst':
|
||||
case '气象站':
|
||||
case '雨量站':
|
||||
popType = 'drp';
|
||||
layerToShow = { RealDrpLayer: true };
|
||||
break;
|
||||
// case '水文站':
|
||||
// popType = 'hdsw';
|
||||
// layerToShow = { HdswLayer: true };
|
||||
// break;
|
||||
// case '雨量站':
|
||||
// popType = 'drp';
|
||||
// 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)
|
||||
}}>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue