add contest rank.

src/oj/api.ts

@@ -10,6 +10,7 @@ import {
 
 function filterResult(result: Problem) {
   const newResult = {
+    id: result.id,
     _id: result._id,
     title: result.title,
     difficulty: DIFFICULTY[result.difficulty],
@@ -131,3 +132,15 @@ export async function getContestProblems(contestID: string) {
   })
   return res.data.map(filterResult)
 }
+
+export function getContestRank(
+  contestID: string,
+  query: { limit: number; offset: number }
+) {
+  return http.get("contest_rank", {
+    params: {
+      contest_id: contestID,
+      ...query,
+    },
+  })
+}

src/oj/contest/components/AcAndSubmission.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ContestRank } from "~/utils/types"
+
+defineProps<{ rank: ContestRank }>()
+</script>
+
+<template>
+  {{ rank.accepted_number }} /
+  <n-button text type="primary">{{ rank.submission_number }}</n-button>
+</template>
+
+<style scoped></style>

src/oj/contest/pages/rank.vue

@@ -1,5 +1,171 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { DataTableColumn, NButton } from "naive-ui"
+import Pagination from "~/shared/Pagination.vue"
+import AcAndSubmission from "../components/AcAndSubmission.vue"
+import { getContestProblems, getContestRank } from "oj/api"
+import { ContestRank, ProblemFiltered } from "~/utils/types"
+import { secondsToDuration } from "utils/functions"
 
-<template></template>
+interface Props {
+  contestID: string
+}
+
+const props = defineProps<Props>()
+
+const route = useRoute()
+const router = useRouter()
+const total = ref(0)
+const data = ref<ContestRank[]>([])
+const chart = ref<ContestRank[]>([])
+const problems = ref<ProblemFiltered[]>([])
+
+const query = reactive({
+  limit: 50,
+  page: 1,
+})
+
+const columns = ref<DataTableColumn<ContestRank>[]>([
+  {
+    title: "排名",
+    key: "id",
+    width: 60,
+    fixed: "left",
+    align: "center",
+    render: (_, index) => index + (query.page - 1) * query.limit + 1,
+  },
+  {
+    title: "用户",
+    key: "username",
+    width: 120,
+    fixed: "left",
+    align: "center",
+    render: (row) =>
+      h(NButton, { text: true, type: "info" }, () => row.user.username),
+  },
+  {
+    title: "正确数/总提交",
+    key: "submission",
+    width: 120,
+    align: "center",
+    render: (row) => h(AcAndSubmission, { rank: row }),
+  },
+  {
+    title: "总时间",
+    key: "total_time",
+    width: 120,
+    align: "center",
+    render: (row) => secondsToDuration(row.total_time),
+  },
+])
+
+async function listRanks() {
+  const res = await getContestRank(props.contestID, {
+    limit: query.limit,
+    offset: query.limit * (query.page - 1),
+  })
+  total.value = res.data.total
+  data.value = res.data.results
+  if (query.page === 1) {
+    chart.value = data.value
+  }
+}
+
+async function addColumns() {
+  try {
+    problems.value = await getContestProblems(props.contestID)
+    problems.value.map((problem, index) => {
+      columns.value.push({
+        align: "center",
+        title: () =>
+          h(
+            NButton,
+            {
+              text: true,
+              type: "primary",
+              onClick: () =>
+                router.push({
+                  name: "contest problem",
+                  params: {
+                    contestID: route.params.contestID,
+                    problemID: problem._id,
+                  },
+                }),
+            },
+            () => `${index + 1}`
+          ),
+        render: (row) => {
+          if (row.submission_info[problem.id]) {
+            const status = row.submission_info[problem.id]
+            let acTime
+            let errorNumber
+            if (status.is_ac) {
+              acTime = h("span", secondsToDuration(status.ac_time))
+            }
+            if (status.error_number) {
+              errorNumber = h(
+                "p",
+                { style: "margin: 0" },
+                `(-${status.error_number})`
+              )
+            }
+            return h("div", [acTime, errorNumber])
+          }
+        },
+        cellProps: (row) => {
+          let backgroundColor = ""
+          let color = ""
+          if (row.submission_info[problem.id]) {
+            const status = row.submission_info[problem.id]
+            if (status.is_first_ac) {
+              backgroundColor = "#3c9"
+              color = "#3c763d"
+            } else if (status.is_ac) {
+              backgroundColor = "#dff0d8"
+            } else {
+              backgroundColor = "#f2dede"
+              color = "#a94442"
+            }
+          }
+          return { style: { backgroundColor, color } }
+        },
+        key: problem.id,
+        width: 150,
+      })
+    })
+  } catch (err) {
+    problems.value = []
+  }
+}
+
+watch(() => query.page, listRanks)
+watch(
+  () => query.limit,
+  () => {
+    query.page = 1
+    listRanks()
+  }
+)
+
+onMounted(() => {
+  listRanks()
+  addColumns()
+})
+</script>
+
+<template>
+  <n-data-table
+    striped
+    :single-line="false"
+    :scroll-x="1200"
+    size="small"
+    :columns="columns"
+    :data="data"
+  />
+  <Pagination
+    :total="total"
+    v-model:page="query.page"
+    v-model:limit="query.limit"
+  />
+</template>
 
 <style scoped></style>

src/oj/rank/components/Chart.vue

@@ -71,7 +71,7 @@ const data = computed(() => ({
 const options = ref({
   plugins: {
     title: {
-      text: "全校前十名的提交者（不包括超管）",
+      text: "全校前十名的用户（不包括超管）",
       display: true,
       font: { size: 20 },
     },

src/oj/rank/list.vue

@@ -12,7 +12,7 @@ const query = reactive({
   limit: 10,
   page: 1,
 })
-const rankData = ref<Rank[]>([])
+const chart = ref<Rank[]>([])
 
 async function listRanks() {
   const offset = (query.page - 1) * query.limit
@@ -20,7 +20,7 @@ async function listRanks() {
   data.value = res.data.results
   total.value = res.data.total
   if (query.page === 1) {
-    rankData.value = data.value
+    chart.value = data.value
   }
 }
 
@@ -67,7 +67,7 @@ onMounted(listRanks)
 </script>
 
 <template>
-  <Chart v-if="!!rankData.length" :rankData="rankData" />
+  <Chart v-if="!!chart.length" :rankData="chart" />
   <n-data-table striped size="small" :data="data" :columns="columns" />
   <Pagination
     :total="total"

src/oj/submission/detail.vue

@@ -62,7 +62,7 @@ onMounted(init)
       <n-space>
         <span>提交时间：{{ parseTime(submission.create_time) }}</span>
         <span>语言：{{ submission.language }}</span>
-        <span>用户 {{ submission.username }}</span>
+        <span>用户：{{ submission.username }}</span>
       </n-space>
     </n-alert>
     <n-card embedded>

src/shared/Pagination.vue

@@ -14,8 +14,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:limit", "update:page"])
 
+const route = useRoute()
+
 const limit = ref(props.limit)
 const page = ref(props.page)
+const sizes = computed(() => {
+  if (route.name === "contest rank") return [10, 30, 50]
+  return [10, 20, 30]
+})
 
 watch(limit, () => emit("update:limit", limit))
 watch(page, () => emit("update:page", page))
@@ -28,7 +34,7 @@ watch(page, () => emit("update:page", page))
     :item-count="props.total"
     v-model:page="page"
     v-model:page-size="limit"
-    :page-sizes="[10, 20, 30]"
+    :page-sizes="sizes"
     :page-slot="isDesktop ? 7 : 5"
     show-size-picker
   />

src/utils/functions.ts

@@ -65,6 +65,16 @@ export function duration(start: Date, end: Date): string {
   return result
 }
 
+export function secondsToDuration(seconds: number): string {
+  const epoch = new Date(0)
+  const secondsAfterEpoch = new Date(seconds * 1000)
+  const duration = intervalToDuration({
+    start: epoch,
+    end: secondsAfterEpoch,
+  })
+  return [duration.hours, duration.minutes, duration.seconds].join(":")
+}
+
 export function submissionMemoryFormat(memory: number | string | undefined) {
   if (memory === undefined) return "--"
   // 1048576 = 1024 * 1024

src/utils/types.ts

@@ -59,15 +59,17 @@ export type SUBMISSION_RESULT = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
 
 export type ProblemStatus = "passed" | "failed" | "not_test"
 
+interface SampleUser {
+  id: number
+  username: string
+  real_name: string | null
+}
+
 export interface Problem {
   _id: string
   id: number
   tags: string[]
-  created_by: {
+  created_by: SampleUser
-    id: number
-    username: string
-    real_name: null
-  }
   template: { [key in LANGUAGE]?: string }
   title: string
   description: string
@@ -104,6 +106,7 @@ export interface Problem {
 
 export interface ProblemFiltered {
   _id: string
+  id: number
   title: string
   difficulty: "简单" | "中等" | "困难"
   tags: string[]
@@ -177,11 +180,7 @@ export interface SubmissionListPayload {
 
 export interface Rank {
   id: number
-  user: {
+  user: SampleUser
-    id: number
-    username: string
-    real_name: null
-  }
   acm_problems_status: {
     problems: {
       [key: string]: {
@@ -214,11 +213,7 @@ export interface Rank {
 
 export interface Contest {
   id: number
-  created_by: {
+  created_by: SampleUser
-    id: number
-    username: string
-    real_name: null
-  }
   status: ContestStatus
   contest_type: ContestType
   title: string
@@ -230,3 +225,21 @@ export interface Contest {
   create_time: Date
   last_update_time: Date
 }
+
+interface SubmissionInfo {
+  is_ac: boolean
+  ac_time: number
+  is_first_ac: boolean
+  error_number: number
+  checked?: boolean
+}
+
+export interface ContestRank {
+  id: number
+  user: SampleUser
+  submission_number: number
+  accepted_number: number
+  total_time: number
+  submission_info: { [key: string]: SubmissionInfo }
+  contest: number
+}