274 lines
16 KiB
TypeScript
274 lines
16 KiB
TypeScript
'use client'
|
||
import { useState, useMemo } from 'react'
|
||
import Link from 'next/link'
|
||
import { Download, Plus, ChevronLeft, ChevronRight, Monitor, Cpu, Wifi, Power, Tag, Trash2 } from 'lucide-react'
|
||
import { useApi } from '@/lib/hooks'
|
||
|
||
interface Device {
|
||
id: number; sn: string; model: string; type: string; status: string; firmware: string; production_date: string; customer: string; batch: string
|
||
}
|
||
|
||
/**
|
||
* 根据日期计算 ISO 周数，返回 "YYYY-WXX" 格式
|
||
* ISO 8601：每周从周一开始，包含该年第一个周四的那周为第1周
|
||
*/
|
||
function getYearWeek(dateStr: string): string {
|
||
const date = new Date(dateStr)
|
||
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
|
||
// 调整到最近的周四（ISO 周定义）
|
||
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7))
|
||
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
|
||
const weekNo = Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
|
||
return `${d.getUTCFullYear()}-W${String(weekNo).padStart(2, '0')}`
|
||
}
|
||
|
||
/**
|
||
* 根据年周字符串计算该周的起止日期范围（周一~周日），用于侧边栏展示
|
||
*/
|
||
function getWeekRange(yearWeek: string): string {
|
||
const [yearStr, weekStr] = yearWeek.split('-W')
|
||
const year = parseInt(yearStr, 10)
|
||
const week = parseInt(weekStr, 10)
|
||
// ISO 周：找到该年1月4日所在周的周一，再偏移到目标周
|
||
const jan4 = new Date(Date.UTC(year, 0, 4))
|
||
const dayOfWeek = jan4.getUTCDay() || 7
|
||
const monday = new Date(jan4.getTime())
|
||
monday.setUTCDate(jan4.getUTCDate() - dayOfWeek + 1 + (week - 1) * 7)
|
||
const sunday = new Date(monday.getTime())
|
||
sunday.setUTCDate(monday.getUTCDate() + 6)
|
||
const fmt = (d: Date) => `${String(d.getUTCMonth() + 1).padStart(2, '0')}.${String(d.getUTCDate()).padStart(2, '0')}`
|
||
return `${fmt(monday)}-${fmt(sunday)}`
|
||
}
|
||
|
||
const modelOptions = ['全部', 'GD-30 Supreme', 'GD-20', 'GD-10 Supreme', 'GM-10', 'GT-10', 'GP-10']
|
||
const statusOptions = ['全部', '已激活', '已出厂', '装配中']
|
||
|
||
function getStatusStyle(status: string) {
|
||
switch (status) {
|
||
case '已激活': return { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' }
|
||
case '已出厂': return { backgroundColor: '#FFF7E6', color: '#FA8C16', border: '1px solid #FFD591' }
|
||
case '装配中': return { backgroundColor: '#eef5f0', color: '#4a7c59', border: '1px solid #a3c4ad' }
|
||
default: return { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }
|
||
}
|
||
}
|
||
|
||
function getStatusIcon(status: string) {
|
||
switch (status) {
|
||
case '已激活': return <Wifi size={14} style={{ color: '#52C41A' }} />
|
||
case '已出厂': return <Monitor size={14} style={{ color: '#FA8C16' }} />
|
||
case '装配中': return <Cpu size={14} style={{ color: '#4a7c59' }} />
|
||
default: return null
|
||
}
|
||
}
|
||
|
||
export default function DevicesPage() {
|
||
const { data: devicesData, loading, refetch } = useApi<Device[]>('/api/devices', [])
|
||
const [filterModel, setFilterModel] = useState('全部')
|
||
const [filterStatus, setFilterStatus] = useState('全部')
|
||
const [filterDate, setFilterDate] = useState('')
|
||
const [searchText, setSearchText] = useState('')
|
||
const [selectedBatch, setSelectedBatch] = useState('全部')
|
||
const [currentPage, setCurrentPage] = useState(1)
|
||
const pageSize = 8
|
||
|
||
// 从数据中提取所有生产批次，按名称倒序排列，统计每个批次的设备数量，按年分组
|
||
const batchGroups = useMemo(() => {
|
||
const batchMap = new Map<string, number>()
|
||
devicesData.forEach(d => {
|
||
batchMap.set(d.batch, (batchMap.get(d.batch) || 0) + 1)
|
||
})
|
||
const sorted = Array.from(batchMap.entries())
|
||
.sort((a, b) => b[0].localeCompare(a[0]))
|
||
.map(([batch, count]) => {
|
||
const match = batch.match(/BATCH-(\d{4})/)
|
||
return { batch, count, year: match ? match[1] : '未知' }
|
||
})
|
||
|
||
// 按年分组
|
||
const groups = new Map<string, { batch: string; count: number }[]>()
|
||
sorted.forEach(item => {
|
||
const list = groups.get(item.year) || []
|
||
list.push({ batch: item.batch, count: item.count })
|
||
groups.set(item.year, list)
|
||
})
|
||
return groups
|
||
}, [devicesData])
|
||
|
||
const filtered = devicesData.filter(d => {
|
||
if (selectedBatch !== '全部' && d.batch !== selectedBatch) return false
|
||
if (filterModel !== '全部' && d.model !== filterModel) return false
|
||
if (filterStatus !== '全部' && d.status !== filterStatus) return false
|
||
if (filterDate && !d.production_date.startsWith(filterDate)) return false
|
||
if (searchText && !d.sn.toLowerCase().includes(searchText.toLowerCase())) return false
|
||
return true
|
||
})
|
||
const totalPages = Math.ceil(filtered.length / pageSize)
|
||
const paged = filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize)
|
||
|
||
const handleBatchSelect = (batch: string) => {
|
||
setSelectedBatch(batch)
|
||
setCurrentPage(1)
|
||
}
|
||
|
||
if (loading) return <div style={{ padding: 24 }}>加载中...</div>
|
||
|
||
return (
|
||
<div style={{ padding: 24 }}>
|
||
{/* Header */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||
<div>
|
||
<h2 style={{ fontSize: 20, fontWeight: 600, margin: 0 }}>设备列表</h2>
|
||
<p style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', margin: '4px 0 0' }}>管理所有设备信息</p>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 12 }}>
|
||
<button style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>
|
||
<Download size={16} />导出
|
||
</button>
|
||
<Link href="/registration" style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', border: 'none', borderRadius: 6, backgroundColor: '#4a7c59', color: '#fff', fontSize: 14, textDecoration: 'none' }}>
|
||
<Plus size={16} />登记设备
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filter */}
|
||
<div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 20, marginBottom: 24, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
|
||
<div style={{ flex: 1 }}>
|
||
<label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>设备型号</label>
|
||
<select value={filterModel} onChange={e => { setFilterModel(e.target.value); setCurrentPage(1) }} style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
|
||
{modelOptions.map(m => <option key={m} value={m}>{m}</option>)}
|
||
</select>
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>设备状态</label>
|
||
<select value={filterStatus} onChange={e => { setFilterStatus(e.target.value); setCurrentPage(1) }} style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
|
||
{statusOptions.map(s => <option key={s} value={s}>{s}</option>)}
|
||
</select>
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>生产日期</label>
|
||
<input type="date" value={filterDate} onChange={e => { setFilterDate(e.target.value); setCurrentPage(1) }} style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<label style={{ display: 'block', fontSize: 13, color: 'rgba(0,0,0,0.65)', marginBottom: 6 }}>SN搜索</label>
|
||
<input type="text" value={searchText} onChange={e => { setSearchText(e.target.value); setCurrentPage(1) }} placeholder="输入设备SN号" style={{ width: '100%', padding: '6px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main content: Batch sidebar + Device cards */}
|
||
<div style={{ display: 'flex', gap: 20 }}>
|
||
{/* Batch sidebar */}
|
||
<div style={{ width: 200, flexShrink: 0, backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', padding: 16, alignSelf: 'flex-start' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 16 }}>
|
||
<Tag size={15} style={{ color: '#4a7c59' }} />
|
||
<span style={{ fontSize: 14, fontWeight: 600, color: 'rgba(0,0,0,0.85)' }}>生产批次</span>
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||
<button
|
||
onClick={() => handleBatchSelect('全部')}
|
||
style={{
|
||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||
padding: '8px 12px', borderRadius: 6, border: 'none', cursor: 'pointer', fontSize: 13, textAlign: 'left',
|
||
backgroundColor: selectedBatch === '全部' ? '#eef5f0' : 'transparent',
|
||
color: selectedBatch === '全部' ? '#4a7c59' : 'rgba(0,0,0,0.65)',
|
||
fontWeight: selectedBatch === '全部' ? 600 : 400,
|
||
}}
|
||
>
|
||
<span>全部批次</span>
|
||
<span style={{
|
||
fontSize: 12, padding: '1px 8px', borderRadius: 10,
|
||
backgroundColor: selectedBatch === '全部' ? '#4a7c59' : '#f0f0f0',
|
||
color: selectedBatch === '全部' ? '#fff' : 'rgba(0,0,0,0.45)',
|
||
}}>{devicesData.length}</span>
|
||
</button>
|
||
{Array.from(batchGroups.entries()).map(([year, batches]) => (
|
||
<div key={year}>
|
||
<div style={{ padding: '8px 12px 4px', fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.35)', letterSpacing: '0.5px' }}>{year} 年</div>
|
||
{batches.map(({ batch, count }) => (
|
||
<button
|
||
key={batch}
|
||
onClick={() => handleBatchSelect(batch)}
|
||
style={{
|
||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||
padding: '7px 12px', borderRadius: 6, border: 'none', cursor: 'pointer', fontSize: 13, textAlign: 'left', width: '100%',
|
||
backgroundColor: selectedBatch === batch ? '#eef5f0' : 'transparent',
|
||
color: selectedBatch === batch ? '#4a7c59' : 'rgba(0,0,0,0.65)',
|
||
fontWeight: selectedBatch === batch ? 600 : 400,
|
||
}}
|
||
>
|
||
<div>
|
||
<div>{batch}</div>
|
||
</div>
|
||
<span style={{
|
||
fontSize: 12, padding: '1px 8px', borderRadius: 10, flexShrink: 0,
|
||
backgroundColor: selectedBatch === batch ? '#4a7c59' : '#f0f0f0',
|
||
color: selectedBatch === batch ? '#fff' : 'rgba(0,0,0,0.45)',
|
||
}}>{count}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right content area */}
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
{/* Device Cards */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24 }}>
|
||
{paged.map(device => (
|
||
<div key={device.id} style={{ backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' }}>
|
||
<div style={{ padding: 20 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
|
||
<span style={{ fontSize: 15, fontWeight: 600, color: 'rgba(0,0,0,0.85)' }}>{device.sn}</span>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
|
||
{getStatusIcon(device.status)}
|
||
<span style={{ ...getStatusStyle(device.status), padding: '2px 8px', borderRadius: 4, fontSize: 12 }}>{device.status}</span>
|
||
<span style={{ fontSize: 11, padding: '2px 8px', borderRadius: 4, backgroundColor: '#f5f5f5', color: 'rgba(0,0,0,0.45)', border: '1px solid #e8e8e8' }}>{device.batch}</span>
|
||
</div>
|
||
<div style={{ fontSize: 13, color: 'rgba(0,0,0,0.65)', lineHeight: 2 }}>
|
||
<div>型号：{device.model} {device.type}</div>
|
||
<div>主机版本：{device.firmware}</div>
|
||
<div>生产批次：{device.batch}</div>
|
||
<div>生产日期：{device.production_date}</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', borderTop: '1px solid #F0F0F0' }}>
|
||
<Link href={`/devices/${device.sn}`} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, padding: '10px 0', fontSize: 13, color: '#4a7c59', textDecoration: 'none', cursor: 'pointer' }}>
|
||
详情
|
||
</Link>
|
||
<div style={{ width: 1, backgroundColor: '#F0F0F0' }} />
|
||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '6px 8px' }}>
|
||
<select value={device.status} onChange={async (e) => { await fetch('/api/devices', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: device.id, status: e.target.value }) }); refetch() }} style={{ border: 'none', background: 'none', fontSize: 13, color: '#4a7c59', cursor: 'pointer', outline: 'none' }}>
|
||
{['装配中', '已激活', '已出厂'].map(s => <option key={s} value={s}>{s}</option>)}
|
||
</select>
|
||
</div>
|
||
<div style={{ width: 1, backgroundColor: '#F0F0F0' }} />
|
||
<button onClick={async () => { await fetch('/api/devices', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: device.id }) }); refetch() }} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, padding: '10px 0', fontSize: 13, color: '#FF4D4F', border: 'none', background: 'none', cursor: 'pointer' }}>
|
||
<Trash2 size={13} />删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<span style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>
|
||
显示 {filtered.length > 0 ? (currentPage - 1) * pageSize + 1 : 0}-{Math.min(currentPage * pageSize, filtered.length)} / 共 {filtered.length} 台
|
||
</span>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||
<button onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} style={{ padding: '4px 8px', border: '1px solid #D9D9D9', borderRadius: 4, backgroundColor: '#fff', cursor: currentPage === 1 ? 'not-allowed' : 'pointer', opacity: currentPage === 1 ? 0.4 : 1 }}><ChevronLeft size={16} /></button>
|
||
{Array.from({ length: totalPages }, (_, i) => (
|
||
<button key={i} onClick={() => setCurrentPage(i + 1)} style={{ width: 32, height: 32, borderRadius: 4, fontSize: 14, border: currentPage === i + 1 ? '1px solid #4a7c59' : '1px solid #D9D9D9', color: currentPage === i + 1 ? '#4a7c59' : 'rgba(0,0,0,0.65)', backgroundColor: currentPage === i + 1 ? '#eef5f0' : '#fff', cursor: 'pointer' }}>{i + 1}</button>
|
||
))}
|
||
<button onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages || totalPages === 0} style={{ padding: '4px 8px', border: '1px solid #D9D9D9', borderRadius: 4, backgroundColor: '#fff', cursor: currentPage === totalPages || totalPages === 0 ? 'not-allowed' : 'pointer', opacity: currentPage === totalPages || totalPages === 0 ? 0.4 : 1 }}><ChevronRight size={16} /></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|