747 lines
24 KiB
TypeScript
747 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useMemo, useRef } from "react";
|
|
import ReactECharts from "echarts-for-react";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
GlobalStyles,
|
|
IconButton,
|
|
Stack,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import {
|
|
Close,
|
|
PrintOutlined,
|
|
WaterDropOutlined,
|
|
} from "@mui/icons-material";
|
|
import { PredictionResult } from "./types";
|
|
import { buildHealthRiskReportData } from "./healthRiskReport";
|
|
|
|
interface HealthRiskReportProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
predictionResults: PredictionResult[];
|
|
currentYear: number;
|
|
analysisQueryTime: string | null;
|
|
networkName: string;
|
|
generatedAt: Date;
|
|
}
|
|
|
|
const REPORT_BLUE = "#0b4f87";
|
|
const REPORT_INK = "#172435";
|
|
const REPORT_MUTED = "#5f6f80";
|
|
const REPORT_LINE = "#d8e0e8";
|
|
|
|
const reportFontFamily =
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif';
|
|
|
|
const formatDateTime = (value: Date | string | null) => {
|
|
if (!value) return "未记录";
|
|
const date = value instanceof Date ? value : new Date(value);
|
|
if (Number.isNaN(date.getTime())) return "未记录";
|
|
return new Intl.DateTimeFormat("zh-CN", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
hour12: false,
|
|
}).format(date);
|
|
};
|
|
|
|
const formatPercent = (value: number | null, fractionDigits = 1) =>
|
|
value === null ? "无有效数据" : `${(value * 100).toFixed(fractionDigits)}%`;
|
|
|
|
const SectionTitle = ({ children }: { children: React.ReactNode }) => (
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
spacing={1.25}
|
|
sx={{ mb: 1.5 }}
|
|
>
|
|
<Box
|
|
aria-hidden="true"
|
|
sx={{ width: 24, height: 3, bgcolor: REPORT_BLUE, flexShrink: 0 }}
|
|
/>
|
|
<Typography
|
|
component="h2"
|
|
sx={{
|
|
color: REPORT_INK,
|
|
fontSize: 17,
|
|
fontWeight: 700,
|
|
lineHeight: 1.4,
|
|
}}
|
|
>
|
|
{children}
|
|
</Typography>
|
|
</Stack>
|
|
);
|
|
|
|
const HealthRiskReport: React.FC<HealthRiskReportProps> = ({
|
|
open,
|
|
onClose,
|
|
predictionResults,
|
|
currentYear,
|
|
analysisQueryTime,
|
|
networkName,
|
|
generatedAt,
|
|
}) => {
|
|
const printStateRef = useRef<{ title: string } | null>(null);
|
|
const reportData = useMemo(
|
|
() => buildHealthRiskReportData(predictionResults, currentYear),
|
|
[currentYear, predictionResults],
|
|
);
|
|
|
|
useEffect(
|
|
() => () => {
|
|
if (printStateRef.current) {
|
|
document.title = printStateRef.current.title;
|
|
document.body.classList.remove("health-risk-report-printing");
|
|
}
|
|
},
|
|
[],
|
|
);
|
|
|
|
const restoreAfterPrint = () => {
|
|
if (!printStateRef.current) return;
|
|
document.title = printStateRef.current.title;
|
|
printStateRef.current = null;
|
|
document.body.classList.remove("health-risk-report-printing");
|
|
};
|
|
|
|
const handlePrint = () => {
|
|
if (printStateRef.current) return;
|
|
printStateRef.current = { title: document.title };
|
|
document.title = `管网健康风险体检报告-${networkName || "未命名管网"}-${new Intl.DateTimeFormat(
|
|
"zh-CN",
|
|
{ year: "numeric", month: "2-digit", day: "2-digit" },
|
|
)
|
|
.format(generatedAt)
|
|
.replaceAll("/", "-")}`;
|
|
document.body.classList.add("health-risk-report-printing");
|
|
window.addEventListener("afterprint", restoreAfterPrint, { once: true });
|
|
window.print();
|
|
};
|
|
|
|
const distributionOption = {
|
|
animation: false,
|
|
grid: { top: 4, right: 38, bottom: 28, left: 148 },
|
|
xAxis: {
|
|
type: "value",
|
|
name: "管段数",
|
|
minInterval: 1,
|
|
axisLine: { lineStyle: { color: "#8b99a8" } },
|
|
axisLabel: { color: REPORT_MUTED, fontSize: 10 },
|
|
splitLine: { lineStyle: { color: "#e7edf2" } },
|
|
nameTextStyle: { color: REPORT_MUTED, fontSize: 10 },
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
inverse: true,
|
|
data: reportData.distribution.map((item) => item.label),
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { color: REPORT_INK, fontSize: 10 },
|
|
},
|
|
tooltip: { show: false },
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barMaxWidth: 14,
|
|
data: reportData.distribution.map((item) => ({
|
|
value: item.count,
|
|
itemStyle: { color: item.color },
|
|
})),
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
color: REPORT_INK,
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
const trendOption = {
|
|
animation: false,
|
|
grid: { top: 24, right: 24, bottom: 38, left: 48 },
|
|
xAxis: {
|
|
type: "category",
|
|
name: "预测年份",
|
|
boundaryGap: false,
|
|
data: reportData.trend.map((item) => item.year),
|
|
axisLine: { lineStyle: { color: "#8b99a8" } },
|
|
axisLabel: {
|
|
color: REPORT_MUTED,
|
|
fontSize: 10,
|
|
interval: Math.max(0, Math.ceil(reportData.trend.length / 9) - 1),
|
|
},
|
|
nameTextStyle: { color: REPORT_MUTED, fontSize: 10 },
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: "较高及以上风险管段数",
|
|
minInterval: 1,
|
|
axisLine: { show: false },
|
|
axisLabel: { color: REPORT_MUTED, fontSize: 10 },
|
|
splitLine: { lineStyle: { color: "#e7edf2" } },
|
|
nameTextStyle: { color: REPORT_MUTED, fontSize: 10 },
|
|
},
|
|
tooltip: { show: false },
|
|
series: [
|
|
{
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "none",
|
|
lineStyle: { color: "#c83d3d", width: 2.5 },
|
|
areaStyle: { color: "rgba(200, 61, 61, 0.08)" },
|
|
data: reportData.trend.map((item) => item.count),
|
|
},
|
|
],
|
|
};
|
|
|
|
const metricItems = [
|
|
{ label: "分析管段", value: reportData.totalCount.toLocaleString("zh-CN") },
|
|
{ label: "有效结果", value: reportData.validCount.toLocaleString("zh-CN") },
|
|
{
|
|
label: "平均生存概率",
|
|
value: formatPercent(reportData.averageProbability),
|
|
},
|
|
{
|
|
label: "较高及以上风险",
|
|
value: `${reportData.highRiskCount.toLocaleString("zh-CN")} 条`,
|
|
detail: formatPercent(reportData.highRiskRatio),
|
|
danger: reportData.highRiskCount > 0,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<GlobalStyles
|
|
styles={{
|
|
"@page": { size: "A4 portrait", margin: 0 },
|
|
"@media print": {
|
|
"html, body": {
|
|
width: "210mm",
|
|
minHeight: "297mm",
|
|
margin: 0,
|
|
padding: 0,
|
|
backgroundColor: "#fff",
|
|
},
|
|
"body.health-risk-report-printing > *:not(.health-risk-report-dialog)":
|
|
{
|
|
display: "none !important",
|
|
},
|
|
".health-risk-report-dialog": {
|
|
position: "static !important",
|
|
display: "block !important",
|
|
},
|
|
".health-risk-report-dialog .MuiBackdrop-root, .health-risk-report-actions":
|
|
{
|
|
display: "none !important",
|
|
},
|
|
".health-risk-report-dialog .MuiDialog-container": {
|
|
display: "block !important",
|
|
height: "auto !important",
|
|
},
|
|
".health-risk-report-dialog .MuiDialog-paper": {
|
|
width: "210mm !important",
|
|
maxWidth: "none !important",
|
|
minHeight: "297mm !important",
|
|
maxHeight: "none !important",
|
|
margin: "0 !important",
|
|
overflow: "visible !important",
|
|
boxShadow: "none !important",
|
|
},
|
|
".health-risk-report-preview": {
|
|
padding: "0 !important",
|
|
overflow: "visible !important",
|
|
backgroundColor: "#fff !important",
|
|
},
|
|
"#health-risk-print-root": {
|
|
width: "210mm !important",
|
|
minHeight: "297mm !important",
|
|
padding: "12mm !important",
|
|
boxShadow: "none !important",
|
|
printColorAdjust: "exact",
|
|
WebkitPrintColorAdjust: "exact",
|
|
},
|
|
".health-risk-report-section, .health-risk-report-metrics": {
|
|
breakInside: "avoid",
|
|
pageBreakInside: "avoid",
|
|
},
|
|
".health-risk-report-table-row": {
|
|
breakInside: "avoid",
|
|
pageBreakInside: "avoid",
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
maxWidth={false}
|
|
fullWidth
|
|
className="health-risk-report-dialog"
|
|
slotProps={{
|
|
paper: {
|
|
sx: {
|
|
width: "100%",
|
|
height: "100%",
|
|
maxHeight: "100%",
|
|
m: 0,
|
|
borderRadius: 0,
|
|
bgcolor: "#e8edf2",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Stack
|
|
className="health-risk-report-actions"
|
|
direction="row"
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
sx={{
|
|
position: "sticky",
|
|
top: 0,
|
|
zIndex: 2,
|
|
minHeight: 64,
|
|
px: { xs: 1.5, sm: 3 },
|
|
bgcolor: "#fff",
|
|
boxShadow: "0 1px 4px rgba(23, 36, 53, 0.16)",
|
|
}}
|
|
>
|
|
<Stack direction="row" alignItems="center" spacing={1}>
|
|
<IconButton
|
|
onClick={onClose}
|
|
aria-label="关闭报告预览"
|
|
sx={{ width: 40, height: 40 }}
|
|
>
|
|
<Close />
|
|
</IconButton>
|
|
<Box>
|
|
<Typography sx={{ fontWeight: 700, color: REPORT_INK }}>
|
|
报告预览
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: REPORT_MUTED }}>
|
|
A4 纵向，可在打印窗口另存为 PDF
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
<Button
|
|
variant="contained"
|
|
startIcon={<PrintOutlined />}
|
|
onClick={handlePrint}
|
|
sx={{
|
|
minHeight: 40,
|
|
borderRadius: 1.5,
|
|
bgcolor: REPORT_BLUE,
|
|
"&:hover": { bgcolor: "#083f6d" },
|
|
"&:active": { transform: "scale(0.96)" },
|
|
}}
|
|
>
|
|
打印
|
|
</Button>
|
|
</Stack>
|
|
|
|
<Box
|
|
className="health-risk-report-preview"
|
|
sx={{
|
|
flex: 1,
|
|
overflow: "auto",
|
|
px: { xs: 0, sm: 2 },
|
|
py: { xs: 0, sm: 3 },
|
|
}}
|
|
>
|
|
<Box
|
|
id="health-risk-print-root"
|
|
lang="zh-CN"
|
|
sx={{
|
|
boxSizing: "border-box",
|
|
width: { xs: "100%", sm: "min(210mm, 100%)" },
|
|
minHeight: "297mm",
|
|
mx: "auto",
|
|
p: { xs: 2, sm: "12mm" },
|
|
bgcolor: "#fff",
|
|
color: REPORT_INK,
|
|
boxShadow: { xs: "none", sm: "0 12px 32px rgba(23,36,53,0.16)" },
|
|
fontFamily: reportFontFamily,
|
|
fontVariantNumeric: "tabular-nums",
|
|
}}
|
|
>
|
|
<Box
|
|
component="header"
|
|
sx={{
|
|
bgcolor: REPORT_BLUE,
|
|
color: "#f4f8fb",
|
|
px: { xs: 2.5, sm: 4 },
|
|
py: { xs: 2.5, sm: 3.5 },
|
|
}}
|
|
>
|
|
<Stack
|
|
direction={{ xs: "column", sm: "row" }}
|
|
justifyContent="space-between"
|
|
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
spacing={2}
|
|
>
|
|
<Box>
|
|
<Stack direction="row" alignItems="center" spacing={1}>
|
|
<WaterDropOutlined aria-hidden="true" />
|
|
<Typography
|
|
lang="en"
|
|
sx={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em" }}
|
|
>
|
|
TJWATER
|
|
</Typography>
|
|
</Stack>
|
|
<Typography
|
|
component="h1"
|
|
sx={{
|
|
mt: 1.5,
|
|
fontSize: { xs: 24, sm: 30 },
|
|
fontWeight: 700,
|
|
lineHeight: 1.25,
|
|
textWrap: "balance",
|
|
}}
|
|
>
|
|
管网健康风险体检报告
|
|
</Typography>
|
|
<Typography
|
|
sx={{
|
|
mt: 0.75,
|
|
color: "#cfe1ef",
|
|
fontSize: 13,
|
|
lineHeight: 1.7,
|
|
}}
|
|
>
|
|
Pipeline health risk assessment
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
minWidth: { sm: 168 },
|
|
width: { xs: "100%", sm: "auto" },
|
|
pt: { xs: 2, sm: 0 },
|
|
pl: { xs: 0, sm: 3 },
|
|
borderTop: {
|
|
xs: "1px solid rgba(224, 238, 248, 0.28)",
|
|
sm: "none",
|
|
},
|
|
borderLeft: {
|
|
xs: "none",
|
|
sm: "1px solid rgba(224, 238, 248, 0.28)",
|
|
},
|
|
}}
|
|
>
|
|
<Stack direction="row" alignItems="center" spacing={0.8}>
|
|
<Box
|
|
aria-hidden="true"
|
|
sx={{
|
|
width: 7,
|
|
height: 7,
|
|
flexShrink: 0,
|
|
borderRadius: "50%",
|
|
bgcolor:
|
|
reportData.highRiskCount > 0 ? "#ffb3a7" : "#9dd7bd",
|
|
}}
|
|
/>
|
|
<Typography sx={{ color: "#cfe1ef", fontSize: 11 }}>
|
|
本期提示
|
|
</Typography>
|
|
</Stack>
|
|
<Typography
|
|
sx={{
|
|
mt: 0.75,
|
|
fontWeight: 700,
|
|
fontSize: 20,
|
|
lineHeight: 1.35,
|
|
}}
|
|
>
|
|
{reportData.highRiskCount > 0 ? "需重点关注" : "持续监测"}
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Box
|
|
component="dl"
|
|
sx={{
|
|
m: 0,
|
|
display: "grid",
|
|
gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)" },
|
|
borderBottom: `1px solid ${REPORT_LINE}`,
|
|
}}
|
|
>
|
|
{[
|
|
["管网项目", networkName || "未命名管网"],
|
|
["预测时点", `第 ${currentYear} 年`],
|
|
["分析数据时间", formatDateTime(analysisQueryTime)],
|
|
["报告生成时间", formatDateTime(generatedAt)],
|
|
].map(([label, value]) => (
|
|
<Box
|
|
key={label}
|
|
sx={{
|
|
display: "grid",
|
|
gridTemplateColumns: "96px 1fr",
|
|
gap: 1,
|
|
px: 2,
|
|
py: 1.25,
|
|
borderBottom: { xs: `1px solid ${REPORT_LINE}`, sm: "none" },
|
|
}}
|
|
>
|
|
<Typography
|
|
component="dt"
|
|
sx={{ color: REPORT_MUTED, fontSize: 12 }}
|
|
>
|
|
{label}
|
|
</Typography>
|
|
<Typography
|
|
component="dd"
|
|
sx={{
|
|
m: 0,
|
|
color: REPORT_INK,
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
overflowWrap: "anywhere",
|
|
}}
|
|
>
|
|
{value}
|
|
</Typography>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
<Box
|
|
component="section"
|
|
className="health-risk-report-section"
|
|
sx={{ mt: 3 }}
|
|
>
|
|
<SectionTitle>总体结论</SectionTitle>
|
|
<Box
|
|
sx={{
|
|
bgcolor:
|
|
reportData.highRiskCount > 0 ? "#fff4f1" : "#eff8f4",
|
|
px: 2.25,
|
|
py: 1.75,
|
|
}}
|
|
>
|
|
<Typography sx={{ fontSize: 13, lineHeight: 1.8, color: REPORT_INK }}>
|
|
{reportData.conclusion}
|
|
</Typography>
|
|
{reportData.invalidCount > 0 && (
|
|
<Typography sx={{ mt: 0.5, fontSize: 11, color: REPORT_MUTED }}>
|
|
另有 {reportData.invalidCount} 条管段在当前预测年份缺少有效结果，未纳入本期统计。
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
className="health-risk-report-metrics"
|
|
sx={{
|
|
mt: 2.25,
|
|
display: "grid",
|
|
gridTemplateColumns: { xs: "repeat(2, 1fr)", sm: "repeat(4, 1fr)" },
|
|
borderTop: `1px solid ${REPORT_LINE}`,
|
|
borderBottom: `1px solid ${REPORT_LINE}`,
|
|
}}
|
|
>
|
|
{metricItems.map((item, index) => (
|
|
<Box
|
|
key={item.label}
|
|
sx={{
|
|
px: 1.5,
|
|
py: 1.75,
|
|
borderRight:
|
|
index < metricItems.length - 1
|
|
? `1px solid ${REPORT_LINE}`
|
|
: "none",
|
|
}}
|
|
>
|
|
<Typography sx={{ color: REPORT_MUTED, fontSize: 11 }}>
|
|
{item.label}
|
|
</Typography>
|
|
<Typography
|
|
sx={{
|
|
mt: 0.5,
|
|
color: item.danger ? "#a62f2f" : REPORT_INK,
|
|
fontSize: 20,
|
|
fontWeight: 700,
|
|
lineHeight: 1.25,
|
|
}}
|
|
>
|
|
{item.value}
|
|
</Typography>
|
|
{item.detail && (
|
|
<Typography sx={{ mt: 0.25, color: REPORT_MUTED, fontSize: 10 }}>
|
|
占有效结果 {item.detail}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
<Box
|
|
component="section"
|
|
className="health-risk-report-section"
|
|
sx={{ mt: 3 }}
|
|
>
|
|
<SectionTitle>当前年份风险分布</SectionTitle>
|
|
<Typography sx={{ mb: 1, color: REPORT_MUTED, fontSize: 11 }}>
|
|
生存概率越低，表示模型预测风险越高。统计口径与地图风险图例一致。
|
|
</Typography>
|
|
<ReactECharts
|
|
option={distributionOption}
|
|
style={{ width: "100%", height: 300 }}
|
|
opts={{ renderer: "svg" }}
|
|
notMerge
|
|
/>
|
|
</Box>
|
|
|
|
<Box
|
|
component="section"
|
|
className="health-risk-report-section"
|
|
sx={{ mt: 3 }}
|
|
>
|
|
<SectionTitle>重点风险趋势</SectionTitle>
|
|
<Typography sx={{ mb: 1, color: REPORT_MUTED, fontSize: 11 }}>
|
|
展示各预测年份中生存概率不高于 0.3 的管段数量。
|
|
</Typography>
|
|
<ReactECharts
|
|
option={trendOption}
|
|
style={{ width: "100%", height: 240 }}
|
|
opts={{ renderer: "svg" }}
|
|
notMerge
|
|
/>
|
|
</Box>
|
|
|
|
<Box component="section" sx={{ mt: 3 }}>
|
|
<SectionTitle>重点风险管段</SectionTitle>
|
|
<Typography sx={{ mb: 1.25, color: REPORT_MUTED, fontSize: 11 }}>
|
|
按当前预测年份的生存概率从低到高排列，最多展示 20 条。
|
|
</Typography>
|
|
{reportData.priorityPipes.length > 0 ? (
|
|
<TableContainer>
|
|
<Table
|
|
size="small"
|
|
aria-label="重点风险管段"
|
|
sx={{ tableLayout: "fixed" }}
|
|
>
|
|
<TableHead>
|
|
<TableRow sx={{ bgcolor: "#edf3f7" }}>
|
|
<TableCell sx={{ width: 52, fontWeight: 700 }}>序号</TableCell>
|
|
<TableCell sx={{ width: "34%", fontWeight: 700 }}>
|
|
管段编号
|
|
</TableCell>
|
|
<TableCell align="right" sx={{ width: 110, fontWeight: 700 }}>
|
|
生存概率
|
|
</TableCell>
|
|
<TableCell sx={{ fontWeight: 700 }}>风险等级</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{reportData.priorityPipes.map((pipe, index) => (
|
|
<TableRow
|
|
key={`${pipe.linkId}-${index}`}
|
|
className="health-risk-report-table-row"
|
|
>
|
|
<TableCell>{index + 1}</TableCell>
|
|
<TableCell
|
|
sx={{ fontWeight: 600, overflowWrap: "anywhere" }}
|
|
>
|
|
{pipe.linkId}
|
|
</TableCell>
|
|
<TableCell align="right">
|
|
{formatPercent(pipe.probability, 2)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Stack direction="row" alignItems="center" spacing={1}>
|
|
<Box
|
|
aria-hidden="true"
|
|
sx={{
|
|
width: 9,
|
|
height: 9,
|
|
flexShrink: 0,
|
|
bgcolor: pipe.color,
|
|
borderRadius: "50%",
|
|
}}
|
|
/>
|
|
<Typography sx={{ fontSize: 12 }}>
|
|
{pipe.riskLabel}
|
|
</Typography>
|
|
</Stack>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
) : (
|
|
<Box sx={{ bgcolor: "#f4f7f9", px: 2, py: 2 }}>
|
|
<Typography sx={{ color: REPORT_MUTED, fontSize: 12 }}>
|
|
当前预测年份没有较高及以上风险管段。
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
<Box
|
|
component="section"
|
|
className="health-risk-report-section"
|
|
sx={{ mt: 3 }}
|
|
>
|
|
<SectionTitle>处置建议</SectionTitle>
|
|
<Box component="ol" sx={{ m: 0, pl: 3 }}>
|
|
{reportData.recommendations.map((recommendation) => (
|
|
<Typography
|
|
component="li"
|
|
key={recommendation}
|
|
sx={{
|
|
pl: 0.5,
|
|
mb: 0.75,
|
|
color: REPORT_INK,
|
|
fontSize: 12,
|
|
lineHeight: 1.75,
|
|
}}
|
|
>
|
|
{recommendation}
|
|
</Typography>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
component="footer"
|
|
sx={{
|
|
mt: 3.5,
|
|
pt: 1.5,
|
|
borderTop: `1px solid ${REPORT_LINE}`,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
gap: 2,
|
|
color: REPORT_MUTED,
|
|
}}
|
|
>
|
|
<Typography sx={{ fontSize: 10 }}>TJWater 管网分析平台</Typography>
|
|
<Typography sx={{ fontSize: 10, textAlign: "right" }}>
|
|
风险阈值：生存概率 ≤ 0.3
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default HealthRiskReport;
|