add mark-header

package.json

@@ -13,6 +13,7 @@
     "axios-progress-bar": "^1.2.0",
     "axios-retry": "^3.1.9",
     "lodash-es": "^4.17.21",
+    "moment": "^2.29.1",
     "vue": "^3.0.5",
     "vue-router": "4"
   },

src/App.vue

@@ -42,6 +42,5 @@ export default defineComponent({
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/components/mark/Mark.vue

@@ -1,25 +1,35 @@
 <template>
-  <h1>展示新前端获取setting的结果</h1>
-  <div>
-    setting:
-    <pre> {{ store.setting }}</pre>
+  <div class="container">
+    <mark-header></mark-header>
+    <mark-body></mark-body>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive, defineComponent, onMounted, toRefs } from "vue";
-import { getSetting } from "@/api/markPage";
-import { store } from "@/store";
+import { getSetting, getStatus } from "@/api/markPage";
+import { store } from "./store";
+import MarkHeader from "./MarkHeader.vue";
+import MarkBody from "./MarkBody.vue";
 
 export default defineComponent({
   name: "Mark",
+  components: {
+    MarkHeader,
+    MarkBody,
+  },
   setup: () => {
     async function updateSetting() {
       const settingRes = await getSetting();
       store.setting = settingRes.data;
     }
+    async function updateStatus() {
+      const res = await getStatus();
+      store.status = res.data;
+    }
     onMounted(() => {
       updateSetting();
+      updateStatus();
     });
     return { store };
   },

src/components/mark/MarkBody.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <div>
+      <a href="/mark/subject-select">{{ store.setting.subject?.name }}</a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { store } from "./store";
+
+export default defineComponent({
+  name: "MarkBody",
+  setup() {
+    return { store };
+  },
+});
+</script>

src/components/mark/MarkHeader.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div>
+      <a href="/mark/subject-select">{{ store.setting.subject?.name }}</a>
+    </div>
+    <div>
+      <div>考生编号：{{ store.currentTask?.studentCode }}</div>
+      <div v-if="store.currentTask?.objectiveScore">
+        考生编号：{{ store.currentTask?.objectiveScore }}
+      </div>
+    </div>
+    <div>
+      <ul>
+        <li>已评{{ store.status.markedCount }}</li>
+        <li v-if="store.setting.topCount">分配{{ store.setting.topCount }}</li>
+        <li>未评{{ store.status.totalCount - store.status.markedCount }}</li>
+        <li>
+          todo{{ store.status.problemCount }}、{{ store.status.arbitrateCount }}
+        </li>
+        <li>进度{{ progress }}%</li>
+      </ul>
+    </div>
+    <div>
+      <ul>
+        <li>放大</li>
+        <li>缩小</li>
+        <li>回看</li>
+      </ul>
+    </div>
+    <div>回看</div>
+    <div>
+      时钟{{ $filters.datetimeFilter(store.setting.startTime) }} ~
+      {{ $filters.datetimeFilter(store.setting.startTime) }}
+    </div>
+    <div>{{ store.setting.subject?.name }}(切换)</div>
+    <div>{{ store.setting.marker?.name }}</div>
+    <div>退出</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { store } from "./store";
+
+export default defineComponent({
+  name: "MarkHeader",
+  setup() {
+    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;
+    });
+    return { store, progress };
+  },
+});
+</script>

src/constants/constants.ts

@@ -0,0 +1 @@
+export const YYYYMMDDHHmmss = "YYYY-MM-DD HH:mm:ss";

src/filters/index.ts

@@ -0,0 +1,8 @@
+import { YYYYMMDDHHmmss } from "@/constants/constants";
+import moment from "moment";
+
+export default {
+  datetimeFilter(epochTime: number) {
+    return moment(epochTime).format(YYYYMMDDHHmmss);
+  },
+};

src/main.ts

@@ -3,13 +3,17 @@ import "./styles/global.css";
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "@/router";
+import filters from "@/filters";
 
 // if(process.env.NODE_ENV)
 // console.log(import.meta.env.DEV);
+const app = createApp(App);
+app.use(router);
+app.config.globalProperties.$filters = filters;
 if (import.meta.env.DEV) {
   initLogin().then(() => {
-    createApp(App).use(router).mount("#app");
+    app.mount("#app");
   });
 } else {
-  createApp(App).use(router).mount("#app");
+  app.mount("#app");
 }

src/shims-vue.d.ts

@@ -1,5 +1,14 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+import { ComponentCustomProperties } from "vue";
+import filters from "@/filters";
+
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    $filters: typeof filters;
+  }
 }

src/styles/global.css

@@ -3,4 +3,6 @@
 body {
   margin: 0;
   font-size: 14px;
+  min-width: 1024px;
+  min-height: 600px;
 }

src/test/TestStore.vue

@@ -5,12 +5,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { store, toggleMode } from "../store";
+import { store, toggleMode } from "@/components/mark/store";
+import filters from "@/filters";
 
 export default defineComponent({
   setup() {
     console.log(store);
-
     return { state: store, toggleMode };
   },
   updated() {

yarn.lock

@@ -434,6 +434,11 @@ minimist@^1.2.0, minimist@^1.2.5:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
+
 nanoid@^3.1.20:
   version "3.1.22"
   resolved "https://registry.npm.taobao.org/nanoid/download/nanoid-3.1.22.tgz?cache=0&sync_timestamp=1615820517433&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnanoid%2Fdownload%2Fnanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"