add submission statistics

src/components.d.ts

@@ -30,6 +30,7 @@ declare module 'vue' {
     NGi: typeof import('naive-ui')['NGi']
     NGradientText: typeof import('naive-ui')['NGradientText']
     NGrid: typeof import('naive-ui')['NGrid']
+    NH1: typeof import('naive-ui')['NH1']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']

src/oj/api.ts

@@ -90,6 +90,20 @@ export function adminRejudge(id: string) {
   })
 }
 
+export function getSubmissionStatistics(
+  duration: { start: string; end: string },
+  problemID?: string,
+  username?: string,
+) {
+  return http.get("admin/submission/statistics", {
+    params: {
+      ...duration,
+      problem_id: problemID,
+      username,
+    },
+  })
+}
+
 export function getRank(offset: number, limit: number, username?: string) {
   return http.get("user_rank", {
     params: { offset, limit, rule: "acm", username },

src/oj/submission/components/StatisticsPanel.vue

@@ -0,0 +1,103 @@
+<template>
+  <n-space size="large" vertical>
+    <n-form :show-feedback="false" inline label-placement="left">
+      <n-form-item>
+        <n-input
+          placeholder="用户（可选）"
+          v-model:value="query.username"
+          clearable
+        />
+      </n-form-item>
+      <n-form-item>
+        <n-input
+          placeholder="题号（可选）"
+          v-model:value="query.problem"
+          clearable
+        />
+      </n-form-item>
+      <n-form-item>
+        <n-select
+          style="width: 120px"
+          v-model:value="query.duration"
+          :options="options"
+        />
+      </n-form-item>
+      <n-form-item>
+        <n-button type="primary" @click="handleStatistics">统计</n-button>
+      </n-form-item>
+    </n-form>
+    <n-space v-if="visble" size="large">
+      <n-h1>
+        <n-gradient-text type="primary">
+          答案正确数：{{ count.accepted }}
+        </n-gradient-text>
+      </n-h1>
+      <n-h1>
+        <n-gradient-text type="info">
+          总提交数：{{ count.total }}
+        </n-gradient-text>
+      </n-h1>
+      <n-h1>
+        <n-gradient-text type="warning">
+          正确率：{{ count.rate * 100 }}%
+        </n-gradient-text>
+      </n-h1>
+    </n-space>
+  </n-space>
+</template>
+<script setup lang="ts">
+import { formatISO, sub } from "date-fns"
+import { getSubmissionStatistics } from "oj/api"
+
+interface Props {
+  problem: string
+  username: string
+}
+
+const props = defineProps<Props>()
+
+const options: SelectOption[] = [
+  { label: "本节课内", value: "hours:1" },
+  { label: "两小时内", value: "hours:2" },
+  { label: "一天内", value: "days:1" },
+  { label: "一周内", value: "weeks:1" },
+  { label: "一个月内", value: "months:1" },
+]
+
+const query = reactive({
+  username: props.username,
+  problem: props.problem,
+  duration: options[4].value,
+})
+
+const count = reactive({
+  total: 0,
+  accepted: 0,
+  rate: 0,
+})
+const [visble, toggleVisble] = useToggle()
+
+const subOptions = computed<Duration>(() => {
+  let dur = options.find((it) => it.value === query.duration) ?? options[0]
+  const x = dur.value!.toString().split(":")
+  const unit = x[0]
+  const n = x[1]
+  return { [unit]: parseInt(n) }
+})
+
+async function handleStatistics() {
+  toggleVisble(false)
+  const current = Date.now()
+  const end = formatISO(current)
+  const start = formatISO(sub(current, subOptions.value))
+  const res = await getSubmissionStatistics(
+    { start, end },
+    query.problem,
+    query.username,
+  )
+  toggleVisble(true)
+  count.total = res.data.submission_count
+  count.accepted = res.data.accepted_count
+  count.rate = res.data.correct_rate
+}
+</script>

src/oj/submission/list.vue

@@ -14,6 +14,7 @@ import { isDesktop } from "~/shared/composables/breakpoints"
 import { useUserStore } from "~/shared/store/user"
 import { LANGUAGE_SHOW_VALUE } from "~/utils/constants"
 import ButtonWithSearch from "./components/ButtonWithSearch.vue"
+import StatisticsPanel from "./components/StatisticsPanel.vue"
 
 interface Query {
   username: string
@@ -39,6 +40,16 @@ const query = reactive<Query>({
   myself: route.query.myself === "1",
   problem: <string>route.query.problem ?? "",
 })
+const [show, toggleStatisticPanel] = useToggle(false)
+
+const panelTitle = computed(() => {
+  let p = ""
+  if (query.username) p = `用户 ${query.username} 的`
+  if (query.problem) p = `题号 ${query.problem} 的`
+  if (query.username && query.problem)
+    p = `用户 ${query.username} 关于题号 ${query.problem} 的`
+  return `${p}提交记录统计`
+})
 
 const options: SelectOption[] = [
   { label: "全部", value: "" },
@@ -279,6 +290,9 @@ const columns = computed(() => {
             搜索
           </n-button>
         </n-form-item>
+        <n-form-item v-if="userStore.isSuperAdmin">
+          <n-button @click="toggleStatisticPanel(true)">数据统计</n-button>
+        </n-form-item>
         <n-form-item>
           <n-button @click="clear" quaternary>重置</n-button>
         </n-form-item>
@@ -291,6 +305,16 @@ const columns = computed(() => {
     v-model:limit="query.limit"
     v-model:page="query.page"
   />
+  <n-modal
+    v-if="userStore.isSuperAdmin"
+    v-model:show="show"
+    preset="card"
+    :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
+    :content-style="{ overflow: 'auto' }"
+    :title="panelTitle"
+  >
+    <StatisticsPanel :problem="query.problem" :username="query.username" />
+  </n-modal>
 </template>
 <style scoped>
 .select {