Дмитрий
135 lines
4.6 KiB
Vue
135 lines
4.6 KiB
Vue
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import axios from 'axios';
|
||
|
||
interface ReconcileRow {
|
||
started_at: string;
|
||
finished_at: string | null;
|
||
window_start: string;
|
||
window_end: string;
|
||
status: string;
|
||
total_csv_rows: number;
|
||
matched_count: number;
|
||
recovered_count: number;
|
||
drift_ratio: number;
|
||
}
|
||
|
||
interface Health {
|
||
last_run_at: string | null;
|
||
last_status: string | null;
|
||
drift_ratio: number | null;
|
||
webhook_state: string;
|
||
}
|
||
|
||
const health = ref<Health | null>(null);
|
||
const history = ref<ReconcileRow[]>([]);
|
||
const loading = ref(false);
|
||
const reconciling = ref(false);
|
||
const error = ref<string | null>(null);
|
||
|
||
async function load(): Promise<void> {
|
||
loading.value = true;
|
||
error.value = null;
|
||
try {
|
||
const { data } = await axios.get('/api/admin/supplier-integration');
|
||
health.value = data.health;
|
||
history.value = data.history;
|
||
} catch {
|
||
error.value = 'Не удалось загрузить состояние канала.';
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
async function reconcileNow(): Promise<void> {
|
||
reconciling.value = true;
|
||
try {
|
||
await axios.post('/api/admin/supplier-integration/reconcile');
|
||
// Сверка асинхронная (queued job) — ждём ~4с и перезагружаем здоровье канала.
|
||
setTimeout(() => void load(), 4000);
|
||
} finally {
|
||
reconciling.value = false;
|
||
}
|
||
}
|
||
|
||
function statusColor(status: string | null): string {
|
||
if (status === 'ok') return 'success';
|
||
if (status === 'drift_alert') return 'warning';
|
||
if (status === 'failed') return 'error';
|
||
return 'grey';
|
||
}
|
||
|
||
onMounted(() => void load());
|
||
</script>
|
||
|
||
<template>
|
||
<div class="pa-6">
|
||
<h1 class="text-h5 mb-4">Интеграция с поставщиком</h1>
|
||
|
||
<v-card class="mb-4">
|
||
<v-card-title>Здоровье резервного канала</v-card-title>
|
||
<v-card-text>
|
||
<v-alert v-if="error" type="error" density="compact" class="mb-4">
|
||
{{ error }}
|
||
</v-alert>
|
||
<template v-if="health">
|
||
<div class="mb-2">
|
||
Webhook:
|
||
<v-chip :color="health.webhook_state === 'live' ? 'success' : 'error'" size="small">
|
||
{{ health.webhook_state }}
|
||
</v-chip>
|
||
</div>
|
||
<div class="mb-2">
|
||
Последняя сверка:
|
||
<v-chip :color="statusColor(health.last_status)" size="small">
|
||
{{ health.last_status ?? '—' }}
|
||
</v-chip>
|
||
<span class="ml-2">{{ health.last_run_at ?? '—' }}</span>
|
||
</div>
|
||
<div class="mb-4">
|
||
Расхождение (drift):
|
||
{{ health.drift_ratio !== null ? (health.drift_ratio * 100).toFixed(2) + ' %' : '—' }}
|
||
</div>
|
||
</template>
|
||
<div v-else-if="loading" class="mb-4 text-medium-emphasis">Загрузка…</div>
|
||
<v-btn
|
||
data-test="reconcile-now"
|
||
color="primary"
|
||
:loading="reconciling"
|
||
@click="reconcileNow"
|
||
>
|
||
Сверить сейчас
|
||
</v-btn>
|
||
</v-card-text>
|
||
</v-card>
|
||
|
||
<v-card>
|
||
<v-card-title>История сверок</v-card-title>
|
||
<v-table>
|
||
<thead>
|
||
<tr>
|
||
<th>Начало</th>
|
||
<th>Статус</th>
|
||
<th>Строк CSV</th>
|
||
<th>Совпало</th>
|
||
<th>Подобрано</th>
|
||
<th>Drift</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="row in history" :key="row.started_at">
|
||
<td>{{ row.started_at }}</td>
|
||
<td>
|
||
<v-chip :color="statusColor(row.status)" size="x-small">{{ row.status }}</v-chip>
|
||
</td>
|
||
<td>{{ row.total_csv_rows }}</td>
|
||
<td>{{ row.matched_count }}</td>
|
||
<td>{{ row.recovered_count }}</td>
|
||
<td>{{ (row.drift_ratio * 100).toFixed(2) }} %</td>
|
||
</tr>
|
||
</tbody>
|
||
</v-table>
|
||
</v-card>
|
||
</div>
|
||
</template>
|