정다정
11-19
241119 정다정 레이아웃 수정
@20552e3fd134d31452e29c96ec132c6749732c1c
--- client/views/pages/main/Dashboard.vue
+++ client/views/pages/main/Dashboard.vue
... | ... | @@ -1,1257 +1,1527 @@ |
| 1 | 1 |
<template> |
| 2 |
- <p class="title1" v-if="state === 'finish'" style="position: absolute; top: 50%; transform: translate(0, -50%)"> |
|
| 3 |
- 오늘 공부를 다했어요! 너무 고생했어요! |
|
| 4 |
- </p> |
|
| 5 |
- <div class="title1" v-else-if="state === 'notRegistered'" |
|
| 6 |
- style="position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;"> |
|
| 7 |
- <div class="title-box" style="text-align: center;"> |
|
| 8 |
- <img src="../../../resources/img/new_img/dashboard/rabbit.png"> |
|
| 9 |
- <h3 class="title" style=" margin-top: 1em; letter-spacing: 2px; line-height: 42px; font-size: 30px"> |
|
| 10 |
- 지금은 학습 루트가 등록이 안됐어요! <br> 학습 일정에서 학습루트를 |
|
| 11 |
- 등록해볼까요? |
|
| 12 |
- </h3> |
|
| 13 |
- <div @click="goToPage2('MyPlan2')" style="cursor: pointer; margin-top: 2em;">
|
|
| 14 |
- <img src="../../../resources/img/new_img/dashboard/btn.png"> |
|
| 15 |
- </div> |
|
| 2 |
+ <p class="title1" v-if="state === 'finish'" style="position: absolute; top: 50%; transform: translate(0, -50%)"> |
|
| 3 |
+ 오늘 공부를 다했어요! 너무 고생했어요! |
|
| 4 |
+ </p> |
|
| 5 |
+ <div |
|
| 6 |
+ class="title1" |
|
| 7 |
+ v-else-if="state === 'notRegistered'" |
|
| 8 |
+ style="position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%" |
|
| 9 |
+ > |
|
| 10 |
+ <div class="title-box" style="text-align: center"> |
|
| 11 |
+ <img src="../../../resources/img/new_img/dashboard/rabbit.png" /> |
|
| 12 |
+ <h3 class="title" style="margin-top: 1em; letter-spacing: 2px; line-height: 42px; font-size: 30px"> |
|
| 13 |
+ 지금은 학습 루트가 등록이 안됐어요! <br /> |
|
| 14 |
+ 학습 일정에서 학습루트를 등록해볼까요? |
|
| 15 |
+ </h3> |
|
| 16 |
+ <div @click="goToPage2('MyPlan2')" style="cursor: pointer; margin-top: 2em">
|
|
| 17 |
+ <img src="../../../resources/img/new_img/dashboard/btn.png" /> |
|
| 18 |
+ </div> |
|
| 19 |
+ </div> |
|
| 16 | 20 |
</div> |
| 17 |
- </div> |
|
| 18 |
- <p class="title1" v-else-if="state === 'noProblem'" |
|
| 19 |
- style="position: absolute; top: 50%; transform: translate(0, -50%)"> |
|
| 20 |
- 교재에 등록된 문제가 없습니다. |
|
| 21 |
- </p> |
|
| 22 |
- <div v-else class="main"> |
|
| 23 |
- <div class="race-wrap"> |
|
| 24 |
- <!-- <div class="title-box"> |
|
| 21 |
+ <p |
|
| 22 |
+ class="title1" |
|
| 23 |
+ v-else-if="state === 'noProblem'" |
|
| 24 |
+ style="position: absolute; top: 50%; transform: translate(0, -50%)" |
|
| 25 |
+ > |
|
| 26 |
+ 교재에 등록된 문제가 없습니다. |
|
| 27 |
+ </p> |
|
| 28 |
+ <div v-else class="main"> |
|
| 29 |
+ <div class="race-wrap"> |
|
| 30 |
+ <!-- <div class="title-box"> |
|
| 25 | 31 |
<p class="title" style="margin-top: 7rem">{{ titleUnitName }}</p>
|
| 26 | 32 |
<p class="subtitle">{{ titleBookName }}</p>
|
| 27 | 33 |
</div> --> |
| 28 |
- <div class="race-box"> |
|
| 29 |
- <div class="rabbit-start"> |
|
| 30 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 31 |
- :style="{ display: rabbitPos[0] ? 'block' : 'none' }" />
|
|
| 32 |
- </div> |
|
| 33 |
- <!-- 1번째줄 --> |
|
| 34 |
- <div class="rcon flex justify-end mb5" style="position: relative; top: 24px"> |
|
| 35 |
- <!-- 1 --> |
|
| 36 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[0])]"> |
|
| 37 |
- <div class="rabbit-running"> |
|
| 38 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 39 |
- :style="{ display: rabbitPos[1] ? 'block' : 'none' }" />
|
|
| 34 |
+ <div class="race-box"> |
|
| 35 |
+ <div class="rabbit-start"> |
|
| 36 |
+ <img |
|
| 37 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 38 |
+ alt="" |
|
| 39 |
+ :style="{ display: rabbitPos[0] ? 'block' : 'none' }"
|
|
| 40 |
+ /> |
|
| 41 |
+ </div> |
|
| 42 |
+ <!-- 1번째줄 --> |
|
| 43 |
+ <div class="rcon flex justify-end mb5" style="position: relative; top: 24px"> |
|
| 44 |
+ <!-- 1 --> |
|
| 45 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[0])]"> |
|
| 46 |
+ <div class="rabbit-running"> |
|
| 47 |
+ <img |
|
| 48 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 49 |
+ alt="" |
|
| 50 |
+ :style="{ display: rabbitPos[1] ? 'block' : 'none' }"
|
|
| 51 |
+ /> |
|
| 52 |
+ </div> |
|
| 53 |
+ <button |
|
| 54 |
+ class="popTxt" |
|
| 55 |
+ v-for="(item, index) in items" |
|
| 56 |
+ :key="index" |
|
| 57 |
+ @click="toggleImage(index)" |
|
| 58 |
+ data-num="1" |
|
| 59 |
+ > |
|
| 60 |
+ <div class="image-container"> |
|
| 61 |
+ <img |
|
| 62 |
+ src="../../../resources/img/new_img/board/racebtn_1.png" |
|
| 63 |
+ alt="Race Button" |
|
| 64 |
+ class="base-img" |
|
| 65 |
+ /> |
|
| 66 |
+ <img |
|
| 67 |
+ v-if="rabbitCompl[1]" |
|
| 68 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 69 |
+ alt="Clear Icon" |
|
| 70 |
+ class="clear-img" |
|
| 71 |
+ /> |
|
| 72 |
+ </div> |
|
| 73 |
+ </button> |
|
| 74 |
+ <p :class="!rabbitCompl[1] ? 'before-clear' : 'clear'"> |
|
| 75 |
+ <img |
|
| 76 |
+ v-if="rabbitCompl[1]" |
|
| 77 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 78 |
+ alt="Complete Icon" |
|
| 79 |
+ class="complete-icon" |
|
| 80 |
+ /> |
|
| 81 |
+ {{ labeledItems[0].label }}
|
|
| 82 |
+ </p> |
|
| 83 |
+ </div> |
|
| 84 |
+ <!-- 2 --> |
|
| 85 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[1])]"> |
|
| 86 |
+ <div class="rabbit-running"> |
|
| 87 |
+ <img |
|
| 88 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 89 |
+ alt="" |
|
| 90 |
+ :style="{ display: rabbitPos[2] ? 'block' : 'none' }"
|
|
| 91 |
+ /> |
|
| 92 |
+ </div> |
|
| 93 |
+ <button |
|
| 94 |
+ class="popTxt" |
|
| 95 |
+ v-for="(item, index) in items" |
|
| 96 |
+ :key="index" |
|
| 97 |
+ @click="toggleImage(index)" |
|
| 98 |
+ data-num="2" |
|
| 99 |
+ > |
|
| 100 |
+ <div class="image-container"> |
|
| 101 |
+ <img |
|
| 102 |
+ src="../../../resources/img/new_img/board/racebtn_2.png" |
|
| 103 |
+ alt="Race Button" |
|
| 104 |
+ class="base-img" |
|
| 105 |
+ /> |
|
| 106 |
+ <img |
|
| 107 |
+ v-if="rabbitCompl[2]" |
|
| 108 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 109 |
+ alt="Clear Icon" |
|
| 110 |
+ class="clear-img" |
|
| 111 |
+ style="position: absolute; left: 16px" |
|
| 112 |
+ /> |
|
| 113 |
+ </div> |
|
| 114 |
+ </button> |
|
| 115 |
+ <p :class="!rabbitCompl[2] ? 'before-clear' : 'clear'"> |
|
| 116 |
+ <img |
|
| 117 |
+ v-if="rabbitCompl[2]" |
|
| 118 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 119 |
+ alt="Complete Icon" |
|
| 120 |
+ class="complete-icon" |
|
| 121 |
+ /> |
|
| 122 |
+ {{ labeledItems[1].label }}
|
|
| 123 |
+ </p> |
|
| 124 |
+ </div> |
|
| 125 |
+ </div> |
|
| 126 |
+ <!-- 2번째줄 --> |
|
| 127 |
+ <div class="lcon flex justify-between mb5"> |
|
| 128 |
+ <!-- 7 --> |
|
| 129 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[6])]"> |
|
| 130 |
+ <div class="rabbit-running" style="top: -71px"> |
|
| 131 |
+ <img |
|
| 132 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 133 |
+ alt="" |
|
| 134 |
+ :style="{ display: rabbitPos[7] ? 'block' : 'none' }"
|
|
| 135 |
+ /> |
|
| 136 |
+ </div> |
|
| 137 |
+ <button |
|
| 138 |
+ class="popTxt" |
|
| 139 |
+ v-for="(item, index) in items" |
|
| 140 |
+ :key="index" |
|
| 141 |
+ @click="toggleImage(index)" |
|
| 142 |
+ data-num="7" |
|
| 143 |
+ style="top: -53px; position: relative" |
|
| 144 |
+ > |
|
| 145 |
+ <div class="image-container"> |
|
| 146 |
+ <img |
|
| 147 |
+ src="../../../resources/img/new_img/board/racebtn_7.png" |
|
| 148 |
+ alt="Race Button" |
|
| 149 |
+ class="base-img" |
|
| 150 |
+ /> |
|
| 151 |
+ <img |
|
| 152 |
+ v-if="rabbitCompl[7]" |
|
| 153 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 154 |
+ alt="Clear Icon" |
|
| 155 |
+ class="clear-img" |
|
| 156 |
+ style="position: absolute; top: 85px" |
|
| 157 |
+ /> |
|
| 158 |
+ </div> |
|
| 159 |
+ </button> |
|
| 160 |
+ <p |
|
| 161 |
+ :class="!rabbitCompl[7] ? 'before-clear' : 'clear'" |
|
| 162 |
+ style="position: relative; top: -53px; left: -10px" |
|
| 163 |
+ > |
|
| 164 |
+ <img |
|
| 165 |
+ v-if="rabbitCompl[7]" |
|
| 166 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 167 |
+ alt="Complete Icon" |
|
| 168 |
+ class="complete-icon" |
|
| 169 |
+ /> |
|
| 170 |
+ {{ labeledItems[6].label }}
|
|
| 171 |
+ </p> |
|
| 172 |
+ </div> |
|
| 173 |
+ <!-- 6 --> |
|
| 174 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[5])]"> |
|
| 175 |
+ <div class="rabbit-running"> |
|
| 176 |
+ <img |
|
| 177 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 178 |
+ alt="" |
|
| 179 |
+ :style="{ display: rabbitPos[6] ? 'block' : 'none' }"
|
|
| 180 |
+ /> |
|
| 181 |
+ </div> |
|
| 182 |
+ <button |
|
| 183 |
+ class="popTxt" |
|
| 184 |
+ v-for="(item, index) in items" |
|
| 185 |
+ :key="index" |
|
| 186 |
+ @click="toggleImage(index)" |
|
| 187 |
+ data-num="6" |
|
| 188 |
+ > |
|
| 189 |
+ <div class="image-container"> |
|
| 190 |
+ <img |
|
| 191 |
+ src="../../../resources/img/new_img/board/racebtn_6.png" |
|
| 192 |
+ alt="Race Button" |
|
| 193 |
+ class="base-img" |
|
| 194 |
+ /> |
|
| 195 |
+ <img |
|
| 196 |
+ v-if="rabbitCompl[6]" |
|
| 197 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 198 |
+ alt="Clear Icon" |
|
| 199 |
+ class="clear-img" |
|
| 200 |
+ /> |
|
| 201 |
+ </div> |
|
| 202 |
+ </button> |
|
| 203 |
+ <p :class="!rabbitCompl[6] ? 'before-clear' : 'clear'"> |
|
| 204 |
+ <img |
|
| 205 |
+ v-if="rabbitCompl[6]" |
|
| 206 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 207 |
+ alt="Complete Icon" |
|
| 208 |
+ class="complete-icon" |
|
| 209 |
+ /> |
|
| 210 |
+ {{ labeledItems[5].label }}
|
|
| 211 |
+ </p> |
|
| 212 |
+ </div> |
|
| 213 |
+ <!-- 5 --> |
|
| 214 |
+ <div |
|
| 215 |
+ class="race-btn" |
|
| 216 |
+ @click="[storeLearningId(labeledItems[4])]" |
|
| 217 |
+ style="position: relative; left: -31px" |
|
| 218 |
+ > |
|
| 219 |
+ <div class="rabbit-running"> |
|
| 220 |
+ <img |
|
| 221 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 222 |
+ alt="" |
|
| 223 |
+ :style="{ display: rabbitPos[5] ? 'block' : 'none' }"
|
|
| 224 |
+ /> |
|
| 225 |
+ </div> |
|
| 226 |
+ <button |
|
| 227 |
+ class="popTxt" |
|
| 228 |
+ v-for="(item, index) in items" |
|
| 229 |
+ :key="index" |
|
| 230 |
+ @click="toggleImage(index)" |
|
| 231 |
+ data-num="5" |
|
| 232 |
+ > |
|
| 233 |
+ <div class="image-container"> |
|
| 234 |
+ <img |
|
| 235 |
+ src="../../../resources/img/new_img/board/racebtn_5.png" |
|
| 236 |
+ alt="Race Button" |
|
| 237 |
+ class="base-img" |
|
| 238 |
+ /> |
|
| 239 |
+ <img |
|
| 240 |
+ v-if="rabbitCompl[5]" |
|
| 241 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 242 |
+ alt="Clear Icon" |
|
| 243 |
+ class="clear-img" |
|
| 244 |
+ /> |
|
| 245 |
+ </div> |
|
| 246 |
+ </button> |
|
| 247 |
+ <p :class="!rabbitCompl[5] ? 'before-clear' : 'clear'"> |
|
| 248 |
+ <img |
|
| 249 |
+ v-if="rabbitCompl[5]" |
|
| 250 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 251 |
+ alt="Complete Icon" |
|
| 252 |
+ class="complete-icon" |
|
| 253 |
+ /> |
|
| 254 |
+ {{ labeledItems[4].label }}
|
|
| 255 |
+ </p> |
|
| 256 |
+ </div> |
|
| 257 |
+ <!-- 4 --> |
|
| 258 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[3])]"> |
|
| 259 |
+ <div class="rabbit-running"> |
|
| 260 |
+ <img |
|
| 261 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 262 |
+ alt="" |
|
| 263 |
+ :style="{ display: rabbitPos[4] ? 'block' : 'none' }"
|
|
| 264 |
+ /> |
|
| 265 |
+ </div> |
|
| 266 |
+ <button |
|
| 267 |
+ class="popTxt" |
|
| 268 |
+ v-for="(item, index) in items" |
|
| 269 |
+ :key="index" |
|
| 270 |
+ @click="toggleImage(index)" |
|
| 271 |
+ data-num="4" |
|
| 272 |
+ > |
|
| 273 |
+ <div class="image-container"> |
|
| 274 |
+ <img |
|
| 275 |
+ src="../../../resources/img/new_img/board/racebtn_4.png" |
|
| 276 |
+ alt="Race Button" |
|
| 277 |
+ class="base-img" |
|
| 278 |
+ /> |
|
| 279 |
+ <img |
|
| 280 |
+ v-if="rabbitCompl[4]" |
|
| 281 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 282 |
+ alt="Clear Icon" |
|
| 283 |
+ class="clear-img" |
|
| 284 |
+ /> |
|
| 285 |
+ </div> |
|
| 286 |
+ </button> |
|
| 287 |
+ <p :class="!rabbitCompl[4] ? 'before-clear' : 'clear'"> |
|
| 288 |
+ <img |
|
| 289 |
+ v-if="rabbitCompl[4]" |
|
| 290 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 291 |
+ alt="Complete Icon" |
|
| 292 |
+ class="complete-icon" |
|
| 293 |
+ /> |
|
| 294 |
+ {{ labeledItems[3].label }}
|
|
| 295 |
+ </p> |
|
| 296 |
+ </div> |
|
| 297 |
+ <!-- 3 --> |
|
| 298 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[2])]" style="right: 12px"> |
|
| 299 |
+ <div class="rabbit-running"> |
|
| 300 |
+ <img |
|
| 301 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 302 |
+ alt="" |
|
| 303 |
+ :style="{ display: rabbitPos[3] ? 'block' : 'none' }"
|
|
| 304 |
+ /> |
|
| 305 |
+ </div> |
|
| 306 |
+ <button |
|
| 307 |
+ class="popTxt" |
|
| 308 |
+ v-for="(item, index) in items" |
|
| 309 |
+ :key="index" |
|
| 310 |
+ @click="toggleImage(index)" |
|
| 311 |
+ data-num="3" |
|
| 312 |
+ > |
|
| 313 |
+ <div class="image-container"> |
|
| 314 |
+ <img |
|
| 315 |
+ src="../../../resources/img/new_img/board/racebtn_3.png" |
|
| 316 |
+ alt="Race Button" |
|
| 317 |
+ class="base-img" |
|
| 318 |
+ /> |
|
| 319 |
+ <img |
|
| 320 |
+ v-if="rabbitCompl[3]" |
|
| 321 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 322 |
+ alt="Clear Icon" |
|
| 323 |
+ class="clear-img" |
|
| 324 |
+ /> |
|
| 325 |
+ </div> |
|
| 326 |
+ </button> |
|
| 327 |
+ <p :class="!rabbitCompl[3] ? 'before-clear' : 'clear'"> |
|
| 328 |
+ <img |
|
| 329 |
+ v-if="rabbitCompl[3]" |
|
| 330 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 331 |
+ alt="Complete Icon" |
|
| 332 |
+ class="complete-icon" |
|
| 333 |
+ /> |
|
| 334 |
+ {{ labeledItems[2].label }}
|
|
| 335 |
+ </p> |
|
| 336 |
+ </div> |
|
| 337 |
+ </div> |
|
| 338 |
+ <!-- 3번째줄 --> |
|
| 339 |
+ <div class="rcon flex" style="position: relative; top: -23px"> |
|
| 340 |
+ <!-- 8 --> |
|
| 341 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[7])]"> |
|
| 342 |
+ <div class="rabbit-running"> |
|
| 343 |
+ <img |
|
| 344 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 345 |
+ alt="" |
|
| 346 |
+ :style="{ display: rabbitPos[8] ? 'block' : 'none' }"
|
|
| 347 |
+ /> |
|
| 348 |
+ </div> |
|
| 349 |
+ <button |
|
| 350 |
+ class="popTxt" |
|
| 351 |
+ v-for="(item, index) in items" |
|
| 352 |
+ :key="index" |
|
| 353 |
+ @click="toggleImage(index)" |
|
| 354 |
+ data-num="8" |
|
| 355 |
+ > |
|
| 356 |
+ <div class="image-container"> |
|
| 357 |
+ <img |
|
| 358 |
+ src="../../../resources/img/new_img/board/racebtn_8.png" |
|
| 359 |
+ alt="Race Button" |
|
| 360 |
+ class="base-img" |
|
| 361 |
+ /> |
|
| 362 |
+ <img |
|
| 363 |
+ v-if="rabbitCompl[8]" |
|
| 364 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 365 |
+ alt="Clear Icon" |
|
| 366 |
+ class="clear-img" |
|
| 367 |
+ /> |
|
| 368 |
+ </div> |
|
| 369 |
+ </button> |
|
| 370 |
+ <p :class="!rabbitCompl[8] ? 'before-clear' : 'clear'"> |
|
| 371 |
+ <img |
|
| 372 |
+ v-if="rabbitCompl[8]" |
|
| 373 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 374 |
+ alt="Complete Icon" |
|
| 375 |
+ class="complete-icon" |
|
| 376 |
+ /> |
|
| 377 |
+ {{ labeledItems[7].label }}
|
|
| 378 |
+ </p> |
|
| 379 |
+ </div> |
|
| 380 |
+ <!-- 9 --> |
|
| 381 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[8])]"> |
|
| 382 |
+ <div class="rabbit-running"> |
|
| 383 |
+ <img |
|
| 384 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 385 |
+ alt="" |
|
| 386 |
+ :style="{ display: rabbitPos[9] ? 'block' : 'none' }"
|
|
| 387 |
+ /> |
|
| 388 |
+ </div> |
|
| 389 |
+ <button |
|
| 390 |
+ class="popTxt" |
|
| 391 |
+ v-for="(item, index) in items" |
|
| 392 |
+ :key="index" |
|
| 393 |
+ @click="toggleImage(index)" |
|
| 394 |
+ data-num="9" |
|
| 395 |
+ > |
|
| 396 |
+ <div class="image-container"> |
|
| 397 |
+ <img |
|
| 398 |
+ src="../../../resources/img/new_img/board/racebtn_9.png" |
|
| 399 |
+ alt="Race Button" |
|
| 400 |
+ class="base-img" |
|
| 401 |
+ /> |
|
| 402 |
+ <img |
|
| 403 |
+ v-if="rabbitCompl[9]" |
|
| 404 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 405 |
+ alt="Clear Icon" |
|
| 406 |
+ class="clear-img" |
|
| 407 |
+ /> |
|
| 408 |
+ </div> |
|
| 409 |
+ </button> |
|
| 410 |
+ <p :class="!rabbitCompl[9] ? 'before-clear' : 'clear'"> |
|
| 411 |
+ <img |
|
| 412 |
+ v-if="rabbitCompl[9]" |
|
| 413 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 414 |
+ alt="Complete Icon" |
|
| 415 |
+ class="complete-icon" |
|
| 416 |
+ /> |
|
| 417 |
+ {{ labeledItems[8].label }}
|
|
| 418 |
+ </p> |
|
| 419 |
+ </div> |
|
| 420 |
+ <!-- 10 --> |
|
| 421 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[9])]"> |
|
| 422 |
+ <div class="rabbit-running"> |
|
| 423 |
+ <img |
|
| 424 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 425 |
+ alt="" |
|
| 426 |
+ :style="{ display: rabbitPos[10] ? 'block' : 'none' }"
|
|
| 427 |
+ /> |
|
| 428 |
+ </div> |
|
| 429 |
+ <button |
|
| 430 |
+ class="popTxt" |
|
| 431 |
+ v-for="(item, index) in items" |
|
| 432 |
+ :key="index" |
|
| 433 |
+ @click="toggleImage(index)" |
|
| 434 |
+ data-num="10" |
|
| 435 |
+ > |
|
| 436 |
+ <div class="image-container"> |
|
| 437 |
+ <img |
|
| 438 |
+ src="../../../resources/img/new_img/board/racebtn_10.png" |
|
| 439 |
+ alt="Race Button" |
|
| 440 |
+ class="base-img" |
|
| 441 |
+ /> |
|
| 442 |
+ <img |
|
| 443 |
+ v-if="rabbitCompl[10]" |
|
| 444 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 445 |
+ alt="Clear Icon" |
|
| 446 |
+ class="clear-img" |
|
| 447 |
+ /> |
|
| 448 |
+ </div> |
|
| 449 |
+ </button> |
|
| 450 |
+ <p :class="!rabbitCompl[10] ? 'before-clear' : 'clear'"> |
|
| 451 |
+ <img |
|
| 452 |
+ v-if="rabbitCompl[10]" |
|
| 453 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 454 |
+ alt="Complete Icon" |
|
| 455 |
+ class="complete-icon" |
|
| 456 |
+ /> |
|
| 457 |
+ {{ labeledItems[9].label }}
|
|
| 458 |
+ </p> |
|
| 459 |
+ </div> |
|
| 460 |
+ <!-- 11 --> |
|
| 461 |
+ <div class="race-btn" @click="[storeLearningId(labeledItems[10])]"> |
|
| 462 |
+ <div class="rabbit-running"> |
|
| 463 |
+ <img |
|
| 464 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 465 |
+ alt="" |
|
| 466 |
+ :style="{ display: rabbitPos[11] ? 'block' : 'none' }"
|
|
| 467 |
+ /> |
|
| 468 |
+ </div> |
|
| 469 |
+ <button |
|
| 470 |
+ class="popTxt" |
|
| 471 |
+ v-for="(item, index) in items" |
|
| 472 |
+ :key="index" |
|
| 473 |
+ @click="toggleImageAndShowPopup(index, '11')" |
|
| 474 |
+ data-num="11" |
|
| 475 |
+ > |
|
| 476 |
+ <div class="image-container"> |
|
| 477 |
+ <img |
|
| 478 |
+ src="../../../resources/img/new_img/board/racebtn_11.png" |
|
| 479 |
+ alt="Race Button" |
|
| 480 |
+ class="base-img" |
|
| 481 |
+ /> |
|
| 482 |
+ <img |
|
| 483 |
+ v-if="rabbitCompl[11]" |
|
| 484 |
+ src="../../../resources/img/new_img/icon/clear_img.png" |
|
| 485 |
+ alt="Clear Icon" |
|
| 486 |
+ class="clear-img" |
|
| 487 |
+ /> |
|
| 488 |
+ </div> |
|
| 489 |
+ </button> |
|
| 490 |
+ <p :class="!rabbitCompl[11] ? 'before-clear' : 'clear'"> |
|
| 491 |
+ <img |
|
| 492 |
+ v-if="rabbitCompl[11]" |
|
| 493 |
+ src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 494 |
+ alt="Complete Icon" |
|
| 495 |
+ class="complete-icon" |
|
| 496 |
+ /> |
|
| 497 |
+ {{ labeledItems[10].label }}
|
|
| 498 |
+ </p> |
|
| 499 |
+ </div> |
|
| 500 |
+ </div> |
|
| 501 |
+ <div class="race-btn"> |
|
| 502 |
+ <div class="rabbit-running" style="display: flex"> |
|
| 503 |
+ <img |
|
| 504 |
+ class="rabbit-end" |
|
| 505 |
+ src="../../../resources/img/new_img/rabbit.png" |
|
| 506 |
+ alt="" |
|
| 507 |
+ :style="{ display: rabbitEnd ? 'block' : 'none' }"
|
|
| 508 |
+ /> |
|
| 509 |
+ <img |
|
| 510 |
+ class="fireworks-end" |
|
| 511 |
+ src="../../../resources/img/fireworks.gif" |
|
| 512 |
+ alt="" |
|
| 513 |
+ :style="{ display: rabbitEnd ? 'block' : 'none' }"
|
|
| 514 |
+ /> |
|
| 515 |
+ </div> |
|
| 516 |
+ </div> |
|
| 40 | 517 |
</div> |
| 41 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1"> |
|
| 42 |
- <div class="image-container"> |
|
| 43 |
- <img src="../../../resources/img/new_img/board/racebtn_1.png" alt="Race Button" class="base-img" /> |
|
| 44 |
- <img v-if="rabbitCompl[1]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 45 |
- class="clear-img" /> |
|
| 46 |
- </div> |
|
| 47 |
- </button> |
|
| 48 |
- <p :class="!rabbitCompl[1] ? 'before-clear' : 'clear'"> |
|
| 49 |
- <img v-if="rabbitCompl[1]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 50 |
- class="complete-icon" /> |
|
| 51 |
- {{ labeledItems[0].label }}
|
|
| 52 |
- </p> |
|
| 53 |
- </div> |
|
| 54 |
- <!-- 2 --> |
|
| 55 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[1])]"> |
|
| 56 |
- <div class="rabbit-running"> |
|
| 57 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 58 |
- :style="{ display: rabbitPos[2] ? 'block' : 'none' }" />
|
|
| 59 |
- </div> |
|
| 60 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2"> |
|
| 61 |
- <div class="image-container"> |
|
| 62 |
- <img src="../../../resources/img/new_img/board/racebtn_2.png" alt="Race Button" class="base-img" /> |
|
| 63 |
- <img v-if="rabbitCompl[2]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 64 |
- class="clear-img" style="position: absolute; left: 16px" /> |
|
| 65 |
- </div> |
|
| 66 |
- </button> |
|
| 67 |
- <p :class="!rabbitCompl[2] ? 'before-clear' : 'clear'"> |
|
| 68 |
- <img v-if="rabbitCompl[2]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 69 |
- class="complete-icon" /> |
|
| 70 |
- {{ labeledItems[1].label }}
|
|
| 71 |
- </p> |
|
| 72 |
- </div> |
|
| 73 |
- </div> |
|
| 74 |
- <!-- 2번째줄 --> |
|
| 75 |
- <div class="lcon flex justify-between mb5"> |
|
| 76 |
- <!-- 7 --> |
|
| 77 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[6])]"> |
|
| 78 |
- <div class="rabbit-running" style="top: -71px"> |
|
| 79 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 80 |
- :style="{ display: rabbitPos[7] ? 'block' : 'none' }" />
|
|
| 81 |
- </div> |
|
| 82 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7" |
|
| 83 |
- style="top: -53px; position: relative"> |
|
| 84 |
- <div class="image-container"> |
|
| 85 |
- <img src="../../../resources/img/new_img/board/racebtn_7.png" alt="Race Button" class="base-img" /> |
|
| 86 |
- <img v-if="rabbitCompl[7]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 87 |
- class="clear-img" style="position: absolute; top: 85px" /> |
|
| 88 |
- </div> |
|
| 89 |
- </button> |
|
| 90 |
- <p :class="!rabbitCompl[7] ? 'before-clear' : 'clear'" style="position: relative; top: -53px; left: -10px"> |
|
| 91 |
- <img v-if="rabbitCompl[7]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 92 |
- class="complete-icon" /> |
|
| 93 |
- {{ labeledItems[6].label }}
|
|
| 94 |
- </p> |
|
| 95 |
- </div> |
|
| 96 |
- <!-- 6 --> |
|
| 97 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[5])]"> |
|
| 98 |
- <div class="rabbit-running"> |
|
| 99 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 100 |
- :style="{ display: rabbitPos[6] ? 'block' : 'none' }" />
|
|
| 101 |
- </div> |
|
| 102 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6"> |
|
| 103 |
- <div class="image-container"> |
|
| 104 |
- <img src="../../../resources/img/new_img/board/racebtn_6.png" alt="Race Button" class="base-img" /> |
|
| 105 |
- <img v-if="rabbitCompl[6]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 106 |
- class="clear-img" /> |
|
| 107 |
- </div> |
|
| 108 |
- </button> |
|
| 109 |
- <p :class="!rabbitCompl[6] ? 'before-clear' : 'clear'"> |
|
| 110 |
- <img v-if="rabbitCompl[6]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 111 |
- class="complete-icon" /> |
|
| 112 |
- {{ labeledItems[5].label }}
|
|
| 113 |
- </p> |
|
| 114 |
- </div> |
|
| 115 |
- <!-- 5 --> |
|
| 116 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[4])]" style="position: relative; left: -31px"> |
|
| 117 |
- <div class="rabbit-running"> |
|
| 118 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 119 |
- :style="{ display: rabbitPos[5] ? 'block' : 'none' }" />
|
|
| 120 |
- </div> |
|
| 121 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5"> |
|
| 122 |
- <div class="image-container"> |
|
| 123 |
- <img src="../../../resources/img/new_img/board/racebtn_5.png" alt="Race Button" class="base-img" /> |
|
| 124 |
- <img v-if="rabbitCompl[5]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 125 |
- class="clear-img" /> |
|
| 126 |
- </div> |
|
| 127 |
- </button> |
|
| 128 |
- <p :class="!rabbitCompl[5] ? 'before-clear' : 'clear'"> |
|
| 129 |
- <img v-if="rabbitCompl[5]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 130 |
- class="complete-icon" /> |
|
| 131 |
- {{ labeledItems[4].label }}
|
|
| 132 |
- </p> |
|
| 133 |
- </div> |
|
| 134 |
- <!-- 4 --> |
|
| 135 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[3])]"> |
|
| 136 |
- <div class="rabbit-running"> |
|
| 137 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 138 |
- :style="{ display: rabbitPos[4] ? 'block' : 'none' }" />
|
|
| 139 |
- </div> |
|
| 140 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4"> |
|
| 141 |
- <div class="image-container"> |
|
| 142 |
- <img src="../../../resources/img/new_img/board/racebtn_4.png" alt="Race Button" class="base-img" /> |
|
| 143 |
- <img v-if="rabbitCompl[4]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 144 |
- class="clear-img" /> |
|
| 145 |
- </div> |
|
| 146 |
- </button> |
|
| 147 |
- <p :class="!rabbitCompl[4] ? 'before-clear' : 'clear'"> |
|
| 148 |
- <img v-if="rabbitCompl[4]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 149 |
- class="complete-icon" /> |
|
| 150 |
- {{ labeledItems[3].label }}
|
|
| 151 |
- </p> |
|
| 152 |
- </div> |
|
| 153 |
- <!-- 3 --> |
|
| 154 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[2])]" style="right: 12px"> |
|
| 155 |
- <div class="rabbit-running"> |
|
| 156 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 157 |
- :style="{ display: rabbitPos[3] ? 'block' : 'none' }" />
|
|
| 158 |
- </div> |
|
| 159 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3"> |
|
| 160 |
- <div class="image-container"> |
|
| 161 |
- <img src="../../../resources/img/new_img/board/racebtn_3.png" alt="Race Button" class="base-img" /> |
|
| 162 |
- <img v-if="rabbitCompl[3]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 163 |
- class="clear-img" /> |
|
| 164 |
- </div> |
|
| 165 |
- </button> |
|
| 166 |
- <p :class="!rabbitCompl[3] ? 'before-clear' : 'clear'"> |
|
| 167 |
- <img v-if="rabbitCompl[3]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 168 |
- class="complete-icon" /> |
|
| 169 |
- {{ labeledItems[2].label }}
|
|
| 170 |
- </p> |
|
| 171 |
- </div> |
|
| 172 |
- </div> |
|
| 173 |
- <!-- 3번째줄 --> |
|
| 174 |
- <div class="rcon flex" style="position: relative; top: -23px"> |
|
| 175 |
- <!-- 8 --> |
|
| 176 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[7])]"> |
|
| 177 |
- <div class="rabbit-running"> |
|
| 178 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 179 |
- :style="{ display: rabbitPos[8] ? 'block' : 'none' }" />
|
|
| 180 |
- </div> |
|
| 181 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8"> |
|
| 182 |
- <div class="image-container"> |
|
| 183 |
- <img src="../../../resources/img/new_img/board/racebtn_8.png" alt="Race Button" class="base-img" /> |
|
| 184 |
- <img v-if="rabbitCompl[8]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 185 |
- class="clear-img" /> |
|
| 186 |
- </div> |
|
| 187 |
- </button> |
|
| 188 |
- <p :class="!rabbitCompl[8] ? 'before-clear' : 'clear'"> |
|
| 189 |
- <img v-if="rabbitCompl[8]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 190 |
- class="complete-icon" /> |
|
| 191 |
- {{ labeledItems[7].label }}
|
|
| 192 |
- </p> |
|
| 193 |
- </div> |
|
| 194 |
- <!-- 9 --> |
|
| 195 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[8])]"> |
|
| 196 |
- <div class="rabbit-running"> |
|
| 197 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 198 |
- :style="{ display: rabbitPos[9] ? 'block' : 'none' }" />
|
|
| 199 |
- </div> |
|
| 200 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9"> |
|
| 201 |
- <div class="image-container"> |
|
| 202 |
- <img src="../../../resources/img/new_img/board/racebtn_9.png" alt="Race Button" class="base-img" /> |
|
| 203 |
- <img v-if="rabbitCompl[9]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 204 |
- class="clear-img" /> |
|
| 205 |
- </div> |
|
| 206 |
- </button> |
|
| 207 |
- <p :class="!rabbitCompl[9] ? 'before-clear' : 'clear'"> |
|
| 208 |
- <img v-if="rabbitCompl[9]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon" |
|
| 209 |
- class="complete-icon" /> |
|
| 210 |
- {{ labeledItems[8].label }}
|
|
| 211 |
- </p> |
|
| 212 |
- </div> |
|
| 213 |
- <!-- 10 --> |
|
| 214 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[9])]"> |
|
| 215 |
- <div class="rabbit-running"> |
|
| 216 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 217 |
- :style="{ display: rabbitPos[10] ? 'block' : 'none' }" />
|
|
| 218 |
- </div> |
|
| 219 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" |
|
| 220 |
- data-num="10"> |
|
| 221 |
- <div class="image-container"> |
|
| 222 |
- <img src="../../../resources/img/new_img/board/racebtn_10.png" alt="Race Button" class="base-img" /> |
|
| 223 |
- <img v-if="rabbitCompl[10]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 224 |
- class="clear-img" /> |
|
| 225 |
- </div> |
|
| 226 |
- </button> |
|
| 227 |
- <p :class="!rabbitCompl[10] ? 'before-clear' : 'clear'"> |
|
| 228 |
- <img v-if="rabbitCompl[10]" src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 229 |
- alt="Complete Icon" class="complete-icon" /> |
|
| 230 |
- {{ labeledItems[9].label }}
|
|
| 231 |
- </p> |
|
| 232 |
- </div> |
|
| 233 |
- <!-- 11 --> |
|
| 234 |
- <div class="race-btn" @click="[storeLearningId(labeledItems[10])]"> |
|
| 235 |
- <div class="rabbit-running"> |
|
| 236 |
- <img src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 237 |
- :style="{ display: rabbitPos[11] ? 'block' : 'none' }" />
|
|
| 238 |
- </div> |
|
| 239 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" |
|
| 240 |
- @click="toggleImageAndShowPopup(index, '11')" data-num="11"> |
|
| 241 |
- <div class="image-container"> |
|
| 242 |
- <img src="../../../resources/img/new_img/board/racebtn_11.png" alt="Race Button" class="base-img" /> |
|
| 243 |
- <img v-if="rabbitCompl[11]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon" |
|
| 244 |
- class="clear-img" /> |
|
| 245 |
- </div> |
|
| 246 |
- </button> |
|
| 247 |
- <p :class="!rabbitCompl[11] ? 'before-clear' : 'clear'"> |
|
| 248 |
- <img v-if="rabbitCompl[11]" src="../../../resources/img/new_img/icon/complete_icon.png" |
|
| 249 |
- alt="Complete Icon" class="complete-icon" /> |
|
| 250 |
- {{ labeledItems[10].label }}
|
|
| 251 |
- </p> |
|
| 252 |
- </div> |
|
| 253 |
- </div> |
|
| 254 |
- <div class="race-btn"> |
|
| 255 |
- <div class="rabbit-running" style="display: flex"> |
|
| 256 |
- <img class="rabbit-end" src="../../../resources/img/new_img/rabbit.png" alt="" |
|
| 257 |
- :style="{ display: rabbitEnd ? 'block' : 'none' }" />
|
|
| 258 |
- <img class="fireworks-end" src="../../../resources/img/fireworks.gif" alt="" |
|
| 259 |
- :style="{ display: rabbitEnd ? 'block' : 'none' }" />
|
|
| 260 |
- </div> |
|
| 261 |
- </div> |
|
| 262 |
- </div> |
|
| 263 | 518 |
|
| 264 |
- <!-- 팝업 --> |
|
| 265 |
- <div v-show="searchOpen2" class="popup-wrap"> |
|
| 266 |
- <div class="popup-box"> |
|
| 267 |
- <button type="button" class="popup-close-btn" style="position: absolute; top: 10px; right: 10px" |
|
| 268 |
- @click="closeModal"> |
|
| 269 |
- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 270 |
- </button> |
|
| 519 |
+ <!-- 팝업 --> |
|
| 520 |
+ <div v-show="searchOpen2" class="phogo-popup popup-wrap"> |
|
| 521 |
+ <div class="popup-box"> |
|
| 522 |
+ <button |
|
| 523 |
+ type="button" |
|
| 524 |
+ class="popup-close-btn" |
|
| 525 |
+ style="position: absolute; top: 10px; right: 10px" |
|
| 526 |
+ @click="closeModal" |
|
| 527 |
+ > |
|
| 528 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 529 |
+ </button> |
|
| 271 | 530 |
|
| 272 |
- <div class="mb30 text-ct"> |
|
| 273 |
- <p class="title1 mb20">1단원이 끝났습니다!</p> |
|
| 274 |
- <p class="title1"> |
|
| 275 |
- <em class="yellow">기념사진</em>을 촬영하러 가요 |
|
| 276 |
- </p> |
|
| 277 |
- </div> |
|
| 278 |
- <div class="flex justify-center"> |
|
| 279 |
- <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal"> |
|
| 280 |
- 사진 촬영 |
|
| 281 |
- </button> |
|
| 282 |
- </div> |
|
| 283 |
- </div> |
|
| 284 |
- </div> |
|
| 285 |
- <!-- 카메라 모달 --> |
|
| 286 |
- <article v-show="showCameraModal" class="popup-wrap"> |
|
| 287 |
- <div class="popup-box" style="top: 500px; left: 500px"> |
|
| 288 |
- <div class="flex mb10 justify-between"> |
|
| 289 |
- <p class="popup-title">사진 촬영</p> |
|
| 290 |
- <button type="button" class="popup-close-btn" @click="closeModal"> |
|
| 291 |
- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 292 |
- </button> |
|
| 293 |
- </div> |
|
| 294 |
- <div class="box"> |
|
| 295 |
- <div style="width: 100%"> |
|
| 296 |
- <div id="container" ref="container"> |
|
| 297 |
- <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored" |
|
| 298 |
- @canplay="onVideoLoaded" style="position: absolute; height: 100%"></video> |
|
| 299 |
- <img src="../../../resources/img/camera-rabbit.png" class="camera-rabbit" style="position: absolute" /> |
|
| 300 |
- <canvas ref="canvas" style="pointer-events: none"></canvas> |
|
| 301 |
- </div> |
|
| 531 |
+ <div class="mb30 text-ct"> |
|
| 532 |
+ <p class="title1 mb20">1단원이 끝났습니다!</p> |
|
| 533 |
+ <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p> |
|
| 534 |
+ </div> |
|
| 535 |
+ <div class="flex justify-center"> |
|
| 536 |
+ <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal"> |
|
| 537 |
+ 사진 촬영 |
|
| 538 |
+ </button> |
|
| 539 |
+ </div> |
|
| 540 |
+ </div> |
|
| 302 | 541 |
</div> |
| 303 |
- </div> |
|
| 304 |
- <div class="flex justify-center mt20"> |
|
| 305 |
- <button class="new-btn" @click="takePhoto">사진 찍기</button> |
|
| 306 |
- </div> |
|
| 542 |
+ <!-- 카메라 모달 --> |
|
| 543 |
+ <article v-show="showCameraModal" class="popup-wrap"> |
|
| 544 |
+ <div class="popup-box" style="top: 500px; left: 500px"> |
|
| 545 |
+ <div class="flex mb10 justify-between"> |
|
| 546 |
+ <p class="popup-title">사진 촬영</p> |
|
| 547 |
+ <button type="button" class="popup-close-btn" @click="closeModal"> |
|
| 548 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 549 |
+ </button> |
|
| 550 |
+ </div> |
|
| 551 |
+ <div class="box"> |
|
| 552 |
+ <div style="width: 100%"> |
|
| 553 |
+ <div id="container" ref="container"> |
|
| 554 |
+ <video |
|
| 555 |
+ v-if="!photoTaken" |
|
| 556 |
+ autoplay="true" |
|
| 557 |
+ ref="modalVideoElement" |
|
| 558 |
+ class="mirrored" |
|
| 559 |
+ @canplay="onVideoLoaded" |
|
| 560 |
+ style="position: absolute; height: 100%" |
|
| 561 |
+ ></video> |
|
| 562 |
+ <img |
|
| 563 |
+ src="../../../resources/img/camera-rabbit.png" |
|
| 564 |
+ class="camera-rabbit" |
|
| 565 |
+ style="position: absolute" |
|
| 566 |
+ /> |
|
| 567 |
+ <canvas ref="canvas" style="pointer-events: none"></canvas> |
|
| 568 |
+ </div> |
|
| 569 |
+ </div> |
|
| 570 |
+ </div> |
|
| 571 |
+ <div class="flex justify-center mt20"> |
|
| 572 |
+ <button class="new-btn" @click="takePhoto">사진 찍기</button> |
|
| 573 |
+ </div> |
|
| 574 |
+ </div> |
|
| 575 |
+ </article> |
|
| 307 | 576 |
</div> |
| 308 |
- </article> |
|
| 577 |
+ |
|
| 578 |
+ <div class="complete-wrap myphoto"> |
|
| 579 |
+ <button class="login-btn mt10" type="submit" style="width: 100%" @click="finishSchedule"> |
|
| 580 |
+ <img src="../../../resources/img/btn07_s.png" alt="" style="height: 100px" /> |
|
| 581 |
+ <p>학습 종료하기</p> |
|
| 582 |
+ </button> |
|
| 583 |
+ <h2 class="mb40 mt10">이 단원을 끝낸 친구들</h2> |
|
| 584 |
+ |
|
| 585 |
+ <article class="flex-column"> |
|
| 586 |
+ <div class="flex-row"> |
|
| 587 |
+ <div class="flex" style="gap: 5px; flex-wrap: wrap"> |
|
| 588 |
+ <div |
|
| 589 |
+ v-for="image in images" |
|
| 590 |
+ :key="image.fileId" |
|
| 591 |
+ @click="buttonSearch(image)" |
|
| 592 |
+ class="photo" |
|
| 593 |
+ style="margin-bottom: 5px" |
|
| 594 |
+ > |
|
| 595 |
+ <img :src="image.url" :alt="image.fileNm" reloadable="true" style="height: 100%" /> |
|
| 596 |
+ </div> |
|
| 597 |
+ </div> |
|
| 598 |
+ </div> |
|
| 599 |
+ </article> |
|
| 600 |
+ <article class="popup-wrap" v-show="searchOpen"> |
|
| 601 |
+ <div class="popup-box" style="top: 50%"> |
|
| 602 |
+ <div class="flex mb10 justify-between"> |
|
| 603 |
+ <button type="button" class="popup-close-btn" @click="closeModal"> |
|
| 604 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 605 |
+ </button> |
|
| 606 |
+ </div> |
|
| 607 |
+ <div class="box"> |
|
| 608 |
+ <div style="width: 910px; height: 680px"> |
|
| 609 |
+ <img :src="selectedImage.image" alt="Image" @error="onImageError" reloadable="true" /> |
|
| 610 |
+ </div> |
|
| 611 |
+ </div> |
|
| 612 |
+ <div class="flex justify-between mt20"> |
|
| 613 |
+ <div class="text flex"> |
|
| 614 |
+ <p class="title2 date ml30">{{ selectedImage.date }}</p>
|
|
| 615 |
+ <span class="title1 ml30" |
|
| 616 |
+ >{{ selectedImage.unit }}을 마친 <em class="yellow">{{ selectedImage.name }}</em
|
|
| 617 |
+ >친구</span |
|
| 618 |
+ > |
|
| 619 |
+ </div> |
|
| 620 |
+ <div class="title2 flex align-center" style="gap: 10px"> |
|
| 621 |
+ <svg-icon |
|
| 622 |
+ v-if="!isHeartFilled" |
|
| 623 |
+ type="mdi" |
|
| 624 |
+ :path="mdiHeartOutline" |
|
| 625 |
+ @click="toggleHeart(selectedImage.heart, selectedImage.fileMngId)" |
|
| 626 |
+ style="color: #ffba08; cursor: pointer" |
|
| 627 |
+ ></svg-icon> |
|
| 628 |
+ <svg-icon |
|
| 629 |
+ v-if="isHeartFilled" |
|
| 630 |
+ type="mdi" |
|
| 631 |
+ :path="mdiHeart" |
|
| 632 |
+ @click="toggleHeart(selectedImage.heart, selectedImage.fileMngId)" |
|
| 633 |
+ style="color: #ffba08; cursor: pointer" |
|
| 634 |
+ ></svg-icon> |
|
| 635 |
+ <p> |
|
| 636 |
+ <em class="yellow">{{ selectedImage.heart }}</em>
|
|
| 637 |
+ </p> |
|
| 638 |
+ </div> |
|
| 639 |
+ </div> |
|
| 640 |
+ </div> |
|
| 641 |
+ </article> |
|
| 642 |
+ </div> |
|
| 309 | 643 |
</div> |
| 310 |
- |
|
| 311 |
- <div class="complete-wrap myphoto"> |
|
| 312 |
- <button class="login-btn mt10" type="submit" style="width: 100%" @click="finishSchedule"> |
|
| 313 |
- <img src="../../../resources/img/btn07_s.png" alt="" style="height: 100px" /> |
|
| 314 |
- <p>학습 종료하기</p> |
|
| 315 |
- </button> |
|
| 316 |
- <h2 class="mb40 mt10">이 단원을 끝낸 친구들</h2> |
|
| 317 |
- |
|
| 318 |
- <article class="flex-column"> |
|
| 319 |
- <div class="flex-row"> |
|
| 320 |
- <div class="flex" style="gap: 5px; flex-wrap: wrap"> |
|
| 321 |
- <div v-for="(image, index) in images" :key="image.fileId" @click="buttonSearch(image)" class="photo" |
|
| 322 |
- style="margin-bottom: 5px"> |
|
| 323 |
- <img :src="image.url" :alt="image.fileNm" reloadable="true" style="height: 100%" /> |
|
| 324 |
- </div> |
|
| 325 |
- </div> |
|
| 326 |
- </div> |
|
| 327 |
- </article> |
|
| 328 |
- <article class="popup-wrap" v-show="searchOpen"> |
|
| 329 |
- <div class="popup-box" style="top: 50%"> |
|
| 330 |
- <div class="flex mb10 justify-between"> |
|
| 331 |
- <button type="button" class="popup-close-btn" @click="closeModal"> |
|
| 332 |
- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 333 |
- </button> |
|
| 334 |
- </div> |
|
| 335 |
- <div class="box"> |
|
| 336 |
- <div style="width: 910px; height: 680px"> |
|
| 337 |
- <img :src="selectedImage.image" alt="Image" @error="onImageError" reloadable="true" /> |
|
| 338 |
- </div> |
|
| 339 |
- </div> |
|
| 340 |
- <div class="flex justify-between mt20"> |
|
| 341 |
- <div class="text flex"> |
|
| 342 |
- <p class="title2 date ml30">{{ selectedImage.date }}</p>
|
|
| 343 |
- <span class="title1 ml30">{{ selectedImage.unit }}을 마친
|
|
| 344 |
- <em class="yellow">{{ selectedImage.name }}</em>친구</span>
|
|
| 345 |
- </div> |
|
| 346 |
- <div class="title2 flex align-center" style="gap: 10px"> |
|
| 347 |
- <svg-icon v-if="!isHeartFilled" type="mdi" :path="mdiHeartOutline" @click=" |
|
| 348 |
- toggleHeart(selectedImage.heart, selectedImage.fileMngId) |
|
| 349 |
- " style="color: #ffba08; cursor: pointer"></svg-icon> |
|
| 350 |
- <svg-icon v-if="isHeartFilled" type="mdi" :path="mdiHeart" @click=" |
|
| 351 |
- toggleHeart(selectedImage.heart, selectedImage.fileMngId) |
|
| 352 |
- " style="color: #ffba08; cursor: pointer"></svg-icon> |
|
| 353 |
- <p> |
|
| 354 |
- <em class="yellow">{{ selectedImage.heart }}</em>
|
|
| 355 |
- </p> |
|
| 356 |
- </div> |
|
| 357 |
- </div> |
|
| 358 |
- </div> |
|
| 359 |
- </article> |
|
| 360 |
- </div> |
|
| 361 |
- </div> |
|
| 362 | 644 |
</template> |
| 363 | 645 |
|
| 364 | 646 |
<script> |
| 365 |
-import SvgIcon from "@jamescoyle/vue-icon"; |
|
| 366 |
-import { mdiMagnify, mdiHeart, mdiWindowClose } from "@mdi/js";
|
|
| 367 |
-import { mdiHeartOutline } from "@mdi/js";
|
|
| 368 |
-import axios from "axios"; |
|
| 369 |
-import { call } from "file-loader";
|
|
| 370 |
-import { name } from "file-loader";
|
|
| 371 |
-import { mapGetters } from "vuex";
|
|
| 372 |
-import { mapActions } from "vuex";
|
|
| 647 |
+import SvgIcon from '@jamescoyle/vue-icon'; |
|
| 648 |
+import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
|
|
| 649 |
+import { mdiHeartOutline } from '@mdi/js';
|
|
| 650 |
+import axios from 'axios'; |
|
| 651 |
+import { call } from 'file-loader';
|
|
| 652 |
+import { name } from 'file-loader';
|
|
| 653 |
+import { mapGetters } from 'vuex';
|
|
| 654 |
+import { mapActions } from 'vuex';
|
|
| 373 | 655 |
|
| 374 | 656 |
export default {
|
| 375 |
- data() {
|
|
| 376 |
- return {
|
|
| 377 |
- items: [ |
|
| 378 |
- {
|
|
| 379 |
- imgSrc1: "client/resources/img/img11_1_s.png", |
|
| 380 |
- imgSrc2: "client/resources/img/img12_1_s.png", |
|
| 381 |
- imgSrc3: "client/resources/img/img11_2_s.png", |
|
| 382 |
- imgSrc4: "client/resources/img/img12_2_s.png", |
|
| 383 |
- isSecondImageVisible: false, |
|
| 384 |
- }, |
|
| 385 |
- ], |
|
| 386 |
- mdiMagnify: mdiMagnify, |
|
| 387 |
- mdiWindowClose: mdiWindowClose, |
|
| 388 |
- mdiHeart: mdiHeart, |
|
| 389 |
- mdiHeartOutline: mdiHeartOutline, |
|
| 390 |
- showModal: false, |
|
| 391 |
- searchOpen: false, // 사진 상세보기 모달창 |
|
| 392 |
- searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창 |
|
| 393 |
- showCameraModal: false, // 카메라 모달창 |
|
| 394 |
- photoTaken: false, |
|
| 395 |
- photo: null, //캡쳐 사진 |
|
| 396 |
- stream: null, |
|
| 657 |
+ data() {
|
|
| 658 |
+ return {
|
|
| 659 |
+ items: [ |
|
| 660 |
+ {
|
|
| 661 |
+ imgSrc1: 'client/resources/img/img11_1_s.png', |
|
| 662 |
+ imgSrc2: 'client/resources/img/img12_1_s.png', |
|
| 663 |
+ imgSrc3: 'client/resources/img/img11_2_s.png', |
|
| 664 |
+ imgSrc4: 'client/resources/img/img12_2_s.png', |
|
| 665 |
+ isSecondImageVisible: false, |
|
| 666 |
+ }, |
|
| 667 |
+ ], |
|
| 668 |
+ mdiMagnify: mdiMagnify, |
|
| 669 |
+ mdiWindowClose: mdiWindowClose, |
|
| 670 |
+ mdiHeart: mdiHeart, |
|
| 671 |
+ mdiHeartOutline: mdiHeartOutline, |
|
| 672 |
+ showModal: false, |
|
| 673 |
+ searchOpen: false, // 사진 상세보기 모달창 |
|
| 674 |
+ searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창 |
|
| 675 |
+ showCameraModal: false, // 카메라 모달창 |
|
| 676 |
+ photoTaken: false, |
|
| 677 |
+ photo: null, //캡쳐 사진 |
|
| 678 |
+ stream: null, |
|
| 397 | 679 |
|
| 398 |
- roadmapData: [], |
|
| 399 |
- labeledItems: [], |
|
| 680 |
+ roadmapData: [], |
|
| 681 |
+ labeledItems: [], |
|
| 400 | 682 |
|
| 401 |
- problemCounter: 0, |
|
| 402 |
- wordCounter: 0, |
|
| 403 |
- textCounter: 0, |
|
| 404 |
- evalCounter: 0, |
|
| 405 |
- book_id: null, |
|
| 406 |
- unit_id: null, |
|
| 683 |
+ problemCounter: 0, |
|
| 684 |
+ wordCounter: 0, |
|
| 685 |
+ textCounter: 0, |
|
| 686 |
+ evalCounter: 0, |
|
| 687 |
+ book_id: null, |
|
| 688 |
+ unit_id: null, |
|
| 407 | 689 |
|
| 408 |
- schedules: [], |
|
| 409 |
- nowSchedule: "", |
|
| 410 |
- state: "", |
|
| 411 |
- rabbitPos: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
| 412 |
- rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
| 413 |
- rabbitEnd: false, |
|
| 690 |
+ schedules: [], |
|
| 691 |
+ nowSchedule: '', |
|
| 692 |
+ state: '', |
|
| 693 |
+ rabbitPos: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
| 694 |
+ rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
| 695 |
+ rabbitEnd: false, |
|
| 414 | 696 |
|
| 415 |
- titleUnitName: "", |
|
| 416 |
- titleBookName: "", |
|
| 697 |
+ titleUnitName: '', |
|
| 698 |
+ titleBookName: '', |
|
| 417 | 699 |
|
| 418 |
- images: [], |
|
| 700 |
+ images: [], |
|
| 419 | 701 |
|
| 420 |
- selectedImage: [ |
|
| 421 |
- {
|
|
| 422 |
- image: "", |
|
| 423 |
- unit: "", |
|
| 424 |
- date: "", |
|
| 425 |
- name: "", |
|
| 426 |
- heart: "", |
|
| 427 |
- fileMngId: "", |
|
| 428 |
- }, |
|
| 429 |
- ], |
|
| 702 |
+ selectedImage: [ |
|
| 703 |
+ {
|
|
| 704 |
+ image: '', |
|
| 705 |
+ unit: '', |
|
| 706 |
+ date: '', |
|
| 707 |
+ name: '', |
|
| 708 |
+ heart: '', |
|
| 709 |
+ fileMngId: '', |
|
| 710 |
+ }, |
|
| 711 |
+ ], |
|
| 430 | 712 |
|
| 431 |
- isHeartFilled: false, // 하트가 채워졌는지 여부 |
|
| 713 |
+ isHeartFilled: false, // 하트가 채워졌는지 여부 |
|
| 432 | 714 |
|
| 433 |
- problemType: null, |
|
| 434 |
- wordBookType: null, |
|
| 435 |
- wordContentList: [], |
|
| 436 |
- }; |
|
| 437 |
- }, |
|
| 438 |
- methods: {
|
|
| 439 |
- toggleHeart(heart, fileMngId) {
|
|
| 440 |
- this.isHeartFilled = !this.isHeartFilled; // 하트 상태 토글 |
|
| 441 |
- |
|
| 442 |
- if (this.isHeartFilled) var calHeart = heart + 1; |
|
| 443 |
- else var calHeart = heart - 1; |
|
| 444 |
- |
|
| 445 |
- // 하트 수를 증가시키기 위한 API 요청 |
|
| 446 |
- axios |
|
| 447 |
- .post("/photo/likeUpdate.json", {
|
|
| 448 |
- likeData: calHeart, |
|
| 449 |
- fileMngId: fileMngId, |
|
| 450 |
- }) |
|
| 451 |
- .then((response) => {
|
|
| 452 |
- this.selectedImage.heart = calHeart; |
|
| 453 |
- }) |
|
| 454 |
- .catch((error) => {
|
|
| 455 |
- console.error("Error updating heart:", error);
|
|
| 456 |
- }); |
|
| 715 |
+ problemType: null, |
|
| 716 |
+ wordBookType: null, |
|
| 717 |
+ wordContentList: [], |
|
| 718 |
+ }; |
|
| 457 | 719 |
}, |
| 458 |
- checkAndFetchData() {
|
|
| 459 |
- console.log("받은 Book ID:", this.getBookId);
|
|
| 460 |
- console.log("받은 Unit ID:", this.getUnitId);
|
|
| 461 |
- const book_id = this.getBookId; |
|
| 462 |
- const unit_id = this.getUnitId; |
|
| 720 |
+ methods: {
|
|
| 721 |
+ toggleHeart(heart, fileMngId) {
|
|
| 722 |
+ this.isHeartFilled = !this.isHeartFilled; // 하트 상태 토글 |
|
| 463 | 723 |
|
| 464 |
- if (!book_id || !unit_id) {
|
|
| 465 |
- console.error("book_id 또는 unit_id가 설정되지 않았습니다.");
|
|
| 466 |
- this.state = "notRegistered"; |
|
| 467 |
- return; |
|
| 468 |
- } |
|
| 469 |
- this.fetchImage(unit_id); |
|
| 470 |
- this.fetchSchedule(unit_id, book_id); |
|
| 471 |
- this.fetchRoadmapData(unit_id, book_id); |
|
| 472 |
- this.fetchRabbit(); |
|
| 724 |
+ if (this.isHeartFilled) var calHeart = heart + 1; |
|
| 725 |
+ else var calHeart = heart - 1; |
|
| 473 | 726 |
|
| 474 |
- this.unit_id = unit_id; |
|
| 475 |
- this.book_id = book_id; |
|
| 476 |
- |
|
| 477 |
- if (this.$route.query.reCapture == "true") {
|
|
| 478 |
- this.openCameraModal(); |
|
| 479 |
- } |
|
| 480 |
- |
|
| 481 |
- this.searchStdId(); |
|
| 482 |
- }, |
|
| 483 |
- |
|
| 484 |
- //은진 |
|
| 485 |
- buttonSearch(image) {
|
|
| 486 |
- this.isHeartFilled = false; |
|
| 487 |
- this.selectedImage.name = image.stdId; |
|
| 488 |
- this.selectedImage.image = image.url; |
|
| 489 |
- this.selectedImage.unit = this.titleUnitName; |
|
| 490 |
- this.selectedImage.date = image.fileRegDate.split(" ")[0];
|
|
| 491 |
- this.selectedImage.heart = image.likeData; |
|
| 492 |
- this.selectedImage.fileMngId = image.fileMngId; |
|
| 493 |
- this.searchOpen = true; |
|
| 494 |
- }, |
|
| 495 |
- fetchImage(unit_id) {
|
|
| 496 |
- axios({
|
|
| 497 |
- url: "/photo/photoUnitList.json", |
|
| 498 |
- method: "post", |
|
| 499 |
- headers: {
|
|
| 500 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 727 |
+ // 하트 수를 증가시키기 위한 API 요청 |
|
| 728 |
+ axios |
|
| 729 |
+ .post('/photo/likeUpdate.json', {
|
|
| 730 |
+ likeData: calHeart, |
|
| 731 |
+ fileMngId: fileMngId, |
|
| 732 |
+ }) |
|
| 733 |
+ .then((response) => {
|
|
| 734 |
+ this.selectedImage.heart = calHeart; |
|
| 735 |
+ }) |
|
| 736 |
+ .catch((error) => {
|
|
| 737 |
+ console.error('Error updating heart:', error);
|
|
| 738 |
+ }); |
|
| 501 | 739 |
}, |
| 502 |
- data: {
|
|
| 503 |
- unitId: unit_id, |
|
| 504 |
- sclsId: "1", |
|
| 740 |
+ checkAndFetchData() {
|
|
| 741 |
+ console.log('받은 Book ID:', this.getBookId);
|
|
| 742 |
+ console.log('받은 Unit ID:', this.getUnitId);
|
|
| 743 |
+ const book_id = this.getBookId; |
|
| 744 |
+ const unit_id = this.getUnitId; |
|
| 745 |
+ |
|
| 746 |
+ if (!book_id || !unit_id) {
|
|
| 747 |
+ console.error('book_id 또는 unit_id가 설정되지 않았습니다.');
|
|
| 748 |
+ this.state = 'notRegistered'; |
|
| 749 |
+ return; |
|
| 750 |
+ } |
|
| 751 |
+ this.fetchImage(unit_id); |
|
| 752 |
+ this.fetchSchedule(unit_id, book_id); |
|
| 753 |
+ this.fetchRoadmapData(unit_id, book_id); |
|
| 754 |
+ this.fetchRabbit(); |
|
| 755 |
+ |
|
| 756 |
+ this.unit_id = unit_id; |
|
| 757 |
+ this.book_id = book_id; |
|
| 758 |
+ |
|
| 759 |
+ if (this.$route.query.reCapture == 'true') {
|
|
| 760 |
+ this.openCameraModal(); |
|
| 761 |
+ } |
|
| 762 |
+ |
|
| 763 |
+ this.searchStdId(); |
|
| 505 | 764 |
}, |
| 506 |
- }) |
|
| 507 |
- .then((response) => {
|
|
| 508 |
- this.file = response.data; |
|
| 509 | 765 |
|
| 510 |
- const findFilePromises = this.file.map((f) => |
|
| 511 |
- this.findFile(f.file_mng_id) |
|
| 512 |
- ); |
|
| 513 |
- |
|
| 514 |
- return Promise.all(findFilePromises); |
|
| 515 |
- }) |
|
| 516 |
- .then((fileResults) => {
|
|
| 517 |
- this.images = this.file |
|
| 518 |
- .map((file, index) => {
|
|
| 519 |
- const result = fileResults[index]; |
|
| 520 |
- if (result) {
|
|
| 521 |
- return {
|
|
| 522 |
- url: "http://165.229.169.113:9080/" + `${result.fileRpath}`,
|
|
| 523 |
- fileId: result.fileId, |
|
| 524 |
- fileNm: result.fileNm, |
|
| 525 |
- fileRegDate: result.regDt, |
|
| 526 |
- likeData: file.like_data, |
|
| 527 |
- stdId: file.user_nm, |
|
| 528 |
- fileMngId: result.fileMngId, |
|
| 529 |
- }; |
|
| 530 |
- } |
|
| 531 |
- return null; |
|
| 766 |
+ //은진 |
|
| 767 |
+ buttonSearch(image) {
|
|
| 768 |
+ this.isHeartFilled = false; |
|
| 769 |
+ this.selectedImage.name = image.stdId; |
|
| 770 |
+ this.selectedImage.image = image.url; |
|
| 771 |
+ this.selectedImage.unit = this.titleUnitName; |
|
| 772 |
+ this.selectedImage.date = image.fileRegDate.split(' ')[0];
|
|
| 773 |
+ this.selectedImage.heart = image.likeData; |
|
| 774 |
+ this.selectedImage.fileMngId = image.fileMngId; |
|
| 775 |
+ this.searchOpen = true; |
|
| 776 |
+ }, |
|
| 777 |
+ fetchImage(unit_id) {
|
|
| 778 |
+ axios({
|
|
| 779 |
+ url: '/photo/photoUnitList.json', |
|
| 780 |
+ method: 'post', |
|
| 781 |
+ headers: {
|
|
| 782 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 783 |
+ }, |
|
| 784 |
+ data: {
|
|
| 785 |
+ unitId: unit_id, |
|
| 786 |
+ sclsId: '1', |
|
| 787 |
+ }, |
|
| 532 | 788 |
}) |
| 533 |
- .filter((image) => image !== null); |
|
| 534 |
- }) |
|
| 535 |
- .catch((error) => {
|
|
| 536 |
- console.error("Error fetching images:", error);
|
|
| 537 |
- }); |
|
| 538 |
- }, |
|
| 539 |
- async findFile(file_mng_id) {
|
|
| 540 |
- try {
|
|
| 541 |
- const res = await axios({
|
|
| 542 |
- url: "/file/find.json", |
|
| 543 |
- method: "post", |
|
| 544 |
- headers: {
|
|
| 545 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 546 |
- }, |
|
| 547 |
- data: {
|
|
| 548 |
- file_mng_id: file_mng_id, |
|
| 549 |
- }, |
|
| 550 |
- }); |
|
| 551 |
- return res.data.list[0]; |
|
| 552 |
- } catch (error) {
|
|
| 553 |
- console.log("result - error : ", error);
|
|
| 554 |
- return null; |
|
| 555 |
- } |
|
| 556 |
- }, |
|
| 557 |
- goToPageImg(page) {
|
|
| 558 |
- const canvas = document.querySelector("canvas");
|
|
| 559 |
- const dataURL = canvas.toDataURL("image/png");
|
|
| 789 |
+ .then((response) => {
|
|
| 790 |
+ this.file = response.data; |
|
| 560 | 791 |
|
| 561 |
- this.$router.push({
|
|
| 562 |
- name: page, |
|
| 563 |
- query: { image: encodeURIComponent(dataURL) },
|
|
| 564 |
- }); |
|
| 565 |
- }, |
|
| 792 |
+ const findFilePromises = this.file.map((f) => this.findFile(f.file_mng_id)); |
|
| 566 | 793 |
|
| 567 |
- fetchRabbit() {
|
|
| 568 |
- for (var i = 0; i < 12; i++) {
|
|
| 569 |
- this.rabbitPos[i] = false; |
|
| 570 |
- } |
|
| 571 |
- |
|
| 572 |
- if (this.$route.query.value) {
|
|
| 573 |
- this.rabbitPos[parseInt(this.$route.query.value, 10) + 1] = true; |
|
| 574 |
- for (var i = 0; i < this.$route.query.value; i++) {
|
|
| 575 |
- this.rabbitCompl[i + 1] = true; |
|
| 576 |
- } |
|
| 577 |
- |
|
| 578 |
- if (this.$route.query.value === "11") {
|
|
| 579 |
- this.rabbitEnd = true; |
|
| 580 |
- setTimeout(() => {
|
|
| 581 |
- this.searchOpen2 = true; |
|
| 582 |
- }, 1000); |
|
| 583 |
- } |
|
| 584 |
- } else this.rabbitPos[0] = true; |
|
| 585 |
- }, |
|
| 586 |
- fetchSchedule(unit_id, book_id) {
|
|
| 587 |
- axios({
|
|
| 588 |
- url: "/schedule/selectSchedule.json", |
|
| 589 |
- method: "post", |
|
| 590 |
- headers: {
|
|
| 591 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 794 |
+ return Promise.all(findFilePromises); |
|
| 795 |
+ }) |
|
| 796 |
+ .then((fileResults) => {
|
|
| 797 |
+ this.images = this.file |
|
| 798 |
+ .map((file, index) => {
|
|
| 799 |
+ const result = fileResults[index]; |
|
| 800 |
+ if (result) {
|
|
| 801 |
+ return {
|
|
| 802 |
+ url: 'http://165.229.169.113:9080/' + `${result.fileRpath}`,
|
|
| 803 |
+ fileId: result.fileId, |
|
| 804 |
+ fileNm: result.fileNm, |
|
| 805 |
+ fileRegDate: result.regDt, |
|
| 806 |
+ likeData: file.like_data, |
|
| 807 |
+ stdId: file.user_nm, |
|
| 808 |
+ fileMngId: result.fileMngId, |
|
| 809 |
+ }; |
|
| 810 |
+ } |
|
| 811 |
+ return null; |
|
| 812 |
+ }) |
|
| 813 |
+ .filter((image) => image !== null); |
|
| 814 |
+ }) |
|
| 815 |
+ .catch((error) => {
|
|
| 816 |
+ console.error('Error fetching images:', error);
|
|
| 817 |
+ }); |
|
| 592 | 818 |
}, |
| 593 |
- data: {
|
|
| 594 |
- stdId: "2", |
|
| 595 |
- }, |
|
| 596 |
- }) |
|
| 597 |
- .then((response) => {
|
|
| 598 |
- this.schedules = response.data; |
|
| 599 |
- |
|
| 600 |
- if (this.schedules.length == 0) {
|
|
| 601 |
- this.state = "notRegistered"; |
|
| 602 |
- } else {
|
|
| 603 |
- const allFinished = this.schedules.every( |
|
| 604 |
- (schedule) => schedule.finish === "T" |
|
| 605 |
- ); |
|
| 606 |
- if (allFinished) {
|
|
| 607 |
- this.state = "finish"; |
|
| 608 |
- } else {
|
|
| 609 |
- this.nowSchedule = this.schedules.find( |
|
| 610 |
- (schedule) => |
|
| 611 |
- schedule.finish === null || schedule.finish === "F" |
|
| 612 |
- ); |
|
| 613 |
- if (this.nowSchedule) {
|
|
| 614 |
- this.fetchRoadmapData(unit_id, book_id); |
|
| 615 |
- this.state = "studying"; |
|
| 616 |
- } else {
|
|
| 617 |
- this.state = "notRegistered"; |
|
| 618 |
- } |
|
| 819 |
+ async findFile(file_mng_id) {
|
|
| 820 |
+ try {
|
|
| 821 |
+ const res = await axios({
|
|
| 822 |
+ url: '/file/find.json', |
|
| 823 |
+ method: 'post', |
|
| 824 |
+ headers: {
|
|
| 825 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 826 |
+ }, |
|
| 827 |
+ data: {
|
|
| 828 |
+ file_mng_id: file_mng_id, |
|
| 829 |
+ }, |
|
| 830 |
+ }); |
|
| 831 |
+ return res.data.list[0]; |
|
| 832 |
+ } catch (error) {
|
|
| 833 |
+ console.log('result - error : ', error);
|
|
| 834 |
+ return null; |
|
| 619 | 835 |
} |
| 620 |
- } |
|
| 621 |
- }) |
|
| 622 |
- .catch((error) => {
|
|
| 623 |
- console.error("Error fetching roadmap data:", error);
|
|
| 624 |
- }); |
|
| 625 |
- }, |
|
| 626 |
- finishSchedule() {
|
|
| 627 |
- axios({
|
|
| 628 |
- url: "/schedule/scheduleUpdate.json", |
|
| 629 |
- method: "post", |
|
| 630 |
- headers: {
|
|
| 631 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 632 | 836 |
}, |
| 633 |
- data: {
|
|
| 634 |
- scheduleId: this.nowSchedule.schdl_id, |
|
| 635 |
- finish: "T", |
|
| 636 |
- }, |
|
| 637 |
- }) |
|
| 638 |
- .then((response) => {
|
|
| 639 |
- const nextSchedule = this.schedules.find( |
|
| 640 |
- (schedule) => schedule.schdl_id > this.nowSchedule.schdl_id |
|
| 641 |
- ); |
|
| 642 |
- alert("학습을 완료했습니다!");
|
|
| 837 |
+ goToPageImg(page) {
|
|
| 838 |
+ const canvas = document.querySelector('canvas');
|
|
| 839 |
+ const dataURL = canvas.toDataURL('image/png');
|
|
| 643 | 840 |
|
| 644 |
- if (nextSchedule) {
|
|
| 645 |
- this.nowSchedule = nextSchedule; |
|
| 646 |
- this.fetchSchedule(nextSchedule.unit_id, nextSchedule.book_id); |
|
| 647 |
- this.fetchRoadmapData(nextSchedule.unit_id, nextSchedule.book_id); |
|
| 648 | 841 |
this.$router.push({
|
| 649 |
- name: "Dashboard", |
|
| 650 |
- query: {
|
|
| 651 |
- unit_id: nextSchedule.unit_id, |
|
| 652 |
- book_id: nextSchedule.book_id, |
|
| 653 |
- }, |
|
| 842 |
+ name: page, |
|
| 843 |
+ query: { image: encodeURIComponent(dataURL) },
|
|
| 654 | 844 |
}); |
| 655 |
- } else {
|
|
| 656 |
- alert("모든 학습을 완료했습니다!");
|
|
| 657 |
- this.state = "finish"; |
|
| 658 |
- } |
|
| 659 |
- }) |
|
| 660 |
- .catch((error) => {
|
|
| 661 |
- console.error("Error updating schedule:", error);
|
|
| 662 |
- }); |
|
| 663 |
- }, |
|
| 664 |
- fetchRoadmapData(unit_id, book_id) {
|
|
| 665 |
- axios({
|
|
| 666 |
- url: "/unitLearning/find.json", |
|
| 667 |
- method: "post", |
|
| 668 |
- headers: {
|
|
| 669 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 670 | 845 |
}, |
| 671 |
- data: {
|
|
| 672 |
- unit_id: unit_id, |
|
| 673 |
- book_id: book_id, |
|
| 674 |
- }, |
|
| 675 |
- }) |
|
| 676 |
- .then((response) => {
|
|
| 677 |
- if (response.data.length != 0) {
|
|
| 678 |
- this.roadmapData = response.data; |
|
| 679 |
- this.titleUnitName = this.roadmapData[0].unit_nm; |
|
| 680 |
- this.titleBookName = this.roadmapData[0].book_nm; |
|
| 681 |
- this.labeledItems = this.processedRoadmap; |
|
| 682 |
- console.log(this.roadmapData, this.labeledItems); |
|
| 683 |
- } else {
|
|
| 684 |
- this.state = "noProblem"; |
|
| 685 |
- } |
|
| 686 |
- }) |
|
| 687 |
- .catch((error) => {
|
|
| 688 |
- this.state = "noProblem"; |
|
| 689 |
- console.error("Error fetching roadmap data:", error);
|
|
| 690 |
- }); |
|
| 691 |
- }, |
|
| 692 |
- toggleImage(index) {
|
|
| 693 |
- this.items[index].isSecondImageVisible = |
|
| 694 |
- !this.items[index].isSecondImageVisible; |
|
| 695 |
- }, |
|
| 696 |
- ShowPopup() {
|
|
| 697 |
- this.searchOpen2 = true; // 촬영 여부 묻는 모달창 열기 |
|
| 698 |
- }, |
|
| 699 |
- goToPage(page) {
|
|
| 700 |
- // const { unit_id, book_id } = this.$route.query;
|
|
| 701 |
- // this.$router.push({ name: page, query: { unit_id, book_id } });
|
|
| 702 |
- this.$router.push({ name: page });
|
|
| 703 |
- }, |
|
| 704 |
- goToPage2(page, unit_id) {
|
|
| 705 |
- this.$router.push({
|
|
| 706 |
- name: page, |
|
| 707 |
- query: {
|
|
| 708 |
- unit_id: unit_id, |
|
| 709 |
- }, |
|
| 710 |
- }); |
|
| 711 |
- }, |
|
| 712 | 846 |
|
| 713 |
- storeLearningId(labeledItems) {
|
|
| 714 |
- this.$store.dispatch("updateLearningData", labeledItems);
|
|
| 715 |
- this.$store.dispatch("updateLearningId", labeledItems.learning_id); // 단어장에 사용중..
|
|
| 716 |
- |
|
| 717 |
- console.log("레이블된 아이템: ", labeledItems);
|
|
| 718 |
- if (labeledItems.label.startsWith("문제")) {
|
|
| 719 |
- this.handleProblemDetail(this.$store.getters.currentLearningId); |
|
| 720 |
- console.log(">>>>>>>>>>", this.$store.getters.currentLearningId)
|
|
| 721 |
- this.goToPage(this.problemType); |
|
| 722 |
- } else if (labeledItems.label.startsWith("단어장")) {
|
|
| 723 |
- this.handleWordBookContent(this.$store.getters.getLearningId); |
|
| 724 |
- } else if (labeledItems.label.startsWith("지문")) {
|
|
| 725 |
- //console.log("지문 아이디 : ", labeledItems.learning_id);
|
|
| 726 |
- this.$store.dispatch("updateTextId", labeledItems.learning_id);
|
|
| 727 |
- this.fetchTextType(labeledItems.learning_id); |
|
| 728 |
- } else if (labeledItems.label.startsWith("중간평가")) {
|
|
| 729 |
- this.fetchEvalData(labeledItems); |
|
| 730 |
- } else if (labeledItems.label.startsWith("최종평가")) {
|
|
| 731 |
- this.fetchEvalData(labeledItems); |
|
| 732 |
- } |
|
| 733 |
- }, |
|
| 734 |
- handleWordBookContent(item) {
|
|
| 735 |
- console.log("처리할 단어장 콘텐츠 id: ", item);
|
|
| 736 |
- |
|
| 737 |
- // 단어장 ID 가져오기 |
|
| 738 |
- axios |
|
| 739 |
- .post("/wordContent/selectWordContent.json", {
|
|
| 740 |
- wordContentId: item, |
|
| 741 |
- }) |
|
| 742 |
- .then((response) => {
|
|
| 743 |
- this.wordContentList = response.data; |
|
| 744 |
- |
|
| 745 |
- this.$store.dispatch( |
|
| 746 |
- "updateWdBookIdList", |
|
| 747 |
- this.wordContentList.map((content) => content.wd_book_id) |
|
| 748 |
- ); |
|
| 749 |
- this.$store.dispatch("updateCurrentWdBkIndex", 0);
|
|
| 750 |
- console.log( |
|
| 751 |
- "저장한 단어장 id 리스트: ", |
|
| 752 |
- this.$store.getters.getWdBookIdList |
|
| 753 |
- ); |
|
| 754 |
- |
|
| 755 |
- // 단어장 ID 리스트에서 첫 번째 단어장 ID를 사용 |
|
| 756 |
- const wdBookId = this.wordContentList[0].wd_book_id; |
|
| 757 |
- |
|
| 758 |
- // 단어장 정보 가져오기 |
|
| 759 |
- return axios.post("/wordbook/find.json", {
|
|
| 760 |
- wdBookId: wdBookId, |
|
| 761 |
- }); |
|
| 762 |
- }) |
|
| 763 |
- .then((response) => {
|
|
| 764 |
- const wordbookData = response.data; |
|
| 765 |
- |
|
| 766 |
- // 단어장 타입에 따라 페이지 설정 |
|
| 767 |
- if (wordbookData && wordbookData.wdBookTypeId) {
|
|
| 768 |
- switch (wordbookData.wdBookTypeId) {
|
|
| 769 |
- case "1": |
|
| 770 |
- this.wordBookType = "Chapter2"; |
|
| 771 |
- break; |
|
| 772 |
- case "2": |
|
| 773 |
- this.wordBookType = "Chapter2_3"; |
|
| 774 |
- break; |
|
| 775 |
- case "3": |
|
| 776 |
- this.wordBookType = "Chapter2_2"; |
|
| 777 |
- break; |
|
| 778 |
- case "4": |
|
| 779 |
- this.wordBookType = "Chapter2_9"; |
|
| 780 |
- break; |
|
| 781 |
- case "5": |
|
| 782 |
- this.wordBookType = "Chapter2_4"; |
|
| 783 |
- break; |
|
| 784 |
- default: |
|
| 785 |
- this.wordBookType = null; |
|
| 847 |
+ fetchRabbit() {
|
|
| 848 |
+ for (var i = 0; i < 12; i++) {
|
|
| 849 |
+ this.rabbitPos[i] = false; |
|
| 786 | 850 |
} |
| 787 |
- } else {
|
|
| 788 |
- console.error("wdBookTypeId가 없습니다.");
|
|
| 789 |
- this.wordBookType = null; |
|
| 790 |
- } |
|
| 791 | 851 |
|
| 792 |
- console.log("현재 단어장 타입: ", this.wordBookType);
|
|
| 793 |
- this.goToPage(this.wordBookType); |
|
| 794 |
- }) |
|
| 795 |
- .catch((error) => {
|
|
| 796 |
- console.error("단어장 정보를 불러오는 중 오류 발생:", error);
|
|
| 797 |
- this.wordBookType = null; |
|
| 798 |
- }); |
|
| 799 |
- }, |
|
| 800 |
- // 지문 type 불러오기 |
|
| 801 |
- fetchTextType(text_id) {
|
|
| 802 |
- axios({
|
|
| 803 |
- url: "/text/selectOneText.json", |
|
| 804 |
- method: "post", |
|
| 805 |
- headers: {
|
|
| 806 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 852 |
+ if (this.$route.query.value) {
|
|
| 853 |
+ this.rabbitPos[parseInt(this.$route.query.value, 10) + 1] = true; |
|
| 854 |
+ for (var i = 0; i < this.$route.query.value; i++) {
|
|
| 855 |
+ this.rabbitCompl[i + 1] = true; |
|
| 856 |
+ } |
|
| 857 |
+ |
|
| 858 |
+ if (this.$route.query.value === '11') {
|
|
| 859 |
+ this.rabbitEnd = true; |
|
| 860 |
+ setTimeout(() => {
|
|
| 861 |
+ this.searchOpen2 = true; |
|
| 862 |
+ }, 1000); |
|
| 863 |
+ } |
|
| 864 |
+ } else this.rabbitPos[0] = true; |
|
| 807 | 865 |
}, |
| 808 |
- data: {
|
|
| 809 |
- textId: text_id, |
|
| 866 |
+ fetchSchedule(unit_id, book_id) {
|
|
| 867 |
+ axios({
|
|
| 868 |
+ url: '/schedule/selectSchedule.json', |
|
| 869 |
+ method: 'post', |
|
| 870 |
+ headers: {
|
|
| 871 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 872 |
+ }, |
|
| 873 |
+ data: {
|
|
| 874 |
+ stdId: '2', |
|
| 875 |
+ }, |
|
| 876 |
+ }) |
|
| 877 |
+ .then((response) => {
|
|
| 878 |
+ this.schedules = response.data; |
|
| 879 |
+ |
|
| 880 |
+ if (this.schedules.length == 0) {
|
|
| 881 |
+ this.state = 'notRegistered'; |
|
| 882 |
+ } else {
|
|
| 883 |
+ const allFinished = this.schedules.every((schedule) => schedule.finish === 'T'); |
|
| 884 |
+ if (allFinished) {
|
|
| 885 |
+ this.state = 'finish'; |
|
| 886 |
+ } else {
|
|
| 887 |
+ this.nowSchedule = this.schedules.find( |
|
| 888 |
+ (schedule) => schedule.finish === null || schedule.finish === 'F' |
|
| 889 |
+ ); |
|
| 890 |
+ if (this.nowSchedule) {
|
|
| 891 |
+ this.fetchRoadmapData(unit_id, book_id); |
|
| 892 |
+ this.state = 'studying'; |
|
| 893 |
+ } else {
|
|
| 894 |
+ this.state = 'notRegistered'; |
|
| 895 |
+ } |
|
| 896 |
+ } |
|
| 897 |
+ } |
|
| 898 |
+ }) |
|
| 899 |
+ .catch((error) => {
|
|
| 900 |
+ console.error('Error fetching roadmap data:', error);
|
|
| 901 |
+ }); |
|
| 810 | 902 |
}, |
| 811 |
- }) |
|
| 812 |
- .then((response) => {
|
|
| 813 |
- const text_type_id = response.data[0].text_type_id; |
|
| 814 |
- // console.log("지문 유형 아이디 : ", text_type_id);
|
|
| 815 |
- if (text_type_id === "2") {
|
|
| 816 |
- this.goToPage("Chapter1_2");
|
|
| 817 |
- } else if (text_type_id === "3") {
|
|
| 818 |
- this.goToPage("Chapter1_3");
|
|
| 819 |
- } |
|
| 820 |
- }) |
|
| 821 |
- .catch((err) => {
|
|
| 822 |
- console.log("지문 에러 : ", err);
|
|
| 823 |
- }); |
|
| 824 |
- }, |
|
| 903 |
+ finishSchedule() {
|
|
| 904 |
+ axios({
|
|
| 905 |
+ url: '/schedule/scheduleUpdate.json', |
|
| 906 |
+ method: 'post', |
|
| 907 |
+ headers: {
|
|
| 908 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 909 |
+ }, |
|
| 910 |
+ data: {
|
|
| 911 |
+ scheduleId: this.nowSchedule.schdl_id, |
|
| 912 |
+ finish: 'T', |
|
| 913 |
+ }, |
|
| 914 |
+ }) |
|
| 915 |
+ .then((response) => {
|
|
| 916 |
+ const nextSchedule = this.schedules.find( |
|
| 917 |
+ (schedule) => schedule.schdl_id > this.nowSchedule.schdl_id |
|
| 918 |
+ ); |
|
| 919 |
+ alert('학습을 완료했습니다!');
|
|
| 825 | 920 |
|
| 826 |
- // 평가 정보를 통해서 관련 문제 가져오기 |
|
| 827 |
- fetchEvalData(evaldata) {
|
|
| 828 |
- axios({
|
|
| 829 |
- url: "/evalProblem/selectEvalProblem.json", |
|
| 830 |
- method: "post", |
|
| 831 |
- headers: {
|
|
| 832 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 921 |
+ if (nextSchedule) {
|
|
| 922 |
+ this.nowSchedule = nextSchedule; |
|
| 923 |
+ this.fetchSchedule(nextSchedule.unit_id, nextSchedule.book_id); |
|
| 924 |
+ this.fetchRoadmapData(nextSchedule.unit_id, nextSchedule.book_id); |
|
| 925 |
+ this.$router.push({
|
|
| 926 |
+ name: 'Dashboard', |
|
| 927 |
+ query: {
|
|
| 928 |
+ unit_id: nextSchedule.unit_id, |
|
| 929 |
+ book_id: nextSchedule.book_id, |
|
| 930 |
+ }, |
|
| 931 |
+ }); |
|
| 932 |
+ } else {
|
|
| 933 |
+ alert('모든 학습을 완료했습니다!');
|
|
| 934 |
+ this.state = 'finish'; |
|
| 935 |
+ } |
|
| 936 |
+ }) |
|
| 937 |
+ .catch((error) => {
|
|
| 938 |
+ console.error('Error updating schedule:', error);
|
|
| 939 |
+ }); |
|
| 833 | 940 |
}, |
| 834 |
- data: {
|
|
| 835 |
- evalId: evaldata.learning_id, |
|
| 941 |
+ fetchRoadmapData(unit_id, book_id) {
|
|
| 942 |
+ axios({
|
|
| 943 |
+ url: '/unitLearning/find.json', |
|
| 944 |
+ method: 'post', |
|
| 945 |
+ headers: {
|
|
| 946 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 947 |
+ }, |
|
| 948 |
+ data: {
|
|
| 949 |
+ unit_id: unit_id, |
|
| 950 |
+ book_id: book_id, |
|
| 951 |
+ }, |
|
| 952 |
+ }) |
|
| 953 |
+ .then((response) => {
|
|
| 954 |
+ if (response.data.length != 0) {
|
|
| 955 |
+ this.roadmapData = response.data; |
|
| 956 |
+ this.titleUnitName = this.roadmapData[0].unit_nm; |
|
| 957 |
+ this.titleBookName = this.roadmapData[0].book_nm; |
|
| 958 |
+ this.labeledItems = this.processedRoadmap; |
|
| 959 |
+ console.log(this.roadmapData, this.labeledItems); |
|
| 960 |
+ } else {
|
|
| 961 |
+ this.state = 'noProblem'; |
|
| 962 |
+ } |
|
| 963 |
+ }) |
|
| 964 |
+ .catch((error) => {
|
|
| 965 |
+ this.state = 'noProblem'; |
|
| 966 |
+ console.error('Error fetching roadmap data:', error);
|
|
| 967 |
+ }); |
|
| 836 | 968 |
}, |
| 837 |
- }) |
|
| 838 |
- .then((response) => {
|
|
| 839 |
- const payload = {
|
|
| 840 |
- learning_id: response.data, |
|
| 841 |
- label: evaldata.label, |
|
| 842 |
- seqNum: evaldata.seqNum, |
|
| 843 |
- }; |
|
| 844 |
- |
|
| 845 |
- // Vuex 뮤테이션 호출 |
|
| 846 |
- this.$store.commit("setLearningData", payload);
|
|
| 847 |
- this.handleProblemDetail(response.data[0]); |
|
| 848 |
- this.goToPage(this.problemType); |
|
| 849 |
- }) |
|
| 850 |
- .catch((error) => {
|
|
| 851 |
- console.error("fetchData - error: ", error);
|
|
| 852 |
- return []; |
|
| 853 |
- }); |
|
| 854 |
- }, |
|
| 855 |
- |
|
| 856 |
- handleProblemDetail(item) {
|
|
| 857 |
- if (item.prblm_type_id === "prblm_type_001") {
|
|
| 858 |
- this.problemType = "Chapter3"; |
|
| 859 |
- } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 860 |
- this.problemType = "Chapter3_1"; |
|
| 861 |
- } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 862 |
- this.problemType = "Chapter3_2"; |
|
| 863 |
- } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 864 |
- this.problemType = "Chapter3_3"; |
|
| 865 |
- } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 866 |
- this.problemType = "Chapter3_3_1"; |
|
| 867 |
- } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 868 |
- console.log(item); |
|
| 869 |
- this.problemType = "Chapter3_4"; |
|
| 870 |
- } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 871 |
- this.problemType = "Chapter3_5"; |
|
| 872 |
- } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 873 |
- this.problemType = "Chapter3_6"; |
|
| 874 |
- } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 875 |
- this.problemType = "Chapter3_7"; |
|
| 876 |
- } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 877 |
- this.problemType = "Chapter3_8"; |
|
| 878 |
- } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 879 |
- this.problemType = "Chapter3_9"; |
|
| 880 |
- } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 881 |
- this.problemType = "Chapter3_10"; |
|
| 882 |
- } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 883 |
- this.problemType = "Chapter3_11"; |
|
| 884 |
- } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 885 |
- this.problemType = "Chapter3_12"; |
|
| 886 |
- } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 887 |
- this.problemType = "Chapter3_13"; |
|
| 888 |
- } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 889 |
- this.problemType = "Chapter3_14"; |
|
| 890 |
- } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 891 |
- this.problemType = "Chapter3_15"; |
|
| 892 |
- } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 893 |
- this.problemType = "Chapter2_8"; |
|
| 894 |
- } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 895 |
- this.problemType = "Chapter2_7"; |
|
| 896 |
- } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 897 |
- this.problemType = "Chapter2_5"; |
|
| 898 |
- } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 899 |
- this.problemType = "Chapter2_6"; |
|
| 900 |
- } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 901 |
- this.problemType = "Chapter2_10"; |
|
| 902 |
- } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 903 |
- this.problemType = "Chapter2_11"; |
|
| 904 |
- } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 905 |
- this.problemType = "Chapter2_13"; |
|
| 906 |
- } |
|
| 907 |
- }, |
|
| 908 |
- openCameraModal() {
|
|
| 909 |
- this.closeModal(); |
|
| 910 |
- |
|
| 911 |
- this.showCameraModal = true; |
|
| 912 |
- navigator.mediaDevices |
|
| 913 |
- .getUserMedia({ video: true })
|
|
| 914 |
- .then((stream) => {
|
|
| 915 |
- const modalVideo = this.$refs.modalVideoElement; |
|
| 916 |
- modalVideo.srcObject = stream; |
|
| 917 |
- this.stream = stream; |
|
| 918 |
- }) |
|
| 919 |
- .catch((error) => {
|
|
| 920 |
- console.log("error>>>>>>>>", error);
|
|
| 921 |
- alert("웹캠이 필요한 기능입니다!");
|
|
| 922 |
- this.closeModal(); // 모달창을 닫음 |
|
| 923 |
- }); |
|
| 924 |
- }, |
|
| 925 |
- closeModal() {
|
|
| 926 |
- this.searchOpen = false; |
|
| 927 |
- this.searchOpen2 = false; |
|
| 928 |
- this.showCameraModal = false; |
|
| 929 |
- this.photoTaken = false; |
|
| 930 |
- this.photo = null; |
|
| 931 |
- |
|
| 932 |
- //스트림 종료 |
|
| 933 |
- if (this.stream) {
|
|
| 934 |
- let tracks = this.stream.getTracks(); |
|
| 935 |
- tracks.forEach((track) => track.stop()); |
|
| 936 |
- this.stream = null; |
|
| 937 |
- } |
|
| 938 |
- }, |
|
| 939 |
- |
|
| 940 |
- onVideoLoaded() {
|
|
| 941 |
- const video = this.$refs.modalVideoElement; |
|
| 942 |
- const canvas = this.$refs.canvas; |
|
| 943 |
- const ctx = canvas.getContext("2d");
|
|
| 944 |
- |
|
| 945 |
- canvas.width = video.videoWidth; |
|
| 946 |
- canvas.height = video.videoHeight; |
|
| 947 |
- }, |
|
| 948 |
- takePhoto() {
|
|
| 949 |
- const video = this.$refs.modalVideoElement; |
|
| 950 |
- const canvas = this.$refs.canvas; |
|
| 951 |
- const ctx = canvas.getContext("2d");
|
|
| 952 |
- |
|
| 953 |
- ctx.save(); // 현재 상태 저장 |
|
| 954 |
- |
|
| 955 |
- // 캔버스 좌우 반전 |
|
| 956 |
- ctx.scale(-1, 1); |
|
| 957 |
- ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height); |
|
| 958 |
- |
|
| 959 |
- ctx.restore(); |
|
| 960 |
- |
|
| 961 |
- const overlayImg = new Image(); |
|
| 962 |
- overlayImg.src = "client/resources/img/camera-rabbit.png"; |
|
| 963 |
- overlayImg.onload = () => {
|
|
| 964 |
- const overlayWidth = canvas.width * 0.4; |
|
| 965 |
- const overlayHeight = |
|
| 966 |
- (overlayImg.height / overlayImg.width) * overlayWidth; |
|
| 967 |
- const overlayX = canvas.width - overlayWidth; |
|
| 968 |
- const overlayY = canvas.height - overlayHeight; |
|
| 969 |
- |
|
| 970 |
- // 오버레이 이미지 그리기 |
|
| 971 |
- ctx.drawImage( |
|
| 972 |
- overlayImg, |
|
| 973 |
- overlayX, |
|
| 974 |
- overlayY, |
|
| 975 |
- overlayWidth, |
|
| 976 |
- overlayHeight |
|
| 977 |
- ); |
|
| 978 |
- |
|
| 979 |
- // 사진 저장 함수 호출 |
|
| 980 |
- const dataURL = canvas.toDataURL("image/png");
|
|
| 981 |
- this.$router.push({
|
|
| 982 |
- name: "PhotoEdit", |
|
| 983 |
- query: {
|
|
| 984 |
- image: encodeURIComponent(dataURL), |
|
| 985 |
- unit_id: this.unit_id, |
|
| 986 |
- book_id: this.book_id, |
|
| 987 |
- }, |
|
| 988 |
- }); |
|
| 989 |
- }; |
|
| 990 |
- }, |
|
| 991 |
- |
|
| 992 |
- buttonSearch2() {
|
|
| 993 |
- this.searchOpen2 = true; |
|
| 994 |
- }, |
|
| 995 |
- closeBtn() {
|
|
| 996 |
- this.searchOpen = false; |
|
| 997 |
- }, |
|
| 998 |
- |
|
| 999 |
- // 유저 아이디를 unit 아이디를 통해 가져오기 |
|
| 1000 |
- searchStdId() {
|
|
| 1001 |
- const userInfo = this.$store.getters.getUserInfo; |
|
| 1002 |
- axios({
|
|
| 1003 |
- url: "/userclass/searchStdId.json", |
|
| 1004 |
- method: "post", |
|
| 1005 |
- headers: {
|
|
| 1006 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 969 |
+ toggleImage(index) {
|
|
| 970 |
+ this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible; |
|
| 1007 | 971 |
}, |
| 1008 |
- data: {
|
|
| 1009 |
- userId: userInfo.userId, |
|
| 1010 |
- unitId: this.unit_id, |
|
| 972 |
+ ShowPopup() {
|
|
| 973 |
+ this.searchOpen2 = true; // 촬영 여부 묻는 모달창 열기 |
|
| 1011 | 974 |
}, |
| 1012 |
- }) |
|
| 1013 |
- .then((response) => {
|
|
| 1014 |
- this.$store.commit("setStdId", response.data);
|
|
| 1015 |
- }) |
|
| 1016 |
- .catch((err) => {
|
|
| 1017 |
- console.log("지문 에러 : ", err);
|
|
| 1018 |
- }); |
|
| 1019 |
- }, |
|
| 1020 |
- }, |
|
| 1021 |
- components: {
|
|
| 1022 |
- SvgIcon, |
|
| 1023 |
- }, |
|
| 1024 |
- mounted() {
|
|
| 1025 |
- console.log("main mounted");
|
|
| 1026 |
- this.checkAndFetchData(); |
|
| 1027 |
- // const { book_id, unit_id } = this.$route.query;
|
|
| 1028 |
- console.log(">>>>>>>>>>>>>>>>>>>",this.$store.getters.currentDashboard);
|
|
| 1029 |
- }, |
|
| 1030 |
- watch: {
|
|
| 1031 |
- getBookId(newBookId) {
|
|
| 1032 |
- this.checkAndFetchData(); |
|
| 1033 |
- }, |
|
| 1034 |
- getUnitId(newUnitId) {
|
|
| 1035 |
- this.checkAndFetchData(); |
|
| 1036 |
- }, |
|
| 1037 |
- }, |
|
| 1038 |
- computed: {
|
|
| 1039 |
- ...mapGetters(["getBookId", "getUnitId"]), |
|
| 975 |
+ goToPage(page) {
|
|
| 976 |
+ // const { unit_id, book_id } = this.$route.query;
|
|
| 977 |
+ // this.$router.push({ name: page, query: { unit_id, book_id } });
|
|
| 978 |
+ this.$router.push({ name: page });
|
|
| 979 |
+ }, |
|
| 980 |
+ goToPage2(page, unit_id) {
|
|
| 981 |
+ this.$router.push({
|
|
| 982 |
+ name: page, |
|
| 983 |
+ query: {
|
|
| 984 |
+ unit_id: unit_id, |
|
| 985 |
+ }, |
|
| 986 |
+ }); |
|
| 987 |
+ }, |
|
| 1040 | 988 |
|
| 1041 |
- processedRoadmap() {
|
|
| 1042 |
- let problemCounter = 0; |
|
| 1043 |
- let wordCounter = 0; |
|
| 1044 |
- let textCounter = 0; |
|
| 1045 |
- let evalCounter = 0; |
|
| 989 |
+ storeLearningId(labeledItems) {
|
|
| 990 |
+ this.$store.dispatch('updateLearningData', labeledItems);
|
|
| 991 |
+ this.$store.dispatch('updateLearningId', labeledItems.learning_id); // 단어장에 사용중..
|
|
| 1046 | 992 |
|
| 1047 |
- return this.roadmapData.map((item) => {
|
|
| 1048 |
- if (item.wd_cnt_id !== null) {
|
|
| 1049 |
- wordCounter++; |
|
| 1050 |
- return {
|
|
| 1051 |
- label: `단어장${wordCounter}`,
|
|
| 1052 |
- learning_id: item.wd_cnt_id, |
|
| 1053 |
- seqNum: item.seq, |
|
| 1054 |
- }; |
|
| 1055 |
- } else if (item.text_id !== null) {
|
|
| 1056 |
- textCounter++; |
|
| 1057 |
- return {
|
|
| 1058 |
- label: `지문${textCounter}`,
|
|
| 1059 |
- learning_id: item.text_id, |
|
| 1060 |
- seqNum: item.seq, |
|
| 1061 |
- }; |
|
| 1062 |
- } else if (item.eval_id !== null) {
|
|
| 1063 |
- evalCounter++; |
|
| 1064 |
- return {
|
|
| 1065 |
- label: evalCounter === 1 ? "중간평가" : "최종평가", |
|
| 1066 |
- learning_id: item.eval_id, |
|
| 1067 |
- seqNum: item.seq, |
|
| 1068 |
- }; |
|
| 1069 |
- } else {
|
|
| 1070 |
- problemCounter++; |
|
| 1071 |
- return {
|
|
| 1072 |
- label: `문제${problemCounter}`,
|
|
| 1073 |
- learning_id: item.prblm_id, |
|
| 1074 |
- seqNum: item.seq, |
|
| 1075 |
- }; |
|
| 1076 |
- } |
|
| 1077 |
- }); |
|
| 993 |
+ console.log('레이블된 아이템: ', labeledItems);
|
|
| 994 |
+ if (labeledItems.label.startsWith('문제')) {
|
|
| 995 |
+ this.handleProblemDetail(this.$store.getters.currentLearningId); |
|
| 996 |
+ console.log('>>>>>>>>>>', this.$store.getters.currentLearningId);
|
|
| 997 |
+ this.goToPage(this.problemType); |
|
| 998 |
+ } else if (labeledItems.label.startsWith('단어장')) {
|
|
| 999 |
+ this.handleWordBookContent(this.$store.getters.getLearningId); |
|
| 1000 |
+ } else if (labeledItems.label.startsWith('지문')) {
|
|
| 1001 |
+ //console.log("지문 아이디 : ", labeledItems.learning_id);
|
|
| 1002 |
+ this.$store.dispatch('updateTextId', labeledItems.learning_id);
|
|
| 1003 |
+ this.fetchTextType(labeledItems.learning_id); |
|
| 1004 |
+ } else if (labeledItems.label.startsWith('중간평가')) {
|
|
| 1005 |
+ this.fetchEvalData(labeledItems); |
|
| 1006 |
+ } else if (labeledItems.label.startsWith('최종평가')) {
|
|
| 1007 |
+ this.fetchEvalData(labeledItems); |
|
| 1008 |
+ } |
|
| 1009 |
+ }, |
|
| 1010 |
+ handleWordBookContent(item) {
|
|
| 1011 |
+ console.log('처리할 단어장 콘텐츠 id: ', item);
|
|
| 1012 |
+ |
|
| 1013 |
+ // 단어장 ID 가져오기 |
|
| 1014 |
+ axios |
|
| 1015 |
+ .post('/wordContent/selectWordContent.json', {
|
|
| 1016 |
+ wordContentId: item, |
|
| 1017 |
+ }) |
|
| 1018 |
+ .then((response) => {
|
|
| 1019 |
+ this.wordContentList = response.data; |
|
| 1020 |
+ |
|
| 1021 |
+ this.$store.dispatch( |
|
| 1022 |
+ 'updateWdBookIdList', |
|
| 1023 |
+ this.wordContentList.map((content) => content.wd_book_id) |
|
| 1024 |
+ ); |
|
| 1025 |
+ this.$store.dispatch('updateCurrentWdBkIndex', 0);
|
|
| 1026 |
+ console.log('저장한 단어장 id 리스트: ', this.$store.getters.getWdBookIdList);
|
|
| 1027 |
+ |
|
| 1028 |
+ // 단어장 ID 리스트에서 첫 번째 단어장 ID를 사용 |
|
| 1029 |
+ const wdBookId = this.wordContentList[0].wd_book_id; |
|
| 1030 |
+ |
|
| 1031 |
+ // 단어장 정보 가져오기 |
|
| 1032 |
+ return axios.post('/wordbook/find.json', {
|
|
| 1033 |
+ wdBookId: wdBookId, |
|
| 1034 |
+ }); |
|
| 1035 |
+ }) |
|
| 1036 |
+ .then((response) => {
|
|
| 1037 |
+ const wordbookData = response.data; |
|
| 1038 |
+ |
|
| 1039 |
+ // 단어장 타입에 따라 페이지 설정 |
|
| 1040 |
+ if (wordbookData && wordbookData.wdBookTypeId) {
|
|
| 1041 |
+ switch (wordbookData.wdBookTypeId) {
|
|
| 1042 |
+ case '1': |
|
| 1043 |
+ this.wordBookType = 'Chapter2'; |
|
| 1044 |
+ break; |
|
| 1045 |
+ case '2': |
|
| 1046 |
+ this.wordBookType = 'Chapter2_3'; |
|
| 1047 |
+ break; |
|
| 1048 |
+ case '3': |
|
| 1049 |
+ this.wordBookType = 'Chapter2_2'; |
|
| 1050 |
+ break; |
|
| 1051 |
+ case '4': |
|
| 1052 |
+ this.wordBookType = 'Chapter2_9'; |
|
| 1053 |
+ break; |
|
| 1054 |
+ case '5': |
|
| 1055 |
+ this.wordBookType = 'Chapter2_4'; |
|
| 1056 |
+ break; |
|
| 1057 |
+ default: |
|
| 1058 |
+ this.wordBookType = null; |
|
| 1059 |
+ } |
|
| 1060 |
+ } else {
|
|
| 1061 |
+ console.error('wdBookTypeId가 없습니다.');
|
|
| 1062 |
+ this.wordBookType = null; |
|
| 1063 |
+ } |
|
| 1064 |
+ |
|
| 1065 |
+ console.log('현재 단어장 타입: ', this.wordBookType);
|
|
| 1066 |
+ this.goToPage(this.wordBookType); |
|
| 1067 |
+ }) |
|
| 1068 |
+ .catch((error) => {
|
|
| 1069 |
+ console.error('단어장 정보를 불러오는 중 오류 발생:', error);
|
|
| 1070 |
+ this.wordBookType = null; |
|
| 1071 |
+ }); |
|
| 1072 |
+ }, |
|
| 1073 |
+ // 지문 type 불러오기 |
|
| 1074 |
+ fetchTextType(text_id) {
|
|
| 1075 |
+ axios({
|
|
| 1076 |
+ url: '/text/selectOneText.json', |
|
| 1077 |
+ method: 'post', |
|
| 1078 |
+ headers: {
|
|
| 1079 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 1080 |
+ }, |
|
| 1081 |
+ data: {
|
|
| 1082 |
+ textId: text_id, |
|
| 1083 |
+ }, |
|
| 1084 |
+ }) |
|
| 1085 |
+ .then((response) => {
|
|
| 1086 |
+ const text_type_id = response.data[0].text_type_id; |
|
| 1087 |
+ // console.log("지문 유형 아이디 : ", text_type_id);
|
|
| 1088 |
+ if (text_type_id === '2') {
|
|
| 1089 |
+ this.goToPage('Chapter1_2');
|
|
| 1090 |
+ } else if (text_type_id === '3') {
|
|
| 1091 |
+ this.goToPage('Chapter1_3');
|
|
| 1092 |
+ } |
|
| 1093 |
+ }) |
|
| 1094 |
+ .catch((err) => {
|
|
| 1095 |
+ console.log('지문 에러 : ', err);
|
|
| 1096 |
+ }); |
|
| 1097 |
+ }, |
|
| 1098 |
+ |
|
| 1099 |
+ // 평가 정보를 통해서 관련 문제 가져오기 |
|
| 1100 |
+ fetchEvalData(evaldata) {
|
|
| 1101 |
+ axios({
|
|
| 1102 |
+ url: '/evalProblem/selectEvalProblem.json', |
|
| 1103 |
+ method: 'post', |
|
| 1104 |
+ headers: {
|
|
| 1105 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 1106 |
+ }, |
|
| 1107 |
+ data: {
|
|
| 1108 |
+ evalId: evaldata.learning_id, |
|
| 1109 |
+ }, |
|
| 1110 |
+ }) |
|
| 1111 |
+ .then((response) => {
|
|
| 1112 |
+ const payload = {
|
|
| 1113 |
+ learning_id: response.data, |
|
| 1114 |
+ label: evaldata.label, |
|
| 1115 |
+ seqNum: evaldata.seqNum, |
|
| 1116 |
+ }; |
|
| 1117 |
+ |
|
| 1118 |
+ // Vuex 뮤테이션 호출 |
|
| 1119 |
+ this.$store.commit('setLearningData', payload);
|
|
| 1120 |
+ this.handleProblemDetail(response.data[0]); |
|
| 1121 |
+ this.goToPage(this.problemType); |
|
| 1122 |
+ }) |
|
| 1123 |
+ .catch((error) => {
|
|
| 1124 |
+ console.error('fetchData - error: ', error);
|
|
| 1125 |
+ return []; |
|
| 1126 |
+ }); |
|
| 1127 |
+ }, |
|
| 1128 |
+ |
|
| 1129 |
+ handleProblemDetail(item) {
|
|
| 1130 |
+ if (item.prblm_type_id === 'prblm_type_001') {
|
|
| 1131 |
+ this.problemType = 'Chapter3'; |
|
| 1132 |
+ } else if (item.prblm_type_id === 'prblm_type_002') {
|
|
| 1133 |
+ this.problemType = 'Chapter3_1'; |
|
| 1134 |
+ } else if (item.prblm_type_id === 'prblm_type_003') {
|
|
| 1135 |
+ this.problemType = 'Chapter3_2'; |
|
| 1136 |
+ } else if (item.prblm_type_id === 'prblm_type_004') {
|
|
| 1137 |
+ this.problemType = 'Chapter3_3'; |
|
| 1138 |
+ } else if (item.prblm_type_id === 'prblm_type_005') {
|
|
| 1139 |
+ this.problemType = 'Chapter3_3_1'; |
|
| 1140 |
+ } else if (item.prblm_type_id === 'prblm_type_006') {
|
|
| 1141 |
+ console.log(item); |
|
| 1142 |
+ this.problemType = 'Chapter3_4'; |
|
| 1143 |
+ } else if (item.prblm_type_id === 'prblm_type_007') {
|
|
| 1144 |
+ this.problemType = 'Chapter3_5'; |
|
| 1145 |
+ } else if (item.prblm_type_id === 'prblm_type_008') {
|
|
| 1146 |
+ this.problemType = 'Chapter3_6'; |
|
| 1147 |
+ } else if (item.prblm_type_id === 'prblm_type_009') {
|
|
| 1148 |
+ this.problemType = 'Chapter3_7'; |
|
| 1149 |
+ } else if (item.prblm_type_id === 'prblm_type_010') {
|
|
| 1150 |
+ this.problemType = 'Chapter3_8'; |
|
| 1151 |
+ } else if (item.prblm_type_id === 'prblm_type_011') {
|
|
| 1152 |
+ this.problemType = 'Chapter3_9'; |
|
| 1153 |
+ } else if (item.prblm_type_id === 'prblm_type_012') {
|
|
| 1154 |
+ this.problemType = 'Chapter3_10'; |
|
| 1155 |
+ } else if (item.prblm_type_id === 'prblm_type_013') {
|
|
| 1156 |
+ this.problemType = 'Chapter3_11'; |
|
| 1157 |
+ } else if (item.prblm_type_id === 'prblm_type_014') {
|
|
| 1158 |
+ this.problemType = 'Chapter3_12'; |
|
| 1159 |
+ } else if (item.prblm_type_id === 'prblm_type_015') {
|
|
| 1160 |
+ this.problemType = 'Chapter3_13'; |
|
| 1161 |
+ } else if (item.prblm_type_id === 'prblm_type_016') {
|
|
| 1162 |
+ this.problemType = 'Chapter3_14'; |
|
| 1163 |
+ } else if (item.prblm_type_id === 'prblm_type_017') {
|
|
| 1164 |
+ this.problemType = 'Chapter3_15'; |
|
| 1165 |
+ } else if (item.prblm_type_id === 'prblm_type_018') {
|
|
| 1166 |
+ this.problemType = 'Chapter2_8'; |
|
| 1167 |
+ } else if (item.prblm_type_id === 'prblm_type_019') {
|
|
| 1168 |
+ this.problemType = 'Chapter2_7'; |
|
| 1169 |
+ } else if (item.prblm_type_id === 'prblm_type_020') {
|
|
| 1170 |
+ this.problemType = 'Chapter2_5'; |
|
| 1171 |
+ } else if (item.prblm_type_id === 'prblm_type_021') {
|
|
| 1172 |
+ this.problemType = 'Chapter2_6'; |
|
| 1173 |
+ } else if (item.prblm_type_id === 'prblm_type_022') {
|
|
| 1174 |
+ this.problemType = 'Chapter2_10'; |
|
| 1175 |
+ } else if (item.prblm_type_id === 'prblm_type_023') {
|
|
| 1176 |
+ this.problemType = 'Chapter2_11'; |
|
| 1177 |
+ } else if (item.prblm_type_id === 'prblm_type_024') {
|
|
| 1178 |
+ this.problemType = 'Chapter2_13'; |
|
| 1179 |
+ } |
|
| 1180 |
+ }, |
|
| 1181 |
+ openCameraModal() {
|
|
| 1182 |
+ this.closeModal(); |
|
| 1183 |
+ |
|
| 1184 |
+ this.showCameraModal = true; |
|
| 1185 |
+ navigator.mediaDevices |
|
| 1186 |
+ .getUserMedia({ video: true })
|
|
| 1187 |
+ .then((stream) => {
|
|
| 1188 |
+ const modalVideo = this.$refs.modalVideoElement; |
|
| 1189 |
+ modalVideo.srcObject = stream; |
|
| 1190 |
+ this.stream = stream; |
|
| 1191 |
+ }) |
|
| 1192 |
+ .catch((error) => {
|
|
| 1193 |
+ console.log('error>>>>>>>>', error);
|
|
| 1194 |
+ alert('웹캠이 필요한 기능입니다!');
|
|
| 1195 |
+ this.closeModal(); // 모달창을 닫음 |
|
| 1196 |
+ }); |
|
| 1197 |
+ }, |
|
| 1198 |
+ closeModal() {
|
|
| 1199 |
+ this.searchOpen = false; |
|
| 1200 |
+ this.searchOpen2 = false; |
|
| 1201 |
+ this.showCameraModal = false; |
|
| 1202 |
+ this.photoTaken = false; |
|
| 1203 |
+ this.photo = null; |
|
| 1204 |
+ |
|
| 1205 |
+ //스트림 종료 |
|
| 1206 |
+ if (this.stream) {
|
|
| 1207 |
+ let tracks = this.stream.getTracks(); |
|
| 1208 |
+ tracks.forEach((track) => track.stop()); |
|
| 1209 |
+ this.stream = null; |
|
| 1210 |
+ } |
|
| 1211 |
+ }, |
|
| 1212 |
+ |
|
| 1213 |
+ onVideoLoaded() {
|
|
| 1214 |
+ const video = this.$refs.modalVideoElement; |
|
| 1215 |
+ const canvas = this.$refs.canvas; |
|
| 1216 |
+ const ctx = canvas.getContext('2d');
|
|
| 1217 |
+ |
|
| 1218 |
+ canvas.width = video.videoWidth; |
|
| 1219 |
+ canvas.height = video.videoHeight; |
|
| 1220 |
+ }, |
|
| 1221 |
+ takePhoto() {
|
|
| 1222 |
+ const video = this.$refs.modalVideoElement; |
|
| 1223 |
+ const canvas = this.$refs.canvas; |
|
| 1224 |
+ const ctx = canvas.getContext('2d');
|
|
| 1225 |
+ |
|
| 1226 |
+ ctx.save(); // 현재 상태 저장 |
|
| 1227 |
+ |
|
| 1228 |
+ // 캔버스 좌우 반전 |
|
| 1229 |
+ ctx.scale(-1, 1); |
|
| 1230 |
+ ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height); |
|
| 1231 |
+ |
|
| 1232 |
+ ctx.restore(); |
|
| 1233 |
+ |
|
| 1234 |
+ const overlayImg = new Image(); |
|
| 1235 |
+ overlayImg.src = 'client/resources/img/camera-rabbit.png'; |
|
| 1236 |
+ overlayImg.onload = () => {
|
|
| 1237 |
+ const overlayWidth = canvas.width * 0.4; |
|
| 1238 |
+ const overlayHeight = (overlayImg.height / overlayImg.width) * overlayWidth; |
|
| 1239 |
+ const overlayX = canvas.width - overlayWidth; |
|
| 1240 |
+ const overlayY = canvas.height - overlayHeight; |
|
| 1241 |
+ |
|
| 1242 |
+ // 오버레이 이미지 그리기 |
|
| 1243 |
+ ctx.drawImage(overlayImg, overlayX, overlayY, overlayWidth, overlayHeight); |
|
| 1244 |
+ |
|
| 1245 |
+ // 사진 저장 함수 호출 |
|
| 1246 |
+ const dataURL = canvas.toDataURL('image/png');
|
|
| 1247 |
+ this.$router.push({
|
|
| 1248 |
+ name: 'PhotoEdit', |
|
| 1249 |
+ query: {
|
|
| 1250 |
+ image: encodeURIComponent(dataURL), |
|
| 1251 |
+ unit_id: this.unit_id, |
|
| 1252 |
+ book_id: this.book_id, |
|
| 1253 |
+ }, |
|
| 1254 |
+ }); |
|
| 1255 |
+ }; |
|
| 1256 |
+ }, |
|
| 1257 |
+ |
|
| 1258 |
+ buttonSearch2() {
|
|
| 1259 |
+ this.searchOpen2 = true; |
|
| 1260 |
+ }, |
|
| 1261 |
+ closeBtn() {
|
|
| 1262 |
+ this.searchOpen = false; |
|
| 1263 |
+ }, |
|
| 1264 |
+ |
|
| 1265 |
+ // 유저 아이디를 unit 아이디를 통해 가져오기 |
|
| 1266 |
+ searchStdId() {
|
|
| 1267 |
+ const userInfo = this.$store.getters.getUserInfo; |
|
| 1268 |
+ axios({
|
|
| 1269 |
+ url: '/userclass/searchStdId.json', |
|
| 1270 |
+ method: 'post', |
|
| 1271 |
+ headers: {
|
|
| 1272 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 1273 |
+ }, |
|
| 1274 |
+ data: {
|
|
| 1275 |
+ userId: userInfo.userId, |
|
| 1276 |
+ unitId: this.unit_id, |
|
| 1277 |
+ }, |
|
| 1278 |
+ }) |
|
| 1279 |
+ .then((response) => {
|
|
| 1280 |
+ this.$store.commit('setStdId', response.data);
|
|
| 1281 |
+ }) |
|
| 1282 |
+ .catch((err) => {
|
|
| 1283 |
+ console.log('지문 에러 : ', err);
|
|
| 1284 |
+ }); |
|
| 1285 |
+ }, |
|
| 1078 | 1286 |
}, |
| 1079 |
- }, |
|
| 1080 |
- beforeDestroy() {
|
|
| 1081 |
- // 컴포넌트가 파괴되기 전에 리스너 제거 |
|
| 1082 |
- window.removeEventListener("resize", this.updateCanvasRect);
|
|
| 1083 |
- this.$refs.canvas.removeEventListener("click", this.handleCanvasClick);
|
|
| 1084 |
- }, |
|
| 1287 |
+ components: {
|
|
| 1288 |
+ SvgIcon, |
|
| 1289 |
+ }, |
|
| 1290 |
+ mounted() {
|
|
| 1291 |
+ console.log('main mounted');
|
|
| 1292 |
+ this.checkAndFetchData(); |
|
| 1293 |
+ // const { book_id, unit_id } = this.$route.query;
|
|
| 1294 |
+ console.log('>>>>>>>>>>>>>>>>>>>', this.$store.getters.currentDashboard);
|
|
| 1295 |
+ }, |
|
| 1296 |
+ watch: {
|
|
| 1297 |
+ getBookId(newBookId) {
|
|
| 1298 |
+ this.checkAndFetchData(); |
|
| 1299 |
+ }, |
|
| 1300 |
+ getUnitId(newUnitId) {
|
|
| 1301 |
+ this.checkAndFetchData(); |
|
| 1302 |
+ }, |
|
| 1303 |
+ }, |
|
| 1304 |
+ computed: {
|
|
| 1305 |
+ ...mapGetters(['getBookId', 'getUnitId']), |
|
| 1306 |
+ |
|
| 1307 |
+ processedRoadmap() {
|
|
| 1308 |
+ let problemCounter = 0; |
|
| 1309 |
+ let wordCounter = 0; |
|
| 1310 |
+ let textCounter = 0; |
|
| 1311 |
+ let evalCounter = 0; |
|
| 1312 |
+ |
|
| 1313 |
+ return this.roadmapData.map((item) => {
|
|
| 1314 |
+ if (item.wd_cnt_id !== null) {
|
|
| 1315 |
+ wordCounter++; |
|
| 1316 |
+ return {
|
|
| 1317 |
+ label: `단어장${wordCounter}`,
|
|
| 1318 |
+ learning_id: item.wd_cnt_id, |
|
| 1319 |
+ seqNum: item.seq, |
|
| 1320 |
+ }; |
|
| 1321 |
+ } else if (item.text_id !== null) {
|
|
| 1322 |
+ textCounter++; |
|
| 1323 |
+ return {
|
|
| 1324 |
+ label: `지문${textCounter}`,
|
|
| 1325 |
+ learning_id: item.text_id, |
|
| 1326 |
+ seqNum: item.seq, |
|
| 1327 |
+ }; |
|
| 1328 |
+ } else if (item.eval_id !== null) {
|
|
| 1329 |
+ evalCounter++; |
|
| 1330 |
+ return {
|
|
| 1331 |
+ label: evalCounter === 1 ? '중간평가' : '최종평가', |
|
| 1332 |
+ learning_id: item.eval_id, |
|
| 1333 |
+ seqNum: item.seq, |
|
| 1334 |
+ }; |
|
| 1335 |
+ } else {
|
|
| 1336 |
+ problemCounter++; |
|
| 1337 |
+ return {
|
|
| 1338 |
+ label: `문제${problemCounter}`,
|
|
| 1339 |
+ learning_id: item.prblm_id, |
|
| 1340 |
+ seqNum: item.seq, |
|
| 1341 |
+ }; |
|
| 1342 |
+ } |
|
| 1343 |
+ }); |
|
| 1344 |
+ }, |
|
| 1345 |
+ }, |
|
| 1346 |
+ beforeDestroy() {
|
|
| 1347 |
+ // 컴포넌트가 파괴되기 전에 리스너 제거 |
|
| 1348 |
+ window.removeEventListener('resize', this.updateCanvasRect);
|
|
| 1349 |
+ this.$refs.canvas.removeEventListener('click', this.handleCanvasClick);
|
|
| 1350 |
+ }, |
|
| 1085 | 1351 |
}; |
| 1086 | 1352 |
</script> |
| 1087 | 1353 |
|
| 1088 | 1354 |
<style scoped> |
| 1089 | 1355 |
.complete-wrap img {
|
| 1090 |
- width: auto; |
|
| 1356 |
+ width: auto; |
|
| 1091 | 1357 |
} |
| 1092 | 1358 |
|
| 1093 | 1359 |
.body {
|
| 1094 |
- width: 1435px; |
|
| 1095 |
- height: auto; |
|
| 1096 |
- margin: 0 auto; |
|
| 1360 |
+ width: 1435px; |
|
| 1361 |
+ height: auto; |
|
| 1362 |
+ margin: 0 auto; |
|
| 1097 | 1363 |
} |
| 1098 | 1364 |
|
| 1099 | 1365 |
#container {
|
| 1100 |
- position: relative; |
|
| 1101 |
- margin: auto; |
|
| 1102 |
- border: 10px #333 solid; |
|
| 1103 |
- display: flex; |
|
| 1104 |
- justify-content: center; |
|
| 1105 |
- align-items: center; |
|
| 1106 |
- z-index: 100; |
|
| 1366 |
+ position: relative; |
|
| 1367 |
+ margin: auto; |
|
| 1368 |
+ border: 10px #333 solid; |
|
| 1369 |
+ display: flex; |
|
| 1370 |
+ justify-content: center; |
|
| 1371 |
+ align-items: center; |
|
| 1372 |
+ z-index: 100; |
|
| 1107 | 1373 |
} |
| 1108 | 1374 |
|
| 1109 | 1375 |
video {
|
| 1110 |
- width: 100%; |
|
| 1111 |
- height: auto; |
|
| 1112 |
- background-color: #666; |
|
| 1376 |
+ width: 100%; |
|
| 1377 |
+ height: auto; |
|
| 1378 |
+ background-color: #666; |
|
| 1113 | 1379 |
} |
| 1114 | 1380 |
|
| 1115 | 1381 |
.mirrored {
|
| 1116 |
- transform: scaleX(-1); |
|
| 1382 |
+ transform: scaleX(-1); |
|
| 1117 | 1383 |
} |
| 1118 | 1384 |
|
| 1119 | 1385 |
.new-btn:disabled {
|
| 1120 |
- background-color: #fff3d7; |
|
| 1121 |
- cursor: not-allowed; |
|
| 1386 |
+ background-color: #fff3d7; |
|
| 1387 |
+ cursor: not-allowed; |
|
| 1122 | 1388 |
} |
| 1123 | 1389 |
|
| 1124 | 1390 |
.sticker {
|
| 1125 |
- position: absolute; |
|
| 1126 |
- cursor: move; |
|
| 1391 |
+ position: absolute; |
|
| 1392 |
+ cursor: move; |
|
| 1127 | 1393 |
} |
| 1128 | 1394 |
|
| 1129 | 1395 |
.sticker-handle {
|
| 1130 |
- width: 15px; |
|
| 1131 |
- height: 15px; |
|
| 1132 |
- background: rgba(255, 255, 255, 0.521); |
|
| 1133 |
- position: absolute; |
|
| 1134 |
- bottom: 0; |
|
| 1135 |
- right: 0; |
|
| 1136 |
- cursor: nwse-resize; |
|
| 1137 |
- font-size: 13px; |
|
| 1138 |
- font-weight: bolder; |
|
| 1139 |
- color: rgb(63, 63, 63); |
|
| 1396 |
+ width: 15px; |
|
| 1397 |
+ height: 15px; |
|
| 1398 |
+ background: rgba(255, 255, 255, 0.521); |
|
| 1399 |
+ position: absolute; |
|
| 1400 |
+ bottom: 0; |
|
| 1401 |
+ right: 0; |
|
| 1402 |
+ cursor: nwse-resize; |
|
| 1403 |
+ font-size: 13px; |
|
| 1404 |
+ font-weight: bolder; |
|
| 1405 |
+ color: rgb(63, 63, 63); |
|
| 1140 | 1406 |
} |
| 1141 | 1407 |
|
| 1142 | 1408 |
.sticker-delete {
|
| 1143 |
- position: absolute; |
|
| 1144 |
- top: 0; |
|
| 1145 |
- right: 0; |
|
| 1146 |
- background: rgba(255, 0, 0, 0.425); |
|
| 1147 |
- color: white; |
|
| 1148 |
- padding: 5px; |
|
| 1149 |
- cursor: pointer; |
|
| 1409 |
+ position: absolute; |
|
| 1410 |
+ top: 0; |
|
| 1411 |
+ right: 0; |
|
| 1412 |
+ background: rgba(255, 0, 0, 0.425); |
|
| 1413 |
+ color: white; |
|
| 1414 |
+ padding: 5px; |
|
| 1415 |
+ cursor: pointer; |
|
| 1150 | 1416 |
} |
| 1151 | 1417 |
|
| 1152 | 1418 |
.toolbar {
|
| 1153 |
- display: flex; |
|
| 1154 |
- justify-content: center; |
|
| 1155 |
- margin-top: 10px; |
|
| 1419 |
+ display: flex; |
|
| 1420 |
+ justify-content: center; |
|
| 1421 |
+ margin-top: 10px; |
|
| 1156 | 1422 |
} |
| 1157 | 1423 |
|
| 1158 | 1424 |
.toolbar button {
|
| 1159 |
- margin: 5px; |
|
| 1160 |
- padding: 5px 10px; |
|
| 1161 |
- cursor: pointer; |
|
| 1425 |
+ margin: 5px; |
|
| 1426 |
+ padding: 5px 10px; |
|
| 1427 |
+ cursor: pointer; |
|
| 1162 | 1428 |
} |
| 1163 | 1429 |
|
| 1164 | 1430 |
.toolbar input {
|
| 1165 |
- margin: 5px; |
|
| 1431 |
+ margin: 5px; |
|
| 1166 | 1432 |
} |
| 1167 | 1433 |
|
| 1168 | 1434 |
.rabbit-end {
|
| 1169 |
- cursor: pointer; |
|
| 1170 |
- display: block; |
|
| 1171 |
- position: absolute; |
|
| 1172 |
- bottom: 0px; |
|
| 1173 |
- left: -15px; |
|
| 1174 |
- z-index: 10000; |
|
| 1435 |
+ cursor: pointer; |
|
| 1436 |
+ display: block; |
|
| 1437 |
+ position: absolute; |
|
| 1438 |
+ bottom: 0px; |
|
| 1439 |
+ left: -15px; |
|
| 1440 |
+ z-index: 10000; |
|
| 1175 | 1441 |
} |
| 1176 | 1442 |
|
| 1177 | 1443 |
.rabbit-running {
|
| 1178 |
- position: absolute; |
|
| 1179 |
- /* bottom: 40px; */ |
|
| 1180 |
- /* right: 110px; */ |
|
| 1181 |
- top: -118px; |
|
| 1182 |
- z-index: 10000; |
|
| 1183 |
- transform: scaleX(-1); |
|
| 1184 |
- transition: all 0.5s ease-in-out; |
|
| 1444 |
+ position: absolute; |
|
| 1445 |
+ /* bottom: 40px; */ |
|
| 1446 |
+ /* right: 110px; */ |
|
| 1447 |
+ top: -118px; |
|
| 1448 |
+ z-index: 1; |
|
| 1449 |
+ transform: scaleX(-1); |
|
| 1450 |
+ transition: all 0.5s ease-in-out; |
|
| 1185 | 1451 |
} |
| 1186 | 1452 |
|
| 1187 | 1453 |
.fireworks-end {
|
| 1188 |
- position: absolute; |
|
| 1189 |
- bottom: 70px; |
|
| 1190 |
- left: -40px; |
|
| 1191 |
- width: 20rem; |
|
| 1454 |
+ position: absolute; |
|
| 1455 |
+ bottom: 70px; |
|
| 1456 |
+ left: -40px; |
|
| 1457 |
+ width: 20rem; |
|
| 1192 | 1458 |
} |
| 1193 | 1459 |
|
| 1194 | 1460 |
.camera-rabbit {
|
| 1195 |
- position: absolute; |
|
| 1196 |
- right: 0; |
|
| 1197 |
- bottom: 0; |
|
| 1198 |
- width: 40%; |
|
| 1461 |
+ position: absolute; |
|
| 1462 |
+ right: 0; |
|
| 1463 |
+ bottom: 0; |
|
| 1464 |
+ width: 40%; |
|
| 1199 | 1465 |
} |
| 1200 | 1466 |
|
| 1201 | 1467 |
.race-btn p.clear {
|
| 1202 |
- /* width: auto; */ |
|
| 1203 |
- font-size: 20px; |
|
| 1204 |
- line-height: 1.6; |
|
| 1205 |
- color: #333; |
|
| 1206 |
- background-color: #f9f9f9; |
|
| 1207 |
- padding: 6px; |
|
| 1208 |
- border-radius: 8px; |
|
| 1209 |
- /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */ |
|
| 1210 |
- margin-bottom: 20px; |
|
| 1211 |
- position: static; |
|
| 1212 |
- display: flex; |
|
| 1213 |
- align-items: center; |
|
| 1214 |
- gap: 0.5rem; |
|
| 1468 |
+ /* width: auto; */ |
|
| 1469 |
+ font-size: 20px; |
|
| 1470 |
+ line-height: 1.6; |
|
| 1471 |
+ color: #333; |
|
| 1472 |
+ background-color: #f9f9f9; |
|
| 1473 |
+ padding: 6px; |
|
| 1474 |
+ border-radius: 8px; |
|
| 1475 |
+ /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */ |
|
| 1476 |
+ margin-bottom: 20px; |
|
| 1477 |
+ position: static; |
|
| 1478 |
+ display: flex; |
|
| 1479 |
+ align-items: center; |
|
| 1480 |
+ gap: 0.5rem; |
|
| 1215 | 1481 |
} |
| 1216 | 1482 |
|
| 1217 | 1483 |
.race-btn p.before-clear {
|
| 1218 |
- /* width: auto; */ |
|
| 1219 |
- font-size: 20px; |
|
| 1220 |
- line-height: 1.6; |
|
| 1221 |
- color: #ffffff; |
|
| 1222 |
- background-color: rgba(119, 119, 119, 0.815); |
|
| 1223 |
- padding: 6px; |
|
| 1224 |
- border-radius: 8px; |
|
| 1225 |
- /* border: 1px solid rgba(255, 255, 255, 0.2); */ |
|
| 1226 |
- margin-bottom: 20px; |
|
| 1227 |
- /* box-shadow: none; */ |
|
| 1228 |
- position: static; |
|
| 1484 |
+ /* width: auto; */ |
|
| 1485 |
+ font-size: 20px; |
|
| 1486 |
+ line-height: 1.6; |
|
| 1487 |
+ color: #ffffff; |
|
| 1488 |
+ background-color: rgba(119, 119, 119, 0.815); |
|
| 1489 |
+ padding: 6px; |
|
| 1490 |
+ border-radius: 8px; |
|
| 1491 |
+ /* border: 1px solid rgba(255, 255, 255, 0.2); */ |
|
| 1492 |
+ margin-bottom: 20px; |
|
| 1493 |
+ /* box-shadow: none; */ |
|
| 1494 |
+ position: static; |
|
| 1229 | 1495 |
} |
| 1230 | 1496 |
|
| 1231 | 1497 |
.race-box .lcon {
|
| 1232 |
- display: flex; |
|
| 1233 |
- align-items: center; |
|
| 1498 |
+ display: flex; |
|
| 1499 |
+ align-items: center; |
|
| 1234 | 1500 |
} |
| 1235 | 1501 |
|
| 1236 | 1502 |
.lcon .race-btn .rabbit-running {
|
| 1237 |
- transform: scaleX(1); |
|
| 1503 |
+ transform: scaleX(1); |
|
| 1238 | 1504 |
} |
| 1239 | 1505 |
|
| 1240 | 1506 |
.rabbit-start img {
|
| 1241 |
- transform: scaleX(-1); |
|
| 1507 |
+ transform: scaleX(-1); |
|
| 1242 | 1508 |
} |
| 1243 | 1509 |
|
| 1244 | 1510 |
.image-container {
|
| 1245 |
- position: relative; |
|
| 1246 |
- display: inline-block; |
|
| 1511 |
+ position: relative; |
|
| 1512 |
+ display: inline-block; |
|
| 1247 | 1513 |
} |
| 1248 | 1514 |
|
| 1249 | 1515 |
.clear-img {
|
| 1250 |
- position: absolute; |
|
| 1251 |
- top: -27px; |
|
| 1252 |
- left: 0; |
|
| 1253 |
- width: 100px; |
|
| 1254 |
- height: 100px; |
|
| 1255 |
- z-index: 1; |
|
| 1516 |
+ position: absolute; |
|
| 1517 |
+ top: -27px; |
|
| 1518 |
+ left: 0; |
|
| 1519 |
+ width: 100px; |
|
| 1520 |
+ height: 100px; |
|
| 1521 |
+ z-index: 1; |
|
| 1522 |
+} |
|
| 1523 |
+ |
|
| 1524 |
+.popup-wrap {
|
|
| 1525 |
+ z-index: 1; |
|
| 1256 | 1526 |
} |
| 1257 | 1527 |
</style> |
--- client/views/pages/main/PhotoEdit.vue
+++ client/views/pages/main/PhotoEdit.vue
... | ... | @@ -1,197 +1,203 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div class="content-wrap "> |
|
| 3 |
- <div class="flex justify-center"> |
|
| 4 |
- <div> |
|
| 5 |
- <div class="frame title-box"> |
|
| 6 |
- <div class="photo" style="height: 100%;"> |
|
| 7 |
- <img :src="imageSrc" alt="" style="height: 100%;"> |
|
| 8 |
- </div> |
|
| 9 |
- <p class="title mt20" style="color: #fff;">{{ today }} 1단원 완료!</p>
|
|
| 10 |
- </div> |
|
| 11 |
- <div class="btn-wrap flex justify-center mt40" style="gap: 40px;"> |
|
| 12 |
- <button class="login-btn" @click="recapture()"> |
|
| 13 |
- <img src="../../../resources/img/btn07_s.png" alt=""> |
|
| 14 |
- <p>다시 찍기</p> |
|
| 15 |
- </button> |
|
| 2 |
+ <div class="content-wrap"> |
|
| 3 |
+ <div class="flex justify-center"> |
|
| 4 |
+ <div> |
|
| 5 |
+ <div class="frame title-box"> |
|
| 6 |
+ <div class="photo" style="height: 100%"> |
|
| 7 |
+ <img :src="imageSrc" alt="" style="height: 100%" /> |
|
| 8 |
+ </div> |
|
| 9 |
+ <p class="title mt20" style="color: #fff">{{ today }} 1단원 완료!</p>
|
|
| 10 |
+ </div> |
|
| 11 |
+ <div class="btn-wrap flex justify-center mt40" style="gap: 40px"> |
|
| 12 |
+ <button class="login-btn" @click="recapture()"> |
|
| 13 |
+ <img src="../../../resources/img/btn07_s.png" alt="" /> |
|
| 14 |
+ <p>다시 찍기</p> |
|
| 15 |
+ </button> |
|
| 16 | 16 |
|
| 17 |
- <button class="login-btn" type="submit" @click="insertPhoto()"><img src="../../../resources/img/btn07_s.png" |
|
| 18 |
- alt=""> |
|
| 19 |
- <p>완료</p> |
|
| 20 |
- </button> |
|
| 17 |
+ <button class="login-btn" type="submit" @click="insertPhoto()"> |
|
| 18 |
+ <img src="../../../resources/img/btn07_s.png" alt="" /> |
|
| 19 |
+ <p>완료</p> |
|
| 20 |
+ </button> |
|
| 21 |
+ </div> |
|
| 22 |
+ </div> |
|
| 21 | 23 |
</div> |
| 22 |
- </div> |
|
| 23 | 24 |
</div> |
| 24 |
- </div> |
|
| 25 | 25 |
</template> |
| 26 | 26 |
|
| 27 | 27 |
<script> |
| 28 | 28 |
import axios from 'axios'; |
| 29 | 29 |
|
| 30 | 30 |
export default {
|
| 31 |
- data() {
|
|
| 32 |
- return {
|
|
| 33 |
- items: [ |
|
| 34 |
- { imgSrc1: 'client/resources/img/btn20_75s_normal.png', imgSrc2: 'client/resources/img/btn20_75s_click.png', },
|
|
| 35 |
- { imgSrc1: 'client/resources/img/btn21_75s_normal.png', imgSrc2: 'client/resources/img/btn21_75s_click.png', },
|
|
| 36 |
- ], |
|
| 37 |
- timer: '00', |
|
| 38 |
- selectedIndex: 0, |
|
| 31 |
+ data() {
|
|
| 32 |
+ return {
|
|
| 33 |
+ items: [ |
|
| 34 |
+ {
|
|
| 35 |
+ imgSrc1: 'client/resources/img/btn20_75s_normal.png', |
|
| 36 |
+ imgSrc2: 'client/resources/img/btn20_75s_click.png', |
|
| 37 |
+ }, |
|
| 38 |
+ {
|
|
| 39 |
+ imgSrc1: 'client/resources/img/btn21_75s_normal.png', |
|
| 40 |
+ imgSrc2: 'client/resources/img/btn21_75s_click.png', |
|
| 41 |
+ }, |
|
| 42 |
+ ], |
|
| 43 |
+ timer: '00', |
|
| 44 |
+ selectedIndex: 0, |
|
| 39 | 45 |
|
| 40 |
- imageSrc: '', |
|
| 41 |
- file: '', |
|
| 42 |
- fileId: '', |
|
| 43 |
- unit_id: '', |
|
| 44 |
- book_id: '', |
|
| 45 |
- today: '', |
|
| 46 |
- } |
|
| 47 |
- }, |
|
| 48 |
- methods: {
|
|
| 49 |
- recapture() {
|
|
| 50 |
- this.$router.push({ name: 'Dashboard', query: { reCapture: 'true', unit_id: this.unit_id, book_id: this.book_id } });
|
|
| 46 |
+ imageSrc: '', |
|
| 47 |
+ file: '', |
|
| 48 |
+ fileId: '', |
|
| 49 |
+ unit_id: '', |
|
| 50 |
+ book_id: '', |
|
| 51 |
+ today: '', |
|
| 52 |
+ }; |
|
| 51 | 53 |
}, |
| 52 |
- async fetchImageAsFile(imageUrl, filename = "image.jpg") {
|
|
| 53 |
- try {
|
|
| 54 |
- const response = await fetch(imageUrl); |
|
| 55 |
- const blob = await response.blob(); |
|
| 54 |
+ methods: {
|
|
| 55 |
+ recapture() {
|
|
| 56 |
+ this.$router.push({
|
|
| 57 |
+ name: 'Dashboard', |
|
| 58 |
+ query: { reCapture: 'true', unit_id: this.unit_id, book_id: this.book_id },
|
|
| 59 |
+ }); |
|
| 60 |
+ }, |
|
| 61 |
+ async fetchImageAsFile(imageUrl, filename = 'image.jpg') {
|
|
| 62 |
+ try {
|
|
| 63 |
+ const response = await fetch(imageUrl); |
|
| 64 |
+ const blob = await response.blob(); |
|
| 56 | 65 |
|
| 57 |
- const file = new File([blob], filename, { type: blob.type });
|
|
| 66 |
+ const file = new File([blob], filename, { type: blob.type });
|
|
| 58 | 67 |
|
| 59 |
- return file; |
|
| 60 |
- } catch (error) {
|
|
| 61 |
- console.error("이미지 변환 오류:", error);
|
|
| 62 |
- throw new Error("이미지 변환에 실패했습니다.");
|
|
| 63 |
- } |
|
| 68 |
+ return file; |
|
| 69 |
+ } catch (error) {
|
|
| 70 |
+ console.error('이미지 변환 오류:', error);
|
|
| 71 |
+ throw new Error('이미지 변환에 실패했습니다.');
|
|
| 72 |
+ } |
|
| 73 |
+ }, |
|
| 74 |
+ async fetchPhoto() {
|
|
| 75 |
+ const image = this.$route.query.image; |
|
| 76 |
+ if (image) {
|
|
| 77 |
+ this.imageSrc = decodeURIComponent(image); |
|
| 78 |
+ try {
|
|
| 79 |
+ this.file = await this.fetchImageAsFile(this.imageSrc, 'image.jpg'); |
|
| 80 |
+ } catch (error) {
|
|
| 81 |
+ console.error('파일 변환 오류:', error);
|
|
| 82 |
+ } |
|
| 83 |
+ } |
|
| 84 |
+ }, |
|
| 85 |
+ async uploadFiles(file) {
|
|
| 86 |
+ if (!file) {
|
|
| 87 |
+ console.error('파일이 없습니다.');
|
|
| 88 |
+ throw new Error('파일이 없습니다.');
|
|
| 89 |
+ } |
|
| 90 |
+ const formData = new FormData(); |
|
| 91 |
+ formData.append('files', file);
|
|
| 92 |
+ |
|
| 93 |
+ try {
|
|
| 94 |
+ const response = await axios.post('http://165.229.169.113:9080/file/upload.json', formData, {
|
|
| 95 |
+ headers: {
|
|
| 96 |
+ 'Content-Type': 'multipart/form-data', |
|
| 97 |
+ }, |
|
| 98 |
+ }); |
|
| 99 |
+ |
|
| 100 |
+ return response.data.fileMngId; // 서버에서 반환된 파일 매니지 ID |
|
| 101 |
+ } catch (error) {
|
|
| 102 |
+ console.error('파일 업로드 오류:', error);
|
|
| 103 |
+ throw new Error('파일 업로드에 실패했습니다.');
|
|
| 104 |
+ } |
|
| 105 |
+ }, |
|
| 106 |
+ async insertPhoto() {
|
|
| 107 |
+ try {
|
|
| 108 |
+ this.fileId = await this.uploadFiles(this.file); |
|
| 109 |
+ |
|
| 110 |
+ const response = await axios({
|
|
| 111 |
+ url: '/photo/insertPhoto.json', |
|
| 112 |
+ method: 'post', |
|
| 113 |
+ headers: {
|
|
| 114 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 115 |
+ }, |
|
| 116 |
+ data: {
|
|
| 117 |
+ photoMngId: 'PHOTO_MNG_000000000000001', // 사진첩아이디 교체 |
|
| 118 |
+ likeData: '0', |
|
| 119 |
+ unitId: this.unit_id, |
|
| 120 |
+ stdId: '1', //학생아이디 교체 |
|
| 121 |
+ fileMngId: this.fileId, |
|
| 122 |
+ }, |
|
| 123 |
+ }); |
|
| 124 |
+ this.$router.push({ name: 'Dashboard', query: { unit_id: this.unit_id, book_id: this.book_id } });
|
|
| 125 |
+ } catch (error) {
|
|
| 126 |
+ console.error('사진 삽입 오류:', error);
|
|
| 127 |
+ } |
|
| 128 |
+ }, |
|
| 129 |
+ updateContent(index) {
|
|
| 130 |
+ this.selectedIndex = index; |
|
| 131 |
+ }, |
|
| 132 |
+ goToPage(page) {
|
|
| 133 |
+ this.$router.push({ name: page });
|
|
| 134 |
+ }, |
|
| 64 | 135 |
}, |
| 65 |
- async fetchPhoto() {
|
|
| 66 |
- const image = this.$route.query.image; |
|
| 67 |
- if (image) {
|
|
| 68 |
- this.imageSrc = decodeURIComponent(image); |
|
| 69 |
- try {
|
|
| 70 |
- this.file = await this.fetchImageAsFile(this.imageSrc, "image.jpg"); |
|
| 71 |
- } catch (error) {
|
|
| 72 |
- console.error("파일 변환 오류:", error);
|
|
| 73 |
- } |
|
| 74 |
- } |
|
| 75 |
- }, async uploadFiles(file) {
|
|
| 76 |
- if (!file) {
|
|
| 77 |
- console.error("파일이 없습니다.");
|
|
| 78 |
- throw new Error("파일이 없습니다.");
|
|
| 79 |
- } |
|
| 80 |
- const formData = new FormData(); |
|
| 81 |
- formData.append("files", file);
|
|
| 82 |
- |
|
| 83 |
- try {
|
|
| 84 |
- const response = await axios.post("http://165.229.169.113:9080/file/upload.json", formData, {
|
|
| 85 |
- headers: {
|
|
| 86 |
- "Content-Type": "multipart/form-data", |
|
| 87 |
- }, |
|
| 88 |
- }); |
|
| 89 |
- |
|
| 90 |
- return response.data.fileMngId; // 서버에서 반환된 파일 매니지 ID |
|
| 91 |
- } catch (error) {
|
|
| 92 |
- console.error("파일 업로드 오류:", error);
|
|
| 93 |
- throw new Error("파일 업로드에 실패했습니다.");
|
|
| 94 |
- } |
|
| 95 |
- }, async insertPhoto() {
|
|
| 96 |
- try {
|
|
| 97 |
- this.fileId = await this.uploadFiles(this.file); |
|
| 98 |
- |
|
| 99 |
- const response = await axios({
|
|
| 100 |
- url: "/photo/insertPhoto.json", |
|
| 101 |
- method: "post", |
|
| 102 |
- headers: {
|
|
| 103 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 104 |
- }, |
|
| 105 |
- data: {
|
|
| 106 |
- "photoMngId": "PHOTO_MNG_000000000000001", // 사진첩아이디 교체 |
|
| 107 |
- "likeData": "0", |
|
| 108 |
- "unitId": this.unit_id, |
|
| 109 |
- "stdId": "1", //학생아이디 교체 |
|
| 110 |
- "fileMngId": this.fileId |
|
| 111 |
- } |
|
| 112 |
- }); |
|
| 113 |
- this.$router.push({ name: 'Dashboard', query: { unit_id: this.unit_id, book_id: this.book_id } });
|
|
| 114 |
- } catch (error) {
|
|
| 115 |
- console.error("사진 삽입 오류:", error);
|
|
| 116 |
- } |
|
| 136 |
+ watch: {},
|
|
| 137 |
+ computed: {},
|
|
| 138 |
+ created() {
|
|
| 139 |
+ const date = new Date(); |
|
| 140 |
+ const year = date.getFullYear(); |
|
| 141 |
+ const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1 필요 |
|
| 142 |
+ const day = String(date.getDate()).padStart(2, '0'); |
|
| 143 |
+ this.today = `${year}.${month}.${day}`;
|
|
| 117 | 144 |
}, |
| 118 |
- updateContent(index) {
|
|
| 119 |
- this.selectedIndex = index; |
|
| 145 |
+ components: {},
|
|
| 146 |
+ mounted() {
|
|
| 147 |
+ this.book_id = this.$route.query.book_id; |
|
| 148 |
+ this.unit_id = this.$route.query.unit_id; |
|
| 149 |
+ this.fetchPhoto(); |
|
| 120 | 150 |
}, |
| 121 |
- goToPage(page) {
|
|
| 122 |
- this.$router.push({ name: page });
|
|
| 123 |
- }, |
|
| 124 |
- }, |
|
| 125 |
- watch: {
|
|
| 126 |
- |
|
| 127 |
- }, |
|
| 128 |
- computed: {
|
|
| 129 |
- |
|
| 130 |
- }, |
|
| 131 |
- created() {
|
|
| 132 |
- const date = new Date(); |
|
| 133 |
- const year = date.getFullYear(); |
|
| 134 |
- const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1 필요 |
|
| 135 |
- const day = String(date.getDate()).padStart(2, '0'); |
|
| 136 |
- this.today = `${year}.${month}.${day}`;
|
|
| 137 |
- }, |
|
| 138 |
- components: {
|
|
| 139 |
- }, |
|
| 140 |
- mounted() {
|
|
| 141 |
- this.book_id = this.$route.query.book_id; |
|
| 142 |
- this.unit_id = this.$route.query.unit_id; |
|
| 143 |
- this.fetchPhoto(); |
|
| 144 |
- } |
|
| 145 |
-} |
|
| 151 |
+}; |
|
| 146 | 152 |
</script> |
| 147 | 153 |
<style scoped> |
| 148 | 154 |
.imgGroup {
|
| 149 |
- width: fit-content; |
|
| 155 |
+ width: fit-content; |
|
| 150 | 156 |
} |
| 151 | 157 |
|
| 152 | 158 |
.imgGroup button {
|
| 153 |
- position: relative; |
|
| 159 |
+ position: relative; |
|
| 154 | 160 |
} |
| 155 | 161 |
|
| 156 | 162 |
.imgGroup button p, |
| 157 | 163 |
.textbox p {
|
| 158 |
- position: absolute; |
|
| 159 |
- top: 50%; |
|
| 160 |
- left: 50%; |
|
| 161 |
- transform: translate(-50%, -50%); |
|
| 162 |
- width: fit-content; |
|
| 163 |
- height: fit-content; |
|
| 164 |
- background: #ffffffb8; |
|
| 165 |
- border-radius: 5px; |
|
| 166 |
- padding: 10px; |
|
| 167 |
- font-size: 48px; |
|
| 168 |
- font-family: 'ONEMobilePOP'; |
|
| 164 |
+ position: absolute; |
|
| 165 |
+ top: 50%; |
|
| 166 |
+ left: 50%; |
|
| 167 |
+ transform: translate(-50%, -50%); |
|
| 168 |
+ width: fit-content; |
|
| 169 |
+ height: fit-content; |
|
| 170 |
+ background: #ffffffb8; |
|
| 171 |
+ border-radius: 5px; |
|
| 172 |
+ padding: 10px; |
|
| 173 |
+ font-size: 48px; |
|
| 174 |
+ font-family: 'ONEMobilePOP'; |
|
| 169 | 175 |
} |
| 170 | 176 |
|
| 171 | 177 |
.pickGroup button {
|
| 172 |
- position: relative; |
|
| 173 |
- margin-right: 30px; |
|
| 178 |
+ position: relative; |
|
| 179 |
+ margin-right: 30px; |
|
| 174 | 180 |
} |
| 175 | 181 |
|
| 176 | 182 |
.pickGroup button p {
|
| 177 |
- font-size: 34px; |
|
| 178 |
- color: #c6c6c6; |
|
| 179 |
- position: absolute; |
|
| 180 |
- top: 50%; |
|
| 181 |
- left: 50%; |
|
| 182 |
- transform: translate(-50%, -50%); |
|
| 183 |
+ font-size: 34px; |
|
| 184 |
+ color: #c6c6c6; |
|
| 185 |
+ position: absolute; |
|
| 186 |
+ top: 50%; |
|
| 187 |
+ left: 50%; |
|
| 188 |
+ transform: translate(-50%, -50%); |
|
| 183 | 189 |
} |
| 184 | 190 |
|
| 185 | 191 |
.pickGroup article img {
|
| 186 |
- object-fit: contain; |
|
| 187 |
- width: -webkit-fill-available; |
|
| 192 |
+ object-fit: contain; |
|
| 193 |
+ width: -webkit-fill-available; |
|
| 188 | 194 |
} |
| 189 | 195 |
|
| 190 |
-.pickGroup article>div>p {
|
|
| 191 |
- font-size: 64px; |
|
| 196 |
+.pickGroup article > div > p {
|
|
| 197 |
+ font-size: 64px; |
|
| 192 | 198 |
} |
| 193 | 199 |
|
| 194 | 200 |
.popTxt {
|
| 195 |
- width: 101px; |
|
| 201 |
+ width: 101px; |
|
| 196 | 202 |
} |
| 197 |
-</style>(파일 끝에 줄바꿈 문자 없음) |
|
| 203 |
+</style> |
--- client/views/pages/main/PreviewNote.vue
+++ client/views/pages/main/PreviewNote.vue
... | ... | @@ -1,5 +1,6 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div class="main myplan"> |
| 3 |
+ <!-- |
|
| 3 | 4 |
<div class="yellow-box mt30"> |
| 4 | 5 |
<div class="title-box flex justify-between align-center"> |
| 5 | 6 |
<div class="flex justify-between align-center" style="gap: 20px;"> |
... | ... | @@ -12,22 +13,25 @@ |
| 12 | 13 |
</div> |
| 13 | 14 |
</div> |
| 14 | 15 |
</div> |
| 16 |
+ --> |
|
| 15 | 17 |
<div class="title-box flex justify-between mb20 mt30"> |
| 16 | 18 |
<p class="title">오답노트</p> |
| 17 | 19 |
</div> |
| 18 |
- <div class="wrap" style="border-radius: 0;"> |
|
| 20 |
+ <div class="wrap" style="border-radius: 0"> |
|
| 19 | 21 |
<div class="table-wrap"> |
| 20 | 22 |
<span class="flex align-center title2 gray mb20"> |
| 21 |
- 이 단원에서 틀린 문제가 총 <p class="title1 black"> {{ wrongAnswerNotes.length }} </p> 개 있습니다!
|
|
| 23 |
+ 이 단원에서 틀린 문제가 총 |
|
| 24 |
+ <p class="title1 black"> {{ wrongAnswerNotes.length }} </p>
|
|
| 25 |
+ 개 있습니다! |
|
| 22 | 26 |
</span> |
| 23 | 27 |
<table> |
| 24 | 28 |
<colgroup> |
| 25 |
- <col style="width: 10%;"> |
|
| 26 |
- <col style="width: 70%;"> |
|
| 27 |
- <col style="width: 15%;"> |
|
| 29 |
+ <col style="width: 10%" /> |
|
| 30 |
+ <col style="width: 70%" /> |
|
| 31 |
+ <col style="width: 15%" /> |
|
| 28 | 32 |
</colgroup> |
| 29 | 33 |
<tr v-for="note in wrongAnswerNotes" :key="note.prblmLogId"> |
| 30 |
- <td><img src="../../../resources/img/img214_19s.png" alt=""></td> |
|
| 34 |
+ <td><img src="../../../resources/img/img214_19s.png" alt="" /></td> |
|
| 31 | 35 |
<td class="text-lf"> |
| 32 | 36 |
<p class="title1">{{ note.evalType || '(평가 유형 데이터 없음)' }}</p>
|
| 33 | 37 |
<p class="title2">{{ note.prblmExpln || '(기본 문제 설명 데이터 없음)' }}</p>
|
... | ... | @@ -55,12 +59,12 @@ |
| 55 | 59 |
export default {
|
| 56 | 60 |
data() {
|
| 57 | 61 |
return {
|
| 58 |
- currentStdId: "1", // 임시 학생 아이디 |
|
| 59 |
- currentUnitId: "1", // 임시 유닛 아이디 |
|
| 62 |
+ currentStdId: '1', // 임시 학생 아이디 |
|
| 63 |
+ currentUnitId: '1', // 임시 유닛 아이디 |
|
| 60 | 64 |
wrongAnswerNotes: [], // 오답 노트 목록 데이터 |
| 61 | 65 |
unitData: {}, // 단원 정보 데이터
|
| 62 | 66 |
problemType: null, // 링크될 문제 유형 페이지 이름 |
| 63 |
- } |
|
| 67 |
+ }; |
|
| 64 | 68 |
}, |
| 65 | 69 |
methods: {
|
| 66 | 70 |
pageSetting() {
|
... | ... | @@ -78,75 +82,71 @@ |
| 78 | 82 |
|
| 79 | 83 |
// 단원 정보를 불러오는 API 호출 |
| 80 | 84 |
fetchUnitDetail() {
|
| 81 |
- axios.post('/unit/unitDetail.json', {
|
|
| 82 |
- unitId: this.currentUnitId |
|
| 83 |
- }) |
|
| 84 |
- .then(response => {
|
|
| 85 |
- console.log(response.data[0]); |
|
| 86 |
- if (response.data.length > 0) {
|
|
| 87 |
- this.unitData = response.data[0]; |
|
| 88 |
- } |
|
| 89 |
- }) |
|
| 90 |
- .catch(error => {
|
|
| 91 |
- console.error('단원 정보를 불러오는 중 오류 발생:', error);
|
|
| 92 |
- }) |
|
| 85 |
+ axios |
|
| 86 |
+ .post('/unit/unitDetail.json', {
|
|
| 87 |
+ unitId: this.currentUnitId, |
|
| 88 |
+ }) |
|
| 89 |
+ .then((response) => {
|
|
| 90 |
+ console.log(response.data[0]); |
|
| 91 |
+ if (response.data.length > 0) {
|
|
| 92 |
+ this.unitData = response.data[0]; |
|
| 93 |
+ } |
|
| 94 |
+ }) |
|
| 95 |
+ .catch((error) => {
|
|
| 96 |
+ console.error('단원 정보를 불러오는 중 오류 발생:', error);
|
|
| 97 |
+ }); |
|
| 93 | 98 |
}, |
| 94 | 99 |
|
| 95 | 100 |
// 오답노트 목록을 가져오는 API 호출 |
| 96 | 101 |
fetchWrongAnswerNotes() {
|
| 97 |
- axios.post('/problemLog/getPreviewNoteList.json', {
|
|
| 98 |
- stdId: this.currentStdId, |
|
| 99 |
- unitId: this.currentUnitId |
|
| 100 |
- }) |
|
| 101 |
- .then(response => {
|
|
| 102 |
- console.log(response.data); |
|
| 103 |
- this.wrongAnswerNotes = response.data; |
|
| 104 |
- }) |
|
| 105 |
- .catch(error => {
|
|
| 106 |
- console.error('오답노트를 불러오는 중 오류 발생:', error);
|
|
| 107 |
- }); |
|
| 102 |
+ axios |
|
| 103 |
+ .post('/problemLog/getPreviewNoteList.json', {
|
|
| 104 |
+ stdId: this.currentStdId, |
|
| 105 |
+ unitId: this.currentUnitId, |
|
| 106 |
+ }) |
|
| 107 |
+ .then((response) => {
|
|
| 108 |
+ console.log(response.data); |
|
| 109 |
+ this.wrongAnswerNotes = response.data; |
|
| 110 |
+ }) |
|
| 111 |
+ .catch((error) => {
|
|
| 112 |
+ console.error('오답노트를 불러오는 중 오류 발생:', error);
|
|
| 113 |
+ }); |
|
| 108 | 114 |
}, |
| 109 | 115 |
|
| 110 | 116 |
// 문제 유형에 따른 라우팅 메서드 |
| 111 | 117 |
handleProblemDetail(item) {
|
| 112 | 118 |
// 세션 저장소에 문제 ID 저장 |
| 113 |
- sessionStorage.setItem("prblmId", JSON.stringify(item.prblmId));
|
|
| 114 |
- if (item.prblmTypeId === "11") {
|
|
| 115 |
- this.problemType = "Chapter3_9"; |
|
| 116 |
- } else if (item.prblmTypeId === "12") {
|
|
| 117 |
- this.problemType = "Chapter3_4"; |
|
| 118 |
- } else if (item.prblmTypeId === "4") {
|
|
| 119 |
- this.problemType = "Chapter3_3"; |
|
| 120 |
- } else if (item.prblmTypeId === "3") {
|
|
| 121 |
- this.problemType = "Chapter3_7"; |
|
| 122 |
- } else if (item.prblmTypeId === "10") {
|
|
| 123 |
- this.problemType = "Chapter3_2"; |
|
| 124 |
- } else if (item.prblmTypeId === "14") {
|
|
| 125 |
- this.problemType = "Chapter3_12"; |
|
| 119 |
+ sessionStorage.setItem('prblmId', JSON.stringify(item.prblmId));
|
|
| 120 |
+ if (item.prblmTypeId === '11') {
|
|
| 121 |
+ this.problemType = 'Chapter3_9'; |
|
| 122 |
+ } else if (item.prblmTypeId === '12') {
|
|
| 123 |
+ this.problemType = 'Chapter3_4'; |
|
| 124 |
+ } else if (item.prblmTypeId === '4') {
|
|
| 125 |
+ this.problemType = 'Chapter3_3'; |
|
| 126 |
+ } else if (item.prblmTypeId === '3') {
|
|
| 127 |
+ this.problemType = 'Chapter3_7'; |
|
| 128 |
+ } else if (item.prblmTypeId === '10') {
|
|
| 129 |
+ this.problemType = 'Chapter3_2'; |
|
| 130 |
+ } else if (item.prblmTypeId === '14') {
|
|
| 131 |
+ this.problemType = 'Chapter3_12'; |
|
| 126 | 132 |
} else {
|
| 127 |
- this.problemType = "Chapter3"; |
|
| 133 |
+ this.problemType = 'Chapter3'; |
|
| 128 | 134 |
} |
| 129 | 135 |
}, |
| 130 | 136 |
|
| 131 | 137 |
goToPage(page) {
|
| 132 | 138 |
this.$router.push({ name: page });
|
| 133 |
- } |
|
| 134 |
- |
|
| 139 |
+ }, |
|
| 135 | 140 |
}, |
| 136 |
- watch: {
|
|
| 137 |
- |
|
| 138 |
- }, |
|
| 139 |
- computed: {
|
|
| 140 |
- |
|
| 141 |
- }, |
|
| 142 |
- components: {
|
|
| 143 |
- }, |
|
| 141 |
+ watch: {},
|
|
| 142 |
+ computed: {},
|
|
| 143 |
+ components: {},
|
|
| 144 | 144 |
mounted() {
|
| 145 | 145 |
console.log('PreviewNote mounted');
|
| 146 | 146 |
this.pageSetting(); |
| 147 | 147 |
this.fetchUnitDetail(); |
| 148 |
- } |
|
| 149 |
-} |
|
| 148 |
+ }, |
|
| 149 |
+}; |
|
| 150 | 150 |
</script> |
| 151 | 151 |
<style scoped> |
| 152 | 152 |
.textbox {
|
... | ... | @@ -170,4 +170,4 @@ |
| 170 | 170 |
.dragGroup button p {
|
| 171 | 171 |
font-size: 48px; |
| 172 | 172 |
} |
| 173 |
-</style>(파일 끝에 줄바꿈 문자 없음) |
|
| 173 |
+</style> |
--- client/views/pages/parents/CategoryBarChart.vue
+++ client/views/pages/parents/CategoryBarChart.vue
... | ... | @@ -1,124 +1,143 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div ref="CategoryBarChart" style="width: 500px; height: 500px;"></div> |
|
| 3 |
- </template> |
|
| 4 |
- |
|
| 5 |
- <script> |
|
| 6 |
- import * as am5 from "@amcharts/amcharts5"; |
|
| 7 |
- import * as am5xy from "@amcharts/amcharts5/xy"; |
|
| 8 |
- import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; |
|
| 9 |
- import axios from "axios"; |
|
| 10 |
- |
|
| 11 |
- export default {
|
|
| 12 |
- name: "CategoryBarChart", |
|
| 13 |
- |
|
| 14 |
- data() {
|
|
| 15 |
- return {
|
|
| 16 |
- chartData: [], |
|
| 17 |
- currentStdId: "1" |
|
| 18 |
- }; |
|
| 19 |
- }, |
|
| 20 |
- |
|
| 21 |
- mounted() {
|
|
| 22 |
- this.getCategoryScoreData(); |
|
| 23 |
- }, |
|
| 24 |
- |
|
| 25 |
- methods: {
|
|
| 26 |
- // 카테고리별 점수 데이터 가져오기 |
|
| 27 |
- getCategoryScoreData() {
|
|
| 28 |
- const vm = this; |
|
| 29 |
- axios.post('/dashboard/categoryScoreData.json', {
|
|
| 30 |
- std_id: vm.currentStdId |
|
| 31 |
- }) |
|
| 32 |
- .then(response => {
|
|
| 33 |
- vm.chartData = response.data.map(item => ({
|
|
| 34 |
- ...item, |
|
| 35 |
- combinedCategory: `${item.categoryNm}\n(${item.categoryCls})`
|
|
| 36 |
- })); |
|
| 37 |
- vm.createChart(); |
|
| 38 |
- }) |
|
| 39 |
- .catch(error => {
|
|
| 40 |
- console.error('카테고리 점수 데이터를 가져오는 중 오류 발생:', error);
|
|
| 41 |
- }) |
|
| 42 |
- }, |
|
| 43 |
- |
|
| 44 |
- createChart() {
|
|
| 45 |
- // Initialize root |
|
| 46 |
- const root = am5.Root.new(this.$refs.CategoryBarChart); |
|
| 47 |
- |
|
| 48 |
- // Apply themes |
|
| 49 |
- root.setThemes([ |
|
| 50 |
- am5themes_Animated.new(root) |
|
| 51 |
- ]); |
|
| 52 |
- |
|
| 53 |
- // Create chart |
|
| 54 |
- const chart = root.container.children.push(am5xy.XYChart.new(root, {
|
|
| 55 |
- panX: false, |
|
| 56 |
- panY: false, |
|
| 57 |
- wheelX: "panX", |
|
| 58 |
- wheelY: "zoomX", |
|
| 59 |
- layout: root.verticalLayout |
|
| 60 |
- })); |
|
| 61 |
- |
|
| 62 |
- // Create axes |
|
| 63 |
- const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
|
|
| 64 |
- renderer: am5xy.AxisRendererY.new(root, {}),
|
|
| 65 |
- min: 0 |
|
| 66 |
- })); |
|
| 67 |
- |
|
| 68 |
- const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
|
|
| 69 |
- categoryField: "combinedCategory", |
|
| 70 |
- renderer: am5xy.AxisRendererX.new(root, {}),
|
|
| 71 |
- tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
|
|
| 72 |
- })); |
|
| 73 |
- |
|
| 74 |
- xAxis.get("renderer").labels.template.setAll({
|
|
| 75 |
- textAlign: "center", |
|
| 76 |
- centerX: am5.p50 |
|
| 77 |
- }); |
|
| 2 |
+ <div ref="CategoryBarChart" class="chart-container"></div> |
|
| 3 |
+</template> |
|
| 78 | 4 |
|
| 79 |
- xAxis.data.setAll(this.chartData); |
|
| 80 |
- |
|
| 81 |
- // Create series |
|
| 82 |
- const series = chart.series.push(am5xy.ColumnSeries.new(root, {
|
|
| 83 |
- name: "Category Scores", |
|
| 84 |
- xAxis: xAxis, |
|
| 85 |
- yAxis: yAxis, |
|
| 86 |
- valueYField: "totalScore", |
|
| 87 |
- categoryXField: "combinedCategory", |
|
| 88 |
- tooltip: am5.Tooltip.new(root, {
|
|
| 89 |
- labelText: "{categoryX}: {valueY}"
|
|
| 90 |
- }) |
|
| 91 |
- })); |
|
| 92 |
- |
|
| 93 |
- // Set color manually for each bar (simplified for clarity) |
|
| 94 |
- series.columns.template.setAll({
|
|
| 95 |
- fill: am5.color("#67b7dc"),
|
|
| 96 |
- stroke: am5.color("#67b7dc"),
|
|
| 97 |
- fillOpacity: 0.8, // Adjust opacity if needed |
|
| 98 |
- strokeWidth: 0, |
|
| 99 |
- cornerRadiusTL: 5, |
|
| 100 |
- cornerRadiusTR: 5 |
|
| 101 |
- }); |
|
| 102 |
- |
|
| 103 |
- // Assign data |
|
| 104 |
- series.data.setAll(this.chartData); |
|
| 105 |
- |
|
| 106 |
- // Add legend |
|
| 107 |
- chart.children.push(am5.Legend.new(root, {
|
|
| 108 |
- centerX: am5.p50, |
|
| 109 |
- x: am5.p50, |
|
| 110 |
- marginTop: 15, |
|
| 111 |
- marginBottom: 15 |
|
| 112 |
- })); |
|
| 113 |
- |
|
| 114 |
- // Play initial series animation |
|
| 115 |
- series.appear(1000, 100); |
|
| 116 |
- } |
|
| 117 |
- } |
|
| 118 |
- }; |
|
| 119 |
- </script> |
|
| 120 |
- |
|
| 121 |
- <style scoped> |
|
| 122 |
- /* 스타일은 필요에 따라 추가 */ |
|
| 123 |
- </style> |
|
| 124 |
-(파일 끝에 줄바꿈 문자 없음) |
|
| 5 |
+<script> |
|
| 6 |
+import * as am5 from '@amcharts/amcharts5'; |
|
| 7 |
+import * as am5xy from '@amcharts/amcharts5/xy'; |
|
| 8 |
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated'; |
|
| 9 |
+import axios from 'axios'; |
|
| 10 |
+ |
|
| 11 |
+export default {
|
|
| 12 |
+ name: 'CategoryBarChart', |
|
| 13 |
+ |
|
| 14 |
+ data() {
|
|
| 15 |
+ return {
|
|
| 16 |
+ chartData: [], |
|
| 17 |
+ currentStdId: '1', |
|
| 18 |
+ }; |
|
| 19 |
+ }, |
|
| 20 |
+ |
|
| 21 |
+ mounted() {
|
|
| 22 |
+ this.getCategoryScoreData(); |
|
| 23 |
+ }, |
|
| 24 |
+ |
|
| 25 |
+ methods: {
|
|
| 26 |
+ // 카테고리별 점수 데이터 가져오기 |
|
| 27 |
+ getCategoryScoreData() {
|
|
| 28 |
+ const vm = this; |
|
| 29 |
+ axios |
|
| 30 |
+ .post('/dashboard/categoryScoreData.json', {
|
|
| 31 |
+ std_id: vm.currentStdId, |
|
| 32 |
+ }) |
|
| 33 |
+ .then((response) => {
|
|
| 34 |
+ vm.chartData = response.data.map((item) => ({
|
|
| 35 |
+ ...item, |
|
| 36 |
+ combinedCategory: `${item.categoryNm}\n(${item.categoryCls})`,
|
|
| 37 |
+ })); |
|
| 38 |
+ vm.createChart(); |
|
| 39 |
+ }) |
|
| 40 |
+ .catch((error) => {
|
|
| 41 |
+ console.error('카테고리 점수 데이터를 가져오는 중 오류 발생:', error);
|
|
| 42 |
+ }); |
|
| 43 |
+ }, |
|
| 44 |
+ |
|
| 45 |
+ createChart() {
|
|
| 46 |
+ // Initialize root |
|
| 47 |
+ const root = am5.Root.new(this.$refs.CategoryBarChart); |
|
| 48 |
+ |
|
| 49 |
+ // Apply themes |
|
| 50 |
+ root.setThemes([am5themes_Animated.new(root)]); |
|
| 51 |
+ |
|
| 52 |
+ // Create chart |
|
| 53 |
+ const chart = root.container.children.push( |
|
| 54 |
+ am5xy.XYChart.new(root, {
|
|
| 55 |
+ panX: false, |
|
| 56 |
+ panY: false, |
|
| 57 |
+ wheelX: 'panX', |
|
| 58 |
+ wheelY: 'zoomX', |
|
| 59 |
+ layout: root.verticalLayout, |
|
| 60 |
+ }) |
|
| 61 |
+ ); |
|
| 62 |
+ |
|
| 63 |
+ // Create axes |
|
| 64 |
+ const yAxis = chart.yAxes.push( |
|
| 65 |
+ am5xy.ValueAxis.new(root, {
|
|
| 66 |
+ renderer: am5xy.AxisRendererY.new(root, {}),
|
|
| 67 |
+ min: 0, |
|
| 68 |
+ }) |
|
| 69 |
+ ); |
|
| 70 |
+ |
|
| 71 |
+ const xAxis = chart.xAxes.push( |
|
| 72 |
+ am5xy.CategoryAxis.new(root, {
|
|
| 73 |
+ categoryField: 'combinedCategory', |
|
| 74 |
+ renderer: am5xy.AxisRendererX.new(root, {}),
|
|
| 75 |
+ tooltip: am5.Tooltip.new(root, { themeTags: ['axis'] }),
|
|
| 76 |
+ }) |
|
| 77 |
+ ); |
|
| 78 |
+ |
|
| 79 |
+ xAxis.get('renderer').labels.template.setAll({
|
|
| 80 |
+ textAlign: 'center', |
|
| 81 |
+ centerX: am5.p50, |
|
| 82 |
+ }); |
|
| 83 |
+ |
|
| 84 |
+ xAxis.data.setAll(this.chartData); |
|
| 85 |
+ |
|
| 86 |
+ // Create series |
|
| 87 |
+ const series = chart.series.push( |
|
| 88 |
+ am5xy.ColumnSeries.new(root, {
|
|
| 89 |
+ name: 'Category Scores', |
|
| 90 |
+ xAxis: xAxis, |
|
| 91 |
+ yAxis: yAxis, |
|
| 92 |
+ valueYField: 'totalScore', |
|
| 93 |
+ categoryXField: 'combinedCategory', |
|
| 94 |
+ tooltip: am5.Tooltip.new(root, {
|
|
| 95 |
+ labelText: '{categoryX}: {valueY}',
|
|
| 96 |
+ }), |
|
| 97 |
+ }) |
|
| 98 |
+ ); |
|
| 99 |
+ |
|
| 100 |
+ // Set color manually for each bar (simplified for clarity) |
|
| 101 |
+ series.columns.template.setAll({
|
|
| 102 |
+ fill: am5.color('#67b7dc'),
|
|
| 103 |
+ stroke: am5.color('#67b7dc'),
|
|
| 104 |
+ fillOpacity: 0.8, // Adjust opacity if needed |
|
| 105 |
+ strokeWidth: 0, |
|
| 106 |
+ cornerRadiusTL: 5, |
|
| 107 |
+ cornerRadiusTR: 5, |
|
| 108 |
+ }); |
|
| 109 |
+ |
|
| 110 |
+ // Assign data |
|
| 111 |
+ series.data.setAll(this.chartData); |
|
| 112 |
+ |
|
| 113 |
+ // Add legend |
|
| 114 |
+ chart.children.push( |
|
| 115 |
+ am5.Legend.new(root, {
|
|
| 116 |
+ centerX: am5.p50, |
|
| 117 |
+ x: am5.p50, |
|
| 118 |
+ marginTop: 15, |
|
| 119 |
+ marginBottom: 15, |
|
| 120 |
+ }) |
|
| 121 |
+ ); |
|
| 122 |
+ |
|
| 123 |
+ // Play initial series animation |
|
| 124 |
+ series.appear(1000, 100); |
|
| 125 |
+ }, |
|
| 126 |
+ }, |
|
| 127 |
+}; |
|
| 128 |
+</script> |
|
| 129 |
+ |
|
| 130 |
+<style scoped> |
|
| 131 |
+/* 스타일은 필요에 따라 추가 */ |
|
| 132 |
+.chart-container {
|
|
| 133 |
+ display: block; |
|
| 134 |
+ position: absolute; |
|
| 135 |
+ bottom: 30px; |
|
| 136 |
+ right: 5px; |
|
| 137 |
+ width: 100%; |
|
| 138 |
+ height: 100%; |
|
| 139 |
+ display: flex; |
|
| 140 |
+ justify-content: center; |
|
| 141 |
+ align-items: center; |
|
| 142 |
+} |
|
| 143 |
+</style> |
--- client/views/pages/parents/ColumnLineChart.vue
+++ client/views/pages/parents/ColumnLineChart.vue
... | ... | @@ -1,237 +1,239 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div ref="ColumnLineChart" style="width: 500px; height: 500px;"></div> |
|
| 2 |
+ <div class="columnChart" ref="ColumnLineChart"></div> |
|
| 3 | 3 |
</template> |
| 4 | 4 |
|
| 5 | 5 |
<script> |
| 6 |
-import * as am5 from "@amcharts/amcharts5"; |
|
| 7 |
-import * as am5xy from "@amcharts/amcharts5/xy"; |
|
| 8 |
-import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; |
|
| 9 |
-import axios from "axios"; |
|
| 6 |
+import * as am5 from '@amcharts/amcharts5'; |
|
| 7 |
+import * as am5xy from '@amcharts/amcharts5/xy'; |
|
| 8 |
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated'; |
|
| 9 |
+import axios from 'axios'; |
|
| 10 | 10 |
|
| 11 | 11 |
export default {
|
| 12 |
- name: "ColumnLineChart", |
|
| 12 |
+ name: 'ColumnLineChart', |
|
| 13 | 13 |
|
| 14 |
- data() {
|
|
| 15 |
- return {
|
|
| 16 |
- chartData: [], |
|
| 17 |
- currentStdId: "1" |
|
| 18 |
- }; |
|
| 19 |
- }, |
|
| 20 |
- |
|
| 21 |
- mounted() {
|
|
| 22 |
- this.getMtrScoreData(); |
|
| 23 |
- }, |
|
| 24 |
- |
|
| 25 |
- methods: {
|
|
| 26 |
- // 학생의 문제 지표 점수 데이터 가져오기 |
|
| 27 |
- getMtrScoreData() {
|
|
| 28 |
- const vm = this; |
|
| 29 |
- axios.post('/dashboard/mtrScoreData.json', {
|
|
| 30 |
- std_id: vm.currentStdId |
|
| 31 |
- }) |
|
| 32 |
- .then(response => {
|
|
| 33 |
- if (response.data) {
|
|
| 34 |
- // 데이터를 날짜순으로 정렬 |
|
| 35 |
- vm.chartData = response.data.sort( |
|
| 36 |
- (a, b) => new Date(a.learnedDate) - new Date(b.learnedDate) |
|
| 37 |
- ); |
|
| 38 |
- vm.createChart(); |
|
| 39 |
- } else {
|
|
| 40 |
- console.error("mtrScoreList가 응답 데이터에 없습니다.");
|
|
| 41 |
- } |
|
| 42 |
- }) |
|
| 43 |
- .catch(error => {
|
|
| 44 |
- console.error('문제 지표 점수 데이터를 가져오는 중 오류 발생:', error);
|
|
| 45 |
- }); |
|
| 14 |
+ data() {
|
|
| 15 |
+ return {
|
|
| 16 |
+ chartData: [], |
|
| 17 |
+ currentStdId: '1', |
|
| 18 |
+ }; |
|
| 46 | 19 |
}, |
| 47 | 20 |
|
| 48 |
- createChart() {
|
|
| 49 |
- // Initialize root |
|
| 50 |
- const root = am5.Root.new(this.$refs.ColumnLineChart); |
|
| 51 |
- |
|
| 52 |
- // Apply themes |
|
| 53 |
- root.setThemes([ |
|
| 54 |
- am5themes_Animated.new(root), |
|
| 55 |
- ]); |
|
| 56 |
- |
|
| 57 |
- // Create chart |
|
| 58 |
- const chart = root.container.children.push( |
|
| 59 |
- am5xy.XYChart.new(root, {
|
|
| 60 |
- panX: false, |
|
| 61 |
- panY: false, |
|
| 62 |
- wheelX: "panX", |
|
| 63 |
- wheelY: "zoomX", |
|
| 64 |
- paddingLeft: 0, |
|
| 65 |
- layout: root.verticalLayout |
|
| 66 |
- }) |
|
| 67 |
- ); |
|
| 68 |
- |
|
| 69 |
- // Create axes |
|
| 70 |
- const xRenderer = am5xy.AxisRendererX.new(root, {
|
|
| 71 |
- minorGridEnabled: true, |
|
| 72 |
- minGridDistance: 60 |
|
| 73 |
- }); |
|
| 74 |
- |
|
| 75 |
- const xAxis = chart.xAxes.push( |
|
| 76 |
- am5xy.CategoryAxis.new(root, {
|
|
| 77 |
- categoryField: "learnedDate", |
|
| 78 |
- renderer: xRenderer, |
|
| 79 |
- tooltip: am5.Tooltip.new(root, {})
|
|
| 80 |
- }) |
|
| 81 |
- ); |
|
| 82 |
- |
|
| 83 |
- xRenderer.grid.template.setAll({
|
|
| 84 |
- location: 1 |
|
| 85 |
- }); |
|
| 86 |
- |
|
| 87 |
- xAxis.data.setAll(this.chartData); |
|
| 88 |
- |
|
| 89 |
- let yAxis = chart.yAxes.push( |
|
| 90 |
- am5xy.ValueAxis.new(root, {
|
|
| 91 |
- min: 0, |
|
| 92 |
- extraMax: 0.1, |
|
| 93 |
- renderer: am5xy.AxisRendererY.new(root, {
|
|
| 94 |
- strokeOpacity: 0.1 |
|
| 95 |
- }) |
|
| 96 |
- }) |
|
| 97 |
- ); |
|
| 98 |
- |
|
| 99 |
- // 이해 점수 막대 그래프 |
|
| 100 |
- let series1 = chart.series.push( |
|
| 101 |
- am5xy.ColumnSeries.new(root, {
|
|
| 102 |
- name: "이해 점수", |
|
| 103 |
- xAxis: xAxis, |
|
| 104 |
- yAxis: yAxis, |
|
| 105 |
- valueYField: "totalMtr01Score", |
|
| 106 |
- categoryXField: "learnedDate", |
|
| 107 |
- tooltip: am5.Tooltip.new(root, {
|
|
| 108 |
- pointerOrientation: "horizontal", |
|
| 109 |
- labelText: "{name} in {categoryX}: {valueY}"
|
|
| 110 |
- }) |
|
| 111 |
- }) |
|
| 112 |
- ); |
|
| 113 |
- |
|
| 114 |
- // 파스텔 블루 |
|
| 115 |
- series1.columns.template.setAll({
|
|
| 116 |
- fill: am5.color(0x87CEEB), |
|
| 117 |
- stroke: am5.color(0x87CEEB), |
|
| 118 |
- tooltipY: am5.percent(10), |
|
| 119 |
- }); |
|
| 120 |
- |
|
| 121 |
- series1.data.setAll(this.chartData); |
|
| 122 |
- |
|
| 123 |
- // 표현 점수 막대 그래프 |
|
| 124 |
- let series2 = chart.series.push( |
|
| 125 |
- am5xy.ColumnSeries.new(root, {
|
|
| 126 |
- name: "표현 점수", |
|
| 127 |
- xAxis: xAxis, |
|
| 128 |
- yAxis: yAxis, |
|
| 129 |
- valueYField: "totalMtr02Score", |
|
| 130 |
- categoryXField: "learnedDate", |
|
| 131 |
- tooltip: am5.Tooltip.new(root, {
|
|
| 132 |
- pointerOrientation: "horizontal", |
|
| 133 |
- labelText: "{name} in {categoryX}: {valueY}"
|
|
| 134 |
- }) |
|
| 135 |
- }) |
|
| 136 |
- ); |
|
| 137 |
- |
|
| 138 |
- // 파스텔 핑크 |
|
| 139 |
- series2.columns.template.setAll({
|
|
| 140 |
- fill: am5.color(0xFFB6C1), |
|
| 141 |
- stroke: am5.color(0xFFB6C1), |
|
| 142 |
- tooltipY: am5.percent(10), |
|
| 143 |
- }); |
|
| 144 |
- |
|
| 145 |
- series2.data.setAll(this.chartData); |
|
| 146 |
- |
|
| 147 |
- // 이해 점수 변화 꺾은선 그래프 |
|
| 148 |
- const lineSeries1 = chart.series.push( |
|
| 149 |
- am5xy.LineSeries.new(root, {
|
|
| 150 |
- name: "이해 점수 변화", |
|
| 151 |
- xAxis: xAxis, |
|
| 152 |
- yAxis: yAxis, |
|
| 153 |
- valueYField: "totalMtr01Score", |
|
| 154 |
- categoryXField: "learnedDate", |
|
| 155 |
- stroke: am5.color(0xADD8E6), // 라이트 블루로 설정 |
|
| 156 |
- tooltip: am5.Tooltip.new(root, {
|
|
| 157 |
- pointerOrientation: "horizontal", |
|
| 158 |
- labelText: "{name} on {categoryX}: {valueY}"
|
|
| 159 |
- }) |
|
| 160 |
- }) |
|
| 161 |
- ); |
|
| 162 |
- |
|
| 163 |
- lineSeries1.strokes.template.setAll({
|
|
| 164 |
- strokeWidth: 3, |
|
| 165 |
- stroke: am5.color(0xADD8E6), // 다시 명시적 설정 |
|
| 166 |
- }); |
|
| 167 |
- |
|
| 168 |
- lineSeries1.bullets.push(function () {
|
|
| 169 |
- return am5.Bullet.new(root, {
|
|
| 170 |
- sprite: am5.Circle.new(root, {
|
|
| 171 |
- radius: 5, |
|
| 172 |
- fill: am5.color(0xADD8E6), // 라이트 블루로 설정 |
|
| 173 |
- strokeWidth: 3, |
|
| 174 |
- stroke: am5.color(0xADD8E6) |
|
| 175 |
- }) |
|
| 176 |
- }); |
|
| 177 |
- }); |
|
| 178 |
- |
|
| 179 |
- lineSeries1.data.setAll(this.chartData); |
|
| 180 |
- |
|
| 181 |
- // 표현 점수 변화 꺾은선 그래프 |
|
| 182 |
- const lineSeries2 = chart.series.push( |
|
| 183 |
- am5xy.LineSeries.new(root, {
|
|
| 184 |
- name: "표현 점수 변화", |
|
| 185 |
- xAxis: xAxis, |
|
| 186 |
- yAxis: yAxis, |
|
| 187 |
- valueYField: "totalMtr02Score", |
|
| 188 |
- categoryXField: "learnedDate", |
|
| 189 |
- stroke: am5.color(0xFF69B4), // 핫 핑크로 설정 |
|
| 190 |
- tooltip: am5.Tooltip.new(root, {
|
|
| 191 |
- pointerOrientation: "horizontal", |
|
| 192 |
- labelText: "{name} on {categoryX}: {valueY}"
|
|
| 193 |
- }) |
|
| 194 |
- }) |
|
| 195 |
- ); |
|
| 196 |
- |
|
| 197 |
- lineSeries2.strokes.template.setAll({
|
|
| 198 |
- strokeWidth: 3, |
|
| 199 |
- stroke: am5.color(0xFF69B4), // 다시 명시적 설정 |
|
| 200 |
- }); |
|
| 201 |
- |
|
| 202 |
- lineSeries2.bullets.push(function () {
|
|
| 203 |
- return am5.Bullet.new(root, {
|
|
| 204 |
- sprite: am5.Circle.new(root, {
|
|
| 205 |
- radius: 5, |
|
| 206 |
- fill: am5.color(0xFF69B4), // 핫 핑크로 설정 |
|
| 207 |
- strokeWidth: 3, |
|
| 208 |
- stroke: am5.color(0xFF69B4) |
|
| 209 |
- }) |
|
| 210 |
- }); |
|
| 211 |
- }); |
|
| 212 |
- |
|
| 213 |
- lineSeries2.data.setAll(this.chartData); |
|
| 214 |
- |
|
| 215 |
- chart.set("cursor", am5xy.XYCursor.new(root, {}));
|
|
| 216 |
- |
|
| 217 |
- let legend = chart.children.push( |
|
| 218 |
- am5.Legend.new(root, {
|
|
| 219 |
- centerX: am5.p50, |
|
| 220 |
- x: am5.p50 |
|
| 221 |
- }) |
|
| 222 |
- ); |
|
| 223 |
- legend.data.setAll(chart.series.values); |
|
| 224 |
- |
|
| 225 |
- chart.appear(1000, 100); |
|
| 226 |
- series1.appear(); |
|
| 227 |
- series2.appear(); |
|
| 228 |
- lineSeries1.appear(); |
|
| 229 |
- lineSeries2.appear(); |
|
| 21 |
+ mounted() {
|
|
| 22 |
+ this.getMtrScoreData(); |
|
| 230 | 23 |
}, |
| 231 |
- }, |
|
| 24 |
+ |
|
| 25 |
+ methods: {
|
|
| 26 |
+ // 학생의 문제 지표 점수 데이터 가져오기 |
|
| 27 |
+ getMtrScoreData() {
|
|
| 28 |
+ const vm = this; |
|
| 29 |
+ axios |
|
| 30 |
+ .post('/dashboard/mtrScoreData.json', {
|
|
| 31 |
+ std_id: vm.currentStdId, |
|
| 32 |
+ }) |
|
| 33 |
+ .then((response) => {
|
|
| 34 |
+ if (response.data) {
|
|
| 35 |
+ // 데이터를 날짜순으로 정렬 |
|
| 36 |
+ vm.chartData = response.data.sort((a, b) => new Date(a.learnedDate) - new Date(b.learnedDate)); |
|
| 37 |
+ vm.createChart(); |
|
| 38 |
+ } else {
|
|
| 39 |
+ console.error('mtrScoreList가 응답 데이터에 없습니다.');
|
|
| 40 |
+ } |
|
| 41 |
+ }) |
|
| 42 |
+ .catch((error) => {
|
|
| 43 |
+ console.error('문제 지표 점수 데이터를 가져오는 중 오류 발생:', error);
|
|
| 44 |
+ }); |
|
| 45 |
+ }, |
|
| 46 |
+ |
|
| 47 |
+ createChart() {
|
|
| 48 |
+ // Initialize root |
|
| 49 |
+ const root = am5.Root.new(this.$refs.ColumnLineChart); |
|
| 50 |
+ |
|
| 51 |
+ // Apply themes |
|
| 52 |
+ root.setThemes([am5themes_Animated.new(root)]); |
|
| 53 |
+ |
|
| 54 |
+ // Create chart |
|
| 55 |
+ const chart = root.container.children.push( |
|
| 56 |
+ am5xy.XYChart.new(root, {
|
|
| 57 |
+ panX: false, |
|
| 58 |
+ panY: false, |
|
| 59 |
+ wheelX: 'panX', |
|
| 60 |
+ wheelY: 'zoomX', |
|
| 61 |
+ paddingLeft: 0, |
|
| 62 |
+ layout: root.verticalLayout, |
|
| 63 |
+ }) |
|
| 64 |
+ ); |
|
| 65 |
+ |
|
| 66 |
+ // Create axes |
|
| 67 |
+ const xRenderer = am5xy.AxisRendererX.new(root, {
|
|
| 68 |
+ minorGridEnabled: true, |
|
| 69 |
+ minGridDistance: 60, |
|
| 70 |
+ }); |
|
| 71 |
+ |
|
| 72 |
+ const xAxis = chart.xAxes.push( |
|
| 73 |
+ am5xy.CategoryAxis.new(root, {
|
|
| 74 |
+ categoryField: 'learnedDate', |
|
| 75 |
+ renderer: xRenderer, |
|
| 76 |
+ tooltip: am5.Tooltip.new(root, {}),
|
|
| 77 |
+ }) |
|
| 78 |
+ ); |
|
| 79 |
+ |
|
| 80 |
+ xRenderer.grid.template.setAll({
|
|
| 81 |
+ location: 1, |
|
| 82 |
+ }); |
|
| 83 |
+ |
|
| 84 |
+ xAxis.data.setAll(this.chartData); |
|
| 85 |
+ |
|
| 86 |
+ let yAxis = chart.yAxes.push( |
|
| 87 |
+ am5xy.ValueAxis.new(root, {
|
|
| 88 |
+ min: 0, |
|
| 89 |
+ extraMax: 0.1, |
|
| 90 |
+ renderer: am5xy.AxisRendererY.new(root, {
|
|
| 91 |
+ strokeOpacity: 0.1, |
|
| 92 |
+ }), |
|
| 93 |
+ }) |
|
| 94 |
+ ); |
|
| 95 |
+ |
|
| 96 |
+ // 이해 점수 막대 그래프 |
|
| 97 |
+ let series1 = chart.series.push( |
|
| 98 |
+ am5xy.ColumnSeries.new(root, {
|
|
| 99 |
+ name: '이해 점수', |
|
| 100 |
+ xAxis: xAxis, |
|
| 101 |
+ yAxis: yAxis, |
|
| 102 |
+ valueYField: 'totalMtr01Score', |
|
| 103 |
+ categoryXField: 'learnedDate', |
|
| 104 |
+ tooltip: am5.Tooltip.new(root, {
|
|
| 105 |
+ pointerOrientation: 'horizontal', |
|
| 106 |
+ labelText: '{name} in {categoryX}: {valueY}',
|
|
| 107 |
+ }), |
|
| 108 |
+ }) |
|
| 109 |
+ ); |
|
| 110 |
+ |
|
| 111 |
+ // 파스텔 블루 |
|
| 112 |
+ series1.columns.template.setAll({
|
|
| 113 |
+ fill: am5.color(0x87ceeb), |
|
| 114 |
+ stroke: am5.color(0x87ceeb), |
|
| 115 |
+ tooltipY: am5.percent(10), |
|
| 116 |
+ }); |
|
| 117 |
+ |
|
| 118 |
+ series1.data.setAll(this.chartData); |
|
| 119 |
+ |
|
| 120 |
+ // 표현 점수 막대 그래프 |
|
| 121 |
+ let series2 = chart.series.push( |
|
| 122 |
+ am5xy.ColumnSeries.new(root, {
|
|
| 123 |
+ name: '표현 점수', |
|
| 124 |
+ xAxis: xAxis, |
|
| 125 |
+ yAxis: yAxis, |
|
| 126 |
+ valueYField: 'totalMtr02Score', |
|
| 127 |
+ categoryXField: 'learnedDate', |
|
| 128 |
+ tooltip: am5.Tooltip.new(root, {
|
|
| 129 |
+ pointerOrientation: 'horizontal', |
|
| 130 |
+ labelText: '{name} in {categoryX}: {valueY}',
|
|
| 131 |
+ }), |
|
| 132 |
+ }) |
|
| 133 |
+ ); |
|
| 134 |
+ |
|
| 135 |
+ // 파스텔 핑크 |
|
| 136 |
+ series2.columns.template.setAll({
|
|
| 137 |
+ fill: am5.color(0xffb6c1), |
|
| 138 |
+ stroke: am5.color(0xffb6c1), |
|
| 139 |
+ tooltipY: am5.percent(10), |
|
| 140 |
+ }); |
|
| 141 |
+ |
|
| 142 |
+ series2.data.setAll(this.chartData); |
|
| 143 |
+ |
|
| 144 |
+ // 이해 점수 변화 꺾은선 그래프 |
|
| 145 |
+ const lineSeries1 = chart.series.push( |
|
| 146 |
+ am5xy.LineSeries.new(root, {
|
|
| 147 |
+ name: '이해 점수 변화', |
|
| 148 |
+ xAxis: xAxis, |
|
| 149 |
+ yAxis: yAxis, |
|
| 150 |
+ valueYField: 'totalMtr01Score', |
|
| 151 |
+ categoryXField: 'learnedDate', |
|
| 152 |
+ stroke: am5.color(0xadd8e6), // 라이트 블루로 설정 |
|
| 153 |
+ tooltip: am5.Tooltip.new(root, {
|
|
| 154 |
+ pointerOrientation: 'horizontal', |
|
| 155 |
+ labelText: '{name} on {categoryX}: {valueY}',
|
|
| 156 |
+ }), |
|
| 157 |
+ }) |
|
| 158 |
+ ); |
|
| 159 |
+ |
|
| 160 |
+ lineSeries1.strokes.template.setAll({
|
|
| 161 |
+ strokeWidth: 3, |
|
| 162 |
+ stroke: am5.color(0xadd8e6), // 다시 명시적 설정 |
|
| 163 |
+ }); |
|
| 164 |
+ |
|
| 165 |
+ lineSeries1.bullets.push(function () {
|
|
| 166 |
+ return am5.Bullet.new(root, {
|
|
| 167 |
+ sprite: am5.Circle.new(root, {
|
|
| 168 |
+ radius: 5, |
|
| 169 |
+ fill: am5.color(0xadd8e6), // 라이트 블루로 설정 |
|
| 170 |
+ strokeWidth: 3, |
|
| 171 |
+ stroke: am5.color(0xadd8e6), |
|
| 172 |
+ }), |
|
| 173 |
+ }); |
|
| 174 |
+ }); |
|
| 175 |
+ |
|
| 176 |
+ lineSeries1.data.setAll(this.chartData); |
|
| 177 |
+ |
|
| 178 |
+ // 표현 점수 변화 꺾은선 그래프 |
|
| 179 |
+ const lineSeries2 = chart.series.push( |
|
| 180 |
+ am5xy.LineSeries.new(root, {
|
|
| 181 |
+ name: '표현 점수 변화', |
|
| 182 |
+ xAxis: xAxis, |
|
| 183 |
+ yAxis: yAxis, |
|
| 184 |
+ valueYField: 'totalMtr02Score', |
|
| 185 |
+ categoryXField: 'learnedDate', |
|
| 186 |
+ stroke: am5.color(0xff69b4), // 핫 핑크로 설정 |
|
| 187 |
+ tooltip: am5.Tooltip.new(root, {
|
|
| 188 |
+ pointerOrientation: 'horizontal', |
|
| 189 |
+ labelText: '{name} on {categoryX}: {valueY}',
|
|
| 190 |
+ }), |
|
| 191 |
+ }) |
|
| 192 |
+ ); |
|
| 193 |
+ |
|
| 194 |
+ lineSeries2.strokes.template.setAll({
|
|
| 195 |
+ strokeWidth: 3, |
|
| 196 |
+ stroke: am5.color(0xff69b4), // 다시 명시적 설정 |
|
| 197 |
+ }); |
|
| 198 |
+ |
|
| 199 |
+ lineSeries2.bullets.push(function () {
|
|
| 200 |
+ return am5.Bullet.new(root, {
|
|
| 201 |
+ sprite: am5.Circle.new(root, {
|
|
| 202 |
+ radius: 5, |
|
| 203 |
+ fill: am5.color(0xff69b4), // 핫 핑크로 설정 |
|
| 204 |
+ strokeWidth: 3, |
|
| 205 |
+ stroke: am5.color(0xff69b4), |
|
| 206 |
+ }), |
|
| 207 |
+ }); |
|
| 208 |
+ }); |
|
| 209 |
+ |
|
| 210 |
+ lineSeries2.data.setAll(this.chartData); |
|
| 211 |
+ |
|
| 212 |
+ chart.set('cursor', am5xy.XYCursor.new(root, {}));
|
|
| 213 |
+ |
|
| 214 |
+ let legend = chart.children.push( |
|
| 215 |
+ am5.Legend.new(root, {
|
|
| 216 |
+ centerX: am5.p50, |
|
| 217 |
+ x: am5.p50, |
|
| 218 |
+ }) |
|
| 219 |
+ ); |
|
| 220 |
+ legend.data.setAll(chart.series.values); |
|
| 221 |
+ |
|
| 222 |
+ chart.appear(1000, 100); |
|
| 223 |
+ series1.appear(); |
|
| 224 |
+ series2.appear(); |
|
| 225 |
+ lineSeries1.appear(); |
|
| 226 |
+ lineSeries2.appear(); |
|
| 227 |
+ }, |
|
| 228 |
+ }, |
|
| 232 | 229 |
}; |
| 233 | 230 |
</script> |
| 234 | 231 |
|
| 235 | 232 |
<style scoped> |
| 236 | 233 |
/* Add necessary styles here */ |
| 234 |
+.columnChart {
|
|
| 235 |
+ width: 40rem; |
|
| 236 |
+ height: 40rem; |
|
| 237 |
+ /* margin-left: -10rem;*/ |
|
| 238 |
+} |
|
| 237 | 239 |
</style> |
--- client/views/pages/parents/Main_p.vue
+++ client/views/pages/parents/Main_p.vue
... | ... | @@ -142,7 +142,7 @@ |
| 142 | 142 |
</div> |
| 143 | 143 |
<div class="wrap" style="flex: 1"> |
| 144 | 144 |
<p class="name">이해/표현 점수</p> |
| 145 |
- <div class="flex justify-center mt50"> |
|
| 145 |
+ <div class="flex justify-center mt50" style="position: absolute"> |
|
| 146 | 146 |
<ColumnLineChart /> |
| 147 | 147 |
</div> |
| 148 | 148 |
</div> |
... | ... | @@ -199,9 +199,12 @@ |
| 199 | 199 |
</div> |
| 200 | 200 |
</div> |
| 201 | 201 |
|
| 202 |
- <div class="wrap"> |
|
| 202 |
+ <div class="wrap" style="height: 65rem"> |
|
| 203 | 203 |
<p class="name">문제 카테고리별 세부 점수</p> |
| 204 |
- <div class="flex justify-center"> |
|
| 204 |
+ <div |
|
| 205 |
+ class="flex justify-center mt50" |
|
| 206 |
+ style="position: relative; width: 45rem; height: 40rem" |
|
| 207 |
+ > |
|
| 205 | 208 |
<CategoryBarChart /> |
| 206 | 209 |
</div> |
| 207 | 210 |
</div> |
--- client/views/pages/teacher/Main_t.vue
+++ client/views/pages/teacher/Main_t.vue
... | ... | @@ -1,14 +1,18 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div class="flex justify-between" style="height: 100%;"> |
|
| 3 |
- <Side_t></Side_t> |
|
| 4 |
- <div style="padding: 15px 60px 120px 0px "> |
|
| 2 |
+ <div> |
|
| 5 | 3 |
<Header_t></Header_t> |
| 6 |
- <div class="main-wrap"> |
|
| 7 |
- <router-view /> |
|
| 8 |
- </div> |
|
| 9 |
- </div> |
|
| 10 |
- </div> |
|
| 4 |
+ <div class="flex justify-between" style="height: 100%"> |
|
| 5 |
+ <div> |
|
| 6 |
+ <Side_t></Side_t> |
|
| 7 |
+ </div> |
|
| 11 | 8 |
|
| 9 |
+ <div style="padding: 15px 60px 120px 0px"> |
|
| 10 |
+ <div class="main-wrap"> |
|
| 11 |
+ <router-view /> |
|
| 12 |
+ </div> |
|
| 13 |
+ </div> |
|
| 14 |
+ </div> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
</template> |
| 13 | 17 |
|
| 14 | 18 |
<script> |
... | ... | @@ -17,35 +21,28 @@ |
| 17 | 21 |
import Side_t from '../../layout/Side_t.vue'; |
| 18 | 22 |
|
| 19 | 23 |
export default {
|
| 20 |
- data() {
|
|
| 21 |
- return {
|
|
| 22 |
- } |
|
| 23 |
- }, |
|
| 24 |
- methods: {
|
|
| 25 |
- |
|
| 26 |
- }, |
|
| 27 |
- watch: {
|
|
| 28 |
- |
|
| 29 |
- }, |
|
| 30 |
- computed: {
|
|
| 31 |
- |
|
| 32 |
- }, |
|
| 33 |
- components: {
|
|
| 34 |
- Header_t: Header_t, |
|
| 35 |
- Menu: Menu, |
|
| 36 |
- // Footer:Footer, |
|
| 37 |
- Side_t:Side_t, |
|
| 38 |
- }, |
|
| 39 |
- mounted() {
|
|
| 40 |
- console.log('main mounted');
|
|
| 41 |
- } |
|
| 42 |
-} |
|
| 24 |
+ data() {
|
|
| 25 |
+ return {};
|
|
| 26 |
+ }, |
|
| 27 |
+ methods: {},
|
|
| 28 |
+ watch: {},
|
|
| 29 |
+ computed: {},
|
|
| 30 |
+ components: {
|
|
| 31 |
+ Header_t: Header_t, |
|
| 32 |
+ Menu: Menu, |
|
| 33 |
+ // Footer:Footer, |
|
| 34 |
+ Side_t: Side_t, |
|
| 35 |
+ }, |
|
| 36 |
+ mounted() {
|
|
| 37 |
+ console.log('main mounted');
|
|
| 38 |
+ }, |
|
| 39 |
+}; |
|
| 43 | 40 |
</script> |
| 44 | 41 |
<style scoped> |
| 45 |
-.main-wrap{
|
|
| 46 |
- margin-top: 20px; |
|
| 47 |
- position: static; |
|
| 48 |
- width: 144rem; |
|
| 49 |
- height: 100%; |
|
| 42 |
+.main-wrap {
|
|
| 43 |
+ margin-top: 20px; |
|
| 44 |
+ position: static; |
|
| 45 |
+ width: 144rem; |
|
| 46 |
+ height: 100%; |
|
| 50 | 47 |
} |
| 51 |
-</style>(파일 끝에 줄바꿈 문자 없음) |
|
| 48 |
+</style> |
--- client/views/pages/teacher/QuestionInsert.vue
+++ client/views/pages/teacher/QuestionInsert.vue
... | ... | @@ -26,7 +26,7 @@ |
| 26 | 26 |
</div> |
| 27 | 27 |
<hr> |
| 28 | 28 |
--> |
| 29 |
- <div class="gd-col2 "> |
|
| 29 |
+ <div class="gd-col2"> |
|
| 30 | 30 |
<div class="flex align-center mb20"> |
| 31 | 31 |
<label for="" class="title2">카테고리</label> |
| 32 | 32 |
<select v-model="selectedSearchOption" class="mr10 data-wrap"> |
... | ... | @@ -44,7 +44,6 @@ |
| 44 | 44 |
{{ prblmT.prblm_type_nm }}
|
| 45 | 45 |
</option> |
| 46 | 46 |
</select> |
| 47 |
- |
|
| 48 | 47 |
</div> |
| 49 | 48 |
|
| 50 | 49 |
<div class="flex align-center"> |
... | ... | @@ -72,7 +71,7 @@ |
| 72 | 71 |
</div> |
| 73 | 72 |
<div class="flex align-center mb20 mt40"> |
| 74 | 73 |
<label for="" class="title2">문제 배점</label> |
| 75 |
- <input type="text" class="data-wrap" v-model="prblm_scr"> |
|
| 74 |
+ <input type="text" class="data-wrap" v-model="prblm_scr" /> |
|
| 76 | 75 |
</div> |
| 77 | 76 |
|
| 78 | 77 |
<div class="flex align-center mb20"> |
... | ... | @@ -81,26 +80,35 @@ |
| 81 | 80 |
</div> |
| 82 | 81 |
<div class="flex align-center mb20"> |
| 83 | 82 |
<label for="" class="title2">힌트</label> |
| 84 |
- <input type="text" class="data-wrap" v-model="prblm_hint"> |
|
| 83 |
+ <input type="text" class="data-wrap" v-model="prblm_hint" /> |
|
| 85 | 84 |
</div> |
| 86 |
- <div class="flex align-center "> |
|
| 85 |
+ <div class="flex align-center"> |
|
| 87 | 86 |
<label for="file" class="title2">첨부파일</label> |
| 88 | 87 |
<input type="file" ref="fileInput" @change="handleFileUpload" multiple /> |
| 89 | 88 |
</div> |
| 90 |
- <hr> |
|
| 89 |
+ <hr /> |
|
| 91 | 90 |
<div v-if="selectedSearchOption2.prblm_type_cls === '5지선다'"> |
| 92 | 91 |
<!--5지선다--> |
| 93 |
- <div class="gd-col2 " v-for="i in 5" :key="i"> |
|
| 92 |
+ <div class="gd-col2" v-for="i in 5" :key="i"> |
|
| 94 | 93 |
<div> |
| 95 | 94 |
<div class="flex align-center mb20 mr40"> |
| 96 | 95 |
<label :for="'answer' + i" class="title2">답{{ i }}</label>
|
| 97 |
- <input :id="'answer' + i" type="text" class="data-wrap" |
|
| 98 |
- v-model="prblmDetail.answers[i].text" /> |
|
| 96 |
+ <input |
|
| 97 |
+ :id="'answer' + i" |
|
| 98 |
+ type="text" |
|
| 99 |
+ class="data-wrap" |
|
| 100 |
+ v-model="prblmDetail.answers[i].text" |
|
| 101 |
+ /> |
|
| 99 | 102 |
</div> |
| 100 | 103 |
<div class="flex align-center mb20"> |
| 101 | 104 |
<label :for="'correct' + i" class="title2">정답여부</label> |
| 102 |
- <input :id="'correct' + i" type="checkbox" class="ui-checkbox" |
|
| 103 |
- :checked="prblmDetail.correctIndex === i" @change="setCorrectAnswer(i)" /> |
|
| 105 |
+ <input |
|
| 106 |
+ :id="'correct' + i" |
|
| 107 |
+ type="checkbox" |
|
| 108 |
+ class="ui-checkbox" |
|
| 109 |
+ :checked="prblmDetail.correctIndex === i" |
|
| 110 |
+ @change="setCorrectAnswer(i)" |
|
| 111 |
+ /> |
|
| 104 | 112 |
</div> |
| 105 | 113 |
</div> |
| 106 | 114 |
<div class="flex align-center mb20"> |
... | ... | @@ -108,74 +116,95 @@ |
| 108 | 116 |
<input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple /> |
| 109 | 117 |
</div> |
| 110 | 118 |
</div> |
| 111 |
- |
|
| 112 | 119 |
</div> |
| 113 | 120 |
<div v-else-if="selectedSearchOption2.prblm_type_cls === '4지선다'"> |
| 114 | 121 |
<!--4지선다--> |
| 115 |
- <div class="gd-col2 " v-for="i in 4" :key="i"> |
|
| 122 |
+ <div class="gd-col2" v-for="i in 4" :key="i"> |
|
| 116 | 123 |
<div> |
| 117 | 124 |
<div class="flex align-center mb20 mr40"> |
| 118 | 125 |
<label :for="'answer' + i" class="title2">답{{ i }}</label>
|
| 119 |
- <input :id="'answer' + i" type="text" class="data-wrap" |
|
| 120 |
- v-model="prblmDetail.answers[i].text" /> |
|
| 126 |
+ <input |
|
| 127 |
+ :id="'answer' + i" |
|
| 128 |
+ type="text" |
|
| 129 |
+ class="data-wrap" |
|
| 130 |
+ v-model="prblmDetail.answers[i].text" |
|
| 131 |
+ /> |
|
| 121 | 132 |
</div> |
| 122 | 133 |
<div class="flex align-center mb20"> |
| 123 | 134 |
<label :for="'correct' + i" class="title2">정답여부</label> |
| 124 |
- <input :id="'correct' + i" type="checkbox" class="ui-checkbox" |
|
| 125 |
- :checked="prblmDetail.correctIndex === i" @change="setCorrectAnswer(i)" /> |
|
| 135 |
+ <input |
|
| 136 |
+ :id="'correct' + i" |
|
| 137 |
+ type="checkbox" |
|
| 138 |
+ class="ui-checkbox" |
|
| 139 |
+ :checked="prblmDetail.correctIndex === i" |
|
| 140 |
+ @change="setCorrectAnswer(i)" |
|
| 141 |
+ /> |
|
| 126 | 142 |
</div> |
| 127 | 143 |
</div> |
| 128 | 144 |
<div class="flex align-center mb20"> |
| 129 | 145 |
<label :for="'file' + i" class="title2">첨부파일</label> |
| 130 | 146 |
<input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple /> |
| 131 | 147 |
</div> |
| 132 |
- |
|
| 133 | 148 |
</div> |
| 134 | 149 |
</div> |
| 135 |
- <div |
|
| 136 |
- v-else-if="selectedSearchOption2.prblm_type_cls === '3지선다'"> |
|
| 150 |
+ <div v-else-if="selectedSearchOption2.prblm_type_cls === '3지선다'"> |
|
| 137 | 151 |
<!--3지선다--> |
| 138 |
- <div class="gd-col2 " v-for="i in 3" :key="i"> |
|
| 152 |
+ <div class="gd-col2" v-for="i in 3" :key="i"> |
|
| 139 | 153 |
<div> |
| 140 | 154 |
<div class="flex align-center mb20 mr40"> |
| 141 | 155 |
<label :for="'answer' + i" class="title2">답{{ i }}</label>
|
| 142 |
- <input :id="'answer' + i" type="text" class="data-wrap" |
|
| 143 |
- v-model="prblmDetail.answers[i].text" /> |
|
| 156 |
+ <input |
|
| 157 |
+ :id="'answer' + i" |
|
| 158 |
+ type="text" |
|
| 159 |
+ class="data-wrap" |
|
| 160 |
+ v-model="prblmDetail.answers[i].text" |
|
| 161 |
+ /> |
|
| 144 | 162 |
</div> |
| 145 | 163 |
<div class="flex align-center mb20"> |
| 146 | 164 |
<label :for="'correct' + i" class="title2">정답여부</label> |
| 147 |
- <input :id="'correct' + i" type="checkbox" class="ui-checkbox" |
|
| 148 |
- :checked="prblmDetail.correctIndex === i" @change="setCorrectAnswer(i)" /> |
|
| 165 |
+ <input |
|
| 166 |
+ :id="'correct' + i" |
|
| 167 |
+ type="checkbox" |
|
| 168 |
+ class="ui-checkbox" |
|
| 169 |
+ :checked="prblmDetail.correctIndex === i" |
|
| 170 |
+ @change="setCorrectAnswer(i)" |
|
| 171 |
+ /> |
|
| 149 | 172 |
</div> |
| 150 | 173 |
</div> |
| 151 | 174 |
<div class="flex align-center mb20"> |
| 152 | 175 |
<label :for="'file' + i" class="title2">첨부파일</label> |
| 153 | 176 |
<input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple /> |
| 154 | 177 |
</div> |
| 155 |
- |
|
| 156 | 178 |
</div> |
| 157 | 179 |
</div> |
| 158 |
- <div |
|
| 159 |
- v-else-if="selectedSearchOption2.prblm_type_cls === '2지선다'"> |
|
| 180 |
+ <div v-else-if="selectedSearchOption2.prblm_type_cls === '2지선다'"> |
|
| 160 | 181 |
<!--2지선다--> |
| 161 |
- <div class="gd-col2 " v-for="i in 2" :key="i"> |
|
| 182 |
+ <div class="gd-col2" v-for="i in 2" :key="i"> |
|
| 162 | 183 |
<div> |
| 163 | 184 |
<div class="flex align-center mb20 mr40"> |
| 164 | 185 |
<label :for="'answer' + i" class="title2">답{{ i }}</label>
|
| 165 |
- <input :id="'answer' + i" type="text" class="data-wrap" |
|
| 166 |
- v-model="prblmDetail.answers[i].text" /> |
|
| 186 |
+ <input |
|
| 187 |
+ :id="'answer' + i" |
|
| 188 |
+ type="text" |
|
| 189 |
+ class="data-wrap" |
|
| 190 |
+ v-model="prblmDetail.answers[i].text" |
|
| 191 |
+ /> |
|
| 167 | 192 |
</div> |
| 168 | 193 |
<div class="flex align-center mb20"> |
| 169 | 194 |
<label :for="'correct' + i" class="title2">정답여부</label> |
| 170 |
- <input :id="'correct' + i" type="checkbox" class="ui-checkbox" |
|
| 171 |
- :checked="prblmDetail.correctIndex === i" @change="setCorrectAnswer(i)" /> |
|
| 195 |
+ <input |
|
| 196 |
+ :id="'correct' + i" |
|
| 197 |
+ type="checkbox" |
|
| 198 |
+ class="ui-checkbox" |
|
| 199 |
+ :checked="prblmDetail.correctIndex === i" |
|
| 200 |
+ @change="setCorrectAnswer(i)" |
|
| 201 |
+ /> |
|
| 172 | 202 |
</div> |
| 173 | 203 |
</div> |
| 174 | 204 |
<div class="flex align-center mb20"> |
| 175 | 205 |
<label :for="'file' + i" class="title2">첨부파일</label> |
| 176 | 206 |
<input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple /> |
| 177 | 207 |
</div> |
| 178 |
- |
|
| 179 | 208 |
</div> |
| 180 | 209 |
</div> |
| 181 | 210 |
<div v-else-if="selectedSearchOption2.prblm_type_cls === 'OX 문제'"> |
... | ... | @@ -188,11 +217,12 @@ |
| 188 | 217 |
</select> |
| 189 | 218 |
</div> |
| 190 | 219 |
<div class="flex align-center mb20"> |
| 191 |
- <label class="title2">첨부파일</label> |
|
| 192 |
- <div v-if="prblmDetail.answers[1] && prblmDetail.answers[1].fileInfo" |
|
| 193 |
- v-for="(data, index) in prblmDetail.answers[1].fileInfo" :key="index"> |
|
| 194 |
- <label>{{ data.fileNm }}</label>
|
|
| 220 |
+ <div v-if="prblmDetail.answers[1]?.fileInfo"> |
|
| 221 |
+ <div v-for="(data, index) in prblmDetail.answers[1].fileInfo" :key="index"> |
|
| 222 |
+ <label>{{ data.fileNm }}</label>
|
|
| 223 |
+ </div> |
|
| 195 | 224 |
</div> |
| 225 |
+ |
|
| 196 | 226 |
<input type="file" ref="fileInput1" @change="handleDetailFileUpload(1)" multiple /> |
| 197 | 227 |
</div> |
| 198 | 228 |
</div> |
... | ... | @@ -202,13 +232,12 @@ |
| 202 | 232 |
<div class="gd-col2"> |
| 203 | 233 |
<div class="flex align-center mb20"> |
| 204 | 234 |
<label for="" class="title2">답</label> |
| 205 |
- <input type="text" class="data-wrap" v-model="prblmDetail.answers[1].text"> |
|
| 235 |
+ <input type="text" class="data-wrap" v-model="prblmDetail.answers[1].text" /> |
|
| 206 | 236 |
</div> |
| 207 | 237 |
<div class="flex align-center mb20"> |
| 208 | 238 |
<label class="title2">첨부파일</label> |
| 209 |
- <div v-if="prblmDetail.answers[1] && prblmDetail.answers[1].fileInfo" |
|
| 210 |
- v-for="(data, index) in prblmDetail.answers[1].fileInfo" :key="index"> |
|
| 211 |
- <label>{{ data.fileNm }}</label>
|
|
| 239 |
+ <div v-for="(data, index) in prblmDetail.answers[1]?.fileInfo" :key="index"> |
|
| 240 |
+ <label v-if="prblmDetail.answers[1]?.fileInfo">{{ data.fileNm }}</label>
|
|
| 212 | 241 |
</div> |
| 213 | 242 |
<input type="file" ref="fileInput1" @change="handleDetailFileUpload(1)" multiple /> |
| 214 | 243 |
</div> |
... | ... | @@ -257,44 +286,40 @@ |
| 257 | 286 |
<label for="" class="title2">해설</label> |
| 258 | 287 |
<textarea name="" id="" class="data-wrap" v-model="prblm_cmmt"></textarea> |
| 259 | 288 |
</div> |
| 260 |
- <hr> |
|
| 289 |
+ <hr /> |
|
| 261 | 290 |
<div class="flex align-center mb20 mt40"> |
| 262 | 291 |
<label for="" class="title2">문제 지표 1</label> |
| 263 |
- <input type="text" class="data-wrap" v-model="prblm_mtr1"> |
|
| 292 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr1" /> |
|
| 264 | 293 |
</div> |
| 265 | 294 |
<div class="flex align-center mb20 mt40"> |
| 266 | 295 |
<label for="" class="title2">문제 지표 2</label> |
| 267 |
- <input type="text" class="data-wrap" v-model="prblm_mtr2"> |
|
| 296 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr2" /> |
|
| 268 | 297 |
</div> |
| 269 | 298 |
<div class="flex align-center mb20 mt40"> |
| 270 | 299 |
<label for="" class="title2">문제 지표 3</label> |
| 271 |
- <input type="text" class="data-wrap" v-model="prblm_mtr3"> |
|
| 300 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr3" /> |
|
| 272 | 301 |
</div> |
| 273 | 302 |
<div class="flex align-center mb20 mt40"> |
| 274 | 303 |
<label for="" class="title2">문제 지표 4</label> |
| 275 |
- <input type="text" class="data-wrap" v-model="prblm_mtr4"> |
|
| 304 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr4" /> |
|
| 276 | 305 |
</div> |
| 277 | 306 |
<div class="flex align-center mb20 mt40"> |
| 278 | 307 |
<label for="" class="title2">문제 지표 5</label> |
| 279 |
- <input type="text" class="data-wrap" v-model="prblm_mtr5"> |
|
| 308 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr5" /> |
|
| 280 | 309 |
</div> |
| 281 | 310 |
<div class="flex align-center mb20 mt40"> |
| 282 | 311 |
<label for="" class="title2">문제 지표 6</label> |
| 283 |
- <input type="text" class="data-wrap" v-model="prblm_mtr6"> |
|
| 312 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr6" /> |
|
| 284 | 313 |
</div> |
| 285 |
- |
|
| 286 | 314 |
</div> |
| 287 | 315 |
<div class="flex justify-between mt50"> |
| 288 |
- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">
|
|
| 289 |
- 목록 |
|
| 290 |
- </button> |
|
| 291 |
- <div class="flex"><!-- |
|
| 316 |
+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">목록</button>
|
|
| 317 |
+ <div class="flex"> |
|
| 318 |
+ <!-- |
|
| 292 | 319 |
<button type="button" title="글쓰기" class="new-btn mr10"> |
| 293 | 320 |
취소 |
| 294 | 321 |
</button>--> |
| 295 |
- <button type="button" title="글쓰기" class="new-btn" @click="submitForm"> |
|
| 296 |
- 등록 |
|
| 297 |
- </button> |
|
| 322 |
+ <button type="button" title="글쓰기" class="new-btn" @click="submitForm">등록</button> |
|
| 298 | 323 |
</div> |
| 299 | 324 |
</div> |
| 300 | 325 |
</div> |
... | ... | @@ -304,8 +329,7 @@ |
| 304 | 329 |
import SvgIcon from '@jamescoyle/vue-icon'; |
| 305 | 330 |
import { mdiMagnify } from '@mdi/js';
|
| 306 | 331 |
import store from '../AppStore'; |
| 307 |
-import axios from "axios"; |
|
| 308 |
- |
|
| 332 |
+import axios from 'axios'; |
|
| 309 | 333 |
|
| 310 | 334 |
export default {
|
| 311 | 335 |
data() {
|
... | ... | @@ -370,20 +394,20 @@ |
| 370 | 394 |
|
| 371 | 395 |
const formData = new FormData(); |
| 372 | 396 |
for (let i = 0; i < files.length; i++) {
|
| 373 |
- formData.append("files", files[i]);
|
|
| 397 |
+ formData.append('files', files[i]);
|
|
| 374 | 398 |
} |
| 375 | 399 |
|
| 376 | 400 |
try {
|
| 377 |
- const response = await axios.post("http://165.229.169.113:9080/file/upload.json", formData, {
|
|
| 401 |
+ const response = await axios.post('http://165.229.169.113:9080/file/upload.json', formData, {
|
|
| 378 | 402 |
headers: {
|
| 379 |
- "Content-Type": "multipart/form-data", |
|
| 403 |
+ 'Content-Type': 'multipart/form-data', |
|
| 380 | 404 |
}, |
| 381 | 405 |
}); |
| 382 | 406 |
|
| 383 | 407 |
return response.data.fileMngId; // 파일 매니지 ID 반환 |
| 384 | 408 |
} catch (error) {
|
| 385 |
- console.error("파일 업로드 오류:", error);
|
|
| 386 |
- throw new Error("파일 업로드에 실패했습니다.");
|
|
| 409 |
+ console.error('파일 업로드 오류:', error);
|
|
| 410 |
+ throw new Error('파일 업로드에 실패했습니다.');
|
|
| 387 | 411 |
} |
| 388 | 412 |
}, |
| 389 | 413 |
|
... | ... | @@ -391,22 +415,22 @@ |
| 391 | 415 |
async submitForm() {
|
| 392 | 416 |
// 필요한 모든 필드를 검사합니다. |
| 393 | 417 |
if (!this.selectedSearchOption) {
|
| 394 |
- alert("카테고리를 지정해 주세요.");
|
|
| 418 |
+ alert('카테고리를 지정해 주세요.');
|
|
| 395 | 419 |
return; |
| 396 | 420 |
} |
| 397 | 421 |
|
| 398 | 422 |
if (!this.selectedSearchOption2.prblm_type_id) {
|
| 399 |
- alert("문제 유형을 지정해 주세요.");
|
|
| 423 |
+ alert('문제 유형을 지정해 주세요.');
|
|
| 400 | 424 |
return; |
| 401 | 425 |
} |
| 402 | 426 |
|
| 403 | 427 |
if (!this.prblm_scr) {
|
| 404 |
- alert("문제 배점을 입력해 주세요.");
|
|
| 428 |
+ alert('문제 배점을 입력해 주세요.');
|
|
| 405 | 429 |
return; |
| 406 | 430 |
} |
| 407 | 431 |
|
| 408 | 432 |
if (!this.prblm_expln) {
|
| 409 |
- alert("문제 내용을 입력해 주세요.");
|
|
| 433 |
+ alert('문제 내용을 입력해 주세요.');
|
|
| 410 | 434 |
return; |
| 411 | 435 |
} |
| 412 | 436 |
|
... | ... | @@ -428,7 +452,7 @@ |
| 428 | 452 |
prblmMtr4: this.prblm_mtr4, |
| 429 | 453 |
prblmMtr5: this.prblm_mtr5, |
| 430 | 454 |
prblmMtr6: this.prblm_mtr6, |
| 431 |
- fileMngId: this.file_mng_id // 첨부파일 ID |
|
| 455 |
+ fileMngId: this.file_mng_id, // 첨부파일 ID |
|
| 432 | 456 |
}; |
| 433 | 457 |
|
| 434 | 458 |
if (this.file && this.file.length > 0) {
|
... | ... | @@ -440,12 +464,11 @@ |
| 440 | 464 |
try {
|
| 441 | 465 |
const response = await axios.post('/problem/insertProblem.json', payload);
|
| 442 | 466 |
console.log('성공:', response.data);
|
| 443 |
- const prblmId = response.data.prblmId; // 상세 문제 정보를 위한 문제 ID |
|
| 467 |
+ const prblmId = response.data.prblmId; // 상세 문제 정보를 위한 문제 ID |
|
| 444 | 468 |
const problemDetails = await this.prepareProblemDetails(prblmId); |
| 445 | 469 |
await this.submitDetailForm(problemDetails); |
| 446 | 470 |
|
| 447 | 471 |
this.goToPage('QuestionList');
|
| 448 |
- |
|
| 449 | 472 |
} catch (error) {
|
| 450 | 473 |
console.error('오류:', error);
|
| 451 | 474 |
// 오류 처리 로직 추가 |
... | ... | @@ -454,7 +477,6 @@ |
| 454 | 477 |
|
| 455 | 478 |
// 문제 상세 업로드 |
| 456 | 479 |
async submitDetailForm(problemDetails) {
|
| 457 |
- |
|
| 458 | 480 |
try {
|
| 459 | 481 |
const response = await axios.post('/problem/insertProblemDetail.json', problemDetails);
|
| 460 | 482 |
console.log('성공:', response.data);
|
... | ... | @@ -492,8 +514,11 @@ |
| 492 | 514 |
details.push({
|
| 493 | 515 |
prblmId, |
| 494 | 516 |
prblmDtlExpln: answers[i].text || '', |
| 495 |
- prblmYn: this.selectedSearchOption2.prblm_type_cls === '서술형' || |
|
| 496 |
- this.selectedSearchOption2.prblm_type_cls === 'OX 문제' ? 'Y' : answers[i].isCorrect, // 서술형 및 OX 문제의 경우 항상 'Y' |
|
| 517 |
+ prblmYn: |
|
| 518 |
+ this.selectedSearchOption2.prblm_type_cls === '서술형' || |
|
| 519 |
+ this.selectedSearchOption2.prblm_type_cls === 'OX 문제' |
|
| 520 |
+ ? 'Y' |
|
| 521 |
+ : answers[i].isCorrect, // 서술형 및 OX 문제의 경우 항상 'Y' |
|
| 497 | 522 |
fileMngId: answers[i].fileMngId, |
| 498 | 523 |
}); |
| 499 | 524 |
} |
... | ... | @@ -511,7 +536,6 @@ |
| 511 | 536 |
|
| 512 | 537 |
resetPrblmDetail() {
|
| 513 | 538 |
this.prblmDetail = {
|
| 514 |
- |
|
| 515 | 539 |
answers: {
|
| 516 | 540 |
1: { text: '', isCorrect: 'Y', fileMngId: null },
|
| 517 | 541 |
2: { text: '', isCorrect: 'N', fileMngId: null },
|
... | ... | @@ -527,20 +551,20 @@ |
| 527 | 551 |
// 교재 정보 가져오기 |
| 528 | 552 |
fetchBooks() {
|
| 529 | 553 |
axios({
|
| 530 |
- url: "/book/findAll.json", |
|
| 531 |
- method: "post", |
|
| 554 |
+ url: '/book/findAll.json', |
|
| 555 |
+ method: 'post', |
|
| 532 | 556 |
headers: {
|
| 533 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 557 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 534 | 558 |
}, |
| 535 | 559 |
}) |
| 536 |
- .then(response => {
|
|
| 537 |
- console.log(response.data) |
|
| 560 |
+ .then((response) => {
|
|
| 561 |
+ console.log(response.data); |
|
| 538 | 562 |
this.books = response.data; |
| 539 | 563 |
this.text_id = ''; |
| 540 | 564 |
}) |
| 541 |
- .catch(error => {
|
|
| 542 |
- console.error("fetchBooks - error: ", error);
|
|
| 543 |
- alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
|
|
| 565 |
+ .catch((error) => {
|
|
| 566 |
+ console.error('fetchBooks - error: ', error);
|
|
| 567 |
+ alert('교재 목록을 불러오는 중 오류가 발생했습니다.');
|
|
| 544 | 568 |
}); |
| 545 | 569 |
}, |
| 546 | 570 |
|
... | ... | @@ -549,75 +573,72 @@ |
| 549 | 573 |
if (!this.book_id) return; |
| 550 | 574 |
|
| 551 | 575 |
axios({
|
| 552 |
- url: "/unit/unitList.json", |
|
| 553 |
- method: "post", |
|
| 576 |
+ url: '/unit/unitList.json', |
|
| 577 |
+ method: 'post', |
|
| 554 | 578 |
headers: {
|
| 555 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 579 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 556 | 580 |
}, |
| 557 | 581 |
data: {
|
| 558 |
- "bookId": this.book_id |
|
| 582 |
+ bookId: this.book_id, |
|
| 559 | 583 |
}, |
| 560 | 584 |
}) |
| 561 |
- .then(response => {
|
|
| 585 |
+ .then((response) => {
|
|
| 562 | 586 |
this.units = response.data; |
| 563 | 587 |
this.text_id = ''; |
| 564 | 588 |
}) |
| 565 |
- .catch(error => {
|
|
| 566 |
- console.error("fetchUnits - error: ", error);
|
|
| 567 |
- alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
|
|
| 589 |
+ .catch((error) => {
|
|
| 590 |
+ console.error('fetchUnits - error: ', error);
|
|
| 591 |
+ alert('단원 목록을 불러오는 중 오류가 발생했습니다.');
|
|
| 568 | 592 |
}); |
| 569 | 593 |
}, |
| 570 | 594 |
|
| 571 | 595 |
// 지문 정보 가져오기 |
| 572 | 596 |
fetchTexts() {
|
| 573 | 597 |
axios({
|
| 574 |
- url: "/text/textSearch.json", |
|
| 575 |
- method: "post", |
|
| 598 |
+ url: '/text/textSearch.json', |
|
| 599 |
+ method: 'post', |
|
| 576 | 600 |
headers: {
|
| 577 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 601 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 578 | 602 |
}, |
| 579 | 603 |
data: {
|
| 580 |
- "unitId": this.unit_id |
|
| 604 |
+ unitId: this.unit_id, |
|
| 581 | 605 |
}, |
| 582 | 606 |
}) |
| 583 |
- .then(response => {
|
|
| 607 |
+ .then((response) => {
|
|
| 584 | 608 |
this.texts = response.data.list; |
| 585 | 609 |
}) |
| 586 |
- .catch(error => {
|
|
| 587 |
- console.error("fetchTexts - error: ", error);
|
|
| 588 |
- alert("지문 목록을 불러오는 중 오류가 발생했습니다.");
|
|
| 610 |
+ .catch((error) => {
|
|
| 611 |
+ console.error('fetchTexts - error: ', error);
|
|
| 612 |
+ alert('지문 목록을 불러오는 중 오류가 발생했습니다.');
|
|
| 589 | 613 |
}); |
| 590 | 614 |
}, |
| 591 | 615 |
// 문제 유형 정보 가져오기 |
| 592 | 616 |
selectProblemType() {
|
| 593 | 617 |
axios({
|
| 594 |
- url: "/problem/selectType.json", |
|
| 595 |
- method: "post", |
|
| 618 |
+ url: '/problem/selectType.json', |
|
| 619 |
+ method: 'post', |
|
| 596 | 620 |
headers: {
|
| 597 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 621 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
| 598 | 622 |
}, |
| 599 | 623 |
}) |
| 600 |
- .then(response => {
|
|
| 624 |
+ .then((response) => {
|
|
| 601 | 625 |
this.problemType = response.data; |
| 626 |
+ console.log('문제 유형 : ', response.data);
|
|
| 602 | 627 |
}) |
| 603 |
- .catch(error => {
|
|
| 604 |
- console.error("selectProblemType - error: ", error);
|
|
| 628 |
+ .catch((error) => {
|
|
| 629 |
+ console.error('selectProblemType - error: ', error);
|
|
| 605 | 630 |
}); |
| 606 | 631 |
}, |
| 607 |
- |
|
| 608 | 632 |
}, |
| 609 | 633 |
watch: {
|
| 610 | 634 |
selectedSearchOption2() {
|
| 611 | 635 |
// 문제 유형이 변경될 때 prblmDetail 초기화 |
| 612 | 636 |
this.resetPrblmDetail(); |
| 613 | 637 |
}, |
| 614 |
- |
|
| 615 | 638 |
}, |
| 616 |
- computed: {
|
|
| 617 |
- |
|
| 618 |
- }, |
|
| 639 |
+ computed: {},
|
|
| 619 | 640 |
components: {
|
| 620 |
- SvgIcon |
|
| 641 |
+ SvgIcon, |
|
| 621 | 642 |
}, |
| 622 | 643 |
mounted() {
|
| 623 | 644 |
this.book_id = this.$route.query.book_id; |
... | ... | @@ -628,13 +649,12 @@ |
| 628 | 649 |
this.fetchUnits(); |
| 629 | 650 |
this.fetchTexts(); |
| 630 | 651 |
this.selectProblemType(); |
| 631 |
- } |
|
| 632 |
-} |
|
| 633 |
- |
|
| 652 |
+ }, |
|
| 653 |
+}; |
|
| 634 | 654 |
</script> |
| 635 | 655 |
<style scoped> |
| 636 | 656 |
.ui-checkbox {
|
| 637 | 657 |
width: 30px; |
| 638 | 658 |
height: 30px; |
| 639 | 659 |
} |
| 640 |
-</style>(파일 끝에 줄바꿈 문자 없음) |
|
| 660 |
+</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?