mark-web/src/components/mark/MarkHeader.vue

<template>
  <div class="flex gap-4">
    <div>
      <a href="/mark/subject-select">{{ store.setting.subject?.name }}</a>
    </div>
    <div class="flex">
      <div>考生编号：{{ store.currentTask?.studentCode }}</div>
      <div v-if="store.currentTask?.objectiveScore">
        考生编号：{{ store.currentTask?.objectiveScore }}
      </div>
    </div>
    <div>
      <ul class="flex gap-1">
        <li>已评{{ store.status.markedCount }}</li>
        <li v-if="store.setting.topCount">分配{{ store.setting.topCount }}</li>
        <li>未评{{ store.status.totalCount - store.status.markedCount }}</li>
        <li
          :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
        >
          todo
        </li>
        <li>进度{{ progress }}%</li>
      </ul>
    </div>
    <div>
      <ul class="flex gap-1">
        <li>放大</li>
        <li>缩小</li>
        <li>回看</li>
      </ul>
    </div>
    <div>回看</div>
    <div
      :title="
        $filters.datetimeFilter(store.setting.startTime) +
        ' ~ ' +
        $filters.datetimeFilter(store.setting.startTime)
      "
    >
      时钟
    </div>
    <div>{{ store.setting.groupNumber }}(切换)</div>
    <div>{{ store.setting.marker?.name }}</div>
    <div>退出</div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { store } from "./store";

export default defineComponent({
  name: "MarkHeader",
  setup() {
    const progress = computed(() => {
      const { totalCount, markedCount } = store.status;
      if (totalCount <= 0) return 0;
      let p = markedCount / totalCount;
      if (p < 0.01 && markedCount >= 1) p = 0.01;
      p = Math.floor(p * 100);
      return p;
    });
    return { store, progress };
  },
});
</script>