teach_sys_Demo/src/pages/PersonalProfile/components/StudyStudes/index.jsx

import * as echarts from "echarts";
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import StudyProgress from "../StudyProgress";
import ScoreRingChart from "../ScoreRingChart";
import AttendanceRingChart from "../AttendanceRingChart";
import { getLoginStudentProgress } from "@/services";
import "./index.css";

const ringData = [
  {
    value: 80,
    name: "我的",
    title: {
      offsetCenter: ["-30%", "-90%"],
    },
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        { offset: 0, color: "#2C7AFF" },
        { offset: 1, color: "#00AEFF" },
      ]),
    },
  }, // 外环
  {
    value: 60,
    name: "班级",
    title: {
      offsetCenter: ["-60%", "-90%"],
    },
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        { offset: 0, color: "#4564FF" },
        { offset: 1, color: "#AB2CFF" },
      ]),
    },
  }, // 中环
];

const attendanceData = [
  {
    name: "出勤率",
    value: 22,
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        { offset: 0, color: "#2C7AFF" },
        { offset: 1, color: "#00D5FF" },
      ]),
    },
  },
  { name: "缺勤率", value: 8, itemStyle: { color: "#FF9D2C" } },
  // 可添加更多状态（如迟到、早退、缺勤等）
];

const StudyStudes = () => {
  const studentInfo = useSelector((state) => state.student.studentInfo);

  const [progressData, setProgressData] = useState({});

  const queryLoginStudentProgress = async () => {
    const res = await getLoginStudentProgress();
    if (res.success) {
      setProgressData(res.data);
    }
  };

  useEffect(() => {
    queryLoginStudentProgress();
  }, []);

  return (
    <div className="study-studes-card-wrapper">
      <p className="study-studes-card-title">学习情况</p>
      <ul className="study-studes-card-list">
        {/* 时长 */}
        <li className="study-studes-card-study-info">
          <div className="study-studes-card-time-wrapper">
            <div className="study-studes-card-study-time-wrapper">
              <p className="study-studes-card-study-info-title">
                个人学习时长（h）
              </p>
              <p className="study-studes-card-study-time-line">
                <i style={{ width: "70%" }}>
                  <span>145</span>
                </i>
              </p>
            </div>
            <div className="study-studes-card-study-time-wrapper">
              <p className="study-studes-card-study-info-title">
                班级平均学习时长（h）
              </p>
              <p className="study-studes-card-study-time-line study-studes-card-study-time-line-class">
                <i style={{ width: "80%" }}>
                  <span>145</span>
                </i>
              </p>
            </div>
          </div>
        </li>
        {/* 进度 */}
        <li className="study-studes-card-study-progress">
          <StudyProgress
            value={75}
            className="study-studes-card-study-progress-chart"
          />
          <p className="study-studes-card-study-progress-title">
            整体课程完成进度
          </p>
        </li>
        {/* 课程整体完成情况 */}
        <li className="study-studes-card-curriculum">
          <ScoreRingChart
            title={`整体课程\n完成情况`}
            ringData={ringData}
            className="study-studes-card-curriculum-chart"
          />
          <div className="study-studes-card-curriculum-info">
            <p>班级平均进度</p>
            <span className="study-studes-card-curriculum-info-span1">60%</span>
          </div>
          <div className="study-studes-card-curriculum-info">
            <p>我的进度</p>
            <span className="study-studes-card-curriculum-info-span2">60%</span>
          </div>
        </li>
        {/* 课后作业完成情况 */}
        <li className="study-studes-card-curriculum-homework study-studes-card-curriculum">
          <ScoreRingChart
            title={`课后作业\n完成情况`}
            ringData={ringData}
            className="study-studes-card-curriculum-chart"
          />
          <div className="study-studes-card-curriculum-info">
            <p>班级平均进度</p>
            <span className="study-studes-card-curriculum-info-span1">60%</span>
          </div>
          <div className="study-studes-card-curriculum-info">
            <p>我的进度</p>
            <span className="study-studes-card-curriculum-info-span2">60%</span>
          </div>
        </li>
        {/* 考勤情况 */}
        <li className="study-studes-card-curriculum">
          <AttendanceRingChart
            data={attendanceData}
            centerContent={
              <div className="study-studes-card-curriculum-chart-center-content">
                考勤情况
              </div>
            }
          />

          <div className="study-studes-card-curriculum-info">
            <p>出勤率</p>
            <span className="study-studes-card-curriculum-info-span1">60%</span>
          </div>
          <div className="study-studes-card-curriculum-info">
            <p>缺勤率</p>
            <span className="study-studes-card-curriculum-info-span3">60%</span>
          </div>
        </li>
      </ul>
    </div>
  );
};

export default StudyStudes;