436 lines
11 KiB
Vue
436 lines
11 KiB
Vue
<!-- Author: fruit.com.cn -->
|
||
|
||
<script setup lang="ts">
|
||
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||
import PageHeading from '@/views/components/PageHeading.vue'
|
||
import DashboardMetricWall from '@/views/dashboard/DashboardMetricWall.vue'
|
||
import echarts from '@/plugins/echarts'
|
||
import {
|
||
getDashboardDistributionApi,
|
||
getDashboardOverviewApi,
|
||
getDashboardTrendApi,
|
||
getTranscodeBoardApi
|
||
} from '@/api/admin/dashboard'
|
||
import type {
|
||
DashboardDistribution,
|
||
DashboardOverview,
|
||
DashboardTrend,
|
||
TranscodeBoard
|
||
} from '@/api/admin/dashboard'
|
||
import { dateCell } from '@/utils/format'
|
||
|
||
const loading = ref(false)
|
||
const overview = ref<DashboardOverview | null>(null)
|
||
const trend = ref<DashboardTrend | null>(null)
|
||
const distribution = ref<DashboardDistribution | null>(null)
|
||
const transcode = ref<TranscodeBoard | null>(null)
|
||
const lastUpdated = ref('')
|
||
|
||
/** ECharts 容器 ref 与实例，统一管理 resize / dispose。 */
|
||
const trendRef = ref<HTMLElement>()
|
||
const dramaPieRef = ref<HTMLElement>()
|
||
const transcodePieRef = ref<HTMLElement>()
|
||
const episodePieRef = ref<HTMLElement>()
|
||
const chartInstances: echarts.ECharts[] = []
|
||
|
||
const statusLabel = {
|
||
reviewing: '待审',
|
||
published: '已上线',
|
||
draft: '草稿',
|
||
offline: '已下线'
|
||
} as const
|
||
|
||
const transcodeStatusLabel = {
|
||
QUEUED: '排队中',
|
||
RUNNING: '执行中',
|
||
SUCCESS: '成功',
|
||
FAILED: '失败',
|
||
CANCELED: '已取消'
|
||
} as const
|
||
|
||
function renderCharts() {
|
||
disposeAll()
|
||
renderTrend()
|
||
renderDramaPie()
|
||
renderTranscodePie()
|
||
renderEpisodePie()
|
||
renderQueueBar()
|
||
}
|
||
|
||
const queueBarRef = ref<HTMLElement>()
|
||
function renderQueueBar() {
|
||
if (!queueBarRef.value || !transcode.value) return
|
||
const q = transcode.value.queue || {}
|
||
const chart = echarts.init(queueBarRef.value)
|
||
chartInstances.push(chart)
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
grid: { left: 80, right: 24, top: 16, bottom: 24 },
|
||
xAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
|
||
yAxis: { type: 'category', data: ['排队', '执行中', '成功', '失败'] },
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
data: [q.queued || 0, q.running || 0, q.success || 0, q.failed || 0],
|
||
itemStyle: {
|
||
borderRadius: [0, 4, 4, 0],
|
||
color: (p: { dataIndex: number }) =>
|
||
['#F6BD16', '#5B8FF9', '#5AD8A6', '#E86452'][p.dataIndex]
|
||
},
|
||
label: { show: true, position: 'right' }
|
||
}
|
||
]
|
||
})
|
||
}
|
||
|
||
async function loadAndRender() {
|
||
loading.value = true
|
||
try {
|
||
const [board, t, dist, queue] = await Promise.all([
|
||
getDashboardOverviewApi(),
|
||
getDashboardTrendApi(),
|
||
getDashboardDistributionApi(),
|
||
getTranscodeBoardApi()
|
||
])
|
||
overview.value = board.data || null
|
||
trend.value = t.data || null
|
||
distribution.value = dist.data || null
|
||
transcode.value = queue.data || null
|
||
lastUpdated.value = new Date().toLocaleString()
|
||
await nextTick()
|
||
renderCharts()
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function disposeAll() {
|
||
chartInstances.forEach((c) => c.dispose())
|
||
chartInstances.length = 0
|
||
}
|
||
|
||
const basePieSeriesOption = {
|
||
type: 'pie' as const,
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: true,
|
||
itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
|
||
label: { show: false, position: 'center' },
|
||
emphasis: {
|
||
label: { show: true, fontSize: 16, fontWeight: 'bold' }
|
||
}
|
||
}
|
||
|
||
function renderTrend() {
|
||
if (!trendRef.value || !trend.value) return
|
||
const chart = echarts.init(trendRef.value)
|
||
chartInstances.push(chart)
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
|
||
legend: { top: 0, textStyle: { fontSize: 12 } },
|
||
grid: { left: 48, right: 48, top: 40, bottom: 28 },
|
||
xAxis: { type: 'category', data: trend.value.dates, boundaryGap: false },
|
||
yAxis: [
|
||
{ type: 'value', name: '用户/播放', splitLine: { lineStyle: { type: 'dashed' } } },
|
||
{ type: 'value', name: '转码任务', splitLine: { show: false } }
|
||
],
|
||
series: [
|
||
{
|
||
name: '新增用户',
|
||
type: 'line',
|
||
smooth: true,
|
||
yAxisIndex: 0,
|
||
data: trend.value.newUsers,
|
||
itemStyle: { color: '#5B8FF9' }
|
||
},
|
||
{
|
||
name: '播放事件',
|
||
type: 'line',
|
||
smooth: true,
|
||
yAxisIndex: 0,
|
||
data: trend.value.playEvents,
|
||
itemStyle: { color: '#5AD8A6' }
|
||
},
|
||
{
|
||
name: '新增转码',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
data: trend.value.newTranscodes,
|
||
itemStyle: { color: '#F6BD16', borderRadius: [3, 3, 0, 0] }
|
||
},
|
||
{
|
||
name: '转码成功',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
data: trend.value.transcodeSuccess,
|
||
itemStyle: { color: '#945FB9', borderRadius: [3, 3, 0, 0] }
|
||
}
|
||
]
|
||
})
|
||
}
|
||
|
||
function renderDramaPie() {
|
||
if (!dramaPieRef.value || !distribution.value) return
|
||
const data = Object.entries(distribution.value.dramaStatus || {}).map(([k, v]) => ({
|
||
name: (statusLabel as Record<string, string>)[k] || k,
|
||
value: v
|
||
}))
|
||
const chart = echarts.init(dramaPieRef.value)
|
||
chartInstances.push(chart)
|
||
chart.setOption({
|
||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||
legend: { bottom: 0, itemWidth: 12, itemHeight: 12, textStyle: { fontSize: 12 } },
|
||
color: ['#F6BD16', '#5AD8A6', '#5B8FF9', '#E86452'],
|
||
series: [{ ...basePieSeriesOption, name: '短剧状态', data }]
|
||
})
|
||
}
|
||
|
||
function renderTranscodePie() {
|
||
if (!transcodePieRef.value || !distribution.value) return
|
||
const data = Object.entries(distribution.value.transcodeStatus || {}).map(([k, v]) => ({
|
||
name: (transcodeStatusLabel as Record<string, string>)[k] || k,
|
||
value: v
|
||
}))
|
||
const chart = echarts.init(transcodePieRef.value)
|
||
chartInstances.push(chart)
|
||
chart.setOption({
|
||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||
legend: { bottom: 0, itemWidth: 12, itemHeight: 12, textStyle: { fontSize: 12 } },
|
||
color: ['#F6BD16', '#5B8FF9', '#5AD8A6', '#E86452', '#C9C9C9'],
|
||
series: [{ ...basePieSeriesOption, name: '转码状态', data }]
|
||
})
|
||
}
|
||
|
||
function renderEpisodePie() {
|
||
if (!episodePieRef.value || !distribution.value) return
|
||
const data = Object.entries(distribution.value.episodeMedia || {}).map(([k, v]) => ({
|
||
name: k,
|
||
value: v
|
||
}))
|
||
const chart = echarts.init(episodePieRef.value)
|
||
chartInstances.push(chart)
|
||
chart.setOption({
|
||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||
legend: { bottom: 0, itemWidth: 12, itemHeight: 12, textStyle: { fontSize: 12 } },
|
||
color: ['#5AD8A6', '#E86452'],
|
||
series: [{ ...basePieSeriesOption, name: '片源覆盖', data }]
|
||
})
|
||
}
|
||
|
||
function onResize() {
|
||
chartInstances.forEach((c) => c.resize())
|
||
}
|
||
|
||
onMounted(loadAndRender)
|
||
window.addEventListener('resize', onResize)
|
||
onBeforeUnmount(() => {
|
||
disposeAll()
|
||
window.removeEventListener('resize', onResize)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<PageHeading
|
||
eyebrow="数据看板"
|
||
title="运营大盘"
|
||
description="用户、设备、留存、内容、播放与成本总览，以及近 7 天趋势。"
|
||
>
|
||
<el-button :loading="loading" @click="loadAndRender">刷新</el-button>
|
||
</PageHeading>
|
||
|
||
<div v-loading="loading" class="board-wrap">
|
||
<DashboardMetricWall :overview="overview" :trend="trend" />
|
||
|
||
<!-- 趋势折线图（双 Y 轴 + 柱） -->
|
||
<section class="panel chart-panel">
|
||
<div class="panel-heading">
|
||
<div>
|
||
<h2>近 7 天趋势</h2>
|
||
<p>每日新增用户 / 播放事件 / 转码任务</p>
|
||
</div>
|
||
<span class="muted">数据时间：{{ lastUpdated }}</span>
|
||
</div>
|
||
<div ref="trendRef" class="chart chart-lg"></div>
|
||
</section>
|
||
|
||
<!-- 分布饼图组 -->
|
||
<section class="panel">
|
||
<div class="panel-heading">
|
||
<div>
|
||
<h2>状态分布</h2>
|
||
<p>短剧状态 / 转码状态 / 片源覆盖</p>
|
||
</div>
|
||
</div>
|
||
<div class="pie-row">
|
||
<div class="pie-cell">
|
||
<div class="pie-title">短剧状态</div>
|
||
<div ref="dramaPieRef" class="chart chart-pie"></div>
|
||
</div>
|
||
<div class="pie-cell">
|
||
<div class="pie-title">转码状态</div>
|
||
<div ref="transcodePieRef" class="chart chart-pie"></div>
|
||
</div>
|
||
<div class="pie-cell">
|
||
<div class="pie-title">片源覆盖</div>
|
||
<div ref="episodePieRef" class="chart chart-pie"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 转码队列 + 失败明细 -->
|
||
<section class="panel transcode-panel">
|
||
<div class="panel-heading">
|
||
<div>
|
||
<h2>转码看板</h2>
|
||
<p>队列积压与失败任务明细</p>
|
||
</div>
|
||
<p class="muted">{{ transcode?.notes?.join('；') || '' }}</p>
|
||
</div>
|
||
<div class="transcode-grid">
|
||
<div ref="queueBarRef" class="chart chart-bar"></div>
|
||
<div class="transcode-fail">
|
||
<h3>失败任务（最近 20 条）</h3>
|
||
<el-table
|
||
:data="transcode?.failedTasks || []"
|
||
border
|
||
class="drama-el-table"
|
||
empty-text="当前没有失败的转码任务"
|
||
size="small"
|
||
>
|
||
<el-table-column prop="id" label="任务ID" width="100" />
|
||
<el-table-column prop="episodeId" label="剧集" width="100" />
|
||
<el-table-column prop="status" label="状态" width="90" />
|
||
<el-table-column prop="retryCount" label="重试" width="70" />
|
||
<el-table-column
|
||
prop="errorMsg"
|
||
label="失败原因"
|
||
min-width="220"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column
|
||
prop="createdAt"
|
||
label="创建时间"
|
||
min-width="160"
|
||
show-overflow-tooltip
|
||
:formatter="dateCell"
|
||
/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 口径说明 -->
|
||
<el-alert
|
||
v-if="overview?.notes?.length"
|
||
class="board-notes"
|
||
type="info"
|
||
:closable="false"
|
||
show-icon
|
||
title="口径与缺失数据源说明"
|
||
>
|
||
<ul>
|
||
<li v-for="note in overview.notes" :key="note">{{ note }}</li>
|
||
</ul>
|
||
</el-alert>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.board-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.panel {
|
||
padding: 20px 24px;
|
||
background: var(--el-bg-color);
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.panel-heading {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 12px;
|
||
|
||
h2 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
margin: 4px 0 0;
|
||
font-size: 13px;
|
||
color: var(--el-text-color-secondary);
|
||
}
|
||
|
||
.muted {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-placeholder);
|
||
}
|
||
}
|
||
|
||
.chart {
|
||
width: 100%;
|
||
}
|
||
|
||
.chart-lg {
|
||
height: 320px;
|
||
}
|
||
|
||
.chart-pie {
|
||
height: 220px;
|
||
}
|
||
|
||
.chart-bar {
|
||
height: 220px;
|
||
}
|
||
|
||
.pie-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.pie-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.pie-title {
|
||
margin-bottom: 4px;
|
||
font-size: 13px;
|
||
color: var(--el-text-color-secondary);
|
||
}
|
||
}
|
||
|
||
.transcode-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 2fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.board-notes {
|
||
:deep(ul) {
|
||
padding-left: 18px;
|
||
margin: 4px 0 0;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
@media (width <= 900px) {
|
||
.pie-row,
|
||
.transcode-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|