From f5ad3a4eb2bbcc70039295898e0796b3f7869cce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Wed, 19 Apr 2023 11:17:19 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E5=91=98=E5=AD=A6=E4=B9=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/user.ts | 30 +++ src/pages/member/index.tsx | 17 +- src/pages/member/learn.module.less | 15 ++ src/pages/member/learn.tsx | 320 +++++++++++++++++++++++++++++ src/routes/index.tsx | 7 +- 5 files changed, 387 insertions(+), 2 deletions(-) create mode 100644 src/pages/member/learn.module.less create mode 100644 src/pages/member/learn.tsx diff --git a/src/api/user.ts b/src/api/user.ts index 169dd87..27682c9 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -78,3 +78,33 @@ export function storeBatch(startLine: number, users: string[][]) { users: users, }); } + +export function learnStats(id: number) { + return client.get(`/backend/v1/user/${id}/learn-stats`, {}); +} + +export function learnHours( + id: number, + page: number, + size: number, + params: object +) { + return client.get(`/backend/v1/user/${id}/learn-hours`, { + page, + size, + ...params, + }); +} + +export function learnCourses( + id: number, + page: number, + size: number, + params: object +) { + return client.get(`/backend/v1/user/${id}/learn-courses`, { + page, + size, + ...params, + }); +} diff --git a/src/pages/member/index.tsx b/src/pages/member/index.tsx index 9e60c1b..be3b66e 100644 --- a/src/pages/member/index.tsx +++ b/src/pages/member/index.tsx @@ -14,7 +14,7 @@ import type { ColumnsType } from "antd/es/table"; import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons"; import { user } from "../../api/index"; import { dateFormat } from "../../utils/index"; -import { Link } from "react-router-dom"; +import { Link, Navigate } from "react-router-dom"; import { TreeDepartment, PerButton } from "../../compenents"; import { MemberCreate } from "./compenents/create"; import { MemberUpdate } from "./compenents/update"; @@ -99,6 +99,21 @@ const MemberPage = () => { width: 160, render: (_, record: any) => ( + + null} + disabled={null} + /> + +
{ + let chartRef = useRef(null); + const result = new URLSearchParams(useLocation().search); + const [loading, setLoading] = useState(false); + const [page, setPage] = useState(1); + const [size, setSize] = useState(10); + const [list, setList] = useState([]); + const [hours, setHours] = useState({}); + const [total, setTotal] = useState(0); + const [refresh, setRefresh] = useState(false); + const [loading2, setLoading2] = useState(false); + const [page2, setPage2] = useState(1); + const [size2, setSize2] = useState(10); + const [list2, setList2] = useState([]); + const [courses, setCourses] = useState({}); + const [total2, setTotal2] = useState(0); + const [refresh2, setRefresh2] = useState(false); + const [uid, setUid] = useState(Number(result.get("id"))); + + useEffect(() => { + getZxtData(); + return () => { + window.onresize = null; + }; + }, [uid]); + + useEffect(() => { + getLearnHours(); + }, [refresh, page, size]); + + useEffect(() => { + getLearnCourses(); + }, [refresh2, page2, size2]); + + const getZxtData = () => { + member.learnStats(uid).then((res: any) => { + renderView(res.data); + }); + }; + + const renderView = (params: any) => { + const timeData: any = []; + const valueData: any = []; + params.map((item: any) => { + timeData.push(item.key); + valueData.push(item.value / 1000); + }); + let dom: any = chartRef.current; + let myChart = echarts.init(dom); + myChart.setOption({ + tooltip: { + trigger: "axis", + }, + legend: { + data: ["每日学习时长"], + x: "right", + }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: { + type: "category", + boundaryGap: false, + data: timeData, + }, + yAxis: { + type: "value", + }, + series: [ + { + name: "每日学习时长（秒）", + type: "line", + data: valueData, + }, + ], + }); + window.onresize = () => { + myChart.resize(); + }; + }; + + const getLearnHours = () => { + if (loading) { + return; + } + setLoading(true); + member + .learnHours(uid, page, size, { + sort_field: "", + sort_algo: "", + is_finished: "", + }) + .then((res: any) => { + setList(res.data.data); + setHours(res.data.hours); + setTotal(res.data.total); + setLoading(false); + }); + }; + + const getLearnCourses = () => { + if (loading2) { + return; + } + setLoading2(true); + member + .learnCourses(uid, page2, size2, { + sort_field: "", + sort_algo: "", + is_finished: "", + }) + .then((res: any) => { + setList2(res.data.data); + setCourses(res.data.courses); + setTotal2(res.data.total); + setLoading2(false); + }); + }; + + const paginationProps = { + current: page, //当前页码 + pageSize: size, + total: total, // 总条数 + onChange: (page: number, pageSize: number) => + handlePageChange(page, pageSize), //改变页码的函数 + showSizeChanger: true, + }; + + const handlePageChange = (page: number, pageSize: number) => { + setPage(page); + setSize(pageSize); + }; + + const paginationProps2 = { + current: page2, //当前页码 + pageSize: size2, + total: total2, // 总条数 + onChange: (page: number, pageSize: number) => + handlePageChange2(page, pageSize), //改变页码的函数 + showSizeChanger: true, + }; + + const handlePageChange2 = (page: number, pageSize: number) => { + setPage2(page); + setSize2(pageSize); + }; + + const columns: ColumnsType = [ + { + title: "课时标题", + dataIndex: "title", + render: (_, record: any) => ( + <> + {hours[record.hour_id].title} + + ), + }, + { + title: "课时类型", + dataIndex: "type", + render: (_, record: any) => ( + <> + {hours[record.hour_id].type} + + ), + }, + { + title: "总时长", + dataIndex: "total_duration", + render: (_, record: any) => ( + <> + + + ), + }, + { + title: "已学习时长", + dataIndex: "finished_duration", + render: (_, record: any) => ( + <> + + + ), + }, + { + title: "状态", + dataIndex: "is_finished", + render: (_, record: any) => ( + <> + {record.is_finished === 1 ? 已学完 : 未学完} + + ), + }, + { + title: "时间", + dataIndex: "created_at", + render: (text: string) => {dateFormat(text)}, + }, + ]; + + const column2: ColumnsType = [ + { + title: "课程", + dataIndex: "title", + render: (_, record: any) => ( +
+ + {courses[record.course_id].title} +
+ ), + }, + { + title: "总课时", + dataIndex: "total_duration", + render: (_, record: any) => ( + <> + {record.hour_count} + + ), + }, + { + title: "已学习课时", + dataIndex: "finished_duration", + render: (_, record: any) => ( + <> + {record.finished_count} + + ), + }, + { + title: "状态", + dataIndex: "is_finished", + render: (_, record: any) => ( + <> + {record.is_finished === 1 ? 已学完 : 未学完} + + ), + }, + { + title: "时间", + dataIndex: "created_at", + render: (text: string) => {dateFormat(text)}, + }, + ]; + + return ( + <> + +
+ +
+
学习时长统计
+
+
+
+ +
+
课时学习记录
+
+ record.id} + /> + + +
+
线上课学习记录
+
+
record.id} + /> + + + + ); +}; +export default MemberLearnPage; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 42e9f92..620cbe6 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -16,6 +16,7 @@ import CoursePage from "../pages/course/index"; import CourseUserPage from "../pages/course/user"; import MemberPage from "../pages/member"; import MemberImportPage from "../pages/member/import"; +import MemberLearnPage from "../pages/member/learn"; import SystemConfigPage from "../pages/system/config"; import SystemAdministratorPage from "../pages/system/administrator"; import SystemAdminrolesPage from "../pages/system/adminroles"; @@ -32,7 +33,7 @@ if (getToken()) { try { let configRes: any = await system.getSystemConfig(); let userRes: any = await login.getUser(); - + resolve({ default: ( @@ -98,6 +99,10 @@ const routes: RouteObject[] = [ path: "/member/import", element: , }, + { + path: "/member/learn", + element: , + }, { path: "/system/config/index", element: ,