Skip to content

A
AiQIDashboard
Commit 5febff30 authored by 崔婷婷's avatar 崔婷婷
Browse files
Options

接口修改 v2

parent 472c0975
Show whitespace changes
Inline Side-by-side
Showing with 212 additions and 238 deletions
src/components/QcDashboard.vue
View file @ 5febff30
<template>
<div class="dashboard">
<!-- ======== 顶部信息栏（5.1） ======== -->
<!-- ======== 顶部信息栏 ======== -->
<header class="header">
<div class="header-left">
<span class="meta-item">批次号：<em>{{ batch.batch_id }}</em></span>
<span class="meta-item">产品类型：<em>{{ batch.product_type }}</em></span>
<span class="meta-item">产品型号：<em>{{ batch.product_type }}</em></span>
<span class="meta-item">系列：<em>{{ batch.series }}</em></span>
<span class="meta-item">工位：<em>{{ workstation.workstation_id }}</em></span>
<span class="meta-item">员工ID：<em>{{ operator.operator_id }}</em></span>
<span class="meta-item">开始时间：<em>{{ fmtCycleTime }}</em></span>
<span class="meta-item">开始时间：<em>{{ fmtProductTime }}</em></span>
</div>
<h1 class="title">飞天兔AI行为引导系统</h1>
<div class="header-right">
<span class="meta-item">当前工序：<em>{{ currentStepName }}</em></span>
<span class="meta-item">{{ currentTime }}</span>
<span class="meta-item">系统编号：<em>{{ cycleId }}</em></span>
<span class="meta-item">产品序号：<em>{{ productId }}</em></span>
</div>
</header>
<!-- ======== 系统状态栏（5.5） ======== -->
<!-- ======== 系统状态栏 ======== -->
<div class="system-bar">
<span class="sys-item">FPS：<em>{{ system.fps }}</em></span>
<span class="sys-item">推理耗时：<em>{{ system.inference_ms }}ms</em></span>
......@@ -28,50 +28,45 @@
<em>{{ system.camera_connected ? '已连接' : '断开' }}</em>
</span>
<span v-if="wsReconnecting" class="sys-item warn">重连中 {{ wsReconnectAttempt }}/{{ isFinite(wsReconnectMax) ? wsReconnectMax : '∞' }}…</span>
<span v-if="stats.skip_missing_count > 0" class="sys-item warn">跳步违规：<em>{{ stats.skip_missing_count }}</em> 次</span>
</div>
<main class="main">
<!-- ======== 左侧：视频 + 工序进度指示（5.2） ======== -->
<!-- ======== 左侧：视频画面 ======== -->
<section class="panel video-panel">
<div class="video-wrap">
<img :src="videoUrl" class="video-stream" />
<span class="video-label">MJPEG 实时画面</span>
</div>
<!--
<div class="step-mini-grid" :style="{ gridTemplateColumns: `repeat(${displaySteps.length}, 1fr)` }">
<div
v-for="s in displaySteps"
:key="s.step_index"
class="step-mini-item"
:class="miniItemClass(s)"
>
<span class="step-mini-no">{{ s.step_index }}</span>
<span class="step-mini-name">{{ s.step_name }}</span>
<span class="badge step-mini-badge" :class="statusBadgeClass(s.status)">{{ statusLabel(s.status) }}</span>
</div>
</div>
-->
</section>
<!-- ======== 右侧：SOP 工序列表（5.3）+ 状态环 + 统计（5.4） ======== -->
<!-- ======== 右侧：SOP 工序列表 + 状态环 + 统计 ======== -->
<section class="info-panel">
<div class="panel steps-card">
<div class="card-header">
<span>工序明细</span>
<span class="progress-count">{{ passedCount }}/{{ displaySteps.length }}</span>
<span class="progress-count">{{ completedCount }}/{{ displaySteps.length }}</span>
</div>
<div class="table-wrap">
<div class="steps-header">
<span>NO</span>
<span>工序</span>
<span>时长(s)</span>
<span>帧进度</span>
<span>状态</span>
</div>
<div class="steps-body">
<div v-for="s in displaySteps" :key="s.step_index" class="step-row">
<div
v-for="s in displaySteps"
:key="s.step_index"
class="step-row"
:class="{ 'row-skip': s.anomaly_type === 'skip_missing' }"
>
<span>{{ s.step_index }}</span>
<span>{{ s.step_name }}</span>
<span class="duration-cell">{{ s.display_duration.toFixed(1) }}/{{ s.target_duration.toFixed(1) }}</span>
<span>
{{ s.step_name }}
<i v-if="s.anomaly_type === 'skip_missing'" class="skip-icon" title="跳步缺失">⚠</i>
</span>
<span class="duration-cell">{{ s.framesText }}</span>
<span class="badge" :class="statusBadgeClass(s.status)">{{ statusLabel(s.status) }}</span>
</div>
</div>
......@@ -88,7 +83,7 @@
<ul class="status-detail">
<li><span>整双结果</span><em :class="resultClass">{{ resultLabel }}</em></li>
<li><span>结束类型</span><em :class="endTypeClass">{{ endTypeLabel }}</em></li>
<li><span>周期耗时</span><em>{{ cycleDuration.toFixed(1) }}s</em></li>
<li><span>产品耗时</span><em>{{ productDuration.toFixed(1) }}s</em></li>
</ul>
</div>
......@@ -98,22 +93,22 @@
<span class="stat-value accent">{{ stats.pass_rate_pct }}%</span>
</div>
<div class="panel stat-card">
<span class="stat-label">平均耗时</span>
<span class="stat-value accent">{{ stats.avg_duration }}s</span>
<span class="stat-label">总数</span>
<span class="stat-value accent">{{ stats.total_products }}</span>
</div>
<div class="panel stat-card">
<span class="stat-label">不通过双数</span>
<span class="stat-value warn">{{ stats.failed_cycles }}</span>
<span class="stat-label">平均耗时</span>
<span class="stat-value">{{ stats.avg_duration }}s</span>
</div>
<div class="panel stat-card">
<span class="stat-label">总双数</span>
<span class="stat-value">{{ stats.total_cycles }}</span>
<span class="stat-label">跳步次数</span>
<span class="stat-value warn">{{ stats.skip_missing_count }}</span>
</div>
</div>
</section>
</main>
<!-- 跳步/错误弹窗 -->
<!-- 跳步/错误 Toast -->
<Teleport to="body">
<div v-if="alertMsg" class="alert-toast" :class="alertMsg.level" @click="alertMsg = null">
<span>{{ alertMsg.text }}</span>
......@@ -126,37 +121,38 @@
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { connect } from '../ws/index.js'
// ==================== 数据模型（按文档 2.1~2.9） ====================
// ==================== 数据模型（v2） ====================
// 2.1 工位
// 工位 / 操作员 / 批次
const workstation = reactive({ workstation_id: '-', name: '-', area: '-', line: '-' })
// 2.2 操作员
const operator = reactive({ operator_id: '-', name: '-' })
// 2.3 批次
const batch = reactive({ batch_id: '-', product_type: '-', series: '-', started_at: '-' })
// 2.4 工序配置
// 2.1 工序配置
const stepConfigs = ref([])
// 2.7 周期
const cycleId = ref('-')
const cycleResult = ref(null) // 'pass' | 'fail' | null
const cycleEndType = ref(null) // 'flow_complete' | 'timeout' | 'material_change' | 'manual_reset' | null
const cycleDuration = ref(0)
const cycleStartedAt = ref('')
const passedCount = ref(0)
// 2.4/2.5 产品
const productId = ref('-')
const productResult = ref(null) // 'pass' | 'fail' | null
const productEndType = ref(null) // 'flow_complete' | 'timeout' | 'material_change' | 'manual_reset' | null
const productDuration = ref(0)
const productStartedAt = ref('')
const currentStepIndex = ref(1)
// 2.5 + 2.6 工序状态 → stepStates[step_index] = { status, actual_duration }
// 工序状态 → stepStates[step_index] = { status, anomaly_type, best_confidence }
const stepStates = reactive({})
// 3.3.4 step_progress → 当前 active 工序实时进度
const activeProgress = reactive({ step_index: 0, current_duration: 0, target_duration: 0, progress: 0 })
// 2.8 统计
// 3.3 step_progress → 当前 active 工序实时的帧进度
const activeProgress = reactive({ step_index: 0, consecutive_frames: 0, target_frames: 0, best_confidence: 0 })
// 2.6 统计
const stats = reactive({
total_cycles: 0, passed_cycles: 0, failed_cycles: 0,
total_products: 0, passed_products: 0, failed_products: 0,
pass_rate: 0, pass_rate_pct: 0, avg_duration: 0,
skip_missing_count: 0, ai_misrecognition_count: 0,
})
// 2.9 系统状态
// 2.7 系统状态
const system = reactive({
fps: 0, inference_ms: 0, model_loaded: false,
model_version: '-', camera_connected: false,
......@@ -179,16 +175,27 @@ let clockTimer = null
// 合并 step_configs + stepStates + activeProgress → 展示行
const displaySteps = computed(() => stepConfigs.value.map(cfg => {
const state = stepStates[cfg.step_index] || { status: 'pending', actual_duration: 0 }
const state = stepStates[cfg.step_index] || { status: 'pending', anomaly_type: 'none' }
const isActive = state.status === 'active'
const isCompleted = state.status === 'completed' || state.status === 'incomplete'
// 帧进度文本
let framesText = '-'
if (isActive && activeProgress.target_frames > 0) {
framesText = `${activeProgress.consecutive_frames}/${activeProgress.target_frames}`
} else if (isActive) {
framesText = '...'
} else if (isCompleted) {
framesText = '已完成'
}
return {
step_index: cfg.step_index,
step_code: cfg.step_code,
step_name: cfg.step_name,
target_duration: cfg.pass_duration,
window_timeout: cfg.window_timeout,
status: state.status,
display_duration: isActive ? activeProgress.current_duration : (state.actual_duration || 0),
anomaly_type: state.anomaly_type || 'none',
framesText,
}
}))
......@@ -197,77 +204,78 @@ const currentStepName = computed(() => {
return cs ? cs.step_name : '-'
})
// 格式化 cycleStartedAt（ISO 8601 → HH:MM:SS）
const fmtCycleTime = computed(() => {
if (!cycleStartedAt.value) return '-'
// "2026-07-09T08:42:05+08:00" → 取 T 后面的 HH:MM:SS
const m = cycleStartedAt.value.match(/T(\d{2}:\d{2}:\d{2})/)
const completedCount = computed(() =>
displaySteps.value.filter(s => s.status === 'completed' || s.status === 'incomplete').length
)
// 格式化 started_at → HH:MM:SS
const fmtProductTime = computed(() => {
if (!productStartedAt.value) return '-'
const m = productStartedAt.value.match(/T(\d{2}:\d{2}:\d{2})/)
return m ? m[1] : '-'
})
// 状态环
const ringMainText = computed(() => {
if (cycleEndType.value) return cycleResult.value === 'pass' ? '通过' : '不通过'
if (productEndType.value) return productResult.value === 'pass' ? '通过' : '不通过'
if (activeProgress.step_index > 0) return '检测中'
return '待机'
})
const ringSubText = computed(() => {
if (cycleEndType.value) return endTypeLabel.value
const pct = activeProgress.progress || 0
return `${Math.round(pct * 100)}%`
if (productEndType.value) return endTypeLabel.value
if (activeProgress.target_frames > 0) {
return `${Math.round((activeProgress.consecutive_frames / activeProgress.target_frames) * 100)}%`
}
return ''
})
const ringMainClass = computed(() => {
if (!cycleEndType.value) return ''
return cycleResult.value === 'pass' ? 'ring-pass' : 'ring-fail'
if (!productEndType.value) return ''
return productResult.value === 'pass' ? 'ring-pass' : 'ring-fail'
})
const ringStyle = computed(() => {
if (cycleEndType.value) {
const color = cycleResult.value === 'pass' ? '#34d399' : '#f87171'
if (productEndType.value) {
const color = productResult.value === 'pass' ? '#34d399' : '#f87171'
return { background: color }
}
const pct = Math.min(100, (activeProgress.progress || 0) * 100)
if (activeProgress.target_frames > 0) {
const pct = Math.min(100, (activeProgress.consecutive_frames / activeProgress.target_frames) * 100)
return { background: `conic-gradient(#3ddc84 ${pct}%, rgba(255,255,255,0.08) ${pct}%)` }
}
return { background: 'rgba(255,255,255,0.08)' }
})
// 结果 / 结束类型中文
const resultLabel = computed(() => {
if (cycleResult.value === 'pass') return '通过'
if (cycleResult.value === 'fail') return '不通过'
if (productResult.value === 'pass') return '通过'
if (productResult.value === 'fail') return '不通过'
return '-'
})
const resultClass = computed(() => {
if (cycleResult.value === 'pass') return 'text-pass'
if (cycleResult.value === 'fail') return 'text-fail'
if (productResult.value === 'pass') return 'text-pass'
if (productResult.value === 'fail') return 'text-fail'
return ''
})
const endTypeLabel = computed(() => {
const map = { flow_complete: '流程结束', timeout: '超时结束', material_change: '物料切换', manual_reset: '手动复位' }
return map[cycleEndType.value] || '-'
return map[productEndType.value] || '-'
})
const endTypeClass = computed(() => cycleEndType.value === 'timeout' ? 'text-fail' : '')
const endTypeClass = computed(() => productEndType.value === 'timeout' ? 'text-fail' : '')
// ---- UI 帮助函数 ----
// UI 帮助函数
function statusLabel(s) {
const map = { pending: '待检', active: '进行中', pass: '通过', fail: '未达标', missing: '缺失' }
const map = { pending: '待检', active: '进行中', completed: '已完成', incomplete: '未完成' }
return map[s] || s
}
function statusBadgeClass(s) {
if (s === 'active') return 'badge-progress'
if (s === 'pass') return 'badge-pass'
if (s === 'fail' || s === 'missing') return 'badge-fail'
if (s === 'completed') return 'badge-pass'
if (s === 'incomplete') return 'badge-fail'
return 'badge-wait'
}
function miniItemClass(s) {
return {
active: s.status === 'active',
pass: s.status === 'pass',
fail: s.status === 'fail' || s.status === 'missing',
}
}
// ==================== 时钟 ====================
function updateClock() {
......@@ -280,133 +288,146 @@ function updateClock() {
function handleSnapshot(msg) {
const d = msg.data
// 2.1
if (d.workstation) Object.assign(workstation, d.workstation)
// 2.2
if (d.operator) Object.assign(operator, d.operator)
// 2.3
if (d.batch) Object.assign(batch, d.batch)
// 2.4
if (d.step_configs) stepConfigs.value = d.step_configs
// 2.8
if (d.stats) {
Object.assign(stats, d.stats)
stats.pass_rate_pct = Math.round(stats.pass_rate * 100)
}
// 2.9
if (d.system) Object.assign(system, d.system)
// 2.7 当前周期
if (d.current_cycle) {
applyCycle(d.current_cycle)
cycleEndType.value = d.current_cycle.end_type || null
cycleResult.value = d.current_cycle.result || null
cycleDuration.value = d.current_cycle.duration || 0
if (d.current_product) {
applyProduct(d.current_product)
productEndType.value = d.current_product.end_type || null
productResult.value = d.current_product.result || null
productDuration.value = d.current_product.duration || 0
}
}
function applyCycle(cycle) {
cycleId.value = cycle.cycle_id || '-'
cycleStartedAt.value = cycle.started_at || ''
passedCount.value = cycle.step_count_passed || 0
currentStepIndex.value = cycle.current_step_index || 1
function applyProduct(product) {
productId.value = product.product_id || '-'
productStartedAt.value = product.started_at || ''
currentStepIndex.value = product.current_step_index || 1
// 初始化 stepStates
Object.keys(stepStates).forEach(k => delete stepStates[k])
if (cycle.steps) {
cycle.steps.forEach(s => {
if (product.steps) {
product.steps.forEach(s => {
stepStates[s.step_index] = {
status: s.status,
actual_duration: s.actual_duration || 0,
anomaly_type: s.anomaly_type || 'none',
best_confidence: s.best_confidence || 0,
}
})
}
}
function handleCycleStart(msg) {
// 3.3 product_start
function handleProductStart(msg) {
const d = msg.data
cycleId.value = d.cycle_id
cycleStartedAt.value = d.started_at
cycleEndType.value = null
cycleResult.value = null
cycleDuration.value = 0
productId.value = d.product_id
productStartedAt.value = d.started_at
productEndType.value = null
productResult.value = null
productDuration.value = 0
currentStepIndex.value = d.step_index || 1
passedCount.value = 0
activeProgress.step_index = 0
activeProgress.current_duration = 0
activeProgress.progress = 0
// 重置所有步骤
Object.assign(activeProgress, { step_index: 0, consecutive_frames: 0, target_frames: 0, best_confidence: 0 })
Object.keys(stepStates).forEach(k => delete stepStates[k])
stepConfigs.value.forEach(sc => {
stepStates[sc.step_index] = { status: 'pending', actual_duration: 0 }
const isInitial = sc.step_index === (d.step_index || 1)
stepStates[sc.step_index] = {
status: isInitial ? 'active' : 'pending',
anomaly_type: 'none',
}
})
}
function handleStepUpdate(msg) {
// 3.3 step_confirmed
function handleStepConfirmed(msg) {
const d = msg.data
// 当前工序 → completed/incomplete
stepStates[d.step_index] = {
status: d.status,
actual_duration: d.actual_duration || 0,
anomaly_type: d.anomaly_type || 'none',
best_confidence: d.best_confidence || 0,
}
if (d.next_step_index) currentStepIndex.value = d.next_step_index
// 如果新工序 active，重置进度
if (d.status === 'active') {
activeProgress.step_index = d.step_index
activeProgress.current_duration = 0
activeProgress.target_duration = d.target_duration
activeProgress.progress = 0
if (d.next_step_index) {
currentStepIndex.value = d.next_step_index
// 下一道工序 → active
stepStates[d.next_step_index] = {
status: 'active',
anomaly_type: 'none',
best_confidence: 0,
}
Object.assign(activeProgress, {
step_index: d.next_step_index,
consecutive_frames: 0,
target_frames: 0,
best_confidence: 0,
})
} else {
// 最后一道，清进度
Object.assign(activeProgress, { step_index: 0, consecutive_frames: 0, target_frames: 0, best_confidence: 0 })
}
// 更新通过计数
passedCount.value = Object.values(stepStates).filter(s => s.status === 'pass').length
}
// 3.3 step_progress
function handleStepProgress(msg) {
const d = msg.data
activeProgress.step_index = d.step_index
activeProgress.current_duration = d.current_duration
activeProgress.target_duration = d.target_duration
activeProgress.progress = d.progress
// 确保工序状态为 active（防御：step_confirmed 可能尚未到达）
if (stepStates[d.step_index] && stepStates[d.step_index].status !== 'active') {
stepStates[d.step_index] = { status: 'active', anomaly_type: 'none', best_confidence: 0 }
}
Object.assign(activeProgress, {
step_index: d.step_index,
consecutive_frames: d.consecutive_frames,
target_frames: d.target_frames,
best_confidence: d.best_confidence,
})
}
function handleCycleEnd(msg) {
// 3.3 product_end
function handleProductEnd(msg) {
const d = msg.data
cycleEndType.value = d.end_type
cycleResult.value = d.result
cycleDuration.value = d.duration || 0
passedCount.value = d.step_count_passed || 0
productEndType.value = d.end_type
productResult.value = d.result
productDuration.value = d.duration || 0
// 更新最终步骤状态
if (d.steps && d.steps.length) {
d.steps.forEach(s => {
stepStates[s.step_index] = {
status: s.status,
actual_duration: s.actual_duration || 0,
anomaly_type: s.anomaly_type || 'none',
best_confidence: s.best_confidence || 0,
}
})
}
activeProgress.step_index = 0
activeProgress.progress = 0
activeProgress.current_duration = 0
Object.assign(activeProgress, { step_index: 0, consecutive_frames: 0, target_frames: 0, best_confidence: 0 })
}
// 3.3 stats_update
function handleStatsUpdate(msg) {
const d = msg.data
Object.assign(stats, d)
stats.pass_rate_pct = Math.round(d.pass_rate * 100)
}
// 3.3 system_status
function handleSystemStatus(msg) {
Object.assign(system, msg.data)
}
// 3.3 skip_detected
function handleSkipDetected(msg) {
alertMsg.value = { text: msg.data.message, level: 'warn' }
setTimeout(() => { if (alertMsg.value && alertMsg.value.text === msg.data.message) alertMsg.value = null }, 5000)
}
// 3.3 error
function handleError(msg) {
// 区分后端业务错误（有 data.code）与 WebSocket 传输层错误
if (msg.data && msg.data.code) {
alertMsg.value = { text: `[${msg.data.code}] ${msg.data.message}`, level: 'error' }
} else {
......@@ -422,13 +443,13 @@ onMounted(() => {
const ws = connect()
.on('snapshot', handleSnapshot)
.on('cycle_start', handleCycleStart)
.on('step_update', handleStepUpdate)
.on('product_start', handleProductStart)
.on('step_confirmed', handleStepConfirmed)
.on('step_progress', handleStepProgress)
.on('cycle_end', handleCycleEnd)
.on('skip_detected', handleSkipDetected)
.on('product_end', handleProductEnd)
.on('stats_update', handleStatsUpdate)
.on('system_status', handleSystemStatus)
.on('skip_detected', handleSkipDetected)
.on('error', handleError)
.on('reconnecting', (data) => {
wsReconnecting.value = true
......@@ -440,7 +461,6 @@ onMounted(() => {
wsReconnectAttempt.value = 0
})
// 挂载到组件实例，便于卸载时清理
window.__qcWs = ws
})
......@@ -471,10 +491,10 @@ onBeforeUnmount(() => {
overflow: hidden;
background: radial-gradient(circle at 20% 0%, #10224a 0%, var(--bg) 55%);
color: var(--text);
padding: clamp(8px, 1.2vw, 24px);
padding: clamp(6px, 1vw, 12px);
display: flex;
flex-direction: column;
gap: 8px;
gap: 6px;
}
/* ======== 顶部信息栏 ======== */
......@@ -484,18 +504,18 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: clamp(8px, 1vw, 14px);
gap: 8px;
background: linear-gradient(180deg, rgba(21, 42, 84, 0.9), rgba(13, 27, 58, 0.6));
border: 1px solid var(--border);
border-radius: 10px;
padding: clamp(8px, 1vw, 20px) clamp(16px, 1.6vw, 32px);
padding: clamp(8px, 1vw, 14px) clamp(14px, 1.4vw, 24px);
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: clamp(18px, 1.6vw, 34px);
font-size: clamp(18px, 1.6vw, 30px);
font-weight: 700;
letter-spacing: 2px;
color: #fff;
......@@ -507,9 +527,9 @@ onBeforeUnmount(() => {
.header-left,
.header-right {
display: flex;
gap: clamp(12px, 1.5vw, 24px);
gap: clamp(10px, 1.2vw, 18px);
flex-wrap: nowrap;
font-size: clamp(11px, 0.85vw, 18px);
font-size: clamp(11px, 0.85vw, 16px);
color: var(--text-dim);
align-items: center;
}
......@@ -529,8 +549,8 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
gap: clamp(14px, 1.5vw, 24px);
padding: clamp(3px, 0.4vw, 8px) clamp(16px, 1.6vw, 28px);
font-size: clamp(11px, 0.85vw, 17px);
padding: 3px 18px;
font-size: clamp(11px, 0.85vw, 15px);
color: var(--text-dim);
flex-shrink: 0;
}
......@@ -544,6 +564,9 @@ onBeforeUnmount(() => {
.sys-item.warn {
color: var(--warn);
}
.sys-item.warn em {
color: var(--warn);
}
.cam-dot {
display: inline-block;
......@@ -563,7 +586,7 @@ onBeforeUnmount(() => {
.main {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr);
grid-template-columns: minmax(0, 2.4fr) minmax(290px, 1fr);
gap: 8px;
min-height: 0;
}
......@@ -583,7 +606,6 @@ onBeforeUnmount(() => {
display: flex;
flex-direction: column;
padding: 8px;
gap: 8px;
}
.video-wrap {
......@@ -606,71 +628,12 @@ onBeforeUnmount(() => {
position: absolute;
bottom: 8px;
right: 12px;
font-size: clamp(10px, 0.7vw, 14px);
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 1px;
pointer-events: none;
}
/* ======== 工序进度指示 ======== */
.step-mini-grid {
display: grid;
gap: clamp(3px, 0.4vw, 6px);
flex-shrink: 0;
}
.step-mini-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 6px;
padding: clamp(6px, 0.7vh, 10px) clamp(3px, 0.4vw, 6px);
transition: border-color 0.3s, box-shadow 0.3s;
}
.step-mini-item.active {
border-color: rgba(245, 158, 11, 0.6);
box-shadow: 0 0 6px rgba(245, 158, 11, 0.2);
}
.step-mini-item.pass {
border-color: rgba(52, 211, 153, 0.4);
}
.step-mini-item.fail {
border-color: rgba(248, 113, 113, 0.4);
}
.step-mini-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(15px, 1.4vw, 20px);
height: clamp(15px, 1.4vw, 20px);
border-radius: 4px;
background: rgba(56, 189, 248, 0.15);
color: var(--accent);
font-size: clamp(9px, 0.9vw, 12px);
font-weight: 700;
flex-shrink: 0;
}
.step-mini-name {
font-size: clamp(10px, 1vw, 16px);
color: var(--text);
white-space: nowrap;
text-align: center;
}
.step-mini-badge {
font-size: clamp(8px, 0.8vw, 12px) !important;
padding: 1px 4px !important;
}
/* ======== 工序明细表 ======== */
.info-panel {
display: flex;
......@@ -680,8 +643,8 @@ onBeforeUnmount(() => {
}
.steps-card {
flex: 10;
padding: clamp(8px, 0.9vw, 12px);
flex: 12;
padding: clamp(8px, 0.9vw, 14px);
display: flex;
flex-direction: column;
}
......@@ -690,7 +653,7 @@ onBeforeUnmount(() => {
display: flex;
justify-content: space-between;
align-items: center;
font-size: clamp(13px, 1vw, 20px);
font-size: clamp(13px, 1vw, 19px);
font-weight: 600;
margin-bottom: 4px;
padding-bottom: 6px;
......@@ -723,7 +686,7 @@ onBeforeUnmount(() => {
height: clamp(28px, 3vh, 44px);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
font-size: clamp(11px, 0.9vw, 17px);
font-size: clamp(12px, 0.9vw, 17px);
line-height: 1;
}
......@@ -740,6 +703,17 @@ onBeforeUnmount(() => {
min-height: 0;
}
.step-row.row-skip {
background: rgba(245, 158, 11, 0.06);
}
.skip-icon {
font-style: normal;
color: var(--warn);
margin-left: 3px;
font-size: 12px;
}
.duration-cell {
font-variant-numeric: tabular-nums;
white-space: nowrap;
......@@ -763,7 +737,7 @@ onBeforeUnmount(() => {
/* ======== 状态卡片 ======== */
.status-card {
flex: 2;
flex: 1;
display: flex;
align-items: center;
gap: clamp(14px, 1.8vw, 24px);
......@@ -771,8 +745,8 @@ onBeforeUnmount(() => {
}
.ring {
width: clamp(70px, 5vw, 120px);
height: clamp(70px, 5vw, 120px);
width: clamp(70px, 8vw, 110px);
height: clamp(70px, 8vw, 110px);
border-radius: 50%;
display: flex;
align-items: center;
......@@ -782,28 +756,28 @@ onBeforeUnmount(() => {
}
.ring-inner {
width: clamp(54px, 4vw, 94px);
height: clamp(54px, 4vw, 94px);
width: clamp(54px, 6.2vw, 86px);
height: clamp(54px, 6.2vw, 86px);
border-radius: 50%;
background: #0b1730;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: clamp(11px, 0.85vw, 16px);
font-size: clamp(12px, 0.9vw, 17px);
}
.ring-inner span:first-child { font-weight: 700; }
.ring-pass { color: var(--success); }
.ring-fail { color: var(--danger); }
.ring-sub { color: var(--text-dim); font-size: clamp(8px, 0.6vw, 11px); }
.ring-sub { color: var(--text-dim); font-size: clamp(9px, 0.65vw, 12px); }
.status-detail {
list-style: none;
display: flex;
flex-direction: column;
gap: clamp(6px, 0.8vw, 12px);
font-size: clamp(13px, 0.95vw, 19px);
font-size: clamp(14px, 1vw, 20px);
}
.status-detail li {
......@@ -832,8 +806,8 @@ onBeforeUnmount(() => {
gap: clamp(3px, 0.4vw, 6px);
}
.stat-label { font-size: clamp(12px, 0.85vw, 17px); color: var(--text-dim); }
.stat-value { font-size: clamp(20px, 1.5vw, 32px); font-weight: 700; }
.stat-label { font-size: clamp(11px, 1.2vw, 14px); color: var(--text-dim); }
.stat-value { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; }
.stat-value.accent { color: var(--accent-strong); }
.stat-value.warn { color: var(--warn); }
......
src/ws/index.js
View file @ 5febff30
......@@ -9,7 +9,7 @@
* ws.on('snapshot', data => { ... })
* ws.on('step_progress', data => { ... })
* ws.send({ type: 'ping' })
* ws.send({ type: 'reset_cycle', reason: 'operator_request' })
* ws.send({ type: 'reset_product', reason: 'operator_request' })
*
* 环境变量：
* VITE_WS_URL — WebSocket 地址，默认 ws://127.0.0.1:8080/ws
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment