修改运行时显示
This commit is contained in:
ywb
@@ -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?v=20260527b">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=20260529a">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
@@ -23,10 +23,10 @@
|
||||
<div class="running-header">
|
||||
<div class="running-status" :class="missionState">
|
||||
<span class="pulse"></span>
|
||||
[[ missionStateText ]]
|
||||
{% raw %}{{ missionStateText }}{% endraw %}
|
||||
</div>
|
||||
<div class="running-progress" v-if="missionState === 'running' || missionState === 'waiting_qr'">
|
||||
<span>进度 [[ Math.round(progress) ]]%</span>
|
||||
<span>进度 {% raw %}{{ Math.round(progress) }}{% endraw %}%</span>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{width: progress + '%'}"></div>
|
||||
</div>
|
||||
@@ -96,50 +96,74 @@
|
||||
<div class="speed-row">
|
||||
<label class="speed-label">
|
||||
<span>🚗 AGV 移动速度</span>
|
||||
<span class="speed-val">[[ agvSpeed.toFixed(1) ]] m/s</span>
|
||||
<span class="speed-val">{% raw %}{{ agvSpeed.toFixed(1) }}{% endraw %} m/s</span>
|
||||
</label>
|
||||
<input type="range" class="speed-slider" min="0.1" max="1.0" step="0.1" v-model.number="agvSpeed">
|
||||
</div>
|
||||
<div class="speed-row">
|
||||
<label class="speed-label">
|
||||
<span>🦾 机械臂速度</span>
|
||||
<span class="speed-val">[[ armSpeed ]]</span>
|
||||
<span class="speed-val">{% raw %}{{ armSpeed }}{% endraw %}</span>
|
||||
</label>
|
||||
<input type="range" class="speed-slider" min="100" max="1000" step="50" v-model.number="armSpeed">
|
||||
</div>
|
||||
</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>
|
||||
<!-- 任务清单 — 网格视图 -->
|
||||
<section class="card" v-if="missionRows > 0">
|
||||
<h2>📋 任务清单 ({% raw %}{{ missionRows }}{% endraw %}行×{% raw %}{{ missionCols }}{% endraw %}列，点位+机器网格)</h2>
|
||||
<div class="mission-grid-wrap" style="margin-top:12px">
|
||||
<div class="mission-grid" :style="{ gridTemplateColumns: '90px repeat(' + missionCols + ', 105px)' }">
|
||||
<!-- 表头 -->
|
||||
<div class="grid-cell grid-header"></div>
|
||||
<div v-for="c in missionCols" :key="'h'+c" class="grid-cell grid-header">第{% raw %}{{ c }}{% endraw %}列</div>
|
||||
|
||||
<!-- 第一个点位行 (pointRow=0): 所有机器正面拍摄点 -->
|
||||
<div class="grid-cell grid-header">点位行 1</div>
|
||||
<div v-for="c in missionCols" :key="'p0_'+c" class="grid-cell point-cell" :class="'nav-'+getPointStatus(0, c-1)">
|
||||
<div class="cell-nav-icon">{% raw %}{{ navIcon(getPointStatus(0, c-1)) }}{% endraw %}</div>
|
||||
<div class="cell-nav-label">{% raw %}{{ navLabel(getPointStatus(0, c-1)) }}{% endraw %}</div>
|
||||
</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 ]]背
|
||||
|
||||
<!-- 中间: 机器行 + 点位行 交替 -->
|
||||
<template v-for="ri in missionRows" :key="'block'+ri">
|
||||
<!-- 机器行 ri -->
|
||||
<div class="grid-cell grid-header">机器行 {% raw %}{{ ri }}{% endraw %}</div>
|
||||
<div v-for="c in missionCols" :key="'mr'+ri+'_'+c"
|
||||
class="grid-cell machine-cell"
|
||||
:class="getMachineClass(ri-1, c-1)">
|
||||
<template v-if="hasMachine(ri-1, c-1)">
|
||||
<div class="machine-label">机器{% raw %}{{ ri }}-{{ c }}{% endraw %}</div>
|
||||
<div class="machine-steps-mini">
|
||||
<span class="step-dot" :class="'dot-'+getMachineField(ri-1,c-1,'qr')" title="二维码">🔍</span>
|
||||
<span class="step-dot" :class="'dot-'+getMachineField(ri-1,c-1,'front')" title="正面照">📸正</span>
|
||||
<span class="step-dot" :class="'dot-'+getMachineField(ri-1,c-1,'back')" title="背面照">📸背</span>
|
||||
</div>
|
||||
<div v-if="getMachineField(ri-1,c-1,'qr_val')" class="machine-qr-mini">🏷 {% raw %}{{ getMachineField(ri-1,c-1,'qr_val').substring(0,6) }}{% endraw %}</div>
|
||||
</template>
|
||||
<div v-else class="empty-cell">空</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 点位行 ri (pointRow=ri): 上一个机器的背面 / 下一个机器的正面 -->
|
||||
<div class="grid-cell grid-header">点位行 {% raw %}{{ ri+1 }}{% endraw %}</div>
|
||||
<div v-for="c in missionCols" :key="'p'+ri+'_'+c" class="grid-cell point-cell" :class="'nav-'+getPointStatus(ri, c-1)">
|
||||
<div class="cell-nav-icon">{% raw %}{{ navIcon(getPointStatus(ri, c-1)) }}{% endraw %}</div>
|
||||
<div class="cell-nav-label">{% raw %}{{ navLabel(getPointStatus(ri, c-1)) }}{% endraw %}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-legend" style="margin-top:10px;font-size:12px;color:#8899aa">
|
||||
⏳等待 🔄执行中 ✅完成 ⏭️跳过 ⚠️手动 🔍扫码 📸拍摄
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 实时日志 -->
|
||||
<section class="card">
|
||||
<h2>📜 任务日志</h2>
|
||||
<div class="log-box" ref="logBox">
|
||||
<div v-for="(log, i) in logs" :key="i" class="log-line">[[ log ]]</div>
|
||||
<div v-for="(log, i) in logs" :key="i" class="log-line">{% raw %}{{ log }}{% endraw %}</div>
|
||||
<div v-if="logs.length === 0" class="log-empty">等待任务开始...</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -163,9 +187,9 @@
|
||||
<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 class="stat ok">✅ 完成: {% raw %}{{ report.completed }}{% endraw %}</div>
|
||||
<div class="stat error">❌ 失败: {% raw %}{{ report.failed }}{% endraw %}</div>
|
||||
<div class="stat">总计: {% raw %}{{ report.total_points }}{% endraw %}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -186,7 +210,7 @@
|
||||
<div class="modal-overlay" v-if="waitingError">
|
||||
<div class="modal">
|
||||
<h3>⚠️ 执行错误</h3>
|
||||
<p>[[ errorMsg ]]</p>
|
||||
<p>{% raw %}{{ errorMsg }}{% endraw %}</p>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-warning" @click="skipError">跳过</button>
|
||||
<button class="btn btn-error" @click="abortError">中断</button>
|
||||
@@ -198,7 +222,7 @@
|
||||
<div class="modal-overlay" v-if="waitingStep">
|
||||
<div class="modal">
|
||||
<h3>🦶 单步执行确认</h3>
|
||||
<p>机器 [[ stepLabel ]] 执行完成，请确认结果是否正确：</p>
|
||||
<p>机器 {% raw %}{{ stepLabel }}{% endraw %} 执行完成，请确认结果是否正确：</p>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-success" @click="confirmStep">✅ 正确，继续</button>
|
||||
<button class="btn btn-warning" @click="retryStep">🔄 不正确，重试</button>
|
||||
@@ -211,6 +235,6 @@
|
||||
</div>
|
||||
|
||||
<script src="/static/js/vue3.global.prod.js"></script>
|
||||
<script src="/static/js/running.js?v=20260527b"></script>
|
||||
<script src="/static/js/running.js?v=20260529a"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user