实现 SCADA 设备列表数据对接；监测点优化，实现传感器定位；爆管分析，属性面板新增计算属性的获取；更新部分图标；爆管分析定位，更改时间轴样式。
This commit is contained in:
JIANG
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -30,7 +30,12 @@ import { config, NETWORK_NAME } from "@config/config";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
import { useMap } from "@app/OlMap/MapComponent";
|
||||
import { queryFeaturesByIds } from "@/utils/mapQueryService";
|
||||
import * as turf from "@turf/turf";
|
||||
import { GeoJSON } from "ol/format";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import { Style, Icon, Circle, Fill, Stroke } from "ol/style";
|
||||
import Feature, { FeatureLike } from "ol/Feature";
|
||||
import { bbox, featureCollection } from "@turf/turf";
|
||||
|
||||
interface SchemeRecord {
|
||||
id: number;
|
||||
@@ -74,23 +79,68 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
const { open } = useNotification();
|
||||
const map = useMap();
|
||||
|
||||
const [highlightLayer, setHighlightLayer] =
|
||||
useState<VectorLayer<VectorSource> | null>(null);
|
||||
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
||||
// 使用外部提供的 schemes 或内部状态
|
||||
const schemes =
|
||||
externalSchemes !== undefined ? externalSchemes : internalSchemes;
|
||||
const setSchemes = onSchemesChange || setInternalSchemes;
|
||||
|
||||
// 格式化日期
|
||||
const formatTime = (timeStr: string) => {
|
||||
const time = moment(timeStr);
|
||||
return time.format("YYYY-MM-DD HH:mm:ss");
|
||||
};
|
||||
|
||||
// 格式化简短日期
|
||||
const formatShortDate = (timeStr: string) => {
|
||||
const time = moment(timeStr);
|
||||
return time.format("MM-DD");
|
||||
};
|
||||
// 初始化管道图层和高亮图层
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
// 定义传感器样式
|
||||
const sensorStyle = new Style({
|
||||
image: new Icon({
|
||||
src: "/icons/sensor.svg",
|
||||
scale: 0.2,
|
||||
anchor: [0.5, 1],
|
||||
}),
|
||||
});
|
||||
// 创建高亮图层 - 爆管管段标识样式
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: sensorStyle,
|
||||
maxZoom: 24,
|
||||
minZoom: 12,
|
||||
properties: {
|
||||
name: "传感器高亮",
|
||||
value: "sensor_highlight",
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer(highlightLayer);
|
||||
setHighlightLayer(highlightLayer);
|
||||
|
||||
return () => {
|
||||
map.removeLayer(highlightLayer);
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
// 高亮要素的函数
|
||||
useEffect(() => {
|
||||
if (!highlightLayer) {
|
||||
return;
|
||||
}
|
||||
const source = highlightLayer.getSource();
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
// 清除之前的高亮
|
||||
source.clear();
|
||||
// 添加新的高亮要素
|
||||
highlightFeatures.forEach((feature) => {
|
||||
if (feature instanceof Feature) {
|
||||
source.addFeature(feature);
|
||||
}
|
||||
});
|
||||
}, [highlightFeatures]);
|
||||
// 查询方案
|
||||
const handleQuery = async () => {
|
||||
if (!queryAll && !queryDate) return;
|
||||
@@ -158,29 +208,19 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
if (sensorIds.length > 0) {
|
||||
queryFeaturesByIds(sensorIds).then((features) => {
|
||||
if (features.length > 0) {
|
||||
// 计算范围并缩放
|
||||
const geojsonFormat = new (window as any).ol.format.GeoJSON();
|
||||
// 设置高亮要素
|
||||
setHighlightFeatures(features);
|
||||
// 将 OpenLayers Feature 转换为 GeoJSON Feature
|
||||
const geojsonFormat = new GeoJSON();
|
||||
const geojsonFeatures = features.map((feature) =>
|
||||
geojsonFormat.writeFeatureObject(feature)
|
||||
);
|
||||
|
||||
const extent = turf.bbox(
|
||||
turf.featureCollection(geojsonFeatures as any)
|
||||
);
|
||||
const extent = bbox(featureCollection(geojsonFeatures as any));
|
||||
|
||||
if (extent) {
|
||||
map.getView().fit(extent, { maxZoom: 18, duration: 1000 });
|
||||
map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
|
||||
}
|
||||
|
||||
open?.({
|
||||
type: "success",
|
||||
message: `已定位 ${features.length} 个传感器位置`,
|
||||
});
|
||||
} else {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "未找到传感器位置",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -321,7 +361,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
variant="caption"
|
||||
className="text-gray-500 block"
|
||||
>
|
||||
最小半径: {scheme.minDiameter} · 用户: {scheme.user} · 日期: {formatShortDate(scheme.create_time)}
|
||||
最小半径: {scheme.minDiameter} · 用户: {scheme.user} ·
|
||||
日期: {formatShortDate(scheme.create_time)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* 操作按钮 */}
|
||||
@@ -434,54 +475,58 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
</Box>
|
||||
|
||||
{/* 传感器位置列表 */}
|
||||
{scheme.sensorLocation && scheme.sensorLocation.length > 0 && (
|
||||
<Box className="mb-3">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 block mb-2"
|
||||
>
|
||||
传感器位置 ({scheme.sensorLocation.length}个):
|
||||
</Typography>
|
||||
<Box className="max-h-40 overflow-auto bg-gray-50 rounded p-2">
|
||||
<Box className="flex flex-wrap gap-2">
|
||||
{scheme.sensorLocation.map((sensorId, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
component="button"
|
||||
variant="caption"
|
||||
className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleLocateSensors([sensorId]);
|
||||
}}
|
||||
>
|
||||
{sensorId}
|
||||
</Link>
|
||||
))}
|
||||
{scheme.sensorLocation &&
|
||||
scheme.sensorLocation.length > 0 && (
|
||||
<Box className="mb-3">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 block mb-2"
|
||||
>
|
||||
传感器位置 ({scheme.sensorLocation.length}个):
|
||||
</Typography>
|
||||
<Box className="max-h-40 overflow-auto bg-gray-50 rounded p-2">
|
||||
<Box className="flex flex-wrap gap-2">
|
||||
{scheme.sensorLocation.map(
|
||||
(sensorId, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
component="button"
|
||||
variant="caption"
|
||||
className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleLocateSensors([sensorId]);
|
||||
}}
|
||||
>
|
||||
{sensorId}
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* 操作按钮区域 */}
|
||||
<Box className="pt-2 border-t border-gray-100 flex gap-2">
|
||||
{scheme.sensorLocation && scheme.sensorLocation.length > 0 && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
onClick={() =>
|
||||
handleLocateSensors(scheme.sensorLocation!)
|
||||
}
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
定位全部传感器
|
||||
</Button>
|
||||
)}
|
||||
{scheme.sensorLocation &&
|
||||
scheme.sensorLocation.length > 0 && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
onClick={() =>
|
||||
handleLocateSensors(scheme.sensorLocation!)
|
||||
}
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
定位全部传感器
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
|
||||
Reference in New Issue
Block a user