|
|
@@ -1,51 +1,72 @@
|
|
|
<template>
|
|
|
<div
|
|
|
- :style="{ display: store.historyOpen ? 'block' : 'none' }"
|
|
|
class="history-container tw-px-1"
|
|
|
+ :class="[store.historyOpen ? 'show' : 'hide']"
|
|
|
>
|
|
|
- <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
|
|
|
- <div class="tw-text-xl">回评</div>
|
|
|
- <a-button
|
|
|
- class="tw-content-end"
|
|
|
- shape="circle"
|
|
|
- @click="store.historyOpen = false"
|
|
|
- >
|
|
|
- <template #icon><CloseOutlined /></template>
|
|
|
- </a-button>
|
|
|
+ <div class="tw-mt-1 tw-mb-1 tw-flex tw-place-items-center">
|
|
|
+ <div class="tw-text-lg main-text-color tw-mr-4 tw-font-bold">回评</div>
|
|
|
</div>
|
|
|
- <div class="tw-mt-1 tw-mb-1 tw-flex"></div>
|
|
|
- <div class="tw-flex tw-justify-between">
|
|
|
- <div>编号</div>
|
|
|
- <div>时间</div>
|
|
|
- <div>分数</div>
|
|
|
+ <div class="tw-flex tw-justify-between tw-mt-5">
|
|
|
+ <div class="tw-cursor-pointer tw-flex">编号</div>
|
|
|
+ <div class="tw-cursor-pointer tw-flex tw-items-center">时间</div>
|
|
|
+ <div class="tw-cursor-pointer tw-flex tw-items-center">分数</div>
|
|
|
</div>
|
|
|
- <a-spin :spinning="loading" size="large" tip="Loading...">
|
|
|
- <div v-for="(task, index) of store.historyTasks" :key="index">
|
|
|
- <div
|
|
|
- @click="replaceCurrentTask(task)"
|
|
|
- class="
|
|
|
- tw-flex
|
|
|
- tw-justify-between
|
|
|
- tw-place-items-center
|
|
|
- tw-rounded
|
|
|
- tw-cursor-pointer
|
|
|
- "
|
|
|
- :class="store.currentTask === task && 'current-task'"
|
|
|
- >
|
|
|
- <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
|
|
|
- <div>
|
|
|
- {{ task.inspectTime && $filters.datetimeFilter(task.inspectTime) }}
|
|
|
- </div>
|
|
|
- <div style="width: 30px; text-align: center">
|
|
|
- {{ task.markerScore }}
|
|
|
+ <a-spin :spinning="loading" size="large" tip="Loading..." :delay="500">
|
|
|
+ <div style="margin-bottom: -40px; padding-bottom: 40px">
|
|
|
+ <div v-for="(task, index) of store.historyTasks" :key="index">
|
|
|
+ <div
|
|
|
+ @click="replaceCurrentTask(task)"
|
|
|
+ class="
|
|
|
+ tw-flex
|
|
|
+ tw-justify-between
|
|
|
+ tw-place-items-center
|
|
|
+ tw-rounded
|
|
|
+ tw-cursor-pointer
|
|
|
+ tw-font-bold
|
|
|
+ tw-py-2
|
|
|
+ "
|
|
|
+ :class="store.currentTask === task && 'current-task'"
|
|
|
+ >
|
|
|
+ <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
|
|
|
+ <div>
|
|
|
+ {{
|
|
|
+ task.inspectTime && $filters.datetimeFilter(task.inspectTime)
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div style="width: 30px; text-align: right">
|
|
|
+ {{ task.markerScore }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
- <div class="tw-flex tw-justify-between tw-place-content-center tw-mt-2">
|
|
|
- <a-button @click="previousPage">上一页</a-button>
|
|
|
- <div style="line-height: 30px">第{{ currentPage }}页</div>
|
|
|
- <a-button @click="nextPage">下一页</a-button>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ tw-flex tw-justify-between tw-place-content-center tw-mt-2
|
|
|
+ pager-container
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="tw-font-bold" style="line-height: 30px">
|
|
|
+ 第{{ currentPage }}页
|
|
|
+ </div>
|
|
|
+ <div class="tw-flex tw-gap-2">
|
|
|
+ <a-button
|
|
|
+ shape="circle"
|
|
|
+ @click="previousPage"
|
|
|
+ type="primary"
|
|
|
+ title="上一页"
|
|
|
+ >
|
|
|
+ <div class="left-triangle"></div>
|
|
|
+ </a-button>
|
|
|
+ <a-button
|
|
|
+ shape="circle"
|
|
|
+ @click="nextPage"
|
|
|
+ type="primary"
|
|
|
+ title="下一页"
|
|
|
+ >
|
|
|
+ <div class="right-triangle"></div>
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -56,7 +77,6 @@ import type { Task } from "@/types";
|
|
|
import { ref, watch, watchEffect } from "vue";
|
|
|
import { useRoute } from "vue-router";
|
|
|
import { store } from "@/features/mark/store";
|
|
|
-import { CloseOutlined } from "@ant-design/icons-vue";
|
|
|
import { cloneDeep } from "lodash";
|
|
|
|
|
|
const props = defineProps<{ shouldReload: number }>();
|
|
|
@@ -137,10 +157,48 @@ function nextPage() {
|
|
|
|
|
|
<style scoped>
|
|
|
.history-container {
|
|
|
- min-width: 250px;
|
|
|
- border-right: 1px solid grey;
|
|
|
+ min-width: 290px;
|
|
|
+ padding: 20px;
|
|
|
+ font-size: var(--app-secondary-font-size);
|
|
|
+ overflow-y: auto;
|
|
|
+ height: calc(100vh - 56px);
|
|
|
+ transition: margin-left 0.5s;
|
|
|
+}
|
|
|
+.history-container.show {
|
|
|
+ margin-left: 0;
|
|
|
}
|
|
|
+.history-container.hide {
|
|
|
+ margin-left: -290px;
|
|
|
+}
|
|
|
+
|
|
|
.current-task {
|
|
|
- background-color: aqua;
|
|
|
+ background-color: var(--app-container-bg-color);
|
|
|
+ padding-left: 5px;
|
|
|
+ margin-left: -5px;
|
|
|
+ padding-right: 5px;
|
|
|
+ margin-right: -5px;
|
|
|
+}
|
|
|
+
|
|
|
+.left-triangle {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background-color: white;
|
|
|
+ clip-path: polygon(0 50%, 100% 0, 100% 100%);
|
|
|
+ transform: translateX(60%);
|
|
|
+}
|
|
|
+
|
|
|
+.right-triangle {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background-color: white;
|
|
|
+ clip-path: polygon(100% 50%, 0 100%, 0 0);
|
|
|
+ transform: translateX(90%);
|
|
|
+}
|
|
|
+.pager-container {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ width: 250px;
|
|
|
+ background-color: var(--app-main-bg-color);
|
|
|
}
|
|
|
</style>
|
Michael Wang