sentinel-home-ai/fam-ui/src/views/Stats.vue

<script setup>
import { computed, onMounted, ref } from 'vue'
import { api, fmtDateOnly, fmtDateTime } from '../api.js'
import PageHeader from '../components/PageHeader.vue'
import EmptyState from '../components/EmptyState.vue'

const modelChart = ref([]) // [{label, value}]
const attention = ref([])
const syncStatus = ref(null)
const loadError = ref('')

const BAR_COLORS = ['#5b8cff', '#8b6bff', '#3ddc9b', '#f5b84e', '#4fd1e8', '#ff7373']
const maxVal = computed(() => Math.max(1, ...modelChart.value.map(m => m.value)))

async function load() {
  loadError.value = ''
  try {
    const [ms, att, statusData] = await Promise.all([
      api.modelStats(),
      api.attentionEvents(),
      api.status(),
    ])
    const byProvider = {}
    for (const row of ms.aggregate) {
      const key = row.provider || 'unknown'
      byProvider[key] = (byProvider[key] || 0) + (row.ok_cnt || 0) + (row.fail_cnt || 0)
    }
    modelChart.value = Object.entries(byProvider).map(([label, value]) => ({ label, value }))
    attention.value = att.events
    syncStatus.value = statusData.sync
  } catch (e) {
    loadError.value = e.message
  }
}

onMounted(load)
</script>

<template>
  <PageHeader icon="📈" title="统计图表" sub="模型来源 / 关注事件 / 同步状态" />

  <EmptyState v-if="loadError" icon="⚠" :text="loadError" />

  <div class="mb-3 text-[15px] font-bold text-[#f7f9fc]">模型来源分布</div>
  <EmptyState v-if="!modelChart.length" text="暂无统计数据" />
  <div v-else class="mb-8 space-y-2.5">
    <div v-for="(m, i) in modelChart" :key="m.label" class="flex items-center gap-3">
      <div class="w-20 shrink-0 text-xs text-text-dim">{{ m.label }}</div>
      <div class="h-6 flex-1 overflow-hidden rounded-md bg-panel-3">
        <div class="h-full rounded-md transition-all" :style="{ width: `${(m.value / maxVal) * 100}%`, background: BAR_COLORS[i % BAR_COLORS.length] }"></div>
      </div>
      <div class="w-10 shrink-0 text-right font-mono text-xs tabular text-text-dim">{{ m.value }}</div>
    </div>
  </div>

  <div class="mb-3 mt-6 text-[15px] font-bold text-[#f7f9fc]">关注事件统计</div>
  <EmptyState v-if="!attention.length" text="暂无关注事件" />
  <div v-else class="mb-8 overflow-hidden rounded-xl border border-border">
    <table class="w-full text-sm">
      <thead>
        <tr class="bg-panel-3 text-left text-xs text-text-mute">
          <th class="px-4 py-2 font-medium">日期</th>
          <th class="px-4 py-2 font-medium">人物</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(a, i) in attention" :key="i" class="border-t border-border bg-panel-2 text-text-dim">
          <td class="px-4 py-2 font-mono tabular">{{ fmtDateOnly(a.date) || '?' }}</td>
          <td class="px-4 py-2">{{ a.persons.join(', ') }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="mb-3 mt-6 text-[15px] font-bold text-[#f7f9fc]">同步状态</div>
  <div v-if="syncStatus" class="rounded-xl border border-border bg-panel-2 px-4 py-3 text-xs leading-loose text-text-dim">
    运行状态 <span :class="syncStatus.running ? 'font-semibold text-ok' : 'font-semibold text-danger'">{{ syncStatus.running ? '同步中' : '未运行' }}</span><br />
    最近同步 <b class="text-[#ccd5e1]">{{ syncStatus.last_sync_at ? fmtDateTime(syncStatus.last_sync_at) : '—' }}</b><br />
    本次增量 {{ syncStatus.last_count ? `视频+${syncStatus.last_count[0]} / 事件+${syncStatus.last_count[1]} / 人物+${syncStatus.last_count[2]}` : '—' }}<br />
    游标 <b class="text-[#ccd5e1]">{{ syncStatus.cursor ? fmtDateTime(syncStatus.cursor) : '（全量）' }}</b><br />
    周期 {{ syncStatus.interval_sec }}s
    <div v-if="syncStatus.last_error" class="font-semibold text-danger">⚠ {{ syncStatus.last_error }}</div>
  </div>
  <EmptyState v-else text="无法获取同步状态" />
</template>