330 lines
11 KiB
JavaScript
330 lines
11 KiB
JavaScript
|
import React, { useEffect, useReducer, useRef, useState } from 'react';
|
||
|
|
import { useDispatch, useSelector } from 'react-redux';
|
||
|
|
import { Form, Button, Input, Table, Modal, message } from 'antd';
|
||
|
|
import { CloseOutlined } from '@ant-design/icons';
|
||
|
|
import { geometryCenter } from '../../../utils/tools';
|
||
|
|
import './index.less'
|
||
|
|
import { config } from '@/config';
|
||
|
|
import { httpget } from '@/utils/request';
|
||
|
|
import apiurl from '@/service/apiurl';
|
||
|
|
|
||
|
|
export default function Btn({open, mode, layerVisible, setOpen, mapType, layerVisibleChanged}) {
|
||
|
|
const [form] = Form.useForm();
|
||
|
|
const [ tableData, setTableData ] = useState([])
|
||
|
|
const dispatch = useDispatch()
|
||
|
|
const columns = [
|
||
|
|
{ title: '名称', key: 'name', dataIndex: 'name',align: "center",width:150, ellipsis: true, },
|
||
|
|
{ title: '类型', key: 'type', dataIndex: 'type',align: "center",width: 50, ellipsis: true },
|
||
|
|
];
|
||
|
|
// const importMap = {
|
||
|
|
// '业务规则库': () => import('../../../sz/ywgz/form'),
|
||
|
|
// '调度方案库': () => import('../../../sz/ddfa/form'),
|
||
|
|
// '工程安全知识库': () => import('../../../sz/khzbgl/form')
|
||
|
|
// };
|
||
|
|
|
||
|
|
const onFinish = ({name}) => {
|
||
|
|
if(name){
|
||
|
|
getData(name)
|
||
|
|
}else{
|
||
|
|
setTableData([])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const getData = async(e)=>{
|
||
|
|
const { code, data} = await httpget(apiurl.monitor.globalSearch, { name: e })
|
||
|
|
if(code!==200){
|
||
|
|
// return
|
||
|
|
}
|
||
|
|
setTableData(data||[])
|
||
|
|
}
|
||
|
|
|
||
|
|
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避免继续执行
|
||
|
|
}
|
||
|
|
|
||
|
|
// 关闭所有已打开的弹窗
|
||
|
|
dispatch.runtime.closeFeaturePopAll();
|
||
|
|
// 先关闭所有图层
|
||
|
|
dispatch.map.setLayerVisible({
|
||
|
|
WxqLayer: false,
|
||
|
|
HdswLayer: false,
|
||
|
|
RealDrpLayer: false,
|
||
|
|
PicStLayer: false,
|
||
|
|
ShuiKuLayer: false,
|
||
|
|
TuRangLayer: false,
|
||
|
|
GongShuiLayer: false,
|
||
|
|
AZDLayer: false,
|
||
|
|
QSYDWLayer: false,
|
||
|
|
YHJMHLayer: false,
|
||
|
|
YjgbLayer: false,
|
||
|
|
SYLayer: false, //渗压站
|
||
|
|
SLLayer: false, //渗流站
|
||
|
|
WYLayer: false, //位移站
|
||
|
|
ShuiDianZhanLayer: false,
|
||
|
|
});
|
||
|
|
// 根据类型确定弹窗类型和图层
|
||
|
|
let popType = item.type;
|
||
|
|
let layerToShow = {};
|
||
|
|
|
||
|
|
// 对特定类型进行映射和图层设置
|
||
|
|
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 = { HdswLayer: true }; //水位站用HdswLayer, ShuikuLayer是水利工程的
|
||
|
|
break;
|
||
|
|
case '河道水位站':
|
||
|
|
popType = 'hedao';
|
||
|
|
layerToShow = { HdswLayer: true };
|
||
|
|
break;
|
||
|
|
case '土壤墒情站':
|
||
|
|
popType = 'turangshangqing';
|
||
|
|
layerToShow = { TuRangLayer: true };
|
||
|
|
break;
|
||
|
|
case '流量站':
|
||
|
|
popType = 'gongshui';
|
||
|
|
layerToShow = { GongShuiLayer: true };
|
||
|
|
break;
|
||
|
|
|
||
|
|
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 == '危险区') {
|
||
|
|
dispatch.map.setLayerVisible({ WxqLayer: true })
|
||
|
|
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,
|
||
|
|
data: record,
|
||
|
|
lgtd: item.lgtd,
|
||
|
|
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 httppost(apiurl.station.rainlist, {
|
||
|
|
// "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
|
||
|
|
// }));
|
||
|
|
|
||
|
|
// dispatch.map.setLayerVisible({ RealDrpLayer: true })
|
||
|
|
// dispatch.map.setLayerSetting({RealDrpLayer:list})
|
||
|
|
// } catch (error) {
|
||
|
|
// console.error('获取雨量站数据失败', error);
|
||
|
|
// }
|
||
|
|
// };
|
||
|
|
|
||
|
|
// fetchAndAddLayer();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 设置地图视角
|
||
|
|
dispatch.runtime.setCameraTarget({
|
||
|
|
center: [item.lgtd, item.lttd],
|
||
|
|
zoom: 18,
|
||
|
|
pitch: 60
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// 业务规则库弹框
|
||
|
|
// const regularOpen = async (record) => {
|
||
|
|
// 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 };
|
||
|
|
// const res = await httpget(com.url + id)
|
||
|
|
// // 导入业务规则库的Modal组件
|
||
|
|
// // 使用映射函数进行导入
|
||
|
|
// try {
|
||
|
|
// const ModalForm = await importMap[record.type]();
|
||
|
|
|
||
|
|
// Modal.destroyAll(); // 先销毁可能存在的其他Modal
|
||
|
|
// const modal = Modal.confirm({
|
||
|
|
// title: <div style={{ width: '100%', padding: '16px 24px', color: '#3B4859', borderBottom: '1px solid #f0f0f0', position: "absolute", top: 0, left: 0 }}>
|
||
|
|
// <div style={{ fontSize: 16, fontWeight: 'bold' }}>{record.name}详情</div>
|
||
|
|
// </div>,
|
||
|
|
// width: 1000,
|
||
|
|
// content: (
|
||
|
|
// <>
|
||
|
|
// <div style={{ marginTop: 45 }}></div>
|
||
|
|
// <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 renderGCaqModal = (record) => {
|
||
|
|
const row = { ...record, stationCode: record.name }
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(()=>{
|
||
|
|
return ()=>{
|
||
|
|
dispatch.runtime.closeFeaturePopAll()
|
||
|
|
dispatch.map.setLayerVisible({
|
||
|
|
WxqLayer: false,
|
||
|
|
HdswLayer: false,
|
||
|
|
RealDrpLayer: false,
|
||
|
|
PicStLayer: false,
|
||
|
|
ShuiKuLayer: false,
|
||
|
|
GongShuiLayer: false,
|
||
|
|
AZDLayer: false,
|
||
|
|
QSYDWLayer: false,
|
||
|
|
YHJMHLayer: false
|
||
|
|
});
|
||
|
|
dispatch.runtime.setHome()
|
||
|
|
}
|
||
|
|
},[])
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={open?'mapToolSearch width260':'mapToolSearch width0'}>
|
||
|
|
<div className='mapToolSearchBox'>
|
||
|
|
<div className='mapToolSearchBoxTitle'>
|
||
|
|
搜索
|
||
|
|
<CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
|
||
|
|
</div>
|
||
|
|
<Form form={form} className="search-bar" onFinish={onFinish}>
|
||
|
|
<Form.Item label="" name="name">
|
||
|
|
<Input placeholder="请输入" allowClear/>
|
||
|
|
</Form.Item>
|
||
|
|
<Button type="primary" className="ant-btn-ghost-blue" htmlType="submit">查询</Button>
|
||
|
|
</Form>
|
||
|
|
<Table
|
||
|
|
rowKey="id"
|
||
|
|
sticky
|
||
|
|
columns={columns}
|
||
|
|
pagination={false}
|
||
|
|
dataSource={tableData}
|
||
|
|
scroll={{ y: "400px"}}
|
||
|
|
onRow={
|
||
|
|
(row)=>({
|
||
|
|
// onClick:()=>clickItem(row)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|