59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
|
|
import { MapPanelSkeleton, MapTimelineSkeleton } from "@components/loading/MapComponentSkeletons";
|
|
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
|
|
import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
|
|
import StyleLegend from "@components/olmap/core/Controls/StyleLegend";
|
|
import {
|
|
RAINBOW_COLORS,
|
|
RISK_BREAKS,
|
|
} from "@components/olmap/HealthRiskAnalysis/types";
|
|
import { Box } from "@mui/material";
|
|
|
|
const Timeline = dynamic(
|
|
() => import("@components/olmap/HealthRiskAnalysis/Timeline"),
|
|
{
|
|
loading: () => <MapTimelineSkeleton />,
|
|
},
|
|
);
|
|
const HealthRiskStatistics = dynamic(
|
|
() =>
|
|
import("@components/olmap/HealthRiskAnalysis/HealthRiskStatistics"),
|
|
{
|
|
loading: () => <MapPanelSkeleton variant="health-risk-analysis" />,
|
|
},
|
|
);
|
|
const PredictDataPanel = dynamic(
|
|
() => import("@components/olmap/HealthRiskAnalysis/PredictDataPanel"),
|
|
{
|
|
loading: () => null,
|
|
},
|
|
);
|
|
|
|
export default function Home() {
|
|
return (
|
|
<HealthRiskProvider>
|
|
<MapToolbar
|
|
queryType="realtime"
|
|
hiddenButtons={["style"]}
|
|
HistoryPanel={PredictDataPanel}
|
|
/>
|
|
<Timeline />
|
|
<HealthRiskStatistics />
|
|
<Box className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
|
|
<StyleLegend
|
|
layerName="管道"
|
|
layerId="health-risk"
|
|
property="健康风险"
|
|
colors={RAINBOW_COLORS}
|
|
type="line"
|
|
dimensions={Array(RAINBOW_COLORS.length).fill(2)}
|
|
breaks={[0, ...RISK_BREAKS]}
|
|
/>
|
|
</Box>
|
|
</HealthRiskProvider>
|
|
);
|
|
}
|