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,123 +84,98 @@ watchEffect(() => {
   fetchInfo()
 })
 //  已提交选手
-const submittedListOptions = computed(() => {
-  return {
-    columns: [
-      { label: '序号', type: 'index', width: 60 },
-      { label: '选手姓名', prop: 'student.name' },
-      { label: '参赛ID', prop: 'login_id' },
-      { 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)
-  }
+const submittedListOptions = {
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '选手姓名', prop: 'student.name' },
+    { label: '参赛ID', prop: 'login_id' },
+    { label: '所在学校', prop: 'student.organ_name' },
+    { label: '所在专业', prop: 'student.specialty_name' },
+    { label: '所在班级', prop: 'student.class_name' },
+    { 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 {
-    columns: [
-      { label: '序号', type: 'index', width: 60 },
-      { label: '选手姓名', prop: 'student.name' },
-      { label: '参赛ID', prop: 'login_id' },
-      { 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 == 2 || item.commit_status == 4)
-  }
+const answeringListOptions = {
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '选手姓名', prop: 'student.name' },
+    { label: '参赛ID', prop: 'login_id' },
+    { label: '所在学校', prop: 'student.organ_name' },
+    { label: '所在专业', prop: 'student.specialty_name' },
+    { label: '所在班级', prop: 'student.class_name' },
+    {
+      label: '提交时间',
+      prop: 'commit_time'
+    },
+    {
+      label: '作答用时',
+      prop: 'answer_time'
+    }
+  ]
+}
+const answeringList = computed(() => {
+  return competitorsTableData.value.filter((item: any) => item.commit_status == 2 || item.commit_status == 4)
 })
 
 // 选手答题情况
-const listOptions = computed(() => {
-  return {
-    columns: [
-      { label: '序号', type: 'index', width: 60 },
-      { label: '选手姓名', prop: 'student.name' },
-      { label: '参赛ID', prop: 'login_id' },
-      { label: '性别', prop: 'student.gender' },
-      { label: '所在学校', prop: 'student.organ_name' },
-      { label: '所在专业', prop: 'student.specialty_name' },
-      { label: '所在班级', prop: 'student.class_name' },
-      {
-        label: '模块一',
-        prop: 'module_1',
-        computed({ row }: { row: any }) {
-          return getModuleStatus(row, 0)
-        }
-      },
-      {
-        label: '模块二',
-        prop: 'module_2',
-        computed({ row }: { row: any }) {
-          return getModuleStatus(row, 1)
-        }
-      },
-      {
-        label: '模块三',
-        prop: 'module_3',
-        computed({ row }: { row: any }) {
-          return getModuleStatus(row, 2)
-        }
-      },
-      {
-        label: '模块四',
-        prop: 'module_4',
-        computed({ row }: { row: any }) {
-          return getModuleStatus(row, 3)
-        }
-      },
-      {
-        label: '模块五',
-        prop: 'module_5',
-        computed({ row }: { row: any }) {
-          return getModuleStatus(row, 4)
-        }
-      },
-      {
-        label: '模块六',
-        prop: 'module_6',
-        computed({ row }: { row: any }) {
-          return getModuleStatus(row, 5)
-        }
+const listOptions = {
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '选手姓名', prop: 'student.name' },
+    { label: '参赛ID', prop: 'login_id' },
+    { label: '性别', prop: 'student.gender' },
+    { label: '所在学校', prop: 'student.organ_name' },
+    { label: '所在专业', prop: 'student.specialty_name' },
+    { label: '所在班级', prop: 'student.class_name' },
+    {
+      label: '模块一',
+      prop: 'module_1',
+      computed({ row }: { row: any }) {
+        return getModuleStatus(row, 0)
       }
-    ],
-    data: competitorsList.value
-  }
-})
+    },
+    {
+      label: '模块二',
+      prop: 'module_2',
+      computed({ row }: { row: any }) {
+        return getModuleStatus(row, 1)
+      }
+    },
+    {
+      label: '模块三',
+      prop: 'module_3',
+      computed({ row }: { row: any }) {
+        return getModuleStatus(row, 2)
+      }
+    },
+    {
+      label: '模块四',
+      prop: 'module_4',
+      computed({ row }: { row: any }) {
+        return getModuleStatus(row, 3)
+      }
+    },
+    {
+      label: '模块五',
+      prop: 'module_5',
+      computed({ row }: { row: any }) {
+        return getModuleStatus(row, 4)
+      }
+    },
+    {
+      label: '模块六',
+      prop: 'module_6',
+      computed({ row }: { row: any }) {
+        return getModuleStatus(row, 5)
+      }
+    }
+  ]
+}
 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>