568 lines
18 KiB
JavaScript
568 lines
18 KiB
JavaScript
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
|
||
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
|
||
import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image, Tag } from 'antd';
|
||
import { FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
|
||
import { useSelector, useDispatch } from 'react-redux';
|
||
import ToolBar from './toolbar';
|
||
import ModalForm from './form';
|
||
import apiurl from '../../../../service/apiurl';
|
||
import usePageTable from '../../../../components/crud/usePageTable2';
|
||
import { createCrudService } from '../../../../components/crud/_';
|
||
import { httppost2, httpget2 } from '../../../../utils/request';
|
||
import { CrudOpRender_text } from '../../../../components/crud/CrudOpRender';
|
||
import PointHistory from './pointHistory';
|
||
import PrecessForm from './precessForm'
|
||
import './index.less';
|
||
import moment from 'moment';
|
||
// 引入OpenLayers相关依赖
|
||
import Map from 'ol/Map';
|
||
import View from 'ol/View';
|
||
import TileLayer from 'ol/layer/Tile';
|
||
import XYZSource from 'ol/source/XYZ';
|
||
import * as proj from 'ol/proj';
|
||
import Feature from 'ol/Feature';
|
||
import Point from 'ol/geom/Point';
|
||
import { Vector as VectorLayer } from 'ol/layer';
|
||
import { Vector as VectorSource } from 'ol/source';
|
||
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style';
|
||
import Overlay from 'ol/Overlay';
|
||
const url = "http://223.75.53.141:9100/gs-tsg"
|
||
const Page = () => {
|
||
const role = useSelector(state => state.auth.role);
|
||
const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true;
|
||
const viewBtn = role?.rule?.find(item => item.menuName == "查看") || true;
|
||
const delBtn = role?.rule?.find(item => item.menuName == "删除") || true;
|
||
const initData = {
|
||
obDate: moment().format('YYYY-MM-DD')
|
||
}
|
||
// 添加地图相关的状态和引用
|
||
const mapContainerRef = useRef(null);
|
||
const [map, setMap] = useState(null);
|
||
const [vectorLayer, setVectorLayer] = useState(null);
|
||
const [selectedFeature, setSelectedFeature] = useState(null);
|
||
const [popupOverlay, setPopupOverlay] = useState(null);
|
||
const popupRef = useRef(null);
|
||
// 在组件顶部的状态声明中添加一个新的状态
|
||
const [highlightLayer, setHighlightLayer] = useState(null);
|
||
// 点位弹框
|
||
const [modalVisible, setModalVisible] = useState(false)
|
||
const [detailPoint, setDetailPoint] = useState({})
|
||
|
||
|
||
// 白蚁处理弹框
|
||
const [precessVisible, setPrecessVisible] = useState(false)
|
||
const [mode, setMode] = useState('save')
|
||
|
||
const dispatch = useDispatch();
|
||
|
||
|
||
const refModal = useRef();
|
||
const [searchVal, setSearchVal] = useState({ ...initData })
|
||
const [count, setCount] = useState({})
|
||
const [allCdList, setAllCdList] = useState([])
|
||
// const columns = [
|
||
// { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||
// {title: '填报日期', key: 'reportDate', dataIndex: 'reportDate', width: 140,},
|
||
// {
|
||
// title: '普查类型', key: 'surveyType', dataIndex: 'surveyType', width: 200,
|
||
// render: (value) => <span>{value ? surveyType[value] : ''}</span>
|
||
// },
|
||
// {
|
||
// title: '普查方式', key: 'surveyWay', dataIndex: 'surveyWay', width: 200,
|
||
// render: (value) => <span>{value ? surveyWay[value] : ''}</span>
|
||
|
||
// },
|
||
// {
|
||
// title: '危害情况', key: 'isHarm', dataIndex: 'isHarm', width: 200,
|
||
// render: (value, row) =>(
|
||
// <span style={row.harmNum > 0 ? { color: "red" } : {}}>{isHarm[row.harmNum > 0 ? 1 : 0]}</span>)
|
||
// },
|
||
// {title: '白蚁危害处数', key: 'harmNum', dataIndex: 'harmNum', width: 100},
|
||
// {title: '已处置处数', key: 'handleNum', dataIndex: 'handleNum', width: 100},
|
||
// {title: '上报人', key: 'reportUserName', dataIndex: 'reportUserName', width: 100},
|
||
// {
|
||
// title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||
// render: (value, row, index) => (
|
||
// <CrudOpRender_text
|
||
// edit={editBtn ? true : false}
|
||
// del={delBtn ? true : false}
|
||
// view={viewBtn ? true : false}
|
||
// command={(cmd) => () => command(cmd)(row)} />)
|
||
// },
|
||
// ];
|
||
|
||
const columns = [
|
||
{
|
||
title: '监测时间',
|
||
dataIndex: 'obDate',
|
||
key: 'obDate',
|
||
width: 180,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '测点编号',
|
||
dataIndex: 'order',
|
||
key: 'order',
|
||
width: 120,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '有无白蚁',
|
||
dataIndex: 'status',
|
||
align: 'center',
|
||
key: 'status',
|
||
width: 100,
|
||
render: (text, record) => {
|
||
// 如果 isHarm 为 null 或 undefined，显示无
|
||
if (text == null) {
|
||
return <Tag color="#04d919" style={{ borderRadius: '50%', padding: '4px 8px' }}>无</Tag>;
|
||
}
|
||
|
||
// 如果 isHandle 为 null 或 undefined，当作 false 处理
|
||
const isHandle = record.isHandle ?? false;
|
||
|
||
return (
|
||
<Tag
|
||
color={!text ? '#04d919' : '#d9001b'}
|
||
style={{ borderRadius: '50%', padding: '4px 8px' }}
|
||
>
|
||
{!text ? '无' : '有'}
|
||
</Tag>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'opreate',
|
||
key: 'opreate',
|
||
width: 120,
|
||
align: 'center',
|
||
render: (v, r) => {
|
||
let renderTag;
|
||
if (!r.isProcess && r.status == 1) {
|
||
renderTag = <Button style={{ marginRight: 4 }} type="link" size="small" onClick={()=> handlerPrecess(r,'save')} title="处理">处理</Button>;
|
||
}
|
||
if (r.hasInspectTask && r.jcskByRProcessVo) {
|
||
renderTag = <Button style={{ marginRight: 4 }} type="link" size="small" onClick={()=> handlerPrecess(r,'view')} title="工单详情">工单详情</Button>;
|
||
}
|
||
return (<>
|
||
{renderTag}
|
||
<Button style={{ marginRight: 4 }} type="link" size="small" title="查看" onClick={()=> viewDetail(r)}>查看</Button>
|
||
</>)
|
||
}
|
||
},
|
||
];
|
||
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||
|
||
const command = (type) => (params) => {
|
||
if (type === 'save') {
|
||
refModal.current.showSave();
|
||
} else if (type === 'edit') {
|
||
refModal.current.showEdit({ ...params });
|
||
} else if (type === 'view') {
|
||
refModal.current.showView(params);
|
||
} else if (type === 'del') {
|
||
refModal.current.onDeleteGet(apiurl.rcgl.byfz.bypc.delete + `/${params.id}`);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.byfz.bypc.page).find_noCode);
|
||
|
||
/**
|
||
* @description 处理成功的回调
|
||
*/
|
||
const successCallback = () => {
|
||
refresh()
|
||
}
|
||
|
||
|
||
// 表格操作栏 查看按钮回调
|
||
const viewDetail = (r) => {
|
||
setDetailPoint(r);
|
||
setModalVisible(true)
|
||
}
|
||
// 表格操作栏 处理按钮回调
|
||
const handlerPrecess = (r,type) => {
|
||
setDetailPoint(r);
|
||
setPrecessVisible(true)
|
||
setMode(type)
|
||
}
|
||
|
||
// 获取白蚁统计数量
|
||
const getCount = async () => {
|
||
const params = {
|
||
pageSo: {
|
||
pageNumber: 1,
|
||
pageSize: 99999,
|
||
},
|
||
...searchVal
|
||
}
|
||
try {
|
||
const res = await httppost2(apiurl.rcgl.byfz.bypc.count, params);
|
||
setCount(res.data);
|
||
} catch (error) {
|
||
console.log(error);
|
||
|
||
}
|
||
}
|
||
|
||
// 获取白蚁所有测点
|
||
const getCdList = async (params) => {
|
||
|
||
try {
|
||
const res = await httppost2(apiurl.rcgl.byfz.bypc.allCd,params);
|
||
if (res.code == 200) {
|
||
setAllCdList(res.data);
|
||
// 添加标记点到地图
|
||
if (map && res.data && res.data.length > 0) {
|
||
addMarkersToMap(res.data);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
|
||
}
|
||
}
|
||
|
||
// 添加标记点到地图
|
||
const addMarkersToMap = (points) => {
|
||
if (!map) return;
|
||
|
||
// 如果已存在矢量图层，先移除
|
||
if (vectorLayer) {
|
||
map.removeLayer(vectorLayer);
|
||
}
|
||
|
||
// 创建矢量数据源
|
||
const vectorSource = new VectorSource();
|
||
|
||
// 遍历所有点位数据
|
||
points.forEach(point => {
|
||
// 确保点位有经纬度
|
||
if (point.lgtd && point.lttd) {
|
||
// 创建要素
|
||
const feature = new Feature({
|
||
geometry: new Point(proj.fromLonLat([point.lgtd, point.lttd])),
|
||
properties: point // 保存点位的所有属性
|
||
});
|
||
|
||
// 根据status设置样式
|
||
const color = point.status === 1 ? '#d9001b' :
|
||
point.status === 0 ? '#04d919':'#8c8c8c'
|
||
; // 1为红色，0为绿色 null 为灰色
|
||
|
||
feature.setStyle(new Style({
|
||
image: new CircleStyle({
|
||
radius: 4,
|
||
fill: new Fill({ color: color }),
|
||
stroke: new Stroke({ color: '#ffffff', width: 1 })
|
||
})
|
||
}));
|
||
|
||
// 添加要素到数据源
|
||
vectorSource.addFeature(feature);
|
||
}
|
||
});
|
||
|
||
// 创建矢量图层
|
||
const newVectorLayer = new VectorLayer({
|
||
source: vectorSource,
|
||
zIndex: 10 // 确保点位在地图上层显示
|
||
});
|
||
|
||
// 添加图层到地图
|
||
map.addLayer(newVectorLayer);
|
||
|
||
// 保存矢量图层引用
|
||
setVectorLayer(newVectorLayer);
|
||
|
||
// 添加点击事件处理
|
||
// map.on('click', (event) => {
|
||
// const feature = map.forEachFeatureAtPixel(event.pixel, function(feature) {
|
||
// return feature;
|
||
// });
|
||
|
||
// if (feature) {
|
||
// const properties = feature.get('properties');
|
||
// if (properties) {
|
||
// // 可以在这里处理点击事件，比如显示详情等
|
||
// console.log('点击了标记点:', properties);
|
||
// // 可以添加弹窗或其他交互
|
||
// }
|
||
// }
|
||
// });
|
||
};
|
||
|
||
|
||
// 修改高亮显示选中的测点函数
|
||
const highlightFeature = (feature) => {
|
||
if (!feature || !highlightLayer) return;
|
||
|
||
// 清除之前的高亮
|
||
highlightLayer.getSource().clear();
|
||
|
||
// 获取要素属性
|
||
const properties = feature.get('properties');
|
||
const color = properties.status === 1 ? '#d9001b' : '#04d919';
|
||
|
||
// 创建一个新的要素用于高亮显示
|
||
const highlightFeature = new Feature({
|
||
geometry: feature.getGeometry().clone(),
|
||
properties: properties
|
||
});
|
||
|
||
// 设置高亮样式
|
||
highlightFeature.setStyle(new Style({
|
||
image: new CircleStyle({
|
||
radius: 10, // 放大图标
|
||
fill: new Fill({ color: color }),
|
||
stroke: new Stroke({ color: '#ffffff', width: 3 })
|
||
}),
|
||
text: new Text({
|
||
text: properties.order || '未命名测点',
|
||
offsetY: -20,
|
||
font: 'bold 14px Arial',
|
||
fill: new Fill({ color: '#333' }),
|
||
stroke: new Stroke({ color: '#fff', width: 3 })
|
||
})
|
||
}));
|
||
|
||
// 添加到高亮图层
|
||
highlightLayer.getSource().addFeature(highlightFeature);
|
||
|
||
// 更新选中的要素引用
|
||
setSelectedFeature(feature);
|
||
|
||
// 平移地图到选中的要素位置
|
||
const geometry = feature.getGeometry();
|
||
const coordinate = geometry.getCoordinates();
|
||
map.getView().animate({
|
||
center: coordinate,
|
||
duration: 500,
|
||
zoom: map.getView().getZoom() < 18 ? 18 : map.getView().getZoom()
|
||
});
|
||
};
|
||
|
||
// 根据测点ID查找对应的要素
|
||
const findFeatureByDeviceId = (deviceId) => {
|
||
if (!vectorLayer) return null;
|
||
|
||
let targetFeature = null;
|
||
vectorLayer.getSource().forEachFeature((feature) => {
|
||
const properties = feature.get('properties');
|
||
if (properties && properties.order === deviceId) {
|
||
targetFeature = feature;
|
||
}
|
||
});
|
||
|
||
return targetFeature;
|
||
};
|
||
|
||
// 处理表格行点击事件
|
||
const handleRowClick = (record,event) => {
|
||
// 如果点击的是操作列中的元素，不触发地图交互
|
||
if (event && (event.target.closest('button') || event.target.closest('.ant-btn'))) {
|
||
return;
|
||
}
|
||
const feature = findFeatureByDeviceId(record.order);
|
||
if (feature) {
|
||
highlightFeature(feature);
|
||
}
|
||
};
|
||
useEffect(() => {
|
||
const params = {
|
||
search: {
|
||
...searchVal,
|
||
}
|
||
};
|
||
search(params)
|
||
getCount();
|
||
}, [searchVal])
|
||
|
||
// 初始化地图
|
||
useEffect(() => {
|
||
if (!mapContainerRef.current) return;
|
||
|
||
// 创建地图实例
|
||
const mapInstance = new Map({
|
||
target: mapContainerRef.current,
|
||
controls: [],
|
||
view: new View({
|
||
center: proj.fromLonLat([114.764317000, 31.496800000]), // 设置地图中心点坐标
|
||
zoom: 18.4, // 设置初始缩放级别
|
||
minZoom: 5.5,
|
||
maxZoom: 30,
|
||
}),
|
||
});
|
||
|
||
// 添加天地图卫星影像图层
|
||
const satelliteLayer = new TileLayer({
|
||
source: new XYZSource({
|
||
url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd",
|
||
}),
|
||
maxZoom: 30,
|
||
});
|
||
|
||
// 设置图层名称
|
||
satelliteLayer.set('name', 'SatelliteImage');
|
||
|
||
// 添加图层到地图
|
||
mapInstance.addLayer(satelliteLayer);
|
||
|
||
// 创建高亮图层
|
||
const highlightVectorLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
zIndex: 999, // 确保高亮图层在最上面
|
||
style: null
|
||
});
|
||
|
||
// 添加高亮图层到地图
|
||
mapInstance.addLayer(highlightVectorLayer);
|
||
setHighlightLayer(highlightVectorLayer);
|
||
|
||
// 创建弹出层
|
||
const overlay = new Overlay({
|
||
element: popupRef.current,
|
||
positioning: 'bottom-center',
|
||
stopEvent: false,
|
||
offset: [0, -10]
|
||
});
|
||
mapInstance.addOverlay(overlay);
|
||
setPopupOverlay(overlay);
|
||
|
||
// 添加地图点击事件
|
||
mapInstance.on('click', (event) => {
|
||
const feature = mapInstance.forEachFeatureAtPixel(event.pixel, function (feature) {
|
||
return feature;
|
||
});
|
||
|
||
if (feature) {
|
||
setModalVisible(true)
|
||
setDetailPoint(feature?.values_?.properties)
|
||
highlightFeature(feature);
|
||
}
|
||
});
|
||
|
||
// 保存地图实例
|
||
setMap(mapInstance);
|
||
|
||
// 组件卸载时清理地图
|
||
return () => {
|
||
if (mapInstance) {
|
||
mapInstance.setTarget(null);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
// 当地图实例创建完成后获取测点数据
|
||
useEffect(() => {
|
||
if (map && searchVal) {
|
||
getCdList(searchVal);
|
||
}
|
||
}, [map,searchVal]);
|
||
return (
|
||
<>
|
||
<div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
|
||
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", display: 'flex' }}>
|
||
<div className='by-left' style={{ width: "60%", height: "calc(100vh - 180px)" }} ref={mapContainerRef}></div>
|
||
<div className='by-right' style={{ width: "40%", marginLeft: 10 }}>
|
||
<Row gutter={16} className='statsRow'>
|
||
<Col span={6}>
|
||
<div className='statItem'>
|
||
<div className='valueWrapper'>
|
||
<span className='number' style={{ color: '#722ed1' }}>{count.totalPoint}</span>
|
||
<span className="unit">个</span>
|
||
</div>
|
||
<span className='label'>总监测点数</span>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div className='statItem'>
|
||
<div className='valueWrapper'>
|
||
<span className='number' style={{ color: '#f5222d' }}>{count.hasAnt}</span>
|
||
<span className="unit">个</span>
|
||
</div>
|
||
<span className='label'>有白蚁</span>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div className='statItem'>
|
||
<div className='valueWrapper'>
|
||
<span className='number' style={{ color: '#52c41a' }}>{count.notAnt}</span>
|
||
<span className="unit">个</span>
|
||
</div>
|
||
<span className='label'>无白蚁</span>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div className='statItem'>
|
||
<div className='valueWrapper'>
|
||
<span className='number' style={{ color: '#8c8c8c' }}>{count.noData}</span>
|
||
<span className="unit">个</span>
|
||
</div>
|
||
<span className='label'>离线</span>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<Card className='nonebox'>
|
||
<ToolBar
|
||
setSearchVal={setSearchVal}
|
||
initData={initData}
|
||
// onSave={command('save')}
|
||
// role={role}
|
||
/>
|
||
</Card>
|
||
<div className="ant-card-body" style={{ padding: "20px 0 0 0", marginRight: 20 }}>
|
||
<Table
|
||
columns={columns}
|
||
rowKey="inx"
|
||
{...tableProps}
|
||
scroll={{ x: width, y: "calc( 100vh - 400px )" }}
|
||
onRow={(record) => ({
|
||
onClick: (event) => handleRowClick(record,event), // 添加行点击事件
|
||
style: { cursor: 'pointer' } // 添加鼠标指针样式
|
||
})}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
{/* 添加测点详情Modal */}
|
||
<Modal
|
||
title={detailPoint?.order}
|
||
open={modalVisible}
|
||
onCancel={() => setModalVisible(false)}
|
||
width={1000}
|
||
footer={null}
|
||
destroyOnClose
|
||
>
|
||
<PointHistory data={detailPoint} />
|
||
</Modal>
|
||
{/*处理弹框 */}
|
||
<Modal
|
||
title={mode == 'save' ? "处理" : '工单详情'}
|
||
open={precessVisible}
|
||
onCancel={() => setPrecessVisible(false)}
|
||
width={1000}
|
||
footer={null}
|
||
destroyOnClose
|
||
>
|
||
<PrecessForm record={detailPoint} mode={mode} refresh={refresh} setPrecessVisible={setPrecessVisible} />
|
||
</Modal>
|
||
<BasicCrudModal
|
||
width={1000}
|
||
ref={refModal}
|
||
title=""
|
||
component={ModalForm}
|
||
onCrudSuccess={successCallback}
|
||
// onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
|
||
/>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Page;
|