可基本执行任务

This commit is contained in:
ywb
2026-05-28 13:55:55 +08:00
parent f507363c34
commit 4c096a4bd1
12 changed files with 1207 additions and 669 deletions
+76 -4
View File
@@ -4,7 +4,7 @@
<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">
<link rel="stylesheet" href="/static/css/style.css?v=20260527b">
</head>
<body>
<div id="app">
@@ -48,6 +48,46 @@
</div>
</section>
<!-- 任务步骤控制开关 -->
<section class="card">
<h2>🎛️ 任务步骤控制</h2>
<p class="hint" style="margin-bottom:12px">关闭的步骤将在本次任务中跳过</p>
<div class="toggle-grid">
<div class="toggle-item">
<label class="toggle-switch">
<input type="checkbox" v-model="agvMoveEnabled">
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">🚗 AGV移动</span>
<span class="toggle-hint">含机械臂初始化,按之字形路线移动到各点位</span>
</div>
<div class="toggle-item">
<label class="toggle-switch">
<input type="checkbox" v-model="qrScanEnabled">
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">📷 识别二维码</span>
<span class="toggle-hint">调整机械臂姿态扫描二维码</span>
</div>
<div class="toggle-item">
<label class="toggle-switch">
<input type="checkbox" v-model="frontPhotoEnabled">
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">📸 拍正面照</span>
<span class="toggle-hint">按机型正面姿态拍照</span>
</div>
<div class="toggle-item">
<label class="toggle-switch">
<input type="checkbox" v-model="backPhotoEnabled">
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">📸 拍背面照</span>
<span class="toggle-hint">按机型背面姿态拍照</span>
</div>
</div>
</section>
<!-- 任务清单 -->
<section class="card" v-if="tasks.length > 0">
<h2>📋 任务清单 ([[ tasks.length ]] 台机器)</h2>
@@ -85,8 +125,15 @@
<!-- 实时预览 -->
<section class="card">
<h2>📷 摄像头预览</h2>
<div class="camera-full">
<img :src="previewUrl" @error="onPreviewError">
<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>
@@ -113,10 +160,35 @@
</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"></script>
<script src="/static/js/running.js?v=20260527b"></script>
</body>
</html>