feat(admin): 增加工作台大屏和转码通知
This commit is contained in:
Zhou Weidong committed
1 parent
2b2c6bd708
commit
a266d44483
10 files changed
+860
-172
No files matched your search
@@ -5,6 +5,8 @@ import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import { pageDramasApi } from '@/api/admin/drama'
|
||||
import { getDashboardOverviewApi, getDashboardTrendApi } from '@/api/admin/dashboard'
|
||||
import DashboardMetricWall from '@/views/dashboard/DashboardMetricWall.vue'
|
||||
import { useRbac } from '@/stores/rbac'
|
||||
import { formatCount } from '@/utils/format'
|
||||
import { statusClass } from '@/utils/status'
|
||||
@@ -15,6 +17,8 @@ const { can } = useRbac()
|
||||
const loading = ref(false)
|
||||
const dramas = ref([])
|
||||
const total = ref(0)
|
||||
const overview = ref(null)
|
||||
const trend = ref(null)
|
||||
|
||||
const totalViews = computed(() =>
|
||||
dramas.value.reduce((sum, item) => sum + Number(item.views || 0), 0)
|
||||
@@ -25,6 +29,12 @@ const reviewingCount = computed(
|
||||
const publishedCount = computed(
|
||||
() => dramas.value.filter((item) => item.status === 'published').length
|
||||
)
|
||||
const metricFallback = computed(() => ({
|
||||
'content.dramaTotal': total.value,
|
||||
'content.dramaReviewing': reviewingCount.value,
|
||||
'content.dramaPublished': publishedCount.value,
|
||||
'playback.viewTotal': totalViews.value
|
||||
}))
|
||||
const recentDramas = computed(() =>
|
||||
[...dramas.value]
|
||||
.sort((a, b) => String(b.updatedAt || '').localeCompare(String(a.updatedAt || '')))
|
||||
@@ -34,10 +44,16 @@ const recentDramas = computed(() =>
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
|
||||
const [res, board, trendRes] = await Promise.all([
|
||||
pageDramasApi({ pageIndex: 1, pageSize: 200 }),
|
||||
getDashboardOverviewApi().catch(() => null),
|
||||
getDashboardTrendApi().catch(() => null)
|
||||
])
|
||||
// 接口失败时 axios 拦截器会把业务错误吞成 undefined，这里不能让页面跟着崩
|
||||
dramas.value = res?.data?.list || []
|
||||
total.value = res?.data?.total || 0
|
||||
overview.value = board?.data || null
|
||||
trend.value = trendRes?.data || null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -45,72 +61,83 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-heading"
|
||||
><div><div class="eyebrow">内容概览</div><h1>工作台</h1><p>查看短剧内容与近期处理事项。</p></div
|
||||
><el-button
|
||||
v-if="can('drama:create')"
|
||||
type="primary"
|
||||
class="primary-button"
|
||||
@click="router.push({ name: 'dramas' })"
|
||||
><AppIcon :icon="AppIcons.add" />上传新短剧</el-button
|
||||
></div
|
||||
>
|
||||
<div v-loading="loading" class="stats-grid">
|
||||
<div class="stat-card"
|
||||
><div class="stat-top"
|
||||
><span>短剧总数</span
|
||||
><span class="stat-icon"><AppIcon :icon="AppIcons.content" /></span></div
|
||||
><div class="stat-value">{{ total }} <small>部</small></div></div
|
||||
>
|
||||
<div class="stat-card"
|
||||
><div class="stat-top"
|
||||
><span>累计播放量</span
|
||||
><span class="stat-icon"><AppIcon :icon="AppIcons.videoPlay" /></span></div
|
||||
><div class="stat-value">{{ formatCount(totalViews) }}</div></div
|
||||
>
|
||||
<div class="stat-card"
|
||||
><div class="stat-top"
|
||||
><span>待审核内容</span
|
||||
><span class="stat-icon"><AppIcon :icon="AppIcons.clock" /></span></div
|
||||
><div class="stat-value">{{ reviewingCount }} <small>项</small></div></div
|
||||
>
|
||||
<div class="stat-card"
|
||||
><div class="stat-top"
|
||||
><span>已上线</span
|
||||
><span class="stat-icon"><AppIcon :icon="AppIcons.checkCircle" /></span></div
|
||||
><div class="stat-value">{{ publishedCount }} <small>部</small></div></div
|
||||
>
|
||||
</div>
|
||||
<section class="panel recent-panel"
|
||||
><div class="panel-heading"
|
||||
><div><h2>最近更新</h2><p>短剧内容与发布状态</p></div
|
||||
><el-button text class="view-all" @click="router.push({ name: 'dramas' })"
|
||||
>短剧管理</el-button
|
||||
<div class="workbench">
|
||||
<div class="page-heading"
|
||||
><div
|
||||
><div class="eyebrow">内容概览</div><h1>工作台</h1
|
||||
><p>用户、设备、留存与短剧内容总览。</p></div
|
||||
><el-button
|
||||
v-if="can('drama:create')"
|
||||
type="primary"
|
||||
class="primary-button"
|
||||
@click="router.push({ name: 'dramas' })"
|
||||
><AppIcon :icon="AppIcons.add" />上传新短剧</el-button
|
||||
></div
|
||||
>
|
||||
<el-table
|
||||
<DashboardMetricWall
|
||||
v-loading="loading"
|
||||
:data="recentDramas"
|
||||
row-key="id"
|
||||
empty-text="暂无短剧数据"
|
||||
class="dashboard-el-table"
|
||||
><el-table-column prop="title" label="短剧名称" min-width="280" /><el-table-column
|
||||
prop="genre"
|
||||
label="类型"
|
||||
width="150" /><el-table-column label="集数" width="120"
|
||||
><template #default="scope">{{ scope?.row?.episodes }} 集</template></el-table-column
|
||||
><el-table-column label="播放量" width="140"
|
||||
><template #default="scope">{{ formatCount(scope?.row?.views) }}</template></el-table-column
|
||||
><el-table-column label="状态" width="130"
|
||||
><template #default="scope"
|
||||
><el-tag
|
||||
v-if="scope?.row"
|
||||
:class="['status-badge', statusClass(scope.row.status)]"
|
||||
effect="light"
|
||||
>{{ scope.row.statusText }}</el-tag
|
||||
></template
|
||||
></el-table-column
|
||||
><el-table-column prop="updatedAt" label="更新时间" width="180"
|
||||
/></el-table>
|
||||
</section>
|
||||
:overview="overview"
|
||||
:trend="trend"
|
||||
:fallback="metricFallback"
|
||||
/>
|
||||
<section class="panel recent-panel"
|
||||
><div class="panel-heading"
|
||||
><div><h2>最近更新</h2><p>短剧内容与发布状态</p></div
|
||||
><el-button text class="view-all" @click="router.push({ name: 'dramas' })"
|
||||
>短剧管理</el-button
|
||||
></div
|
||||
>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="recentDramas"
|
||||
row-key="id"
|
||||
empty-text="暂无短剧数据"
|
||||
class="dashboard-el-table"
|
||||
><el-table-column prop="title" label="短剧名称" min-width="280" /><el-table-column
|
||||
prop="genre"
|
||||
label="类型"
|
||||
width="150" /><el-table-column label="集数" width="120"
|
||||
><template #default="scope">{{ scope?.row?.episodes }} 集</template></el-table-column
|
||||
><el-table-column label="播放量" width="140"
|
||||
><template #default="scope">{{
|
||||
formatCount(scope?.row?.views)
|
||||
}}</template></el-table-column
|
||||
><el-table-column label="状态" width="130"
|
||||
><template #default="scope"
|
||||
><el-tag
|
||||
v-if="scope?.row"
|
||||
:class="['status-badge', statusClass(scope.row.status)]"
|
||||
effect="light"
|
||||
>{{ scope.row.statusText }}</el-tag
|
||||
></template
|
||||
></el-table-column
|
||||
><el-table-column prop="updatedAt" label="更新时间" width="180"
|
||||
/></el-table>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.workbench {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.workbench .page-heading {
|
||||
flex: none;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.workbench :deep(.screen) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.recent-panel {
|
||||
flex: none;
|
||||
max-height: 220px;
|
||||
margin-top: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 转码通知页：按转码中、成功、失败查看短剧和集数。 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import PageHeading from '@/views/components/PageHeading.vue'
|
||||
import {
|
||||
getTranscodeNoticesApi,
|
||||
type TranscodeNotice,
|
||||
type TranscodeNoticeItem
|
||||
} from '@/api/admin/transcodeNotice'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import { markTranscodeNoticeSeen } from '@/utils/transcodeNoticeSeen'
|
||||
|
||||
const loading = ref(false)
|
||||
const tab = ref('RUNNING')
|
||||
const notice = ref<TranscodeNotice | null>(null)
|
||||
|
||||
const rows = computed<TranscodeNoticeItem[]>(() => {
|
||||
if (tab.value === 'SUCCESS') return notice.value?.successList || []
|
||||
if (tab.value === 'FAILED') return notice.value?.failedList || []
|
||||
return notice.value?.runningList || []
|
||||
})
|
||||
|
||||
function episodeText(row: TranscodeNoticeItem) {
|
||||
const no = row.episodeNo ? `第${row.episodeNo}集` : ''
|
||||
if (!row.episodeTitle || row.episodeTitle === no) return no || '集数未知'
|
||||
return no ? `${no} ${row.episodeTitle}` : row.episodeTitle
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getTranscodeNoticesApi()
|
||||
notice.value = res.data || null
|
||||
if (notice.value) {
|
||||
markTranscodeNoticeSeen({
|
||||
running: Number(notice.value.running || 0),
|
||||
success: Number(notice.value.success || 0),
|
||||
failed: Number(notice.value.failed || 0)
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeading
|
||||
eyebrow="通知"
|
||||
title="转码通知"
|
||||
description="查看转码中、转码成功和转码失败的短剧与集数。"
|
||||
>
|
||||
<el-button :loading="loading" @click="load">刷新</el-button>
|
||||
</PageHeading>
|
||||
|
||||
<section class="panel notice-panel">
|
||||
<el-tabs v-model="tab">
|
||||
<el-tab-pane label="转码中" name="RUNNING" />
|
||||
<el-tab-pane label="转码成功" name="SUCCESS" />
|
||||
<el-tab-pane label="转码失败" name="FAILED" />
|
||||
</el-tabs>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="rows"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
empty-text="暂无通知"
|
||||
>
|
||||
<el-table-column prop="dramaTitle" label="短剧" min-width="220" show-overflow-tooltip />
|
||||
<el-table-column label="集数" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ episodeText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="进度" width="100">
|
||||
<template #default="{ row }">{{ row.progress ?? 0 }}%</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tab === 'FAILED'"
|
||||
prop="errorMsg"
|
||||
label="失败原因"
|
||||
min-width="220"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="更新时间" width="180">
|
||||
<template #default="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notice-panel {
|
||||
padding: 8px 16px 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,9 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
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,
|
||||
@@ -16,22 +17,7 @@ import type {
|
||||
DashboardTrend,
|
||||
TranscodeBoard
|
||||
} from '@/api/admin/dashboard'
|
||||
import { dateCell, formatCount } from '@/utils/format'
|
||||
|
||||
/**
|
||||
* 指标展示配置：key 与后端 /admin/dashboard/overview 返回的字段一一对应，
|
||||
* 不在前端编字段；口径说明见后端 DashboardService 注释与 docs/api-phase1.md「2.8」。
|
||||
*/
|
||||
const HIGHLIGHT_CARDS = [
|
||||
{ group: 'user', key: 'total', label: '总用户数', color: '#5B8FF9' },
|
||||
{ group: 'user', key: 'newToday', label: '今日新增', color: '#5AD8A6' },
|
||||
{ group: 'content', key: 'dramaPublished', label: '已上线短剧', color: '#F6BD16' },
|
||||
{ group: 'content', key: 'episodeWithMedia', label: '有片源剧集', color: '#E86452' },
|
||||
{ group: 'playback', key: 'playTotal', label: '累计播放', color: '#6DC8EC' },
|
||||
{ group: 'playback', key: 'playEvents7d', label: '近 7 天播放', color: '#945FB9' },
|
||||
{ group: 'cost', key: 'transcodeRunning', label: '转码中', color: '#FF9845' },
|
||||
{ group: 'cost', key: 'transcodeQueued', label: '转码排队', color: '#1E9493' }
|
||||
]
|
||||
import { dateCell } from '@/utils/format'
|
||||
|
||||
const loading = ref(false)
|
||||
const overview = ref<DashboardOverview | null>(null)
|
||||
@@ -62,40 +48,6 @@ const transcodeStatusLabel = {
|
||||
CANCELED: '已取消'
|
||||
} as const
|
||||
|
||||
function groupValue(groupKey: string, metricKey: string) {
|
||||
const g = overview.value?.[groupKey as keyof DashboardOverview] as
|
||||
| Record<string, number>
|
||||
| undefined
|
||||
return g?.[metricKey]
|
||||
}
|
||||
|
||||
function display(value: unknown) {
|
||||
if (value === null || value === undefined) return '暂无数据源'
|
||||
if (typeof value === 'number' && !Number.isInteger(value)) return value.toFixed(3)
|
||||
return String(value)
|
||||
}
|
||||
|
||||
async function load() {
|
||||
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 renderCharts() {
|
||||
disposeAll()
|
||||
renderTrend()
|
||||
@@ -280,26 +232,13 @@ onBeforeUnmount(() => {
|
||||
<PageHeading
|
||||
eyebrow="数据看板"
|
||||
title="运营大盘"
|
||||
description="用户、内容、播放与成本总览，以及近 7 天趋势。"
|
||||
description="用户、设备、留存、内容、播放与成本总览，以及近 7 天趋势。"
|
||||
>
|
||||
<el-button :loading="loading" @click="loadAndRender">刷新</el-button>
|
||||
</PageHeading>
|
||||
|
||||
<div v-loading="loading" class="board-wrap">
|
||||
<!-- 顶部关键指标卡 -->
|
||||
<div class="highlight-grid">
|
||||
<div
|
||||
v-for="card in HIGHLIGHT_CARDS"
|
||||
:key="card.group + card.key"
|
||||
class="highlight-card"
|
||||
:style="{ borderTopColor: card.color }"
|
||||
>
|
||||
<div class="highlight-label">{{ card.label }}</div>
|
||||
<div class="highlight-value" :class="{ empty: groupValue(card.group, card.key) === null }">
|
||||
{{ display(formatCount(groupValue(card.group, card.key))) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DashboardMetricWall :overview="overview" :trend="trend" />
|
||||
|
||||
<!-- 趋势折线图（双 Y 轴 + 柱） -->
|
||||
<section class="panel chart-panel">
|
||||
@@ -403,10 +342,10 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
@@ -434,41 +373,8 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.muted {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 8px;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-top: 3px solid transparent;
|
||||
|
||||
.highlight-label {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.highlight-value {
|
||||
margin-top: 6px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--el-text-color-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
&.empty {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -514,8 +420,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
.board-notes {
|
||||
:deep(ul) {
|
||||
margin: 4px 0 0;
|
||||
padding-left: 18px;
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,445 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 工作台可视化大屏：用户、设备、留存与内容趋势。 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import echarts from '@/plugins/echarts'
|
||||
import type { DashboardOverview, DashboardTrend } from '@/api/admin/dashboard'
|
||||
import { formatCount } from '@/utils/format'
|
||||
|
||||
const props = defineProps<{
|
||||
overview: DashboardOverview | null
|
||||
trend?: DashboardTrend | null
|
||||
fallback?: Record<string, number>
|
||||
}>()
|
||||
|
||||
const trendRef = ref<HTMLElement>()
|
||||
const deviceRef = ref<HTMLElement>()
|
||||
const clock = ref('')
|
||||
let trendChart: echarts.ECharts | null = null
|
||||
let deviceChart: echarts.ECharts | null = null
|
||||
let timer = 0
|
||||
|
||||
const AXIS = '#909399'
|
||||
const SPLIT = '#e6e8eb'
|
||||
const BRAND = '#c4322a'
|
||||
const AMBER = '#e9aa4b'
|
||||
|
||||
const kpis = computed(() => [
|
||||
{ label: '总用户数', value: text('user', 'total'), accent: BRAND },
|
||||
{ label: '今日新增', value: text('user', 'newToday'), accent: '#55b987' },
|
||||
{ label: '近 7 天新增', value: text('user', 'new7d'), accent: AMBER },
|
||||
{ label: '近 7 天活跃', value: text('user', 'active7d'), accent: '#d3615b' },
|
||||
{ label: '累计播放', value: text('playback', 'viewTotal'), accent: BRAND },
|
||||
{ label: '已上线短剧', value: text('content', 'dramaPublished'), accent: '#55b987' }
|
||||
])
|
||||
|
||||
const rails = computed(() => [
|
||||
{ label: '短剧总数', value: text('content', 'dramaTotal') },
|
||||
{ label: '待审核', value: text('content', 'dramaReviewing') },
|
||||
{ label: '有片源', value: text('content', 'episodeWithMedia') },
|
||||
{ label: '近 7 天播放', value: text('playback', 'playEvents7d') },
|
||||
{ label: '完播率', value: rate('playback', 'finishRate') },
|
||||
{ label: '金币消耗', value: text('revenue', 'coinConsumed') },
|
||||
{ label: '转码中', value: text('cost', 'transcodeRunning') },
|
||||
{ label: '转码排队', value: text('cost', 'transcodeQueued') }
|
||||
])
|
||||
|
||||
const retentionDay = computed(() => percent('user', 'retention1d'))
|
||||
const retentionWeek = computed(() => percent('user', 'retention7d'))
|
||||
|
||||
function metric(group: string, key: string) {
|
||||
const source = props.overview?.[group as keyof DashboardOverview]
|
||||
if (source && typeof source === 'object') {
|
||||
const value = (source as Record<string, number | null>)[key]
|
||||
if (value !== undefined && value !== null) return Number(value)
|
||||
}
|
||||
const fallback = props.fallback?.[`${group}.${key}`]
|
||||
return fallback == null ? null : Number(fallback)
|
||||
}
|
||||
|
||||
function text(group: string, key: string) {
|
||||
const value = metric(group, key)
|
||||
return value == null || Number.isNaN(value) ? '--' : formatCount(value)
|
||||
}
|
||||
|
||||
function percent(group: string, key: string) {
|
||||
const value = metric(group, key)
|
||||
if (value == null || Number.isNaN(value)) return null
|
||||
return Math.max(0, Math.min(100, Math.round(value * 1000) / 10))
|
||||
}
|
||||
|
||||
function rate(group: string, key: string) {
|
||||
const value = percent(group, key)
|
||||
return value == null ? '--' : `${value.toFixed(1)}%`
|
||||
}
|
||||
|
||||
function tick() {
|
||||
clock.value = new Date().toLocaleString('zh-CN', { hour12: false })
|
||||
}
|
||||
|
||||
function renderCharts() {
|
||||
renderTrend()
|
||||
renderDevices()
|
||||
}
|
||||
|
||||
function renderTrend() {
|
||||
if (!trendRef.value) return
|
||||
trendChart = trendChart ?? echarts.init(trendRef.value)
|
||||
const trend = props.trend
|
||||
trendChart.setOption({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#e6e8eb',
|
||||
textStyle: { color: '#303640' }
|
||||
},
|
||||
legend: { top: 0, left: 0, textStyle: { color: AXIS }, itemWidth: 12, itemHeight: 8 },
|
||||
grid: { left: 42, right: 16, top: 32, bottom: 24 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: trend?.dates ?? [],
|
||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,.16)' } },
|
||||
axisLabel: { color: AXIS, fontSize: 11 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { lineStyle: { color: SPLIT, type: 'dashed' } },
|
||||
axisLabel: { color: AXIS, fontSize: 11 }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '新增用户',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
data: trend?.newUsers ?? [],
|
||||
lineStyle: { width: 2, color: BRAND },
|
||||
areaStyle: { color: 'rgba(196, 50, 42, 0.12)' }
|
||||
},
|
||||
{
|
||||
name: '播放事件',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
data: trend?.playEvents ?? [],
|
||||
lineStyle: { width: 2, color: AMBER }
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
function renderDevices() {
|
||||
if (!deviceRef.value) return
|
||||
deviceChart = deviceChart ?? echarts.init(deviceRef.value)
|
||||
const android = metric('user', 'androidActive7d') ?? 0
|
||||
const ios = metric('user', 'iosActive7d') ?? 0
|
||||
deviceChart.setOption({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#e6e8eb',
|
||||
textStyle: { color: '#303640' }
|
||||
},
|
||||
legend: { bottom: 0, textStyle: { color: AXIS }, itemWidth: 10, itemHeight: 10 },
|
||||
title: {
|
||||
text: formatCount(android + ios),
|
||||
subtext: '活跃设备',
|
||||
left: 'center',
|
||||
top: '38%',
|
||||
textStyle: { color: '#303640', fontSize: 22, fontWeight: 700 },
|
||||
subtextStyle: { color: AXIS, fontSize: 12 }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['58%', '76%'],
|
||||
center: ['50%', '46%'],
|
||||
label: { show: false },
|
||||
data: [
|
||||
{ name: 'Android', value: android, itemStyle: { color: '#55b987' } },
|
||||
{ name: 'iOS', value: ios, itemStyle: { color: BRAND } }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
trendChart?.resize()
|
||||
deviceChart?.resize()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.overview, props.trend],
|
||||
() => nextTick(renderCharts),
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
tick()
|
||||
timer = window.setInterval(tick, 1000)
|
||||
window.addEventListener('resize', onResize)
|
||||
nextTick(renderCharts)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.clearInterval(timer)
|
||||
window.removeEventListener('resize', onResize)
|
||||
trendChart?.dispose()
|
||||
deviceChart?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="screen">
|
||||
<header class="screen-head">
|
||||
<h2>运营概览</h2>
|
||||
<time>{{ clock }}</time>
|
||||
</header>
|
||||
|
||||
<div class="kpi-row">
|
||||
<article v-for="item in kpis" :key="item.label" class="kpi">
|
||||
<i :style="{ background: item.accent }"></i>
|
||||
<div>
|
||||
<strong>{{ item.value }}</strong>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="viz-row">
|
||||
<article class="panel trend-panel">
|
||||
<h3>近 7 日新增与播放</h3>
|
||||
<div ref="trendRef" class="chart"></div>
|
||||
</article>
|
||||
<article class="panel">
|
||||
<h3>活跃设备占比</h3>
|
||||
<div ref="deviceRef" class="chart"></div>
|
||||
</article>
|
||||
<article class="panel retain">
|
||||
<h3>用户留存</h3>
|
||||
<div class="rings">
|
||||
<div class="ring" :style="{ '--p': `${retentionDay ?? 0}%` }">
|
||||
<strong>{{ retentionDay == null ? '--' : `${retentionDay.toFixed(1)}%` }}</strong>
|
||||
<span>次日留存</span>
|
||||
</div>
|
||||
<div class="ring week" :style="{ '--p': `${retentionWeek ?? 0}%` }">
|
||||
<strong>{{ retentionWeek == null ? '--' : `${retentionWeek.toFixed(1)}%` }}</strong>
|
||||
<span>7 日留存</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="rail">
|
||||
<div v-for="item in rails" :key="item.label">
|
||||
<strong>{{ item.value }}</strong>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
color: #303640;
|
||||
}
|
||||
|
||||
.screen-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #2f343c;
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.kpi-row,
|
||||
.viz-row,
|
||||
.rail {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.kpi-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kpi {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 72px;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid #e6e8eb;
|
||||
border-radius: 6px;
|
||||
|
||||
i {
|
||||
width: 3px;
|
||||
height: 32px;
|
||||
border-radius: 3px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: 22px;
|
||||
line-height: 1.1;
|
||||
color: #303640;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.viz-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.7fr);
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 12px 14px 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #e6e8eb;
|
||||
border-radius: 6px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f343c;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.rings {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.ring {
|
||||
--p: 0%;
|
||||
|
||||
display: grid;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
background: conic-gradient(#c4322a var(--p), #f5d9d8 0);
|
||||
border-radius: 50%;
|
||||
place-items: center;
|
||||
|
||||
&::after {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
|
||||
strong,
|
||||
span {
|
||||
grid-area: 1 / 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
strong {
|
||||
margin-top: -12px;
|
||||
font-size: 16px;
|
||||
color: #303640;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 24px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.week {
|
||||
background: conic-gradient(#e9aa4b var(--p), #fff5e7 0);
|
||||
}
|
||||
|
||||
.rail {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
|
||||
div {
|
||||
min-width: 0;
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #e6e8eb;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
color: #303640;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 760px) {
|
||||
.kpi-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.viz-row,
|
||||
.rail {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user