feat():知识检索知识库弹框开发
parent
ce1be1eec6
commit
39d8bb47d0
|
|
@ -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: (
|
||||
<ModalForm.default
|
||||
mode="view"
|
||||
record={res}
|
||||
/>
|
||||
),
|
||||
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: (
|
||||
<ModalForm.default
|
||||
mode="view"
|
||||
record={res}
|
||||
/>
|
||||
),
|
||||
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 === '企事业单位' ? <QSYDW /> : null}
|
||||
{checkedObj.label === '沿河居民户' ? <YHJMH /> : null}
|
||||
|
||||
{checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? <SetWxqStation /> : null}
|
||||
{checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? <SetWxqStation /> : null}
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue