From 5312ea9d034d8795a1589d434f28eb63e1368fb7 Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Thu, 18 Dec 2025 18:30:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=97=A0=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=97=B6=E7=9A=84=E7=BB=9F=E8=AE=A1=E5=9B=BE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=9B=E6=96=B0=E5=A2=9E=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HealthRiskAnalysis/HealthRiskPieChart.tsx | 53 +++++++++++++------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/components/olmap/HealthRiskAnalysis/HealthRiskPieChart.tsx b/src/components/olmap/HealthRiskAnalysis/HealthRiskPieChart.tsx
index 4148bfa..5806473 100644
--- a/src/components/olmap/HealthRiskAnalysis/HealthRiskPieChart.tsx
+++ b/src/components/olmap/HealthRiskAnalysis/HealthRiskPieChart.tsx
@@ -147,14 +147,31 @@ const HealthRiskPieChart: React.FC = () => {
     setHoveredYearIndex(null);
   };
 
-  if (!predictionResults || predictionResults.length === 0) {
-    return null;
-  }
+  const renderEmpty = () => (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        color: "text.secondary",
+      }}
+    >
+      <PieChart sx={{ fontSize: 64, mb: 2, opacity: 0.3 }} />
+      <Typography variant="h6" gutterBottom sx={{ fontWeight: 500 }}>
+        暂无预测数据
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        请先进行健康风险分析预测，以生成风险分布数据
+      </Typography>
+    </Box>
+  );
 
   return (
     <>
       {/* 收起时的触发按钮 */}
-      <Fade in={!isExpanded && predictionResults.length > 0}>
+      <Fade in={!isExpanded}>
         <Box
           className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
           onClick={() => setIsExpanded(true)}
@@ -167,7 +184,7 @@ const HealthRiskPieChart: React.FC = () => {
               className="text-gray-700 font-semibold my-1 text-xs"
               style={{ writingMode: "vertical-rl" }}
             >
-              风险分布
+              风险统计
             </Typography>
             <ChevronLeft className="text-gray-600 w-4 h-4" />
           </Box>
@@ -198,10 +215,10 @@ const HealthRiskPieChart: React.FC = () => {
                   d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"
                 />
               </svg>
-              <h3 className="text-lg font-semibold">管道健康风险分布</h3>
+              <h3 className="text-lg font-semibold">管道健康风险统计</h3>
               <Chip
                 size="small"
-                label={`${predictionResults.length}`}
+                label={`${predictionResults?.length || 0}`}
                 sx={{
                   backgroundColor: "rgba(255,255,255,0.2)",
                   color: "white",
@@ -225,15 +242,19 @@ const HealthRiskPieChart: React.FC = () => {
 
           {/* 内容区域 */}
           <div className="p-2 h-[550px]" onMouseLeave={handleMouseLeave}>
-            <ReactECharts
-              ref={(e) => {
-                chartRef.current = e;
-              }}
-              option={option}
-              onEvents={onEvents}
-              style={{ height: "100%", width: "100%" }}
-              opts={{ renderer: "canvas" }}
-            />
+            {predictionResults && predictionResults.length > 0 ? (
+              <ReactECharts
+                ref={(e) => {
+                  chartRef.current = e;
+                }}
+                option={option}
+                onEvents={onEvents}
+                style={{ height: "100%", width: "100%" }}
+                opts={{ renderer: "canvas" }}
+              />
+            ) : (
+              renderEmpty()
+            )}
           </div>
         </div>
       </Slide>