子仓库提交

crop-x-new/src/app/(app)/ai-crop-model/data-sense-center/external/components/StatisticsOverview.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { ExternalDataState } from './externalDataReducer';
+import {
+  Database,
+  Cloud,
+  Activity,
+  Clock,
+  TrendingUp,
+  CheckCircle,
+} from 'lucide-react';
+
+interface StatisticsOverviewProps {
+  state: ExternalDataState;
+}
+
+export function StatisticsOverview({ state }: StatisticsOverviewProps) {
+  const activeRate = state.statistics.totalSources > 0
+    ? (state.statistics.activeSources / state.statistics.totalSources * 100).toFixed(1)
+    : '0';
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+      {/* 总数据源 */}
+      <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-blue-600 dark:text-blue-400 font-light">总数据源</p>
+            <p className="text-2xl font-bold text-blue-700 dark:text-blue-300">
+              {state.statistics.totalSources}
+            </p>
+          </div>
+          <Database className="w-8 h-8 text-blue-500 dark:text-blue-400" />
+        </div>
+      </Card>
+
+      {/* 活跃数据源 */}
+      <Card className="p-4 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-green-600 dark:text-green-400 font-light">活跃数据源</p>
+            <p className="text-2xl font-bold text-green-700 dark:text-green-300">
+              {state.statistics.activeSources}
+            </p>
+          </div>
+          <CheckCircle className="w-8 h-8 text-green-500 dark:text-green-400" />
+        </div>
+      </Card>
+
+      {/* 总数据点 */}
+      <Card className="p-4 bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-purple-600 dark:text-purple-400 font-light">总数据点</p>
+            <p className="text-2xl font-bold text-purple-700 dark:text-purple-300">
+              {state.statistics.totalDataPoints.toLocaleString()}
+            </p>
+          </div>
+          <Cloud className="w-8 h-8 text-purple-500 dark:text-purple-400" />
+        </div>
+      </Card>
+
+      {/* 活跃率 */}
+      <Card className="p-4 bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-orange-600 dark:text-orange-400 font-light">活跃率</p>
+            <p className="text-2xl font-bold text-orange-700 dark:text-orange-300">
+              {activeRate}%
+            </p>
+          </div>
+          <TrendingUp className="w-8 h-8 text-orange-500 dark:text-orange-400" />
+        </div>
+      </Card>
+    </div>
+  );
+}