新增无数据时的统计图显示;新增提示
This commit is contained in:
@@ -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,6 +242,7 @@ const HealthRiskPieChart: React.FC = () => {
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="p-2 h-[550px]" onMouseLeave={handleMouseLeave}>
|
||||
{predictionResults && predictionResults.length > 0 ? (
|
||||
<ReactECharts
|
||||
ref={(e) => {
|
||||
chartRef.current = e;
|
||||
@@ -234,6 +252,9 @@ const HealthRiskPieChart: React.FC = () => {
|
||||
style={{ height: "100%", width: "100%" }}
|
||||
opts={{ renderer: "canvas" }}
|
||||
/>
|
||||
) : (
|
||||
renderEmpty()
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Slide>
|
||||
|
||||
Reference in New Issue
Block a user