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

<template>
  <div
    class="flex gap-4 justify-between items-center bg-blue-100"
    style="z-index: 10000; position: relative; font-size: 16px; height: 40px"
  >
    <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>
    <ul class="flex gap-2 mb-0">
      <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}`"
        style="line-height: 20px"
      >
        <QuestionCircleOutlined :style="{ 'font-size': '20px' }" />
      </li>
      <li>进度{{ progress }}%</li>
    </ul>
    <ul class="flex gap-2 mb-0">
      <li @click="upScale" title="放大" style="line-height: 20px">
        <PlusCircleOutlined
          :style="{
            'font-size': '20px',
            color: greaterThanOneScale ? 'green' : 'black',
          }"
        />
      </li>
      <li @click="downScale" title="缩小" style="line-height: 20px">
        <MinusCircleOutlined
          :style="{
            'font-size': '20px',
            color: lessThanOneScale ? 'green' : 'black',
          }"
        />
      </li>
      <li @click="normalScale" title="适应" style="line-height: 20px">
        <FullscreenOutlined :style="{ 'font-size': '20px' }" />
      </li>
    </ul>
    <div @click="toggleHistory" style="line-height: 20px" title="回看">
      <HistoryOutlined :style="{ 'font-size': '20px' }" />
    </div>
    <div
      class="flex place-items-center"
      :title="
        '评卷时间段：' +
        $filters.datetimeFilter(store.setting.startTime) +
        ' ~ ' +
        $filters.datetimeFilter(store.setting.startTime)
      "
    >
      <ClockCircleOutlined
        :style="{ 'font-size': '20px' }"
        style="line-height: 20px"
      />
    </div>
    <div>{{ group?.title }}(切换)</div>
    <div class="flex place-items-center">
      <UserOutlined
        :style="{ 'font-size': '18px' }"
        style="line-height: 18px"
      />{{ store.setting.marker?.name }}
    </div>
    <div class="flex place-items-center">
      <PoweroffOutlined
        :style="{ 'font-size': '18px' }"
        style="line-height: 18px"
      />退出
    </div>
  </div>
</template>

<script lang="ts">
import { getHistoryTask } from "@/api/markPage";
import { computed, defineComponent } from "vue";
import { store } from "./store";
import {
  PlusCircleOutlined,
  MinusCircleOutlined,
  FullscreenOutlined,
  HistoryOutlined,
  UserOutlined,
  PoweroffOutlined,
  ClockCircleOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  name: "MarkHeader",
  components: {
    PlusCircleOutlined,
    MinusCircleOutlined,
    FullscreenOutlined,
    HistoryOutlined,
    UserOutlined,
    PoweroffOutlined,
    ClockCircleOutlined,
    QuestionCircleOutlined,
  },
  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;
    });
    const group = computed(() => {
      return store.groups.find((g) => g.number === store.setting.groupNumber);
    });

    const upScale = () => {
      const s = store.setting.uiSetting["answer.paper.scale"];
      if (s < 3)
        store.setting.uiSetting["answer.paper.scale"] = +(s + 0.2).toFixed(1);
    };
    const downScale = () => {
      const s = store.setting.uiSetting["answer.paper.scale"];
      if (s > 0.2)
        store.setting.uiSetting["answer.paper.scale"] = +(s - 0.2).toFixed(1);
    };
    const normalScale = () => {
      store.setting.uiSetting["answer.paper.scale"] = 1;
    };
    const toggleHistory = () => {
      store.historyOpen = !store.historyOpen;
    };
    const greaterThanOneScale = computed(() => {
      return store.setting.uiSetting["answer.paper.scale"] > 1;
    });
    const lessThanOneScale = computed(() => {
      return store.setting.uiSetting["answer.paper.scale"] < 1;
    });

    async function updateHistoryTask({
      pageNumber = 1,
      pageSize = 10,
      order = "markerTime",
      sort = "DESC",
      secretNumber = null,
    }: {
      pageNumber: number; // 从1开始
      pageSize: number;
      order: "markerTime" | "markerScore";
      sort: "ASC" | "DESC";
      secretNumber: string | null;
    }) {
      const res = await getHistoryTask({
        pageNumber,
        pageSize,
        order,
        sort,
        secretNumber,
      });
      if (res.data) {
        store.historyTasks.push(res.data);
      }
    }

    return {
      store,
      progress,
      group,
      upScale,
      downScale,
      normalScale,
      greaterThanOneScale,
      lessThanOneScale,
      updateHistoryTask,
      toggleHistory,
    };
  },
});
</script>