chore: 大赛监控页面性能优化

src/modules/admin/contest/dashboard/views/Index.vue

@@ -66,6 +66,15 @@ async function fetchStatistics(competition_id: string, platform_key = 'career_da
 }
 
 const competitorsList = ref([])
+const competitorsTableData = computed(() => {
+  return competitorsList.value.map((row: any) => {
+    const commit_time = dayjs.unix(row.commit_time).format('YYYY-MM-DD HH:mm:ss')
+    const timestamp = (row.commit_time * 1000 || Date.now()) - row.start_answer_time * 1000
+    const dur = dayjs.duration(timestamp)
+    const answer_time = dur.hours() === 0 ? dur.format("m[']s") : dur.format("H[h]m[']s")
+    return { ...row, commit_time, answer_time }
+  })
+})
 async function fetchCompetitors(competition_id: string, platform_key = 'career_data_analysis') {
   const res = await getCompetitionCompetitors({ competition_id, platform_key })
   competitorsList.value = res.data.items
@@ -75,8 +84,7 @@ watchEffect(() => {
   fetchInfo()
 })
 //  已提交选手
-const submittedListOptions = computed(() => {
-  return {
+const submittedListOptions = {
   columns: [
     { label: '序号', type: 'index', width: 60 },
     { label: '选手姓名', prop: 'student.name' },
@@ -84,29 +92,15 @@ const submittedListOptions = computed(() => {
     { label: '所在学校', prop: 'student.organ_name' },
     { label: '所在专业', prop: 'student.specialty_name' },
     { label: '所在班级', prop: 'student.class_name' },
-      {
-        label: '提交时间',
-        prop: 'commit_time',
-        computed({ row }: { row: any }) {
-          return dayjs.unix(row.commit_time).format('YYYY-MM-DD HH:mm:ss')
-        }
-      },
-      {
-        label: '作答用时',
-        prop: 'commit_time',
-        computed({ row }: { row: any }) {
-          const timestamp = (row.commit_time * 1000 || useNow().value.getTime()) - row.start_answer_time * 1000
-          const duration = dayjs.duration(timestamp)
-          return duration.hours() === 0 ? duration.format("m[']s") : duration.format("H[h]m[']s")
-        }
-      }
-    ],
-    data: competitorsList.value.filter((item: any) => item.commit_status == 3)
-  }
+    { label: '提交时间', prop: 'commit_time' },
+    { label: '作答用时', prop: 'answer_time' }
+  ]
+}
+const submittedLis = computed(() => {
+  return competitorsTableData.value.filter((item: any) => item.commit_status == 3)
 })
 // 正在作答选手
-const answeringListOptions = computed(() => {
-  return {
+const answeringListOptions = {
   columns: [
     { label: '序号', type: 'index', width: 60 },
     { label: '选手姓名', prop: 'student.name' },
@@ -116,28 +110,20 @@ const answeringListOptions = computed(() => {
     { label: '所在班级', prop: 'student.class_name' },
     {
       label: '提交时间',
-        prop: 'commit_time',
-        computed({ row }: { row: any }) {
-          return dayjs.unix(row.commit_time).format('YYYY-MM-DD HH:mm:ss')
-        }
+      prop: 'commit_time'
     },
     {
       label: '作答用时',
-        prop: 'commit_time',
-        computed({ row }: { row: any }) {
-          const timestamp = (row.commit_time * 1000 || useNow().value.getTime()) - row.start_answer_time * 1000
-          const duration = dayjs.duration(timestamp)
-          return duration.hours() === 0 ? duration.format("m[']s") : duration.format("H[h]m[']s")
-        }
-      }
-    ],
-    data: competitorsList.value.filter((item: any) => item.commit_status == 2 || item.commit_status == 4)
+      prop: 'answer_time'
     }
+  ]
+}
+const answeringList = computed(() => {
+  return competitorsTableData.value.filter((item: any) => item.commit_status == 2 || item.commit_status == 4)
 })
 
 // 选手答题情况
-const listOptions = computed(() => {
-  return {
+const listOptions = {
   columns: [
     { label: '序号', type: 'index', width: 60 },
     { label: '选手姓名', prop: 'student.name' },
@@ -188,10 +174,8 @@ const listOptions = computed(() => {
         return getModuleStatus(row, 5)
       }
     }
-    ],
-    data: competitorsList.value
-  }
-})
+  ]
+}
 function getModuleStatus(row: any, index: number) {
   try {
     const [first] = JSON.parse(row.module_status_data) || []
@@ -245,15 +229,15 @@ function getModuleStatus(row: any, index: number) {
     <el-row :gutter="20">
       <el-col :span="12">
         <h2 class="h2-title">已提交选手</h2>
-        <AppList border v-bind="submittedListOptions" ref="appList"></AppList
+        <AppList border v-bind="submittedListOptions" :data="submittedLis" ref="appList"></AppList
       ></el-col>
       <el-col :span="12">
         <h2 class="h2-title">正在作答选手</h2>
-        <AppList border v-bind="answeringListOptions" ref="appList"></AppList
+        <AppList border v-bind="answeringListOptions" :data="answeringList" ref="appList"></AppList
       ></el-col>
     </el-row>
     <h2 class="h2-title">选手答题情况</h2>
-    <AppList border v-bind="listOptions" ref="appList"></AppList>
+    <AppList border v-bind="listOptions" :data="competitorsTableData" ref="appList"></AppList>
   </AppCard>
 </template>