388 lines
12 KiB
Vue
388 lines
12 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { useViewport } from "@/composables/useViewport";
|
||
import axios from "axios";
|
||
import apiClient, { getApiErrorMessage } from "@/api/client";
|
||
import type { DailyReviewReport } from "@/types";
|
||
|
||
const router = useRouter();
|
||
const { isMobile } = useViewport();
|
||
|
||
const loading = ref(false);
|
||
const loadError = ref("");
|
||
const selectedDate = ref(defaultReviewDate());
|
||
const report = ref<DailyReviewReport | null>(null);
|
||
const roomTableHeight = computed(() => (isMobile.value ? undefined : 420));
|
||
const momentTableHeight = computed(() => (isMobile.value ? undefined : 360));
|
||
|
||
async function loadReport() {
|
||
loading.value = true;
|
||
loadError.value = "";
|
||
|
||
try {
|
||
const { data } = await apiClient.get<DailyReviewReport>("/reports/daily", {
|
||
params: {
|
||
date: selectedDate.value,
|
||
utcOffsetMinutes: getLocalUtcOffsetMinutes()
|
||
}
|
||
});
|
||
report.value = data;
|
||
} catch (error) {
|
||
loadError.value =
|
||
axios.isAxiosError(error) && error.response?.status === 404
|
||
? "当前后端还没有部署回顾日报接口。请先同步更新并重启后端，再打开这个页面。"
|
||
: getApiErrorMessage(error, "回顾日报加载失败，请稍后重试。");
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
function openSession(recordSessionId: string) {
|
||
router.push({ name: "record-session-detail", params: { id: recordSessionId } });
|
||
}
|
||
|
||
function openTask(recordTaskId: string) {
|
||
router.push({ name: "record-task-detail", params: { id: recordTaskId } });
|
||
}
|
||
|
||
function formatDate(value?: string) {
|
||
return value ? new Date(value).toLocaleString() : "-";
|
||
}
|
||
|
||
function formatDuration(seconds?: number) {
|
||
return typeof seconds === "number" && Number.isFinite(seconds)
|
||
? `${seconds.toFixed(0)}s`
|
||
: "-";
|
||
}
|
||
|
||
function getLocalUtcOffsetMinutes() {
|
||
return -new Date().getTimezoneOffset();
|
||
}
|
||
|
||
function defaultReviewDate() {
|
||
const current = new Date();
|
||
current.setDate(current.getDate() - 1);
|
||
return formatDateOnly(current);
|
||
}
|
||
|
||
function formatDateOnly(value: Date) {
|
||
const year = value.getFullYear();
|
||
const month = `${value.getMonth() + 1}`.padStart(2, "0");
|
||
const day = `${value.getDate()}`.padStart(2, "0");
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
|
||
function disableFutureDates(value: Date) {
|
||
const endOfToday = new Date();
|
||
endOfToday.setHours(23, 59, 59, 999);
|
||
return value.getTime() > endOfToday.getTime();
|
||
}
|
||
|
||
onMounted(loadReport);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page-stack">
|
||
<div class="page-header">
|
||
<div>
|
||
<h1 class="page-title">鍥為【鏃ユ姤</h1>
|
||
<p class="page-subtitle">
|
||
鎸夊ぉ鑱氬悎褰曞埗鏃堕暱銆佸紓甯稿拰寮瑰箷鐑害銆傛棩鎶ュ彧鍋氶〉闈㈠唴鏌ョ湅锛屼笉浼氫富鍔ㄦ帹閫併€? </p>
|
||
</div>
|
||
|
||
<el-space wrap class="header-actions">
|
||
<el-date-picker
|
||
v-model="selectedDate"
|
||
type="date"
|
||
value-format="YYYY-MM-DD"
|
||
format="YYYY-MM-DD"
|
||
:clearable="false"
|
||
:disabled-date="disableFutureDates"
|
||
@change="loadReport"
|
||
/>
|
||
<el-button @click="loadReport">鍒锋柊鏃ユ姤</el-button>
|
||
</el-space>
|
||
</div>
|
||
|
||
<el-alert v-if="loadError" class="page-error-alert" type="error" :closable="false" show-icon :title="loadError" />
|
||
|
||
<el-skeleton v-if="loading && !report" animated :rows="10" />
|
||
|
||
<template v-else-if="report">
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-card__label">活跃直播间</div>
|
||
<div class="stat-card__value">{{ report.summary.activeLiveRoomCount }}</div>
|
||
<div class="stat-card__hint">{{ report.date }} 当天有录制重叠的房间数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-card__label">录制会话</div>
|
||
<div class="stat-card__value">{{ report.summary.sessionCount }}</div>
|
||
<div class="stat-card__hint">按整场直播会话聚合统计</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-card__label">分片总数</div>
|
||
<div class="stat-card__value">{{ report.summary.segmentCount }}</div>
|
||
<div class="stat-card__hint">只统计与当天有时间重叠的分片</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-card__label">录制时长</div>
|
||
<div class="stat-card__value">{{ formatDuration(report.summary.totalDurationSeconds) }}</div>
|
||
<div class="stat-card__hint">跨天会话按日报窗口裁剪</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-card__label">警告 / 错误</div>
|
||
<div class="stat-card__value">{{ report.summary.warningCount }} / {{ report.summary.errorCount }}</div>
|
||
<div class="stat-card__hint">来自当天警告 / 错误系统日志</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-card__label">弹幕事件</div>
|
||
<div class="stat-card__value">{{ report.summary.totalDanmakuCount }}</div>
|
||
<div class="stat-card__hint">优先按弹幕 XML 分钟桶统计</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-card class="surface-card" shadow="never">
|
||
<div class="section-header">
|
||
<div>
|
||
<h3 class="section-title">直播间汇总</h3>
|
||
<p class="section-subtitle">每个房间当天的录制规模、异常数量和弹幕活跃度都会聚合在这里。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<el-empty v-if="report.rooms.length === 0" description="当天没有录制数据" />
|
||
|
||
<div v-else class="table-scroll-shell">
|
||
<el-table :data="report.rooms" :height="roomTableHeight" class="premium-table" table-layout="auto">
|
||
<el-table-column label="直播间" min-width="260">
|
||
<template #default="{ row }">
|
||
<div class="cell-title">{{ row.title || row.anchorName || row.roomId }}</div>
|
||
<div class="cell-subtitle">{{ row.anchorName || row.roomId }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="平台" width="120" prop="platformName" />
|
||
<el-table-column label="会话" width="90" prop="sessionCount" />
|
||
<el-table-column label="分片" width="90" prop="segmentCount" />
|
||
<el-table-column label="录制时长" width="120">
|
||
<template #default="{ row }">
|
||
{{ formatDuration(row.totalDurationSeconds) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="警告 / 错误" width="130">
|
||
<template #default="{ row }">
|
||
{{ row.warningCount }} / {{ row.errorCount }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="弹幕" width="90" prop="danmakuCount" />
|
||
</el-table>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card class="surface-card" shadow="never">
|
||
<div class="section-header">
|
||
<div>
|
||
<h3 class="section-title">重点会话</h3>
|
||
<p class="section-subtitle">最长、最热和异常最多的会话会集中展示在这里。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<el-empty v-if="report.highlights.length === 0" description="当天没有可展示的会话亮点" />
|
||
|
||
<div v-else class="highlight-grid">
|
||
<section
|
||
v-for="item in report.highlights"
|
||
:key="item.key"
|
||
class="highlight-item"
|
||
>
|
||
<div class="highlight-item__label">{{ item.label }}</div>
|
||
<div class="highlight-item__title">{{ item.liveRoomTitle }}</div>
|
||
<div class="highlight-item__meta">
|
||
<span>{{ item.platformName }}</span>
|
||
<span>{{ item.roomId }}</span>
|
||
<span>{{ formatDuration(item.durationSeconds) }}</span>
|
||
</div>
|
||
<div class="highlight-item__stats">
|
||
<span>鍒嗙墖 {{ item.segmentCount }}</span>
|
||
<span>寮瑰箷 {{ item.danmakuCount }}</span>
|
||
<span>璀﹀憡 {{ item.warningCount }}</span>
|
||
<span>閿欒 {{ item.errorCount }}</span>
|
||
</div>
|
||
<div class="highlight-item__summary">{{ item.summary || "-" }}</div>
|
||
<div class="highlight-item__footer">
|
||
<span>{{ formatDate(item.startedAt || item.endedAt) }}</span>
|
||
<el-button size="small" @click="openSession(item.recordSessionId)">鏌ョ湅浼氳瘽</el-button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card class="surface-card" shadow="never">
|
||
<div class="section-header">
|
||
<div>
|
||
<h3 class="section-title">热点时刻</h3>
|
||
<p class="section-subtitle">基于弹幕 XML 的分钟级活跃度，帮助快速定位当天最热的时间窗口。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<el-empty v-if="report.moments.length === 0" description="当天没有可用的弹幕热度数据" />
|
||
|
||
<div v-else class="table-scroll-shell">
|
||
<el-table :data="report.moments" :height="momentTableHeight" class="premium-table" table-layout="auto">
|
||
<el-table-column label="热度窗口" width="190">
|
||
<template #default="{ row }">
|
||
{{ formatDate(row.bucketStartedAt) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="直播间" min-width="250">
|
||
<template #default="{ row }">
|
||
<div class="cell-title">{{ row.liveRoomTitle }}</div>
|
||
<div class="cell-subtitle">分片 #{{ row.segmentIndex }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="平台" width="120" prop="platformName" />
|
||
<el-table-column label="弹幕数" width="100" prop="danmakuCount" />
|
||
<el-table-column label="操作" width="200">
|
||
<template #default="{ row }">
|
||
<div class="action-row">
|
||
<el-button size="small" @click="openSession(row.recordSessionId)">查看会话</el-button>
|
||
<el-button size="small" @click="openTask(row.recordTaskId)">查看分片</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page-stack {
|
||
display: grid;
|
||
gap: 24px;
|
||
}
|
||
|
||
.header-actions {
|
||
align-self: center;
|
||
}
|
||
|
||
.page-error-alert {
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-bottom: 18px;
|
||
padding-bottom: 18px;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.highlight-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.highlight-item {
|
||
display: grid;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
padding: 16px;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-muted);
|
||
}
|
||
|
||
.highlight-item__label {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.highlight-item__title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
line-height: 1.5;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.highlight-item__meta,
|
||
.highlight-item__stats,
|
||
.highlight-item__footer {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.highlight-item__summary {
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.highlight-item__footer {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cell-title {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.cell-subtitle {
|
||
margin-top: 6px;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.action-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.highlight-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.highlight-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.header-actions {
|
||
width: 100%;
|
||
justify-content: stretch;
|
||
}
|
||
|
||
.header-actions :deep(.el-space__item) {
|
||
width: 100%;
|
||
}
|
||
|
||
.header-actions :deep(.el-date-editor),
|
||
.header-actions :deep(.el-button) {
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.highlight-item__footer {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
</style>
|
||
|