Browse Source

feat: 首页指引

zhangjie 10 tháng trước cách đây
mục cha
commit
e6fd78e27e

BIN
src/assets/images/bg-line-bottom.png


BIN
src/assets/images/bg-line-top.png


+ 50 - 4
src/assets/styles/home.scss

@@ -534,7 +534,7 @@
     }
   }
 
-  .guide-map {
+  .home-guide {
     padding: 20px 0 0;
     overflow-y: auto;
     white-space: nowrap;
@@ -598,9 +598,16 @@
           right: 8px;
           color: #8c8c8c;
           font-size: 12px;
+          display: none;
         }
 
-        &:hover {
+        &.is-link {
+          &::after {
+            display: block;
+          }
+        }
+
+        &.is-link:hover {
           color: $--color-primary;
           cursor: pointer;
 
@@ -631,7 +638,21 @@
     width: 200px;
     text-align: left;
 
-    &:not(:last-child):after {
+    &:not(:last-child)::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border: 1px solid #3a5ae5;
+      top: 50%;
+      right: -5px;
+      margin-top: -5px;
+      border-radius: 50%;
+      background-color: #fff;
+      z-index: 9;
+    }
+    &:not(:first-child)::before {
       content: "";
       display: block;
       position: absolute;
@@ -642,10 +663,35 @@
       background-repeat: no-repeat;
 
       top: 50%;
-      right: -20px;
+      left: -22px;
       margin-top: -5px;
     }
 
+    &:last-child {
+      &::before {
+        display: none;
+      }
+      .guide-line-top {
+        position: absolute;
+        width: 24px;
+        height: 100px;
+        left: -24px;
+        top: 50%;
+        margin-top: -100px;
+        background-image: url(../images/bg-line-top.png);
+        background-size: 100% 100%;
+      }
+      .guide-line-bottom {
+        position: absolute;
+        width: 24px;
+        height: 100px;
+        left: -24px;
+        top: 50%;
+        background-image: url(../images/bg-line-bottom.png);
+        background-size: 100% 100%;
+      }
+    }
+
     .guide-box:not(:last-child) {
       margin-bottom: 16px;
     }

+ 7 - 0
src/modules/target/router.js

@@ -7,36 +7,43 @@ import RequirementStatistics from "./views/RequirementStatistics.vue";
 import TargetScoreManage from "./views/TargetScoreManage.vue";
 
 export default [
+  // 培养方案
   {
     path: "/target/training-plan-manage",
     name: "CultureProgram",
     component: TrainingPlanManage,
   },
+  // 教学大纲
   {
     path: "/target/course-outline-manage",
     name: "CourseOutlineManager",
     component: CourseOutlineManage,
   },
+  // 课程考核设置
   {
     path: "/target/course-examine",
     name: "CourseAssessmentSetting",
     component: CourseExamine,
   },
+  // 毕业要求达成度统计
   {
     path: "/target/requirement-statistics",
     name: "GraduationRequirement",
     component: RequirementStatistics,
   },
+  // 课程目标达成度统计
   {
     path: "/target/target-statistics",
     name: "TargetReportManage",
     component: TargetStatistics,
   },
+  // 学生毕业要求达成度
   {
     path: "/target/student-target",
     name: "StudentRequirement",
     component: StudentTarget,
   },
+  // 平时期末-成绩管理
   {
     path: "/target/target-score-manage",
     name: "TargetScoreManage",

+ 1 - 1
src/router.js

@@ -2,7 +2,7 @@ import Vue from "vue";
 import Router from "vue-router";
 
 import Home from "./views/Home.vue";
-import HomePage from "./views/HomePage.vue";
+import HomePage from "./views/home-page/HomePage.vue";
 import NotFound from "./views/404.vue";
 
 import login from "./modules/login/router";

+ 0 - 223
src/views/HomePage.vue

@@ -1,223 +0,0 @@
-<template>
-  <div class="home-page">
-    <div class="hp-top">
-      <div class="hp-top-left">
-        <div class="tab-summary-item item-wait">
-          <h4 class="tab-summary-title">待办任务</h4>
-          <div class="tab-summary-content">
-            <i class="icon icon-wait-task"></i>
-            <span class="tab-summary-cont">{{ summary.waitTaskCount }}</span>
-          </div>
-        </div>
-
-        <div class="tab-summary-item item-done">
-          <h4 class="tab-summary-title">已办任务</h4>
-          <div class="tab-summary-content">
-            <i class="icon icon-done-task"></i>
-            <span class="tab-summary-cont">{{ summary.doneTaskCount }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="hp-top-right hp-task">
-        <wait-task></wait-task>
-      </div>
-    </div>
-
-    <div class="tab-box tab-guide">
-      <h2 class="tab-box-title">业务引导</h2>
-      <div class="tab-box-body guide-map">
-        <!-- 命题组卷 -->
-        <div class="guide-group">
-          <div class="guide-box">
-            <h4 class="guide-title">命题组卷</h4>
-            <ul class="guide-menus">
-              <li class="guide-menu is-disabled">试题录入</li>
-              <li class="guide-menu">组卷</li>
-              <li class="guide-menu">生成试卷</li>
-            </ul>
-          </div>
-        </div>
-        <!-- 电子交卷 -->
-        <div class="guide-group">
-          <div class="guide-box">
-            <h4 class="guide-title">电子交卷</h4>
-            <p class="guide-desc">提交命题任务</p>
-            <ul class="guide-menus">
-              <li class="guide-menu">选择/上传试卷</li>
-              <li class="guide-menu">选择通卡/设计答题卡</li>
-              <li class="guide-menu">选择审核人提交</li>
-            </ul>
-          </div>
-        </div>
-        <!-- 印刷&扫描 -->
-        <div class="guide-group">
-          <div class="guide-box">
-            <h4 class="guide-title">印刷&扫描</h4>
-            <ul class="guide-menus">
-              <li class="guide-menu">印刷</li>
-              <li class="guide-menu">答题卡扫描</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 评卷管理 -->
-        <div class="guide-group">
-          <div class="guide-box">
-            <h4 class="guide-title">评卷管理</h4>
-            <ul class="guide-menus">
-              <li class="guide-menu">评卷参数设置</li>
-            </ul>
-            <p class="guide-desc">评卷过程管理</p>
-            <ul class="guide-menus">
-              <li class="guide-menu">评卷进度</li>
-              <li class="guide-menu">已评任务查看</li>
-            </ul>
-            <p class="guide-desc">成绩检查</p>
-            <ul class="guide-menus">
-              <li class="guide-menu">复核</li>
-            </ul>
-            <p class="guide-desc">结束评卷</p>
-            <ul class="guide-menus">
-              <li class="guide-menu">数据检查</li>
-              <li class="guide-menu">结束评卷</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 归档&成绩导出 -->
-        <div class="guide-group">
-          <div class="guide-box">
-            <h4 class="guide-title">归档&成绩导出</h4>
-            <ul class="guide-menus">
-              <li class="guide-menu">查看成绩</li>
-              <li class="guide-menu">查看成绩报告</li>
-              <li class="guide-menu">导出成绩</li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="guide-group">
-          <!-- 教研分析 -->
-          <div class="guide-box">
-            <h4 class="guide-title">教研分析</h4>
-            <ul class="guide-menus">
-              <li class="guide-menu">设置试卷蓝图数据</li>
-              <li class="guide-menu">查看报告</li>
-            </ul>
-          </div>
-          <!-- 达成度分析 -->
-          <div class="guide-box">
-            <h4 class="guide-title">达成度分析</h4>
-            <ul class="guide-menus">
-              <li class="guide-menu">设置培养方案</li>
-              <li class="guide-menu">设置课程目标</li>
-              <li class="guide-menu">设置课程考核方式权重</li>
-              <li class="guide-menu">导入平时成绩 / 期末成绩</li>
-              <li class="guide-menu">查看报告</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import shortcutData from "../constants/shortcutData";
-import { auditedTaskCount } from "../modules/exam/api";
-import { userSysRoles } from "../modules/stmms/api";
-import WaitTask from "../modules/exam/views/WaitTask.vue";
-
-export default {
-  name: "home-page",
-  components: {
-    WaitTask,
-  },
-  data() {
-    return {
-      summary: {
-        waitTaskCount: 0,
-        doneTaskCount: 0,
-      },
-      shortcutList: [],
-      taskList: [[], [], []],
-      waitTaskList: [],
-      waitTaskFilter: {
-        pageNumber: 1,
-        pageSize: 2,
-      },
-      typeNames: {
-        flow: "流程",
-        stmms: "阅卷",
-        analysis: "教研",
-      },
-    };
-  },
-  computed: {
-    ...mapState(["privilegeMap"]),
-    ...mapState("exam", ["waitTaskCount", "waitTypes"]),
-  },
-  created() {
-    this.initShortcutList();
-  },
-  methods: {
-    ...mapActions("exam", ["updateWaitTaskCount"]),
-    async initShortcutList() {
-      const validRouters = Object.keys(this.privilegeMap);
-      let validShortcutData = shortcutData
-        .filter((item) => validRouters.includes(item.router))
-        .map((item) => {
-          return {
-            ...item,
-          };
-        });
-
-      const roleSource = this.$ls.get("user", {
-        roleSource: [],
-      }).roleSource;
-
-      // 阅卷角色查询
-      if (validRouters.includes("MarkerLogin")) {
-        const markerRoles = await userSysRoles();
-        validShortcutData = validShortcutData.filter(
-          (item) =>
-            item.router !== "MarkerLogin" ||
-            (item.router === "MarkerLogin" &&
-              markerRoles.includes(item.params.trigger))
-        );
-      }
-
-      // 报告角色查询
-      if (validRouters.includes("AnalysisReportView")) {
-        const analysisRoles = roleSource.filter(
-          (item) => item.roleSource === "ANALYSIS"
-        );
-        validShortcutData = validShortcutData.filter(
-          (item) =>
-            item.router !== "AnalysisReportView" ||
-            (item.router === "AnalysisReportView" &&
-              analysisRoles.includes(item.params.trigger))
-        );
-      }
-
-      this.shortcutList = validShortcutData;
-
-      // 代办任务判断
-      this.getWaitTaskData();
-    },
-    async getWaitTaskData() {
-      const doneTaskCount = await auditedTaskCount();
-      this.summary.doneTaskCount = doneTaskCount || 0;
-      await this.updateWaitTaskCount();
-      this.summary.waitTaskCount = this.waitTaskCount;
-    },
-    toMenu(item) {
-      this.$router.push({
-        name: item.router,
-        query: item.params,
-      });
-    },
-  },
-};
-</script>

+ 439 - 0
src/views/home-page/HomeGuide.vue

@@ -0,0 +1,439 @@
+<template>
+  <div class="home-guide">
+    <!-- 命题组卷 -->
+    <div class="guide-group">
+      <div class="guide-box">
+        <h4 class="guide-title">命题组卷</h4>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('createQuestion'),
+              'is-link': checkIsLink('createQuestion'),
+            }"
+            @click="guideLink('createQuestion')"
+          >
+            试题录入
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('createPaper'),
+              'is-link': checkIsLink('createPaper'),
+            }"
+            @click="guideLink('createPaper')"
+          >
+            组卷
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('buildPaper'),
+              'is-link': checkIsLink('buildPaper'),
+            }"
+            @click="guideLink('buildPaper')"
+          >
+            生成试卷
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 电子交卷 -->
+    <div class="guide-group">
+      <div class="guide-box">
+        <h4 class="guide-title">电子交卷</h4>
+        <p class="guide-desc">提交命题任务</p>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('uploadPaper'),
+              'is-link': checkIsLink('uploadPaper'),
+            }"
+            @click="guideLink('uploadPaper')"
+          >
+            选择/上传试卷
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('createCard'),
+              'is-link': checkIsLink('createCard'),
+            }"
+            @click="guideLink('createCard')"
+          >
+            选择通卡/设计答题卡
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('selectApproveUser'),
+              'is-link': checkIsLink('selectApproveUser'),
+            }"
+            @click="guideLink('selectApproveUser')"
+          >
+            选择审核人提交
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 印刷&扫描 -->
+    <div class="guide-group">
+      <div class="guide-box">
+        <h4 class="guide-title">印刷&扫描</h4>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('print'),
+              'is-link': checkIsLink('print'),
+            }"
+          >
+            印刷
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('cardScan'),
+              'is-link': checkIsLink('cardScan'),
+            }"
+          >
+            答题卡扫描
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- 评卷管理 -->
+    <div class="guide-group">
+      <div class="guide-box">
+        <h4 class="guide-title">评卷管理</h4>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('markSetting'),
+              'is-link': checkIsLink('markSetting'),
+            }"
+            @click="guideLink('markSetting')"
+          >
+            评卷参数设置
+          </li>
+        </ul>
+        <p class="guide-desc">评卷过程管理</p>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('markProgress'),
+              'is-link': checkIsLink('markProgress'),
+            }"
+            @click="guideLink('markProgress')"
+          >
+            评卷进度
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('markTaskDetail'),
+              'is-link': checkIsLink('markTaskDetail'),
+            }"
+            @click="guideLink('markTaskDetail')"
+          >
+            已评任务查看
+          </li>
+        </ul>
+        <p class="guide-desc">成绩检查</p>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('scoreCheck'),
+              'is-link': checkIsLink('scoreCheck'),
+            }"
+            @click="guideLink('scoreCheck')"
+          >
+            复核
+          </li>
+        </ul>
+        <p class="guide-desc">结束评卷</p>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('markResultCheck'),
+              'is-link': checkIsLink('markResultCheck'),
+            }"
+          >
+            数据检查
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('overMark'),
+              'is-link': checkIsLink('overMark'),
+            }"
+            @click="guideLink('overMark')"
+          >
+            结束评卷
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- 归档&成绩导出 -->
+    <div class="guide-group">
+      <div class="guide-box">
+        <h4 class="guide-title">归档&成绩导出</h4>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('scoreView'),
+              'is-link': checkIsLink('scoreView'),
+            }"
+            @click="guideLink('scoreView')"
+          >
+            查看成绩
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('reportView'),
+              'is-link': checkIsLink('reportView'),
+            }"
+            @click="guideLink('reportView')"
+          >
+            查看成绩报告
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('exportScore'),
+              'is-link': checkIsLink('exportScore'),
+            }"
+            @click="guideLink('exportScore')"
+          >
+            导出成绩
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="guide-group">
+      <div class="guide-line-top"></div>
+      <div class="guide-line-bottom"></div>
+      <!-- 教研分析 -->
+      <div class="guide-box">
+        <h4 class="guide-title">教研分析</h4>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('setAnalysisBlue'),
+              'is-link': checkIsLink('setAnalysisBlue'),
+            }"
+            @click="guideLink('setAnalysisBlue')"
+          >
+            设置试卷蓝图数据
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('analysisReport'),
+              'is-link': checkIsLink('analysisReport'),
+            }"
+            @click="guideLink('analysisReport')"
+          >
+            查看报告
+          </li>
+        </ul>
+      </div>
+      <!-- 达成度分析 -->
+      <div class="guide-box">
+        <h4 class="guide-title">达成度分析</h4>
+        <ul class="guide-menus">
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('trainingPlan'),
+              'is-link': checkIsLink('trainingPlan'),
+            }"
+            @click="guideLink('trainingPlan')"
+          >
+            设置培养方案
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('courseTarget'),
+              'is-link': checkIsLink('courseTarget'),
+            }"
+            @click="guideLink('courseTarget')"
+          >
+            设置课程目标
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('evaluationMode'),
+              'is-link': checkIsLink('evaluationMode'),
+            }"
+            @click="guideLink('evaluationMode')"
+          >
+            设置课程考核方式权重
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('targetScore'),
+              'is-link': checkIsLink('targetScore'),
+            }"
+            @click="guideLink('targetScore')"
+          >
+            导入平时成绩 / 期末成绩
+          </li>
+          <li
+            :class="{
+              'is-diabled': !guideAuthentic('targetStatistics'),
+              'is-link': checkIsLink('targetStatistics'),
+            }"
+            @click="guideLink('targetStatistics')"
+          >
+            查看报告
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { objTypeOf } from "@/plugins/utils";
+import { mapState } from "vuex";
+
+export default {
+  name: "home-guide",
+  data() {
+    return {
+      guidePriviledges: {
+        // 命题组卷 -----
+        // 试题录入
+        createQuestion: {
+          // 去题库
+        },
+        // 组卷
+        createPaper: {},
+        // 生成试卷
+        buildPaper: {},
+
+        // 电子交卷 -----
+        // 选择/上传试卷
+        uploadPaper: {
+          authentic: "ExamTaskManage",
+          toLink: "ExamTaskManage",
+        },
+        // 选择通卡/设计答题卡
+        createCard: {
+          authentic: "ExamTaskManage",
+          toLink: "ExamTaskManage",
+        },
+        // 选择审核人提交
+        selectApproveUser: {
+          authentic: "ExamTaskManage",
+          toLink: "ExamTaskManage",
+        },
+
+        // 印刷&扫描 -----
+        // 印刷
+        print: {},
+        // 答题卡扫描
+        cardScan: {},
+
+        // 评卷管理 -----
+        // 评卷参数设置
+        markSetting: { authentic: "MarkSetting", toLink: "MarkSetting" },
+        // 评卷进度
+        markProgress: {
+          authentic: "MarkManage",
+          toLink: "MarkManage",
+        },
+        // 已评任务查看
+        markTaskDetail: { authentic: "MarkManage", toLink: "MarkManage" },
+        // 复核
+        scoreCheck: { authentic: "ScoreCheck", toLink: "ScoreCheck" },
+        // 数据检查
+        markResultCheck: {},
+        // 结束评卷
+        overMark: { authentic: "MarkManage", toLink: "MarkManage" },
+
+        // 归档&成绩导出 ----
+        // 查看成绩
+        scoreView: { authentic: "ScoreManage", toLink: "ScoreManage" },
+        // 查看成绩报告
+        reportView: { authentic: "ScoreManage", toLink: "ScoreManage" },
+        // 导出成绩
+        exportScore: { authentic: "ScoreManage", toLink: "ScoreManage" },
+
+        // 教研分析 ----
+        // 设置试卷蓝图数据
+        setAnalysisBlue: {
+          authentic: "DataInitManage",
+          toLink: "DataInitManage",
+        },
+        // 查看报告
+        analysisReport: {
+          authentic: "AnalysisReportView",
+          toLink: "AnalysisReportView",
+        },
+
+        // 达成度分析 ----
+        // 设置培养方案
+        trainingPlan: { authentic: "CultureProgram", toLink: "CultureProgram" },
+        // 设置课程目标
+        courseTarget: {
+          authentic: "CourseOutlineManager",
+          toLink: "CourseOutlineManager",
+        },
+        // 设置课程考核方式权重
+        evaluationMode: {
+          authentic: "CourseAssessmentSetting",
+          toLink: "CourseAssessmentSetting",
+        },
+        // 导入平时成绩/期末成绩
+        targetScore: {
+          authentic: "TargetScoreManage",
+          toLink: "TargetScoreManage",
+        },
+        // 查看报告
+        targetStatistics: {
+          authentic: "GraduationRequirement",
+          toLink: "GraduationRequirement",
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState(["privilegeMap"]),
+    validRouters() {
+      return Object.keys(this.privilegeMap);
+    },
+  },
+  methods: {
+    checkIsLink(key) {
+      return this.guidePriviledges[key] && this.guidePriviledges[key].toLink;
+    },
+    guideAuthentic(key) {
+      if (!this.guidePriviledges[key]) return false;
+
+      const { authentic } = this.guidePriviledges[key];
+
+      if (!authentic) return false;
+
+      if (objTypeOf(authentic) === "function") {
+        return authentic();
+      }
+
+      if (objTypeOf(authentic) === "string") {
+        return this.validRouters.includes(authentic);
+      }
+
+      return false;
+    },
+    guideLink(key) {
+      if (!this.guidePriviledges[key] || !this.guideAuthentic(key)) return;
+
+      const { toLink, params } = this.guidePriviledges[key];
+
+      if (!toLink) return;
+
+      if (objTypeOf(toLink) === "function") {
+        toLink();
+        return;
+      }
+
+      if (objTypeOf(toLink) === "string") {
+        this.$router.push({ name: toLink, query: params || {} });
+        return;
+      }
+    },
+  },
+};
+</script>

+ 70 - 0
src/views/home-page/HomePage.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="home-page">
+    <div class="hp-top">
+      <div class="hp-top-left">
+        <div class="tab-summary-item item-wait">
+          <h4 class="tab-summary-title">待办任务</h4>
+          <div class="tab-summary-content">
+            <i class="icon icon-wait-task"></i>
+            <span class="tab-summary-cont">{{ summary.waitTaskCount }}</span>
+          </div>
+        </div>
+
+        <div class="tab-summary-item item-done">
+          <h4 class="tab-summary-title">已办任务</h4>
+          <div class="tab-summary-content">
+            <i class="icon icon-done-task"></i>
+            <span class="tab-summary-cont">{{ summary.doneTaskCount }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="hp-top-right hp-task">
+        <wait-task></wait-task>
+      </div>
+    </div>
+
+    <div class="tab-box tab-guide">
+      <h2 class="tab-box-title">业务引导</h2>
+      <home-guide class="tab-box-body"></home-guide>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import { auditedTaskCount } from "@/modules/exam/api";
+import WaitTask from "@/modules/exam/views/WaitTask.vue";
+import HomeGuide from "./HomeGuide.vue";
+
+export default {
+  name: "home-page",
+  components: {
+    WaitTask,
+    HomeGuide,
+  },
+  data() {
+    return {
+      summary: {
+        waitTaskCount: 0,
+        doneTaskCount: 0,
+      },
+    };
+  },
+  computed: {
+    ...mapState(["privilegeMap"]),
+    ...mapState("exam", ["waitTaskCount"]),
+  },
+  created() {
+    this.getWaitTaskData();
+  },
+  methods: {
+    ...mapActions("exam", ["updateWaitTaskCount"]),
+    async getWaitTaskData() {
+      const doneTaskCount = await auditedTaskCount();
+      this.summary.doneTaskCount = doneTaskCount || 0;
+      await this.updateWaitTaskCount();
+      this.summary.waitTaskCount = this.waitTaskCount;
+    },
+  },
+};
+</script>