595 lines
16 KiB
Vue
595 lines
16 KiB
Vue
<script setup lang="ts">
|
|
import { formatISO, sub, type Duration } from "date-fns"
|
|
import { NButton, NFlex } from "naive-ui"
|
|
import {
|
|
getActivityRank,
|
|
getClassRank,
|
|
getRank,
|
|
getUserClassRank,
|
|
getClassPK,
|
|
} from "oj/api"
|
|
import { useBreakpoints } from "shared/composables/breakpoints"
|
|
import { getACRate } from "utils/functions"
|
|
import type { Rank } from "utils/types"
|
|
import Pagination from "shared/components/Pagination.vue"
|
|
import { ChartType } from "utils/constants"
|
|
import { renderTableTitle } from "utils/renders"
|
|
import Chart from "./components/Chart.vue"
|
|
import Index from "./components/Index.vue"
|
|
import { useUserStore } from "shared/store/user"
|
|
import { Icon } from "@iconify/vue"
|
|
|
|
const gradeOptions = [
|
|
{ label: "24年级", value: 24 },
|
|
{ label: "23年级", value: 23 },
|
|
{ label: "22年级", value: 22 },
|
|
{ label: "21年级", value: 21 },
|
|
{ label: "20年级", value: 20 },
|
|
]
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
const { isDesktop } = useBreakpoints()
|
|
const data = ref<Rank[]>([])
|
|
const total = ref(0)
|
|
const query = reactive({
|
|
limit: 10,
|
|
page: 1,
|
|
})
|
|
const rankChart = ref<Rank[]>([])
|
|
const activityChart = ref<Rank[]>([])
|
|
const duration = ref("months:1")
|
|
const classData = ref<ClassRank[]>([])
|
|
const classQuery = reactive({
|
|
grade: gradeOptions[0].value,
|
|
})
|
|
const myClassData = ref<UserRank[]>([])
|
|
const myRank = ref(-1)
|
|
const myClassName = ref("")
|
|
const myClassScope = ref<"window" | "all">("window")
|
|
const myClassTotal = ref(0)
|
|
const myClassQuery = reactive({
|
|
page: 1,
|
|
limit: 10,
|
|
})
|
|
|
|
const showClassDetailModal = ref(false)
|
|
const classDetailData = ref<ClassComparison | null>(null)
|
|
const classDetailLoading = ref(false)
|
|
|
|
async function loadClassDetail(className: string) {
|
|
showClassDetailModal.value = true
|
|
classDetailLoading.value = true
|
|
classDetailData.value = null
|
|
try {
|
|
const res = await getClassPK([className])
|
|
classDetailData.value = res.data.comparisons[0] ?? null
|
|
} catch {
|
|
// ignore
|
|
} finally {
|
|
classDetailLoading.value = false
|
|
}
|
|
}
|
|
|
|
interface ClassRank {
|
|
rank: number
|
|
class_name: string
|
|
user_count: number
|
|
total_ac: number
|
|
total_submission: number
|
|
avg_ac: number
|
|
ac_rate: number
|
|
}
|
|
|
|
interface ClassComparison {
|
|
class_name: string
|
|
user_count: number
|
|
total_ac: number
|
|
total_submission: number
|
|
avg_ac: number
|
|
median_ac: number
|
|
q1_ac: number
|
|
q3_ac: number
|
|
iqr: number
|
|
std_dev: number
|
|
top_10_avg: number
|
|
middle_80_avg: number
|
|
bottom_10_avg: number
|
|
excellent_rate: number
|
|
pass_rate: number
|
|
active_rate: number
|
|
ac_rate: number
|
|
composite_score: number
|
|
}
|
|
|
|
interface UserRank {
|
|
rank: number
|
|
username: string
|
|
accepted_number: number
|
|
submission_number: number
|
|
}
|
|
|
|
async function init() {
|
|
const offset = (query.page - 1) * query.limit
|
|
const res = await getRank(offset, query.limit, 100)
|
|
data.value = res.data.results
|
|
total.value = res.data.total
|
|
return res.data.results
|
|
}
|
|
|
|
const columns: DataTableColumn<Rank>[] = [
|
|
{
|
|
title: renderTableTitle("排名", "streamline-emojis:flexed-biceps-1"),
|
|
key: "index",
|
|
width: 100,
|
|
align: "center",
|
|
render: (_, index) =>
|
|
h(Index, { index, page: query.page, limit: query.limit }),
|
|
},
|
|
{
|
|
title: renderTableTitle(
|
|
"用户",
|
|
"streamline-emojis:smiling-face-with-sunglasses",
|
|
),
|
|
key: "username",
|
|
width: 200,
|
|
render: (row) =>
|
|
h(
|
|
NButton,
|
|
{
|
|
text: true,
|
|
type: "info",
|
|
onClick: () => router.push("/user?name=" + row.user.username),
|
|
},
|
|
() => row.user.username,
|
|
),
|
|
},
|
|
{
|
|
title: renderTableTitle(
|
|
"个性签名",
|
|
"streamline-emojis:no-one-under-eighteen",
|
|
),
|
|
key: "mood",
|
|
minWidth: 200,
|
|
},
|
|
{
|
|
title: renderTableTitle("已解决", "streamline-emojis:raised-fist-1"),
|
|
key: "accepted_number",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: renderTableTitle("提交数", "streamline-emojis:rocket"),
|
|
key: "submission_number",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: renderTableTitle("正确率", "streamline-emojis:wrapped-gift-1"),
|
|
key: "rate",
|
|
width: 120,
|
|
align: "center",
|
|
render: (row) => getACRate(row.accepted_number, row.submission_number),
|
|
},
|
|
]
|
|
|
|
watch(() => query.page, init)
|
|
watch(
|
|
() => query.limit,
|
|
() => {
|
|
query.page = 1
|
|
init()
|
|
},
|
|
)
|
|
watch(duration, listActivity)
|
|
|
|
async function listActivity() {
|
|
const current = Date.now()
|
|
const start = formatISO(sub(current, subOptions.value))
|
|
const res = await getActivityRank(start)
|
|
activityChart.value = res.data.map(
|
|
(d: { username: string; count: number }) => ({
|
|
user: {
|
|
username: d.username,
|
|
},
|
|
accepted_number: d.count,
|
|
submission_number: 0,
|
|
}),
|
|
)
|
|
}
|
|
|
|
async function listRank() {
|
|
const res = await getRank(0, 10, 10)
|
|
rankChart.value = res.data.results
|
|
}
|
|
|
|
const options: SelectOption[] = [
|
|
{ label: "一周内", value: "weeks:1" },
|
|
{ label: "一个月内", value: "months:1" },
|
|
{ label: "两个月内", value: "months:2" },
|
|
{ label: "半年内", value: "months:6" },
|
|
{ label: "一年内", value: "years:1" },
|
|
]
|
|
|
|
const subOptions = computed<Duration>(() => {
|
|
let dur = options.find((it) => it.value === duration.value) ?? options[1]
|
|
const x = dur.value!.toString().split(":")
|
|
const unit = x[0]
|
|
const n = x[1]
|
|
return { [unit]: parseInt(n) }
|
|
})
|
|
|
|
onMounted(() => {
|
|
init()
|
|
listRank()
|
|
listActivity()
|
|
listClassRank()
|
|
listMyClassRank()
|
|
})
|
|
|
|
const classColumns: DataTableColumn<ClassRank>[] = [
|
|
{
|
|
title: "排名",
|
|
key: "rank",
|
|
width: 60,
|
|
titleAlign: "center",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "班级",
|
|
key: "class_name",
|
|
render: (row) =>
|
|
`${row.class_name.slice(0, 2)}计算机${row.class_name.slice(2)}班`,
|
|
minWidth: 120,
|
|
titleAlign: "center",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "人数",
|
|
key: "user_count",
|
|
width: 60,
|
|
titleAlign: "center",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "总 AC 数",
|
|
key: "total_ac",
|
|
width: 70,
|
|
titleAlign: "center",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "提交数",
|
|
key: "total_submission",
|
|
width: 70,
|
|
titleAlign: "center",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "平均 AC 数",
|
|
key: "avg_ac",
|
|
width: 70,
|
|
titleAlign: "center",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "正确率",
|
|
key: "ac_rate",
|
|
width: 70,
|
|
titleAlign: "center",
|
|
align: "center",
|
|
render: (row) => `${row.ac_rate}%`,
|
|
},
|
|
{
|
|
title: "详情",
|
|
key: "action",
|
|
width: 60,
|
|
titleAlign: "center",
|
|
align: "center",
|
|
render: (row) =>
|
|
h(
|
|
NButton,
|
|
{
|
|
text: true,
|
|
type: "info",
|
|
onClick: () => loadClassDetail(row.class_name),
|
|
},
|
|
() => "查看",
|
|
),
|
|
},
|
|
]
|
|
|
|
const myClassColumns: DataTableColumn<UserRank>[] = [
|
|
{
|
|
title: "排名",
|
|
key: "rank",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "用户名",
|
|
key: "username",
|
|
width: 200,
|
|
render: (row) =>
|
|
h(
|
|
NButton,
|
|
{
|
|
text: true,
|
|
type: "info",
|
|
onClick: () => router.push("/user?name=" + row.username),
|
|
},
|
|
() =>
|
|
row.rank === myRank.value
|
|
? h(
|
|
NFlex,
|
|
{ align: "flex-end" },
|
|
{
|
|
default: () => [
|
|
h("span", {}, row.username),
|
|
h(Icon, {
|
|
width: 20,
|
|
icon: "fluent-emoji:person-raising-hand",
|
|
}),
|
|
],
|
|
},
|
|
)
|
|
: row.username,
|
|
),
|
|
},
|
|
{
|
|
title: "已解决",
|
|
key: "accepted_number",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "提交数",
|
|
key: "submission_number",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
]
|
|
|
|
async function listClassRank() {
|
|
if (!userStore.user) {
|
|
await userStore.getMyProfile()
|
|
}
|
|
const className = userStore.user?.class_name
|
|
if (className) {
|
|
classQuery.grade = parseInt(className.slice(0, 2))
|
|
}
|
|
const res = await getClassRank(classQuery.grade)
|
|
classData.value = res.data
|
|
}
|
|
|
|
async function listMyClassRank() {
|
|
try {
|
|
const offset =
|
|
myClassScope.value === "all"
|
|
? (myClassQuery.page - 1) * myClassQuery.limit
|
|
: 0
|
|
const limit = myClassScope.value === "all" ? myClassQuery.limit : undefined
|
|
const res = await getUserClassRank(myClassScope.value, offset, limit)
|
|
myRank.value = res.data.my_rank
|
|
myClassName.value = res.data.class_name
|
|
myClassData.value = res.data.ranks
|
|
myClassTotal.value = res.data.total ?? res.data.ranks.length
|
|
if (myClassScope.value === "window") {
|
|
myClassQuery.page = 1
|
|
}
|
|
} catch (err: any) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => classQuery.grade,
|
|
() => {
|
|
listClassRank()
|
|
},
|
|
)
|
|
|
|
watch(myClassScope, listMyClassRank)
|
|
|
|
watch(
|
|
() => myClassQuery.page,
|
|
() => {
|
|
if (myClassScope.value === "all") {
|
|
listMyClassRank()
|
|
}
|
|
},
|
|
)
|
|
|
|
watch(
|
|
() => myClassQuery.limit,
|
|
() => {
|
|
myClassQuery.page = 1
|
|
if (myClassScope.value === "all") {
|
|
listMyClassRank()
|
|
}
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<n-flex vertical size="large">
|
|
<n-grid :cols="isDesktop ? 2 : 1" :x-gap="20" :y-gap="20">
|
|
<n-gi :span="1">
|
|
<n-card>
|
|
<template #header>
|
|
<div style="height: 34px">全服 Top10</div>
|
|
</template>
|
|
<Chart
|
|
v-if="rankChart.length"
|
|
:type="ChartType.Rank"
|
|
:rank-data="rankChart"
|
|
/>
|
|
<n-empty v-else style="padding: 20px 0"></n-empty>
|
|
</n-card>
|
|
</n-gi>
|
|
<n-gi :span="1">
|
|
<n-card>
|
|
<template #header>日活 Top10</template>
|
|
<template #header-extra>
|
|
<n-select
|
|
style="width: 120px"
|
|
:options="options"
|
|
v-model:value="duration"
|
|
/>
|
|
</template>
|
|
<Chart
|
|
v-if="activityChart.length"
|
|
:type="ChartType.Activity"
|
|
:rank-data="activityChart"
|
|
/>
|
|
<n-empty v-else style="padding: 20px 0"></n-empty>
|
|
</n-card>
|
|
</n-gi>
|
|
</n-grid>
|
|
<n-card>
|
|
<template #header>全服 Top100</template>
|
|
<n-data-table :data="data" :columns="columns" />
|
|
<template #footer>
|
|
<Pagination
|
|
:total="total"
|
|
v-model:page="query.page"
|
|
v-model:limit="query.limit"
|
|
/>
|
|
</template>
|
|
</n-card>
|
|
<n-grid :cols="isDesktop ? 2 : 1" :x-gap="20" :y-gap="20">
|
|
<n-gi :span="1">
|
|
<n-card>
|
|
<template #header>
|
|
<n-flex align="center">
|
|
<span>班级排名</span>
|
|
<n-button
|
|
type="primary"
|
|
secondary
|
|
@click="router.push('/class')"
|
|
v-if="userStore.isAdminRole"
|
|
>
|
|
班级PK
|
|
</n-button>
|
|
</n-flex>
|
|
</template>
|
|
<template #header-extra>
|
|
<n-select
|
|
v-model:value="classQuery.grade"
|
|
placeholder="选择年级"
|
|
clearable
|
|
style="width: 180px"
|
|
:options="gradeOptions"
|
|
/>
|
|
</template>
|
|
<n-data-table :data="classData" :columns="classColumns" />
|
|
</n-card>
|
|
</n-gi>
|
|
<n-gi :span="1">
|
|
<n-card>
|
|
<template #header>我在班级的排名</template>
|
|
<template #header-extra>
|
|
<n-select
|
|
style="width: 180px"
|
|
:options="[
|
|
{ label: '我的位置', value: 'window' },
|
|
{ label: '全班排名', value: 'all' },
|
|
]"
|
|
v-model:value="myClassScope"
|
|
/>
|
|
</template>
|
|
<n-data-table :data="myClassData" :columns="myClassColumns" />
|
|
<template #footer v-if="myClassScope === 'all'">
|
|
<Pagination
|
|
:total="myClassTotal"
|
|
v-model:page="myClassQuery.page"
|
|
v-model:limit="myClassQuery.limit"
|
|
/>
|
|
</template>
|
|
</n-card>
|
|
</n-gi>
|
|
</n-grid>
|
|
</n-flex>
|
|
|
|
<n-modal
|
|
v-model:show="showClassDetailModal"
|
|
preset="card"
|
|
:title="classDetailData ? `${classDetailData.class_name.slice(0, 2)}计算机${classDetailData.class_name.slice(2)}班` : '班级详情'"
|
|
:style="{ width: '700px', maxWidth: '95vw' }"
|
|
>
|
|
<n-spin :show="classDetailLoading" style="min-height: 200px">
|
|
<n-flex v-if="classDetailData" vertical :size="12">
|
|
<n-grid :cols="5" :x-gap="8" responsive="screen">
|
|
<n-gi>
|
|
<n-statistic label="总AC数" :value="classDetailData.total_ac" size="large" />
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-statistic label="平均AC数" :value="classDetailData.avg_ac.toFixed(2)" size="large" />
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-statistic label="中位数AC" :value="classDetailData.median_ac.toFixed(2)" size="large" />
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-statistic label="总提交数" :value="classDetailData.total_submission" size="large" />
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-statistic label="AC率" :value="classDetailData.ac_rate.toFixed(1) + '%'" size="large" />
|
|
</n-gi>
|
|
</n-grid>
|
|
|
|
<n-divider style="margin: 12px 0" />
|
|
|
|
<n-descriptions bordered :column="2" size="small" label-placement="left">
|
|
<n-descriptions-item label="第一四分位数(Q1)">
|
|
<span style="color: #9254de; font-weight: 500">{{ classDetailData.q1_ac.toFixed(2) }}</span>
|
|
</n-descriptions-item>
|
|
<n-descriptions-item label="第三四分位数(Q3)">
|
|
<span style="color: #f759ab; font-weight: 500">{{ classDetailData.q3_ac.toFixed(2) }}</span>
|
|
</n-descriptions-item>
|
|
<n-descriptions-item label="四分位距(IQR)">
|
|
<span style="color: #13c2c2; font-weight: 500">{{ classDetailData.iqr.toFixed(2) }}</span>
|
|
</n-descriptions-item>
|
|
<n-descriptions-item label="标准差">
|
|
<span style="color: #fa8c16; font-weight: 500">{{ classDetailData.std_dev.toFixed(2) }}</span>
|
|
</n-descriptions-item>
|
|
<n-descriptions-item label="前10%均值">
|
|
<span style="color: #cf1322; font-weight: 600">{{ classDetailData.top_10_avg.toFixed(2) }}</span>
|
|
</n-descriptions-item>
|
|
<n-descriptions-item label="中间80%均值">
|
|
<span style="color: #389e0d; font-weight: 600">{{ classDetailData.middle_80_avg.toFixed(2) }}</span>
|
|
</n-descriptions-item>
|
|
<n-descriptions-item label="后10%均值">
|
|
<span style="color: #096dd9; font-weight: 500">{{ classDetailData.bottom_10_avg.toFixed(2) }}</span>
|
|
</n-descriptions-item>
|
|
<n-descriptions-item label="人数">
|
|
<span style="color: #1890ff; font-weight: 600">{{ classDetailData.user_count }}</span>
|
|
</n-descriptions-item>
|
|
</n-descriptions>
|
|
|
|
<n-card size="small" title="比率统计" embedded style="margin-top: 12px">
|
|
<n-space vertical :size="10">
|
|
<n-progress type="line" :percentage="classDetailData.excellent_rate" :show-indicator="true" :border-radius="4">
|
|
<template #default>优秀率: {{ classDetailData.excellent_rate.toFixed(1) }}%</template>
|
|
</n-progress>
|
|
<n-progress type="line" :percentage="classDetailData.pass_rate" :show-indicator="true" :border-radius="4" status="success">
|
|
<template #default>及格率: {{ classDetailData.pass_rate.toFixed(1) }}%</template>
|
|
</n-progress>
|
|
<n-progress type="line" :percentage="classDetailData.active_rate" :show-indicator="true" :border-radius="4" status="info">
|
|
<template #default>参与度: {{ classDetailData.active_rate.toFixed(1) }}%</template>
|
|
</n-progress>
|
|
</n-space>
|
|
</n-card>
|
|
|
|
<n-flex justify="center" style="margin-top: 12px">
|
|
<n-tag type="success" size="large">
|
|
综合分: {{ classDetailData.composite_score.toFixed(1) }}
|
|
</n-tag>
|
|
</n-flex>
|
|
</n-flex>
|
|
<n-empty v-else-if="!classDetailLoading" description="暂无数据" style="padding: 40px 0" />
|
|
</n-spin>
|
|
</n-modal>
|
|
</template>
|
|
|
|
<style scoped></style>
|