feat(table): sum

app/project/detail/OwnTaskTableContainer.tsx

@@ -38,6 +38,31 @@ import { useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import TaskStatusTag from "./components/TaskStatusTag"
 
+const EMPTY_TASK_SIZE: Task.SizeProps = Object.freeze({
+  object_size: 0,
+  valid_size: 0,
+  first_comment_size: 0,
+  second_comment_size: 0,
+  new_size: 0,
+  prelabel_size: 0,
+  prelabel_modify_size: 0,
+  dynamic_size: 0,
+  static_size: 0,
+  review_size: 0,
+  review_dynamic_size: 0,
+  review_static_size: 0,
+  key_frame_size: 0,
+  question_size: 0,
+  total_qa_group_size: 0,
+  single_qa_group_size: 0,
+  multiple_qa_group_size: 0,
+  new_qa_group_size: 0,
+  new_single_qa_group_size: 0,
+  new_multiple_qa_group_size: 0,
+  review_question_size: 0,
+  comment_question_size: 0,
+})
+
 function createInitialFilters() {
   return {
     search_id: "",
@@ -67,6 +92,7 @@ export default function OwnTaskTableContainer(props: {
   const user_id = usePermissionStore((s) => s.user_id)
 
   const [total, setTotal] = useState(0)
+  const [totalSize, setTotalSize] = useState<Task.SizeProps>(EMPTY_TASK_SIZE)
 
   const [pageNumber, setPageNumber] = useState(1)
   const [pageSize, setPageSize] = useState(15)
@@ -130,9 +156,11 @@ export default function OwnTaskTableContainer(props: {
       const res = await getTaskList(appliedParams)
       setRecords(res?.task_list ?? [])
       setTotal(res?.total_items ?? 0)
+      setTotalSize(res?.total_size ?? EMPTY_TASK_SIZE)
     } catch (e) {
       setRecords([])
       setTotal(0)
+      setTotalSize(EMPTY_TASK_SIZE)
       notifications.show({
         color: "red",
         title: "加载失败",
@@ -201,6 +229,7 @@ export default function OwnTaskTableContainer(props: {
         accessor: "id",
         title: "任务ID",
         width: 100,
+        footer: "总计",
         render: (record) => (
           <Button
             variant="transparent"
@@ -243,30 +272,35 @@ export default function OwnTaskTableContainer(props: {
         accessor: "label_object_size.object_size",
         title: "对象总数",
         width: 110,
+        footer: totalSize.object_size,
         render: (record) => record.label_object_size?.object_size ?? "-",
       },
       {
         accessor: "label_object_size.valid_size",
         title: "有效数",
         width: 100,
+        footer: totalSize.valid_size,
         render: (record) => record.label_object_size?.valid_size ?? "-",
       },
       {
         accessor: "label_object_size.new_size",
         title: "新增数",
         width: 100,
+        footer: totalSize.new_size,
         render: (record) => record.label_object_size?.new_size ?? "-",
       },
       {
         accessor: "label_object_size.prelabel_size",
         title: "预标注总数",
         width: 120,
+        footer: totalSize.prelabel_size,
         render: (record) => record.label_object_size?.prelabel_size ?? "-",
       },
       {
         accessor: "label_object_size.prelabel_modify_size",
         title: "预标注修改数",
         width: 130,
+        footer: totalSize.prelabel_modify_size,
         render: (record) =>
           record.label_object_size?.prelabel_modify_size ?? "-",
       },
@@ -274,18 +308,20 @@ export default function OwnTaskTableContainer(props: {
         accessor: "label_object_size.first_comment_size",
         title: "批注一轮",
         width: 110,
+        footer: totalSize.first_comment_size,
         render: (record) => record.label_object_size?.first_comment_size ?? "-",
       },
       {
         accessor: "label_object_size.second_comment_size",
         title: "批注二轮",
         width: 110,
+        footer: totalSize.second_comment_size,
         render: (record) =>
           record.label_object_size?.second_comment_size ?? "-",
       },
     ]
     return cols
-  }, [info, projectId, router, setBackProps, type])
+  }, [info, projectId, router, setBackProps, totalSize, type])
 
   return (
     <Stack gap="sm" style={{ flex: 1, minHeight: 0 }}>

app/project/detail/TaskTableContainer.tsx

@@ -122,6 +122,31 @@ const SORTABLE_TASK_SIZE_COLUMNS: Array<{
   { accessor: "second_comment_size", title: "批注数(2)", width: 120 },
 ]
 
+const EMPTY_TASK_SIZE: Task.SizeProps = Object.freeze({
+  object_size: 0,
+  valid_size: 0,
+  first_comment_size: 0,
+  second_comment_size: 0,
+  new_size: 0,
+  prelabel_size: 0,
+  prelabel_modify_size: 0,
+  dynamic_size: 0,
+  static_size: 0,
+  review_size: 0,
+  review_dynamic_size: 0,
+  review_static_size: 0,
+  key_frame_size: 0,
+  question_size: 0,
+  total_qa_group_size: 0,
+  single_qa_group_size: 0,
+  multiple_qa_group_size: 0,
+  new_qa_group_size: 0,
+  new_single_qa_group_size: 0,
+  new_multiple_qa_group_size: 0,
+  review_question_size: 0,
+  comment_question_size: 0,
+})
+
 export interface selectedDataProps {
   status: number
   uid: number | null
@@ -195,6 +220,7 @@ export default function TaskTableContainer(props: {
   const { setBackProps } = useBackUrlStore()
 
   const [total, setTotal] = useState(0)
+  const [totalSize, setTotalSize] = useState<Task.SizeProps>(EMPTY_TASK_SIZE)
 
   const [pageNumber, setPageNumber] = useState(1)
   const [pageSize, setPageSize] = useState(15)
@@ -324,9 +350,11 @@ export default function TaskTableContainer(props: {
       const res = await getTaskList(appliedParams)
       setRecords(res?.task_list ?? [])
       setTotal(res?.total_items ?? 0)
+      setTotalSize(res?.total_size ?? EMPTY_TASK_SIZE)
     } catch (e) {
       setRecords([])
       setTotal(0)
+      setTotalSize(EMPTY_TASK_SIZE)
       notifications.show({
         color: "red",
         title: "加载失败",
@@ -621,6 +649,7 @@ export default function TaskTableContainer(props: {
       width,
       sortable: true,
       render: (record) => record.label_object_size?.[accessor] ?? "-",
+      footer: totalSize[accessor] ?? 0,
     })
 
     const cols: DataTableColumn<Task.DataProps>[] = [
@@ -628,6 +657,7 @@ export default function TaskTableContainer(props: {
         accessor: "id",
         title: "任务ID",
         width: 90,
+        footer: "总计",
         render: (record) => (
           <Button
             variant="transparent"
@@ -805,7 +835,15 @@ export default function TaskTableContainer(props: {
       },
     ]
     return cols
-  }, [hasRolePermissions, info, projectId, router, setBackProps, type])
+  }, [
+    hasRolePermissions,
+    info,
+    projectId,
+    router,
+    setBackProps,
+    totalSize,
+    type,
+  ])
 
   return (
     <>