默认看批改页当前的班级；顶部四个数字（已交、平均分、改过再交、待讲评）， 未交和交了没人评的名单按班级分组并排显示；人气前五换成高分作品（每人最高的一版）， 点开直接进批改页。接口去掉旧的四色标记统计和 top_viewed，新增 present_count、top_scored。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
e4fb723544
commit
06267fb0ff
5 files changed
+540
-457
No files matched your search
@@ -3,452 +3,526 @@
|
|||||||
:show="show"
|
:show="show"
|
||||||
@update:show="$emit('update:show', $event)"
|
@update:show="$emit('update:show', $event)"
|
||||||
preset="card"
|
preset="card"
|
||||||
title="提交统计"
|
style="width: 90vw; max-width: 760px"
|
||||||
style="max-width: 660px"
|
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
>
|
>
|
||||||
<div style="max-height: 75vh; overflow-y: auto">
|
<template #header>
|
||||||
<!-- 初始加载 -->
|
<div class="head">
|
||||||
<template v-if="!stats && loading">
|
<b>课堂总结</b>
|
||||||
<n-flex justify="center" style="padding: 40px">
|
<span v-if="title" class="task-title">{{ title }}</span>
|
||||||
<n-spin size="large" />
|
</div>
|
||||||
</n-flex>
|
</template>
|
||||||
</template>
|
<template #header-extra>
|
||||||
|
<n-select
|
||||||
|
:value="classname"
|
||||||
|
:options="classOptions"
|
||||||
|
size="small"
|
||||||
|
@update:value="selectClass"
|
||||||
|
style="width: 140px; margin-right: 12px"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-else-if="stats">
|
<n-flex v-if="!stats" justify="center" style="padding: 60px">
|
||||||
<!-- 班级筛选 -->
|
<n-spin />
|
||||||
<n-flex
|
</n-flex>
|
||||||
align="center"
|
|
||||||
style="margin-bottom: 16px; flex-wrap: wrap; gap: 6px"
|
|
||||||
>
|
|
||||||
<span style="color: var(--wp-muted); font-size: 12px">班级筛选：</span>
|
|
||||||
<n-button
|
|
||||||
size="small"
|
|
||||||
:type="selectedClass === null ? 'primary' : 'default'"
|
|
||||||
@click="selectClass(null)"
|
|
||||||
>全部</n-button
|
|
||||||
>
|
|
||||||
<n-button
|
|
||||||
v-for="c in stats.classes"
|
|
||||||
:key="c"
|
|
||||||
size="small"
|
|
||||||
:type="selectedClass === c ? 'primary' : 'default'"
|
|
||||||
@click="selectClass(c)"
|
|
||||||
>{{ c }}</n-button
|
|
||||||
>
|
|
||||||
</n-flex>
|
|
||||||
|
|
||||||
<n-spin :show="loading">
|
<n-spin v-else :show="loading">
|
||||||
<!-- 关键指标 -->
|
<div class="body">
|
||||||
<div
|
<!-- 关键数字 -->
|
||||||
style="
|
<div class="kpis">
|
||||||
display: grid;
|
<div class="kpi wide">
|
||||||
grid-template-columns: repeat(5, 1fr);
|
<div class="kpi-label">已交</div>
|
||||||
border: 1px solid var(--wp-line);
|
<div class="kpi-value">
|
||||||
border-radius: 6px;
|
{{ stats.submitted_count }}<small> / {{ total }} 人</small>
|
||||||
overflow: hidden;
|
<span class="pct">{{ pct(stats.submitted_count, total) }}</span>
|
||||||
margin-bottom: 12px;
|
</div>
|
||||||
"
|
<div class="bar">
|
||||||
>
|
<span :style="{ width: pct(stats.submitted_count, total) }"></span>
|
||||||
<div
|
</div>
|
||||||
v-for="(metric, i) in metrics"
|
</div>
|
||||||
:key="metric.label"
|
<div class="kpi">
|
||||||
:style="{
|
<div class="kpi-label">平均分</div>
|
||||||
padding: '12px 8px',
|
<div class="kpi-value">{{ stats.average_score?.toFixed(1) ?? "—" }}</div>
|
||||||
textAlign: 'center',
|
<div class="kpi-note">每人最新一版</div>
|
||||||
borderRight: i < metrics.length - 1 ? '1px solid var(--wp-line)' : 'none',
|
</div>
|
||||||
}"
|
<div class="kpi">
|
||||||
>
|
<div class="kpi-label">改过再交</div>
|
||||||
<div
|
<div class="kpi-value">{{ pct(multiSubmit, stats.submitted_count) }}</div>
|
||||||
:style="{
|
<div class="kpi-note">交了 2 次及以上</div>
|
||||||
fontSize: '20px',
|
</div>
|
||||||
fontWeight: '700',
|
<div class="kpi">
|
||||||
color: metric.color,
|
<div class="kpi-label">待讲评</div>
|
||||||
}"
|
<div class="kpi-value">{{ stats.present_count }}<small> 份</small></div>
|
||||||
>
|
<div class="kpi-note">已加入课上展示</div>
|
||||||
{{ metric.value }}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="color: var(--wp-muted); font-size: 11px; margin-top: 2px">
|
|
||||||
{{ metric.label }}
|
<div class="grid">
|
||||||
|
<!-- 未交 -->
|
||||||
|
<section>
|
||||||
|
<h4>
|
||||||
|
<i class="dot bad"></i>未交
|
||||||
|
<span class="count">{{ stats.unsubmitted_count }} 人</span>
|
||||||
|
</h4>
|
||||||
|
<div class="names">
|
||||||
|
<template v-for="g in unsubmittedGroups" :key="g.classname">
|
||||||
|
<div v-if="isAll" class="class-label">{{ g.classname || "未分班" }}</div>
|
||||||
|
<div class="chips">
|
||||||
|
<span v-for="n in g.names" :key="n" class="chip">{{ n }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-if="!stats.unsubmitted_count" class="empty">都交了</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 交了没人评 -->
|
||||||
|
<section>
|
||||||
|
<h4>
|
||||||
|
<i class="dot warn"></i>交了但还没人评
|
||||||
|
<span class="count">{{ stats.unrated_count }} 人</span>
|
||||||
|
</h4>
|
||||||
|
<div class="names">
|
||||||
|
<template v-for="g in unratedGroups" :key="g.classname">
|
||||||
|
<div v-if="isAll" class="class-label">{{ g.classname || "未分班" }}</div>
|
||||||
|
<div class="chips">
|
||||||
|
<span v-for="n in g.names" :key="n" class="chip">{{ n }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-if="!stats.unrated_count" class="empty">
|
||||||
|
{{ stats.submitted_count ? "每份作品都有人评过" : "还没有人交" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<!-- 未提交名单（可折叠） -->
|
<!-- 交了几次 -->
|
||||||
<div
|
<section>
|
||||||
style="
|
<h4>交了几次</h4>
|
||||||
border: 1px solid var(--wp-line);
|
<div v-if="stats.submitted_count" class="hist">
|
||||||
border-radius: 6px;
|
<template v-for="b in buckets" :key="b.label">
|
||||||
margin-bottom: 8px;
|
<span class="hist-label">{{ b.label }}</span>
|
||||||
overflow: hidden;
|
<span class="hist-bar">
|
||||||
"
|
<span :style="{ width: pct(b.value, maxBucket) }"></span>
|
||||||
>
|
</span>
|
||||||
<div
|
<span class="hist-value">{{ b.value }}</span>
|
||||||
style="
|
</template>
|
||||||
padding: 10px 14px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
cursor: pointer;
|
|
||||||
background: var(--wp-bad-soft);
|
|
||||||
"
|
|
||||||
@click="showUnsubmitted = !showUnsubmitted"
|
|
||||||
>
|
|
||||||
<n-flex align="center" :size="6">
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
width: 7px;
|
|
||||||
height: 7px;
|
|
||||||
background: var(--wp-bad);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
></span>
|
|
||||||
<span style="font-weight: 600; color: var(--wp-bad); font-size: 12px"
|
|
||||||
>未提交（{{ stats.unsubmitted_count }}人）</span
|
|
||||||
>
|
|
||||||
</n-flex>
|
|
||||||
<Icon
|
|
||||||
:icon="
|
|
||||||
showUnsubmitted
|
|
||||||
? 'lucide:chevron-down'
|
|
||||||
: 'lucide:chevron-right'
|
|
||||||
"
|
|
||||||
:width="14"
|
|
||||||
style="color: var(--wp-faint)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-else class="empty">还没有人交</div>
|
||||||
v-if="showUnsubmitted"
|
</section>
|
||||||
style="
|
|
||||||
padding: 10px 14px;
|
|
||||||
background: var(--wp-bad-soft);
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<n-tag
|
|
||||||
v-for="u in stats.unsubmitted_users"
|
|
||||||
:key="u.username"
|
|
||||||
size="small"
|
|
||||||
:bordered="true"
|
|
||||||
style="border-color: var(--wp-bad-soft); background: var(--wp-surface)"
|
|
||||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="!stats.unsubmitted_users.length"
|
|
||||||
style="color: var(--wp-faint); font-size: 12px"
|
|
||||||
>暂无</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 未打分名单（可折叠） -->
|
<!-- 高分作品 -->
|
||||||
<div
|
<section>
|
||||||
style="
|
<h4>高分作品<span class="count">每人最高的一版</span></h4>
|
||||||
border: 1px solid var(--wp-line);
|
<div v-if="stats.top_scored.length" class="top">
|
||||||
border-radius: 6px;
|
<button
|
||||||
margin-bottom: 12px;
|
v-for="(item, i) in stats.top_scored"
|
||||||
overflow: hidden;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
padding: 10px 14px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
cursor: pointer;
|
|
||||||
background: var(--wp-warn-soft);
|
|
||||||
"
|
|
||||||
@click="showUnrated = !showUnrated"
|
|
||||||
>
|
|
||||||
<n-flex align="center" :size="6">
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
width: 7px;
|
|
||||||
height: 7px;
|
|
||||||
background: var(--wp-warn);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
></span>
|
|
||||||
<span style="font-weight: 600; color: var(--wp-warn); font-size: 12px"
|
|
||||||
>未打分（{{ stats.unrated_count }}人）</span
|
|
||||||
>
|
|
||||||
<span style="font-size: 11px; color: var(--wp-faint)"
|
|
||||||
>— 还没给任何提交打过分</span
|
|
||||||
>
|
|
||||||
</n-flex>
|
|
||||||
<Icon
|
|
||||||
:icon="
|
|
||||||
showUnrated ? 'lucide:chevron-down' : 'lucide:chevron-right'
|
|
||||||
"
|
|
||||||
:width="14"
|
|
||||||
style="color: var(--wp-faint)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="showUnrated"
|
|
||||||
style="
|
|
||||||
padding: 10px 14px;
|
|
||||||
background: var(--wp-warn-soft);
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<n-tag
|
|
||||||
v-for="u in stats.unrated_users"
|
|
||||||
:key="u.username"
|
|
||||||
size="small"
|
|
||||||
:bordered="true"
|
|
||||||
style="border-color: var(--wp-warn-soft); background: var(--wp-surface)"
|
|
||||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="!stats.unrated_users.length"
|
|
||||||
style="color: var(--wp-faint); font-size: 12px"
|
|
||||||
>暂无</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 提交次数分布 -->
|
|
||||||
<div style="margin-bottom: 12px">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 13px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: var(--wp-ink);
|
|
||||||
"
|
|
||||||
>
|
|
||||||
提交次数分布
|
|
||||||
<span style="font-size: 11px; color: var(--wp-faint); font-weight: 400"
|
|
||||||
>（已提交的 {{ stats.submitted_count }} 人）</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; gap: 8px">
|
|
||||||
<div
|
|
||||||
v-for="bucket in countBuckets"
|
|
||||||
:key="bucket.label"
|
|
||||||
:style="{
|
|
||||||
flex: 1,
|
|
||||||
border: `1px solid ${bucket.borderColor}`,
|
|
||||||
borderRadius: '6px',
|
|
||||||
padding: '10px 8px',
|
|
||||||
textAlign: 'center',
|
|
||||||
background: bucket.bg,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
fontSize: '20px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: bucket.color,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ bucket.value }}
|
|
||||||
</div>
|
|
||||||
<div style="color: var(--wp-faint); font-size: 11px; margin-top: 2px">
|
|
||||||
{{ bucket.label }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 8px;
|
|
||||||
background: var(--wp-line);
|
|
||||||
border-radius: 3px;
|
|
||||||
height: 4px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
background: bucket.color,
|
|
||||||
height: '4px',
|
|
||||||
borderRadius: '3px',
|
|
||||||
width: bucketPct(bucket.value),
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div style="color: var(--wp-faint); font-size: 10px; margin-top: 3px">
|
|
||||||
{{ bucketPct(bucket.value) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 人气前五 -->
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 13px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: var(--wp-ink);
|
|
||||||
"
|
|
||||||
>
|
|
||||||
人气前五
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="stats.top_viewed.length === 0"
|
|
||||||
style="color: var(--wp-faint); font-size: 12px"
|
|
||||||
>
|
|
||||||
暂无
|
|
||||||
</div>
|
|
||||||
<div v-else style="display: flex; flex-direction: column; gap: 6px">
|
|
||||||
<div
|
|
||||||
v-for="(item, i) in stats.top_viewed"
|
|
||||||
:key="item.submission_id"
|
:key="item.submission_id"
|
||||||
style="
|
class="top-row"
|
||||||
display: flex;
|
@click="openSubmission(item)"
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border: 1px solid var(--wp-line);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
background: var(--wp-paper);
|
|
||||||
"
|
|
||||||
@click="viewSubmission(item.submission_id)"
|
|
||||||
>
|
>
|
||||||
<span
|
<span class="rank">{{ i + 1 }}</span>
|
||||||
:style="{
|
<span class="top-name">
|
||||||
width: '20px',
|
{{ shortName(item.username, item.classname) }}
|
||||||
height: '20px',
|
<small v-if="isAll">{{ item.classname }}</small>
|
||||||
borderRadius: '50%',
|
|
||||||
background:
|
|
||||||
i < 3 ? ['var(--wp-warn)', 'var(--wp-muted)', 'var(--wp-warn)'][i] : 'var(--wp-line)',
|
|
||||||
color: 'var(--wp-surface)',
|
|
||||||
fontSize: '11px',
|
|
||||||
fontWeight: '700',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
flexShrink: 0,
|
|
||||||
}"
|
|
||||||
>{{ i + 1 }}</span
|
|
||||||
>
|
|
||||||
<span style="flex: 1; font-size: 13px; color: var(--wp-ink)">
|
|
||||||
{{ displayName(item.username, item.classname) }}
|
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 12px; color: var(--wp-css); font-weight: 600">
|
<span class="top-score">{{ item.score.toFixed(1) }}</span>
|
||||||
{{ item.view_count }} 次
|
<Icon icon="lucide:chevron-right" :width="14" class="go" />
|
||||||
</span>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-else class="empty">还没有打过分的作品</div>
|
||||||
</n-spin>
|
</section>
|
||||||
</template>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</n-spin>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<n-flex justify="end">
|
||||||
|
<n-button type="primary" icon-placement="right" @click="openReview">
|
||||||
|
去批改{{ isAll ? "" : " " + classname + " 班" }}
|
||||||
|
<template #icon><Icon icon="lucide:arrow-right" /></template>
|
||||||
|
</n-button>
|
||||||
|
</n-flex>
|
||||||
|
</template>
|
||||||
</n-modal>
|
</n-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed, watch } from "vue"
|
import { computed, ref, watch } from "vue"
|
||||||
import { Icon } from "../../icons"
|
|
||||||
import { useRouter } from "vue-router"
|
import { useRouter } from "vue-router"
|
||||||
|
import { Icon } from "../../icons"
|
||||||
import { Submission } from "../../api"
|
import { Submission } from "../../api"
|
||||||
import type { TaskStatsOut } from "../../utils/type"
|
import type { TaskStatsOut, TopScoredItem, UserTag } from "../../utils/type"
|
||||||
|
|
||||||
const props = defineProps<{ taskId: number; show: boolean }>()
|
// 老师下课前看的这道题的总结：默认看批改页正在看的班
|
||||||
const emit = defineEmits<{ (e: "update:show", v: boolean): void }>()
|
const props = defineProps<{ taskId: number; show: boolean; title?: string }>()
|
||||||
|
defineEmits<{ (e: "update:show", v: boolean): void }>()
|
||||||
|
|
||||||
|
// 和批改页共用“当前班级”
|
||||||
|
const ALL = "__all__"
|
||||||
|
const CLASS_KEY = "review-class"
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const stats = ref<TaskStatsOut | null>(null)
|
const stats = ref<TaskStatsOut | null>(null)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const selectedClass = ref<string | null>(null)
|
const classname = ref<string>(ALL)
|
||||||
const showUnsubmitted = ref(false)
|
const isAll = computed(() => classname.value === ALL)
|
||||||
const showUnrated = ref(false)
|
|
||||||
|
|
||||||
async function load(classname?: string) {
|
const classOptions = computed(() => [
|
||||||
|
{ label: "全部班级", value: ALL },
|
||||||
|
...(stats.value?.classes ?? []).map((c) => ({ label: `${c} 班`, value: c })),
|
||||||
|
])
|
||||||
|
|
||||||
|
const total = computed(
|
||||||
|
() => (stats.value?.submitted_count ?? 0) + (stats.value?.unsubmitted_count ?? 0),
|
||||||
|
)
|
||||||
|
const multiSubmit = computed(() => {
|
||||||
|
const d = stats.value?.submission_count_distribution
|
||||||
|
return d ? d.count_2 + d.count_3 + d.count_4_plus : 0
|
||||||
|
})
|
||||||
|
const buckets = computed(() => {
|
||||||
|
const d = stats.value?.submission_count_distribution
|
||||||
|
if (!d) return []
|
||||||
|
return [
|
||||||
|
{ label: "1 次", value: d.count_1 },
|
||||||
|
{ label: "2 次", value: d.count_2 },
|
||||||
|
{ label: "3 次", value: d.count_3 },
|
||||||
|
{ label: "4 次+", value: d.count_4_plus },
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const maxBucket = computed(() => Math.max(...buckets.value.map((b) => b.value)))
|
||||||
|
|
||||||
|
const unsubmittedGroups = computed(() => byClass(stats.value?.unsubmitted_users ?? []))
|
||||||
|
const unratedGroups = computed(() => byClass(stats.value?.unrated_users ?? []))
|
||||||
|
|
||||||
|
function byClass(users: UserTag[]) {
|
||||||
|
const groups = new Map<string, string[]>()
|
||||||
|
for (const u of users) {
|
||||||
|
const names = groups.get(u.classname) ?? []
|
||||||
|
names.push(shortName(u.username, u.classname))
|
||||||
|
groups.set(u.classname, names)
|
||||||
|
}
|
||||||
|
// 没分班的（测试账号等）放最后
|
||||||
|
return [...groups]
|
||||||
|
.sort(([a], [b]) => Number(a === "") - Number(b === "") || (a < b ? -1 : 1))
|
||||||
|
.map(([classname, names]) => ({ classname, names }))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 账号是“web + 班级 + 名字”，班级已经单独显示了
|
||||||
|
function shortName(username: string, classname: string) {
|
||||||
|
const prefix = "web" + classname
|
||||||
|
return username.startsWith(prefix) ? username.slice(prefix.length) : username
|
||||||
|
}
|
||||||
|
|
||||||
|
function pct(value: number, of: number) {
|
||||||
|
return of ? Math.round((value / of) * 100) + "%" : "0%"
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
stats.value = await Submission.getStats(props.taskId, classname)
|
stats.value = await Submission.getStats(props.taskId, isAll.value ? undefined : classname.value)
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function displayName(username: string, classname: string) {
|
function selectClass(c: string) {
|
||||||
const prefix = "web" + classname
|
classname.value = c
|
||||||
return username.startsWith(prefix) ? username.slice(prefix.length) : username
|
try {
|
||||||
|
localStorage.setItem(CLASS_KEY, c)
|
||||||
|
} catch {}
|
||||||
|
load()
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectClass(c: string | null) {
|
|
||||||
selectedClass.value = c
|
|
||||||
load(c ?? undefined)
|
|
||||||
}
|
|
||||||
|
|
||||||
function viewSubmission(id: string) {
|
|
||||||
const { href } = router.resolve({ name: "submission", params: { id } })
|
|
||||||
window.open(href, "_blank")
|
|
||||||
}
|
|
||||||
|
|
||||||
function bucketPct(value: number) {
|
|
||||||
const total = stats.value?.submitted_count ?? 0
|
|
||||||
if (!total) return "0%"
|
|
||||||
return Math.round((value / total) * 100) + "%"
|
|
||||||
}
|
|
||||||
|
|
||||||
const metrics = computed(() => {
|
|
||||||
if (!stats.value) return []
|
|
||||||
return [
|
|
||||||
{ label: "已提交", value: stats.value.submitted_count, color: "var(--wp-brand)" },
|
|
||||||
{ label: "未提交", value: stats.value.unsubmitted_count, color: "var(--wp-bad)" },
|
|
||||||
{
|
|
||||||
label: "平均分",
|
|
||||||
value: stats.value.average_score?.toFixed(1) ?? "—",
|
|
||||||
color: "var(--wp-css)",
|
|
||||||
},
|
|
||||||
{ label: "未打分", value: stats.value.unrated_count, color: "var(--wp-bad)" },
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
const countBuckets = computed(() => {
|
|
||||||
if (!stats.value) return []
|
|
||||||
const d = stats.value.submission_count_distribution
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
label: "4 次+",
|
|
||||||
value: d.count_4_plus,
|
|
||||||
color: "var(--wp-warn)",
|
|
||||||
bg: "var(--wp-warn-soft)",
|
|
||||||
borderColor: "var(--wp-warn-soft)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "3 次",
|
|
||||||
value: d.count_3,
|
|
||||||
color: "var(--wp-brand)",
|
|
||||||
bg: "var(--wp-brand-soft)",
|
|
||||||
borderColor: "var(--wp-brand-soft)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "2 次",
|
|
||||||
value: d.count_2,
|
|
||||||
color: "var(--wp-css)",
|
|
||||||
bg: "var(--wp-css-soft)",
|
|
||||||
borderColor: "var(--wp-css-soft)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "仅 1 次",
|
|
||||||
value: d.count_1,
|
|
||||||
color: "var(--wp-muted)",
|
|
||||||
bg: "var(--wp-paper)",
|
|
||||||
borderColor: "var(--wp-line)",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
// Load when modal opens
|
|
||||||
watch(
|
watch(
|
||||||
() => props.show,
|
() => props.show,
|
||||||
(val) => {
|
async (open) => {
|
||||||
if (val && props.taskId) {
|
if (!open || !props.taskId) return
|
||||||
selectedClass.value = null
|
try {
|
||||||
load()
|
classname.value = localStorage.getItem(CLASS_KEY) || ALL
|
||||||
|
} catch {
|
||||||
|
classname.value = ALL
|
||||||
|
}
|
||||||
|
await load()
|
||||||
|
// 记住的班级已经没有学生了
|
||||||
|
if (!isAll.value && !stats.value?.classes.includes(classname.value)) {
|
||||||
|
classname.value = ALL
|
||||||
|
await load()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
function openInNewTab(query: Record<string, string>) {
|
||||||
|
const { href } = router.resolve({ name: "review", query })
|
||||||
|
window.open(href, "_blank")
|
||||||
|
}
|
||||||
|
|
||||||
|
function openSubmission(item: TopScoredItem) {
|
||||||
|
openInNewTab({
|
||||||
|
class: isAll.value ? item.classname : classname.value,
|
||||||
|
task: String(props.taskId),
|
||||||
|
sub: item.submission_id,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function openReview() {
|
||||||
|
openInNewTab({ class: classname.value, task: String(props.taskId) })
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.head {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 10px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--wp-muted);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
max-height: 64vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpis {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.6fr 1fr 1fr 1fr;
|
||||||
|
border: 1px solid var(--wp-line);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi {
|
||||||
|
padding: 12px 14px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi + .kpi {
|
||||||
|
border-left: 1px solid var(--wp-line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi.wide {
|
||||||
|
background: var(--wp-brand-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--wp-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-value {
|
||||||
|
margin-top: 2px;
|
||||||
|
font: 600 22px/1.2 var(--wp-font-mono);
|
||||||
|
color: var(--wp-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-value small {
|
||||||
|
font: 400 13px var(--wp-font-sans);
|
||||||
|
color: var(--wp-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi.wide .kpi-value {
|
||||||
|
color: var(--wp-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pct {
|
||||||
|
float: right;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--wp-muted);
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-note {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--wp-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
margin-top: 8px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--wp-surface);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar span {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--wp-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 16px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--wp-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--wp-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot.bad {
|
||||||
|
background: var(--wp-bad);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot.warn {
|
||||||
|
background: var(--wp-warn);
|
||||||
|
}
|
||||||
|
|
||||||
|
.names {
|
||||||
|
max-height: 150px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.class-label {
|
||||||
|
margin: 6px 0 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--wp-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.class-label:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chips {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
padding: 1px 8px;
|
||||||
|
border: 1px solid var(--wp-line);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: var(--wp-ink);
|
||||||
|
background: var(--wp-paper);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--wp-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--wp-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist-bar {
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--wp-paper);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist-bar span {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--wp-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist-value {
|
||||||
|
min-width: 2ch;
|
||||||
|
text-align: right;
|
||||||
|
font: 12px var(--wp-font-mono);
|
||||||
|
color: var(--wp-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 5px 6px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--wp-ink);
|
||||||
|
font: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-row:hover {
|
||||||
|
background: var(--wp-paper);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank {
|
||||||
|
width: 16px;
|
||||||
|
font: 12px var(--wp-font-mono);
|
||||||
|
color: var(--wp-faint);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-name {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-name small {
|
||||||
|
margin-left: 4px;
|
||||||
|
color: var(--wp-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-score {
|
||||||
|
font: 600 13px var(--wp-font-mono);
|
||||||
|
color: var(--wp-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.go {
|
||||||
|
color: var(--wp-faint);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
<Icon :width="16" icon="lucide:bar-chart-2" />
|
<Icon :width="16" icon="lucide:bar-chart-2" />
|
||||||
</n-button>
|
</n-button>
|
||||||
</template>
|
</template>
|
||||||
本题统计
|
课堂总结
|
||||||
</n-tooltip>
|
</n-tooltip>
|
||||||
<n-tooltip v-if="roleSuper">
|
<n-tooltip v-if="roleSuper">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
@@ -53,7 +53,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Workbench>
|
</Workbench>
|
||||||
<TaskStatsModal v-model:show="showStats" :task-id="taskId" />
|
<TaskStatsModal v-model:show="showStats" :task-id="taskId" :title="title" />
|
||||||
<PeersDrawer v-model:show="showPeers" :task-id="taskId" :asset-base-url="assetBaseUrl" />
|
<PeersDrawer v-model:show="showPeers" :task-id="taskId" :asset-base-url="assetBaseUrl" />
|
||||||
<n-modal
|
<n-modal
|
||||||
v-model:show="showAssets"
|
v-model:show="showAssets"
|
||||||
|
|||||||
@@ -181,25 +181,10 @@ export interface SubmissionCountBucket {
|
|||||||
count_4_plus: number
|
count_4_plus: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ScoreBucket {
|
export interface TopScoredItem {
|
||||||
range_1_2: number
|
|
||||||
range_2_3: number
|
|
||||||
range_3_4: number
|
|
||||||
range_4_5: number
|
|
||||||
range_5: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FlagStats {
|
|
||||||
red: number
|
|
||||||
blue: number
|
|
||||||
green: number
|
|
||||||
yellow: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TopViewedItem {
|
|
||||||
username: string
|
username: string
|
||||||
classname: string
|
classname: string
|
||||||
view_count: number
|
score: number
|
||||||
submission_id: string
|
submission_id: string
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -211,10 +196,9 @@ export interface TaskStatsOut {
|
|||||||
unsubmitted_users: UserTag[]
|
unsubmitted_users: UserTag[]
|
||||||
unrated_users: UserTag[]
|
unrated_users: UserTag[]
|
||||||
submission_count_distribution: SubmissionCountBucket
|
submission_count_distribution: SubmissionCountBucket
|
||||||
score_distribution: ScoreBucket
|
present_count: number
|
||||||
flag_stats: FlagStats
|
|
||||||
classes: string[]
|
classes: string[]
|
||||||
top_viewed: TopViewedItem[]
|
top_scored: TopScoredItem[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export type GradebookTaskType = "tutorial" | "challenge"
|
export type GradebookTaskType = "tutorial" | "challenge"
|
||||||
|
|||||||
@@ -448,25 +448,18 @@ router.get("/stats/:task_id", (c) => {
|
|||||||
else dist.count_4_plus++
|
else dist.count_4_plus++
|
||||||
}
|
}
|
||||||
|
|
||||||
// 标记统计：该任务所有提交（不按学生过滤）
|
// 高分作品：每人分数最高的一份（同分取较早的），取前五
|
||||||
const flagStats = { red: 0, blue: 0, green: 0, yellow: 0 }
|
const best = new Map<number, (typeof subs)[number]>()
|
||||||
for (const s of subs) {
|
for (const s of studentSubs) {
|
||||||
if (s.flag && s.flag in flagStats) flagStats[s.flag as keyof typeof flagStats]++
|
const cur = best.get(s.user_id)
|
||||||
|
if (s.score > 0 && (!cur || s.score > cur.score || (s.score === cur.score && s.created < cur.created)))
|
||||||
|
best.set(s.user_id, s)
|
||||||
}
|
}
|
||||||
|
const studentById = new Map(students.map((s) => [s.id, s]))
|
||||||
const topViewed = classname
|
const topScored = [...best.values()]
|
||||||
? all(
|
.sort((a, b) => b.score - a.score || (a.created < b.created ? -1 : 1))
|
||||||
`SELECT s.id, s.view_count, u.username, u.classname ${SUBMISSION_FROM}
|
.slice(0, 5)
|
||||||
WHERE s.task_id = $id AND u.role = 'normal' AND u.classname = $classname
|
.map((s) => ({ ...tag(studentById.get(s.user_id)!), score: s.score, submission_id: uuidOut(s.id) }))
|
||||||
ORDER BY s.view_count DESC LIMIT 5`,
|
|
||||||
{ id: taskId, classname },
|
|
||||||
)
|
|
||||||
: all(
|
|
||||||
`SELECT s.id, s.view_count, u.username, u.classname ${SUBMISSION_FROM}
|
|
||||||
WHERE s.task_id = $id AND u.role = 'normal'
|
|
||||||
ORDER BY s.view_count DESC LIMIT 5`,
|
|
||||||
{ id: taskId },
|
|
||||||
)
|
|
||||||
|
|
||||||
const unrated = students.filter((s) => submittedIds.has(s.id) && !ratedIds.has(s.id))
|
const unrated = students.filter((s) => submittedIds.has(s.id) && !ratedIds.has(s.id))
|
||||||
return c.json({
|
return c.json({
|
||||||
@@ -477,14 +470,9 @@ router.get("/stats/:task_id", (c) => {
|
|||||||
unsubmitted_users: students.filter((s) => !submittedIds.has(s.id)).map(tag),
|
unsubmitted_users: students.filter((s) => !submittedIds.has(s.id)).map(tag),
|
||||||
unrated_users: unrated.map(tag),
|
unrated_users: unrated.map(tag),
|
||||||
submission_count_distribution: dist,
|
submission_count_distribution: dist,
|
||||||
flag_stats: flagStats,
|
present_count: studentSubs.filter((s) => s.flag === "present").length,
|
||||||
classes,
|
classes,
|
||||||
top_viewed: topViewed.map((s) => ({
|
top_scored: topScored,
|
||||||
username: s.username,
|
|
||||||
classname: s.classname,
|
|
||||||
view_count: s.view_count,
|
|
||||||
submission_id: uuidOut(s.id),
|
|
||||||
})),
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { beforeEach, describe, expect, test } from "bun:test"
|
import { beforeEach, describe, expect, test } from "bun:test"
|
||||||
import { get, all } from "../src/db"
|
import { get, all, run } from "../src/db"
|
||||||
import { app } from "../src/app"
|
import { app } from "../src/app"
|
||||||
import { config } from "../src/config"
|
import { config } from "../src/config"
|
||||||
import { mkdtemp, readFile, readdir, rm } from "node:fs/promises"
|
import { mkdtemp, readFile, readdir, rm } from "node:fs/promises"
|
||||||
@@ -609,3 +609,40 @@ describe("同学作品与批改", () => {
|
|||||||
expect((await teacher("PUT", `/api/submission/${uuid(latest)}/flag`, { flag: "present" })).json.flag).toBe("present")
|
expect((await teacher("PUT", `/api/submission/${uuid(latest)}/flag`, { flag: "present" })).json.flag).toBe("present")
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe("课堂总结", () => {
|
||||||
|
test("按班级统计，高分作品每人只取最高的一份", async () => {
|
||||||
|
makeUser("adm", "admin")
|
||||||
|
const task = makeTask("挑战", "challenge", 1)
|
||||||
|
const a = makeUser("weba1小明", "normal", "a1")
|
||||||
|
const b = makeUser("weba1小红", "normal", "a1")
|
||||||
|
makeUser("weba1小刚", "normal", "a1")
|
||||||
|
const other = makeUser("weba2小李", "normal", "a2")
|
||||||
|
makeSubmission(a, task, 3, "2026-01-01 00:00:00.000000")
|
||||||
|
const aBest = makeSubmission(a, task, 4.5, "2026-01-02 00:00:00.000000")
|
||||||
|
makeSubmission(a, task, 4, "2026-01-03 00:00:00.000000")
|
||||||
|
const bSub = makeSubmission(b, task, 0)
|
||||||
|
run(`UPDATE submission_submission SET flag = 'present' WHERE id = $id`, { id: bSub })
|
||||||
|
makeSubmission(other, task, 5)
|
||||||
|
|
||||||
|
const adm = await client("adm")
|
||||||
|
const res = await adm("GET", `/api/submission/stats/${task}?classname=a1`)
|
||||||
|
expect(res.status).toBe(200)
|
||||||
|
expect(res.json).toMatchObject({
|
||||||
|
submitted_count: 2,
|
||||||
|
unsubmitted_count: 1,
|
||||||
|
average_score: 4,
|
||||||
|
unrated_count: 2,
|
||||||
|
present_count: 1,
|
||||||
|
classes: ["a1", "a2"],
|
||||||
|
submission_count_distribution: { count_1: 1, count_2: 0, count_3: 1, count_4_plus: 0 },
|
||||||
|
})
|
||||||
|
expect(res.json.unsubmitted_users).toEqual([{ username: "weba1小刚", classname: "a1" }])
|
||||||
|
expect(res.json.top_scored).toEqual([
|
||||||
|
{ username: "weba1小明", classname: "a1", score: 4.5, submission_id: uuid(aBest) },
|
||||||
|
])
|
||||||
|
|
||||||
|
const all = await adm("GET", `/api/submission/stats/${task}`)
|
||||||
|
expect(all.json.top_scored.map((t: any) => t.username)).toEqual(["weba2小李", "weba1小明"])
|
||||||
|
})
|
||||||
|
})
|
||||||
Reference in new issue
Block a user