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

<template>
  <div
    class="
      tw-flex tw-gap-2 tw-justify-between tw-items-center
      header-container
      tw-px-1
    "
    v-if="store.setting && store.setting.subject.name"
  >
    <div style="max-width: 10%">
      <a
        class="
          tw-text-white
          tw-block
          tw-overflow-ellipsis
          tw-overflow-hidden
          tw-whitespace-nowrap
          header-big-text
        "
        :title="store.setting.subject.name"
        href="/mark/subject-select"
        >{{
          `${store.setting.subject.code ?? ""}-${
            store.setting.subject.name ?? ""
          }`
        }}</a
      >
    </div>
    <div v-if="store.setting.statusValue === 'TRIAL'">试评</div>
    <div class="tw-flex tw-gap-1">
      <div>
        <span class="header-small-text">编号</span>
        <span class="highlight-text">{{
          store.currentTask?.secretNumber
        }}</span>
      </div>
      <div
        v-if="store.currentTask && store.currentTask.objectiveScore !== null"
      >
        <span class="header-small-text">客观分</span
        ><span class="highlight-text">{{
          store.currentTask.objectiveScore
        }}</span>
      </div>
    </div>
    <div v-show="store.status.totalCount" class="tw-flex tw-gap-2">
      <span>
        <span class="header-small-text">已评</span
        ><span class="highlight-text">{{
          store.status.personCount ?? "-"
        }}</span>
      </span>
      <span v-if="store.setting.topCount">
        <span class="header-small-text">分配</span
        ><span class="highlight-text">{{ store.setting.topCount ?? "-" }}</span>
      </span>
      <span>
        <span class="header-small-text">未评</span
        ><span class="highlight-text">{{
          store.status.totalCount - store.status.markedCount ?? "-"
        }}</span>
      </span>
      <span
        :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
        class="tw-inline-flex tw-place-content-center"
      >
        <QuestionCircleOutlined style="display: inline-flex" />
      </span>
      <span>
        <span class="header-small-text">进度</span
        ><span class="highlight-text">{{ progress ?? "-" }}%</span>
      </span>
    </div>
    <ZoomPaper v-if="isScanImage()" :store="store" />
    <div>
      <a-dropdown class="header-bg-color">
        <template #overlay v-if="!store.setting.forceMode">
          <a-menu>
            <a-menu-item key="1" @click="toggleSettingMode">
              {{ exchangeModeName }}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button
          style="font-size: 16px; color: white !important; border: none"
        >
          {{ modeName }}
          <DownOutlined
            v-if="!store.setting.forceMode"
            style="display: inline-flex"
          />
        </a-button>
      </a-dropdown>
    </div>
    <div @click="toggleHistory" class="tw-flex" title="回看">
      <SnippetsOutlined
        class="tw-cursor-pointer"
        :style="{
          color: store.historyOpen ? 'red' : 'white',
        }"
      />
    </div>
    <div
      class="tw-flex tw-place-items-center"
      :title="
        '评卷时间段：' +
        (store.setting.startTime > 0
          ? $filters.datetimeFilter(store.setting.startTime)
          : '-') +
        ' ~ ' +
        (store.setting.endTime > 0
          ? $filters.datetimeFilter(store.setting.endTime)
          : '-')
      "
    >
      <ClockCircleOutlined />
    </div>
    <a-popover
      v-if="!isScanImage()"
      title="小助手"
      trigger="hover"
      class="tw-cursor-pointer"
    >
      <template #content>
        <table class="assistant-table">
          <tr v-if="store.setting.statusValue !== 'TRIAL'">
            <td>问题卷</td>
            <td><a-button @click="openProblemModal">选择问题类型</a-button></td>
          </tr>
        </table>
      </template>
      <div class="tw-flex">
        小助手
        <DownOutlined
          style="font-size: 12px; display: inline-block"
          class="tw-self-center tw-ml-1"
        />
      </div>
    </a-popover>
    <a-popover
      v-if="isScanImage()"
      title="小助手"
      trigger="hover"
      class="tw-cursor-pointer"
    >
      <template #content>
        <table class="assistant-table">
          <tr v-if="store.setting.subject.paperUrl">
            <td>试卷</td>
            <td>
              <a-switch
                v-model:checked="store.setting.uiSetting['paper.modal']"
              />
            </td>
          </tr>
          <tr v-if="store.setting.subject.answerUrl">
            <td>答案</td>
            <td>
              <a-switch
                v-model:checked="store.setting.uiSetting['answer.modal']"
              />
            </td>
          </tr>
          <tr>
            <td>全卷</td>
            <td><a-switch v-model:checked="store.allPaperModal" /></td>
          </tr>
          <tr v-if="store.setting.sheetView">
            <td>原图</td>
            <td>
              <a-switch v-model:checked="store.sheetViewModal" />
            </td>
          </tr>
          <tr>
            <td>缩略图</td>
            <td>
              <a-switch
                v-model:checked="store.setting.uiSetting['minimap.modal']"
              />
            </td>
          </tr>
          <tr>
            <td>特殊标记</td>
            <td>
              <a-switch
                v-model:checked="store.setting.uiSetting['specialTag.modal']"
              />
            </td>
          </tr>
          <tr v-if="store.setting.statusValue !== 'TRIAL'">
            <td>问题卷</td>
            <td><a-button @click="openProblemModal">选择问题类型</a-button></td>
          </tr>
          <tr v-if="isScanImage()">
            <td>分数/标记大小</td>
            <td>
              <a-slider
                v-model:value="store.setting.uiSetting['score.fontSize.scale']"
                :min="0.5"
                :step="0.1"
                :max="2"
              />
            </td>
          </tr>
        </table>
      </template>
      <div class="tw-flex">
        小助手
        <DownOutlined
          style="font-size: 12px; display: inline-block"
          class="tw-self-center tw-ml-1"
        />
      </div>
    </a-popover>
    <div
      @click="openSwitchGroupModal"
      class="tw-flex tw-place-content-center tw-cursor-pointer"
      style="max-width: 8%"
      :title="store.setting.groupTitle + '-' + store.setting.groupNumber"
    >
      <div
        class="
          tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-mr-1
        "
      >
        {{ "分组:" + store.setting.groupNumber }}
      </div>
      <DownOutlined
        v-if="store.groups.length > 1"
        style="font-size: 12px; display: inline-block"
        class="tw-self-center"
      />
    </div>
    <div
      class="tw-flex tw-place-items-center tw-cursor-pointer"
      @click="openProfileModal"
    >
      <UserOutlined />{{ store.setting.userName }}
    </div>
    <div
      class="tw-flex tw-place-items-center tw-cursor-pointer"
      @click="logout"
    >
      <PoweroffOutlined />
      退出
    </div>
  </div>
  <MarkChangeProfile ref="changeProfileRef" />
  <MarkSwitchGroupDialog ref="switchGroupRef" />
  <MarkProblemDialog
    @should-reload-history="$emit('should-reload-history')"
    ref="problemRef"
  />
</template>

<script setup lang="ts">
import { doLogout, updateUISetting } from "@/api/markPage";
import { computed, ref, watchEffect } from "vue";
import { store, isScanImage } from "./store";
import {
  SnippetsOutlined,
  UserOutlined,
  PoweroffOutlined,
  ClockCircleOutlined,
  QuestionCircleOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import { ModeEnum } from "@/types";
import MarkChangeProfile from "./MarkChangeProfile.vue";
import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";
import MarkProblemDialog from "./MarkProblemDialog.vue";
import { isNumber } from "lodash";
import { Modal } from "ant-design-vue";
import ZoomPaper from "@/components/ZoomPaper.vue";

defineEmits(["should-reload-history"]);

const modeName = computed(() =>
  store.setting.mode === ModeEnum.TRACK ? "轨迹模式" : "普通模式"
);

const exchangeModeName = computed(() =>
  store.setting.mode === ModeEnum.TRACK ? "普通模式" : "轨迹模式"
);

async function toggleSettingMode() {
  if (store.setting.mode === ModeEnum.TRACK) {
    store.setting.mode = ModeEnum.COMMON;
  } else {
    store.setting.mode = ModeEnum.TRACK;
  }
  await updateUISetting(store.setting.mode);

  const body = document.querySelector("body");
  if (body) body.innerHTML = "重新加载中...";
  // 等待一秒后，重新加载页面
  await new Promise((resolve) => setTimeout(resolve, 1000));
  window.location.reload();
}

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 toggleHistory = () => {
  store.historyOpen = !store.historyOpen;
};
const logout = () => {
  doLogout();
};

const changeProfileRef = ref(null);

const openProfileModal = () => {
  // @ts-ignore
  changeProfileRef.value?.showModal();
};

const switchGroupRef = ref(null);

const openSwitchGroupModal = () => {
  // @ts-ignore
  switchGroupRef.value?.showModal();
};

const problemRef = ref(null);

const openProblemModal = () => {
  // @ts-ignore
  problemRef.value?.showModal();
};

watchEffect(() => {
  if (
    isNumber(store.setting.topCount) &&
    store.setting.topCount > 0 &&
    store.setting.topCount === store.status.personCount
  ) {
    Modal.confirm({
      centered: true,
      mask: true,
      zIndex: 6000,
      maskStyle: { opacity: 0.97 },
      content: `分配任务份已完成，是否继续？`,
      okText: "继续",
      cancelText: "退出",
      onCancel: () => {
        logout();
      },
      onOk: () => {},
    });
  }
});
</script>

<style scoped>
.header-bg-color {
  background-color: var(--header-bg-color);
}
.header-container {
  position: relative;
  font-size: 16px;
  height: 56px;
  line-height: 16px;

  background-color: var(--header-bg-color);
  color: rgba(255, 255, 255, 0.5);
}
.header-container span {
  vertical-align: middle;
}
.header-big-text {
  font-size: 20px;
  line-height: 30px;
}
.header-small-text {
  font-size: 12px;
  /* line-height: 12px; */
}
.highlight-text {
  color: white;
}
.header-bg-color.ant-btn:hover {
  background-color: #5d6d7d !important;
}
.assistant-table {
  z-index: 5500;
  border-collapse: separate;
  border-spacing: 0 0.5em;
}
</style>