init

2025-11-15 14:36:16 +08:00
parent 5cf0704d33
commit 03b2ce017a
15 changed files with 916 additions and 87 deletions
@@ -0,0 +1,260 @@
+"use client"
+import { useEffect, useMemo, useState } from 'react'
+import Link from 'next/link'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Tooltip,
+  Legend,
+} from 'chart.js'
+import { Line, Bar, Scatter } from 'react-chartjs-2'
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend)
+
+type Detail = {
+  id: string
+  timestamp: string
+  code: number[]
+  fit?: { a: number; b: number }
+  sampleCount: number
+  duration: number
+  stats: {
+    codeMin: number
+    codeMax: number
+    codeAvg: number
+    forceMin?: number
+    forceMax?: number
+    forceAvg?: number
+  }
+}
+
+function toFixed(n: number | undefined | null, d = 3) {
+  if (n == null || Number.isNaN(n)) return '-'
+  return n.toFixed(d)
+}
+
+export default function Page({ params }: { params: { id: string } }) {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [rec, setRec] = useState<Detail | null>(null)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    async function run() {
+      setLoading(true)
+      setError(null)
+      try {
+        const res = await fetch(`/api/records/${params.id}`, { signal: controller.signal })
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        const j = await res.json()
+        setRec(j)
+      } catch (e: any) {
+        if (e.name !== 'AbortError') setError(e.message || '加载失败')
+      } finally {
+        setLoading(false)
+      }
+    }
+    run()
+    return () => controller.abort()
+  }, [params.id])
+
+  const timeAxis = useMemo(() => {
+    if (!rec) return [] as number[]
+    const step = rec.sampleCount > 0 ? rec.duration / rec.sampleCount : 0
+    return Array.from({ length: rec.sampleCount }, (_, i) => +(i * step).toFixed(6))
+  }, [rec])
+
+  const forceSeries = useMemo(() => {
+    if (!rec?.fit) return undefined
+    const { a, b } = rec.fit
+    return rec.code.map((c) => a * c + b)
+  }, [rec])
+
+  const codeHistogram = useMemo(() => buildHistogram(rec?.code || [], 30), [rec])
+  const forceHistogram = useMemo(() => buildHistogram(forceSeries || [], 30), [forceSeries])
+
+  return (
+    <div className="min-h-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
+      <div className="mx-auto max-w-6xl p-4 sm:p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Link href="/" className="rounded border px-3 py-1.5">← 返回</Link>
+            <h1 className="text-xl font-semibold">记录 {rec?.id || params.id}</h1>
+          </div>
+          <div className="flex gap-2">
+            <a
+              href={`/api/export`}
+              onClick={async (e) => {
+                e.preventDefault()
+                const body = JSON.stringify({ ids: [params.id], format: 'csv' as const })
+                const res = await fetch('/api/export', { method: 'POST', headers: { 'content-type': 'application/json' }, body })
+                const blob = await res.blob()
+                const url = URL.createObjectURL(blob)
+                const a = document.createElement('a')
+                a.href = url
+                a.download = `record-${params.id}.csv`
+                a.click()
+                URL.revokeObjectURL(url)
+              }}
+              className="rounded bg-zinc-900 px-3 py-1.5 text-white dark:bg-zinc-100 dark:text-black"
+            >导出 CSV</a>
+          </div>
+        </div>
+
+        {loading && <div className="rounded bg-zinc-200 p-4 dark:bg-zinc-800">加载中...</div>}
+        {error && <div className="rounded bg-red-100 p-4 text-red-800">{error}</div>}
+        {rec && (
+          <div className="flex flex-col gap-6">
+            <section className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              <div className="rounded-lg border p-4 dark:border-zinc-800">
+                <div className="text-sm text-zinc-500">上传时间</div>
+                <div className="mt-1 text-lg">{new Date(rec.timestamp).toLocaleString()}</div>
+              </div>
+              <div className="rounded-lg border p-4 dark:border-zinc-800">
+                <div className="text-sm text-zinc-500">采样</div>
+                <div className="mt-1 text-lg">{rec.sampleCount} 点 · {rec.duration.toFixed(3)} s · {(rec.sampleCount / rec.duration).toFixed(2)} Hz</div>
+              </div>
+              <div className="rounded-lg border p-4 dark:border-zinc-800">
+                <div className="text-sm text-zinc-500">拟合</div>
+                <div className="mt-1 text-lg">{rec.fit ? `y = ${rec.fit.a.toFixed(4)}x + ${rec.fit.b.toFixed(3)}` : '未拟合'}</div>
+              </div>
+            </section>
+
+            <section className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              <div className="rounded-lg border p-4 dark:border-zinc-800">
+                <div className="text-sm text-zinc-500">码值统计</div>
+                <div className="mt-1 text-lg">[{rec.stats.codeMin} ~ {rec.stats.codeMax}] · 均值 {toFixed(rec.stats.codeAvg, 2)}</div>
+              </div>
+              <div className="rounded-lg border p-4 dark:border-zinc-800">
+                <div className="text-sm text-zinc-500">力值统计</div>
+                <div className="mt-1 text-lg">{rec.fit ? `[${toFixed(rec.stats.forceMin, 2)} ~ ${toFixed(rec.stats.forceMax, 2)}] mN · 均值 ${toFixed(rec.stats.forceAvg, 2)}` : '—'}</div>
+              </div>
+              <div className="rounded-lg border p-4 dark:border-zinc-800">
+                <div className="text-sm text-zinc-500">峰峰值</div>
+                <div className="mt-1 text-lg">码值 {rec.stats.codeMax - rec.stats.codeMin}{rec.fit && rec.stats.forceMax != null && rec.stats.forceMin != null ? ` · 力值 ${(rec.stats.forceMax - rec.stats.forceMin).toFixed(2)} mN` : ''}</div>
+              </div>
+            </section>
+
+            <section className="rounded-lg border p-4 dark:border-zinc-800">
+              <div className="mb-3 text-sm text-zinc-500">时序曲线</div>
+              <Line
+                data={{
+                  labels: timeAxis,
+                  datasets: [
+                    {
+                      type: 'line' as const,
+                      label: '码值',
+                      data: rec.code,
+                      borderColor: '#0ea5e9',
+                      backgroundColor: 'rgba(14,165,233,0.2)',
+                      borderWidth: 1.5,
+                      yAxisID: 'yCode',
+                      pointRadius: 0,
+                    },
+                    ...(rec.fit && forceSeries
+                      ? [
+                          {
+                            type: 'line' as const,
+                            label: '力值 (mN)',
+                            data: forceSeries,
+                            borderColor: '#22c55e',
+                            backgroundColor: 'rgba(34,197,94,0.2)',
+                            borderWidth: 1.5,
+                            yAxisID: 'yForce',
+                            pointRadius: 0,
+                          },
+                        ]
+                      : []),
+                  ],
+                }}
+                options={{
+                  responsive: true,
+                  interaction: { mode: 'index', intersect: false },
+                  plugins: { legend: { position: 'top' as const } },
+                  scales: {
+                    x: { title: { display: true, text: '时间 (s)' } },
+                    yCode: { type: 'linear' as const, position: 'left' as const, title: { display: true, text: '码值' } },
+                    yForce: { type: 'linear' as const, position: 'right' as const, title: { display: true, text: '力值 (mN)' }, grid: { drawOnChartArea: false } },
+                  },
+                }}
+              />
+            </section>
+
+            <section className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div className="rounded-lg border p-4 dark:border-zinc-800">
+                <div className="mb-3 text-sm text-zinc-500">码值分布直方图</div>
+                <Bar
+                  data={{
+                    labels: codeHistogram.labels,
+                    datasets: [
+                      {
+                        label: '频数',
+                        data: codeHistogram.counts,
+                        backgroundColor: 'rgba(14,165,233,0.3)',
+                        borderColor: '#0ea5e9',
+                      },
+                    ],
+                  }}
+                  options={{ scales: { x: { title: { display: true, text: '码值' } }, y: { title: { display: true, text: '数量' } } } }}
+                />
+              </div>
+              <div className="rounded-lg border p-4 dark:border-zinc-800">
+                <div className="mb-3 text-sm text-zinc-500">线性度散点图</div>
+                {rec.fit && forceSeries ? (
+                  <Scatter
+                    data={{
+                      datasets: [
+                        {
+                          label: '码值 vs 力值',
+                          data: rec.code.map((c, i) => ({ x: c, y: forceSeries[i] })),
+                          backgroundColor: '#22c55e',
+                        },
+                      ],
+                    }}
+                    options={{
+                      scales: {
+                        x: { title: { display: true, text: '码值' } },
+                        y: { title: { display: true, text: '力值 (mN)' } },
+                      },
+                      plugins: { legend: { display: false } },
+                    }}
+                  />
+                ) : (
+                  <div className="text-sm text-zinc-500">无拟合参数，无法绘制</div>
+                )}
+              </div>
+            </section>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function buildHistogram(values: number[], bins: number) {
+  if (!values.length || bins <= 0) return { labels: [] as string[], counts: [] as number[] }
+  let min = values[0]
+  let max = values[0]
+  for (const v of values) {
+    if (v < min) min = v
+    if (v > max) max = v
+  }
+  if (min === max) {
+    return { labels: [min.toFixed(2)], counts: [values.length] }
+  }
+  const step = (max - min) / bins
+  const edges = Array.from({ length: bins + 1 }, (_, i) => min + i * step)
+  const counts = Array.from({ length: bins }, () => 0)
+  for (const v of values) {
+    let idx = Math.floor((v - min) / step)
+    if (idx >= bins) idx = bins - 1
+    if (idx < 0) idx = 0
+    counts[idx]++
+  }
+  const labels = Array.from({ length: bins }, (_, i) => `${edges[i].toFixed(1)}~${edges[i + 1].toFixed(1)}`)
+  return { labels, counts }
+}