Add customs tablet frontend prototype
This commit is contained in:
+195
-3
@@ -1,16 +1,208 @@
|
||||
# ==============================
|
||||
# Python
|
||||
# ==============================
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
*.so
|
||||
.Python
|
||||
build/
|
||||
develop-eggs/
|
||||
dist/
|
||||
downloads/
|
||||
eggs/
|
||||
.eggs/
|
||||
lib/
|
||||
lib64/
|
||||
parts/
|
||||
sdist/
|
||||
var/
|
||||
wheels/
|
||||
pip-wheel-metadata/
|
||||
share/python-wheels/
|
||||
*.egg-info/
|
||||
.installed.cfg
|
||||
*.egg
|
||||
MANIFEST
|
||||
|
||||
# Virtual environments
|
||||
.venv/
|
||||
venv/
|
||||
ENV/
|
||||
env/
|
||||
.virtualenv/
|
||||
.virtenv/
|
||||
|
||||
# uv package manager
|
||||
uv-cache/
|
||||
|
||||
# Python testing
|
||||
.pytest_cache/
|
||||
.coverage
|
||||
.coverage.*
|
||||
htmlcov/
|
||||
*.cover
|
||||
.hypothesis/
|
||||
.pytest_cache/
|
||||
|
||||
# ==============================
|
||||
# Node.js / npm
|
||||
# ==============================
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# ==============================
|
||||
# Next.js (Frontend)
|
||||
# ==============================
|
||||
.next/
|
||||
out/
|
||||
build/
|
||||
dist/
|
||||
.vercel/
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# ==============================
|
||||
# IDEs & Editors
|
||||
# ==============================
|
||||
# VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
# JetBrains IDEs (IntelliJ, PyCharm, WebStorm, etc.)
|
||||
.idea/
|
||||
*.iml
|
||||
*.ipr
|
||||
*.iws
|
||||
.idea_modules/
|
||||
|
||||
# Vim/Neovim
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.netrwhist
|
||||
|
||||
# Emacs
|
||||
*~
|
||||
\#*\#
|
||||
.\#*
|
||||
*.elc
|
||||
|
||||
# Sublime Text
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
|
||||
# ==============================
|
||||
# macOS
|
||||
# ==============================
|
||||
.DS_Store
|
||||
._*
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
|
||||
# Local runtime logs and temporary files
|
||||
# ==============================
|
||||
# Windows
|
||||
# ==============================
|
||||
Thumbs.db
|
||||
Thumbs.db:encryptable
|
||||
ehthumbs.db
|
||||
ehthumbs_vista.db
|
||||
*.stackdump
|
||||
[Dd]esktop.ini
|
||||
$RECYCLE.BIN/
|
||||
*.lnk
|
||||
*.cab
|
||||
*.msi
|
||||
*.msix
|
||||
*.msm
|
||||
*.msp
|
||||
*.lnk
|
||||
|
||||
# ==============================
|
||||
# Linux
|
||||
# ==============================
|
||||
*~
|
||||
.fuse_hidden*
|
||||
.directory
|
||||
.Trash-*
|
||||
.nfs*
|
||||
|
||||
# ==============================
|
||||
# Local runtime & temporary files
|
||||
# ==============================
|
||||
*.log
|
||||
*.log.*
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
timeout
|
||||
|
||||
# Local backup copies
|
||||
*.tmp
|
||||
*.temp
|
||||
*.cache
|
||||
*.bak
|
||||
*.bak.*
|
||||
*.bak2
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# ==============================
|
||||
# Application specific
|
||||
# ==============================
|
||||
# Database
|
||||
*.db
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
*.db-shm
|
||||
*.db-wal
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.local.example
|
||||
*.local
|
||||
|
||||
# ==============================
|
||||
# ROS2 / Robotics
|
||||
# ==============================
|
||||
install/
|
||||
log/
|
||||
build/
|
||||
*/install/
|
||||
*/log/
|
||||
*/build/
|
||||
*.bag
|
||||
*.bag.active
|
||||
|
||||
# ==============================
|
||||
# Misc
|
||||
# ==============================
|
||||
# Sensitive data (adjust patterns as needed)
|
||||
*.pem
|
||||
*.key
|
||||
*.crt
|
||||
*.secret
|
||||
secrets/
|
||||
|
||||
# Large binary files (adjust as needed)
|
||||
*.tar
|
||||
*.tar.gz
|
||||
*.zip
|
||||
*.rar
|
||||
*.7z
|
||||
|
||||
# Generated documentation
|
||||
docs/_build/
|
||||
site/
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": ["next/core-web-vitals", "next/typescript"]
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
@@ -0,0 +1,4 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {};
|
||||
|
||||
export default nextConfig;
|
||||
+6458
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "customs-tablet-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.2.5",
|
||||
"@ant-design/nextjs-registry": "^1.3.0",
|
||||
"antd": "^6.4.4",
|
||||
"dayjs": "^1.11.21",
|
||||
"html5-qrcode": "^2.3.8",
|
||||
"next": "14.2.35",
|
||||
"photoswipe": "^5.4.4",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-photoswipe-gallery": "^4.1.2",
|
||||
"zustand": "^5.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.35",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Alert, Card, Table, Form, Button, DatePicker, Select, Space, Row, Col, Input } from 'antd';
|
||||
import { SearchOutlined, PlayCircleOutlined } from '@ant-design/icons';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Breadcrumb } from '../../components/Breadcrumb';
|
||||
import { MockApi } from '../../services/mockApi';
|
||||
import { CustomsDeclaration } from '../../types';
|
||||
import { StatusBadge } from '../../components/StatusBadge';
|
||||
import { useAppStore } from '../../store/useAppStore';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
export default function CustomsPage() {
|
||||
const router = useRouter();
|
||||
const [data, setData] = useState<CustomsDeclaration[]>([]);
|
||||
const [filteredData, setFilteredData] = useState<CustomsDeclaration[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const { setSelectedCustoms } = useAppStore();
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadCustomsList = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setErrorMessage('');
|
||||
const res = await MockApi.getCustomsList();
|
||||
if (!isMounted) return;
|
||||
setData(res);
|
||||
setFilteredData(res);
|
||||
} catch {
|
||||
if (!isMounted) return;
|
||||
setErrorMessage('报关单列表加载失败，请稍后重试');
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadCustomsList();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleStartInspection = (record: CustomsDeclaration) => {
|
||||
setSelectedCustoms(record);
|
||||
router.push(`/inspection?customsId=${encodeURIComponent(record.customsId)}`);
|
||||
};
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleSearch = () => {
|
||||
const values = form.getFieldsValue();
|
||||
const keyword = values.searchText?.trim().toLowerCase() || '';
|
||||
const status = values.statusFilter || 'all';
|
||||
const dateRange = values.dateRange;
|
||||
|
||||
const nextData = data.filter(item => {
|
||||
const matchesStatus = status === 'all' || item.status === status;
|
||||
const matchesKeyword = !keyword || item.customsId.toLowerCase().includes(keyword);
|
||||
const createdAt = new Date(item.createdAt);
|
||||
const matchesDateRange = !dateRange?.[0] || !dateRange?.[1]
|
||||
|| (createdAt >= dateRange[0].startOf('day').toDate() && createdAt <= dateRange[1].endOf('day').toDate());
|
||||
|
||||
return matchesStatus && matchesKeyword && matchesDateRange;
|
||||
});
|
||||
|
||||
setFilteredData(nextData);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
setFilteredData(data);
|
||||
};
|
||||
|
||||
const expandedRowRender = (record: CustomsDeclaration) => {
|
||||
const columns = [
|
||||
{ title: '料号', dataIndex: 'inventoryCode', key: 'inventoryCode' },
|
||||
{ title: '品名', dataIndex: 'inventoryName', key: 'inventoryName' },
|
||||
{ title: '规格', dataIndex: 'spec', key: 'spec' },
|
||||
{ title: '总数', dataIndex: 'quantify', key: 'quantify' },
|
||||
{ title: '已查验', dataIndex: 'inspected', key: 'inspected' },
|
||||
];
|
||||
return <Table columns={columns} dataSource={record.items} pagination={false} size="small" rowKey="inventoryCode" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumb />
|
||||
|
||||
{errorMessage && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={errorMessage}
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Card title="筛选条件" style={{ marginBottom: 24 }}>
|
||||
<Form form={form} layout="inline">
|
||||
<Row gutter={24} align="middle">
|
||||
<Col>
|
||||
<Form.Item label="状态" name="statusFilter" initialValue="all">
|
||||
<Select style={{ width: 120 }}>
|
||||
<Select.Option value="all">全部</Select.Option>
|
||||
<Select.Option value="pending">待查验</Select.Option>
|
||||
<Select.Option value="inspecting">查验中</Select.Option>
|
||||
<Select.Option value="released">已放行</Select.Option>
|
||||
<Select.Option value="abnormal">异常</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<Form.Item label="日期范围" name="dateRange">
|
||||
<RangePicker />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<Form.Item name="searchText">
|
||||
<Input
|
||||
placeholder="搜索报关单号..."
|
||||
prefix={<SearchOutlined />}
|
||||
onPressEnter={handleSearch}
|
||||
style={{ width: 250 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch}>查询</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Card title="报关单列表" styles={{ body: { padding: 0 } }}>
|
||||
<Table
|
||||
dataSource={filteredData}
|
||||
loading={loading}
|
||||
rowKey="id"
|
||||
expandable={{ expandedRowRender }}
|
||||
>
|
||||
<Table.Column title="报关单号" dataIndex="customsId" key="customsId" render={(text: string) => <b>{text}</b>} />
|
||||
<Table.Column title="状态" dataIndex="status" key="status" render={(status: string) => <StatusBadge status={status as 'pending' | 'inspecting' | 'released' | 'abnormal'} />} />
|
||||
<Table.Column title="机器总数" dataIndex="machineCount" key="machineCount" render={(count: number) => `${count} 台`} />
|
||||
<Table.Column title="创建时间" dataIndex="createdAt" key="createdAt" />
|
||||
<Table.Column
|
||||
title="操作"
|
||||
key="action"
|
||||
render={(_, record: CustomsDeclaration) => (
|
||||
<Space size="middle">
|
||||
{record.status === 'pending' || record.status === 'inspecting' ? (
|
||||
<Button type="primary" icon={<PlayCircleOutlined />} onClick={() => handleStartInspection(record)}>
|
||||
开始查验
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="link">查看详情</Button>
|
||||
)}
|
||||
</Space>
|
||||
)}
|
||||
/>
|
||||
</Table>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,52 @@
|
||||
/* Ant Design 自带主题 Token，移除不必要的自定义变量 */
|
||||
:root {
|
||||
--color-border-light: #f0f0f0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
background: #f0f2f5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.appBody {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.antAppRoot {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.appShell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.appMain {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
@@ -0,0 +1,412 @@
|
||||
'use client';
|
||||
|
||||
import React, { Suspense, useEffect, useState, useRef } from 'react';
|
||||
import { Alert, Row, Col, Card, Button, Progress, List, Typography, Space, Modal, Input, Empty, Badge, Spin, Flex, Select, Segmented, theme, Divider, Timeline } from 'antd';
|
||||
import {
|
||||
PlayCircleOutlined,
|
||||
PauseCircleOutlined,
|
||||
StopOutlined,
|
||||
ReloadOutlined,
|
||||
CaretRightOutlined,
|
||||
PauseCircleFilled,
|
||||
VideoCameraOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Breadcrumb } from '../../components/Breadcrumb';
|
||||
import { MockApi } from '../../services/mockApi';
|
||||
import { CustomsDeclaration, InspectionItem } from '../../types';
|
||||
import { useAppStore } from '../../store/useAppStore';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
type InspectionStatus = 'idle' | 'running' | 'paused' | 'completed';
|
||||
|
||||
interface ProgressItem extends InspectionItem {
|
||||
currentInspected: number;
|
||||
}
|
||||
|
||||
export default function InspectionPage() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<Flex vertical align="center" justify="center" style={{ padding: 48, height: '100vh' }}>
|
||||
<Spin tip="正在加载查验任务..." />
|
||||
</Flex>
|
||||
}>
|
||||
<InspectionContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function InspectionContent() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const customsId = searchParams.get('customsId');
|
||||
const { selectedCustoms, setSelectedCustoms } = useAppStore();
|
||||
const [currentCustoms, setCurrentCustoms] = useState<CustomsDeclaration | null>(null);
|
||||
const [loadingCustoms, setLoadingCustoms] = useState(true);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [status, setStatus] = useState<InspectionStatus>('idle');
|
||||
const [logs, setLogs] = useState<{time: string, msg: string, type: 'info'|'warning'|'success'}[]>([]);
|
||||
const [progressData, setProgressData] = useState<ProgressItem[]>([]);
|
||||
const [isPauseModalVisible, setIsPauseModalVisible] = useState(false);
|
||||
const [pauseReason, setPauseReason] = useState('');
|
||||
const [customsList, setCustomsList] = useState<CustomsDeclaration[]>([]);
|
||||
const [loadingList, setLoadingList] = useState(false);
|
||||
const [currentView, setCurrentView] = useState<string>('摄像头1');
|
||||
|
||||
const { token } = theme.useToken();
|
||||
const logsEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLoadingList(true);
|
||||
MockApi.getCustomsList().then(list => {
|
||||
setCustomsList(list);
|
||||
setLoadingList(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadInspectionCustoms = async () => {
|
||||
setLoadingCustoms(true);
|
||||
setErrorMessage('');
|
||||
|
||||
try {
|
||||
if (customsId) {
|
||||
const cachedCustoms = selectedCustoms?.customsId === customsId ? selectedCustoms : null;
|
||||
const customs = cachedCustoms ?? await MockApi.getCustomsById(customsId);
|
||||
|
||||
if (!isMounted) return;
|
||||
|
||||
if (!customs) {
|
||||
setCurrentCustoms(null);
|
||||
setErrorMessage(`未找到报关单 ${customsId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentCustoms(customs);
|
||||
setSelectedCustoms(customs);
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentCustoms(selectedCustoms);
|
||||
} catch {
|
||||
if (!isMounted) return;
|
||||
setCurrentCustoms(null);
|
||||
setErrorMessage('查验任务加载失败，请稍后重试');
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setLoadingCustoms(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadInspectionCustoms();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [customsId, selectedCustoms, setSelectedCustoms]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentCustoms) {
|
||||
setProgressData([]);
|
||||
setStatus('idle');
|
||||
return;
|
||||
}
|
||||
|
||||
setProgressData(currentCustoms.items.map(item => ({
|
||||
...item,
|
||||
currentInspected: item.inspected
|
||||
})));
|
||||
setStatus(currentCustoms.status === 'inspecting' ? 'running' : 'idle');
|
||||
setLogs([]);
|
||||
}, [currentCustoms]);
|
||||
|
||||
// 模拟查验过程
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout;
|
||||
if (status === 'running') {
|
||||
timer = setInterval(() => {
|
||||
setProgressData(prev => {
|
||||
let allDone = true;
|
||||
const next = prev.map(item => {
|
||||
if (item.currentInspected < item.quantify) {
|
||||
allDone = false;
|
||||
// 随机增加进度
|
||||
if (Math.random() > 0.5) {
|
||||
const newInspected = Math.min(item.currentInspected + 1, item.quantify);
|
||||
if (newInspected > item.currentInspected) {
|
||||
addLog(`料号 ${item.inventoryCode} (${item.inventoryName}) 核销 +1`, 'info');
|
||||
}
|
||||
return { ...item, currentInspected: newInspected };
|
||||
}
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
if (allDone) {
|
||||
setStatus('completed');
|
||||
addLog('全部机器核销完成', 'success');
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, 3000); // 每 3 秒更新一次模拟数据
|
||||
}
|
||||
return () => clearInterval(timer);
|
||||
}, [status]);
|
||||
|
||||
// 自动滚动到最新日志
|
||||
useEffect(() => {
|
||||
if (logsEndRef.current) {
|
||||
logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}, [logs]);
|
||||
|
||||
const addLog = (msg: string, type: 'info'|'warning'|'success' = 'info') => {
|
||||
setLogs(prev => [...prev, { time: new Date().toLocaleTimeString(), msg, type }]);
|
||||
};
|
||||
|
||||
const handleStart = () => {
|
||||
setStatus('running');
|
||||
addLog('开始自动化查验作业', 'info');
|
||||
};
|
||||
|
||||
const handlePause = () => {
|
||||
setIsPauseModalVisible(true);
|
||||
};
|
||||
|
||||
const confirmPause = () => {
|
||||
setStatus('paused');
|
||||
addLog(`查验已暂停。原因：${pauseReason || '未填写'}`, 'warning');
|
||||
setIsPauseModalVisible(false);
|
||||
setPauseReason('');
|
||||
};
|
||||
|
||||
const handleEnd = () => {
|
||||
Modal.confirm({
|
||||
title: '确认结束查验？',
|
||||
content: '结束查验后无法继续当前任务。',
|
||||
onOk: () => {
|
||||
setStatus('completed');
|
||||
addLog('用户手动结束查验', 'success');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const calculateTotalProgress = () => {
|
||||
if (!progressData.length) return 0;
|
||||
const total = progressData.reduce((acc, curr) => acc + curr.quantify, 0);
|
||||
const inspected = progressData.reduce((acc, curr) => acc + curr.currentInspected, 0);
|
||||
return Math.round((inspected / total) * 100);
|
||||
};
|
||||
|
||||
if (loadingCustoms) {
|
||||
return (
|
||||
<Flex vertical align="center" justify="center" style={{ padding: 48, height: '100vh' }}>
|
||||
<Spin tip="正在加载查验任务..." />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 64px)' }}>
|
||||
<Breadcrumb />
|
||||
|
||||
<Row gutter={24} style={{ flex: 1, minHeight: 0, margin: '0 24px 24px 24px' }}>
|
||||
{/* 左侧：AGV 及监控画面 */}
|
||||
<Col span={14}>
|
||||
<Card
|
||||
title={
|
||||
<Flex justify="space-between" align="center">
|
||||
<Space>
|
||||
<VideoCameraOutlined style={{ color: token.colorPrimary }} />
|
||||
<span>AGV 实时画面</span>
|
||||
</Space>
|
||||
<Space>
|
||||
<Badge status="processing" text="设备在线" />
|
||||
</Space>
|
||||
</Flex>
|
||||
}
|
||||
styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column', flex: 1 } }}
|
||||
style={{ height: '100%', display: 'flex', flexDirection: 'column', borderRadius: token.borderRadiusLG, overflow: 'hidden' }}
|
||||
bordered={false}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: '#000000'
|
||||
}}
|
||||
>
|
||||
{status === 'running' ? (
|
||||
<Flex vertical align="center" gap={16} style={{ color: '#ffffff' }}>
|
||||
<CaretRightOutlined style={{ fontSize: 48, color: token.colorPrimary, opacity: 0.8 }} />
|
||||
<Text style={{ color: '#fff' }}>正在接收实时流...</Text>
|
||||
<div style={{ padding: '8px 16px', border: `1px dashed ${token.colorPrimary}`, borderRadius: token.borderRadius }}>
|
||||
<span style={{ color: token.colorPrimary }}>AI 识别分析中</span>
|
||||
</div>
|
||||
</Flex>
|
||||
) : (
|
||||
<Flex vertical align="center" gap={16} style={{ color: token.colorTextDescription }}>
|
||||
<PauseCircleFilled style={{ fontSize: 48 }} />
|
||||
<Text type="secondary">画面已暂停或未启动</Text>
|
||||
</Flex>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '16px 24px', borderTop: `1px solid ${token.colorBorderSecondary}`, background: token.colorFillAlter }}>
|
||||
<Flex align="center" gap="middle">
|
||||
<Text strong>视角切换:</Text>
|
||||
<Segmented
|
||||
options={['摄像头1', '摄像头2', '摄像头3', '摄像头4', '摄像头5']}
|
||||
value={currentView}
|
||||
onChange={setCurrentView}
|
||||
/>
|
||||
</Flex>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 右侧：查验控制面板 */}
|
||||
<Col span={10}>
|
||||
<Card
|
||||
title={
|
||||
<Flex justify="space-between" align="center">
|
||||
<span>查验任务</span>
|
||||
<Select
|
||||
showSearch
|
||||
placeholder="搜索并选择报关单..."
|
||||
style={{ width: 240 }}
|
||||
loading={loadingList}
|
||||
optionFilterProp="label"
|
||||
filterOption={(input, option) =>
|
||||
(option?.label as string ?? '').toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
options={customsList.map(item => ({
|
||||
value: item.customsId,
|
||||
label: `${item.customsId} - ${item.status === 'pending' ? '待查验' : item.status === 'inspecting' ? '查验中' : '已放行'}`
|
||||
}))}
|
||||
value={currentCustoms?.customsId || undefined}
|
||||
onChange={(value) => {
|
||||
router.push(`/inspection?customsId=${value}`);
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
}
|
||||
styles={{ body: { overflow: 'hidden', padding: '24px', display: 'flex', flexDirection: 'column', flex: 1 } }}
|
||||
style={{ height: '100%', display: 'flex', flexDirection: 'column', borderRadius: token.borderRadiusLG }}
|
||||
bordered={false}
|
||||
>
|
||||
{!currentCustoms ? (
|
||||
<Flex vertical align="center" justify="center" style={{ flex: 1 }}>
|
||||
{errorMessage && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={errorMessage}
|
||||
showIcon
|
||||
style={{ marginBottom: 24, width: '100%' }}
|
||||
/>
|
||||
)}
|
||||
<Empty description="请在右上角选择要查验的报关单" />
|
||||
</Flex>
|
||||
) : (
|
||||
<>
|
||||
<Flex justify="center" gap="middle" style={{ marginBottom: 32 }}>
|
||||
{status === 'idle' || status === 'paused' ? (
|
||||
<Button type="primary" size="large" icon={<PlayCircleOutlined />} onClick={handleStart} style={{ width: 140 }}>
|
||||
{status === 'idle' ? '开始查验' : '继续查验'}
|
||||
</Button>
|
||||
) : status === 'running' ? (
|
||||
<Button type="primary" danger size="large" icon={<PauseCircleOutlined />} onClick={handlePause} style={{ width: 140 }}>
|
||||
暂停查验
|
||||
</Button>
|
||||
) : null}
|
||||
<Button size="large" icon={<ReloadOutlined />} disabled={status === 'completed'}>重置</Button>
|
||||
<Button danger size="large" icon={<StopOutlined />} onClick={handleEnd} disabled={status === 'completed' || status === 'idle'}>结束</Button>
|
||||
</Flex>
|
||||
|
||||
<Divider titlePlacement="start" plain style={{ margin: '0 0 16px 0' }}><Text strong>当前核销进度</Text></Divider>
|
||||
<div style={{ marginBottom: 16, padding: '0 8px' }}>
|
||||
<Progress percent={calculateTotalProgress()} status={status === 'completed' ? 'success' : 'active'} strokeWidth={10} />
|
||||
</div>
|
||||
|
||||
<div style={{ flex: '0 1 35%', marginBottom: 24, overflowY: 'auto', paddingRight: 8 }}>
|
||||
<List
|
||||
size="small"
|
||||
dataSource={progressData}
|
||||
renderItem={item => (
|
||||
<List.Item style={{ padding: '12px 8px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
|
||||
<div style={{ width: '100%' }}>
|
||||
<Flex justify="space-between" align="center" style={{ marginBottom: 8 }}>
|
||||
<Text strong>{item.inventoryName}</Text>
|
||||
<Space>
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>{item.inventoryCode}</Text>
|
||||
<Badge count={`${item.currentInspected} / ${item.quantify}`} style={{ backgroundColor: item.currentInspected === item.quantify ? token.colorSuccess : token.colorPrimary }} />
|
||||
</Space>
|
||||
</Flex>
|
||||
<Progress percent={Math.round((item.currentInspected / item.quantify) * 100)} showInfo={false} size="small" />
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider titlePlacement="start" plain style={{ margin: '0 0 16px 0' }}><Text strong>查验日志</Text></Divider>
|
||||
<div style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
border: `1px solid ${token.colorBorderSecondary}`,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
background: token.colorFillQuaternary,
|
||||
padding: 16
|
||||
}}>
|
||||
{logs.length > 0 ? (
|
||||
<Timeline
|
||||
items={logs.map((item) => ({
|
||||
color: item.type === 'success' ? 'green' : item.type === 'warning' ? 'orange' : 'blue',
|
||||
children: (
|
||||
<Space direction="vertical" size={0}>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>{item.time}</Text>
|
||||
<Text>{item.msg}</Text>
|
||||
</Space>
|
||||
),
|
||||
}))}
|
||||
/>
|
||||
) : (
|
||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无日志" style={{ margin: '20px 0' }} />
|
||||
)}
|
||||
<div ref={logsEndRef} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Modal
|
||||
title="暂停查验"
|
||||
open={isPauseModalVisible}
|
||||
onOk={confirmPause}
|
||||
onCancel={() => setIsPauseModalVisible(false)}
|
||||
okText="确认暂停"
|
||||
cancelText="取消"
|
||||
okButtonProps={{ danger: true }}
|
||||
>
|
||||
<Flex vertical gap={16} style={{ paddingTop: 16 }}>
|
||||
<Text>请确认是否暂停当前自动查验任务？</Text>
|
||||
<TextArea
|
||||
rows={4}
|
||||
placeholder="请输入暂停原因（可选）..."
|
||||
value={pauseReason}
|
||||
onChange={e => setPauseReason(e.target.value)}
|
||||
/>
|
||||
</Flex>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { AntdRegistry } from '@ant-design/nextjs-registry';
|
||||
import { ConfigProvider, App } from 'antd';
|
||||
import { TopHeader } from '../components/TopHeader';
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "海关平板前端系统",
|
||||
description: "海关查验系统平板端原型",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="zh-CN">
|
||||
<body className={`${inter.className} appBody`}>
|
||||
<AntdRegistry>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#1677ff',
|
||||
borderRadius: 8,
|
||||
},
|
||||
components: {
|
||||
Card: {
|
||||
borderRadiusLG: 12,
|
||||
},
|
||||
Statistic: {
|
||||
contentFontSize: 32,
|
||||
titleFontSize: 16,
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<App className="antAppRoot">
|
||||
<div className="appShell">
|
||||
<TopHeader />
|
||||
<main className="appMain">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</App>
|
||||
</ConfigProvider>
|
||||
</AntdRegistry>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Alert, Card, Row, Col, Typography, Space, Button, Tabs, Table, Image as AntImage, Empty, Spin, Flex } from 'antd';
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Breadcrumb } from '../../../components/Breadcrumb';
|
||||
import { MockApi } from '../../../services/mockApi';
|
||||
import { MachineDetail, ImageItem } from '../../../types';
|
||||
import { StatusBadge } from '../../../components/StatusBadge';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export default function MachineDetailPage({ params }: { params: { serialNumber: string } }) {
|
||||
const router = useRouter();
|
||||
const [machine, setMachine] = useState<MachineDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadMachineDetail = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setErrorMessage('');
|
||||
const data = await MockApi.getMachineDetail(params.serialNumber);
|
||||
if (!isMounted) return;
|
||||
setMachine(data);
|
||||
} catch {
|
||||
if (!isMounted) return;
|
||||
setMachine(null);
|
||||
setErrorMessage('机器详情加载失败，请稍后重试');
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadMachineDetail();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [params.serialNumber]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Flex vertical align="center" justify="center" style={{ padding: 48 }}>
|
||||
<Spin tip="正在加载机器详情..." />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
if (!machine) {
|
||||
return (
|
||||
<Flex vertical align="center" style={{ padding: 48 }}>
|
||||
{errorMessage && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={errorMessage}
|
||||
showIcon
|
||||
style={{ maxWidth: 480, marginBottom: 16 }}
|
||||
/>
|
||||
)}
|
||||
<Empty description="暂无机器详情" />
|
||||
<Button type="primary" onClick={() => router.push('/machines')} style={{ marginTop: 16 }}>
|
||||
返回机器查询
|
||||
</Button>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
const renderImageGroup = (images: ImageItem[]) => {
|
||||
if (!images || images.length === 0) return <Empty description="暂无图片" />;
|
||||
|
||||
return (
|
||||
<AntImage.PreviewGroup>
|
||||
<Space size={[16, 16]} wrap>
|
||||
{images.map((img) => (
|
||||
<Flex
|
||||
key={img.id}
|
||||
vertical
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: 120,
|
||||
gap: 4
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '100%', aspectRatio: '4/3', overflow: 'hidden', borderRadius: 8, background: '#f0f0f0' }}>
|
||||
<AntImage
|
||||
src={img.url}
|
||||
alt={img.name}
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ objectFit: 'cover' }}
|
||||
preview={{
|
||||
src: img.url,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Text style={{ fontSize: 12, textAlign: 'center' }}>{img.name}</Text>
|
||||
<Text type="secondary" style={{ fontSize: 11, textAlign: 'center' }}>{img.createdAt}</Text>
|
||||
</Flex>
|
||||
))}
|
||||
</Space>
|
||||
</AntImage.PreviewGroup>
|
||||
);
|
||||
};
|
||||
|
||||
const imageTabs = [
|
||||
{ key: 'incoming', label: '来料检验单', children: renderImageGroup(machine.images.incomingInspection) },
|
||||
{ key: 'startup', label: '开机测试样张', children: renderImageGroup(machine.images.startupTestSample) },
|
||||
{ key: 'production', label: '生产加工单', children: renderImageGroup(machine.images.productionOrder) },
|
||||
{ key: 'robot', label: '机器人查验拍照', children: renderImageGroup(machine.images.robotInspection) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Flex justify="space-between" align="center" style={{ marginBottom: 16 }}>
|
||||
<Breadcrumb />
|
||||
<Button icon={<ArrowLeftOutlined />} onClick={() => router.back()}>返回查询</Button>
|
||||
</Flex>
|
||||
|
||||
<Card title="机器基本信息" style={{ marginBottom: 24 }}>
|
||||
<Row gutter={[24, 16]}>
|
||||
<Col span={8}>
|
||||
<Text type="secondary">序列号：</Text> <Text strong>{machine.serialNumber}</Text>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Text type="secondary">机器型号：</Text> <Text strong>{machine.modelName}</Text>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Text type="secondary">所属报关单：</Text> <Button type="link">{machine.customsId}</Button>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Text type="secondary">当前状态：</Text> <StatusBadge status={machine.status} />
|
||||
</Col>
|
||||
{Object.entries(machine.specs).map(([key, value]) => (
|
||||
<Col span={8} key={key}>
|
||||
<Text type="secondary">{key}：</Text> <Text>{value}</Text>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Card title="图片资料" style={{ marginBottom: 24 }}>
|
||||
<Tabs items={imageTabs} />
|
||||
</Card>
|
||||
|
||||
<Card title="查验记录">
|
||||
<Table
|
||||
dataSource={machine.inspectionRecords}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
locale={{ emptyText: <Empty description="暂无查验记录" /> }}
|
||||
>
|
||||
<Table.Column title="查验时间" dataIndex="time" />
|
||||
<Table.Column title="操作人" dataIndex="operator" />
|
||||
<Table.Column title="结果" dataIndex="result" />
|
||||
<Table.Column title="备注" dataIndex="remark" />
|
||||
</Table>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, Input, Button, Table, Typography, Space, Modal, Upload, Flex } from 'antd';
|
||||
import { CameraOutlined, BarcodeOutlined, FileImageOutlined, SearchOutlined, BulbOutlined } from '@ant-design/icons';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Breadcrumb } from '../../components/Breadcrumb';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
export default function MachineQueryPage() {
|
||||
const router = useRouter();
|
||||
const [serialNumber, setSerialNumber] = useState('');
|
||||
const [isScanModalVisible, setIsScanModalVisible] = useState(false);
|
||||
const [recentQueries, setRecentQueries] = useState<{serialNumber: string, name: string, time: string}[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
// Load recent queries from localStorage or mock
|
||||
const saved = localStorage.getItem('recent_queries');
|
||||
if (saved) {
|
||||
setRecentQueries(JSON.parse(saved));
|
||||
} else {
|
||||
setRecentQueries([
|
||||
{ serialNumber: 'BG042110276', name: '打印机型号A', time: '06-19 14:30' },
|
||||
{ serialNumber: 'BG042110285', name: '扫描仪型号B', time: '06-19 10:15' }
|
||||
]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSearch = (sn: string) => {
|
||||
if (!sn) return;
|
||||
|
||||
// Save to recent queries
|
||||
const newQuery = { serialNumber: sn, name: '未知设备 (模拟)', time: new Date().toLocaleString() };
|
||||
const updated = [newQuery, ...recentQueries.filter(q => q.serialNumber !== sn)].slice(0, 10);
|
||||
setRecentQueries(updated);
|
||||
localStorage.setItem('recent_queries', JSON.stringify(updated));
|
||||
|
||||
router.push(`/machines/${sn}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumb />
|
||||
|
||||
<Card title="查询方式选择" style={{ marginBottom: 24 }}>
|
||||
<Row gutter={48}>
|
||||
<Col span={12} style={{ borderRight: '1px solid var(--color-border-light)' }}>
|
||||
<Flex vertical align="center" gap={16} style={{ padding: '24px 0' }}>
|
||||
<CameraOutlined style={{ fontSize: 48, color: 'var(--color-primary)' }} />
|
||||
<Title level={4} style={{ margin: 0 }}>扫描二维码</Title>
|
||||
<Text type="secondary">使用平板摄像头扫描机器机身二维码</Text>
|
||||
<Button type="primary" size="large" onClick={() => setIsScanModalVisible(true)}>打开扫码</Button>
|
||||
</Flex>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Flex vertical align="center" gap={16} style={{ padding: '24px 0' }}>
|
||||
<BarcodeOutlined style={{ fontSize: 48, color: 'var(--color-primary)' }} />
|
||||
<Title level={4} style={{ margin: 0 }}>输入序列号</Title>
|
||||
<Text type="secondary">输入机器序列号精确查询机器信息</Text>
|
||||
<Space.Compact style={{ width: '80%' }}>
|
||||
<Input
|
||||
placeholder="请输入序列号..."
|
||||
size="large"
|
||||
value={serialNumber}
|
||||
onChange={(e) => setSerialNumber(e.target.value)}
|
||||
onPressEnter={() => handleSearch(serialNumber)}
|
||||
/>
|
||||
<Button type="primary" size="large" icon={<SearchOutlined />} onClick={() => handleSearch(serialNumber)}>查询</Button>
|
||||
</Space.Compact>
|
||||
</Flex>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Card title="或上传二维码照片识别" style={{ marginBottom: 24 }}>
|
||||
<Upload.Dragger
|
||||
accept="image/*"
|
||||
showUploadList={false}
|
||||
customRequest={({ onSuccess }) => {
|
||||
setTimeout(() => {
|
||||
onSuccess?.('ok');
|
||||
handleSearch('BG042110276'); // 模拟识别成功
|
||||
}, 1000);
|
||||
}}
|
||||
>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<FileImageOutlined style={{ fontSize: 48 }} />
|
||||
</p>
|
||||
<p className="ant-upload-text">拖拽或点击上传二维码照片</p>
|
||||
<p className="ant-upload-hint">支持 JPG / PNG / BMP，自动识别二维码内容</p>
|
||||
</Upload.Dragger>
|
||||
</Card>
|
||||
|
||||
<Card title="最近查询记录">
|
||||
<Table
|
||||
dataSource={recentQueries}
|
||||
rowKey="serialNumber"
|
||||
pagination={false}
|
||||
size="middle"
|
||||
>
|
||||
<Table.Column title="序列号" dataIndex="serialNumber" />
|
||||
<Table.Column title="机器名称" dataIndex="name" />
|
||||
<Table.Column title="查询时间" dataIndex="time" />
|
||||
<Table.Column
|
||||
title="操作"
|
||||
render={(_, record: {serialNumber: string}) => (
|
||||
<Button type="link" onClick={() => handleSearch(record.serialNumber)}>再次查看</Button>
|
||||
)}
|
||||
/>
|
||||
</Table>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title="扫描二维码"
|
||||
open={isScanModalVisible}
|
||||
onCancel={() => setIsScanModalVisible(false)}
|
||||
footer={[
|
||||
<Button key="manual" onClick={() => setIsScanModalVisible(false)}>
|
||||
手动输入序列号
|
||||
</Button>,
|
||||
<Button key="close" type="primary" onClick={() => setIsScanModalVisible(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
]}
|
||||
width={600}
|
||||
centered
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
height: 300,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 8,
|
||||
background: '#000000'
|
||||
}}
|
||||
>
|
||||
<Flex vertical align="center" gap={16} style={{ color: '#ffffff', zIndex: 1 }}>
|
||||
<CameraOutlined style={{ fontSize: 48, opacity: 0.5 }} />
|
||||
<div>平板摄像头实时画面模拟</div>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setIsScanModalVisible(false);
|
||||
handleSearch('BG042110276');
|
||||
}}
|
||||
>
|
||||
模拟扫码成功 (BG042110276)
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{/* 模拟扫码框 */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 200,
|
||||
height: 200,
|
||||
border: '2px solid rgba(24, 144, 255, 0.5)',
|
||||
boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.5)'
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: -2, left: -2, width: 20, height: 20, borderTop: '4px solid #1890ff', borderLeft: '4px solid #1890ff' }}></div>
|
||||
<div style={{ position: 'absolute', top: -2, right: -2, width: 20, height: 20, borderTop: '4px solid #1890ff', borderRight: '4px solid #1890ff' }}></div>
|
||||
<div style={{ position: 'absolute', bottom: -2, left: -2, width: 20, height: 20, borderBottom: '4px solid #1890ff', borderLeft: '4px solid #1890ff' }}></div>
|
||||
<div style={{ position: 'absolute', bottom: -2, right: -2, width: 20, height: 20, borderBottom: '4px solid #1890ff', borderRight: '4px solid #1890ff' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 16, textAlign: 'center', color: '#666666' }}>
|
||||
<BulbOutlined /> 将二维码对准框内，自动识别
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Alert, Card, Row, Col, List, Button, Table, Statistic, Flex } from 'antd';
|
||||
import {
|
||||
FileTextOutlined,
|
||||
CheckCircleOutlined,
|
||||
SyncOutlined,
|
||||
WarningOutlined,
|
||||
ScanOutlined,
|
||||
SearchOutlined,
|
||||
VideoCameraOutlined,
|
||||
RightOutlined,
|
||||
ClockCircleOutlined,
|
||||
ProfileOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { MockApi } from '../services/mockApi';
|
||||
import { CustomsStats, ActivityItem, CustomsDeclaration } from '../types';
|
||||
import { StatusBadge } from '../components/StatusBadge';
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const [stats, setStats] = useState<CustomsStats | null>(null);
|
||||
const [activities, setActivities] = useState<ActivityItem[]>([]);
|
||||
const [pendingCustoms, setPendingCustoms] = useState<CustomsDeclaration[]>([]);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setErrorMessage('');
|
||||
const [statsData, actData, customsData] = await Promise.all([
|
||||
MockApi.getCustomsStats(),
|
||||
MockApi.getRecentActivities(),
|
||||
MockApi.getPendingCustoms()
|
||||
]);
|
||||
|
||||
if (!isMounted) return;
|
||||
|
||||
setStats(statsData);
|
||||
setActivities(actData);
|
||||
setPendingCustoms(customsData);
|
||||
} catch {
|
||||
if (!isMounted) return;
|
||||
setErrorMessage('首页数据加载失败，请稍后重试');
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const inspectingCustoms = pendingCustoms.find(item => item.status === 'inspecting');
|
||||
const goToInspection = () => {
|
||||
if (inspectingCustoms) {
|
||||
router.push(`/inspection?customsId=${encodeURIComponent(inspectingCustoms.customsId)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push('/customs');
|
||||
};
|
||||
|
||||
const statCards = [
|
||||
{
|
||||
title: '待查验',
|
||||
value: stats?.pendingCount || 0,
|
||||
icon: <FileTextOutlined />,
|
||||
suffix: '份报关单',
|
||||
valueStyle: { color: '#1890ff' },
|
||||
onClick: () => router.push('/customs')
|
||||
},
|
||||
{
|
||||
title: '今日已放行',
|
||||
value: stats?.releasedToday || 0,
|
||||
icon: <CheckCircleOutlined />,
|
||||
suffix: '份报关单',
|
||||
valueStyle: { color: '#52c41a' }
|
||||
},
|
||||
{
|
||||
title: '查验进行中',
|
||||
value: stats?.inspectingCount || 0,
|
||||
icon: <SyncOutlined spin />,
|
||||
suffix: '个任务',
|
||||
valueStyle: { color: '#faad14' },
|
||||
onClick: goToInspection
|
||||
},
|
||||
{
|
||||
title: '异常',
|
||||
value: stats?.abnormalCount || 0,
|
||||
icon: <WarningOutlined />,
|
||||
suffix: '个异常',
|
||||
valueStyle: { color: '#ff4d4f' }
|
||||
},
|
||||
];
|
||||
|
||||
const quickActions = [
|
||||
{ title: '扫码查询机器', desc: '使用平板摄像头扫描设备二维码', icon: <ScanOutlined />, onClick: () => router.push('/machines') },
|
||||
{ title: '序列号查询机器', desc: '手动输入序列号查询机器全部资料', icon: <SearchOutlined />, onClick: () => router.push('/machines') },
|
||||
{ title: '视频监控', desc: '查看厂房实时监控画面', icon: <VideoCameraOutlined />, onClick: () => router.push('/video') },
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ paddingBottom: 24 }}>
|
||||
{errorMessage && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={errorMessage}
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 统计卡片区域 */}
|
||||
<Row gutter={24} style={{ marginBottom: 24 }}>
|
||||
{statCards.map((stat, idx) => (
|
||||
<Col span={6} key={idx}>
|
||||
<Card hoverable={!!stat.onClick} onClick={stat.onClick}>
|
||||
<Statistic
|
||||
title={stat.title}
|
||||
value={stat.value}
|
||||
suffix={stat.suffix}
|
||||
prefix={stat.icon}
|
||||
valueStyle={stat.valueStyle}
|
||||
loading={!stats}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
{/* 快捷操作区域 */}
|
||||
<Row gutter={24} style={{ marginBottom: 24 }}>
|
||||
{quickActions.map((action, idx) => (
|
||||
<Col span={8} key={idx}>
|
||||
<Card
|
||||
hoverable
|
||||
onClick={action.onClick}
|
||||
styles={{ body: { background: 'linear-gradient(135deg, #f6f8fc 0%, #eef2f9 100%)' } }}
|
||||
>
|
||||
<Flex align="center" gap={16}>
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: '50%',
|
||||
background: '#fff',
|
||||
boxShadow: '0 4px 12px rgba(24, 144, 255, 0.1)',
|
||||
color: '#1890ff',
|
||||
fontSize: 24
|
||||
}}
|
||||
>
|
||||
{action.icon}
|
||||
</Flex>
|
||||
<Flex vertical>
|
||||
<div style={{ fontWeight: 600, fontSize: 18 }}>{action.title}</div>
|
||||
<div style={{ color: 'var(--color-text-secondary)', fontSize: 14 }}>{action.desc}</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<Row gutter={24}>
|
||||
{/* 最近查验动态 */}
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title="最近查验动态"
|
||||
extra={<Button type="link" icon={<RightOutlined />}>查看全部</Button>}
|
||||
styles={{ body: { height: 'calc(100% - 57px)' } }}
|
||||
>
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={activities}
|
||||
renderItem={(item) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
avatar={
|
||||
item.type === 'start' ? <ClockCircleOutlined style={{ fontSize: 20 }} /> :
|
||||
item.type === 'success' ? <CheckCircleOutlined style={{ fontSize: 20 }} /> :
|
||||
item.type === 'warning' ? <WarningOutlined style={{ fontSize: 20 }} /> :
|
||||
<ProfileOutlined style={{ fontSize: 20 }} />
|
||||
}
|
||||
title={<span style={{ fontWeight: 500 }}>{item.message}</span>}
|
||||
description={item.time}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 待查验报关单 */}
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title="待查验报关单"
|
||||
extra={<Button type="link" onClick={() => router.push('/customs')}>查看全部 <RightOutlined /></Button>}
|
||||
styles={{ body: { height: 'calc(100% - 57px)' } }}
|
||||
>
|
||||
<Table
|
||||
dataSource={pendingCustoms}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
size="small"
|
||||
onRow={() => ({
|
||||
onClick: () => router.push('/customs'),
|
||||
style: { cursor: 'pointer' }
|
||||
})}
|
||||
>
|
||||
<Table.Column title="报关单号" dataIndex="customsId" key="customsId" render={(text) => <b>{text}</b>} />
|
||||
<Table.Column title="机器数量" dataIndex="machineCount" key="machineCount" render={(count) => `${count} 台`} />
|
||||
<Table.Column title="状态" dataIndex="status" key="status" render={(status: string) => <StatusBadge status={status as 'pending' | 'inspecting' | 'released' | 'abnormal'} />} />
|
||||
</Table>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Alert, Card, Row, Col, Button, Typography, Space, Spin, Flex, Breadcrumb as AntdBreadcrumb, Badge, Empty } from 'antd';
|
||||
import { FullscreenOutlined, ReloadOutlined, CameraOutlined, ArrowLeftOutlined, CaretRightOutlined, HomeOutlined, VideoCameraOutlined } from '@ant-design/icons';
|
||||
import { Breadcrumb } from '../../components/Breadcrumb';
|
||||
import Link from 'next/link';
|
||||
import { MockApi } from '../../services/mockApi';
|
||||
import { CameraInfo } from '../../types';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export default function VideoPage() {
|
||||
const [cameras, setCameras] = useState<CameraInfo[]>([]);
|
||||
const [fullscreenCamera, setFullscreenCamera] = useState<CameraInfo | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadCameras = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setErrorMessage('');
|
||||
const cameraList = await MockApi.getCameraList();
|
||||
if (!isMounted) return;
|
||||
setCameras(cameraList);
|
||||
} catch {
|
||||
if (!isMounted) return;
|
||||
setErrorMessage('摄像头列表加载失败，请稍后重试');
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadCameras();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 模拟的视频播放器组件
|
||||
const MockVideoPlayer = ({ camera, height, aspectRatio }: { camera: CameraInfo, height?: number | string, aspectRatio?: string }) => (
|
||||
<div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', borderRadius: 8, background: '#141414', height, aspectRatio, boxShadow: 'inset 0 0 20px rgba(0,0,0,0.5)' }}>
|
||||
{camera.status === 'online' ? (
|
||||
<>
|
||||
{/* 居中播放按钮 */}
|
||||
<Button
|
||||
type="text"
|
||||
shape="circle"
|
||||
icon={<CaretRightOutlined style={{ fontSize: 40, color: 'white' }} />}
|
||||
style={{ width: 80, height: 80, backgroundColor: 'rgba(255, 255, 255, 0.15)', backdropFilter: 'blur(4px)', border: '1px solid rgba(255,255,255,0.2)' }}
|
||||
/>
|
||||
|
||||
{/* 底部状态标识 */}
|
||||
<div style={{ position: 'absolute', bottom: 16, left: 16, zIndex: 10, padding: '4px 10px', background: 'rgba(0,0,0,0.6)', borderRadius: 6, backdropFilter: 'blur(4px)' }}>
|
||||
<Badge status="success" text={<Text style={{ color: 'white', fontSize: 12 }}>在线 / 实时画面模拟</Text>} />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Empty
|
||||
image={<VideoCameraOutlined style={{ fontSize: 64, color: '#ff4d4f', opacity: 0.9 }} />}
|
||||
imageStyle={{ height: 64, marginBottom: 16 }}
|
||||
description={
|
||||
<Space direction="vertical" size={2}>
|
||||
<Text type="danger" strong style={{ fontSize: 16 }}>设备离线</Text>
|
||||
<Text type="secondary" style={{ color: 'rgba(255,255,255,0.45)' }}>无法连接到视频流</Text>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
icon={<ReloadOutlined />}
|
||||
style={{ marginTop: 8 }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// 模拟重连
|
||||
}}
|
||||
>
|
||||
重试连接
|
||||
</Button>
|
||||
</Empty>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (fullscreenCamera) {
|
||||
return (
|
||||
<div>
|
||||
<Flex justify="space-between" align="center" style={{ marginBottom: 16 }}>
|
||||
<Space align="center" size="middle">
|
||||
<Button icon={<ArrowLeftOutlined />} onClick={() => setFullscreenCamera(null)}>返回</Button>
|
||||
<AntdBreadcrumb
|
||||
items={[
|
||||
{ title: <Link href="/"><HomeOutlined /> 首页</Link> },
|
||||
{ title: <a href="#" onClick={(e) => { e.preventDefault(); setFullscreenCamera(null); }}>视频监控</a> },
|
||||
{ title: fullscreenCamera.name }
|
||||
]}
|
||||
/>
|
||||
</Space>
|
||||
<Button type="primary" icon={<CameraOutlined />}>截图</Button>
|
||||
</Flex>
|
||||
|
||||
<Flex justify="center" align="center" style={{ height: 'calc(100vh - 180px)', marginBottom: 16 }}>
|
||||
<div style={{ height: '100%', maxWidth: '100%', aspectRatio: '16 / 9', boxShadow: '0 8px 24px rgba(0,0,0,0.1)' }}>
|
||||
<MockVideoPlayer camera={fullscreenCamera} height="100%" />
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Flex justify="space-between" align="center" style={{ marginBottom: 24 }}>
|
||||
<Breadcrumb />
|
||||
<Space>
|
||||
<Button icon={<FullscreenOutlined />}>全屏模式</Button>
|
||||
<Button type="primary" icon={<CameraOutlined />}>全部截图</Button>
|
||||
</Space>
|
||||
</Flex>
|
||||
|
||||
{errorMessage && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={errorMessage}
|
||||
showIcon
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<Flex vertical align="center" justify="center" style={{ padding: 64 }}>
|
||||
<Spin size="large" tip="正在加载摄像头..." />
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
{cameras.map((camera) => (
|
||||
<Col xs={24} lg={12} key={camera.id}>
|
||||
<Card
|
||||
hoverable={camera.status === 'online'}
|
||||
style={{ overflow: 'hidden', borderRadius: 12, borderColor: camera.status === 'online' ? '#f0f0f0' : '#ffccc7' }}
|
||||
styles={{ body: { padding: 0 } }}
|
||||
onClick={() => camera.status === 'online' && setFullscreenCamera(camera)}
|
||||
>
|
||||
<MockVideoPlayer camera={camera} height={300} />
|
||||
<Flex justify="space-between" align="center" style={{ padding: '12px 20px', background: camera.status === 'online' ? '#ffffff' : '#fff1f0', borderTop: '1px solid #f0f0f0' }}>
|
||||
<Space size="middle">
|
||||
<Badge status={camera.status === 'online' ? 'processing' : 'error'} />
|
||||
<Text strong style={{ fontSize: 15, color: camera.status === 'online' ? 'inherit' : '#cf1322' }}>{camera.name}</Text>
|
||||
</Space>
|
||||
{camera.status === 'online' && <Button type="link" icon={<FullscreenOutlined />} size="small">全屏观看</Button>}
|
||||
</Flex>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Breadcrumb as AntdBreadcrumb } from 'antd';
|
||||
import { HomeOutlined } from '@ant-design/icons';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
|
||||
const breadcrumbNameMap: Record<string, string> = {
|
||||
'/video': '视频监控',
|
||||
'/machines': '机器查询',
|
||||
'/customs': '报关单管理',
|
||||
'/inspection': '远程查验',
|
||||
};
|
||||
|
||||
export const Breadcrumb: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
const pathSnippets = pathname.split('/').filter(i => i);
|
||||
|
||||
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
|
||||
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
|
||||
const isLast = index === pathSnippets.length - 1;
|
||||
let name = breadcrumbNameMap[url] || pathSnippets[index];
|
||||
|
||||
if (!breadcrumbNameMap[url] && pathSnippets[index - 1] === 'machines') {
|
||||
name = '机器详情';
|
||||
} else if (!breadcrumbNameMap[url] && pathSnippets[index - 1] === 'customs') {
|
||||
name = '报关单详情';
|
||||
}
|
||||
|
||||
return {
|
||||
key: url,
|
||||
title: isLast ? name : <Link href={url}>{name}</Link>,
|
||||
};
|
||||
});
|
||||
|
||||
const breadcrumbItems = [
|
||||
{
|
||||
key: 'home',
|
||||
title: <Link href="/"><HomeOutlined /> 首页</Link>,
|
||||
},
|
||||
...extraBreadcrumbItems,
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<AntdBreadcrumb items={breadcrumbItems} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import { Tag } from 'antd';
|
||||
import {
|
||||
ClockCircleOutlined,
|
||||
SyncOutlined,
|
||||
CheckCircleOutlined,
|
||||
WarningOutlined,
|
||||
MinusCircleOutlined,
|
||||
PauseCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
QuestionCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
type StatusType = 'pending' | 'inspecting' | 'released' | 'abnormal' | 'idle' | 'running' | 'paused' | 'completed' | 'online' | 'offline';
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: StatusType;
|
||||
type?: 'badge' | 'tag';
|
||||
}
|
||||
|
||||
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, type = 'badge' }) => {
|
||||
const getStatusConfig = () => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return { color: 'warning', text: '待查验', icon: <ClockCircleOutlined style={{ color: '#faad14' }} /> };
|
||||
case 'inspecting':
|
||||
case 'running':
|
||||
return { color: 'processing', text: '查验中', icon: <SyncOutlined style={{ color: '#1890ff' }} /> };
|
||||
case 'released':
|
||||
case 'completed':
|
||||
return { color: 'success', text: '已放行', icon: <CheckCircleOutlined style={{ color: '#52c41a' }} /> };
|
||||
case 'abnormal':
|
||||
return { color: 'error', text: '异常', icon: <WarningOutlined style={{ color: '#ff4d4f' }} /> };
|
||||
case 'idle':
|
||||
return { color: 'default', text: '空闲', icon: <MinusCircleOutlined style={{ color: '#d9d9d9' }} /> };
|
||||
case 'paused':
|
||||
return { color: 'warning', text: '已暂停', icon: <PauseCircleOutlined style={{ color: '#faad14' }} /> };
|
||||
case 'online':
|
||||
return { color: 'success', text: '在线', icon: <CheckCircleOutlined style={{ color: '#52c41a' }} /> };
|
||||
case 'offline':
|
||||
return { color: 'error', text: '离线', icon: <CloseCircleOutlined style={{ color: '#ff4d4f' }} /> };
|
||||
default:
|
||||
return { color: 'default', text: '未知', icon: <QuestionCircleOutlined style={{ color: '#d9d9d9' }} /> };
|
||||
}
|
||||
};
|
||||
|
||||
const config = getStatusConfig();
|
||||
|
||||
if (type === 'tag') {
|
||||
return <Tag color={config.color} icon={config.icon}>{config.text}</Tag>;
|
||||
}
|
||||
|
||||
return (
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||
{config.icon} <span>{config.text}</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,108 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Layout, Menu, Badge, Avatar, Button, Dropdown, Space, Typography, theme } from 'antd';
|
||||
import {
|
||||
BellOutlined,
|
||||
SettingOutlined,
|
||||
UserOutlined,
|
||||
DashboardOutlined,
|
||||
VideoCameraOutlined,
|
||||
SearchOutlined,
|
||||
FileTextOutlined,
|
||||
ScanOutlined,
|
||||
SafetyCertificateOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { useAppStore } from '../store/useAppStore';
|
||||
|
||||
const { Header } = Layout;
|
||||
|
||||
export const TopHeader: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { user, notifications } = useAppStore();
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const unreadCount = notifications.filter(n => !n.read).length;
|
||||
|
||||
const menuItems = [
|
||||
{ key: '/', icon: <DashboardOutlined />, label: '首页' },
|
||||
{ key: '/video', icon: <VideoCameraOutlined />, label: '视频监控' },
|
||||
{ key: '/machines', icon: <SearchOutlined />, label: '机器查询' },
|
||||
{ key: '/customs', icon: <FileTextOutlined />, label: '报关单' },
|
||||
{ key: '/inspection', icon: <ScanOutlined />, label: '远程查验' },
|
||||
];
|
||||
|
||||
const handleMenuClick = (e: { key: string }) => {
|
||||
router.push(e.key);
|
||||
};
|
||||
|
||||
const notificationMenu = {
|
||||
items: notifications.map(n => ({
|
||||
key: n.id,
|
||||
label: (
|
||||
<div style={{ width: 250, padding: '4px 0', whiteSpace: 'normal' }}>
|
||||
<Typography.Text strong={!n.read} type={n.read ? 'secondary' : undefined} style={{ display: 'block' }}>
|
||||
{n.title}
|
||||
</Typography.Text>
|
||||
<Typography.Paragraph
|
||||
style={{ marginTop: 4, marginBottom: 0, color: token.colorTextSecondary, fontSize: 12, lineHeight: 1.5 }}
|
||||
>
|
||||
{n.message}
|
||||
</Typography.Paragraph>
|
||||
<Typography.Text style={{ marginTop: 4, display: 'block', color: token.colorTextTertiary, fontSize: 10 }}>
|
||||
{n.time}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
};
|
||||
|
||||
return (
|
||||
<Header style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 24px',
|
||||
background: token.colorBgContainer,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)'
|
||||
}}>
|
||||
<Space
|
||||
size="middle"
|
||||
onClick={() => router.push('/')}
|
||||
style={{ cursor: 'pointer', marginRight: 48, display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<SafetyCertificateOutlined style={{ fontSize: 24, color: token.colorPrimary }} />
|
||||
<Typography.Title level={4} style={{ margin: 0, color: token.colorPrimary, whiteSpace: 'nowrap' }}>
|
||||
海关智慧查验平台
|
||||
</Typography.Title>
|
||||
</Space>
|
||||
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectedKeys={[pathname === '/' ? '/' : `/${pathname.split('/')[1]}`]}
|
||||
items={menuItems}
|
||||
onClick={handleMenuClick}
|
||||
style={{ flex: 1, minWidth: 0, borderBottom: 'none', lineHeight: '62px' }}
|
||||
/>
|
||||
|
||||
<Space size="large" style={{ marginLeft: 24, display: 'flex', alignItems: 'center' }}>
|
||||
<Dropdown menu={notificationMenu} placement="bottomRight" trigger={['click']}>
|
||||
<Badge count={unreadCount} size="small" offset={[-4, 4]}>
|
||||
<Button type="text" shape="circle" icon={<BellOutlined style={{ fontSize: 18, color: token.colorText }} />} />
|
||||
</Badge>
|
||||
</Dropdown>
|
||||
|
||||
<Button type="text" shape="circle" icon={<SettingOutlined style={{ fontSize: 18, color: token.colorText }} />} />
|
||||
|
||||
<Space size="small" style={{ cursor: 'pointer', padding: '0 8px', borderRadius: token.borderRadius, transition: 'background 0.3s' }} className="user-entry">
|
||||
<Avatar size="small" icon={<UserOutlined />} style={{ backgroundColor: token.colorPrimary }} />
|
||||
<Typography.Text style={{ fontSize: 14 }}>{user?.name}</Typography.Text>
|
||||
</Space>
|
||||
</Space>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,122 @@
|
||||
import {
|
||||
CustomsStats,
|
||||
ActivityItem,
|
||||
CustomsDeclaration,
|
||||
CameraInfo,
|
||||
MachineDetail
|
||||
} from '../types';
|
||||
|
||||
const customsDeclarations: CustomsDeclaration[] = [
|
||||
{
|
||||
id: '1', customsId: 'CD20260619001', status: 'pending', machineCount: 5, createdAt: '2026-06-19 14:00',
|
||||
items: [
|
||||
{ inventoryCode: 'P001', inventoryName: '打印机型号A', spec: 'A4', quantify: 3, inspected: 0 },
|
||||
{ inventoryCode: 'S001', inventoryName: '扫描仪型号B', spec: 'A3', quantify: 2, inspected: 0 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '2', customsId: 'CD20260619003', status: 'inspecting', machineCount: 8, createdAt: '2026-06-19 13:00',
|
||||
items: [
|
||||
{ inventoryCode: 'P002', inventoryName: '打印机型号C', spec: 'A4', quantify: 8, inspected: 2 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '3', customsId: 'CD20260618004', status: 'released', machineCount: 10, createdAt: '2026-06-18 10:00',
|
||||
items: [
|
||||
{ inventoryCode: 'M001', inventoryName: '显示器型号A', spec: '27寸', quantify: 10, inspected: 10 }
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
// 模拟真实接口耗时，便于原型验证加载和错误状态。
|
||||
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
export const MockApi = {
|
||||
getCustomsStats: async (): Promise<CustomsStats> => {
|
||||
await delay(300);
|
||||
return {
|
||||
pendingCount: 12,
|
||||
releasedToday: 28,
|
||||
inspectingCount: 1,
|
||||
abnormalCount: 0
|
||||
};
|
||||
},
|
||||
|
||||
getRecentActivities: async (): Promise<ActivityItem[]> => {
|
||||
await delay(300);
|
||||
return [
|
||||
{ id: '1', time: '14:30', type: 'start', message: 'CD20260619003 开始查验' },
|
||||
{ id: '2', time: '14:15', type: 'success', message: 'CD20260619002 查验完成/放行' },
|
||||
{ id: '3', time: '14:00', type: 'info', message: '新增报关单 CD20260618005' },
|
||||
{ id: '4', time: '13:45', type: 'warning', message: 'CD20260618001 查验异常暂停' },
|
||||
{ id: '5', time: '13:20', type: 'success', message: 'CD20260618004 查验完成/放行' },
|
||||
];
|
||||
},
|
||||
|
||||
getPendingCustoms: async (): Promise<CustomsDeclaration[]> => {
|
||||
await delay(400);
|
||||
return [
|
||||
{ id: '1', customsId: 'CD20260619001', status: 'pending', machineCount: 5, createdAt: '2026-06-19 14:00', items: [] },
|
||||
{ id: '2', customsId: 'CD20260619003', status: 'inspecting', machineCount: 8, createdAt: '2026-06-19 13:00', items: [] },
|
||||
{ id: '3', customsId: 'CD20260619004', status: 'pending', machineCount: 3, createdAt: '2026-06-19 12:00', items: [] },
|
||||
{ id: '4', customsId: 'CD20260618005', status: 'pending', machineCount: 6, createdAt: '2026-06-18 16:00', items: [] },
|
||||
];
|
||||
},
|
||||
|
||||
getCustomsList: async (): Promise<CustomsDeclaration[]> => {
|
||||
await delay(500);
|
||||
return customsDeclarations;
|
||||
},
|
||||
|
||||
getCustomsById: async (customsId: string): Promise<CustomsDeclaration | null> => {
|
||||
await delay(300);
|
||||
return customsDeclarations.find(item => item.customsId === customsId) ?? null;
|
||||
},
|
||||
|
||||
getCameraList: async (): Promise<CameraInfo[]> => {
|
||||
await delay(300);
|
||||
return [
|
||||
{ id: '1', name: '摄像头 1', location: '入料口', streamUrl: '', status: 'online' },
|
||||
{ id: '2', name: '摄像头 2', location: '生产线 A', streamUrl: '', status: 'online' },
|
||||
{ id: '3', name: '摄像头 3', location: '生产线 B', streamUrl: '', status: 'online' },
|
||||
{ id: '4', name: '摄像头 4', location: '出库区', streamUrl: '', status: 'offline' },
|
||||
{ id: '5', name: '摄像头 5', location: 'AGV 作业区', streamUrl: '', status: 'online' },
|
||||
];
|
||||
},
|
||||
|
||||
getMachineDetail: async (serialNumber: string): Promise<MachineDetail> => {
|
||||
await delay(400);
|
||||
return {
|
||||
serialNumber: serialNumber,
|
||||
modelName: '打印机型号A',
|
||||
modelId: 'MDL-A4-001',
|
||||
customsId: 'CD20260619001',
|
||||
customsName: '某科技公司进口设备批次',
|
||||
status: 'pending',
|
||||
specs: {
|
||||
'尺寸': '480×320×260mm',
|
||||
'重量': '12.5kg',
|
||||
'产地': '中国 / 深圳',
|
||||
'入库日期': '2026-06-15'
|
||||
},
|
||||
createdAt: '2026-06-15 10:00',
|
||||
images: {
|
||||
incomingInspection: [
|
||||
{ id: 'i1', url: 'https://picsum.photos/800/600?1', thumbnailUrl: 'https://picsum.photos/200/150?1', name: '来料检验单 第1页', createdAt: '2026-06-10' },
|
||||
{ id: 'i2', url: 'https://picsum.photos/800/600?2', thumbnailUrl: 'https://picsum.photos/200/150?2', name: '来料检验单 第2页', createdAt: '2026-06-10' }
|
||||
],
|
||||
startupTestSample: [
|
||||
{ id: 'i3', url: 'https://picsum.photos/800/600?3', thumbnailUrl: 'https://picsum.photos/200/150?3', name: '开机测试样张', createdAt: '2026-06-12' }
|
||||
],
|
||||
productionOrder: [
|
||||
{ id: 'i4', url: 'https://picsum.photos/800/600?4', thumbnailUrl: 'https://picsum.photos/200/150?4', name: '生产加工单', createdAt: '2026-06-12' }
|
||||
],
|
||||
robotInspection: [
|
||||
{ id: 'i5', url: 'https://picsum.photos/800/600?5', thumbnailUrl: 'https://picsum.photos/200/150?5', name: '正面照', createdAt: '2026-06-19' },
|
||||
{ id: 'i6', url: 'https://picsum.photos/800/600?6', thumbnailUrl: 'https://picsum.photos/200/150?6', name: '背面照', createdAt: '2026-06-19' }
|
||||
]
|
||||
},
|
||||
inspectionRecords: []
|
||||
};
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import { create } from 'zustand';
|
||||
import { User, Notification, CustomsDeclaration, InspectionState } from '../types';
|
||||
|
||||
interface AppState {
|
||||
user: User | null;
|
||||
notifications: Notification[];
|
||||
selectedCustoms: CustomsDeclaration | null;
|
||||
inspection: InspectionState | null;
|
||||
|
||||
// Actions
|
||||
setUser: (user: User | null) => void;
|
||||
addNotification: (notification: Notification) => void;
|
||||
markNotificationRead: (id: string) => void;
|
||||
setSelectedCustoms: (customs: CustomsDeclaration | null) => void;
|
||||
setInspection: (inspection: InspectionState | null) => void;
|
||||
updateInspectionStatus: (status: InspectionState['status']) => void;
|
||||
}
|
||||
|
||||
export const useAppStore = create<AppState>((set) => ({
|
||||
user: { name: '张三', role: '海关查验员' },
|
||||
notifications: [
|
||||
{ id: '1', title: '异常告警', message: '入料口摄像头离线', time: '14:30', read: false },
|
||||
{ id: '2', title: '查验完成', message: '报关单 CD20260619002 查验完成', time: '14:15', read: false },
|
||||
{ id: '3', title: '系统通知', message: '新增 5 份待查验报关单', time: '14:00', read: true }
|
||||
],
|
||||
selectedCustoms: null,
|
||||
inspection: null,
|
||||
|
||||
setUser: (user) => set({ user }),
|
||||
|
||||
addNotification: (notification) => set((state) => ({
|
||||
notifications: [notification, ...state.notifications]
|
||||
})),
|
||||
|
||||
markNotificationRead: (id) => set((state) => ({
|
||||
notifications: state.notifications.map(n =>
|
||||
n.id === id ? { ...n, read: true } : n
|
||||
)
|
||||
})),
|
||||
|
||||
setSelectedCustoms: (selectedCustoms) => set({ selectedCustoms }),
|
||||
|
||||
setInspection: (inspection) => set({ inspection }),
|
||||
|
||||
updateInspectionStatus: (status) => set((state) => ({
|
||||
inspection: state.inspection ? { ...state.inspection, status } : null
|
||||
})),
|
||||
}));
|
||||
@@ -0,0 +1,99 @@
|
||||
export interface User {
|
||||
name: string;
|
||||
role: string;
|
||||
}
|
||||
|
||||
export interface Notification {
|
||||
id: string;
|
||||
title: string;
|
||||
message: string;
|
||||
time: string;
|
||||
read: boolean;
|
||||
}
|
||||
|
||||
export interface MachineDetail {
|
||||
serialNumber: string;
|
||||
modelName: string;
|
||||
modelId: string;
|
||||
customsId: string;
|
||||
customsName: string;
|
||||
status: 'pending' | 'inspecting' | 'released' | 'abnormal';
|
||||
specs: Record<string, string>;
|
||||
createdAt: string;
|
||||
images: {
|
||||
incomingInspection: ImageItem[];
|
||||
startupTestSample: ImageItem[];
|
||||
productionOrder: ImageItem[];
|
||||
robotInspection: ImageItem[];
|
||||
};
|
||||
inspectionRecords: InspectionRecord[];
|
||||
}
|
||||
|
||||
export interface ImageItem {
|
||||
id: string;
|
||||
url: string;
|
||||
thumbnailUrl: string;
|
||||
name: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface InspectionRecord {
|
||||
id: string;
|
||||
time: string;
|
||||
operator: string;
|
||||
result: string;
|
||||
remark: string;
|
||||
}
|
||||
|
||||
export interface CustomsStats {
|
||||
pendingCount: number;
|
||||
releasedToday: number;
|
||||
inspectingCount: number;
|
||||
abnormalCount: number;
|
||||
}
|
||||
|
||||
export interface CameraInfo {
|
||||
id: string;
|
||||
name: string;
|
||||
location: string;
|
||||
streamUrl: string;
|
||||
status: 'online' | 'offline';
|
||||
snapshot?: string;
|
||||
}
|
||||
|
||||
export interface CustomsDeclaration {
|
||||
id: string;
|
||||
customsId: string;
|
||||
status: 'pending' | 'released' | 'abnormal' | 'inspecting';
|
||||
machineCount: number;
|
||||
createdAt: string;
|
||||
items: InspectionItem[];
|
||||
}
|
||||
|
||||
export interface InspectionState {
|
||||
customsId: string;
|
||||
customsName: string;
|
||||
status: 'idle' | 'running' | 'paused' | 'completed';
|
||||
items: InspectionItem[];
|
||||
startedAt: number;
|
||||
currentMachine?: {
|
||||
machineId: string;
|
||||
serialNumber: string;
|
||||
step: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface InspectionItem {
|
||||
inventoryCode: string;
|
||||
inventoryName: string;
|
||||
spec: string;
|
||||
quantify: number;
|
||||
inspected: number;
|
||||
}
|
||||
|
||||
export interface ActivityItem {
|
||||
id: string;
|
||||
time: string;
|
||||
type: 'start' | 'success' | 'info' | 'warning';
|
||||
message: string;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user