diff --git a/src/components/Radar/index.tsx b/src/components/Radar/index.tsx index a8a4f0b..9a325ca 100644 --- a/src/components/Radar/index.tsx +++ b/src/components/Radar/index.tsx @@ -1,26 +1,46 @@ import Taro, { useReady } from "@tarojs/taro"; import { View, Canvas, Button } from "@tarojs/components"; -import { useEffect } from "react"; +import { useEffect, useRef } from "react"; -const RadarChart: React.FC = () => { - const labels = [ - "正手球质", - "正手控制", - "反手球质", - "反手控制", - "底线相持", - "场地覆盖", - "发球接发", - "接随机球", - "战术设计", - ]; - const values = [50, 75, 60, 20, 40, 70, 65, 35, 75]; +const RadarChart: React.FC = (props) => { + const { data } = props + + const renderFnRef = useRef() + // const labels = [ + // "正手球质", + // "正手控制", + // "反手球质", + // "反手控制", + // "底线相持", + // "场地覆盖", + // "发球接发", + // "接随机球", + // "战术设计", + // ]; + // const values = [50, 75, 60, 20, 40, 70, 65, 35, 75]; const maxValue = 100; const levels = 4; const radius = 100; const center = { x: 160, y: 160 }; + useEffect(() => { + if (data.length > 0) { + const {texts, vals} = data.reduce((res, item) => { + const [text, val] = item + return { + texts: [...res.texts, text], + vals: [...res.vals, val] + } + }, { texts: [], vals: [] }) + renderFnRef.current && renderFnRef.current(texts, vals) + } + }, [data]) + useReady(() => { + renderFnRef.current = renderCanvas + }); + + function renderCanvas (labels, values) { const query = Taro.createSelectorQuery(); query .select("#radarCanvas") @@ -93,10 +113,10 @@ const RadarChart: React.FC = () => { ctx.fillStyle = "rgba(0,200,180,0.3)"; ctx.fill(); ctx.strokeStyle = "#00c8b4"; - ctx.lineWidth = 4; + ctx.lineWidth = 3; ctx.stroke(); }); - }); + } // 保存为图片 diff --git a/src/other_pages/ntrp-evaluate/index.module.scss b/src/other_pages/ntrp-evaluate/index.module.scss index b9b8ce3..ccb34f6 100644 --- a/src/other_pages/ntrp-evaluate/index.module.scss +++ b/src/other_pages/ntrp-evaluate/index.module.scss @@ -545,6 +545,10 @@ font-style: normal; font-weight: 900; line-height: 44px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; .level { color: #00E5AD; diff --git a/src/other_pages/ntrp-evaluate/index.tsx b/src/other_pages/ntrp-evaluate/index.tsx index df9e8bc..a603d9d 100644 --- a/src/other_pages/ntrp-evaluate/index.tsx +++ b/src/other_pages/ntrp-evaluate/index.tsx @@ -7,6 +7,7 @@ import { withAuth, RadarChart } from "@/components"; import evaluateService, { LastTimeTestResult, Question, + TestResultData, } from "@/services/evaluateService"; import { useUserInfo, useUserActions } from "@/store/userStore"; import { delay } from "@/utils"; @@ -323,12 +324,28 @@ function Test(props) { } function Result() { + const { params } = useRouter(); + const { id } = params; const userInfo = useUserInfo(); const { fetchUserInfo } = useUserActions(); + const [result, setResult] = useState(); + const [radarData, setRadarData] = useState<[propName: string, prop: number][]>([]) + useEffect(() => { - fetchUserInfo() - }, []) + getResultById(); + fetchUserInfo(); + }, []); + + async function getResultById() { + const res = await evaluateService.getTestResult({ record_id: Number(id) }); + if (res.code === 0) { + setResult(res.data); + setRadarData(Object.entries(res.data.radar_data.abilities).map(([key, value]) => [key, value.current_score])) + } + } + + console.log(result, "result"); return ( @@ -357,14 +374,14 @@ function Result() { NTRP - {1.1} + {result?.ntrp_level} 变线+网前,下一步就是赢比赛! - +