<script setup lang="ts">
|
import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';
|
|
import { message } from 'ant-design-vue';
|
import { IconifyIcon } from '@vben/icons';
|
import { gsap } from 'gsap';
|
|
import {
|
getLatestScanEvent,
|
getScanDashboard,
|
getScanEventPage,
|
inboundScanEvent,
|
type MesProScanEventApi,
|
} from '#/api/mes/pro/scanEvent';
|
|
interface ScanRecord extends MesProScanEventApi.ScanEvent {
|
key: number;
|
}
|
|
const code = ref('');
|
const deviceCode = ref('');
|
const lineCode = ref('');
|
const locationId = ref<number>();
|
const areaId = ref<number>();
|
const loading = ref(false);
|
const refreshing = ref(false);
|
const records = ref<ScanRecord[]>([]);
|
const dashboard = ref<MesProScanEventApi.Dashboard>({});
|
let timer: ReturnType<typeof setInterval> | undefined;
|
|
const latest = computed(() => dashboard.value.latest);
|
const successCount = computed(() => dashboard.value.success ?? records.value.filter((item) => item.status === 'SUCCESS').length);
|
const failedCount = computed(() => dashboard.value.failed ?? records.value.filter((item) => item.status === 'FAILED').length);
|
const isReady = computed(() => Boolean(deviceCode.value.trim() && locationId.value && areaId.value));
|
const pageRoot = ref<HTMLElement>();
|
let animationContext: gsap.Context | undefined;
|
let feedbackTimeline: gsap.core.Timeline | undefined;
|
|
async function refresh() {
|
refreshing.value = true;
|
try {
|
const [summary, page] = await Promise.all([
|
getScanDashboard(),
|
getScanEventPage({ pageNo: 1, pageSize: 20, deviceCode: deviceCode.value.trim() || undefined }),
|
]);
|
dashboard.value = summary;
|
records.value = (page.list ?? []).map((item, index) => ({ ...item, key: item.id ?? index }));
|
} finally {
|
refreshing.value = false;
|
}
|
}
|
|
async function submitScan() {
|
const bagCode = code.value.trim();
|
if (!bagCode || !deviceCode.value.trim()) {
|
message.warning('请先填写设备编码，再扫描袋码');
|
return;
|
}
|
if (!locationId.value || !areaId.value) {
|
message.warning('请先配置 WIP 暂存库区和库位');
|
return;
|
}
|
loading.value = true;
|
try {
|
await inboundScanEvent({
|
eventId: `${deviceCode.value.trim()}-${Date.now()}`,
|
bagCode,
|
quantity: 1,
|
deviceCode: deviceCode.value.trim(),
|
lineCode: lineCode.value.trim() || undefined,
|
locationId: locationId.value,
|
areaId: areaId.value,
|
});
|
message.success(`袋码 ${bagCode} 已完成入库`);
|
if (animationContext && pageRoot.value && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
feedbackTimeline?.kill();
|
feedbackTimeline = gsap.timeline();
|
feedbackTimeline
|
.to('.scan-ring', { scale: 1.16, duration: 0.18, ease: 'power2.out' })
|
.to('.scan-ring', { scale: 1, duration: 0.5, ease: 'elastic.out(1, 0.45)' })
|
.to('.scan-card', { boxShadow: '0 0 0 3px #b7ebd2, 0 12px 30px #20b87820', duration: 0.2 }, 0)
|
.to('.scan-card', { boxShadow: '0 3px 12px #243b5310', duration: 0.65 });
|
}
|
code.value = '';
|
await refresh();
|
} catch (error) {
|
const response = error as { message?: string; msg?: string };
|
message.error(response.message ?? response.msg ?? '扫码入库失败，请查看事件记录');
|
await refresh();
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
async function refreshLatest() {
|
if (deviceCode.value.trim()) await getLatestScanEvent(deviceCode.value.trim());
|
await refresh();
|
}
|
|
onMounted(async () => {
|
await nextTick();
|
if (pageRoot.value) {
|
animationContext = gsap.context(() => {
|
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
gsap.from('.page-header, .metric-card, .scan-card, .status-card, .records-card', {
|
autoAlpha: reduceMotion ? 1 : 0,
|
y: reduceMotion ? 0 : 14,
|
duration: reduceMotion ? 0 : 0.45,
|
stagger: reduceMotion ? 0 : 0.06,
|
ease: 'power2.out',
|
});
|
if (!reduceMotion) {
|
gsap.to('.status-dot', {
|
scale: 1.12,
|
boxShadow: '0 0 0 5px #d9f7e9',
|
duration: 1.2,
|
repeat: -1,
|
yoyo: true,
|
ease: 'sine.inOut',
|
});
|
gsap.to('.scan-ring', {
|
boxShadow: '0 0 0 10px #eaf3ff, 0 0 24px #1677ff30',
|
duration: 1.8,
|
repeat: -1,
|
yoyo: true,
|
ease: 'sine.inOut',
|
});
|
}
|
}, pageRoot.value);
|
}
|
await refresh();
|
timer = setInterval(refreshLatest, 15000);
|
});
|
|
onBeforeUnmount(() => {
|
if (timer) clearInterval(timer);
|
});
|
|
onUnmounted(() => {
|
feedbackTimeline?.kill();
|
animationContext?.revert();
|
});
|
</script>
|
|
<template>
|
<div ref="pageRoot" class="scan-page">
|
<header class="page-header">
|
<div>
|
<div class="eyebrow">MES / 一袋一码管理</div>
|
<h1>生产线扫码入库</h1>
|
<p>实时接收边缘设备解码结果，自动登记入库并同步 WIP 暂存库存</p>
|
</div>
|
<div class="header-status"><span class="status-dot" aria-hidden="true" /><span>实时监控中</span> <a-button type="text" :loading="refreshing" aria-label="刷新数据" @click="refresh"><IconifyIcon icon="ant-design:reload-outlined" /></a-button></div>
|
</header>
|
|
<section class="metric-grid" aria-label="入库统计">
|
<div class="metric-card"><div class="metric-icon blue"><IconifyIcon icon="ant-design:scan-outlined" /></div><div><span>累计扫码事件</span><strong>{{ dashboard.total ?? 0 }}</strong><small>持续接收</small></div></div>
|
<div class="metric-card"><div class="metric-icon green"><IconifyIcon icon="ant-design:check-circle-outlined" /></div><div><span>成功入库</span><strong>{{ successCount }}</strong><small>已写入库存事务</small></div></div>
|
<div class="metric-card"><div class="metric-icon red"><IconifyIcon icon="ant-design:warning-outlined" /></div><div><span>失败事件</span><strong>{{ failedCount }}</strong><small>需关注异常记录</small></div></div>
|
<div class="metric-card"><div class="metric-icon orange"><IconifyIcon icon="ant-design:inbox-outlined" /></div><div><span>最近入库袋码</span><strong class="text-value">{{ latest?.bagCode ?? '-' }}</strong><small>{{ latest?.eventTime ?? '暂无记录' }}</small></div></div>
|
</section>
|
|
<section class="main-grid">
|
<a-card class="scan-card" :bordered="false">
|
<template #title><div class="card-title"><IconifyIcon icon="ant-design:scan-outlined" />扫码入库 <a-tag color="blue">自动模式</a-tag></div></template>
|
<div class="scan-panel">
|
<div class="scan-intro"><div class="scan-ring"><IconifyIcon icon="ant-design:scan-outlined" /></div><div><h2>等待扫码</h2><p>将袋码对准工业相机，或使用扫码枪扫描后回车确认</p></div></div>
|
<a-input-search v-model:value="code" class="scan-input" size="large" enter-button="确认入库" :loading="loading" :disabled="loading" placeholder="请扫描袋码，扫码枪回车后自动入库" @search="submitScan" />
|
<div class="scan-hint"><IconifyIcon icon="ant-design:clock-circle-outlined" /> 服务端记录准确入库时间 <span>·</span> <IconifyIcon icon="ant-design:inbox-outlined" /> 每袋数量按 1 计</div>
|
</div>
|
<a-divider />
|
<a-form layout="vertical" class="config-form">
|
<a-form-item label="设备编码" required><a-input v-model:value="deviceCode" prefix="设备" placeholder="例如：CAM-LINE-01" /></a-form-item>
|
<a-form-item label="产线编码"><a-input v-model:value="lineCode" placeholder="例如：LINE-A" /></a-form-item>
|
<a-form-item label="WIP 暂存库区" required><a-input-number v-model:value="locationId" class="full-width" :min="1" placeholder="库区编号" /></a-form-item>
|
<a-form-item label="WIP 暂存库位" required><a-input-number v-model:value="areaId" class="full-width" :min="1" placeholder="库位编号" /></a-form-item>
|
</a-form>
|
</a-card>
|
|
<a-card class="status-card" :bordered="false">
|
<template #title><div class="card-title"><ApiOutlined />采集设备状态</div></template>
|
<div class="device-state"><span class="online-badge"><span class="status-dot" aria-hidden="true" /><span>{{ isReady ? '设备已就绪' : '等待配置' }}</span></span><span class="muted">15 秒自动刷新</span></div>
|
<div class="status-list"><div><span>当前设备</span><strong>{{ deviceCode || '未配置' }}</strong></div><div><span>生产产线</span><strong>{{ lineCode || '未配置' }}</strong></div><div><span>暂存位置</span><strong>{{ locationId && areaId ? `${locationId} 区 / ${areaId} 位` : '未配置' }}</strong></div><div><span>最近入库时间</span><strong>{{ latest?.eventTime || '-' }}</strong></div><div><span>最近生产批次</span><strong>{{ latest?.batchCode || '-' }}</strong></div></div>
|
<div class="sync-box"><IconifyIcon icon="ant-design:check-circle-outlined" /><div><strong>仓储系统同步正常</strong><span>扫码事件与库存事务实时写入</span></div></div>
|
</a-card>
|
</section>
|
|
<a-card class="records-card" :bordered="false">
|
<template #title><div class="card-title"><IconifyIcon icon="ant-design:clock-circle-outlined" />最近扫码事件 <span class="record-count">最近 20 条</span></div></template>
|
<a-table :data-source="records" :pagination="false" :scroll="{ x: 1050 }" row-key="key" size="middle">
|
<a-table-column key="bagCode" title="袋码" data-index="bagCode" /><a-table-column key="batchCode" title="生产批次" data-index="batchCode" /><a-table-column key="deviceCode" title="设备 / 产线"><template #default="{ record }">{{ record.deviceCode || '-' }}<span class="sub-text">{{ record.lineCode || '-' }}</span></template></a-table-column>
|
<a-table-column key="status" title="状态"><template #default="{ record }"><a-tag :color="record.status === 'SUCCESS' ? 'success' : 'error'">{{ record.status === 'SUCCESS' ? '成功入库' : '失败' }}</a-tag></template></a-table-column><a-table-column key="errorCode" title="错误码" data-index="errorCode" /><a-table-column key="errorMessage" title="失败原因" data-index="errorMessage" /><a-table-column key="eventTime" title="处理时间" data-index="eventTime" /><a-table-column key="transactionId" title="库存事务" data-index="transactionId" />
|
</a-table>
|
</a-card>
|
</div>
|
</template>
|
|
<style scoped>
|
.scan-page { min-height: 100%; padding: 24px; background: #f4f7fb; color: #172033; }
|
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
|
.eyebrow { color: #1677ff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
|
h1 { margin: 6px 0; font-size: 28px; font-weight: 700; } .page-header p { margin: 0; color: #718096; }
|
.header-status, .device-state { display: flex; align-items: center; gap: 10px; color: #16835b; font-size: 13px; font-weight: 600; }.header-status :deep(.ant-btn) { color: #607089; }
|
.status-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; margin: 0 2px 0 1px; border-radius: 50%; background: #20b878; box-shadow: 0 0 0 4px #d9f7e9; transform-origin: center; }
|
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }.metric-card { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid #e8edf5; border-radius: 10px; box-shadow: 0 3px 12px #243b5310; }.metric-card > div:last-child { min-width: 0; padding-top: 1px; }.metric-icon { flex: 0 0 42px; display: grid; place-items: center; width: 42px; height: 42px; margin-top: 1px; border-radius: 9px; font-size: 20px; }.metric-icon.blue { color: #1677ff; background: #eaf3ff; }.metric-icon.green { color: #17a673; background: #e6f8f0; }.metric-icon.red { color: #e05252; background: #fff0f0; }.metric-icon.orange { color: #d58a17; background: #fff6df; }.metric-card span, .metric-card small { display: block; color: #7b8799; font-size: 12px; }.metric-card strong { display: block; margin: 4px 0; font-size: 25px; line-height: 1.1; }.metric-card .text-value { overflow: hidden; max-width: 180px; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
|
.main-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr); gap: 18px; margin-bottom: 18px; }.scan-card, .status-card, .records-card { border-radius: 10px; box-shadow: 0 3px 12px #243b5310; }.card-title { display: flex; align-items: center; gap: 10px; min-height: 24px; font-weight: 700; }.card-title :deep(.iconify) { flex: 0 0 auto; margin-top: 1px; }.card-title :deep(.anticon) { color: #1677ff; }.card-title .ant-tag { margin-left: 4px; font-weight: 500; }.scan-panel { padding: 8px 0 4px; }.scan-intro { display: flex; align-items: center; gap: 16px; margin: 4px 0 22px; }.scan-ring { display: grid; place-items: center; width: 58px; height: 58px; margin: 4px 2px 4px 4px; border: 1px solid #b9d5ff; border-radius: 50%; color: #1677ff; background: #f1f7ff; font-size: 25px; }.scan-intro h2 { margin: 0 0 7px; font-size: 19px; line-height: 1.35; }.scan-intro p { margin: 0; color: #7b8799; font-size: 13px; }.scan-input :deep(input) { height: 50px; font-size: 16px; }.scan-input :deep(.ant-input-group-addon .ant-btn) { height: 50px; font-weight: 600; }.scan-hint { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding-left: 2px; color: #8793a5; font-size: 12px; line-height: 1.5; }.scan-hint span { margin: 0 2px; color: #b7c0cd; }.config-form { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 18px; }.config-form :deep(.ant-form-item) { margin-bottom: 14px; }.full-width { width: 100%; }
|
.device-state { justify-content: space-between; margin-bottom: 20px; }.online-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; color: #16835b; white-space: nowrap; }.muted, .sub-text { color: #8793a5; font-size: 12px; }.status-list { border-top: 1px solid #edf0f5; }.status-list div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0f5; font-size: 13px; }.status-list span { color: #7b8799; }.status-list strong { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }.sync-box { display: flex; gap: 10px; margin-top: 20px; padding: 12px; border-radius: 7px; color: #16835b; background: #effaf5; }.sync-box div { display: flex; flex-direction: column; gap: 3px; }.sync-box span { color: #5f8b76; font-size: 12px; }.record-count { margin-left: 4px; color: #9aa5b5; font-size: 12px; font-weight: 400; }.sub-text { display: block; margin-top: 3px; }
|
@media (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.main-grid { grid-template-columns: 1fr; } }
|
@media (max-width: 600px) { .scan-page { padding: 14px; }.page-header { display: block; }.header-status { margin-top: 14px; }.metric-grid { grid-template-columns: 1fr; }.config-form { grid-template-columns: 1fr; } h1 { font-size: 23px; } }
|
</style>
|
