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

<template>
  <div
    class="tw-flex tw-gap-2 tw-justify-between tw-items-center header-container"
    v-if="store.setting && store.setting.subject.name"
  >
    <div
      class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
      :class="[store.historyOpen && 'menu-toggled']"
      @click="toggleHistory"
    >
      <span title="回看" class="tw-inline-flex tw-place-content-center">
        <img
          src="./images/left-menu.svg"
          :class="[store.historyOpen && 'svg-red']"
        />
      </span>
      <div v-if="store.historyOpen" class="triangle"></div>
    </div>
    <div style="max-width: 12%; margin-left: -20px">
      <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 class="tw-flex" style="margin: 0 -20px 0 -40px">
      <a-tooltip>
        <template #title>
          问题卷{{ store.status.problemCount }}
          <br />
          待仲裁{{ store.status.arbitrateCount }}
        </template>
        <img src="./images/problems.svg" />
      </a-tooltip>
    </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"
          :class="markCountChanged && 'markcount-animation'"
          >{{ personCountAnimated }}</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"
          :class="markCountChanged && 'markcount-animation'"
          >{{ todoMarkCountAnimated }}</span
        >
      </span>
      <span>
        <span class="header-small-text">进度</span>
        <span class="highlight-text">{{ progress ?? "-" }}%</span>
      </span>
    </div>
    <div class="tw-flex tw-place-items-center">
      <a-tooltip>
        <template #title>
          评卷时间段
          <br />
          {{
            store.setting.startTime > 0
              ? $filters.datetimeFilter(store.setting.startTime)
              : "-"
          }}
          <br />~<br />
          {{
            store.setting.endTime > 0
              ? $filters.datetimeFilter(store.setting.endTime)
              : "-"
          }}
        </template>
        <img src="./images/时间.png" style="width: 16px; height: 16px" />
      </a-tooltip>
    </div>
    <div class="tw-flex">
      <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: 14px;
            color: rgba(255, 255, 255, 0.5);
            border: none;
            display: flex;
            align-items: center;
          "
        >
          <img
            src="./images/轨迹模式.png"
            style="
              width: 11px;
              height: 12px;
              display: inline;
              margin-right: 2px;
            "
          />
          {{ modeName }}
          <div v-if="!store.setting.forceMode" class="dropdown-triangle"></div>
        </a-button>
      </a-dropdown>
    </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 tw-items-center">
        <img
          src="./images/小助手.png"
          style="width: 10px; height: 12px; margin-right: 2px"
        />
        <span style="font-size: 14px">小助手</span>
        <div class="dropdown-triangle"></div>
      </div>
    </a-popover>
    <a-popover v-if="isScanImage()" trigger="hover" class="tw-cursor-pointer">
      <template #title>
        <span style="color: #283e76; font-size: 16px">小助手</span>
      </template>
      <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
                type="text"
                style="color: #5d65ff; margin-right: -15px; height: 25px"
                @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"
                style="margin: 0"
              />
            </td>
          </tr>
        </table>
      </template>
      <div class="tw-flex tw-items-center">
        <img
          src="./images/小助手.png"
          style="width: 10px; height: 12px; margin-right: 2px"
        />
        <span style="font-size: 14px">小助手</span>
        <div class="dropdown-triangle"></div>
      </div>
    </a-popover>
    <div
      @click="openSwitchGroupModal"
      class="tw-flex tw-place-content-center tw-cursor-pointer tw-items-center"
      style="max-width: 8%"
      :title="store.setting.groupTitle + '-' + store.setting.groupNumber"
    >
      <img
        src="./images/分组.png"
        style="width: 10px; height: 12px; margin-right: 2px"
      />
      <div
        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap"
        style="font-size: 14px"
      >
        {{ "分组:" + store.setting.groupNumber }}
      </div>
      <div v-if="store.groups.length > 1" class="dropdown-triangle"></div>
    </div>
    <div class="tw-flex tw-gap-4">
      <div
        class="tw-flex tw-place-items-center tw-cursor-pointer"
        style="font-size: 14px"
        @click="openProfileModal"
      >
        <!-- <UserOutlined /> -->
        {{ store.setting.userName }}
      </div>
      <div
        class="tw-flex tw-place-items-center tw-cursor-pointer"
        @click="logout"
        style="font-size: 14px"
      >
        <!-- <PoweroffOutlined /> -->
        退出
      </div>
      <div
        class="tw-flex tw-place-content-center tw-cursor-pointer menu"
        :class="[
          !store.setting.uiSetting['score.board.collapse'] &&
            store.currentTask &&
            'menu-toggled',
        ]"
        @click="toggleScoreBoard"
      >
        <span
          title="给分板"
          class="tw-inline-flex tw-place-content-center tw-relative"
        >
          <img
            src="./images/right-menu.svg"
            :class="[
              !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
            ]"
          />
        </span>
        <div
          v-if="
            !store.setting.uiSetting['score.board.collapse'] &&
            store.currentTask
          "
          class="triangle"
        ></div>
      </div>
    </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, watch, watchEffect } from "vue";
import { store, isScanImage } from "./store";
import {
  SnippetsOutlined,
  UserOutlined,
  PoweroffOutlined,
  ClockCircleOutlined,
  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 gsap from "gsap";

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 toggleScoreBoard = () => {
  store.setting.uiSetting["score.board.collapse"] =
    !store.setting.uiSetting["score.board.collapse"];
};
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: () => {},
    });
  }
});

const personCountAnimated = computed(() => {
  if (store.status.personCountTweenedNumber === undefined) return "-";
  return Number(store.status.personCountTweenedNumber).toFixed(0);
});
const todoMarkCountAnimated = computed(() => {
  if (store.status.totalCount === undefined) return "-";
  return Number(store.status.todoMarkCountTweenedNumber).toFixed(0);
});
let markCountChanged = ref(false);
watch(
  () => [
    store.status.personCount,
    store.status.totalCount,
    store.status.markedCount,
  ],
  ([personCount, totalCount, markedCount]) => {
    if (store.status.personCountTweenedNumber === undefined) {
      store.status.personCountTweenedNumber = 0;
      store.status.todoMarkCountTweenedNumber = 0;
    }
    markCountChanged.value = true;
    setTimeout(() => (markCountChanged.value = false), 3000);
    gsap.to(store.status, {
      duration: 1.5,
      personCountTweenedNumber: personCount,
      todoMarkCountTweenedNumber: totalCount - markedCount,
    });
  }
);
</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);
}
.menu {
  width: 56px;
  height: 56px;
  padding: 20px;
}
.menu:hover,
.menu-toggled {
  background-color: rgba(255, 255, 255, 0.2);
}

.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 1em;
  color: #435488;
  width: 240px;
}
.assistant-table tr td:nth-child(2) {
  text-align: right;
}
.svg-red {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
    brightness(104%) contrast(97%);
}
.triangle {
  background-color: white;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);

  position: absolute;
  bottom: -2px;
}
.dropdown-triangle {
  background-color: #8c8d9b;
  width: 7px;
  height: 5px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin-left: 4px;
}
.markcount-animation {
  animation: change-color 3s ease-in-out;
}
@keyframes change-color {
  0% {
    color: red;
  }
  100% {
    color: white;
  }
}
</style>