146 lines
4.1 KiB
TypeScript
146 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { getCurrentPersonData } from "@/components/label/api/project"
|
|
import { formatWorkTimeHoursMinutes } from "@/components/label/utils/time"
|
|
import {
|
|
SettingContentPanel,
|
|
SettingPage,
|
|
SettingPanel,
|
|
} from "@/components/setting/PageSurface"
|
|
import { Stack, Text } from "@mantine/core"
|
|
import dayjs from "dayjs"
|
|
import { useEffect, useMemo, useState } from "react"
|
|
import PersonalProjectTable from "./components/PersonalProjectTable"
|
|
import PersonalTaskTable from "./components/PersonalTaskTable"
|
|
import classes from "./page.module.css"
|
|
|
|
function monthText(month: string) {
|
|
const list = [
|
|
"一月",
|
|
"二月",
|
|
"三月",
|
|
"四月",
|
|
"五月",
|
|
"六月",
|
|
"七月",
|
|
"八月",
|
|
"九月",
|
|
"十月",
|
|
"十一月",
|
|
"十二月",
|
|
]
|
|
const idx = Number(month) - 1
|
|
return list[idx] ?? ""
|
|
}
|
|
|
|
export default function PersonDashboardPage() {
|
|
const [data, setData] = useState<{
|
|
label_data_size: number
|
|
label_work_time: number
|
|
review1_data_size: number
|
|
review1_work_time: number
|
|
review2_data_size: number
|
|
review2_work_time: number
|
|
} | null>(null)
|
|
|
|
useEffect(() => {
|
|
const run = async () => {
|
|
const res = await getCurrentPersonData({
|
|
date: dayjs().format("YYYY-MM-DD"),
|
|
})
|
|
setData(res)
|
|
}
|
|
run()
|
|
}, [])
|
|
|
|
const dataText = useMemo(() => {
|
|
return {
|
|
label: formatWorkTimeHoursMinutes(data?.label_work_time ?? 0),
|
|
review1: formatWorkTimeHoursMinutes(data?.review1_work_time ?? 0),
|
|
review2: formatWorkTimeHoursMinutes(data?.review2_work_time ?? 0),
|
|
}
|
|
}, [data])
|
|
|
|
const summaryItems = useMemo(
|
|
() => [
|
|
{
|
|
title: "标注工时",
|
|
value: dataText.label,
|
|
metaLabel: "标注数据量",
|
|
metaValue: data?.label_data_size ?? 0,
|
|
},
|
|
{
|
|
title: "审核工时",
|
|
value: dataText.review1,
|
|
metaLabel: "审核数据量",
|
|
metaValue: data?.review1_data_size ?? 0,
|
|
},
|
|
{
|
|
title: "复审工时",
|
|
value: dataText.review2,
|
|
metaLabel: "复审数据量",
|
|
metaValue: data?.review2_data_size ?? 0,
|
|
},
|
|
],
|
|
[
|
|
data?.label_data_size,
|
|
data?.review1_data_size,
|
|
data?.review2_data_size,
|
|
dataText,
|
|
]
|
|
)
|
|
|
|
return (
|
|
<SettingPage>
|
|
<Stack className={classes.pageIntro}>
|
|
<Text className={classes.breadcrumb}>
|
|
个人中心 / <span className={classes.breadcrumbCurrent}>个人看板</span>
|
|
</Text>
|
|
</Stack>
|
|
|
|
<SettingPanel p={0}>
|
|
<div className={classes.summaryGrid}>
|
|
<div className={classes.summaryDateCell}>
|
|
<Text className={classes.summaryDateLabel}>今日</Text>
|
|
<Text className={classes.summaryDateValue}>
|
|
{dayjs().format("DD")}
|
|
</Text>
|
|
<Text className={classes.summaryDateMeta}>
|
|
{monthText(dayjs().format("MM"))} · {dayjs().format("YYYY")}
|
|
</Text>
|
|
</div>
|
|
|
|
{summaryItems.map((item) => (
|
|
<div key={item.title} className={classes.summaryMetricCell}>
|
|
<Text className={classes.summaryMetricLabel}>{item.title}</Text>
|
|
<Text className={classes.summaryMetricValue}>{item.value}</Text>
|
|
<div className={classes.summaryMetricMeta}>
|
|
<Text className={classes.summaryMetricMetaLabel}>
|
|
{item.metaLabel}
|
|
</Text>
|
|
<Text className={classes.summaryMetricMetaValue}>
|
|
{item.metaValue}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</SettingPanel>
|
|
|
|
<div className={classes.tableGrid}>
|
|
<SettingContentPanel p={0} className={classes.dashboardPanel}>
|
|
<div className={classes.dashboardPanelBody}>
|
|
<PersonalTaskTable />
|
|
</div>
|
|
</SettingContentPanel>
|
|
|
|
<SettingContentPanel p={0} className={classes.dashboardPanel}>
|
|
<div className={classes.dashboardPanelBody}>
|
|
<PersonalProjectTable />
|
|
</div>
|
|
</SettingContentPanel>
|
|
</div>
|
|
</SettingPage>
|
|
)
|
|
}
|