chore: init bj_power monorepo (dashboard/mes/wms/wms_client/workstation), clear subproject git metadata and align naming to folder names

2026-08-27 10:09:54 +08:00
commit 1f0ee844a4
408 changed files with 102201 additions and 0 deletions
@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from 'react';
+import { useStore } from './store/useStore';
+import { color } from './theme/tokens';
+import KPICards from './components/KPICards';
+import EquipmentGrid from './components/EquipmentGrid';
+import ProductionChart from './components/ProductionChart';
+import CncStatusChart from './components/CncStatusChart';
+import AlarmTable from './components/AlarmTable';
+import TrendChart from './components/TrendChart';
+import YieldRateChart from './components/YieldRateChart';
+import SamplingTrendChart from './components/SamplingTrendChart';
+import InspectionTrendChart from './components/InspectionTrendChart';
+import MachineMonitor from './components/MachineMonitor';
+import { AppHeader } from './components/AppHeader';
+import { Panel } from './components/ui/Panel';
+
+type Page = 'overview' | 'monitor';
+
+export default function App() {
+  const [page, setPage] = useState<Page>('overview');
+  const fetchAll = useStore((s) => s.fetchAll);
+  const refresh  = useStore((s) => s.refresh);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>();
+
+  useEffect(() => {
+    fetchAll();
+    intervalRef.current = setInterval(refresh, 10000);
+    return () => clearInterval(intervalRef.current);
+  }, [fetchAll, refresh]);
+
+  // 产线概览 / 设备监控 每 30s 自动轮播切换
+  // 依赖 page:用户手动切页后计时从 0 重新开始,避免刚切完立刻被自动切走
+  useEffect(() => {
+    const t = setInterval(() => {
+      setPage((p) => (p === 'overview' ? 'monitor' : 'overview'));
+    }, 30000);
+    return () => clearInterval(t);
+  }, [page]);
+
+  return (
+    <div style={{
+      width: '100vw', height: '100vh',
+      display: 'flex', flexDirection: 'column',
+      padding: '8px 12px 12px',
+      gap: 10, overflow: 'hidden',
+      color: color.text.primary,
+    }}>
+      <AppHeader page={page} onChangePage={setPage} />
+
+      {page === 'overview' ? (
+        <main style={{
+          flex: 1, minHeight: 0, display: 'flex',
+          flexDirection: 'column', gap: 10,
+          animation: 'fade-in-up 300ms ease',
+        }}>
+          {/* KPI Row */}
+          <div style={{ flexShrink: 0 }}>
+            <KPICards />
+          </div>
+
+          {/* Middle Row: Equipment | Production | CNC Status | Alarms */}
+          <div style={{
+            flex: 3, display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr 1fr',
+            gap: 10, minHeight: 0,
+          }}>
+            <Panel title="设备槽位" subtitle="SLOT USAGE" padding={8}>
+              <EquipmentGrid />
+            </Panel>
+            <Panel title="CNC 状态" subtitle="CNC STATUS" padding={8}>
+              <CncStatusChart />
+            </Panel>
+            <Panel title="生产进度" subtitle="WORK ORDERS" padding={4}>
+              <ProductionChart />
+            </Panel>
+            <Panel
+              title="活跃报警"
+              subtitle="LIVE ALARMS"
+              accent={color.status.danger}
+              padding={8}
+            >
+              <AlarmTable />
+            </Panel>
+          </div>
+
+          {/* Bottom Row */}
+          <div style={{
+            flex: 2, display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr 1fr',
+            gap: 10, minHeight: 0,
+          }}>
+            <Panel title="近10日产量趋势" subtitle="10-DAY OUTPUT" padding={4}>
+              <TrendChart />
+            </Panel>
+            <Panel title="近10日合格率统计" subtitle="10-DAY YIELD" padding={4}>
+              <YieldRateChart />
+            </Panel>
+            <Panel title="近10日抽检趋势" subtitle="10-DAY SAMPLING" padding={4}>
+              <SamplingTrendChart />
+            </Panel>
+            <Panel title="近10日内窥镜趋势" subtitle="10-DAY INSPECTION" padding={4}>
+              <InspectionTrendChart />
+            </Panel>
+          </div>
+        </main>
+      ) : (
+        <main style={{
+          flex: 1, minHeight: 0,
+          animation: 'fade-in-up 300ms ease',
+        }}>
+          <MachineMonitor />
+        </main>
+      )}
+    </div>
+  );
+}