2026-08-27 10:09:54 +08:00
|
|
|
|
import { create } from 'zustand';
|
2026-08-27 19:50:57 +08:00
|
|
|
|
import api, { mesApi } from '../api/client';
|
2026-08-27 10:09:54 +08:00
|
|
|
|
import type {
|
|
|
|
|
|
OverviewData, EquipmentItem, ProgressItem,
|
|
|
|
|
|
AlarmItem, TrendItem, SamplingOverview, SamplingTrendItem,
|
|
|
|
|
|
InspectionOverview, InspectionTrendItem,
|
|
|
|
|
|
DevStatus, CncDisplay, WasherPoint, CncHistoryPoint,
|
|
|
|
|
|
CncOeeItem, WasherOeeItem,
|
|
|
|
|
|
} from '../types';
|
|
|
|
|
|
|
2026-08-27 19:50:57 +08:00
|
|
|
|
// MES /api/internal/dashboard/overview 响应结构
|
|
|
|
|
|
interface MesOverviewReply {
|
|
|
|
|
|
activeOrderCount: number;
|
|
|
|
|
|
activeJobCount: number;
|
|
|
|
|
|
completedToday: number;
|
|
|
|
|
|
scrappedToday: number;
|
|
|
|
|
|
stationFaultCount: number;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/** MES 返回(camelCase,包在 Body.data 里)→ 看板 OverviewData(snake_case) */
|
|
|
|
|
|
function mapMesOverview(body: { data?: MesOverviewReply } | MesOverviewReply): OverviewData {
|
|
|
|
|
|
const d = (body as any)?.data ?? body;
|
|
|
|
|
|
return {
|
|
|
|
|
|
active_work_orders: d.activeOrderCount ?? 0,
|
|
|
|
|
|
completed_today: d.completedToday ?? 0,
|
|
|
|
|
|
yield_rate: d.completedToday + d.scrappedToday > 0
|
|
|
|
|
|
? Math.round((d.completedToday / (d.completedToday + d.scrappedToday)) * 1000) / 10
|
|
|
|
|
|
: 100,
|
|
|
|
|
|
equipment_util_rate: d.activeJobCount ?? 0,
|
|
|
|
|
|
active_alarms: d.stationFaultCount ?? 0,
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function fetchOverview(): Promise<OverviewData> {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const r = await mesApi.get('/dashboard/overview');
|
|
|
|
|
|
return mapMesOverview(r.data);
|
|
|
|
|
|
} catch {
|
|
|
|
|
|
// 回退旧接口(保留兼容)
|
|
|
|
|
|
return api.get('/overview').then(r => r.data);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// MES 内部 API 优先,失败回退旧接口(本地兜底服务 :3001)
|
|
|
|
|
|
async function fromMes<T>(path: string, fallbackPath?: string): Promise<T | null> {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const r = await mesApi.get(`/dashboard/${path}`);
|
|
|
|
|
|
return r.data as T;
|
|
|
|
|
|
} catch {
|
|
|
|
|
|
if (!fallbackPath) return null;
|
|
|
|
|
|
try {
|
|
|
|
|
|
const r = await api.get(fallbackPath);
|
|
|
|
|
|
return r.data as T;
|
|
|
|
|
|
} catch {
|
|
|
|
|
|
return null;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-08-27 10:09:54 +08:00
|
|
|
|
interface DashboardState {
|
|
|
|
|
|
// Page 1: Overview
|
|
|
|
|
|
overview: OverviewData | null;
|
|
|
|
|
|
equipment: EquipmentItem[];
|
|
|
|
|
|
progress: ProgressItem[];
|
|
|
|
|
|
alarms: AlarmItem[];
|
|
|
|
|
|
trends: TrendItem[];
|
|
|
|
|
|
samplingOverview: SamplingOverview | null;
|
|
|
|
|
|
samplingTrends: SamplingTrendItem[];
|
|
|
|
|
|
inspectionOverview: InspectionOverview | null;
|
|
|
|
|
|
inspectionTrends: InspectionTrendItem[];
|
|
|
|
|
|
loading: boolean;
|
|
|
|
|
|
|
|
|
|
|
|
// Page 2: Machine Monitor
|
|
|
|
|
|
devStatus: DevStatus[];
|
|
|
|
|
|
cncLatest: CncDisplay[];
|
|
|
|
|
|
washerLatest: WasherPoint[];
|
|
|
|
|
|
cncHistory: CncHistoryPoint[];
|
|
|
|
|
|
cncOee: CncOeeItem[];
|
|
|
|
|
|
washerOee: WasherOeeItem[];
|
|
|
|
|
|
monitorLoading: boolean;
|
|
|
|
|
|
|
|
|
|
|
|
fetchAll: () => Promise<void>;
|
|
|
|
|
|
refresh: () => Promise<void>;
|
|
|
|
|
|
fetchMonitor: () => Promise<void>;
|
|
|
|
|
|
refreshMonitor: () => Promise<void>;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export const useStore = create<DashboardState>((set) => ({
|
|
|
|
|
|
// Page 1 state
|
|
|
|
|
|
overview: null,
|
|
|
|
|
|
equipment: [],
|
|
|
|
|
|
progress: [],
|
|
|
|
|
|
alarms: [],
|
|
|
|
|
|
trends: [],
|
|
|
|
|
|
samplingOverview: null,
|
|
|
|
|
|
samplingTrends: [],
|
|
|
|
|
|
inspectionOverview: null,
|
|
|
|
|
|
inspectionTrends: [],
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
|
|
|
|
|
|
// Page 2 state
|
|
|
|
|
|
devStatus: [],
|
|
|
|
|
|
cncLatest: [],
|
|
|
|
|
|
washerLatest: [],
|
|
|
|
|
|
cncHistory: [],
|
|
|
|
|
|
cncOee: [],
|
|
|
|
|
|
washerOee: [],
|
|
|
|
|
|
monitorLoading: false,
|
|
|
|
|
|
|
|
|
|
|
|
fetchAll: async () => {
|
|
|
|
|
|
set({ loading: true });
|
|
|
|
|
|
try {
|
|
|
|
|
|
const [overview, equipment, progress, alarms, trends, cncLatest, samplingOverview, samplingTrends, inspectionOverview, inspectionTrends] =
|
|
|
|
|
|
await Promise.all([
|
2026-08-27 19:50:57 +08:00
|
|
|
|
fetchOverview(),
|
|
|
|
|
|
fromMes<EquipmentItem[]>('equipment', '/equipment-status').then(v => v ?? []),
|
|
|
|
|
|
fromMes<ProgressItem[]>('progress', '/production-progress').then(v => v ?? []),
|
|
|
|
|
|
fromMes<AlarmItem[]>('alarms', '/alarms').then(v => v ?? []),
|
|
|
|
|
|
fromMes<TrendItem[]>('trends', '/trends').then(v => v ?? []),
|
|
|
|
|
|
api.get('/cnc-latest').then(r => r.data).catch(() => []),
|
|
|
|
|
|
api.get('/sampling-overview').then(r => r.data).catch(() => null),
|
|
|
|
|
|
api.get('/sampling-trends').then(r => r.data).catch(() => []),
|
|
|
|
|
|
api.get('/inspection-overview').then(r => r.data).catch(() => null),
|
|
|
|
|
|
api.get('/inspection-trends').then(r => r.data).catch(() => []),
|
2026-08-27 10:09:54 +08:00
|
|
|
|
]);
|
|
|
|
|
|
set({ overview, equipment, progress, alarms, trends, cncLatest, samplingOverview, samplingTrends, inspectionOverview, inspectionTrends, loading: false });
|
|
|
|
|
|
} catch {
|
|
|
|
|
|
set({ loading: false });
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
refresh: async () => {
|
|
|
|
|
|
try {
|
2026-08-27 19:50:57 +08:00
|
|
|
|
const [overview, equipment, alarms, trends, cncLatest, samplingOverview, inspectionOverview] = await Promise.all([
|
|
|
|
|
|
fetchOverview(),
|
|
|
|
|
|
fromMes<EquipmentItem[]>('equipment', '/equipment-status'),
|
|
|
|
|
|
fromMes<AlarmItem[]>('alarms', '/alarms'),
|
|
|
|
|
|
fromMes<TrendItem[]>('trends', '/trends'),
|
|
|
|
|
|
api.get('/cnc-latest').then(r => r.data).catch(() => undefined),
|
|
|
|
|
|
api.get('/sampling-overview').then(r => r.data).catch(() => undefined),
|
|
|
|
|
|
api.get('/inspection-overview').then(r => r.data).catch(() => undefined),
|
2026-08-27 10:09:54 +08:00
|
|
|
|
]);
|
2026-08-27 19:50:57 +08:00
|
|
|
|
set((prev) => ({
|
|
|
|
|
|
overview,
|
|
|
|
|
|
...(equipment !== null ? { equipment } : {}),
|
|
|
|
|
|
...(alarms !== null ? { alarms } : {}),
|
|
|
|
|
|
...(trends !== null ? { trends } : {}),
|
|
|
|
|
|
...(cncLatest !== undefined ? { cncLatest } : {}),
|
|
|
|
|
|
...(samplingOverview !== undefined ? { samplingOverview } : {}),
|
|
|
|
|
|
...(inspectionOverview !== undefined ? { inspectionOverview } : {}),
|
|
|
|
|
|
}));
|
2026-08-27 10:09:54 +08:00
|
|
|
|
} catch { /* ignore */ }
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
fetchMonitor: async () => {
|
|
|
|
|
|
set({ monitorLoading: true });
|
|
|
|
|
|
try {
|
|
|
|
|
|
const [devStatus, cncLatest, washerLatest, cncOee, washerOee] = await Promise.all([
|
|
|
|
|
|
api.get('/device-status').then(r => r.data),
|
|
|
|
|
|
api.get('/cnc-latest').then(r => r.data),
|
|
|
|
|
|
api.get('/washer-latest').then(r => r.data),
|
|
|
|
|
|
api.get('/cnc-oee').then(r => r.data),
|
|
|
|
|
|
api.get('/washer-oee').then(r => r.data),
|
|
|
|
|
|
]);
|
|
|
|
|
|
set({ devStatus, cncLatest, washerLatest, cncOee, washerOee, monitorLoading: false });
|
|
|
|
|
|
} catch {
|
|
|
|
|
|
set({ monitorLoading: false });
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
refreshMonitor: async () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const [devStatus, cncLatest, washerLatest, cncOee, washerOee] = await Promise.all([
|
|
|
|
|
|
api.get('/device-status').then(r => r.data),
|
|
|
|
|
|
api.get('/cnc-latest').then(r => r.data),
|
|
|
|
|
|
api.get('/washer-latest').then(r => r.data),
|
|
|
|
|
|
api.get('/cnc-oee').then(r => r.data),
|
|
|
|
|
|
api.get('/washer-oee').then(r => r.data),
|
|
|
|
|
|
]);
|
|
|
|
|
|
set({ devStatus, cncLatest, washerLatest, cncOee, washerOee });
|
|
|
|
|
|
} catch { /* ignore */ }
|
|
|
|
|
|
},
|
|
|
|
|
|
}));
|