gitrusprusandCursor
4f253b860f
Перенесены backend/frontend/desktop/engine, добавлены вкладки конструктора сцен и генератора датасета с параметрами лучей и длины сетки рельефа, обновлены API и Docker-сборка. Co-authored-by: Cursor <cursoragent@cursor.com>
64 lines
2.4 KiB
Vue
64 lines
2.4 KiB
Vue
<script setup>
|
|
import { usePipelineStore } from "@/stores/pipeline";
|
|
|
|
const store = usePipelineStore();
|
|
|
|
function localizedHealth(value) {
|
|
if (value === "OK") return "ОК";
|
|
if (value === "Warning") return "Предупреждение";
|
|
if (value === "Risk") return "Риск";
|
|
return value || "-";
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="panel metrics-strip">
|
|
<h3>Сводка</h3>
|
|
<div class="row">
|
|
<strong>Состояние: {{ localizedHealth(store.chainHealth) }}</strong>
|
|
<span>Треугольники: {{ store.metrics.triangles }}</span>
|
|
<span>Реконструкция, мс: {{ store.metrics.reconstructMs }}</span>
|
|
</div>
|
|
<p class="recommendation">{{ store.recommendation }}</p>
|
|
<ul v-if="store.warningsList.length" class="warnings">
|
|
<li v-for="(warning, index) in store.warningsList" :key="index">{{ warning }}</li>
|
|
</ul>
|
|
<table v-if="store.stageMetrics.length" class="metrics-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Этап</th>
|
|
<th>Вход</th>
|
|
<th>Выход</th>
|
|
<th>Удалено</th>
|
|
<th>мс</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="row in store.stageMetrics" :key="row.stageId">
|
|
<td>{{ row.stageId }}</td>
|
|
<td>{{ row.inputPoints }}</td>
|
|
<td>{{ row.outputPoints }}</td>
|
|
<td>{{ row.removedPoints }}</td>
|
|
<td>{{ row.elapsedMs }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="summary-grid">
|
|
<div>Вход: {{ store.metrics.inputPoints }}</div>
|
|
<div>После preprocess: {{ store.metrics.afterPreprocess }}</div>
|
|
<div>Кластеры: {{ store.metrics.clusters }}</div>
|
|
<div>Удалено: {{ store.metrics.removedPoints }}</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.metrics-strip h3 { margin: 0 0 8px; }
|
|
.row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
|
|
.recommendation { color: var(--summary-recommendation); font-size: 13px; }
|
|
.warnings { margin: 8px 0; padding-left: 18px; color: var(--warning-text); font-size: 13px; }
|
|
.metrics-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
|
|
.metrics-table th, .metrics-table td { border-bottom: 1px solid var(--card-border); padding: 4px; text-align: left; }
|
|
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--summary-secondary); }
|
|
</style>
|