ywb
83 lines
2.9 KiB
HTML
83 lines
2.9 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">
|
|
</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'">
|
|
<span>点位 [[ currentPoint + 1 ]] / [[ totalPoints ]]</span>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" :style="{width: progressPercent + '%'}"></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-error btn-large" @click="stopMission" :disabled="missionState === 'idle'">
|
|
⏹️ 停止
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 实时预览 -->
|
|
<section class="card">
|
|
<h2>📷 摄像头预览</h2>
|
|
<div class="camera-full">
|
|
<img :src="previewUrl" @error="onPreviewError">
|
|
</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>
|
|
<div class="report-details">
|
|
<div v-for="(detail, i) in report.details" :key="i" class="report-item">
|
|
<div class="report-point">
|
|
<span class="report-status" :class="detail.status">[[ detail.status === 'completed' ? '✅' : '❌' ]]</span>
|
|
[[ detail.point_name ]]
|
|
</div>
|
|
<div v-for="(pose, pi) in detail.poses" :key="pi" class="report-pose">
|
|
[[ pose.photo_type ]] - [[ pose.status ]]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/js/vue3.global.prod.js"></script>
|
|
<script src="/static/js/running.js"></script>
|
|
</body>
|
|
</html>
|