OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善管道数据渲染函数；完善统计图组件的显示

Browse Source
This commit is contained in:
JIANG
2025-12-18 17:49:51 +08:00
parent 9134dff67c
commit f01e870725
3 changed files with 130 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/olmap/HealthRiskAnalysis/Timeline.tsx
View File

@@ -3,7 +3,6 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import { useNotification } from "@refinedev/core";
import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
import { parseColor } from "@/utils/parseColor";
import {
Box,
@@ -40,6 +39,20 @@ import {
const backendUrl = config.BACKEND_URL;
// 辅助函数：将日期向下取整到最近的15分钟
const getRoundedDate = (date: Date): Date => {
const minutes = date.getHours() * 60 + date.getMinutes();
const roundedMinutes = Math.floor(minutes / 15) * 15;
const roundedDate = new Date(date);
roundedDate.setHours(
Math.floor(roundedMinutes / 60),
roundedMinutes % 60,
0,
0
);
return roundedDate;
};
interface TimelineProps {
schemeDate?: Date;
timeRange?: { start: Date; end: Date };
@@ -64,7 +77,7 @@ const Timeline: React.FC<TimelineProps> = ({
const [selectedDateTime, setSelectedDateTime] = useState<Date>(new Date());
const [isPlaying, setIsPlaying] = useState<boolean>(false);
const [playInterval, setPlayInterval] = useState<number>(15000); // 毫秒
const [playInterval, setPlayInterval] = useState<number>(5000); // 毫秒
const [isPredicting, setIsPredicting] = useState<boolean>(false);
const [pipeLayer, setPipeLayer] = useState<WebGLVectorTileLayer | null>(null);
@@ -89,10 +102,9 @@ const Timeline: React.FC<TimelineProps> = ({
// 播放时间间隔选项
const intervalOptions = [
{ value: 2000, label: "2秒" },
{ value: 5000, label: "5秒" },
{ value: 10000, label: "10秒" },
{ value: 15000, label: "15秒" },
{ value: 20000, label: "20秒" },
];
// 处理时间轴滑动
@@ -139,7 +151,7 @@ const Timeline: React.FC<TimelineProps> = ({
const handleStop = useCallback(() => {
setIsPlaying(false);
setSelectedDateTime(new Date());
setSelectedDateTime(getRoundedDate(new Date()));
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
@@ -180,18 +192,7 @@ const Timeline: React.FC<TimelineProps> = ({
// 日期时间选择处理
const handleDateTimeChange = useCallback((newDate: Date | null) => {
if (newDate) {
// 将时间向下取整到最近的15分钟
const minutes = newDate.getHours() * 60 + newDate.getMinutes();
const roundedMinutes = Math.floor(minutes / 15) * 15;
const roundedDate = new Date(newDate);
roundedDate.setHours(
Math.floor(roundedMinutes / 60),
roundedMinutes % 60,
0,
0
);
setSelectedDateTime(roundedDate);
setSelectedDateTime(getRoundedDate(newDate));
}
}, []);
@@ -218,18 +219,7 @@ const Timeline: React.FC<TimelineProps> = ({
// 组件加载时设置初始时间为当前时间的最近15分钟
useEffect(() => {
const now = new Date();
const minutes = now.getHours() * 60 + now.getMinutes();
// 向下取整到最近的15分钟刻度
const roundedMinutes = Math.floor(minutes / 15) * 15;
const roundedDate = new Date(now);
roundedDate.setHours(
Math.floor(roundedMinutes / 60),
roundedMinutes % 60,
0,
0
);
setSelectedDateTime(roundedDate);
setSelectedDateTime(getRoundedDate(new Date()));
return () => {
if (intervalRef.current) {
@@ -295,19 +285,11 @@ const Timeline: React.FC<TimelineProps> = ({
if (!renderFeatures || renderFeatures.length === 0) return;
const healthData = healthDataRef.current;
let i = 0;
renderFeatures.forEach((renderFeature: any) => {
const featureId = renderFeature.get("id");
const value = healthData.get(featureId);
if (value !== undefined) {
renderFeature.properties_["healthRisk"] = value;
// 输出前10个点的信息以供调试
if (i < 10) {
console.log(
`瓦片加载 - 设置特征 ${featureId} 的 healthRisk 为 ${value}`
);
i++;
}
}
});
};
@@ -337,11 +319,6 @@ const Timeline: React.FC<TimelineProps> = ({
// 更新 ref 数据
healthDataRef.current = pipeHealthData;
// 输出前 10 条数据以供调试
console.log(
`更新健康数据，年份: ${currentYear}`,
Array.from(pipeHealthData.entries()).slice(0, 10)
);
// 更新图层数据
updatePipeHealthData(pipeHealthData);
@@ -361,35 +338,23 @@ const Timeline: React.FC<TimelineProps> = ({
const widthCases: any[] = [];
breaks.forEach((breakValue, index) => {
if (index < breaks.length - 1) {
const colorIndex = Math.floor(
(index / (breaks.length - 1)) * (colors.length - 1)
);
const color = parseColor(colors[colorIndex]);
const colorStr = colors[index];
// 线宽根据健康风险调整：低生存概率（高风险）用粗线
const width = 2 + (1 - index / (breaks.length - 1)) * 4;
// 线宽根据健康风险调整：低生存概率（高风险）用粗线
const width = 2 + (1 - index / (breaks.length - 1)) * 4;
colorCases.push(
["between", ["get", "healthRisk"], breakValue, breaks[index + 1]],
[color.r / 255, color.g / 255, color.b / 255, 1]
);
widthCases.push(
["between", ["get", "healthRisk"], breakValue, breaks[index + 1]],
width
);
}
colorCases.push(["<=", ["get", "healthRisk"], breakValue], colorStr);
widthCases.push(["<=", ["get", "healthRisk"], breakValue], width);
});
console.log(
`应用健康风险样式，年份: ${currentYear}, 分段: ${breaks.length}`
);
console.log("颜色表达式:", colorCases);
console.log("宽度表达式:", widthCases);
// 应用样式到图层
pipeLayer.setStyle({
"stroke-color": ["case", ...colorCases, [0.5, 0.5, 0.5, 1]],
"stroke-color": ["case", ...colorCases, "rgba(128, 128, 128, 1)"],
"stroke-width": ["case", ...widthCases, 2],
});
console.log(
`已应用健康风险样式，年份: ${currentYear}, 分段: ${breaks.length}`
);
}, [
pipeLayer,
predictionResults,
@@ -466,7 +431,6 @@ const Timeline: React.FC<TimelineProps> = ({
if (response.ok) {
const results: PredictionResult[] = await response.json();
setPredictionResults(results);
console.log("预测结果:", results[0], results[1], results.length);
open?.({
type: "success",
message: `模拟预测完成，获取到 ${results.length} 条管道数据`,