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
2024-11-19
<template>
<div class="mypage">
<div class="flex justify-between mb30" style="gap: 30px">
<div>
<div class="title-box flex justify-between mb20">
<p class="title" style="color: white">소속 반</p>
<div class="flex align-center look-btn">
<!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
</div>
</div>
<div style="width: 82rem; padding: 2rem">
<section class="flex" style="gap: 20px">
<div
class="class flex justify-between"
style="cursor: default; background-color: transparent"
>
<div class="box gd-col2" style="gap: 5px">
<div>
<img src="../../../resources/img/img176_82t.png" alt="" />
</div>
<div>
<img src="../../../resources/img/img176_82t.png" alt="" />
</div>
<div>
<img src="../../../resources/img/img176_82t.png" alt="" />
</div>
<div>
<img src="../../../resources/img/img176_82t.png" alt="" />
</div>
</div>
<div class="text mt10">
<p class="title1 mb10">A반</p>
<span class="member">20명</span>
</div>
</div>
</section>
</div>
</div>
<div>
<div
style="position: absolute; left: 102rem; top: 10rem; cursor: pointer"
@click="
selectedTab = 'tab4';
goToPage('PhotoBook');
"
>
<img
src="../../../resources/img/new_img/mypage/photoBtn.png"
alt=""
/>
</div>
<div
class="title-box flex justify-between mb20"
style="position: absolute; left: 117em; top: 6em"
>
<p class="title" style="color: white">사진첩</p>
</div>
</div>
</div>
<div class="title-box flex justify-between mb20">
<p class="title" style="color: white">
{{ studentInfo.studentName }} 학생 랭킹
</p>
</div>
<div class="mb30">
<div class="flex" style="gap: 95px">
<div
class="textbook book-red"
style="background-color: white; width: 19%; border: #f9c4eb solid 6px"
>
<div class="text" style="background-color: #f9c4eb">
<p class="title1" style="color: #fff">포토북 랭킹</p>
</div>
<div class="box" style="gap: 10px">
<div>
<img src="../../../resources/img/img196_12p.png" alt="" />
</div>
<P class="subtitle mt10" style="font-size: 19px"
>현재 {{ stdCount }}명 중
<em class="red">{{ photo_rank }}등</em>입니다.</P
>
</div>
</div>
<div
class="textbook"
style="background-color: white; width: 19%; border: #b5dbcc solid 6px"
>
<div class="text" style="background-color: #b5dbcc">
<p class="title1" style="color: #fff">진도율 랭킹</p>
</div>
<div class="box" style="gap: 10px">
<div>
<img src="../../../resources/img/img196_12p.png" alt="" />
</div>
<P class="subtitle mt10" style="font-size: 19px"
>현재 {{ stdCount }}명 중
<em class="yellow">{{ problem_rank }}등</em>입니다.</P
>
</div>
</div>
<div
class="textbook book-blue"
style="background-color: white; width: 19%; border: #bcd3eb solid 6px"
>
<div class="text" style="background-color: #bcd3eb">
<p class="title1" style="color: #fff">점수 랭킹</p>
</div>
<div class="box" style="gap: 10px">
<div>
<img src="../../../resources/img/img196_12p.png" alt="" />
</div>
<P class="subtitle mt10" style="font-size: 19px"
>현재 {{ stdCount }}명 중
<em class="blue">{{ score_rank }}등</em>입니다.</P
>
</div>
</div>
<div
class="textbook book-navy"
style="background-color: white; width: 19%; border: #f9c894 solid 6px"
>
<div class="text" style="background-color: #f9c894">
<p class="title1" style="color: #fff">학습시간 랭킹</p>
</div>
<div class="box" style="gap: 10px">
<div>
<img src="../../../resources/img/img196_12p.png" alt="" />
</div>
<P class="subtitle mt10" style="font-size: 19px"
>현재 {{ stdCount }}명 중
<em class="navy">{{ time_rank }}등</em>입니다.</P
>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import { mdilArrowRight } from "@mdi/light-js";
import ProgressBar from "../../component/ProgressBar.vue";
import axios from "axios";
export default {
data() {
return {
stdCount: 0,
photo_rank: 0,
problem_rank: 0,
score_rank: 0,
time_rank: 0,
mdiMagnify: mdiMagnify,
mdilArrowRight: mdilArrowRight,
timer: "00:00",
progress: 20,
studentInfo: {
studentName: "",
institutionName: "",
grade: "",
className: "",
studentQuestion: "",
history: [],
},
};
},
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("반 학생 수 조회에 오류가 발생했습니다.");
});
},
fetchStudentInfo() {
const vm = this;
axios({
url: "/studentInfo/getInfo.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
userId: "USID_000000000000002", // 로그인한 학생의 userId
},
})
.then((response) => {
console.log(response.data);
this.studentInfo = response.data;
})
.catch((error) => {
console.error("학생 정보 가져오기 실패:", error);
});
},
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("학생 문제 랭킹 조회에 오류가 발생했습니다.");
});
},
goToPage(page) {
this.$router.push({ name: page });
},
increaseProgress() {
if (this.progress < 100) {
this.progress += 10;
}
},
showConfirm(type) {
let message = "";
if (type === "cancel") {
message = "삭제하시겠습니까?";
} else if (type === "reset") {
message = "초기화하시겠습니까?";
} else if (type === "save") {
message = "등록하시겠습니까?";
}
if (confirm(message)) {
this.goBack();
}
},
},
watch: {},
computed: {},
components: {
SvgIcon,
ProgressBar,
},
mounted() {
console.log("Main2 mounted");
this.fetchStudentInfo();
this.classStdCount();
this.photoRankByLikeData();
this.getUserRankByScore();
this.problemRankByProblemData();
this.getUserRankByStudyTime();
},
};
</script>
<style scoped>
.mypage .textbook {
width: 22%;
}
</style>