File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div>
<!-- <Side_t></Side_t> -->
<div style="padding: 15px 60px 120px 60px ">
<div class="flex justify-between align-center">
<div class="logo mb25"><img src="../../../resources/img/logo2.png" alt=""></div>
<Header></Header>
</div>
<div class="main-wrap flex justify-between">
<div class="gd-2">
<div class=" mb30">
<div>
<img src="../../../resources/img/img16_s.png" alt="">
<div class="mt10" style="width: 100%;">
<p class="name mb10">학생이름</p>
<p class="mb5">xx중학교 3학년 x반</p>
<progress-bar :progress="progress"></progress-bar>
<span @click="increaseProgress">오늘의 공부</span>
<span class="brown ml10">{{ progress }}%</span>
</div>
</div>
<hr>
<p class="title2 mb25">최근 학습 히스토리</p>
<ul class="flex justify-between ml30">
<li>자학사 3학년 2학기</li>
<li>자학사 3학년 2학기</li>
</ul>
<hr>
<div class="title-box flex justify-between mb20">
<p class="name">가나다학생 랭킹</p>
</div>
<div class="mypage mb30">
<div class=" flex-column " style="gap: 20px;">
<div class="textbook book-red">
<div class="text ">
<p class="title1" style="color: #fff;">포토북 랭킹</p>
</div>
<div class="box">
<P class="title2 mt10">현재 30명 중 <em class="red">2등</em>입니다.</P>
</div>
</div>
<div class="textbook ">
<div class="text ">
<p class="title1" style="color: #fff;">포토북 랭킹</p>
</div>
<div class="box">
<P class="title2 mt10">현재 30명 중 <em class="yellow">2등</em>입니다.</P>
</div>
</div>
<div class="textbook book-blue">
<div class="text ">
<p class="title1" style="color: #fff;">포토북 랭킹</p>
</div>
<div class="box">
<P class="title2 mt10">현재 30명 중 <em class="blue">2등</em>입니다.</P>
</div>
</div>
<div class="textbook book-navy">
<div class="text ">
<p class="title1" style="color: #fff;">포토북 랭킹</p>
</div>
<div class="box">
<P class="title2 mt10">현재 30명 중 <em class="navy">2등</em>입니다.</P>
</div>
</div>
</div>
</div>
<hr>
<div>
<div class="title-box flex justify-between mb20">
<p class="title">사진첩</p>
</div>
<div class="photobook">
<div class="flex justify-between">
<div class="box" style="gap: 5px;">
<div><img src="../../../resources/img/img198_12p.png" alt=""></div>
</div>
<div class="text mt10">
<p class="title1 mb10">나의 사진첩</p>
<button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button"
title="글쓰기" class="new-btn">
바로가기
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gd-9">
<div class="title-box flex justify-between mb40">
<p class="title">전체 진행률</p>
</div>
<div class="flex">
<div class="wrap">
<p class="name">학습 현황</p>
<div><Dounutchart/></div>
<div class="textbox">
<p class="title2">오늘의 학습현황</p>
<!-- 안전하게 진도율을 소수점 한자리 수까지 표시 -->
<p class="name">
{{ donutChartData.clearUnitNum && donutChartData.totalScheduleUnitNum
? (donutChartData.clearUnitNum / donutChartData.totalScheduleUnitNum * 100).toFixed(1)
: 0 }} %
</p>
</div>
<p class="title2">학습시간</p>
<p class="name">학습시간 n시간</p>
</div>
<div class="wrap">
<p class="name">이해/표현 점수</p>
<div>
<ColumnLineChart/>
</div>
</div>
</div>
<div class="wrap">
<p class="name">교재별 진행률</p>
<div>
<StackedBarChart />
</div>
</div>
<div class="flex">
<div class="wrap">
<p class="name">오늘의 학습 일정</p>
<div class="flex-column" style="gap: 20px;">
<div class=" flex justify-between align-center " style="gap: 70px;">
<div><img src="../../../resources/img/img217_22s.png" alt=""></div>
<div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }"
@click="toggleClicked" style="width: 100%;">
<div class="text-lf flex justify-between align-center ">
<div>
<div class="flex align-center mb10" style="gap: 10px;">
<p class="title2"><em class="gray-bd">1교시</em></p>
<p class="title1">9:00</p>
<p class="title1">~</p>
<p class="title1">10:00</p>
</div>
<div class="title-box mb10"> <span class="title">the best</span></div>
<p class="title2">wirte a</p>
</div>
<div class=""> <img src="../../../resources/img/img214_19s.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-column">
<div class="wrap">
<p class="name">교재별 오답률</p>
<Barchart />
</div>
<div class="wrap">
<p class="name">LC/RC 세부 점수</p>
<Bubblechart />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from '../../layout/Header.vue';
import Menu from '../../layout/Menu.vue';
import Side_t from '../../layout/Side_t.vue';
import ProgressBar from '../../component/ProgressBar.vue';
import StackedBarChart from './StackedBarChart.vue';
import Barchart from './Barchart.vue';
import Bubblechart from './Bubblechart.vue';
import Dounutchart from './Dounutchart.vue';
import ColumnLineChart from './ColumnLineChart.vue';
import axios from "axios";
export default {
data() {
return {
progress: 20,
donutChartData: {},
currentDate: "2024-08-14",
currentStdId: "1"
}
},
methods: {
increaseProgress() {
if (this.progress < 100) {
this.progress += 10;
}
},
// 현재 날짜의 학생 학습률 데이터 가져오기
getStdProgressData() {
const vm = this;
axios.post('/dashboard/stdProgressData.json', {
std_id: vm.currentStdId,
current_date: vm.currentDate
})
.then(response => {
vm.donutChartData = response.data;
console.log(vm.donutChartData);
})
.catch(error => {
console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
})
},
},
watch: {
},
computed: {
},
components: {
Header: Header,
Menu: Menu,
// Footer:Footer,
Side_t: Side_t,
ProgressBar,
StackedBarChart: StackedBarChart,
Barchart: Barchart,
Bubblechart: Bubblechart,
Dounutchart: Dounutchart,
ColumnLineChart: ColumnLineChart,
},
mounted() {
this.getStdProgressData();
}
}
</script>
<style scoped>
.main-wrap {
margin-top: 20px;
position: static;
width: 100%;
height: 100%;
}
</style>