SunYF
b6799c9de4
本次迭代覆盖MES与WMS核心业务： 1. 新增接驳台托盘传感器读取与AGV对接能力 2. 完善工单排产、备料流程与权限体系拆分 3. 优化看板接口与前端路由、样式 4. 新增操作日志、库存盘点与角色保护逻辑 5. 修复代理地址、BOM保存等已知问题
72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Layout, Nav, Tag, Spin } from '@douyinfe/semi-ui';
|
|
import { IconMonitorStroked, IconSaveStroked, IconGridView } from '@douyinfe/semi-icons';
|
|
import { useDashboardData } from '@bj_power_dashboard/hooks/useDashboardData';
|
|
import { ProductionBoard } from '@bj_power_dashboard/pages/ProductionBoard';
|
|
import { WarehouseBoard } from '@bj_power_dashboard/pages/WarehouseBoard';
|
|
import { LineModel } from '@bj_power_dashboard/pages/LineModel';
|
|
import { ErrorRetry } from '@bj_power_dashboard/components/ErrorRetry';
|
|
|
|
type PageKey = 'production' | 'warehouse' | 'model';
|
|
|
|
const navItems = [
|
|
{ itemKey: 'production', text: '生产总览', icon: <IconMonitorStroked /> },
|
|
{ itemKey: 'warehouse', text: '仓储动态', icon: <IconSaveStroked /> },
|
|
{ itemKey: 'model', text: '产线孪生', icon: <IconGridView /> },
|
|
];
|
|
|
|
const CYCLE_ORDER: PageKey[] = ['production', 'warehouse', 'model'];
|
|
const CYCLE_MS = 40_000;
|
|
|
|
export function App() {
|
|
const [page, setPage] = useState<PageKey>('production');
|
|
const { data: dashboard, mode, error, retry } = useDashboardData();
|
|
const loading = !dashboard && !error;
|
|
|
|
// 无人值守自动轮播：40s 切下一屏；手动点选后重新计时
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setPage((cur) => {
|
|
const idx = CYCLE_ORDER.indexOf(cur);
|
|
return CYCLE_ORDER[(idx + 1) % CYCLE_ORDER.length];
|
|
});
|
|
}, CYCLE_MS);
|
|
return () => clearInterval(timer);
|
|
}, [page]);
|
|
|
|
const selectPage = (k: string) => setPage(k as PageKey);
|
|
|
|
return (
|
|
<Layout className="app-shell">
|
|
<Layout.Header className="app-header">
|
|
<div className="app-title">北京电力智能产线 · 生产看板</div>
|
|
<div className="app-meta">
|
|
{mode === 'sse' && <Tag color="green">实时推送</Tag>}
|
|
{mode === 'polling' && <Tag color="blue">轮询刷新</Tag>}
|
|
{mode === 'demo' && <Tag color="amber">演示数据</Tag>}
|
|
{mode === 'init' && <Tag color="grey">连接中</Tag>}
|
|
<span className="clock">{new Date().toLocaleTimeString('zh-CN')}</span>
|
|
</div>
|
|
</Layout.Header>
|
|
|
|
<Layout.Sider style={{ background: 'transparent' }}>
|
|
<Nav selectedKeys={[page]} onSelect={(k) => selectPage(String(k.itemKey))} items={navItems} />
|
|
</Layout.Sider>
|
|
|
|
<Layout.Content className="app-content">
|
|
{loading ? (
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 80 }}>
|
|
<Spin size="large" tip="数据加载中…" />
|
|
</div>
|
|
) : (
|
|
<ErrorRetry error={error} mode={mode} loading={loading} onRetry={retry}>
|
|
{dashboard && page === 'production' && <ProductionBoard data={dashboard} />}
|
|
{dashboard && page === 'warehouse' && <WarehouseBoard data={dashboard} />}
|
|
{dashboard && page === 'model' && <LineModel data={dashboard} />}
|
|
</ErrorRetry>
|
|
)}
|
|
</Layout.Content>
|
|
</Layout>
|
|
);
|
|
}
|