备注功能

2025-11-15 15:47:11 +08:00
parent 03b2ce017a
commit ed6b3393d7
7 changed files with 177 additions and 27 deletions
@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useMemo, useState } from 'react'
+import { use, useEffect, useMemo, useState } from 'react'
 import Link from 'next/link'
 import {
  Chart as ChartJS,
@@ -37,10 +37,13 @@ function toFixed(n: number | undefined | null, d = 3) {
  return n.toFixed(d)
 }

-export default function Page({ params }: { params: { id: string } }) {
+export default function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [rec, setRec] = useState<Detail | null>(null)
+  const [emaAlpha, setEmaAlpha] = useState(0.2)
+  const [enableEma, setEnableEma] = useState(false)

  useEffect(() => {
    const controller = new AbortController()
@@ -48,11 +51,12 @@ export default function Page({ params }: { params: { id: string } }) {
      setLoading(true)
      setError(null)
      try {
-        const res = await fetch(`/api/records/${params.id}`, { signal: controller.signal })
+        const res = await fetch(`/api/records/${id}`, { signal: controller.signal })
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        const j = await res.json()
        setRec(j)
-      } catch (e: any) {
+      } catch (e) {
+        // @ts-expect-error any
        if (e.name !== 'AbortError') setError(e.message || '加载失败')
      } finally {
        setLoading(false)
@@ -60,21 +64,30 @@ export default function Page({ params }: { params: { id: string } }) {
    }
    run()
    return () => controller.abort()
-  }, [params.id])
+  }, [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))
+    const step = rec.sampleCount > 0 ? (rec.duration * 1000) / rec.sampleCount : 0
+    return Array.from({ length: rec.sampleCount }, (_, i) => +(i * step).toFixed(3))
  }, [rec])

+  const smoothedCode = useMemo(() => {
+    if (!rec || !enableEma) return rec?.code || []
+    return applyEMA(rec.code, emaAlpha)
+  }, [rec, enableEma, emaAlpha])
+
  const forceSeries = useMemo(() => {
    if (!rec?.fit) return undefined
    const { a, b } = rec.fit
-    return rec.code.map((c) => a * c + b)
-  }, [rec])
+    const dataToUse = enableEma ? smoothedCode : rec.code
+    return dataToUse.map((c) => a * c + b)
+  }, [rec, enableEma, smoothedCode])

-  const codeHistogram = useMemo(() => buildHistogram(rec?.code || [], 30), [rec])
+  const codeHistogram = useMemo(() => {
+    const dataToUse = enableEma ? smoothedCode : (rec?.code || [])
+    return buildHistogram(dataToUse, 30)
+  }, [rec, enableEma, smoothedCode])
  const forceHistogram = useMemo(() => buildHistogram(forceSeries || [], 30), [forceSeries])

  return (
@@ -83,20 +96,20 @@ export default function Page({ params }: { params: { id: string } }) {
        <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>
+            <h1 className="text-xl font-semibold">记录 {rec?.id || 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 body = JSON.stringify({ ids: [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.download = `record-${id}.csv`
                a.click()
                URL.revokeObjectURL(url)
              }}
@@ -140,7 +153,35 @@ export default function Page({ params }: { params: { id: string } }) {
            </section>

            <section className="rounded-lg border p-4 dark:border-zinc-800">
-              <div className="mb-3 text-sm text-zinc-500">时序曲线</div>
+              <div className="mb-3 flex items-center justify-between">
+                <div className="text-sm text-zinc-500">时序曲线</div>
+                <div className="flex items-center gap-4">
+                  <label className="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={enableEma}
+                      onChange={(e) => setEnableEma(e.target.checked)}
+                      className="rounded"
+                    />
+                    <span>EMA平滑</span>
+                  </label>
+                  {enableEma && (
+                    <label className="flex items-center gap-2 text-sm">
+                      <span>α:</span>
+                      <input
+                        type="range"
+                        min="0.01"
+                        max="1"
+                        step="0.01"
+                        value={emaAlpha}
+                        onChange={(e) => setEmaAlpha(Number(e.target.value))}
+                        className="w-24"
+                      />
+                      <span className="w-12 text-right">{emaAlpha.toFixed(2)}</span>
+                    </label>
+                  )}
+                </div>
+              </div>
              <Line
                data={{
                  labels: timeAxis,
@@ -148,7 +189,7 @@ export default function Page({ params }: { params: { id: string } }) {
                    {
                      type: 'line' as const,
                      label: '码值',
-                      data: rec.code,
+                      data: enableEma ? smoothedCode : rec.code,
                      borderColor: '#0ea5e9',
                      backgroundColor: 'rgba(14,165,233,0.2)',
                      borderWidth: 1.5,
@@ -176,7 +217,7 @@ export default function Page({ params }: { params: { id: string } }) {
                  interaction: { mode: 'index', intersect: false },
                  plugins: { legend: { position: 'top' as const } },
                  scales: {
-                    x: { title: { display: true, text: '时间 (s)' } },
+                    x: { title: { display: true, text: '时间 (ms)' } },
                    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 } },
                  },
@@ -210,7 +251,7 @@ export default function Page({ params }: { params: { id: string } }) {
                      datasets: [
                        {
                          label: '码值 vs 力值',
-                          data: rec.code.map((c, i) => ({ x: c, y: forceSeries[i] })),
+                          data: (enableEma ? smoothedCode : rec.code).map((c, i) => ({ x: c, y: forceSeries[i] })),
                          backgroundColor: '#22c55e',
                        },
                      ],
@@ -235,6 +276,15 @@ export default function Page({ params }: { params: { id: string } }) {
  )
 }

+function applyEMA(data: number[], alpha: number): number[] {
+  if (data.length === 0) return []
+  const result: number[] = [data[0]]
+  for (let i = 1; i < data.length; i++) {
+    result.push(alpha * data[i] + (1 - alpha) * result[i - 1])
+  }
+  return result
+}
+
 function buildHistogram(values: number[], bins: number) {
  if (!values.length || bins <= 0) return { labels: [] as string[], counts: [] as number[] }
  let min = values[0]