File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div>
<!-- <Side_t></Side_t> -->
<div style="padding: 15px 60px 120px 60px ">
<div class="flex justify-between align-center">
<div class="logo mb25"><img src="../../../resources/img/logo2.png" alt=""></div>
<Header></Header>
</div>
<div class="main-wrap flex justify-between">
<div class="gd-2">
<div class=" mb30">
<div>
<img src="../../../resources/img/img16_s.png" alt="">
<div class="mt10" style="width: 100%;">
<p class="name mb10">{{ studentInfo.studentName }}</p>
<p class="mb5">
{{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
{{ studentInfo.className }}
</p>
<!-- <progress-bar :progress="progress"></progress-bar> -->
<span>지금까지 푼 총 문제 수:</span>
<span class="brown ml10">{{ studentInfo.totalProblemsSolved }} 개</span>
</div>
</div>
<hr>
<p class="title2 mb25">최근 학습 히스토리</p>
<ul class="flex justify-between ml30">
<li
v-for="historyItem in studentInfo.history"
:key="historyItem.unitId"
>
[{{ historyItem.bookName }}] {{ historyItem.unitName }}
</li>
</ul>
<hr>
<div class="title-box flex justify-between mb20">
<p class="name">가나다학생 랭킹</p>
</div>
<div class="mypage mb30">
<div class=" flex-column " style="gap: 20px;">
<div class="textbook book-red">
<div class="text ">
<p class="title1" style="color: #fff;">포토북 랭킹</p>
</div>
<div class="box">
<P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="red">{{ photo_rank }}등</em>입니다.</P>
</div>
</div>
<div class="textbook ">
<div class="text ">
<p class="title1" style="color: #fff;">진도율 랭킹</p>
</div>
<div class="box">
<P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="yellow">{{ problem_rank }}등</em>입니다.</P>
</div>
</div>
<div class="textbook book-blue">
<div class="text ">
<p class="title1" style="color: #fff;">점수 랭킹</p>
</div>
<div class="box">
<P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="blue">{{ score_rank }}등</em>입니다.</P>
</div>
</div>
<div class="textbook book-navy">
<div class="text ">
<p class="title1" style="color: #fff;">학습시간 랭킹</p>
</div>
<div class="box">
<P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="navy">{{ time_rank }}등</em>입니다.</P>
</div>
</div>
</div>
</div>
<hr>
<div>
<div class="title-box flex justify-between mb20">
<p class="title">사진첩</p>
</div>
<div class="photobook">
<div class="flex justify-between">
<div class="box" style="gap: 5px;">
<div><img src="../../../resources/img/img198_12p.png" alt=""></div>
</div>
<div class="text mt10">
<p class="title1 mb10">나의 사진첩</p>
<button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button"
title="글쓰기" class="new-btn">
바로가기
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gd-9 flex-column" style="flex: 1;">
<div class="title-box flex justify-between mb40">
<p class="title">전체 진행률</p>
</div>
<div class="flex">
<div class="wrap" style="flex: 1;">
<p class="name">학습 현황</p>
<div class="flex justify-center"><Dounutchart/></div>
<div class="textbox">
<p class="title2">오늘의 학습현황</p>
<!-- 안전하게 진도율을 소수점 한자리 수까지 표시 -->
<p class="name">
{{ donutChartData.clearUnitNum && donutChartData.totalScheduleUnitNum
? (donutChartData.clearUnitNum / donutChartData.totalScheduleUnitNum * 100).toFixed(1)
: 0 }} %
</p>
</div>
<p class="title2">학습시간</p>
<p class="name">학습시간 n시간</p>
</div>
<div class="wrap" style="flex: 1;">
<p class="name">이해/표현 점수</p>
<div class="flex justify-center mt50">
<ColumnLineChart/>
</div>
</div>
</div>
<div class="wrap" style="flex: 2;">
<p class="name">교재별 진행률</p>
<div class="flex justify-center">
<StackedBarChart />
</div>
</div>
<div class="flex">
<div class="wrap" style="flex: 1;">
<p class="name">오늘의 학습 일정</p>
<div class="flex-column mt20" style="gap: 20px;">
<div class=" flex justify-between align-center " style="gap: 70px;">
<div><img src="../../../resources/img/img217_22s.png" alt=""></div>
<div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }"
@click="toggleClicked" style="width: 100%;">
<div class="text-lf flex justify-between align-center ">
<div>
<div class="flex align-center mb10" style="gap: 10px;">
<p class="title2"><em class="gray-bd">1교시</em></p>
<p class="title1">9:00</p>
<p class="title1">~</p>
<p class="title1">10:00</p>
</div>
<div class="title-box mb10"> <span class="title">the best</span></div>
<p class="title2">wirte a</p>
</div>
<div class=""> <img src="../../../resources/img/img214_19s.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-column" style="flex: 1;">
<div class="wrap">
<p class="name">교재별 오답률</p>
<div class="flex justify-center"><Barchart /></div>
</div>
<div class="wrap">
<p class="name">문제 카테고리별 세부 점수</p>
<div class="flex justify-center"><CategoryBarChart /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from '../../layout/Header.vue';
import Menu from '../../layout/Menu.vue';
import Side_t from '../../layout/Side_t.vue';
import ProgressBar from '../../component/ProgressBar.vue';
import StackedBarChart from './StackedBarChart.vue';
import Barchart from './Barchart.vue';
// import Bubblechart from './Bubblechart.vue';
import CategoryBarChart from './CategoryBarChart.vue';
import Dounutchart from './Dounutchart.vue';
import ColumnLineChart from './ColumnLineChart.vue';
import axios from "axios";
export default {
data() {
return {
stdCount: 0,
photo_rank: 0,
problem_rank: 0,
score_rank: 0,
time_rank: 0,
progress: 20,
donutChartData: {},
currentDate: "2024-08-14",
studentInfo: {
studentName: "",
institutionName: "",
grade: "",
className: "",
studentQuestion: "",
history: [],
},
currentStdId: "1"
}
},
methods: {
classStdCount: function () {
const vm = this;
axios({
url: "/userclass/classStdCountByUserId.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
userId: "USID_000000000000002" // 로그인한 학생의 userId
}
})
.then(function (response) {
console.log("classStdCount - response : ", response.data);
vm.stdCount = response.data;
})
.catch(function (error) {
console.log("classStdCount - error : ", error);
alert("반 학생 수 조회에 오류가 발생했습니다.");
});
},
photoRankByLikeData: function () {
const vm = this;
axios({
url: "/photo/photoRankByLikeData.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
sclsId: "1",
stdId: "1"
}
})
.then(function (response) {
console.log("Photo Rank - response : ", response.data);
vm.photo_rank = response.data;
})
.catch(function (error) {
console.log("Photo Rank - error : ", error);
alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
});
},
getUserRankByScore: function () {
const vm = this;
axios({
url: "/userclass/getUserRankByScore.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
userId: "USID_000000000000002" // 로그인한 학생의 userId
}
})
.then(function (response) {
console.log("User Rank - response : ", response.data);
vm.score_rank = response.data;
})
.catch(function (error) {
console.log("User Rank - error : ", error);
alert("점수 랭킹 조회에 오류가 발생했습니다.");
});
},
getUserRankByStudyTime: function () {
const vm = this;
axios({
url: "/userclass/getUserRankByStudyTime.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
userId: "1" // 로그인한 학생의 userId
}
})
.then(function (response) {
console.log("User Rank - response : ", response.data);
vm.time_rank = response.data;
})
.catch(function (error) {
console.log("User Rank - error : ", error);
alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
});
},
problemRankByProblemData: function () {
const vm = this;
axios({
url: "/problemLog/problemRankByProblemData.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
sclsId: "1",
stdId: "2"
}
})
.then(function (response) {
console.log("Problem Rank - response : ", response.data);
vm.problem_rank = response.data;
})
.catch(function (error) {
console.log("Problem Rank - error : ", error);
alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
});
},
// 학생 데이터 가져오기
fetchStudentInfo() {
axios.post("/studentInfo/getInfo.json", { userId: this.currentStdId })
.then((response) => {
console.log(response.data);
this.studentInfo = response.data;
})
.catch((error) => {
console.error("학생 정보 가져오기 실패:", error);
});
},
// 현재 날짜의 학생 학습률 데이터 가져오기
getStdProgressData() {
const vm = this;
axios.post('/dashboard/stdProgressData.json', {
std_id: vm.currentStdId,
current_date: vm.currentDate
})
.then(response => {
vm.donutChartData = response.data;
console.log(vm.donutChartData);
})
.catch(error => {
console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
})
},
},
watch: {
},
computed: {
},
components: {
Header: Header,
Menu: Menu,
// Footer:Footer,
Side_t: Side_t,
ProgressBar,
StackedBarChart: StackedBarChart,
Barchart: Barchart,
// Bubblechart: Bubblechart,
CategoryBarChart,
Dounutchart: Dounutchart,
ColumnLineChart: ColumnLineChart,
},
mounted() {
this.getStdProgressData();
this.fetchStudentInfo();
this.classStdCount();
this.photoRankByLikeData();
this.getUserRankByScore();
this.problemRankByProblemData();
this.getUserRankByStudyTime();
}
}
</script>
<style scoped>
.main-wrap {
margin-top: 20px;
position: static;
width: 100%;
height: 100%;
}
</style>