You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.6 KiB
93 lines
2.6 KiB
import {Text, View} from "@tarojs/components";
|
|
import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
|
|
import {everyDay, formatTime, getMonday, getSunday, monthEnd, monthFirst} from "@/utils/time";
|
|
import LineChart from "@/components/lineChart/lineChart";
|
|
import {CSSProperties, FC, useEffect, useState} from "react";
|
|
import {StatisticsParam, userApi} from "@/api";
|
|
import styles from './learningRecord.module.scss'
|
|
// import Spin from "@/components/spinner";
|
|
import {Profile} from "@/store";
|
|
import Taro from "@tarojs/taro";
|
|
import debounce from "@/utils/debounce";
|
|
|
|
const tabList: TabList<any>[] = [
|
|
{
|
|
title: '日',
|
|
value: {
|
|
start_time: new Date().setHours(0, 0, 0, 0),
|
|
end_time: new Date().setHours(24, 0, 0, 0)
|
|
}
|
|
},
|
|
{
|
|
title: '周', value: {
|
|
start_time: getMonday(),
|
|
end_time: getSunday()
|
|
}
|
|
},
|
|
{
|
|
title: '月', value: {
|
|
start_time: monthFirst(),
|
|
end_time: monthEnd()
|
|
}
|
|
},
|
|
]
|
|
|
|
interface Props {
|
|
userId?: string | number
|
|
style?: CSSProperties
|
|
className?: string
|
|
}
|
|
|
|
|
|
/**
|
|
* 学习记录折线图
|
|
*/
|
|
const LearningRecord: FC<Props> = ({userId, style, className}) => {
|
|
const [lineData, setLineData] = useState<any[]>([])
|
|
// const [loading, setLoading] = useState(false)
|
|
const {token} = Profile.useContainer()
|
|
|
|
async function getStatistics(data: StatisticsParam) {
|
|
try {
|
|
if (!userId) return;
|
|
setLineData([])
|
|
const res = await userApi.statistics(userId, data)
|
|
const everyDayValue = everyDay(data.start_time, Number(data.end_time), res.data)
|
|
setLineData(everyDayValue)
|
|
} catch (e) {
|
|
setLineData([])
|
|
}
|
|
}
|
|
|
|
function tabChange({tab}: OnChangOpt<StatisticsParam>) {
|
|
if (!token) {
|
|
Taro.navigateTo({url: '/pages/login/login'})
|
|
return
|
|
}
|
|
// getStatistics(tab?.value! as StatisticsParam)
|
|
debounce(()=>{
|
|
// console.log(this,'this')
|
|
getStatistics(tab?.value! as StatisticsParam)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
userId && setTimeout(() => {getStatistics(tabList[0].value)},500)
|
|
}, [userId])
|
|
|
|
return (<View className={[styles.box, className].filter(Boolean).join(' ')} style={{display: 'block', ...style}}>
|
|
<Tabs tabList={tabList} onChange={tabChange} backMode/>
|
|
<View style={{position: "relative"}}>
|
|
{/*<Spin enable={loading} block/>*/}
|
|
<View className={styles.total}>
|
|
总共学习
|
|
<Text style={{margin: '0 10px', color: '#00D6AC'}}>
|
|
{formatTime(lineData.reduce((pre, cur) => pre + cur.value, 0) || 0)}
|
|
</Text>
|
|
</View>
|
|
<LineChart data={lineData}/>
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
export default LearningRecord
|
|
|