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

<template>
  <div
    v-if="store.currentTask"
    class="mark-board-track-container"
    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
  >
    <div class="tw-my-2 tw-flex">
      <a-dropdown class="tw-self-end">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="toggleKeyMouse">
              键盘给分
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>
          鼠标给分
          <DownOutlined style="display: inline-flex" />
        </a-button>
      </a-dropdown>
    </div>
    <div
      class="
        tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5
        top-container
        tw-mb-4
      "
    >
      <div class="tw-flex tw-flex-col">
        <div class="tw-flex tw-items-center tw-gap-2">
          <img
            src="./images/totalscore.png"
            style="width: 13px; height: 16px"
          />
          总分
        </div>
        <div class="total-score tw-ml-5 tw-font-bold">
          {{ store.currentTask?.markResult.markerScore }}
        </div>
      </div>

      <div class="tw-flex tw-place-content-center tw-items-center tw-gap-2">
        <div class="tw-flex tw-flex-col tw-gap-1">
          <a-popconfirm
            v-if="store.setting.enableAllZero"
            title="确定给全零分？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="$emit('allZeroSubmit')"
            :overlayStyle="{ width: '200px' }"
          >
            <a-button
              type="primary"
              size="middle"
              class="all-zero-unselective-button"
            >
              <span>全零分</span>
            </a-button>
          </a-popconfirm>
          <a-popconfirm
            v-if="store.setting.selective"
            title="确定是未选做？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="$emit('unselectiveSubmit')"
            :overlayStyle="{ width: '200px' }"
          >
            <a-button
              type="primary"
              size="middle"
              class="all-zero-unselective-button"
            >
              <span>未选做</span>
            </a-button>
          </a-popconfirm>
        </div>

        <qm-button
          type="primary"
          shape="round"
          size="middle"
          style="height: 76px; border-radius: 10px; padding: 12px"
          @click="submit"
        >
          提交
        </qm-button>
      </div>
    </div>

    <div
      v-if="store.currentTask && store.currentTask.questionList"
      style="
        height: calc(100vh - 56px - 200px);
        overflow: auto;
        user-select: none;
        position: relative;
      "
    >
      <template
        v-for="(question, index) in store.currentTask?.questionList"
        :key="index"
      >
        <div class="question tw-rounded tw-mb-2">
          <div>
            <div>
              {{ question.title }} {{ question.mainNumber }}-{{
                question.subNumber
              }}
            </div>
            <div class="tw-flex tw-flex-wrap tw-gap-2">
              <div
                v-for="(s, i) in questionScoreSteps(question)"
                :key="i"
                @click="chooseScore(question, s)"
                class="single-score tw-cursor-pointer"
                :class="isCurrentScore(question, s) && 'current-score'"
              >
                {{ s }}
                <div
                  v-if="isCurrentScore(question, s)"
                  class="current-score-indicator"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Question } from "@/types";
import { isNumber } from "lodash";

import { store } from "@/store/store";
import { keyMouse } from "./use/keyboardAndMouse";
import { message } from "ant-design-vue";
import { DownOutlined } from "@ant-design/icons-vue";

const emit = defineEmits(["submit", "allZeroSubmit", "unselectiveSubmit"]);
const { toggleKeyMouse } = keyMouse();

function chooseScore(question: Question, score: number) {
  store.currentQuestion = question;
  const { __index } = store.currentQuestion;
  store.currentTask &&
    (store.currentTask.markResult.scoreList[__index] = score);
}
function isCurrentScore(question: Question, score: number) {
  const { __index } = question;
  const questionScore =
    store.currentTask && store.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() {
  if (!store.currentTask) return;
  const errors: any = [];
  store.currentTask.markResult.scoreList.forEach((s, index) => {
    if (!isNumber(s) && store.currentTask) {
      const question = store.currentTask.questionList[index];
      errors.push({
        question,
        index,
        error: `${question.mainNumber}-${question.subNumber} 没有赋分不能提交。`,
      });
    }
  });
  if (errors.length === 0) {
    emit("submit");
  } else {
    console.log(errors);
    message.error({
      content: errors.map((e: any) => `${e.error}`).join("\n"),
      duration: 10,
    });
  }
}

let buttonHeightForSelective = $computed(() =>
  store.setting.selective && store.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 {
  color: var(--app-score-color);
}
.current-score-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: #5c69f6;
}
.all-zero-unselective-button {
  height: v-bind(buttonHeightForSelective);
  border-radius: 10px;
  padding: 7px;
  background-color: #4db9ff;
  border: none;
}
</style>