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

调整数据小数点位数显示；更换 valve 图标，上调 valvesLayer 的显示层级；特殊处理流量的样式显示

Browse Source
This commit is contained in:
JIANG
2025-11-19 14:39:21 +08:00
parent bb040f1612
commit 538b9fe177
6 changed files with 140 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/olmap/BurstPipeAnalysis/LocationResults.tsx
View File

@@ -1,6 +1,6 @@
'use client';
"use client";
import React, { useState } from 'react';
import React, { useState } from "react";
import {
Box,
Typography,
@@ -14,8 +14,11 @@ import {
Chip,
IconButton,
Tooltip,
} from '@mui/material';
import { LocationOn as LocationIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
} from "@mui/material";
import {
LocationOn as LocationIcon,
Visibility as VisibilityIcon,
} from "@mui/icons-material";
interface LocationResult {
id: number;
@@ -24,7 +27,7 @@ interface LocationResult {
pressure: number;
waterLevel: number;
flow: number;
status: 'normal' | 'warning' | 'danger';
status: "normal" | "warning" | "danger";
coordinates: [number, number];
}
@@ -33,7 +36,10 @@ interface LocationResultsProps {
onViewDetail?: (id: number) => void;
}
const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetail }) => {
const LocationResults: React.FC<LocationResultsProps> = ({
onLocate,
onViewDetail,
}) => {
const [results, setResults] = useState<LocationResult[]>([
// 示例数据
// {
@@ -50,27 +56,27 @@ const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetai
const getStatusColor = (status: string) => {
switch (status) {
case 'normal':
return 'success';
case 'warning':
return 'warning';
case 'danger':
return 'error';
case "normal":
return "success";
case "warning":
return "warning";
case "danger":
return "error";
default:
return 'default';
return "default";
}
};
const getStatusText = (status: string) => {
switch (status) {
case 'normal':
return '正常';
case 'warning':
return '预警';
case 'danger':
return '危险';
case "normal":
return "正常";
case "warning":
return "预警";
case "danger":
return "危险";
default:
return '未知';
return "未知";
}
};
@@ -95,7 +101,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetai
正常
</Typography>
<Typography variant="h6" className="font-bold text-green-600">
{results.filter((r) => r.status === 'normal').length}
{results.filter((r) => r.status === "normal").length}
</Typography>
</Box>
<Box>
@@ -103,7 +109,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetai
预警
</Typography>
<Typography variant="h6" className="font-bold text-orange-600">
{results.filter((r) => r.status === 'warning').length}
{results.filter((r) => r.status === "warning").length}
</Typography>
</Box>
<Box>
@@ -111,7 +117,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetai
危险
</Typography>
<Typography variant="h6" className="font-bold text-red-600">
{results.filter((r) => r.status === 'danger').length}
{results.filter((r) => r.status === "danger").length}
</Typography>
</Box>
</Box>
@@ -129,12 +135,46 @@ const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetai
fill="none"
className="opacity-40"
>
<circle cx="40" cy="40" r="25" stroke="currentColor" strokeWidth="2" />
<circle
cx="40"
cy="40"
r="25"
stroke="currentColor"
strokeWidth="2"
/>
<circle cx="40" cy="40" r="5" fill="currentColor" />
<line x1="40" y1="15" x2="40" y2="25" stroke="currentColor" strokeWidth="2" />
<line x1="40" y1="55" x2="40" y2="65" stroke="currentColor" strokeWidth="2" />
<line x1="15" y1="40" x2="25" y2="40" stroke="currentColor" strokeWidth="2" />
<line x1="55" y1="40" x2="65" y2="40" stroke="currentColor" strokeWidth="2" />
<line
x1="40"
y1="15"
x2="40"
y2="25"
stroke="currentColor"
strokeWidth="2"
/>
<line
x1="40"
y1="55"
x2="40"
y2="65"
stroke="currentColor"
strokeWidth="2"
/>
<line
x1="15"
y1="40"
x2="25"
y2="40"
stroke="currentColor"
strokeWidth="2"
/>
<line
x1="55"
y1="40"
x2="65"
y2="40"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
</Box>
<Typography variant="body2">暂无定位结果</Typography>
@@ -161,9 +201,15 @@ const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetai
<TableRow key={result.id} hover>
<TableCell>{result.nodeName}</TableCell>
<TableCell>{result.nodeId}</TableCell>
<TableCell align="right">{result.pressure.toFixed(2)}</TableCell>
<TableCell align="right">{result.waterLevel.toFixed(2)}</TableCell>
<TableCell align="right">{result.flow.toFixed(1)}</TableCell>
<TableCell align="right">
{result.pressure.toFixed(3)}
</TableCell>
<TableCell align="right">
{result.waterLevel.toFixed(3)}
</TableCell>
<TableCell align="right">
{result.flow.toFixed(1)}
</TableCell>
<TableCell align="center">
<Chip
label={getStatusText(result.status)}