mark-web/src/features/mark/scoring/MarkBoardMouse.vue

<template>
  <div
    v-if="markStore.currentTask"
    class="mark-board-track is-mouse-board"
    :class="[markStore.isScoreBoardCollapsed ? 'hide' : 'show']"
  >
    <div class="board-mode">
      <a-dropdown>
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="markStore.toggleKeyMouse">
              键盘给分
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>
          鼠标给分
          <DownOutlined style="display: inline-flex" />
        </a-button>
      </a-dropdown>
    </div>
    <div class="board-header">
      <div class="board-header-left">
        <div class="board-header-info">
          <img src="@/assets/icons/icon-star.svg" /><span>总分</span>
        </div>
        <div class="board-header-score">
          <transition-group name="score-number-animation" tag="span">
            <span :key="markStore.currentTask.markResult?.markerScore || 0">{{
              markStore.currentTask.markResult?.markerScore
            }}</span>
          </transition-group>
        </div>
      </div>
      <qm-button
        v-if="props.isCheckAnswer && !hasModifyScore"
        class="board-header-submit"
        size="medium"
        type="primary"
        @click="checkSubmit"
      >
        复核
      </qm-button>
      <qm-button
        v-else
        class="board-header-submit"
        size="medium"
        type="primary"
        @click="submit"
      >
        提交
      </qm-button>
    </div>

    <div
      v-if="markStore.currentTask && markStore.currentTask.questionList"
      class="board-questions"
      :style="{
        flexGrow: 2,
      }"
    >
      <template
        v-for="(question, index) in markStore.currentTask.questionList"
        :key="index"
      >
        <div class="board-question-full-box">
          <div
            :id="'bq-' + question.mainNumber + '-' + question.subNumber"
            :class="['board-question', { 'is-disabled': !question.selfMark }]"
          >
            <div class="question-info">
              <div class="question-title" :title="question.title">
                {{ question.title }}
              </div>
              <div class="question-no">
                {{ question.mainNumber }}-{{ question.subNumber }}
              </div>
            </div>
            <div class="board-scores">
              <div
                v-for="(s, i) in questionScoreSteps(question)"
                :key="i"
                :class="[
                  'board-score',
                  { 'is-current': isCurrentScore(question, s) },
                ]"
                @click="chooseScore(question, s)"
              >
                {{ s }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Question } from "@/types";
import { useMarkStore } from "@/store";
import { DownOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";

const markStore = useMarkStore();

const emit = defineEmits([
  "submit",
  "allZeroSubmit",
  "unselectiveSubmit",
  "checkSubmit",
]);
const props = defineProps<{ isCheckAnswer?: boolean }>();

const hasModifyScore = ref(false);

function chooseScore(question: Question, score: number) {
  // 只要修改了分值，就当做已修改
  hasModifyScore.value = true;

  markStore.currentQuestion = question;
  const { __index } = markStore.currentQuestion;
  markStore.currentTask &&
    (markStore.currentTask.markResult.scoreList[__index] = score);
}
function isCurrentScore(question: Question, score: number) {
  const { __index } = question;
  const questionScore =
    markStore.currentTask &&
    markStore.currentTask.markResult &&
    markStore.currentTask.markResult.scoreList[__index];
  return questionScore === score;
}

function questionScoreSteps(question: Question) {
  if (!question) return [];

  const remainScore = Math.round(question.maxScore * 100) / 100;
  const steps = [];
  for (
    let i = 0;
    i <= remainScore;
    i = Math.round(i * 100 + question.intervalScore * 100) / 100
  ) {
    steps.push(i);
  }
  if (
    Math.round(remainScore * 100) % Math.round(question.intervalScore * 100) !==
    0
  ) {
    steps.push(remainScore);
  }

  return steps;
}

function submit() {
  emit("submit");
}

function checkSubmit() {
  emit("checkSubmit");
}

const buttonHeightForSelective = $computed(() =>
  markStore.setting.selective && markStore.setting.enableAllZero
    ? "36px"
    : "76px"
);
</script>

<style scoped>
.mark-board-track-container {
  max-width: 290px;
  min-width: 290px;
  padding: 20px;
  max-height: calc(100vh - 56px - 0px);
  overflow: auto;
  z-index: 1001;
  transition: margin-right 0.5s;
  color: var(--app-small-header-text-color);
}
.mark-board-track-container.show {
  margin-right: 0;
}
.mark-board-track-container.hide {
  margin-right: -290px;
}

.top-container {
  background-color: var(--app-container-bg-color);
}
.total-score {
  color: var(--app-main-text-color);
  font-size: 32px;
}
.question {
  min-width: 80px;
}
.single-score {
  position: relative;
  width: 32px;
  height: 32px;
  font-size: var(--app-secondary-font-size);
  display: grid;
  place-content: center;
  background-color: var(--app-container-bg-color);

  border-radius: 30px;
}
.current-score {
  background-color: var(--app-score-color);
  color: white;
}
.all-zero-unselective-button {
  height: v-bind(buttonHeightForSelective);
  border-radius: 10px;
  padding: 7px;
  background-color: #4db9ff;
  border: none;
}
</style>