정다정
2024-10-22
241022 정다정 학습 히스토리 디자인 & 이름 API 연결
@fc27dc2e1344056da54c5ed9400b782d5347350a
--- client/views/pages/parents/Main_p.vue
+++ client/views/pages/parents/Main_p.vue
... | ... | @@ -1,109 +1,123 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div> |
| 3 | 3 |
<!-- <Side_t></Side_t> --> |
| 4 |
- <div style="padding: 15px 60px 120px 60px "> |
|
| 4 |
+ <div style="padding: 15px 60px 120px 60px"> |
|
| 5 | 5 |
<div class="flex justify-between align-center"> |
| 6 |
- <div class="logo mb25"><img src="../../../resources/img/logo2.png" alt=""></div> |
|
| 6 |
+ <div class="logo mb25"><img src="../../../resources/img/logo2.png" alt="" /></div> |
|
| 7 | 7 |
<Header></Header> |
| 8 | 8 |
</div> |
| 9 | 9 |
<div class="main-wrap flex justify-between"> |
| 10 | 10 |
<div class="gd-2"> |
| 11 |
- <div class=" mb30"> |
|
| 11 |
+ <div class="mb30"> |
|
| 12 | 12 |
<div> |
| 13 |
- <img src="../../../resources/img/img16_s.png" alt=""> |
|
| 14 |
- <div class="mt10" style="width: 100%;"> |
|
| 13 |
+ <img src="../../../resources/img/img16_s.png" alt="" /> |
|
| 14 |
+ <div class="mt10" style="width: 100%"> |
|
| 15 | 15 |
<p class="name mb10">{{ studentInfo.studentName }}</p>
|
| 16 | 16 |
<p class="mb5"> |
| 17 | 17 |
{{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
|
| 18 | 18 |
{{ studentInfo.className }}
|
| 19 | 19 |
</p> |
| 20 | 20 |
<!-- <progress-bar :progress="progress"></progress-bar> --> |
| 21 |
- <span>지금까지 푼 총 문제 수:</span> |
|
| 22 |
- <span class="brown ml10">{{ studentInfo.totalProblemsSolved }} 개</span>
|
|
| 21 |
+ <div class="problem-box mt25"> |
|
| 22 |
+ <p style="font-weight: bold"> |
|
| 23 |
+ 지금까지 푼 총 문제 수 : |
|
| 24 |
+ <span style="color: #9528b7; font-size: 16px; font-weight: bold" |
|
| 25 |
+ >{{ studentInfo.totalProblemsSolved }}개</span
|
|
| 26 |
+ > |
|
| 27 |
+ </p> |
|
| 28 |
+ </div> |
|
| 23 | 29 |
</div> |
| 24 | 30 |
</div> |
| 25 |
- <hr> |
|
| 26 |
- <p class="title2 mb25">최근 학습 히스토리</p> |
|
| 27 |
- <ul class="flex justify-between ml30"> |
|
| 28 |
- <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId"> |
|
| 29 |
- [{{ historyItem.bookName }}] {{ historyItem.unitName }}
|
|
| 30 |
- </li> |
|
| 31 |
- </ul> |
|
| 32 |
- |
|
| 33 |
- <hr> |
|
| 31 |
+ <hr /> |
|
| 32 |
+ <div class="history-box"> |
|
| 33 |
+ <p class="title2 mb25">최근 학습 히스토리</p> |
|
| 34 |
+ <ul class="flex justify-between"> |
|
| 35 |
+ <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId"> |
|
| 36 |
+ [{{ historyItem.bookName }}] {{ historyItem.unitName }}
|
|
| 37 |
+ </li> |
|
| 38 |
+ </ul> |
|
| 39 |
+ </div> |
|
| 40 |
+ <hr /> |
|
| 34 | 41 |
<div class="title-box flex justify-between mb20"> |
| 35 |
- <p class="name">가나다학생 랭킹</p> |
|
| 42 |
+ <p class="name">{{ studentInfo.studentName }}학생 랭킹</p>
|
|
| 36 | 43 |
</div> |
| 37 | 44 |
<div class="mypage mb30"> |
| 38 |
- <div class=" flex-column " style="gap: 20px;"> |
|
| 45 |
+ <div class="flex-column" style="gap: 20px"> |
|
| 39 | 46 |
<div class="textbook book-red"> |
| 40 |
- <div class="text "> |
|
| 41 |
- <p class="title1" style="color: #fff;">포토북 랭킹</p> |
|
| 47 |
+ <div class="text"> |
|
| 48 |
+ <p class="title1" style="color: #fff">포토북 랭킹</p> |
|
| 42 | 49 |
</div> |
| 43 | 50 |
<div class="box"> |
| 44 |
- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="red">{{ photo_rank
|
|
| 45 |
- }}등</em>입니다.</P> |
|
| 51 |
+ <P class="title2 mt10" |
|
| 52 |
+ >현재 {{ stdCount }}명 중 <em class="red">{{ photo_rank }}등</em>입니다.</P
|
|
| 53 |
+ > |
|
| 46 | 54 |
</div> |
| 47 | 55 |
</div> |
| 48 |
- <div class="textbook "> |
|
| 49 |
- <div class="text "> |
|
| 50 |
- <p class="title1" style="color: #fff;">진도율 랭킹</p> |
|
| 56 |
+ <div class="textbook"> |
|
| 57 |
+ <div class="text"> |
|
| 58 |
+ <p class="title1" style="color: #fff">진도율 랭킹</p> |
|
| 51 | 59 |
</div> |
| 52 | 60 |
<div class="box"> |
| 53 |
- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="yellow">{{ problem_rank
|
|
| 54 |
- }}등</em>입니다.</P> |
|
| 61 |
+ <P class="title2 mt10" |
|
| 62 |
+ >현재 {{ stdCount }}명 중
|
|
| 63 |
+ <em class="yellow">{{ problem_rank }}등</em>입니다.</P
|
|
| 64 |
+ > |
|
| 55 | 65 |
</div> |
| 56 | 66 |
</div> |
| 57 | 67 |
<div class="textbook book-blue"> |
| 58 |
- <div class="text "> |
|
| 59 |
- <p class="title1" style="color: #fff;">점수 랭킹</p> |
|
| 68 |
+ <div class="text"> |
|
| 69 |
+ <p class="title1" style="color: #fff">점수 랭킹</p> |
|
| 60 | 70 |
</div> |
| 61 | 71 |
<div class="box"> |
| 62 |
- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="blue">{{ score_rank
|
|
| 63 |
- }}등</em>입니다.</P> |
|
| 72 |
+ <P class="title2 mt10" |
|
| 73 |
+ >현재 {{ stdCount }}명 중 <em class="blue">{{ score_rank }}등</em>입니다.</P
|
|
| 74 |
+ > |
|
| 64 | 75 |
</div> |
| 65 | 76 |
</div> |
| 66 | 77 |
<div class="textbook book-navy"> |
| 67 |
- <div class="text "> |
|
| 68 |
- <p class="title1" style="color: #fff;">학습시간 랭킹</p> |
|
| 78 |
+ <div class="text"> |
|
| 79 |
+ <p class="title1" style="color: #fff">학습시간 랭킹</p> |
|
| 69 | 80 |
</div> |
| 70 | 81 |
<div class="box"> |
| 71 |
- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="navy">{{ time_rank
|
|
| 72 |
- }}등</em>입니다.</P> |
|
| 82 |
+ <P class="title2 mt10" |
|
| 83 |
+ >현재 {{ stdCount }}명 중 <em class="navy">{{ time_rank }}등</em>입니다.</P
|
|
| 84 |
+ > |
|
| 73 | 85 |
</div> |
| 74 | 86 |
</div> |
| 75 | 87 |
</div> |
| 76 | 88 |
</div> |
| 77 |
- <hr> |
|
| 89 |
+ <hr /> |
|
| 78 | 90 |
<div> |
| 79 | 91 |
<div class="title-box flex justify-between mb20"> |
| 80 | 92 |
<p class="title">사진첩</p> |
| 81 | 93 |
</div> |
| 82 | 94 |
<div class="photobook"> |
| 83 | 95 |
<div class="flex justify-between"> |
| 84 |
- <div class="box" style="gap: 5px;"> |
|
| 85 |
- <div><img src="../../../resources/img/img198_12p.png" alt=""></div> |
|
| 96 |
+ <div class="box" style="gap: 5px"> |
|
| 97 |
+ <div><img src="../../../resources/img/img198_12p.png" alt="" /></div> |
|
| 86 | 98 |
</div> |
| 87 | 99 |
<div class="text mt10"> |
| 88 |
- <p class="title1 mb10">나의 사진첩</p> |
|
| 89 |
- <button @click="goToPage('PhotoBook')" type="button"
|
|
| 90 |
- title="글쓰기" class="new-btn"> |
|
| 100 |
+ <p class="title1 mb10">{{ studentInfo.studentName }}의 사진첩</p>
|
|
| 101 |
+ <button |
|
| 102 |
+ @click="goToPage('PhotoBook')"
|
|
| 103 |
+ type="button" |
|
| 104 |
+ title="글쓰기" |
|
| 105 |
+ class="new-btn" |
|
| 106 |
+ > |
|
| 91 | 107 |
바로가기 |
| 92 | 108 |
</button> |
| 93 |
- |
|
| 94 | 109 |
</div> |
| 95 | 110 |
</div> |
| 96 |
- |
|
| 97 | 111 |
</div> |
| 98 | 112 |
</div> |
| 99 | 113 |
</div> |
| 100 | 114 |
</div> |
| 101 |
- <div class="gd-9 flex-column" style="flex: 1;"> |
|
| 115 |
+ <div class="gd-9 flex-column" style="flex: 1"> |
|
| 102 | 116 |
<div class="title-box flex justify-between mb40"> |
| 103 | 117 |
<p class="title">전체 진행률</p> |
| 104 | 118 |
</div> |
| 105 | 119 |
<div class="flex"> |
| 106 |
- <div class="wrap" style="flex: 1;"> |
|
| 120 |
+ <div class="wrap" style="flex: 1"> |
|
| 107 | 121 |
<p class="name">학습 현황</p> |
| 108 | 122 |
<div class="flex justify-center"> |
| 109 | 123 |
<Dounutchart /> |
... | ... | @@ -112,56 +126,65 @@ |
| 112 | 126 |
<p class="title2">오늘의 학습현황</p> |
| 113 | 127 |
<!-- 안전하게 진도율을 소수점 한자리 수까지 표시 --> |
| 114 | 128 |
<p class="name"> |
| 115 |
- {{ donutChartData.clearUnitNum && donutChartData.totalScheduleUnitNum
|
|
| 116 |
- ? (donutChartData.clearUnitNum / donutChartData.totalScheduleUnitNum * |
|
| 117 |
- 100).toFixed(1) |
|
| 118 |
- : 0 }} % |
|
| 129 |
+ {{
|
|
| 130 |
+ donutChartData.clearUnitNum && donutChartData.totalScheduleUnitNum |
|
| 131 |
+ ? ( |
|
| 132 |
+ (donutChartData.clearUnitNum / donutChartData.totalScheduleUnitNum) * |
|
| 133 |
+ 100 |
|
| 134 |
+ ).toFixed(1) |
|
| 135 |
+ : 0 |
|
| 136 |
+ }} |
|
| 137 |
+ % |
|
| 119 | 138 |
</p> |
| 120 | 139 |
</div> |
| 121 | 140 |
<p class="title2">학습시간</p> |
| 122 | 141 |
<p class="name">학습시간 n시간</p> |
| 123 | 142 |
</div> |
| 124 |
- <div class="wrap" style="flex: 1;"> |
|
| 143 |
+ <div class="wrap" style="flex: 1"> |
|
| 125 | 144 |
<p class="name">이해/표현 점수</p> |
| 126 | 145 |
<div class="flex justify-center mt50"> |
| 127 | 146 |
<ColumnLineChart /> |
| 128 | 147 |
</div> |
| 129 | 148 |
</div> |
| 130 | 149 |
</div> |
| 131 |
- <div class="wrap" style="flex: 2;"> |
|
| 150 |
+ <div class="wrap" style="flex: 2"> |
|
| 132 | 151 |
<p class="name">교재별 진행률</p> |
| 133 | 152 |
<div class="flex justify-center"> |
| 134 | 153 |
<StackedBarChart /> |
| 135 | 154 |
</div> |
| 136 | 155 |
</div> |
| 137 | 156 |
<div class="flex"> |
| 138 |
- <div class="wrap" style="flex: 1;"> |
|
| 157 |
+ <div class="wrap" style="flex: 1"> |
|
| 139 | 158 |
<p class="name">오늘의 학습 일정</p> |
| 140 |
- <div class="flex-column mt20" style="gap: 20px;"> |
|
| 141 |
- <div class=" flex justify-between align-center " style="gap: 70px;"> |
|
| 142 |
- <div><img src="../../../resources/img/img217_22s.png" alt=""></div> |
|
| 143 |
- <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }"
|
|
| 144 |
- @click="toggleClicked" style="width: 100%;"> |
|
| 145 |
- <div class="text-lf flex justify-between align-center "> |
|
| 159 |
+ <div class="flex-column mt20" style="gap: 20px"> |
|
| 160 |
+ <div class="flex justify-between align-center" style="gap: 70px"> |
|
| 161 |
+ <div><img src="../../../resources/img/img217_22s.png" alt="" /></div> |
|
| 162 |
+ <div |
|
| 163 |
+ class="wrap cs-pt" |
|
| 164 |
+ :class="{ 'cs-pt-clicked': isClicked }"
|
|
| 165 |
+ @click="toggleClicked" |
|
| 166 |
+ style="width: 100%" |
|
| 167 |
+ > |
|
| 168 |
+ <div class="text-lf flex justify-between align-center"> |
|
| 146 | 169 |
<div> |
| 147 |
- <div class="flex align-center mb10" style="gap: 10px;"> |
|
| 170 |
+ <div class="flex align-center mb10" style="gap: 10px"> |
|
| 148 | 171 |
<p class="title2"><em class="gray-bd">1교시</em></p> |
| 149 | 172 |
<p class="title1">9:00</p> |
| 150 | 173 |
<p class="title1">~</p> |
| 151 | 174 |
<p class="title1">10:00</p> |
| 152 | 175 |
</div> |
| 153 |
- <div class="title-box mb10"> <span class="title">the best</span></div> |
|
| 176 |
+ <div class="title-box mb10"><span class="title">the best</span></div> |
|
| 154 | 177 |
<p class="title2">wirte a</p> |
| 155 | 178 |
</div> |
| 156 |
- <div class=""> <img src="../../../resources/img/img214_19s.png" alt=""> |
|
| 179 |
+ <div class=""> |
|
| 180 |
+ <img src="../../../resources/img/img214_19s.png" alt="" /> |
|
| 157 | 181 |
</div> |
| 158 | 182 |
</div> |
| 159 | 183 |
</div> |
| 160 | 184 |
</div> |
| 161 |
- |
|
| 162 | 185 |
</div> |
| 163 | 186 |
</div> |
| 164 |
- <div class="flex-column" style="flex: 1;"> |
|
| 187 |
+ <div class="flex-column" style="flex: 1"> |
|
| 165 | 188 |
<div class="wrap"> |
| 166 | 189 |
<p class="name">교재별 오답률</p> |
| 167 | 190 |
<div class="flex justify-center"> |
... | ... | @@ -175,15 +198,12 @@ |
| 175 | 198 |
<CategoryBarChart /> |
| 176 | 199 |
</div> |
| 177 | 200 |
</div> |
| 178 |
- |
|
| 179 | 201 |
</div> |
| 180 |
- |
|
| 181 | 202 |
</div> |
| 182 | 203 |
</div> |
| 183 | 204 |
</div> |
| 184 | 205 |
</div> |
| 185 | 206 |
</div> |
| 186 |
- |
|
| 187 | 207 |
</template> |
| 188 | 208 |
|
| 189 | 209 |
<script> |
... | ... | @@ -197,10 +217,9 @@ |
| 197 | 217 |
import CategoryBarChart from './CategoryBarChart.vue'; |
| 198 | 218 |
import Dounutchart from './Dounutchart.vue'; |
| 199 | 219 |
import ColumnLineChart from './ColumnLineChart.vue'; |
| 200 |
-import axios from "axios"; |
|
| 220 |
+import axios from 'axios'; |
|
| 201 | 221 |
|
| 202 | 222 |
export default {
|
| 203 |
- |
|
| 204 | 223 |
data() {
|
| 205 | 224 |
return {
|
| 206 | 225 |
stdCount: 0, |
... | ... | @@ -210,17 +229,17 @@ |
| 210 | 229 |
time_rank: 0, |
| 211 | 230 |
progress: 20, |
| 212 | 231 |
donutChartData: {},
|
| 213 |
- currentDate: "2024-08-14", |
|
| 232 |
+ currentDate: '2024-08-14', |
|
| 214 | 233 |
studentInfo: {
|
| 215 |
- studentName: "", |
|
| 216 |
- institutionName: "", |
|
| 217 |
- grade: "", |
|
| 218 |
- className: "", |
|
| 219 |
- studentQuestion: "", |
|
| 234 |
+ studentName: '', |
|
| 235 |
+ institutionName: '', |
|
| 236 |
+ grade: '', |
|
| 237 |
+ className: '', |
|
| 238 |
+ studentQuestion: '', |
|
| 220 | 239 |
history: [], |
| 221 | 240 |
}, |
| 222 |
- currentStdId: "1" |
|
| 223 |
- } |
|
| 241 |
+ currentStdId: '1', |
|
| 242 |
+ }; |
|
| 224 | 243 |
}, |
| 225 | 244 |
|
| 226 | 245 |
methods: {
|
... | ... | @@ -231,149 +250,146 @@ |
| 231 | 250 |
classStdCount: function () {
|
| 232 | 251 |
const vm = this; |
| 233 | 252 |
axios({
|
| 234 |
- url: "/userclass/classStdCountByUserId.json", |
|
| 235 |
- method: "post", |
|
| 253 |
+ url: '/userclass/classStdCountByUserId.json', |
|
| 254 |
+ method: 'post', |
|
| 236 | 255 |
headers: {
|
| 237 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 256 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 238 | 257 |
}, |
| 239 | 258 |
data: {
|
| 240 |
- userId: "USID_000000000000002" // 로그인한 학생의 userId |
|
| 241 |
- } |
|
| 259 |
+ userId: 'USID_000000000000002', // 로그인한 학생의 userId |
|
| 260 |
+ }, |
|
| 242 | 261 |
}) |
| 243 | 262 |
.then(function (response) {
|
| 244 |
- console.log("classStdCount - response : ", response.data);
|
|
| 263 |
+ console.log('classStdCount - response : ', response.data);
|
|
| 245 | 264 |
vm.stdCount = response.data; |
| 246 | 265 |
}) |
| 247 | 266 |
.catch(function (error) {
|
| 248 |
- console.log("classStdCount - error : ", error);
|
|
| 249 |
- alert("반 학생 수 조회에 오류가 발생했습니다.");
|
|
| 267 |
+ console.log('classStdCount - error : ', error);
|
|
| 268 |
+ alert('반 학생 수 조회에 오류가 발생했습니다.');
|
|
| 250 | 269 |
}); |
| 251 | 270 |
}, |
| 252 | 271 |
|
| 253 | 272 |
photoRankByLikeData: function () {
|
| 254 | 273 |
const vm = this; |
| 255 | 274 |
axios({
|
| 256 |
- url: "/photo/photoRankByLikeData.json", |
|
| 257 |
- method: "post", |
|
| 275 |
+ url: '/photo/photoRankByLikeData.json', |
|
| 276 |
+ method: 'post', |
|
| 258 | 277 |
headers: {
|
| 259 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 278 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 260 | 279 |
}, |
| 261 | 280 |
data: {
|
| 262 |
- sclsId: "1", |
|
| 263 |
- stdId: "1" |
|
| 264 |
- } |
|
| 281 |
+ sclsId: '1', |
|
| 282 |
+ stdId: '1', |
|
| 283 |
+ }, |
|
| 265 | 284 |
}) |
| 266 | 285 |
.then(function (response) {
|
| 267 |
- console.log("Photo Rank - response : ", response.data);
|
|
| 286 |
+ console.log('Photo Rank - response : ', response.data);
|
|
| 268 | 287 |
vm.photo_rank = response.data; |
| 269 | 288 |
}) |
| 270 | 289 |
.catch(function (error) {
|
| 271 |
- console.log("Photo Rank - error : ", error);
|
|
| 272 |
- alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
|
|
| 290 |
+ console.log('Photo Rank - error : ', error);
|
|
| 291 |
+ alert('학생 사진 랭킹 조회에 오류가 발생했습니다.');
|
|
| 273 | 292 |
}); |
| 274 | 293 |
}, |
| 275 | 294 |
getUserRankByScore: function () {
|
| 276 | 295 |
const vm = this; |
| 277 | 296 |
axios({
|
| 278 |
- url: "/userclass/getUserRankByScore.json", |
|
| 279 |
- method: "post", |
|
| 297 |
+ url: '/userclass/getUserRankByScore.json', |
|
| 298 |
+ method: 'post', |
|
| 280 | 299 |
headers: {
|
| 281 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 300 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 282 | 301 |
}, |
| 283 | 302 |
data: {
|
| 284 |
- userId: "USID_000000000000002" // 로그인한 학생의 userId |
|
| 285 |
- } |
|
| 303 |
+ userId: 'USID_000000000000002', // 로그인한 학생의 userId |
|
| 304 |
+ }, |
|
| 286 | 305 |
}) |
| 287 | 306 |
.then(function (response) {
|
| 288 |
- console.log("User Rank - response : ", response.data);
|
|
| 307 |
+ console.log('User Rank - response : ', response.data);
|
|
| 289 | 308 |
vm.score_rank = response.data; |
| 290 | 309 |
}) |
| 291 | 310 |
.catch(function (error) {
|
| 292 |
- console.log("User Rank - error : ", error);
|
|
| 293 |
- alert("점수 랭킹 조회에 오류가 발생했습니다.");
|
|
| 311 |
+ console.log('User Rank - error : ', error);
|
|
| 312 |
+ alert('점수 랭킹 조회에 오류가 발생했습니다.');
|
|
| 294 | 313 |
}); |
| 295 | 314 |
}, |
| 296 | 315 |
getUserRankByStudyTime: function () {
|
| 297 | 316 |
const vm = this; |
| 298 | 317 |
axios({
|
| 299 |
- url: "/userclass/getUserRankByStudyTime.json", |
|
| 300 |
- method: "post", |
|
| 318 |
+ url: '/userclass/getUserRankByStudyTime.json', |
|
| 319 |
+ method: 'post', |
|
| 301 | 320 |
headers: {
|
| 302 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 321 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 303 | 322 |
}, |
| 304 | 323 |
data: {
|
| 305 |
- userId: "1" // 로그인한 학생의 userId |
|
| 306 |
- } |
|
| 324 |
+ userId: '1', // 로그인한 학생의 userId |
|
| 325 |
+ }, |
|
| 307 | 326 |
}) |
| 308 | 327 |
.then(function (response) {
|
| 309 |
- console.log("User Rank - response : ", response.data);
|
|
| 328 |
+ console.log('User Rank - response : ', response.data);
|
|
| 310 | 329 |
vm.time_rank = response.data; |
| 311 | 330 |
}) |
| 312 | 331 |
.catch(function (error) {
|
| 313 |
- console.log("User Rank - error : ", error);
|
|
| 314 |
- alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
|
|
| 332 |
+ console.log('User Rank - error : ', error);
|
|
| 333 |
+ alert('학습시간 랭킹 조회에 오류가 발생했습니다.');
|
|
| 315 | 334 |
}); |
| 316 | 335 |
}, |
| 317 | 336 |
problemRankByProblemData: function () {
|
| 318 | 337 |
const vm = this; |
| 319 | 338 |
axios({
|
| 320 |
- url: "/problemLog/problemRankByProblemData.json", |
|
| 321 |
- method: "post", |
|
| 339 |
+ url: '/problemLog/problemRankByProblemData.json', |
|
| 340 |
+ method: 'post', |
|
| 322 | 341 |
headers: {
|
| 323 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 342 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 324 | 343 |
}, |
| 325 | 344 |
data: {
|
| 326 |
- sclsId: "1", |
|
| 327 |
- stdId: "2" |
|
| 328 |
- } |
|
| 345 |
+ sclsId: '1', |
|
| 346 |
+ stdId: '2', |
|
| 347 |
+ }, |
|
| 329 | 348 |
}) |
| 330 | 349 |
.then(function (response) {
|
| 331 |
- console.log("Problem Rank - response : ", response.data);
|
|
| 350 |
+ console.log('Problem Rank - response : ', response.data);
|
|
| 332 | 351 |
vm.problem_rank = response.data; |
| 333 | 352 |
}) |
| 334 | 353 |
.catch(function (error) {
|
| 335 |
- console.log("Problem Rank - error : ", error);
|
|
| 336 |
- alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
|
|
| 354 |
+ console.log('Problem Rank - error : ', error);
|
|
| 355 |
+ alert('학생 문제 랭킹 조회에 오류가 발생했습니다.');
|
|
| 337 | 356 |
}); |
| 338 | 357 |
}, |
| 339 | 358 |
|
| 340 | 359 |
// 학생 데이터 가져오기 |
| 341 | 360 |
fetchStudentInfo() {
|
| 342 |
- axios.post("/studentInfo/getInfo.json", { userId: this.currentStdId })
|
|
| 361 |
+ axios |
|
| 362 |
+ .post('/studentInfo/getInfo.json', { userId: this.currentStdId })
|
|
| 343 | 363 |
.then((response) => {
|
| 344 | 364 |
console.log(response.data); |
| 345 | 365 |
this.studentInfo = response.data; |
| 346 | 366 |
}) |
| 347 | 367 |
.catch((error) => {
|
| 348 |
- console.error("학생 정보 가져오기 실패:", error);
|
|
| 368 |
+ console.error('학생 정보 가져오기 실패:', error);
|
|
| 349 | 369 |
}); |
| 350 | 370 |
}, |
| 351 | 371 |
|
| 352 | 372 |
// 현재 날짜의 학생 학습률 데이터 가져오기 |
| 353 | 373 |
getStdProgressData() {
|
| 354 | 374 |
const vm = this; |
| 355 |
- axios.post('/dashboard/stdProgressData.json', {
|
|
| 356 |
- std_id: vm.currentStdId, |
|
| 357 |
- current_date: vm.currentDate |
|
| 358 |
- }) |
|
| 359 |
- .then(response => {
|
|
| 375 |
+ axios |
|
| 376 |
+ .post('/dashboard/stdProgressData.json', {
|
|
| 377 |
+ std_id: vm.currentStdId, |
|
| 378 |
+ current_date: vm.currentDate, |
|
| 379 |
+ }) |
|
| 380 |
+ .then((response) => {
|
|
| 360 | 381 |
vm.donutChartData = response.data; |
| 361 | 382 |
console.log(vm.donutChartData); |
| 362 | 383 |
}) |
| 363 |
- .catch(error => {
|
|
| 384 |
+ .catch((error) => {
|
|
| 364 | 385 |
console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
|
| 365 |
- }) |
|
| 386 |
+ }); |
|
| 366 | 387 |
}, |
| 367 |
- |
|
| 368 | 388 |
}, |
| 369 | 389 |
|
| 370 |
- watch: {
|
|
| 390 |
+ watch: {},
|
|
| 371 | 391 |
|
| 372 |
- }, |
|
| 373 |
- |
|
| 374 |
- computed: {
|
|
| 375 |
- |
|
| 376 |
- }, |
|
| 392 |
+ computed: {},
|
|
| 377 | 393 |
|
| 378 | 394 |
components: {
|
| 379 | 395 |
Header: Header, |
... | ... | @@ -387,7 +403,6 @@ |
| 387 | 403 |
CategoryBarChart, |
| 388 | 404 |
Dounutchart: Dounutchart, |
| 389 | 405 |
ColumnLineChart: ColumnLineChart, |
| 390 |
- |
|
| 391 | 406 |
}, |
| 392 | 407 |
|
| 393 | 408 |
mounted() {
|
... | ... | @@ -398,9 +413,8 @@ |
| 398 | 413 |
this.getUserRankByScore(); |
| 399 | 414 |
this.problemRankByProblemData(); |
| 400 | 415 |
this.getUserRankByStudyTime(); |
| 401 |
- } |
|
| 402 |
- |
|
| 403 |
-} |
|
| 416 |
+ }, |
|
| 417 |
+}; |
|
| 404 | 418 |
</script> |
| 405 | 419 |
|
| 406 | 420 |
<style scoped> |
... | ... | @@ -410,4 +424,30 @@ |
| 410 | 424 |
width: 100%; |
| 411 | 425 |
height: 100%; |
| 412 | 426 |
} |
| 413 |
-</style>(파일 끝에 줄바꿈 문자 없음) |
|
| 427 |
+ |
|
| 428 |
+.history-box {
|
|
| 429 |
+ background-color: white; |
|
| 430 |
+ padding: 30px 20px; |
|
| 431 |
+ border: 1px solid #c6c6c6; |
|
| 432 |
+ border-radius: 10px; |
|
| 433 |
+} |
|
| 434 |
+ |
|
| 435 |
+.history-box li {
|
|
| 436 |
+ background-color: #eaedf4; |
|
| 437 |
+ border-radius: 10px; |
|
| 438 |
+ font-size: 18px; |
|
| 439 |
+ list-style-type: none; |
|
| 440 |
+ padding: 10px; |
|
| 441 |
+ width: 100%; |
|
| 442 |
+} |
|
| 443 |
+ |
|
| 444 |
+.problem-box {
|
|
| 445 |
+ display: flex; |
|
| 446 |
+ align-items: center; |
|
| 447 |
+ justify-content: center; |
|
| 448 |
+ border: 2px solid #6327b9; |
|
| 449 |
+ background-color: #f0eaf8; |
|
| 450 |
+ border-radius: 8px; |
|
| 451 |
+ padding: 10px 10px; |
|
| 452 |
+} |
|
| 453 |
+</style> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?