备注功能
This commit is contained in:
parent
03b2ce017a
commit
ed6b3393d7
@ -19,7 +19,7 @@ export async function POST(req: NextRequest) {
|
||||
return Response.json({ error: first?.message ?? 'invalid body' }, { status: 400 })
|
||||
}
|
||||
const { code, fit, recStartMs, recEndMs } = parsed.data
|
||||
if (code.length > 4096) {
|
||||
if (code.length > 16384) {
|
||||
return Response.json({ error: 'payload too large' }, { status: 413 })
|
||||
}
|
||||
|
||||
|
||||
@ -2,10 +2,11 @@ import { NextRequest } from 'next/server'
|
||||
import { prisma } from '@/src/lib/prisma'
|
||||
import { isAuthorizedDelete } from '@/src/lib/utils'
|
||||
|
||||
export async function GET(_req: NextRequest, { params }: { params: { id: string } }) {
|
||||
export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
try {
|
||||
const rec = await prisma.recording.findUnique({
|
||||
where: { id: params.id },
|
||||
where: { id },
|
||||
select: {
|
||||
id: true,
|
||||
timestamp: true,
|
||||
@ -46,12 +47,13 @@ export async function GET(_req: NextRequest, { params }: { params: { id: string
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
|
||||
export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
try {
|
||||
if (!isAuthorizedDelete(req)) {
|
||||
return Response.json({ error: 'unauthorized' }, { status: 401 })
|
||||
}
|
||||
const rec = await prisma.recording.delete({ where: { id: params.id } })
|
||||
const rec = await prisma.recording.delete({ where: { id } })
|
||||
return Response.json({ success: true, id: rec.id })
|
||||
} catch (err: any) {
|
||||
if (err?.code === 'P2025') {
|
||||
@ -61,3 +63,29 @@ export async function DELETE(req: NextRequest, { params }: { params: { id: strin
|
||||
return Response.json({ error: 'internal error' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
try {
|
||||
const body = await req.json()
|
||||
const { note } = body
|
||||
|
||||
if (note !== undefined && typeof note !== 'string') {
|
||||
return Response.json({ error: 'invalid note' }, { status: 400 })
|
||||
}
|
||||
|
||||
const rec = await prisma.recording.update({
|
||||
where: { id },
|
||||
data: { note: note || null },
|
||||
select: { id: true, note: true },
|
||||
})
|
||||
|
||||
return Response.json({ success: true, id: rec.id, note: rec.note })
|
||||
} catch (err: any) {
|
||||
if (err?.code === 'P2025') {
|
||||
return Response.json({ error: 'not found' }, { status: 404 })
|
||||
}
|
||||
console.error(err)
|
||||
return Response.json({ error: 'internal error' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,6 +54,7 @@ export async function GET(req: NextRequest) {
|
||||
force_min: true,
|
||||
force_max: true,
|
||||
force_avg: true,
|
||||
note: true,
|
||||
},
|
||||
}),
|
||||
])
|
||||
@ -65,6 +66,7 @@ export async function GET(req: NextRequest) {
|
||||
duration: r.duration,
|
||||
hasFit: r.fit_a !== null && r.fit_a !== undefined,
|
||||
fit: r.fit_a !== null && r.fit_a !== undefined ? { a: r.fit_a!, b: r.fit_b! } : undefined,
|
||||
note: r.note ?? undefined,
|
||||
stats: {
|
||||
codeMin: r.code_min,
|
||||
codeMax: r.code_max,
|
||||
|
||||
77
app/page.tsx
77
app/page.tsx
@ -9,6 +9,7 @@ type RecordItem = {
|
||||
duration: number
|
||||
hasFit: boolean
|
||||
fit?: { a: number; b: number }
|
||||
note?: string
|
||||
stats: {
|
||||
codeMin: number
|
||||
codeMax: number
|
||||
@ -31,9 +32,49 @@ export default function Home() {
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
|
||||
const [startDate, setStartDate] = useState('')
|
||||
const [endDate, setEndDate] = useState('')
|
||||
const [editingNote, setEditingNote] = useState<string | null>(null)
|
||||
const [noteText, setNoteText] = useState('')
|
||||
|
||||
const totalPages = useMemo(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize])
|
||||
|
||||
async function handleDeleteRecord(id: string) {
|
||||
if (!confirm('确定要删除这条记录吗?')) return
|
||||
try {
|
||||
const res = await fetch(`/api/records/${id}`, { method: 'DELETE' })
|
||||
if (!res.ok) throw new Error('删除失败')
|
||||
setData((prev) => prev.filter((r) => r.id !== id))
|
||||
setTotal((prev) => prev - 1)
|
||||
} catch (err) {
|
||||
alert('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveNote(id: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/records/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ note: noteText }),
|
||||
})
|
||||
if (!res.ok) throw new Error('保存失败')
|
||||
setData((prev) => prev.map((r) => (r.id === id ? { ...r, note: noteText } : r)))
|
||||
setEditingNote(null)
|
||||
setNoteText('')
|
||||
} catch (err) {
|
||||
alert('保存备注失败')
|
||||
}
|
||||
}
|
||||
|
||||
function startEditNote(id: string, currentNote?: string) {
|
||||
setEditingNote(id)
|
||||
setNoteText(currentNote || '')
|
||||
}
|
||||
|
||||
function cancelEditNote() {
|
||||
setEditingNote(null)
|
||||
setNoteText('')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
async function run() {
|
||||
@ -78,17 +119,17 @@ export default function Home() {
|
||||
<label className="text-sm">结束</label>
|
||||
<input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900" />
|
||||
</div>
|
||||
<select value={hasFit} onChange={(e) => setHasFit(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
|
||||
<select value={hasFit} onChange={(e) => setHasFit(e.target.value as 'all' | 'fit' | 'raw')} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
|
||||
<option value="all">全部</option>
|
||||
<option value="fit">仅已拟合</option>
|
||||
<option value="raw">仅未拟合</option>
|
||||
</select>
|
||||
<select value={sortBy} onChange={(e) => setSortBy(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
|
||||
<select value={sortBy} onChange={(e) => setSortBy(e.target.value as 'timestamp' | 'duration' | 'maxValue')} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
|
||||
<option value="timestamp">按时间</option>
|
||||
<option value="duration">按时长</option>
|
||||
<option value="maxValue">按最大值</option>
|
||||
</select>
|
||||
<select value={sortOrder} onChange={(e) => setSortOrder(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
|
||||
<select value={sortOrder} onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc')} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
|
||||
<option value="desc">降序</option>
|
||||
<option value="asc">升序</option>
|
||||
</select>
|
||||
@ -107,7 +148,7 @@ export default function Home() {
|
||||
<div key={i} className="h-40 animate-pulse rounded-lg bg-zinc-200 dark:bg-zinc-800" />
|
||||
))}
|
||||
{!loading && data.map((r) => (
|
||||
<div key={r.id} className="flex h-48 flex-col justify-between rounded-lg border border-zinc-200 bg-white p-4 shadow-sm transition hover:shadow-md dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<div key={r.id} className="flex flex-col justify-between rounded-lg border border-zinc-200 bg-white p-4 shadow-sm transition hover:shadow-md dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-zinc-500">{new Date(r.timestamp).toLocaleString()}</div>
|
||||
@ -125,13 +166,39 @@ export default function Home() {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{editingNote === r.id ? (
|
||||
<div className="mt-2 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={noteText}
|
||||
onChange={(e) => setNoteText(e.target.value)}
|
||||
placeholder="添加备注..."
|
||||
className="flex-1 rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:border-zinc-700 dark:bg-zinc-900"
|
||||
autoFocus
|
||||
/>
|
||||
<button onClick={() => handleSaveNote(r.id)} className="rounded bg-green-600 px-2 py-1 text-xs text-white">保存</button>
|
||||
<button onClick={cancelEditNote} className="rounded bg-zinc-500 px-2 py-1 text-xs text-white">取消</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
) : (
|
||||
<div className="mt-2 min-h-[20px]">
|
||||
{r.note ? (
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 text-xs text-zinc-600 dark:text-zinc-400">{r.note}</div>
|
||||
<button onClick={() => startEditNote(r.id, r.note)} className="text-xs text-blue-600 hover:underline dark:text-blue-400">编辑</button>
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={() => startEditNote(r.id)} className="text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300">+ 添加备注</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 flex items-center justify-between">
|
||||
{r.hasFit && r.fit && (
|
||||
<div className="text-[11px] text-zinc-500">y = {r.fit.a.toFixed(4)}x + {r.fit.b.toFixed(3)}</div>
|
||||
)}
|
||||
<div className="ml-auto flex gap-2">
|
||||
<Link href={`/records/${r.id}`} className="rounded-md bg-zinc-900 px-3 py-1.5 text-sm text-white dark:bg-zinc-100 dark:text-black">查看</Link>
|
||||
<button onClick={() => handleDeleteRecord(r.id)} className="rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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]
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "Recording" ADD COLUMN "note" VARCHAR(500);
|
||||
@ -23,6 +23,7 @@ model Recording {
|
||||
force_min Float?
|
||||
force_max Float?
|
||||
force_avg Float?
|
||||
note String? @db.VarChar(500)
|
||||
created_at DateTime @default(now())
|
||||
|
||||
@@index([timestamp(sort: Desc)])
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user