改进滤波器

app/records/[id]/page.tsx

@@ -43,8 +43,16 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [rec, setRec] = useState<Detail | null>(null)
+  // 滤波相关状态
+  const [filterType, setFilterType] = useState<'none' | 'ema' | 'sg' | 'hampel_sg' | 'gauss'>('hampel_sg')
   const [emaAlpha, setEmaAlpha] = useState(0.01)
-  const [enableEma, setEnableEma] = useState(true)
+  const [sgWindow, setSgWindow] = useState(21)
+  const [sgOrder, setSgOrder] = useState<2 | 3>(3)
+  const [hampelWindow, setHampelWindow] = useState(11)
+  const [hampelK, setHampelK] = useState(2)
+  const [gaussSigma, setGaussSigma] = useState(5)
+  const [showOriginal, setShowOriginal] = useState(false)
+  const [showFiltered, setShowFiltered] = useState(true)
 
   useEffect(() => {
     const controller = new AbortController()
@@ -67,28 +75,53 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
     return () => controller.abort()
   }, [id])
 
+  // 若存在拟合，默认不显示滤波码值（仅在记录加载时初始化一次）
+  useEffect(() => {
+    if (rec?.fit) setShowFiltered(false)
+  }, [rec?.fit])
+
   const timeAxis = useMemo(() => {
     if (!rec) return [] as number[]
     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(() => {
+  const filteredCode = useMemo(() => {
-    if (!rec || !enableEma) return rec?.code || []
+    if (!rec) return [] as number[]
-    return applyEMA(rec.code, emaAlpha)
+    const x = rec.code
-  }, [rec, enableEma, emaAlpha])
+    switch (filterType) {
+      case 'none':
+        return x
+      case 'ema':
+        return applyEMA(x, emaAlpha)
+      case 'sg': {
+        const w = makeOddSafe(sgWindow, x.length)
+        return savitzkyGolay(x, w, sgOrder)
+      }
+      case 'hampel_sg': {
+        const hw = makeOddSafe(hampelWindow, x.length)
+        const w = makeOddSafe(sgWindow, x.length)
+        const y = hampelFilter(x, hw, hampelK)
+        return savitzkyGolay(y, w, sgOrder)
+      }
+      case 'gauss':
+        return gaussianSmooth(x, gaussSigma)
+      default:
+        return x
+    }
+  }, [rec, filterType, emaAlpha, sgWindow, sgOrder, hampelWindow, hampelK, gaussSigma])
 
   const forceSeries = useMemo(() => {
     if (!rec?.fit) return undefined
     const { a, b } = rec.fit
-    const dataToUse = enableEma ? smoothedCode : rec.code
+    const dataToUse = filterType === 'none' ? (rec.code) : filteredCode
-    return dataToUse.map((c) => a * c + b)
+    return dataToUse.map((c: number) => a * c + b)
-  }, [rec, enableEma, smoothedCode])
+  }, [rec, filterType, filteredCode])
 
   const codeHistogram = useMemo(() => {
-    const dataToUse = enableEma ? smoothedCode : (rec?.code || [])
+    const dataToUse = filterType === 'none' ? (rec?.code || []) : filteredCode
     return buildHistogram(dataToUse, 30)
-  }, [rec, enableEma, smoothedCode])
+  }, [rec, filterType, filteredCode])
 
   return (
     <div className="min-h-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
@@ -155,17 +188,23 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
             <section className="rounded-lg border p-4 dark:border-zinc-800">
               <div className="mb-3 flex items-center justify-between">
                 <div className="text-sm text-zinc-500">时序曲线</div>
-                <div className="flex items-center gap-4">
+                <div className="flex flex-wrap items-center gap-4">
                   <label className="flex items-center gap-2 text-sm">
-                    <input
+                    <span>滤波器:</span>
-                      type="checkbox"
+                    <select
-                      checked={enableEma}
+                      className="rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
-                      onChange={(e) => setEnableEma(e.target.checked)}
+                      value={filterType}
-                      className="rounded"
+                      onChange={(e) => setFilterType(e.target.value as any)}
-                    />
+                    >
-                    <span>EMA平滑</span>
+                      <option value="none">无</option>
+                      <option value="ema">EMA</option>
+                      <option value="sg">Savitzky–Golay</option>
+                      <option value="hampel_sg">Hampel + SG</option>
+                      <option value="gauss">Gaussian（零相位）</option>
+                    </select>
                   </label>
-                  {enableEma && (
+
+                  {filterType === 'ema' && (
                     <label className="flex items-center gap-2 text-sm">
                       <span>α:</span>
                       <input
@@ -175,11 +214,114 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                         step="0.01"
                         value={emaAlpha}
                         onChange={(e) => setEmaAlpha(Number(e.target.value))}
-                        className="w-24"
+                        className="w-28"
                       />
                       <span className="w-12 text-right">{emaAlpha.toFixed(2)}</span>
                     </label>
                   )}
+
+                  {filterType === 'sg' && (
+                    <div className="flex items-center gap-4 text-sm">
+                      <label className="flex items-center gap-2">
+                        <span>窗口:</span>
+                        <input
+                          type="number"
+                          className="w-16 rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={sgWindow}
+                          min={5}
+                          step={2}
+                          onChange={(e) => setSgWindow(Number(e.target.value))}
+                        />
+                      </label>
+                      <label className="flex items-center gap-2">
+                        <span>阶数:</span>
+                        <select
+                          className="rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={sgOrder}
+                          onChange={(e) => setSgOrder(Number(e.target.value) as 2 | 3)}
+                        >
+                          <option value={2}>2</option>
+                          <option value={3}>3</option>
+                        </select>
+                      </label>
+                    </div>
+                  )}
+
+                  {filterType === 'hampel_sg' && (
+                    <div className="flex items-center gap-4 text-sm">
+                      <label className="flex items-center gap-2">
+                        <span>Hampel窗口:</span>
+                        <input
+                          type="number"
+                          className="w-16 rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={hampelWindow}
+                          min={5}
+                          step={2}
+                          onChange={(e) => setHampelWindow(Number(e.target.value))}
+                        />
+                      </label>
+                      <label className="flex items-center gap-2">
+                        <span>阈值k:</span>
+                        <input
+                          type="number"
+                          className="w-16 rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={hampelK}
+                          min={1}
+                          step={0.5}
+                          onChange={(e) => setHampelK(Number(e.target.value))}
+                        />
+                      </label>
+                      <label className="flex items-center gap-2">
+                        <span>SG窗口:</span>
+                        <input
+                          type="number"
+                          className="w-16 rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={sgWindow}
+                          min={5}
+                          step={2}
+                          onChange={(e) => setSgWindow(Number(e.target.value))}
+                        />
+                      </label>
+                      <label className="flex items-center gap-2">
+                        <span>SG阶数:</span>
+                        <select
+                          className="rounded border bg-transparent px-2 py-1 dark:border-zinc-700"
+                          value={sgOrder}
+                          onChange={(e) => setSgOrder(Number(e.target.value) as 2 | 3)}
+                        >
+                          <option value={2}>2</option>
+                          <option value={3}>3</option>
+                        </select>
+                      </label>
+                    </div>
+                  )}
+
+                  {filterType === 'gauss' && (
+                    <label className="flex items-center gap-2 text-sm">
+                      <span>σ(点):</span>
+                      <input
+                        type="range"
+                        min={0.5}
+                        max={10}
+                        step={0.5}
+                        value={gaussSigma}
+                        onChange={(e) => setGaussSigma(Number(e.target.value))}
+                        className="w-40"
+                      />
+                      <span className="w-12 text-right">{gaussSigma.toFixed(1)}</span>
+                    </label>
+                  )}
+
+                  <label className="flex items-center gap-2 text-sm">
+                    <input type="checkbox" className="rounded" checked={showFiltered} onChange={(e) => setShowFiltered(e.target.checked)} />
+                    <span>显示滤波码值</span>
+                  </label>
+
+                  <label className="flex items-center gap-2 text-sm">
+                    <input type="checkbox" className="rounded" checked={showOriginal} onChange={(e) => setShowOriginal(e.target.checked)} />
+                    <span>叠加原始</span>
+                  </label>
+
                   <span className="hidden text-xs text-zinc-500 sm:inline">按 Ctrl+滚轮 缩放，拖拽平移</span>
                 </div>
               </div>
@@ -187,16 +329,35 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                 data={{
                   labels: timeAxis,
                   datasets: [
-                    {
+                    ...(showOriginal && rec
-                      type: 'line' as const,
+                      ? [
-                      label: '码值',
+                          {
-                      data: enableEma ? smoothedCode : rec.code,
+                            type: 'line' as const,
-                      borderColor: '#0ea5e9',
+                            label: '原始码值',
-                      backgroundColor: 'rgba(14,165,233,0.2)',
+                            data: rec.code,
-                      borderWidth: 1.5,
+                            borderColor: '#a1a1aa',
-                      yAxisID: 'yCode',
+                            backgroundColor: 'rgba(161,161,170,0.2)',
-                      pointRadius: 0,
+                            borderDash: [4, 4] as any,
-                    },
+                            borderWidth: 1,
+                            yAxisID: 'yCode',
+                            pointRadius: 0,
+                          },
+                        ]
+                      : []),
+                    ...(showFiltered
+                      ? [
+                          {
+                            type: 'line' as const,
+                            label: '滤波码值',
+                            data: filterType === 'none' ? rec.code : filteredCode,
+                            borderColor: '#0ea5e9',
+                            backgroundColor: 'rgba(14,165,233,0.2)',
+                            borderWidth: 1.5,
+                            yAxisID: 'yCode',
+                            pointRadius: 0,
+                          },
+                        ]
+                      : []),
                     ...(rec.fit && forceSeries
                       ? [
                           {
@@ -274,7 +435,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                       datasets: [
                         {
                           label: '码值 vs 力值',
-                          data: (enableEma ? smoothedCode : rec.code).map((c, i) => ({ x: c, y: forceSeries[i] })),
+                          data: (filterType === 'none' ? rec.code : filteredCode).map((c: number, i: number) => ({ x: c, y: forceSeries[i] })),
                           backgroundColor: '#22c55e',
                         },
                       ],
@@ -318,6 +479,165 @@ function applyEMA(data: number[], alpha: number): number[] {
   return result
 }
 
+// ---- 进阶滤波工具函数 ----
+function makeOddSafe(w: number, len: number) {
+  let ww = Math.max(3, Math.min(Math.floor(w), len))
+  if (ww % 2 === 0) ww = ww - 1
+  if (ww < 3) ww = Math.min(len, 3)
+  if (ww % 2 === 0 && ww > 1) ww = ww - 1
+  return Math.max(1, ww)
+}
+
+function reflectIndex(i: number, n: number): number {
+  if (n <= 1) return 0
+  while (i < 0 || i >= n) {
+    if (i < 0) i = -i - 1
+    if (i >= n) i = 2 * n - i - 1
+  }
+  return i
+}
+
+function convolveReflect(data: number[], kernel: number[]): number[] {
+  const n = data.length
+  const m = kernel.length
+  const half = Math.floor(m / 2)
+  const out = new Array<number>(n)
+  for (let i = 0; i < n; i++) {
+    let acc = 0
+    for (let k = 0; k < m; k++) {
+      const idx = reflectIndex(i + k - half, n)
+      acc += data[idx] * kernel[k]
+    }
+    out[i] = acc
+  }
+  return out
+}
+
+function gaussianSmooth(data: number[], sigma: number): number[] {
+  if (data.length === 0) return []
+  if (sigma <= 0) return data.slice()
+  const radius = Math.max(1, Math.round(3 * sigma))
+  const size = radius * 2 + 1
+  const kernel = new Array<number>(size)
+  let sum = 0
+  for (let i = -radius; i <= radius; i++) {
+    const v = Math.exp(-0.5 * (i * i) / (sigma * sigma))
+    kernel[i + radius] = v
+    sum += v
+  }
+  for (let i = 0; i < size; i++) kernel[i] /= sum
+  return convolveReflect(data, kernel)
+}
+
+// Savitzky–Golay 实现（中心点系数 + 反射卷积）
+function transpose(A: number[][]): number[][] {
+  const r = A.length, c = A[0].length
+  const T = Array.from({ length: c }, () => new Array<number>(r).fill(0))
+  for (let i = 0; i < r; i++) for (let j = 0; j < c; j++) T[j][i] = A[i][j]
+  return T
+}
+
+function matMul(A: number[][], B: number[][]): number[][] {
+  const r = A.length, klen = A[0].length, c = B[0].length
+  const out = Array.from({ length: r }, () => new Array<number>(c).fill(0))
+  for (let i = 0; i < r; i++) {
+    for (let k = 0; k < klen; k++) {
+      const aik = A[i][k]
+      for (let j = 0; j < c; j++) out[i][j] += aik * B[k][j]
+    }
+  }
+  return out
+}
+
+function invertMatrix(M: number[][]): number[][] {
+  const n = M.length
+  const A = M.map((row) => row.slice())
+  const I = Array.from({ length: n }, (_, i) => {
+    const r = new Array<number>(n).fill(0)
+    r[i] = 1
+    return r
+  })
+  // Gauss-Jordan
+  for (let i = 0; i < n; i++) {
+    // pivot
+    let pivot = A[i][i]
+    if (Math.abs(pivot) < 1e-12) {
+      // 找到下面非零行交换
+      let swap = i + 1
+      while (swap < n && Math.abs(A[swap][i]) < 1e-12) swap++
+      if (swap === n) throw new Error('Matrix not invertible')
+      const tmpA = A[i]; A[i] = A[swap]; A[swap] = tmpA
+      const tmpI = I[i]; I[i] = I[swap]; I[swap] = tmpI
+      pivot = A[i][i]
+    }
+    const invPivot = 1 / pivot
+    for (let j = 0; j < n; j++) { A[i][j] *= invPivot; I[i][j] *= invPivot }
+    for (let r = 0; r < n; r++) {
+      if (r === i) continue
+      const factor = A[r][i]
+      if (factor === 0) continue
+      for (let j = 0; j < n; j++) {
+        A[r][j] -= factor * A[i][j]
+        I[r][j] -= factor * I[i][j]
+      }
+    }
+  }
+  return I
+}
+
+function sgCoefficients(windowSize: number, polyOrder: number): number[] {
+  const m = Math.floor(windowSize / 2)
+  const rows = windowSize
+  const cols = polyOrder + 1
+  // 构造范德蒙德矩阵 A，x ∈ [-m, m]
+  const A = Array.from({ length: rows }, (_, r) => {
+    const x = r - m
+    const row = new Array<number>(cols)
+    let xp = 1
+    for (let c = 0; c < cols; c++) { row[c] = xp; xp *= x }
+    return row
+  })
+  const AT = transpose(A)
+  const ATA = matMul(AT, A)
+  const ATAi = invertMatrix(ATA)
+  const pinv = matMul(ATAi, AT) // (cols x rows)
+  const c = pinv[0] // 第一行对应在 x=0 处的估计系数
+  return c
+}
+
+function savitzkyGolay(data: number[], windowSize: number, polyOrder: 2 | 3): number[] {
+  if (data.length === 0) return []
+  const w = makeOddSafe(windowSize, data.length)
+  const coeff = sgCoefficients(w, polyOrder)
+  return convolveReflect(data, coeff)
+}
+
+// Hampel 过滤，先去异常值，再可串联平滑
+function median(arr: number[]): number {
+  if (arr.length === 0) return 0
+  const a = arr.slice().sort((x, y) => x - y)
+  const mid = Math.floor(a.length / 2)
+  return a.length % 2 === 0 ? (a[mid - 1] + a[mid]) / 2 : a[mid]
+}
+
+function hampelFilter(data: number[], windowSize: number, k: number): number[] {
+  if (data.length === 0) return []
+  const n = data.length
+  const w = makeOddSafe(windowSize, n)
+  const half = Math.floor(w / 2)
+  const out = data.slice()
+  for (let i = 0; i < n; i++) {
+    const win: number[] = []
+    for (let t = -half; t <= half; t++) win.push(data[reflectIndex(i + t, n)])
+    const med = median(win)
+    const absDev = win.map((v) => Math.abs(v - med))
+    const mad = median(absDev)
+    const s0 = (mad || 1e-12) * 1.4826
+    if (Math.abs(data[i] - med) > k * s0) out[i] = med
+  }
+  return out
+}
+
 function buildHistogram(values: number[], bins: number) {
   if (!values.length || bins <= 0) return { labels: [] as string[], counts: [] as number[] }
   let min = values[0]