ywb
154 lines
6.1 KiB
HTML
154 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>运行监控 - AGV 拍摄系统</title>
|
|
<link rel="stylesheet" href="/static/css/style.css?v=20260527a">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="topbar">
|
|
<div class="logo">▶️ 任务运行</div>
|
|
<nav class="nav">
|
|
<a href="/" class="nav-link">🏠 首页</a>
|
|
<a href="/setting" class="nav-link">⚙️ 设置</a>
|
|
<a href="/running" class="nav-link active">▶️ 运行</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<!-- 状态概览 -->
|
|
<section class="card">
|
|
<div class="running-header">
|
|
<div class="running-status" :class="missionState">
|
|
<span class="pulse"></span>
|
|
[[ missionStateText ]]
|
|
</div>
|
|
<div class="running-progress" v-if="missionState === 'running' || missionState === 'waiting_qr'">
|
|
<span>进度 [[ Math.round(progress) ]]%</span>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" :style="{width: progress + '%'}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn btn-success btn-large" @click="startMission" :disabled="missionState !== 'idle'">
|
|
▶️ 开始任务
|
|
</button>
|
|
<button class="btn btn-warning btn-large" @click="pauseMission" :disabled="missionState !== 'running'">
|
|
⏸️ 暂停
|
|
</button>
|
|
<button class="btn btn-primary btn-large" @click="resumeMission" :disabled="missionState !== 'paused'">
|
|
▶️ 继续
|
|
</button>
|
|
<button class="btn btn-error btn-large" @click="stopMission" :disabled="missionState === 'idle'">
|
|
⏹️ 停止
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 任务清单 -->
|
|
<section class="card" v-if="tasks.length > 0">
|
|
<h2>📋 任务清单 ([[ tasks.length ]] 台机器)</h2>
|
|
<div class="task-grid">
|
|
<div v-for="task in tasks" :key="task.machine_id"
|
|
class="task-cell" :class="'task-' + task.status"
|
|
:title="task.step">
|
|
<div class="task-pos">[[ task.label ]]</div>
|
|
<div class="task-status-icon">
|
|
<span v-if="task.status === 'pending'">⏳</span>
|
|
<span v-else-if="task.status === 'active'" class="pulse-icon">🔄</span>
|
|
<span v-else-if="task.status === 'completed'">✅</span>
|
|
<span v-else>❓</span>
|
|
</div>
|
|
<div class="task-step-text">[[ task.step ]]</div>
|
|
<div class="task-info">
|
|
<div v-if="task.qr_value" class="task-qr">🏷 [[ task.qr_value.substring(0,8) ]]</div>
|
|
<div class="task-photos" v-if="task.photos_front || task.photos_back">
|
|
📷 [[ task.photos_front ]]正 [[ task.photos_back ]]背
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 实时日志 -->
|
|
<section class="card" v-if="missionState === 'running' || missionState === 'waiting_qr'">
|
|
<h2>📜 实时日志</h2>
|
|
<div class="log-box" ref="logBox">
|
|
<div v-for="(log, i) in logs" :key="i" class="log-line">[[ log ]]</div>
|
|
<div v-if="logs.length === 0" class="log-empty">等待任务开始...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 实时预览 -->
|
|
<section class="card">
|
|
<h2>📷 摄像头预览</h2>
|
|
<div class="camera-dual">
|
|
<div class="camera-box">
|
|
<div class="camera-label">🎥 AGV 摄像头</div>
|
|
<img :src="agvPreviewUrl" @error="onAgvPreviewError" class="camera-img">
|
|
</div>
|
|
<div class="camera-box">
|
|
<div class="camera-label">🦾 机械臂摄像头</div>
|
|
<img :src="armPreviewUrl" @error="onArmPreviewError" class="camera-img">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 任务报告 -->
|
|
<section class="card" v-if="report">
|
|
<h2>📊 任务报告</h2>
|
|
<div class="report-summary">
|
|
<div class="stat ok">✅ 完成: [[ report.completed ]]</div>
|
|
<div class="stat error">❌ 失败: [[ report.failed ]]</div>
|
|
<div class="stat">总计: [[ report.total_points ]]</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 手动输入二维码弹窗 -->
|
|
<div class="modal-overlay" v-if="showQrModal">
|
|
<div class="modal">
|
|
<h3>⌨️ 手动输入二维码</h3>
|
|
<p>所有姿态均未识别到二维码，请手动输入：</p>
|
|
<input type="text" v-model="qrValue" placeholder="输入二维码内容" autofocus @keyup.enter="submitQr">
|
|
<div class="modal-actions">
|
|
<button class="btn btn-primary" @click="submitQr">确认</button>
|
|
<button class="btn" @click="cancelQr">跳过</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 错误弹窗 -->
|
|
<div class="modal-overlay" v-if="waitingError">
|
|
<div class="modal">
|
|
<h3>⚠️ 执行错误</h3>
|
|
<p>[[ errorMsg ]]</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-warning" @click="skipError">跳过</button>
|
|
<button class="btn btn-error" @click="abortError">中断</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 步骤确认弹窗 -->
|
|
<div class="modal-overlay" v-if="waitingStep">
|
|
<div class="modal">
|
|
<h3>🦶 单步执行确认</h3>
|
|
<p>机器 [[ stepLabel ]] 执行完成，请确认结果是否正确：</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-success" @click="confirmStep">✅ 正确，继续</button>
|
|
<button class="btn btn-warning" @click="retryStep">🔄 不正确，重试</button>
|
|
<button class="btn btn-error" @click="abortStep">⏹️ 中断</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/js/vue3.global.prod.js"></script>
|
|
<script src="/static/js/running.js?v=20260527a"></script>
|
|
</body>
|
|
</html> |